| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> |
| <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> |
| <meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/computed-testcommon.js"></script> |
| <script src="/css/css-grid/support/grid-child-utils.js"></script> |
| <style> |
| |
| #target { |
| display: grid; |
| width: 54px; |
| height: 32px; |
| }; |
| |
| </style> |
| </head> |
| <body> |
| <div id="container"> |
| <div id="target"> |
| <div></div> |
| <div></div> |
| <div style="grid-column: 4"></div> |
| <div id="child"></div> |
| <div style="grid-column: 10"></div> |
| <div></div> |
| </div> |
| </div> |
| <script> |
| |
| // Style with 3 repeat tracks. |
| let style3 = |
| "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]"; |
| let col3Tester = new GridChildHelper(gridChildHelperCol, style3); |
| let rowTester = new GridChildHelper(gridChildHelperRow, style3); |
| |
| // Style with 2 repeat tracks. |
| let style2 = |
| "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]"; |
| let col2Tester = new GridChildHelper(gridChildHelperCol, style2); |
| |
| rowTester.runTest(3, |
| "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h] 0px [i j k] 7px [k] 8px [l m]"); |
| rowTester.runTest(5, |
| "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h] 5px [i j k] 7px [k] 8px [l m]"); |
| rowTester.runTest("3 / 8", |
| "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); |
| rowTester.runTest("4 / span 2", |
| "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]"); |
| rowTester.runTest("4 / 5", |
| "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j k] 7px [k] 8px [l m]"); |
| |
| col3Tester.runTest(3, |
| "[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]"); |
| col3Tester.runTest(6, |
| "[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]"); |
| col3Tester.runTest("3 / 8", |
| "[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]"); |
| col3Tester.runTest("5 / span 2", |
| "[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]"); |
| col3Tester.runTest("7 / span 2", |
| "[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]"); |
| col3Tester.runTest("5 / 8", |
| "[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]"); |
| col3Tester.runTest("8 / 10", |
| "[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]"); |
| |
| col2Tester.runTest(3, |
| "[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]"); |
| col2Tester.runTest(6, |
| "[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]"); |
| col2Tester.runTest("3 / 8", |
| "[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]"); |
| col2Tester.runTest("6 / span 2", |
| "[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]"); |
| col2Tester.runTest("5 / 10", |
| "[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]"); |
| |
| </script> |
| </body> |
| </html> |
