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';
Failed WPT test: https://wpt.fyi/results/svg/render/reftests/change-sync-for-nested-use.html?label=experimental&label=master&aligned
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!
<rdar://problem/98577657>