contain-subgrid-001.html (1307B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>CSS-contain test: layout/paint containment on subgrid</title> 5 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 6 <meta name=assert content="layout/paint containment inhibits subgrid"> 7 <link rel="match" href="reference/contain-subgrid-001.html"> 8 <link rel=help href="https://drafts.csswg.org/css-contain/#containment-layout"> 9 <link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint"> 10 <link rel=help href="https://drafts.csswg.org/css-grid-2/"> 11 12 <style> 13 .grid { 14 display: grid; 15 width: 40px; 16 height: 40px; 17 grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b]; 18 gap: 10px; 19 } 20 21 .subgrid { 22 display: grid; 23 grid: subgrid; 24 background: lightgrey; 25 grid-area:1/1/3/3; 26 } 27 28 .layout { contain: layout; } 29 .paint { contain: paint; } 30 31 .inner { 32 background: blue; 33 grid-area:a/a/b/b; 34 } 35 .p { 36 place-self: start; 37 width:100%; 38 height:100%; 39 } 40 </style> 41 42 <div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div> 43 <div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div> 44 <div class="grid"><div class="subgrid layout"><div class="inner p"></div></div></div> 45 <div class="grid"><div class="subgrid paint"><div class="inner p"></div></div></div>