grid-auto-repeat-positioned-container-001.html (1714B)
1 <!DOCTYPE html> 2 <title>CSS Grid: auto-repeat tracks on a positioned grid container.</title> 3 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/> 4 <link rel="issue" href="https://crbug.com/624301"/> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/> 6 <link rel="match" href="grid-auto-repeat-positioned-container-001-ref.html"/> 7 <meta name="assert" content="Checks that auto repeat tracks are properly computed for a positioned grid container with a definite width and height."/> 8 <link href="/css/support/grid.css" rel="stylesheet"/> 9 <style> 10 .wrapper { 11 position: relative; 12 width: 100px; 13 height: 100px; 14 } 15 16 .grid { 17 position: absolute; 18 left: 0; right: 0; top: 0; bottom: 0; 19 grid: repeat(auto-fill, 20px) / repeat(auto-fill, 25px); 20 justify-content: start; 21 align-content: start; 22 } 23 24 .item { 25 background: green; 26 } 27 </style> 28 29 <p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p> 30 31 <pre id="log"></pre> 32 33 <div class="wrapper"> 34 <div id="grid" class="grid"> 35 <div class="item" style="grid-area: 1 / 1;"></div> 36 <div class="item" style="grid-area: 2 / 2;"></div> 37 <div class="item" style="grid-area: 3 / 3;"></div> 38 <div class="item" style="grid-area: 4 / 4;"></div> 39 <div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div> 40 </div> 41 </div> 42 43 <script> 44 var log = document.getElementById("log"); 45 46 var grid = document.getElementById("grid"); 47 var computedStyle = getComputedStyle(grid); 48 49 log.innerHTML = "grid: " + computedStyle.getPropertyValue("grid-template-rows") + " / " + computedStyle.getPropertyValue("grid-template-columns") + ";"; 50 </script>