<!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>