blob: 3490cbf61f34e59d744cd542c4b9a7d22f878f2e [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Valid viewport syntax with no properties. */
@-webkit-viewport {
}
/* Shorthands should be evaluated to the respective attributes. */
@-webkit-viewport {
width: 400px 500px;
height: 200px 300px;
}
/* Shorthands with single value should assume this value for min and max. */
@-webkit-viewport {
width: 500px;
height: 300px;
}
/* Shorthands should override properties if defined later. */
@-webkit-viewport {
min-width: 100px;
min-width: 100px;
max-height: 100px;
max-height: 100px;
width: 500px;
height: 300px;
}
/* All valid properties with valid initial values. */
@-webkit-viewport {
min-width: auto;
max-width: auto;
min-height: auto;
max-height: auto;
min-zoom: auto;
max-zoom: auto;
orientation: auto;
user-zoom: zoom;
zoom: auto;
}
/* All valid properties with valid values. */
@-webkit-viewport {
min-width: 50%;
max-width: 100px;
min-height: device-width;
max-height: device-height;
min-zoom: 50%;
max-zoom: 0.5;
orientation: landscape;
user-zoom: fixed;
zoom: 0.6;
}
/* All valid properties with invalid initial values. Should be empty. */
@-webkit-viewport {
min-width: zoom;
max-width: fixed;
min-height: landscape;
max-height: portrait;
min-zoom: 10px;
max-zoom: 50px;
orientation: 50%;
user-zoom: auto;
zoom: device-height;
}
/* Negative numbers should be dropped on zoom. */
@-webkit-viewport {
min-zoom: -1;
max-zoom: -0.5;
zoom: -0.6;
}
/* Viewport attributes inside selectors should be dropped. */
.foo {
min-zoom: auto;
max-zoom: auto;
orientation: auto;
user-zoom: zoom;
zoom: auto;
}
/* Invalid attributes among valid should be dropped. */
@-webkit-viewport {
font-family: sans-serif;
min-width: device-width;
max-width: device-height;
foo: auto;
min-height: 500px;
max-height: 50%;
text-indent: 0;
min-zoom: 0.5;
max-zoom: 50%;
orientation: portrait;
color: red;
user-zoom: zoom;
zoom: 60%;
letter-spacing: 0.5em;
}
</style>
<meta charset="utf-8" />
<link rel="help" href="http://www.w3.org/TR/css-device-adapt/#syntax" />
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script type="text/javascript">
var rules = document.styleSheets[0].cssRules;
test(function() {
assert_equals(rules.item(0).cssText, "@-webkit-viewport { }");
}, "Rule with no attributes");
test(function() {
assert_equals(rules.item(1).cssText,
"@-webkit-viewport {" +
" min-width: 400px;" +
" max-width: 500px;" +
" min-height: 200px;" +
" max-height: 300px; }");
}, "Shorthands with double value");
test(function() {
assert_equals(rules.item(2).cssText,
"@-webkit-viewport {" +
" min-width: 500px;" +
" max-width: 500px;" +
" min-height: 300px;" +
" max-height: 300px; }");
}, "Shorthands with single value");
test(function() {
assert_equals(rules.item(3).cssText,
"@-webkit-viewport {" +
" min-width: 500px;" +
" max-width: 500px;" +
" min-height: 300px;" +
" max-height: 300px; }");
}, "Shorthands should override properties if defined later");
test(function() {
assert_equals(rules.item(4).cssText,
"@-webkit-viewport {" +
" min-width: auto;" +
" max-width: auto;" +
" min-height: auto;" +
" max-height: auto;" +
" min-zoom: auto;" +
" max-zoom: auto;" +
" orientation: auto;" +
" user-zoom: zoom;" +
" zoom: auto; }");
}, "All valid properties with valid intial values");
test(function() {
assert_equals(rules.item(5).cssText,
"@-webkit-viewport {" +
" min-width: 50%;" +
" max-width: 100px;" +
" min-height: device-width;" +
" max-height: device-height;" +
" min-zoom: 50%;" +
" max-zoom: 0.5;" +
" orientation: landscape;" +
" user-zoom: fixed;" +
" zoom: 0.6; }");
}, "All valid properties with valid values");
test(function() {
assert_equals(rules.item(6).cssText, "@-webkit-viewport { }");
}, "All valid properties with invalid intial values");
test(function() {
assert_equals(rules.item(7).cssText, "@-webkit-viewport { }");
}, "Negative numbers should be dropped on zoom attribute");
test(function() {
assert_equals(rules.item(8).cssText, ".foo { }");
}, "Viewport attributes inside selectors should be dropped");
test(function() {
assert_equals(rules.item(9).cssText,
"@-webkit-viewport {" +
" min-width: device-width;" +
" max-width: device-height;" +
" min-height: 500px;" +
" max-height: 50%;" +
" min-zoom: 0.5;" +
" max-zoom: 50%;" +
" orientation: portrait;" +
" user-zoom: zoom;" +
" zoom: 60%; }");
}, "Invalid attributes among valid should be dropped");
</script>
</head>
<body>
<div id="log"></div>
</body>
</html>