From a90a5cba08fdf6c0ceb95101c275108a152a3aed Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Wed, 12 Jun 2024 07:35:37 +0200
Subject: Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../css/css-pseudo/cascade-highlight-001-ref.html  |  22 ----
 .../css/css-pseudo/cascade-highlight-001.html      |  67 ------------
 .../css/css-pseudo/cascade-highlight-002.html      |  54 ----------
 .../css/css-pseudo/cascade-highlight-004-ref.html  |  22 ----
 .../css/css-pseudo/cascade-highlight-004.html      |  52 ---------
 .../css/css-pseudo/cascade-highlight-005.html      |  67 ------------
 .../css/css-pseudo/highlight-cascade-001-ref.html  |  18 ----
 .../css/css-pseudo/highlight-cascade-001.html      |  26 -----
 .../css/css-pseudo/highlight-cascade-002-ref.html  |  42 --------
 .../css/css-pseudo/highlight-cascade-002.html      | 120 ---------------------
 .../css/css-pseudo/highlight-cascade-003-ref.html  |  13 ---
 .../css/css-pseudo/highlight-cascade-003.html      |  20 ----
 .../css/css-pseudo/highlight-cascade-004-ref.html  |  13 ---
 .../css/css-pseudo/highlight-cascade-004.html      |  20 ----
 .../css/css-pseudo/highlight-cascade-005-ref.html  |  24 -----
 .../css/css-pseudo/highlight-cascade-005.html      |  23 ----
 .../css/css-pseudo/highlight-cascade-006-ref.xhtml |  18 ----
 .../css/css-pseudo/highlight-cascade-006.xhtml     |  34 ------
 .../css/css-pseudo/highlight-cascade-007.html      |  75 -------------
 .../css/css-pseudo/highlight-cascade-008-ref.html  |  18 ----
 .../css/css-pseudo/highlight-cascade-008.html      |  31 ------
 .../css/css-pseudo/highlight-cascade-009.html      |  41 -------
 .../cascade-highlight-001-ref.html                 |  22 ++++
 .../highlight-cascade/cascade-highlight-001.html   |  67 ++++++++++++
 .../highlight-cascade/cascade-highlight-002.html   |  54 ++++++++++
 .../cascade-highlight-004-ref.html                 |  22 ++++
 .../highlight-cascade/cascade-highlight-004.html   |  52 +++++++++
 .../cascade-highlight-005-ref.html                 |  28 +++++
 .../highlight-cascade/cascade-highlight-005.html   |  67 ++++++++++++
 .../highlight-cascade-001-ref.html                 |  18 ++++
 .../highlight-cascade/highlight-cascade-001.html   |  26 +++++
 .../highlight-cascade-003-ref.html                 |  13 +++
 .../highlight-cascade/highlight-cascade-003.html   |  20 ++++
 .../highlight-cascade-004-ref.html                 |  13 +++
 .../highlight-cascade/highlight-cascade-004.html   |  20 ++++
 .../highlight-cascade-005-ref.html                 |  24 +++++
 .../highlight-cascade/highlight-cascade-005.html   |  23 ++++
 .../highlight-cascade-006-ref.xhtml                |  18 ++++
 .../highlight-cascade/highlight-cascade-006.xhtml  |  34 ++++++
 .../highlight-cascade/highlight-cascade-007.html   |  75 +++++++++++++
 .../highlight-cascade-008-ref.html                 |  18 ++++
 .../highlight-cascade/highlight-cascade-008.html   |  35 ++++++
 .../highlight-cascade/highlight-cascade-009.html   |  41 +++++++
 ...ighlight-currentcolor-computed-inheritance.html |  43 ++++++++
 .../highlight-currentcolor-computed-visited.html   |  42 ++++++++
 .../highlight-currentcolor-computed.html           |  68 ++++++++++++
 ...t-currentcolor-painting-properties-001-ref.html |  45 ++++++++
 ...light-currentcolor-painting-properties-001.html |  63 +++++++++++
 ...t-currentcolor-painting-properties-002-ref.html |  49 +++++++++
 ...light-currentcolor-painting-properties-002.html |  72 +++++++++++++
 ...-currentcolor-painting-text-shadow-001-ref.html |  14 +++
 ...ight-currentcolor-painting-text-shadow-001.html |  33 ++++++
 ...-currentcolor-painting-text-shadow-002-ref.html |  18 ++++
 ...ight-currentcolor-painting-text-shadow-002.html |  43 ++++++++
 ...currentcolor-root-explicit-default-001-ref.html | 113 +++++++++++++++++++
 ...ght-currentcolor-root-explicit-default-001.html | 105 ++++++++++++++++++
 ...currentcolor-root-explicit-default-002-ref.html |  20 ++++
 ...ght-currentcolor-root-explicit-default-002.html |  45 ++++++++
 ...ght-currentcolor-root-implicit-default-001.html |  27 +++++
 ...ght-currentcolor-root-implicit-default-002.html |  28 +++++
 ...ght-currentcolor-root-implicit-default-ref.html |  22 ++++
 .../highlight-paired-cascade-001-ref.html          |  18 ++++
 .../highlight-paired-cascade-001.html              |  25 +++++
 .../highlight-paired-cascade-002-ref.html          |  18 ++++
 .../highlight-paired-cascade-002.html              |  25 +++++
 .../highlight-paired-cascade-003-ref.html          |  17 +++
 .../highlight-paired-cascade-003.html              |  26 +++++
 .../highlight-paired-cascade-004-notref.html       |  19 ++++
 .../highlight-paired-cascade-004.html              |  27 +++++
 .../highlight-paired-cascade-005-ref.html          |  18 ++++
 .../highlight-paired-cascade-005.html              |  25 +++++
 .../highlight-paired-cascade-006-ref.html          |  17 +++
 .../highlight-paired-cascade-006.html              |  24 +++++
 .../highlight-pseudos-computed.html                |  58 ++++++++++
 ...highlight-pseudos-inheritance-computed-001.html |  42 ++++++++
 .../highlight-pseudos-visited-computed-001.html    |  50 +++++++++
 ...ighlight-currentcolor-computed-inheritance.html |  43 --------
 .../highlight-currentcolor-computed-visited.html   |  42 --------
 .../highlight-currentcolor-computed.html           |  68 ------------
 ...t-currentcolor-painting-properties-001-ref.html |  45 --------
 ...light-currentcolor-painting-properties-001.html |  63 -----------
 ...t-currentcolor-painting-properties-002-ref.html |  49 ---------
 ...light-currentcolor-painting-properties-002.html |  72 -------------
 ...-currentcolor-painting-text-shadow-001-ref.html |  14 ---
 ...ight-currentcolor-painting-text-shadow-001.html |  33 ------
 ...-currentcolor-painting-text-shadow-002-ref.html |  18 ----
 ...ight-currentcolor-painting-text-shadow-002.html |  43 --------
 ...currentcolor-root-explicit-default-001-ref.html | 113 -------------------
 ...ght-currentcolor-root-explicit-default-001.html | 105 ------------------
 ...currentcolor-root-explicit-default-002-ref.html |  20 ----
 ...ght-currentcolor-root-explicit-default-002.html |  45 --------
 ...ght-currentcolor-root-implicit-default-001.html |  27 -----
 ...ght-currentcolor-root-implicit-default-002.html |  28 -----
 ...ght-currentcolor-root-implicit-default-ref.html |  22 ----
 ...ighlight-custom-properties-dynamic-001-ref.html |  16 +++
 .../highlight-custom-properties-dynamic-001.html   |  28 +++++
 .../highlight-painting-shadows-horizontal-ref.html |  73 +++++++++++++
 .../highlight-painting-shadows-horizontal.html     |  41 +++++++
 .../highlight-painting-shadows-vertical-ref.html   |  70 ++++++++++++
 .../highlight-painting-shadows-vertical.html       |  43 ++++++++
 .../highlight-paired-cascade-001-ref.html          |  18 ----
 .../css-pseudo/highlight-paired-cascade-001.html   |  25 -----
 .../highlight-paired-cascade-002-ref.html          |  18 ----
 .../css-pseudo/highlight-paired-cascade-002.html   |  25 -----
 .../highlight-paired-cascade-003-ref.html          |  17 ---
 .../css-pseudo/highlight-paired-cascade-003.html   |  26 -----
 .../highlight-paired-cascade-004-notref.html       |  19 ----
 .../css-pseudo/highlight-paired-cascade-004.html   |  27 -----
 .../highlight-paired-cascade-005-ref.html          |  18 ----
 .../css-pseudo/highlight-paired-cascade-005.html   |  25 -----
 .../highlight-paired-cascade-006-ref.html          |  17 ---
 .../css-pseudo/highlight-paired-cascade-006.html   |  24 -----
 .../css/css-pseudo/highlight-pseudos-computed.html |  58 ----------
 ...highlight-pseudos-inheritance-computed-001.html |  42 --------
 .../highlight-pseudos-visited-computed-001.html    |  50 ---------
 .../css/css-pseudo/highlight-styling-001.html      |   8 +-
 .../css/css-pseudo/highlight-styling-002.html      |   8 +-
 .../reference/cascade-highlight-005-ref.html       |  28 -----
 .../selection-over-highlight-001-ref.html          |  12 +++
 .../css-pseudo/selection-over-highlight-001.html   |  24 +++++
 .../css/css-pseudo/target-text-dynamic-004.html    |   2 +-
 .../target-text-shadow-horizontal-ref.html         |  19 ++++
 .../css-pseudo/target-text-shadow-horizontal.html  |  25 +++++
 .../target-text-shadow-vertical-ref.html           |  20 ++++
 .../css-pseudo/target-text-shadow-vertical.html    |  26 +++++
 125 files changed, 2355 insertions(+), 2116 deletions(-)
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-008-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-008.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade-009.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-002.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006-ref.xhtml
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006.xhtml
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-007.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-009.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-visited.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-002.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004-notref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-computed.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-inheritance-computed-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-visited-computed-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html
 delete mode 100644 testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html
 create mode 100644 testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html

(limited to 'testing/web-platform/tests/css/css-pseudo')

