grid-support-grid-template-areas-001.html (4898B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Support for 'grid-template-ares' property</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property"> 6 <meta name="flags" content="ahem dom"> 7 <meta name="assert" content="This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="support/testing-utils.js"></script> 11 <style> 12 #grid { 13 display: grid; 14 } 15 </style> 16 <div id="log"></div> 17 18 <div id="grid"></div> 19 20 <script> 21 // Single values. 22 TestingUtils.testGridTemplateAreas('grid', 'none', 'none'); 23 TestingUtils.testGridTemplateAreas('grid', '"a"', '"a"'); 24 TestingUtils.testGridTemplateAreas('grid', '"."', '"."'); 25 TestingUtils.testGridTemplateAreas('grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"'); 26 TestingUtils.testGridTemplateAreas('grid', '"a b"', '"a b"'); 27 TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"'); 28 TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"'); 29 TestingUtils.testGridTemplateAreas('grid', '"a b""c d"', '"a b" "c d"'); 30 TestingUtils.testGridTemplateAreas('grid', '"a b"\t"c d"', '"a b" "c d"'); 31 TestingUtils.testGridTemplateAreas('grid', '"a b"\n"c d"', '"a b" "c d"'); 32 TestingUtils.testGridTemplateAreas('grid', '"a b" "a b"', '"a b" "a b"'); 33 TestingUtils.testGridTemplateAreas('grid', '"a a" "b b"', '"a a" "b b"'); 34 TestingUtils.testGridTemplateAreas('grid', '". a ." "b a c"', '". a ." "b a c"'); 35 TestingUtils.testGridTemplateAreas('grid', '".. a ..." "b a c"', '". a ." "b a c"'); 36 TestingUtils.testGridTemplateAreas('grid', '".a..." "b a c"', '". a ." "b a c"'); 37 TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."'); 38 TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ...."', '"head head" "nav main" "foot ."'); 39 TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot."', '"head head" "nav main" "foot ."'); 40 TestingUtils.testGridTemplateAreas('grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."'); 41 TestingUtils.testGridTemplateAreas('grid', '"... header header ...." "nav main main main" "nav footer footer ...."', '". header header ." "nav main main main" "nav footer footer ."'); 42 TestingUtils.testGridTemplateAreas('grid', '"...header header...." "nav main main main" "nav footer footer...."', '". header header ." "nav main main main" "nav footer footer ."'); 43 TestingUtils.testGridTemplateAreas('grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"'); 44 TestingUtils.testGridTemplateAreas('grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"'); 45 TestingUtils.testGridTemplateAreas('grid', '". a" "b a" ". a"', '". a" "b a" ". a"'); 46 TestingUtils.testGridTemplateAreas('grid', '".. a" "b a" "... a"', '". a" "b a" ". a"'); 47 TestingUtils.testGridTemplateAreas('grid', '"..a" "b a" ".a"', '". a" "b a" ". a"'); 48 TestingUtils.testGridTemplateAreas('grid', '"a a a" "b b b"', '"a a a" "b b b"'); 49 TestingUtils.testGridTemplateAreas('grid', '". ." "a a"', '". ." "a a"'); 50 TestingUtils.testGridTemplateAreas('grid', '"... ...." "a a"', '". ." "a a"'); 51 52 // Reset values. 53 document.getElementById('grid').style.gridTemplateAreas = ''; 54 55 // Wrong values. 56 TestingUtils.testGridTemplateAreas('grid', 'a', 'none'); 57 TestingUtils.testGridTemplateAreas('grid', '"a" "b c"', 'none'); 58 TestingUtils.testGridTemplateAreas('grid', '"a b" "c" "d e"', 'none'); 59 TestingUtils.testGridTemplateAreas('grid', '"a b c" "d e"', 'none'); 60 TestingUtils.testGridTemplateAreas('grid', '"a b"-"c d"', 'none'); 61 TestingUtils.testGridTemplateAreas('grid', '"a b" - "c d"', 'none'); 62 TestingUtils.testGridTemplateAreas('grid', '"a b" . "c d"', 'none'); 63 TestingUtils.testGridTemplateAreas('grid', '"a b a"', 'none'); 64 TestingUtils.testGridTemplateAreas('grid', '"a" "b" "a"', 'none'); 65 TestingUtils.testGridTemplateAreas('grid', '"a b" "b b"', 'none'); 66 TestingUtils.testGridTemplateAreas('grid', '"b a" "b b"', 'none'); 67 TestingUtils.testGridTemplateAreas('grid', '"a b" "b a"', 'none'); 68 TestingUtils.testGridTemplateAreas('grid', '"a ." ". a"', 'none'); 69 TestingUtils.testGridTemplateAreas('grid', '","', 'none'); 70 TestingUtils.testGridTemplateAreas('grid', '"10%"', 'none'); 71 TestingUtils.testGridTemplateAreas('grid', '"USD$"', 'none'); 72 </script>