Bug 201918 – A dynamic change in a CSS property of an SVGElement does not get reflected in the instances of the SVGElement

• Status: NEW
• Component: SVG

[Said Abou-Hallawa]

Created attachment 379043 [details]
change-fill-property-dynamic

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';

[Said Abou-Hallawa]

Failed WPT test:

https://wpt.fyi/results/svg/render/reftests/change-sync-for-nested-use.html?label=experimental&label=master&aligned

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 and Safari Technical Preview 151 using attached test case and Safari show one green and one red rectangles while all other browsers (Chrome Canary 106 and Firefox Nightly 105) show two green boxes. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/98577657>