layout/style/test/test_media_queries.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=156716
   5 -->
   6 <head>
   7   <title>Test for Bug 156716</title>
   8   <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
   9   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  11 </head>
  12 <body onload="run()">
  13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=156716">Mozilla Bug 156716</a>
  14 <iframe id="subdoc" src="media_queries_iframe.html"></iframe>
  15 <div id="content" style="display: none">
  16
  17 </div>
  18 <pre id="test">
  19 <script class="testbody" type="application/javascript; version=1.7">
  20
  21 /** Test for Bug 156716 **/
  22
  23 // Note that many other tests are in test_acid3_test46.html .
  24
  25 SimpleTest.waitForExplicitFinish();
  26
  27 function run() {
  28   var subdoc = document.getElementById("subdoc").contentDocument;
  29   var subwin = document.getElementById("subdoc").contentWindow;
  30   var style = subdoc.getElementById("style");
  31   var iframe_style = document.getElementById("subdoc").style;
  32   var body_cs = subdoc.defaultView.getComputedStyle(subdoc.body, "");
  33
  34   function query_applies(q) {
  35     style.setAttribute("media", q);
  36     return body_cs.getPropertyValue("text-decoration") == "underline";
  37   }
  38
  39   function should_apply(q) {
  40     ok(query_applies(q), q + " should apply");
  41   }
  42
  43   function should_not_apply(q) {
  44     ok(!query_applies(q), q + " should not apply");
  45   }
  46
  47   /*
  48    * Functions to test whether a query is parseable at all.  (Should not
  49    * be used for parse errors within expressions.)
  50    */
  51   var parse_test_style_element = document.createElement("style");
  52   parse_test_style_element.type = "text/css";
  53   parse_test_style_element.disabled = true; // for performance, hopefully
  54   var parse_test_style_text = document.createTextNode("");
  55   parse_test_style_element.appendChild(parse_test_style_text);
  56   document.getElementsByTagName("head")[0]
  57     .appendChild(parse_test_style_element);
  58
  59   function query_is_parseable(q) {
  60     parse_test_style_text.data = "@media " + q + " {}";
  61     var sheet = parse_test_style_element.sheet; // XXX yikes, not live!
  62     if (sheet.cssRules.length == 0)
  63       return false;
  64     if (sheet.cssRules.length == 1 &&
  65         sheet.cssRules[0].type == CSSRule.MEDIA_RULE)
  66       return true;
  67     ok(false, "unexpected result testing whether query " + q +
  68               " is parseable");
  69     return true; // doesn't matter, we already failed
  70   }
  71
  72   function query_should_be_parseable(q) {
  73     ok(query_is_parseable(q), "query " + q + " should be parseable");
  74   }
  75
  76   function query_should_not_be_parseable(q) {
  77     ok(!query_is_parseable(q), "query " + q + " should not be parseable");
  78   }
  79
  80   /*
  81    * Functions to test whether a single media expression is parseable.
  82    */
  83   function expression_is_parseable(e) {
  84     style.setAttribute("media", "all and (" + e + ")");
  85     return style.sheet.media.mediaText != "not all";
  86   }
  87
  88   function expression_should_be_parseable(e) {
  89     ok(expression_is_parseable(e),
  90        "expression " + e + " should be parseable");
  91   }
  92
  93   function expression_should_not_be_parseable(e) {
  94     ok(!expression_is_parseable(e),
  95        "expression " + e + " should not be parseable");
  96   }
  97
  98   // The no-type syntax doesn't mix with the not and only keywords.
  99   query_should_be_parseable("(orientation)");
 100   query_should_not_be_parseable("not (orientation)");
 101   query_should_not_be_parseable("only (orientation)");
 102   query_should_be_parseable("all and (orientation)");
 103   query_should_be_parseable("not all and (orientation)");
 104   query_should_be_parseable("only all and (orientation)");
 105
 106   for each (let feature in [ "width", "height", "device-width",
 107                              "device-height" ]) {
 108     expression_should_be_parseable(feature);
 109     expression_should_be_parseable(feature + ": 0");
 110     expression_should_be_parseable(feature + ": 0px");
 111     expression_should_be_parseable(feature + ": 0em");
 112     expression_should_be_parseable(feature + ": -0");
 113     expression_should_be_parseable("min-" + feature + ": -0");
 114     expression_should_be_parseable("max-" + feature + ": -0");
 115     expression_should_be_parseable(feature + ": -0cm");
 116     expression_should_be_parseable(feature + ": 1px");
 117     expression_should_be_parseable(feature + ": 0.001mm");
 118     expression_should_be_parseable(feature + ": 100000px");
 119     expression_should_not_be_parseable(feature + ": -1px");
 120     expression_should_not_be_parseable("min-" + feature + ": -1px");
 121     expression_should_not_be_parseable("max-" + feature + ": -1px");
 122     expression_should_not_be_parseable(feature + ": -0.00001mm");
 123     expression_should_not_be_parseable(feature + ": -100000em");
 124     expression_should_not_be_parseable("min-" + feature);
 125     expression_should_not_be_parseable("max-" + feature);
 126   }
 127
 128   var content_div = document.getElementById("content");
 129   content_div.style.font = "-moz-initial";
 130   var em_size =
 131     getComputedStyle(content_div, "").fontSize.match(/^(\d+)px$/)[1];
 132
 133   // in this test, assume the common underlying implementation is correct
 134   let width_val = 117; // pick two not-too-round numbers
 135   let height_val = 76;
 136   iframe_style.width = width_val + "px";
 137   iframe_style.height = height_val + "px";
 138   let device_width = window.screen.width;
 139   let device_height = window.screen.height;
 140   for (let [feature, value] in
 141          Iterator({ "width": width_val,
 142                     "height": height_val,
 143                     "device-width": device_width,
 144                     "device-height": device_height })) {
 145     should_apply("all and (" + feature + ": " + value + "px)");
 146     should_not_apply("all and (" + feature + ": " + (value + 1) + "px)");
 147     should_not_apply("all and (" + feature + ": " + (value - 1) + "px)");
 148     should_apply("all and (min-" + feature + ": " + value + "px)");
 149     should_not_apply("all and (min-" + feature + ": " + (value + 1) + "px)");
 150     should_apply("all and (min-" + feature + ": " + (value - 1) + "px)");
 151     should_apply("all and (max-" + feature + ": " + value + "px)");
 152     should_apply("all and (max-" + feature + ": " + (value + 1) + "px)");
 153     should_not_apply("all and (max-" + feature + ": " + (value - 1) + "px)");
 154     should_not_apply("all and (min-" + feature + ": " +
 155                      (Math.ceil(value/em_size) + 1) + "em)");
 156     should_apply("all and (min-" + feature + ": " +
 157                  (Math.floor(value/em_size) - 1) + "em)");
 158     should_apply("all and (max-" + feature + ": " +
 159                  (Math.ceil(value/em_size) + 1) + "em)");
 160     should_not_apply("all and (max-" + feature + ": " +
 161                      (Math.floor(value/em_size) - 1) + "em)");
 162   }
 163
 164   iframe_style.width = "0";
 165   should_apply("all and (height)");
 166   should_not_apply("all and (width)");
 167   iframe_style.height = "0";
 168   should_not_apply("all and (height)");
 169   should_not_apply("all and (width)");
 170   should_apply("all and (device-height)");
 171   should_apply("all and (device-width)");
 172   iframe_style.width = width_val + "px";
 173   should_not_apply("all and (height)");
 174   should_apply("all and (width)");
 175   iframe_style.height = height_val + "px";
 176   should_apply("all and (height)");
 177   should_apply("all and (width)");
 178
 179   // ratio that reduces to 59/40
 180   iframe_style.width = "236px";
 181   iframe_style.height = "160px";
 182   expression_should_be_parseable("orientation");
 183   expression_should_be_parseable("orientation: portrait");
 184   expression_should_be_parseable("orientation: landscape");
 185   expression_should_not_be_parseable("min-orientation");
 186   expression_should_not_be_parseable("min-orientation: portrait");
 187   expression_should_not_be_parseable("min-orientation: landscape");
 188   expression_should_not_be_parseable("max-orientation");
 189   expression_should_not_be_parseable("max-orientation: portrait");
 190   expression_should_not_be_parseable("max-orientation: landscape");
 191   should_apply("(orientation)");
 192   should_apply("(orientation: landscape)");
 193   should_not_apply("(orientation: portrait)");
 194   should_apply("not all and (orientation: portrait)");
 195   // ratio that reduces to 59/80
 196   iframe_style.height = "320px";
 197   should_apply("(orientation)");
 198   should_not_apply("(orientation: landscape)");
 199   should_apply("not all and (orientation: landscape)");
 200   should_apply("(orientation: portrait)");
 201
 202   should_apply("(aspect-ratio: 59/80)");
 203   should_not_apply("(aspect-ratio: 58/80)");
 204   should_not_apply("(aspect-ratio: 59/81)");
 205   should_not_apply("(aspect-ratio: 60/80)");
 206   should_not_apply("(aspect-ratio: 59/79)");
 207   should_apply("(aspect-ratio: 177/240)");
 208   should_apply("(aspect-ratio: 413/560)");
 209   should_apply("(aspect-ratio: 5900/8000)");
 210   should_not_apply("(aspect-ratio: 5901/8000)");
 211   should_not_apply("(aspect-ratio: 5899/8000)");
 212   should_not_apply("(aspect-ratio: 5900/8001)");
 213   should_not_apply("(aspect-ratio: 5900/7999)");
 214   should_apply("(aspect-ratio)");
 215
 216   should_apply("(min-aspect-ratio: 59/80)");
 217   should_apply("(min-aspect-ratio: 58/80)");
 218   should_apply("(min-aspect-ratio: 59/81)");
 219   should_not_apply("(min-aspect-ratio: 60/80)");
 220   should_not_apply("(min-aspect-ratio: 59/79)");
 221   expression_should_not_be_parseable("min-aspect-ratio");
 222
 223   should_apply("(max-aspect-ratio: 59/80)");
 224   should_not_apply("(max-aspect-ratio: 58/80)");
 225   should_not_apply("(max-aspect-ratio: 59/81)");
 226   should_apply("(max-aspect-ratio: 60/80)");
 227   should_apply("(max-aspect-ratio: 59/79)");
 228   expression_should_not_be_parseable("max-aspect-ratio");
 229
 230   let real_dar = device_width + "/" + device_height;
 231   let high_dar_1 = (device_width + 1) + "/" + device_height;
 232   let high_dar_2 = device_width + "/" + (device_height - 1);
 233   let low_dar_1 = (device_width - 1) + "/" + device_height;
 234   let low_dar_2 = device_width + "/" + (device_height + 1);
 235   should_apply("(device-aspect-ratio: " + real_dar + ")");
 236   should_apply("not all and (device-aspect-ratio: " + high_dar_1 + ")");
 237   should_not_apply("all and (device-aspect-ratio: " + high_dar_2 + ")");
 238   should_not_apply("all and (device-aspect-ratio: " + low_dar_1 + ")");
 239   should_apply("not all and (device-aspect-ratio: " + low_dar_2 + ")");
 240   should_apply("(device-aspect-ratio)");
 241
 242   should_apply("(min-device-aspect-ratio: " + real_dar + ")");
 243   should_not_apply("all and (min-device-aspect-ratio: " + high_dar_1 + ")");
 244   should_apply("not all and (min-device-aspect-ratio: " + high_dar_2 + ")");
 245   should_not_apply("not all and (min-device-aspect-ratio: " + low_dar_1 + ")");
 246   should_apply("all and (min-device-aspect-ratio: " + low_dar_2 + ")");
 247   expression_should_not_be_parseable("min-device-aspect-ratio");
 248
 249   should_apply("all and (max-device-aspect-ratio: " + real_dar + ")");
 250   should_apply("(max-device-aspect-ratio: " + high_dar_1 + ")");
 251   should_apply("(max-device-aspect-ratio: " + high_dar_2 + ")");
 252   should_not_apply("all and (max-device-aspect-ratio: " + low_dar_1 + ")");
 253   should_apply("not all and (max-device-aspect-ratio: " + low_dar_2 + ")");
 254   expression_should_not_be_parseable("max-device-aspect-ratio");
 255
 256   for each (let feature in [ "max-aspect-ratio", "device-aspect-ratio" ]) {
 257     expression_should_be_parseable(feature + ": 1/1");
 258     expression_should_be_parseable(feature + ": 1  /1");
 259     expression_should_be_parseable(feature + ": 1  / \t\n1");
 260     expression_should_be_parseable(feature + ": 1/\r1");
 261     expression_should_not_be_parseable(feature + ": 1");
 262     expression_should_not_be_parseable(feature + ": 0.5");
 263     expression_should_not_be_parseable(feature + ": 1.0/1");
 264     expression_should_not_be_parseable(feature + ": 1/1.0");
 265     expression_should_not_be_parseable(feature + ": 1.0/1.0");
 266     expression_should_not_be_parseable(feature + ": 0/1");
 267     expression_should_not_be_parseable(feature + ": 1/0");
 268     expression_should_not_be_parseable(feature + ": 0/0");
 269     expression_should_not_be_parseable(feature + ": -1/1");
 270     expression_should_not_be_parseable(feature + ": 1/-1");
 271     expression_should_not_be_parseable(feature + ": -1/-1");
 272   }
 273
 274   var is_monochrome = query_applies("all and (min-monochrome: 1)");
 275   var is_color = query_applies("all and (min-color: 1)");
 276   isnot(is_monochrome, is_color, "should be either monochrome or color");
 277
 278   function depth_query(prefix, depth) {
 279     return "all and (" + prefix + (is_color ? "color" : "monochrome") +
 280            ":" + depth + ")";
 281   }
 282
 283   var depth = 0;
 284   do {
 285     if (depth > 50) {
 286       ok(false, "breaking from loop, depth > 50");
 287       break;
 288     }
 289   } while (query_applies(depth_query("min-", ++depth)));
 290   --depth;
 291
 292   should_apply(depth_query("", depth));
 293   should_not_apply(depth_query("", depth - 1));
 294   should_not_apply(depth_query("", depth + 1));
 295   should_apply(depth_query("max-", depth));
 296   should_not_apply(depth_query("max-", depth - 1));
 297   should_apply(depth_query("max-", depth + 1));
 298
 299   (is_color ? should_apply : should_not_apply)("all and (color)");
 300   expression_should_not_be_parseable("max-color");
 301   expression_should_not_be_parseable("min-color");
 302   (is_color ? should_not_apply : should_apply)("all and (monochrome)");
 303   expression_should_not_be_parseable("max-monochrome");
 304   expression_should_not_be_parseable("min-monochrome");
 305   (is_color ? should_apply : should_not_apply)("not all and (monochrome)");
 306   (is_color ? should_not_apply : should_apply)("not all and (color)");
 307   (is_color ? should_apply : should_not_apply)("only all and (color)");
 308   (is_color ? should_not_apply : should_apply)("only all and (monochrome)");
 309
 310   for each (let feature in [ "color", "min-monochrome", "max-color-index" ]) {
 311     expression_should_be_parseable(feature + ": 1");
 312     expression_should_be_parseable(feature + ": 327");
 313     expression_should_be_parseable(feature + ": 0");
 314     expression_should_not_be_parseable(feature + ": 1.0");
 315     expression_should_not_be_parseable(feature + ": -1");
 316     expression_should_not_be_parseable(feature + ": 1/1");
 317   }
 318
 319   // Presume that we never support indexed color (at least not usefully
 320   // enough to call it indexed color).
 321   should_apply("(color-index: 0)");
 322   should_not_apply("(color-index: 1)");
 323   should_apply("(min-color-index: 0)");
 324   should_not_apply("(min-color-index: 1)");
 325   should_apply("(max-color-index: 0)");
 326   should_apply("(max-color-index: 1)");
 327   should_apply("(max-color-index: 157)");
 328
 329   for each (let feature in [ "resolution", "min-resolution",
 330                              "max-resolution" ]) {
 331     expression_should_be_parseable(feature + ": 3dpi");
 332     expression_should_be_parseable(feature + ":3dpi");
 333     expression_should_not_be_parseable(feature + ": 3.0dpi");
 334     expression_should_not_be_parseable(feature + ": 3.4dpi");
 335     expression_should_be_parseable(feature + "\t: 120dpcm");
 336     expression_should_not_be_parseable(feature + ": 0dpi");
 337     expression_should_not_be_parseable(feature + ": -3dpi");
 338   }
 339
 340   // Find the resolution using max-resolution
 341   let resolution = 0;
 342   do {
 343     ++resolution;
 344     if (resolution > 10000) {
 345       ok(false, "resolution greater than 10000dpi???");
 346       break;
 347     }
 348   } while (!query_applies("(max-resolution: " + resolution + "dpi)"));
 349
 350   // resolution should now be Math.ceil() of the actual resolution.
 351   let dpi_high;
 352   let dpi_low = resolution - 1;
 353   if (query_applies("(min-resolution: " + resolution + "dpi)")) {
 354     // It's exact!
 355     should_apply("(resolution: " + resolution + "dpi)");
 356     should_not_apply("(resolution: " + (resolution + 1) + "dpi)");
 357     should_not_apply("(resolution: " + (resolution - 1) + "dpi)");
 358     dpi_high = resolution + 1;
 359   } else {
 360         // We have no way to test resolution applying since it need not be
 361         // an integer.
 362     should_not_apply("(resolution: " + resolution + "dpi)");
 363     should_not_apply("(resolution: " + (resolution - 1) + "dpi)");
 364     dpi_high = resolution;
 365   }
 366
 367   should_apply("(min-resolution: " + dpi_low + "dpi)");
 368   should_not_apply("not all and (min-resolution: " + dpi_low + "dpi)");
 369   should_apply("not all and (min-resolution: " + dpi_high + "dpi)");
 370   should_not_apply("all and (min-resolution: " + dpi_high + "dpi)");
 371
 372   // Test dpcm units based on what we computed in dpi.
 373   let dpcm_high = Math.ceil(dpi_high / 2.54);
 374   let dpcm_low = Math.floor(dpi_low / 2.54);
 375   should_apply("(min-resolution: " + dpcm_low + "dpcm)");
 376   should_apply("(max-resolution: " + dpcm_high + "dpcm)");
 377   should_not_apply("(max-resolution: " + dpcm_low + "dpcm)");
 378   should_apply("not all and (min-resolution: " + dpcm_high + "dpcm)");
 379
 380   expression_should_be_parseable("scan");
 381   expression_should_be_parseable("scan: progressive");
 382   expression_should_be_parseable("scan:interlace");
 383   expression_should_not_be_parseable("min-scan:interlace");
 384   expression_should_not_be_parseable("scan: 1");
 385   expression_should_not_be_parseable("max-scan");
 386   expression_should_not_be_parseable("max-scan: progressive");
 387   // Assume we don't support tv devices.
 388   should_not_apply("(scan)");
 389   should_not_apply("(scan: progressive)");
 390   should_not_apply("(scan: interlace)");
 391   should_apply("not all and (scan)");
 392   should_apply("not all and (scan: progressive)");
 393   should_apply("not all and (scan: interlace)");
 394
 395   expression_should_be_parseable("grid");
 396   expression_should_be_parseable("grid: 0");
 397   expression_should_be_parseable("grid: 1");
 398   expression_should_be_parseable("grid: 1");
 399   expression_should_not_be_parseable("min-grid");
 400   expression_should_not_be_parseable("min-grid:0");
 401   expression_should_not_be_parseable("max-grid: 1");
 402   expression_should_not_be_parseable("grid: 2");
 403   expression_should_not_be_parseable("grid: -1");
 404
 405   // Assume we don't support grid devices
 406   should_not_apply("(grid)");
 407   should_apply("(grid: 0)");
 408   should_not_apply("(grid: 1)");
 409   should_not_apply("(grid: 2)");
 410   should_not_apply("(grid: -1)");
 411
 412   // Parsing tests
 413   // bug 454227
 414   should_apply("(orientation");
 415   should_not_apply("not all and (orientation");
 416   should_not_apply("(orientation:");
 417   should_apply("all,(orientation:");
 418   should_not_apply("(orientation:,all");
 419   should_apply("not all and (grid");
 420   should_not_apply("only all and (grid");
 421   should_not_apply("(grid");
 422   should_apply("all,(grid");
 423   should_not_apply("(grid,all");
 424   // bug 454226
 425   should_apply(",all");
 426   should_apply("all,");
 427   should_apply(",all,");
 428   should_apply("all,badmedium");
 429   should_apply("badmedium,all");
 430   should_not_apply(",badmedium,");
 431   should_apply("all,(badexpression)");
 432   should_apply("(badexpression),all");
 433   should_not_apply("(badexpression),badmedium");
 434   should_not_apply("badmedium,(badexpression)");
 435   should_apply("all,[badsyntax]");
 436   should_apply("[badsyntax],all");
 437   should_not_apply("badmedium,[badsyntax]");
 438   should_not_apply("[badsyntax],badmedium");
 439
 440   SimpleTest.finish();
 441 }
 442
 443 </script>
 444 </pre>
 445 </body>
 446 </html>
 447