Bug 1705856 [wpt PR 28558] - CSS highlight painting: improve WPT cases (2), a=testonly
authorDelan Azabani <dazabani@igalia.com>
Fri, 23 Apr 2021 10:22:58 +0000
changeset 577295 56eb615f5e690e8239c95ea899edce85c82488d2
parent 577294 560d79b206ef45b32d0f5190b4692309b7f1944e
child 577296 62e48b6a2a1d2323442c5892ec2b3c898676fb7a
push id141827
push userwptsync@mozilla.com
push dateSat, 24 Apr 2021 02:11:12 +0000
treeherderautoland@3a7d9d49c316 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1705856, 28558, 1078474, 2706442, 873614
milestone90.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1705856 [wpt PR 28558] - CSS highlight painting: improve WPT cases (2), a=testonly Automatic update from web-platform-tests CSS highlight painting: improve WPT cases (2) This patch: • introduces a line-height:1 fix (.highlight_reftest) in a support stylesheet, and applies it to 19 reftests • removes five reftests that now pass from TestExpectations (exactly the ones mentioning bug 1078474, which resolves that bug) • corrects c/c/highlight-painting-003.html as per csswg-drafts#6022 • fixes some discrepancies between c/c/selection-overlay-and-* and their reference pages (and each other) • documents helpers and best practices for writing highlight reftests (see c/c/{README.md,support/{highlights.css,selections.js}}) Bug: 1078474 Change-Id: I2bd7e00a7b6fd4b6145a284d5f947c81826c5b25 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2706442 Commit-Queue: Delan Azabani <dazabani@igalia.com> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Yoshifumi Inoue <yosin@chromium.org> Cr-Commit-Position: refs/heads/master@{#873614} -- wpt-commits: eb73a251ab05f4e28a6aba9e746ec978b7dceb11 wpt-pr: 28558
testing/web-platform/tests/css/css-pseudo/README.md
testing/web-platform/tests/css/css-pseudo/active-selection-011.html
testing/web-platform/tests/css/css-pseudo/active-selection-012.html
testing/web-platform/tests/css/css-pseudo/active-selection-014.html
testing/web-platform/tests/css/css-pseudo/active-selection-016.html
testing/web-platform/tests/css/css-pseudo/active-selection-018.html
testing/web-platform/tests/css/css-pseudo/active-selection-021.html
testing/web-platform/tests/css/css-pseudo/active-selection-025.html
testing/web-platform/tests/css/css-pseudo/active-selection-027.html
testing/web-platform/tests/css/css-pseudo/active-selection-031.html
testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html
testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html
testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
testing/web-platform/tests/css/css-pseudo/highlight-painting-001-ref.html
testing/web-platform/tests/css/css-pseudo/highlight-painting-001.html
testing/web-platform/tests/css/css-pseudo/highlight-painting-002-ref.html
testing/web-platform/tests/css/css-pseudo/highlight-painting-002.html
testing/web-platform/tests/css/css-pseudo/highlight-painting-003-ref.html
testing/web-platform/tests/css/css-pseudo/highlight-painting-003.html
testing/web-platform/tests/css/css-pseudo/reference/active-selection-011-ref.html
testing/web-platform/tests/css/css-pseudo/reference/active-selection-012-ref.html
testing/web-platform/tests/css/css-pseudo/reference/active-selection-014-ref.html
testing/web-platform/tests/css/css-pseudo/reference/active-selection-016-ref.html
testing/web-platform/tests/css/css-pseudo/reference/active-selection-018-ref.html
testing/web-platform/tests/css/css-pseudo/reference/active-selection-021-ref.html
testing/web-platform/tests/css/css-pseudo/reference/active-selection-025-ref.html
testing/web-platform/tests/css/css-pseudo/reference/active-selection-027-ref.html
testing/web-platform/tests/css/css-pseudo/reference/active-selection-031-ref.html
testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-011-ref.html
testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-012-ref.html
testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-grammar-001-ref.html
testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-spelling-001-ref.html
testing/web-platform/tests/css/css-pseudo/selection-intercharacter-011.html
testing/web-platform/tests/css/css-pseudo/selection-intercharacter-012.html
testing/web-platform/tests/css/css-pseudo/selection-overlay-and-grammar-001.html
testing/web-platform/tests/css/css-pseudo/selection-overlay-and-spelling-001.html
testing/web-platform/tests/css/css-pseudo/support/highlights.css
testing/web-platform/tests/css/css-pseudo/support/selections.js
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/README.md
@@ -0,0 +1,34 @@
+## Highlight pseudos
+
+There are many subtle browser differences in rendering these pseudo-elements,
+most of which comply with the specs, so here are some hints.
+
+Use the helpers in `support/highlights.css` and `support/selections.js` where
+possible. They include rules and functions for “basic” but tricky tasks like
+setting up a test area, selecting content, and triggering spellcheck.
+
+When creating complex layered references, start by wrapping your text in a
+relative container, then prepend absolute layers with copies of that text, then
+mark up those copies with spans. Make everything transparent initially, and set
+visible styles on the spans only. The absolute layers will perfectly overlap
+your original text, which you can keep for external layout. For example:
+
+```html
+<div class="container">
+    <div class="spelling-error"><span>Teh</span> <span>dgo</span> and
+        <span>teh</span> <span>sphixn</span>.</div>
+    <div class="selection">Teh d<span>go and te</span>h sphixn.</div>
+    Teh dgo and teh sphixn.
+</div>
+```
+```css
+.container { position: relative; color: transparent; }
+.container > * { position: absolute; }
+.spelling-error > span { background: ...; color: ...; }
+.selection > span { background: ...; text-shadow: ...; }
+```
+
+Simplify this pattern at your own peril! For example, if you set backgrounds
+directly on layers as your highlight backgrounds, they will always be exactly
+`line-height` tall, but even if your `line-height` is 1, the actual line boxes
+and so on can still be taller (unless they contain Ahem text only).
--- a/testing/web-platform/tests/css/css-pseudo/active-selection-011.html
+++ b/testing/web-platform/tests/css/css-pseudo/active-selection-011.html
@@ -6,16 +6,17 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
   <link rel="match" href="reference/active-selection-011-ref.html">
 
   <meta content="" name="flags">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       color: red;
       font-size: 300%;
     }
 
   div::selection