diff --git 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
deleted file mode 100644
index 25dbeadb2e..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!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 class="highlight_reftest">Text sample</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
deleted file mode 100644
index 6068a076f0..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-
-  <meta charset="UTF-8">
-
-  <title>CSS Pseudo-Elements Test: higher specificity of selectors (Example 11)</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-cascade">
-  <link rel="match" href="cascade-highlight-001-ref.html">
-
-  <!--
-  Example 11 is
-  https://www.w3.org/TR/css-pseudo-4/#example-c35bf49a
-  -->
-
-  <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
-    {
-      background-color: green;
-      color: yellow;
-    }
-
-  div > span::selection
-  /*
-  count the number of element names and pseudo-elements in the selector (= d)
-  a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3
-  */
-    {
-      background-color: green;
-    }
-
-  span::selection
-  /*
-  count the number of element names and pseudo-elements in the selector (= d)
-  a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2
-  */
-    {
-      background-color: red;
-      color: yellow;
-    }
-  </style>
-
-  <script>
-  function startTest()
-  {
-  var targetRange = document.createRange();
-  /* We first create an empty range */
-  targetRange.selectNodeContents(document.getElementById("test"));
-  /* Then we set the range boundaries to the children of div#test */
-  window.getSelection().addRange(targetRange);
-  /* 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" class="highlight_reftest">Text <span>sample</span></div>
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
deleted file mode 100644
index 50be805f01..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-
-  <meta charset="UTF-8">
-
-  <title>CSS Pseudo-Elements Test: tag selector missing (Example 12)</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-cascade">
-  <link rel="match" href="cascade-highlight-001-ref.html">
-
-  <!--
-  Example 12 is
-  https://www.w3.org/TR/css-pseudo-4/#example-97480f68
-  -->
-
-  <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
-    {
-      background-color: green;
-      color: yellow;
-    }
-
-  div#test::selection
-    {
-      background-color: red;
-      color: black;
-    }
-  </style>
-
-  <script>
-  function startTest()
-  {
-  var targetRange = document.createRange();
-  /* We first create an empty range */
-  targetRange.selectNodeContents(document.getElementById("test"));
-  /* Then we set the range boundaries to the children of div#test */
-  window.getSelection().addRange(targetRange);
-  /* 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" class="highlight_reftest"><span>Text sample</span></div>
diff --git 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
deleted file mode 100644
index e755283a32..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!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 class="highlight_reftest">Text sample</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
deleted file mode 100644
index 56abba7156..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-
-  <meta charset="UTF-8">
-
-  <title>CSS Pseudo-Elements Test: inheritance of selection highlight colors from its parent element</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-cascade">
-  <link rel="match" href="cascade-highlight-004-ref.html">
-
-  <meta name="assert" content="In this test, 'color' and 'background-color' have not been given a value for the span element. Since its parent element has an highlight pseudo-element, then these values should be inherited. Therefore the span element should be green on a yellow background and should not use the OS default selection highlight color values.">
-
-  <!--
-  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
-    {
-      background-color: yellow;
-      color: green;
-    }
-  </style>
-
-  <script>
-  function startTest()
-  {
-  var targetRange = document.createRange();
-  /* We first create an empty range */
-  targetRange.selectNodeContents(document.getElementById("test"));
-  /* Then we set the range boundaries to the children of div#test */
-  window.getSelection().addRange(targetRange);
-  /* 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" class="highlight_reftest"><span>Text sample</span></div>
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html
deleted file mode 100644
index 2c6ba60270..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-
-  <meta charset="UTF-8">
-
-  <title>CSS Pseudo-Elements Test: inheritance of selection highlight background color from its parent element</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-cascade">
-  <link rel="match" href="reference/cascade-highlight-005-ref.html">
-
-  <meta name="assert" content="In this test, 'background-color' has not been specified a value for the highlight pseudo-element of the span element. Since the span's parent element has an highlight pseudo-element also, then the span's background color for its highlight pseudo-element should be inherited from its parent highlight pseudo-element. Therefore the span element should have a green background color.">
-
-  <!--
-
-  This is a modified version of Example 11
-  https://www.w3.org/TR/css-pseudo-4/#example-c35bf49a
-  found in § 3.5 Cascading and Per-Element Highlight Styles
-  https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
-
-  -->
-
-  <!--
-  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
-    {
-      background-color: green;
-      color: yellow;
-    }
-
-  span::selection
-    {
-      color: orange;
-    }
-  </style>
-
-  <script>
-  function startTest()
-  {
-  var targetRange = document.createRange();
-  /* We first create an empty range */
-  targetRange.selectNodeContents(document.getElementById("test"));
-  /* Then we set the range boundaries to the children of div#test */
-  window.getSelection().addRange(targetRange);
-  /* Finally, we now select such range of content */
-  }
-  </script>
-
-  <body onload="startTest();">
-
-  <p>Test passes if "Text selected" has a green background throughout, if "Tex" and "cted" are yellow and if "t sele" are orange.
-
-  <div id="test" class="highlight_reftest">Tex<span>t sele</span>cted</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html
deleted file mode 100644
index a18690962f..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html
deleted file mode 100644
index f237e9eca7..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html
deleted file mode 100644
index 17629a6dba..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html
deleted file mode 100644
index c01d3c796e..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html
deleted file mode 100644
index 256c28ba0c..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<title>Initial custom property values in :root::selection rule</title>
-<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<script src="support/selections.js"></script>
-<style>
-  :root::selection {
-    background-color: green;
-  }
-</style>
-<main>PASS if background-color is green when selected</main>
-<script>
-  selectNodeContents(document.querySelector("main"));
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html
deleted file mode 100644
index 61bc46d4c5..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<title>Initial custom property values in :root::selection rule</title>
-<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<link rel="match" href="highlight-cascade-003-ref.html">
-<meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
-<script src="support/selections.js"></script>
-<style>
-  @property --bg {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: green;
-  }
-  :root::selection {
-    background-color: var(--bg, red);
-  }
-</style>
-<main>PASS if background-color is green when selected</main>
-<script>
-  selectNodeContents(document.querySelector("main"));
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html
deleted file mode 100644
index f9bf83f9c1..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<title>Initial custom property values in div::selection rule</title>
-<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<script src="support/selections.js"></script>
-<style>
-  div::selection {
-    background-color: green;
-  }
-</style>
-<div>PASS if background-color is green when selected</div>
-<script>
-  selectNodeContents(document.querySelector("div"));
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html
deleted file mode 100644
index eb181096ce..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<title>Initial custom property values in div::selection rule</title>
-<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<link rel="match" href="highlight-cascade-004-ref.html">
-<meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
-<script src="support/selections.js"></script>
-<style>
-  @property --bg {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: green;
-  }
-  div::selection {
-    background-color: var(--bg, red);
-  }
-</style>
-<div>PASS if background-color is green when selected</div>
-<script>
-  selectNodeContents(document.querySelector("div"));
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html
deleted file mode 100644
index 20d2b0bdb3..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</title>
-<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>
-    nav::selection,
-    span::selection,
-    b::selection,
-    aside::selection {
-        background-color: green;
-        color: white;
-    }
-    main::selection,
-    i::selection {
-        background-color: green;
-        color: yellow;
-    }
-</style>
-<nav class="highlight_reftest">white</nav>
-<main class="highlight_reftest">yellow <span>white <b>white</b></span></main>
-<aside class="highlight_reftest">white <i>yellow</i></aside>
-<script>selectNodeContents(document.body);</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html
deleted file mode 100644
index 008f56aded..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</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-005-ref.html">
-<meta name="assert" content="This test verifies that, given both universal and non-universal ::selection rules, the subject of the non-universal rule has styles from both rules with the non-universal styles overriding the universal styles (due to the cascade), its descendants have styles from both rules with the universal styles overriding the non-universal styles (due to highlight inheritance), and its siblings have the universal styles only.">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-    /* * (universal) */::selection {
-        background-color: green;
-        color: white;
-    }
-    main::selection,
-    aside ::selection {
-        color: yellow;
-    }
-</style>
-<nav class="highlight_reftest">white</nav>
-<main class="highlight_reftest">yellow <span>white <b>white</b></span></main>
-<aside class="highlight_reftest">white <i>yellow</i></aside>
-<script>selectNodeContents(document.body);</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml
deleted file mode 100644
index df0a56123e..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
-<meta charset="utf-8"/>
-<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and namespace-universal rules</title>
-<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"/>
-<script src="support/selections.js"></script>
-<style>
-    main * { all: initial; display: block; }
-    ::selection { color: green; }
-</style>
-</head><body>
-<main xmlns:other="http://example.org/other">
-    <div class="red"><span class="bar"><other:a>green</other:a></span></div>
-    <div class="red"><empty xmlns=""><other:b>green</other:b></empty></div>
-    <div class="red"><foo xmlns="http://example.org/foo"><other:c>green</other:c></foo></div>
-    <div class="red"><default xmlns="http://example.org/default"><other:d>green</other:d></default></div>
-</main>
-<script>selectNodeContents(document.body);</script>
-</body></html>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml
deleted file mode 100644
index fb6d07f8f0..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml
+++ /dev/null
@@ -1,34 +0,0 @@
-<?xml version="1.0"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
-<meta charset="utf-8"/>
-<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and namespace-universal rules</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-006-ref.xhtml"/>
-<meta name="assert" content="This test verifies that, given both universal ::selection rules and ::selection rules that are actually non-universal due to an explicit namespace prefix or default @namespace rule, the non-universal rules are not erroneously treated as universal."/>
-<script src="support/selections.js"></script>
-<style>
-    main * { all: initial; display: block; }
-    ::selection { color: green; } /* 1. universal (* means *|* if there is no default @namespace) */
-    .red::selection { color: red; } /* 2. not universal; matches only .red */
-</style>
-<style>
-    @namespace "http://example.org/default";
-    @namespace foo "http://example.org/foo";
-    *|*.bar::selection { color: red; } /* 3. not universal; matches only .bar */
-    |*::selection { color: red; } /* 4. not universal; matches only no/empty xmlns */
-    foo|*::selection { color: red; } /* 5. not universal; matches only xmlns http://example.org/foo */
-    ::selection { color: red; } /* 6. not universal; matches only xmlns http://example.org/default */
-</style>
-</head><body>
-<main xmlns:other="http://example.org/other">
-    <!-- div.red is red (1+2), span.bar is red (1+3), other:a is green (1) -->
-    <div class="red"><span class="bar"><other:a>green</other:a></span></div>
-    <!-- div.red is red (1+2), empty is red (1+4), other:b is green (1) -->
-    <div class="red"><empty xmlns=""><other:b>green</other:b></empty></div>
-    <!-- div.red is red (1+2), foo is red (1+5), other:c is green (1) -->
-    <div class="red"><foo xmlns="http://example.org/foo"><other:c>green</other:c></foo></div>
-    <!-- div.red is red (1+2), default is red (1+6), other:d is green (1) -->
-    <div class="red"><default xmlns="http://example.org/default"><other:d>green</other:d></default></div>
-</main>
-<script>selectNodeContents(document.body);</script>
-</body></html>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html
deleted file mode 100644
index de0322d910..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</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="help" href="https://github.com/w3c/csswg-drafts/issues/7591">
-<meta name="assert" content="This test verifies that non-applicable property declarations are ignored in highlight pseudos, that the computed values of ‘font-size’ and ‘line-height’ in highlight pseudos are taken from the originating element, and that ‘text-shadow’ in highlight pseudos respects these values when given ‘em’ and ‘lh’ units.">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<style>
-    main {
-        font-size: 12px;
-        line-height: 13px;
-    }
-    main span {
-        font-size: 18px;
-        line-height: 19px;
-    }
-    /* * (universal) */::selection {
-        font-size: 42px;
-        line-height: 43px;
-    }
-    main .M::selection {
-        text-shadow: green 1em 0;
-    }
-    main .W::selection {
-        text-shadow: green 0 1lh;
-    }
-    /* * (universal) */::selection {
-        text-decoration-thickness: 1em;
-    }
-</style>
-<main>
-    <div class="M"><div><span>M</span></div></div>
-    <div class="W"><div><span>W</span></div></div>
-    <div class="U"><div><span>U</span></div></div>
-</main>
-<script>
-    selectNodeContents(document.querySelector("main"));
-
-    const m = getComputedStyle(document.querySelector("main .M"), "::selection");
-    const mSpan = getComputedStyle(document.querySelector("main .M span"), "::selection");
-    test(() => void assert_equals(m.fontSize, "12px"),
-        "M::selection’s font-size is the same as in M");
-    test(() => void assert_equals(mSpan.fontSize, "18px"),
-        "M span::selection’s font-size is the same as in M span");
-    test(() => void assert_equals(m.textShadow, "rgb(0, 128, 0) 12px 0px 0px"),
-        "M::selection’s own text-shadow respects M’s font-size");
-    test(() => void assert_equals(mSpan.textShadow, "rgb(0, 128, 0) 12px 0px 0px"),
-        "M span::selection’s inherited text-shadow respects M’s font-size");
-
-    const w = getComputedStyle(document.querySelector("main .W"), "::selection");
-    const wSpan = getComputedStyle(document.querySelector("main .W span"), "::selection");
-    test(() => void assert_equals(w.lineHeight, "13px"),
-        "W::selection’s line-height is the same as in W");
-    test(() => void assert_equals(wSpan.lineHeight, "19px"),
-        "W span::selection’s line-height is the same as in W span");
-    test(() => void assert_equals(w.textShadow, "rgb(0, 128, 0) 0px 13px 0px"),
-        "W::selection’s own text-shadow respects W’s line-height");
-    test(() => void assert_equals(wSpan.textShadow, "rgb(0, 128, 0) 0px 13px 0px"),
-        "W span::selection’s inherited text-shadow respects W’s line-height");
-
-    const u = getComputedStyle(document.querySelector("main .U"), "::selection");
-    const uSpan = getComputedStyle(document.querySelector("main .U span"), "::selection");
-    test(() => void assert_equals(u.fontSize, "12px"),
-        "U::selection’s font-size is the same as in U");
-    test(() => void assert_equals(uSpan.fontSize, "18px"),
-        "U span::selection’s font-size is the same as in U span");
-    test(() => void assert_equals(u.textDecorationThickness, "12px"),
-        "U::selection’s own text-decoration-thickness respects U’s font-size");
-    test(() => void assert_equals(uSpan.textDecorationThickness, "18px"),
-        "U span::selection’s own text-decoration-thickness respects U span’s font-size");
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008-ref.html
deleted file mode 100644
index c87ddcf93c..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008-ref.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<title>Custom property values from the root element</title>
-<script src="support/selections.js"></script>
-<style>
-  div::selection {
-    background-color: green;
-    text-decoration-line: underline;
-    text-decoration-style: line;
-    text-decoration-thickness: 1px;
-    text-decoration-color: yellow;
-  }
-  span::selection {
-    background-color: blue;
-  }
-</style>
-<div style="width: 300px">PASS if background-color is green when selected, <span>except this which is blue</span>, and underline is yellow.<script>
-  selectNodeContents(document.querySelector("div"));
-</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008.html
deleted file mode 100644
index 10ca924b8f..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<title>Custom property values from the root element</title>
-<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<link rel="match" href="highlight-cascade-008-ref.html">
-<meta name="assert" value="This test verifies that when a custom property is not found in highlight cascade, its value is taken from the root element.">
-<meta name="fuzzy" content="0-255;0-10">
-<script src="support/selections.js"></script>
-<style>
-  :root {
-    --background-color: green;
-    --decoration-color: purple;
-  }
-  ::selection {
-    --decoration-color: yellow;
-  }
-  div::selection {
-    background-color: var(--background-color, red);
-    text-decoration-line: underline;
-    text-decoration-style: line;
-    text-decoration-color: var(--decoration-color, red);
-  }
-  span::selection {
-    --background-color: blue;
-    background-color: var(--background-color, red);
-  }
-</style>
-<div style="width: 300px">PASS if background-color is green when selected, <span>except this which is blue</span>, and underline is yellow.</div>
-<script>
-  selectNodeContents(document.querySelector("div"));
-</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-009.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-009.html
deleted file mode 100644
index acc48c7c36..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-009.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight cascade: inheritance of custom properties</title>
-<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6641">
-<meta name="assert" content="This test verifies that custom properties used in highlight pseudos are taken from the ::root if not found in the highlight inheritance chain.">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<style>
-  :root {
-    --background-color: green;
-    --decoration-color: purple;
-  }
-  ::selection {
-    --decoration-color: green;
-  }
-  div::selection {
-    --background-color: blue;
-    background-color: var(--background-color, red);
-  }
-</style>
-<body>
-  <div>Some text</div>
-</body>
-<script>
-    selectNodeContents(document.querySelector("body"));
-
-    const body_selection = getComputedStyle(document.querySelector("body"), "::selection");
-    const div_selection = getComputedStyle(document.querySelector("div"), "::selection");
-    test(() => void assert_equals(body_selection.getPropertyValue("--background-color"), "green"),
-        "body ::selection has the root custom property");
-    test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "green"),
-        "body ::selection uses its own custom property");
-    test(() => void assert_equals(div_selection.getPropertyValue("--decoration-color"), "green"),
-        "div::selection inherits a custom property");
-    test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "blue"),
-        "div::selection uses its own custom property");
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001-ref.html
new file mode 100644
index 0000000000..2a2907b10a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001-ref.html
@@ -0,0 +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 class="highlight_reftest">Text sample</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001.html
new file mode 100644
index 0000000000..f441adf3b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: higher specificity of selectors (Example 11)</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-cascade">
+  <link rel="match" href="cascade-highlight-001-ref.html">
+
+  <!--
+  Example 11 is
+  https://www.w3.org/TR/css-pseudo-4/#example-c35bf49a
+  -->
+
+  <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
+    {
+      background-color: green;
+      color: yellow;
+    }
+
+  div > span::selection
+  /*
+  count the number of element names and pseudo-elements in the selector (= d)
+  a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3
+  */
+    {
+      background-color: green;
+    }
+
+  span::selection
+  /*
+  count the number of element names and pseudo-elements in the selector (= d)
+  a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2
+  */
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function startTest()
+  {
+  var targetRange = document.createRange();
+  /* We first create an empty range */
+  targetRange.selectNodeContents(document.getElementById("test"));
+  /* Then we set the range boundaries to the children of div#test */
+  window.getSelection().addRange(targetRange);
+  /* 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" class="highlight_reftest">Text <span>sample</span></div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-002.html
new file mode 100644
index 0000000000..d10bdb9b04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-002.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: tag selector missing (Example 12)</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-cascade">
+  <link rel="match" href="cascade-highlight-001-ref.html">
+
+  <!--
+  Example 12 is
+  https://www.w3.org/TR/css-pseudo-4/#example-97480f68
+  -->
+
+  <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
+    {
+      background-color: green;
+      color: yellow;
+    }
+
+  div#test::selection
+    {
+      background-color: red;
+      color: black;
+    }
+  </style>
+
+  <script>
+  function startTest()
+  {
+  var targetRange = document.createRange();
+  /* We first create an empty range */
+  targetRange.selectNodeContents(document.getElementById("test"));
+  /* Then we set the range boundaries to the children of div#test */
+  window.getSelection().addRange(targetRange);
+  /* 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" class="highlight_reftest"><span>Text sample</span></div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004-ref.html
new file mode 100644
index 0000000000..9b8507c4cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004-ref.html
@@ -0,0 +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 class="highlight_reftest">Text sample</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004.html
new file mode 100644
index 0000000000..295321a172
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: inheritance of selection highlight colors from its parent element</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-cascade">
+  <link rel="match" href="cascade-highlight-004-ref.html">
+
+  <meta name="assert" content="In this test, 'color' and 'background-color' have not been given a value for the span element. Since its parent element has an highlight pseudo-element, then these values should be inherited. Therefore the span element should be green on a yellow background and should not use the OS default selection highlight color values.">
+
+  <!--
+  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
+    {
+      background-color: yellow;
+      color: green;
+    }
+  </style>
+
+  <script>
+  function startTest()
+  {
+  var targetRange = document.createRange();
+  /* We first create an empty range */
+  targetRange.selectNodeContents(document.getElementById("test"));
+  /* Then we set the range boundaries to the children of div#test */
+  window.getSelection().addRange(targetRange);
+  /* 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" class="highlight_reftest"><span>Text sample</span></div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005-ref.html
new file mode 100644
index 0000000000..d1e597e05b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005-ref.html
@@ -0,0 +1,28 @@
+<!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%;
+    }
+
+  span
+    {
+      color: orange;
+    }
+  </style>
+
+  <p>Test passes if "Text selected" has a green background throughout, if "Tex" and "cted" are yellow and if "t sele" are orange.
+
+  <div class="highlight_reftest">Tex<span>t sele</span>cted</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005.html
new file mode 100644
index 0000000000..25ad85fe70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: inheritance of selection highlight background color from its parent element</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-cascade">
+  <link rel="match" href="cascade-highlight-005-ref.html">
+
+  <meta name="assert" content="In this test, 'background-color' has not been specified a value for the highlight pseudo-element of the span element. Since the span's parent element has an highlight pseudo-element also, then the span's background color for its highlight pseudo-element should be inherited from its parent highlight pseudo-element. Therefore the span element should have a green background color.">
+
+  <!--
+
+  This is a modified version of Example 11
+  https://www.w3.org/TR/css-pseudo-4/#example-c35bf49a
+  found in § 3.5 Cascading and Per-Element Highlight Styles
+  https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
+
+  -->
+
+  <!--
+  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
+    {
+      background-color: green;
+      color: yellow;
+    }
+
+  span::selection
+    {
+      color: orange;
+    }
+  </style>
+
+  <script>
+  function startTest()
+  {
+  var targetRange = document.createRange();
+  /* We first create an empty range */
+  targetRange.selectNodeContents(document.getElementById("test"));
+  /* Then we set the range boundaries to the children of div#test */
+  window.getSelection().addRange(targetRange);
+  /* Finally, we now select such range of content */
+  }
+  </script>
+
+  <body onload="startTest();">
+
+  <p>Test passes if "Text selected" has a green background throughout, if "Tex" and "cted" are yellow and if "t sele" are orange.
+
+  <div id="test" class="highlight_reftest">Tex<span>t sele</span>cted</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001-ref.html
new file mode 100644
index 0000000000..b96ffce5ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001.html
new file mode 100644
index 0000000000..18b3635b3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003-ref.html
new file mode 100644
index 0000000000..68964149ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>Initial custom property values in :root::selection rule</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<script src="../support/selections.js"></script>
+<style>
+  :root::selection {
+    background-color: green;
+  }
+</style>
+<main>PASS if background-color is green when selected</main>
+<script>
+  selectNodeContents(document.querySelector("main"));
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003.html
new file mode 100644
index 0000000000..b29f37528c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>Initial custom property values in :root::selection rule</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="match" href="highlight-cascade-003-ref.html">
+<meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
+<script src="../support/selections.js"></script>
+<style>
+  @property --bg {
+    syntax: "<color>";
+    inherits: false;
+    initial-value: green;
+  }
+  :root::selection {
+    background-color: var(--bg, red);
+  }
+</style>
+<main>PASS if background-color is green when selected</main>
+<script>
+  selectNodeContents(document.querySelector("main"));
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004-ref.html
new file mode 100644
index 0000000000..5845e93620
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>Initial custom property values in div::selection rule</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<script src="../support/selections.js"></script>
+<style>
+  div::selection {
+    background-color: green;
+  }
+</style>
+<div>PASS if background-color is green when selected</div>
+<script>
+  selectNodeContents(document.querySelector("div"));
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004.html
new file mode 100644
index 0000000000..f3155bcec6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>Initial custom property values in div::selection rule</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="match" href="highlight-cascade-004-ref.html">
+<meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
+<script src="../support/selections.js"></script>
+<style>
+  @property --bg {
+    syntax: "<color>";
+    inherits: false;
+    initial-value: green;
+  }
+  div::selection {
+    background-color: var(--bg, red);
+  }
+</style>
+<div>PASS if background-color is green when selected</div>
+<script>
+  selectNodeContents(document.querySelector("div"));
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005-ref.html
new file mode 100644
index 0000000000..f0ea3faa76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</title>
+<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>
+    nav::selection,
+    span::selection,
+    b::selection,
+    aside::selection {
+        background-color: green;
+        color: white;
+    }
+    main::selection,
+    i::selection {
+        background-color: green;
+        color: yellow;
+    }
+</style>
+<nav class="highlight_reftest">white</nav>
+<main class="highlight_reftest">yellow <span>white <b>white</b></span></main>
+<aside class="highlight_reftest">white <i>yellow</i></aside>
+<script>selectNodeContents(document.body);</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005.html
new file mode 100644
index 0000000000..958bdf6544
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</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-005-ref.html">
+<meta name="assert" content="This test verifies that, given both universal and non-universal ::selection rules, the subject of the non-universal rule has styles from both rules with the non-universal styles overriding the universal styles (due to the cascade), its descendants have styles from both rules with the universal styles overriding the non-universal styles (due to highlight inheritance), and its siblings have the universal styles only.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+    /* * (universal) */::selection {
+        background-color: green;
+        color: white;
+    }
+    main::selection,
+    aside ::selection {
+        color: yellow;
+    }
+</style>
+<nav class="highlight_reftest">white</nav>
+<main class="highlight_reftest">yellow <span>white <b>white</b></span></main>
+<aside class="highlight_reftest">white <i>yellow</i></aside>
+<script>selectNodeContents(document.body);</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006-ref.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006-ref.xhtml
new file mode 100644
index 0000000000..643dd79325
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006-ref.xhtml
@@ -0,0 +1,18 @@
+<?xml version="1.0"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
+<meta charset="utf-8"/>
+<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and namespace-universal rules</title>
+<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"/>
+<script src="../support/selections.js"></script>
+<style>
+    main * { all: initial; display: block; }
+    ::selection { color: green; }
+</style>
+</head><body>
+<main xmlns:other="http://example.org/other">
+    <div class="red"><span class="bar"><other:a>green</other:a></span></div>
+    <div class="red"><empty xmlns=""><other:b>green</other:b></empty></div>
+    <div class="red"><foo xmlns="http://example.org/foo"><other:c>green</other:c></foo></div>
+    <div class="red"><default xmlns="http://example.org/default"><other:d>green</other:d></default></div>
+</main>
+<script>selectNodeContents(document.body);</script>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006.xhtml
new file mode 100644
index 0000000000..4a37af7c25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
+<meta charset="utf-8"/>
+<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and namespace-universal rules</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-006-ref.xhtml"/>
+<meta name="assert" content="This test verifies that, given both universal ::selection rules and ::selection rules that are actually non-universal due to an explicit namespace prefix or default @namespace rule, the non-universal rules are not erroneously treated as universal."/>
+<script src="../support/selections.js"></script>
+<style>
+    main * { all: initial; display: block; }
+    ::selection { color: green; } /* 1. universal (* means *|* if there is no default @namespace) */
+    .red::selection { color: red; } /* 2. not universal; matches only .red */
+</style>
+<style>
+    @namespace "http://example.org/default";
+    @namespace foo "http://example.org/foo";
+    *|*.bar::selection { color: red; } /* 3. not universal; matches only .bar */
+    |*::selection { color: red; } /* 4. not universal; matches only no/empty xmlns */
+    foo|*::selection { color: red; } /* 5. not universal; matches only xmlns http://example.org/foo */
+    ::selection { color: red; } /* 6. not universal; matches only xmlns http://example.org/default */
+</style>
+</head><body>
+<main xmlns:other="http://example.org/other">
+    <!-- div.red is red (1+2), span.bar is red (1+3), other:a is green (1) -->
+    <div class="red"><span class="bar"><other:a>green</other:a></span></div>
+    <!-- div.red is red (1+2), empty is red (1+4), other:b is green (1) -->
+    <div class="red"><empty xmlns=""><other:b>green</other:b></empty></div>
+    <!-- div.red is red (1+2), foo is red (1+5), other:c is green (1) -->
+    <div class="red"><foo xmlns="http://example.org/foo"><other:c>green</other:c></foo></div>
+    <!-- div.red is red (1+2), default is red (1+6), other:d is green (1) -->
+    <div class="red"><default xmlns="http://example.org/default"><other:d>green</other:d></default></div>
+</main>
+<script>selectNodeContents(document.body);</script>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-007.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-007.html
new file mode 100644
index 0000000000..df79d8dff5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-007.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</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="help" href="https://github.com/w3c/csswg-drafts/issues/7591">
+<meta name="assert" content="This test verifies that non-applicable property declarations are ignored in highlight pseudos, that the computed values of ‘font-size’ and ‘line-height’ in highlight pseudos are taken from the originating element, and that ‘text-shadow’ in highlight pseudos respects these values when given ‘em’ and ‘lh’ units.">
+<script src="../support/selections.js"></script>
+<link rel="stylesheet" href="../support/highlights.css">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+    main {
+        font-size: 12px;
+        line-height: 13px;
+    }
+    main span {
+        font-size: 18px;
+        line-height: 19px;
+    }
+    /* * (universal) */::selection {
+        font-size: 42px;
+        line-height: 43px;
+    }
+    main .M::selection {
+        text-shadow: green 1em 0;
+    }
+    main .W::selection {
+        text-shadow: green 0 1lh;
+    }
+    /* * (universal) */::selection {
+        text-decoration-thickness: 1em;
+    }
+</style>
+<main>
+    <div class="M"><div><span>M</span></div></div>
+    <div class="W"><div><span>W</span></div></div>
+    <div class="U"><div><span>U</span></div></div>
+</main>
+<script>
+    selectNodeContents(document.querySelector("main"));
+
+    const m = getComputedStyle(document.querySelector("main .M"), "::selection");
+    const mSpan = getComputedStyle(document.querySelector("main .M span"), "::selection");
+    test(() => void assert_equals(m.fontSize, "12px"),
+        "M::selection’s font-size is the same as in M");
+    test(() => void assert_equals(mSpan.fontSize, "18px"),
+        "M span::selection’s font-size is the same as in M span");
+    test(() => void assert_equals(m.textShadow, "rgb(0, 128, 0) 12px 0px 0px"),
+        "M::selection’s own text-shadow respects M’s font-size");
+    test(() => void assert_equals(mSpan.textShadow, "rgb(0, 128, 0) 12px 0px 0px"),
+        "M span::selection’s inherited text-shadow respects M’s font-size");
+
+    const w = getComputedStyle(document.querySelector("main .W"), "::selection");
+    const wSpan = getComputedStyle(document.querySelector("main .W span"), "::selection");
+    test(() => void assert_equals(w.lineHeight, "13px"),
+        "W::selection’s line-height is the same as in W");
+    test(() => void assert_equals(wSpan.lineHeight, "19px"),
+        "W span::selection’s line-height is the same as in W span");
+    test(() => void assert_equals(w.textShadow, "rgb(0, 128, 0) 0px 13px 0px"),
+        "W::selection’s own text-shadow respects W’s line-height");
+    test(() => void assert_equals(wSpan.textShadow, "rgb(0, 128, 0) 0px 13px 0px"),
+        "W span::selection’s inherited text-shadow respects W’s line-height");
+
+    const u = getComputedStyle(document.querySelector("main .U"), "::selection");
+    const uSpan = getComputedStyle(document.querySelector("main .U span"), "::selection");
+    test(() => void assert_equals(u.fontSize, "12px"),
+        "U::selection’s font-size is the same as in U");
+    test(() => void assert_equals(uSpan.fontSize, "18px"),
+        "U span::selection’s font-size is the same as in U span");
+    test(() => void assert_equals(u.textDecorationThickness, "12px"),
+        "U::selection’s own text-decoration-thickness respects U’s font-size");
+    test(() => void assert_equals(uSpan.textDecorationThickness, "18px"),
+        "U span::selection’s own text-decoration-thickness respects U span’s font-size");
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008-ref.html
new file mode 100644
index 0000000000..70b9d958b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Custom property values from the root element</title>
+<script src="../support/selections.js"></script>
+<style>
+  div::selection {
+    background-color: green;
+    text-decoration-line: underline;
+    text-decoration-style: line;
+    text-decoration-thickness: 1px;
+    text-decoration-color: yellow;
+  }
+  span::selection {
+    background-color: blue;
+  }
+</style>
+<div style="width: 300px">PASS if background-color is green when selected, <span>except this which is blue</span>, and underline is yellow.<script>
+  selectNodeContents(document.querySelector("div"));
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008.html
new file mode 100644
index 0000000000..720e2f0469
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>Custom property values from the originating element</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="match" href="highlight-cascade-008-ref.html">
+<meta name="assert" value="This test verifies that custom properties from the originating element are used to resolve var() on highlight pseudos.">
+<meta name="fuzzy" content="0-255;0-10">
+<script src="../support/selections.js"></script>
+<style>
+  :root {
+    --background-color: green;
+    --decoration-color: yellow;
+  }
+  ::selection {
+    --background-color: cyan;
+    --decoration-color: magenta;
+  }
+  div::selection {
+    background-color: var(--background-color, red);
+    text-decoration-line: underline;
+    text-decoration-style: line;
+    text-decoration-color: var(--decoration-color, red);
+  }
+  span {
+    --background-color: blue;
+  }
+  span::selection {
+    --background-color: purple;
+    background-color: var(--background-color, red);
+  }
+</style>
+<div style="width: 300px">PASS if background-color is green when selected, <span>except this which is blue</span>, and underline is yellow.</div>
+<script>
+  selectNodeContents(document.querySelector("div"));
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-009.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-009.html
new file mode 100644
index 0000000000..e95de9a781
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-009.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight cascade: inheritance of custom properties</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6641">
+<meta name="assert" content="This test verifies that custom properties used in highlight pseudos are taken from the originating element.">
+<script src="../support/selections.js"></script>
+<link rel="stylesheet" href="../support/highlights.css">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  :root {
+    --background-color: green;
+    --decoration-color: green;
+  }
+  ::selection {
+    --decoration-color: purple;
+  }
+  div::selection {
+    --background-color: blue;
+    background-color: var(--background-color, red);
+  }
+</style>
+<body>
+  <div>Some text</div>
+</body>
+<script>
+    selectNodeContents(document.querySelector("body"));
+
+    const body_selection = getComputedStyle(document.querySelector("body"), "::selection");
+    const div_selection = getComputedStyle(document.querySelector("div"), "::selection");
+    test(() => void assert_equals(body_selection.getPropertyValue("--background-color"), "green"),
+        "body ::selection uses the originating custom property");
+    test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "green"),
+        "body ::selection does not use its own custom property");
+    test(() => void assert_equals(div_selection.getPropertyValue("--decoration-color"), "green"),
+        "div::selection uses the originating element custom property");
+    test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "green"),
+        "div::selection does not use its own custom property");
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-inheritance.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-inheritance.html
new file mode 100644
index 0000000000..d67ae82881
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-inheritance.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight selectors inheritance getComputedStyle for currentcolor</title>
+<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ and ‘background-color’ are set to ‘currentColor’ in the parent. The child should inherit both properties as if if they were directly set to ‘currentColor’, due to highlight inheritance and the fact that ‘currentColor’ computes to itself, and the result for both properties should equal the originating element ‘color’.">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #target {
+    background-color: green;
+    color: lime;
+  }
+  #target::selection {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+  #target::target-text {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+  #target::spelling-error {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+  #target::grammar-error {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+  #target::highlight(foo) {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+</style>
+<div id="target"><span id="child"></span></div>
+<script>
+  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
+    test(() => {
+      let style = getComputedStyle(child, pseudo);
+      assert_equals(style.backgroundColor, "rgb(0, 255, 0)", "Background color is lime.");
+      assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
+    }, `getComputedStyle() for ${pseudo}`);
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-visited.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-visited.html
new file mode 100644
index 0000000000..207cb7b7dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-visited.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle for currentcolor on visited</title>
+<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ is set to ‘currentColor’ for visited links (and for unvisited links, via implicit defaulting up to the root). The result for both links should equal the originating element ‘color’ as if the link was unvisited.">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  a {
+    color: lime;
+  }
+  a:visited {
+    color: cyan;
+  }
+  a:visited::selection {
+    color: currentcolor;
+  }
+  a:visited::target-text {
+    color: currentcolor;
+  }
+  a:visited::spelling-error {
+    color: currentcolor;
+  }
+  a:visited::grammar-error {
+    color: currentcolor;
+  }
+  a:visited::highlight(foo) {
+    color: currentcolor;
+  }
+</style>
+<a id="target1" class="target" href=""></a>
+<a id="target2" class="target" href="unvisited"></a>
+<script>
+  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
+    for (const target of [target1, target2]) {
+      test(() => {
+        let style = getComputedStyle(target, pseudo);
+        assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
+      }, `getComputedStyle() for ${pseudo} at #${target.id}`);
+    }
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed.html
new file mode 100644
index 0000000000..97c31809df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle for currentcolor</title>
+<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ and ‘background-color’ are set to ‘currentColor’. The result for both properties should equal the originating element ‘color’.">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  div {
+    background-color: green;
+    color: lime;
+  }
+  .wrapper::selection {
+    color: cyan;
+    background-color: blue;
+  }
+  .wrapper::target-text {
+    color: cyan;
+    background-color: blue;
+  }
+  .wrapper::spelling-error {
+    color: cyan;
+    background-color: blue;
+  }
+  .wrapper::grammar-error {
+    color: cyan;
+    background-color: blue;
+  }
+  .wrapper::highlight(foo) {
+    color: cyan;
+    background-color: blue;
+  }
+  .target::selection {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+  .target::target-text {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+  .target::spelling-error {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+  .target::grammar-error {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+  .target::highlight(foo) {
+    color: currentcolor;
+    background-color: currentcolor;
+  }
+</style>
+<div id="target1" class="target"></div>
+<div class="wrapper">
+  <span id="target2" class="target"></span>
+</div>
+<script>
+  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
+    for (const target of [target1, target2]) {
+      test(() => {
+        let style = getComputedStyle(target, pseudo);
+        assert_equals(style.backgroundColor, "rgb(0, 255, 0)", "Background color is lime.");
+        assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
+      }, `getComputedStyle() for ${pseudo} at #${target.id}`);
+    }
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001-ref.html
new file mode 100644
index 0000000000..d3a3d49797
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8" />
+<title>CSS Pseudo-Elements Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+#empty > span {
+}
+#color-currentcolor > span {
+  color: currentcolor;
+}
+#backgroundcolor-currentcolor > span {
+  background-color: currentcolor;
+}
+#textdecorationcolor-currentcolor > span {
+  text-decoration-line: underline;
+  text-decoration-color: currentcolor;
+}
+#color-currentcolor-backgroundcolor-currentcolor > span {
+  color: currentcolor;
+  background-color: currentcolor;
+}
+#color-currentcolor-backgroundcolor-blue > span {
+  color: currentcolor;
+  background-color: blue;
+}
+#color-blue-backgroundcolor-currentcolor > span {
+  color: blue;
+  background-color: currentcolor;
+}
+</style>
+
+<div id="empty" class="highlight_reftest"><span>example</span> - empty</div>
+<div id="color-currentcolor" class="highlight_reftest"><span>example</span> - color-currentcolor</div>
+<div id="backgroundcolor-currentcolor" class="highlight_reftest"><span>example</span> - backgroundcolor-currentcolor</div>
+<div id="textdecorationcolor-currentcolor" class="highlight_reftest"><span>example</span> - textdecorationcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest"><span>example</span> - color-currentcolor-backgroundcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest"><span>example</span> - color-currentcolor-backgroundcolor-blue</div>
+<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest"><span>example</span> - color-blue-backgroundcolor-currentcolor</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001.html
new file mode 100644
index 0000000000..efdb9016bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting single layer</title>
+<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root). The color of each property should equal the originating element ‘color’.">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
+<link rel="match" href="highlight-currentcolor-painting-properties-001-ref.html">
+<link rel="stylesheet" href="../support/highlights.css">
+<meta name="fuzzy" content="0-50;0-150">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+::highlight(empty) {
+}
+::highlight(color-currentcolor) {
+  color: currentcolor;
+}
+::highlight(backgroundcolor-currentcolor) {
+  background-color: currentcolor;
+}
+::highlight(textdecorationcolor-currentcolor) {
+  text-decoration-line: underline;
+  text-decoration-color: currentcolor;
+}
+::highlight(color-currentcolor-backgroundcolor-currentcolor) {
+  color: currentcolor;
+  background-color: currentcolor;
+}
+::highlight(color-currentcolor-backgroundcolor-blue) {
+  color: currentcolor;
+  background-color: blue;
+}
+::highlight(color-blue-backgroundcolor-currentcolor) {
+  color: blue;
+  background-color: currentcolor;
+}
+</style>
+
+<div id="empty" class="highlight_reftest">example - empty</div>
+<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
+<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
+<div id="textdecorationcolor-currentcolor" class="highlight_reftest">example - textdecorationcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
+<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest">example - color-blue-backgroundcolor-currentcolor</div>
+
+<script>
+  function range(node, start, end) {
+    let range = new Range();
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    return range;
+  }
+
+  const divs = document.getElementsByTagName("div");
+  for (let div of divs) {
+    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002-ref.html
new file mode 100644
index 0000000000..6f9066cba8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8" />
+<title>CSS Pseudo-Elements Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+div > span {
+  color: yellow;
+  background: maroon;
+}
+#empty > span > span {
+}
+#color-currentcolor > span > span {
+  color: currentcolor;
+}
+#backgroundcolor-currentcolor > span > span {
+  background-color: currentcolor;
+}
+#textdecorationcolor-currentcolor > span > span {
+  text-decoration-line: underline;
+  text-decoration-color: currentcolor;
+}
+#color-currentcolor-backgroundcolor-currentcolor > span > span {
+  color: currentcolor;
+  background-color: currentcolor;
+}
+#color-currentcolor-backgroundcolor-blue > span > span {
+  color: currentcolor;
+  background-color: blue;
+}
+#color-blue-backgroundcolor-currentcolor > span > span {
+  color: blue;
+  background-color: currentcolor;
+}
+</style>
+
+<div id="empty" class="highlight_reftest"><span><span>ex</span>ample</span> - empty</div>
+<div id="color-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - color-currentcolor</div>
+<div id="backgroundcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - backgroundcolor-currentcolor</div>
+<div id="textdecorationcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - textdecorationcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - color-currentcolor-backgroundcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest"><span><span>ex</span>ample</span> - color-currentcolor-backgroundcolor-blue</div>
+<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - color-blue-backgroundcolor-currentcolor</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002.html
new file mode 100644
index 0000000000..d02dc9e8c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting two layers</title>
+<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root), and there is another active highlight below. The color of each property should equal the underlying highlight ‘color’.">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
+<link rel="match" href="highlight-currentcolor-painting-properties-002-ref.html">
+<link rel="stylesheet" href="../support/highlights.css">
+<meta name="fuzzy" content="0-50;0-150">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+::highlight(below) {
+  color: yellow;
+  background: maroon;
+}
+::highlight(empty) {
+}
+::highlight(color-currentcolor) {
+  color: currentcolor;
+}
+::highlight(backgroundcolor-currentcolor) {
+  background-color: currentcolor;
+}
+::highlight(textdecorationcolor-currentcolor) {
+  text-decoration-line: underline;
+  text-decoration-color: currentcolor;
+}
+::highlight(color-currentcolor-backgroundcolor-currentcolor) {
+  color: currentcolor;
+  background-color: currentcolor;
+}
+::highlight(color-currentcolor-backgroundcolor-blue) {
+  color: currentcolor;
+  background-color: blue;
+}
+::highlight(color-blue-backgroundcolor-currentcolor) {
+  color: blue;
+  background-color: currentcolor;
+}
+</style>
+
+<div id="empty" class="highlight_reftest">example - empty</div>
+<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
+<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
+<div id="textdecorationcolor-currentcolor" class="highlight_reftest">example - textdecorationcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
+<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest">example - color-blue-backgroundcolor-currentcolor</div>
+
+<script>
+  function range(node, start, end) {
+    let range = new Range();
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    return range;
+  }
+
+  const divs = document.getElementsByTagName("div");
+  let ranges = [];
+  for (let div of divs) {
+    ranges.push(range(div.firstChild, 0, 7));
+  }
+  CSS.highlights.set("below", new Highlight(...ranges));
+
+  for (let div of divs) {
+    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 2)));
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001-ref.html
new file mode 100644
index 0000000000..1ab60db5c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html><meta charset="utf-8">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+#textshadow-currentcolor > span {
+  text-shadow: currentcolor 2px 2px;
+}
+</style>
+
+<div id="textshadow-currentcolor" class="highlight_reftest"><span>example</span> - textshadow-currentcolor</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001.html
new file mode 100644
index 0000000000..c82da8c380
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html><meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting single layer</title>
+<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when ‘text-shadow’ contains a shadow with ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root). The color of the text shadow should equal the originating element ‘color’.">
+<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
+<link rel="match" href="highlight-currentcolor-painting-text-shadow-001-ref.html">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+::highlight(textshadow-currentcolor) {
+  text-shadow: currentcolor 2px 2px;
+}
+</style>
+
+<div id="textshadow-currentcolor" class="highlight_reftest">example - textshadow-currentcolor</div>
+
+<script>
+  function range(node, start, end) {
+    let range = new Range();
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    return range;
+  }
+
+  const divs = document.getElementsByTagName("div");
+  for (let div of divs) {
+    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002-ref.html
new file mode 100644
index 0000000000..6452a34d0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html><meta charset="utf-8">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+div > span {
+  color: yellow;
+  background: maroon;
+}
+#textshadow-currentcolor > span > span {
+  text-shadow: currentcolor 2px 2px;
+}
+</style>
+
+<div id="textshadow-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - textshadow-currentcolor</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002.html
new file mode 100644
index 0000000000..870243f501
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html><meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting two layers</title>
+<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root), and there is another active highlight below. The color of each property should equal the underlying highlight ‘color’.">
+<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
+<link rel="match" href="highlight-currentcolor-painting-text-shadow-002-ref.html">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+::highlight(below) {
+  color: yellow;
+  background: maroon;
+}
+::highlight(textshadow-currentcolor) {
+  text-shadow: currentcolor 2px 2px;
+}
+</style>
+
+<div id="textshadow-currentcolor" class="highlight_reftest">example - textshadow-currentcolor</div>
+
+<script>
+  function range(node, start, end) {
+    let range = new Range();
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    return range;
+  }
+
+  const divs = document.getElementsByTagName("div");
+  let ranges = [];
+  for (let div of divs) {
+    ranges.push(range(div.firstChild, 0, 7));
+  }
+  CSS.highlights.set("below", new Highlight(...ranges));
+
+  for (let div of divs) {
+    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 2)));
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001-ref.html
new file mode 100644
index 0000000000..70ce6b59a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001-ref.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8" />
+<title>CSS Pseudo-Elements Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+::highlight(empty) {
+  color: lime;
+  background: transparent;
+}
+::highlight(color-currentcolor) {
+  color: lime;
+  background: transparent;
+}
+::highlight(color-initial) {
+  color: black;
+  background: transparent;
+}
+::highlight(color-inherit) {
+  color: lime;
+  background: transparent;
+}
+::highlight(color-unset) {
+  color: lime;
+  background: transparent;
+}
+::highlight(color-cyan) {
+  color: cyan;
+  background: transparent;
+}
+::highlight(backgroundcolor-currentcolor) {
+  color: lime;
+  background-color: lime;
+}
+::highlight(color-currentcolor-backgroundcolor-currentcolor) {
+  color: lime;
+  background-color: lime;
+}
+::highlight(color-initial-backgroundcolor-currentcolor) {
+  color: black;
+  background-color: black;
+}
+::highlight(color-inherit-backgroundcolor-currentcolor) {
+  color: lime;
+  background-color: lime;
+}
+::highlight(color-unset-backgroundcolor-currentcolor) {
+  color: lime;
+  background-color: lime;
+}
+::highlight(color-cyan-backgroundcolor-currentcolor) {
+  color: cyan;
+  background-color: cyan;
+}
+::highlight(backgroundcolor-blue) {
+  color: lime;
+  background-color: blue;
+}
+::highlight(color-currentcolor-backgroundcolor-blue) {
+  color: lime;
+  background-color: blue;
+}
+::highlight(color-initial-backgroundcolor-blue) {
+  color: black;
+  background-color: blue;
+}
+::highlight(color-inherit-backgroundcolor-blue) {
+  color: lime;
+  background-color: blue;
+}
+::highlight(color-unset-backgroundcolor-blue) {
+  color: lime;
+  background-color: blue;
+}
+</style>
+
+<div id="empty" class="highlight_reftest">example - empty</div>
+<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
+<div id="color-initial" class="highlight_reftest">example - color-initial</div>
+<div id="color-inherit" class="highlight_reftest">example - color-inherit</div>
+<div id="color-unset" class="highlight_reftest">example - color-unset</div>
+<div id="color-cyan" class="highlight_reftest">example - color-cyan</div>
+<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
+<div id="color-initial-backgroundcolor-currentcolor" class="highlight_reftest">example - color-initial-backgroundcolor-currentcolor</div>
+<div id="color-inherit-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inherit-backgroundcolor-currentcolor</div>
+<div id="color-unset-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inset-backgroundcolor-currentcolor</div>
+<div id="color-cyan-backgroundcolor-currentcolor" class="highlight_reftest">example - color-cyan-backgroundcolor-currentcolor</div>
+<div id="backgroundcolor-blue" class="highlight_reftest">example - backgroundcolor-blue</div>
+<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
+<div id="color-initial-backgroundcolor-blue" class="highlight_reftest">example - color-initial-backgroundcolor-blue</div>
+<div id="color-inherit-backgroundcolor-blue" class="highlight_reftest">example - color-inherit-backgroundcolor-blue</div>
+<div id="color-unset-backgroundcolor-blue" class="highlight_reftest">example - color-inset-backgroundcolor-blue</div>
+
+<script>
+  function range(node, start, end) {
+    let range = new Range();
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    return range;
+  }
+
+  const divs = document.getElementsByTagName("div");
+  for (let div of divs) {
+    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001.html
new file mode 100644
index 0000000000..1869f8ab53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor, initial, inherit, unset painting</title>
+<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when ‘color’ is explicitly defaulted in a universal rule. ‘inherit’ (and ‘unset’, due to highlight inheritance) should equal the originating element ‘color’, because ‘color’ inherits through ancestor highlight pseudos up to the root, where the inherited value is defined as ‘currentColor’ for highlights. ‘initial’ should equal the initial value of ‘color’, which is ‘CanvasText’.">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
+<link rel="match" href="highlight-currentcolor-root-explicit-default-001-ref.html">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+div {
+  color: lime;
+  background: green;
+  margin: 10px;
+}
+::highlight(empty) {
+}
+::highlight(color-currentcolor) {
+  color: currentcolor;
+}
+::highlight(color-initial) {
+  color: initial;
+}
+::highlight(color-inherit) {
+  color: inherit;
+}
+::highlight(color-unset) {
+  color: unset;
+}
+::highlight(color-cyan) {
+  color: cyan;
+}
+::highlight(backgroundcolor-currentcolor) {
+  background-color: currentcolor;
+}
+::highlight(color-currentcolor-backgroundcolor-currentcolor) {
+  color: currentcolor;
+  background-color: currentcolor;
+}
+::highlight(color-initial-backgroundcolor-currentcolor) {
+  color: initial;
+  background-color: currentcolor;
+}
+::highlight(color-inherit-backgroundcolor-currentcolor) {
+  color: inherit;
+  background-color: currentcolor;
+}
+::highlight(color-unset-backgroundcolor-currentcolor) {
+  color: unset;
+  background-color: currentcolor;
+}
+::highlight(color-cyan-backgroundcolor-currentcolor) {
+  color: cyan;
+  background-color: currentcolor;
+}
+::highlight(backgroundcolor-blue) {
+  background-color: blue;
+}
+::highlight(color-currentcolor-backgroundcolor-blue) {
+  color: currentcolor;
+  background-color: blue;
+}
+::highlight(color-initial-backgroundcolor-blue) {
+  color: initial;
+  background-color: blue;
+}
+::highlight(color-inherit-backgroundcolor-blue) {
+  color: inherit;
+  background-color: blue;
+}
+::highlight(color-unset-backgroundcolor-blue) {
+  color: unset;
+  background-color: blue;
+}
+</style>
+<div id="empty" class="highlight_reftest">example - empty</div>
+<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
+<div id="color-initial" class="highlight_reftest">example - color-initial</div>
+<div id="color-inherit" class="highlight_reftest">example - color-inherit</div>
+<div id="color-unset" class="highlight_reftest">example - color-unset</div>
+<div id="color-cyan" class="highlight_reftest">example - color-cyan</div>
+<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
+<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
+<div id="color-initial-backgroundcolor-currentcolor" class="highlight_reftest">example - color-initial-backgroundcolor-currentcolor</div>
+<div id="color-inherit-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inherit-backgroundcolor-currentcolor</div>
+<div id="color-unset-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inset-backgroundcolor-currentcolor</div>
+<div id="color-cyan-backgroundcolor-currentcolor" class="highlight_reftest">example - color-cyan-backgroundcolor-currentcolor</div>
+<div id="backgroundcolor-blue" class="highlight_reftest">example - backgroundcolor-blue</div>
+<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
+<div id="color-initial-backgroundcolor-blue" class="highlight_reftest">example - color-initial-backgroundcolor-blue</div>
+<div id="color-inherit-backgroundcolor-blue" class="highlight_reftest">example - color-inherit-backgroundcolor-blue</div>
+<div id="color-unset-backgroundcolor-blue" class="highlight_reftest">example - color-inset-backgroundcolor-blue</div>
+
+<script>
+  function range(node, start, end) {
+    let range = new Range();
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    return range;
+  }
+
+  const divs = document.getElementsByTagName("div");
+  for (let div of divs) {
+    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002-ref.html
new file mode 100644
index 0000000000..b64b007c64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8" />
+<title>CSS Pseudo-Elements Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+.highlight_reftest {
+  color: green;
+  margin: 10px;
+}
+.color-blue {
+  color: blue;
+}
+</style>
+
+<div class="highlight_reftest">green</div>
+<div class="highlight_reftest">green</div>
+<div class="highlight_reftest color-blue">blue</div>
+<div class="highlight_reftest color-blue">blue</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002.html
new file mode 100644
index 0000000000..fe6d80be2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Pseudo-Elements Test: Custom Highlights color inherit painting</title>
+<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when ‘color’ is universally set to ‘inherit’. When the parent is explicitly set to ‘blue’, inheritance stops there, yielding blue. Otherwise inheritance reaches the root element, where the inherited value is defined as ‘currentColor’ for highlights, yielding green.">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
+<link rel="match" href="highlight-currentcolor-root-explicit-default-002-ref.html">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+.highlight_reftest {
+  color: green;
+  margin: 10px;
+}
+::highlight(color-inherit) {
+  color: inherit;
+}
+#wrapper::highlight(color-inherit) {
+  color: blue;
+}
+</style>
+<div class="highlight_reftest">green</div>
+<div class="highlight_reftest">g<span>ree</span>n</div>
+<div id="wrapper">
+  <div class="highlight_reftest">blue</div>
+  <div class="highlight_reftest">b<span>lu</span>e</div>
+</div>
+
+<script>
+  function range(node, start, end) {
+    let range = new Range();
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    return range;
+  }
+
+  const divs = document.getElementsByClassName("highlight_reftest");
+  let ranges = [];
+  for (let div of divs) {
+    if (div.childElementCount == 0)
+      ranges.push(range(div, 0, 1));
+    else
+      ranges.push(range(div, 0, 3));
+  }
+  CSS.highlights.set("color-inherit", new Highlight(...ranges));
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-001.html
new file mode 100644
index 0000000000..ecf787b9b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-001.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: implicit defaulting of ‘color’ in :root highlights</title>
+<meta name="assert" content="Checks the painting for ::selection and ::highlight, when ‘background-color’ is set in the root element but ‘color’ is implicitly defaulted. ‘background-color’ suppresses the UA default ‘color’ for ::selection via paired cascade. The resultant ‘color’ inherits through ancestor highlight pseudos up to the root, where the inherited value is defined as ‘currentColor’ for highlights, yielding green.">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<link rel="match" href="highlight-currentcolor-root-implicit-default-ref.html">
+<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
+<main>FAIL</main>
+<main>FAIL</main>
+<style>
+  main { color: green; }
+  :root::selection { background-color: lime; }
+  :root::highlight(foo) { background-color: lime; }
+</style>
+<script>
+  const [selection, highlight] = document.querySelectorAll("main");
+
+  let selectionRange = new Range();
+  selectionRange.selectNode(selection);
+  window.getSelection().addRange(selectionRange);
+  selection.textContent = getComputedStyle(selection, "::selection").color;
+
+  let highlightRange = new Range();
+  highlightRange.selectNode(highlight);
+  CSS.highlights.set("foo", new Highlight(highlightRange));
+  highlight.textContent = getComputedStyle(highlight, "::highlight(foo)").color;
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-002.html
new file mode 100644
index 0000000000..420cc5ba15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-002.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: implicit defaulting of ‘color’ in :root highlights</title>
+<meta name="assert" content="Checks the painting for ::selection and ::highlight, when ‘background-color’ is set in the target element but ‘color’ is implicitly defaulted. ‘background-color’ suppresses the UA default ‘color’ for ::selection via paired cascade. The resultant ‘color’ inherits through ancestor highlight pseudos up to the root, where the inherited value is defined as ‘currentColor’ for highlights, yielding green.">
+<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<link rel="match" href="highlight-currentcolor-root-implicit-default-ref.html">
+<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
+<main>FAIL</main>
+<main>FAIL</main>
+<style>
+  main { color: green; }
+  main::selection { background-color: lime; }
+  main::highlight(foo) { background-color: lime; }
+</style>
+<script>
+  const [selection, highlight] = document.querySelectorAll("main");
+
+  let selectionRange = new Range();
+  selectionRange.selectNode(selection);
+  window.getSelection().addRange(selectionRange);
+  selection.textContent = getComputedStyle(selection, "::selection").color;
+
+  let highlightRange = new Range();
+  highlightRange.selectNode(highlight);
+  CSS.highlights.set("foo", new Highlight(highlightRange));
+  highlight.textContent = getComputedStyle(highlight, "::highlight(foo)").color;
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-ref.html
new file mode 100644
index 0000000000..67ecb8df64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference</title>
+<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
+<main>rgb(0, 128, 0)</main>
+<main>rgb(0, 128, 0)</main>
+<style>
+  main { color: green; }
+  main::selection { background-color: lime; color: green; }
+  main::highlight(foo) { background-color: lime; color: green; }
+</style>
+<script>
+  const [selection, highlight] = document.querySelectorAll("main");
+
+  let selectionRange = new Range();
+  selectionRange.selectNode(selection);
+  window.getSelection().addRange(selectionRange);
+
+  let highlightRange = new Range();
+  highlightRange.selectNode(highlight);
+  CSS.highlights.set("foo", new Highlight(highlightRange));
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001-ref.html
new file mode 100644
index 0000000000..102b07b481
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001.html
new file mode 100644
index 0000000000..7f370238df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002-ref.html
new file mode 100644
index 0000000000..19d731af02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002.html
new file mode 100644
index 0000000000..626fc57558
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003-ref.html
new file mode 100644
index 0000000000..638ae00c68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003.html
new file mode 100644
index 0000000000..8c621cc777
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004-notref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004-notref.html
new file mode 100644
index 0000000000..72490b1461
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/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>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004.html
new file mode 100644
index 0000000000..0a73d006b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: paired cascade: rule includes highlight pseudos other than ::selection</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="mismatch" href="highlight-paired-cascade-004-notref.html">
+<meta name="assert" value="This test verifies that setting color on ::target-text suppresses any UA non-initial used value for background-color. ::target-text is a highlight pseudo with a recommended UA default background-color that is not initial (Mark), so paired cascade can be observed.">
+<link rel="stylesheet" href="../support/highlights.css">
+<style>
+    :link, :visited {
+        color: blue;
+    }
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::target-text {
+        /*
+            Used background-color should be initial (transparent).
+            https://www.w3.org/TR/CSS21/colors.html#propdef-background-color
+        */
+        color: black;
+    }
+</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>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005-ref.html
new file mode 100644
index 0000000000..862d06e6f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005-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: black;
+    }
+</style>
+<p>Test passes if the text below does not appear to be highlighted.
+<main class="highlight_reftest">quick</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005.html
new file mode 100644
index 0000000000..4ee6db3a09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005.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 has declared color value of unset</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-005-ref.html">
+<meta name="assert" value="This test verifies that setting color to unset on ::selection suppresses any UA non-initial used value for background-color. The unset value is defined as both “treated as [inherit or initial depending on whether the property is inherited]” and “effectively erases all declared values occurring earlier in the cascade [(inclusive)]”, which are normally equivalent, but under paired cascade, the former wins.">
+<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: unset;
+    }
+</style>
+<p>Test passes if the text below does not appear to be highlighted.
+<main class="highlight_reftest">quick</main>
+<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006-ref.html
new file mode 100644
index 0000000000..638ae00c68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006-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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006.html
new file mode 100644
index 0000000000..bef3601ccb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are used when highlight pseudo has declared color value of revert</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-006-ref.html">
+<meta name="assert" value="This test verifies that setting color to revert on ::selection does not suppress any UA non-initial used value for background-color. Because the revert value rolls back the cascade, it destroys its own existence as a cascaded value, and this is also true under 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 UA default, not initial.
+        */
+        color: revert;
+    }
+</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/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-computed.html
new file mode 100644
index 0000000000..4a274e1bbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-computed.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #target::selection {
+    background-color: green;
+    color: lime;
+  }
+  #target::target-text {
+    background-color: green;
+    color: lime;
+  }
+  #target::spelling-error {
+    background-color: green;
+    color: lime;
+  }
+  #target::grammar-error {
+    background-color: green;
+    color: lime;
+  }
+  #target::highlight(foo) {
+    background-color: green;
+    color: lime;
+  }
+  #target::highlight(bar) {
+    background-color: blue;
+    color: yellow;
+  }
+</style>
+<div id="target"></div>
+<script>
+  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
+    test(() => {
+      let style = getComputedStyle(target, pseudo);
+      assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "Background color is green.");
+      assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
+    }, `getComputedStyle() for ${pseudo}`);
+
+    for (illFormedPseudo of [`${pseudo}:`, `${pseudo})`, `${pseudo}(`, `${pseudo}(foo)`, `${pseudo}()`, `:${pseudo}`, `${pseudo}.`]) {
+      test(() => {
+        let style = getComputedStyle(target, illFormedPseudo);
+        let defaultStyle = getComputedStyle(target);
+        assert_equals(style.backgroundColor, "");
+        assert_equals(style.color,  "");
+      }, `getComputedStyle() for ${illFormedPseudo} should return an empty CSSStyleDeclaration`);
+    }
+  }
+
+  const pseudo = "::highlight(bar)";
+  test(() => {
+    let style = getComputedStyle(target, pseudo);
+    assert_equals(style.backgroundColor, "rgb(0, 0, 255)", "Background color is blue.");
+    assert_equals(style.color, "rgb(255, 255, 0)", "Color is yellow.");
+  }, `Different getComputedStyle() for ${pseudo} and same element`);
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-inheritance-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-inheritance-computed-001.html
new file mode 100644
index 0000000000..84c4045a54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-inheritance-computed-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight selectors inheritance getComputedStyle</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="This test checks that computed style is properly resolved for highlight pseudos even when 'display: contents' is involved.">
+<style>
+  .target::selection {
+    background-color: green;
+    color: lime;
+  }
+  .target::target-text {
+    background-color: green;
+    color: lime;
+  }
+  .target::spelling-error {
+    background-color: green;
+    color: lime;
+  }
+  .target::grammar-error {
+    background-color: green;
+    color: lime;
+  }
+  .target::highlight(foo) {
+    background-color: green;
+    color: lime;
+  }
+</style>
+<div class="target"><span id="child1"></span></div>
+<div class="target" style="display: contents;"><span id="child2"></span></div>
+<script>
+  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
+    for (const child of [child1, child2]) {
+      test(() => {
+        let style = getComputedStyle(child, pseudo);
+        assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "Background color is green.");
+        assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
+      }, `getComputedStyle() for ${pseudo} at #${child.id}`);
+    }
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-visited-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-visited-computed-001.html
new file mode 100644
index 0000000000..a2b18effcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-visited-computed-001.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle on visited</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  a::selection {
+    color: lime;
+  }
+  a::target-text {
+    color: lime;
+  }
+  a::spelling-error {
+    color: lime;
+  }
+  a::grammar-error {
+    color: lime;
+  }
+  a::highlight(foo) {
+    color: lime;
+  }
+  a:visited::selection {
+    color: yellow;
+  }
+  a:visited::target-text {
+    color: yellow;
+  }
+  a:visited::spelling-error {
+    color: yellow;
+  }
+  a:visited::grammar-error {
+    color: yellow;
+  }
+  a:visited::highlight(foo) {
+    color: yellow;
+  }
+</style>
+<a id="target1" class="target" href=""></a>
+<a id="target2" class="target" href="unvisited"></a>
+<script>
+  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
+    for (const target of [target1, target2]) {
+      test(() => {
+        let style = getComputedStyle(target, pseudo);
+        assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
+      }, `getComputedStyle() for ${pseudo} at #${target.id}`);
+    }
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html
deleted file mode 100644
index d67ae82881..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight selectors inheritance getComputedStyle for currentcolor</title>
-<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ and ‘background-color’ are set to ‘currentColor’ in the parent. The child should inherit both properties as if if they were directly set to ‘currentColor’, due to highlight inheritance and the fact that ‘currentColor’ computes to itself, and the result for both properties should equal the originating element ‘color’.">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<style>
-  #target {
-    background-color: green;
-    color: lime;
-  }
-  #target::selection {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-  #target::target-text {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-  #target::spelling-error {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-  #target::grammar-error {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-  #target::highlight(foo) {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-</style>
-<div id="target"><span id="child"></span></div>
-<script>
-  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
-    test(() => {
-      let style = getComputedStyle(child, pseudo);
-      assert_equals(style.backgroundColor, "rgb(0, 255, 0)", "Background color is lime.");
-      assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
-    }, `getComputedStyle() for ${pseudo}`);
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html
deleted file mode 100644
index 207cb7b7dd..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle for currentcolor on visited</title>
-<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ is set to ‘currentColor’ for visited links (and for unvisited links, via implicit defaulting up to the root). The result for both links should equal the originating element ‘color’ as if the link was unvisited.">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<style>
-  a {
-    color: lime;
-  }
-  a:visited {
-    color: cyan;
-  }
-  a:visited::selection {
-    color: currentcolor;
-  }
-  a:visited::target-text {
-    color: currentcolor;
-  }
-  a:visited::spelling-error {
-    color: currentcolor;
-  }
-  a:visited::grammar-error {
-    color: currentcolor;
-  }
-  a:visited::highlight(foo) {
-    color: currentcolor;
-  }
-</style>
-<a id="target1" class="target" href=""></a>
-<a id="target2" class="target" href="unvisited"></a>
-<script>
-  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
-    for (const target of [target1, target2]) {
-      test(() => {
-        let style = getComputedStyle(target, pseudo);
-        assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
-      }, `getComputedStyle() for ${pseudo} at #${target.id}`);
-    }
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html
deleted file mode 100644
index 97c31809df..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle for currentcolor</title>
-<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ and ‘background-color’ are set to ‘currentColor’. The result for both properties should equal the originating element ‘color’.">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<style>
-  div {
-    background-color: green;
-    color: lime;
-  }
-  .wrapper::selection {
-    color: cyan;
-    background-color: blue;
-  }
-  .wrapper::target-text {
-    color: cyan;
-    background-color: blue;
-  }
-  .wrapper::spelling-error {
-    color: cyan;
-    background-color: blue;
-  }
-  .wrapper::grammar-error {
-    color: cyan;
-    background-color: blue;
-  }
-  .wrapper::highlight(foo) {
-    color: cyan;
-    background-color: blue;
-  }
-  .target::selection {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-  .target::target-text {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-  .target::spelling-error {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-  .target::grammar-error {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-  .target::highlight(foo) {
-    color: currentcolor;
-    background-color: currentcolor;
-  }
-</style>
-<div id="target1" class="target"></div>
-<div class="wrapper">
-  <span id="target2" class="target"></span>
-</div>
-<script>
-  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
-    for (const target of [target1, target2]) {
-      test(() => {
-        let style = getComputedStyle(target, pseudo);
-        assert_equals(style.backgroundColor, "rgb(0, 255, 0)", "Background color is lime.");
-        assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
-      }, `getComputedStyle() for ${pseudo} at #${target.id}`);
-    }
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html
deleted file mode 100644
index 93e2002f4a..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<meta charset="utf-8" />
-<title>CSS Pseudo-Elements Test: Reference</title>
-<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-#empty > span {
-}
-#color-currentcolor > span {
-  color: currentcolor;
-}
-#backgroundcolor-currentcolor > span {
-  background-color: currentcolor;
-}
-#textdecorationcolor-currentcolor > span {
-  text-decoration-line: underline;
-  text-decoration-color: currentcolor;
-}
-#color-currentcolor-backgroundcolor-currentcolor > span {
-  color: currentcolor;
-  background-color: currentcolor;
-}
-#color-currentcolor-backgroundcolor-blue > span {
-  color: currentcolor;
-  background-color: blue;
-}
-#color-blue-backgroundcolor-currentcolor > span {
-  color: blue;
-  background-color: currentcolor;
-}
-</style>
-
-<div id="empty" class="highlight_reftest"><span>example</span> - empty</div>
-<div id="color-currentcolor" class="highlight_reftest"><span>example</span> - color-currentcolor</div>
-<div id="backgroundcolor-currentcolor" class="highlight_reftest"><span>example</span> - backgroundcolor-currentcolor</div>
-<div id="textdecorationcolor-currentcolor" class="highlight_reftest"><span>example</span> - textdecorationcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest"><span>example</span> - color-currentcolor-backgroundcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest"><span>example</span> - color-currentcolor-backgroundcolor-blue</div>
-<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest"><span>example</span> - color-blue-backgroundcolor-currentcolor</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html
deleted file mode 100644
index 76d80d228a..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8" />
-<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting single layer</title>
-<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root). The color of each property should equal the originating element ‘color’.">
-<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
-<link rel="match" href="highlight-currentcolor-painting-properties-001-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
-<meta name="fuzzy" content="0-50;0-150">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-::highlight(empty) {
-}
-::highlight(color-currentcolor) {
-  color: currentcolor;
-}
-::highlight(backgroundcolor-currentcolor) {
-  background-color: currentcolor;
-}
-::highlight(textdecorationcolor-currentcolor) {
-  text-decoration-line: underline;
-  text-decoration-color: currentcolor;
-}
-::highlight(color-currentcolor-backgroundcolor-currentcolor) {
-  color: currentcolor;
-  background-color: currentcolor;
-}
-::highlight(color-currentcolor-backgroundcolor-blue) {
-  color: currentcolor;
-  background-color: blue;
-}
-::highlight(color-blue-backgroundcolor-currentcolor) {
-  color: blue;
-  background-color: currentcolor;
-}
-</style>
-
-<div id="empty" class="highlight_reftest">example - empty</div>
-<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
-<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
-<div id="textdecorationcolor-currentcolor" class="highlight_reftest">example - textdecorationcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
-<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest">example - color-blue-backgroundcolor-currentcolor</div>
-
-<script>
-  function range(node, start, end) {
-    let range = new Range();
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    return range;
-  }
-
-  const divs = document.getElementsByTagName("div");
-  for (let div of divs) {
-    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
-  }
-</script>
-
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html
deleted file mode 100644
index 11ca501065..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<meta charset="utf-8" />
-<title>CSS Pseudo-Elements Test: Reference</title>
-<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-div > span {
-  color: yellow;
-  background: maroon;
-}
-#empty > span > span {
-}
-#color-currentcolor > span > span {
-  color: currentcolor;
-}
-#backgroundcolor-currentcolor > span > span {
-  background-color: currentcolor;
-}
-#textdecorationcolor-currentcolor > span > span {
-  text-decoration-line: underline;
-  text-decoration-color: currentcolor;
-}
-#color-currentcolor-backgroundcolor-currentcolor > span > span {
-  color: currentcolor;
-  background-color: currentcolor;
-}
-#color-currentcolor-backgroundcolor-blue > span > span {
-  color: currentcolor;
-  background-color: blue;
-}
-#color-blue-backgroundcolor-currentcolor > span > span {
-  color: blue;
-  background-color: currentcolor;
-}
-</style>
-
-<div id="empty" class="highlight_reftest"><span><span>ex</span>ample</span> - empty</div>
-<div id="color-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - color-currentcolor</div>
-<div id="backgroundcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - backgroundcolor-currentcolor</div>
-<div id="textdecorationcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - textdecorationcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - color-currentcolor-backgroundcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest"><span><span>ex</span>ample</span> - color-currentcolor-backgroundcolor-blue</div>
-<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - color-blue-backgroundcolor-currentcolor</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html
deleted file mode 100644
index ac3677c1cf..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8" />
-<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting two layers</title>
-<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root), and there is another active highlight below. The color of each property should equal the underlying highlight ‘color’.">
-<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
-<link rel="match" href="highlight-currentcolor-painting-properties-002-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
-<meta name="fuzzy" content="0-50;0-150">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-::highlight(below) {
-  color: yellow;
-  background: maroon;
-}
-::highlight(empty) {
-}
-::highlight(color-currentcolor) {
-  color: currentcolor;
-}
-::highlight(backgroundcolor-currentcolor) {
-  background-color: currentcolor;
-}
-::highlight(textdecorationcolor-currentcolor) {
-  text-decoration-line: underline;
-  text-decoration-color: currentcolor;
-}
-::highlight(color-currentcolor-backgroundcolor-currentcolor) {
-  color: currentcolor;
-  background-color: currentcolor;
-}
-::highlight(color-currentcolor-backgroundcolor-blue) {
-  color: currentcolor;
-  background-color: blue;
-}
-::highlight(color-blue-backgroundcolor-currentcolor) {
-  color: blue;
-  background-color: currentcolor;
-}
-</style>
-
-<div id="empty" class="highlight_reftest">example - empty</div>
-<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
-<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
-<div id="textdecorationcolor-currentcolor" class="highlight_reftest">example - textdecorationcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
-<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest">example - color-blue-backgroundcolor-currentcolor</div>
-
-<script>
-  function range(node, start, end) {
-    let range = new Range();
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    return range;
-  }
-
-  const divs = document.getElementsByTagName("div");
-  let ranges = [];
-  for (let div of divs) {
-    ranges.push(range(div.firstChild, 0, 7));
-  }
-  CSS.highlights.set("below", new Highlight(...ranges));
-
-  for (let div of divs) {
-    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 2)));
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html
deleted file mode 100644
index d6ee33cda7..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html><meta charset="utf-8">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-#textshadow-currentcolor > span {
-  text-shadow: currentcolor 2px 2px;
-}
-</style>
-
-<div id="textshadow-currentcolor" class="highlight_reftest"><span>example</span> - textshadow-currentcolor</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html
deleted file mode 100644
index 141556f935..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html><meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting single layer</title>
-<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when ‘text-shadow’ contains a shadow with ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root). The color of the text shadow should equal the originating element ‘color’.">
-<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
-<link rel="match" href="highlight-currentcolor-painting-text-shadow-001-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-::highlight(textshadow-currentcolor) {
-  text-shadow: currentcolor 2px 2px;
-}
-</style>
-
-<div id="textshadow-currentcolor" class="highlight_reftest">example - textshadow-currentcolor</div>
-
-<script>
-  function range(node, start, end) {
-    let range = new Range();
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    return range;
-  }
-
-  const divs = document.getElementsByTagName("div");
-  for (let div of divs) {
-    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html
deleted file mode 100644
index fb2696a55a..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html><meta charset="utf-8">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-div > span {
-  color: yellow;
-  background: maroon;
-}
-#textshadow-currentcolor > span > span {
-  text-shadow: currentcolor 2px 2px;
-}
-</style>
-
-<div id="textshadow-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - textshadow-currentcolor</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html
deleted file mode 100644
index 77858729af..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html><meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting two layers</title>
-<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root), and there is another active highlight below. The color of each property should equal the underlying highlight ‘color’.">
-<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
-<link rel="match" href="highlight-currentcolor-painting-text-shadow-002-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-::highlight(below) {
-  color: yellow;
-  background: maroon;
-}
-::highlight(textshadow-currentcolor) {
-  text-shadow: currentcolor 2px 2px;
-}
-</style>
-
-<div id="textshadow-currentcolor" class="highlight_reftest">example - textshadow-currentcolor</div>
-
-<script>
-  function range(node, start, end) {
-    let range = new Range();
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    return range;
-  }
-
-  const divs = document.getElementsByTagName("div");
-  let ranges = [];
-  for (let div of divs) {
-    ranges.push(range(div.firstChild, 0, 7));
-  }
-  CSS.highlights.set("below", new Highlight(...ranges));
-
-  for (let div of divs) {
-    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 2)));
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html
deleted file mode 100644
index 794796a88f..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<meta charset="utf-8" />
-<title>CSS Pseudo-Elements Test: Reference</title>
-<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-::highlight(empty) {
-  color: lime;
-  background: transparent;
-}
-::highlight(color-currentcolor) {
-  color: lime;
-  background: transparent;
-}
-::highlight(color-initial) {
-  color: black;
-  background: transparent;
-}
-::highlight(color-inherit) {
-  color: lime;
-  background: transparent;
-}
-::highlight(color-unset) {
-  color: lime;
-  background: transparent;
-}
-::highlight(color-cyan) {
-  color: cyan;
-  background: transparent;
-}
-::highlight(backgroundcolor-currentcolor) {
-  color: lime;
-  background-color: lime;
-}
-::highlight(color-currentcolor-backgroundcolor-currentcolor) {
-  color: lime;
-  background-color: lime;
-}
-::highlight(color-initial-backgroundcolor-currentcolor) {
-  color: black;
-  background-color: black;
-}
-::highlight(color-inherit-backgroundcolor-currentcolor) {
-  color: lime;
-  background-color: lime;
-}
-::highlight(color-unset-backgroundcolor-currentcolor) {
-  color: lime;
-  background-color: lime;
-}
-::highlight(color-cyan-backgroundcolor-currentcolor) {
-  color: cyan;
-  background-color: cyan;
-}
-::highlight(backgroundcolor-blue) {
-  color: lime;
-  background-color: blue;
-}
-::highlight(color-currentcolor-backgroundcolor-blue) {
-  color: lime;
-  background-color: blue;
-}
-::highlight(color-initial-backgroundcolor-blue) {
-  color: black;
-  background-color: blue;
-}
-::highlight(color-inherit-backgroundcolor-blue) {
-  color: lime;
-  background-color: blue;
-}
-::highlight(color-unset-backgroundcolor-blue) {
-  color: lime;
-  background-color: blue;
-}
-</style>
-
-<div id="empty" class="highlight_reftest">example - empty</div>
-<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
-<div id="color-initial" class="highlight_reftest">example - color-initial</div>
-<div id="color-inherit" class="highlight_reftest">example - color-inherit</div>
-<div id="color-unset" class="highlight_reftest">example - color-unset</div>
-<div id="color-cyan" class="highlight_reftest">example - color-cyan</div>
-<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
-<div id="color-initial-backgroundcolor-currentcolor" class="highlight_reftest">example - color-initial-backgroundcolor-currentcolor</div>
-<div id="color-inherit-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inherit-backgroundcolor-currentcolor</div>
-<div id="color-unset-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inset-backgroundcolor-currentcolor</div>
-<div id="color-cyan-backgroundcolor-currentcolor" class="highlight_reftest">example - color-cyan-backgroundcolor-currentcolor</div>
-<div id="backgroundcolor-blue" class="highlight_reftest">example - backgroundcolor-blue</div>
-<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
-<div id="color-initial-backgroundcolor-blue" class="highlight_reftest">example - color-initial-backgroundcolor-blue</div>
-<div id="color-inherit-backgroundcolor-blue" class="highlight_reftest">example - color-inherit-backgroundcolor-blue</div>
-<div id="color-unset-backgroundcolor-blue" class="highlight_reftest">example - color-inset-backgroundcolor-blue</div>
-
-<script>
-  function range(node, start, end) {
-    let range = new Range();
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    return range;
-  }
-
-  const divs = document.getElementsByTagName("div");
-  for (let div of divs) {
-    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html
deleted file mode 100644
index a1512f014d..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html
+++ /dev/null
@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8" />
-<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor, initial, inherit, unset painting</title>
-<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when ‘color’ is explicitly defaulted in a universal rule. ‘inherit’ (and ‘unset’, due to highlight inheritance) should equal the originating element ‘color’, because ‘color’ inherits through ancestor highlight pseudos up to the root, where the inherited value is defined as ‘currentColor’ for highlights. ‘initial’ should equal the initial value of ‘color’, which is ‘CanvasText’.">
-<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
-<link rel="match" href="highlight-currentcolor-root-explicit-default-001-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-div {
-  color: lime;
-  background: green;
-  margin: 10px;
-}
-::highlight(empty) {
-}
-::highlight(color-currentcolor) {
-  color: currentcolor;
-}
-::highlight(color-initial) {
-  color: initial;
-}
-::highlight(color-inherit) {
-  color: inherit;
-}
-::highlight(color-unset) {
-  color: unset;
-}
-::highlight(color-cyan) {
-  color: cyan;
-}
-::highlight(backgroundcolor-currentcolor) {
-  background-color: currentcolor;
-}
-::highlight(color-currentcolor-backgroundcolor-currentcolor) {
-  color: currentcolor;
-  background-color: currentcolor;
-}
-::highlight(color-initial-backgroundcolor-currentcolor) {
-  color: initial;
-  background-color: currentcolor;
-}
-::highlight(color-inherit-backgroundcolor-currentcolor) {
-  color: inherit;
-  background-color: currentcolor;
-}
-::highlight(color-unset-backgroundcolor-currentcolor) {
-  color: unset;
-  background-color: currentcolor;
-}
-::highlight(color-cyan-backgroundcolor-currentcolor) {
-  color: cyan;
-  background-color: currentcolor;
-}
-::highlight(backgroundcolor-blue) {
-  background-color: blue;
-}
-::highlight(color-currentcolor-backgroundcolor-blue) {
-  color: currentcolor;
-  background-color: blue;
-}
-::highlight(color-initial-backgroundcolor-blue) {
-  color: initial;
-  background-color: blue;
-}
-::highlight(color-inherit-backgroundcolor-blue) {
-  color: inherit;
-  background-color: blue;
-}
-::highlight(color-unset-backgroundcolor-blue) {
-  color: unset;
-  background-color: blue;
-}
-</style>
-<div id="empty" class="highlight_reftest">example - empty</div>
-<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
-<div id="color-initial" class="highlight_reftest">example - color-initial</div>
-<div id="color-inherit" class="highlight_reftest">example - color-inherit</div>
-<div id="color-unset" class="highlight_reftest">example - color-unset</div>
-<div id="color-cyan" class="highlight_reftest">example - color-cyan</div>
-<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
-<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
-<div id="color-initial-backgroundcolor-currentcolor" class="highlight_reftest">example - color-initial-backgroundcolor-currentcolor</div>
-<div id="color-inherit-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inherit-backgroundcolor-currentcolor</div>
-<div id="color-unset-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inset-backgroundcolor-currentcolor</div>
-<div id="color-cyan-backgroundcolor-currentcolor" class="highlight_reftest">example - color-cyan-backgroundcolor-currentcolor</div>
-<div id="backgroundcolor-blue" class="highlight_reftest">example - backgroundcolor-blue</div>
-<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
-<div id="color-initial-backgroundcolor-blue" class="highlight_reftest">example - color-initial-backgroundcolor-blue</div>
-<div id="color-inherit-backgroundcolor-blue" class="highlight_reftest">example - color-inherit-backgroundcolor-blue</div>
-<div id="color-unset-backgroundcolor-blue" class="highlight_reftest">example - color-inset-backgroundcolor-blue</div>
-
-<script>
-  function range(node, start, end) {
-    let range = new Range();
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    return range;
-  }
-
-  const divs = document.getElementsByTagName("div");
-  for (let div of divs) {
-    CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html
deleted file mode 100644
index 3175948317..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<meta charset="utf-8" />
-<title>CSS Pseudo-Elements Test: Reference</title>
-<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-.highlight_reftest {
-  color: green;
-  margin: 10px;
-}
-.color-blue {
-  color: blue;
-}
-</style>
-
-<div class="highlight_reftest">green</div>
-<div class="highlight_reftest">green</div>
-<div class="highlight_reftest color-blue">blue</div>
-<div class="highlight_reftest color-blue">blue</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html
deleted file mode 100644
index fc5698faa1..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8" />
-<title>CSS Pseudo-Elements Test: Custom Highlights color inherit painting</title>
-<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when ‘color’ is universally set to ‘inherit’. When the parent is explicitly set to ‘blue’, inheritance stops there, yielding blue. Otherwise inheritance reaches the root element, where the inherited value is defined as ‘currentColor’ for highlights, yielding green.">
-<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
-<link rel="match" href="highlight-currentcolor-root-explicit-default-002-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-.highlight_reftest {
-  color: green;
-  margin: 10px;
-}
-::highlight(color-inherit) {
-  color: inherit;
-}
-#wrapper::highlight(color-inherit) {
-  color: blue;
-}
-</style>
-<div class="highlight_reftest">green</div>
-<div class="highlight_reftest">g<span>ree</span>n</div>
-<div id="wrapper">
-  <div class="highlight_reftest">blue</div>
-  <div class="highlight_reftest">b<span>lu</span>e</div>
-</div>
-
-<script>
-  function range(node, start, end) {
-    let range = new Range();
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    return range;
-  }
-
-  const divs = document.getElementsByClassName("highlight_reftest");
-  let ranges = [];
-  for (let div of divs) {
-    if (div.childElementCount == 0)
-      ranges.push(range(div, 0, 1));
-    else
-      ranges.push(range(div, 0, 3));
-  }
-  CSS.highlights.set("color-inherit", new Highlight(...ranges));
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html
deleted file mode 100644
index ecf787b9b4..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: implicit defaulting of ‘color’ in :root highlights</title>
-<meta name="assert" content="Checks the painting for ::selection and ::highlight, when ‘background-color’ is set in the root element but ‘color’ is implicitly defaulted. ‘background-color’ suppresses the UA default ‘color’ for ::selection via paired cascade. The resultant ‘color’ inherits through ancestor highlight pseudos up to the root, where the inherited value is defined as ‘currentColor’ for highlights, yielding green.">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
-<link rel="match" href="highlight-currentcolor-root-implicit-default-ref.html">
-<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
-<main>FAIL</main>
-<main>FAIL</main>
-<style>
-  main { color: green; }
-  :root::selection { background-color: lime; }
-  :root::highlight(foo) { background-color: lime; }
-</style>
-<script>
-  const [selection, highlight] = document.querySelectorAll("main");
-
-  let selectionRange = new Range();
-  selectionRange.selectNode(selection);
-  window.getSelection().addRange(selectionRange);
-  selection.textContent = getComputedStyle(selection, "::selection").color;
-
-  let highlightRange = new Range();
-  highlightRange.selectNode(highlight);
-  CSS.highlights.set("foo", new Highlight(highlightRange));
-  highlight.textContent = getComputedStyle(highlight, "::highlight(foo)").color;
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html
deleted file mode 100644
index 420cc5ba15..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: implicit defaulting of ‘color’ in :root highlights</title>
-<meta name="assert" content="Checks the painting for ::selection and ::highlight, when ‘background-color’ is set in the target element but ‘color’ is implicitly defaulted. ‘background-color’ suppresses the UA default ‘color’ for ::selection via paired cascade. The resultant ‘color’ inherits through ancestor highlight pseudos up to the root, where the inherited value is defined as ‘currentColor’ for highlights, yielding green.">
-<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
-<link rel="match" href="highlight-currentcolor-root-implicit-default-ref.html">
-<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
-<main>FAIL</main>
-<main>FAIL</main>
-<style>
-  main { color: green; }
-  main::selection { background-color: lime; }
-  main::highlight(foo) { background-color: lime; }
-</style>
-<script>
-  const [selection, highlight] = document.querySelectorAll("main");
-
-  let selectionRange = new Range();
-  selectionRange.selectNode(selection);
-  window.getSelection().addRange(selectionRange);
-  selection.textContent = getComputedStyle(selection, "::selection").color;
-
-  let highlightRange = new Range();
-  highlightRange.selectNode(highlight);
-  CSS.highlights.set("foo", new Highlight(highlightRange));
-  highlight.textContent = getComputedStyle(highlight, "::highlight(foo)").color;
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html
deleted file mode 100644
index 67ecb8df64..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Reftest Reference</title>
-<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
-<main>rgb(0, 128, 0)</main>
-<main>rgb(0, 128, 0)</main>
-<style>
-  main { color: green; }
-  main::selection { background-color: lime; color: green; }
-  main::highlight(foo) { background-color: lime; color: green; }
-</style>
-<script>
-  const [selection, highlight] = document.querySelectorAll("main");
-
-  let selectionRange = new Range();
-  selectionRange.selectNode(selection);
-  window.getSelection().addRange(selectionRange);
-
-  let highlightRange = new Range();
-  highlightRange.selectNode(highlight);
-  CSS.highlights.set("foo", new Highlight(highlightRange));
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html
new file mode 100644
index 0000000000..836874df05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Pseudo Test: Dynamic Custom Properties for Highlights</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<head>
+  <style>
+    ::selection {
+      background-color: green;
+    }
+  </style>
+</head>
+<body>Green background when selected</body>
+<script>
+  window.getSelection().selectAllChildren(document.body);
+</script>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html
new file mode 100644
index 0000000000..836ef546fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Pseudo Test: Dynamic Custom Properties for Highlights</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="match" href="highlight-custom-properties-dynamic-001-ref.html">
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<meta name="assert" value="Custom property values in highlights update correctly when the property is updated.">
+<head>
+  <style>
+    div {
+      --background-color: red;
+    }
+    ::selection {
+      background-color: var(--background-color, red);
+    }
+  </style>
+</head>
+<div id="originating">Green background when selected</div>
+<script>
+  window.getSelection().selectAllChildren(document.body);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      originating.style.setProperty("--background-color", "green");
+      requestAnimationFrame(() => takeScreenshot());
+    });
+  });
+</script>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html
new file mode 100644
index 0000000000..4ff90afb38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights horizontal text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    :root {
+        line-height: 1;
+        white-space: break-spaces;
+    }
+    #originating_shadow {
+        font-size: 2em;
+        color: transparent;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 0;
+        top: 10px;
+        left: 10px;
+    }
+    #originating_text {
+        font-size: 2em;
+        color: black;
+        position: absolute;
+        z-index: 7;
+        top: 10px;
+        left: 10px;
+    }
+    #selection_only {
+        font-size: 2em;
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 5;
+        top: 10px;
+    }
+    #target {
+        font-size: 2em;
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 3;
+        top: 10px;
+    }
+    #both_text {
+        font-size: 2em;
+        color: green;
+        position: absolute;
+        z-index: 4;
+        top: 10px;
+    }
+    #both_shadow {
+        font-size: 2em;
+        color: transparent;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 2;
+        top: 10px;
+    }
+</style>
+<p id="originating_shadow">part</p>
+<p id="originating_text">part</p>
+<p id="selection_only">ially selected </p>
+<p id="both_text">ta</p>
+<p id="both_shadow">ta</p>
+<p id="target">rget</p>
+<script>
+    originatingCS = getComputedStyle(originating_text);
+    selection_only.style.left = (parseFloat(originatingCS.width) + parseFloat(originatingCS.left)).toString() + "px";
+    selectionCS = getComputedStyle(selection_only);
+    both_text.style.left = (parseFloat(selectionCS.width) + parseFloat(selectionCS.left)).toString() + "px";
+    both_shadow.style.left = both_text.style.left;
+    bothCS = getComputedStyle(both_text);
+    target.style.left = (parseFloat(bothCS.width) + parseFloat(bothCS.left)).toString() + "px";
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
new file mode 100644
index 0000000000..b1762e85ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights horizontal text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="highlight-painting-shadows-horizontal-ref.html">
+<meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows">
+<meta name="fuzzy" content="0-32;0-20">
+<script src="support/selections.js"></script>
+<style>
+    :root {
+        line-height: 1;
+        white-space: pre;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        top: 10px;
+        left: 10px;
+    }
+    p::selection {
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5);
+    }
+    p::target-text {
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5);
+    }
+</style>
+<p>partially selected target</p>
+<script>
+    window.location.hash = "#:~:text=target";
+    const target = document.querySelector("p");
+    selectRangeWith(range => {
+        range.selectNodeContents(target);
+        range.setStart(target.childNodes[0], 4);
+        range.setEnd(target.childNodes[0], 21);
+    });
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html
new file mode 100644
index 0000000000..00a6f1c808
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights vertical text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+    :root {
+        font-family: Ahem;
+        writing-mode: vertical-lr;
+        line-height: 1;
+        white-space: break-spaces;
+    }
+    #originating_shadow {
+        color: transparent;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 0;
+        top: 10px;
+        left: 10px;
+    }
+    #originating_text {
+        color: black;
+        position: absolute;
+        z-index: 7;
+        top: 10px;
+        left: 10px;
+    }
+    #selection_only {
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 5;
+        left: 10px;
+    }
+    #target {
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 3;
+        left: 10px;
+    }
+    #both_text {
+        color: green;
+        position: absolute;
+        z-index: 4;
+        left: 10px;
+    }
+    #both_shadow {
+        color: transparent;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 2;
+        left: 10px;
+    }
+</style>
+<p id="originating_shadow">part</p>
+<p id="originating_text">part</p>
+<p id="selection_only">ially selected </p>
+<p id="both_text">ta</p>
+<p id="both_shadow">ta</p>
+<p id="target">rget</p>
+<script>
+    originatingCS = getComputedStyle(originating_text);
+    selection_only.style.top = (parseFloat(originatingCS.height) + parseFloat(originatingCS.top)).toString() + "px";
+    selectionCS = getComputedStyle(selection_only);
+    both_text.style.top = (parseFloat(selectionCS.height) + parseFloat(selectionCS.top)).toString() + "px";
+    both_shadow.style.top =  both_text.style.top;
+    bothCS = getComputedStyle(both_text);
+    target.style.top = (parseFloat(bothCS.height) + parseFloat(bothCS.top)).toString() + "px";
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
new file mode 100644
index 0000000000..7187c34da4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights vertical text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="highlight-painting-shadows-vertical-ref.html">
+<meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows">
+<meta name="fuzzy" content="0-32;0-4">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<script src="support/selections.js"></script>
+<style>
+    :root {
+        font-family: Ahem;
+        writing-mode: vertical-lr;
+        line-height: 1;
+        white-space: pre;
+    }
+    p {
+        color: black;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        top: 10px;
+        left: 10px;
+    }
+    p::selection {
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5);
+    }
+    p::target-text {
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5);
+    }
+</style>
+<p>partially selected target</p>
+<script>
+    window.location.hash = "#:~:text=target";
+    const target = document.querySelector("p");
+    selectRangeWith(range => {
+        range.selectNodeContents(target);
+        range.setStart(target.childNodes[0], 4);
+        range.setEnd(target.childNodes[0], 21);
+    });
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html
deleted file mode 100644
index 14687acb84..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html
deleted file mode 100644
index 09e5abf9a3..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html
deleted file mode 100644
index 48eb9911a1..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html
deleted file mode 100644
index affbe95629..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html
deleted file mode 100644
index 18885fdc89..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html
deleted file mode 100644
index 250e320210..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html
deleted file mode 100644
index 63472b6758..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!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>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html
deleted file mode 100644
index 61e2b7d7f0..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: paired cascade: rule includes highlight pseudos other than ::selection</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="mismatch" href="highlight-paired-cascade-004-notref.html">
-<meta name="assert" value="This test verifies that setting color on ::target-text suppresses any UA non-initial used value for background-color. ::target-text is a highlight pseudo with a recommended UA default background-color that is not initial (Mark), so paired cascade can be observed.">
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-    :link, :visited {
-        color: blue;
-    }
-    main {
-        font-size: 7em;
-        margin: 0.5em;
-    }
-    main::target-text {
-        /*
-            Used background-color should be initial (transparent).
-            https://www.w3.org/TR/CSS21/colors.html#propdef-background-color
-        */
-        color: black;
-    }
-</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>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html
deleted file mode 100644
index 0ac5c02b20..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!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: black;
-    }
-</style>
-<p>Test passes if the text below does not appear to be highlighted.
-<main class="highlight_reftest">quick</main>
-<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html
deleted file mode 100644
index 50677c811e..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are not used when highlight pseudo has declared color value of unset</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-005-ref.html">
-<meta name="assert" value="This test verifies that setting color to unset on ::selection suppresses any UA non-initial used value for background-color. The unset value is defined as both “treated as [inherit or initial depending on whether the property is inherited]” and “effectively erases all declared values occurring earlier in the cascade [(inclusive)]”, which are normally equivalent, but under paired cascade, the former wins.">
-<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: unset;
-    }
-</style>
-<p>Test passes if the text below does not appear to be highlighted.
-<main class="highlight_reftest">quick</main>
-<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html
deleted file mode 100644
index 18885fdc89..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!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/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html
deleted file mode 100644
index 20c03282c8..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are used when highlight pseudo has declared color value of revert</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-006-ref.html">
-<meta name="assert" value="This test verifies that setting color to revert on ::selection does not suppress any UA non-initial used value for background-color. Because the revert value rolls back the cascade, it destroys its own existence as a cascaded value, and this is also true under 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 UA default, not initial.
-        */
-        color: revert;
-    }
-</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/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html
deleted file mode 100644
index 4a274e1bbd..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle</title>
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<style>
-  #target::selection {
-    background-color: green;
-    color: lime;
-  }
-  #target::target-text {
-    background-color: green;
-    color: lime;
-  }
-  #target::spelling-error {
-    background-color: green;
-    color: lime;
-  }
-  #target::grammar-error {
-    background-color: green;
-    color: lime;
-  }
-  #target::highlight(foo) {
-    background-color: green;
-    color: lime;
-  }
-  #target::highlight(bar) {
-    background-color: blue;
-    color: yellow;
-  }
-</style>
-<div id="target"></div>
-<script>
-  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
-    test(() => {
-      let style = getComputedStyle(target, pseudo);
-      assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "Background color is green.");
-      assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
-    }, `getComputedStyle() for ${pseudo}`);
-
-    for (illFormedPseudo of [`${pseudo}:`, `${pseudo})`, `${pseudo}(`, `${pseudo}(foo)`, `${pseudo}()`, `:${pseudo}`, `${pseudo}.`]) {
-      test(() => {
-        let style = getComputedStyle(target, illFormedPseudo);
-        let defaultStyle = getComputedStyle(target);
-        assert_equals(style.backgroundColor, "");
-        assert_equals(style.color,  "");
-      }, `getComputedStyle() for ${illFormedPseudo} should return an empty CSSStyleDeclaration`);
-    }
-  }
-
-  const pseudo = "::highlight(bar)";
-  test(() => {
-    let style = getComputedStyle(target, pseudo);
-    assert_equals(style.backgroundColor, "rgb(0, 0, 255)", "Background color is blue.");
-    assert_equals(style.color, "rgb(255, 255, 0)", "Color is yellow.");
-  }, `Different getComputedStyle() for ${pseudo} and same element`);
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html
deleted file mode 100644
index 84c4045a54..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight selectors inheritance getComputedStyle</title>
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<meta name="assert" content="This test checks that computed style is properly resolved for highlight pseudos even when 'display: contents' is involved.">
-<style>
-  .target::selection {
-    background-color: green;
-    color: lime;
-  }
-  .target::target-text {
-    background-color: green;
-    color: lime;
-  }
-  .target::spelling-error {
-    background-color: green;
-    color: lime;
-  }
-  .target::grammar-error {
-    background-color: green;
-    color: lime;
-  }
-  .target::highlight(foo) {
-    background-color: green;
-    color: lime;
-  }
-</style>
-<div class="target"><span id="child1"></span></div>
-<div class="target" style="display: contents;"><span id="child2"></span></div>
-<script>
-  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
-    for (const child of [child1, child2]) {
-      test(() => {
-        let style = getComputedStyle(child, pseudo);
-        assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "Background color is green.");
-        assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
-      }, `getComputedStyle() for ${pseudo} at #${child.id}`);
-    }
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html
deleted file mode 100644
index a2b18effcc..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle on visited</title>
-<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<style>
-  a::selection {
-    color: lime;
-  }
-  a::target-text {
-    color: lime;
-  }
-  a::spelling-error {
-    color: lime;
-  }
-  a::grammar-error {
-    color: lime;
-  }
-  a::highlight(foo) {
-    color: lime;
-  }
-  a:visited::selection {
-    color: yellow;
-  }
-  a:visited::target-text {
-    color: yellow;
-  }
-  a:visited::spelling-error {
-    color: yellow;
-  }
-  a:visited::grammar-error {
-    color: yellow;
-  }
-  a:visited::highlight(foo) {
-    color: yellow;
-  }
-</style>
-<a id="target1" class="target" href=""></a>
-<a id="target2" class="target" href="unvisited"></a>
-<script>
-  for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
-    for (const target of [target1, target2]) {
-      test(() => {
-        let style = getComputedStyle(target, pseudo);
-        assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
-      }, `getComputedStyle() for ${pseudo} at #${target.id}`);
-    }
-  }
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html
index 63d8ee1eda..7fe76d1938 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight styling: custom properties are applicable properties in highlight pseudos</title>
+<title>CSS Pseudo-Elements Test: highlight styling: custom properties are not applicable properties in highlight pseudos</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
 <link rel="match" href="highlight-styling-001-ref.html">
