Setting the "vector-effect" attribute in the SVG <text> tag to "non-s…

…caling-stroke" has no effect

https://bugs.webkit.org/show_bug.cgi?id=139322

Reviewed by Rob Buis.

Add missing <text> support for vector-effect: non-scaling-stroke.
Take into account deviceScaleFactor / pageZoomFactor / text-rendering: geometricPrecision.

This brings us on-par with Gecko, which had excellent support for this feature,
and a bit further than Blink (which is broken when applying text-rendering: geometricPrecision
and vector-effect: non-scaling-stroke at the same time).

Cover all corner cases with tests: repaint rects, page zoom handling, gradients-on-text,
text decoration, etc.

* LayoutTests/fast/repaint/resources/async-text-based-repaint.js: Added.
(runRepaintTest):
(finishRepaintTest):
Like text-based-repaint.js, but supporting async execution.

* LayoutTests/platform/glib/TestExpectations:
* LayoutTests/platform/glib/svg/repaint/repaint-non-scaling-stroke-text-decoration-expected.txt: Added.
* LayoutTests/platform/glib/svg/repaint/repaint-non-scaling-stroke-text-expected.txt: Added.
* LayoutTests/platform/ios/svg/repaint/repaint-non-scaling-stroke-text-decoration-expected.txt: Added.
* LayoutTests/platform/ios/svg/repaint/repaint-non-scaling-stroke-text-expected.txt: Added.
* LayoutTests/platform/mac-ventura-wk2-lbse-text/svg/repaint/repaint-non-scaling-stroke-text-decoration-expected.txt: Added.
* LayoutTests/platform/mac-ventura-wk2-lbse-text/svg/repaint/repaint-non-scaling-stroke-text-expected.txt: Added.
Updated expectations / add new results based on EWS run.

* LayoutTests/svg/repaint/repaint-non-scaling-stroke-text-decoration-expected.txt: Added.
* LayoutTests/svg/repaint/repaint-non-scaling-stroke-text-decoration.html: Added.
* LayoutTests/svg/repaint/repaint-non-scaling-stroke-text-expected.txt: Added.
* LayoutTests/svg/repaint/repaint-non-scaling-stroke-text.html: Added.
Imported from Blink -- modified to use 'async-text-based-repaint.js'.

* LayoutTests/svg/stroke/non-scaling-stroke-gradient-text-expected.html: Added.
* LayoutTests/svg/stroke/non-scaling-stroke-gradient-text.html: Added.
* LayoutTests/svg/stroke/non-scaling-stroke-text-decoration-expected.html: Added.
* LayoutTests/svg/stroke/non-scaling-stroke-text-decoration.html: Added.
* LayoutTests/svg/stroke/non-scaling-stroke-text-expected.html: Added.
* LayoutTests/svg/stroke/non-scaling-stroke-text.html: Added.
Imported from Blink.

* LayoutTests/svg/text/non-scaling-stroke-textRendering-default-expected.svg: Added.
* LayoutTests/svg/text/non-scaling-stroke-textRendering-default.svg: Added.
* LayoutTests/svg/text/non-scaling-stroke-textRendering-geometricPrecision-expected.svg: Added.
* LayoutTests/svg/text/non-scaling-stroke-textRendering-geometricPrecision.svg: Added.
* LayoutTests/svg/zoom/page/non-scaling-stroke-textRendering-default-expected.svg: Added.
* LayoutTests/svg/zoom/page/non-scaling-stroke-textRendering-default.svg: Added.
* LayoutTests/svg/zoom/page/non-scaling-stroke-textRendering-geometricPrecision-expected.svg: Added.
* LayoutTests/svg/zoom/page/non-scaling-stroke-textRendering-geometricPrecision.svg: Added.
* LayoutTests/svg/zoom/page/text-with-non-scaling-stroke-expected.html: Added.
* LayoutTests/svg/zoom/page/text-with-non-scaling-stroke.html: Added.
New tests based on Said testcase.

* Source/WebCore/rendering/svg/RenderSVGInlineText.cpp:
(WebCore::RenderSVGInlineText::computeScalingFactorForRenderer): Expose, needed by SVGInlineTextBox.
(WebCore::RenderSVGInlineText::computeNewScaledFontForStyle): Turn lambda into exposed static function.
* Source/WebCore/rendering/svg/RenderSVGInlineText.h:
* Source/WebCore/rendering/svg/SVGInlineTextBox.cpp:
(WebCore::SVGInlineTextBox::acquirePaintingResource): Handle non-scaling-stroke for text.

 * LayoutTests/svg/zoom/page/text-with-non-scaling-stroke.html:

Canonical link: https://commits.webkit.org/265204@main

LayoutTests/fast/repaint/resources/async-text-based-repaint.js

