SVG Text NG: Fix text layout after <svg> transform change

If 'transform' property of the owner <svg> is changed, and <text> is painted without laying out, the content was painted at a wrong position because the <text> kept positions computed with the old scaling factor. This CL fixes it by invalidating <text> layout on 'transform' changes on the owner <svg>. This CL is similar to crrev.com/942976 but for <svg>, not for containing blocks. Bug: 1271931 Change-Id: Iefc7d9b50a8474ed536be2267ad7e5e237ed2546 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3293550 Commit-Queue: Kent Tamura <[email protected]> Commit-Queue: Koji Ishii <[email protected]> Commit-Queue: Yoshifumi Inoue <[email protected]> Auto-Submit: Kent Tamura <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Reviewed-by: Yoshifumi Inoue <[email protected]> Cr-Commit-Position: refs/heads/main@{#943987}
web-platform-tests · Nov 23, 2021 · 10a1575 · 10a1575
1 parent 295ea97
commit 10a1575
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/svg/text/reftests/transform-dynamic-change-ref.html b/svg/text/reftests/transform-dynamic-change-ref.html
@@ -7,5 +7,9 @@
     <text fill="red" style="font-size: 40px;" transform="matrix(1, 0, 0, 1, 468, 988)">A</text>
   </svg>
 </div>
+
+<svg width="500" height="400" style="transform-origin: 0px 0px; transform: scale(2) translate(-300px, -300px);">
+  <text x="300" y="350" font-size="50" fill="green">PASS</text>
+</svg>
 </body>
 </html>
diff --git a/svg/text/reftests/transform-dynamic-change.html b/svg/text/reftests/transform-dynamic-change.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1270713">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1271931">
 <link rel="match" href="transform-dynamic-change-ref.html">
 <body>
 
@@ -11,11 +12,18 @@
   </svg>
 </div>
 
+<svg id="svg2" width="500" height="400" style="transform-origin: 0px 0px; transform: translate(-300px, -300px);">
+  <text x="300" y="350" id="text2" font-size="50">PASS</text>
+</svg>
+
 <script>
 requestAnimationFrame(() => {
   requestAnimationFrame(() => {
     document.getElementById('moveme').style.transform = 'matrix(0.9, 0, 0, 0.9, -210, -777)';
     document.getElementById('txt').style.fill = 'red';
+
+    document.getElementById('svg2').style.transform = 'scale(2) translate(-300px, -300px)';
+    document.getElementById('text2').style.fill = 'green';
     document.documentElement.classList.remove('reftest-wait');
   });
 });