| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link rel="match" href="grid-painting-item-overflow-expected.html"> |
| |
| <p>This test verifies grid layout painting when the item has overflowing contents.</p> |
| <p>This test passes if it matches the reference. You should see green and not red.</p> |
| |
| <iframe height="100px" width="200px" srcdoc=" |
| <style> |
| body { |
| background: red; |
| overflow: hidden; |
| } |
| .grid { |
| display: grid; |
| grid: 50px 50px / 100px 100px; |
| margin-left: -300px; |
| margin-top: -200px; |
| } |
| </style> |
| |
| <div class='grid'> |
| <div> |
| <div style='background: green; width: 800px; height: 600px;'></div> |
| </div> |
| </div> |
| "> |
| </iframe> |
| |
| <iframe height="100px" width="200px" srcdoc=" |
| <style> |
| body { |
| background: red; |
| overflow: hidden; |
| } |
| .grid { |
| display: grid; |
| grid: 400px 50px 50px / 500px 100px 100px; |
| margin-left: -800px; |
| margin-top: -700px; |
| } |
| </style> |
| |
| <div class='grid'> |
| <div style='grid-column: 2; grid-row: 2;'> |
| <div style='background: green; width: 800px; height: 600px;'></div> |
| </div> |
| </div> |
| "> |
| </iframe> |
