Fix percentage based stroke-width in SVG shapes upon viewbox change

Vinay Singh · chromium-wpt-export-bot · commit f90da827b665 · 2025-03-28T02:26:23.000-07:00
When svg elements are rendered with relative (percentage based)
stroke-width, it isn't being recalculated on viewbox change.
This poses an issue when the size of the viewbox changes such that
the size of new viewbox differs from the original viewbox. In this
scenario, the paint isn't invalidated and thus stroke is scaled
wrongly and not adjusting well with the viewport.

We have implemented a `bool ComputeHasRelativeLengths()` and used it
in the LayoutSVGShape such that it uses the stroke-width data to
determine if the current SVG element Layout has relative values and
uses the same to trigger paint recalculation upon viewbox update.

Bug: 384605094
Change-Id: I095c3d927af99e2b9ff1bf4acf086b61ed6d980a
diff --git a/svg/painting/svg-percent-stroke-width-viewbox-update-ref.html b/svg/painting/svg-percent-stroke-width-viewbox-update-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<svg height="100" width="100" viewBox="40 40 20 20">
+  <polyline stroke-width="10%" stroke="gold" points="20,20 80,80"></polyline>
+</svg>
+<svg height="100" width="100" viewBox="40 40 20 20">
+  <polyline stroke-width="calc(5% + 5px)" stroke="gold" points="20,20 80,80"></polyline>
+</svg>
+<svg height="100" width="100" viewBox="40 40 20 20">
+  <circle stroke-width="10%" stroke="gold" cx="50" cy="50" r="10" fill="none"></circle>
+</svg>
+<svg height="100" width="100" viewBox="40 40 20 20">
+  <rect stroke-width="10%" stroke="gold" x="40" y="40" width="20" height="10" fill="none"></rect>
+</svg>
diff --git a/svg/painting/svg-percent-stroke-width-viewbox-update.html b/svg/painting/svg-percent-stroke-width-viewbox-update.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>
+  A percentage stroke-width is updated when the viewport (viewBox) is updated.
+</title>
+<link rel="help" href="http://crbug.com/384605094">
+<link rel="help" href="https://www.w3.org/TR/SVG/painting.html#StrokeWidth">
+<link rel="help" href="https://www.w3.org/TR/SVG/coords.html#Units">
+<link rel="match" href="svg-percent-stroke-width-viewbox-update-ref.html">
+<script src="/common/rendering-utils.js"></script>
+
+<svg id="svgPolyRoot" height="100" width="100" viewBox="30 30 40 40">
+  <polyline stroke-width="10%" stroke="gold" points="20,20 80,80"></polyline>
+</svg>
+<svg id="svgPolyWithCalcStrokeWidthRoot" height="100" width="100" viewBox="30 30 40 40">
+  <polyline stroke-width="calc(5% + 5px)" stroke="gold" points="20,20 80,80"></polyline>
+</svg>
+<svg id="svgCircleRoot" height="100" width="100" viewBox="30 30 40 40">
+  <circle stroke-width="10%" stroke="gold" cx="50" cy="50" r="10" fill="none"></circle>
+</svg>
+<svg id="svgRectRoot" height="100" width="100" viewBox="30 30 40 40">
+  <rect stroke-width="10%" stroke="gold" x="40" y="40" width="20" height="10" fill="none"></rect>
+</svg>
+
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    document.getElementById("svgPolyRoot").setAttribute("viewBox", "40 40 20 20");
+    document.getElementById("svgPolyWithCalcStrokeWidthRoot").setAttribute("viewBox", "40 40 20 20");
+    document.getElementById("svgCircleRoot").setAttribute("viewBox", "40 40 20 20");
+    document.getElementById("svgRectRoot").setAttribute("viewBox", "40 40 20 20");
+  });
+</script>
