tor-browser

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

test_emulateMedium.html (4701B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=819930
      5 -->
      6 <meta charset="utf-8">
      7 <title>Test for Bug 819930</title>
      8 <script src="/tests/SimpleTest/SimpleTest.js"></script>
      9 <script src="/tests/SimpleTest/WindowSnapshot.js"></script>
     10 <link rel="stylesheet" href="/tests/SimpleTest/test.css" />
     11 <style>
     12  @media braille {
     13    body {
     14      background-color: rgb(255, 255, 0);
     15    }
     16  }
     17 
     18  @media embossed {
     19    body {
     20      background-color: rgb(210, 180, 140);
     21    }
     22  }
     23 
     24  @media handheld {
     25    body {
     26      background-color: rgb(0, 255, 0);
     27    }
     28  }
     29 
     30  @media print {
     31    body {
     32      background-color: rgb(0, 255, 255);
     33    }
     34  }
     35 
     36  @media projection {
     37    body {
     38      background-color: rgb(30, 144, 255);
     39    }
     40  }
     41 
     42  @media screen {
     43    body {
     44      background-color: green;
     45    }
     46  }
     47 
     48  @media speech {
     49    body {
     50      background-color: rgb(192, 192, 192);
     51    }
     52  }
     53 
     54  @media tty {
     55    body {
     56      background-color: rgb(255, 192, 203);
     57    }
     58  }
     59 
     60  @media tv {
     61    body {
     62      background-color: rgb(75, 0, 130);
     63    }
     64  }
     65 </style>
     66 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=819930">Mozilla Bug 819930</a>
     67 <p id="display"></p>
     68 
     69 <div id="content" style="display: none"></div>
     70 
     71 <script>
     72 function waitForColorSchemeToBe(scheme) {
     73  return new Promise(resolve => {
     74    let mq = matchMedia(`(prefers-color-scheme: ${scheme})`);
     75    if (mq.matches) {
     76      resolve();
     77    } else {
     78      mq.addEventListener("change", resolve, { once: true });
     79    }
     80  });
     81 }
     82 
     83 add_setup(async function() {
     84  // Set a dark color scheme so that we can properly test the print override.
     85  await SpecialPowers.pushPrefEnv({ set: [["layout.css.prefers-color-scheme.content-override", 0]] });
     86  await waitForColorSchemeToBe("dark");
     87 });
     88 
     89 add_task(function() {
     90  let tests = [
     91    {name: 'braille', value: 'rgb(255, 255, 0)'},
     92    {name: 'embossed', value: 'rgb(210, 180, 140)'},
     93    {name: 'handheld', value: 'rgb(0, 255, 0)'},
     94    {name: 'print', value: 'rgb(0, 255, 255)'},
     95    {name: 'projection', value: 'rgb(30, 144, 255)'},
     96    {name: 'speech', value: 'rgb(192, 192, 192)'},
     97    {name: 'tty', value: 'rgb(255, 192, 203)'},
     98    {name: 'tv', value: 'rgb(75, 0, 130)'},
     99  ];
    100 
    101  let originalColor = 'rgb(0, 128, 0)';
    102  let body = document.body;
    103 
    104  let getColor = function() {
    105    return window.getComputedStyle(body).backgroundColor;
    106  };
    107 
    108  for (let test of tests) {
    109    // Emulate the given media
    110    SpecialPowers.emulateMedium(window, test.name);
    111    is(getColor(), test.value, 'emulating ' + test.name + ' produced ' +
    112        'correct rendering');
    113 
    114    ok(matchMedia(test.name).matches, "Media matches");
    115    if (test.value == "print") {
    116      ok(matchMedia("(prefers-color-scheme: light)").matches, "color-scheme is overridden when emulating print");
    117    }
    118 
    119    // Do the @media screen rules get applied after ending the emulation?
    120    SpecialPowers.stopEmulatingMedium(window);
    121    is(getColor(), originalColor, 'Ending ' + test.name +
    122        ' emulation restores style for original medium');
    123    ok(!matchMedia(test.name).matches, "Media no longer matches");
    124    ok(!matchMedia("(prefers-color-scheme: light)").matches, "color-scheme override should be restored");
    125 
    126    // CSS media types are case-insensitive; we should be too.
    127    SpecialPowers.emulateMedium(window, test.name.toUpperCase());
    128    is(getColor(), test.value,
    129        test.name + ' emulation is case-insensitive');
    130    SpecialPowers.stopEmulatingMedium(window);
    131  }
    132 
    133  is(getColor(), originalColor, 'No emulation');
    134 
    135  // Emulating screen should produce the same rendering as when there is
    136  // no emulation in effect
    137  SpecialPowers.emulateMedium(window, 'screen');
    138  is(getColor(), originalColor, 'Emulating screen produces original rendering');
    139  SpecialPowers.stopEmulatingMedium(window);
    140 
    141  is(getColor(), originalColor, 'No emulation, shouldn\'t change');
    142 
    143  // Screen should be case-insensitive too
    144  SpecialPowers.emulateMedium(window, 'SCREEN');
    145  is(getColor(), originalColor, 'screen emulation is case-insensitive');
    146  SpecialPowers.stopEmulatingMedium(window);
    147 
    148  is(getColor(), originalColor, 'No emulation, shouldn\'t change');
    149 
    150  // An invalid parameter shouldn't fail. Given the CSS rules above,
    151  // an invalid parameter should result in a different rendering from any
    152  // produced thus far
    153  SpecialPowers.emulateMedium(window, 'clay');
    154  let invalid = getColor();
    155  tests.push({name: 'screen', value: 'green'});
    156  tests.forEach(function(test) {
    157    isnot(invalid, test.value, 'Emulating invalid type differs from ' +
    158          test.name);
    159  });
    160 
    161  SpecialPowers.stopEmulatingMedium(window);
    162 
    163  is(getColor(), originalColor, 'No emulation, shouldn\'t change');
    164 })
    165 </script>