grid-template-repeat-auto-computed-withcontent-002.html (3996B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> 7 <meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <script src="/css/css-grid/support/grid-child-utils.js"></script> 12 <style> 13 14 #target { 15 display: grid; 16 width: 54px; 17 height: 32px; 18 }; 19 20 </style> 21 </head> 22 <body> 23 <div id="container"> 24 <div id="target"> 25 <div></div> 26 <div></div> 27 <div style="grid-column: 4"></div> 28 <div id="child"></div> 29 <div style="grid-column: 10"></div> 30 <div></div> 31 </div> 32 </div> 33 <script> 34 35 // Style with 3 repeat tracks. 36 let style3 = 37 "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]"; 38 let col3Tester = new GridChildHelper(gridChildHelperCol, style3); 39 let rowTester = new GridChildHelper(gridChildHelperRow, style3); 40 41 // Style with 2 repeat tracks. 42 let style2 = 43 "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]"; 44 let col2Tester = new GridChildHelper(gridChildHelperCol, style2); 45 46 rowTester.runTest(3, 47 "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h] 0px [i j k] 7px [k] 8px [l m]"); 48 rowTester.runTest(5, 49 "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h] 5px [i j k] 7px [k] 8px [l m]"); 50 rowTester.runTest("3 / 8", 51 "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); 52 rowTester.runTest("4 / span 2", 53 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); 54 rowTester.runTest("4 / 5", 55 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j k] 7px [k] 8px [l m]"); 56 57 col3Tester.runTest(3, 58 "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); 59 col3Tester.runTest(6, 60 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); 61 col3Tester.runTest("3 / 8", 62 "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); 63 col3Tester.runTest("5 / span 2", 64 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); 65 col3Tester.runTest("7 / span 2", 66 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); 67 col3Tester.runTest("5 / 8", 68 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); 69 col3Tester.runTest("8 / 10", 70 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 5px [i j e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); 71 72 col2Tester.runTest(3, 73 "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); 74 col2Tester.runTest(6, 75 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); 76 col2Tester.runTest("3 / 8", 77 "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); 78 col2Tester.runTest("6 / span 2", 79 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); 80 col2Tester.runTest("5 / 10", 81 "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]"); 82 83 </script> 84 </body> 85 </html>