diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-highlight-api/painting | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-highlight-api/painting')
71 files changed, 1658 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-001-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-001-ref.html new file mode 100644 index 0000000000..b058789f6d --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-001.html new file mode 100644 index 0000000000..82b61ec6de --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-001.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-002-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-002-ref.html new file mode 100644 index 0000000000..d063bbd497 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-002-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<meta charset="utf-8"> +<style> + div { + color: red; + } +</style> +<body><div>abc</div> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-002.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-002.html new file mode 100644 index 0000000000..04b7dadbf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-003-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-003-ref.html new file mode 100644 index 0000000000..b2dccfa59f --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-003-ref.html @@ -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.
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-003.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-003.html new file mode 100644 index 0000000000..210f1a230f --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2-ref.html new file mode 100644 index 0000000000..4ad1de63df --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2.html new file mode 100644 index 0000000000..044cdb5d64 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-ref.html new file mode 100644 index 0000000000..8cb5b69d98 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004.html new file mode 100644 index 0000000000..b67c30b709 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-005.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-005.html new file mode 100644 index 0000000000..f9b728c9c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-005.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-006.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-006.html new file mode 100644 index 0000000000..b4369dcacc --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-006.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-007.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-007.html new file mode 100644 index 0000000000..6cfdac2c7e --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-007.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-008.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-008.html new file mode 100644 index 0000000000..3da1d82ce3 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-008.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-009.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-009.html new file mode 100644 index 0000000000..cee2394d62 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-009.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-010.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-010.html new file mode 100644 index 0000000000..cdd2daf85c --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-010.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-011.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-011.html new file mode 100644 index 0000000000..5eef8508b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-011.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-012.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-012.html new file mode 100644 index 0000000000..cc8bb62e1e --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-012.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-013.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-013.html new file mode 100644 index 0000000000..021f1cb19f --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-013.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-014.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-014.html new file mode 100644 index 0000000000..5313fe0954 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-014.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-015.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-015.html new file mode 100644 index 0000000000..62ce114dfa --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-015.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-016.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-016.html new file mode 100644 index 0000000000..58b580e6b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-016.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-017.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-017.html new file mode 100644 index 0000000000..c3184a986a --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-017.html @@ -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> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-018.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-018.html new file mode 100644 index 0000000000..95bef09bbe --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-018.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-grammar-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-grammar-ref.html new file mode 100644 index 0000000000..d660daf7c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-grammar-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-grammar.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-grammar.html new file mode 100644 index 0000000000..93d2560040 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-grammar.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-selection-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-selection-ref.html new file mode 100644 index 0000000000..5c7bd9361b --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-selection-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-selection.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-selection.html new file mode 100644 index 0000000000..cd5ad36a69 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-selection.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-target-text-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-target-text-ref.html new file mode 100644 index 0000000000..70d6926364 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-target-text-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-target-text.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-target-text.html new file mode 100644 index 0000000000..e55ce783de --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-below-target-text.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-001-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-001-ref.html new file mode 100644 index 0000000000..aa8915c1d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-001-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-001.html new file mode 100644 index 0000000000..240c112c5d --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-001.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-002.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-002.html new file mode 100644 index 0000000000..388457f9cb --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-002.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-003-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-003-ref.html new file mode 100644 index 0000000000..9d80a9f005 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-003-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-003.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-003.html new file mode 100644 index 0000000000..8614d35ed6 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-003.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-004-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-004-ref.html new file mode 100644 index 0000000000..622ea40c80 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-004-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-004.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-004.html new file mode 100644 index 0000000000..d13d75a561 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-004.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-005-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-005-ref.html new file mode 100644 index 0000000000..7a492e32c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-005-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-005.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-005.html new file mode 100644 index 0000000000..d31590c639 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-005.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-006-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-006-ref.html new file mode 100644 index 0000000000..f5a871d0fe --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-006-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-006.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-006.html new file mode 100644 index 0000000000..2b1e88e659 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-iframe-006.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-001-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-001-ref.html new file mode 100644 index 0000000000..0d5385287c --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-001-ref.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-001.html new file mode 100644 index 0000000000..eb5e5e1181 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-001.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-002.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-002.html new file mode 100644 index 0000000000..fbed69392c --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-002.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html new file mode 100644 index 0000000000..cdab7615e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<style> + div { + color: #00000080; + } +</style> +<body> +<div>foobar</div> +</body> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html new file mode 100644 index 0000000000..e449ebf334 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-inheritance-003.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-001.html new file mode 100644 index 0000000000..aef391ec0f --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-001.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-002.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-002.html new file mode 100644 index 0000000000..99271ff7a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-002.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-003.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-003.html new file mode 100644 index 0000000000..d1f8722388 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-003.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-004.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-004.html new file mode 100644 index 0000000000..62f05a84ab --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-004.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-005.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-005.html new file mode 100644 index 0000000000..cabc4c3b9c --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-005.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-006.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-006.html new file mode 100644 index 0000000000..81c2298e13 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-006.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007-ref.html new file mode 100644 index 0000000000..88f3d0f3d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<style> + .highlighted { + background: blue; + } +</style> +<body> + <span class="highlighted">Hello</span> +</body> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007.html new file mode 100644 index 0000000000..f23a869728 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-invalidation-007.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html new file mode 100644 index 0000000000..3c08ad55ae --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<style> + body { + font-size: 3em; + font-weight: bolder; + + } + #affected1 { + color: red; + } + #affected2 { + color: green; + } +</style> +<body><span id="affected1">This should have 'highlight1' style (red).</span><span id="affected2">This should have 'highlight2' style (green).</span>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html new file mode 100644 index 0000000000..0b380574bc --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-001.html @@ -0,0 +1,43 @@ +<!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 '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. + - 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. 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 + */ + + 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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002-ref.html new file mode 100644 index 0000000000..2907681b75 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002-ref.html @@ -0,0 +1,17 @@ +<!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 { + color: red; + background-color: rgba(100, 0, 100, 0.5); + } +</style> +<body><div><span id="affected1">Green on lime.</span><span id="affected2">Red on maroon.</span></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002.html new file mode 100644 index 0000000000..2dda273abf --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-overlapping-highlights-002.html @@ -0,0 +1,53 @@ +<!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">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. + - 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. 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 + */ + + 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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-prioritization-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-prioritization-001.html new file mode 100644 index 0000000000..cc2a53be54 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-prioritization-001.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-prioritization-002.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-prioritization-002.html new file mode 100644 index 0000000000..756368a8e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-prioritization-002.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-001-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-001-ref.html new file mode 100644 index 0000000000..a89d86dc81 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-001-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<meta charset="utf-8"> +<body><span>One two three…</span> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-001.html new file mode 100644 index 0000000000..ee81bb89d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<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 or collapsed should not be painted when they're in a Highlight"> +<style> + ::highlight(example-highlight) { + background-color: yellow; + color: blue; + } +</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})); + CSS.highlights.set("example-highlight", h); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-002.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-002.html new file mode 100644 index 0000000000..43a0b06c35 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<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="A StaticRange crossing a contain boundary should be painted"> +<style> + ::highlight(example-highlight) { + background-color: yellow; + color: blue; + } + #contained { + 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[1], endOffset: 1})); + CSS.highlights.set("example-highlight", h); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-003.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-003.html new file mode 100644 index 0000000000..11de279fd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-staticrange-003.html @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-001-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-001-ref.html new file mode 100644 index 0000000000..568e5f9321 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-001.html new file mode 100644 index 0000000000..df6e5dd32c --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-dynamic-001-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-dynamic-001-ref.html new file mode 100644 index 0000000000..3a713aa844 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-dynamic-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-dynamic-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-dynamic-001.html new file mode 100644 index 0000000000..050c7c77ce --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-decoration-dynamic-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-shadow.tentative.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-shadow.tentative.html new file mode 100644 index 0000000000..b0952dfb9b --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-text-shadow.tentative.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/resources/iframe-code.html b/testing/web-platform/tests/css/css-highlight-api/painting/resources/iframe-code.html new file mode 100644 index 0000000000..a4a1829be2 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/resources/iframe-code.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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/resources/run-after-layout-and-paint.js b/testing/web-platform/tests/css/css-highlight-api/painting/resources/run-after-layout-and-paint.js new file mode 100644 index 0000000000..75d3e279a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-highlight-api/painting/resources/run-after-layout-and-paint.js @@ -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(); + }); + }); +}
\ No newline at end of file |