CSS highlight processing model

This patch implements the inheritance-based propagation for highlight pseudo-elements, as described in css-pseudo’s #highlight-cascade and introduced in w3c/csswg-drafts#2474. Highlight pseudos like ::selection were historically implemented such that only the ::selection selector (*::selection) worked intuitively. The spec’s processing model essentially makes it possible to define both general ::selection styles and more specific ::selection styles. We add a feature (HighlightInheritance) and a new computed style extra field of type scoped_refptr<StyleHighlightData>, which in turn points to four refcounted ComputedStyle instances, one for each highlight. Only a handful of properties are applicable, but reusing ComputedStyle like this simplifies the applying code, and allows us to share many of the field groups between instances anyway. We update the initial style singleton to point to a set of four empty highlight styles, which we only use when the feature is enabled. When the feature is disabled (or resolving custom ::highlight styles), there is no functional change. Highlight styles are lazily computed on paint’s demand, inherit only from the originating element styles, and we store the result in the Element’s pseudo cache (StyleCachedData). When the feature is enabled, we compute highlight styles during the originating element’s recalc (RecalcOwnStyle), skipping any highlight pseudos that the element had no matching rules for (a question that can already be answered thanks to pseudo bits). Style resolution is largely unchanged: we start with default styles, then use output of the cascade to change those styles. But defaulting is much easier for highlight styles: all properties are inherited, so we can simply clone the whole ComputedStyle. Relevant test page and screenshots: • https://bucket.daz.cat/work/igalia/0/8.html • https://bucket.daz.cat/4f37833aa15299a5.png (before) • https://bucket.daz.cat/67d2abdd9bcda17c.png (after) WPT already has some tests (css/css-pseudo/cascade-highlight-*), but more thorough test coverage will land in these patches: • #30688 • #30692 Bug: 1024156 Change-Id: I1f54f36ef2ac80165261a3f80d3a21cdf359c199 Cq-Do-Not-Cancel-Tryjobs: true
web-platform-tests · Sep 16, 2021 · 17c95fb · 17c95fb
1 parent e87cd77
commit 17c95fb
Show file tree

Hide file tree

