From aba51be573f21a2e2bf1fb831ff94df7bb19509d Mon Sep 17 00:00:00 2001 From: Delan Azabani Date: Wed, 13 Jan 2021 06:19:17 -0800 Subject: [PATCH] WPT updates for highlight painting order (css-pseudo) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 • 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 --- .../highlight-painting-order-ref.html | 28 +++++++++ css/css-pseudo/highlight-painting-order.html | 37 ++++++++++++ .../selection-overlay-and-grammar-001.html | 41 ++++++------- .../selection-overlay-and-spelling-001.html | 30 +++++----- .../selection-text-shadow-006-manual.html | 35 ----------- .../selection-text-shadow-016-ref.html | 21 ------- css/css-pseudo/selection-text-shadow-016.html | 47 --------------- css/css-pseudo/support/selections.js | 60 +++++++++++++++++++ 8 files changed, 156 insertions(+), 143 deletions(-) create mode 100644 css/css-pseudo/highlight-painting-order-ref.html create mode 100644 css/css-pseudo/highlight-painting-order.html delete mode 100644 css/css-pseudo/selection-text-shadow-006-manual.html delete mode 100644 css/css-pseudo/selection-text-shadow-016-ref.html delete mode 100644 css/css-pseudo/selection-text-shadow-016.html create mode 100644 css/css-pseudo/support/selections.js diff --git a/css/css-pseudo/highlight-painting-order-ref.html b/css/css-pseudo/highlight-painting-order-ref.html new file mode 100644 index 00000000000000..827ee9433bec02 --- /dev/null +++ b/css/css-pseudo/highlight-painting-order-ref.html @@ -0,0 +1,28 @@ + + + +

quickquick diff --git a/css/css-pseudo/highlight-painting-order.html b/css/css-pseudo/highlight-painting-order.html new file mode 100644 index 00000000000000..5a1004e0a074bb --- /dev/null +++ b/css/css-pseudo/highlight-painting-order.html @@ -0,0 +1,37 @@ + + +CSS Pseudo-Elements Test: highlight painting order + + + + + + +

quick + diff --git a/css/css-pseudo/selection-overlay-and-grammar-001.html b/css/css-pseudo/selection-overlay-and-grammar-001.html index e4fe6e682e63f9..cd2bb274f56417 100644 --- a/css/css-pseudo/selection-overlay-and-grammar-001.html +++ b/css/css-pseudo/selection-overlay-and-grammar-001.html @@ -1,6 +1,6 @@ - + @@ -53,28 +53,7 @@ } - - - +

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 @@

  • if there is no red. -
    Many thing can happen.
    + +
    The fox jumps over the dog.the fox jumps over the dog.
    + + diff --git a/css/css-pseudo/selection-overlay-and-spelling-001.html b/css/css-pseudo/selection-overlay-and-spelling-001.html index 64129ab5f56b85..48d96e8828d952 100644 --- a/css/css-pseudo/selection-overlay-and-spelling-001.html +++ b/css/css-pseudo/selection-overlay-and-spelling-001.html @@ -1,6 +1,6 @@ - + @@ -70,19 +70,7 @@ } - - - +

    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 @@ +

    Txet sample
    -
    Txet sample
    + diff --git a/css/css-pseudo/selection-text-shadow-006-manual.html b/css/css-pseudo/selection-text-shadow-006-manual.html deleted file mode 100644 index 57c9ad67d17bd7..00000000000000 --- a/css/css-pseudo/selection-text-shadow-006-manual.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - CSS Pseudo-Elements Test: partial selection done manually and multiple text-shadow (complex) - - - - - - - - - -

    Instructions: select a few characters from the blue words "Text sample". Select them with mouse dragging (leftwardedly or rightwardedly) or text-highlighting them with Shift and keyboard arrows when keyboard navigation (also called caret browsing) is enabled. - -

    Test passes if each of the 4 correspondent red glyph counterparts disappear. - -

    Text sample
    diff --git a/css/css-pseudo/selection-text-shadow-016-ref.html b/css/css-pseudo/selection-text-shadow-016-ref.html deleted file mode 100644 index 5e3eabc976e2bc..00000000000000 --- a/css/css-pseudo/selection-text-shadow-016-ref.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - CSS Reftest Reference - - - - - -

    Test passes if each glyph of "Selected Text" is green and not red. - -

    Selected Text
    diff --git a/css/css-pseudo/selection-text-shadow-016.html b/css/css-pseudo/selection-text-shadow-016.html deleted file mode 100644 index 44403c1b5f5fb2..00000000000000 --- a/css/css-pseudo/selection-text-shadow-016.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - CSS Pseudo-Elements Test: selection and text-shadow in 4 directions (static variation) - - - - - - - - - - - - - - -

    Test passes if each glyph of "Selected Text" is green and not red. - -

    Selected Text
    diff --git a/css/css-pseudo/support/selections.js b/css/css-pseudo/support/selections.js new file mode 100644 index 00000000000000..022528e6aaa7c0 --- /dev/null +++ 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 + // 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); +}