mirror of
https://github.com/servo/servo.git
synced 2025-08-16 02:45:36 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.highlighted {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span class="highlighted">One two </span><span>three…</span>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="::highlight overlay is painted">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</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>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<body><div>abc</div>
|
||||
|
|
@ -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-002-ref.html">
|
||||
<meta name="assert" value="Latest Highlight added to CSS.highlights has higher priority than the previous ones if there were no priorities explicitly set">
|
||||
<style>
|
||||
div::highlight(bar) {
|
||||
color: red;
|
||||
}
|
||||
div::highlight(foo) {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<body><div>abc</div>
|
||||
<script>
|
||||
let div = document.body.firstChild;
|
||||
let r = new Range();
|
||||
r.setStart(div, 0);
|
||||
r.setEnd(div, 1);
|
||||
let h = new Highlight(r);
|
||||
CSS.highlights.set('foo', h);
|
||||
CSS.highlights.set('bar', h);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
span { background-color: rgba(0, 0, 255, 0.3); }
|
||||
</style>
|
||||
<body>L<span>orem I</span>psum.
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!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-003-ref.html">
|
||||
<meta name="assert" value="Intersections of overlapping ranges contained in the same Highlight are painted only once">
|
||||
<style>
|
||||
::highlight(sample) { background-color: rgba(0, 0, 255, 0.3); }
|
||||
</style>
|
||||
<body>Lorem Ipsum.
|
||||
<script>
|
||||
let textNode = document.body.firstChild;
|
||||
|
||||
let r1 = new Range();
|
||||
r1.setStart(textNode, 1);
|
||||
r1.setEnd(textNode, 5);
|
||||
|
||||
let r2 = new Range();
|
||||
r2.setStart(textNode, 3);
|
||||
r2.setEnd(textNode, 7);
|
||||
|
||||
CSS.highlights.set("sample", new Highlight(r1, r2));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.foo {
|
||||
color:blue;
|
||||
background-color:yellow;
|
||||
}
|
||||
.bar {
|
||||
color:orange;
|
||||
}
|
||||
.bar-over-foo {
|
||||
color:orange;
|
||||
background-color:yellow;
|
||||
}
|
||||
</style>
|
||||
<body><span class="foo">Som</span><span class="bar-over-foo">e t</span><span class="bar">ext</span>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!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-004-2-ref.html">
|
||||
<meta name="assert" value="When painting overlapping highlights with the same .priority, the one added last should be painted on top; and style properties not defined by the one on top (background-color in this case) should follow the rules of the next Highlight from top to bottom until there's one that overwrites default (or use default value otherwise).">
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color:blue;
|
||||
background-color:yellow;
|
||||
}
|
||||
::highlight(bar) {
|
||||
color:orange;
|
||||
}
|
||||
</style>
|
||||
<body>Some text
|
||||
<script>
|
||||
let textNode = document.body.firstChild;
|
||||
|
||||
let r1 = new Range();
|
||||
r1.setStart(textNode, 0);
|
||||
r1.setEnd(textNode, 6);
|
||||
|
||||
let r2 = new Range();
|
||||
r2.setStart(textNode, 3);
|
||||
r2.setEnd(textNode, 9);
|
||||
|
||||
let h1 = new Highlight(r1);
|
||||
let h2 = new Highlight(r2);
|
||||
|
||||
CSS.highlights.set("foo", h1);
|
||||
CSS.highlights.set("bar", h2);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.foo {
|
||||
color:blue;
|
||||
background-color:yellow;
|
||||
}
|
||||
.bar {
|
||||
background-color:orange;
|
||||
}
|
||||
.bar-over-foo {
|
||||
color:blue;
|
||||
background-color:orange;
|
||||
}
|
||||
</style>
|
||||
<body><span class="foo">Som</span><span class="bar-over-foo">e t</span><span class="bar">ext</span>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!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-004-ref.html">
|
||||
<meta name="assert" value="When painting overlapping highlights with the same .priority, the one added last should be painted on top; and style properties not defined by the one on top (color in this case) should follow the rules of the next Highlight from top to bottom until there's one that overwrites default (or use default value otherwise).">
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color:blue;
|
||||
background-color:yellow;
|
||||
}
|
||||
::highlight(bar) {
|
||||
background-color:orange;
|
||||
}
|
||||
</style>
|
||||
<body>Some text
|
||||
<script>
|
||||
let textNode = document.body.firstChild;
|
||||
|
||||
let r1 = new Range();
|
||||
r1.setStart(textNode, 0);
|
||||
r1.setEnd(textNode, 6);
|
||||
|
||||
let r2 = new Range();
|
||||
r2.setStart(textNode, 3);
|
||||
r2.setEnd(textNode, 9);
|
||||
|
||||
let h1 = new Highlight(r1);
|
||||
let h2 = new Highlight(r2);
|
||||
|
||||
CSS.highlights.set("foo", h1);
|
||||
CSS.highlights.set("bar", h2);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted after modifying (setEnd()) a Range contained in it">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</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, 1);
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
r.setEnd(document.body, 2);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted after modifying (setStart()) a Range contained in it">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span>two </span><span>three…</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body, 1);
|
||||
r.setEnd(document.body, 2);
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
r.setStart(document.body, 0);
|
||||
</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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted after adding a Range to it after registering it in the HighlightRegistry">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span>two </span><span>three…</span>
|
||||
<script>
|
||||
let r1 = new Range();
|
||||
r1.setStart(document.body, 0);
|
||||
r1.setEnd(document.body, 1);
|
||||
let h = new Highlight(r1);
|
||||
let r2 = new Range();
|
||||
r2.setStart(document.body, 1);
|
||||
r2.setEnd(document.body, 2);
|
||||
CSS.highlights.set("example-highlight", h);
|
||||
h.add(r2);
|
||||
</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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted after deleting a Range from it after registering it in the HighlightRegistry">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span>two </span><span>three…</span>
|
||||
<script>
|
||||
let r1 = new Range();
|
||||
r1.setStart(document.body, 0);
|
||||
r1.setEnd(document.body, 2);
|
||||
let r2 = new Range();
|
||||
r2.setStart(document.body, 1);
|
||||
r2.setEnd(document.body, 3);
|
||||
let h = new Highlight(r1, r2);
|
||||
CSS.highlights.set("example-highlight", h);
|
||||
h.delete(r2);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly when collapsing a Range after registering a Highlight that contains it in the HighlightRegistry">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
::highlight(another-highlight) {
|
||||
background-color: red;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span>two </span><span>three…</span>
|
||||
<script>
|
||||
let r1 = new Range();
|
||||
r1.setStart(document.body, 0);
|
||||
r1.setEnd(document.body, 2);
|
||||
let r2 = new Range();
|
||||
r2.setStart(document.body, 1);
|
||||
r2.setEnd(document.body, 3);
|
||||
let h1 = new Highlight(r1);
|
||||
let h2 = new Highlight(r2);
|
||||
CSS.highlights.set("example-highlight", h1);
|
||||
CSS.highlights.set("another-highlight", h2);
|
||||
r2.collapse();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly after inserting a node in the middle of a Range contained in it">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>two </span><span>three…</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body, 0);
|
||||
r.setEnd(document.body, 1);
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
let newNode = document.createElement("span");
|
||||
newNode.innerText = "One ";
|
||||
document.body.insertBefore(newNode, document.body.firstChild);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly after removing a node included in a Range contained in it">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span>two </span><span>two-point-five </span><span>three…</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body, 0);
|
||||
r.setEnd(document.body, 3);
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
document.body.removeChild(document.body.children[2]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly after modifying the inner text of a node included in a Range contained in it">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>Zero </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));
|
||||
document.body.firstChild.innerText = "One ";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly after modifying text content of a node included in a Range contained in it">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span id="first">One </span><span id="second">two-point-five </span><span id="third">three…</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.querySelector("#first").firstChild, 0);
|
||||
r.setEnd(document.querySelector("#third").firstChild, 0);
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
document.querySelector("#second").firstChild.textContent = "two ";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Registering the same Highlight under different names and again with a used name works as it should.">
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: blue;
|
||||
}
|
||||
::highlight(bar) {
|
||||
background-color: yellow;
|
||||
}
|
||||
</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);
|
||||
|
||||
let h = new Highlight(r);
|
||||
|
||||
CSS.highlights.set("foo", h);
|
||||
CSS.highlights.set("bar", h);
|
||||
CSS.highlights.set("foo", h);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Unregistering only once a Highlight that was registered under different names works as it should and is still being painted.">
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: red;
|
||||
}
|
||||
::highlight(bar) {
|
||||
color: blue;
|
||||
background-color: yellow;
|
||||
}
|
||||
</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);
|
||||
|
||||
let h = new Highlight(r);
|
||||
|
||||
CSS.highlights.set("foo", h);
|
||||
CSS.highlights.set("bar", h);
|
||||
CSS.highlights.delete("foo");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
::grammar-error {
|
||||
background-color: lime;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<span>Many thing can happen.</span>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!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-grammar-ref.html">
|
||||
<meta name="assert" value="Highlight overlay is painted below all other pseudo overlays (comparing only to grammar suffices since it's the one immediately above ::highlight, assuming ::grammar-error is painted in the correct order)">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
::grammar-error {
|
||||
background-color: lime;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
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)
|
||||
-->
|
||||
<span contenteditable="true" spellcheck="true" lang="en">Many thing can happen.</div>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body, 0);
|
||||
r.setEnd(document.body, 1);
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
#highlight {
|
||||
background-color: yellow;
|
||||
color: limegreen;
|
||||
}
|
||||
#highlight-and-target-text {
|
||||
background-color: orange;
|
||||
color: limegreen;
|
||||
}
|
||||
#target-text {
|
||||
background-color: orange;
|
||||
}
|
||||
</style>
|
||||
<span id="highlight">Some </span><span id="highlight-and-target-text">te</span><span id="target-text">xt</span>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!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-target-text-ref.html">
|
||||
<meta name="assert" value="Style properties defined in a ::highlight shouldn't be overriden by default values if there's another pseudo overlay painted on top of it (::target-text in this case) which doesn't specify a value for that property (color in this case)">
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color:limegreen;
|
||||
background-color:yellow;
|
||||
}
|
||||
::target-text {
|
||||
background-color:orange;
|
||||
}
|
||||
</style>
|
||||
<body>Some text
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body.firstChild, 0);
|
||||
r.setEnd(document.body.firstChild, 7);
|
||||
CSS.highlights.set("foo", new Highlight(r));
|
||||
window.location.href = `custom-highlight-painting-below-target-text.html#:~:text=text`;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="
|
||||
<style>
|
||||
span {
|
||||
color: blue;
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<span id='span-iframe'>abc</span>
|
||||
"
|
||||
>
|
||||
</iframe>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!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-iframe-001-ref.html">
|
||||
<meta name="assert" value="Registered Highlights inside an iframe are correctly painted.">
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
src="resources/iframe-code.html"
|
||||
>
|
||||
</iframe>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!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-iframe-001-ref.html">
|
||||
<meta name="assert" value="Creating a Highlight in the root Document and registering it in an iframe's CSS.highlights is painted correctly.">
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: blue;
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<span id='span-iframe'>abc</span>
|
||||
"
|
||||
>
|
||||
</iframe>
|
||||
<script>
|
||||
let iframe = document.querySelector("#iframe");
|
||||
iframe.onload = () => {
|
||||
let spanIframe = iframe.contentDocument.querySelector("#span-iframe");
|
||||
let rangeIframe = new Range();
|
||||
rangeIframe.setStart(spanIframe, 0);
|
||||
rangeIframe.setEnd(spanIframe, 1);
|
||||
|
||||
let h = new Highlight();
|
||||
h.add(rangeIframe);
|
||||
iframe.contentWindow.CSS.highlights.set("foo", h);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
#span-doc {
|
||||
color: green;
|
||||
background-color: greenyellow;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="
|
||||
<style>
|
||||
span {
|
||||
color: blue;
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<span id='span-iframe'>abc</span>
|
||||
"
|
||||
>
|
||||
</iframe>
|
||||
<br>
|
||||
<span id="span-doc">abc</span>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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-iframe-003-ref.html">
|
||||
<meta name="assert" value="Creating a Highlight in the root Document with a Range in the root document and another one in an iframe is correctly painted when added to both CSS.highlights (root document's and iframe's).">
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: green;
|
||||
background-color: greenyellow;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: blue;
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<span id='span-iframe'>abc</span>
|
||||
"
|
||||
>
|
||||
</iframe>
|
||||
<br>
|
||||
<span id="span-doc">abc</span>
|
||||
<script>
|
||||
let spanDoc = document.querySelector("#span-doc");
|
||||
let rangeDoc = new Range();
|
||||
rangeDoc.setStart(spanDoc, 0);
|
||||
rangeDoc.setEnd(spanDoc, 1);
|
||||
|
||||
let iframe = document.querySelector("#iframe");
|
||||
iframe.onload = () => {
|
||||
let spanIframe = iframe.contentDocument.querySelector("#span-iframe");
|
||||
let rangeIframe = new Range();
|
||||
rangeIframe.setStart(spanIframe, 0);
|
||||
rangeIframe.setEnd(spanIframe, 1);
|
||||
|
||||
let h = new Highlight(rangeDoc, rangeIframe);
|
||||
iframe.contentWindow.CSS.highlights.set("foo", h);
|
||||
CSS.highlights.set("foo", h);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
#span-doc {
|
||||
color: green;
|
||||
background-color: greenyellow;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="<span id='span-iframe'>abc</span>"
|
||||
>
|
||||
</iframe>
|
||||
<br>
|
||||
<span id="span-doc">abc</span>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!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-iframe-004-ref.html">
|
||||
<meta name="assert" value="Creating a Highlight in the root Document with a Range in the root document and another one in an iframe is correctly painted when added to the root document's CSS.highlights (only root document's range is painted).">
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: green;
|
||||
background-color: greenyellow;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: blue;
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<span id='span-iframe'>abc</span>
|
||||
"
|
||||
>
|
||||
</iframe>
|
||||
<br>
|
||||
<span id="span-doc">abc</span>
|
||||
<script>
|
||||
let spanDoc = document.querySelector("#span-doc");
|
||||
let rangeDoc = new Range();
|
||||
rangeDoc.setStart(spanDoc, 0);
|
||||
rangeDoc.setEnd(spanDoc, 1);
|
||||
|
||||
let iframe = document.querySelector("#iframe");
|
||||
iframe.onload = () => {
|
||||
let spanIframe = iframe.contentDocument.querySelector("#span-iframe");
|
||||
let rangeIframe = new Range();
|
||||
rangeIframe.setStart(spanIframe, 0);
|
||||
rangeIframe.setEnd(spanIframe, 1);
|
||||
|
||||
let h = new Highlight(rangeDoc, rangeIframe);
|
||||
CSS.highlights.set("foo", h);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="
|
||||
<style>
|
||||
span {
|
||||
color: blue;
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<span id='span-iframe'>abc</span>
|
||||
"
|
||||
>
|
||||
</iframe>
|
||||
<br>
|
||||
<span id="span-doc">abc</span>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!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-iframe-005-ref.html">
|
||||
<meta name="assert" value="Creating a Highlight in the root Document with a Range in the root document and another one in an iframe is correctly painted when added to the iframe's CSS.highlights (only the iframe's range is painted).">
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: green;
|
||||
background-color: greenyellow;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: blue;
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<span id='span-iframe'>abc</span>
|
||||
"
|
||||
>
|
||||
</iframe>
|
||||
<br>
|
||||
<span id="span-doc">abc</span>
|
||||
<script>
|
||||
let spanDoc = document.querySelector("#span-doc");
|
||||
let rangeDoc = new Range();
|
||||
rangeDoc.setStart(spanDoc, 0);
|
||||
rangeDoc.setEnd(spanDoc, 1);
|
||||
|
||||
let iframe = document.querySelector("#iframe");
|
||||
iframe.onload = () => {
|
||||
let spanIframe = iframe.contentDocument.querySelector("#span-iframe");
|
||||
let rangeIframe = new Range();
|
||||
rangeIframe.setStart(spanIframe, 0);
|
||||
rangeIframe.setEnd(spanIframe, 1);
|
||||
|
||||
let h = new Highlight(rangeDoc, rangeIframe);
|
||||
iframe.contentWindow.CSS.highlights.set("foo", h);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="<span id='span-iframe'>abc</span>"
|
||||
>
|
||||
</iframe>
|
||||
<br>
|
||||
<span id="span-doc">abc</span>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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-iframe-006-ref.html">
|
||||
<meta name="assert" value="Ranges contained in a registered Highlight that are moved to another document different than the owner of the HighlightRegistry where the Highlight has been registered should not be painted anymore.">
|
||||
<script src="resources/run-after-layout-and-paint.js"></script>
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: green;
|
||||
background-color: greenyellow;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<iframe
|
||||
id="iframe"
|
||||
srcdoc="
|
||||
<style>
|
||||
::highlight(foo) {
|
||||
color: blue;
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<span id='span-iframe'>abc</span>
|
||||
"
|
||||
>
|
||||
</iframe>
|
||||
<br>
|
||||
<span id="span-doc">abc</span>
|
||||
<script>
|
||||
let spanDoc = document.querySelector("#span-doc");
|
||||
let r = new Range();
|
||||
r.setStart(spanDoc, 0);
|
||||
r.setEnd(spanDoc, 1);
|
||||
|
||||
let h = new Highlight(r);
|
||||
CSS.highlights.set("foo", h);
|
||||
|
||||
let iframe = document.querySelector("#iframe");
|
||||
iframe.onload = () => {
|
||||
let spanIframe = iframe.contentDocument.querySelector("#span-iframe");
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
r.setStart(spanIframe, 0);
|
||||
r.setEnd(spanIframe, 1);
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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 overlay is correctly invalidated and repainted">
|
||||
<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>two </span><span>three…</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body, 0);
|
||||
r.setEnd(document.body, 2);
|
||||
|
||||
// Force frame paint before registering the Highlight.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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 overlay is correctly invalidated and repainted after deletion">
|
||||
<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>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));
|
||||
|
||||
// Force frame paint before deleting the Highlight.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
CSS.highlights.delete("example-highlight");
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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 overlay is correctly invalidated and repainted after modifying its range">
|
||||
<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>two </span><span>three…</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
|
||||
// Force frame paint before modifying the Highlight's range.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
r.setStart(document.body, 0);
|
||||
r.setEnd(document.body, 2);
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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 overlay is correctly invalidated and repainted after adding a range to it">
|
||||
<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>two </span><span>three…</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body, 0);
|
||||
r.setEnd(document.body, 2);
|
||||
let h = new Highlight();
|
||||
CSS.highlights.set("example-highlight", h);
|
||||
|
||||
// Force frame paint before modifying the Highlight.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
h.add(r);
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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 overlay is correctly invalidated and repainted after modifying its priority">
|
||||
<script src="resources/run-after-layout-and-paint.js"></script>
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
::highlight(another-highlight) {
|
||||
background-color: red;
|
||||
color: orange;
|
||||
}
|
||||
</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);
|
||||
let h1 = new Highlight(r);
|
||||
let h2 = new Highlight(r);
|
||||
h1.priority = 1;
|
||||
h2.priority = 2;
|
||||
CSS.highlights.set("example-highlight", h1);
|
||||
CSS.highlights.set("another-highlight", h2);
|
||||
|
||||
// Force frame paint before modifying the Highlight.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
h1.priority = 3;
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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 overlay is correctly invalidated and repainted after inserting a new node inside one of its ranges">
|
||||
<script src="resources/run-after-layout-and-paint.js"></script>
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>two </span><span>three…</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.body, 0);
|
||||
r.setEnd(document.body, 1);
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
let newNode = document.createElement("span");
|
||||
newNode.innerText = "One ";
|
||||
|
||||
// Force frame paint before inserting a new node.
|
||||
runAfterLayoutAndPaint(()=>{
|
||||
document.body.insertBefore(newNode, document.body.firstChild);
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlights are prioritized correctly by changing their .priority (higher priority is painted on top no matter the order of insertion into the HighlightRegistry)">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
::highlight(another-highlight) {
|
||||
background-color: red;
|
||||
color: orange;
|
||||
}
|
||||
</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);
|
||||
let h1 = new Highlight(r);
|
||||
let h2 = new Highlight(r);
|
||||
h1.priority = 2;
|
||||
h2.priority = 1;
|
||||
CSS.highlights.set("example-highlight", h1);
|
||||
CSS.highlights.set("another-highlight", h2);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlights are repainted correctly when changing their priority after adding them to the HighlightRegistry">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
::highlight(another-highlight) {
|
||||
background-color: red;
|
||||
color: orange;
|
||||
}
|
||||
</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);
|
||||
let h1 = new Highlight(r);
|
||||
let h2 = new Highlight(r);
|
||||
CSS.highlights.set("example-highlight", h1);
|
||||
CSS.highlights.set("another-highlight", h2);
|
||||
h1.priority = 1;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<body><span>One two three…</span>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!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-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">
|
||||
<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>
|
||||
let h = new Highlight();
|
||||
h.add(new StaticRange({startContainer: document.body, startOffset: 0, endContainer: document.body, endOffset: 0}));
|
||||
h.add(new StaticRange({startContainer: document.body, startOffset: 1, endContainer: document.body, endOffset: 0}));
|
||||
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>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="StaticRanges crossing both boundaries of a css-contain (i.e. containing it entirely) should be painted">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
#contained {
|
||||
contain: style;
|
||||
}
|
||||
</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}));
|
||||
CSS.highlights.set("example-highlight", h);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!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-001-ref.html">
|
||||
<meta name="assert" value="Highlight is repainted correctly after removing a node included in a StaticRange contained in it (StaticRange not modified)">
|
||||
<style>
|
||||
::highlight(example-highlight) {
|
||||
background-color: yellow;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<body><span>One </span><span>one-point-five </span><span>two </span><span>three…</span>
|
||||
<script>
|
||||
let r = new StaticRange({startContainer: document.body, startOffset: 0, endContainer: document.body, endOffset: 2});
|
||||
CSS.highlights.set("example-highlight", new Highlight(r));
|
||||
document.body.removeChild(document.body.children[1]);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<style>
|
||||
::highlight(foo) {
|
||||
color: blue;
|
||||
background-color: cyan;
|
||||
}
|
||||
</style>
|
||||
<span id='span-iframe'>abc</span>
|
||||
<script>
|
||||
let r = new Range();
|
||||
r.setStart(document.querySelector('#span-iframe'), 0);
|
||||
r.setEnd(document.querySelector('#span-iframe'), 1);
|
||||
CSS.highlights.set('foo', new Highlight(r));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// This is inspired in runAfterLayoutAndPaint() from
|
||||
// third_party/blink/web_tests/resources/run-after-layout-and-paint.js.
|
||||
function runAfterLayoutAndPaint(callback) {
|
||||
// See http://crrev.com/c/1395193/10/third_party/blink/web_tests/http/tests/resources/run-after-layout-and-paint.js
|
||||
// for more discussions.
|
||||
requestAnimationFrame(function() {
|
||||
requestAnimationFrame(function() {
|
||||
callback();
|
||||
});
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue