mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision 1268bd5901289acc95b1a576f108bdf382d82e44
This commit is contained in:
WPT Sync Bot
parent
f183d66217
commit
292a12e545
261 changed files with 5513 additions and 966 deletions
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<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
|
||||
{
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
color: maroon;
|
||||
text-decoration: underline dotted fuchsia;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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.
|
||||
|
||||
<p>Test passes if each glyph of "thing" is maroon and if "thing" is underlined with a fuchsia dotted line.
|
||||
|
||||
<div contenteditable="true">Many <span>thing</span> can happen.</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: highlighting of grammar error (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="grammar-error-001-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::grammar-error
|
||||
{
|
||||
color: maroon;
|
||||
text-decoration: underline dotted fuchsia;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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.
|
||||
|
||||
<p>Test passes if each glyph of "thing" is maroon and if "thing" is underlined with a fuchsia dotted line.
|
||||
|
||||
<div contenteditable="true">Many thing can happen.</div>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<style>
|
||||
:root {
|
||||
--red-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: red"></svg>');
|
||||
--green-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: green"></svg>');
|
||||
}
|
||||
ul {
|
||||
float: left;
|
||||
}
|
||||
.inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
.text, .image {
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
.outside.text::before, .outside.image::before {
|
||||
display: inline-block;
|
||||
direction: rtl;
|
||||
width: 0;
|
||||
}
|
||||
.text::before {
|
||||
content: "text";
|
||||
}
|
||||
.image::before {
|
||||
content: var(--green-image);
|
||||
}
|
||||
</style>
|
||||
<ul style="list-style-type: none">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
<ul style="list-style-type: decimal">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
<ul style="list-style-type: disc">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
<ul style="list-style-type: 'string'">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
<ul style="list-style-image: var(--red-image)">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: ::marker pseudo elements styled with 'content' property</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="match" href="marker-content-012-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-lists/#content-property">
|
||||
<meta name="assert" content="Checks that ::marker's 'content' takes precendence over 'list-style-type' and 'list-style-image'">
|
||||
<style>
|
||||
:root {
|
||||
--red-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: red"></svg>');
|
||||
--green-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: green"></svg>');
|
||||
}
|
||||
ul {
|
||||
float: left;
|
||||
}
|
||||
.inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
.text::marker {
|
||||
content: "text";
|
||||
}
|
||||
.image::marker {
|
||||
content: var(--green-image);
|
||||
}
|
||||
</style>
|
||||
<ul style="list-style-type: none">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
<ul style="list-style-type: decimal">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
<ul style="list-style-type: disc">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
<ul style="list-style-type: 'string'">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
<ul style="list-style-image: var(--red-image)">
|
||||
<li class="outside normal">item</li>
|
||||
<li class="outside text">item</li>
|
||||
<li class="outside image">item</li>
|
||||
<li class="inside normal">item</li>
|
||||
<li class="inside text">item</li>
|
||||
<li class="inside image">item</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<style>
|
||||
.inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
.string {
|
||||
list-style-type: "string";
|
||||
}
|
||||
.content::marker {
|
||||
content: "content";
|
||||
}
|
||||
</style>
|
||||
<ol class="outside">
|
||||
<li class="decimal">item</li>
|
||||
<li class="string">item</li>
|
||||
<li class="content">item</li>
|
||||
</ol>
|
||||
<ol class="inside">
|
||||
<li class="decimal">item</li>
|
||||
<li class="string">item</li>
|
||||
<li class="content">item</li>
|
||||
</ol>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: ::marker pseudo elements styled with 'content' property</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="match" href="marker-content-013-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-lists/#list-style-position-property">
|
||||
<meta name="assert" content="Checks that ::marker is updated when 'list-style-position' changes dynamically.">
|
||||
<style>
|
||||
.inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
.string {
|
||||
list-style-type: "string";
|
||||
}
|
||||
.content::marker {
|
||||
content: "content";
|
||||
}
|
||||
</style>
|
||||
<ol class="inside">
|
||||
<li class="decimal">item</li>
|
||||
<li class="string">item</li>
|
||||
<li class="content">item</li>
|
||||
</ol>
|
||||
<ol class="outside">
|
||||
<li class="decimal">item</li>
|
||||
<li class="string">item</li>
|
||||
<li class="content">item</li>
|
||||
</ol>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script>
|
||||
"use strict";
|
||||
addEventListener("load", function() {
|
||||
requestAnimationFrame(() => {
|
||||
for (const list of document.querySelectorAll("ol")) {
|
||||
list.classList.toggle("inside");
|
||||
list.classList.toggle("outside");
|
||||
}
|
||||
takeScreenshot();
|
||||
});
|
||||
}, {once: true});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!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>
|
||||
|
|
@ -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
|
||||
{
|
||||
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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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,28 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<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
|
||||
{
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
color: maroon;
|
||||
text-decoration: underline dotted fuchsia;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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.
|
||||
|
||||
<p>Test passes if each glyph of "txet" is maroon and if "txet" is underlined with a fuchsia dotted line.
|
||||
|
||||
<div contenteditable="true">A <span>txet</span> sample</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: highlighting of spelling error (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="spelling-error-001-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::spelling-error
|
||||
{
|
||||
color: maroon;
|
||||
text-decoration: underline dotted fuchsia;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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.
|
||||
|
||||
<p>Test passes if each glyph of "txet" is maroon and if "txet" is underlined with a fuchsia dotted line.
|
||||
|
||||
<div contenteditable="true">A txet sample</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue