diff options
Diffstat (limited to 'testing/web-platform/tests/forced-colors-mode/backplate')
20 files changed, 914 insertions, 0 deletions
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> |