Blitz - WPT: grid-container-sizing-constraints-001.html

wpt / css / css-grid / grid-model / grid-container-sizing-constraints-001.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	FAIL	assert_equals: data-expected-width expected 100 got 200
.grid 3	PASS
.grid 4	FAIL	assert_equals: data-expected-width expected 100 got 200
.grid 5	PASS
.grid 6	PASS
.grid 7	FAIL	assert_equals: data-expected-width expected 100 got 200
.grid 8	PASS
.grid 9	FAIL	assert_equals: data-expected-width expected 100 got 200
.grid 10	PASS
.grid 11	PASS
.grid 12	FAIL	assert_equals: data-expected-width expected 100 got 200
.grid 13	PASS
.grid 14	FAIL	assert_equals: data-expected-width expected 100 got 200
.grid 15	PASS

Enable JavaScript in test iframe

/css/css-grid/grid-model/grid-container-sizing-constraints-001.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: min|max-content sizing constraints on grid containers</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#intrinsic-sizes">
<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#sizing-values">
<meta name="assert" content="The test checks the intrinsic size of a grid container when sized under different constraints. In inline axis min|max-content have some effect, however in block axis they behave as auto.">
<style>
  .grid {
    display: grid;
    float: left;
    background: lime;
  }

  .grid-columns-minmax-50-100 {
    grid-template-columns: minmax(50px, 100px);
  }

  .grid-columns-minmax-100-200 {
    grid-template-columns: minmax(100px, 200px);
  }

  .grid-rows-minmax-50-100 {
    grid-template-rows: minmax(50px, 100px);
  }

  .min-content {
    width: min-content;
    height: min-content;
  }

  .max-content {
    width: max-content;
    height: max-content;
  }
</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 grid-columns-minmax-50-100 grid-rows-minmax-50-100"
    data-expected-width="100" data-expected-height="100"></div>

  <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
    data-expected-width="100" data-expected-height="100"></div>

  <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
    data-expected-width="100" data-expected-height="100"></div>

  <div class="min-content">
    <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
      data-expected-width="100" data-expected-height="100"></div>
  </div>

  <div class="max-content">
    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
      data-expected-width="100" data-expected-height="100"></div>
  </div>

  <div style="writing-mode: vertical-lr;">

    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
      data-expected-width="100" data-expected-height="100"></div>

    <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
      data-expected-width="100" data-expected-height="100"></div>

    <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
      data-expected-width="100" data-expected-height="100"></div>

    <div class="min-content">
      <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
        data-expected-width="100" data-expected-height="100"></div>
    </div>

    <div class="max-content">
      <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
        data-expected-width="100" data-expected-height="100"></div>
    </div>

  </div>

  <div style="writing-mode: vertical-rl;">

    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
      data-expected-width="100" data-expected-height="100"></div>

    <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
      data-expected-width="100" data-expected-height="100"></div>

    <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
      data-expected-width="100" data-expected-height="100"></div>

    <div class="min-content">
      <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
        data-expected-width="100" data-expected-height="100"></div>
    </div>

    <div class="max-content">
      <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
        data-expected-width="100" data-expected-height="100"></div>
    </div>

  </div>

</body>