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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/alignment/parse-justify-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 #justifyContentAuto { 5 #justifyContentAuto {
6 justify-content: auto; 6 justify-content: auto;
7 } 7 }
8 8
9 #justifyContentBaseline { 9 #justifyContentBaseline {
10 justify-content: baseline; 10 justify-content: baseline;
(...skipping 151 matching lines...) Expand 10 before | Expand all | Expand 10 after
162 <div id="justifyContentSafe"></div> 162 <div id="justifyContentSafe"></div>
163 <div id="justifyContentRightSafeUnsafe"></div> 163 <div id="justifyContentRightSafeUnsafe"></div>
164 <div id="justifyContentCenterLeft"></div> 164 <div id="justifyContentCenterLeft"></div>
165 165
166 <script src="resources/alignment-parsing-utils.js"></script> 166 <script src="resources/alignment-parsing-utils.js"></script>
167 <script> 167 <script>
168 description('Test that setting and getting justify-content works as expected'); 168 description('Test that setting and getting justify-content works as expected');
169 169
170 debug("Test getting justify-content set through CSS"); 170 debug("Test getting justify-content set through CSS");
171 var justifyContentAuto = document.getElementById("justifyContentAuto"); 171 var justifyContentAuto = document.getElementById("justifyContentAuto");
172 shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue ('justify-content')", "start"); 172 shouldBeEqualToString("getComputedStyle(justifyContentAuto, '').getPropertyValue ('justify-content')", "normal");
173 173
174 var justifyContentBaseline = document.getElementById("justifyContentBaseline"); 174 var justifyContentBaseline = document.getElementById("justifyContentBaseline");
175 shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyV alue('justify-content')", "baseline"); 175 shouldBeEqualToString("getComputedStyle(justifyContentBaseline, '').getPropertyV alue('justify-content')", "baseline");
176 176
177 var justifyContentLastBaseline = document.getElementById("justifyContentLastBase line"); 177 var justifyContentLastBaseline = document.getElementById("justifyContentLastBase line");
178 shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPrope rtyValue('justify-content')", "last-baseline"); 178 shouldBeEqualToString("getComputedStyle(justifyContentLastBaseline, '').getPrope rtyValue('justify-content')", "last-baseline");
179 179
180 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBet ween"); 180 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBet ween");
181 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPrope rtyValue('justify-content')", "space-between"); 181 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetween, '').getPrope rtyValue('justify-content')", "space-between");
182 182
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
240 var justifyContentStretchStartSafe = document.getElementById("justifyContentStre tchStartSafe"); 240 var justifyContentStretchStartSafe = document.getElementById("justifyContentStre tchStartSafe");
241 shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getP ropertyValue('justify-content')", "stretch start safe"); 241 shouldBeEqualToString("getComputedStyle(justifyContentStretchStartSafe, '').getP ropertyValue('justify-content')", "stretch start safe");
242 242
243 var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContent SpaceAroundEndUnsafe"); 243 var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContent SpaceAroundEndUnsafe");
244 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndUnsafe, ''). getPropertyValue('justify-content')", "space-around end unsafe"); 244 shouldBeEqualToString("getComputedStyle(justifyContentSpaceAroundEndUnsafe, ''). getPropertyValue('justify-content')", "space-around end unsafe");
245 245
246 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyCon tentSpaceEvenlyFlexStartSafe"); 246 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyCon tentSpaceEvenlyFlexStartSafe");
247 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "space-evenly flex-start safe"); 247 shouldBeEqualToString("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "space-evenly flex-start safe");
248 248
249 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpac eBetweenSafe"); 249 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpac eBetweenSafe");
250 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getP ropertyValue('justify-content')", "start"); 250 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenSafe, '').getP ropertyValue('justify-content')", "normal");
251 251
252 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpa ceBetweenStretch"); 252 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSpa ceBetweenStretch");
253 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').g etPropertyValue('justify-content')", "start"); 253 shouldBeEqualToString("getComputedStyle(justifyContentSpaceBetweenStretch, '').g etPropertyValue('justify-content')", "normal");
254 254
255 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSaf e"); 255 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentSaf e");
256 shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue ('justify-content')", "start"); 256 shouldBeEqualToString("getComputedStyle(justifyContentSafe, '').getPropertyValue ('justify-content')", "normal");
257 257
258 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRig htSafeUnsafe"); 258 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentRig htSafeUnsafe");
259 shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPr opertyValue('justify-content')", "start"); 259 shouldBeEqualToString("getComputedStyle(justifyContentRightSafeUnsafe, '').getPr opertyValue('justify-content')", "normal");
260 260
261 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCen terLeft"); 261 var justifyContentSpaceAroundUnsafe = document.getElementById("justifyContentCen terLeft");
262 shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropert yValue('justify-content')", "start"); 262 shouldBeEqualToString("getComputedStyle(justifyContentCenterLeft, '').getPropert yValue('justify-content')", "normal");
263 263
264 debug(""); 264 debug("");
265 debug("Test initial value of justify-content through JS"); 265 debug("Test initial value of justify-content through JS");
266 element = document.createElement("div"); 266 element = document.createElement("div");
267 document.body.appendChild(element); 267 document.body.appendChild(element);
268 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-c ontent')", "start"); 268 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('justify-c ontent')", "normal");
269 269
270 debug(""); 270 debug("");
271 debug("Test getting and setting justify-content through JS"); 271 debug("Test getting and setting justify-content through JS");
272 element = document.createElement("div"); 272 element = document.createElement("div");
273 document.body.appendChild(element); 273 document.body.appendChild(element);
274 element.style.justifyContent = "center"; 274 element.style.justifyContent = "center";
275 checkValues(element, "justifyContent", "justify-content", "center", "center"); 275 checkValues(element, "justifyContent", "justify-content", "center", "center");
276 276
277 element.style.justifyContent = "unsafe start"; 277 element.style.justifyContent = "unsafe start";
278 checkValues(element, "justifyContent", "justify-content", "start unsafe", "star t unsafe"); 278 checkValues(element, "justifyContent", "justify-content", "start unsafe", "star t unsafe");
279 279
280 element.style.justifyContent = "flex-end safe"; 280 element.style.justifyContent = "flex-end safe";
281 checkValues(element, "justifyContent", "justify-content", "flex-end safe", "fle x-end safe"); 281 checkValues(element, "justifyContent", "justify-content", "flex-end safe", "fle x-end safe");
282 282
283 element.style.justifyContent = "space-between right safe"; 283 element.style.justifyContent = "space-between right safe";
284 checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe"); 284 checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe");
285 285
286 element.style.justifyContent = "center stretch"; 286 element.style.justifyContent = "center stretch";
287 checkValues(element, "justifyContent", "justify-content", "stretch center", "st retch center"); 287 checkValues(element, "justifyContent", "justify-content", "stretch center", "st retch center");
288 288
289 element.style.justifyContent = "right unsafe"; 289 element.style.justifyContent = "right unsafe";
290 checkValues(element, "justifyContent", "justify-content", "right unsafe", "righ t unsafe"); 290 checkValues(element, "justifyContent", "justify-content", "right unsafe", "righ t unsafe");
291 291
292 element.style.justifyContent = "auto"; 292 element.style.justifyContent = "normal";
293 checkValues(element, "justifyContent", "justify-content", "auto", "start"); 293 checkValues(element, "justifyContent", "justify-content", "normal", "normal");
294 294
295 element.style.display = "flex"; 295 element.style.display = "flex";
296 element.style.justifyContent = "auto"; 296 element.style.justifyContent = "normal";
297 checkValues(element, "justifyContent", "justify-content", "auto", "flex-start") ; 297 checkValues(element, "justifyContent", "justify-content", "normal", "normal");
298 298
299 element.style.display = "grid"; 299 element.style.display = "grid";
300 element.style.justifyContent = "auto"; 300 element.style.justifyContent = "normal";
301 checkValues(element, "justifyContent", "justify-content", "auto", "start"); 301 checkValues(element, "justifyContent", "justify-content", "normal", "normal");
302 302
303 element.style.justifyContent = "flex-end"; 303 element.style.justifyContent = "flex-end";
304 checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end "); 304 checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end ");
305 305
306 debug(""); 306 debug("");
307 debug("Test bad combinations of justify-content"); 307 debug("Test bad combinations of justify-content");
308 element = document.createElement("div"); 308 element = document.createElement("div");
309 document.body.appendChild(element); 309 document.body.appendChild(element);
310 310
311 checkBadValues(element, "justifyContent", "justify-content", ""); 311 checkBadValues(element, "justifyContent", "justify-content", "");
312 checkBadValues(element, "justifyContent", "justify-content", "auto");
312 checkBadValues(element, "justifyContent", "justify-content", "unsafe auto"); 313 checkBadValues(element, "justifyContent", "justify-content", "unsafe auto");
313 checkBadValues(element, "justifyContent", "justify-content", "auto safe"); 314 checkBadValues(element, "justifyContent", "justify-content", "auto safe");
314 checkBadValues(element, "justifyContent", "justify-content", "auto left"); 315 checkBadValues(element, "justifyContent", "justify-content", "auto left");
315 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); 316 checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
316 checkBadValues(element, "justifyContent", "justify-content", "last baseline cen ter"); 317 checkBadValues(element, "justifyContent", "justify-content", "last baseline cen ter");
317 checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe"); 318 checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe");
318 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe"); 319 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe");
319 checkBadValues(element, "justifyContent", "justify-content", "center start"); 320 checkBadValues(element, "justifyContent", "justify-content", "center start");
320 checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); 321 checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
321 checkBadValues(element, "justifyContent", "justify-content", "unsafe baseline") ; 322 checkBadValues(element, "justifyContent", "justify-content", "unsafe baseline") ;
322 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe left" ); 323 checkBadValues(element, "justifyContent", "justify-content", "unsafe safe left" );
323 checkBadValues(element, "justifyContent", "justify-content", "unsafe left safe" ); 324 checkBadValues(element, "justifyContent", "justify-content", "unsafe left safe" );
324 checkBadValues(element, "justifyContent", "justify-content", "left safe unsafe safe"); 325 checkBadValues(element, "justifyContent", "justify-content", "left safe unsafe safe");
325 checkBadValues(element, "justifyContent", "justify-content", "start right space -between"); 326 checkBadValues(element, "justifyContent", "justify-content", "start right space -between");
326 checkBadValues(element, "justifyContent", "justify-content", "safe stretch"); 327 checkBadValues(element, "justifyContent", "justify-content", "safe stretch");
327 checkBadValues(element, "justifyContent", "justify-content", "space-around stre tch"); 328 checkBadValues(element, "justifyContent", "justify-content", "space-around stre tch");
328 checkBadValues(element, "justifyContent", "justify-content", "end space-between start"); 329 checkBadValues(element, "justifyContent", "justify-content", "end space-between start");
329 checkBadValues(element, "justifyContent", "justify-content", "right safe left") ; 330 checkBadValues(element, "justifyContent", "justify-content", "right safe left") ;
330 checkBadValues(element, "justifyContent", "justify-content", "unsafe"); 331 checkBadValues(element, "justifyContent", "justify-content", "unsafe");
331 checkBadValues(element, "justifyContent", "justify-content", "safe"); 332 checkBadValues(element, "justifyContent", "justify-content", "safe");
332 333
333 debug(""); 334 debug("");
334 debug("Test the value 'initial'"); 335 debug("Test the value 'initial'");
335 element.style.display = ""; 336 element.style.display = "";
336 checkInitialValues(element, "justifyContent", "justify-content", "stretch center ", "start"); 337 checkInitialValues(element, "justifyContent", "justify-content", "stretch center ", "normal");
337 338
338 debug(""); 339 debug("");
339 debug("Test the value 'initial' for grid containers"); 340 debug("Test the value 'initial' for grid containers");
340 element.style.display = "grid"; 341 element.style.display = "grid";
341 checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start"); 342 checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "normal");
342 343
343 debug(""); 344 debug("");
344 debug("Test the value 'initial' for flex containers"); 345 debug("Test the value 'initial' for flex containers");
345 element.style.display = "flex"; 346 element.style.display = "flex";
346 checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "flex-start"); 347 checkInitialValues(element, "justifyContent", "justify-content", "right unsafe", "normal");
347 348
348 debug(""); 349 debug("");
349 debug("Test the value 'inherit'"); 350 debug("Test the value 'inherit'");
350 checkInheritValues("justifyContent", "justify-content", "end"); 351 checkInheritValues("justifyContent", "justify-content", "end");
351 checkInheritValues("justifyContent", "justify-content", "left safe"); 352 checkInheritValues("justifyContent", "justify-content", "left safe");
352 checkInheritValues("justifyContent", "justify-content", "stretch center"); 353 checkInheritValues("justifyContent", "justify-content", "stretch center");
353 354
354 </script> 355 </script>
355 </body> 356 </body>
356 </html> 357 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698