layout/style/test/test_mq_prefers_reduced_motion_dynamic.html
author Byron Campen <docfaraday@gmail.com>
Mon, 20 Sep 2021 16:45:53 +0000
changeset 592504 20b482455364fc14118bd32de96ae52cc81c7f3a
parent 531474 7ded7f391f1b90c8ccc81bf151d289a802470317
permissions -rw-r--r--
Bug 1651268: Make sure the pre-run code for FindExpirationTime waits for timers to fire on all threads. r=xpcom-reviewers,nika Differential Revision: https://phabricator.services.mozilla.com/D125603

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1486971
-->
<head>
  <meta charset="utf-8">
  <title>Test for Bug 1478519</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=1486971">Mozilla Bug 1486971</a>
<p id="display"></p>
<div id="content" style="display: none">

</div>
<pre id="test">
</pre>
<script>
'use strict';

async function waitForFrame() {
  return new Promise(resolve => {
    window.requestAnimationFrame(resolve);
  });
}

// Returns a Promise which will be resolved when the 'change' event is received
// for the given media query string.
async function promiseForChange(mediaQuery) {
  return new Promise(resolve => {
    window.matchMedia(mediaQuery).addEventListener('change', event => {
      resolve(event.matches);
    }, { once: true });
  });
}

add_task(async () => {
  const initiallyMatches =
      window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const changePromise = initiallyMatches ? promiseForChange('(prefers-reduced-motion: reduce)') : null;

  await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 0]]});

  if (changePromise) {
    await changePromise;
  }

  ok(!window.matchMedia('(prefers-reduced-motion: reduce)').matches,
     'Does not matches prefers-reduced-motion: reduced) when the system sets ' +
     'prefers-reduced-motion false');
  ok(!window.matchMedia('(prefers-reduced-motion)').matches,
     'Does not matches (prefers-reduced-motion) when the system sets ' +
     'prefers-reduced-motion false');
  ok(window.matchMedia('(prefers-reduced-motion: no-preference)').matches,
     'Matches (prefers-reduced-motion: no-preference) when the system sets ' +
     'prefers-reduced-motion false');
});

add_task(async () => {
  const reduce = promiseForChange('(prefers-reduced-motion: reduce)');
  const booleanContext = promiseForChange('(prefers-reduced-motion)');
  const noPreference = promiseForChange('(prefers-reduced-motion: no-preference)');

  await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 1]]});

  const [ reduceResult, booleanContextResult, noPreferenceResult ] =
    await Promise.all([ reduce, booleanContext, noPreference ]);

  ok(reduceResult,
     'Matches (prefers-reduced-motion: reduced) when the system sets ' +
     'prefers-reduced-motion true');
  ok(booleanContextResult,
     'Matches (prefers-reduced-motion) when the system sets ' +
     'prefers-reduced-motion true');
  ok(!noPreferenceResult,
     'Does not matches (prefers-reduced-motion: no-preference) when the ' +
     'system sets prefers-reduced-motion true');

  await SpecialPowers.flushPrefEnv();
});
</script>
</body>
</html>