WPT updates for highlight painting order (css-pseudo)

This patch updates four web platform tests involving CSS highlight painting order, which should help us rework our highlight paint code to comply with css-pseudo. • css/css-pseudo/selection-overlay-and-{grammar,spelling}-001.html • two manual tests, checking the relative painting order of ::selection and ::{grammar,spelling}-error overlays • added @contenteditable/@spellcheck/@lang to test element • added Selection#removeAllRanges call to work around API change • replaced the grammar test sentence with a more obvious example • rewrote most of the comments for clarity • css/css-pseudo/highlight-painting-order.html • new reftest, checking relative painting order of text, original shadows, ::selection background, and ::selection shadows • based on <https://bucket.daz.cat/work/igalia/0/3.html> • css/css-pseudo/selection-text-shadow-{006-manual,016{,-ref}}.html • one manual test, one reftest, checking that text-shadow:none in ::selection suppresses all original shadows (even if multiple) • dropped because they are no longer compliant (highlight overlays have their own shadows, independent of the content’s shadows) Bug: 1147859 Change-Id: I29bab589e3924778d555d96537d010dc33ed003f
web-platform-tests · Jan 13, 2021 · aba51be · aba51be
1 parent c9bb4ac
commit aba51be
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 143 deletions.
diff --git a/css/css-pseudo/highlight-painting-order-ref.html b/css/css-pseudo/highlight-painting-order-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+    p {
+        font-size: 7em;
+        text-shadow: 0.2500em 0.2500em #C0C000;
+        position: relative;
+        color: transparent;
+
+        /*
+            https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
+            For text, the corresponding overlay must cover at least
+            the entire em box and may extend further above/below the
+            em box to the line box edges.
+        */
+        line-height: 1;
+    }
+    p > span {
+        position: absolute;
+        color: initial;
+        text-shadow: none;
+    }
+    p > span > span {
+        background: #C0C0C0;
+        text-shadow: 0.5000em 0.5000em #3838E0;
+    }
+</style>
+<p><span>q<span>uic</span>k</span>quick
diff --git a/css/css-pseudo/highlight-painting-order.html b/css/css-pseudo/highlight-painting-order.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: highlight painting order</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
+<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
+<link rel="match" href="highlight-painting-order-ref.html">
+<meta name="assert" value="highlight overlays are painted in the correct order, including both the element’s shadows and the highlight’s shadows">
+<style>
+    p {
+        font-size: 7em;
+        text-shadow: 0.2500em 0.2500em #C0C000;
+
+        /*
+            https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
+            For text, the corresponding overlay must cover at least
+            the entire em box and may extend further above/below the
+            em box to the line box edges.
+        */
+        line-height: 1;
+    }
+    p::selection {
+        background: #C0C0C0;
+        text-shadow: 0.5000em 0.5000em #3838E0;
+    }
+</style>
+<p>quick
+<script>
+    const target = document.querySelector("p");
+    const range = document.createRange();
+    range.selectNodeContents(target);
+    range.setStart(target.childNodes[0], 1);
+    range.setEnd(target.childNodes[0], 4);
+    const selection = getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+</script>
diff --git a/css/css-pseudo/selection-overlay-and-grammar-001.html b/css/css-pseudo/selection-overlay-and-grammar-001.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
- <html lang="en">
+ <html>
 
   <meta charset="UTF-8">
 
@@ -53,28 +53,7 @@
     }
   </style>
 
-  <script>
-  function startTest()
-  {
-  var targetRange = document.createRange();
-  /* We first create an empty range */
-  targetRange.selectNodeContents(document.getElementById("test"));
-  /* Then we set the range boundaries to the children of div#test */
-  window.getSelection().addRange(targetRange);
-  /* Finally, we now select such range of content */
-  document.getElementById("test").blur();
-  /*
-  Some browsers, like Chromium 80+, will
-  transfer focus to a selected element
-  like a contenteditable div and
-  therefore style the border of
-  such element. We remove such
-  focus with the blur() method.
-  */
-  }
-  </script>
-
-  <body onload="startTest();">
+  <script src="support/selections.js"></script>
 
   <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent.
 
@@ -87,4 +66,18 @@
     <li>if there is no red.
   </ul>
 
