- Revision
- 279573
- Author
- [email protected]
- Date
- 2021-07-05 17:56:02 -0700 (Mon, 05 Jul 2021)
Log Message
Live Text should not be visible in video thumbnail images behind "Skip Ad" button on YouTube
https://bugs.webkit.org/show_bug.cgi?id=227692
Reviewed by Darin Adler.
Source/WebCore:
Force `text-shadow: none;` for image overlay text, such that Live Text injected into image elements isn't
visible to the user when the containing image element has a text shadow.
Test: fast/images/text-recognition/image-overlay-with-text-shadow.html
* html/shadow/imageOverlay.css:
(div#image-overlay):
LayoutTests:
Add a new layout test to verify that specifying `text-shadow` on image elements does not cause Live Text to
become visible.
* fast/images/text-recognition/image-overlay-with-text-shadow-expected.html: Added.
* fast/images/text-recognition/image-overlay-with-text-shadow.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (279572 => 279573)
--- trunk/LayoutTests/ChangeLog 2021-07-05 22:54:07 UTC (rev 279572)
+++ trunk/LayoutTests/ChangeLog 2021-07-06 00:56:02 UTC (rev 279573)
@@ -1,3 +1,16 @@
+2021-07-05 Wenson Hsieh <[email protected]>
+
+ Live Text should not be visible in video thumbnail images behind "Skip Ad" button on YouTube
+ https://bugs.webkit.org/show_bug.cgi?id=227692
+
+ Reviewed by Darin Adler.
+
+ Add a new layout test to verify that specifying `text-shadow` on image elements does not cause Live Text to
+ become visible.
+
+ * fast/images/text-recognition/image-overlay-with-text-shadow-expected.html: Added.
+ * fast/images/text-recognition/image-overlay-with-text-shadow.html: Added.
+
2021-07-05 Alan Bujtas <[email protected]>
[LFC][IFC] Test garderning for overflow-wrap:anywhere
Added: trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-shadow-expected.html (0 => 279573)
--- trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-shadow-expected.html (rev 0)
+++ trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-shadow-expected.html 2021-07-06 00:56:02 UTC (rev 279573)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+img {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+</style>
+</head>
+<body>
+<img src=""
+<script>
+addEventListener("load", () => {
+ const image = document.querySelector("img");
+ internals.installImageOverlay(image, [
+ {
+ topLeft : new DOMPointReadOnly(0, 0),
+ topRight : new DOMPointReadOnly(1, 0),
+ bottomRight : new DOMPointReadOnly(1, 0.5),
+ bottomLeft : new DOMPointReadOnly(0, 0.5),
+ children: [
+ {
+ text : "foo",
+ topLeft : new DOMPointReadOnly(0, 0),
+ topRight : new DOMPointReadOnly(0.5, 0),
+ bottomRight : new DOMPointReadOnly(0.5, 0.5),
+ bottomLeft : new DOMPointReadOnly(0, 0.5),
+ },
+ {
+ text : "bar",
+ topLeft : new DOMPointReadOnly(0.5, 0),
+ topRight : new DOMPointReadOnly(1, 0),
+ bottomRight : new DOMPointReadOnly(1, 0.5),
+ bottomLeft : new DOMPointReadOnly(0.5, 0.5),
+ }
+ ],
+ }
+ ]);
+
+ getSelection().selectAllChildren(internals.shadowRoot(image).querySelector(".image-overlay-text"));
+});
+</script>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-shadow.html (0 => 279573)
--- trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-shadow.html (rev 0)
+++ trunk/LayoutTests/fast/images/text-recognition/image-overlay-with-text-shadow.html 2021-07-06 00:56:02 UTC (rev 279573)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ text-shadow: 0 0 1px red;
+}
+</style>
+</head>
+<body>
+<img src=""
+<script>
+addEventListener("load", () => {
+ const image = document.querySelector("img");
+ internals.installImageOverlay(image, [
+ {
+ topLeft : new DOMPointReadOnly(0, 0),
+ topRight : new DOMPointReadOnly(1, 0),
+ bottomRight : new DOMPointReadOnly(1, 0.5),
+ bottomLeft : new DOMPointReadOnly(0, 0.5),
+ children: [
+ {
+ text : "foo",
+ topLeft : new DOMPointReadOnly(0, 0),
+ topRight : new DOMPointReadOnly(0.5, 0),
+ bottomRight : new DOMPointReadOnly(0.5, 0.5),
+ bottomLeft : new DOMPointReadOnly(0, 0.5),
+ },
+ {
+ text : "bar",
+ topLeft : new DOMPointReadOnly(0.5, 0),
+ topRight : new DOMPointReadOnly(1, 0),
+ bottomRight : new DOMPointReadOnly(1, 0.5),
+ bottomLeft : new DOMPointReadOnly(0.5, 0.5),
+ }
+ ],
+ }
+ ]);
+
+ getSelection().selectAllChildren(internals.shadowRoot(image).querySelector(".image-overlay-text"));
+});
+</script>
+</body>
+</html>
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (279572 => 279573)
--- trunk/Source/WebCore/ChangeLog 2021-07-05 22:54:07 UTC (rev 279572)
+++ trunk/Source/WebCore/ChangeLog 2021-07-06 00:56:02 UTC (rev 279573)
@@ -1,3 +1,18 @@
+2021-07-05 Wenson Hsieh <[email protected]>
+
+ Live Text should not be visible in video thumbnail images behind "Skip Ad" button on YouTube
+ https://bugs.webkit.org/show_bug.cgi?id=227692
+
+ Reviewed by Darin Adler.
+
+ Force `text-shadow: none;` for image overlay text, such that Live Text injected into image elements isn't
+ visible to the user when the containing image element has a text shadow.
+
+ Test: fast/images/text-recognition/image-overlay-with-text-shadow.html
+
+ * html/shadow/imageOverlay.css:
+ (div#image-overlay):
+
2021-07-05 Alan Bujtas <[email protected]>
[LFC][IFC] Add support for conditionally hanging glyph
Modified: trunk/Source/WebCore/html/shadow/imageOverlay.css (279572 => 279573)
--- trunk/Source/WebCore/html/shadow/imageOverlay.css 2021-07-05 22:54:07 UTC (rev 279572)
+++ trunk/Source/WebCore/html/shadow/imageOverlay.css 2021-07-06 00:56:02 UTC (rev 279573)
@@ -27,6 +27,7 @@
position: relative;
overflow: hidden;
color: transparent;
+ text-shadow: none;
text-align: center;
white-space: nowrap;
line-height: 100%;