Showing 22 changed files with 553 additions and 3 deletions.
diff --git a/css/css-pseudo/active-selection-012.html b/css/css-pseudo/active-selection-012.html
@@ -24,6 +24,7 @@
   div::selection
     {
       background-color: green;
+      color: aqua;
     }
 
   /*
@@ -47,6 +48,6 @@
 
   <body onload="startTest();">
 
-  <p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is fuchsia.
+  <p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is aqua and <strong>not fuchsia</strong>.
 
   <div id="test" class="highlight_reftest">Selected Text</div>
diff --git a/css/css-pseudo/highlight-cascade-001-ref.html b/css/css-pseudo/highlight-cascade-001-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main > span::selection {
+        background-color: green;
+        color: white;
+    }
+</style>
+<p>Test passes if the text below is white on green.
+<main class="highlight_reftest"><span>quick</span></main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-cascade-001.html b/css/css-pseudo/highlight-cascade-001.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight cascade: unset is treated like inherit regardless of whether property is inherited</title>
+<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="match" href="highlight-cascade-001-ref.html">
+<meta name="assert" value="This test verifies that, given ::selection styles with both color and background-color declared as unset, both properties inherit their values from the parent ::selection styles. All properties become inherited for the purposes of deciding whether unset should mean initial or inherit.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        background-color: green;
+        color: white;
+    }
+    main > span::selection {
+        background-color: unset;
+        color: unset;
+    }
+</style>
+<p>Test passes if the text below is white on green.
+<main class="highlight_reftest"><span>quick</span></main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-cascade-002-ref.html b/css/css-pseudo/highlight-cascade-002-ref.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        color: black;
+        background-color: transparent;
+    }
+    main > .control > span::selection,
+    main > .bg > span::selection {
+        color: white;
+        background-color: green;
+    }
+    main > .fg > span::selection {
+        color: green;
+        background-color: white;
+    }
+</style>
+<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
+<!--
+    The element tree below is intentionally the same shape as the
+    test, despite the fact that we might be able to simplify it. This
+    is because multiple impls (including Gecko and Blink) split the
+    background paints accordingly, which can obscure ink overflow in
+    some of the highlighted text (especially “f”).
+-->
+<main class="highlight_reftest"
+    ><span class="control"><span>foo</span></span
+    > <span class="fg"><span>b</span></span
+    ><span class="fg"><span>a</span></span
+    ><span class="fg"><span>r</span></span
+    > <span class="bg"><span>b</span></span
+    ><span class="bg"><span>a</span></span
+    ><span class="bg"><span>z</span></span
+    ></main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-cascade-002.html b/css/css-pseudo/highlight-cascade-002.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight cascade: custom properties are inherited regardless of inherits flag or inheritedness of referencing property</title>
+<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="match" href="highlight-cascade-002-ref.html">
+<meta name="assert" value="This test verifies that, given ::selection styles referencing custom properties, their substitution values are inherited from the parent ::selection styles, even if the property is registered with inherits set to false (--inherits-false) or the referencing property is not an inherited property (background-color). All custom properties are treated as inherited when used in highlight styles in any way.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    /*
+        Register the custom properties, other than --unregistered,
+        which would be an inherited property [css-variables-1].
+    */
+    @property --control {
+        syntax: "<color>";
+        initial-value: green;
+        inherits: false;
+    }
+    @property --inherits-false {
+        syntax: "<color>";
+        initial-value: red;
+        inherits: false;
+    }
+    @property --inherits-true {
+        syntax: "<color>";
+        initial-value: red;
+        inherits: true;
+    }
+
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        /*
+            Don’t visibly highlight the spaces between words.
+        */
+        color: black;
+        background-color: transparent;
+    }
+
+    /*
+        Non-highlight control: if this text is white on red (inherit)
+        rather than white on green (initial), then @property is not
+        supported well enough to make this test meaningful.
+    */
+    main > .control {
+        --control: red;
+    }
+    main > .control > span {
+        color: white;
+        background-color: var(--control);
+    }
+
+    main > *::selection {
+        --inherits-false: green;
+        --inherits-true: green;
+        --unregistered: green;
+    }
+
+    /*
+        Foreground tests: if the foreground of this text is red or
+        black (initial) rather than green (inherit), then custom
+        properties are not being inherited in highlight styles.
+
+        color is an inherited property, but that shouldn’t matter.
+    */
+    main > .fg > span::selection {
+        background-color: white;
+    }
+    main > .fg.inherits-false > span::selection {
+        color: var(--inherits-false);
+    }
+    main > .fg.inherits-true > span::selection {
+        color: var(--inherits-true);
+    }
+    main > .fg.unregistered > span::selection {
+        color: var(--unregistered);
+    }
+
+    /*
+        Background tests: if the background of this text is red or
+        black (initial) rather than green (inherit), then custom
+        properties are not being inherited in highlight styles.
+
+        background-color is not an inherited property, but that
+        shouldn’t matter.
+    */
+    main > .bg > span::selection {
+        color: white;
+    }
+    main > .bg.inherits-false > span::selection {
+        background-color: var(--inherits-false);
+    }
+    main > .bg.inherits-true > span::selection {
+        background-color: var(--inherits-true);
+    }
+    main > .bg.unregistered > span::selection {
+        background-color: var(--unregistered);
+    }
+</style>
+<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
+<main class="highlight_reftest"
+    ><span class="control"><span>foo</span></span
+    > <span class="fg inherits-false"><span>b</span></span
+    ><span class="fg inherits-true"><span>a</span></span
+    ><span class="fg unregistered"><span>r</span></span
+    > <span class="bg inherits-false"><span>b</span></span
+    ><span class="bg inherits-true"><span>a</span></span
+    ><span class="bg unregistered"><span>z</span></span
+    ></main>
+<script>
+    const main = document.querySelector("main");
+    selectRangeWith(range => {
+        range.selectNodeContents(main);
+        range.setStart(main, 2);
+        range.setEnd(main, 9);
+    });
+</script>
diff --git a/css/css-pseudo/highlight-paired-cascade-001-ref.html b/css/css-pseudo/highlight-paired-cascade-001-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        background-color: transparent;
+        color: transparent;
+    }
+</style>
+<p>Test passes if no text is legible below.
+<main class="highlight_reftest">FAIL</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-paired-cascade-001.html b/css/css-pseudo/highlight-paired-cascade-001.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are not used when highlight pseudo cascade yields foreground color</title>
+<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="match" href="highlight-paired-cascade-001-ref.html">
+<meta name="assert" value="This test verifies that setting color on ::selection suppresses any UA non-initial used value for background-color. These properties are highlight colors, which are subject to paired cascade.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        /*
+            Used background-color should be initial (transparent).
+            https://www.w3.org/TR/CSS21/colors.html#propdef-background-color
+        */
+        color: transparent;
+    }
+</style>
+<p>Test passes if no text is legible below.
+<main class="highlight_reftest">FAIL</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-paired-cascade-002-ref.html b/css/css-pseudo/highlight-paired-cascade-002-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        color: black;
+        background-color: black;
+    }
+</style>
+<p>Test passes if no text is legible below.
+<main class="highlight_reftest">FAIL</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-paired-cascade-002.html b/css/css-pseudo/highlight-paired-cascade-002.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are not used when highlight pseudo cascade yields background color</title>
+<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="match" href="highlight-paired-cascade-002-ref.html">
+<meta name="assert" value="This test verifies that setting background-color on ::selection suppresses any UA non-initial used value for color. These properties are highlight colors, which are subject to paired cascade.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        /*
+            Used value for color should be initial (black).
+            https://web-platform-tests.org/writing-tests/assumptions.html
+        */
+        background-color: black;
+    }
+</style>
+<p>Test passes if no text is legible below.
+<main class="highlight_reftest">FAIL</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-paired-cascade-003-ref.html b/css/css-pseudo/highlight-paired-cascade-003-ref.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    /*
+        UA default highlight colors for ::selection.
+    */
+</style>
+<p>Test passes if the text below appears to be highlighted.
+<main class="highlight_reftest">quick</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-paired-cascade-003.html b/css/css-pseudo/highlight-paired-cascade-003.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are used when highlight pseudo cascade yields only properties other than highlight colors</title>
+<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="match" href="highlight-paired-cascade-003-ref.html">
+<meta name="assert" value="This test verifies that setting text-decoration on ::selection does not suppress any UA non-initial used values for color or background-color. While the former is an applicable (shorthand) property for highlight styles, it is not one of the highlight colors (color or background-color), so paired cascade does not apply.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        /*
+            Used values for color and background-color should be the
+            UA defaults, usually like black on blue or white on blue,
+            *not* initial on initial (like unhighlighted content).
+        */
+        text-decoration: none;
+    }
+</style>
+<p>Test passes if the text below appears to be highlighted.
+<main class="highlight_reftest">quick</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/css/css-pseudo/highlight-paired-cascade-004-notref.html b/css/css-pseudo/highlight-paired-cascade-004-notref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    :link, :visited {
+        color: blue;
+    }
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    /*
+        UA default highlight colors for ::target-text.
+    */
+</style>
+<p>Test passes if the text below does not appear to be highlighted (<a href="">test again</a>).
+<main class="highlight_reftest">quick</main>
+<script>location.href = "#:~:text=quick";</script>