layout/style/test/test_mq_hover_and_pointer.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1035774
   5 -->
   6 <head>
   7   <meta charset="utf-8">
   8   <title>Test for Bug 1035774</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=1035774">Mozilla Bug 1035774</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
  22 const NO_POINTER            = 0x00;
  23 const COARSE_POINTER        = 0x01;
  24 const FINE_POINTER          = 0x02;
  25 const HOVER_CAPABLE_POINTER = 0x04;
  26
  27 var isAndroid = navigator.appVersion.includes("Android");
  28
  29 add_task(async () => {
  30   await SpecialPowers.pushPrefEnv({
  31     set: [ ['privacy.resistFingerprinting', true] ]
  32   });
  33
  34   // When resistFingerprinting is enabled, we pretend that the system has a
  35   // mouse pointer (or finger on mobile).
  36   let invertIfAndroid = function(b) { return isAndroid ? !b : b; };
  37
  38   ok(!matchMedia("(pointer: none)").matches,
  39                  "Doesn't match (pointer: none)");
  40
  41   ok(matchMedia("(pointer)").matches, "Matches (pointer)");
  42
  43   ok(invertIfAndroid(!matchMedia("(pointer: coarse)").matches),
  44                  "Doesn't match (pointer: coarse)");
  45   ok(invertIfAndroid(matchMedia("(pointer: fine)").matches), "Matches (pointer: fine)");
  46
  47   ok(invertIfAndroid(!matchMedia("(hover: none)").matches), "Doesn't match (hover: none)");
  48   ok(invertIfAndroid(matchMedia("(hover: hover)").matches), "Matches (hover: hover)");
  49   ok(invertIfAndroid(matchMedia("(hover)").matches), "Matches (hover)");
  50
  51   await SpecialPowers.flushPrefEnv();
  52 });
  53
  54 add_task(async () => {
  55   // No pointer.
  56   await SpecialPowers.pushPrefEnv({
  57     set: [ ['ui.primaryPointerCapabilities', NO_POINTER] ]
  58   });
  59
  60   ok(matchMedia("(pointer: none)").matches, "Matches (pointer: none)");
  61   ok(!matchMedia("(pointer: coarse)").matches,
  62                  "Doesn't match (pointer: coarse)");
  63   ok(!matchMedia("(pointer: fine)").matches, "Doesn't match (pointer: fine)");
  64   ok(!matchMedia("(pointer)").matches, "Matches (pointer)");
  65
  66   ok(matchMedia("(hover: none)").matches, "Matches (hover: none)");
  67   ok(!matchMedia("(hover: hover)").matches, "Doesn't match (hover: hover)");
  68   ok(!matchMedia("(hover)").matches, "Doesn't match (hover)");
  69 });
  70
  71 add_task(async () => {
  72   // Mouse type pointer.
  73   await SpecialPowers.pushPrefEnv({
  74     set: [ ['ui.primaryPointerCapabilities', FINE_POINTER | HOVER_CAPABLE_POINTER] ]
  75   });
  76
  77   ok(!matchMedia("(pointer: none)").matches,
  78                  "Doesn't match (pointer: none)");
  79   ok(!matchMedia("(pointer: coarse)").matches,
  80                  "Doesn't match (pointer: coarse)");
  81   ok(matchMedia("(pointer: fine)").matches, "Matches (pointer: fine)");
  82   ok(matchMedia("(pointer)").matches, "Matches (pointer)");
  83
  84   ok(!matchMedia("(hover: none)").matches, "Doesn't match (hover: none)");
  85   ok(matchMedia("(hover: hover)").matches, "Matches (hover: hover)");
  86   ok(matchMedia("(hover)").matches, "Matches (hover)");
  87 });
  88
  89 add_task(async () => {
  90   // Mouse type pointer.
  91   await SpecialPowers.pushPrefEnv({
  92     set: [ ['ui.primaryPointerCapabilities',
  93             FINE_POINTER |
  94             HOVER_CAPABLE_POINTER] ]
  95   });
  96
  97   ok(!matchMedia("(pointer: none)").matches,
  98                  "Doesn't match (pointer: none)");
  99   ok(!matchMedia("(pointer: coarse)").matches,
 100                  "Doesn't match (pointer: coarse)");
 101   ok(matchMedia("(pointer: fine)").matches, "Matches (pointer: fine)");
 102   ok(matchMedia("(pointer)").matches, "Matches (pointer)");
 103
 104   ok(!matchMedia("(hover: none)").matches, "Doesn't match (hover: none)");
 105   ok(matchMedia("(hover: hover)").matches, "Matches (hover: hover)");
 106   ok(matchMedia("(hover)").matches, "Matches (hover)");
 107 });
 108
 109 add_task(async () => {
 110   // Touch screen.
 111   await SpecialPowers.pushPrefEnv({
 112     set: [ ['ui.primaryPointerCapabilities', COARSE_POINTER] ]
 113   });
 114
 115   ok(!matchMedia("(pointer: none)").matches, "Doesn't match (pointer: none)");
 116   ok(matchMedia("(pointer: coarse)").matches, "Matches (pointer: coarse)");
 117   ok(!matchMedia("(pointer: fine)").matches, "Doesn't match (pointer: fine)");
 118   ok(matchMedia("(pointer)").matches, "Matches (pointer)");
 119
 120   ok(matchMedia("(hover: none)").matches, "Match (hover: none)");
 121   ok(!matchMedia("(hover: hover)").matches, "Doesn't match (hover: hover)");
 122   ok(!matchMedia("(hover)").matches, "Doesn't match (hover)");
 123 });
 124
 125 </script>
 126 </body>
 127 </html>