| <!doctype html> |
| <html lang=en> |
| <meta charset=utf-8> |
| <title>CSS-contain test: layout/paint containment on subgrid</title> |
| <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> |
| <meta name=assert content="layout/paint containment inhibits subgrid"> |
| <link rel="match" href="reference/contain-subgrid-001.html"> |
| <link rel=help href="https://drafts.csswg.org/css-contain/#containment-layout"> |
| <link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint"> |
| <link rel=help href="https://drafts.csswg.org/css-grid-2/"> |
| |
| <style> |
| .grid { |
| display: grid; |
| width: 40px; |
| height: 40px; |
| grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b]; |
| gap: 10px; |
| } |
| |
| .subgrid { |
| display: grid; |
| grid: subgrid; |
| background: lightgrey; |
| grid-area:1/1/3/3; |
| } |
| |
| .layout { contain: layout; } |
| .paint { contain: paint; } |
| |
| .inner { |
| background: blue; |
| grid-area:a/a/b/b; |
| } |
| .p { |
| place-self: start; |
| width:100%; |
| height:100%; |
| } |
| </style> |
| |
| <div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div> |
| <div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div> |
| <div class="grid"><div class="subgrid layout"><div class="inner p"></div></div></div> |
| <div class="grid"><div class="subgrid paint"><div class="inner p"></div></div></div> |