-<meta name="assert" value="This test verifies that ::selection styles can set and reference custom properties.">
+<meta name="assert" value="This test verifies that ::selection styles cannot set custom properties.">
 <script src="support/selections.js"></script>
 <link rel="stylesheet" href="support/highlights.css">
 <style>
@@ -13,9 +13,9 @@
         margin: 0.5em;
     }
     main::selection {
-        --x: green;
+        --x: red;
         color: white;
-        background-color: var(--x);
+        background-color: var(--x, green);
     }
 </style>
 <p>Test passes if the text below is white on green.
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html
index 2f7cc29128..351eacac88 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html
@@ -1,21 +1,21 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight styling: originating custom property values do not affect highlight pseudos</title>
+<title>CSS Pseudo-Elements Test: highlight styling: originating custom property values are used for highlight pseudos</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
 <link rel="match" href="highlight-styling-002-ref.html">
-<meta name="assert" value="This test verifies that custom property values set in originating elements do not participate in the substitution of those properties in ::selection styles.">
+<meta name="assert" value="This test verifies that custom property values on the originating element are used for resolving var() in a selection pseudo.">
 <script src="support/selections.js"></script>
 <link rel="stylesheet" href="support/highlights.css">
 <style>
     main {
         font-size: 7em;
         margin: 0.5em;
-        --x: red;
+        --x: green;
     }
     main::selection {
         color: white;
-        background-color: var(--x, green);
+        background-color: var(--x, red);
     }
 </style>
 <p>Test passes if the text below is white on green.
