grid-template-shorthand-areas-valid.html (1646B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: grid-template and grid-template-areas</title> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template"> 7 <meta name=assert content="grid-template and grid-template-areas parsing is valid."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <script> 13 14 function testValidGridTemplate(valueGridTemplate, valueGridAreas, serializedGridTemplateValue) { 15 if (arguments.length < 3) 16 serializedGridTemplateValue = valueGridTemplate; 17 18 test(()=>{ 19 const root = document.children[0]; 20 root.style.gridTemplate = ""; 21 root.style.gridTemplate = valueGridTemplate; 22 root.style.gridTemplateAreas = ""; 23 root.style.gridTemplateAreas = valueGridAreas; 24 assert_equals(root.style.gridTemplate, serializedGridTemplateValue); 25 assert_equals(root.style.gridTemplateAreas, valueGridAreas); 26 }, `grid-template: ${valueGridTemplate} and "grid-template-areas: ${valueGridAreas};" should be valid.`); 27 } 28 29 testValidGridTemplate("none / 1px", "\"a\"", ""); 30 testValidGridTemplate("none / none", "\"a\"", ""); 31 testValidGridTemplate("none / none", "\"a\" \"b\" \"c\" \"d\" \"e\"", ""); 32 testValidGridTemplate("auto / 1px", "\"a a a\"", "\"a a a\" / 1px"); 33 testValidGridTemplate("auto / auto", "\"a a a\"", "\"a a a\" / auto"); 34 testValidGridTemplate("10px 20px 30px / 40px 50px 60px 70px", 35 "\"a . b .\" \"c d . e\" \"f g h .\"", 36 "\"a . b .\" 10px \"c d . e\" 20px \"f g h .\" 30px / 40px 50px 60px 70px"); 37 </script> 38 </body> 39 </html>