@@ -35,9 +36,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> while background color of each glyph of "Selected Text" is white.
 
-  <div id="test">Selected Text</div>
+  <div id="test" class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/active-selection-012.html
+++ b/testing/web-platform/tests/css/css-pseudo/active-selection-012.html
@@ -6,16 +6,17 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
   <link rel="match" href="reference/active-selection-012-ref.html">
 
   <meta content="" name="flags">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       background-color: red;
       color: fuchsia;
       display: inline;
       font-size: 300%;
     }
@@ -43,9 +44,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <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.
 
-  <div id="test">Selected Text</div>
+  <div id="test" class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/active-selection-014.html
+++ b/testing/web-platform/tests/css/css-pseudo/active-selection-014.html
@@ -8,16 +8,17 @@
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
   <link rel="match" href="reference/active-selection-014-ref.html">
 
   <meta content="should" name="flags">
   <meta name="assert" content="This test checks that 'text-decoration' applies to highlight pseudo-element. Since neither 'color' nor 'background-color' has been specified by the pseudo-element selector in this test, then OS-default highlight colors should be used. The consequence of this is that the highlight color determines also the color of the underline.">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       font-size: 300%;
     }
 
   div::selection
     {
@@ -47,9 +48,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if each glyph of "Selected Text" is underlined and if color and background color of "Selected Text" are the OS-default highlight colors. The underline color must also be the same as the highlight color of "Selected Text".
 
-  <div id="test">Selected Text</div>
+  <div id="test" class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/active-selection-016.html
+++ b/testing/web-platform/tests/css/css-pseudo/active-selection-016.html
@@ -6,16 +6,17 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
   <link rel="match" href="reference/active-selection-016-ref.html">
 
   <meta content="" name="flags">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       background-color: white;
       color: white;
       font-size: 300%;
     }
 
@@ -38,9 +39,9 @@
   /* And we set the end boundary of the range inside div#test right */
   window.getSelection().addRange(targetRange);
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
-  <div id="test">FAIL PASS FAIL</div>
+  <div id="test" class="highlight_reftest">FAIL PASS FAIL</div>
--- a/testing/web-platform/tests/css/css-pseudo/active-selection-018.html
+++ b/testing/web-platform/tests/css/css-pseudo/active-selection-018.html
@@ -6,16 +6,17 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
   <link rel="match" href="reference/active-selection-018-ref.html">
 
   <meta content="" name="flags">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       color: green;
       font-size: 300%;
     }
 
   span
@@ -52,9 +53,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if each glyph of "Selected Text" is green, if background color of each glyph of "Selected Text" is white and if there is <strong>no red</strong>.
 
-  <div id="parent">Selected Text <span>FAIL</span></div>
+  <div id="parent" class="highlight_reftest">Selected Text <span>FAIL</span></div>
--- a/testing/web-platform/tests/css/css-pseudo/active-selection-021.html
+++ b/testing/web-platform/tests/css/css-pseudo/active-selection-021.html
@@ -6,16 +6,17 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
   <link rel="match" href="reference/active-selection-021-ref.html">
   <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 
   <meta content="" name="flags">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       color: red;
       font: 25px/1 Ahem;
       text-decoration: underline overline line-through;
     }
 
@@ -47,9 +48,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> and if the underline, the overline and the line-through are also green and not red.
 
