Paint ::selection foreground over other pseudos

This CL paints ::selection foreground overlay following the spec that says it should be painted on top (see https://drafts.csswg.org/css-pseudo-4/#highlight-text). Although this is not a complete fix that takes the code to comply with the specifications, it makes it closer to them and it fixes cases like the one in the example "Selecting highlighted text" from the set of examples hosted here https://codepen.io/dazabani13/pen/KKqzOJp (note that the example requires the flag --experimental-web-platform-features to be enabled to see the highlights). Also rebaselined tests that were painting underline squiggles over text when it actually should be below (see https://www.w3.org/TR/css-text-decor/#painting-order). Bug: 1147859 Change-Id: Ie150fe3861807fcb74343d7371f1ee7009745272 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3155369 Commit-Queue: Fernando Fiori <ffiori@microsoft.com> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Dan Clark <daniec@microsoft.com> Reviewed-by: Delan Azabani <dazabani@igalia.com> Cr-Commit-Position: refs/heads/main@{#922211}
web-platform-tests · Sep 16, 2021 · 5b0e164 · 5b0e164
1 parent d965d8b
commit 5b0e164
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-below-selection-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-below-selection-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+  #highlighted {
+    background: cyan;
+    color: blue;
+  }
+  ::selection {
+    background: blue;
+    color: cyan;
+  }
+</style>
+<body><span id="highlighted">Text should be blue over cyan here and <span id="selected">cyan over blue here</span>.</span>
+<script>
+  getSelection().setBaseAndExtent(selected, 0, selected, 1);
+</script>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-below-selection.html b/css/css-highlight-api/painting/custom-highlight-painting-below-selection.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: </title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="custom-highlight-painting-below-selection-ref.html">
+<meta name="assert" value="Highlight overlay is painted below selection overlay">
+<style>
+  ::highlight(foo) {
+    background: cyan;
+    color: blue;
+  }
+  ::selection {
+    background: blue;
+    color: cyan;
+  }
+</style>
+<body>Text should be blue over cyan here and <span id="selected">cyan over blue here</span>.
+<script>
+  let highlightRange = new Range();
+  highlightRange.setStart(document.body.firstChild, 0);
+  highlightRange.setEnd(document.body.lastChild, 0);
+  CSS.highlights.set("foo", new Highlight(highlightRange));
+  getSelection().setBaseAndExtent(selected, 0, selected, 1);
+</script>