layout/style/test/test_prefers_contrast_color_pairs.html

   1 <!doctype html>
   2 <title>Test for Bug 922669</title>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <script src="/tests/SimpleTest/EventUtils.js"></script>
   5 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   6 <script>
   7   function assertMatches(query) {
   8     ok(matchMedia(query).matches, `${query} should match`);
   9   }
  10   function assertPrefersContrastIs(value) {
  11     assertMatches(`(prefers-contrast: ${value})`);
  12   }
  13   add_task(async function setupPrefs() {
  14     assertPrefersContrastIs("no-preference");
  15     await SpecialPowers.pushPrefEnv({
  16       set: [
  17         ["browser.display.document_color_use", 2],
  18         ["browser.display.use_system_colors", false],
  19       ]
  20     });
  21     assertMatches("(prefers-contrast)");
  22   });
  23   async function testColors(foreground, background, expected) {
  24     await SpecialPowers.pushPrefEnv({
  25       set: [
  26         ["browser.display.foreground_color", foreground],
  27         ["browser.display.background_color", background],
  28       ]
  29     });
  30
  31     assertPrefersContrastIs(expected);
  32
  33     // Test the inversed order too.
  34     await SpecialPowers.pushPrefEnv({
  35       set: [
  36         ["browser.display.foreground_color", background],
  37         ["browser.display.background_color", foreground],
  38       ]
  39     });
  40
  41     assertPrefersContrastIs(expected);
  42   }
  43
  44   add_task(async function test_prefers_contrast_colors() {
  45     await testColors("black", "black", "less");
  46     await testColors("black", "white", "more");
  47     await testColors("red", "black", "custom");
  48   });
  49 </script>