Skip to content

GitLab

T
tangled
Commit cc72f5ae authored by Delan Azabani's avatar Delan Azabani Committed by Chromium LUCI CQ
Browse files
Options

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
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2624328
Commit-Queue: Delan Azabani <dazabani@igalia.com>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Reviewed-by: default avatarYoshifumi Inoue <yosin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#843482}
parent 068f6265
Show whitespace changes
Inline Side-by-side
Showing with 159 additions and 143 deletions
third_party/blink/web_tests/TestExpectations
View file @ cc72f5ae
......@@ -5847,3 +5847,6 @@ crbug.com/1164459 [ Mac10.15 ] external/wpt/preload/download-resources.html [ Pa
# Sheriff 2021-01-14
crbug.com/1166540 [ Mac ] ietestcenter/css3/bordersbackgrounds/background-attachment-local-scrolling.htm [ Pass Failure ]
# CSS spelling and grammar features (issue 1163437)
crbug.com/1147859 external/wpt/css/css-pseudo/highlight-painting-order.html [ Failure ]
third_party/blink/web_tests/external/wpt/css/css-pseudo/highlight-painting-order-ref.html 0 → 100644
View file @ cc72f5ae
<!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
third_party/blink/web_tests/external/wpt/css/css-pseudo/highlight-painting-order.html 0 → 100644
View file @ cc72f5ae
<!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>
third_party/blink/web_tests/external/wpt/css/css-pseudo/selection-overlay-and-grammar-001.html
View file @ cc72f5ae
<!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>
third_party/blink/web_tests/external/wpt/css/css-pseudo/selection-overlay-and-spelling-001.html
View file @ cc72f5ae
<!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>
third_party/blink/web_tests/external/wpt/css/css-pseudo/selection-text-shadow-006-manual.html deleted 100644 → 0
View file @ 068f6265
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Pseudo-Elements Test: partial selection done manually and multiple text-shadow (complex)</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
<meta content="interact" name="flags">
<meta content="This test checks that text selectedness done manually must affect multiple text shadows." name="assert">
<style>
div
{
color: blue;
font-size: 300%;
margin-left: 7.16667em;
margin-top: 1.5em;
text-shadow: red 0em -1.2em 0em, red -7em 0em 0em, red 7em 0em 0em, red 0em 1.2em 0em;
}
div::selection
{
background-color: yellow;
color: green;
text-shadow: none;
}
</style>
<p>Instructions: select a few characters from the blue words "Text sample". Select them with mouse dragging (leftwardedly or rightwardedly) or text-highlighting them with <kbd>Shift</kbd> and keyboard arrows when keyboard navigation (also called caret browsing) is enabled.
<p>Test passes if each of the 4 correspondent red glyph counterparts disappear.
<div>Text sample</div>
third_party/blink/web_tests/external/wpt/css/css-pseudo/selection-text-shadow-016-ref.html deleted 100644 → 0
View file @ 068f6265
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div
{
color: green;
font-size: 300%;
margin-left: 0.66667em;
margin-top: 1.5em;
}
</style>
<p>Test passes if each glyph of "Selected Text" is green and not red.
<div>Selected Text</div>
third_party/blink/web_tests/external/wpt/css/css-pseudo/selection-text-shadow-016.html deleted 100644 → 0
View file @ 068f6265
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Pseudo-Elements Test: selection and text-shadow in 4 directions (static variation)</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
<link rel="match" href="selection-text-shadow-016-ref.html">
<meta content="" name="flags">
<meta content="This test checks that text selectedness must affect multiple text shadows." name="assert">
<style>
div
{
color: blue;
font-size: 300%;
margin-left: 0.66667em;
margin-top: 1.5em;
text-shadow: red 0em -0.5em 0em, red -0.5em 0em 0em, red 0.5em 0em 0em, red 0em 0.5em 0em;
}
div::selection
{
color: green;
text-shadow: none;
}
</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();">
<p>Test passes if each glyph of "Selected Text" is green and not red.
<div id="test">Selected Text</div>
third_party/blink/web_tests/external/wpt/css/css-pseudo/support/selections.js 0 → 100644
View file @ cc72f5ae
/**
* 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);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment