45 lines
1.3 KiB
HTML
45 lines
1.3 KiB
HTML
<!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>
|