Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-19 12:25:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985

Browse source
This commit is contained in:
Josh Matthews 2017-10-31 08:58:31 -04:00
parent 43a4f01647
commit 64e0a52537
12717 changed files with 59835 additions and 59820 deletions
Download patch file Download diff file Expand all files Collapse all files

3
tests/wpt/web-platform-tests/css/mediaqueries/OWNERS Normal file
View file

@ -0,0 +1,3 @@
@dbaron
@plinss
@frivoal

26
tests/wpt/web-platform-tests/css/mediaqueries/aspect-ratio-001.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: min-aspect-ratio - 59/79 ('aspect-ratio' property with prefix 'min')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link name="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.6. aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'min' set '59/79' means that the minimum of ratio is '59/79',
only and only if the value of the 'width' to the value of the 'height' is greater than value of 'min-aspect-ratio', the style sheet will be applied.">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (min-aspect-ratio: 59/79) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
tests/wpt/web-platform-tests/css/mediaqueries/aspect-ratio-002.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: min-aspect-ratio - 0/0 ('aspect-ratio' property with prefix 'min')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link name="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.6. aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'min' set '0/0' is invalid that means the style sheet specified by 'min-aspect-ratio' will not be applied.">
<style>
div {
background-color: green;
height: 100px;
width: 100px;
}
@media screen and (min-aspect-ratio: 0/0) {
div {
background-color: red;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
tests/wpt/web-platform-tests/css/mediaqueries/aspect-ratio-003.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: max-aspect-ratio - 1280/720 ('aspect-ratio' property with prefix 'max')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link name="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.6. aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'max' set '1280/720' means that the maximum of ratio is '1280/720', only and only if the value of the 'width' to the value of the 'height' is lower than value of 'max-aspect-ratio', the style sheet will be applied.">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (max-aspect-ratio: 1280/720) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
tests/wpt/web-platform-tests/css/mediaqueries/aspect-ratio-004.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: max-aspect-ratio - 0/0 ('aspect-ratio' property with prefix 'max')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link name="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.6. aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'aspect-ratio' property with prefix 'max' set '0/0' is invalid that means the style sheet specified by 'max-aspect-ratio' will not be applied.">
<style>
div {
background-color: green;
height: 100px;
width: 100px;
}
@media screen and (max-aspect-ratio: 0/0) {
div {
background-color: red;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

26
tests/wpt/web-platform-tests/css/mediaqueries/device-aspect-ratio-001.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: max-device-aspect-ratio - 1281/1024 ('device-aspect-ratio' property with prefix 'max')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'device-aspect-ratio' property with prefix 'max' set '1281/1024' means that the maximum of ratio is '1281/1024', only and only if the device value of 'width' to value of 'height' is lower than value of 'max-device-aspect-ratio', the style sheet will be applied.">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (max-device-aspect-ratio: 1281/1024) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

26
tests/wpt/web-platform-tests/css/mediaqueries/device-aspect-ratio-002.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: max-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'max')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'device-aspect-ratio' property with prefix 'max' set '0/0' is invalid that means the style sheet specified by 'max-device-aspect-ratio' will not be applied.">
<style>
div {
background-color: green;
height: 100px;
width: 100px;
}
@media screen and (max-device-aspect-ratio: 0/0) {
div {
background-color: red;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
tests/wpt/web-platform-tests/css/mediaqueries/device-aspect-ratio-003.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: min-device-aspect-ratio - 1279/1024 ('device-aspect-ratio' property with prefix 'min')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'device-aspect-ratio' property with prefix 'min' set '1279/1024' means that the minimum of ratio is '1279/1024', only and only if the device value of 'width' to value of 'height' is greater than value of 'min-device-aspect-ratio', the style sheet will be applied.">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (min-device-aspect-ratio: 1279/1024) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
tests/wpt/web-platform-tests/css/mediaqueries/device-aspect-ratio-004.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: min-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'min')</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'device-aspect-ratio' property with prefix 'min' set '0/0' is invalid that means the style sheet specified by 'min-device-aspect-ratio' will not be applied.">
<style>
div {
background-color: green;
height: 100px;
width: 100px;
}
@media screen and (min-device-aspect-ratio: 0/0) {
div {
background-color: red;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
tests/wpt/web-platform-tests/css/mediaqueries/device-aspect-ratio-005.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: device-aspect-ratio - 1280/1024 (basic)</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'device-aspect-ratio' property set '1280/1024' means that the ratio is '1280/1024', only and only if the device value of 'width' to value of 'height' is equals with value of 'device-aspect-ratio', the style sheet will be applied.">
<style>
div {
background-color: red;
height: 100px;
width: 100px;
}
@media screen and (device-aspect-ratio: 1280/1024) {
div {
background-color: green;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

25
tests/wpt/web-platform-tests/css/mediaqueries/device-aspect-ratio-006.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Media Queries Test: device-aspect-ratio - 0/0 (invalid)</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com">
<link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'device-aspect-ratio' property set '0/0' is invalid that means the style sheet specified by 'device-aspect-ratio' will not be applied.">
<style>
div {
background-color: green;
height: 100px;
width: 100px;
}
@media screen and (device-aspect-ratio: 0/0) {
div {
background-color: red;
}
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>

21
tests/wpt/web-platform-tests/css/mediaqueries/media-queries-001.xht Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic media queries test</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/001.html"/>
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#media0"/>
<style type="text/css"><![CDATA[
@media only screen {
.a, .b { color: green; }
}
@media not only screen {
.b { color: red; }
}
]]></style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
</body>
</html>

19
tests/wpt/web-platform-tests/css/mediaqueries/media-queries-002.xht Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The 'width' media feature (for visual devices with desktop viewport widths)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/002.html"/>
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#width"/>
<style type="text/css"><![CDATA[
@media screen and (width) { .a { color: green; } }
@media screen and (min-width: 1em) { .b { color: green; } }
@media screen and (max-width: 1000000em) { .c { color: green; } }
]]></style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
<p class="c"> This line should be green. </p>
</body>
</html>

19
tests/wpt/web-platform-tests/css/mediaqueries/media-queries-003.xht Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The 'color' media feature (for color devices with bit depth less than 4096 bits per pixel)</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/media/queries/003.html"/>
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#color"/>
<style type="text/css"><![CDATA[
@media screen and (color) { .a { color: green; } }
@media screen and (min-color: 1) { .b { color: green; } }
@media screen and (max-color: 4096) { .c { color: green; } }
]]></style>
</head>
<body>
<p class="a"> This line should be green. </p>
<p class="b"> This line should be green. </p>
<p class="c"> This line should be green. </p>
</body>
</html>

30
tests/wpt/web-platform-tests/css/mediaqueries/min-width-001.xht Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CSS Media Queries Test: min-width length value approximation</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com" />
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width" />
<link rel="help" href="http://www.w3.org/TR/mediaqueries-4/#width" />
<link rel="help" href="http://www.w3.org/TR/css3-values/#length-value" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="flags" content="" />
<meta name="assert" content="min-width length values that are too large to be supported must be clamped, rounded to infinity, or approximated, but not overflowed to a small or negative value." />
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
@media (min-width: 9999999999px) {
div {
background-color: red;
}
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

42
tests/wpt/web-platform-tests/css/mediaqueries/min-width-tables-001.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>CSS Test: Table Layout and Viewport Resizing</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://drafts.csswg.org/css2/tables.html#auto-table-layout">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-3/#width">
<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#width">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="dom">
<meta name="assert" content="Resizing a page which toggles the `display` of elements between `block` and `table-cell` based on the viewport width should not cause unnecessary wrapping of the table.">
<style>
iframe {
border: 0;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<iframe id="toy" width="100" height="300" src="support/min-width-tables-001-iframe.html"></iframe>
<!-- See min-width-tables-001-iframe.html for the derivation of the 100px value -->
<!-- We use 300px height so the incorrect stacking is visible in failure cases -->
<!-- This test is not about iframes specifically. It's just that resizing an iframe is more reliable than resizing the window, given browser security restrictions. -->
<script>
window.addEventListener('load', function () {
var PAINT_MS = 250;/* Assume the browser takes about this long to layout/paint this whole page */
var iframe = document.getElementById('toy');
window.setTimeout(function () {
iframe.width = 64;/* <100px ; toggle media query off */
window.setTimeout(function () {
iframe.width = 100;/* >=100px ; toggle media query on; back to initial width */
// Take the reftest screenshot after the last relayout/repaint finishes
window.setTimeout(function () {
document.documentElement.className = '';
}, PAINT_MS);
}, PAINT_MS);
}, PAINT_MS);
}, false);
</script>
</body>
</html>

26
tests/wpt/web-platform-tests/css/mediaqueries/mq-calc-001.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html>
<head>
<title>Test: support for calc in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="calc can be used in Media Queries">
<meta name="flags" content="">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (min-width: calc(1px - 1px)){
div { background-color: green; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/mediaqueries/mq-calc-002.html Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<title>Test: evaluation of em in calc in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The size in pixels of the 'em' unit used in calc inside a media query does not depend on declarations and use the initial value.">
<meta name="flags" content="">
<style>
:root { font-size: 30000px; }
p { font-size: 16px; }
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (min-width: calc(1em)){
div { background-color: green; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/mediaqueries/mq-calc-003.html Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<title>Test: evaluation of ex in calc in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The size in pixels of the 'ex' unit used in calc inside a media query does not depend on declarations and use the initial value.">
<meta name="flags" content="">
<style>
:root { font-size: 30000px; }
p { font-size: 16px; }
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (min-width: calc(1ex)){
div { background-color: green; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/mediaqueries/mq-calc-004.html Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<title>Test: evaluation of ch in calc in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The size in pixels of the 'ch' unit used in calc inside a media query does not depend on declarations and use the initial value.">
<meta name="flags" content="">
<style>
:root { font-size: 30000px; }
p { font-size: 16px; }
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (min-width: calc(1ch)){
div { background-color: green; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/mediaqueries/mq-calc-005.html Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<title>Test: evaluation of rem in calc in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The size in pixels of the 'rem' unit used in calc inside a media query does not depend on declarations and use the initial value.">
<meta name="flags" content="">
<style>
:root { font-size: 30000px; }
p { font-size: 16px; }
div {
width: 100px;
height: 100px;
background-color: red;
}
@media (min-width: calc(1rem)){
div { background-color: green; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/mediaqueries/mq-invalid-media-type-001.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<html>
<head>
<title>Test: syntax error handling in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries4/#error-handling">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="'and' is an invalid media type">
<meta name="flags" content="invalid">
<style>
div {
width: 100px;
height: 100px;
}
@media all {
div { background-color: green; }
}
@media not and {
div { background-color: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/mediaqueries/mq-invalid-media-type-002.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<html>
<head>
<title>Test: syntax error handling in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries4/#error-handling">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="'or' is an invalid media type">
<meta name="flags" content="invalid">
<style>
div {
width: 100px;
height: 100px;
}
@media all {
div { background-color: green; }
}
@media not or {
div { background-color: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/mediaqueries/mq-invalid-media-type-003.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<html>
<head>
<title>Test: syntax error handling in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries4/#error-handling">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="'not' is an invalid media type">
<meta name="flags" content="invalid">
<style>
div {
width: 100px;
height: 100px;
}
@media all {
div { background-color: green; }
}
@media not not {
div { background-color: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/mediaqueries/mq-invalid-media-type-004.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<html>
<head>
<title>Test: syntax error handling in Media Queries</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/mediaqueries4/#error-handling">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="'only' is an invalid media type">
<meta name="flags" content="invalid">
<style>
div {
width: 100px;
height: 100px;
}
@media all {
div { background-color: green; }
}
@media not only {
div { background-color: red; }
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

18
tests/wpt/web-platform-tests/css/mediaqueries/reference/ref-green-body.xht Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com" />
<style type="text/css">
body {
background: green;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body>
</html>

32
tests/wpt/web-platform-tests/css/mediaqueries/relative-units-001.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (rem) in width media queries</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#units">
<link rel="match" href="reference/ref-green-body.xht">
<meta name="flags" content="">
<meta name="assert" content="Font-relative length units (such as 'rem') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1rem) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body>
</html>

32
tests/wpt/web-platform-tests/css/mediaqueries/relative-units-002.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (em) in width media queries</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#units">
<link rel="match" href="reference/ref-green-body.xht">
<meta name="flags" content="">
<meta name="assert" content="Font-relative length units (such as 'em') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1em) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body>
</html>

32
tests/wpt/web-platform-tests/css/mediaqueries/relative-units-003.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (ex) in width media queries</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#units">
<link rel="match" href="reference/ref-green-body.xht">
<meta name="flags" content="">
<meta name="assert" content="Font-relative length units (such as 'ex') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1ex) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body>
</html>

32
tests/wpt/web-platform-tests/css/mediaqueries/relative-units-004.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: Font-relative length units (ch) in width media queries</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://www.w3.org/TR/css3-mediaqueries/#units">
<link rel="help" href="https://www.w3.org/TR/mediaqueries-4/#units">
<link rel="match" href="reference/ref-green-body.xht">
<meta name="flags" content="">
<meta name="assert" content="Font-relative length units (such as 'ch') in media queries should be calculated based on the initial value of 'font-size', not based on author style declarations, such as: html { font-size: 200%; }">
<style>
:root {
font-size: 100000px;/* ~87ft */
}
body {
background: red;
}
@media (min-width: 1ch) {
body {
background: green;
}
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<p>This should have a green background.</p>
</body>
</html>

16
tests/wpt/web-platform-tests/css/mediaqueries/support/media_queries_iframe.html Normal file
View file

@ -0,0 +1,16 @@
<!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">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<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>

59
tests/wpt/web-platform-tests/css/mediaqueries/support/min-width-tables-001-iframe.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe containing the meat of the test</title>
<style>
body {
margin: 0;
overflow: hidden;
}
/* green div that should cover the red divs */
#green {
position: absolute;
left: 0;
top: 0;
background-color: green;
width: 100%;
height: 600px;
}
.spacer {
height: 98px;
width: 20px;
}
.item {
background-color: red;
display: block;/* property under test */
/* border to aid understanding of boundaries between items */
border-style: solid;
border-width: 1px;
border-color: red;/* Note: if you're trying to debug this, use a different color here */
}
/* 100px = 10*(1 + 8 + 1) */
@media (min-width: 100px) {
#green {
width: 100px;
height: 100px;/* = 1 + 98 + 1 */
}
.item {
display: table-cell;/* property and value under test */
}
}
</style>
</head>
<body>
<div>
<div class="item"><div class="spacer"></div></div>
<div class="item"><div class="spacer"></div></div>
<div class="item"><div class="spacer"></div></div>
<div class="item"><div class="spacer"></div></div>
<div class="item"><div class="spacer"></div></div>
<div class="item"><div class="spacer"></div></div>
<div class="item"><div class="spacer"></div></div>
<div class="item"><div class="spacer"></div></div>
<div class="item"><div class="spacer"></div></div>
<div class="item"><div class="spacer"></div></div>
</div>
<div id="green"></div>
</body>
</html>

837
tests/wpt/web-platform-tests/css/mediaqueries/test_media_queries.html Normal file
View file

@ -0,0 +1,837 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Media Queries Self-Contained Test Suite</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/">
<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com">
<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/">
<script type="text/javascript" src="/resources/testharness.js"></script>
<script type="text/javascript" src="/resources/testharnessreport.js"></script>
<script id="metadata_cache">/*
{
"subtest_1": { "assert": "query (orientation) should be parseable" },
"subtest_2": { "assert": "query not (orientation) should not be parseable" },
"subtest_3": { "assert": "query only (orientation) should not be parseable" },
"subtest_4": { "assert": "query all and (orientation) should be parseable" },
"subtest_5": { "assert": "query not all and (orientation) should be parseable" },
"subtest_6": { "assert": "query only all and (orientation) should be parseable" },
"subtest_7": { "assert": "expression width should be parseable" },
"subtest_8": { "assert": "expression width: 0 should be parseable" },
"subtest_9": { "assert": "expression width: 0px should be parseable" },
"subtest_10": { "assert": "expression width: 0em should be parseable" },
"subtest_11": { "assert": "expression width: -0 should be parseable" },
"subtest_12": { "assert": "expression min-width: -0 should be parseable" },
"subtest_13": { "assert": "expression max-width: -0 should be parseable" },
"subtest_14": { "assert": "expression width: -0cm should be parseable" },
"subtest_15": { "assert": "expression width: 1px should be parseable" },
"subtest_16": { "assert": "expression width: 0.001mm should be parseable" },
"subtest_17": { "assert": "expression width: 100000px should be parseable" },
"subtest_18": { "assert": "expression width: -1px should not be parseable" },
"subtest_19": { "assert": "expression min-width: -1px should not be parseable" },
"subtest_20": { "assert": "expression max-width: -1px should not be parseable" },
"subtest_21": { "assert": "expression width: -0.00001mm should not be parseable" },
"subtest_22": { "assert": "expression width: -100000em should not be parseable" },
"subtest_23": { "assert": "expression min-width should not be parseable" },
"subtest_24": { "assert": "expression max-width should not be parseable" },
"subtest_25": { "assert": "expression height should be parseable" },
"subtest_26": { "assert": "expression height: 0 should be parseable" },
"subtest_27": { "assert": "expression height: 0px should be parseable" },
"subtest_28": { "assert": "expression height: 0em should be parseable" },
"subtest_29": { "assert": "expression height: -0 should be parseable" },
"subtest_30": { "assert": "expression min-height: -0 should be parseable" },
"subtest_31": { "assert": "expression max-height: -0 should be parseable" },
"subtest_32": { "assert": "expression height: -0cm should be parseable" },
"subtest_33": { "assert": "expression height: 1px should be parseable" },
"subtest_34": { "assert": "expression height: 0.001mm should be parseable" },
"subtest_35": { "assert": "expression height: 100000px should be parseable" },
"subtest_36": { "assert": "expression height: -1px should not be parseable" },
"subtest_37": { "assert": "expression min-height: -1px should not be parseable" },
"subtest_38": { "assert": "expression max-height: -1px should not be parseable" },
"subtest_39": { "assert": "expression height: -0.00001mm should not be parseable" },
"subtest_40": { "assert": "expression height: -100000em should not be parseable" },
"subtest_41": { "assert": "expression min-height should not be parseable" },
"subtest_42": { "assert": "expression max-height should not be parseable" },
"subtest_43": { "assert": "expression device-width should be parseable" },
"subtest_44": { "assert": "expression device-width: 0 should be parseable" },
"subtest_45": { "assert": "expression device-width: 0px should be parseable" },
"subtest_46": { "assert": "expression device-width: 0em should be parseable" },
"subtest_47": { "assert": "expression device-width: -0 should be parseable" },
"subtest_48": { "assert": "expression min-device-width: -0 should be parseable" },
"subtest_49": { "assert": "expression max-device-width: -0 should be parseable" },
"subtest_50": { "assert": "expression device-width: -0cm should be parseable" },
"subtest_51": { "assert": "expression device-width: 1px should be parseable" },
"subtest_52": { "assert": "expression device-width: 0.001mm should be parseable" },
"subtest_53": { "assert": "expression device-width: 100000px should be parseable" },
"subtest_54": { "assert": "expression device-width: -1px should not be parseable" },
"subtest_55": { "assert": "expression min-device-width: -1px should not be parseable" },
"subtest_56": { "assert": "expression max-device-width: -1px should not be parseable" },
"subtest_57": { "assert": "expression device-width: -0.00001mm should not be parseable" },
"subtest_58": { "assert": "expression device-width: -100000em should not be parseable" },
"subtest_59": { "assert": "expression min-device-width should not be parseable" },
"subtest_60": { "assert": "expression max-device-width should not be parseable" },
"subtest_61": { "assert": "expression device-height should be parseable" },
"subtest_62": { "assert": "expression device-height: 0 should be parseable" },
"subtest_63": { "assert": "expression device-height: 0px should be parseable" },
"subtest_64": { "assert": "expression device-height: 0em should be parseable" },
"subtest_65": { "assert": "expression device-height: -0 should be parseable" },
"subtest_66": { "assert": "expression min-device-height: -0 should be parseable" },
"subtest_67": { "assert": "expression max-device-height: -0 should be parseable" },
"subtest_68": { "assert": "expression device-height: -0cm should be parseable" },
"subtest_69": { "assert": "expression device-height: 1px should be parseable" },
"subtest_70": { "assert": "expression device-height: 0.001mm should be parseable" },
"subtest_71": { "assert": "expression device-height: 100000px should be parseable" },
"subtest_72": { "assert": "expression device-height: -1px should not be parseable" },
"subtest_73": { "assert": "expression min-device-height: -1px should not be parseable" },
"subtest_74": { "assert": "expression max-device-height: -1px should not be parseable" },
"subtest_75": { "assert": "expression device-height: -0.00001mm should not be parseable" },
"subtest_76": { "assert": "expression device-height: -100000em should not be parseable" },
"subtest_77": { "assert": "expression min-device-height should not be parseable" },
"subtest_78": { "assert": "expression max-device-height should not be parseable" },
"subtest_79": { "assert": "all and (width: 117px) should apply" },
"subtest_80": { "assert": "all and (width: 118px) should not apply" },
"subtest_81": { "assert": "all and (width: 116px) should not apply" },
"subtest_82": { "assert": "all and (min-width: 117px) should apply" },
"subtest_83": { "assert": "all and (min-width: 118px) should not apply" },
"subtest_84": { "assert": "all and (min-width: 116px) should apply" },
"subtest_85": { "assert": "all and (max-width: 117px) should apply" },
"subtest_86": { "assert": "all and (max-width: 118px) should apply" },
"subtest_87": { "assert": "all and (max-width: 116px) should not apply" },
"subtest_88": { "assert": "all and (min-width: 9em) should not apply" },
"subtest_89": { "assert": "all and (min-width: 6em) should apply" },
"subtest_90": { "assert": "all and (max-width: 9em) should apply" },
"subtest_91": { "assert": "all and (max-width: 6em) should not apply" },
"subtest_92": { "assert": "all and (height: 76px) should apply" },
"subtest_93": { "assert": "all and (height: 77px) should not apply" },
"subtest_94": { "assert": "all and (height: 75px) should not apply" },
"subtest_95": { "assert": "all and (min-height: 76px) should apply" },
"subtest_96": { "assert": "all and (min-height: 77px) should not apply" },
"subtest_97": { "assert": "all and (min-height: 75px) should apply" },
"subtest_98": { "assert": "all and (max-height: 76px) should apply" },
"subtest_99": { "assert": "all and (max-height: 77px) should apply" },
"subtest_100": { "assert": "all and (max-height: 75px) should not apply" },
"subtest_101": { "assert": "all and (min-height: 6em) should not apply" },
"subtest_102": { "assert": "all and (min-height: 3em) should apply" },
"subtest_103": { "assert": "all and (max-height: 6em) should apply" },
"subtest_104": { "assert": "all and (max-height: 3em) should not apply" },
"subtest_105": { "assert": "all and (device-width: 1920px) should apply" },
"subtest_106": { "assert": "all and (device-width: 1921px) should not apply" },
"subtest_107": { "assert": "all and (device-width: 1919px) should not apply" },
"subtest_108": { "assert": "all and (min-device-width: 1920px) should apply" },
"subtest_109": { "assert": "all and (min-device-width: 1921px) should not apply" },
"subtest_110": { "assert": "all and (min-device-width: 1919px) should apply" },
"subtest_111": { "assert": "all and (max-device-width: 1920px) should apply" },
"subtest_112": { "assert": "all and (max-device-width: 1921px) should apply" },
"subtest_113": { "assert": "all and (max-device-width: 1919px) should not apply" },
"subtest_114": { "assert": "all and (min-device-width: 121em) should not apply" },
"subtest_115": { "assert": "all and (min-device-width: 119em) should apply" },
"subtest_116": { "assert": "all and (max-device-width: 121em) should apply" },
"subtest_117": { "assert": "all and (max-device-width: 119em) should not apply" },
"subtest_118": { "assert": "all and (device-height: 1200px) should apply" },
"subtest_119": { "assert": "all and (device-height: 1201px) should not apply" },
"subtest_120": { "assert": "all and (device-height: 1199px) should not apply" },
"subtest_121": { "assert": "all and (min-device-height: 1200px) should apply" },
"subtest_122": { "assert": "all and (min-device-height: 1201px) should not apply" },
"subtest_123": { "assert": "all and (min-device-height: 1199px) should apply" },
"subtest_124": { "assert": "all and (max-device-height: 1200px) should apply" },
"subtest_125": { "assert": "all and (max-device-height: 1201px) should apply" },
"subtest_126": { "assert": "all and (max-device-height: 1199px) should not apply" },
"subtest_127": { "assert": "all and (min-device-height: 76em) should not apply" },
"subtest_128": { "assert": "all and (min-device-height: 74em) should apply" },
"subtest_129": { "assert": "all and (max-device-height: 76em) should apply" },
"subtest_130": { "assert": "all and (max-device-height: 74em) should not apply" },
"subtest_131": { "assert": "all and (height) should apply" },
"subtest_132": { "assert": "all and (width) should not apply" },
"subtest_133": { "assert": "all and (height) should not apply" },
"subtest_134": { "assert": "all and (width) should not apply" },
"subtest_135": { "assert": "all and (device-height) should apply" },
"subtest_136": { "assert": "all and (device-width) should apply" },
"subtest_137": { "assert": "all and (height) should not apply" },
"subtest_138": { "assert": "all and (width) should apply" },
"subtest_139": { "assert": "all and (height) should apply" },
"subtest_140": { "assert": "all and (width) should apply" },
"subtest_141": { "assert": "expression orientation should be parseable" },
"subtest_142": { "assert": "expression orientation: portrait should be parseable" },
"subtest_143": { "assert": "expression orientation: landscape should be parseable" },
"subtest_144": { "assert": "expression min-orientation should not be parseable" },
"subtest_145": { "assert": "expression min-orientation: portrait should not be parseable" },
"subtest_146": { "assert": "expression min-orientation: landscape should not be parseable" },
"subtest_147": { "assert": "expression max-orientation should not be parseable" },
"subtest_148": { "assert": "expression max-orientation: portrait should not be parseable" },
"subtest_149": { "assert": "expression max-orientation: landscape should not be parseable" },
"subtest_150": { "assert": "(orientation) should apply" },
"subtest_151": { "assert": "(orientation: landscape) should apply" },
"subtest_152": { "assert": "(orientation: portrait) should not apply" },
"subtest_153": { "assert": "not all and (orientation: portrait) should apply" },
"subtest_154": { "assert": "(orientation) should apply" },
"subtest_155": { "assert": "(orientation: landscape) should not apply" },
"subtest_156": { "assert": "not all and (orientation: landscape) should apply" },
"subtest_157": { "assert": "(orientation: portrait) should apply" },
"subtest_158": { "assert": "(aspect-ratio: 59/80) should apply" },
"subtest_159": { "assert": "(aspect-ratio: 58/80) should not apply" },
"subtest_160": { "assert": "(aspect-ratio: 59/81) should not apply" },
"subtest_161": { "assert": "(aspect-ratio: 60/80) should not apply" },
"subtest_162": { "assert": "(aspect-ratio: 59/79) should not apply" },
"subtest_163": { "assert": "(aspect-ratio: 177/240) should apply" },
"subtest_164": { "assert": "(aspect-ratio: 413/560) should apply" },
"subtest_165": { "assert": "(aspect-ratio: 5900/8000) should apply" },
"subtest_166": { "assert": "(aspect-ratio: 5901/8000) should not apply" },
"subtest_167": { "assert": "(aspect-ratio: 5899/8000) should not apply" },
"subtest_168": { "assert": "(aspect-ratio: 5900/8001) should not apply" },
"subtest_169": { "assert": "(aspect-ratio: 5900/7999) should not apply" },
"subtest_170": { "assert": "(aspect-ratio) should apply" },
"subtest_171": { "assert": "(min-aspect-ratio: 59/80) should apply" },
"subtest_172": { "assert": "(min-aspect-ratio: 58/80) should apply" },
"subtest_173": { "assert": "(min-aspect-ratio: 59/81) should apply" },
"subtest_174": { "assert": "(min-aspect-ratio: 60/80) should not apply" },
"subtest_175": { "assert": "(min-aspect-ratio: 59/79) should not apply" },
"subtest_176": { "assert": "expression min-aspect-ratio should not be parseable" },
"subtest_177": { "assert": "(max-aspect-ratio: 59/80) should apply" },
"subtest_178": { "assert": "(max-aspect-ratio: 58/80) should not apply" },
"subtest_179": { "assert": "(max-aspect-ratio: 59/81) should not apply" },
"subtest_180": { "assert": "(max-aspect-ratio: 60/80) should apply" },
"subtest_181": { "assert": "(max-aspect-ratio: 59/79) should apply" },
"subtest_182": { "assert": "expression max-aspect-ratio should not be parseable" },
"subtest_183": { "assert": "(device-aspect-ratio: 1920/1200) should apply" },
"subtest_184": { "assert": "not all and (device-aspect-ratio: 1921/1200) should apply" },
"subtest_185": { "assert": "all and (device-aspect-ratio: 1920/1199) should not apply" },
"subtest_186": { "assert": "all and (device-aspect-ratio: 1919/1200) should not apply" },
"subtest_187": { "assert": "not all and (device-aspect-ratio: 1920/1201) should apply" },
"subtest_188": { "assert": "(device-aspect-ratio) should apply" },
"subtest_189": { "assert": "(min-device-aspect-ratio: 1920/1200) should apply" },
"subtest_190": { "assert": "all and (min-device-aspect-ratio: 1921/1200) should not apply" },
"subtest_191": { "assert": "not all and (min-device-aspect-ratio: 1920/1199) should apply" },
"subtest_192": { "assert": "not all and (min-device-aspect-ratio: 1919/1200) should not apply" },
"subtest_193": { "assert": "all and (min-device-aspect-ratio: 1920/1201) should apply" },
"subtest_194": { "assert": "expression min-device-aspect-ratio should not be parseable" },
"subtest_195": { "assert": "all and (max-device-aspect-ratio: 1920/1200) should apply" },
"subtest_196": { "assert": "(max-device-aspect-ratio: 1921/1200) should apply" },
"subtest_197": { "assert": "(max-device-aspect-ratio: 1920/1199) should apply" },
"subtest_198": { "assert": "all and (max-device-aspect-ratio: 1919/1200) should not apply" },
"subtest_199": { "assert": "not all and (max-device-aspect-ratio: 1920/1201) should apply" },
"subtest_200": { "assert": "expression max-device-aspect-ratio should not be parseable" },
"subtest_201": { "assert": "expression max-aspect-ratio: 1/1 should be parseable" },
"subtest_202": { "assert": "expression max-aspect-ratio: 1 /1 should be parseable" },
"subtest_203": { "assert": "expression max-aspect-ratio: 1 / \t\n1 should be parseable" },
"subtest_204": { "assert": "expression max-aspect-ratio: 1/\r1 should be parseable" },
"subtest_205": { "assert": "expression max-aspect-ratio: 1 should not be parseable" },
"subtest_206": { "assert": "expression max-aspect-ratio: 0.5 should not be parseable" },
"subtest_207": { "assert": "expression max-aspect-ratio: 1.0/1 should not be parseable" },
"subtest_208": { "assert": "expression max-aspect-ratio: 1/1.0 should not be parseable" },
"subtest_209": { "assert": "expression max-aspect-ratio: 1.0/1.0 should not be parseable" },
"subtest_210": { "assert": "expression max-aspect-ratio: 0/1 should not be parseable" },
"subtest_211": { "assert": "expression max-aspect-ratio: 1/0 should not be parseable" },
"subtest_212": { "assert": "expression max-aspect-ratio: 0/0 should not be parseable" },
"subtest_213": { "assert": "expression max-aspect-ratio: -1/1 should not be parseable" },
"subtest_214": { "assert": "expression max-aspect-ratio: 1/-1 should not be parseable" },
"subtest_215": { "assert": "expression max-aspect-ratio: -1/-1 should not be parseable" },
"subtest_216": { "assert": "expression device-aspect-ratio: 1/1 should be parseable" },
"subtest_217": { "assert": "expression device-aspect-ratio: 1 /1 should be parseable" },
"subtest_218": { "assert": "expression device-aspect-ratio: 1 / \t\n1 should be parseable" },
"subtest_219": { "assert": "expression device-aspect-ratio: 1/\r1 should be parseable" },
"subtest_220": { "assert": "expression device-aspect-ratio: 1 should not be parseable" },
"subtest_221": { "assert": "expression device-aspect-ratio: 0.5 should not be parseable" },
"subtest_222": { "assert": "expression device-aspect-ratio: 1.0/1 should not be parseable" },
"subtest_223": { "assert": "expression device-aspect-ratio: 1/1.0 should not be parseable" },
"subtest_224": { "assert": "expression device-aspect-ratio: 1.0/1.0 should not be parseable" },
"subtest_225": { "assert": "expression device-aspect-ratio: 0/1 should not be parseable" },
"subtest_226": { "assert": "expression device-aspect-ratio: 1/0 should not be parseable" },
"subtest_227": { "assert": "expression device-aspect-ratio: 0/0 should not be parseable" },
"subtest_228": { "assert": "expression device-aspect-ratio: -1/1 should not be parseable" },
"subtest_229": { "assert": "expression device-aspect-ratio: 1/-1 should not be parseable" },
"subtest_230": { "assert": "expression device-aspect-ratio: -1/-1 should not be parseable" },
"monochrome_and_color": {},
"find_depth": {},
"subtest_231": { "assert": "all and (color:8) should apply" },
"subtest_232": { "assert": "all and (color:7) should not apply" },
"subtest_233": { "assert": "all and (color:9) should not apply" },
"subtest_234": { "assert": "all and (max-color:8) should apply" },
"subtest_235": { "assert": "all and (max-color:7) should not apply" },
"subtest_236": { "assert": "all and (max-color:9) should apply" },
"subtest_237": { "assert": "all and (color) should apply" },
"subtest_238": { "assert": "expression max-color should not be parseable" },
"subtest_239": { "assert": "expression min-color should not be parseable" },
"subtest_240": { "assert": "all and (monochrome) should not apply" },
"subtest_241": { "assert": "expression max-monochrome should not be parseable" },
"subtest_242": { "assert": "expression min-monochrome should not be parseable" },
"subtest_243": { "assert": "not all and (monochrome) should apply" },
"subtest_244": { "assert": "not all and (color) should not apply" },
"subtest_245": { "assert": "only all and (color) should apply" },
"subtest_246": { "assert": "only all and (monochrome) should not apply" },
"subtest_247": { "assert": "expression color: 1 should be parseable" },
"subtest_248": { "assert": "expression color: 327 should be parseable" },
"subtest_249": { "assert": "expression color: 0 should be parseable" },
"subtest_250": { "assert": "expression color: 1.0 should not be parseable" },
"subtest_251": { "assert": "expression color: -1 should not be parseable" },
"subtest_252": { "assert": "expression color: 1/1 should not be parseable" },
"subtest_253": { "assert": "expression min-monochrome: 1 should be parseable" },
"subtest_254": { "assert": "expression min-monochrome: 327 should be parseable" },
"subtest_255": { "assert": "expression min-monochrome: 0 should be parseable" },
"subtest_256": { "assert": "expression min-monochrome: 1.0 should not be parseable" },
"subtest_257": { "assert": "expression min-monochrome: -1 should not be parseable" },
"subtest_258": { "assert": "expression min-monochrome: 1/1 should not be parseable" },
"subtest_259": { "assert": "expression max-color-index: 1 should be parseable" },
"subtest_260": { "assert": "expression max-color-index: 327 should be parseable" },
"subtest_261": { "assert": "expression max-color-index: 0 should be parseable" },
"subtest_262": { "assert": "expression max-color-index: 1.0 should not be parseable" },
"subtest_263": { "assert": "expression max-color-index: -1 should not be parseable" },
"subtest_264": { "assert": "expression max-color-index: 1/1 should not be parseable" },
"subtest_265": { "assert": "(color-index: 0) should apply" },
"subtest_266": { "assert": "(color-index: 1) should not apply" },
"subtest_267": { "assert": "(min-color-index: 0) should apply" },
"subtest_268": { "assert": "(min-color-index: 1) should not apply" },
"subtest_269": { "assert": "(max-color-index: 0) should apply" },
"subtest_270": { "assert": "(max-color-index: 1) should apply" },
"subtest_271": { "assert": "(max-color-index: 157) should apply" },
"subtest_272": { "assert": "expression resolution: 3dpi should be parseable" },
"subtest_273": { "assert": "expression resolution:3dpi should be parseable" },
"subtest_274": { "assert": "expression resolution: 3.0dpi should be parseable" },
"subtest_275": { "assert": "expression resolution: 3.4dpi should be parseable" },
"subtest_276": { "assert": "expression resolution\t: 120dpcm should be parseable" },
"subtest_277": { "assert": "expression resolution: 0dpi should not be parseable" },
"subtest_278": { "assert": "expression resolution: -3dpi should not be parseable" },
"subtest_279": { "assert": "expression min-resolution: 3dpi should be parseable" },
"subtest_280": { "assert": "expression min-resolution:3dpi should be parseable" },
"subtest_281": { "assert": "expression min-resolution: 3.0dpi should be parseable" },
"subtest_282": { "assert": "expression min-resolution: 3.4dpi should be parseable" },
"subtest_283": { "assert": "expression min-resolution\t: 120dpcm should be parseable" },
"subtest_284": { "assert": "expression min-resolution: 0dpi should not be parseable" },
"subtest_285": { "assert": "expression min-resolution: -3dpi should not be parseable" },
"subtest_286": { "assert": "expression max-resolution: 3dpi should be parseable" },
"subtest_287": { "assert": "expression max-resolution:3dpi should be parseable" },
"subtest_288": { "assert": "expression max-resolution: 3.0dpi should be parseable" },
"subtest_289": { "assert": "expression max-resolution: 3.4dpi should be parseable" },
"subtest_290": { "assert": "expression max-resolution\t: 120dpcm should be parseable" },
"subtest_291": { "assert": "expression max-resolution: 0dpi should not be parseable" },
"subtest_292": { "assert": "expression max-resolution: -3dpi should not be parseable" },
"find_resolution": {},
"subtest_293": { "assert": "(resolution: 133dpi) should apply" },
"subtest_294": { "assert": "(resolution: 134dpi) should not apply" },
"subtest_295": { "assert": "(resolution: 132dpi) should not apply" },
"subtest_296": { "assert": "(min-resolution: 132dpi) should apply" },
"subtest_297": { "assert": "not all and (min-resolution: 132dpi) should not apply" },
"subtest_298": { "assert": "not all and (min-resolution: 134dpi) should apply" },
"subtest_299": { "assert": "all and (min-resolution: 134dpi) should not apply" },
"subtest_300": { "assert": "(min-resolution: 51dpcm) should apply" },
"subtest_301": { "assert": "(max-resolution: 53dpcm) should apply" },
"subtest_302": { "assert": "(max-resolution: 51dpcm) should not apply" },
"subtest_303": { "assert": "not all and (min-resolution: 53dpcm) should apply" },
"subtest_304": { "assert": "expression scan should be parseable" },
"subtest_305": { "assert": "expression scan: progressive should be parseable" },
"subtest_306": { "assert": "expression scan:interlace should be parseable" },
"subtest_307": { "assert": "expression min-scan:interlace should not be parseable" },
"subtest_308": { "assert": "expression scan: 1 should not be parseable" },
"subtest_309": { "assert": "expression max-scan should not be parseable" },
"subtest_310": { "assert": "expression max-scan: progressive should not be parseable" },
"subtest_311": { "assert": "(scan) should not apply" },
"subtest_312": { "assert": "(scan: progressive) should not apply" },
"subtest_313": { "assert": "(scan: interlace) should not apply" },
"subtest_314": { "assert": "not all and (scan) should apply" },
"subtest_315": { "assert": "not all and (scan: progressive) should apply" },
"subtest_316": { "assert": "not all and (scan: interlace) should apply" },
"subtest_317": { "assert": "expression grid should be parseable" },
"subtest_318": { "assert": "expression grid: 0 should be parseable" },
"subtest_319": { "assert": "expression grid: 1 should be parseable" },
"subtest_320": { "assert": "expression grid: 1 should be parseable" },
"subtest_321": { "assert": "expression min-grid should not be parseable" },
"subtest_322": { "assert": "expression min-grid:0 should not be parseable" },
"subtest_323": { "assert": "expression max-grid: 1 should not be parseable" },
"subtest_324": { "assert": "expression grid: 2 should not be parseable" },
"subtest_325": { "assert": "expression grid: -1 should not be parseable" },
"subtest_326": { "assert": "(grid) should not apply" },
"subtest_327": { "assert": "(grid: 0) should apply" },
"subtest_328": { "assert": "(grid: 1) should not apply" },
"subtest_329": { "assert": "(grid: 2) should not apply" },
"subtest_330": { "assert": "(grid: -1) should not apply" },
"subtest_331": { "assert": "(orientation should apply" },
"subtest_332": { "assert": "not all and (orientation should not apply" },
"subtest_333": { "assert": "(orientation: should not apply" },
"subtest_334": { "assert": "all,(orientation: should apply" },
"subtest_335": { "assert": "(orientation:,all should not apply" },
"subtest_336": { "assert": "not all and (grid should apply" },
"subtest_337": { "assert": "only all and (grid should not apply" },
"subtest_338": { "assert": "(grid should not apply" },
"subtest_339": { "assert": "all,(grid should apply" },
"subtest_340": { "assert": "(grid,all should not apply" },
"subtest_341": { "assert": ",all should apply" },
"subtest_342": { "assert": "all, should apply" },
"subtest_343": { "assert": ",all, should apply" },
"subtest_344": { "assert": "all,badmedium should apply" },
"subtest_345": { "assert": "badmedium,all should apply" },
"subtest_346": { "assert": ",badmedium, should not apply" },
"subtest_347": { "assert": "all,(badexpression) should apply" },
"subtest_348": { "assert": "(badexpression),all should apply" },
"subtest_349": { "assert": "(badexpression),badmedium should not apply" },
"subtest_350": { "assert": "badmedium,(badexpression) should not apply" },
"subtest_351": { "assert": "all,[badsyntax] should apply" },
"subtest_352": { "assert": "[badsyntax],all should apply" },
"subtest_353": { "assert": "badmedium,[badsyntax] should not apply" },
"subtest_354": { "assert": "[badsyntax],badmedium should not apply" },
"subtest_355": { "assert": "query all and color : should not be parseable" },
"subtest_356": { "assert": "query all and color : 1 should not be parseable" },
"subtest_357": { "assert": "all and min-color : 1 should not apply" },
"subtest_358": { "assert": "(bogus) should not apply" },
"subtest_359": { "assert": "not all and (bogus) should not apply" },
"subtest_360": { "assert": "only all and (bogus) should not apply" }
}
*/</script>
</head>
<body onload="run()">
<div id=log></div>
<iframe id="subdoc" src="support/media_queries_iframe.html"></iframe>
<div id="content" style="display: none"></div>
<script type="text/javascript">
setup({ "explicit_done": true });
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, "");
var testNum = 0;
function query_applies(q) {
style.setAttribute("media", q);
return body_cs.getPropertyValue("text-decoration") == "underline";
}
function should_apply(q) {
test(function() {
assert_true(query_applies(q));
}, "subtest_" + ++testNum, {assert: q + " should apply"});
}
function should_not_apply(q) {
test(function() {
assert_false(query_applies(q));
}, "subtest_" + ++testNum, {assert: 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 screen, " + q + " {}";
var sheet = parse_test_style_element.sheet; // XXX yikes, not live!
if (sheet.cssRules.length == 1 &&
sheet.cssRules[0].type == CSSRule.MEDIA_RULE)
return sheet.cssRules[0].media.mediaText != "screen, not all";
assert_unreached(
"unexpected result testing whether query " + q + " is parseable");
}
function query_should_be_parseable(q) {
test(function() {
assert_true(query_is_parseable(q))
}, "subtest_" + ++testNum, {assert: "query " + q + " should be parseable"});
}
function query_should_not_be_parseable(q) {
test(function() {
assert_false(query_is_parseable(q))
}, "subtest_" + ++testNum, {assert: "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) {
test(function() {
assert_true(expression_is_parseable(e));
}, "subtest_" + ++testNum, {assert: "expression " + e + " should be parseable"});
}
function expression_should_not_be_parseable(e) {
test(function() {
assert_false(expression_is_parseable(e));
}, "subtest_" + ++testNum, {assert: "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)");
var features = [ "width", "height", "device-width", "device-height" ];
var feature;
var i;
for (i in features) {
feature = features[i];
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");
expression_should_not_be_parseable("min-" + feature);
expression_should_not_be_parseable("max-" + feature);
}
var content_div = document.getElementById("content");
content_div.style.font = "medium sans-serif";
var em_size =
getComputedStyle(content_div, "").fontSize.match(/^(\d+)px$/)[1];
// in this test, assume the common underlying implementation is correct
var width_val = 117; // pick two not-too-round numbers
var height_val = 76;
iframe_style.width = width_val + "px";
iframe_style.height = height_val + "px";
var device_width = window.screen.width;
var device_height = window.screen.height;
features = { "width": width_val,
"height": height_val,
"device-width": device_width,
"device-height": device_height };
for (feature in features) {
var value = features[feature];
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)");
}
iframe_style.width = "0";
should_apply("all and (height)");
should_not_apply("all and (width)");
iframe_style.height = "0";
should_not_apply("all and (height)");
should_not_apply("all and (width)");
should_apply("all and (device-height)");
should_apply("all and (device-width)");
iframe_style.width = width_val + "px";
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("(aspect-ratio)");
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)");
expression_should_not_be_parseable("min-aspect-ratio");
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)");
expression_should_not_be_parseable("max-aspect-ratio");
var real_dar = device_width + "/" + device_height;
var high_dar_1 = (device_width + 1) + "/" + device_height;
var high_dar_2 = device_width + "/" + (device_height - 1);
var low_dar_1 = (device_width - 1) + "/" + device_height;
var 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("(device-aspect-ratio)");
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 + ")");
expression_should_not_be_parseable("min-device-aspect-ratio");
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 + ")");
expression_should_not_be_parseable("max-device-aspect-ratio");
features = [ "max-aspect-ratio", "device-aspect-ratio" ];
for (i in features) {
feature = features[i];
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)");
test(function() {
assert_not_equals(is_monochrome, is_color, "should be either monochrome or color");
}, "monochrome_and_color");
function depth_query(prefix, depth) {
return "all and (" + prefix + (is_color ? "color" : "monochrome") +
":" + depth + ")";
}
var depth = 0;
do {
if (depth > 50) {
break;
}
} while (query_applies(depth_query("min-", ++depth)));
test(function() {
assert_false(50 < depth);
}, "find_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)");
expression_should_not_be_parseable("max-color");
expression_should_not_be_parseable("min-color");
(is_color ? should_not_apply : should_apply)("all and (monochrome)");
expression_should_not_be_parseable("max-monochrome");
expression_should_not_be_parseable("min-monochrome");
(is_color ? should_apply : should_not_apply)("not all and (monochrome)");
(is_color ? should_not_apply : should_apply)("not all and (color)");
(is_color ? should_apply : should_not_apply)("only all and (color)");
(is_color ? should_not_apply : should_apply)("only all and (monochrome)");
features = [ "color", "min-monochrome", "max-color-index" ];
for (i in features) {
feature = features[i];
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)");
features = [ "resolution", "min-resolution", "max-resolution" ];
for (i in features) {
feature = features[i];
expression_should_be_parseable(feature + ": 3dpi");
expression_should_be_parseable(feature + ":3dpi");
expression_should_be_parseable(feature + ": 3.0dpi");
expression_should_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
var resolution = 0;
do {
++resolution;
if (resolution > 10000) {
break;
}
} while (!query_applies("(max-resolution: " + resolution + "dpi)"));
test(function() {
assert_false(10000 < resolution);
}, "find_resolution");
// resolution should now be Math.ceil() of the actual resolution.
var dpi_high;
var 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.
var dpcm_high = Math.ceil(dpi_high / 2.54);
var 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");
expression_should_not_be_parseable("max-scan: progressive");
// 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("min-grid:0");
expression_should_not_be_parseable("max-grid: 1");
expression_should_not_be_parseable("grid: 2");
expression_should_not_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)");
// Parsing tests
// bug 454227
should_apply("(orientation");
should_not_apply("not all and (orientation");
should_not_apply("(orientation:");
should_apply("all,(orientation:");
should_not_apply("(orientation:,all");
should_apply("not all and (grid");
should_not_apply("only all and (grid");
should_not_apply("(grid");
should_apply("all,(grid");
should_not_apply("(grid,all");
// bug 454226
should_apply(",all");
should_apply("all,");
should_apply(",all,");
should_apply("all,badmedium");
should_apply("badmedium,all");
should_not_apply(",badmedium,");
should_apply("all,(badexpression)");
should_apply("(badexpression),all");
should_not_apply("(badexpression),badmedium");
should_not_apply("badmedium,(badexpression)");
should_apply("all,[badsyntax]");
should_apply("[badsyntax],all");
should_not_apply("badmedium,[badsyntax]");
should_not_apply("[badsyntax],badmedium");
// Parsing tests based on Acid3
query_should_not_be_parseable("all and color :");
query_should_not_be_parseable("all and color : 1");
should_not_apply("all and min-color : 1");
should_not_apply("(bogus)");
should_not_apply("not all and (bogus)")
should_not_apply("only all and (bogus)")
done();
}
</script>
</body>
</html>