-  <div id="test">Selected Text</div>
+  <div id="test" class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/active-selection-025.html
+++ b/testing/web-platform/tests/css/css-pseudo/active-selection-025.html
@@ -18,16 +18,17 @@
   ::first-letter/::first-line
   https://github.com/w3c/csswg-drafts/issues/4625
 
   RESOLVED: Whatever highlight being applied uses colors from before
   even if came from pseudo element like ::first-letter/::first-line
 
   -->
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       color: green;
       font-size: 300%;
     }
 
   div::first-letter
@@ -52,9 +53,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if background color of "Selected Text" is yellow, if the "S" glyph is purple and if the other glyphs are green.
 
-  <div id="test">Selected Text</div>
+  <div id="test" class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/active-selection-027.html
+++ b/testing/web-platform/tests/css/css-pseudo/active-selection-027.html
@@ -18,16 +18,17 @@
   ::first-letter/::first-line
   https://github.com/w3c/csswg-drafts/issues/4625
 
   RESOLVED: Whatever highlight being applied uses colors from before
   even if came from pseudo element like ::first-letter/::first-line
 
   -->
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       color: green;
       font-size: 300%;
     }
 
   div::first-line
@@ -52,9 +53,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if both "selected text" have a yellow background, if the glyphs of "1st selected text" are purple and if the glyphs of "2nd selected text" are green.
 
-  <div id="test">1st selected text<br>2nd selected text</div>
+  <div id="test" class="highlight_reftest">1st selected text<br>2nd selected text</div>
--- a/testing/web-platform/tests/css/css-pseudo/active-selection-031.html
+++ b/testing/web-platform/tests/css/css-pseudo/active-selection-031.html
@@ -5,16 +5,17 @@
   <title>CSS Pseudo-Elements Test: active selection and vertical writing-modes</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
   <link rel="match" href="reference/active-selection-031-ref.html">
 
   <meta content="" name="flags">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div > div
     {
       color: red;
       float: left;
       font-size: 32px;
       margin-left: 16px;
     }
@@ -64,17 +65,17 @@
     /* Finally, we now add such range of content into a selection */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if each glyph of the 6 "Selected Text" is green and if there is <strong>no red</strong>.
 
-  <div id="test">
+  <div id="test" class="highlight_reftest">
 
     <div class="vrl mixed">Selected Text</div>
 
     <div class="vrl sideways">Selected Text</div>
 
     <div class="vrl upright">Selected Text</div>
 
     <div class="vlr mixed">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html
@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       background-color: green;
       color: yellow;
       display: inline;
       font-size: 300%;
     }
   </style>
 
   <p>Test passes if background color of "Text sample" is green and <strong>not red</strong>.
 
-  <div>Text sample</div>
+  <div class="highlight_reftest">Text sample</div>
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
@@ -11,16 +11,17 @@
   <!--
   Example 11 is
   https://www.w3.org/TR/css-pseudo-4/#example-c35bf49a
   -->
 
   <meta content="" name="flags">
   <meta name="assert" content="This test is an adaptation (or modified version) of Example 11 (#example-c35bf49a). The 'div &gt; span::selection' selector has an higher specificity than the 'span::selection' selector.">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       font-size: 300%;
     }
 
   div::selection
     {
@@ -59,9 +60,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if background color of "Text sample" is green and <strong>not red</strong>.
 
-  <div id="test">Text <span>sample</span></div>
+  <div id="test" class="highlight_reftest">Text <span>sample</span></div>
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
@@ -11,16 +11,17 @@
   <!--
   Example 12 is
   https://www.w3.org/TR/css-pseudo-4/#example-97480f68
   -->
 
   <meta content="" name="flags">
   <meta name="assert" content="This test is an adaptation (or modified version) of Example 12 (#example-97480f68). In this test, &ltspan&gt; element's ::selection matches the ::selection { background-color: green; } rule and not the div#test::selection rule because '*' is implied when a tag selector is missing.">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       font-size: 300%;
     }
 
   ::selection
     {
@@ -46,9 +47,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if background color of "Text sample" is green and <strong>not red</strong>.
 
-  <div id="test"><span>Text sample</span></div>
+  <div id="test" class="highlight_reftest"><span>Text sample</span></div>
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html
@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       background-color: yellow;
       color: green;
       display: inline;
       font-size: 300%;
     }
   </style>
 
    <p>Test passes if "Text sample" is green and if its background color is yellow.
 
