mirror of
https://github.com/servo/servo.git
synced 2025-08-10 07:55:33 +01:00
Update web-platform-tests to revision 5e0db3c717532a88040300e65ce7c8b29004d93c
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
98cf3a1895
commit
02952b63dd
409 changed files with 6744 additions and 2463 deletions
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<div id="test">Txet sample</div>
|
||||
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>
|
||||
|
||||
<script>
|
||||
const test = document.querySelector("#test");
|
||||
selectNodeContents(test);
|
||||
trySpellcheck(test);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue