Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:35:37 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:35:37 +0000
commit: a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch)
tree: 532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/css/css-pseudo/highlight-cascade
parent: Adding debian version 126.0.1-1. (diff)
download: firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz
firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip
54 files changed, 1949 insertions, 0 deletions
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>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:35:37 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:35:37 +0000
commit	a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch)
tree	532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/css/css-pseudo/highlight-cascade
parent	Adding debian version 126.0.1-1. (diff)
download	firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip