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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-align-content.html

Issue 1583433002: [css-align] New CSS Value 'normal' for Content Alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixed layout tests failing. Created 4 years, 10 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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 #alignContentAuto { 5 #alignContentAuto {
6 align-content: auto; 6 align-content: auto;
7 } 7 }
8 8
9 #alignContentBaseline { 9 #alignContentBaseline {
10 align-content: baseline; 10 align-content: baseline;
(...skipping 155 matching lines...) Expand 10 before | Expand all | Expand 10 after
166 <div id="alignContentSafe"></div> 166 <div id="alignContentSafe"></div>
167 <div id="alignContentRightSafeUnsafe"></div> 167 <div id="alignContentRightSafeUnsafe"></div>
168 <div id="alignContentCenterLeft"></div> 168 <div id="alignContentCenterLeft"></div>
169 169
170 <script src="resources/alignment-parsing-utils.js"></script> 170 <script src="resources/alignment-parsing-utils.js"></script>
171 <script> 171 <script>
172 description('Test that setting and getting align-content works as expected'); 172 description('Test that setting and getting align-content works as expected');
173 173
174 debug("Test getting align-content set through CSS"); 174 debug("Test getting align-content set through CSS");
175 var alignContentAuto = document.getElementById("alignContentAuto"); 175 var alignContentAuto = document.getElementById("alignContentAuto");
176 shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue(' align-content')", "start"); 176 shouldBeEqualToString("getComputedStyle(alignContentAuto, '').getPropertyValue(' align-content')", "normal");
177 177
178 var alignContentBaseline = document.getElementById("alignContentBaseline"); 178 var alignContentBaseline = document.getElementById("alignContentBaseline");
179 shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyVal ue('align-content')", "baseline"); 179 shouldBeEqualToString("getComputedStyle(alignContentBaseline, '').getPropertyVal ue('align-content')", "baseline");
180 180
181 var alignContentLastBaseline = document.getElementById("alignContentLastBaseline "); 181 var alignContentLastBaseline = document.getElementById("alignContentLastBaseline ");
182 shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropert yValue('align-content')", "last-baseline"); 182 shouldBeEqualToString("getComputedStyle(alignContentLastBaseline, '').getPropert yValue('align-content')", "last-baseline");
183 183
184 var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween "); 184 var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween ");
185 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropert yValue('align-content')", "space-between"); 185 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetween, '').getPropert yValue('align-content')", "space-between");
186 186
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
244 var alignContentStretchStartSafe = document.getElementById("alignContentStretchS tartSafe"); 244 var alignContentStretchStartSafe = document.getElementById("alignContentStretchS tartSafe");
245 shouldBeEqualToString("getComputedStyle(alignContentStretchStartSafe, '').getPro pertyValue('align-content')", "stretch start safe"); 245 shouldBeEqualToString("getComputedStyle(alignContentStretchStartSafe, '').getPro pertyValue('align-content')", "stretch start safe");
246 246
247 var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpac eAroundEndUnsafe"); 247 var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpac eAroundEndUnsafe");
248 shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundEndUnsafe, '').ge tPropertyValue('align-content')", "space-around end unsafe"); 248 shouldBeEqualToString("getComputedStyle(alignContentSpaceAroundEndUnsafe, '').ge tPropertyValue('align-content')", "space-around end unsafe");
249 249
250 var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContent SpaceEvenlyFlexStartSafe"); 250 var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContent SpaceEvenlyFlexStartSafe");
251 shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '' ).getPropertyValue('align-content')", "space-evenly flex-start safe"); 251 shouldBeEqualToString("getComputedStyle(alignContentSpaceEvenlyFlexStartSafe, '' ).getPropertyValue('align-content')", "space-evenly flex-start safe");
252 252
253 var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBet weenSafe"); 253 var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBet weenSafe");
254 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPro pertyValue('align-content')", "start"); 254 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenSafe, '').getPro pertyValue('align-content')", "normal");
255 255
256 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSpaceBe tweenStretch"); 256 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSpaceBe tweenStretch");
257 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').get PropertyValue('align-content')", "start"); 257 shouldBeEqualToString("getComputedStyle(alignContentSpaceBetweenStretch, '').get PropertyValue('align-content')", "normal");
258 258
259 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSafe"); 259 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentSafe");
260 shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue(' align-content')", "start"); 260 shouldBeEqualToString("getComputedStyle(alignContentSafe, '').getPropertyValue(' align-content')", "normal");
261 261
262 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentRightSa feUnsafe"); 262 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentRightSa feUnsafe");
263 shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getProp ertyValue('align-content')", "start"); 263 shouldBeEqualToString("getComputedStyle(alignContentRightSafeUnsafe, '').getProp ertyValue('align-content')", "normal");
264 264
265 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentCenterL eft"); 265 var alignContentSpaceAroundUnsafe = document.getElementById("alignContentCenterL eft");
266 shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyV alue('align-content')", "start"); 266 shouldBeEqualToString("getComputedStyle(alignContentCenterLeft, '').getPropertyV alue('align-content')", "normal");
267 267
268 debug(""); 268 debug("");
269 debug("Test initial value of align-content through JS"); 269 debug("Test initial value of align-content through JS");
270 element = document.createElement("div"); 270 element = document.createElement("div");
271 document.body.appendChild(element); 271 document.body.appendChild(element);
272 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-con tent')", "start"); 272 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('align-con tent')", "normal");
273 273
274 debug(""); 274 debug("");
275 debug("Test getting and setting align-content through JS"); 275 debug("Test getting and setting align-content through JS");
276 element = document.createElement("div"); 276 element = document.createElement("div");
277 document.body.appendChild(element); 277 document.body.appendChild(element);
278 element.style.alignContent = "center"; 278 element.style.alignContent = "center";
279 checkValues(element, "alignContent", "align-content", "center", "center"); 279 checkValues(element, "alignContent", "align-content", "center", "center");
280 280
281 element.style.alignContent = "unsafe start"; 281 element.style.alignContent = "unsafe start";
282 checkValues(element, "alignContent", "align-content", "start unsafe", "start un safe"); 282 checkValues(element, "alignContent", "align-content", "start unsafe", "start un safe");
283 283
284 element.style.alignContent = "flex-end safe"; 284 element.style.alignContent = "flex-end safe";
285 checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-en d safe"); 285 checkValues(element, "alignContent", "align-content", "flex-end safe", "flex-en d safe");
286 286
287 element.style.alignContent = "space-between right safe"; 287 element.style.alignContent = "space-between right safe";
288 checkValues(element, "alignContent", "align-content", "space-between right safe ", "space-between right safe"); 288 checkValues(element, "alignContent", "align-content", "space-between right safe ", "space-between right safe");
289 289
290 element.style.alignContent = "stretch center"; 290 element.style.alignContent = "stretch center";
291 checkValues(element, "alignContent", "align-content", "stretch center", "stretc h center"); 291 checkValues(element, "alignContent", "align-content", "stretch center", "stretc h center");
292 292
293 element.style.alignContent = "right unsafe"; 293 element.style.alignContent = "right unsafe";
294 checkValues(element, "alignContent", "align-content", "right unsafe", "right un safe"); 294 checkValues(element, "alignContent", "align-content", "right unsafe", "right un safe");
295 295
296 element.style.alignContent = "auto"; 296 element.style.alignContent = "normal";
297 checkValues(element, "alignContent", "align-content", "auto", "start"); 297 checkValues(element, "alignContent", "align-content", "normal", "normal");
298 298
299 element.style.display = "flex"; 299 element.style.display = "flex";
300 element.style.alignContent = "auto"; 300 element.style.alignContent = "normal";
301 checkValues(element, "alignContent", "align-content", "auto", "stretch"); 301 checkValues(element, "alignContent", "align-content", "normal", "normal");
302 302
303 element.style.display = "grid"; 303 element.style.display = "grid";
304 element.style.alignContent = "auto"; 304 element.style.alignContent = "normal";
305 checkValues(element, "alignContent", "align-content", "auto", "start"); 305 checkValues(element, "alignContent", "align-content", "normal", "normal");
306 306
307 element.style.alignContent = "flex-end"; 307 element.style.alignContent = "flex-end";
308 checkValues(element, "alignContent", "align-content", "flex-end", "flex-end"); 308 checkValues(element, "alignContent", "align-content", "flex-end", "flex-end");
309 309
310 debug(""); 310 debug("");
311 debug("Test bad combinations of align-content"); 311 debug("Test bad combinations of align-content");
312 element = document.createElement("div"); 312 element = document.createElement("div");
313 document.body.appendChild(element); 313 document.body.appendChild(element);
314 314
315 checkBadValues(element, "alignContent", "align-content", ""); 315 checkBadValues(element, "alignContent", "align-content", "");
316 checkBadValues(element, "alignContent", "align-content", "auto");
316 checkBadValues(element, "alignContent", "align-content", "unsafe auto"); 317 checkBadValues(element, "alignContent", "align-content", "unsafe auto");
317 checkBadValues(element, "alignContent", "align-content", "auto safe"); 318 checkBadValues(element, "alignContent", "align-content", "auto safe");
318 checkBadValues(element, "alignContent", "align-content", "auto left"); 319 checkBadValues(element, "alignContent", "align-content", "auto left");
319 checkBadValues(element, "alignContent", "align-content", "baseline safe"); 320 checkBadValues(element, "alignContent", "align-content", "baseline safe");
320 checkBadValues(element, "alignContent", "align-content", "last baseline center" ); 321 checkBadValues(element, "alignContent", "align-content", "last baseline center" );
321 checkBadValues(element, "alignContent", "align-content", "unsafe unsafe"); 322 checkBadValues(element, "alignContent", "align-content", "unsafe unsafe");
322 checkBadValues(element, "alignContent", "align-content", "unsafe safe"); 323 checkBadValues(element, "alignContent", "align-content", "unsafe safe");
323 checkBadValues(element, "alignContent", "align-content", "center start"); 324 checkBadValues(element, "alignContent", "align-content", "center start");
324 checkBadValues(element, "alignContent", "align-content", "baseline safe"); 325 checkBadValues(element, "alignContent", "align-content", "baseline safe");
325 checkBadValues(element, "alignContent", "align-content", "unsafe baseline"); 326 checkBadValues(element, "alignContent", "align-content", "unsafe baseline");
326 checkBadValues(element, "alignContent", "align-content", "unsafe safe left"); 327 checkBadValues(element, "alignContent", "align-content", "unsafe safe left");
327 checkBadValues(element, "alignContent", "align-content", "unsafe left safe"); 328 checkBadValues(element, "alignContent", "align-content", "unsafe left safe");
328 checkBadValues(element, "alignContent", "align-content", "left safe unsafe safe "); 329 checkBadValues(element, "alignContent", "align-content", "left safe unsafe safe ");
329 checkBadValues(element, "alignContent", "align-content", "start right space-bet ween"); 330 checkBadValues(element, "alignContent", "align-content", "start right space-bet ween");
330 checkBadValues(element, "alignContent", "align-content", "safe stretch"); 331 checkBadValues(element, "alignContent", "align-content", "safe stretch");
331 checkBadValues(element, "alignContent", "align-content", "space-around stretch" ); 332 checkBadValues(element, "alignContent", "align-content", "space-around stretch" );
332 checkBadValues(element, "alignContent", "align-content", "end space-between sta rt"); 333 checkBadValues(element, "alignContent", "align-content", "end space-between sta rt");
333 checkBadValues(element, "alignContent", "align-content", "right safe left"); 334 checkBadValues(element, "alignContent", "align-content", "right safe left");
334 checkBadValues(element, "alignContent", "align-content", "unsafe"); 335 checkBadValues(element, "alignContent", "align-content", "unsafe");
335 checkBadValues(element, "alignContent", "align-content", "safe"); 336 checkBadValues(element, "alignContent", "align-content", "safe");
336 337
337 debug(""); 338 debug("");
338 debug("Test the value 'initial'"); 339 debug("Test the value 'initial'");
339 element.style.display = ""; 340 element.style.display = "";
340 checkInitialValues(element, "alignContent", "align-content", "stretch center", " start"); 341 checkInitialValues(element, "alignContent", "align-content", "stretch center", " normal");
341 342
342 debug(""); 343 debug("");
343 debug("Test the value 'initial' for grid containers"); 344 debug("Test the value 'initial' for grid containers");
344 element.style.display = "grid"; 345 element.style.display = "grid";
345 checkInitialValues(element, "alignContent", "align-content", "space-between left ", "start"); 346 checkInitialValues(element, "alignContent", "align-content", "space-between left ", "normal");
346 347
347 debug(""); 348 debug("");
348 debug("Test the value 'initial' for flex containers"); 349 debug("Test the value 'initial' for flex containers");
349 element.style.display = "flex"; 350 element.style.display = "flex";
350 checkInitialValues(element, "alignContent", "align-content", "right unsafe", "st retch"); 351 checkInitialValues(element, "alignContent", "align-content", "right unsafe", "no rmal");
351 352
352 debug(""); 353 debug("");
353 debug("Test the value 'inherit'"); 354 debug("Test the value 'inherit'");
354 checkInheritValues("alignContent", "align-content", "end"); 355 checkInheritValues("alignContent", "align-content", "end");
355 checkInheritValues("alignContent", "align-content", "left safe"); 356 checkInheritValues("alignContent", "align-content", "left safe");
356 checkInheritValues("alignContent", "align-content", "stretch center"); 357 checkInheritValues("alignContent", "align-content", "stretch center");
357 358
358 </script> 359 </script>
359 </body> 360 </body>
360 </html> 361 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698