- Revision
- 276236
- Author
- [email protected]
- Date
- 2021-04-18 23:32:12 -0700 (Sun, 18 Apr 2021)
Log Message
Selected image overlay text should never be visible
https://bugs.webkit.org/show_bug.cgi?id=224734
<rdar://problem/76806399>
Reviewed by Darin Adler.
Source/WebCore:
Make a slight adjustment to the UA stylesheet to ensure that image overlay text is never visible. See below for
more details.
Test: fast/images/image-extraction/image-overlay-with-selection-styles.html
* html/shadow/imageOverlay.css:
(div.image-overlay-text::selection):
Enforce selected text styles for image overlay text.
* rendering/RenderElement.cpp:
(WebCore::RenderElement::selectionPseudoStyle const):
Make an additional adjustment when computing selection pseudo styles for UA shadow root content. Currently, for
elements inside a UA shadow root, we always immediately ascend to the shadow host; this means that `::selection`
pseudo selectors currently don't work in UA stylesheets, since they're skipped when resolving styles, upon
painting selected text.
To fix this, we can let the element's own pseudo styles take precedence over the shadow host's renderer in the
case where we have a selection pseudo style. While we're here, also replace a few raw pointers with `RefPtr`.
LayoutTests:
Add a new layout test.
* fast/images/image-extraction/image-overlay-with-selection-styles-expected.html: Added.
* fast/images/image-extraction/image-overlay-with-selection-styles.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (276235 => 276236)
--- trunk/LayoutTests/ChangeLog 2021-04-19 06:13:38 UTC (rev 276235)
+++ trunk/LayoutTests/ChangeLog 2021-04-19 06:32:12 UTC (rev 276236)
@@ -1,3 +1,16 @@
+2021-04-18 Wenson Hsieh <[email protected]>
+
+ Selected image overlay text should never be visible
+ https://bugs.webkit.org/show_bug.cgi?id=224734
+ <rdar://problem/76806399>
+
+ Reviewed by Darin Adler.
+
+ Add a new layout test.
+
+ * fast/images/image-extraction/image-overlay-with-selection-styles-expected.html: Added.
+ * fast/images/image-extraction/image-overlay-with-selection-styles.html: Added.
+
2021-04-18 Rob Buis <[email protected]>
Support contain: layout
Added: trunk/LayoutTests/fast/images/image-extraction/image-overlay-with-selection-styles-expected.html (0 => 276236)
--- trunk/LayoutTests/fast/images/image-extraction/image-overlay-with-selection-styles-expected.html (rev 0)
+++ trunk/LayoutTests/fast/images/image-extraction/image-overlay-with-selection-styles-expected.html 2021-04-19 06:32:12 UTC (rev 276236)
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+img {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+::selection {
+ color: red;
+}
+</style>
+</head>
+<body>
+<img src=""
+<script>
+addEventListener("load", () => {
+ const image = document.querySelector("img");
+ internals.installImageOverlay(image, [
+ {
+ text : "hello",
+ topLeft : new DOMPointReadOnly(0, 0),
+ topRight : new DOMPointReadOnly(1, 0),
+ bottomRight : new DOMPointReadOnly(1, 0.5),
+ bottomLeft : new DOMPointReadOnly(0, 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/image-extraction/image-overlay-with-selection-styles.html (0 => 276236)
--- trunk/LayoutTests/fast/images/image-extraction/image-overlay-with-selection-styles.html (rev 0)
+++ trunk/LayoutTests/fast/images/image-extraction/image-overlay-with-selection-styles.html 2021-04-19 06:32:12 UTC (rev 276236)
@@ -0,0 +1,31 @@
+<!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, [
+ {
+ text : "hello",
+ topLeft : new DOMPointReadOnly(0, 0),
+ topRight : new DOMPointReadOnly(1, 0),
+ bottomRight : new DOMPointReadOnly(1, 0.5),
+ bottomLeft : new DOMPointReadOnly(0, 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 (276235 => 276236)
--- trunk/Source/WebCore/ChangeLog 2021-04-19 06:13:38 UTC (rev 276235)
+++ trunk/Source/WebCore/ChangeLog 2021-04-19 06:32:12 UTC (rev 276236)
@@ -1,3 +1,32 @@
+2021-04-18 Wenson Hsieh <[email protected]>
+
+ Selected image overlay text should never be visible
+ https://bugs.webkit.org/show_bug.cgi?id=224734
+ <rdar://problem/76806399>
+
+ Reviewed by Darin Adler.
+
+ Make a slight adjustment to the UA stylesheet to ensure that image overlay text is never visible. See below for
+ more details.
+
+ Test: fast/images/image-extraction/image-overlay-with-selection-styles.html
+
+ * html/shadow/imageOverlay.css:
+ (div.image-overlay-text::selection):
+
+ Enforce selected text styles for image overlay text.
+
+ * rendering/RenderElement.cpp:
+ (WebCore::RenderElement::selectionPseudoStyle const):
+
+ Make an additional adjustment when computing selection pseudo styles for UA shadow root content. Currently, for
+ elements inside a UA shadow root, we always immediately ascend to the shadow host; this means that `::selection`
+ pseudo selectors currently don't work in UA stylesheets, since they're skipped when resolving styles, upon
+ painting selected text.
+
+ To fix this, we can let the element's own pseudo styles take precedence over the shadow host's renderer in the
+ case where we have a selection pseudo style. While we're here, also replace a few raw pointers with `RefPtr`.
+
2021-04-18 Rob Buis <[email protected]>
Support contain: layout
Modified: trunk/Source/WebCore/html/shadow/imageOverlay.css (276235 => 276236)
--- trunk/Source/WebCore/html/shadow/imageOverlay.css 2021-04-19 06:13:38 UTC (rev 276235)
+++ trunk/Source/WebCore/html/shadow/imageOverlay.css 2021-04-19 06:32:12 UTC (rev 276236)
@@ -38,3 +38,8 @@
position: absolute;
overflow: hidden;
}
+
+div.image-overlay-text::selection {
+ color: transparent;
+ background-color: highlight;
+}
Modified: trunk/Source/WebCore/rendering/RenderElement.cpp (276235 => 276236)
--- trunk/Source/WebCore/rendering/RenderElement.cpp 2021-04-19 06:13:38 UTC (rev 276235)
+++ trunk/Source/WebCore/rendering/RenderElement.cpp 2021-04-19 06:32:12 UTC (rev 276236)
@@ -1529,9 +1529,16 @@
if (isAnonymous())
return nullptr;
- if (ShadowRoot* root = element()->containingShadowRoot()) {
+ if (auto selectionStyle = getUncachedPseudoStyle({ PseudoId::Selection })) {
+ // We intentionally return the pseudo selection style here if it exists before ascending to
+ // the shadow host element. This allows us to apply selection pseudo styles in user agent
+ // shadow roots, instead of always deferring to the shadow host's selection pseudo style.
+ return selectionStyle;
+ }
+
+ if (auto root = makeRefPtr(element()->containingShadowRoot())) {
if (root->mode() == ShadowRootMode::UserAgent) {
- auto* currentElement = element()->shadowHost();
+ auto currentElement = makeRefPtr(element()->shadowHost());
// When an element has display: contents, this element doesn't have a renderer
// and its children will render as children of the parent element.
while (currentElement && currentElement->hasDisplayContents())
@@ -1541,7 +1548,7 @@
}
}
- return getUncachedPseudoStyle({ PseudoId::Selection });
+ return nullptr;
}
Color RenderElement::selectionForegroundColor() const
