wpt / css / css-grid / grid-definition / explicit-grid-size-001.html

Status: PASS | Duration: 2ms | Subtests: 11/11 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (11/11)

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

/css/css-grid/grid-definition/explicit-grid-size-001.html

<!DOCTYPE html>
<title>CSS Grid: grid size with explicit grid-template-areas.</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition"/>
<link rel="issue" href="https://crrev.com/603160"/>
<meta name="assert" content="Test ensures that the explicit grid size is set by the maximum of the grid-template-columns|rows properties and grid-template-areas."/>

<link href="/css/support/grid.css" rel="stylesheet"/>
<style>

.grid {
    grid-auto-columns: 10px;
    grid-auto-rows: 10px;
    position: relative;
}

.oneColumnOneRow {
    grid-template-columns: 50px;
    grid-template-rows: 50px;
}

.twoColumnsOneRow {
    grid-template-columns: 50px 50px;
    grid-template-rows: 50px;
}

.oneColumnTwoRows {
    grid-template-columns: 50px;
    grid-template-rows: 50px 50px;
}

.twoColumnsTwoRows {
    grid-template-columns: 50px 50px;
    grid-template-rows: 50px 50px;
}

.oneColumnOneRowAreas {
    grid-template-areas: "a";
}

.twoColumnsOneRowAreas {
    grid-template-areas: "a b";
}

.oneColumnTwoRowsAreas {
    grid-template-areas: "a"
                         "b";
}

.twoColumnsTwoRowsAreas {
    grid-template-areas: "a b"
                         "c d";
}

</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">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    </div>
</div>

<div class="grid oneColumnOneRow">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    </div>
</div>

<div class="grid oneColumnOneRowAreas">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    </div>
</div>

<div class="grid oneColumnTwoRows">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
    </div>
</div>

<div class="grid oneColumnTwoRowsAreas">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
    </div>
</div>

<div class="grid twoColumnsOneRow">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    </div>
</div>

<div class="grid twoColumnsOneRowAreas">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    </div>
</div>

<div class="grid twoColumnsTwoRows">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
    </div>
</div>

<div class="grid twoColumnsTwoRowsAreas">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="10" data-offset-y="10" data-expected-width="10" data-expected-height="10">
    </div>
</div>

<div class="grid oneColumnOneRow twoColumnsTwoRowsAreas">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="50" data-offset-y="0" data-expected-width="10" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="10">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">
    </div>
</div>

<div class="grid twoColumnsTwoRows oneColumnOneRowAreas">
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
    </div>
    <div class="autoRowAutoColumn"
        data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
    </div>
</div>

</body>