grid-template-columns-intrinsic-auto-repeat-computed-implicit-track.tentative.html (2598B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Lanes Layout Test: getComputedStyle().gridTemplateColumns</title> 4 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing"> 6 <meta name="assert" content="Checks the resolved value of grid-template-columns on a grid-lanes container with a leading implicit track."> 7 <style> 8 #target { 9 display: grid-lanes; 10 width: 1px; 11 font-size: 1px; 12 } 13 #item { 14 grid-column: auto / 1; 15 width: 10px; 16 } 17 </style> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <div id="target"> 21 <div id="item"></div> 22 </div> 23 <script> 24 // Can't use the test_computed_value from computed-testcommon.js 25 // because grid-template-columns doesn't round-trip in this test. 26 function grid_template_columns(specified, computed) { 27 test(() => { 28 const target = document.getElementById('target'); 29 target.style.gridTemplateColumns = ''; 30 target.style.gridTemplateColumns = specified; 31 assert_equals(getComputedStyle(target).gridTemplateColumns, computed); 32 }, `Property grid-template-columns value '${specified}' computes to '${computed}'`); 33 } 34 35 grid_template_columns("1px repeat(auto-fill, auto) 3px", "10px 1px 0px 3px"); 36 grid_template_columns("1px repeat(auto-fit, auto) 3px", "10px 1px 0px 3px"); 37 grid_template_columns("1px [a] repeat(auto-fill, min-content max-content) [b] 4px", "10px 1px [a] 0px 0px [b] 4px"); 38 grid_template_columns("1px [a] repeat(auto-fit, min-content max-content) [b] 4px", "10px 1px [a] 0px 0px [b] 4px"); 39 grid_template_columns("1px [a] repeat(auto-fill, [b] fit-content(200px) [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px"); 40 grid_template_columns("1px [a] repeat(auto-fit, [b] fit-content(200px) [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px"); 41 grid_template_columns("[a] 1px repeat(auto-fill, auto [b] auto) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 42 grid_template_columns("[a] 1px repeat(auto-fit, auto [b] auto) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 43 grid_template_columns("100% [a] repeat(auto-fill, [b] min-content [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px"); 44 grid_template_columns("100% [a] repeat(auto-fit, [b] min-content [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px"); 45 grid_template_columns("[a] 1em repeat(auto-fill, max-content [b] auto) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 46 grid_template_columns("[a] 1em repeat(auto-fit, max-content [b] auto) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 47 </script>