Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 29 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-contain/contain-size-grid-003.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on grid containers</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents but taking into account the track sizes.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.grid {
display: inline-grid;
contain: size;
position: relative;
font: 10px/1 Ahem;
}
.wrapper {
width: 300px;
height: 150px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<div class="grid" style="grid: 50px / 100px;"
data-expected-width="100" data-expected-height="50">
</div>
<div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px;"
data-expected-width="200" data-expected-height="100">
</div>
<div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content;"
data-expected-width="100" data-expected-height="50">
</div>
<div class="grid" style="grid: 50px / 100px; overflow: scroll;"
data-expected-width="115" data-expected-height="65">
</div>
<div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px; overflow: scroll;"
data-expected-width="200" data-expected-height="100">
</div>
<div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content; overflow: scroll;"
data-expected-width="115" data-expected-height="65">
</div>
<div class="grid" style="grid: 50px / 100px; margin: 2px 4px;"
data-expected-width="100" data-expected-height="50">
</div>
<div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px;"
data-expected-width="120" data-expected-height="60">
</div>
<div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px; padding: 3px 6px;"
data-expected-width="132" data-expected-height="66">
</div>
<div class="grid" style="grid: 60% / 50%;"
data-expected-width="0" data-expected-height="0">
</div>
<div class="grid" style="grid: auto / auto;"
data-expected-width="0" data-expected-height="0">
</div>
<div class="grid" style="grid: 1fr / 2fr;"
data-expected-width="0" data-expected-height="0">
</div>
<div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);"
data-expected-width="0" data-expected-height="0">
</div>
<div class="grid" style="grid: fit-content(50px) / fit-content(100px);"
data-expected-width="0" data-expected-height="0">
</div>
<div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px);"
data-expected-width="100" data-expected-height="60">
</div>
<div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px); width: min-content; height: min-content;"
data-expected-width="50" data-expected-height="60">
</div>
<div class="grid" style="grid: auto 50px 20% 1fr / 100px auto 10% 2fr;"
data-expected-width="100" data-expected-height="50">
</div>
<div class="grid" style="grid: repeat(3, 20px) / repeat(4, 25px);"
data-expected-width="100" data-expected-height="60">
</div>
<div class="grid" style="grid: repeat(3, 20px 10px) / repeat(2, 25px auto 25px);"
data-expected-width="100" data-expected-height="90">
</div>
<div class="grid" style="grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);"
data-expected-width="100" data-expected-height="50">
</div>
<div class="grid" style="grid: repeat(auto-fill, 25px 25px) / repeat(auto-fill, 50px 50px);"
data-expected-width="100" data-expected-height="50">
</div>
<div class="grid" style="grid: repeat(auto-fill, 25px 20% 25px) / repeat(auto-fill, 50px 10% 50px);"
data-expected-width="100" data-expected-height="50">
</div>
<div class="grid" style="grid: repeat(auto-fit, 50px) / repeat(auto-fit, 100px);"
data-expected-width="0" data-expected-height="0">
</div>
<div class="grid" style="grid: repeat(auto-fit, 25px 20% 25px) / repeat(auto-fit, 50px 10% 50px);"
data-expected-width="0" data-expected-height="0">
</div>
<div class="grid" style="grid: 10px repeat(auto-fill, 20px) 10px / 25px repeat(auto-fill, 50px) 25px;"
data-expected-width="100" data-expected-height="40">
</div>
<div class="grid" style="grid: 50px fit-content(20px) / 100px fit-content(50px);"
data-expected-width="100" data-expected-height="50">
</div>
<div class="grid" style="grid: 50px / 100px; grid-gap: 10px 20px;"
data-expected-width="100" data-expected-height="50">
</div>
<div class="grid" style="grid: 25px 25px / 50px 50px; grid-gap: 10px 20px;"
data-expected-width="120" data-expected-height="60">
</div>
<div class="grid" style="grid: 10px repeat(2, 10px) / 20px repeat(4, 20px); grid-gap: 5px 10px;"
data-expected-width="140" data-expected-height="40">
</div>
<div class="grid" style="grid: repeat(auto-fill, 10px 20% 10px) / repeat(auto-fill, 20px 10% 20px); grid-gap: 5px 10px;"
data-expected-width="60" data-expected-height="30">
</div>
<div class="grid" style="grid: 50px repeat(auto-fill, 10px 10px) / 100px repeat(auto-fill, 20px 20px); grid-gap: 5px 10px;"
data-expected-width="160" data-expected-height="80">
</div>
<div class="grid" style="grid: repeat(auto-fill, 10px 10px) 50px / repeat(auto-fill, 20px 20px) 100px; grid-gap: 5px 10px;"
data-expected-width="160" data-expected-height="80">
</div>
<div class="grid" style="grid: 25px repeat(auto-fill, 10px 10px) 25px / 50px repeat(auto-fill, 20px 20px) 50px; grid-gap: 5px 10px;"
data-expected-width="170" data-expected-height="85">
</div>
<div class="grid" style="grid: 25px repeat(auto-fit, 10px 10px) 25px / 50px repeat(auto-fit, 20px 20px) 50px; grid-gap: 5px 10px;"
data-expected-width="110" data-expected-height="55">
</div>
<div class="wrapper">
<div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"
data-expected-width="100" data-expected-height="75">
</div>
</div>
<div class="wrapper">
<div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"
data-expected-width="0" data-expected-height="0">
</div>
</div>
<div class="wrapper">
<div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"
data-expected-width="100" data-expected-height="75">
<div></div>
</div>
</div>
<div class="wrapper">
<div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"
data-expected-width="0" data-expected-height="0">
<div></div>
</div>
</div>
<div class="grid" style="grid: auto 50px / 100px auto;"
data-expected-width="100" data-expected-height="50">
<div data-expected-width="100" data-expected-height="10"
data-offset-x="0" data-offset-y="0">X</div>
<div data-expected-width="40" data-expected-height="10"
data-offset-x="100" data-offset-y="0">XX</div>
<div data-expected-width="100" data-expected-height="50"
data-offset-x="0" data-offset-y="10">XXX</div>
<div data-expected-width="40" data-expected-height="50"
data-offset-x="100" data-offset-y="10">XXXX</div>
</div>
</body>