diff --git a/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html
new file mode 100644
index 000000000000000..cdab7615e4c5fe3
--- /dev/null
+++ b/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+  div {
+    color: #00000080;
+  }
+</style>
+<body>
+<div>foobar</div>
+</body>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html b/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html
new file mode 100644
index 000000000000000..e449ebf334ff7f8
--- /dev/null
+++ b/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Inheritance</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="custom-highlight-painting-inheritance-003-ref.html">
+<meta name="assert" value="Unstyled highlights should not be visible">
+<style>
+  div {
+    color: #00000080;
+    background-color: red;
+    width: 0;
+  }
+</style>
+<body>
+<div id="target">foobar</div>
+<script>
+  const node = document.getElementById("target");
+  let r = new Range();
+  r.setStart(node.firstChild, 0);
+  r.setEnd(node.firstChild, 3);
+  CSS.highlights.set("div-highlight", new Highlight(r));
+</script>
+</body>
\ No newline at end of file
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html
index 8049ba2257c7b44..3c08ad55aefe3cb 100644
--- a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html
+++ b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html
@@ -4,9 +4,13 @@
   body {
     font-size: 3em;
     font-weight: bolder;
+
+  }
+  #affected1 {
+    color: red;
   }
   #affected2 {
     color: green;
   }
 </style>
-<body><span>This should have default style (black).</span><span id="affected2">This should have 'highlight2' style (green).</span>
\ No newline at end of file
+<body><span id="affected1">This should have 'highlight1' style (red).</span><span id="affected2">This should have 'highlight2' style (green).</span>
\ No newline at end of file
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html
index 25f4e7e362aa4b9..0b380574bc5df07 100644
--- a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html
+++ b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html
@@ -16,21 +16,19 @@
     color: green;
   }
 </style>
-<body><span id="affected1">This should have default style (black).</span><span id="affected2">This should have 'highlight2' style (green).</span>
+<body><span id="affected1">This should have 'highlight1' style (red).</span><span id="affected2">This should have 'highlight2' style (green).</span>
 <script>
   /*
     This test is meant to verify that:
       - UAs must not define any styles for custom highlight pseudo-elements in
       the default UA stylesheet.
-      - A custom highlight pseudo-element inherits the styles of its originating
-      element.
+      - UAs do not paint unstyled custom highlights.
 
     In this test, highlight2 has higher priority because it was registered
     later, so it is painted over highlight1. This includes painting for
-    span#affected1, where there is no CSS rule for highlight2. The result is
-    that highlight2 paints on top for span#affected1, using the originating
-    element's color. Thus it appears as if no highlight was painted at all for
-    span#affected1.
+    span#affected1, where there is no CSS rule for highlight2. But since unstyled
+    custom highlights are not painted, span#affected1 is still painted with the
+    styles for highlight1.
 
     See https://drafts.csswg.org/css-highlight-api-1/#default-styles
   */
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002-ref.html
index efc4f487d764b96..2907681b75a7e4f 100644
--- a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002-ref.html
+++ b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002-ref.html
@@ -10,7 +10,8 @@
     background-color: rgb(0, 255, 0, 0.5);
   }
   #affected2 {
+    color: red;
     background-color: rgba(100, 0, 100, 0.5);
   }
 </style>
-<body><div><span id="affected1">Green on lime.</span><span id="affected2">Black on maroon.</span></div>
\ No newline at end of file
+<body><div><span id="affected1">Green on lime.</span><span id="affected2">Red on maroon.</span></div>
\ No newline at end of file
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002.html b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002.html
index 2e8d782f70b5ce1..2dda273abfe8dfc 100644
--- a/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002.html
+++ b/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002.html
@@ -18,21 +18,18 @@
     background-color: rgba(100, 0, 100, 0.5);
   }
 </style>
-<body><div><span id="affected1">Green on lime.</span><span id="affected2">Black on maroon.</span></div>
+<body><div><span id="affected1">Green on lime.</span><span id="affected2">Red on maroon.</span></div>
 <script>
   /*
     This test is meant to verify that:
       - UAs must not define any styles for custom highlight pseudo-elements in
       the default UA stylesheet.
-      - A custom highlight pseudo-element inherits the styles of its originating
-      element.
+      - UAs do not paint unstyled custom highlights.
 
     In this test, highlight1 has higher priority, so it is painted over
     highlight2. This includes painting for span#affected2, where there is no CSS
-    rule for highlight1. The result is that highlight1 paints on top for
-    span#affected2, using the originating element's color (black) and background
-    color (transparent). Thus, span#affected2 gets text color black, and the
-    background remains the same color as that applied by highlight2 (maroon).
+    rule for highlight1. But since unstyled custom highlights are not painted,
+    span#affected2 is still painted with the styles for highlight2.
 
     See https://drafts.csswg.org/css-highlight-api-1/#default-styles
   */
