Paint ::selection foreground over other pseudos

ffiori · chromium-wpt-export-bot · commit 5b0e16402145 · 2021-09-16T11:29:14.000-07:00
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}
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>
