| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| /* Valid viewport syntax with no properties. */ |
| @viewport { |
| } |
| |
| /* Shorthands should be evaluated to the respective attributes. */ |
| @viewport { |
| width: 400px 500px; |
| height: 200px 300px; |
| } |
| |
| /* Shorthands with single value should assume this value for min and max. */ |
| @viewport { |
| width: 500px; |
| height: 300px; |
| } |
| |
| /* Shorthands should override properties if defined later. */ |
| @viewport { |
| min-width: 100px; |
| min-width: 100px; |
| max-height: 100px; |
| max-height: 100px; |
| width: 500px; |
| height: 300px; |
| } |
| |
| /* All valid properties with valid initial values. */ |
| @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. */ |
| @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. */ |
| @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. */ |
| @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. */ |
| @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, "@viewport { }"); |
| }, "Rule with no attributes"); |
| |
| test(function() { |
| assert_equals(rules.item(1).cssText, |
| "@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, |
| "@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, |
| "@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, |
| "@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, |
| "@viewport {" + |
| " min-width: 50%;" + |
| " max-width: 100px;" + |
| " 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, "@viewport { }"); |
| }, "All valid properties with invalid intial values"); |
| |
| test(function() { |
| assert_equals(rules.item(7).cssText, "@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, |
| "@viewport {" + |
| " 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> |
