wpt / css / css-grid / alignment / grid-baseline-004.html

Status: FAIL | Duration: 5ms | Subtests: 0/18 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (0/18)

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

SubtestStatusMessage
.grid, container 1FAILassert_equals: data-offset-y expected 20 got -1
.grid, container 2FAILassert_equals: data-offset-y expected 10 got -1
.grid, container 3FAILassert_equals: data-offset-y expected 0 got -1
.grid, container 4FAILassert_equals: data-offset-y expected 0 got -1
.grid, container 5FAILassert_equals: data-offset-y expected 0 got -1
.grid, container 6FAILassert_equals: data-offset-y expected 20 got -1
.grid, container 7FAILassert_equals: data-offset-y expected 40 got -1
.grid, container 8FAILassert_equals: data-offset-y expected 0 got -1
.grid, container 9FAILassert_equals: data-offset-y expected 55 got -1
.grid, container 10FAILassert_equals: data-offset-y expected 55 got -1
.grid, container 11FAILassert_equals: data-offset-y expected 40 got -1
.grid, container 12FAILassert_equals: data-offset-y expected 0 got -1
.grid, container 13FAILassert_equals: data-offset-y expected 140 got 89
.grid, container 14FAILassert_equals: data-offset-y expected 100 got 89
.grid, container 15FAILassert_equals: data-offset-y expected 15 got 14
.grid, container 16FAILassert_equals: data-offset-y expected 80 got 139
.grid, container 17FAILassert_equals: data-offset-y expected 55 got 89
.grid, container 18FAILassert_equals: data-offset-y expected 15 got 14

/css/css-grid/alignment/grid-baseline-004.html

<!DOCTYPE html>
<title>CSS Grid: Grid container baseline</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-order">
<link rel="help" href="https://crbug.com/234191">
<meta name="assert" content="Check that grid container must use its first item in grid-modified document order (grid order) to compute its baseline."/>

<link href="/css/support/grid.css" rel="stylesheet">
<link href="/css/support/alignment.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body { margin: 0; }
.container {
    position: relative;
    font: 10px/1 Ahem;
    border: 5px solid;
    width: 470px;
}
.grid {
    display: inline-grid;
    grid-template-columns: 50px 50px;
    width: 150px;
    background-color: transparent;
    position: relative;
}
.twoRows { grid-template-rows: 50px 50px; }
.threeRows { grid-template-rows: 50px 50px 50px; }
.empty {
    border-color: black;
    border-style: solid;
    margin: 15px 0px 30px;
    border-width: 5px 0px 10px;
    padding: 10px 0px 20px;
}
.item {
    height: 25px;
    border-color: gray;
    border-style: solid;
}
.grid.grid > * {
    background: silver;
    background: rgba(0,0,0,0.3);
}
.target.target {
    background: blue;
    border-color: navy;
}
.style1 {
    border-width: 5px 0px 10px;
    padding: 10px 0px 20px;
}
.style2 {
    border-width: 10px 0px 5px;
    padding: 20px 0px 10px;
    margin-top: 10px;
}
.style3 {
    border-width: 10px 0px 20px;
    padding: 5px 0px 10px;
    margin-top: 20px;
}

.bothRowFirstColumn, .secondRowSecondColumn {
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: pink;
}
.firstRowBothColumn, .secondRowBothColumn {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: green;
}
</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, container'); })">
<div id="log"></div>
<p>
    The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>
    Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
</p>

<p>
    This case shows 3 items located along the first row and in different columns.
    The grid baseline is computed using the one located at first column (blue item)
    regardless of source order.
</p>
<div class="container" data-expected-width="480" data-expected-height="120">
    <div class="grid" data-offset-x="0" data-offset-y="20">
        <div class="item style1 firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="item style2 firstRowSecondColumn" data-offset-x="50"  data-offset-y="10"></div>
        <div class="item style3 firstRowThirdColumn"  data-offset-x="100" data-offset-y="20"></div>
    </div>
    <div class="grid" data-offset-x="160" data-offset-y="10">
        <div class="item style1 firstRowThirdColumn"  data-offset-x="100" data-offset-y="0"></div>
        <div class="item style2 firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="10"></div>
        <div class="item style3 firstRowSecondColumn" data-offset-x="50"  data-offset-y="20"></div>
    </div>
    <div class="grid" data-offset-x="320" data-offset-y="0">
        <div class="item style1 firstRowSecondColumn" data-offset-x="50"  data-offset-y="0"></div>
        <div class="item style2 firstRowThirdColumn"  data-offset-x="100" data-offset-y="10"></div>
        <div class="item style3 firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="20"></div>
    </div>
</div>

<p>
    This case shows 3 items located along the first row and in different columns.
    The baseline-aligned item (blue) always determines the grid baseline.
