1 files changed, 82 insertions, 0 deletions
diff --git a/layout/style/test/test_mq_prefers_contrast_dynamic.html b/layout/style/test/test_mq_prefers_contrast_dynamic.html
new file mode 100644
index 0000000000..c3ccebbe82
--- /dev/null
+++ b/layout/style/test/test_mq_prefers_contrast_dynamic.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1691793
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test for Bug 1691793</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1691793">Mozilla Bug 1691793</a>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+<script>
+"use strict";
+
+SimpleTest.registerCleanupFunction(async () => {
+  await SpecialPowers.flushPrefEnv();
+});
+
+// Returns a Promise which will be resolved when the "change" event is received
+// for the given media query string.
+function promiseForChange(mediaQuery) {
+  return new Promise(resolve => {
+    window.matchMedia(mediaQuery).addEventListener("change", event => {
+      resolve(event.matches);
+    }, { once: true });
+  });
+}
+
+add_task(async () => {
+  await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-contrast.enabled", true]]});
+  const initiallyMatches =
+    window.matchMedia("(prefers-contrast: more)").matches;
+  const changePromise = initiallyMatches ?
+    promiseForChange("(prefers-contrast: more)") : null;
+  await SpecialPowers.pushPrefEnv({ set: [["ui.useAccessibilityTheme", 0]]});
+
+  if (changePromise) {
+    await changePromise;
+  }
+
+  ok(!window.matchMedia("(prefers-contrast: more)").matches,
+     "Does not match prefers-contrast: more) when the system unsets " +
+     "UseAccessibilityTheme");
+  ok(!window.matchMedia("(prefers-contrast)").matches,
+     "Does not match (prefers-contrast) when the system unsets " +
+     "UseAccessibilityTheme");
+  ok(window.matchMedia("(prefers-contrast: no-preference)").matches,
+     "Matches (prefers-contrast: no-preference) when the system unsets " +
+     "UseAccessibilityTheme");
+});
+
+add_task(async () => {
+  const more = promiseForChange("(prefers-contrast: more)");
+  const booleanContext = promiseForChange("(prefers-contrast)");
+  const noPreference = promiseForChange("(prefers-contrast: no-preference)");
+
+  await SpecialPowers.pushPrefEnv({ set: [["ui.useAccessibilityTheme", 1]]});
+
+  const [ moreResult, booleanContextResult, noPreferenceResult ] =
+    await Promise.all([ more, booleanContext, noPreference ]);
+
+  ok(moreResult,
+     "Matches (prefers-contrast: more) when the system sets " +
+     "UseAccessibilityTheme");
+  ok(booleanContextResult,
+     "Matches (prefers-contrast) when the system sets UseAccessibilityTheme");
+  ok(!noPreferenceResult,
+     "Does not match (prefers-contrast: no-preference) when the " +
+     "system sets UseAccessibilityTheme");
+});
+
+</script>
+</body>
+</html>