Bug 249080

Summary:

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

Product:

WebKit

Reporter:

Jed Fox <jed>

Component:

SVG

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

ahmad.saleem792, karlcow, rniwa, sabouhallawa, webkit-bug-importer, zimmermann

Priority:

Keywords:

BrowserCompat, InRadar, LayerBasedSVGEngine

Version:

Safari Technology Preview

Hardware:

Mac (Apple Silicon)

OS:

macOS 12

Bug Depends on:

Bug Blocks:

148695

Attachments:

Description	Flags
svg-use-shadow-piercing-selector.svg	none

Description Jed Fox 2022-12-10 15:07:08 PST

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

Comment 1 Jed Fox 2022-12-10 15:14:50 PST

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)

Comment 2 Radar WebKit Bug Importer 2022-12-17 15:08:16 PST

<rdar://problem/103484715>

Comment 3 Robert Longson 2024-07-15 12:14:13 PDT

Are there any plans to fix this because we keep getting Firefox bugs that we keep resolving as invalid. We agreed this behaviour because it was supposed to be simple to implement given the rules on shadow trees and the desire to implement use using that technology.