@@ -0,0 +1,39 @@
+// Version of text-based-repaint.js that runs the repaint test asynchronously.
+if (window.testRunner)
+    testRunner.waitUntilDone();
+
+function runRepaintTest()
+{
+    if (window.testRunner && window.internals) {
+        window.testRunner.dumpAsText(false);
+
+        if (document.body)
+            document.body.offsetTop;
+        else if (document.documentElement)
+            document.documentElement.offsetTop;
+
+        window.internals.startTrackingRepaints();
+        setTimeout(repaintTest, 0)
+    } else {
+        setTimeout(repaintTest, 100);
+    }
+}
+
+function finishRepaintTest()
+{
+    // force a style recalc.
+    var dummy = document.body.offsetTop;
+
+    if (!window.internals)
+        return;
+
+    var repaintRects = window.internals.repaintRectsAsText();
+
+    window.internals.stopTrackingRepaints();
+
+    var pre = document.createElement('pre');
+    document.body.appendChild(pre);
+    pre.innerHTML = repaintRects;
+
+    testRunner.notifyDone();
+}

LayoutTests/platform/glib/TestExpectations

@@ -1541,6 +1541,13 @@ svg/transforms/translation-tiny-element.svg [ ImageOnlyFailure ]
 # The following test only works with LBSE activated -- text transform changes fail to repaint using the legacy engine.
 svg/repaint/text-repainting-after-modifying-transform.html [ ImageOnlyFailure ]
 
+# Gradient+text have placing issues in gtk/wpe.
+webkit.org/b/139322 svg/stroke/non-scaling-stroke-gradient-text.html [ ImageOnlyFailure ]
+
+# 'text-rendering: geometricPrecision' different ligatures/kerning used in actual/expected reftest - probably a different font in the test could help, postponing for further investigation.
+webkit.org/b/139322 svg/zoom/page/non-scaling-stroke-textRendering-geometricPrecision.svg [ ImageOnlyFailure ]
+webkit.org/b/139322 svg/text/non-scaling-stroke-textRendering-geometricPrecision.svg [ ImageOnlyFailure ]
+
 #////////////////////////////////////////////////////////////////////////////////////////
 # End of SVG-related bugs
 #////////////////////////////////////////////////////////////////////////////////////////

LayoutTests/platform/glib/svg/repaint/repaint-non-scaling-stroke-text-decoration-expected.txt

@@ -0,0 +1,9 @@
+Hello
+ (repaint rects
+  (rect 9 12 48 29)
+  (rect 9 12 4 29)
+  (rect 53 12 4 29)
+  (rect 9 12 48 4)
+  (rect 9 37 48 4)
+)
+

LayoutTests/platform/glib/svg/repaint/repaint-non-scaling-stroke-text-expected.txt

@@ -0,0 +1,9 @@
+Hello
+ (repaint rects
+  (rect 9 12 48 29)
+  (rect 9 12 4 29)
+  (rect 53 12 4 29)
+  (rect 9 12 48 4)
+  (rect 9 37 48 4)
+)
+

LayoutTests/platform/ios/svg/repaint/repaint-non-scaling-stroke-text-decoration-expected.txt

@@ -0,0 +1,9 @@
+Hello
+ (repaint rects
+  (rect 9 12 48 29)
+  (rect 9 12 4 29)
+  (rect 53 12 4 29)
+  (rect 9 12 48 4)
+  (rect 9 37 48 4)
+)
+

LayoutTests/platform/ios/svg/repaint/repaint-non-scaling-stroke-text-expected.txt

@@ -0,0 +1,9 @@
+Hello
+ (repaint rects
+  (rect 9 12 48 29)
+  (rect 9 12 4 29)
+  (rect 53 12 4 29)
+  (rect 9 12 48 4)
+  (rect 9 37 48 4)
+)
+

LayoutTests/platform/mac-ventura-wk2-lbse-text/svg/repaint/repaint-non-scaling-stroke-text-decoration-expected.txt

@@ -0,0 +1,6 @@
+Hello
+ (repaint rects
+  (rect 13 16 40 22)
+  (rect 9 12 48 30)
+)
+

LayoutTests/platform/mac-ventura-wk2-lbse-text/svg/repaint/repaint-non-scaling-stroke-text-expected.txt

@@ -0,0 +1,6 @@
+Hello
+ (repaint rects
+  (rect 13 16 40 22)
+  (rect 9 12 48 30)
+)
+

LayoutTests/svg/repaint/repaint-non-scaling-stroke-text-decoration-expected.txt

@@ -0,0 +1,9 @@
+Hello
+ (repaint rects
+  (rect 9 12 48 30)
+  (rect 9 12 4 30)
+  (rect 53 12 4 30)
+  (rect 9 12 48 4)
+  (rect 9 38 48 4)
+)
+

LayoutTests/svg/repaint/repaint-non-scaling-stroke-text-decoration.html

