contributors/anne/mediaqueries/test_media_queries.html@5ea98cbe0ce3
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>