</p>
<div class="container" data-expected-width="480" data-expected-height="120">
    <div class="grid" data-offset-x="0" data-offset-y="0">
        <div class="item style1 firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="item style2 firstRowSecondColumn" data-offset-x="50"  data-offset-y="10"></div>
        <div class="item style3 firstRowThirdColumn alignSelfBaseline target"  data-offset-x="100" data-offset-y="20"></div>
    </div>
    <div class="grid" data-offset-x="160" data-offset-y="0">
        <div class="item style1 firstRowThirdColumn"  data-offset-x="100" data-offset-y="0"></div>
        <div class="item style2 firstRowFirstColumn"  data-offset-x="0"   data-offset-y="10"></div>
        <div class="item style3 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50"  data-offset-y="20"></div>
    </div>
    <div class="grid" data-offset-x="320" data-offset-y="20">
        <div class="item style1 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50"  data-offset-y="0"></div>
        <div class="item style2 firstRowThirdColumn"  data-offset-x="100" data-offset-y="10"></div>
        <div class="item style3 firstRowFirstColumn"  data-offset-x="0"   data-offset-y="20"></div>
    </div>
</div>

<p>
    This case shows 3 items' areas intersecting the first row and first column,
    but none of them participate in baseline alignment in the first row,
    so the dom order must be used to determine each grid's baseline.
</p>
<div class="container" data-expected-width="480" data-expected-height="165">
    <div class="grid twoRows" data-offset-x="0" data-offset-y="40">
        <div class="firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
        <div class="bothRowFirstColumn style2" style="align-self: last baseline"  data-offset-x="0"></div>
    </div>
    <div class="grid twoRows" data-offset-x="160" data-offset-y="0">
        <div class="bothRowFirstColumn target"  data-offset-x="0" data-offset-y="10"></div>
        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
    </div>
    <div class="grid twoRows" data-offset-x="320" data-offset-y="55">
        <div class="firstRowBothColumn target" data-offset-x="0"  data-offset-y="15"></div>
        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="bothRowFirstColumn"  data-offset-x="0" data-offset-y="10"></div>
    </div>
</div>

<p>
    This case shows 3 items' areas intersecting the first row and first column,
    but one of the items participates in baseline alignment in the first row,
    so such item is used to determine the grid's baseline
    instead of using the dom order.
</p>
<div class="container" data-expected-width="480" data-expected-height="165">
    <div class="grid twoRows" data-offset-x="0" data-offset-y="55">
        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="firstRowBothColumn alignSelfBaseline target" style="width: 100px; height: 20px;"  data-offset-x="0"  data-offset-y="15"></div>
        <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
    </div>
    <div class="grid twoRows" data-offset-x="160" data-offset-y="40">
        <div class="bothRowFirstColumn style2" style="align-self: last baseline" data-offset-x="0"></div>
        <div class="firstRowFirstColumn alignSelfBaseline target" style="width: 50px; height: 50px;"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
    </div>
    <div class="grid twoRows" data-offset-x="320" data-offset-y="0">
        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="bothRowFirstColumn alignSelfBaseline target" style="width: 40px; height: 80px;"  data-offset-x="0" data-offset-y="10"></div>
    </div>
</div>

<p>
    This case shows one of the grids with no items,
    hence its baseline must be synthesized from its margin box.
</p>
<div class="container" data-expected-width="480" data-expected-height="250">
    <div class="grid twoRows" data-offset-x="0" data-offset-y="140">
        <div class="firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
        <div class="bothRowFirstColumn"  data-offset-x="0" data-offset-y="10"></div>
    </div>
    <div class="grid twoRows" data-offset-x="160" data-offset-y="100">
        <div class="bothRowFirstColumn target"  data-offset-x="0" data-offset-y="10"></div>
        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
    </div>
    <div class="grid empty twoRows target" data-offset-x="320" data-offset-y="15">
    </div>
</div>

<p>
    This case shows two of the grids with no items in their first row,
    hence the items in the second row are evaluated.
</p>
<div class="container" data-expected-width="480" data-expected-height="250">
    <div id=first class="grid twoRows" data-offset-x="0" data-offset-y="80">
        <div class="firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
        <div class="bothRowFirstColumn"  data-offset-x="0" data-offset-y="10"></div>
    </div>
    <div id=second class="grid threeRows" data-offset-x="160" data-offset-y="55">
        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="100"></div>
        <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="65"></div>
        <div class="secondRowSecondColumn style3 alignSelfBaseline target" id="first"  data-offset-x="50"   data-offset-y="60"></div>
    </div>
    <div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
        <div class="thirdRowSecondColumn"  data-offset-x="50"   data-offset-y="110"></div>
        <div class="secondRowFirstColumn target"  data-offset-x="0" data-offset-y="60"></div>
        <div class="secondRowBothColumn" data-offset-x="0"  data-offset-y="75"></div>
    </div>
</div>

</body>