Make SVGSymbolElement an SVGGraphicsElement

lilles · chromium-wpt-export-bot · commit fd3fcf841374 · 2025-10-29T13:18:50.000-07:00
Inheritance per SVG2 spec: https://svgwg.org/svg2-draft/single-page.html#struct-InterfaceSVGSymbolElement This is also in preparation for using a <symbol> element, not <svg>, when cloning <symbol> into a <use> shadow tree. Bug: 40168102, 4055003 Change-Id: I5fcbf98e47a7bdee15f6e2e82df81c92ad4655ee Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7084498 Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1537447}
diff --git a/svg/styling/symbol-g-graphics-element.html b/svg/styling/symbol-g-graphics-element.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>SVG Test: &lt;g&gt; and &lt;symbol&gt; are SVGGraphicsElements</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<svg>
+  <g transform="translate(200, 0)">
+    <rect width="100" height="100"></rect>
+  </g>
+  <symbol transform="translate(100, 0)">
+    <rect width="100" height="100"></rect>
+  </symbol>
+</svg>
+<script>
+  const g = document.querySelector("g");
+  const symbol = document.querySelector("symbol");
+  test(() => {
+    assert_equals(getComputedStyle(g).transform, "matrix(1, 0, 0, 1, 200, 0)");
+  }, "<g> element has transform presentation style from being an SVGGraphicsElement");
+  test(() => {
+    assert_equals(getComputedStyle(symbol).transform, "matrix(1, 0, 0, 1, 100, 0)");
+  }, "<symbol> element has transform presentation style from being an SVGGraphicsElement");
+</script>
diff --git a/svg/types/scripted/SVGGraphicsElement.getBBox-06.html b/svg/types/scripted/SVGGraphicsElement.getBBox-06.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>SVGGraphicsElement.prototype.getBBox for non-rendered elements</title>
+<link rel="help" href="https://svgwg.org/svg2-draft/coords.html#BoundingBoxes">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500px" height="500px">
+  <symbol id="symbol1">
+    <rect id="symbol1_rect" x="50" y="60" width="100" height="150"></rect>
+  </symbol>
+  <g id="g_none" style="display:none">
+    <rect id="g_none_rect" x="70" y="80" width="200" height="250"></rect>
+  </g>
+  <rect id="none_rect" x="90" y="100" width="20" height="25" display="none"></rect>
+</svg>
+<script>
+  function assert_bbox(id, opt, x, y, width, height, epsilon) {
+    if (epsilon == undefined) {
+      epsilon = 0.1;
+    }
+    let bbox = document.getElementById(id).getBBox();
+    assert_approx_equals(bbox.x, x, epsilon, id + ".getBBox().x " + JSON.stringify(opt));
+    assert_approx_equals(bbox.y, y, epsilon, id + ".getBBox().y " + JSON.stringify(opt));
+    assert_approx_equals(bbox.width, width, epsilon, id + ".getBBox().width " + JSON.stringify(opt));
+    assert_approx_equals(bbox.height, height, epsilon, id + ".getBBox().height " + JSON.stringify(opt));
+  }
+
+  test(() => {
+    assert_bbox("symbol1", {}, 0, 0, 0, 0);
+    assert_bbox("symbol1_rect", {}, 50, 60, 100, 150);
+  }, "Non-rendered symbol with rect");
+
+  test(() => {
+    assert_bbox("g_none", {}, 0, 0, 0, 0);
+    assert_bbox("g_none_rect", {}, 70, 80, 200, 250);
+  }, "display:none <g> with rect");
+
+  test(() => {
+    assert_bbox("none_rect", {}, 90, 100, 20, 25);
+  }, "display:none <rect>");
+</script>
