wpt / css / css-grid / grid-definition / flex-content-resolution-rows-002.html

Status: PASS | Duration: 4ms | Subtests: 21/21 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (21/21)

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

SubtestStatusMessage
.grid 1PASS
.grid 2PASS
.grid 3PASS
.grid 4PASS
.grid 5PASS
.grid 6PASS
.grid 7PASS
.grid 8PASS
.grid 9PASS
.grid 10PASS
.grid 11PASS
.grid 12PASS
.grid 13PASS
.grid 14PASS
.grid 15PASS
.grid 16PASS
.grid 17PASS
.grid 18PASS
.grid 19PASS
.grid 20PASS
.grid 21PASS

/css/css-grid/grid-definition/flex-content-resolution-rows-002.html

<!DOCTYPE html>
<html>
<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and minmax sizes.</title>
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258">
<link rel="stylesheet" href="/fonts/ahem.css">
<link rel="stylesheet" href="/css/support/grid.css">
<meta name="assert" content="Test that resolving auto tracks on grid items inside containers using minmax() with grid-template-rows works properly." />

<style>
.gridMaxMaxContent {
    grid-template-columns: 50px;
    grid-template-rows: minmax(10px, max-content) minmax(10px, 1fr);
}

.gridMinMinContent {
    grid-template-columns: 50px;
    grid-template-rows: minmax(10px, 1fr) minmax(min-content, 50px);
}

.gridWithIntrinsicSizeBiggerThanFlex {
    grid-template-columns: 50px;
    grid-template-rows: minmax(min-content, 0.5fr) minmax(18px, 2fr);
}

.gridShrinkBelowItemsIntrinsicSize {
    grid-template-columns: 50px;
    grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr);
}

.gridWithNonFlexingItems {
    grid-template-columns: 50px;
    grid-template-rows: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr);
}

.thirdRowFirstColumn {
    grid-column: 1;
    grid-row: 3;
}
.fourthRowFirstColumn {
    grid-column: 1;
    grid-row: 4;
}
</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 class="constrainedContainer">
    <div class="grid gridMaxMaxContent">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    </div>
</div>

<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 10px; height: 40px">
    <div class="grid gridMaxMaxContent" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
    </div>
</div>

<div style="width: 10px; height: 40px">
    <div class="grid gridMaxMaxContent">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    </div>
</div>

<div style="width: 10px; height: 110px;">
    <div class="grid gridMaxMaxContent" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
    </div>
</div>

<div style="width: 10px; height: 110px;">
    <div class="grid gridMaxMaxContent">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
    </div>
</div>

<div class="constrainedContainer">
    <div class="grid gridMinMinContent" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
    </div>
</div>

<div class="constrainedContainer">
    <div class="grid gridMinMinContent">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
    </div>
</div>

<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 10px; height: 40px">
    <div class="grid gridMinMinContent" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
    </div>
</div>

<div class="grid gridMinMinContent" style="height: 40px">
    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
</div>

<div style="width: 10px; height: 110px;">
    <div class="grid gridMinMinContent" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
    </div>
</div>

<div style="width: 10px; height: 110px;">
    <div class="grid gridMinMinContent">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
    </div>
</div>

<div style="width: 10px; height: 60px;">
    <div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
    </div>
</div>

<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
<div style="width: 10px; height: 60px;">
    <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
    </div>
</div>

<div style="width: 10px; height: 60px;">
    <div class="grid gridShrinkBelowItemsIntrinsicSize" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    </div>
</div>

<div style="width: 10px; height: 60px;">
    <div class="grid gridShrinkBelowItemsIntrinsicSize">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
    </div>
</div>

<!-- No space available for the <flex> -->
<div style="width: 10px; height: 100px;">
    <div class="grid gridWithNonFlexingItems" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
    </div>
</div>

<div style="width: 10px; height: 100px;">
    <div class="grid gridWithNonFlexingItems">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
    </div>
</div>

<!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
<div style="width: 10px; height: 180px;">
    <div class="grid gridWithNonFlexingItems" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
    </div>
</div>

<div style="width: 10px; height: 180px;">
    <div class="grid gridWithNonFlexingItems">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
    </div>
</div>

<div style="width: 10px; height: 400px;">
    <div class="grid gridWithNonFlexingItems" style="height: 100%">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
    </div>
</div>

<div style="width: 10px; height: 400px;">
    <div class="grid gridWithNonFlexingItems">
        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
    </div>
</div>

</body>
</html>