third_party/WebKit/LayoutTests/css3/device-adapt/viewport-at-rule-parsing.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style type="text/css">
   5         /* Valid viewport syntax. */
   6         @viewport {
   7         }
   8
   9         /* Valid viewport syntax, extras spaces should be ignored. */
  10         @viewport          {
  11         }
  12
  13         /* Valid viewport syntax, regular attributes. */
  14         @viewport {
  15             max-height: 200px;
  16             min-height: 200px;
  17         }
  18
  19         /* Valid viewport syntax, should omit the malformed attribute. */
  20         @viewport {
  21             asdasd
  22         }
  23
  24         /* Valid viewport syntax, it is allowed inside media queries. */
  25         @media all {
  26             @viewport {
  27             }
  28         }
  29
  30         /* Nested viewport rules are not allowed. The inner rule should be ignored. */
  31         @viewport {
  32             max-height: 100px;
  33             min-height: 100px;
  34
  35             @viewport {
  36                 max-height: 200px;
  37                 min-height: 200px;
  38             }
  39         }
  40
  41         /* Rules inside a viewport should be ignored. */
  42         @viewport {
  43             max-height: 50px;
  44             min-height: 50px;
  45
  46             @import url('../../resources/testharness.css');
  47         }
  48     </style>
  49     <meta charset="utf-8" />
  50     <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#syntax" />
  51     <script src="../../resources/testharness.js"></script>
  52     <script src="../../resources/testharnessreport.js"></script>
  53     <script type="text/javascript">
  54         var rules = document.styleSheets[0].cssRules;
  55
  56         test(function() {
  57             assert_equals(rules.item(0).cssText, "@viewport { }");
  58         }, "Empty at-rule parsing");
  59
  60         test(function() {
  61             assert_equals(rules.item(1).cssText, "@viewport { }");
  62         }, "at-rule with extra spaces");
  63
  64         test(function() {
  65             assert_equals(rules.item(2).cssText, "@viewport { max-height: 200px; min-height: 200px; }");
  66         }, "Rule with attributes");
  67
  68         test(function() {
  69             assert_equals(rules.item(3).cssText, "@viewport { }");
  70         }, "Rule with malformed attributes");
  71
  72         test(function() {
  73             assert_equals(rules.item(4).cssText, "@media all { \n  @viewport { }\n}");
  74         }, "Should be accepted inside media queries");
  75
  76         test(function() {
  77             assert_equals(rules.item(5).cssText, "@viewport { max-height: 100px; min-height: 100px; }");
  78         }, "Nested viewport rule");
  79
  80         test(function() {
  81             assert_equals(rules.item(6).cssText, "@viewport { max-height: 50px; min-height: 50px; }");
  82         }, "Rules inside a viewport rule");
  83     </script>
  84 </head>
  85 <body>
  86     <div id="log"></div>
  87 </body>
  88 </html>