contributors/anne/mediaqueries/test_media_queries.html

Wed, 28 Dec 2011 16:46:43 -0500

author
Cathy Chan <cathy.chan@nokia.com>
date
Wed, 28 Dec 2011 16:46:43 -0500
changeset 2477
5ea98cbe0ce3
parent 2361
012d1a7d6dab
permissions
-rw-r--r--

Submitted test cases for border-radius.

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

mercurial