Bug 1711702 [wpt PR 29025] - CSS highlight painting: split originatin…

…g and ::selection decorations, a=testonly Automatic update from web-platform-tests CSS highlight painting: split originating and ::selection decorations This patch builds on /c/2902289 by splitting the paints for unselected and selection text, which means that for the first time, all of these properties should hold true regardless of whether text is selected: P1. underlines and overlines are never painted over text P2. lines-through are always painted over text P3. decorations on any unselected parts are in originating td-color P4. selected part decorations paint over ::selection background P5. ::selection background always paints over unselected text Here’s a comparison of how these properties have evolved: • pre-M90 ensured P1 + P4, but violated P2 + P3 + P5 • /c/2647046 ensured P1 + P5, but violated P2 + P3 + P4 • /c/2902289 ensured P2 + P4 + P5, but violated P1 + P3 • this patch ensures P1 + P2 + P3 + P4 + P5 To test the properties more effectively, I’ve replaced one of my highlight painting tests with two more effective tests, and added smaller tests for properties P1 through P4. <https://wpt.live/css/css-pseudo/highlight-painting-003.html> now tests solid decorations with ::selection underline and originating line-through, plus an originating background. • https://bucket.daz.cat/ee288ed9a20b1a2f.png = pre-M90 • https://bucket.daz.cat/e689c7ada0c05594.png = /c/2647046 • https://bucket.daz.cat/42d48433dfc51e15.png = /c/2902289 • https://bucket.daz.cat/1658767a17294d93.png = this patch <https://wpt.live/css/css-pseudo/highlight-painting-004.html> tests wavy decorations, but with originating underline and ::selection line-through, and no originating background: • https://bucket.daz.cat/5e28cd46a5972359.png = pre-M90 • https://bucket.daz.cat/b44c05422d47a0b3.png = /c/2647046 • https://bucket.daz.cat/5e28cd46a5972359.png = /c/2902289 • https://bucket.daz.cat/6647e4443a92cec5.png = this patch For reference, here are the refs: • https://bucket.daz.cat/439df4145d54fede.png = 003-ref • https://bucket.daz.cat/05b20f2ec3675e7e.png = 004-ref1 • https://bucket.daz.cat/c898a37e256b3e44.png = 004-ref2 • https://bucket.daz.cat/bd4b272d1bcdf932.png = 004-ref3 This brings us closer to passing those tests, but not quite there. Next up, we need to recolor the decorations lifted from originating style to the ::selection overlay to ::selection’s color, not its text-decoration-color as done in <https://crrev.com/c/2383212>. Bug: 1147859 Change-Id: I011323db9b481175fb750ab810b6741239522087 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2903387 Commit-Queue: Delan Azabani <[email protected]> Reviewed-by: Xianzhu Wang <[email protected]> Cr-Commit-Position: refs/heads/main@{#915543} -- wpt-commits: 1127f9c4d5e006dbfb48eaf6aa3dca4beeed943e wpt-pr: 29025
dothq · Sep 2, 2021 · 35e62f0 · 35e62f0
1 parent 4d6b4d1
commit 35e62f0
Show file tree

Hide file tree

Showing 15 changed files with 491 additions and 44 deletions.
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-003-ref.html
@@ -2,45 +2,40 @@
 <meta charset="utf-8">
 <link rel="stylesheet" href="support/highlights.css">
 <style>