diff --git a/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html
deleted file mode 100644
index d1e597e05b..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!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%;
-    }
-
-  span
-    {
-      color: orange;
-    }
-  </style>
-
-  <p>Test passes if "Text selected" has a green background throughout, if "Tex" and "cted" are yellow and if "t sele" are orange.
-
-  <div class="highlight_reftest">Tex<span>t sele</span>cted</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html
new file mode 100644
index 0000000000..f75017d5ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: selected highlight highlight painting - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    div {
+      background-color: lightblue;
+      color: green;
+      width: fit-content;
+    }
+</style>
+<div id="content">When selected, the highlight color should remain.</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html
new file mode 100644
index 0000000000..57078cf83b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: selected highlight highlight painting</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<meta name="assert" value="Checks that the highlight colors persist when selected.">
+<link rel="match" href="selection-over-highlight-001-ref.html">
+<style>
+    ::selection {
+      background-color: lightblue;
+    }
+    ::highlight(green) {
+      color: green;
+    }
+</style>
+<div id="content">When selected, the highlight color should remain.</div>
+<script>
+  let range = new Range();
+  range.setStart(content, 0);
+  range.setEnd(content, 1);
+  CSS.highlights.set("green", new Highlight(range));
+
+  document.execCommand("selectAll");
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html
index 279ec674b4..35f2542c76 100644
--- a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html
@@ -18,7 +18,7 @@
 </style>
 
 <p>The test passes if the following word has a magenta background.</p>
-<div>Example</div>
+<div><span>Example</span></div>
 
 <script>
   location.href = "#:~:text=Example";
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html
new file mode 100644
index 0000000000..6189f844b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on horizontal target text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    :root {
+        line-height: 1;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    span {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5), 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+</style>
+<p>the <span>target</span> should have a shadow</p>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html
new file mode 100644
index 0000000000..1ded1360ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on horizontal target text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="target-text-shadow-horizontal-ref.html">
+<meta name="assert" value="::target-text with a shadow is painted, including originating element shadows">
+<style>
+    :root {
+        line-height: 1;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    p::target-text {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5);
+    }
+</style>
+<p>the target should have a shadow</p>
+<script>
+    window.location.hash = "#:~:text=target";
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html
new file mode 100644
index 0000000000..cd9e179053
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on vertical target text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    :root {
+        line-height: 1;
+        writing-mode: vertical-lr;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    span {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5), 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+</style>
+<p>the <span>target</span> should have a shadow</p>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html
new file mode 100644
index 0000000000..088f6fc175
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on vertical target text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="target-text-shadow-vertical-ref.html">
+<meta name="assert" value="::target-text with a shadow is painted, including originating element shadows">
+<style>
+    :root {
+        line-height: 1;
+        writing-mode: vertical-lr;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    p::target-text {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5);
+    }
+</style>
+<p>the target should have a shadow</p>
+<script>
+    window.location.hash = "#:~:text=target";
+</script>
-- 
cgit v1.2.3