From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../tests/forced-colors-mode/README.txt            |   1 +
 .../forced-colors-mode-backplate-01-ref.html       |  52 ++++++++
 .../backplate/forced-colors-mode-backplate-01.html |  55 +++++++++
 .../forced-colors-mode-backplate-02-ref.html       |  52 ++++++++
 .../backplate/forced-colors-mode-backplate-02.html |  50 ++++++++
 .../forced-colors-mode-backplate-03-ref.html       |  61 +++++++++
 .../backplate/forced-colors-mode-backplate-03.html |  64 ++++++++++
 .../forced-colors-mode-backplate-04-ref.html       |  50 ++++++++
 .../backplate/forced-colors-mode-backplate-04.html |  50 ++++++++
 .../forced-colors-mode-backplate-05-ref.html       |  52 ++++++++
 .../backplate/forced-colors-mode-backplate-05.html |  48 ++++++++
 .../forced-colors-mode-backplate-06-ref.html       |  44 +++++++
 .../backplate/forced-colors-mode-backplate-06.html |  45 +++++++
 .../forced-colors-mode-backplate-08-ref.html       |  58 +++++++++
 .../backplate/forced-colors-mode-backplate-08.html |  50 ++++++++
 .../forced-colors-mode-backplate-09-ref.html       |  38 ++++++
 .../backplate/forced-colors-mode-backplate-09.html |  33 +++++
 .../forced-colors-mode-backplate-10-ref.html       |  39 ++++++
 .../backplate/forced-colors-mode-backplate-10.html |  34 ++++++
 .../forced-colors-mode-backplate-11-ref.html       |  15 +++
 .../backplate/forced-colors-mode-backplate-11.html |  24 ++++
 .../forced-colors-mode-01-ref.html                 |  44 +++++++
 .../forced-colors-mode/forced-colors-mode-01.html  |  44 +++++++
 .../forced-colors-mode-02-ref.html                 |  40 ++++++
 .../forced-colors-mode/forced-colors-mode-02.html  |  42 +++++++
 .../forced-colors-mode/forced-colors-mode-03.html  | 136 +++++++++++++++++++++
 .../forced-colors-mode-05-ref.html                 |  16 +++
 .../forced-colors-mode/forced-colors-mode-05.html  |  17 +++
 .../forced-colors-mode-06-ref.html                 |   9 ++
 .../forced-colors-mode/forced-colors-mode-06.html  |  10 ++
 .../forced-colors-mode-07-ref.html                 |  32 +++++
 .../forced-colors-mode/forced-colors-mode-07.html  |  30 +++++
 .../forced-colors-mode-08-ref.html                 |  20 +++
 .../forced-colors-mode/forced-colors-mode-08.html  |  21 ++++
 .../forced-colors-mode/forced-colors-mode-09.html  |  31 +++++
 .../forced-colors-mode/forced-colors-mode-10.html  |  36 ++++++
 .../forced-colors-mode/forced-colors-mode-11.html  |  39 ++++++
 .../forced-colors-mode-14-ref.html                 |  22 ++++
 .../forced-colors-mode/forced-colors-mode-14.html  |  56 +++++++++
 .../forced-colors-mode-17-ref.html                 |  18 +++
 .../forced-colors-mode/forced-colors-mode-17.html  |  19 +++
 .../forced-colors-mode-18-ref.html                 |  28 +++++
 .../forced-colors-mode/forced-colors-mode-18.html  |  25 ++++
 .../forced-colors-mode-19-ref.html                 |  29 +++++
 .../forced-colors-mode/forced-colors-mode-19.html  |  28 +++++
 .../forced-colors-mode/forced-colors-mode-20.html  |  31 +++++
 .../forced-colors-mode/forced-colors-mode-21.html  |  31 +++++
 .../forced-colors-mode-23-ref.html                 |  27 ++++
 .../forced-colors-mode/forced-colors-mode-23.html  |  29 +++++
 .../forced-colors-mode-25-ref.html                 |  22 ++++
 .../forced-colors-mode/forced-colors-mode-25.html  |  21 ++++
 .../forced-colors-mode-26-ref.html                 |  19 +++
 .../forced-colors-mode/forced-colors-mode-26.html  |  24 ++++
 .../forced-colors-mode/forced-colors-mode-27.html  |  35 ++++++
 .../forced-colors-mode-28-ref.html                 |  24 ++++
 .../forced-colors-mode/forced-colors-mode-28.html  |  37 ++++++
 .../forced-colors-mode-29-ref.html                 |  41 +++++++
 .../forced-colors-mode/forced-colors-mode-29.html  |  42 +++++++
 .../forced-colors-mode-30-ref.html                 |  18 +++
 .../forced-colors-mode/forced-colors-mode-30.html  |  19 +++
 .../forced-colors-mode-31-ref.html                 |  18 +++
 .../forced-colors-mode/forced-colors-mode-31.html  |  22 ++++
 .../forced-colors-mode-33-ref.html                 |  16 +++
 .../forced-colors-mode/forced-colors-mode-33.html  |  23 ++++
 .../forced-colors-mode-34-ref.html                 |  16 +++
 .../forced-colors-mode/forced-colors-mode-34.html  |  23 ++++
 .../forced-colors-mode-35-ref.html                 |  20 +++
 .../forced-colors-mode/forced-colors-mode-35.html  |  26 ++++
 .../forced-colors-mode-36-ref.html                 |  18 +++
 .../forced-colors-mode/forced-colors-mode-36.html  |  23 ++++
 .../forced-colors-mode-37-ref.html                 |  18 +++
 .../forced-colors-mode/forced-colors-mode-37.html  |  24 ++++
 .../forced-colors-mode-38-ref.html                 |  18 +++
 .../forced-colors-mode/forced-colors-mode-38.html  |  24 ++++
 .../forced-colors-mode-39-ref.html                 |  16 +++
 .../forced-colors-mode/forced-colors-mode-39.html  |  17 +++
 .../forced-colors-mode/forced-colors-mode-40.html  |  58 +++++++++
 .../forced-colors-mode/forced-colors-mode-41.html  |  44 +++++++
 .../forced-colors-mode-42-ref.html                 |  19 +++
 .../forced-colors-mode/forced-colors-mode-42.html  |  23 ++++
 .../forced-colors-mode-43-ref.html                 |  19 +++
 .../forced-colors-mode/forced-colors-mode-43.html  |  20 +++
 .../forced-colors-mode-44-ref.html                 |  19 +++
 .../forced-colors-mode/forced-colors-mode-44.html  |  23 ++++
 .../forced-colors-mode-45-ref.html                 |  19 +++
 .../forced-colors-mode/forced-colors-mode-45.html  |  20 +++
 .../forced-colors-mode-46-ref.html                 |  15 +++
 .../forced-colors-mode/forced-colors-mode-46.html  |  37 ++++++
 .../forced-colors-mode-47-ref.html                 |  29 +++++
 .../forced-colors-mode/forced-colors-mode-47.html  |  37 ++++++
 .../forced-colors-mode-48-ref.html                 |  16 +++
 .../forced-colors-mode/forced-colors-mode-48.html  |  11 ++
 .../forced-colors-mode-49-ref.html                 |  16 +++
 .../forced-colors-mode/forced-colors-mode-49.html  |  11 ++
 .../forced-colors-mode/forced-colors-mode-50.html  |  28 +++++
 .../forced-colors-mode/forced-colors-mode-51.html  |  24 ++++
 .../forced-colors-mode-52-ref.html                 |  16 +++
 .../forced-colors-mode/forced-colors-mode-52.html  |  20 +++
 .../forced-colors-mode-53-ref.html                 |  28 +++++
 .../forced-colors-mode/forced-colors-mode-53.html  |  45 +++++++
 .../forced-colors-mode/forced-colors-mode-54.html  |  20 +++
 .../forced-colors-mode/resources/float-image.jpg   | Bin 0 -> 4423 bytes
 .../forced-colors-mode/resources/test-image.jpg    | Bin 0 -> 13341 bytes
 103 files changed, 3066 insertions(+)
 create mode 100644 testing/web-platform/tests/forced-colors-mode/README.txt
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-01-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-01.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-02-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-02.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-03-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-03.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-04-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-04.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-05-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-05.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-06-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-06.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-08.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-09-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-09.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-10-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-10.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-11-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/backplate/forced-colors-mode-backplate-11.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-01-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-01.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-02-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-02.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-03.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-05-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-05.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-06-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-06.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-07-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-07.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-08-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-08.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-09.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-10.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-11.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-14-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-14.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-17-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-17.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-18-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-18.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-19-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-19.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-20.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-21.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-23-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-23.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-25-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-25.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-26-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-26.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-27.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-28-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-28.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-29-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-29.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-30-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-30.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-31-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-31.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-33-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-33.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-34-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-34.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-35-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-35.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-36-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-36.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-37-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-37.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-38-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-38.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-39-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-39.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-40.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-41.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-42-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-42.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-43-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-43.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-44-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-44.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-45-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-45.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-46-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-46.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-47-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-47.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-48-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-48.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-49-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-49.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-50.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-51.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-52-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-52.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-53-ref.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-53.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/forced-colors-mode-54.html
 create mode 100644 testing/web-platform/tests/forced-colors-mode/resources/float-image.jpg
 create mode 100644 testing/web-platform/tests/forced-colors-mode/resources/test-image.jpg

(limited to 'testing/web-platform/tests/forced-colors-mode')

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
new file mode 100644
index 0000000000..ab06d5f94d
Binary files /dev/null and b/testing/web-platform/tests/forced-colors-mode/resources/float-image.jpg differ
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
new file mode 100644
index 0000000000..93f6e196e5
Binary files /dev/null and b/testing/web-platform/tests/forced-colors-mode/resources/test-image.jpg differ
-- 
cgit v1.2.3