-    p {
+    * {
+        text-decoration-skip-ink: none;
+        text-decoration-skip: none;
+    }
+    main {
         font-size: 7em;
+        margin: 0.5em;
         width: min-content;
-        height: 0.25em;
-        background: #C0C000C0;
-        position: relative;
-        color: transparent;
     }
-    p > span {
-        position: absolute;
+    .background {
+        width: 100%;
+        height: 0.25em;
+        background: #707070C0;
     }
-    p > span:nth-child(1) {
+    .unselected {
         color: #E03838C0;
         text-decoration: #C0C000C0 solid line-through;
     }
-    p > span:nth-child(1) > span {
-        visibility: hidden;
-    }
-    p > span:nth-child(2) {
-        color: transparent;
-    }
-    p > span:nth-child(2) > span {
-        color: #707070C0;
+    .selected {
         background: #38E038C0;
+        text-decoration: #663399C0 solid line-through;
     }
-    /*
-        Topmost last (see (d, d, d) in csswg-drafts#6022):
-        1.  ::selection text in ::selection color
-        2.  original line-through in ::selection color
-        3.  ::selection line-through in ::selection color
-    */
-    p > span:nth-child(2) > span {
-        text-decoration: #707070C0 solid line-through;
+    .selected, .selected * {
+        color: #663399C0;
     }
-    p > span:nth-child(2) > span > span {
-        text-decoration: #3838E0C0 wavy line-through;
+    .selection {
+        text-decoration: #3838E0C0 solid underline;
     }
 </style>
-<p class="highlight_reftest">
-    <span>q<span>uic</span>k</span>
-    <span>q<span><span>uic</span></span>k</span>
-    quick
+<main class="highlight_reftest">
+    <div class="hrt_layers">
+        <div class="background"></div>
+        <div>qui<span class="unselected">ck</span></div>
+        <div><span class="selected"><span class="selection">qui</span></span>ck</div>
+        quick
+    </div>
+</main>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-003.html
@@ -9,26 +9,47 @@
 <script src="support/selections.js"></script>
 <link rel="stylesheet" href="support/highlights.css">
 <style>
-    p {
+    /*
+        Topmost last:
+        1.  originating background (grey)
+        2.  unselected text (red)
+        3.  originating line-through on unselected text (yellow)
+        4.  ::selection background (green)
+        5.  ::selection underline on selected text (blue)
+        6.  selected text (purple)
+        7.  originating line-through on selected text (purple!)
+
+        Decoration paints are ordered by text-decoration-line
+        (underline, overline, text, line-through), then by highlight
+        overlay (originating, ::grammar-error, ::spelling-error,
+        ::target-text, ::selection). See options (d, d, d) in
+        csswg-drafts#6022 for more details.
+    */
+    * {
+        text-decoration-skip-ink: none;
+        text-decoration-skip: none;
+    }
+    main {
         font-size: 7em;
+        margin: 0.5em;
         width: min-content;
         height: 0.25em;
+        background: #707070C0;
         color: #E03838C0;
-        background: #C0C000C0;
         text-decoration: #C0C000C0 solid line-through;
     }
-    p::selection {
-        color: #707070C0;
+    main::selection {
         background: #38E038C0;
-        text-decoration: #3838E0C0 wavy line-through;
+        text-decoration: #3838E0C0 solid underline;
+        color: #663399C0;
     }
 </style>
-<p class="highlight_reftest">quick
+<main class="highlight_reftest">quick</main>
 <script>
-    const target = document.querySelector("p");
+    const target = document.querySelector("main");
     selectRangeWith(range => {
         range.selectNodeContents(target);
-        range.setStart(target.childNodes[0], 1);
-        range.setEnd(target.childNodes[0], 4);
+        range.setStart(target.childNodes[0], 0);
+        range.setEnd(target.childNodes[0], 3);
     });
 </script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref1.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref1.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    * {
+        text-decoration-skip-ink: none;
+        text-decoration-skip: none;
+    }
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+        width: min-content;
+    }
+    .unselected {
+        text-decoration: #E03838C0 wavy underline;
+        color: #C0C000C0;
+    }
+    .selected {
+        background: #38E038C0;
+        text-decoration: #3838E0C0 wavy underline;
+    }
+    .selected, .selected * {
+        color: #3838E0C0;
+    }
+    .selection {
+        text-decoration: #663399C0 wavy line-through;
+    }
+</style>
+<!--
+    In this ref, three separate wavy lines are painted, with two
+    spanning the selected part and one spanning the unselected part.
+-->
+<main class="highlight_reftest">
+    <div class="hrt_layers">
+        <div>qui<span class="unselected">ck</span></div>
+        <div><span class="selected"><span class="selection">qui</span></span>ck</div>
+        quick
+    </div>
+</main>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref2.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref2.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    * {
+        text-decoration-skip-ink: none;
+        text-decoration-skip: none;
+    }
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+        width: min-content;
+    }
+    .unselected {
+        text-decoration: #E03838C0 wavy underline;
+        color: #C0C000C0;
+    }
+    .selected {
+        background: #38E038C0;
+        text-decoration: #3838E0C0 wavy underline;
+    }
+    .selected, .selected * {
+        color: #3838E0C0;
+    }
+    .selection {
+        text-decoration: #663399C0 wavy line-through;
+    }
+</style>
+<!--
+    In this ref, two wavy lines appear to be painted, with one
+    spanning the selected part and one spanning the whole text. The
+    latter changes color where selected and unselected meet.
+-->
+<main class="highlight_reftest">
+    <div class="hrt_layers">
+        <!--
+            While the selection starts from the very first letter, we
+            still include a layer for the left unselected part, just
+            in case the wavy line has a long tip like in Blink.
+        -->
+        <div><span class="unselected">quick</span></div>
+        <div><span class="hrt_cover">quick</span>quick</div>
+        <div><span class="hrt_hider"><div><span class="selected">quick</span></div>quick</span></div>
+        <div><span class="hrt_cover">ck</span>quick</div>
+        <div>qui<span class="hrt_hider"><span class="unselected">quick</span>ck</span></div>
+        <div><span class="selection">qui</span>ck</div>
+        quick
+    </div>
+</main>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref3.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref3.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    * {
+        text-decoration-skip-ink: none;
+        text-decoration-skip: none;
+    }
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+        width: min-content;
+    }
+    .unselected {
+        text-decoration: #E03838C0 wavy underline;
+        color: #C0C000C0;
+    }
+    .selected {
+        background: #38E038C0;
+        text-decoration: #3838E0C0 wavy underline;
+    }
+    .selected, .selected * {
+        color: #3838E0C0;
+    }
+    .selection {
+        text-decoration: #663399C0 wavy line-through;
+    }
+</style>
+<!--
+    In this ref, two wavy lines appear to be painted, with one
+    clipped to the selected part and one spanning the whole text. The
+    latter changes color where selected and unselected meet.
+-->
+<main class="highlight_reftest">
+    <div class="hrt_layers">
+        <!--
+            While the selection starts from the very first letter, we
+            still include a layer for the left unselected part, just
+            in case the wavy line has a long tip like in Blink.
+        -->
+        <div><span class="unselected">quick</span></div>
+        <div><span class="hrt_cover">quick</span>quick</div>
+        <div><span class="hrt_hider"><div><span class="selected"><span class="selection">quick</span></span></div>quick</span></div>
+        <div><span class="hrt_cover">ck</span>quick</div>
+        <div>qui<span class="hrt_hider"><span class="unselected">quick</span>ck</span></div>
+        quick
+    </div>
+</main>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight painting</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
+<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
+<link rel="match" href="highlight-painting-004-ref1.html">
+<link rel="match" href="highlight-painting-004-ref2.html">
+<link rel="match" href="highlight-painting-004-ref3.html">
+<meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, and originating element decorations lose their colour">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    /*
+        Topmost last:
+        1.  originating underline on unselected text (red)
+        2.  unselected text (yellow)
+        3.  ::selection background (green)
+        4.  originating underline on selected text (blue!)
+        5.  selected text (blue)
+        6.  ::selection line-through on selected text (purple)
+
+        Decoration paints are ordered by text-decoration-line
+        (underline, overline, text, line-through), then by highlight
+        overlay (originating, ::grammar-error, ::spelling-error,
+        ::target-text, ::selection). See options (d, d, d) in
+        csswg-drafts#6022 for more details.
+    */
+    * {
+        text-decoration-skip-ink: none;
+        text-decoration-skip: none;
+    }
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+        width: min-content;
+        text-decoration: #E03838C0 wavy underline;
+        color: #C0C000C0;
+    }
+    main::selection {
+        background: #38E038C0;
+        color: #3838E0C0;
+        text-decoration: #663399C0 wavy line-through;
+    }
+</style>
+<main class="highlight_reftest">quick</main>
+<script>
+    const target = document.querySelector("main");
+    selectRangeWith(range => {
+        range.selectNodeContents(target);
+        range.setStart(target.childNodes[0], 0);
+        range.setEnd(target.childNodes[0], 3);
+    });
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/selection-decoration-p1-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-decoration-p1-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+    main {
+        font: 7em Ahem;
+        margin: 0.5em;
+        width: min-content;
+    }
+</style>
+<p>Test passes if there is no red below.
+<main class="highlight_reftest">XX</main>
diff --git a/testing/web-platform/tests/css/css-pseudo/selection-decoration-p1.html b/testing/web-platform/tests/css/css-pseudo/selection-decoration-p1.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
+<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
+<link rel="match" href="selection-decoration-p1-ref.html">
+<meta name="assert" value="originating underlines and overlines are never painted over text, even when some of the text is selected">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+    /*
+        The idea behind this test is that the underline should be
+        completely obscured by both the selected and unselected text.
+
+        Note that the former is not yet actually tested here, because
+        originating decoration recoloring essentially makes it
+        impossible to tell whether the text or underline is on top
+        (this can be fixed by highlighting the unselected text with
+        some other highlight pseudo, so recoloring doesn’t apply).
+
+        Chromium fails in /c/2902289 and passes in /c/2903387.
+    */
+    * {
+        text-decoration-skip-ink: none;
+        text-decoration-skip: none;
+    }
+    main {
+        font: 7em Ahem;
+        margin: 0.5em;
+        width: min-content;
+        text-decoration: 0.25em red solid underline;
+        /* try to keep decoration between ascent and descent */
+        text-underline-offset: -0.5em;
+    }
+    main::selection {
+        background: transparent;
+    }
+</style>
+<p>Test passes if there is no red below.
+<main class="highlight_reftest">XX</main>
+<script>
+    const target = document.querySelector("main");
+    selectRangeWith(range => {
+        range.selectNodeContents(target);
+        range.setStart(target.childNodes[0], 0);
+        range.setEnd(target.childNodes[0], 1);
+    });
+</script>
diff --git a/...ss-pseudo/highlight-painting-005-ref.html → ...s-pseudo/selection-decoration-p2-ref.html b/...ss-pseudo/highlight-painting-005-ref.html → ...s-pseudo/selection-decoration-p2-ref.html
@@ -6,7 +6,6 @@
         font-size: 7em;
         margin: 0.5em;
         width: min-content;
-        height: 0.25em;
         text-decoration: currentColor solid line-through;
     }
 </style>