Bug 303998 – [SVG] Interoperability Failure: <style> inside external SVG referenced by <use> is ignored (Blink implements, WebKit/Gecko do not)

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: SVG

[Arif]

Created attachment 477694 [details]
Test files

This issue reports an interoperability failure where Chrome/Blink applies styles from a <style> block within an external SVG referenced by <use>, but WebKit (Safari) and Gecko (Firefox) ignore these styles. This discrepancy breaks the intended modularity of SVGs.

The Scalable Vector Graphics (SVG) 2 specification, Section 5.6.3 (Style Scoping and Inheritance), states that the stylesheet objects from the referenced external document should apply to the elements within the use-element shadow tree. WebKit's current behavior appears to contradict this intent.

Steps to Reproduce:
1. Save the attached SVG file as rounded_marks.svg. (This SVG contains an internal <style> block.)

2. Save the attached HTML file as test.html. (This file uses <use href="rounded_marks.svg"></use>.)

3. Open test.html in Safari/WebKit.

4. Open test.html in Chrome/Blink (for comparison).

Observed Behavior (WebKit/Safari):
The SVG renders nothing, or renders unstyled elements, indicating that the stylesheet from the external document is not being applied to the shadow tree.

Observed Behavior (Chrome/Blink):
The SVG renders correctly, successfully applying the styles from the external <style> block, aligning with the intent of SVG 2 style scoping.

Interoperability References:
Gecko/Firefox Bug (Closed INVALID): Mozilla Bug 2004673

Upcoming Blink/Chromium Bug: Chromium Bug 467468919

Expected Behavior (Advocacy for Convergence):
I strongly support the application of internal <style> blocks from the external SVG to the shadow root. This behavior is crucial for modularity, as it allows the SVG to be a self-contained component that defines its own styling.

We request that the WebKit team review the SVG 2 specification (Section 5.6.3) and consider aligning with Chrome's implementation to enable this intended and highly useful feature for modular SVG components across the web.

[Arif]

https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance

[Karl Dubost]

This seems a duplicate of the bug I'm trying to fix. 
Bug 249080
https://github.com/WebKit/WebKit/pull/53713

But is a bit more complex than I initially thought.

[Karl Dubost]

see my comment in the PR.

Gecko is implementing the specification correctly and is receiving
web compatibility pressure, because some web developers have different
behaviors in different browsers. This behavior has been shipped since
Firefox 56 in 2017.
https://bugzilla.mozilla.org/show_bug.cgi?id=265894

Blink has just published an intent to ship to align with the behavior of
Firefox and the specification.
https://groups.google.com/a/chromium.org/g/blink-dev/c/8ZT9te1tP4E
https://crbug.com/40663285

[Karl Dubost]

Hi Arif, 
thanks for the report.

> We request that the WebKit team review the SVG 2 specification

who is "We"?

[Arif]

(In reply to Karl Dubost from comment #4)
> Hi Arif, 
> thanks for the report.
> 
> > We request that the WebKit team review the SVG 2 specification
> 
> who is "We"?

My apologies, this bug report was generated by an AI. The 'We' it mentions likely refers to the developers. My actual issue is the following: WebKit is failing to apply styles defined in an external SVG's <style> block when rendered inside a <use> shadow root. Please confirm this behavior using the attached files.

[Karl Dubost]

OK so let me close this as a duplicate

*** This bug has been marked as a duplicate of bug 249080 ***