-  <div>Text sample</div>
+  <div class="highlight_reftest">Text sample</div>
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
@@ -15,16 +15,17 @@
   When any supported property is not given a value by the
   cascade, its value is determined by inheritance from the
   corresponding highlight pseudo-element of its originating
   element's parent element (regardless of whether that property
   is an inherited property).
   https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
   -->
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       font-size: 300%;
     }
 
   div::selection
     {
@@ -44,9 +45,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if "Text sample" is green and if its background color is yellow.
 
-  <div id="test"><span>Text sample</span></div>
+  <div id="test" class="highlight_reftest"><span>Text sample</span></div>
--- a/testing/web-platform/tests/css/css-pseudo/highlight-painting-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-001-ref.html
@@ -1,30 +1,23 @@
 <!doctype html>
 <meta charset="utf-8">
+<link rel="stylesheet" href="support/highlights.css">
 <style>
     p {
         font-size: 7em;
         text-shadow: 0.2500em 0.2500em #C0C000;
         position: relative;
         color: transparent;
-
-        /*
-            https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
-            For text, the corresponding overlay must cover at least
-            the entire em box and may extend further above/below the
-            em box to the line box edges.
-        */
-        line-height: 1;
     }
     p > span {
         color: initial;
         text-shadow: none;
         position: absolute;
     }
     p > span > span {
         background: #C0C0C0;
         text-shadow: 0.5000em 0.5000em #3838E0;
         /* force blue to paint over red */
         position: relative;
     }
 </style>
-<p><span>q<span>uic</span>k</span>quick
+<p class="highlight_reftest"><span>q<span>uic</span>k</span>quick
--- a/testing/web-platform/tests/css/css-pseudo/highlight-painting-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-001.html
@@ -2,35 +2,28 @@
 <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-001-ref.html">
 <meta name="assert" value="::selection overlay is painted in the correct order, including both the element’s shadows and the highlight’s shadows">
 <script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
 <style>
     p {
         font-size: 7em;
         text-shadow: 0.2500em 0.2500em #C0C000;
-
-        /*
-            https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
-            For text, the corresponding overlay must cover at least
-            the entire em box and may extend further above/below the
-            em box to the line box edges.
-        */
-        line-height: 1;
     }
     p::selection {
         background: #C0C0C0;
         text-shadow: 0.5000em 0.5000em #3838E0;
     }
 </style>
-<p>quick
+<p class="highlight_reftest">quick
 <script>
     const target = document.querySelector("p");
     selectRangeWith(range => {
         range.selectNodeContents(target);
         range.setStart(target.childNodes[0], 1);
         range.setEnd(target.childNodes[0], 4);
     });
 </script>
--- a/testing/web-platform/tests/css/css-pseudo/highlight-painting-002-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-002-ref.html
@@ -1,34 +1,27 @@
 <!doctype html>
 <meta charset="utf-8">
+<link rel="stylesheet" href="support/highlights.css">
 <style>
     :root {
         writing-mode: vertical-rl;
     }
     p {
         font-size: 7em;
         text-shadow: 0.1250em 0.1250em #C0C000C0;
         position: relative;
         color: transparent;
-
-        /*
-            https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
-            For text, the corresponding overlay must cover at least
-            the entire em box and may extend further above/below the
-            em box to the line box edges.
-        */
-        line-height: 1;
     }
     p > span {
         color: #E03838C0;
         text-shadow: none;
         position: absolute;
     }
     p > span > span {
         color: #707070C0;
         background: #38E038C0;
         text-shadow: 0.2500em 0.2500em #3838E0C0;
         /* force blue to paint over red */
         position: relative;
     }
 </style>
-<p><span>q<span>uic</span>k</span>quick
+<p class="highlight_reftest"><span>q<span>uic</span>k</span>quick
--- a/testing/web-platform/tests/css/css-pseudo/highlight-painting-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-002.html
@@ -2,40 +2,33 @@
 <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-002-ref.html">
 <meta name="assert" value="::selection overlay is painted in the correct order, including originating element shadows (but not text proper) where selected">
 <script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
 <style>
     :root {
         writing-mode: vertical-rl;
     }
     p {
         font-size: 7em;
         color: #E03838C0;
         text-shadow: 0.1250em 0.1250em #C0C000C0;
-
-        /*
-            https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
-            For text, the corresponding overlay must cover at least
-            the entire em box and may extend further above/below the
-            em box to the line box edges.
-        */
-        line-height: 1;
     }
     p::selection {
         color: #707070C0;
         background: #38E038C0;
         text-shadow: 0.2500em 0.2500em #3838E0C0;
     }
 </style>
-<p>quick
+<p class="highlight_reftest">quick
 <script>
     const target = document.querySelector("p");
     selectRangeWith(range => {
         range.selectNodeContents(target);
         range.setStart(target.childNodes[0], 1);
         range.setEnd(target.childNodes[0], 4);
     });
 </script>
--- 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
@@ -1,26 +1,19 @@
 <!doctype html>
 <meta charset="utf-8">
+<link rel="stylesheet" href="support/highlights.css">
 <style>
     p {
         font-size: 7em;
         width: min-content;
         height: 0.25em;
         background: #C0C000C0;
         position: relative;
         color: transparent;
-
-        /*
-            https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
-            For text, the corresponding overlay must cover at least
-            the entire em box and may extend further above/below the
-            em box to the line box edges.
-        */
-        line-height: 1;
     }
     p > span {
         position: absolute;
     }
     p > span:nth-child(1) {
         color: #E03838C0;
         text-decoration: #C0C000C0 solid line-through;
     }
@@ -28,12 +21,26 @@
         visibility: hidden;
     }
     p > span:nth-child(2) {
         color: transparent;
     }
     p > span:nth-child(2) > span {
         color: #707070C0;
         background: #38E038C0;
+    }
+    /*
+        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;
+    }
+    p > span:nth-child(2) > span > span {
         text-decoration: #3838E0C0 wavy line-through;
     }
 </style>
-<p><span>q<span>uic</span>k</span><span>q<span>uic</span>k</span>quick
+<p class="highlight_reftest">
+    <span>q<span>uic</span>k</span>
+    <span>q<span><span>uic</span></span>k</span>
+    quick
--- a/testing/web-platform/tests/css/css-pseudo/highlight-painting-003.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-003.html
@@ -1,41 +1,34 @@
 <!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-003-ref.html">
-<meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, except that originating element decorations are suppressed where selected">
+<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>
     p {
         font-size: 7em;
         width: min-content;
         height: 0.25em;
         color: #E03838C0;
         background: #C0C000C0;
         text-decoration: #C0C000C0 solid line-through;
-
-        /*
-            https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
-            For text, the corresponding overlay must cover at least
-            the entire em box and may extend further above/below the
-            em box to the line box edges.
-        */
-        line-height: 1;
     }
     p::selection {
         color: #707070C0;
         background: #38E038C0;
         text-decoration: #3838E0C0 wavy line-through;
     }
 </style>
