Enable text-underline-offset for ::highlight

The spec says the text-underline-offset should be respected inside a highlight pseudo. It was not enabled in the property system. https://drafts.csswg.org/css-pseudo-4/#highlight-styling Note the test fails due to crbug.com/1443428 Fixed: 1443095 Change-Id: Ifcdcd67892d646935e900ef825747d729c24cf79 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4513456 Commit-Queue: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Auto-Submit: Stephen Chenney <schenney@chromium.org> Cr-Commit-Position: refs/heads/main@{#1140993}
web-platform-tests · Jul 24, 2023 · 1482263 · 1482263
1 parent 7342496
commit 1482263
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/css/css-highlight-api/painting/css-highlight-painting-underline-offset-001-ref.html b/css/css-highlight-api/painting/css-highlight-painting-underline-offset-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<title>CSS Highlight API Test: ::highlight with text-underline-offset, reference</title>
+<style>
+  #target {
+    text-decoration: wavy underline green 5px;
+    text-underline-offset: 20px;
+  }
+</style>
+<p id="target">The underline should be offset.</p>
+</html>
diff --git a/css/css-highlight-api/painting/css-highlight-painting-underline-offset-001.html b/css/css-highlight-api/painting/css-highlight-painting-underline-offset-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<title>CSS Highlight API Test: ::highlight with text-underline-offset</title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="css-highlight-painting-underline-offset-001-ref.html">
+<meta name="assert" content="Verify that text-underline-offset works in a ::highlight pseudo-element.">
+<style>
+  ::highlight(example) {
+    text-decoration: wavy underline green 5px;
+    text-underline-offset: 20px;
+  }
+</style>
+<p id="target">The underline should be offset.</p>
+<script>
+  let range = new Range();
+  range.setStart(target, 0);
+  range.setEnd(target, 1);
+  CSS.highlights.set(`example`, new Highlight(range));
+</script>
+</html>