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
Keywords: InRadar, WPTImpact
Depends on:
Blocks: 200143
  Show dependency treegraph
Reported: 2019-09-18 09:18 PDT by Said Abou-Hallawa
Modified: 2022-11-03 15:02 PDT (History)
7 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';
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