mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<title> Highlight type attribute tests </title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(() => {
|
||||
let customHighlight = new Highlight();
|
||||
assert_equals(customHighlight.type, "highlight", 'Highlight uses \"highlight\" as default type.');
|
||||
|
||||
customHighlight.type = "type-not-listed-in-HighlightType-enum";
|
||||
assert_equals(customHighlight.type, "highlight", 'Highlight type doesn\'t change after assigning an invalid value.');
|
||||
|
||||
customHighlight.type = "spelling-error";
|
||||
assert_equals(customHighlight.type, "spelling-error", 'Highlight type changes to the assigned value if it\'s part of the HighlightType enum (\"spelling-error\"").');
|
||||
|
||||
customHighlight.type = "grammar-error";
|
||||
assert_equals(customHighlight.type, "grammar-error", 'Highlight type changes to the assigned value if it\'s part of the HighlightType enum (\"grammar-error\").');
|
||||
}, 'Highlight has a mutable \'type\' attribute that is a HighlightType enum.');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: Painting</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-001-ref.html">
|
||||
<meta name="assert" value="Highlighted elements must be correctly painted and there should be no caching that doesn't take highlight names into account">
|
||||
<style>
|
||||
#affected::highlight(foo) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span></span><span id="affected">One </span><span id="affected">two </span><span>three…</span>
|
||||
<script>
|
||||
// The first <span> style resolution shouldn't cause caching an empty set of matched properties that could be used with the spans that should be highlighted later.
|
||||
const node = document.body;
|
||||
let r = new Range();
|
||||
r.setStart(node, 1);
|
||||
r.setEnd(node, 3);
|
||||
CSS.highlights.set("foo", new Highlight(r));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS Highlight API Test: ::highlight color with transparent originating color</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#custom-highlight-pseudo">
|
||||
<link rel="help" href="https://crbug.com/1273943">
|
||||
<meta name="assert" content="This test checks that ::highlight pseudo-element uses the specified color even when the originating element text color was trasnparent.">
|
||||
<link rel="match" href="/css/reference/pass_if_pass_below.html">
|
||||
<style>
|
||||
div {
|
||||
color: transparent;
|
||||
}
|
||||
::highlight(example-highlight) {
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is the word "PASS" below.</p>
|
||||
<div id="target">PASS</div>
|
||||
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(target, 0);
|
||||
r.setEnd(target, 1);
|
||||
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
#highlighted {
|
||||
background: cyan;
|
||||
color: blue;
|
||||
}
|
||||
::selection {
|
||||
background: blue;
|
||||
color: cyan;
|
||||
}
|
||||
</style>
|
||||
<body><span id="highlighted">Text should be blue over cyan here and <span id="selected">cyan over blue here</span>.</span>
|
||||
<script>
|
||||
getSelection().setBaseAndExtent(selected, 0, selected, 1);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: </title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-below-selection-ref.html">
|
||||
<meta name="assert" value="Highlight overlay is painted below selection overlay">
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
background: cyan;
|
||||
color: blue;
|
||||
}
|
||||
::selection {
|
||||
background: blue;
|
||||
color: cyan;
|
||||
}
|
||||
</style>
|
||||
<body>Text should be blue over cyan here and <span id="selected">cyan over blue here</span>.
|
||||
<script>
|
||||
let highlightRange = new Range();
|
||||
highlightRange.setStart(document.body.firstChild, 0);
|
||||
highlightRange.setEnd(document.body.lastChild, 0);
|
||||
CSS.highlights.set("foo", new Highlight(highlightRange));
|
||||
getSelection().setBaseAndExtent(selected, 0, selected, 1);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
span {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>There should be only one green rectangle below from [ to ]:</div>
|
||||
<div>[<span> <strong> </strong> </span>]</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: Inheritance</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-inheritance-001-ref.html">
|
||||
<meta name="assert" value="Highlighted elements inherit style properties from their parent if they're not set">
|
||||
<style>
|
||||
div::highlight(div-highlight) {
|
||||
background-color: green;
|
||||
color: red;
|
||||
}
|
||||
span::highlight(span-highlight) {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>There should be only one green rectangle below from [ to ]:</div>
|
||||
<div id="target">[<span> <strong> </strong> </span>]</div>
|
||||
<script>
|
||||
let r = new Range();
|
||||
const node = document.getElementById("target");
|
||||
r.setStart(node, 1);
|
||||
r.setEnd(node, 2);
|
||||
|
||||
CSS.highlights.set("div-highlight", new Highlight(r));
|
||||
CSS.highlights.set("span-highlight", new Highlight(r));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: Inheritance</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-inheritance-001-ref.html">
|
||||
<meta name="assert" value="Highlighted elements inherit style properties from their parent even if there's not a ::highlight selector directly applying to them or their parent.">
|
||||
<style>
|
||||
div::highlight(div-highlight) {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>There should be only one green rectangle below from [ to ]:</div>
|
||||
<div id="target">[<span> <strong> </strong> </span>]</div>
|
||||
<script>
|
||||
const node = document.getElementById("target");
|
||||
let r = new Range();
|
||||
r.setStart(node, 1);
|
||||
r.setEnd(node, 2);
|
||||
CSS.highlights.set("div-highlight", new Highlight(r));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.highlighted {
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<span class="highlighted">Hello</span>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: CSS Rule change</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-invalidation-007-ref.html">
|
||||
<meta name="assert" value="::highlight overlay is correctly invalidated and repainted after CSS rule is changed">
|
||||
<script src="resources/run-after-layout-and-paint.js"></script>
|
||||
<style>
|
||||
span::highlight(example-highlight) {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.blue::highlight(example-highlight) {
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<span>Hello</span>
|
||||
<script>
|
||||
const range = new Range();
|
||||
const span = document.querySelector("span");
|
||||
range.setStart(span, 0);
|
||||
range.setEnd(span, 1);
|
||||
CSS.highlights.set("example-highlight", new Highlight(range));
|
||||
|
||||
// Force frame paint before changing style
|
||||
runAfterLayoutAndPaint(() => {
|
||||
span.className = "blue";
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
body {
|
||||
font-size: 3em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#affected2 {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<body><span>This should have default style (black).</span><span id="affected2">This should have 'highlight2' style (green).</span>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: Overlapping Highlights</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-overlapping-highlights-001-ref.html">
|
||||
<meta name="assert" value="UAs must not define any styles for custom highlight pseudo-elements in the default UA stylesheet.">
|
||||
<style>
|
||||
body {
|
||||
font-size: 3em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#affected1::highlight(highlight1) {
|
||||
color: red;
|
||||
}
|
||||
#affected2::highlight(highlight2) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<body><span id="affected1">This should have default style (black).</span><span id="affected2">This should have 'highlight2' style (green).</span>
|
||||
<script>
|
||||
/*
|
||||
This test is meant to verify that:
|
||||
- UAs must not define any styles for custom highlight pseudo-elements in
|
||||
the default UA stylesheet.
|
||||
- A custom highlight pseudo-element inherits the styles of its originating
|
||||
element.
|
||||
|
||||
In this test, highlight2 has higher priority because it was registered
|
||||
later, so it is painted over highlight1. This includes painting for
|
||||
span#affected1, where there is no CSS rule for highlight2. The result is
|
||||
that highlight2 paints on top for span#affected1, using the originating
|
||||
element's color. Thus it appears as if no highlight was painted at all for
|
||||
span#affected1.
|
||||
|
||||
See https://drafts.csswg.org/css-highlight-api-1/#default-styles
|
||||
*/
|
||||
|
||||
const node = document.body;
|
||||
let r = new Range();
|
||||
r.setStart(node, 0);
|
||||
r.setEnd(node, 2);
|
||||
|
||||
CSS.highlights.set("highlight1", new Highlight(r));
|
||||
CSS.highlights.set("highlight2", new Highlight(r));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#affected1 {
|
||||
color: green;
|
||||
background-color: rgb(0, 255, 0, 0.5);
|
||||
}
|
||||
#affected2 {
|
||||
background-color: rgba(100, 0, 100, 0.5);
|
||||
}
|
||||
</style>
|
||||
<body><div><span id="affected1">Green on lime.</span><span id="affected2">Black on maroon.</span></div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: Overlapping Highlights</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-overlapping-highlights-002-ref.html">
|
||||
<meta name="assert" value="UAs must not define any styles for custom highlight pseudo-elements in the default UA stylesheet.">
|
||||
<style>
|
||||
div {
|
||||
font-size: 3em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#affected1::highlight(highlight1) {
|
||||
color: green;
|
||||
background-color: rgb(0, 255, 0, 0.5);
|
||||
}
|
||||
#affected2::highlight(highlight2) {
|
||||
color: red;
|
||||
background-color: rgba(100, 0, 100, 0.5);
|
||||
}
|
||||
</style>
|
||||
<body><div><span id="affected1">Green on lime.</span><span id="affected2">Black on maroon.</span></div>
|
||||
<script>
|
||||
/*
|
||||
This test is meant to verify that:
|
||||
- UAs must not define any styles for custom highlight pseudo-elements in
|
||||
the default UA stylesheet.
|
||||
- A custom highlight pseudo-element inherits the styles of its originating
|
||||
element.
|
||||
|
||||
In this test, highlight1 has higher priority, so it is painted over
|
||||
highlight2. This includes painting for span#affected2, where there is no CSS
|
||||
rule for highlight1. The result is that highlight1 paints on top for
|
||||
span#affected2, using the originating element's color (black) and background
|
||||
color (transparent). Thus, span#affected2 gets text color black, and the
|
||||
background remains the same color as that applied by highlight2 (maroon).
|
||||
|
||||
See https://drafts.csswg.org/css-highlight-api-1/#default-styles
|
||||
*/
|
||||
|
||||
const div = document.querySelector("div");
|
||||
|
||||
let r = new Range();
|
||||
r.setStart(div, 0);
|
||||
r.setEnd(div, 2);
|
||||
let r2 = new Range();
|
||||
r2.setStart(div, 0);
|
||||
r2.setEnd(div, 2);
|
||||
|
||||
let h = new Highlight(r);
|
||||
h.priority = 3;
|
||||
let h2 = new Highlight(r2);
|
||||
h2.priority = 2;
|
||||
|
||||
CSS.highlights.set("highlight1", h);
|
||||
CSS.highlights.set("highlight2", h2);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Highlight API Test: Reference ::highlight painting text-decoration</title>
|
||||
<style>
|
||||
div {
|
||||
float: left;
|
||||
margin: 0.5em;
|
||||
/* Setting transparent color is a workaround to avoid hitting the following Chromium bug: https://crbug.com/1179938.
|
||||
This could be removed once that bug is fixed. */
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if it matches the reference file.</p>
|
||||
<script>
|
||||
let textDecorationStyles = [
|
||||
"solid green underline", "double green underline", "dotted green underline", "dashed green underline", "wavy green underline",
|
||||
"solid blue overline", "double blue overline", "dotted blue overline", "dashed blue overline", "wavy blue overline",
|
||||
"solid magenta line-through", "double magenta line-through", "dotted magenta line-through", "dashed magenta line-through", "wavy magenta line-through",
|
||||
"solid brown underline overline line-through", "double brown underline overline line-through", "dotted brown underline overline line-through", "dashed brown underline overline line-through", "wavy brown underline overline line-through",
|
||||
];
|
||||
|
||||
textDecorationStyles.forEach((textDecorationStyle, index) => {
|
||||
document.styleSheets[0].insertRule(`#id${index} { text-decoration: ${textDecorationStyle}; }`);
|
||||
let element = document.createElement("div");
|
||||
element.id = `id${index}`;
|
||||
element.innerHTML = textDecorationStyle;
|
||||
document.body.appendChild(element);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Highlight API Test: ::highlight painting text-decoration</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-text-decoration-001-ref.html">
|
||||
<meta name="assert" content="This test checks that ::highlight pseudo-element paints text-decorations defined by it.">
|
||||
<style>
|
||||
div {
|
||||
float: left;
|
||||
margin: 0.5em;
|
||||
/* Setting transparent color is a workaround to avoid hitting the following Chromium bug: https://crbug.com/1179938.
|
||||
This could be removed once that bug is fixed. */
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if it matches the reference file.</p>
|
||||
<script>
|
||||
let textDecorationStyles = [
|
||||
"solid green underline", "double green underline", "dotted green underline", "dashed green underline", "wavy green underline",
|
||||
"solid blue overline", "double blue overline", "dotted blue overline", "dashed blue overline", "wavy blue overline",
|
||||
"solid magenta line-through", "double magenta line-through", "dotted magenta line-through", "dashed magenta line-through", "wavy magenta line-through",
|
||||
"solid brown underline overline line-through", "double brown underline overline line-through", "dotted brown underline overline line-through", "dashed brown underline overline line-through", "wavy brown underline overline line-through",
|
||||
];
|
||||
|
||||
textDecorationStyles.forEach((textDecorationStyle, index) => {
|
||||
document.styleSheets[0].insertRule(`::highlight(h${index}) { text-decoration: ${textDecorationStyle}; }`);
|
||||
let element = document.createElement("div");
|
||||
element.innerHTML = textDecorationStyle;
|
||||
document.body.appendChild(element);
|
||||
let range = new Range();
|
||||
range.setStart(element, 0);
|
||||
range.setEnd(element, 1);
|
||||
CSS.highlights.set(`h${index}`, new Highlight(range));
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Highlight API Test: Reference ::highlight dynamic change text-decoration</title>
|
||||
<style>
|
||||
::highlight(example) {
|
||||
text-decoration: solid underline green;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if it line below has a green underline.</p>
|
||||
<div id="target">target</div>
|
||||
<script>
|
||||
let range = new Range();
|
||||
range.setStart(target, 0);
|
||||
range.setEnd(target, 1);
|
||||
CSS.highlights.set(`example`, new Highlight(range));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Highlight API Test: ::highlight dynamic change text-decoration</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-text-decoration-dynamic-001-ref.html">
|
||||
<meta name="assert" content="This test checks that it's possible to modify dynamically the text-decoration of a custom highlight through ::highlight pseudo-element.">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
::highlight(example) {
|
||||
text-decoration: solid underline red;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if it line below has a green underline.</p>
|
||||
<div id="target">target</div>
|
||||
<script>
|
||||
let range = new Range();
|
||||
range.setStart(target, 0);
|
||||
range.setEnd(target, 1);
|
||||
CSS.highlights.set(`example`, new Highlight(range));
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||
document.styleSheets[0].cssRules[0].style.textDecorationColor = "green";
|
||||
takeScreenshot();
|
||||
}));
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: text-decoration</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-001-ref.html">
|
||||
<meta name="assert" value="::highlight overlay does not paint text-shadow">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
text-shadow: 1px 2px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span>two </span><span>three…</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body, 0);
|
||||
r.setEnd(document.body, 2);
|
||||
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue