grid-template-columns-computed-implicit-track.html (3335B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.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 container with a leading implicit track."> 7 <style> 8 #target { 9 display: grid; 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("none", "10px"); 36 grid_template_columns("1px", "10px 1px"); 37 grid_template_columns("1px [a]", "10px 1px [a]"); 38 grid_template_columns("1px [a] 2px", "10px 1px [a] 2px"); 39 grid_template_columns("[a] 1px", "10px [a] 1px"); 40 grid_template_columns("[a] 1px [b]", "10px [a] 1px [b]"); 41 grid_template_columns("1px repeat(1, 2px) 3px", "10px 1px 2px 3px"); 42 grid_template_columns("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px"); 43 grid_template_columns("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px"); 44 grid_template_columns("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px"); 45 grid_template_columns("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px"); 46 grid_template_columns("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px"); 47 grid_template_columns("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px"); 48 grid_template_columns("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px"); 49 grid_template_columns("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px"); 50 grid_template_columns("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); 51 grid_template_columns("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); 52 grid_template_columns("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 53 grid_template_columns("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px"); 54 grid_template_columns("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px"); 55 grid_template_columns("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px"); 56 grid_template_columns("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); 57 grid_template_columns("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]"); 58 grid_template_columns("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 59 </script>