| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <style> |
| 4 |
| 5 .wrapper { |
| 6 position: relative; |
| 7 width: 100px; |
| 8 height: 100px; |
| 9 } |
| 10 |
| 11 .grid { |
| 12 position: absolute; |
| 13 left: 0; right: 0; top: 0; bottom: 0; |
| 14 grid: repeat(auto-fill, 20px) / repeat(auto-fill, 25px); |
| 15 justify-content: start; |
| 16 align-content: start; |
| 17 } |
| 18 |
| 19 .item { |
| 20 background: green; |
| 21 } |
| 22 </style> |
| 23 |
| 24 <p>This test checks that auto repeat tracks are properly computed for a position
ed grid container with a definite width and height.</p> |
| 25 |
| 26 <p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p> |
| 27 |
| 28 <pre id="log"></pre> |
| 29 |
| 30 <div class="wrapper"> |
| 31 <div id="grid" class="grid"> |
| 32 <div class="item" style="grid-area: 1 / 1;"></div> |
| 33 <div class="item" style="grid-area: 2 / 2;"></div> |
| 34 <div class="item" style="grid-area: 3 / 3;"></div> |
| 35 <div class="item" style="grid-area: 4 / 4;"></div> |
| 36 <div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div> |
| 37 </div> |
| 38 </div> |
| 39 |
| 40 <script> |
| 41 var log = document.getElementById("log"); |
| 42 |
| 43 var grid = document.getElementById("grid"); |
| 44 var computedStyle = getComputedStyle(grid); |
| 45 |
| 46 log.innerHTML = "grid: " + computedStyle.getPropertyValue("grid-template-row
s") + " / " + computedStyle.getPropertyValue("grid-template-columns") + ";"; |
| 47 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2304543002:
[css-grid] Fix definite height detection for auto-repet tracks (Closed)
