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