tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_mq_prefers_reduced_motion_dynamic.html (2828B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=1486971
      5 -->
      6 <head>
      7  <meta charset="utf-8">
      8  <title>Test for Bug 1478519</title>
      9  <script src="/tests/SimpleTest/SimpleTest.js"></script>
     10  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
     11 </head>
     12 <body>
     13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1486971">Mozilla Bug 1486971</a>
     14 <p id="display"></p>
     15 <div id="content" style="display: none">
     16 
     17 </div>
     18 <pre id="test">
     19 </pre>
     20 <script>
     21 'use strict';
     22 
     23 async function waitForFrame() {
     24  return new Promise(resolve => {
     25    window.requestAnimationFrame(resolve);
     26  });
     27 }
     28 
     29 // Returns a Promise which will be resolved when the 'change' event is received
     30 // for the given media query string.
     31 async function promiseForChange(mediaQuery) {
     32  return new Promise(resolve => {
     33    window.matchMedia(mediaQuery).addEventListener('change', event => {
     34      resolve(event.matches);
     35    }, { once: true });
     36  });
     37 }
     38 
     39 add_task(async () => {
     40  const initiallyMatches =
     41      window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     42 
     43  const changePromise = initiallyMatches ? promiseForChange('(prefers-reduced-motion: reduce)') : null;
     44 
     45  await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 0]]});
     46 
     47  if (changePromise) {
     48    await changePromise;
     49  }
     50 
     51  ok(!window.matchMedia('(prefers-reduced-motion: reduce)').matches,
     52     'Does not matches prefers-reduced-motion: reduced) when the system sets ' +
     53     'prefers-reduced-motion false');
     54  ok(!window.matchMedia('(prefers-reduced-motion)').matches,
     55     'Does not matches (prefers-reduced-motion) when the system sets ' +
     56     'prefers-reduced-motion false');
     57  ok(window.matchMedia('(prefers-reduced-motion: no-preference)').matches,
     58     'Matches (prefers-reduced-motion: no-preference) when the system sets ' +
     59     'prefers-reduced-motion false');
     60 });
     61 
     62 add_task(async () => {
     63  const reduce = promiseForChange('(prefers-reduced-motion: reduce)');
     64  const booleanContext = promiseForChange('(prefers-reduced-motion)');
     65  const noPreference = promiseForChange('(prefers-reduced-motion: no-preference)');
     66 
     67  await SpecialPowers.pushPrefEnv({ set: [['ui.prefersReducedMotion', 1]]});
     68 
     69  const [ reduceResult, booleanContextResult, noPreferenceResult ] =
     70    await Promise.all([ reduce, booleanContext, noPreference ]);
     71 
     72  ok(reduceResult,
     73     'Matches (prefers-reduced-motion: reduced) when the system sets ' +
     74     'prefers-reduced-motion true');
     75  ok(booleanContextResult,
     76     'Matches (prefers-reduced-motion) when the system sets ' +
     77     'prefers-reduced-motion true');
     78  ok(!noPreferenceResult,
     79     'Does not matches (prefers-reduced-motion: no-preference) when the ' +
     80     'system sets prefers-reduced-motion true');
     81 
     82  await SpecialPowers.flushPrefEnv();
     83 });
     84 </script>
     85 </body>
     86 </html>