[Webkit-unassigned] [Bug 249080] New: CSS selectors should not pierce the shadow root created by the SVG <use> element

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=249080

            Bug ID: 249080
           Summary: CSS selectors should not pierce the shadow root
                    created by the SVG <use> element
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Mac (Apple Silicon)
                OS: macOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: SVG
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jed at jedfox.com
                CC: sabouhallawa at apple.com, zimmermann at kde.org

Created attachment 463980

  --> https://bugs.webkit.org/attachment.cgi?id=463980&action=review

svg-use-shadow-piercing-selector.svg

I attempted to apply some CSS styles to SVG elements included via the <use> SVG element with a selector that includes elements both outside and inside the <use> shadow root. While this sort of style worked for me in both Chrome and Safari, I discovered that it does not work in Firefox. I first filed this bug against Firefox/Gecko but they clarified that FF matches the spec, while Chrome/Safari don’t. Specifically,

> I'm afraid we're right and Chrome is wrong here. Per https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance
> > ...if a CSS rule uses a complex selector to match an element based on its ancestors or siblings, and those ancestors or siblings are not cloned as part of the shadow tree, then that rule would no longer match the element instance.

See the attached SVG for a demonstration of this behavior. The SVG contains an inline <style> rule `svg rect { fill: red; }`, and, inside a <defs>, a <rect> with `fill="green"`. The <rect> is then included via a <use> tag into the visible image. On Firefox, the `fill: red` rule is not applied, so the <rect> remains green. On Chrome and Safari, the rule is applied, changing the <rect> to be red.

Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1805048
Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=785246
possibly related: bug 78902

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20221210/9f7d67c4/attachment.htm>