Bug 201918 - A dynamic change in a CSS property of an SVGElement does not get reflected in the instances of the SVGElement
Summary: A dynamic change in a CSS property of an SVGElement does not get reflected in...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Blocks: 200143
  Show dependency treegraph
Reported: 2019-09-18 09:18 PDT by Said Abou-Hallawa
Modified: 2019-09-18 16:46 PDT (History)
2 users (show)

See Also:

change-fill-property-dynamic (342 bytes, image/svg+xml)
2019-09-18 09:18 PDT, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Said Abou-Hallawa 2019-09-18 09:18:52 PDT
Created attachment 379043 [details]

Open the attached test case.

Result: Two rectangles one green and the other is red.
Expected: Two green rectangles.

The test case has a <rect> element with the CSS property fill="red". There is also a <use> element which references the <rect> element. When the document is loaded, the value of CSS property "fill" of the <rect> element is changed to "green".  The bug is, the. shadow tree of the <use> element which includes an instances of the <rect> element does not get updated.

We need to call SVGUseElement::invalidateShadowTree() after changing the CSS property the same way we do in SVGElement::svgAttributeChanged().

This works:
    rect.setAttribute('fill', 'green');

But this does not work:
    rect.style['fill'] = 'green';