wpt / css / css-grid / layout-algorithm / grid-container-percentage-002.html

Status: FAIL | Duration: 4ms | Subtests: 8/24 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (8/24)

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

SubtestStatusMessage
.grid 1FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 2PASS
.grid 3PASS
.grid 4FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 5FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 6FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 7FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 8PASS
.grid 9PASS
.grid 10FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 11FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 12FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 13FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 14PASS
.grid 15PASS
.grid 16FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 17FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 18FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 19FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 20PASS
.grid 21PASS
.grid 22FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 23FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784
.grid 24FAILassert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784 assert_equals: data-expected-width expected 40 got 784

/css/css-grid/layout-algorithm/grid-container-percentage-002.html

<!DOCTYPE html>
<html>
<title>CSS Grid: indefinite grid container and percentage rows.</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"/>
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-length-percentage"/>
<meta name="assert" content="This test checks that percentage rows behave as 'auto' if the height of the grid container is indefinite to compute the grid container intrinsic height, but are afterwards resolved against that size."/>
<link rel="issue" href="https://crbug.com/616716"/>
<link rel="stylesheet" href="/css/support/grid.css"/>
<link rel="stylesheet" href="/css/support/height-keyword-classes.css"/>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
<style>
.wrapper {
    position: relative;
    clear: both;
}

.grid {
    font: 10px/1 Ahem;
    width: fit-content;
}

.abspos {
    position: absolute;
}

.fixedSize {
    width: 200px;
    height: 200px;
}

.oneRow100 {
    grid-template-rows: 100%;
}

.oneRow50 {
    grid-template-rows: 50%;
}

.twoRows {
    grid-template-rows: 100px 50%;
}
</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>
<div class="wrapper">
    <div class="grid oneRow100" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid fixedSize oneRow100" data-expected-width="200" data-expected-height="200">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid abspos oneRow100" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid max-content oneRow100" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid fit-content oneRow100" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid min-content oneRow100" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid oneRow50" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid fixedSize oneRow50" data-expected-width="200" data-expected-height="200">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid abspos oneRow50" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid max-content oneRow50" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid fit-content oneRow50" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid min-content oneRow50" data-expected-width="40" data-expected-height="10">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid twoRows" data-expected-width="40" data-expected-height="110">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="110">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="110">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="110">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="110">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
            XX X
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid twoRows" data-expected-width="40" data-expected-height="100">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
            XX X
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
            XX X
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="100">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
            XX X
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="100">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
            XX X
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="100">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
            XX X
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="100">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
            XX X
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
        </div>
    </div>
</div>

</body>
</html>