| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| /* Valid viewport syntax. */ |
| @viewport { |
| } |
| |
| /* Valid viewport syntax, extras spaces should be ignored. */ |
| @viewport { |
| } |
| |
| /* Valid viewport syntax, regular attributes. */ |
| @viewport { |
| max-height: 200px; |
| min-height: 200px; |
| } |
| |
| /* Valid viewport syntax, should omit the malformed attribute. */ |
| @viewport { |
| asdasd |
| } |
| |
| /* Valid viewport syntax, it is allowed inside media queries. */ |
| @media all { |
| @viewport { |
| } |
| } |
| |
| /* Nested viewport rules are not allowed. The inner rule should be ignored. */ |
| @viewport { |
| max-height: 100px; |
| min-height: 100px; |
| |
| @viewport { |
| max-height: 200px; |
| min-height: 200px; |
| } |
| } |
| |
| /* Rules inside a viewport should be ignored. */ |
| @viewport { |
| max-height: 50px; |
| min-height: 50px; |
| |
| @import url('../../resources/testharness.css'); |
| } |
| </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, "@viewport { }"); |
| }, "Empty at-rule parsing"); |
| |
| test(function() { |
| assert_equals(rules.item(1).cssText, "@viewport { }"); |
| }, "at-rule with extra spaces"); |
| |
| test(function() { |
| assert_equals(rules.item(2).cssText, "@viewport { max-height: 200px; min-height: 200px; }"); |
| }, "Rule with attributes"); |
| |
| test(function() { |
| assert_equals(rules.item(3).cssText, "@viewport { }"); |
| }, "Rule with malformed attributes"); |
| |
| test(function() { |
| assert_equals(rules.item(4).cssText, "@media all { \n @viewport { }\n}"); |
| }, "Should be accepted inside media queries"); |
| |
| test(function() { |
| assert_equals(rules.item(5).cssText, "@viewport { max-height: 100px; min-height: 100px; }"); |
| }, "Nested viewport rule"); |
| |
| test(function() { |
| assert_equals(rules.item(6).cssText, "@viewport { max-height: 50px; min-height: 50px; }"); |
| }, "Rules inside a viewport rule"); |
| </script> |
| </head> |
| <body> |
| <div id="log"></div> |
| </body> |
| </html> |
