[Live Text] Image overlay text is misaligned on rfi.fr

https://bugs.webkit.org/show_bug.cgi?id=235118 Reviewed by Aditya Keerthi. Source/WebCore: Reset any `text-indent` to 0 when injecting Live Text into image elements, to ensure that any `text-indent` value set on the image doesn't propagate into UA shadow DOM content. Test: fast/images/text-recognition/image-overlay-with-text-indent.html * html/shadow/imageOverlay.css: (div.image-overlay-line, .image-overlay-text, div.image-overlay-block): LayoutTests: Add a new test case to exercise the bug. * fast/images/text-recognition/image-overlay-with-text-indent-expected.html: Added. * fast/images/text-recognition/image-overlay-with-text-indent.html: Added. Canonical link: https://commits.webkit.org/245972@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@287943 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Jan 12, 2022 · 5ed9d8eaf5fe366f4dbebb76f4c43325ba1e87c4 · 5ed9d8e
1 parent 34a2de0
commit 5ed9d8eaf5fe366f4dbebb76f4c43325ba1e87c4
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,15 @@
+2022-01-12  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        [Live Text] Image overlay text is misaligned on rfi.fr
+        https://bugs.webkit.org/show_bug.cgi?id=235118
+
+        Reviewed by Aditya Keerthi.
+
+        Add a new test case to exercise the bug.
+
+        * fast/images/text-recognition/image-overlay-with-text-indent-expected.html: Added.
+        * fast/images/text-recognition/image-overlay-with-text-indent.html: Added.
+
 2022-01-12  Robert Jenner  <Jenner@apple.com>
 
         [ Win EWS ] webanimations/accelerated-animation-after-forward-filling-animation.html is a constant image only failure

diff --git a/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent-expected.html b/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent-expected.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<body>
+<img src="../resources/green-400x400.png"></img>
+<script>
+addEventListener("load", () => {
+    let image = document.querySelector("img");
+    internals.installImageOverlay(image, [
+        {
+            topLeft : new DOMPointReadOnly(0.5, 0.5),
+            topRight : new DOMPointReadOnly(1, 0.5),
+            bottomRight : new DOMPointReadOnly(1, 1),
+            bottomLeft : new DOMPointReadOnly(0.5, 1),
+            children: [{
+                text : "Hello",
+                topLeft : new DOMPointReadOnly(0.5, 0.5),
+                topRight : new DOMPointReadOnly(1, 0.5),
+                bottomRight : new DOMPointReadOnly(1, 1),
+                bottomLeft : new DOMPointReadOnly(0.5, 1),
+            }],
+        }
+    ]);
+    internals.shadowRoot(image).getElementById("image-overlay").style.color = "black";
+});
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent.html b/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<body>
+<img src="../resources/green-400x400.png" style="text-indent: -9999px;"></img>
+<script>
+addEventListener("load", () => {
+    let image = document.querySelector("img");
+    internals.installImageOverlay(image, [
+        {
+            topLeft : new DOMPointReadOnly(0.5, 0.5),
+            topRight : new DOMPointReadOnly(1, 0.5),
+            bottomRight : new DOMPointReadOnly(1, 1),
+            bottomLeft : new DOMPointReadOnly(0.5, 1),
+            children: [{
+                text : "Hello",
+                topLeft : new DOMPointReadOnly(0.5, 0.5),
+                topRight : new DOMPointReadOnly(1, 0.5),
+                bottomRight : new DOMPointReadOnly(1, 1),
+                bottomLeft : new DOMPointReadOnly(0.5, 1),
+            }],
+        }
+    ]);
+    internals.shadowRoot(image).getElementById("image-overlay").style.color = "black";
+});
+</script>
+</body>
+</html>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -1,3 +1,18 @@
+2022-01-12  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        [Live Text] Image overlay text is misaligned on rfi.fr
+        https://bugs.webkit.org/show_bug.cgi?id=235118
+
+        Reviewed by Aditya Keerthi.
+
+        Reset any `text-indent` to 0 when injecting Live Text into image elements, to ensure that any `text-indent`
+        value set on the image doesn't propagate into UA shadow DOM content.
+
+        Test: fast/images/text-recognition/image-overlay-with-text-indent.html
+
+        * html/shadow/imageOverlay.css:
+        (div.image-overlay-line, .image-overlay-text, div.image-overlay-block):
+
 2022-01-11  Simon Fraser  <simon.fraser@apple.com>
 
         Correctly dirty z-order lists when showing a modal dialog

diff --git a/Source/WebCore/html/shadow/imageOverlay.css b/Source/WebCore/html/shadow/imageOverlay.css
@@ -29,6 +29,7 @@ div#image-overlay {
     overflow: hidden;
     color: transparent;
     text-shadow: none;
+    text-indent: 0;
     text-align: center;
     font-family: system-ui;
 }