diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/forced-colors-mode | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/forced-colors-mode')
103 files changed, 3066 insertions, 0 deletions
diff --git a/testing/web-platform/tests/forced-colors-mode/README.txt b/testing/web-platform/tests/forced-colors-mode/README.txt new file mode 100644 index 0000000000..de185c88ae --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/README.txt @@ -0,0 +1 @@ +This directory is for testing Forced Colors mode implementation. diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-01-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-01-ref.html new file mode 100644 index 0000000000..0817f7b394 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-01-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate reference. +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + forced-color-adjust: none; /* This turns the backplate feature off in + forced colors mode. The backplate is + simulated in testing using a Canvas + background-color behind the text. + */ + line-height: 10px; + text-align: justify; + width: 100px; + } + #a { + background-color: Canvas; + } +</style> +<body> + <div id="a"> + A backplate should be drawn behind the text + <br> + in forced colors mode + <br> + (forced-color-adjust is set to auto.) + </div> + <br><br><br> + <div> + There should NOT be a backplate drawn behind the text + <br> + in forced colors mode + <br> + (forced-color-adjust is set to none.) + </div> + <div> + There should NOT be a backplate drawn behind the text + <br> + in forced colors mode + <br> + (forced-color-adjust is set to preserve-parent-color.) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-01.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-01.html new file mode 100644 index 0000000000..97c8261a4c --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-01.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-01-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + line-height: 10px; + text-align: justify; + width: 100px; + } + #a { + forced-color-adjust: auto; + } + #b { + forced-color-adjust: none; + } + #c { + forced-color-adjust: preserve-parent-color; + } +</style> +<body> + <div id="a"> + A backplate should be drawn behind the text + <br> + in forced colors mode + <br> + (forced-color-adjust is set to auto.) + </div> + <br><br><br> + <div id="b"> + There should NOT be a backplate drawn behind the text + <br> + in forced colors mode + <br> + (forced-color-adjust is set to none.) + </div> + <div id="c"> + There should NOT be a backplate drawn behind the text + <br> + in forced colors mode + <br> + (forced-color-adjust is set to preserve-parent-color.) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-02-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-02-ref.html new file mode 100644 index 0000000000..992ced6893 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-02-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate reference. + Tests that the backplate feature with a varying number of line breaks. +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + forced-color-adjust: none; /* This turns the backplate feature off in + forced colors mode. The backplate is + simulated in testing using a Canvas + background-color behind the text. + */ + line-height: 10px; + text-align: justify; + width: 100px; + } + div { + background-color: Canvas; + } +</style> +<body> + <div> + This text <br> should have <br> its own backplate <br> in forced colors mode. + </div> + <br> + <div> + This text should have its own backplate in forced colors mode: + <br> + two br tags indicates a new paragraph. + <br> + This text should share a backplate with the above text: + <br> + one br tag used. + </div> + <br> + <br> + <br> + <div> + This text should have its own backplate in forced colors mode: + <br> + four br tags indicates a new paragraph. + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-02.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-02.html new file mode 100644 index 0000000000..1643a6eef3 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-02.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests that the backplate feature with a varying number of line breaks. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-02-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + line-height: 10px; + text-align: justify; + width: 100px; + } +</style> +<body> + <span> + This text <br> should have <br> its own backplate <br> in forced colors mode. + </span> + <br> + <br> + <span> + This text should have its own backplate in forced colors mode: + <br> + two br tags indicates a new paragraph. + </span> + <br> + <span> + This text should share a backplate with the above text: + <br> + one br tag used. + </span> + <br> + <br> + <br> + <br> + <span> + This text should have its own backplate in forced colors mode: + <br> + four br tags indicates a new paragraph. + </span> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-03-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-03-ref.html new file mode 100644 index 0000000000..9a4ccff7fe --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-03-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate reference. + Tests the backplate feature behind lists. +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + forced-color-adjust: none; /* This turns the backplate feature off in + forced colors mode. The backplate is + simulated in testing using a Canvas + background-color behind the text. + */ + left: 0%; + line-height: 10px; + text-align: justify; + width: 100px; + } + li { + margin-left: -8px; + } +</style> +<body> + <div> + <li style="background-color: Canvas;"> + There should be a backplate drawn + </div> + <br> + <div> + <li style="background-color: Canvas;"> + behind the first three list items + </div> + <br> + <div> + <li style="background-color: Canvas;"> + in forced colors mode. + </div> + <br> + <div> + <li> + There should be NO backplate drawn + </div> + <br> + <div> + <li> + behind the last three list items + </div> + <br> + <div> + <li> + in forced colors mode. + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-03.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-03.html new file mode 100644 index 0000000000..f8c8f349ba --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-03.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests the backplate feature behind lists. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-03-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + left: 0%; + line-height: 10px; + text-align: justify; + width: 100px; + } + li { + margin-left: -8px; + } + #a { + forced-color-adjust: auto; + } + #b { + forced-color-adjust: none; + } +</style> +<body> + <div id="a"> + <li> + There should be a backplate drawn + </div> + <br> + <div id="a"> + <li> + behind the first three list items + </div> + <br> + <div id="a"> + <li> + in forced colors mode. + </div> + <br> + <div id="b"> + <li> + There should be NO backplate drawn + </div> + <br> + <div id="b"> + <li> + behind the last three list items + </div> + <br> + <div id="b"> + <li> + in forced colors mode. + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-04-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-04-ref.html new file mode 100644 index 0000000000..ddf54c6b8f --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-04-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate reference. + Tests the backplate feature behind links. +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + forced-color-adjust: none; /* This turns the backplate feature off in + forced colors mode. The backplate is + simulated in testing using a Canvas + background-color behind the text. + */ + line-height: 10px; + text-align: justify; + width: 100px; + } + #a { + background-color: Canvas; + } +</style> +<body> + <div id="a"> + This text should have a backplate drawn + <br> + in forced colors mode + <br> + that includes the following link: + <br> + <a href="https://www.wikipedia.org/">LINK</a> + </div> + <br><br><br><br> + <div> + This text should NOT have a backplate drawn + <br> + in forced colors mode + <br> + including for the following link: + <br> + <a href="https://www.wikipedia.org/">LINK</a> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-04.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-04.html new file mode 100644 index 0000000000..be3ab4bd1f --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-04.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests the backplate feature behind links. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-04-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + line-height: 10px; + text-align: justify; + width: 100px; + } + #a { + forced-color-adjust: auto; + } + #b { + forced-color-adjust: none; + } +</style> +<body> + <div id="a"> + This text should have a backplate drawn + <br> + in forced colors mode + <br> + that includes the following link: + <br> + <a href="https://www.wikipedia.org/">LINK</a> + </div> + <br><br><br><br> + <div id="b"> + This text should NOT have a backplate drawn + <br> + in forced colors mode + <br> + including for the following link: + <br> + <a href="https://www.wikipedia.org/">LINK</a> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-05-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-05-ref.html new file mode 100644 index 0000000000..28b6f1888d --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-05-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate reference. + Tests the backplate feature for display inline/relative position. +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + forced-color-adjust: none; /* This turns the backplate feature off in + forced colors mode. The backplate is + simulated in testing using a Canvas + background-color behind the text. + */ + line-height: 10px; + } + li { + display: inline; + position: relative; + } + div { + background: Canvas; + text-align: justify; + width: 110px; + } +</style> +<body> + <div> + <li>The backplate</li> + <li>for all of</li> + <li>the elements</li> + <li>in this list</li> + <li>should create</li> + <li>one single</li> + <li>paragraph</li> + <li>in forced</li> + <li>colors mode.</li> + <li>The backplate</li> + <li>should not be</li> + <li>painted for</li> + <li>each individual</li> + <li>list item</li> + <li>separately.</li> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-05.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-05.html new file mode 100644 index 0000000000..7d8f8057cf --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-05.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests the backplate feature for display inline/relative position. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-05-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + line-height: 10px; + } + li { + display: inline; + position: relative; + } + div { + text-align: justify; + width: 110px; + } +</style> +<body> + <div> + <li>The backplate</li> + <li>for all of</li> + <li>the elements</li> + <li>in this list</li> + <li>should create</li> + <li>one single</li> + <li>paragraph</li> + <li>in forced</li> + <li>colors mode.</li> + <li>The backplate</li> + <li>should not be</li> + <li>painted for</li> + <li>each individual</li> + <li>list item</li> + <li>separately.</li> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-06-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-06-ref.html new file mode 100644 index 0000000000..642bd72da6 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-06-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate reference. + Tests that inline spans with different forced-color-adjust values from their + parent element follow the backplate behavior of that parent in forced colors + mode. +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + forced-color-adjust: none; /* This turns the backplate feature off in + forced colors mode. The backplate is + simulated in testing using a Canvas + background-color behind the text. + */ + line-height: 10px; + text-align: justify; + width: 100px; + } +</style> +<body> + <div> + This text should not have a backplate in forced colors mode. + <br> + This text should not have a backplate in forced colors mode. + </div> + <br> + <br> + <br> + <br> + <div style="background: Canvas;"> + This text should have a backplate in forced colors mode. + <br> + This text should have a backplate in forced colors mode. + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-06.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-06.html new file mode 100644 index 0000000000..49a8429c01 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-06.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests that inline spans with different forced-color-adjust values from their + parent element follow the backplate behavior of that parent in forced colors + mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-06-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + line-height: 10px; + text-align: justify; + width: 100px; + } +</style> +<body> + <div style="forced-color-adjust: none;"> + This text should not have a backplate in forced colors mode. + <br> + <span style="forced-color-adjust: auto"> + This text should not have a backplate in forced colors mode. + </span> + </div> + <br> + <br> + <br> + <br> + <div style="forced-color-adjust: auto;"> + This text should have a backplate in forced colors mode. + <br> + <span style="forced-color-adjust: none"> + This text should have a backplate in forced colors mode. + </span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html new file mode 100644 index 0000000000..6cefe66be2 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate reference. + Tests backplate is drawn when text is located outside the cull rect. + </title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + forced-color-adjust: none; /* This turns the backplate feature off in + forced colors mode. The backplate is + simulated in testing using a Canvas + background-color behind the text. + */ + } + span { + background-color: Canvas; + } +</style> +<body> + <span> + The text below should have a backplate in forced colors mode. + </span> + <div> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <span>This text should have a backplate.</span> + </div> +</body> + +<script> + function scroll() { + window.scrollBy(0, 5000); + } + onload = scroll; +</script> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08.html new file mode 100644 index 0000000000..2049e3e383 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests backplate is drawn when text is located outside the cull rect. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-08-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + } +</style> +<body> + The text below should have a backplate in forced colors mode. + <div> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> + <span>This text should have a backplate.</span> + </div> +</body> + +<script> + function scroll() { + window.scrollBy(0, 5000); + } + onload = scroll; +</script> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-09-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-09-ref.html new file mode 100644 index 0000000000..2bbe08a5d1 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-09-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate reference. + Tests that backplate is not drawn above floats. +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 20px; + forced-color-adjust: none; /* This turns the backplate feature off in forced colors mode. + The backplate is simulated in testing using a background-color + of Canvas behind the text. + */ + line-height: 20px; + text-align: justify; + width: 200px; + } + img { + float: left; + } + div { + background-color: Canvas; + } +</style> +<body> + <div> + <img src="../resources/float-image.jpg" style="width:50px;height:50px;"> + In forced colors mode, the backplate for this paragraph should lie below the + the floating image. + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-09.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-09.html new file mode 100644 index 0000000000..467a23c17c --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-09.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests that backplate is not drawn above floats. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-09-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 20px; + line-height: 20px; + text-align: justify; + width: 200px; + } + img { + float: left; + } +</style> +<body> + <div> + <img src="../resources/float-image.jpg" style="width:50px;height:50px;"> + In forced colors mode, the backplate for this paragraph should lie below the + the floating image. + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-10-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-10-ref.html new file mode 100644 index 0000000000..35eb521b81 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-10-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate reference. + Tests that backplates of overlapping inline boxes do not overlap. +</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + forced-color-adjust: none; /* This turns the backplate feature off in forced colors mode. + The backplate is simulated in testing using a background-color + of Canvas behind the text. + */ + line-height: 10px; + text-align: justify; + width: 100px; + } + div { + background-color: Canvas; + } +</style> +<body> + <div> + <div> + The two backplates should not overlap + </div> + <br> + <div style="margin-top: -25px; z-index: -1;"> + in forced colors mode. + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-10.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-10.html new file mode 100644 index 0000000000..db6c5adc29 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-10.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests that backplates of overlapping inline boxes do not overlap. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-10-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + font-family: Ahem; + font-size: 10px; + line-height: 10px; + text-align: justify; + width: 100px; + } +</style> +<body> + <div> + <div> + The two backplates should not overlap + </div> + <br> + <div style="margin-top: -25px; z-index: -1;"> + in forced colors mode. + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-11-ref.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-11-ref.html new file mode 100644 index 0000000000..727afad6ca --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-11-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests that backplates are not painted behind hidden elements. +</title> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + } +</style> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-11.html b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-11.html new file mode 100644 index 0000000000..a43f79db51 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-11.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title> + Forced colors mode - backplate. + Tests that backplates are not painted behind hidden elements. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced"> +<link rel=match href="forced-colors-mode-backplate-11-ref.html"> +<script src="../../common/reftest-wait.js"></script> +<link rel="preload" as="image" href="../resources/test-image.jpg" onload="takeScreenshot()" /> +<style> + body { + background-image: url("../resources/test-image.jpg"); + } +</style> + +<div style="visibility: hidden;"> + No blackplate should be painted in forced colors mode. +</div> +<div style="visibility: collapse;"> + No blackplate should be painted in forced colors mode. +</div> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-01-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-01-ref.html new file mode 100644 index 0000000000..dbd83a56fe --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-01-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test forced colors mode on table styles reference</title> +<style> + body { + forced-color-adjust: none; + } + table { + border-collapse: collapse; + } + td, th { + border: 1px solid; + border-left-color: CanvasText; + border-right-color: CanvasText; + border-top-color: CanvasText; + forced-color-adjust: none; + padding: 8px; + text-align: left; + } + tr:nth-child(even) { + background-color: Canvas; + color: CanvasText; + forced-color-adjust: none; + } +</style> +<body> + <table> + <tr> + <th>Column1</th> + <th>Column2</th> + <th>Column3</th> + </tr> + <tr> + <td>Entry1</td> + <td>Entry1</td> + <td>Entry1</td> + </tr> + <tr> + <td>Entry2</td> + <td>Entry2</td> + <td>Entry2</td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-01.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-01.html new file mode 100644 index 0000000000..9c0ef0b309 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-01.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test forced colors mode on table styles</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-01-ref.html"> +<style> + table { + border-collapse: collapse; + } + + td, th { + border: 1px solid; + border-bottom-color: black !important; + border-left-color: purple !important; + border-right-color: orange !important; + border-top-color: green !important; + padding: 8px; + text-align: left; + } + + tr:nth-child(even) { + background-color: blue !important; + color: red !important; + } +</style> +<body> + <table> + <tr> + <th>Column1</th> + <th>Column2</th> + <th>Column3</th> + </tr> + <tr> + <td>Entry1</td> + <td>Entry1</td> + <td>Entry1</td> + </tr> + <tr> + <td>Entry2</td> + <td>Entry2</td> + <td>Entry2</td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-02-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-02-ref.html new file mode 100644 index 0000000000..39b7724b67 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-02-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - style overrides for text reference.</title> +<style> + body { + background-color: lightblue; + } + #a { + background-color: Canvas; + border: 25px solid CanvasText; + box-shadow: 2px 2px Canvas; + color: CanvasText; + forced-color-adjust: none; + margin: 25px; + padding: 25px; + text-shadow: 1px 1px Canvas; + width: 300px; + } + #b { + background-color: lightgreen; + border: 25px solid green; + box-shadow: 2px 2px purple; + color: orange; + forced-color-adjust: none; + margin: 25px; + padding: 25px; + text-shadow: 1px 1px gray; + width: 300px; + } +</style> +<body> + <div id="a"> + The colors and shadows of this text and text box should be overridden when in + forced colors mode (forced-color-adjust is set to auto.) + </div> + <div id="b"> + The colors and shadows of this text and text box should NOT be overridden when in + forced colors mode (forced-color-adjust is set to none.) + </div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-02.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-02.html new file mode 100644 index 0000000000..414d3c1d4a --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-02.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - style overrides for text.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-02-ref.html"> +<style> + body { + background-color: lightblue; + } + #a { + background-color: lightgreen; + border: 25px solid green; + box-shadow: 2px 2px purple; + color: orange; + forced-color-adjust: auto; + margin: 25px; + padding: 25px; + text-shadow: 1px 1px gray; + width: 300px; + } + #b { + background-color: lightgreen; + border: 25px solid green; + box-shadow: 2px 2px purple; + color: orange; + forced-color-adjust: none; + margin: 25px; + padding: 25px; + text-shadow: 1px 1px gray; + width: 300px; + } +</style> +<body> + <div id="a"> + The colors and shadows of this text and text box should be overridden when in + forced colors mode (forced-color-adjust is set to auto.) + </div> + <div id="b"> + The colors and shadows of this text and text box should NOT be overridden when in + forced colors mode (forced-color-adjust is set to none.) + </div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-03.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-03.html new file mode 100644 index 0000000000..9e28c4fdb1 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-03.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - highlighted text.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + body { + color: red; + } + + #a { + background-color: purple; + color: orange; + forced-color-adjust: auto; + } + #b { + background-color: purple; + color: orange; + forced-color-adjust: none; + } + #c { + background-color: purple; + color: orange; + forced-color-adjust: preserve-parent-color; + } + #d { + background-color: purple; + color: currentColor; + forced-color-adjust: preserve-parent-color; + } + #e { + background-color: purple; + color: inherit; + forced-color-adjust: preserve-parent-color; + } + #f { + background-color: currentColor; + forced-color-adjust: preserve-parent-color; + } + #g::visited { + color: orange; + } + #h, #i { + forced-color-adjust: preserve-parent-color; + } + #h:visited { + color: inherit; + } +</style> +<body> + This is regular body text. It should be CanvasText in forced colors mode. + <br> + <mark id="a"> + This text should be black in forced colors mode because forced-color-adjust + is auto. The background color should be yellow because the default + highlighted colors should not be overridden in forced colors mode. + </mark> + <br> + <mark id="b"> + This text should be orange in forced colors mode because + forced-color-adjust is none. The background color should be purple because + forced-color-adjust is none. + </mark> + <br> + <mark id="c"> + This text should be orange in forced colors mode because + although forced-color-adjust is preserve-parent-color, the color value is + neither currentColor nor inherited. The background color should be purple + because preserve-parent-color behaves like none for all properties except + color. + </mark> + <br> + <mark id="d"> + This text should be CanvasText in forced colors mode because + forced-color-adjust is preserve-parent-color and we are inheriting from its + parent. The background color should be purple because preserve-parent-color + behaves like none for all properties except color. + </mark> + <br> + <mark id="e"> + This text should be CanvasText in forced colors mode because + forced-color-adjust is preserve-parent-color and we are inheriting from its + parent. The background color should be purple because preserve-parent-color + behaves like none for all properties except color. + </mark> + <br> + <mark id="f"> + This text should be CanvasText in forced colors mode because + forced-color-adjust is preserve-parent-color and we are inheriting from its + parent. The background color should also be CanvasText because although + forced-color-adjust behaves like none, the computed value of currentColor is + CanvasText. + </mark> + <br> + <a href="" id="g">Should be VisitedText, and not orange. + <a href="" id="h">Should be VisitedText, and not orange.</a> + <a href="" id="i">Should be VisitedText, and not orange.</a> + </a> +</body> + +<script> + test(function(){ + let body = document.querySelector('body'); + + assert_equals(getComputedStyle(a).color, "rgb(0, 0, 0)"); + + assert_equals(getComputedStyle(b).color, "rgb(255, 165, 0)"); + + assert_equals(getComputedStyle(c).color, "rgb(255, 165, 0)"); + + assert_equals(getComputedStyle(d).color, getComputedStyle(body).color); + + assert_equals(getComputedStyle(e).color, getComputedStyle(body).color); + + assert_equals(getComputedStyle(f).color, getComputedStyle(body).color); + + assert_equals(getComputedStyle(g).color, "rgb(0, 0, 238)"); + + assert_equals(getComputedStyle(h).color, getComputedStyle(g).color); + + assert_equals(getComputedStyle(i).color, getComputedStyle(g).color); + + assert_equals(getComputedStyle(a).backgroundColor, "rgb(255, 255, 0)"); + + assert_equals(getComputedStyle(b).backgroundColor, "rgb(128, 0, 128)"); + + assert_equals(getComputedStyle(c).backgroundColor, "rgb(128, 0, 128)") + + assert_equals(getComputedStyle(d).backgroundColor, "rgb(128, 0, 128)"); + + assert_equals(getComputedStyle(e).backgroundColor, "rgb(128, 0, 128)"); + + assert_equals(getComputedStyle(f).backgroundColor, getComputedStyle(f).color); + }, "Checks that default highlighted text style does not get overridden in forced colors mode."); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-05-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-05-ref.html new file mode 100644 index 0000000000..e2fffecd9c --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-05-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - link color reference.</title> +<style> + a { + color: LinkText; + forced-color-adjust: none; + } +</style> +<body> + <p> + <a href="https://www.wikipedia.org" id="link"> + This link color should be overridden when forced colors mode is enabled. + </a> + </p> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-05.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-05.html new file mode 100644 index 0000000000..6078d3a640 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-05.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - link color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-05-ref.html"> +<style> + a { + color: rgb(255, 0, 0); + } +</style> +<body> + <p> + <a href="https://www.wikipedia.org" id="link"> + This link color should be overridden when forced colors mode is enabled. + </a> + </p> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-06-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-06-ref.html new file mode 100644 index 0000000000..9af878e25b --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-06-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - iframe reference. + Test that styles are overridden inside iframes in forced colors mode. +</title> +<body> + <iframe src="forced-colors-mode-02-ref.html" width="500" height="500"></iframe> +</body> +</html> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-06.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-06.html new file mode 100644 index 0000000000..fc54186aac --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-06.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - iframe. + Test that styles are overridden inside iframes in forced colors mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-06-ref.html"> +<body> + <iframe src="forced-colors-mode-02.html" width="500" height="500"></iframe> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-07-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-07-ref.html new file mode 100644 index 0000000000..06d199ef0b --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-07-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - transparent colors reference.</title> +<style> + p { + color: CanvasText; + forced-color-adjust: none; + } + div { + forced-color-adjust: none; + } +</style> +<body> + <div style="background-color: Canvas;"> + <p> + The text color should be overridden, and the background color of the + div element should also be overridden in forced colors mode. + </p> + </div> + <div style="background-color: transparent;"> + <p> + The text color should be overridden, but the background color of the + div element should remain transparent in forced colors mode. + </p> + </div> + <div style="background-color: rgba(0, 0, 0, 0);"> + <p> + The text color should be overridden, but the background color of the + div element should remain transparent in forced colors mode. + </p> + </div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-07.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-07.html new file mode 100644 index 0000000000..765868a2df --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-07.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - transparent colors.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-07-ref.html"> +<style> + p { + color: transparent; + } +</style> +<body> + <div style="background-color: rgb(0, 0, 255);"> + <p> + The text color should be overridden, and the background color of the + div element should also be overridden in forced colors mode. + </p> + </div> + <div style="background-color: transparent;"> + <p> + The text color should be overridden, but the background color of the + div element should remain transparent in forced colors mode. + </p> + </div> + <div style="background-color: rgba(0, 0, 0, 0);"> + <p> + The text color should be overridden, but the background color of the + div element should remain transparent in forced colors mode. + </p> + </div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-08-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-08-ref.html new file mode 100644 index 0000000000..479ead11aa --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-08-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - outline and column color reference.</title> +<style> + h1 { + forced-color-adjust: none; + outline-color: CanvasText; + outline-style: solid; + column-count: 3; + column-gap: 40px; + column-rule-color: CanvasText; + column-rule-style: solid; + } +</style> +<body> + <h1> + The outline-color and column-rule-color should be blue when forced colors + mode is off and CanvasText in forced colors mode. + </h1> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-08.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-08.html new file mode 100644 index 0000000000..a8819743fe --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-08.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - outline and column color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-08-ref.html"> +<style> + h1 { + outline-color: rgb(0, 0, 255); + outline-style: solid; + column-count: 3; + column-gap: 40px; + column-rule-color: rgb(0, 0, 255); + column-rule-style: solid; + } +</style> +<body> + <h1> + The outline-color and column-rule-color should be blue when forced colors + mode is off and CanvasText in forced colors mode. + </h1> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-09.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-09.html new file mode 100644 index 0000000000..16ca8a4610 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-09.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + Forced colors mode - forced-colors media query. + Tests that styles defined inside or outside a forced-colors media query are + overridden in forced colors mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @media (forced-colors) { + p { + color: rgb(0, 0, 255); + } + } + p { + color: rgb(0, 0, 255); + } +</style> +<body> + <p id="p"> + This text should NOT be blue forced colors mode. + </p> +</body> + +<script> + test(function() { + assert_not_equals(getComputedStyle(p).color, "rgb(0, 0, 255)"); + }, "Checks that styles defined inside/outside forced-colors are overridden in forced colors mode."); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-10.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-10.html new file mode 100644 index 0000000000..765013d913 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-10.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + Forced colors mode - forced-colors media query. + Tests that styles defined inside/outside forced-color media query + are preserved in forced colors mode if forced-color-adjust is none + and that the ordering of styles is preserved. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + p { + background-color: rgb(0, 128, 0); + color: rgb(0, 0, 255); + forced-color-adjust: none; + } + @media (forced-colors) { + p { + background-color: rgb(0, 0, 255); + color: rgb(0, 128, 0); + } + } +</style> +<body> + <p id="p"> + This text should be green in forced colors mode. + </p> +</body> + +<script> + test(function() { + assert_equals(getComputedStyle(p).backgroundColor, "rgb(0, 0, 255)"); + assert_equals(getComputedStyle(p).color, "rgb(0, 128, 0)"); + }, "Checks that styles defined inside/outside forced-colors are preserved in forced colors mode if forced-color-ajust is none."); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-11.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-11.html new file mode 100644 index 0000000000..5fa8ba4524 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-11.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + Forced colors mode - forced-colors media query. + Tests that styles defined inside forced-color media query + are preserved in forced colors mode if forced-color-adjust + is none. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @media (forced-colors: none) { + p { + background-color: rgb(255, 0, 0); + color: rgb(255, 255, 255); + } + } + @media (forced-colors: active) { + p { + background-color: rgb(0, 0, 255); + color: rgb(0, 128, 0); + forced-color-adjust: none; + } + } +</style> +</head> +<body> + <p id="p"> + This text should be green in forced colors mode. + </p> +</body> + +<script> + test(function() { + assert_equals(getComputedStyle(p).backgroundColor, "rgb(0, 0, 255)"); + assert_equals(getComputedStyle(p).color, "rgb(0, 128, 0)"); + }, "Checks that styles defined in forced-colors are preserved in forced colors mode."); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-14-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-14-ref.html new file mode 100644 index 0000000000..a1dc6851c9 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-14-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + Forced colors mode - active selection reference. +</title> +<style> + span { + background-color: Highlight; + color: HighlightText; + display: inline-block; + forced-color-adjust: none; + } + #adjust-none { + background-color: rgba(255, 0, 0, 0.99); + color: blue; + } +</style> +<body> + <span class="select" id="adjust-none">AAA</span> + <br> + <span class="select">AAA</span> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-14.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-14.html new file mode 100644 index 0000000000..3ecc082d7b --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-14.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + Forced colors mode - active selection. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> +<link rel=match href="forced-colors-mode-14-ref.html"> +<style> + br::selection { + background-color: transparent; + forced-color-adjust: none; + } + span { + /* inline-block to ensure the selection bounding rectangle matches that of the + span. This allows us to test selection using a reference test. */ + display: inline-block; + } + .select::selection { + background-color: rgba(255, 0, 0, 0.99); /* alpha < 1 so that we don't blend the background color with white. */ + color: blue; + } + #adjust-none { + forced-color-adjust: none; + } + #adjust-none-on-highlight::selection { + forced-color-adjust: none; + } + + <!-- + " + The forced-color-adjust property cannot be set on highlight pseudo-elements; + however a highlight pseudo-element must honor any forced colors mode applied + to its originating element (and is therefore subject to the control of the + originating element’s forced-color-adjust value). + " + coming from + https://www.w3.org/TR/css-pseudo-4/#highlight-styling + --> + +</style> +<body> + <div id="adjust-none"> + <span class="select">AAA</span> + </div> + <span id="adjust-none-on-highlight" class="select">AAA</span> +</body> + +<script> + var node1 = document.getElementsByClassName('select')[0].firstChild; + var node2 = document.getElementsByClassName('select')[1].firstChild; + var range = document.createRange(); + range.setStart(node1, 0); + range.setEnd(node2, node2.length); + window.getSelection().addRange(range); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-17-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-17-ref.html new file mode 100644 index 0000000000..125c436412 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-17-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - text decoration and emphasis color reference.</title> +<style> + p { + forced-color-adjust: none; + text-decoration: underline; + text-decoration-color: CanvasText; + text-emphasis: '*' CanvasText; + -webkit-text-emphasis: '*' CanvasText; + } +</style> +<body> + <p> + The text decoration and emphasis color for this text should have a + CanvasText color in forced colors mode. + </p> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-17.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-17.html new file mode 100644 index 0000000000..97dd369385 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-17.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - text decoration and emphasis color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-17-ref.html"> +<style> + p { + text-decoration: underline; + text-decoration-color: red; + text-emphasis: '*' blue; + -webkit-text-emphasis: '*' blue; + } +</style> +<body> + <p> + The text decoration and emphasis color for this text should have a + CanvasText color in forced colors mode. + </p> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-18-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-18-ref.html new file mode 100644 index 0000000000..dd069c1874 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-18-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - svg. + Only foreignObject svg elements should have styles + overridden in forced colors mode. +</title> +<style> + svg, text, foreignObject { + forced-color-adjust: none; + } +</style> +<body> + <svg height="600" width="600"> + <text x="0" y="15" fill="red" stroke="blue"> + This text should have a red fill and blue stroke color in + forced colors mode. + </text> + <rect x="0" height="60" y="30" width="180" style="fill: red; stroke: blue;"/> + <foreignObject x="20" y="100" width="160" height="160"> + <div xmlns="http://www.w3.org/1999/xhtml" style="color: CanvasText;"> + This text should be CanvasText in forced colors mode. + </div> + <svg height="20" width="20"> + <rect x="0" height="20" y="0" width="20" style="fill: green; stroke: purple;"/> + </svg> + </foreignObject> + </svg> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-18.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-18.html new file mode 100644 index 0000000000..6b415f7658 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-18.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - svg. + Only foreignObject svg elements should have styles + overridden in forced colors mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-18-ref.html"> +<body> + <svg height="600" width="600" style="color: orange"> + <text x="0" y="15" fill="red" stroke="blue"> + This text should have a red fill and blue stroke color in + forced colors mode. + </text> + <rect x="0" height="60" y="30" width="180" style="fill: red; stroke: blue;"/> + <foreignObject x="20" y="100" width="160" height="160" style="color: blue;"> + <div xmlns="http://www.w3.org/1999/xhtml"> + This text should be CanvasText in forced colors mode. + </div> + <svg height="20" width="20"> + <rect x="0" height="20" y="0" width="20" style="fill: green; stroke: purple;"/> + </svg> + </foreignObject> + </svg> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-19-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-19-ref.html new file mode 100644 index 0000000000..8d25ec5009 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-19-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + Forced colors mode reference. + Tests that inline images are ignored in forced colors mode when + forced-color-adjust is auto. +</title> +<style> + body { + forced-color-adjust: none; + } + div { + display: inline; + } + #adjustnone { + background-image: + url("resources/test-image.jpg"); + } +</style> +<body> + <div> + The background image behind this text should be ignored in forced colors + mode. + </div> + <div id="adjustnone"> + The background image behind this text should NOT be ignored in forced + colors mode. + </div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-19.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-19.html new file mode 100644 index 0000000000..5c4a09e422 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-19.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> + Forced colors mode. + Tests that inline images are ignored in forced colors mode when + forced-color-adjust is auto. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-19-ref.html"> +<style> + div { + background-image: url("resources/test-image.jpg"); + display: inline; + } + #adjustnone { + forced-color-adjust: none; + } +</style> +<body> + <div> + The background image behind this text should be ignored in forced colors + mode. + </div> + <div id="adjustnone"> + The background image behind this text should NOT be ignored in forced + colors mode. + </div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-20.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-20.html new file mode 100644 index 0000000000..b0cf9e2b49 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-20.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - alpha channel. + Tests that the alpha channel for background colors are preserved in forced + colors mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + body { + background-color: Canvas; + } + div { + background-color: rgba(114, 173, 218, .3); + } +</style> +<body id="body"> + <div id="div"> + Background colors should maintain their alpha channels in forced + colors mode. + </div> +</body> + +<script> + var body_color = getComputedStyle(body).backgroundColor; + var expected_div_color = body_color.replace(')', ', 0.3)').replace('rgb(', 'rgba('); + test(function(){ + assert_equals(getComputedStyle(div).backgroundColor, expected_div_color); + }, "Checks that background color alpha channels are preserved in forced colors mode."); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-21.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-21.html new file mode 100644 index 0000000000..975bfc6d09 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-21.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - alpha channel. + Tests that the alpha channel for background colors are preserved in forced + colors mode at the root node. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + body { + background-color: rgba(114, 173, 218, .3); + } + div { + background-color: Canvas; + } +</style> +<body id="body"> + <div id="div"> + Background colors should maintain their alpha channels in forced + colors mode. + </div> +</body> + +<script> + var div_color = getComputedStyle(div).backgroundColor; + var expected_div_color = div_color.replace(')', ', 0.3)').replace('rgb(', 'rgba('); + test(function(){ + assert_equals(getComputedStyle(body).backgroundColor, expected_div_color); + }, "Checks that background color alpha channels are preserved in forced colors mode at the root node."); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-23-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-23-ref.html new file mode 100644 index 0000000000..af36e40f18 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-23-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - non-inherited cache reference. + Ensures that forced colors styles don't get overridden by non-inherited + cached values. +</title> +<style> + body { + forced-color-adjust: none; + } + #a { + color: CanvasText; + } + #b { + background: rgb(0, 128, 0); + box-shadow: 5px 10px rgb(255, 255, 0); + color: rgb(0, 0, 255); + } +</style> +<body> + <div> + <span id="a">text</span> + </div> + <div> + <span id="b">text</span> + </div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-23.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-23.html new file mode 100644 index 0000000000..20519ea181 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-23.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - non-inherited cache. + Ensures that forced colors styles don't get overridden by non-inherited + cached values. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-23-ref.html"> +<style> + div span{ + background: rgb(0, 128, 0); + box-shadow: 5px 10px rgb(255, 255, 0); + color: rgb(0, 0, 255); + } + #a { + forced-color-adjust: auto; + } + #b { + forced-color-adjust: none; + } +</style> +<body> + <div id="a"> + <span>text</span> + </div> + <div id="b"> + <span>text</span> + </div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-25-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-25-ref.html new file mode 100644 index 0000000000..9c626ae768 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-25-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - atomic inline reference. + Ensures that background images are not overridden for atomic inlines. +</title> +<style> + body { + forced-color-adjust: none; + } + div { + background-image: url("resources/test-image.jpg"); + height: 150px; + width: 150px; + } +</style> +<body> + <p>Four images should appear below with forced colors mode enabled and disabled.</p> + <div style="display: inline-block;"></div> + <div style="display: inline-flex;"></div> + <div style="display: inline-grid;"></div> + <div style="display: inline-table;"></div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-25.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-25.html new file mode 100644 index 0000000000..ea1f973f04 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-25.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - atomic inline. + Ensures that background images are not overridden for atomic inlines. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-25-ref.html"> +<style> + div { + background-image: url("resources/test-image.jpg"); + height: 150px; + width: 150px; + } +</style> +<body> + <p>Four images should appear below with forced colors mode enabled and disabled.</p> + <div style="display: inline-block;"></div> + <div style="display: inline-flex;"></div> + <div style="display: inline-grid;"></div> + <div style="display: inline-table;"></div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-26-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-26-ref.html new file mode 100644 index 0000000000..617d425e0a --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-26-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - fill/stroke. +</title> +<style> + body { + forced-color-adjust: none; + } +</style> +<body> + The triangle below should NOT get overridden in forced colors mode. + <svg height="200" width="350"> + <path fill="red" stroke="blue" d="M150 0 L75 200 L225 200 Z" /> + </svg> + The triangle below should be currentColor in forced colors mode. + <svg height="200" width="350"> + <path fill="currentColor" stroke="currentColor" d="M150 0 L75 200 L225 200 Z" /> + </svg> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-26.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-26.html new file mode 100644 index 0000000000..5379564563 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-26.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - fill/stroke. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-26-ref.html"> +<style> + div { + fill: red; + stroke: blue; + } +</style> +<body> + <div> + The triangle below should NOT get overridden in forced colors mode. + <svg height="200" width="350"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> + The triangle below should be currentColor in forced colors mode. + <svg height="200" width="350" style="forced-color-adjust: auto;"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> + </div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-27.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-27.html new file mode 100644 index 0000000000..5a42f947ad --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-27.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - html/head elements. + Tests that the color properties are overridden for html/head elements and not + just for the body. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + html { + color: red; + } + head { + color: blue; + } + div { + color: CanvasText; + forced-color-adjust: none; + } +</style> +<div> + The color properties for the head and html elements should get updated in + Forced Colors Mode. +</div> +<script> + var div_color = getComputedStyle(document.querySelector('div')).color; + var html_color = getComputedStyle(document.querySelector('html')).color; + var head_color = getComputedStyle(document.querySelector('head')).color; + + test(function(){ + assert_equals(html_color, div_color); + assert_equals(head_color, div_color); + }, "Checks that html/head color is overridden to CanvasText."); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-28-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-28-ref.html new file mode 100644 index 0000000000..9792073004 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-28-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - background-image. +</title> +<style> + body { + forced-color-adjust: none; + } + div { + height: 20px; + width: 10px; + } + #div2, #div3 { + background-image: url("resources/test-image.jpg"); + } +</style> +<body> + The background-image should be reverted in Forced Colors Mode unless the value + is a url() function. + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + <div id="div4"></div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-28.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-28.html new file mode 100644 index 0000000000..7e2dfefadc --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-28.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - background-image. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-28-ref.html"> +<style> + :root { + --url-image: url("resources/test-image.jpg"); + } + div { + height: 20px; + width: 10px; + } + #div1 { + background-image: var(--url-image); + background-image: linear-gradient(red, yellow); + } + #div2 { + background-image: linear-gradient(red, yellow); + background-image: var(--url-image); + } + #div3 { + background-image: var(--url-image); + } + #div4 { + background-image: linear-gradient(red, yellow); + } +</style> +<body> + The background-image should be reverted in Forced Colors Mode unless the value + is a url() function. + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + <div id="div4"></div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-29-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-29-ref.html new file mode 100644 index 0000000000..825f63ae85 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-29-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test forced colors mode on table styles with sys colors</title> +<style> + table { + border-collapse: collapse; + forced-color-adjust: none; + } + td, th { + border: 1px solid LinkText; + padding: 8px; + text-align: left; + } + tr:nth-child(even) { + background-color: CanvasText; + } + tr:nth-child(odd) { + color: Canvas; + text-decoration: underline; + text-decoration-color: LinkText; + text-emphasis: '*' LinkText; + -webkit-text-emphasis: '*' LinkText; + } +</style> +<table> + <tr> + <th>Column</th> + <th>Column</th> + <th>Column</th> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>Entry</td> + <td>Entry</td> + <td>Entry</td> + </tr> +</table>
\ No newline at end of file diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-29.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-29.html new file mode 100644 index 0000000000..794cca771f --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-29.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test forced colors mode on table styles with sys colors</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-29-ref.html"> +<style> + table { + border-collapse: collapse; + } + td, th { + border: 1px solid LinkText; + padding: 8px; + text-align: left; + } + tr:nth-child(even) { + background-color: CanvasText; + } + tr:nth-child(odd) { + color: Canvas; + text-decoration: underline; + text-decoration-color: LinkText; + text-emphasis: '*' LinkText; + -webkit-text-emphasis: '*' LinkText; + } +</style> +<table> + <tr> + <th>Column</th> + <th>Column</th> + <th>Column</th> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>Entry</td> + <td>Entry</td> + <td>Entry</td> + </tr> +</table> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-30-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-30-ref.html new file mode 100644 index 0000000000..6029573933 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-30-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - fill/stroke with sys colors. +</title> +<style> + div { + fill: LinkText; + forced-color-adjust: none; + stroke: Link; + } +</style> +<div> + The triangle below should preserve the LinkText and Link fill/stroke colors + in forced colors mode. + <svg height="600" width="600"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> +</div> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-30.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-30.html new file mode 100644 index 0000000000..2f2a5e2e12 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-30.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - fill/stroke with sys colors. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-30-ref.html"> +<style> + div { + fill: LinkText; + stroke: Link; + } +</style> +<div> + The triangle below should preserve the LinkText and Link fill/stroke colors + in forced colors mode. + <svg height="600" width="600"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> +</div> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-31-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-31-ref.html new file mode 100644 index 0000000000..93d4045978 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-31-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - outline and column color with sys colors.</title> +<style> + h1 { + forced-color-adjust: none; + outline-color: LinkText; + outline-style: solid; + column-count: 3; + column-gap: 40px; + column-rule-color: LinkText; + column-rule-style: solid; + } +</style> +<h1> + The outline-color and column-rule-color should be LinkText when forced colors + mode is enabled. +</h1> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-31.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-31.html new file mode 100644 index 0000000000..ba338c1e0c --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-31.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - outline and column color with sys colors.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-31-ref.html"> +<style> + :root { + --hc-color: LinkText; + } + h1 { + outline-color: var(--hc-color); + outline-style: solid; + column-count: 3; + column-gap: 40px; + column-rule-color: var(--hc-color); + column-rule-style: solid; + } +</style> +<h1> + The outline-color and column-rule-color should be LinkText when forced colors + mode is enabled. +</h1> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-33-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-33-ref.html new file mode 100644 index 0000000000..ae7148ba8e --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-33-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test forced colors mode :visited colors</title> +<style> + a { + background-color: Canvas; + border: 1px solid VisitedText; + color: VisitedText; + forced-color-adjust: none; + text-decoration: line-through; + text-decoration-color: VisitedText; + text-emphasis: '*' VisitedText; + -webkit-text-emphasis: '*' VisitedText; + } +</style> +<a href="">Visited link.</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-33.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-33.html new file mode 100644 index 0000000000..17299efa2b --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-33.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test forced colors mode :visited colors</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-33-ref.html"> +<style> + a { + background-color: white; + border: 1px solid; + text-decoration: line-through; + text-emphasis: '*'; + -webkit-text-emphasis: '*'; + } + a:visited { + background-color: orange; + border: yellow; + color: red; + text-decoration-color: purple; + text-emphasis: blue; + -webkit-text-emphasis: blue; + } +</style> +<a href="">Visited link.</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-34-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-34-ref.html new file mode 100644 index 0000000000..b317d2f440 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-34-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test forced colors mode :visited colors with sys colors</title> +<style> + a { + background-color: CanvasText; + border: 1px solid GrayText; + color: GrayText; + forced-color-adjust: none; + text-decoration: line-through; + text-decoration-color: GrayText; + text-emphasis: '*' GrayText; + -webkit-text-emphasis: '*' GrayText; + } +</style> +<a href="">Visited link.</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-34.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-34.html new file mode 100644 index 0000000000..f4ec066e30 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-34.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test forced colors mode :visited colors with sys colors</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-34-ref.html"> +<style> + a { + background-color: white; + border: 1px solid; + text-decoration: line-through; + text-emphasis: '*'; + -webkit-text-emphasis: '*'; + } + a:visited { + background-color: CanvasText; + border: GrayText; + color: GrayText; + text-decoration-color: GrayText; + text-emphasis: GrayText; + -webkit-text-emphasis: GrayText; + } +</style> +<a href="">Visited link.</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-35-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-35-ref.html new file mode 100644 index 0000000000..2b397e92f2 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-35-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - :visited fill/stroke. +</title> +<style> + a { + color: VisitedText; + forced-color-adjust: none; + } +</style> +<a href=""> + The triangle below should NOT get overridden in forced colors mode. + <svg height="200" width="350"> + <path fill="blue" stroke="green" d="M150 0 L75 200 L225 200 Z" /> + </svg> + The triangle below should be currentColor in forced colors mode. + <svg height="200" width="350"> + <path fill="currentColor" stroke="currentColor" d="M150 0 L75 200 L225 200 Z" /> + </svg> +</a>
\ No newline at end of file diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-35.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-35.html new file mode 100644 index 0000000000..5d80e80418 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-35.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - :visited fill/stroke. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-35-ref.html"> +<style> + a { + fill: CurrentColor; + stroke: CurrentColor; + } + a:visited { + fill: blue; + stroke: green; + } +</style> +<a href=""> + The triangle below should NOT get overridden in forced colors mode. + <svg height="200" width="350"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> + The triangle below should be currentColor in forced colors mode. + <svg height="200" width="350" style="forced-color-adjust: auto;"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> +</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-36-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-36-ref.html new file mode 100644 index 0000000000..838b10da95 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-36-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - :visited fill/stroke with sys colors. +</title> +<style> + a { + fill: CanvasText; + forced-color-adjust: none; + stroke: LinkText; + } +</style> +<a href=""> + The triangle below should preserve the CanvasText/LinkText fill/stroke colors + in forced colors mode. + <svg height="600" width="600"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> +</a>
\ No newline at end of file diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-36.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-36.html new file mode 100644 index 0000000000..0fd90810dc --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-36.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - :visited fill/stroke with sys colors. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-36-ref.html"> +<style> + a { + fill: Canvas; + stroke: Canvas; + } + a:visited { + fill: CanvasText; + stroke: LinkText; + } +</style> +<a href=""> + The triangle below should preserve the CanvasText/LinkText fill/stroke colors + in forced colors mode. + <svg height="600" width="600"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> +</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-37-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-37-ref.html new file mode 100644 index 0000000000..a2cc4b7efe --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-37-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - :visited outline and column color.</title> +<style> + a { + forced-color-adjust: none; + outline-color: VisitedText; + outline-style: solid; + column-count: 3; + column-gap: 40px; + column-rule-color: VisitedText; + column-rule-style: solid; + } +</style> +<a href=""> + The outline-color and column-rule-color should be overridden when forced colors + mode is enabled. +</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-37.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-37.html new file mode 100644 index 0000000000..80e06ed870 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-37.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - :visited outline and column color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-37-ref.html"> +<style> + :root { + --hc-color: red; + } + a { + outline-style: solid; + column-count: 3; + column-gap: 40px; + column-rule-style: solid; + } + a:visited { + outline-color: var(--hc-color); + column-rule-color: var(--hc-color); + } +</style> +<a href=""> + The outline-color and column-rule-color should be overridden when forced colors + mode is enabled. +</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-38-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-38-ref.html new file mode 100644 index 0000000000..e72a73fcef --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-38-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - :visited outline and column color with sys colors.</title> +<style> + a { + forced-color-adjust: none; + outline-color: GrayText; + outline-style: solid; + column-count: 3; + column-gap: 40px; + column-rule-color: GrayText; + column-rule-style: solid; + } +</style> +<a href=""> + The outline-color and column-rule-color should be GrayText when forced colors + mode is enabled. +</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-38.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-38.html new file mode 100644 index 0000000000..3179aaf4b9 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-38.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - :visited outline and column color with sys colors.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-38-ref.html"> +<style> + :root { + --hc-color: GrayText; + } + a { + outline-style: solid; + column-count: 3; + column-gap: 40px; + column-rule-style: solid; + } + a:visited { + outline-color: var(--hc-color); + column-rule-color: var(--hc-color); + } +</style> +<a href=""> + The outline-color and column-rule-color should be GrayText when forced colors + mode is enabled. +</a> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-39-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-39-ref.html new file mode 100644 index 0000000000..df6de6eda2 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-39-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - pseudo elements.</title> +<style> + p::before { + background: Canvas; + content: 'before'; + display: block; + forced-color-adjust: none; + width: 100%; + } +</style> +<p> + The background color of pseudo elements should get overridden in Forced Colors + Mode. +</p> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-39.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-39.html new file mode 100644 index 0000000000..7b69fc979c --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-39.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - pseudo elements.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-39-ref.html"> +<style> + p::before { + background: blue; + content: 'before'; + display: block; + width: 100%; + } +</style> +<p> + The background color of pseudo elements should get overridden in Forced Colors + Mode. +</p> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-40.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-40.html new file mode 100644 index 0000000000..481492d72e --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-40.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - computed value. + Ensures that forced colors do not affect the computed style. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + div { + background-color: green; + border-color: green; + caret-color: green; + color: green; + column-rule-color: green; + fill: green; + flood-color: green; + lighting-color: green; + outline-color: green; + stop-color: green; + stroke: green; + text-decoration-color: green; + -webkit-tap-highlight-color: green; + -webkit-text-emphasis-color: green; + } +</style> +<div id="div"> + Forced colors should not affect the computed style. +</div> + +<script> + const properties_to_test = [ + "background-color", + "border-bottom-color", + "border-left-color", + "border-right-color", + "border-top-color", + "caret-color", + "color", + "column-rule-color", + "fill", + "flood-color", + "lighting-color", + "outline-color", + "stop-color", + "stroke", + "text-decoration-color", + "-webkit-tap-highlight-color", + "-webkit-text-emphasis-color" + ]; + for (let property of properties_to_test) { + test(function() { + let value = document.getElementById("div").computedStyleMap() + .get(property).toString(); + assert_equals(value, "rgb(0, 128, 0)") + }, "Forced colors aren't applied at computed value time for " + property); + } +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-41.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-41.html new file mode 100644 index 0000000000..7b616c963d --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-41.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - resolved value. + Forced colors happens at used value time. The resolved values of certain color + properties are used values. This test ensures that those values are forced in + forced colors mode. +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + div { + /* Unlike the other properties listed, accent-color is forced at computed + value time. */ + accent-color: green; + background-color: green; + border-color: green; + caret-color: green; + color: green; + outline-color: green; + } +</style> +<div id="div"></div> + +<script> + const properties_to_test = [ + "accent-color", + "background-color", + "border-bottom-color", + "border-left-color", + "border-right-color", + "border-top-color", + "caret-color", + "color", + "outline-color" + ]; + for (let property of properties_to_test) { + test(function() { + let value = + window.getComputedStyle(document.getElementById("div")).getPropertyValue(property); + assert_not_equals(value, "rgb(0, 128, 0)") + }, "Forced colors affects the resolved value of " + property); + } +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-42-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-42-ref.html new file mode 100644 index 0000000000..7133c893ce --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-42-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - visited caret-color.</title> +<style> + a { + caret-color: VisitedText; + forced-color-adjust: none; + } + [contenteditable] { + outline: none; + } +</style> +<a id="link" contenteditable href="">link</a> +<script> + window.onload = function() { + document.getElementById("link").focus(); + } +</script> + diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-42.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-42.html new file mode 100644 index 0000000000..9d4cfadcc0 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-42.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - visited caret-color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-42-ref.html"> +<style> + a { + caret-color: orange; + } + a:visited { + caret-color: red; + } + [contenteditable] { + outline: none; + } +</style> +<a id="link" contenteditable href="">link</a> +<script> + window.onload = function() { + document.getElementById("link").focus(); + } +</script> + diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-43-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-43-ref.html new file mode 100644 index 0000000000..0b98661896 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-43-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - caret-color.</title> +<style> + div { + caret-color: WindowText; + forced-color-adjust: none; + } + [contenteditable] { + outline: none; + } +</style> +<div id="caret" contenteditable>The caret color should be overridden to currentColor</a> +<script> + window.onload = function() { + document.getElementById("caret").focus(); + } +</script> + diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-43.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-43.html new file mode 100644 index 0000000000..9b8c164908 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-43.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - caret-color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-43-ref.html"> +<style> + div { + caret-color: red; + } + [contenteditable] { + outline: none; + } +</style> +<div id="caret" contenteditable>The caret color should be overridden to currentColor</a> +<script> + window.onload = function() { + document.getElementById("caret").focus(); + } +</script> + diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-44-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-44-ref.html new file mode 100644 index 0000000000..46398de882 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-44-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - visited caret-color with system color.</title> +<style> + a { + caret-color: GrayText; + forced-color-adjust: none; + } + [contenteditable] { + outline: none; + } +</style> +<a id="link" contenteditable href="">link</a> +<script> + window.onload = function() { + document.getElementById("link").focus(); + } +</script> + diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-44.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-44.html new file mode 100644 index 0000000000..4526e19550 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-44.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - visited caret-color with system color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-44-ref.html"> +<style> + a { + caret-color: orange; + } + a:visited { + caret-color: GrayText; + } + [contenteditable] { + outline: none; + } +</style> +<a id="link" contenteditable href="">link</a> +<script> + window.onload = function() { + document.getElementById("link").focus(); + } +</script> + diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-45-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-45-ref.html new file mode 100644 index 0000000000..c7d535c527 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-45-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - caret-color with system color.</title> +<style> + div { + caret-color: GrayText; + forced-color-adjust: none; + } + [contenteditable] { + outline: none; + } +</style> +<div id="caret" contenteditable>The caret color should remain GrayText</a> +<script> + window.onload = function() { + document.getElementById("caret").focus(); + } +</script> + diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-45.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-45.html new file mode 100644 index 0000000000..e667b82914 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-45.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - caret-color with system color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-45-ref.html"> +<style> + div { + caret-color: GrayText; + } + [contenteditable] { + outline: none; + } +</style> +<div id="caret" contenteditable>The caret color should remain GrayText</a> +<script> + window.onload = function() { + document.getElementById("caret").focus(); + } +</script> + diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-46-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-46-ref.html new file mode 100644 index 0000000000..55259f7f7a --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-46-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - lighting-color, flood-color, stop-color.</title> +<style> + svg { + forced-color-adjust: none; + height: 100px; + width: 500px; + } +</style> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="100" height="100" fill="WindowText"/> + <rect x="200" y="0" width="100" height="100" fill="WindowText"/> + <rect x="400" y="0" width="100" height="100" fill="WindowText"/> +</svg> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-46.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-46.html new file mode 100644 index 0000000000..6fd50a3715 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-46.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - lighting-color, flood-color, stop-color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-46-ref.html"> +<style> + /* SVG elements are set to 'forced-color-adjust: none' by default. Set this to + auto instead in order to test that lighting-color, flood-color, stop-color + are properly overridden in forced colors mode. */ + svg { + forced-color-adjust: auto; + height: 100px; + width: 500px; + } +</style> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- stop-color in forced colors mode --> + <linearGradient id="stop"> + <stop offset="25%" stop-color="orange"/> + <stop offset="75%" stop-color="red"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" fill="url('#stop')"/> + + <!-- lighting-color in forced colors mode --> + <filter id="lighting" x="0" y="0" width="100%" height="100%"> + <feDiffuseLighting in="SourceGraphic" lighting-color="red"> + <fePointLight x="250" y="50" z="10"/> + </feDiffuseLighting> + </filter> + <rect x="200" y="0" width="100" height="100" style="filter: url(#lighting);"/> + + <!-- flood-color in forced colors mode --> + <filter id="flood" x="0" y="0" width="100%" height="100%"> + <feFlood flood-color="red"/> + </filter> + <rect x="400" y="0" width="100" height="100" style="filter: url(#flood);"/> +</svg> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-47-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-47-ref.html new file mode 100644 index 0000000000..827cf86b23 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-47-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - lighting-color, flood-color, stop-color system colors.</title> +<style> + svg { + forced-color-adjust: none; + height: 100px; + width: 500px; + } +</style> +<svg xmlns="http://www.w3.org/2000/svg"> + <linearGradient id="stop"> + <stop offset="25%" stop-color="GrayText"/> + <stop offset="75%" stop-color="LinkText"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" fill="url('#stop')"/> + + <filter id="lighting" x="0" y="0" width="100%" height="100%"> + <feDiffuseLighting in="SourceGraphic" lighting-color="LinkText"> + <fePointLight x="250" y="50" z="10"/> + </feDiffuseLighting> + </filter> + <rect x="200" y="0" width="100" height="100" style="filter: url(#lighting);"/> + + <filter id="flood" x="0" y="0" width="100%" height="100%"> + <feFlood flood-color="GrayText"/> + </filter> + <rect x="400" y="0" width="100" height="100" style="filter: url(#flood);"/> +</svg> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-47.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-47.html new file mode 100644 index 0000000000..b5eb912d6b --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-47.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - lighting-color, flood-color, stop-color system colors.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<link rel=match href="forced-colors-mode-47-ref.html"> +<style> + /* SVG elements are set to 'forced-color-adjust: none' by default. Set this to + auto instead in order to test that lighting-color, flood-color, stop-color + are properly handled in forced colors mode. */ + svg { + forced-color-adjust: auto; + height: 100px; + width: 500px; + } +</style> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- stop-color in forced colors mode --> + <linearGradient id="stop"> + <stop offset="25%" stop-color="GrayText"/> + <stop offset="75%" stop-color="LinkText"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" fill="url('#stop')"/> + + <!-- lighting-color in forced colors mode --> + <filter id="lighting" x="0" y="0" width="100%" height="100%"> + <feDiffuseLighting in="SourceGraphic" lighting-color="LinkText"> + <fePointLight x="250" y="50" z="10"/> + </feDiffuseLighting> + </filter> + <rect x="200" y="0" width="100" height="100" style="filter: url(#lighting);"/> + + <!-- flood-color in forced colors mode --> + <filter id="flood" x="0" y="0" width="100%" height="100%"> + <feFlood flood-color="GrayText"/> + </filter> + <rect x="400" y="0" width="100" height="100" style="filter: url(#flood);"/> +</svg> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-48-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-48-ref.html new file mode 100644 index 0000000000..53f72c1259 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-48-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - forced-color-adjust propagation to viewport.</title> +<style> + body { + margin:0; + overflow: hidden; + } + div { + background-color: green; + forced-color-adjust: none; + height: 100vh; + width: 100vw; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-48.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-48.html new file mode 100644 index 0000000000..feb3fc0876 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-48.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - forced-color-adjust propagation to viewport.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop"> +<link rel=match href="forced-colors-mode-48-ref.html"> +<style> + :root { + forced-color-adjust: none; + background-color: green; + } +</style> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-49-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-49-ref.html new file mode 100644 index 0000000000..8233a8a635 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-49-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - forced-color-adjust does not propagate from body to viewport.</title> +<style> + body { + margin:0; + overflow: hidden; + } + div { + background-color: Canvas; + forced-color-adjust: none; + height: 100vh; + width: 100vw; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-49.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-49.html new file mode 100644 index 0000000000..e96c3790fb --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-49.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - forced-color-adjust does not propagate from body to viewport.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop"> +<link rel=match href="forced-colors-mode-49-ref.html"> +<style> + body { + forced-color-adjust: none; + background-color: green; + } +</style> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-50.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-50.html new file mode 100644 index 0000000000..42957248b4 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-50.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - accent-color.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #a, #b { + accent-color: green; + } + #a, #c { + forced-color-adjust: none; + } + #c, #d { + accent-color: CanvasText; + } +</style> +<input type="checkbox" id="a" checked> +<input type="checkbox" id="b" checked> +<input type="checkbox" id="c" checked> +<input type="checkbox" id="d" checked> +<script> + test(function(){ + assert_equals(getComputedStyle(a).accentColor, "rgb(0, 128, 0)"); + assert_equals(getComputedStyle(b).accentColor, "auto"); + assert_equals(getComputedStyle(c).accentColor, getComputedStyle(d).accentColor) + }, "Accent-color computes to auto in forced colors mode, unless forced-color-adjust is none or accent-color is a system color."); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-51.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-51.html new file mode 100644 index 0000000000..0257714432 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-51.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - color-scheme.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #dark { + color-scheme: dark; + } + #light { + color-scheme: light; + forced-color-adjust: none; + } +</style> +<div id="dark"></div> +<div id="light"></div> + +<script> + test(function(){ + assert_equals(getComputedStyle(dark).colorScheme, "light dark"); + assert_equals(getComputedStyle(light).colorScheme, "light"); + }, "Color-scheme computes to 'light dark' in forced colors mode, unless forced-color-adjust is none."); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-52-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-52-ref.html new file mode 100644 index 0000000000..5d684be9d0 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-52-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - SVG inherits parent's used color by default.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop"> +<style> + svg { + fill: canvasText; + stroke: canvasText; + } +</style> +<body> + The triangle below should be canvasText in forced colors mode. + <svg height="200" width="350"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-52.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-52.html new file mode 100644 index 0000000000..5812d1eed5 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-52.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - SVG inherits parent's used color by default.</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop"> +<link rel=match href="forced-colors-mode-52-ref.html"> +<style> + body { + color: red; + } + svg { + fill: currentColor; + stroke: currentColor; + } +</style> +<body> + The triangle below should be canvasText in forced colors mode. + <svg height="200" width="350"> + <path d="M150 0 L75 200 L225 200 Z" /> + </svg> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-53-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-53-ref.html new file mode 100644 index 0000000000..6bfa7710fa --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-53-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - Highlight pseudos use the originating element's forced colors state</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop"> +<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> +<style> + span.forcedColors { + background-color: Highlight; + color: HighlightText; + text-decoration: underline; + text-decoration-color: HighlightText; + forced-color-adjust: none; + } + + span.noForcedColors { + background-color: yellow; + color: blue; + text-decoration: underline; + text-decoration-color: orange; + forced-color-adjust: none; + } +</style> +<body> + <div><span class="forcedColors">This content doesn't have forced-color-adjust set at all</span></div> + <div><span class="noForcedColors">This content has forced-color-adjust:none on the originating element only</span></div> + <div><span class="forcedColors">This content has forced-color-adjust:none on the ::highlight pseudo only</span></div> + <div><span class="noForcedColors">This content has forced-color-adjust:none on the originating element and the ::highlight pseudo</span></div> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-53.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-53.html new file mode 100644 index 0000000000..3b31a5999b --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-53.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - Highlight pseudos use the originating element's forced colors state</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-color-adjust-prop"> +<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/"> +<link rel=match href="forced-colors-mode-53-ref.html"> +<meta name="fuzzy" content="0-5;0-3"> +<style> + span { + background-color: lightgray; + color: orange; + } + + span::highlight(foo) { + background-color: yellow; + color: blue; + text-decoration: underline; + text-decoration-color: orange; + } + + .fcaOriginating { + forced-color-adjust: none; + } + + .fcaPseudo::highlight(foo) { + forced-color-adjust: none; + } +</style> +<body> + <div><span>This content doesn't have forced-color-adjust set at all</span></div> + <div><span class="fcaOriginating">This content has forced-color-adjust:none on the originating element only</span></div> + <div><span class="fcaPseudo">This content has forced-color-adjust:none on the ::highlight pseudo only</span></div> + <div><span class="fcaOriginating fcaPseudo">This content has forced-color-adjust:none on the originating element and the ::highlight pseudo</span></div> + <script> + const ranges = []; + document.querySelectorAll("div").forEach(div => { + const range = new Range(); + range.setStart(div, 0); + range.setEnd(div, 1); + ranges.push(range); + }) + + CSS.highlights.set("foo", new Highlight(...ranges)); + </script> +</body> diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-54.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-54.html new file mode 100644 index 0000000000..0a770f78f3 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-54.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Forced colors mode - scrollbar-color +</title> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + div { + scrollbar-color: green red; + } +</style> +<div id="div"></div> + +<script> + test(function() { + let value = window.getComputedStyle(document.getElementById("div")).getPropertyValue("scrollbar-color"); + assert_equals(value, "auto") + }, "Forced colors forces scrollbar-color to auto"); +</script> diff --git a/testing/web-platform/tests/forced-colors-mode/resources/float-image.jpg b/testing/web-platform/tests/forced-colors-mode/resources/float-image.jpg Binary files differnew file mode 100644 index 0000000000..ab06d5f94d --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/resources/float-image.jpg diff --git a/testing/web-platform/tests/forced-colors-mode/resources/test-image.jpg b/testing/web-platform/tests/forced-colors-mode/resources/test-image.jpg Binary files differnew file mode 100644 index 0000000000..93f6e196e5 --- /dev/null +++ b/testing/web-platform/tests/forced-colors-mode/resources/test-image.jpg |
