CSS selectors should not pierce the shadow root created by the SVG <use> element

• Component: SVG
• Status: NEW ---

[Jed Fox]

Created attachment 463980 [details]
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

[Jed Fox]

Tested on macOS 12.6.1 (21G217).

fails:
Safari Technology Preview Release 159 (Safari 16.4, WebKit 17615.1.12.130.1)
WebKit 257686
Safari Version 16.1 (17614.2.9.1.13, 17614)
Chrome Version 108.0.5359.98 (Official Build) (arm64)

passes:
Firefox 107.0.1 (64-bit)

[Radar WebKit Bug Importer]

<rdar://problem/103484715>