mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: Range across contain boundary is painted</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 should be painted even though a Range that crosses a css-contain boundary is a part of it">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
#target {
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span id="target"><span>two </span><span>three…</span></span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body, 0);
|
||||
r.setEnd(document.querySelector("#target"), 1);
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
div {
|
||||
color: #00000080;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>foobar</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!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-003-ref.html">
|
||||
<meta name="assert" value="Unstyled highlights should not be visible">
|
||||
<style>
|
||||
div {
|
||||
color: #00000080;
|
||||
background-color: red;
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="target">foobar</div>
|
||||
<script>
|
||||
const node = document.getElementById("target");
|
||||
let r = new Range();
|
||||
r.setStart(node.firstChild, 0);
|
||||
r.setEnd(node.firstChild, 3);
|
||||
CSS.highlights.set("div-highlight", new Highlight(r));
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -4,9 +4,13 @@
|
|||
body {
|
||||
font-size: 3em;
|
||||
font-weight: bolder;
|
||||
|
||||
}
|
||||
#affected1 {
|
||||
color: red;
|
||||
}
|
||||
#affected2 {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<body><span>This should have default style (black).</span><span id="affected2">This should have 'highlight2' style (green).</span>
|
||||
<body><span id="affected1">This should have 'highlight1' style (red).</span><span id="affected2">This should have 'highlight2' style (green).</span>
|
||||
|
|
@ -16,21 +16,19 @@
|
|||
color: green;
|
||||
}
|
||||
</style>
|
||||
<body><span id="affected1">This should have default style (black).</span><span id="affected2">This should have 'highlight2' style (green).</span>
|
||||
<body><span id="affected1">This should have 'highlight1' style (red).</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.
|
||||
- UAs do not paint unstyled custom highlights.
|
||||
|
||||
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.
|
||||
span#affected1, where there is no CSS rule for highlight2. But since unstyled
|
||||
custom highlights are not painted, span#affected1 is still painted with the
|
||||
styles for highlight1.
|
||||
|
||||
See https://drafts.csswg.org/css-highlight-api-1/#default-styles
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
background-color: rgb(0, 255, 0, 0.5);
|
||||
}
|
||||
#affected2 {
|
||||
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>
|
||||
<body><div><span id="affected1">Green on lime.</span><span id="affected2">Red on maroon.</span></div>
|
||||
|
|
@ -18,21 +18,18 @@
|
|||
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>
|
||||
<body><div><span id="affected1">Green on lime.</span><span id="affected2">Red 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.
|
||||
- UAs do not paint unstyled custom highlights.
|
||||
|
||||
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).
|
||||
rule for highlight1. But since unstyled custom highlights are not painted,
|
||||
span#affected2 is still painted with the styles for highlight2.
|
||||
|
||||
See https://drafts.csswg.org/css-highlight-api-1/#default-styles
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,17 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: </title>
|
||||
<title>CSS Highlight API Test: Invalid StaticRanges are not painted</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
|
||||
<link rel="match" href="custom-highlight-painting-staticrange-001-ref.html">
|
||||
<meta name="assert" value="StaticRanges that are invalid, collapsed or that cross only one boundary of a css-contain node should not be painted when they're in a Highlight">
|
||||
<meta name="assert" value="StaticRanges that are invalid or collapsed should not be painted when they're in a Highlight">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
#second {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
<body><span id="first">One </span><span id="second">two </span><span id="third">three…</span>
|
||||
<script>
|
||||
|
|
@ -21,7 +18,5 @@
|
|||
h.add(new StaticRange({startContainer: document.body, startOffset: 1, endContainer: document.body, endOffset: 100}));
|
||||
h.add(new StaticRange({startContainer: document, startOffset: 0, endContainer: document, endOffset: 1}));
|
||||
h.add(new StaticRange({startContainer: document.querySelector("#third").firstChild, startOffset: 1, endContainer: document.querySelector("#first").firstChild, endOffset: 2}));
|
||||
h.add(new StaticRange({startContainer: document.querySelector("#first").firstChild, startOffset: 1, endContainer: document.querySelector("#second").firstChild, endOffset: 2}));
|
||||
h.add(new StaticRange({startContainer: document.querySelector("#second").firstChild, startOffset: 1, endContainer: document.querySelector("#third").firstChild, endOffset: 2}));
|
||||
CSS.highlights.set("example-highlight", h);
|
||||
</script>
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Highlight API Test: </title>
|
||||
<title>CSS Highlight API Test: StaticRange across contain boundary is painted</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="StaticRanges crossing both boundaries of a css-contain (i.e. containing it entirely) should be painted">
|
||||
<meta name="assert" value="A StaticRange crossing a contain boundary should be painted">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
#contained {
|
||||
contain: style;
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
<body><span>One <span id="contained">two </span>three…</span>
|
||||
<script>
|
||||
let h = new Highlight();
|
||||
h.add(new StaticRange({startContainer: document.body.firstChild.childNodes[0], startOffset: 0, endContainer: document.body.firstChild.childNodes[2], endOffset: 0}));
|
||||
h.add(new StaticRange({startContainer: document.body.firstChild.childNodes[0], startOffset: 0, endContainer: document.body.firstChild.childNodes[1], endOffset: 1}));
|
||||
CSS.highlights.set("example-highlight", h);
|
||||
</script>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<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-staticrange-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly after a node crossed by a StaticRange becomes a containment (so the range is not painted anymore)">
|
||||
<script src="resources/run-after-layout-and-paint.js"></script>
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
#contained {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span id="target"><span>two </span><span>three…</span></span>
|
||||
<script>
|
||||
let r = new StaticRange({startContainer: document.body, startOffset: 0, endContainer: document.querySelector("#target"), endOffset: 1});
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
|
||||
const targetSpan = document.querySelector("#target");
|
||||
// Force frame paint before changing targetSpan's id.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
targetSpan.id = "contained";
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly after a node crossed by a StaticRange is not a containment anymore (so the range should be painted now)">
|
||||
<script src="resources/run-after-layout-and-paint.js"></script>
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
#contained {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span id="contained"><span>two </span><span>three…</span></span>
|
||||
<script>
|
||||
let r = new StaticRange({startContainer: document.body, startOffset: 0, endContainer: document.querySelector("#contained"), endOffset: 1});
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
|
||||
const targetSpan = document.querySelector("#contained");
|
||||
// Force frame paint before changing targetSpan's id.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
targetSpan.id = "not-contained";
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<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-staticrange-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly after a node crossed by a StaticRange becomes a containment because of a CSSStyleSheet change (so the range should be painted now)">
|
||||
<script src="resources/run-after-layout-and-paint.js"></script>
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span id="target"><span>two </span><span>three…</span></span>
|
||||
<script>
|
||||
let r = new StaticRange({startContainer: document.body, startOffset: 0, endContainer: document.querySelector("#target"), endOffset: 1});
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
|
||||
let styles = new CSSStyleSheet();
|
||||
document.adoptedStyleSheets = [styles];
|
||||
|
||||
// Force frame paint before changing the style sheet.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
styles.replaceSync(`#target { contain: style; }`);
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly after a node crossed by a StaticRange is not a containment anymore because of a CSSStyleSheet change (so the range should be painted now)">
|
||||
<script src="resources/run-after-layout-and-paint.js"></script>
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span id="target"><span>two </span><span>three…</span></span>
|
||||
<script>
|
||||
let r = new StaticRange({startContainer: document.body, startOffset: 0, endContainer: document.querySelector("#target"), endOffset: 1});
|
||||
let styles = new CSSStyleSheet();
|
||||
styles.replaceSync(`#target { contain: style; }`);
|
||||
document.adoptedStyleSheets = [styles];
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
|
||||
// Force frame paint before changing the style sheet.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
styles.replaceSync(`#target {}`);
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue