summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-highlight-api/painting
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-highlight-api/painting')
-rw-r--r--testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2.html2
-rw-r--r--testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020-ref.html26
-rw-r--r--testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020.html32
-rw-r--r--testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021-ref.html15
-rw-r--r--testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021.html29
-rw-r--r--testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001-ref.html17
-rw-r--r--testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html35
7 files changed, 146 insertions, 10 deletions
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
index 0a612d66d1..1b8ff935a6 100644
--- 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
@@ -4,7 +4,7 @@
<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).">
-<meta name="fuzzy" content="0-88;0-1">
+<meta name="fuzzy" content="0-88;0-4">
<style>
::highlight(foo) {
color:blue;
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020-ref.html
new file mode 100644
index 0000000000..92cf04c180
--- /dev/null
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Highlight API Test: Highlighing Ligatures Ref</title>
+<style>
+ @font-face {
+ font-family: 'mplus';
+ src: url('../../../fonts/mplus-1p-regular.woff');
+ }
+ div {
+ font-size: 7em;
+ font-family: mplus, sans-serif;
+ }
+ ::selection {
+ color:green;
+ text-decoration: blue 2px line-through;
+ }
+</style>
+<body><div>fii ffi fff</div>
+<script>
+ let textNode = document.body.firstChild.firstChild;
+
+ let r1 = new Range();
+ r1.setStart(textNode, 1);
+ r1.setEnd(textNode, 9);
+ window.getSelection().addRange(r1);
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020.html
new file mode 100644
index 0000000000..64ae924aa9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlighting Ligatures</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="custom-highlight-painting-020-ref.html">
+<meta name="assert" value="Highlights should split ligatures.">
+<meta name="fuzzy" content="0-128;0-28">
+<style>
+ @font-face {
+ font-family: 'mplus';
+ src: url('../../../fonts/mplus-1p-regular.woff');
+ }
+ ::highlight(foo) {
+ color:green;
+ text-decoration: blue 2px line-through;
+ }
+ div {
+ font-size: 7em;
+ font-family: mplus, serif;
+ }
+</style>
+<body><div>fii ffi fff</div>
+<script>
+ let textNode = document.body.firstChild.firstChild;
+
+ let r1 = new Range();
+ r1.setStart(textNode, 1);
+ r1.setEnd(textNode, 9);
+ let h1 = new Highlight(r1);
+ CSS.highlights.set("foo", h1);
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021-ref.html
new file mode 100644
index 0000000000..1ec68549b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlighting thick text - Reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+ body {
+ -webkit-text-stroke-width: 3px;
+ font-size: 25px;
+ }
+ span {
+ -webkit-text-stroke-width: 0px;
+ background-color: green;
+ }
+</style>
+<body>This<span> thick text </span>should not be highlighted</body>
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021.html
new file mode 100644
index 0000000000..29ee123457
--- /dev/null
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlighting thick text</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-text">
+<link rel="match" href="custom-highlight-painting-021-ref.html">
+<meta name="assert" value="Text with -webkit-text-stroke-width should not be highlighted.">
+<meta name="fuzzy" content="0-128;0-4">
+<style>
+ body {
+ -webkit-text-stroke-width: 3px;
+ font-size: 25px;
+ }
+ ::highlight(foo) {
+ background-color: green;
+ }
+</style>
+<body>This thick text should not be highlighted</body>
+<script>
+ let textNode = document.body.firstChild;
+
+ let r1 = new Range();
+ r1.setStart(textNode, 4);
+ r1.setEnd(textNode, 16);
+
+ let h1 = new Highlight(r1);
+
+ CSS.highlights.set("foo", h1);
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001-ref.html
index b46c679c9f..c2bf7ae7bd 100644
--- a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001-ref.html
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001-ref.html
@@ -2,14 +2,25 @@
<link rel="stylesheet" href="../../css-pseudo/support/highlights.css">
<meta charset="utf-8">
<style>
- :root {
+ #verticalRL {
writing-mode: vertical-rl;
}
-
+ #verticalLR {
+ writing-mode: vertical-lr;
+ }
+ #sidewaysRL {
+ writing-mode: sideways-rl;
+ }
+ #sidewaysLR {
+ writing-mode: sideways-lr;
+ }
.highlighted {
background-color: yellow;
color: blue;
}
</style>
<body>
-<div class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
+<div id="verticalRL" class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
+<div id="verticalLR" class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
+<div id="sidewaysRL" class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
+<div id="sidewaysLR" class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html
index 9fe2bdcd5f..ba25037976 100644
--- a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html
@@ -5,21 +5,44 @@
<link rel="match" href="custom-highlight-painting-vertical-writing-mode-001-ref.html">
<link rel="stylesheet" href="../../css-pseudo/support/highlights.css">
<meta name="assert" value="::highlight overlay is painted correctly when the highlighted text is in a vertical writing mode">
+<meta name="fuzzy" content="0-255;0-18">
<style>
- :root {
+ #verticalRL {
writing-mode: vertical-rl;
}
+ #verticalLR {
+ writing-mode: vertical-lr;
+ }
+ #sidewaysRL {
+ writing-mode: sideways-rl;
+ }
+ #sidewaysLR {
+ writing-mode: sideways-lr;
+ }
::highlight(example-highlight) {
background-color: yellow;
color: blue;
}
</style>
<body>
-<div class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="verticalRL" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="verticalLR" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="sidewaysRL" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="sidewaysLR" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
<script>
- let r = new Range();
- r.setStart(document.querySelector("div"), 0);
- r.setEnd(document.querySelector("div"), 2);
+ let verticalRLRange = new Range();
+ verticalRLRange.setStart(verticalRL, 0);
+ verticalRLRange.setEnd(verticalRL, 2);
+ let verticalLRRange = new Range();
+ verticalLRRange.setStart(verticalLR, 0);
+ verticalLRRange.setEnd(verticalLR, 2);
+ let sidewaysRLRange = new Range();
+ sidewaysRLRange.setStart(sidewaysRL, 0);
+ sidewaysRLRange.setEnd(sidewaysRL, 2);
+ let sidewaysLRRange = new Range();
+ sidewaysLRRange.setStart(sidewaysLR, 0);
+ sidewaysLRRange.setEnd(sidewaysLR, 2);
- CSS.highlights.set("example-highlight", new Highlight(r));
+ CSS.highlights.set("example-highlight",
+ new Highlight(verticalRLRange, verticalLRRange, sidewaysLRRange, sidewaysRLRange));
</script>