-  <div contenteditable="true" id="test">Many thing can happen.</div>
+  <!--
+    The grammar mistakes in the text below are intentional and part of this test.
+
+    https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking
+    • contenteditable makes the text “checkable for the purposes of [spelling and grammar checking]”
+    • spellcheck tries to enable spelling and grammar checking (subject to user preferences)
+    • lang tries to guide the UA towards checking the text in English (but the UA may ignore this)
+  -->
+  <div id="test" contenteditable="true" spellcheck="true" lang="en">The fox jumps over the dog.the fox jumps over the dog.</div>
+
+  <script>
+  const test = document.querySelector("#test");
+  selectNodeContents(test);
+  trySpellcheck(test);
+  </script>
diff --git a/css/css-pseudo/selection-overlay-and-spelling-001.html b/css/css-pseudo/selection-overlay-and-spelling-001.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
- <html lang="en">
+ <html>
 
   <meta charset="UTF-8">
 
@@ -70,19 +70,7 @@
     }
   </style>
 
-  <script>
-  function startTest()
-  {
-  var targetRange = document.createRange();
-  /* We first create an empty range */
-  targetRange.selectNodeContents(document.getElementById("test"));
-  /* Then we set the range boundaries to the children of div#test */
-  window.getSelection().addRange(targetRange);
-  /* Finally, we now select such range of content */
-  }
-  </script>
-
-  <body onload="startTest();">
+  <script src="support/selections.js"></script>
 
   <p>PREREQUISITE: User agent needs to have an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent.
 
@@ -96,7 +84,17 @@
   </ul>
 
   <!--
-  The bad spelling of Txet is intentional and part of this test
+    The bad spelling of Txet is intentional and part of this test.
+
+    https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking
+    • contenteditable makes the text “checkable for the purposes of [spelling and grammar checking]”
+    • spellcheck tries to enable spelling and grammar checking (subject to user preferences)
+    • lang tries to guide the UA towards checking the text in English (but the UA may ignore this)
   -->
+  <div id="test" contenteditable="true" spellcheck="true" lang="en">Txet sample</div>
 
-  <div id="test">Txet sample</div>
+  <script>
+  const test = document.querySelector("#test");
+  selectNodeContents(test);
+  trySpellcheck(test);
+  </script>
diff --git a/css/css-pseudo/selection-text-shadow-006-manual.html b/css/css-pseudo/selection-text-shadow-006-manual.html
diff --git a/css/css-pseudo/selection-text-shadow-016-ref.html b/css/css-pseudo/selection-text-shadow-016-ref.html
diff --git a/css/css-pseudo/selection-text-shadow-016.html b/css/css-pseudo/selection-text-shadow-016.html
diff --git a/css/css-pseudo/support/selections.js b/css/css-pseudo/support/selections.js
@@ -0,0 +1,60 @@
+/**
+ * Replaces the current selection (if any) with a new range, after
+ * it’s configured by the given function.
+ */
+function selectRangeWith(fun) {
+    const selection = getSelection();
+
+    // Deselect any ranges that happen to be selected, to prevent the
+    // Selection#addRange call from ignoring our new range (see
+    // <https://www.chromestatus.com/feature/6680566019653632> for
+    // more details).
+    selection.removeAllRanges();
+
+    // Create and configure a range.
+    const range = document.createRange();
+    fun(range);
+
+    // Select our new range.
+    selection.addRange(range);
+}
+
+/**
+ * Replaces the current selection (if any) with a new range, spanning
+ * the contents of the given node.
+ */
+function selectNodeContents(node) {
+    const previousActive = document.activeElement;
+
+    selectRangeWith(range => range.selectNodeContents(node));
+
+    // If the selection update causes the node or an ancestor to be
+    // focused (Chromium 80+), unfocus it, to avoid any focus-related
+    // styling such as outlines.
+    if (document.activeElement != previousActive) {
+        document.activeElement.blur();
+    }
+}
+
+/**
+ * Tries to convince a UA with lazy spellcheck to check and mark the
+ * contents of the given nodes (form fields or @contenteditables).
+ *
+ * Both focus and selection can be used for this purpose, but only
+ * focus works for @contenteditables.
+ */
+function trySpellcheck(...nodes) {
+    // This is inherently a flaky test risk, but Chromium (as of 87)
+    // seems to cancel spellcheck on a node if it wasn’t the last one
+    // focused for “long enough” (though immediate unfocus is ok).
+    // setInterval(0) is usually not long enough.
+    const interval = setInterval(() => {
+        if (nodes.length > 0) {
+            const node = nodes.shift();
+            node.focus();
+            node.blur();
+        } else {
+            clearInterval(interval);
+        }
+    }, 250);
+}