Adding upstream version 115.7.0esr.upstream/115.7.0esr upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
commit: 36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree: 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/high-contrast
parent: Initial commit. (diff)
download: firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
73 files changed, 1358 insertions, 0 deletions
diff --git a/layout/reftests/high-contrast/ahem.css b/layout/reftests/high-contrast/ahem.css
new file mode 100644
index 0000000000..884a41198b
--- /dev/null
+++ b/layout/reftests/high-contrast/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(../fonts/Ahem.ttf);
+}
diff --git a/layout/reftests/high-contrast/backplate-bg-image-001-ref.html b/layout/reftests/high-contrast/backplate-bg-image-001-ref.html
new file mode 100644
index 0000000000..32d745fc98
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Reference: Text that overlaps a background image should be backplated.</title>
+  <style>
+    div {
+      font: 20px Ahem;
+      background-image: url("blue.png");
+    }
+    .fake-backplate {
+      background-color: white;
+      width: max-content;
+      white-space: pre;
+    }
+    /* We need to include the trailing space as part of the backgrounded
+     * area here to properly make a mockup for the testcase's expected
+     * rendering, so we use 'white-space: pre'. The testcase pulls its file's
+     * trailing newline into the body, treats it as a final space character,
+     * and draws a backplate behind it. (This is probably correct? see
+     * discussion on bug 1577028.) */
+    </style>
+</head>
+<div><span class="fake-backplate">ppppp ppppp </span></div>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-001.html b/layout/reftests/high-contrast/backplate-bg-image-001.html
new file mode 100644
index 0000000000..252c28ade2
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Text that overlaps a background image should be backplated.</title>
+  <style>
+    div {
+      font: 20px Ahem;
+      background-image: url("blue.png");
+    }
+    </style>
+</head>
+<div>
+  ppppp ppppp
+</div>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-002-ref.html b/layout/reftests/high-contrast/backplate-bg-image-002-ref.html
new file mode 100644
index 0000000000..1ffc4542e7
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-002-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Reference: Text runs that are separated by a block-level line will get separate backplates.</title>
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .fake-backplate {
+      background-color: white;
+      width: max-content;
+    }
+    .sample {
+      background-image: url("blue.png");
+      height: 500px;
+    }
+  </style>
+</head>
+<body>
+<span class="fake-backplate">ppppp ppppp</span><div class="sample"><span class="fake-backplate">ppppp ppppp</span></div><span class="fake-backplate">ppppp ppppp</span>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-002.html b/layout/reftests/high-contrast/backplate-bg-image-002.html
new file mode 100644
index 0000000000..2d1f79eaa8
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Text runs that are separated by a block-level line will get separate backplates.</title>
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .sample {
+      background-image: url("blue.png");
+      height: 500px;
+    }
+  </style>
+</head>
+<body>
+ppppp ppppp<div class="sample">ppppp ppppp</div>ppppp ppppp
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-003-ref.html b/layout/reftests/high-contrast/backplate-bg-image-003-ref.html
new file mode 100644
index 0000000000..a4260fd394
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-003-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Reference: Inline, relatively positioned backplate items should be drawn cooperatively with other backplates on the same line. Inline-block, relatively positioned backplate items should be drawn over other backplates on the same line. Absolutely positioned backplate items should be drawn over other page content.</title>
+  <style>
+  body {
+    font: 20px Ahem;
+  }
+  .fake-backplate {
+    background-color: white;
+    width: max-content;
+  }
+  .std {
+    border: 1px solid black;
+    padding: 15px;
+  }
+  .relpos {
+    position: relative;
+    left: 40px;
+  }
+  .i {
+    display: inline;
+  }
+  .ib {
+    display: inline-block;
+  }
+  .abspos {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+  }
+  </style>
+</head>
+<body>
+<div><span class="std relpos i">ppppp ppppp</span>ppppp ppppp</div>
+<div><br><br><span class="std relpos ib fake"><span class="fake-backplate">ppppp ppppp</span></span>
+<span>ppppp ppppp</span></div>
+<div class="abspos"><span class="fake-backplate">ppppp ppppp</span></div>
+</body>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-003.html b/layout/reftests/high-contrast/backplate-bg-image-003.html
new file mode 100644
index 0000000000..6b3758ac55
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Inline, relatively positioned backplate items should be drawn cooperatively with other backplates on the same line. Inline-block, relatively positioned backplate items should be drawn over other backplates on the same line. Absolutely positioned backplate items should be drawn over other page content.</title>
+  <style>
+  body {
+    font: 20px Ahem;
+  }
+  .std {
+    border: 1px solid black;
+    padding: 15px;
+  }
+  .relpos {
+    position: relative;
+    left: 40px;
+  }
+  .i {
+    display: inline;
+  }
+  .ib {
+    display: inline-block;
+  }
+  .abspos {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+  }
+  </style>
+</head>
+<body>
+<div><span class="std relpos i">ppppp ppppp</span>ppppp ppppp</div>
+<div><br><br><span class="std relpos ib">ppppp ppppp</span>
+<span>ppppp ppppp</span></div>
+<div class="abspos">ppppp ppppp</div>
+</body>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-004-ref.html b/layout/reftests/high-contrast/backplate-bg-image-004-ref.html
new file mode 100644
index 0000000000..dab921d72b
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-004-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Reference: Assigning a negative z-index to text which is backplated should change the z-index of the text only; the backplate should not be affected.</title>
+  <style>
+  body {
+    font: 20px Ahem;
+  }
+  .fake-backplate {
+    background-color: white;
+    width: max-content;
+  }
+  .std {
+    background-image: url("blue.png");
+    padding: 15px;
+  }
+  .relpos {
+    position: relative;
+    left: 20px;
+  }
+  .ib {
+    display: inline-block;
+  }
+  </style>
+</head>
+<body>
+  <span class="std ib">
+    <span class="relpos">
+      <span class="fake-backplate" style="color:transparent;">ppppp ppppp</span>
+    </span>
+  </span>
+  <span>ppppp ppppp</span>
+</body>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-004.html b/layout/reftests/high-contrast/backplate-bg-image-004.html
new file mode 100644
index 0000000000..7b0db471af
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Assigning a negative z-index to text which is backplated should change the z-index of the text only; the backplate should not be affected.</title>
+  <style>
+  body {
+    font: 20px Ahem;
+  }
+  .std {
+    background-image: url("blue.png");
+    padding: 15px;
+  }
+  .relpos {
+    position: relative;
+    left: 20px;
+  }
+  .negZ {
+    z-index: -1;
+  }
+  .ib {
+    display: inline-block;
+  }
+  </style>
+</head>
+<body>
+  <span class="std ib">
+    <span class="relpos negZ">ppppp ppppp</span>
+  </span>
+  <span>ppppp ppppp</span>
+</body>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-005-ref.html b/layout/reftests/high-contrast/backplate-bg-image-005-ref.html
new file mode 100644
index 0000000000..a2edcfc571
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-005-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Reference: Preserved whitespace should contribute to overall backplate sizing.</title>
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .sample {
+      background-image: url("blue.png");
+      white-space: pre;
+      padding: 10px;
+    }
+    .fake-backplate {
+      background-color: white;
+      width: max-content;
+    }
+    .no-backplate {
+        display: inline-block;
+    }
+    </style>
+</head>
+<body>
+ppppp ppppp<div class="sample"><span class="fake-backplate">     ppppp ppppp</span></div>ppppp ppppp
+<div class="sample"><span class="fake-backplate">ppppp ppppp     </span></div>
+<div class="sample"><span class="no-backplate"></span></div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-005.html b/layout/reftests/high-contrast/backplate-bg-image-005.html
new file mode 100644
index 0000000000..1abb7ddebd
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-005.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Preserved whitespace should contribute to overall backplate sizing.</title>
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .sample {
+      background-image: url("blue.png");
+      white-space: pre;
+      padding: 10px;
+    }
+    </style>
+</head>
+<body>
+ppppp ppppp<div class="sample">     ppppp ppppp</div>ppppp ppppp
+<div class="sample">ppppp ppppp     </div>
+<div class="sample">     </div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-006-ref.html b/layout/reftests/high-contrast/backplate-bg-image-006-ref.html
new file mode 100644
index 0000000000..22d3f544d0
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-006-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ahem.css">
+<title>Reference: Text in a native button or input object that overlaps a background image should be backplated.</title>
+<style>
+body {
+  font: 20px Ahem;
+}
+.std {
+  background-image: url("blue.png");
+  height: 500px;
+}
+.fake-backplate {
+  background-color: white;
+  width: max-content;
+}
+button {
+  font: 20px Ahem;
+}
+</style>
+<div class="std">
+<button>ppppp</button><span class="fake-backplate">ppppp</span><br>
+<form>
+  <input>
+</form>
+<br>
+<span class="fake-backplate">ppppp<!-- no whitespace
+--><button>ppppp</button><!-- no whitespace
+-->ppppp</span>
+</div>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-006.html b/layout/reftests/high-contrast/backplate-bg-image-006.html
new file mode 100644
index 0000000000..864b50b70c
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ahem.css">
+<title>Text in a native button or input object that overlaps a background image should be backplated.</title>
+<style>
+  body {
+    font: 20px Ahem;
+  }
+  .std {
+    background-image: url("blue.png");
+    height: 500px;
+  }
+  button {
+    font: 20px Ahem;
+  }
+</style>
+<div class="std">
+<button>ppppp</button>ppppp<br>
+<form>
+  <input>
+</form><br><!-- no whitespace
+-->ppppp<!-- no whitespace
+--><button>ppppp</button><!-- no whitespace
+-->ppppp<!-- no whitespace
+--></div>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-007-ref.html b/layout/reftests/high-contrast/backplate-bg-image-007-ref.html
new file mode 100644
index 0000000000..eb03924ba6
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-007-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <title>Reference: Text in a non-native button or input that overlaps a background image should be backplated.</title>
+    <style>
+    body {
+      font: 20px Ahem;
+    }
+    button, input {
+      font: 20px Ahem;
+      border: 0px;
+      /* This forces non-native styling */
+    }
+    .std {
+      background-image: url("blue.png");
+      height: 500px;
+    }
+    .fake-backplate {
+      background-color: white;
+      width: max-content;
+    }
+    </style>
+</head>
+<body>
+    <div class="std">
+    <button>ppppp</button><span class="fake-backplate">ppppp</span><br>
+    <form>
+      <input>
+    </form>
+    <br>
+    <span class="fake-backplate">ppppp<!-- no whitespace
+    --><button>ppppp</button><!-- no whitespace
+    -->ppppp</span>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-007.html b/layout/reftests/high-contrast/backplate-bg-image-007.html
new file mode 100644
index 0000000000..558884f9fb
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-007.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <title>Text in a non-native button or input object that overlaps a background image should be backplated.</title>
+    <style>
+    body {
+      font: 20px Ahem;
+    }
+    button, input {
+      font: 20px Ahem;
+      border: 0px;
+      /* This forces non-native styling */
+    }
+    .std {
+      background-image: url("blue.png");
+      height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <div class="std">
+    <button>ppppp</button>ppppp<br>
+    <form>
+      <input>
+    </form><br>
+    <span>ppppp<!-- no whitespace
+    --><button>ppppp</button><!-- no whitespace
+    -->ppppp</span>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-008-ref.html b/layout/reftests/high-contrast/backplate-bg-image-008-ref.html
new file mode 100644
index 0000000000..ab55500e93
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-008-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="ahem.css">
+<title>Reference: Text in a native select object that overlaps a background image should be backplated.</title>
+<style>
+body, select {
+  font: 20px Ahem;
+}
+.std {
+  background-image: url("blue.png");
+  height: 500px;
+}
+.fake-backplate {
+  background-color: white;
+  width: max-content;
+}
+</style>
+<div class="std">
+<span class="fake-backplate"><!-- no whitespace
+-->ppppp<!-- no whitespace
+--><span class="fake-backplate"><!-- no whitespace
+--><select>
+  <option>ppppp</option>
+</select><!-- no whitespace
+--></span><!-- no whitespace
+-->ppppp<!-- no whitespace
+--></span>
+</div>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-008.html b/layout/reftests/high-contrast/backplate-bg-image-008.html
new file mode 100644
index 0000000000..227f85fc64
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-008.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <title>Text in a native select object that overlaps a background image should be backplated.</title>
+    <style>
+    body, select {
+      font: 20px Ahem;
+    }
+    .std {
+      background-image: url("blue.png");
+      height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <div class="std"><!-- no whitespace
+    -->ppppp<!-- no whitespace
+    --><select>
+      <option>ppppp</option>
+    </select><!-- no whitespace
+    -->ppppp<!-- no whitespace
+    --></div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-009-ref.html b/layout/reftests/high-contrast/backplate-bg-image-009-ref.html
new file mode 100644
index 0000000000..c674f9948c
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-009-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <title>Reference: Text in a non-native select object that overlaps a background image should be backplated.</title>
+    <style>
+    body {
+      font: 20px Ahem;
+    }
+    select {
+      font: 20px Ahem;
+      border: 0px;
+      /* This forces non-native styling */
+    }
+    .std {
+      background-image: url("blue.png");
+      height: 500px;
+    }
+    .fake-backplate {
+      background-color: white;
+      width: max-content;
+    }
+    </style>
+</head>
+<body>
+    <div class="std">
+    <span class="fake-backplate"><!-- no whitespace
+    -->ppppp<!-- no whitespace
+    --><span class="fake-backplate"><!-- no whitespace
+    --><select>
+      <option>ppppp</option>
+    </select><!-- no whitespace
+    --></span><!-- no whitespace
+    -->ppppp<!-- no whitespace
+    --></span>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-009.html b/layout/reftests/high-contrast/backplate-bg-image-009.html
new file mode 100644
index 0000000000..7d4bd590d6
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-009.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+    <title>Text in a non-native select object that overlaps a background image should be backplated.</title>
+    <style>
+    body {
+      font: 20px Ahem;
+    }
+    select {
+      font: 20px Ahem;
+      border: 0px;
+      /* This forces non-native styling */
+    }
+    .std {
+      background-image: url("blue.png");
+      height: 500px;
+    }
+    </style>
+</head>
+<body>
+    <div class="std"><!-- no whitespace
+    -->ppppp<!-- no whitespace
+    --><select>
+      <option>ppppp</option>
+    </select><!-- no whitespace
+    -->ppppp<!-- no whitespace
+    --></div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-010-ref.html b/layout/reftests/high-contrast/backplate-bg-image-010-ref.html
new file mode 100644
index 0000000000..1472791cde
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-010-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<title>Reference: Only lines containing visible content (visibility: visible) should receive backplates.</title>
+<style>
+  .outer {
+    background-image: url("blue.png");
+  }
+  .hidden {
+    visibility: hidden;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .fake-backplate {
+    background-color: white;
+  }
+</style>
+<div class="outer">
+  <div>
+    <span class="fake-backplate">AAAA</span>
+    <div class="hidden">BBBB</div>
+    <span class="fake-backplate">CCCC</span>
+    <div class="hidden">
+      DDDD
+      <div class="visible"><span class="fake-backplate">EEEE</span></div>
+      FFFF
+    </div>
+  </div>
+  <div class="fake-backplate" style="display: inline-block;">
+    <span class="fake-backplate">GGGG</span>
+    <br>
+    <span class="fake-backplate">HHHH</span>
+    <span class="hidden">IIII</span>
+    <span class="fake-backplate">JJJJ</span>
+    <span class="hidden">
+      KKKK
+      <span class="visible fake-backplate">LLLL</span>
+      MMMM
+    </span>
+    <span class="fake-backplate">NNNN</span>
+    <span class="hidden">
+      <span style="display:inline-block">
+        1
+        <span class="visible fake-backplate">2</span>
+      </span>
+      <span style="display:inline-block" class="visible fake-backplate">
+        3
+      </span>
+    4
+  </span>
+  </div>
+</div>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-010.html b/layout/reftests/high-contrast/backplate-bg-image-010.html
new file mode 100644
index 0000000000..b6bb4cd83b
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>Only lines containing visible content (visibility: visible) should receive backplates.</title>
+<style>
+  .outer {
+    background-image: url("blue.png");
+  }
+  .hidden {
+    visibility: hidden;
+  }
+  .visible {
+    visibility: visible;
+  }
+</style>
+<div class="outer">
+  <div>
+    AAAA<!-- no whitespace between elements
+    --><div class="hidden">BBBB</div><!-- no whitespace between elements
+    -->CCCC<!-- no whitespace between elements
+    --><div class="hidden">
+      DDDD
+      <div class="visible">EEEE</div>
+      FFFF
+    </div>
+  </div>
+  GGGG
+  <br>
+  HHHH
+  <span class="hidden">IIII</span>
+  JJJJ
+  <span class="hidden">
+    KKKK
+    <span class="visible">LLLL</span>
+    MMMM
+  </span>
+  NNNN
+  <span class="hidden">
+    <span style="display:inline-block">
+      1
+      <span class="visible">2</span>
+    </span>
+    <span style="display:inline-block" class="visible">
+      3
+    </span>
+    4<!-- no whitespace between elements
+  --></span>
+</div>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-011-ref.html b/layout/reftests/high-contrast/backplate-bg-image-011-ref.html
new file mode 100644
index 0000000000..7e13b2b3ec
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-011-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Reference: Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
+<style>
+  .outer {
+    background: url("blue.png");
+  }
+  div {
+    margin-bottom: 30px;
+  }
+  .fake-backplate {
+    background-color: white;
+  }
+</style>
+<div class="outer">
+  <div><span class="fake-backplate">div</span></div>
+  <div style="margin-left: 30px"><span class="fake-backplate">div w/ margin-left</span></div>
+  <div><span style="margin-left: 100px" class="fake-backplate">span w/ margin-left</span></div>
+  <div><span><span style="margin: 0px 100px" class="fake-backplate">nested span w/ margin on inner</span></span></div>
+  <div><span style="padding: 0px 50px"><span class="fake-backplate">span w/ padding</span></span></div>
+  <div><span style="border: 10px dotted black"><span class="fake-backplate">span w/ thick dotted border</span></span></div>
+  <div style="text-align: center"><span class="fake-backplate">div w/ text-align:center</span></div>
+  <div style="text-align: right"><span class="fake-backplate">div w/ text-align:right</span></div>
+  <div style="direction: rtl; text-align: center"><span class="fake-backplate">div w/ RTL &amp; text-align:center</span></div>
+  <div style="text-indent: 200px"><span class="fake-backplate">div w/ text-indent</span></div>
+</div>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-011.html b/layout/reftests/high-contrast/backplate-bg-image-011.html
new file mode 100644
index 0000000000..9abfe3f2b0
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-011.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>Backplates should not include margins, indentation, padding, border space, or text-alignment space.</title>
+<style>
+  .outer {
+    background: url("blue.png");
+  }
+  div {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="outer">
+  <div>div</div>
+  <div style="margin-left: 30px">div w/ margin-left</div>
+  <div><span style="margin-left: 100px">span w/ margin-left</span></div>
+  <div><span><span style="margin: 0px 100px">nested span w/ margin on inner</span></span></div>
+  <div><span style="padding: 0px 50px">span w/ padding</span></div>
+  <div><span style="border: 10px dotted purple">span w/ thick dotted border</span></div>
+  <div style="text-align: center">div w/ text-align:center</div>
+  <div style="text-align: right">div w/ text-align:right</div>
+  <div style="direction: rtl; text-align: center">div w/ RTL &amp; text-align:center</div>
+  <div style="text-indent: 200px">div w/ text-indent</div>
+</div>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-012-ref.html b/layout/reftests/high-contrast/backplate-bg-image-012-ref.html
new file mode 100644
index 0000000000..d539fe1731
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-012-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>Reference: Empty canvas objects and images that do not share lines with text should not receive backplates.</title>
+<style>
+  .outer {
+    background-image: url("blue.png");
+  }
+  canvas {
+    height: 100px;
+    width: 100px;
+  }
+  .fake-backplate {
+    background-color: white;
+  }
+</style>
+<div class="outer">
+  <canvas></canvas>
+  <br>
+  <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style="border:1px solid black; height:100px; width:100px;">
+  <br>
+  <span class="fake-backplate">Here is some alt text</span>
+</div>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-012.html b/layout/reftests/high-contrast/backplate-bg-image-012.html
new file mode 100644
index 0000000000..39c1d854d7
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-012.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Empty canvas objects and images that do not share lines with text should not receive backplates.</title>
+<style>
+  .outer {
+    background-image: url("blue.png");
+  }
+  canvas {
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<div class="outer">
+  <canvas></canvas>
+  <br>
+  <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style="border:1px solid black; height:100px; width:100px;">
+  <br>
+  <img src="data:image/png," alt="Here is some alt text">
+</div>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-013-ref.html b/layout/reftests/high-contrast/backplate-bg-image-013-ref.html
new file mode 100644
index 0000000000..dddbf9816e
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-013-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Reference: Whitespace-only text over images should not receive backplates.</title>
+    <style>
+        div {
+            position: absolute;
+        }
+        .bg {
+            background-image: url("red.png");
+            height: 20px;
+            width: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="bg"></div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-013.html b/layout/reftests/high-contrast/backplate-bg-image-013.html
new file mode 100644
index 0000000000..6215184e39
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-013.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Whitespace-only text over images should not receive backplates.</title>
+    <style>
+        div {
+            position: absolute;
+        }
+        .bg {
+            background-image: url("red.png");
+            height: 20px;
+            width: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="bg"></div>
+    <div>&nbsp;</div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-bg-image-014.html b/layout/reftests/high-contrast/backplate-bg-image-014.html
new file mode 100644
index 0000000000..a3a8ea29fe
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-bg-image-014.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <title>Text that overlaps a background image should be backplated with multiple layers.</title>
+  <style>
+    div {
+      font: 20px Ahem;
+      background-image: url("blue.png"), none;
+    }
+    </style>
+</head>
+<div>
+  ppppp ppppp
+</div>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-force-color-adjust-ref.html b/layout/reftests/high-contrast/backplate-force-color-adjust-ref.html
new file mode 100644
index 0000000000..37e09fba29
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-force-color-adjust-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Reference: Text with forced-color-adjust set to none should not be backplated.</title>
+  <style>
+    div {
+      background-image: url("blue.png");
+      color: yellow;
+    }
+    </style>
+</head>
+<div>
+  Yellow Text
+</div>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-force-color-adjust.html b/layout/reftests/high-contrast/backplate-force-color-adjust.html
new file mode 100644
index 0000000000..271510902a
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-force-color-adjust.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Text with forced-color-adjust set to none should not be backplated.</title>
+  <style>
+    div {
+      forced-color-adjust: none;
+      background-image: url("blue.png");
+      color: yellow;
+    }
+    </style>
+</head>
+<div>
+  Yellow Text
+</div>
+</html>
diff --git a/layout/reftests/high-contrast/backplate-select-001-ref.html b/layout/reftests/high-contrast/backplate-select-001-ref.html
new file mode 100644
index 0000000000..efa3a40596
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-select-001-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<title>Reference: Multiple select's should have all options visible even when highlighted in high contrast mode. Options should render with backplates that are the same color as the select, or the applied highlight.</title>
+<select multiple="multiple" autofocus>
+  <option>1</option>
+  <option selected="selected">2</option>
+  <option>3</option>
+</select>
diff --git a/layout/reftests/high-contrast/backplate-select-001.html b/layout/reftests/high-contrast/backplate-select-001.html
new file mode 100644
index 0000000000..2dd819c695
--- /dev/null
+++ b/layout/reftests/high-contrast/backplate-select-001.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<title>Multiple select's should have all options visible even when highlighted in high contrast mode. Options should render with backplates that are the same color as the select, or the applied highlight.</title>
+<select multiple="multiple" autofocus>
+  <option>1</option>
+  <option selected="selected">2</option>
+  <option>3</option>
+</select>
diff --git a/layout/reftests/high-contrast/bg-image-div-001-ref.html b/layout/reftests/high-contrast/bg-image-div-001-ref.html
new file mode 100644
index 0000000000..0f240809c0
--- /dev/null
+++ b/layout/reftests/high-contrast/bg-image-div-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Reference: Non-URL background images should be ignored high-contrast.</title>
+  <style>
+    .outer {
+      background-image: url("blue.png");
+    }
+    .size {
+      height: 100px;
+      width: 100px;
+    }
+    .url {
+      background-image: url("green.png");
+    }
+  </style>
+</head>
+<body>
+  <div class="outer">
+    <div class="size url"></div><br>
+    <div class="size"></div></br>
+    <div class="size"></div><br>
+    <div class="size"></div><br>
+    <div class="size url"></div><br>
+    <div class="size"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/bg-image-div-001.html b/layout/reftests/high-contrast/bg-image-div-001.html
new file mode 100644
index 0000000000..8764901fb5
--- /dev/null
+++ b/layout/reftests/high-contrast/bg-image-div-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>When HCM is enabled, only background images sourced from URL's should be rendered. </title>
+  <style>
+    .outer {
+      background-image: url("blue.png");
+    }
+    .size {
+      height: 100px;
+      width: 100px;
+    }
+    .gradient {
+      background-image: linear-gradient(red, red);
+    }
+    .url {
+      background-image: url("green.png");
+    }
+    .urlGradient {
+      background-image: url("red.png"), linear-gradient(red, red);
+    }
+    .gradientUrl {
+      background-image: linear-gradient(red, red), url("red.png");
+    }
+    .urlNone {
+      background-image: url("red.png");
+      background-image: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="outer">
+    <div class="size url"></div><br>
+    <div class="size gradient"></div></br>
+    <div class="size urlGradient"></div><br>
+    <div class="size gradientUrl"></div><br>
+    <div class="size url gradient"></div><br>
+    <div class="size urlNone"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/bg-image-div-002-ref.html b/layout/reftests/high-contrast/bg-image-div-002-ref.html
new file mode 100644
index 0000000000..17d816f7f6
--- /dev/null
+++ b/layout/reftests/high-contrast/bg-image-div-002-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+  .outer {
+    /* Invert color/background so that it has more chances to disagree with the default background-color. */
+    color: Menu;
+    background-color: MenuText;
+  }
+  .inner {
+    height: 100px;
+    width: 100px;
+    padding: 10px;
+  }
+</style>
+<div class="outer">
+  <div class="inner">X</div>
+</div>
diff --git a/layout/reftests/high-contrast/bg-image-div-002.html b/layout/reftests/high-contrast/bg-image-div-002.html
new file mode 100644
index 0000000000..77f6018037
--- /dev/null
+++ b/layout/reftests/high-contrast/bg-image-div-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+  .outer {
+    /* Invert color/background so that it has more chances to disagree with the default background-color. */
+    color: Menu;
+    background-color: MenuText;
+  }
+  .inner {
+    height: 100px;
+    width: 100px;
+    padding: 10px;
+    background-image: url("green.png");
+    background-size: 0 0;
+  }
+</style>
+<div class="outer">
+  <div class="inner">X</div>
+</div>
diff --git a/layout/reftests/high-contrast/bg-image-root-001-ref.html b/layout/reftests/high-contrast/bg-image-root-001-ref.html
new file mode 100644
index 0000000000..c50eddd41f
--- /dev/null
+++ b/layout/reftests/high-contrast/bg-image-root-001-ref.html
@@ -0,0 +1 @@
+<!doctype html>
diff --git a/layout/reftests/high-contrast/bg-image-root-001.html b/layout/reftests/high-contrast/bg-image-root-001.html
new file mode 100644
index 0000000000..8aef792394
--- /dev/null
+++ b/layout/reftests/high-contrast/bg-image-root-001.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<title>background-image on canvas is ignored if in high-contrast</title>
+<style>
+body {
+  background-image: url("red.png");
+}
+</style>
diff --git a/layout/reftests/high-contrast/blue.png b/layout/reftests/high-contrast/blue.png
new file mode 100644
index 0000000000..a64b6a4255
--- /dev/null
+++ b/layout/reftests/high-contrast/blue.png
diff --git a/layout/reftests/high-contrast/border-color-transparent-ref.html b/layout/reftests/high-contrast/border-color-transparent-ref.html
new file mode 100644
index 0000000000..f0e7f94566
--- /dev/null
+++ b/layout/reftests/high-contrast/border-color-transparent-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<style>
+  div {
+    border: 100px solid black;
+  }
+</style>
+<div></div>
diff --git a/layout/reftests/high-contrast/border-color-transparent.html b/layout/reftests/high-contrast/border-color-transparent.html
new file mode 100644
index 0000000000..74e761b48f
--- /dev/null
+++ b/layout/reftests/high-contrast/border-color-transparent.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<style>
+  div {
+    border: 100px solid transparent;
+  }
+</style>
+<div></div>
diff --git a/layout/reftests/high-contrast/cascade-001.html b/layout/reftests/high-contrast/cascade-001.html
new file mode 100644
index 0000000000..9fdf1ae1ae
--- /dev/null
+++ b/layout/reftests/high-contrast/cascade-001.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<style>
+body { margin: 0 }
+
+div {
+  width: 100vw;
+  height: 100vh;
+  color: transparent;
+}
+
+div {
+  color: black;
+}
+</style>
+<div>You should see me</div>
diff --git a/layout/reftests/high-contrast/color-mix-notref.html b/layout/reftests/high-contrast/color-mix-notref.html
new file mode 100644
index 0000000000..e2d92fc589
--- /dev/null
+++ b/layout/reftests/high-contrast/color-mix-notref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<p>
+  I should be semi-transparent.
+</p>
diff --git a/layout/reftests/high-contrast/color-mix.html b/layout/reftests/high-contrast/color-mix.html
new file mode 100644
index 0000000000..967bf0abdd
--- /dev/null
+++ b/layout/reftests/high-contrast/color-mix.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+  p {
+    color: color-mix(in srgb, Canvas, transparent);
+  }
+</style>
+<p>
+  I should be semi-transparent.
+</p>
diff --git a/layout/reftests/high-contrast/color-transparent-001.html b/layout/reftests/high-contrast/color-transparent-001.html
new file mode 100644
index 0000000000..c317327b20
--- /dev/null
+++ b/layout/reftests/high-contrast/color-transparent-001.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>color: transparent should be honored in high contrast mode</title>
+<style>
+  p {
+    color: transparent;
+  }
+</style>
+<p>
+  I should not show up.
+</p>
diff --git a/layout/reftests/high-contrast/color-transparent-002.html b/layout/reftests/high-contrast/color-transparent-002.html
new file mode 100644
index 0000000000..7b625649e7
--- /dev/null
+++ b/layout/reftests/high-contrast/color-transparent-002.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>color: transparent should not make other text below it not show up</title>
+<style>
+  p {
+    color: transparent;
+  }
+  span {
+    color: red;
+  }
+</style>
+<p>
+  Only the <span>span</span> should show up.
+</p>
diff --git a/layout/reftests/high-contrast/currentColor-ref.html b/layout/reftests/high-contrast/currentColor-ref.html
new file mode 100644
index 0000000000..fd2f93acbe
--- /dev/null
+++ b/layout/reftests/high-contrast/currentColor-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+  div {
+    width: 50px;
+    height: 50px;
+    border: 1px solid SelectedItem;
+  }
+</style>
+<div></div>
diff --git a/layout/reftests/high-contrast/currentColor.html b/layout/reftests/high-contrast/currentColor.html
new file mode 100644
index 0000000000..ec298ac7a7
--- /dev/null
+++ b/layout/reftests/high-contrast/currentColor.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+  div {
+    width: 50px;
+    height: 50px;
+    border: 1px solid currentColor;
+    color: SelectedItem;
+  }
+</style>
+<div></div>
diff --git a/layout/reftests/high-contrast/forced-colors-000.html b/layout/reftests/high-contrast/forced-colors-000.html
new file mode 100644
index 0000000000..d6bdf536aa
--- /dev/null
+++ b/layout/reftests/high-contrast/forced-colors-000.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>forced colors should match when colors are forced</title>
+
+<style>
+    div {
+        width: 100px;
+        height: 100px;
+    }
+    @media(forced-colors: active) {
+        div {
+            outline: 2px solid black;
+        }
+    }
+</style>
+<div></div>
+
diff --git a/layout/reftests/high-contrast/forced-colors-001.html b/layout/reftests/high-contrast/forced-colors-001.html
new file mode 100644
index 0000000000..921cab8f30
--- /dev/null
+++ b/layout/reftests/high-contrast/forced-colors-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>forced colors active should be true in boolean context</title>
+<style>
+    div {
+        width: 100px;
+        height: 100px;
+    }
+    @media(forced-colors) {
+        div {
+            outline: 2px solid black;
+        }
+    }
+</style>
+<div></div>
+
diff --git a/layout/reftests/high-contrast/forced-colors-002.html b/layout/reftests/high-contrast/forced-colors-002.html
new file mode 100644
index 0000000000..213b99ea51
--- /dev/null
+++ b/layout/reftests/high-contrast/forced-colors-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>forced colors none should match with no forced colors</title>
+
+<style>
+    div {
+        width: 100px;
+        height: 100px;
+    }
+    @media(forced-colors: none) {
+        div {
+            outline: 2px solid black;
+        }
+    }
+</style>
+<div></div>
+
diff --git a/layout/reftests/high-contrast/green.png b/layout/reftests/high-contrast/green.png
new file mode 100644
index 0000000000..0aa79b0c86
--- /dev/null
+++ b/layout/reftests/high-contrast/green.png
diff --git a/layout/reftests/high-contrast/links-2.html b/layout/reftests/high-contrast/links-2.html
new file mode 100644
index 0000000000..23c28abf97
--- /dev/null
+++ b/layout/reftests/high-contrast/links-2.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<style>
+  span { color: hotpink }
+</style>
+<a href="">Should have <span>link</span> color, not default color</a>
diff --git a/layout/reftests/high-contrast/links-ref.html b/layout/reftests/high-contrast/links-ref.html
new file mode 100644
index 0000000000..f8ef95d194
--- /dev/null
+++ b/layout/reftests/high-contrast/links-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<a href="">Should have link color, not default color</a>
diff --git a/layout/reftests/high-contrast/links.html b/layout/reftests/high-contrast/links.html
new file mode 100644
index 0000000000..bdba108d04
--- /dev/null
+++ b/layout/reftests/high-contrast/links.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<style>
+  a { color: hotpink }
+</style>
+<a href="">Should have link color, not default color</a>
diff --git a/layout/reftests/high-contrast/no-system-colors-color-scheme-ref.html b/layout/reftests/high-contrast/no-system-colors-color-scheme-ref.html
new file mode 100644
index 0000000000..6320d22bc8
--- /dev/null
+++ b/layout/reftests/high-contrast/no-system-colors-color-scheme-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<style>
+  :root {
+    background-color: black;
+    color: white;
+  }
+  input {
+    font: inherit;
+    color: inherit;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+  }
+</style>
+XXX<br>
+<input value="XXX">
diff --git a/layout/reftests/high-contrast/no-system-colors-color-scheme.html b/layout/reftests/high-contrast/no-system-colors-color-scheme.html
new file mode 100644
index 0000000000..d4a9cf45b1
--- /dev/null
+++ b/layout/reftests/high-contrast/no-system-colors-color-scheme.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<style>
+  input {
+    font: inherit;
+    color: inherit;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+  }
+</style>
+XXX<br>
+<input value="XXX">
diff --git a/layout/reftests/high-contrast/non-themed-button-001-ref.html b/layout/reftests/high-contrast/non-themed-button-001-ref.html
new file mode 100644
index 0000000000..956e337dd5
--- /dev/null
+++ b/layout/reftests/high-contrast/non-themed-button-001-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  -moz-appearance: none;
+}
+</style>
+<button>Foo</button>
diff --git a/layout/reftests/high-contrast/non-themed-button-001.html b/layout/reftests/high-contrast/non-themed-button-001.html
new file mode 100644
index 0000000000..a13d0b7a08
--- /dev/null
+++ b/layout/reftests/high-contrast/non-themed-button-001.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+</style>
+<button>Foo</button>
diff --git a/layout/reftests/high-contrast/non-themed-button-002-ref.html b/layout/reftests/high-contrast/non-themed-button-002-ref.html
new file mode 100644
index 0000000000..45bf4517a2
--- /dev/null
+++ b/layout/reftests/high-contrast/non-themed-button-002-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+button {
+  background-color: red;
+  border: none;
+  padding: 0;
+}
+</style>
+<button>Foo</button>
diff --git a/layout/reftests/high-contrast/non-themed-button-002.html b/layout/reftests/high-contrast/non-themed-button-002.html
new file mode 100644
index 0000000000..c2ccf9a7f2
--- /dev/null
+++ b/layout/reftests/high-contrast/non-themed-button-002.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+button {
+  border: none;
+  padding: 0;
+  background-color: red;
+}
+</style>
+<button>Foo</button>
diff --git a/layout/reftests/high-contrast/prefers-contrast-001.html b/layout/reftests/high-contrast/prefers-contrast-001.html
new file mode 100644
index 0000000000..0e94012ed8
--- /dev/null
+++ b/layout/reftests/high-contrast/prefers-contrast-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>low, fixed, and high should all evaluate to true in the boolean context.</title>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+  }
+  @media(prefers-contrast) {
+    div {
+      outline: 2px solid black;
+    }
+  }
+</style>
+<div></div>
diff --git a/layout/reftests/high-contrast/prefers-contrast-002.html b/layout/reftests/high-contrast/prefers-contrast-002.html
new file mode 100644
index 0000000000..56bd8329bb
--- /dev/null
+++ b/layout/reftests/high-contrast/prefers-contrast-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>high contrast mode should cause a black box to be drawn</title>
+
+<style type="text/css">
+    div {
+        width: 100px;
+        height: 100px;
+    }
+    @media (prefers-contrast: more) {
+        div {
+            outline: 2px solid #000000;
+        }
+    }
+</style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
+
diff --git a/layout/reftests/high-contrast/prefers-contrast-005.html b/layout/reftests/high-contrast/prefers-contrast-005.html
new file mode 100644
index 0000000000..4009804174
--- /dev/null
+++ b/layout/reftests/high-contrast/prefers-contrast-005.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>no contrast preference should cause a black box to be
+drawn</title>
+
+<style type="text/css">
+    div {
+        width: 100px;
+        height: 100px;
+    }
+    @media(prefers-contrast: no-preference) {
+        div {
+            outline: 2px solid black;
+        }
+    }
+</style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/high-contrast/prefers-contrast-black-ref.html b/layout/reftests/high-contrast/prefers-contrast-black-ref.html
new file mode 100644
index 0000000000..67385886f5
--- /dev/null
+++ b/layout/reftests/high-contrast/prefers-contrast-black-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>reference: a black box to test the prefers-contrast media query</title>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    outline: 2px solid black;
+  }
+</style>
+<div></div>
diff --git a/layout/reftests/high-contrast/red.png b/layout/reftests/high-contrast/red.png
new file mode 100644
index 0000000000..a6e195d59c
--- /dev/null
+++ b/layout/reftests/high-contrast/red.png
diff --git a/layout/reftests/high-contrast/reftest.list b/layout/reftests/high-contrast/reftest.list
new file mode 100644
index 0000000000..784d672205
--- /dev/null
+++ b/layout/reftests/high-contrast/reftest.list
@@ -0,0 +1,103 @@
+# This pref enables high-contrast mode in the testcases here:
+defaults test-pref(browser.display.document_color_use,2) test-pref(browser.display.permit_backplate,true) test-pref(layout.css.prefers-contrast.enabled,true) test-pref(layout.css.forced-colors.enabled,true) test-pref(browser.display.foreground_color,"#000000") test-pref(browser.display.background_color,"#FFFFFF") pref(ui.use_standins_for_native_colors,true) pref(widget.non-native-theme.always-high-contrast,true)
+
+# There are several platform-specific fuzzy-if notations below due to
+# anti-aliasing, extra ink overflow, and slightly inacurate reftest
+# mocking. You can read more about the annotations and their specifics here:
+# https://bugzilla.mozilla.org/show_bug.cgi?id=1539212#c25
+
+== backplate-select-001.html backplate-select-001-ref.html
+
+fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-001.html backplate-bg-image-001-ref.html # bug 1577028
+fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-002.html backplate-bg-image-002-ref.html
+fuzzy-if(cocoaWidget,255-255,4-4) == backplate-bg-image-003.html backplate-bg-image-003-ref.html
+fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-004.html backplate-bg-image-004-ref.html
+fuzzy-if(cocoaWidget,255-255,80-80) == backplate-bg-image-005.html backplate-bg-image-005-ref.html
+
+fuzzy-if(cocoaWidget,255-255,40-40) == backplate-bg-image-006.html backplate-bg-image-006-ref.html
+
+fuzzy-if(cocoaWidget,255-255,40-40) == backplate-bg-image-007.html backplate-bg-image-007-ref.html
+fuzzy-if(cocoaWidget,255-255,20-20) fuzzy-if(!cocoaWidget,0-21,0-6) == backplate-bg-image-008.html backplate-bg-image-008-ref.html
+fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-009.html backplate-bg-image-009-ref.html
+fuzzy-if(cocoaWidget,255-255,1495-1495) fuzzy-if(winWidget,255-255,353-353) fuzzy-if(Android,255-255,700-700) == backplate-bg-image-010.html backplate-bg-image-010-ref.html
+random-if(useDrawSnapshot) fuzzy-if(cocoaWidget,255-255,284-320) == backplate-bg-image-011.html backplate-bg-image-011-ref.html
+fuzzy-if(cocoaWidget,255-255,16-16) == backplate-bg-image-012.html backplate-bg-image-012-ref.html
+== backplate-bg-image-013.html backplate-bg-image-013-ref.html
+fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-014.html backplate-bg-image-001-ref.html # bug 1577028
+
+test-pref(browser.display.suppress_canvas_background_image_on_forced_colors,true) == bg-image-root-001.html bg-image-root-001-ref.html
+test-pref(browser.display.suppress_canvas_background_image_on_forced_colors,false) != bg-image-root-001.html bg-image-root-001-ref.html
+
+== bg-image-div-001.html bg-image-div-001-ref.html
+== bg-image-div-002.html bg-image-div-002-ref.html
+
+needs-focus == selection-001.html selection-001-ref.html
+pref(browser.display.document_color_use,0) needs-focus != selection-001.html selection-001-ref.html
+
+== color-transparent-001.html about:blank
+!= color-transparent-002.html about:blank
+!= semi-transparent-overlay.html about:blank
+!= semi-transparent-overlay.html semi-transparent-background.html
+
+== links.html links-ref.html
+== links-2.html links-ref.html
+
+pref(browser.display.document_color_use,2) == non-themed-button-001.html non-themed-button-001-ref.html
+pref(browser.display.document_color_use,2) == non-themed-button-002.html non-themed-button-002-ref.html
+
+!= cascade-001.html about:blank
+
+# prefers-contrast media query:
+
+# Forced colors affects prefers-contrast.
+== prefers-contrast-001.html prefers-contrast-black-ref.html
+# high should match when an accessibility theme is used
+test-pref(ui.windowForeground,"black") test-pref(ui.windowBackground,"white") test-pref(ui.useAccessibilityTheme,1) == prefers-contrast-001.html prefers-contrast-black-ref.html
+
+# high should match when an accessibility theme is being used
+test-pref(ui.windowForeground,"black") test-pref(ui.windowBackground,"white") test-pref(ui.useAccessibilityTheme,1) == prefers-contrast-002.html prefers-contrast-black-ref.html
+
+# If RFP is on the media query stops evaluating contrast preferences and
+# defaults to no-preference.
+test-pref(privacy.resistFingerprinting,true) != prefers-contrast-001.html prefers-contrast-black-ref.html
+# high should not match when RFP is enabled.
+test-pref(ui.windowForeground,"black") test-pref(ui.windowBackground,"white") test-pref(privacy.resistFingerprinting,true) test-pref(ui.useAccessibilityTheme,1) != prefers-contrast-002.html prefers-contrast-black-ref.html
+
+# Should only be enabled behind preference.
+test-pref(layout.css.prefers-contrast.enabled,false) != prefers-contrast-001.html prefers-contrast-black-ref.html
+
+# a prefers-contrast value of no-preference should evaluate to false
+# in the boolean context
+test-pref(browser.display.document_color_use,0) != prefers-contrast-001.html prefers-contrast-black-ref.html
+
+# a prefers-contrast value of no-preference should match no-preference
+test-pref(browser.display.document_color_use,0) == prefers-contrast-005.html prefers-contrast-black-ref.html
+
+# forced-colors media query
+
+# active
+== forced-colors-000.html prefers-contrast-black-ref.html
+test-pref(browser.display.document_color_use,0) != forced-colors-000.html prefers-contrast-black-ref.html
+
+# none
+test-pref(browser.display.document_color_use,0) == forced-colors-002.html prefers-contrast-black-ref.html
+!= forced-colors-002.html prefers-contrast-black-ref.html
+
+# boolean context
+== forced-colors-001.html prefers-contrast-black-ref.html
+test-pref(browser.display.document_color_use,0) != forced-colors-001.html prefers-contrast-black-ref.html
+
+pref(browser.display.use_system_colors,true) pref(browser.display.document_color_use,0) test-pref(layout.css.prefers-color-scheme.content-override,0) != about:blank about:blank
+
+!= system-colors.html system-colors-notref.html
+
+!= border-color-transparent.html about:blank
+== border-color-transparent.html border-color-transparent-ref.html
+== currentColor.html currentColor-ref.html
+
+pref(layout.css.color-mix.enabled,true) != color-mix.html color-mix-notref.html
+
+test-pref(browser.display.background_color,"black") test-pref(browser.display.foreground_color,"white") test-pref(ui.-moz-fieldtext,"black") test-pref(ui.-moz-fieldtext.dark,"white") pref(ui.use_standins_for_native_colors,false) pref(browser.display.use_system_colors,false) == no-system-colors-color-scheme.html no-system-colors-color-scheme-ref.html
+
+# Forced color adjust
+pref(layout.css.forced-color-adjust.enabled,true) == backplate-force-color-adjust.html backplate-force-color-adjust-ref.html
diff --git a/layout/reftests/high-contrast/selection-001-ref.html b/layout/reftests/high-contrast/selection-001-ref.html
new file mode 100644
index 0000000000..55a43aafd0
--- /dev/null
+++ b/layout/reftests/high-contrast/selection-001-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>Test reference</title>
+<p>
+  Some selected text
+</p>
+<script>
+getSelection().removeAllRanges();
+let r = document.createRange();
+r.selectNode(document.documentElement);
+getSelection().addRange(r);
+</script>
diff --git a/layout/reftests/high-contrast/selection-001.html b/layout/reftests/high-contrast/selection-001.html
new file mode 100644
index 0000000000..2d3cabdf0c
--- /dev/null
+++ b/layout/reftests/high-contrast/selection-001.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<title>::selection should use native colors in high contrast mode</title>
+<style>
+::selection {
+  background: purple;
+  color: blue;
+}
+</style>
+<p>
+  Some selected text
+</p>
+<script>
+getSelection().removeAllRanges();
+let r = document.createRange();
+r.selectNode(document.documentElement);
+getSelection().addRange(r);
+</script>
diff --git a/layout/reftests/high-contrast/semi-transparent-background.html b/layout/reftests/high-contrast/semi-transparent-background.html
new file mode 100644
index 0000000000..8902d19fcb
--- /dev/null
+++ b/layout/reftests/high-contrast/semi-transparent-background.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+.container {
+  position: relative;
+  background-color: rgba(0, 0, 0, .2);
+}
+</style>
+<div class="container">
+  <a href="#"></a>
+  Some text that you should be able to read.
+</div>
diff --git a/layout/reftests/high-contrast/semi-transparent-overlay.html b/layout/reftests/high-contrast/semi-transparent-overlay.html
new file mode 100644
index 0000000000..76f2542ee4
--- /dev/null
+++ b/layout/reftests/high-contrast/semi-transparent-overlay.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<style>
+.container {
+  position: relative;
+}
+a {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, .2);
+}
+</style>
+<div class="container">
+  <a href="#"></a>
+  Some text that you should be able to read.
+</div>
diff --git a/layout/reftests/high-contrast/system-colors-notref.html b/layout/reftests/high-contrast/system-colors-notref.html
new file mode 100644
index 0000000000..9b3770924e
--- /dev/null
+++ b/layout/reftests/high-contrast/system-colors-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<div>ABC</div>
diff --git a/layout/reftests/high-contrast/system-colors.html b/layout/reftests/high-contrast/system-colors.html
new file mode 100644
index 0000000000..44b33287ef
--- /dev/null
+++ b/layout/reftests/high-contrast/system-colors.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<div style="background-color: highlight; color: highlighttext;">ABC</div>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
commit	36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree	105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/high-contrast
parent	Initial commit. (diff)
download	firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip