commit-queue@webkit.org | 42da616 | 2012-11-05 12:47:46 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <style type="text/css"> |
| 5 | /* Valid viewport syntax with no properties. */ |
| 6 | @-webkit-viewport { |
| 7 | } |
| 8 | |
| 9 | /* Shorthands should be evaluated to the respective attributes. */ |
| 10 | @-webkit-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 | @-webkit-viewport { |
| 17 | width: 500px; |
| 18 | height: 300px; |
| 19 | } |
| 20 | |
| 21 | /* Shorthands should override properties if defined later. */ |
| 22 | @-webkit-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 | @-webkit-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 | @-webkit-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 | @-webkit-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 | @-webkit-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 | @-webkit-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, "@-webkit-viewport { }"); |
| 113 | }, "Rule with no attributes"); |
| 114 | |
| 115 | test(function() { |
| 116 | assert_equals(rules.item(1).cssText, |
| 117 | "@-webkit-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 | "@-webkit-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 | "@-webkit-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 | "@-webkit-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 | "@-webkit-viewport {" + |
| 159 | " min-width: 50%;" + |
| 160 | " max-width: 100px;" + |
| 161 | " min-height: device-width;" + |
| 162 | " max-height: device-height;" + |
| 163 | " min-zoom: 50%;" + |
| 164 | " max-zoom: 0.5;" + |
| 165 | " orientation: landscape;" + |
| 166 | " user-zoom: fixed;" + |
| 167 | " zoom: 0.6; }"); |
| 168 | }, "All valid properties with valid values"); |
| 169 | |
| 170 | test(function() { |
| 171 | assert_equals(rules.item(6).cssText, "@-webkit-viewport { }"); |
| 172 | }, "All valid properties with invalid intial values"); |
| 173 | |
| 174 | test(function() { |
| 175 | assert_equals(rules.item(7).cssText, "@-webkit-viewport { }"); |
| 176 | }, "Negative numbers should be dropped on zoom attribute"); |
| 177 | |
| 178 | test(function() { |
| 179 | assert_equals(rules.item(8).cssText, ".foo { }"); |
| 180 | }, "Viewport attributes inside selectors should be dropped"); |
| 181 | |
| 182 | test(function() { |
| 183 | assert_equals(rules.item(9).cssText, |
| 184 | "@-webkit-viewport {" + |
| 185 | " min-width: device-width;" + |
| 186 | " max-width: device-height;" + |
| 187 | " min-height: 500px;" + |
| 188 | " max-height: 50%;" + |
| 189 | " min-zoom: 0.5;" + |
| 190 | " max-zoom: 50%;" + |
| 191 | " orientation: portrait;" + |
| 192 | " user-zoom: zoom;" + |
| 193 | " zoom: 60%; }"); |
| 194 | }, "Invalid attributes among valid should be dropped"); |
| 195 | </script> |
| 196 | </head> |
| 197 | <body> |
| 198 | <div id="log"></div> |
| 199 | </body> |
| 200 | </html> |