wpt / css / css-flexbox / align-self-baseline-with-flex-wrap.html

Status: FAIL | Duration: 3ms | Subtests: 11/16 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (11/16)

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

SubtestStatusMessage
.box > span 1PASS
.box > span 2PASS
.box > span 3PASS
.box > span 4PASS
.box > span 5FAILassert_equals: data-offset-x expected 2 got 0
.box > span 6PASS
.box > span 7FAILassert_equals: data-offset-x expected 15 got 40
.box > span 8PASS
.box > span 9PASS
.box > span 10PASS
.box > span 11PASS
.box > span 12PASS
.box > span 13FAILassert_equals: data-offset-x expected 15 got 40
.box > span 14PASS
.box > span 15FAILassert_equals: data-offset-x expected 2 got 40
.box > span 16FAILassert_equals: data-offset-x expected 2 got 15

/css/css-flexbox/align-self-baseline-with-flex-wrap.html

<!DOCTYPE html>
<head>
    <link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
    <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#logical-to-physical">
    <link rel="author" href="mailto:simonwuelker@arcor.de" title="Simon Wülker">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="/resources/check-layout-th.js"></script>
    <style>
        .box {
            display: flex;
            outline: 1px solid;
            position: relative;
        }

        .row {
            width: 20px;
            height: 50px;
            flex-direction: row;

            .big {
                width: 10px;
                height: 30px;
                margin-top: 2px;
                margin-bottom: 5px;
            }
        }

        .column {
            flex-direction: column;
            width: 50px;
            height: 20px;

            .big {
                width: 30px;
                height: 10px;
                margin-left: 2px;
                margin-right: 5px;
            }
        }

        .reverse {
            flex-wrap: wrap-reverse;
        }

        .box span {
            outline: 1px solid;
            align-self: baseline;
        }

        .rtl {
            direction: rtl;
        }

        .small {
            width: 10px;
            height: 10px;
            background-color: blue;
        }

        .big {
            background-color: blueviolet;
        }

        th, td {
            border: 1px solid black;
            padding: 5px;
            text-align: center;
            vertical-align: middle;
        }
        div {
            margin-inline: auto;
        }
    </style>
</head>
<body onload="checkLayout('.box > span')">
    <table>
        <thead>
            <tr>
                <th></th>
                <th><pre>flex-direction: row</pre></th>
                <th><pre>flex-direction: row-reverse</pre></th>
                <th><pre>flex-direction: column</pre></th>
                <th><pre>flex-direction: column-reverse</pre></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th><pre>direction=ltr</pre></th>
                <td>
                    <div class="box row">
                        <span class="small" data-offset-x="0" data-offset-y="22"></span>
                        <span class="big" data-offset-x="10" data-offset-y="2"></span>
                    </div>
                </td>
                <td>
                    <div class="box row reverse">
                        <span class="small" data-offset-x="0" data-offset-y="35"></span>
                        <span class="big" data-offset-x="10" data-offset-y="15"></span>
                    </div>
                </td>
                <td>
                    <div class="box column">
                        <span class="small" data-offset-x="2" data-offset-y="0"></span>
                        <span class="big" data-offset-x="2" data-offset-y="10"></span>
                    </div>
                </td>
                <td>
                    <div class="box column reverse">
                        <span class="small" data-offset-x="15" data-offset-y="0"></span>
                        <span class="big" data-offset-x="15" data-offset-y="10"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                    <pre>direction=rtl</pre>
                </th>
                <td>
                    <div class="box rtl row">
                        <span class="small" data-offset-x="10" data-offset-y="22"></span>
                        <span class="big" data-offset-x="0" data-offset-y="2"></span>
                    </div>
                </td>
                <td>
                    <div class="box rtl row reverse">
                        <span class="small" data-offset-x="10" data-offset-y="35"></span>
                        <span class="big" data-offset-x="0" data-offset-y="15"></span>
                    </div>
                </td>
                <td>
                    <div class="box rtl column">
                        <span class="small" data-offset-x="15" data-offset-y="0"></span>
                        <span class="big" data-offset-x="15" data-offset-y="10"></span>
                    </div>
                </td>
                <td>
                    <div class="box rtl column reverse">
                        <span class="small" data-offset-x="2" data-offset-y="0"></span>
                        <span class="big" data-offset-x="2" data-offset-y="10"></span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>