HighlightInheritance: compat stroke properties valid_for_highlight

‘-webkit-text-fill-color’ is valid_for_highlight, but we forgot to mark ‘-webkit-text-stroke-color’ and ‘-webkit-text-stroke-width’ as valid_for_highlight too. They are only valid_for_highlight_legacy at the moment. Whether all three should be applicable is pending a spec issue [1], but HighlightInheritance is not stable yet anyway, and enabling them in this patch unblocks bumping HighlightInheritance to experimental. [1] w3c/csswg-drafts#7580 Bug: 1024156 Change-Id: Ifcd121800ffe9d0cae0b7984f98cf9bf1c83f002
web-platform-tests · Dec 1, 2022 · 9400a90 · 9400a90
1 parent f84e818
commit 9400a90
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/css/css-pseudo/highlight-styling-003-ref.html b/css/css-pseudo/highlight-styling-003-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Delan Azabani" href="mailto:[email protected]">
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+        color: white;
+        -webkit-text-fill-color: yellow;
+        -webkit-text-stroke-color: green;
+        -webkit-text-stroke-width: 4px;
+    }
+</style>
+<p>Test passes if the text below is yellow with a green outline.
+<main class="highlight_reftest">quick</main>
diff --git a/css/css-pseudo/highlight-styling-003.tentative.html b/css/css-pseudo/highlight-styling-003.tentative.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight styling: compat stroke/fill properties</title>
+<link rel="author" title="Delan Azabani" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
+<link rel="help" href="https://compat.spec.whatwg.org/#text-fill-and-stroking">
+<link rel="match" href="highlight-styling-003-ref.html">
+<meta name="assert" value="This test verifies that the compat stroke/fill properties are applicable to ::selection.">
+<script src="support/selections.js"></script>
+<link rel="stylesheet" href="support/highlights.css">
+<style>
+    main {
+        font-size: 7em;
+        margin: 0.5em;
+    }
+    main::selection {
+        color: white;
+        -webkit-text-fill-color: yellow;
+        -webkit-text-stroke-color: green;
+        -webkit-text-stroke-width: 4px;
+    }
+</style>
+<p>Test passes if the text below is yellow with a green outline.
+<main class="highlight_reftest">quick</main>
+<script>selectNodeContents(document.querySelector("main"));</script>