@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<script src="../../fast/repaint/resources/async-text-based-repaint.js"></script>
+<script>
+window.onload = runRepaintTest;
+function repaintTest() {
+    document.getElementById('t').setAttribute("stroke", "blue");
+    document.getElementById('t').setAttribute("vector-effect", "non-scaling-stroke");
+    document.getElementById('t').setAttribute("stroke-width", "8");
+    requestAnimationFrame(function() {
+        if (window.testRunner)
+            finishRepaintTest();
+    });
+};
+</script>
+<body>
+<svg>
+    <g transform="scale(0.5 0.5)">
+       <text id="t" x="10" y="50" stroke="none" stroke-width="2" fill="none" font-size="36" vector-effect="none" text-decoration="underline">Hello</text>
+    </g>
+</svg>
+</body>
+</html>

LayoutTests/svg/repaint/repaint-non-scaling-stroke-text-expected.txt

@@ -0,0 +1,9 @@
+Hello
+ (repaint rects
+  (rect 9 12 48 30)
+  (rect 9 12 4 30)
+  (rect 53 12 4 30)
+  (rect 9 12 48 4)
+  (rect 9 38 48 4)
+)
+

LayoutTests/svg/repaint/repaint-non-scaling-stroke-text.html

@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<script src="../../fast/repaint/resources/async-text-based-repaint.js"></script>
+<script>
+window.onload = runRepaintTest;
+function repaintTest() {
+    document.getElementById('t').setAttribute("stroke", "blue");
+    document.getElementById('t').setAttribute("vector-effect", "non-scaling-stroke");
+    document.getElementById('t').setAttribute("stroke-width", "8");
+    requestAnimationFrame(function() {
+        finishRepaintTest();
+    });
+};
+</script>
+<body>
+<svg>
+    <g transform="scale(0.5 0.5)">
+       <text id="t" x="10" y="50" stroke="none" stroke-width="2" fill="none" font-size="36" vector-effect="none">Hello</text>
+    </g>
+</svg>
+</body>
+</html>

LayoutTests/svg/stroke/non-scaling-stroke-gradient-text-expected.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<svg>
+  <linearGradient id="g" x2="0" y2="1">
+    <stop offset="0" stop-color="green"/>
+    <stop offset="0.5" stop-color="green"/>
+    <stop offset="0.5" stop-color="blue"/>
+    <stop offset="1" stop-color="blue"/>
+  </linearGradient>
+  <g>
+     <text x="0" y="100" fill="url(#g)" stroke="url(#g)" stroke-width="2" font-size="72">Hello</text>
+  </g>
+</svg>

LayoutTests/svg/stroke/non-scaling-stroke-gradient-text.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="fuzzy" content="maxDifference=2; totalPixels=1939" />
+</head>
+<body>
+<svg>
+  <linearGradient id="g" x2="0" y2="1">
+    <stop offset="0" stop-color="green"/>
+    <stop offset="0.5" stop-color="green"/>
+    <stop offset="0.5" stop-color="blue"/>
+    <stop offset="1" stop-color="blue"/>
+  </linearGradient>
+  <g transform="scale(2 2)">
+     <text x="0" y="50" fill="url(#g)" stroke="url(#g)" stroke-width="2" vector-effect="non-scaling-stroke" font-size="36">Hello</text>
+  </g>
+</svg>
+</body>
+</html>

LayoutTests/svg/stroke/non-scaling-stroke-text-decoration-expected.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<svg>
+    <g>
+       <text x="0" y="100" stroke="blue" stroke-width="2" fill="none" font-size="72" text-decoration="underline">Hello</text>
+    </g>
+</svg>

LayoutTests/svg/stroke/non-scaling-stroke-text-decoration.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<svg>
+    <g transform="scale(2 2)">
+       <text x="0" y="50" stroke="blue" stroke-width="2" fill="none" vector-effect="non-scaling-stroke" font-size="36" text-decoration="underline">Hello</text>
+    </g>
+</svg>

LayoutTests/svg/stroke/non-scaling-stroke-text-expected.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<svg>
+    <g>
+       <text x="0" y="100" stroke="blue" stroke-width="2" fill="none" font-size="72">Hello</text>
+    </g>
+</svg>

LayoutTests/svg/stroke/non-scaling-stroke-text.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<svg>
+    <g transform="scale(2 2)">
+       <text x="0" y="50" stroke="blue" stroke-width="2" fill="none" vector-effect="non-scaling-stroke" font-size="36">Hello</text>
+    </g>
+</svg>

LayoutTests/svg/zoom/page/text-with-non-scaling-stroke-expected.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<body style="margin: 0">
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="400">
+  <g id="g" style="font: 30px sans-serif" transform="scale(2)">
+    <text x="60" y="60" fill="red" stroke="blue" stroke-width="3.6">hello there</text>
+  </g>
+  <g id="g" style="font: 30px sans-serif" transform="translate(0, 120) scale(2)">
+    <text x="60" y="60" fill="red" stroke="blue" stroke-width="3.6" vector-effect="non-scaling-stroke">hello there</text>
+  </g>
+</svg>
+</body>
+</html>