Bug 201918

Summary: A dynamic change in a CSS property of an SVGElement does not get reflected in the instances of the SVGElement
Product: WebKit Reporter: Said Abou-Hallawa <sabouhallawa>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, rniwa, simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar, WPTImpact
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=180729
Bug Depends on:    
Bug Blocks: 200143    
Attachments:
Description Flags
change-fill-property-dynamic none

Description Said Abou-Hallawa 2019-09-18 09:18:52 PDT
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';
Comment 2 Ahmad Saleem 2022-08-12 08:58:16 PDT
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!
Comment 3 Radar WebKit Bug Importer 2022-08-12 11:05:54 PDT
<rdar://problem/98577657>