Blitz - WPT: grid-item-minimum-size-single-axis-scroll-container.html

wpt / css / css-grid / grid-items / grid-item-minimum-size-single-axis-scroll-container.html

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

Subtest	Status	Message
.item 1	PASS
.item 2	FAIL	assert_equals: data-expected-width expected 100 got 0
.item 3	PASS
.item 4	FAIL	assert_equals: data-expected-height expected 100 got 0

Enable JavaScript in test iframe

/css/css-grid/grid-items/grid-item-minimum-size-single-axis-scroll-container.html

<!DOCTYPE html>
<title>CSS Grid: automatic minimum size for grid items respects single-axis scroll containers</title>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#min-size-auto">
<link rel="author" title="Free Debreuil" href="mailto:freedebreuil@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>

<style>
.grid {
  display: grid;
}
.column {
  grid-template-columns: auto auto;
  grid-template-rows: 100px;
  width: 0;
}
.row {
  grid-auto-flow: column;
  grid-template-columns: 100px;
  grid-template-rows: auto auto;
  height: 0;
}
.content {
  width: 100px;
  height: 100px;
}
.x-scroller {
  overflow-x: hidden;
  overflow-y: clip;
}
.y-scroller {
  overflow-x: clip;
  overflow-y: hidden;
}
</style>

<p>
  Within a grid container, a grid item normally has an automatic minimum size
  that is equal to its min-content size. (100px x 100px, for our example)
  However, for a grid axis, if the grid item has a scrollable overflow value in
  that axis, the automatic minimum size is set to zero for that axis.
</p>

<div class="grid column">
  <div class="item x-scroller" data-expected-width="0" data-expected-height="100">
    <div class="content"></div>
  </div>
  <div class="item y-scroller" data-expected-width="100" data-expected-height="100">
    <div class="content"></div>
  </div>
</div>

<div class="grid row">
  <div class="item y-scroller" data-expected-width="100" data-expected-height="0">
    <div class="content"></div>
  </div>
  <div class="item x-scroller" data-expected-width="100" data-expected-height="100">
    <div class="content"></div>
  </div>
</div>

<script>
checkLayout('.item');
</script>