Blitz - WPT: contain-size-grid-003.html

wpt / css / css-contain / contain-size-grid-003.html

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

Subtest	Status	Message
.grid 1	PASS
.grid 2	PASS
.grid 3	PASS
.grid 4	FAIL	assert_equals: data-expected-width expected 115 got 100 assert_equals: data-expected-height expected 65 got 50
.grid 5	PASS
.grid 6	FAIL	assert_equals: data-expected-width expected 115 got 100 assert_equals: data-expected-height expected 65 got 50
.grid 7	PASS
.grid 8	PASS
.grid 9	PASS
.grid 10	PASS
.grid 11	PASS
.grid 12	PASS
.grid 13	PASS
.grid 14	PASS
.grid 15	PASS
.grid 16	FAIL	assert_equals: data-expected-width expected 50 got 100
.grid 17	PASS
.grid 18	PASS
.grid 19	PASS
.grid 20	PASS
.grid 21	PASS
.grid 22	PASS
.grid 23	PASS
.grid 24	PASS
.grid 25	PASS
.grid 26	PASS
.grid 27	PASS
.grid 28	PASS
.grid 29	PASS
.grid 30	PASS
.grid 31	PASS
.grid 32	PASS
.grid 33	PASS
.grid 34	PASS
.grid 35	PASS
.grid 36	PASS
.grid 37	PASS
.grid 38	FAIL	assert_equals: data-expected-width expected 0 got 100 assert_equals: data-expected-height expected 0 got 75
.grid 39	FAIL	assert_equals: data-expected-width expected 100 got 140 assert_equals: data-expected-height expected 50 got 60

Enable JavaScript in test iframe

/css/css-contain/contain-size-grid-003.html

<!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">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<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>