Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(200)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/device-adapt/viewport-properties-validation.html

Issue 16209003: Unprefix the @viewport rule of CSS Device Adaptation spec (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « LayoutTests/css3/device-adapt/viewport-at-rule-parsing.html ('k') | LayoutTests/css3/device-adapt/viewport-width-not-affecting-next-page.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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>
OLDNEW
« no previous file with comments | « LayoutTests/css3/device-adapt/viewport-at-rule-parsing.html ('k') | LayoutTests/css3/device-adapt/viewport-width-not-affecting-next-page.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698