grid-template-repeat-auto-computed-withcontent-001.html (2634B)
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: 32px; 17 height: 10px; 18 }; 19 20 </style> 21 </head> 22 <body> 23 <div id="container"> 24 <div id="target"> 25 <div></div> 26 <div></div> 27 <div id="child"></div> 28 <div style="grid-column: 7"></div> 29 <div></div> 30 </div> 31 </div> 32 <script> 33 34 let autoFitTester = new GridChildHelper(gridChildHelperCol, 35 "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] "); 36 37 let autoFillTester = new GridChildHelper(gridChildHelperCol, 38 "[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] "); 39 40 // Auto-fit 41 autoFitTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]"); 42 autoFitTester.runTest(4, "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]"); 43 autoFitTester.runTest(5, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]"); 44 autoFitTester.runTest(6, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 0px [g] 4px [h i] 5px [k] 6px [l m]"); 45 autoFitTester.runTest("4 / 5", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]"); 46 autoFitTester.runTest("4 / 6", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]"); 47 autoFitTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]"); 48 // Auto-fill. These tests are semi-redundant, but should still pass. 49 autoFillTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); 50 autoFillTester.runTest(4, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); 51 autoFillTester.runTest(5, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); 52 autoFillTester.runTest("4 / 7", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); 53 autoFillTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]"); 54 55 </script> 56 </body> 57 </html>