зеркало из https://github.com/mozilla/pjs.git
Tests for css3-mediaqueries. (Bug 156716) r+sr=bzbarsky
This commit is contained in:
L. David Baron
Родитель
8ee8deeb81
Коммит
74607dd4db
|
|
@ -68,7 +68,8 @@ css_properties.js: host_ListCSSProperties$(HOST_BIN_SUFFIX) css_properties_like_
|
||||||
|
|
||||||
GARBAGE += css_properties.js
|
GARBAGE += css_properties.js
|
||||||
|
|
||||||
_TEST_FILES = test_bug73586.html \
|
_TEST_FILES = test_acid3_test46.html \
|
||||||
|
test_bug73586.html \
|
||||||
test_bug74880.html \
|
test_bug74880.html \
|
||||||
test_bug98997.html \
|
test_bug98997.html \
|
||||||
test_bug221428.html \
|
test_bug221428.html \
|
||||||
|
|
@ -102,6 +103,7 @@ _TEST_FILES = test_bug73586.html \
|
||||||
test_inherit_storage.html \
|
test_inherit_storage.html \
|
||||||
test_initial_computation.html \
|
test_initial_computation.html \
|
||||||
test_initial_storage.html \
|
test_initial_storage.html \
|
||||||
|
test_media_queries.html \
|
||||||
test_of_type_selectors.xhtml \
|
test_of_type_selectors.xhtml \
|
||||||
test_parse_rule.html \
|
test_parse_rule.html \
|
||||||
test_property_database.html \
|
test_property_database.html \
|
||||||
|
|
@ -127,6 +129,8 @@ _TEST_FILES = test_bug73586.html \
|
||||||
redirect-3.css^headers^ \
|
redirect-3.css^headers^ \
|
||||||
post-redirect-3.css \
|
post-redirect-3.css \
|
||||||
xbl_bindings.xml \
|
xbl_bindings.xml \
|
||||||
|
empty.html \
|
||||||
|
media_queries_iframe.html \
|
||||||
$(NULL)
|
$(NULL)
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title></title></head><body></body></html>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||||
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<title>Media Queries Test inner frame</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<meta http-equiv="Content-Style-Type" content="text/css">
|
||||||
|
<style type="text/css" id="style" media="all">
|
||||||
|
body { text-decoration: underline; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,139 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<!--
|
||||||
|
https://bugzilla.mozilla.org/show_bug.cgi?id=156716
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
|
||||||
|
This is test 46 from the Acid3 test, http://acid3.acidtests.org/
|
||||||
|
extracted from the test framework there and put into Mochitest.
|
||||||
|
|
||||||
|
(from irc.mozilla.org, developers)
|
||||||
|
[2008-05-14 18:07:38] <Hixie> dbaron: I hereby grant all files available from the server http://acid3.acidtests.org/ under the following license: (c) copyright 2008 Ian Hickson. These documents may be used under the terms of any of the following licenses: MPL. GPL. LGPL. BSD.
|
||||||
|
|
||||||
|
-->
|
||||||
|
<head>
|
||||||
|
<title>Test for Bug 156716</title>
|
||||||
|
<script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
|
||||||
|
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
iframe#selectors { width: 0; height: 0; }
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=156716">Mozilla Bug 156716</a>
|
||||||
|
<p id="display">
|
||||||
|
<iframe src="empty.html" id="selectors"></iframe>
|
||||||
|
</p>
|
||||||
|
<div id="content" style="display: none">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<pre id="test">
|
||||||
|
<script class="testbody" type="text/javascript">
|
||||||
|
|
||||||
|
/** Test for Bug 156716 **/
|
||||||
|
|
||||||
|
function getTestDocument() {
|
||||||
|
var iframe = document.getElementById("selectors");
|
||||||
|
var doc = iframe.contentDocument;
|
||||||
|
for (var i = doc.documentElement.childNodes.length-1; i >= 0; i -= 1)
|
||||||
|
doc.documentElement.removeChild(doc.documentElement.childNodes[i]);
|
||||||
|
doc.documentElement.appendChild(doc.createElement('head'));
|
||||||
|
doc.documentElement.firstChild.appendChild(doc.createElement('title'));
|
||||||
|
doc.documentElement.appendChild(doc.createElement('body'));
|
||||||
|
return doc;
|
||||||
|
}
|
||||||
|
|
||||||
|
// test 46: media queries
|
||||||
|
var doc = getTestDocument();
|
||||||
|
var style = doc.createElement('style');
|
||||||
|
style.setAttribute('type', 'text/css');
|
||||||
|
style.appendChild(doc.createTextNode('@media all and (min-color: 0) { #a { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media not all and (min-color: 0) { #b { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media only all and (min-color: 0) { #c { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media (bogus) { #d { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media all and (bogus) { #e { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media not all and (bogus) { #f { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media only all and (bogus) { #g { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media (bogus), all { #h { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media all and (bogus), all { #i { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media not all and (bogus), all { #j { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media only all and (bogus), all { #k { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media all, (bogus) { #l { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media all, all and (bogus) { #m { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media all, not all and (bogus) { #n { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media all, only all and (bogus) { #o { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media all and color { #p { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media all and min-color: 0 { #q { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media all, all and color { #r { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media all, all and min-color: 0 { #s { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media all and min-color: 0, all { #t { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media (max-color: 0) and (max-monochrome: 0) { #u { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media (min-color: 1), (min-monochrome: 1) { #v { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media all and (min-color: 0) and (min-monochrome: 0) { #w { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media not all and (min-color: 1), not all and (min-monochrome: 1) { #x { text-transform: uppercase; } }')); // matches
|
||||||
|
style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (min-width: 1em) { #y1 { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (min-width: 1em) { #y2 { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media all and (min-height: 1em) and (max-width: 1em) { #y3 { text-transform: uppercase; } }'));
|
||||||
|
style.appendChild(doc.createTextNode('@media all and (max-height: 1em) and (max-width: 1em) { #y4 { text-transform: uppercase; } }')); // matches
|
||||||
|
doc.getElementsByTagName('head')[0].appendChild(style);
|
||||||
|
var names = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y1', 'y2', 'y3', 'y4'];
|
||||||
|
for (var i in names) {
|
||||||
|
var p = doc.createElement('p');
|
||||||
|
p.id = names[i];
|
||||||
|
doc.body.appendChild(p);
|
||||||
|
}
|
||||||
|
var count = 0;
|
||||||
|
var check = function (c, e) {
|
||||||
|
count += 1;
|
||||||
|
var p = doc.getElementById(c);
|
||||||
|
is(doc.defaultView.getComputedStyle(p, '').textTransform, e ? 'uppercase' : 'none', "case " + c + " failed (index " + count + ")");
|
||||||
|
}
|
||||||
|
check('a', true); // 1
|
||||||
|
check('b', false);
|
||||||
|
check('c', true);
|
||||||
|
check('d', false);
|
||||||
|
check('e', false);
|
||||||
|
check('f', false); // true in old spec; commented out in real Acid3
|
||||||
|
check('g', false);
|
||||||
|
check('h', true);
|
||||||
|
check('i', true);
|
||||||
|
check('j', true); // 10
|
||||||
|
check('k', true);
|
||||||
|
check('l', true);
|
||||||
|
check('m', true);
|
||||||
|
check('n', true);
|
||||||
|
check('o', true);
|
||||||
|
check('p', false);
|
||||||
|
check('q', false);
|
||||||
|
check('r', false);
|
||||||
|
check('s', false);
|
||||||
|
check('t', false); // 20
|
||||||
|
check('u', false);
|
||||||
|
check('v', true);
|
||||||
|
check('w', true);
|
||||||
|
check('x', true);
|
||||||
|
// here the viewport is 0x0
|
||||||
|
check('y1', false); // 25
|
||||||
|
check('y2', false);
|
||||||
|
check('y3', false);
|
||||||
|
check('y4', true);
|
||||||
|
document.getElementById("selectors").setAttribute("style", "height: 100px; width: 100px");
|
||||||
|
// now the viewport is more than 1em by 1em
|
||||||
|
check('y1', true); // 29
|
||||||
|
check('y2', false);
|
||||||
|
check('y3', false);
|
||||||
|
check('y4', false);
|
||||||
|
document.getElementById("selectors").removeAttribute("style");
|
||||||
|
// here the viewport is 0x0 again
|
||||||
|
check('y1', false); // 33
|
||||||
|
check('y2', false);
|
||||||
|
check('y3', false);
|
||||||
|
check('y4', true);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</pre>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,442 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<!--
|
||||||
|
https://bugzilla.mozilla.org/show_bug.cgi?id=156716
|
||||||
|
-->
|
||||||
|
<head>
|
||||||
|
<title>Test for Bug 156716</title>
|
||||||
|
<script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
|
||||||
|
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
||||||
|
</head>
|
||||||
|
<body onload="run()">
|
||||||
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=156716">Mozilla Bug 156716</a>
|
||||||
|
<iframe id="subdoc" src="media_queries_iframe.html"></iframe>
|
||||||
|
<div id="content" style="display: none">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<pre id="test">
|
||||||
|
<script class="testbody" type="application/javascript; version=1.7">
|
||||||
|
|
||||||
|
/** Test for Bug 156716 **/
|
||||||
|
|
||||||
|
// Note that many other tests are in test_acid3_test46.html .
|
||||||
|
|
||||||
|
SimpleTest.waitForExplicitFinish();
|
||||||
|
|
||||||
|
function run() {
|
||||||
|
var subdoc = document.getElementById("subdoc").contentDocument;
|
||||||
|
var subwin = document.getElementById("subdoc").contentWindow;
|
||||||
|
var style = subdoc.getElementById("style");
|
||||||
|
var iframe_style = document.getElementById("subdoc").style;
|
||||||
|
var body_cs = subdoc.defaultView.getComputedStyle(subdoc.body, "");
|
||||||
|
|
||||||
|
function query_applies(q) {
|
||||||
|
style.setAttribute("media", q);
|
||||||
|
return body_cs.getPropertyValue("text-decoration") == "underline";
|
||||||
|
}
|
||||||
|
|
||||||
|
function should_apply(q) {
|
||||||
|
ok(query_applies(q), q + " should apply");
|
||||||
|
}
|
||||||
|
|
||||||
|
function should_not_apply(q) {
|
||||||
|
ok(!query_applies(q), q + " should not apply");
|
||||||
|
}
|
||||||
|
|
||||||
|
function todo_should_apply(q) {
|
||||||
|
todo(query_applies(q), q + " should apply");
|
||||||
|
}
|
||||||
|
|
||||||
|
function todo_should_not_apply(q) {
|
||||||
|
todo(!query_applies(q), q + " should not apply");
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Functions to test whether a query is parseable at all. (Should not
|
||||||
|
* be used for parse errors within expressions.)
|
||||||
|
*/
|
||||||
|
var parse_test_style_element = document.createElement("style");
|
||||||
|
parse_test_style_element.type = "text/css";
|
||||||
|
parse_test_style_element.disabled = true; // for performance, hopefully
|
||||||
|
var parse_test_style_text = document.createTextNode("");
|
||||||
|
parse_test_style_element.appendChild(parse_test_style_text);
|
||||||
|
document.getElementsByTagName("head")[0]
|
||||||
|
.appendChild(parse_test_style_element);
|
||||||
|
|
||||||
|
function query_is_parseable(q) {
|
||||||
|
parse_test_style_text.data = "@media " + q + " {}";
|
||||||
|
var sheet = parse_test_style_element.sheet; // XXX yikes, not live!
|
||||||
|
if (sheet.cssRules.length == 0)
|
||||||
|
return false;
|
||||||
|
if (sheet.cssRules.length == 1 &&
|
||||||
|
sheet.cssRules[0].type == CSSRule.MEDIA_RULE)
|
||||||
|
return true;
|
||||||
|
ok(false, "unexpected result testing whether query " + q +
|
||||||
|
" is parseable");
|
||||||
|
return true; // doesn't matter, we already failed
|
||||||
|
}
|
||||||
|
|
||||||
|
function query_should_be_parseable(q) {
|
||||||
|
ok(query_is_parseable(q), "query " + q + " should be parseable");
|
||||||
|
}
|
||||||
|
|
||||||
|
function query_should_not_be_parseable(q) {
|
||||||
|
ok(!query_is_parseable(q), "query " + q + " should not be parseable");
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Functions to test whether a single media expression is parseable.
|
||||||
|
*/
|
||||||
|
function expression_is_parseable(e) {
|
||||||
|
style.setAttribute("media", "all and (" + e + ")");
|
||||||
|
return style.sheet.media.mediaText != "not all";
|
||||||
|
}
|
||||||
|
|
||||||
|
function expression_should_be_parseable(e) {
|
||||||
|
ok(expression_is_parseable(e),
|
||||||
|
"expression " + e + " should be parseable");
|
||||||
|
}
|
||||||
|
|
||||||
|
function expression_should_not_be_parseable(e) {
|
||||||
|
ok(!expression_is_parseable(e),
|
||||||
|
"expression " + e + " should not be parseable");
|
||||||
|
}
|
||||||
|
|
||||||
|
function todo_expression_should_be_parseable(e) {
|
||||||
|
todo(expression_is_parseable(e),
|
||||||
|
"expression " + e + " should be parseable");
|
||||||
|
}
|
||||||
|
|
||||||
|
function todo_expression_should_not_be_parseable(e) {
|
||||||
|
todo(!expression_is_parseable(e),
|
||||||
|
"expression " + e + " should not be parseable");
|
||||||
|
}
|
||||||
|
|
||||||
|
// The no-type syntax doesn't mix with the not and only keywords.
|
||||||
|
query_should_be_parseable("(orientation)");
|
||||||
|
query_should_not_be_parseable("not (orientation)");
|
||||||
|
query_should_not_be_parseable("only (orientation)");
|
||||||
|
query_should_be_parseable("all and (orientation)");
|
||||||
|
query_should_be_parseable("not all and (orientation)");
|
||||||
|
query_should_be_parseable("only all and (orientation)");
|
||||||
|
|
||||||
|
for each (let feature in [ "width", "height", "device-width",
|
||||||
|
"device-height" ]) {
|
||||||
|
expression_should_be_parseable(feature);
|
||||||
|
expression_should_be_parseable(feature + ": 0");
|
||||||
|
expression_should_be_parseable(feature + ": 0px");
|
||||||
|
expression_should_be_parseable(feature + ": 0em");
|
||||||
|
expression_should_be_parseable(feature + ": -0");
|
||||||
|
expression_should_be_parseable("min-" + feature + ": -0");
|
||||||
|
expression_should_be_parseable("max-" + feature + ": -0");
|
||||||
|
expression_should_be_parseable(feature + ": -0cm");
|
||||||
|
expression_should_be_parseable(feature + ": 1px");
|
||||||
|
expression_should_be_parseable(feature + ": 0.001mm");
|
||||||
|
expression_should_be_parseable(feature + ": 100000px");
|
||||||
|
expression_should_not_be_parseable(feature + ": -1px");
|
||||||
|
expression_should_not_be_parseable("min-" + feature + ": -1px");
|
||||||
|
expression_should_not_be_parseable("max-" + feature + ": -1px");
|
||||||
|
expression_should_not_be_parseable(feature + ": -0.00001mm");
|
||||||
|
expression_should_not_be_parseable(feature + ": -100000em");
|
||||||
|
}
|
||||||
|
|
||||||
|
var content_div = document.getElementById("content");
|
||||||
|
content_div.style.font = "-moz-initial";
|
||||||
|
var em_size =
|
||||||
|
getComputedStyle(content_div, "").fontSize.match(/^(\d+)px$/)[1];
|
||||||
|
|
||||||
|
// in this test, assume the common underlying implementation is correct
|
||||||
|
let width_val = 117; // pick two not-too-round numbers
|
||||||
|
let height_val = 76;
|
||||||
|
iframe_style.width = width_val + "px";
|
||||||
|
iframe_style.height = height_val + "px";
|
||||||
|
let device_width = window.screen.width;
|
||||||
|
let device_height = window.screen.height;
|
||||||
|
for (let [feature, value] in
|
||||||
|
Iterator({ "width": width_val,
|
||||||
|
"height": height_val,
|
||||||
|
"device-width": device_width,
|
||||||
|
"device-height": device_height })) {
|
||||||
|
should_apply("all and (" + feature + ": " + value + "px)");
|
||||||
|
should_not_apply("all and (" + feature + ": " + (value + 1) + "px)");
|
||||||
|
should_not_apply("all and (" + feature + ": " + (value - 1) + "px)");
|
||||||
|
should_apply("all and (min-" + feature + ": " + value + "px)");
|
||||||
|
should_not_apply("all and (min-" + feature + ": " + (value + 1) + "px)");
|
||||||
|
should_apply("all and (min-" + feature + ": " + (value - 1) + "px)");
|
||||||
|
should_apply("all and (max-" + feature + ": " + value + "px)");
|
||||||
|
should_apply("all and (max-" + feature + ": " + (value + 1) + "px)");
|
||||||
|
should_not_apply("all and (max-" + feature + ": " + (value - 1) + "px)");
|
||||||
|
should_not_apply("all and (min-" + feature + ": " +
|
||||||
|
(Math.ceil(value/em_size) + 1) + "em)");
|
||||||
|
should_apply("all and (min-" + feature + ": " +
|
||||||
|
(Math.floor(value/em_size) - 1) + "em)");
|
||||||
|
should_apply("all and (max-" + feature + ": " +
|
||||||
|
(Math.ceil(value/em_size) + 1) + "em)");
|
||||||
|
should_not_apply("all and (max-" + feature + ": " +
|
||||||
|
(Math.floor(value/em_size) - 1) + "em)");
|
||||||
|
}
|
||||||
|
|
||||||
|
// FIXME: The TODOs in this section are because the spec is still a
|
||||||
|
// bit unclear here. Until I'm sure that the spec is really asking
|
||||||
|
// for the more complex implementation, I'm going to stick with the
|
||||||
|
// simpler one. See
|
||||||
|
// http://lists.w3.org/Archives/Public/www-style/2008Jun/0212.html
|
||||||
|
iframe_style.width = "0";
|
||||||
|
should_apply("all and (height)");
|
||||||
|
todo_should_not_apply("all and (width)");
|
||||||
|
iframe_style.height = "0";
|
||||||
|
todo_should_not_apply("all and (height)");
|
||||||
|
todo_should_not_apply("all and (width)");
|
||||||
|
should_apply("all and (device-height)");
|
||||||
|
should_apply("all and (device-width)");
|
||||||
|
iframe_style.width = width_val + "px";
|
||||||
|
todo_should_not_apply("all and (height)");
|
||||||
|
should_apply("all and (width)");
|
||||||
|
iframe_style.height = height_val + "px";
|
||||||
|
should_apply("all and (height)");
|
||||||
|
should_apply("all and (width)");
|
||||||
|
|
||||||
|
// ratio that reduces to 59/40
|
||||||
|
iframe_style.width = "236px";
|
||||||
|
iframe_style.height = "160px";
|
||||||
|
expression_should_be_parseable("orientation");
|
||||||
|
expression_should_be_parseable("orientation: portrait");
|
||||||
|
expression_should_be_parseable("orientation: landscape");
|
||||||
|
expression_should_not_be_parseable("min-orientation");
|
||||||
|
expression_should_not_be_parseable("min-orientation: portrait");
|
||||||
|
expression_should_not_be_parseable("min-orientation: landscape");
|
||||||
|
expression_should_not_be_parseable("max-orientation");
|
||||||
|
expression_should_not_be_parseable("max-orientation: portrait");
|
||||||
|
expression_should_not_be_parseable("max-orientation: landscape");
|
||||||
|
should_apply("(orientation)");
|
||||||
|
should_apply("(orientation: landscape)");
|
||||||
|
should_not_apply("(orientation: portrait)");
|
||||||
|
should_apply("not all and (orientation: portrait)");
|
||||||
|
// ratio that reduces to 59/80
|
||||||
|
iframe_style.height = "320px";
|
||||||
|
should_apply("(orientation)");
|
||||||
|
should_not_apply("(orientation: landscape)");
|
||||||
|
should_apply("not all and (orientation: landscape)");
|
||||||
|
should_apply("(orientation: portrait)");
|
||||||
|
|
||||||
|
should_apply("(aspect-ratio: 59/80)");
|
||||||
|
should_not_apply("(aspect-ratio: 58/80)");
|
||||||
|
should_not_apply("(aspect-ratio: 59/81)");
|
||||||
|
should_not_apply("(aspect-ratio: 60/80)");
|
||||||
|
should_not_apply("(aspect-ratio: 59/79)");
|
||||||
|
should_apply("(aspect-ratio: 177/240)");
|
||||||
|
should_apply("(aspect-ratio: 413/560)");
|
||||||
|
should_apply("(aspect-ratio: 5900/8000)");
|
||||||
|
should_not_apply("(aspect-ratio: 5901/8000)");
|
||||||
|
should_not_apply("(aspect-ratio: 5899/8000)");
|
||||||
|
should_not_apply("(aspect-ratio: 5900/8001)");
|
||||||
|
should_not_apply("(aspect-ratio: 5900/7999)");
|
||||||
|
|
||||||
|
should_apply("(min-aspect-ratio: 59/80)");
|
||||||
|
should_apply("(min-aspect-ratio: 58/80)");
|
||||||
|
should_apply("(min-aspect-ratio: 59/81)");
|
||||||
|
should_not_apply("(min-aspect-ratio: 60/80)");
|
||||||
|
should_not_apply("(min-aspect-ratio: 59/79)");
|
||||||
|
|
||||||
|
should_apply("(max-aspect-ratio: 59/80)");
|
||||||
|
should_not_apply("(max-aspect-ratio: 58/80)");
|
||||||
|
should_not_apply("(max-aspect-ratio: 59/81)");
|
||||||
|
should_apply("(max-aspect-ratio: 60/80)");
|
||||||
|
should_apply("(max-aspect-ratio: 59/79)");
|
||||||
|
|
||||||
|
let real_dar = device_width + "/" + device_height;
|
||||||
|
let high_dar_1 = (device_width + 1) + "/" + device_height;
|
||||||
|
let high_dar_2 = device_width + "/" + (device_height - 1);
|
||||||
|
let low_dar_1 = (device_width - 1) + "/" + device_height;
|
||||||
|
let low_dar_2 = device_width + "/" + (device_height + 1);
|
||||||
|
should_apply("(device-aspect-ratio: " + real_dar + ")");
|
||||||
|
should_apply("not all and (device-aspect-ratio: " + high_dar_1 + ")");
|
||||||
|
should_not_apply("all and (device-aspect-ratio: " + high_dar_2 + ")");
|
||||||
|
should_not_apply("all and (device-aspect-ratio: " + low_dar_1 + ")");
|
||||||
|
should_apply("not all and (device-aspect-ratio: " + low_dar_2 + ")");
|
||||||
|
|
||||||
|
should_apply("(min-device-aspect-ratio: " + real_dar + ")");
|
||||||
|
should_not_apply("all and (min-device-aspect-ratio: " + high_dar_1 + ")");
|
||||||
|
should_apply("not all and (min-device-aspect-ratio: " + high_dar_2 + ")");
|
||||||
|
should_not_apply("not all and (min-device-aspect-ratio: " + low_dar_1 + ")");
|
||||||
|
should_apply("all and (min-device-aspect-ratio: " + low_dar_2 + ")");
|
||||||
|
|
||||||
|
should_apply("all and (max-device-aspect-ratio: " + real_dar + ")");
|
||||||
|
should_apply("(max-device-aspect-ratio: " + high_dar_1 + ")");
|
||||||
|
should_apply("(max-device-aspect-ratio: " + high_dar_2 + ")");
|
||||||
|
should_not_apply("all and (max-device-aspect-ratio: " + low_dar_1 + ")");
|
||||||
|
should_apply("not all and (max-device-aspect-ratio: " + low_dar_2 + ")");
|
||||||
|
|
||||||
|
for each (let feature in [ "max-aspect-ratio", "device-aspect-ratio" ]) {
|
||||||
|
expression_should_be_parseable(feature + ": 1/1");
|
||||||
|
expression_should_be_parseable(feature + ": 1 /1");
|
||||||
|
expression_should_be_parseable(feature + ": 1 / \t\n1");
|
||||||
|
expression_should_be_parseable(feature + ": 1/\r1");
|
||||||
|
expression_should_not_be_parseable(feature + ": 1");
|
||||||
|
expression_should_not_be_parseable(feature + ": 0.5");
|
||||||
|
expression_should_not_be_parseable(feature + ": 1.0/1");
|
||||||
|
expression_should_not_be_parseable(feature + ": 1/1.0");
|
||||||
|
expression_should_not_be_parseable(feature + ": 1.0/1.0");
|
||||||
|
expression_should_not_be_parseable(feature + ": 0/1");
|
||||||
|
expression_should_not_be_parseable(feature + ": 1/0");
|
||||||
|
expression_should_not_be_parseable(feature + ": 0/0");
|
||||||
|
expression_should_not_be_parseable(feature + ": -1/1");
|
||||||
|
expression_should_not_be_parseable(feature + ": 1/-1");
|
||||||
|
expression_should_not_be_parseable(feature + ": -1/-1");
|
||||||
|
}
|
||||||
|
|
||||||
|
var is_monochrome = query_applies("all and (min-monochrome: 1)");
|
||||||
|
var is_color = query_applies("all and (min-color: 1)");
|
||||||
|
isnot(is_monochrome, is_color, "should be either monochrome or color");
|
||||||
|
|
||||||
|
function depth_query(prefix, depth) {
|
||||||
|
return "all and (" + prefix + (is_color ? "color" : "monochrome") +
|
||||||
|
":" + depth + ")";
|
||||||
|
}
|
||||||
|
|
||||||
|
var depth = 0;
|
||||||
|
do {
|
||||||
|
if (depth > 50) {
|
||||||
|
ok(false, "breaking from loop, depth > 50");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} while (query_applies(depth_query("min-", ++depth)));
|
||||||
|
--depth;
|
||||||
|
|
||||||
|
should_apply(depth_query("", depth));
|
||||||
|
should_not_apply(depth_query("", depth - 1));
|
||||||
|
should_not_apply(depth_query("", depth + 1));
|
||||||
|
should_apply(depth_query("max-", depth));
|
||||||
|
should_not_apply(depth_query("max-", depth - 1));
|
||||||
|
should_apply(depth_query("max-", depth + 1));
|
||||||
|
|
||||||
|
(is_color ? should_apply : should_not_apply)("all and (color)");
|
||||||
|
(is_color ? should_apply : should_not_apply)("all and (max-color)");
|
||||||
|
(is_color ? should_apply : should_not_apply)("all and (min-color)");
|
||||||
|
(is_color ? should_not_apply : should_apply)("all and (monochrome)");
|
||||||
|
(is_color ? should_not_apply : should_apply)("all and (max-monochrome)");
|
||||||
|
(is_color ? should_not_apply : should_apply)("all and (min-monochrome)");
|
||||||
|
(is_color ? should_apply : should_not_apply)("not all and (monochrome)");
|
||||||
|
(is_color ? should_apply : should_not_apply)("not all and (max-monochrome)");
|
||||||
|
(is_color ? should_apply : should_not_apply)("not all and (min-monochrome)");
|
||||||
|
(is_color ? should_not_apply : should_apply)("not all and (color)");
|
||||||
|
(is_color ? should_not_apply : should_apply)("not all and (max-color)");
|
||||||
|
(is_color ? should_not_apply : should_apply)("not all and (min-color)");
|
||||||
|
(is_color ? should_apply : should_not_apply)("only all and (color)");
|
||||||
|
(is_color ? should_apply : should_not_apply)("only all and (max-color)");
|
||||||
|
(is_color ? should_apply : should_not_apply)("only all and (min-color)");
|
||||||
|
(is_color ? should_not_apply : should_apply)("only all and (monochrome)");
|
||||||
|
(is_color ? should_not_apply : should_apply)("only all and (max-monochrome)");
|
||||||
|
(is_color ? should_not_apply : should_apply)("only all and (min-monochrome)");
|
||||||
|
|
||||||
|
for each (let feature in [ "color", "min-monochrome", "max-color-index" ]) {
|
||||||
|
expression_should_be_parseable(feature + ": 1");
|
||||||
|
expression_should_be_parseable(feature + ": 327");
|
||||||
|
expression_should_be_parseable(feature + ": 0");
|
||||||
|
expression_should_not_be_parseable(feature + ": 1.0");
|
||||||
|
expression_should_not_be_parseable(feature + ": -1");
|
||||||
|
expression_should_not_be_parseable(feature + ": 1/1");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Presume that we never support indexed color (at least not usefully
|
||||||
|
// enough to call it indexed color).
|
||||||
|
should_apply("(color-index: 0)");
|
||||||
|
should_not_apply("(color-index: 1)");
|
||||||
|
should_apply("(min-color-index: 0)");
|
||||||
|
should_not_apply("(min-color-index: 1)");
|
||||||
|
should_apply("(max-color-index: 0)");
|
||||||
|
should_apply("(max-color-index: 1)");
|
||||||
|
should_apply("(max-color-index: 157)");
|
||||||
|
|
||||||
|
for each (let feature in [ "resolution", "min-resolution",
|
||||||
|
"max-resolution" ]) {
|
||||||
|
expression_should_be_parseable(feature + ": 3dpi");
|
||||||
|
expression_should_be_parseable(feature + ":3dpi");
|
||||||
|
expression_should_not_be_parseable(feature + ": 3.0dpi");
|
||||||
|
expression_should_not_be_parseable(feature + ": 3.4dpi");
|
||||||
|
expression_should_be_parseable(feature + "\t: 120dpcm");
|
||||||
|
expression_should_not_be_parseable(feature + ": 0dpi");
|
||||||
|
expression_should_not_be_parseable(feature + ": -3dpi");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find the resolution using max-resolution
|
||||||
|
let resolution = 0;
|
||||||
|
do {
|
||||||
|
++resolution;
|
||||||
|
if (resolution > 10000) {
|
||||||
|
ok(false, "resolution greater than 10000dpi???");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} while (!query_applies("(max-resolution: " + resolution + "dpi)"));
|
||||||
|
|
||||||
|
// resolution should now be Math.ceil() of the actual resolution.
|
||||||
|
let dpi_high;
|
||||||
|
let dpi_low = resolution - 1;
|
||||||
|
if (query_applies("(min-resolution: " + resolution + "dpi)")) {
|
||||||
|
// It's exact!
|
||||||
|
should_apply("(resolution: " + resolution + "dpi)");
|
||||||
|
should_not_apply("(resolution: " + (resolution + 1) + "dpi)");
|
||||||
|
should_not_apply("(resolution: " + (resolution - 1) + "dpi)");
|
||||||
|
dpi_high = resolution + 1;
|
||||||
|
} else {
|
||||||
|
// We have no way to test resolution applying since it need not be
|
||||||
|
// an integer.
|
||||||
|
should_not_apply("(resolution: " + resolution + "dpi)");
|
||||||
|
should_not_apply("(resolution: " + (resolution - 1) + "dpi)");
|
||||||
|
dpi_high = resolution;
|
||||||
|
}
|
||||||
|
|
||||||
|
should_apply("(min-resolution: " + dpi_low + "dpi)");
|
||||||
|
should_not_apply("not all and (min-resolution: " + dpi_low + "dpi)");
|
||||||
|
should_apply("not all and (min-resolution: " + dpi_high + "dpi)");
|
||||||
|
should_not_apply("all and (min-resolution: " + dpi_high + "dpi)");
|
||||||
|
|
||||||
|
// Test dpcm units based on what we computed in dpi.
|
||||||
|
let dpcm_high = Math.ceil(dpi_high / 2.54);
|
||||||
|
let dpcm_low = Math.floor(dpi_low / 2.54);
|
||||||
|
should_apply("(min-resolution: " + dpcm_low + "dpcm)");
|
||||||
|
should_apply("(max-resolution: " + dpcm_high + "dpcm)");
|
||||||
|
should_not_apply("(max-resolution: " + dpcm_low + "dpcm)");
|
||||||
|
should_apply("not all and (min-resolution: " + dpcm_high + "dpcm)");
|
||||||
|
|
||||||
|
expression_should_be_parseable("scan");
|
||||||
|
expression_should_be_parseable("scan: progressive");
|
||||||
|
expression_should_be_parseable("scan:interlace");
|
||||||
|
expression_should_not_be_parseable("min-scan:interlace");
|
||||||
|
expression_should_not_be_parseable("scan: 1");
|
||||||
|
expression_should_not_be_parseable("max-scan");
|
||||||
|
// Assume we don't support tv devices.
|
||||||
|
should_not_apply("(scan)");
|
||||||
|
should_not_apply("(scan: progressive)");
|
||||||
|
should_not_apply("(scan: interlace)");
|
||||||
|
should_apply("not all and (scan)");
|
||||||
|
should_apply("not all and (scan: progressive)");
|
||||||
|
should_apply("not all and (scan: interlace)");
|
||||||
|
|
||||||
|
expression_should_be_parseable("grid");
|
||||||
|
expression_should_be_parseable("grid: 0");
|
||||||
|
expression_should_be_parseable("grid: 1");
|
||||||
|
expression_should_be_parseable("grid: 1");
|
||||||
|
expression_should_not_be_parseable("min-grid");
|
||||||
|
expression_should_not_be_parseable("max-grid: 1");
|
||||||
|
// FIXME: Mark these as todo since the spec isn't clear:
|
||||||
|
// http://lists.w3.org/Archives/Public/www-style/2008Jun/0214.html
|
||||||
|
todo_expression_should_not_be_parseable("grid: 2");
|
||||||
|
todo_expression_should_be_parseable("grid: -1");
|
||||||
|
|
||||||
|
// Assume we don't support grid devices
|
||||||
|
should_not_apply("(grid)");
|
||||||
|
should_apply("(grid: 0)");
|
||||||
|
should_not_apply("(grid: 1)");
|
||||||
|
should_not_apply("(grid: 2)");
|
||||||
|
should_not_apply("(grid: -1)");
|
||||||
|
|
||||||
|
SimpleTest.finish();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</pre>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
Загрузка…
Ссылка в новой задаче