-<p>quick
+<p class="highlight_reftest">quick
 <script>
     const target = document.querySelector("p");
     selectRangeWith(range => {
         range.selectNodeContents(target);
         range.setStart(target.childNodes[0], 1);
         range.setEnd(target.childNodes[0], 4);
     });
 </script>
--- a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-011-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-011-ref.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       color: green;
       font-size: 300%;
     }
   </style>
 
   <p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> while background color of each glyph of "Selected Text" is white.
 
-  <div>Selected Text</div>
+  <div class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-012-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-012-ref.html
@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       background-color: green;
       color: fuchsia;
       display: inline;
       font-size: 300%;
     }
   </style>
 
   <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.
 
-  <div>Selected Text</div>
+  <div class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-014-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-014-ref.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       background-color: Highlight;
       color: HighlightText;
       display: inline;
       font-size: 300%;
       text-decoration: HighlightText underline;
@@ -39,9 +40,9 @@
   5.2 System Colors
   https://www.w3.org/TR/css-color-4/#css-system-colors
   -->
 
   <body>
 
   <p>Test passes if each glyph of "Selected Text" is underlined and if color and background color of "Selected Text" are the OS-default highlight colors. The underline color must also be the same as the highlight color of "Selected Text".
 
-  <div id="test">Selected Text</div>
+  <div id="test" class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-016-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-016-ref.html
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       color: white;
       font-size: 300%;
     }
 
   span
     {
       color: green;
     }
   </style>
 
-  <div>FAIL <span>PASS</span></div>
+  <div class="highlight_reftest">FAIL <span>PASS</span></div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-018-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-018-ref.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       color: green;
       font-size: 300%;
     }
   </style>
 
    <p>Test passes if each glyph of "Selected Text" is green, if background color of each glyph of "Selected Text" is white and if there is <strong>no red</strong>.
 
-  <div>Selected Text</div>
+  <div class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-021-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-021-ref.html
@@ -2,20 +2,21 @@
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       color: green;
       font: 25px/1 Ahem;
       text-decoration: underline overline line-through;
     }
   </style>
 
   <p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> and if the underline, the overline and the line-through are also green and not red.
 
-  <div>Selected Text</div>
+  <div class="highlight_reftest">Selected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-025-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-025-ref.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       background-color: yellow;
       color: green;
       display: inline;
       font-size: 300%;
     }
@@ -18,9 +19,9 @@
   span
     {
       color: purple;
     }
   </style>
 
   <p>Test passes if background color of "Selected Text" is yellow, if the "S" glyph is purple and if the other glyphs are green.
 
