Ink Overflow for selection highlights
Selection highlights (::selection) may contain text decorations.
Here we add ink overflow computation for the text decorations.
This is a reland of
https://chromium-review.googlesource.com/c/chromium/src/+/4907134
which was causing CHECK failures. Now we only invalidate text
objects and only if they have overflowing decorations or effects.
Bug: 1465719
Change-Id: Ic53ad405f614c738855427bc60b8f1b52a3fab47
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4932284
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1208353}
diff --git a/css/css-text-decor/invalidation/reference/selection-pseudo-with-decoration-invalidation-001-ref.html b/css/css-text-decor/invalidation/reference/selection-pseudo-with-decoration-invalidation-001-ref.html
new file mode 100644
index 0000000..7bbe11d
--- /dev/null
+++ b/css/css-text-decor/invalidation/reference/selection-pseudo-with-decoration-invalidation-001-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Text Decoration Test: Invalidation of text decorations in css-pseudo ::selection - reference</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/">
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<style>
+ div {
+ display: block;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ will-change: transform;
+ }
+
+ ::selection {
+ background: yellow;
+ color: currentColor;
+ }
+
+ .decorated {
+ text-decoration-line: underline overline;
+ text-decoration-style: wavy;
+ text-decoration-color: green;
+ text-decoration-thickness: 5px;
+ }
+</style>
+</head>
+<body>
+<div>
+There should be no sign of decorations when the test completes.
+</div>
+<div id="bottom-decorated-div" class="decorated">
+There should be decorations when the test completes.
+</div>
+</body>
+<script>
+function selectByID(id) {
+ const selection = window.getSelection();
+ const node = document.getElementById(id);
+ const range = document.createRange();
+ range.selectNodeContents(node);
+ selection.addRange(range);
+}
+
+selectByID("bottom-decorated-div");
+</script>
+</html>
diff --git a/css/css-text-decor/invalidation/reference/selection-pseudo-with-decoration-invalidation-002-ref.html b/css/css-text-decor/invalidation/reference/selection-pseudo-with-decoration-invalidation-002-ref.html
new file mode 100644
index 0000000..59351f8
--- /dev/null
+++ b/css/css-text-decor/invalidation/reference/selection-pseudo-with-decoration-invalidation-002-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Text Decoration Test: Invalidation of text decorations in css-pseudo ::selection</title>
+<style>
+ div {
+ display: block;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ line-height: 20px;
+ will-change: transform;
+ text-decoration-line: underline;
+ text-decoration-style: line;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 10px;
+ }
+ ::selection {
+ background: yellow;
+ color: currentColor;
+ }
+</style>
+</head>
+<body>
+<div>
+This is one line of text, with an image underneath.
+</div>
+<image src="../../../support/60x60-green.png"/>
+<div>
+And another line of text.
+</div>
+</body>
+<script>
+ const selection = window.getSelection();
+ const node = document.getElementsByTagName("body")[0];
+ let range = document.createRange();
+ range.selectNodeContents(node);
+ selection.addRange(range);
+</script>
+</html>
diff --git a/css/css-text-decor/invalidation/selection-pseudo-with-decoration-invalidation-001.html b/css/css-text-decor/invalidation/selection-pseudo-with-decoration-invalidation-001.html
new file mode 100644
index 0000000..a2dfbb3
--- /dev/null
+++ b/css/css-text-decor/invalidation/selection-pseudo-with-decoration-invalidation-001.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<title>CSS Text Decoration Test: Invalidation of text decorations in css-pseudo ::selection</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/">
+<meta name="assert" content="text-decorations should be correctly invalidated on selection change.">
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="match" href="reference/selection-pseudo-with-decoration-invalidation-001-ref.html">
+<style>
+ div {
+ display: block;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ will-change: transform;
+ }
+ ::selection {
+ background: yellow;
+ color: currentColor;
+ text-decoration-line: underline overline;
+ text-decoration-style: wavy;
+ text-decoration-color: black;
+ text-decoration-thickness: 5px;
+ }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+</head>
+<body>
+<div id="top-decorated-div">
+There should be no sign of decorations when the test completes.
+</div>
+<div id="bottom-decorated-div">
+There should be decorations when the test completes.
+</div>
+</body>
+<script>
+
+function selectByID(id) {
+ const selection = window.getSelection();
+ const node = document.getElementById(id);
+ const range = document.createRange();
+ range.selectNodeContents(node);
+ selection.addRange(range);
+}
+
+selectByID("top-decorated-div");
+
+async function runTest() {
+ const selection = window.getSelection();
+ selection.removeAllRanges();
+ selectByID("bottom-decorated-div");
+ takeScreenshot();
+}
+onload = () => {
+ waitForAtLeastOneFrame().then(() => { runTest() });
+}
+</script>
+</html>
diff --git a/css/css-text-decor/invalidation/selection-pseudo-with-decoration-invalidation-002.html b/css/css-text-decor/invalidation/selection-pseudo-with-decoration-invalidation-002.html
new file mode 100644
index 0000000..2abe8c6
--- /dev/null
+++ b/css/css-text-decor/invalidation/selection-pseudo-with-decoration-invalidation-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<title>CSS Text Decoration Test: Invalidation of text decorations in css-pseudo ::selection</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/">
+<meta name="assert" content="text-decorations should be correctly invalidated on selection change.">
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="match" href="reference/selection-pseudo-with-decoration-invalidation-002-ref.html">
+<style>
+ div {
+ display: block;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ line-height: 20px;
+ will-change: transform;
+ }
+ ::selection {
+ background: yellow;
+ color: currentColor;
+ text-decoration-line: underline;
+ text-decoration-style: line;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 10px;
+ }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+</head>
+<body>
+<div>
+This is one line of text, with an image underneath.
+</div>
+<image src="../../support/60x60-green.png"/>
+<div>
+And another line of text.
+</div>
+</body>
+<script>
+async function runTest() {
+ const selection = window.getSelection();
+ const node = document.getElementsByTagName("body")[0];
+ let range = document.createRange();
+ range.selectNodeContents(node);
+ selection.addRange(range);
+ waitForAtLeastOneFrame().then(() => { takeScreenshot() });
+}
+
+onload = () => {
+ waitForAtLeastOneFrame().then(() => { runTest() });
+}
+</script>
+</html>
