LibWeb: Do not render SVG <symbol> elements unless part of <use>

gmta · gmta · commit 39ad7833f09a · 2025-11-27T07:55:29.000+01:00
We were always rendering &lt;symbol&gt; SVG elements, but we should only
render them if they are a child of a &lt;use&gt;'s shadow root. This caused
practically all instances of &lt;symbol&gt; to be drawn at least one time too
many.
diff --git a/Libraries/LibWeb/SVG/SVGSymbolElement.cpp b/Libraries/LibWeb/SVG/SVGSymbolElement.cpp
@@ -62,7 +62,12 @@ bool SVGSymbolElement::is_direct_child_of_use_shadow_tree() const
 
 GC::Ptr<Layout::Node> SVGSymbolElement::create_layout_node(GC::Ref<CSS::ComputedProperties> style)
 {
-    return heap().allocate<Layout::SVGGraphicsBox>(document(), *this, move(style));
+    // https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement
+    // [..] it also includes a ‘symbol’ element that is not the instance root of a use-element shadow tree.
+    if (!is_direct_child_of_use_shadow_tree())
+        return {};
+
+    return heap().allocate<Layout::SVGGraphicsBox>(document(), *this, style);
 }
 
 }
diff --git a/Tests/LibWeb/Layout/expected/layout-tree-update/simple-update-inside-svg-subtree.txt b/Tests/LibWeb/Layout/expected/layout-tree-update/simple-update-inside-svg-subtree.txt
@@ -3,18 +3,20 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-
     BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 150 0+0+8] children: inline
       frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 300x150] baseline: 150
       SVGSVGBox <svg> at [8,8] [0+0+0 300 0+0+0] [0+0+0 150 0+0+0] [SVG] children: inline
-        SVGGraphicsBox <symbol> at [8,8] [0+0+0 300 0+0+0] [0+0+0 150 0+0+0] [BFC] children: inline
-          InlineNode <set#set> at [8,8] [0+0+0 0 0+0+0] [0+0+0 18 0+0+0]
-            TextNode <#text> (not painted)
+        SVGGraphicsBox <use> at [8,8] [0+0+0 300 0+0+0] [0+0+0 150 0+0+0] children: not-inline
+          SVGGraphicsBox <symbol#a> at [8,8] [0+0+0 300 0+0+0] [0+0+0 150 0+0+0] [BFC] children: inline
+            InlineNode <set#set> at [8,8] [0+0+0 0 0+0+0] [0+0+0 18 0+0+0]
+              TextNode <#text> (not painted)
         TextNode <#text> (not painted)
         TextNode <#text> (not painted)
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x166]
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x150]
       SVGSVGPaintable (SVGSVGBox<svg>) [8,8 300x150]
-        SVGGraphicsPaintable (SVGGraphicsBox<symbol>) [8,8 300x150]
-          PaintableWithLines (InlineNode<set>#set) [8,8 0x18]
+        SVGGraphicsPaintable (SVGGraphicsBox<use>) [8,8 300x150]
+          SVGGraphicsPaintable (SVGGraphicsBox<symbol>#a) [8,8 300x150]
+            PaintableWithLines (InlineNode<set>#set) [8,8 0x18]
 
 SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
  SC for BlockContainer<HTML> [0,0 800x166] [children: 0] (z-index: auto)
diff --git a/Tests/LibWeb/Layout/expected/svg/svg-symbol-without-use.txt b/Tests/LibWeb/Layout/expected/svg/svg-symbol-without-use.txt
@@ -0,0 +1,16 @@
+Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-inline
+  BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 166 0+0+0] [BFC] children: not-inline
+    BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 150 0+0+8] children: inline
+      frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 300x150] baseline: 150
+      SVGSVGBox <svg> at [8,8] [0+0+0 300 0+0+0] [0+0+0 150 0+0+0] [SVG] children: inline
+        TextNode <#text> (not painted)
+        TextNode <#text> (not painted)
+      TextNode <#text> (not painted)
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x166]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x150]
+      SVGSVGPaintable (SVGSVGBox<svg>) [8,8 300x150]
+
+SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
+ SC for BlockContainer<HTML> [0,0 800x166] [children: 0] (z-index: auto)
diff --git a/Tests/LibWeb/Layout/input/layout-tree-update/simple-update-inside-svg-subtree.html b/Tests/LibWeb/Layout/input/layout-tree-update/simple-update-inside-svg-subtree.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<body><svg><symbol><set id="set"></set></symbol></body>
+<body><svg><symbol id="a"><set id="set"></set></symbol><use href="#a"></use></body>
 <script>
     document.body.offsetWidth;
     set.prepend("x");
diff --git a/Tests/LibWeb/Layout/input/svg/svg-symbol-without-use.html b/Tests/LibWeb/Layout/input/svg/svg-symbol-without-use.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<svg xmlns="http://www.w3.org/2000/svg">
+    <symbol viewBox="0 0 16 16">
+        <rect x="1" y="1" width="14" height="14" fill="red" />
+    </symbol>
+</svg>

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,12 @@ bool SVGSymbolElement::is_direct_child_of_use_shadow_tree() const`
`62`	`62`
`63`	`63`	`GC::Ptr<Layout::Node> SVGSymbolElement::create_layout_node(GC::Ref<CSS::ComputedProperties> style)`
`64`	`64`	`{`
`65`		`- return heap().allocate<Layout::SVGGraphicsBox>(document(), *this, move(style));`
	`65`	`+ // https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement`
	`66`	`+ // [..] it also includes a ‘symbol’ element that is not the instance root of a use-element shadow tree.`
	`67`	`+ if (!is_direct_child_of_use_shadow_tree())`
	`68`	`+ return {};`
	`69`	`+`
	`70`	`+ return heap().allocate<Layout::SVGGraphicsBox>(document(), *this, style);`
`66`	`71`	`}`
`67`	`72`
`68`	`73`	`}`