| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <style> |
| 4 |
| 5 .grid { |
| 6 width: 100px; |
| 7 grid: repeat(5, 20px) / repeat(4, 25px); |
| 8 justify-content: start; |
| 9 align-content: start; |
| 10 } |
| 11 |
| 12 .item { |
| 13 background: green; |
| 14 } |
| 15 </style> |
| 16 |
| 17 <p>This test checks that auto repeat tracks are properly computed for a position
ed grid container with a definite width and height.</p> |
| 18 |
| 19 <p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p> |
| 20 |
| 21 <pre id="log">grid: 20px 20px 20px 20px 20px / 25px 25px 25px 25px;</pre> |
| 22 |
| 23 <div class="wrapper"> |
| 24 <div id="grid" class="grid"> |
| 25 <div class="item" style="grid-area: 1 / 1;"></div> |
| 26 <div class="item" style="grid-area: 2 / 2;"></div> |
| 27 <div class="item" style="grid-area: 3 / 3;"></div> |
| 28 <div class="item" style="grid-area: 4 / 4;"></div> |
| 29 <div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div> |
| 30 </div> |
| 31 </div> |
| OLD | NEW |