-  <div><span>S</span>elected Text</div>
+  <div class="highlight_reftest"><span>S</span>elected Text</div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-027-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-027-ref.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       font-size: 300%;
     }
 
   span
     {
@@ -25,11 +26,11 @@
   span#second
     {
       color: green;
     }
   </style>
 
   <p>Test passes if both "selected text" have a yellow background, if the glyphs of "1st selected text" are purple and if the glyphs of "2nd selected text" are green.
 
-  <div><span id="first">1st selected text</span></div>
+  <div class="highlight_reftest"><span id="first">1st selected text</span></div>
 
-  <div><span id="second">2nd selected text</span></div>
+  <div class="highlight_reftest"><span id="second">2nd selected text</span></div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-031-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-031-ref.html
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
-  div
+  div > div
     {
       color: green;
       float: left;
       font-size: 32px;
       margin-left: 16px;
     }
 
   div.vrl
@@ -45,19 +46,23 @@
   div.upright > span
     {
       background-color: yellow;
     }
   </style>
 
   <p>Test passes if each glyph of the 6 "Selected Text" is green and if there is <strong>no red</strong>.
 
-  <div class="vrl mixed">Selected Text</div>
+  <div class="highlight_reftest">
+
+    <div class="vrl mixed">Selected Text</div>
 
-  <div class="vrl sideways">Selected Text</div>
+    <div class="vrl sideways">Selected Text</div>
 
-  <div class="vrl upright"><span>Selected Text</span></div>
+    <div class="vrl upright"><span>Selected Text</span></div>
 
-  <div class="vlr mixed">Selected Text</div>
+    <div class="vlr mixed">Selected Text</div>
+
+    <div class="vlr sideways">Selected Text</div>
 
-  <div class="vlr sideways">Selected Text</div>
+    <div class="vlr upright"><span>Selected Text</span></div>
 
-  <div class="vlr upright"><span>Selected Text</span></div>
+  </div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-011-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-011-ref.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       font-size: 48px;
       letter-spacing: 1em;
     }
 
   span#yellow
@@ -21,9 +22,9 @@
   span#orange
     {
       background-color: orange;
     }
   </style>
 
   <p>Test passes if the background of characters "c" and "t" is orange (and only those 2 characters) and if the space between those 2 characters is also orange.
 
-  <div><span id="yellow">Sele<span id="orange">ct</span>ed</span></div>
+  <div class="highlight_reftest"><span id="yellow">Sele<span id="orange">ct</span>ed</span></div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-012-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-012-ref.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
       font-size: 48px;
       letter-spacing: 1em;
     }
 
   span#yellow
@@ -21,9 +22,9 @@
   span.orange
     {
       background-color: orange;
     }
   </style>
 
   <p>Test passes if the background of characters "c" and "t" is orange and if the space between those 2 characters is yellow (and not orange).
 
-  <div><span id="yellow">Sele<span class="orange">c</span> <span class="orange">t</span>ed</span></div>
+  <div class="highlight_reftest"><span id="yellow">Sele<span class="orange">c</span> <span class="orange">t</span>ed</span></div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-grammar-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-grammar-001-ref.html
@@ -3,69 +3,55 @@
  <html lang="en">
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
-  div
+  #ref
     {
       font-size: 60px;
-      line-height: 90px;
+      position: relative;
+      color: transparent;
     }
 
-  div#overlapped-line
+  #ref > div
     {
-      color: transparent;
-      margin-bottom: -90px;
+      position: absolute;
     }
 
-  span#single-word
+  #grammar-error > span
     {
       background-color: yellow;
     }
 
-  span#overlapping-line
+  #selection > span
     {
       background-color: rgba(0%, 50%, 100%, 0.5);
       /*
       a very lite blue color
       according to
       https://www.colorhexa.com/7fbfff
       */
       color: yellow;
     }
   </style>
 
-  <script>
-  function startTest()
-  {
-  document.getElementById("reference").blur();
-  /*
-  Some browsers, like Chromium 80+, will
-  transfer focus to a selected element
-  like a contenteditable div and
-  therefore style the border of
-  such element. We remove such
-  focus with the blur() method.
-  */
-  }
-  </script>
-
-  <body onload="startTest();">
-
   <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent.
 
   <p>Test passes
 
   <ul>
     <li>if each glyph of the sentence is yellow
     <li>if "thing" has a desaturated lime green background
     <li>if the other words have a very lite blue background and
     <li>if there is no red.
   </ul>
 
-  <div id="overlapped-line">Many <span id="single-word">thing</span> can happen.</div>
-
-  <div contenteditable="true"><span id="overlapping-line">Many thing can happen.</span></div>
+  <div id="ref" class="highlight_reftest">
+    <div id="grammar-error">Many <span>thing</span> can happen.</div>
+    <div id="selection"><span>Many thing can happen.</span></div>
+    Many thing can happen.
+  </div>
--- a/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-spelling-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-spelling-001-ref.html
@@ -3,39 +3,36 @@
  <html lang="en">
 
   <meta charset="UTF-8">
 
   <title>CSS Reftest Reference</title>
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
-  div
+  #ref
     {
       font-size: 60px;
-      line-height: 1;
-    }
-
-  span#outer
-    {
+      position: relative;
       color: transparent;
     }
 
-  span#inner
+  #ref > div
+    {
+      position: absolute;
+    }
+
+  #spelling-error > span
     {
       background-color: yellow;
     }
 
