grid-template-rows-intrinsic-auto-repeat-computed-implicit-track.tentative.html (2569B)
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-rows on a grid-lanes container with a leading implicit track."> 7 <style> 8 #target { 9 display: grid-lanes; 10 grid-lanes-direction: row; 11 height: 1px; 12 font-size: 1px; 13 } 14 #item { 15 grid-row: auto / 1; 16 height: 10px; 17 } 18 </style> 19 <script src="/resources/testharness.js"></script> 20 <script src="/resources/testharnessreport.js"></script> 21 <div id="target"> 22 <div id="item"></div> 23 </div> 24 <script> 25 // Can't use the test_computed_value from computed-testcommon.js 26 // because grid-template-rows doesn't round-trip in this test. 27 function grid_template_rows(specified, computed) { 28 test(() => { 29 const target = document.getElementById('target'); 30 target.style.gridTemplateRows = ''; 31 target.style.gridTemplateRows = specified; 32 assert_equals(getComputedStyle(target).gridTemplateRows, computed); 33 }, `Property grid-template-rows value '${specified}' computes to '${computed}'`); 34 } 35 36 grid_template_rows("1px repeat(auto-fill, auto) 3px", "10px 1px 0px 3px"); 37 grid_template_rows("1px repeat(auto-fit, auto) 3px", "10px 1px 0px 3px"); 38 grid_template_rows("1px [a] repeat(auto-fill, min-content max-content) [b] 4px", "10px 1px [a] 0px 0px [b] 4px"); 39 grid_template_rows("1px [a] repeat(auto-fit, min-content max-content) [b] 4px", "10px 1px [a] 0px 0px [b] 4px"); 40 grid_template_rows("1px [a] repeat(auto-fill, [b] fit-content(200px) [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px"); 41 grid_template_rows("1px [a] repeat(auto-fit, [b] fit-content(200px) [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px"); 42 grid_template_rows("[a] 1px repeat(auto-fill, auto [b] auto) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 43 grid_template_rows("[a] 1px repeat(auto-fit, auto [b] auto) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 44 grid_template_rows("100% [a] repeat(auto-fill, [b] min-content [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px"); 45 grid_template_rows("100% [a] repeat(auto-fit, [b] min-content [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px"); 46 grid_template_rows("[a] 1em repeat(auto-fill, max-content [b] auto) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 47 grid_template_rows("[a] 1em repeat(auto-fit, max-content [b] auto) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]"); 48 </script>