third_party/WebKit/LayoutTests/css3/device-adapt/viewport-properties-validation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style type="text/css">
   5         /* Valid viewport syntax with no properties. */
   6         @viewport {
   7         }
   8
   9         /* Shorthands should be evaluated to the respective attributes. */
  10         @viewport {
  11             width: 400px 500px;
  12             height: 200px 300px;
  13         }
  14
  15         /* Shorthands with single value should assume this value for min and max. */
  16         @viewport {
  17             width: 500px;
  18             height: 300px;
  19         }
  20
  21         /* Shorthands should override properties if defined later. */
  22         @viewport {
  23             min-width: 100px;
  24             min-width: 100px;
  25             max-height: 100px;
  26             max-height: 100px;
  27             width: 500px;
  28             height: 300px;
  29         }
  30
  31         /* All valid properties with valid initial values. */
  32         @viewport {
  33             min-width: auto;
  34             max-width: auto;
  35             min-height: auto;
  36             max-height: auto;
  37             min-zoom: auto;
  38             max-zoom: auto;
  39             orientation: auto;
  40             user-zoom: zoom;
  41             zoom: auto;
  42         }
  43
  44         /* All valid properties with valid values. */
  45         @viewport {
  46             min-width: 50%;
  47             max-width: 100px;
  48             min-height: device-width;
  49             max-height: device-height;
  50             min-zoom: 50%;
  51             max-zoom: 0.5;
  52             orientation: landscape;
  53             user-zoom: fixed;
  54             zoom: 0.6;
  55         }
  56
  57         /* All valid properties with invalid initial values. Should be empty. */
  58         @viewport {
  59             min-width: zoom;
  60             max-width: fixed;
  61             min-height: landscape;
  62             max-height: portrait;
  63             min-zoom: 10px;
  64             max-zoom: 50px;
  65             orientation: 50%;
  66             user-zoom: auto;
  67             zoom: device-height;
  68         }
  69
  70         /* Negative numbers should be dropped on zoom. */
  71         @viewport {
  72             min-zoom: -1;
  73             max-zoom: -0.5;
  74             zoom: -0.6;
  75         }
  76
  77         /* Viewport attributes inside selectors should be dropped. */
  78         .foo {
  79             min-zoom: auto;
  80             max-zoom: auto;
  81             orientation: auto;
  82             user-zoom: zoom;
  83             zoom: auto;
  84         }
  85
  86         /* Invalid attributes among valid should be dropped. */
  87         @viewport {
  88             font-family: sans-serif;
  89             min-width: device-width;
  90             max-width: device-height;
  91             foo: auto;
  92             min-height: 500px;
  93             max-height: 50%;
  94             text-indent: 0;
  95             min-zoom: 0.5;
  96             max-zoom: 50%;
  97             orientation: portrait;
  98             color: red;
  99             user-zoom: zoom;
 100             zoom: 60%;
 101             letter-spacing: 0.5em;
 102         }
 103     </style>
 104     <meta charset="utf-8" />
 105     <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#syntax" />
 106     <script src="../../resources/testharness.js"></script>
 107     <script src="../../resources/testharnessreport.js"></script>
 108     <script type="text/javascript">
 109         var rules = document.styleSheets[0].cssRules;
 110
 111         test(function() {
 112             assert_equals(rules.item(0).cssText, "@viewport { }");
 113         }, "Rule with no attributes");
 114
 115         test(function() {
 116             assert_equals(rules.item(1).cssText,
 117                 "@viewport {" +
 118                 " min-width: 400px;" +
 119                 " max-width: 500px;" +
 120                 " min-height: 200px;" +
 121                 " max-height: 300px; }");
 122         }, "Shorthands with double value");
 123
 124         test(function() {
 125             assert_equals(rules.item(2).cssText,
 126                 "@viewport {" +
 127                 " min-width: 500px;" +
 128                 " max-width: 500px;" +
 129                 " min-height: 300px;" +
 130                 " max-height: 300px; }");
 131         }, "Shorthands with single value");
 132
 133         test(function() {
 134             assert_equals(rules.item(3).cssText,
 135                 "@viewport {" +
 136                 " min-width: 500px;" +
 137                 " max-width: 500px;" +
 138                 " min-height: 300px;" +
 139                 " max-height: 300px; }");
 140         }, "Shorthands should override properties if defined later");
 141
 142         test(function() {
 143             assert_equals(rules.item(4).cssText,
 144                 "@viewport {" +
 145                 " min-width: auto;" +
 146                 " max-width: auto;" +
 147                 " min-height: auto;" +
 148                 " max-height: auto;" +
 149                 " min-zoom: auto;" +
 150                 " max-zoom: auto;" +
 151                 " orientation: auto;" +
 152                 " user-zoom: zoom;" +
 153                 " zoom: auto; }");
 154         }, "All valid properties with valid intial values");
 155
 156         test(function() {
 157             assert_equals(rules.item(5).cssText,
 158                 "@viewport {" +
 159                 " min-width: 50%;" +
 160                 " max-width: 100px;" +
 161                 " min-zoom: 50%;" +
 162                 " max-zoom: 0.5;" +
 163                 " orientation: landscape;" +
 164                 " user-zoom: fixed;" +
 165                 " zoom: 0.6; }");
 166         }, "All valid properties with valid values");
 167
 168         test(function() {
 169             assert_equals(rules.item(6).cssText, "@viewport { }");
 170         }, "All valid properties with invalid intial values");
 171
 172         test(function() {
 173             assert_equals(rules.item(7).cssText, "@viewport { }");
 174         }, "Negative numbers should be dropped on zoom attribute");
 175
 176         test(function() {
 177             assert_equals(rules.item(8).cssText, ".foo { }");
 178         }, "Viewport attributes inside selectors should be dropped");
 179
 180         test(function() {
 181             assert_equals(rules.item(9).cssText,
 182                 "@viewport {" +
 183                 " min-height: 500px;" +
 184                 " max-height: 50%;" +
 185                 " min-zoom: 0.5;" +
 186                 " max-zoom: 50%;" +
 187                 " orientation: portrait;" +
 188                 " user-zoom: zoom;" +
 189                 " zoom: 60%; }");
 190         }, "Invalid attributes among valid should be dropped");
 191     </script>
 192 </head>
 193 <body>
 194     <div id="log"></div>
 195 </body>
 196 </html>