Skip to content
Permalink
Browse files
[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
  • Loading branch information
whsieh committed Jan 12, 2022
1 parent 34a2de0 commit 5ed9d8eaf5fe366f4dbebb76f4c43325ba1e87c4
@@ -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
@@ -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>
@@ -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>
@@ -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
@@ -29,6 +29,7 @@ div#image-overlay {
overflow: hidden;
color: transparent;
text-shadow: none;
text-indent: 0;
text-align: center;
font-family: system-ui;
}

0 comments on commit 5ed9d8e

Please sign in to comment.