| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <link rel="match" href="grid-paint-positioned-children-expected.html"> |
| 4 <style> |
| 5 .grid { |
| 6 border: 2px solid black; |
| 7 position: relative; |
| 8 width: 100px; |
| 9 |
| 10 grid-template-columns: 10px 20px 30px 40px; |
| 11 |
| 12 padding-top: 10px; |
| 13 } |
| 14 |
| 15 .abs { |
| 16 height: 5px; |
| 17 position: absolute; |
| 18 width: 100%; |
| 19 } |
| 20 |
| 21 #item { |
| 22 width: 90px; |
| 23 height: 30px; |
| 24 } |
| 25 |
| 26 </style> |
| 27 |
| 28 <p>This test passes if you see a gray box with a black border color with 5 recta
ngles inside. The first line contains a purple, orange, yellow and magenta boxes
. Bellow them you should see a 90px cyan box.</p> |
| 29 |
| 30 <div class="grid"> |
| 31 <div id="item" style="grid-column: 1 / -1; background: cyan;"></div> |
| 32 <div class="abs" style="grid-column: 1 / 2; background: purple;"></div> |
| 33 <div class="abs" style="grid-column: 2 / 3; background: orange;"></div> |
| 34 <div class="abs" style="grid-column: 3 / 4; background: yellow;"></div> |
| 35 <div class="abs" style="grid-column: 4 / 5; background: magenta;"></div> |
| 36 </div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2582363002:
[css-grid] Fix positioning of positioned grid children (Closed)
