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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/viewport-percentage-lengths/css3-viewport-percentage-lengths-getStyle.html

Issue 82083002: Move viewport unit resolution to style recalc time (Closed) Base URL: https://chromium.googlesource.com/chromium/blink@master
Patch Set: rebased.. Created 7 years 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
« no previous file with comments | « LayoutTests/animations/interpolation/line-height-interpolation-expected.txt ('k') | LayoutTests/css3/viewport-percentage-lengths/css3-viewport-percentage-lengths-getStyle-expected.txt » ('j') | LayoutTests/css3/viewport-percentage-lengths/css3-viewport-percentage-lengths-getStyle-expected.txt » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE> 1 <!DOCTYPE>
2 <html> 2 <html>
3 <style> 3 <style>
4 #element-container-vw { 4 #element-container-vw {
5 background:green; 5 background:green;
6 height:30vw; 6 height:30vw;
7 width:30vw; 7 width:30vw;
8 font-size:3vw; 8 font-size:3vw;
9 line-height:4vw; 9 line-height:4vw;
10 text-indent:2vw; 10 text-indent:2vw;
(...skipping 131 matching lines...) Expand 10 before | Expand all | Expand 10 after
142 <script src="../../resources/js-test.js"></script> 142 <script src="../../resources/js-test.js"></script>
143 <script> 143 <script>
144 if (window.testRunner) 144 if (window.testRunner)
145 testRunner.dumpAsText(); 145 testRunner.dumpAsText();
146 146
147 description("Test for Bug: 27160/91440 - Implement vw/vh/vmin/vmax (viewport siz es) from CSS 3 Values and Units"); 147 description("Test for Bug: 27160/91440 - Implement vw/vh/vmin/vmax (viewport siz es) from CSS 3 Values and Units");
148 148
149 // These have to be global for the test helpers to see them. 149 // These have to be global for the test helpers to see them.
150 var element, style; 150 var element, style;
151 151
152 function vw(x) {
153 return "'" + (x * window.innerWidth / 100) + "px'";
154 }
155
156 function vh(x) {
157 return "'" + (x * window.innerHeight / 100) + "px'";
158 }
159
160 function vmin(x) {
161 return "'" + (x * Math.min(window.innerWidth, window.innerHeight) / 100) + " px'";
162 }
163
164 function vmax(x) {
165 return "'" + (x * Math.max(window.innerWidth, window.innerHeight) / 100) + " px'";
166 }
167
152 function getTheStyle() { 168 function getTheStyle() {
153 debug("Test for vw") 169 debug("Test for vw")
154 element = document.getElementById("element-container-vw"); 170 element = document.getElementById("element-container-vw");
155 style = window.getComputedStyle(element,null); 171 style = window.getComputedStyle(element,null);
156 var viewportWidth = window.innerWidth; 172 shouldBe('style.getPropertyValue("height")', vw(30));
esprehn 2013/12/04 06:02:28 Clever. :)
157 shouldBe('style.getPropertyValue("height")', "'" + Math.floor(30 * viewportW idth / 100) + "px'"); 173 shouldBe('style.getPropertyValue("width")', vw(30));
158 shouldBe('style.getPropertyValue("width")', "'" + Math.floor(30 * viewportWi dth / 100) + "px'"); 174 shouldBe('style.getPropertyValue("font-size")', vw(3));
159 shouldBe('style.getPropertyValue("font-size")', "'" + Math.floor(3 * viewpor tWidth / 100) + "px'"); 175 shouldBe('style.getPropertyValue("line-height")', vw(4));
160 shouldBe('style.getPropertyValue("line-height")', "'" + Math.floor(4 * viewp ortWidth / 100) + "px'"); 176 shouldBe('style.getPropertyValue("text-indent")', vw(2));
161 shouldBe('style.getPropertyValue("text-indent")', "'2vw'"); 177 shouldBe('style.getPropertyValue("margin-left")', vw(2));
162 shouldBe('style.getPropertyValue("margin-left")', "'" + Math.floor(2 * viewp ortWidth / 100) + "px'"); 178 shouldBe('style.getPropertyValue("margin-right")', vw(2));
163 shouldBe('style.getPropertyValue("margin-right")', "'" + Math.floor(2 * view portWidth / 100) + "px'"); 179 shouldBe('style.getPropertyValue("margin-top")', vw(2));
164 shouldBe('style.getPropertyValue("margin-top")', "'" + Math.floor(2 * viewpo rtWidth / 100) + "px'"); 180 shouldBe('style.getPropertyValue("margin-bottom")', vw(2));
165 shouldBe('style.getPropertyValue("margin-bottom")', "'" + Math.floor(2 * vie wportWidth / 100) + "px'"); 181 shouldBe('style.getPropertyValue("border-top-left-radius")', vw(1));
166 shouldBe('style.getPropertyValue("border-top-left-radius")', "'1vw'"); 182 shouldBe('style.getPropertyValue("border-top-right-radius")', vw(1));
167 shouldBe('style.getPropertyValue("border-top-right-radius")', "'1vw'"); 183 shouldBe('style.getPropertyValue("border-bottom-left-radius")', vw(1));
168 shouldBe('style.getPropertyValue("border-bottom-left-radius")', "'1vw'"); 184 shouldBe('style.getPropertyValue("border-bottom-right-radius")', vw(1));
169 shouldBe('style.getPropertyValue("border-bottom-right-radius")', "'1vw'"); 185 shouldBe('style.getPropertyValue("min-height")', vw(10));
170 shouldBe('style.getPropertyValue("min-height")', "'10vw'"); 186 shouldBe('style.getPropertyValue("min-width")', vw(10));
171 shouldBe('style.getPropertyValue("min-width")', "'10vw'"); 187 shouldBe('style.getPropertyValue("max-height")', vw(60));
172 shouldBe('style.getPropertyValue("max-height")', "'60vw'"); 188 shouldBe('style.getPropertyValue("max-width")', vw(60));
173 shouldBe('style.getPropertyValue("max-width")', "'60vw'");
174 element.id = "element-container-absolute-vw"; 189 element.id = "element-container-absolute-vw";
175 shouldBe('style.getPropertyValue("top")', "'" + Math.floor(10 * viewportWidt h / 100) + "px'"); 190 shouldBe('style.getPropertyValue("top")', vw(10));
176 shouldBe('style.getPropertyValue("bottom")', "'" + Math.floor(10 * viewportW idth / 100) + "px'"); 191 shouldBe('style.getPropertyValue("bottom")', vw(10));
177 shouldBe('style.getPropertyValue("left")', "'" + Math.floor(10 * viewportWid th / 100) + "px'"); 192 shouldBe('style.getPropertyValue("left")', vw(10));
178 shouldBe('style.getPropertyValue("right")', "'" + Math.floor(10 * viewportWi dth / 100) + "px'"); 193 shouldBe('style.getPropertyValue("right")', vw(10));
179 shouldBe('style.getPropertyValue("padding-left")', "'" + Math.floor(2 * view portWidth / 100) + "px'"); 194 shouldBe('style.getPropertyValue("padding-left")', vw(2));
180 shouldBe('style.getPropertyValue("padding-right")', "'" + Math.floor(2 * vie wportWidth / 100) + "px'"); 195 shouldBe('style.getPropertyValue("padding-right")', vw(2));
181 shouldBe('style.getPropertyValue("padding-top")', "'" + Math.floor(2 * viewp ortWidth / 100) + "px'"); 196 shouldBe('style.getPropertyValue("padding-top")', vw(2));
182 shouldBe('style.getPropertyValue("padding-bottom")', "'" + Math.floor(2 * vi ewportWidth / 100) + "px'"); 197 shouldBe('style.getPropertyValue("padding-bottom")', vw(2));
183 198
184 debug("\nTest for vh") 199 debug("\nTest for vh")
185 element.id = "element-container-vh"; 200 element.id = "element-container-vh";
186 style = window.getComputedStyle(element,null); 201 style = window.getComputedStyle(element,null);
187 var viewportHeight = window.innerHeight; 202 var viewportHeight = window.innerHeight;
188 shouldBe('style.getPropertyValue("height")', "'" + Math.floor(30 * viewportH eight / 100) + "px'"); 203 shouldBe('style.getPropertyValue("height")', vh(30));
189 shouldBe('style.getPropertyValue("width")', "'" + Math.floor(30 * viewportHe ight / 100) + "px'"); 204 shouldBe('style.getPropertyValue("width")', vh(30));
190 shouldBe('style.getPropertyValue("font-size")', "'" + Math.floor(3 * viewpor tHeight / 100) + "px'"); 205 shouldBe('style.getPropertyValue("font-size")', vh(3));
191 shouldBe('style.getPropertyValue("line-height")', "'" + Math.floor(4 * viewp ortHeight / 100) + "px'"); 206 shouldBe('style.getPropertyValue("line-height")', vh(4));
192 shouldBe('style.getPropertyValue("text-indent")', "'2vh'"); 207 shouldBe('style.getPropertyValue("text-indent")', vh(2));
193 shouldBe('style.getPropertyValue("margin-left")', "'" + Math.floor(2 * viewp ortHeight / 100) + "px'"); 208 shouldBe('style.getPropertyValue("margin-left")', vh(2));
194 shouldBe('style.getPropertyValue("margin-right")', "'" + Math.floor(2 * view portHeight / 100) + "px'"); 209 shouldBe('style.getPropertyValue("margin-right")', vh(2));
195 shouldBe('style.getPropertyValue("margin-top")', "'" + Math.floor(2 * viewpo rtHeight / 100) + "px'"); 210 shouldBe('style.getPropertyValue("margin-top")', vh(2));
196 shouldBe('style.getPropertyValue("margin-bottom")', "'" + Math.floor(2 * vie wportHeight / 100) + "px'"); 211 shouldBe('style.getPropertyValue("margin-bottom")', vh(2));
197 shouldBe('style.getPropertyValue("border-top-left-radius")', "'1vh'"); 212 shouldBe('style.getPropertyValue("border-top-left-radius")', vh(1));
198 shouldBe('style.getPropertyValue("border-top-right-radius")', "'1vh'"); 213 shouldBe('style.getPropertyValue("border-top-right-radius")', vh(1));
199 shouldBe('style.getPropertyValue("border-bottom-left-radius")', "'1vh'"); 214 shouldBe('style.getPropertyValue("border-bottom-left-radius")', vh(1));
200 shouldBe('style.getPropertyValue("border-bottom-right-radius")', "'1vh'"); 215 shouldBe('style.getPropertyValue("border-bottom-right-radius")', vh(1));
201 shouldBe('style.getPropertyValue("min-height")', "'10vh'"); 216 shouldBe('style.getPropertyValue("min-height")', vh(10));
202 shouldBe('style.getPropertyValue("min-width")', "'10vh'"); 217 shouldBe('style.getPropertyValue("min-width")', vh(10));
203 shouldBe('style.getPropertyValue("max-height")', "'60vh'"); 218 shouldBe('style.getPropertyValue("max-height")', vh(60));
204 shouldBe('style.getPropertyValue("max-width")', "'60vh'"); 219 shouldBe('style.getPropertyValue("max-width")', vh(60));
205 element.id = "element-container-absolute-vh"; 220 element.id = "element-container-absolute-vh";
206 shouldBe('style.getPropertyValue("top")', "'" + Math.floor(10 * viewportHeig ht / 100) + "px'"); 221 shouldBe('style.getPropertyValue("top")', vh(10));
207 shouldBe('style.getPropertyValue("bottom")', "'" + Math.floor(10 * viewportH eight / 100) + "px'"); 222 shouldBe('style.getPropertyValue("bottom")', vh(10));
208 shouldBe('style.getPropertyValue("left")', "'" + Math.floor(10 * viewportHei ght / 100) + "px'"); 223 shouldBe('style.getPropertyValue("left")', vh(10));
209 shouldBe('style.getPropertyValue("right")', "'" + Math.floor(10 * viewportHe ight / 100) + "px'"); 224 shouldBe('style.getPropertyValue("right")', vh(10));
210 shouldBe('style.getPropertyValue("padding-left")', "'" + Math.floor(2 * view portHeight / 100) + "px'"); 225 shouldBe('style.getPropertyValue("padding-left")', vh(2));
211 shouldBe('style.getPropertyValue("padding-right")', "'" + Math.floor(2 * vie wportHeight / 100) + "px'"); 226 shouldBe('style.getPropertyValue("padding-right")', vh(2));
212 shouldBe('style.getPropertyValue("padding-top")', "'" + Math.floor(2 * viewp ortHeight / 100) + "px'"); 227 shouldBe('style.getPropertyValue("padding-top")', vh(2));
213 shouldBe('style.getPropertyValue("padding-bottom")', "'" + Math.floor(2 * vi ewportHeight / 100) + "px'"); 228 shouldBe('style.getPropertyValue("padding-bottom")', vh(2));
214 229
215 debug("\nTest for vmin") 230 debug("\nTest for vmin")
216 element.id = "element-container-vmin"; 231 element.id = "element-container-vmin";
217 style = window.getComputedStyle(element,null); 232 style = window.getComputedStyle(element,null);
218 var viewportMinLength = Math.min(window.innerWidth, window.innerHeight); 233 var viewportMinLength = Math.min(window.innerWidth, window.innerHeight);
219 shouldBe('style.getPropertyValue("height")', "'" + Math.floor(30 * viewportM inLength / 100) + "px'"); 234 shouldBe('style.getPropertyValue("height")', vmin(30));
220 shouldBe('style.getPropertyValue("width")', "'" + Math.floor(30 * viewportMi nLength / 100) + "px'"); 235 shouldBe('style.getPropertyValue("width")', vmin(30));
221 shouldBe('style.getPropertyValue("font-size")', "'" + Math.floor(3 * viewpor tMinLength / 100) + "px'"); 236 shouldBe('style.getPropertyValue("font-size")', vmin(3));
222 shouldBe('style.getPropertyValue("line-height")', "'" + Math.floor(4 * viewp ortMinLength / 100) + "px'"); 237 shouldBe('style.getPropertyValue("line-height")', vmin(4));
223 shouldBe('style.getPropertyValue("text-indent")', "'2vmin'"); 238 shouldBe('style.getPropertyValue("text-indent")', vmin(2));
224 shouldBe('style.getPropertyValue("margin-left")', "'" + Math.floor(2 * viewp ortMinLength / 100) + "px'"); 239 shouldBe('style.getPropertyValue("margin-left")', vmin(2));
225 shouldBe('style.getPropertyValue("margin-right")', "'" + Math.floor(2 * view portMinLength / 100) + "px'"); 240 shouldBe('style.getPropertyValue("margin-right")', vmin(2));
226 shouldBe('style.getPropertyValue("margin-top")', "'" + Math.floor(2 * viewpo rtMinLength / 100) + "px'"); 241 shouldBe('style.getPropertyValue("margin-top")', vmin(2));
227 shouldBe('style.getPropertyValue("margin-bottom")', "'" + Math.floor(2 * vie wportMinLength / 100) + "px'"); 242 shouldBe('style.getPropertyValue("margin-bottom")', vmin(2));
228 shouldBe('style.getPropertyValue("border-top-left-radius")', "'1vmin'"); 243 shouldBe('style.getPropertyValue("border-top-left-radius")', vmin(1));
229 shouldBe('style.getPropertyValue("border-top-right-radius")', "'1vmin'"); 244 shouldBe('style.getPropertyValue("border-top-right-radius")', vmin(1));
230 shouldBe('style.getPropertyValue("border-bottom-left-radius")', "'1vmin'"); 245 shouldBe('style.getPropertyValue("border-bottom-left-radius")', vmin(1));
231 shouldBe('style.getPropertyValue("border-bottom-right-radius")', "'1vmin'"); 246 shouldBe('style.getPropertyValue("border-bottom-right-radius")', vmin(1));
232 shouldBe('style.getPropertyValue("min-height")', "'10vmin'"); 247 shouldBe('style.getPropertyValue("min-height")', vmin(10));
233 shouldBe('style.getPropertyValue("min-width")', "'10vmin'"); 248 shouldBe('style.getPropertyValue("min-width")', vmin(10));
234 shouldBe('style.getPropertyValue("max-height")', "'60vmin'"); 249 shouldBe('style.getPropertyValue("max-height")', vmin(60));
235 shouldBe('style.getPropertyValue("max-width")', "'60vmin'"); 250 shouldBe('style.getPropertyValue("max-width")', vmin(60));
236 element.id = "element-container-absolute-vmin"; 251 element.id = "element-container-absolute-vmin";
237 shouldBe('style.getPropertyValue("top")', "'" + Math.floor(10 * viewportMinL ength / 100) + "px'"); 252 shouldBe('style.getPropertyValue("top")', vmin(10));
238 shouldBe('style.getPropertyValue("bottom")', "'" + Math.floor(10 * viewportM inLength / 100) + "px'"); 253 shouldBe('style.getPropertyValue("bottom")', vmin(10));
239 shouldBe('style.getPropertyValue("left")', "'" + Math.floor(10 * viewportMin Length / 100) + "px'"); 254 shouldBe('style.getPropertyValue("left")', vmin(10));
240 shouldBe('style.getPropertyValue("right")', "'" + Math.floor(10 * viewportMi nLength / 100) + "px'"); 255 shouldBe('style.getPropertyValue("right")', vmin(10));
241 shouldBe('style.getPropertyValue("padding-left")', "'" + Math.floor(2 * view portMinLength / 100) + "px'"); 256 shouldBe('style.getPropertyValue("padding-left")', vmin(2));
242 shouldBe('style.getPropertyValue("padding-right")', "'" + Math.floor(2 * vie wportMinLength / 100) + "px'"); 257 shouldBe('style.getPropertyValue("padding-right")', vmin(2));
243 shouldBe('style.getPropertyValue("padding-top")', "'" + Math.floor(2 * viewp ortMinLength / 100) + "px'"); 258 shouldBe('style.getPropertyValue("padding-top")', vmin(2));
244 shouldBe('style.getPropertyValue("padding-bottom")', "'" + Math.floor(2 * vi ewportMinLength / 100) + "px'"); 259 shouldBe('style.getPropertyValue("padding-bottom")', vmin(2));
245 260
246 debug("\nTest for vmax") 261 debug("\nTest for vmax")
247 element.id = "element-container-vmax"; 262 element.id = "element-container-vmax";
248 style = window.getComputedStyle(element,null); 263 style = window.getComputedStyle(element,null);
249 var viewportMaxLength = Math.max(window.innerWidth, window.innerHeight); 264 var viewportMaxLength = Math.max(window.innerWidth, window.innerHeight);
250 shouldBe('style.getPropertyValue("height")', "'" + Math.floor(30 * viewportM axLength / 100) + "px'"); 265 shouldBe('style.getPropertyValue("height")', vmax(30));
251 shouldBe('style.getPropertyValue("width")', "'" + Math.floor(30 * viewportMa xLength / 100) + "px'"); 266 shouldBe('style.getPropertyValue("width")', vmax(30));
252 shouldBe('style.getPropertyValue("font-size")', "'" + Math.floor(3 * viewpor tMaxLength / 100) + "px'"); 267 shouldBe('style.getPropertyValue("font-size")', vmax(3));
253 shouldBe('style.getPropertyValue("line-height")', "'" + Math.floor(4 * viewp ortMaxLength / 100) + "px'"); 268 shouldBe('style.getPropertyValue("line-height")', vmax(4));
254 shouldBe('style.getPropertyValue("text-indent")', "'2vmax'"); 269 shouldBe('style.getPropertyValue("text-indent")', vmax(2));
255 shouldBe('style.getPropertyValue("margin-left")', "'" + Math.floor(2 * viewp ortMaxLength / 100) + "px'"); 270 shouldBe('style.getPropertyValue("margin-left")', vmax(2));
256 shouldBe('style.getPropertyValue("margin-right")', "'" + Math.floor(2 * view portMaxLength / 100) + "px'"); 271 shouldBe('style.getPropertyValue("margin-right")', vmax(2));
257 shouldBe('style.getPropertyValue("margin-top")', "'" + Math.floor(2 * viewpo rtMaxLength / 100) + "px'"); 272 shouldBe('style.getPropertyValue("margin-top")', vmax(2));
258 shouldBe('style.getPropertyValue("margin-bottom")', "'" + Math.floor(2 * vie wportMaxLength / 100) + "px'"); 273 shouldBe('style.getPropertyValue("margin-bottom")', vmax(2));
259 shouldBe('style.getPropertyValue("border-top-left-radius")', "'1vmax'"); 274 shouldBe('style.getPropertyValue("border-top-left-radius")', vmax(1));
260 shouldBe('style.getPropertyValue("border-top-right-radius")', "'1vmax'"); 275 shouldBe('style.getPropertyValue("border-top-right-radius")', vmax(1));
261 shouldBe('style.getPropertyValue("border-bottom-left-radius")', "'1vmax'"); 276 shouldBe('style.getPropertyValue("border-bottom-left-radius")', vmax(1));
262 shouldBe('style.getPropertyValue("border-bottom-right-radius")', "'1vmax'"); 277 shouldBe('style.getPropertyValue("border-bottom-right-radius")', vmax(1));
263 shouldBe('style.getPropertyValue("min-height")', "'10vmax'"); 278 shouldBe('style.getPropertyValue("min-height")', vmax(10));
264 shouldBe('style.getPropertyValue("min-width")', "'10vmax'"); 279 shouldBe('style.getPropertyValue("min-width")', vmax(10));
265 shouldBe('style.getPropertyValue("max-height")', "'60vmax'"); 280 shouldBe('style.getPropertyValue("max-height")', vmax(60));
266 shouldBe('style.getPropertyValue("max-width")', "'60vmax'"); 281 shouldBe('style.getPropertyValue("max-width")', vmax(60));
267 element.id = "element-container-absolute-vmax"; 282 element.id = "element-container-absolute-vmax";
268 shouldBe('style.getPropertyValue("top")', "'" + Math.floor(10 * viewportMaxL ength / 100) + "px'"); 283 shouldBe('style.getPropertyValue("top")', vmax(10));
269 shouldBe('style.getPropertyValue("bottom")', "'" + Math.floor(10 * viewportM axLength / 100) + "px'"); 284 shouldBe('style.getPropertyValue("bottom")', vmax(10));
270 shouldBe('style.getPropertyValue("left")', "'" + Math.floor(10 * viewportMax Length / 100) + "px'"); 285 shouldBe('style.getPropertyValue("left")', vmax(10));
271 shouldBe('style.getPropertyValue("right")', "'" + Math.floor(10 * viewportMa xLength / 100) + "px'"); 286 shouldBe('style.getPropertyValue("right")', vmax(10));
272 shouldBe('style.getPropertyValue("padding-left")', "'" + Math.floor(2 * view portMaxLength / 100) + "px'"); 287 shouldBe('style.getPropertyValue("padding-left")', vmax(2));
273 shouldBe('style.getPropertyValue("padding-right")', "'" + Math.floor(2 * vie wportMaxLength / 100) + "px'"); 288 shouldBe('style.getPropertyValue("padding-right")', vmax(2));
274 shouldBe('style.getPropertyValue("padding-top")', "'" + Math.floor(2 * viewp ortMaxLength / 100) + "px'"); 289 shouldBe('style.getPropertyValue("padding-top")', vmax(2));
275 shouldBe('style.getPropertyValue("padding-bottom")', "'" + Math.floor(2 * vi ewportMaxLength / 100) + "px'"); 290 shouldBe('style.getPropertyValue("padding-bottom")', vmax(2));
276 } 291 }
277 getTheStyle(); 292 getTheStyle();
278 </script> 293 </script>
279 </html> 294 </html>
OLDNEW
« no previous file with comments | « LayoutTests/animations/interpolation/line-height-interpolation-expected.txt ('k') | LayoutTests/css3/viewport-percentage-lengths/css3-viewport-percentage-lengths-getStyle-expected.txt » ('j') | LayoutTests/css3/viewport-percentage-lengths/css3-viewport-percentage-lengths-getStyle-expected.txt » ('J')

Powered by Google App Engine
This is Rietveld 408576698