- Revision
- 287943
- Author
- wenson_hs...@apple.com
- Date
- 2022-01-12 12:06:30 -0800 (Wed, 12 Jan 2022)
Log Message
[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.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (287942 => 287943)
--- trunk/LayoutTests/ChangeLog 2022-01-12 19:53:25 UTC (rev 287942)
+++ trunk/LayoutTests/ChangeLog 2022-01-12 20:06:30 UTC (rev 287943)
@@ -1,3 +1,15 @@
+2022-01-12 Wenson Hsieh <wenson_hs...@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 <jen...@apple.com>
[ Win EWS ] webanimations/accelerated-animation-after-forward-filling-animation.html is a constant image only failure
Added: trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent-expected.html (0 => 287943)
--- trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent-expected.html (rev 0)
+++ trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent-expected.html 2022-01-12 20:06:30 UTC (rev 287943)
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<body>
+<img src=""
+<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>
\ No newline at end of file
Added: trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent.html (0 => 287943)
--- trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent.html (rev 0)
+++ trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-indent.html 2022-01-12 20:06:30 UTC (rev 287943)
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<body>
+<img src="" 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>
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (287942 => 287943)
--- trunk/Source/WebCore/ChangeLog 2022-01-12 19:53:25 UTC (rev 287942)
+++ trunk/Source/WebCore/ChangeLog 2022-01-12 20:06:30 UTC (rev 287943)
@@ -1,3 +1,18 @@
+2022-01-12 Wenson Hsieh <wenson_hs...@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.fra...@apple.com>
Correctly dirty z-order lists when showing a modal dialog
Modified: trunk/Source/WebCore/html/shadow/imageOverlay.css (287942 => 287943)
--- trunk/Source/WebCore/html/shadow/imageOverlay.css 2022-01-12 19:53:25 UTC (rev 287942)
+++ trunk/Source/WebCore/html/shadow/imageOverlay.css 2022-01-12 20:06:30 UTC (rev 287943)
@@ -29,6 +29,7 @@
overflow: hidden;
color: transparent;
text-shadow: none;
+ text-indent: 0;
text-align: center;
font-family: system-ui;
}