-  div#overlapping-line
-    {
-      margin-top: -60px; /* -1lh unfortunately is not implemented */
-    }
-
-  div#overlapping-line > span
+  #selection > span
     {
       background-color: rgba(0%, 50%, 100%, 0.5);
       /*
       a very lite blue color
       according to
       https://www.colorhexa.com/7fbfff
       */
       color: yellow;
@@ -48,15 +45,13 @@
 
   <ul>
     <li>if each glyph of "Txet sample" is yellow
     <li>if "Txet" has a desaturated lime green background
     <li>if " sample" has a very lite blue background and
     <li>if there is no red.
   </ul>
 
-  <!--
-  The bad spelling of Txet is intentional and part of this test
-  -->
-
-  <div id="overlapped-line"><span id="outer"><span id="inner">Txet</span> sample</span></div>
-
-  <div id="overlapping-line"><span>Txet sample</span></div>
+  <div id="ref" class="highlight_reftest">
+    <div id="spelling-error"><span>Txet</span> sample</div>
+    <div id="selection"><span>Txet sample</span></div>
+    Txet sample
+  </div>
--- a/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-011.html
+++ b/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-011.html
@@ -7,16 +7,17 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-bounds">
   <link rel="help" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">
   <link rel="match" href="reference/selection-intercharacter-011-ref.html">
 
   <meta content="may" name="flags">
   <meta name="assert" content="This test verifies that intercharacter spacing may be part of the overlay area. When intercharacter spacing is part of the overlay area, then it belongs to the innermost element which contains both characters and which contains such spacing when both characters are selected. In this test, the 'c' and the 't' characters and the space between these characters belong to the same element. Therefore, the 'c' character, the 't' character and the space between these characters have the same orange background color painting.">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       font-size: 48px;
       letter-spacing: 1em;
     }
 
   div::selection
@@ -41,9 +42,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if the background of characters "c" and "t" is orange (and only those 2 characters) and if the space between those 2 characters is also orange.
 
-  <div id="test">Sele<span>ct</span>ed</div>
+  <div id="test" class="highlight_reftest">Sele<span>ct</span>ed</div>
--- a/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-012.html
+++ b/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-012.html
@@ -7,16 +7,17 @@
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-bounds">
   <link rel="help" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">
   <link rel="match" href="reference/selection-intercharacter-012-ref.html">
 
   <meta content="may" name="flags">
   <meta name="assert" content="In this test, the 'c' and the 't' characters share the same level in the containment hierarchy but the space between these characters does not. Therefore, only the 'c' and the 't' characters themselves have an orange background color painting.">
 
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       font-size: 48px;
       letter-spacing: 1em;
     }
 
   div::selection
@@ -41,9 +42,9 @@
   /* Finally, we now select such range of content */
   }
   </script>
 
   <body onload="startTest();">
 
   <p>Test passes if the background of characters "c" and "t" is orange and if the space between those 2 characters is yellow (and not orange).
 
-  <div id="test">Sele<span>c</span> <span>t</span>ed</div>
+  <div id="test" class="highlight_reftest">Sele<span>c</span> <span>t</span>ed</div>
--- a/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-grammar-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-grammar-001.html
@@ -8,31 +8,17 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
   <link rel="match" href="reference/selection-overlay-and-grammar-001-ref.html">
 
   <meta content="" name="flags">
   <meta name="assert" content="In this test, the div::selection pseudo-element must be drawn over the div::grammar-error overlay.">
 
-  <!--
-
-  The initial version of this test was relying on color
-  composition and was predicting a lime-green-ish (#7FBF80:
-  slightly desaturated lime green) background color for "thing".
-
-  "#7fbf80 color description : Slightly desaturated lime green"
-  https://www.colorhexa.com/7fbf80
-
-  This test does not rely on color composition but the
-  test nevertheless verifies the ::selection overlay drawn
-  over the ::grammar-error overlay.
-
-  -->
-
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       font-size: 60px;
       line-height: 90px;
     }
 
   div::selection
@@ -69,15 +55,15 @@
   <!--
     The grammar mistakes in the text below are intentional and part of this test.
 
     https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking
     • contenteditable makes the text “checkable for the purposes of [spelling and grammar checking]”
     • spellcheck tries to enable spelling and grammar checking (subject to user preferences)
     • lang tries to guide the UA towards checking the text in English (but the UA may ignore this)
   -->
-  <div id="test" contenteditable="true" spellcheck="true" lang="en">The fox jumps over the dog.the fox jumps over the dog.</div>
+  <div id="test" class="highlight_reftest" contenteditable="true" spellcheck="true" lang="en">Many thing can happen.</div>
 
   <script>
   const test = document.querySelector("#test");
   selectNodeContents(test);
   trySpellcheck(test);
   </script>
--- a/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-spelling-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-spelling-001.html
@@ -8,53 +8,21 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
   <link rel="match" href="reference/selection-overlay-and-spelling-001-ref.html">
 
   <meta content="" name="flags">
   <meta name="assert" content="In this test, the div::selection pseudo-element must be drawn over the div::spelling-error overlay.">
 
