mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests to revision 43ef1ad9afcc9d9d922a5a96bc12b4eaf950960b
This commit is contained in:
WPT Sync Bot
parent
c6a3dcb90d
commit
720d8a12b8
108 changed files with 1609 additions and 244 deletions
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: active selection and color (basic)</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-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
|
||||
<meta content="interact" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
color: red;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Instructions: Select a few or all characters from the words "Text sample" using a variety of methods:
|
||||
|
||||
<ul>
|
||||
<li>Select by dragging (leftwardedly or rightwardedly) the mouse across the characters.
|
||||
<li>Select by using shift + keyboard arrows when keyboard navigation / caret browsing is enabled.
|
||||
<li>Double click a word to select it.
|
||||
<li>Triple click the text to select it.
|
||||
</ul>
|
||||
|
||||
<p>Test passes if, in every case, the selected characters become green <em>and</em> if there is no background color for the characters selection.
|
||||
|
||||
<div>Text sample</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: active selection and background-color (basic)</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-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
|
||||
<meta content="interact" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
background-color: red;
|
||||
color: aqua;
|
||||
display: inline;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
/*
|
||||
Chromium 77.0.3855.0 creates a background-color #334C00 or rgb(51, 76, 0)
|
||||
and not a green (#008000 or rgb(0, 128, 0)) background color.
|
||||
|
||||
Issue 1018450: background-color of ::selection should be painted as specified
|
||||
https://bugs.chromium.org/p/chromium/issues/detail?id=1018450
|
||||
*/
|
||||
</style>
|
||||
|
||||
<p>Instructions: Select a few or all characters from the words "Text sample" using a variety of methods:
|
||||
|
||||
<ul>
|
||||
<li>Select by dragging (leftwardedly or rightwardedly) the mouse across the characters.
|
||||
<li>Select by using shift + keyboard arrows when keyboard navigation / caret browsing is enabled.
|
||||
<li>Double click a word to select it.
|
||||
<li>Triple click the text to select it.
|
||||
</ul>
|
||||
|
||||
<p>Test passes if, in every case, the background color of selected characters become green <em>and</em> if text color of selected characters remains aqua.
|
||||
|
||||
<div>Text sample</div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: active selection and cursor (basic)</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-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
|
||||
<meta content="interact should" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
cursor: auto;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
cursor: url("support/select-custom.cur"), help;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
vertical-align: -1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Instructions: Select a few or all characters from the words "Text sample" using a variety of methods:
|
||||
|
||||
<ul>
|
||||
<li>Select by dragging (leftwardedly or rightwardedly) the mouse across the characters.
|
||||
<li>Select by using shift + keyboard arrows when keyboard navigation / caret browsing is enabled.
|
||||
<li>Double click a word to select it.
|
||||
<li>Triple click the text to select it.
|
||||
</ul>
|
||||
|
||||
<p>Test passes if, in every case, the cursor becomes <img src="support/select-custom.png" width="32" height="32" alt="Image download support must be enabled"> when hovering anywhere over the selection of "Text sample" <em>and</em> if the background color and color of the selected text are the same as when selecting text from these instructions.
|
||||
|
||||
<div>Text sample</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: active selection and text-decoration (basic)</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-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
|
||||
<meta content="interact should" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
text-decoration: fuchsia underline dotted;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Instructions: Select a few or all characters from the words "Text sample" using a variety of methods:
|
||||
|
||||
<ul>
|
||||
<li>Select by dragging (leftwardedly or rightwardedly) the mouse across the characters.
|
||||
<li>Select by using shift + keyboard arrows when keyboard navigation / caret browsing is enabled.
|
||||
<li>Double click a word to select it.
|
||||
<li>Triple click the text to select it.
|
||||
</ul>
|
||||
|
||||
<p>Test passes if, in every case, the selected glyphs of "Text sample" are underlined with a fuchsia dotted line <em>and</em> if the background color and color of the selected text are the same as when selecting text from these instructions.
|
||||
|
||||
<div>Text sample</div>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: active selection and color (basic)</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-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="reference/active-selection-011-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
color: red;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
</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 <strong>not red</strong> while background color of each glyph of "Selected Text" is white.
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: active selection and background-color (basic)</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-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="reference/active-selection-012-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
background-color: red;
|
||||
color: fuchsia;
|
||||
display: inline;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
/*
|
||||
Chromium 77.0.3855.0 and above create a background-color #334C00 or
|
||||
rgb(51, 76, 0) and not a green (#008000 or rgb(0, 128, 0)) background
|
||||
color.
|
||||
*/
|
||||
</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 the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is fuchsia.
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: active selection and text-decoration</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-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
|
||||
<link rel="match" href="reference/active-selection-014-ref.html">
|
||||
|
||||
<meta content="should" name="flags">
|
||||
<meta name="assert" content="This test checks that 'text-decoration' applies to highlight pseudo-element. Since neither 'color' nor 'background-color' has been specified by the pseudo-element selector in this test, then OS-default highlight colors should be used. The consequence of this is that the highlight color determines also the color of the underline.">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
"
|
||||
The element's own text decorations (both line decorations
|
||||
and emphasis marks) are thus drawn in the pseudo-element's
|
||||
own color when that is not currentColor, regardless of
|
||||
their original color or fill specifications.
|
||||
"
|
||||
coming from
|
||||
https://www.w3.org/TR/css-pseudo-4/#highlight-painting
|
||||
-->
|
||||
|
||||
<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 underlined and if color and background color of "Selected Text" are the OS-default highlight colors. The underline color must also be the same as the highlight color of "Selected Text".
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: active selection of partial text and color</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-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="reference/active-selection-016-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
background-color: white;
|
||||
color: white;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function startTest()
|
||||
{
|
||||
var targetRange = document.createRange();
|
||||
/* We first create an empty range */
|
||||
targetRange.setStart(document.getElementById("test").childNodes[0], 5);
|
||||
/*
|
||||
Then we set the start boundary of the range inside div#test to
|
||||
*/
|
||||
targetRange.setEnd(document.getElementById("test").childNodes[0], 9);
|
||||
/* And we set the end boundary of the range inside div#test right */
|
||||
window.getSelection().addRange(targetRange);
|
||||
/* Finally, we now select such range of content */
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="startTest();">
|
||||
|
||||
<div id="test">FAIL PASS FAIL</div>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: active selection, color and background-color</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-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="reference/active-selection-011-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
color: green;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
color: red;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
background-color: white;
|
||||
}
|
||||
/*
|
||||
This div::selection rule is necessary. Without it,
|
||||
"Selected Text" would be using the OS-default
|
||||
highlight colors for ::selection
|
||||
because neither color nor background-color would have
|
||||
been specified by the author.
|
||||
*/
|
||||
|
||||
span::selection
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function startTest()
|
||||
{
|
||||
var targetRange = document.createRange();
|
||||
/* We first create an empty range */
|
||||
targetRange.selectNodeContents(document.getElementById("parent"));
|
||||
/* Then we set the range boundaries to the children of div#parent */
|
||||
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 if there is <strong>no red</strong>.
|
||||
|
||||
<div id="parent">Selected Text <span>FAIL</span></div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!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%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> while background color of each glyph of "Selected Text" is white.
|
||||
|
||||
<div>Selected Text</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!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
|
||||
{
|
||||
background-color: green;
|
||||
color: fuchsia;
|
||||
display: inline;
|
||||
font-size: 300%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is fuchsia.
|
||||
|
||||
<div>Selected Text</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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
|
||||
{
|
||||
background-color: Highlight;
|
||||
color: HighlightText;
|
||||
display: inline;
|
||||
font-size: 300%;
|
||||
text-decoration: HighlightText underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
"
|
||||
The element's own text decorations (both line decorations
|
||||
and emphasis marks) are thus drawn in the pseudo-element's
|
||||
own color when that is not currentColor, regardless of
|
||||
their original color or fill specifications.
|
||||
"
|
||||
coming from
|
||||
https://www.w3.org/TR/css-pseudo-4/#highlight-painting
|
||||
|
||||
Highlight
|
||||
Background of item(s) selected in a control.
|
||||
https://www.w3.org/TR/css-color-4/#valdef-system-color-highlight
|
||||
|
||||
HighlightText
|
||||
Text of item(s) selected in a control.
|
||||
https://www.w3.org/TR/css-color-4/#valdef-system-color-highlighttext
|
||||
|
||||
CSS4 Color Module
|
||||
5.2 System Colors
|
||||
https://www.w3.org/TR/css-color-4/#css-system-colors
|
||||
-->
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if each glyph of "Selected Text" is underlined and if color and background color of "Selected Text" are the OS-default highlight colors. The underline color must also be the same as the highlight color of "Selected Text".
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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: white;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>FAIL <span>PASS</span></div>
|
||||
|
|
@ -9,13 +9,16 @@
|
|||
<style>
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
letter-spacing: 1em;
|
||||
}
|
||||
|
||||
span
|
||||
span#yellow
|
||||
{
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
span#orange
|
||||
{
|
||||
background-color: orange;
|
||||
}
|
||||
|
|
@ -23,4 +26,4 @@
|
|||
|
||||
<p>Test passes if the background of characters "c" and "t" is orange (and only those 2 characters) and if the space between those 2 characters is also orange.
|
||||
|
||||
<div>Sele<span>ct</span>ed Text</div>
|
||||
<div><span id="yellow">Sele<span id="orange">ct</span>ed</span></div>
|
||||
|
|
|
|||
|
|
@ -9,13 +9,16 @@
|
|||
<style>
|
||||
div
|
||||
{
|
||||
background-color: yellow;
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
letter-spacing: 1em;
|
||||
}
|
||||
|
||||
span
|
||||
span#yellow
|
||||
{
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
span.orange
|
||||
{
|
||||
background-color: orange;
|
||||
}
|
||||
|
|
@ -23,4 +26,4 @@
|
|||
|
||||
<p>Test passes if the background of characters "c" and "t" is orange and if the space between those 2 characters is yellow (and not orange).
|
||||
|
||||
<div>Sele<span>c</span> <span>t</span>ed Text</div>
|
||||
<div><span id="yellow">Sele<span class="orange">c</span> <span class="orange">t</span>ed</span></div>
|
||||
|
|
|
|||
|
|
@ -46,4 +46,4 @@
|
|||
|
||||
<p>Test passes if the background of characters "c" and "t" is orange (and only those 2 characters) and if the space between those 2 characters is also orange.
|
||||
|
||||
<div id="test">Sele<span>ct</span>ed Text</div>
|
||||
<div id="test">Sele<span>ct</span>ed</div>
|
||||
|
|
|
|||
|
|
@ -46,4 +46,4 @@
|
|||
|
||||
<p>Test passes if the background of characters "c" and "t" is orange and if the space between those 2 characters is yellow (and not orange).
|
||||
|
||||
<div id="test">Sele<span>c</span> <span>t</span>ed Text</div>
|
||||
<div id="test">Sele<span>c</span> <span>t</span>ed</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 326 B |
Binary file not shown.
|
After Width: | Height: | Size: 337 B |
Loading…
Add table
Add a link
Reference in a new issue