WebKit export: SVGLengthValue includes zoom when resolving rem and em units (#55802)

nt1m · nullhook · web-flow · commit 38c43426a9fb · 2025-11-01T16:06:29.000Z
https://bugs.webkit.org/show_bug.cgi?id=298102 Co-authored-by: Taher Ali <taher_ali@apple.com>
diff --git a/css/css-viewport/zoom/svg-font-relative-units-ref.html b/css/css-viewport/zoom/svg-font-relative-units-ref.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  :root {
+    font: 10px/1 Ahem;
+  }
+  body { margin: 0 }
+  .container {
+    font-size: 20px;
+  }
+  line {
+    stroke-width: 8px;
+    stroke: lime;
+  }
+  svg {
+    background-color: black;
+  }
+</style>
+<div class="container">
+  <svg width=400 height=400>
+    <line y1=40  y2=40  x1=0 x2=80 />
+    <line y1=120 y2=120 x1=0 x2=80 />
+    <line y1=140 y2=140 x1=0 x2=80 />
+
+    <line y1=220 y2=220 x1=0 x2=40 />
+    <line y1=240 y2=240 x1=0 x2=40 />
+    <line y1=280 y2=280 x1=0 x2=40 />
+    <line y1=300 y2=300 x1=0 x2=40 />
+  </svg>
+</div>
diff --git a/css/css-viewport/zoom/svg-font-relative-units.html b/css/css-viewport/zoom/svg-font-relative-units.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<link rel="match" href="svg-font-relative-units-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  :root {
+    font: 10px/1 Ahem;
+    zoom: 2;
+  }
+  body { margin: 0 }
+  .container {
+    font-size: 20px;
+  }
+  .child {
+    zoom: 2;
+  }
+  line {
+    stroke-width: 2px;
+    stroke: lime;
+  }
+  svg {
+    background-color: black;
+  }
+</style>
+<div class="container">
+  <div class="child">
+    <svg width=100 height=100>
+      <!-- Font-relative units -->
+      <line y1=10 y2=10 x1=0 x2=1em />
+      <line y1=30 y2=30 x1=0 x2=1ch />
+      <line y1=35 y2=35 x1=0 x2=1ic />
+
+      <!-- Root font-relative units -->
+      <line y1=55 y2=55 x1=0 x2=1rch />
+      <line y1=60 y2=60 x1=0 x2=1rem />
+      <line y1=70 y2=70 x1=0 x2=1ric />
+      <line y1=75 y2=75 x1=0 x2=1rlh />
+    </svg>
+  </div>
+</div>
