Blitz - WPT: grid-fit-content-tracks-dont-stretch-001.html

wpt / css / css-grid / alignment / grid-fit-content-tracks-dont-stretch-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	PASS
.grid 3	PASS
.grid 4	PASS
.grid 5	PASS
.grid 6	PASS
.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	PASS
.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
Enable JavaScript in test iframe
/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: fit-content() tracks don't stretch</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing" title="7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-stretch" title="11.8. Stretch auto Tracks">
<meta name="flags" content="ahem dom">
<meta name="assert" content="This test checks that 'fit-content()' tracks behave the same with 'normal', 'stretch' or 'start' values for content distribution properties.">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.grid {
  display: grid;
  width: 400px;
  height: 200px;
  font: 25px/1 Ahem;
}

.constrainedGrid {
  width: 20px;
  height: 10px;
}

.fitContent200x100 {
  grid-template-columns: fit-content(200px);
  grid-template-rows: fit-content(100px);
}

.placeContentStretch {
  place-content: stretch;
}

.placeContentStart {
  place-content: start;
}
</style>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script type="text/javascript">
  setup({ explicit_done: true });
</script>

<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">

<div id="log"></div>

<h1>1) place-content: normal</h1>

<h2>1.2) Unconstrained grid container</h2>

<div class="grid" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="400" data-expected-height="200">X</div>
</div>

<div class="grid" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
</div>

<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
</div>

<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
</div>

<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
</div>

<h2>1.2) Constrained grid container</h2>

<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
</div>

<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
</div>

<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
</div>

<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
</div>

<h1>2) place-content: stretch</h1>

<h2>2.2) Unconstrained grid container</h2>

<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="400" data-expected-height="200">X</div>
</div>

<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
</div>

<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
</div>

<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
</div>

<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
</div>

<h2>2.2) Constrained grid container</h2>

<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
</div>

<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
</div>

<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
</div>

<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
</div>

<h1>3) place-content: start</h1>

<h2>3.1) Unconstrained grid container</h2>

<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="325" data-expected-height="25">XXXX XXX XX X</div>
</div>

<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
</div>

<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
</div>

<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
</div>

<h2>3.2) Constrained grid container</h2>

<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
</div>

<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="25" data-expected-height="25">X</div>
</div>

<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
</div>

<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
</div>

<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
</div>

</body>