-  <!--
-
-  The initial version of this test was relying on color
-  composition and was predicting a lime-green-ish (#7FBF80:
-  slightly desaturated lime green) background color for "Txet".
-
-  "#7fbf80 color description : Slightly desaturated lime green"
-  https://www.colorhexa.com/7fbf80
-
-  This test does not rely on color composition but the
-  test nevertheless verifies the ::selection overlay drawn
-  over the ::grammar-error overlay.
-
-  Chromium 83+'s selection highlight will vertically
-  extend to line box top and bottom... which is
-  under an eventual discussion in
-  https://github.com/w3c/csswg-drafts/issues/5395
-  One easy way to work around this issue
-  would be to set 'line-height' to '1' instead of
-  '90px'.
-
-  -->
-
+  <link rel="stylesheet" href="support/highlights.css">
   <style>
   div
     {
       font-size: 60px;
-      line-height: 1;
-      /*
-      We deliberately set line-height to 1 in order
-      to avoid/work around a possible difference
-      of rendering of highlight overlay among browsers.
-      In Chrome 80+, the selection highlight
-      overlay will extent vertically to include line
-      box top and line box bottom. This is not
-      the case in Firefox 68+.
-      */
     }
 
   div::selection
     {
       background-color: rgba(0%, 50%, 100%, 0.5);
       /*
       a very lite blue color
       according to
@@ -86,15 +54,15 @@
   <!--
     The bad spelling of Txet is intentional and part of this test.
 
     https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking
     • contenteditable makes the text “checkable for the purposes of [spelling and grammar checking]”
     • spellcheck tries to enable spelling and grammar checking (subject to user preferences)
     • lang tries to guide the UA towards checking the text in English (but the UA may ignore this)
   -->
-  <div id="test" contenteditable="true" spellcheck="true" lang="en">Txet sample</div>
+  <div id="test" class="highlight_reftest" contenteditable="true" spellcheck="true" lang="en">Txet sample</div>
 
   <script>
   const test = document.querySelector("#test");
   selectNodeContents(test);
   trySpellcheck(test);
   </script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/support/highlights.css
@@ -0,0 +1,13 @@
+/**
+ * Container for the interesting part of a highlight reftest, to be
+ * used on both the test page and any reference pages.
+ */
+.highlight_reftest {
+    /*
+        https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
+        For text, the corresponding overlay must cover at least
+        the entire em box and may extend further above/below the
+        em box to the line box edges.
+    */
+    line-height: 1;
+}
--- a/testing/web-platform/tests/css/css-pseudo/support/selections.js
+++ b/testing/web-platform/tests/css/css-pseudo/support/selections.js
@@ -1,11 +1,20 @@
 /**
  * Replaces the current selection (if any) with a new range, after
  * it’s configured by the given function.
+ *
+ * See also: selectNodeContents
+ * Example:
+ *
+ * selectRangeWith(range => {
+ *     range.selectNodeContents(foo);
+ *     range.setStart(foo.childNodes[0], 3);
+ *     range.setEnd(foo.childNodes[0], 5);
+ * });
  */
 function selectRangeWith(fun) {
     const selection = getSelection();
 
     // Deselect any ranges that happen to be selected, to prevent the
     // Selection#addRange call from ignoring our new range (see
     // <https://www.chromestatus.com/feature/6680566019653632> for
     // more details).
@@ -32,27 +41,30 @@ function selectNodeContents(node) {
     // focused (Chromium 80+), unfocus it, to avoid any focus-related
     // styling such as outlines.
     if (document.activeElement != previousActive) {
         document.activeElement.blur();
     }
 }
 
 /**
- * Tries to convince a UA with lazy spellcheck to check and mark the
- * contents of the given nodes (form fields or @contenteditables).
+ * Tries to convince a UA with lazy spellcheck to check and highlight
+ * the contents of the given nodes (form fields or @contenteditables).
  *
- * Both focus and selection can be used for this purpose, but only
- * focus works for @contenteditables.
+ * Each node is focused then immediately unfocused. Both focus and
+ * selection can be used for this purpose, but only focus works for
+ * @contenteditables.
  */
 function trySpellcheck(...nodes) {
     // This is inherently a flaky test risk, but Chromium (as of 87)
     // seems to cancel spellcheck on a node if it wasn’t the last one
     // focused for “long enough” (though immediate unfocus is ok).
-    // setInterval(0) is usually not long enough.
+    // Using requestAnimationFrame or setInterval(0) are usually not
+    // long enough (see <https://bucket.daz.cat/work/igalia/0/0.html>
+    // under “trySpellcheck strategy” for an example).
     const interval = setInterval(() => {
         if (nodes.length > 0) {
             const node = nodes.shift();
             node.focus();
             node.blur();
         } else {
             clearInterval(interval);
         }