wpt / css / css-flexbox / align-content-wrap-003.html

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

TestTest SourceSubtests (26/44)

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

SubtestStatusMessage
.flexbox 1PASS
.flexbox 2PASS
.flexbox 3PASS
.flexbox 4PASS
.flexbox 5PASS
.flexbox 6PASS
.flexbox 7PASS
.flexbox 8PASS
.flexbox 9PASS
.flexbox 10PASS
.flexbox 11PASS
.flexbox 12PASS
.flexbox 13PASS
.flexbox 14PASS
.flexbox 15PASS
.flexbox 16PASS
.flexbox 17PASS
.flexbox 18PASS
.flexbox 19PASS
.flexbox 20PASS
.flexbox 21PASS
.flexbox 22PASS
.flexbox 23FAILassert_equals: data-offset-x expected 80 got 0 assert_equals: data-expected-width expected 40 got 10 assert_equals: data-offset-x expected 80 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-expected-width expected 40 got 20 assert_equals: data-offset-x expected 40 got 30 assert_equals: data-expected-width expected 40 got 20 assert_equals: data-offset-x expected 0 got 50 assert_equals: data-expected-width expected 40 got 20
.flexbox 24FAILassert_equals: data-offset-x expected 100 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-x expected 100 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected 80 got 30 assert_equals: data-offset-x expected 60 got 50
.flexbox 25FAILassert_equals: data-offset-x expected 40 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-x expected 40 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected 20 got 30 assert_equals: data-offset-x expected 0 got 50
.flexbox 26FAILassert_equals: data-offset-x expected 70 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-x expected 70 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected 50 got 30 assert_equals: data-offset-x expected 30 got 50
.flexbox 27FAILassert_equals: data-offset-x expected 100 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-x expected 100 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected 50 got 30 assert_equals: data-offset-x expected 0 got 50
.flexbox 28FAILassert_equals: data-offset-x expected 90 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-x expected 90 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected 50 got 30 assert_equals: data-offset-x expected 10 got 50
.flexbox 29FAILassert_equals: data-offset-x expected 85 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-x expected 85 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected 50 got 30 assert_equals: data-offset-x expected 15 got 50
.flexbox 30FAILassert_equals: data-offset-x expected 80 got 0 assert_equals: data-expected-width expected 40 got 10 assert_equals: data-offset-x expected 80 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-expected-width expected 40 got 20 assert_equals: data-offset-x expected 40 got 30 assert_equals: data-expected-width expected 40 got 20 assert_equals: data-offset-x expected 0 got 50 assert_equals: data-expected-width expected 40 got 20
.flexbox 31FAILassert_equals: data-offset-x expected 40 got 0 assert_equals: data-offset-y expected 0 got -15 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-x expected 40 got 10 assert_equals: data-offset-y expected 10 got -15 assert_equals: data-offset-x expected 20 got 0 assert_equals: data-offset-y expected 0 got -5 assert_equals: data-offset-y expected 0 got 15
.flexbox 32FAILassert_equals: data-offset-x expected 25 got 0 assert_equals: data-offset-y expected 0 got -7 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-x expected 25 got 10 assert_equals: data-offset-y expected 10 got -7 assert_equals: data-offset-x expected 5 got 0 assert_equals: data-offset-y expected 0 got 3 assert_equals: data-offset-x expected -15 got 0 assert_equals: data-offset-y expected 0 got 23
.flexbox 33FAILassert_equals: data-offset-x expected 10 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected -10 got 0 assert_equals: data-offset-y expected 0 got 10 assert_equals: data-offset-x expected -30 got 0 assert_equals: data-offset-y expected 0 got 30
.flexbox 34FAILassert_equals: data-offset-x expected 10 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected -10 got 0 assert_equals: data-offset-y expected 0 got 10 assert_equals: data-offset-x expected -30 got 0 assert_equals: data-offset-y expected 0 got 30
.flexbox 35FAILassert_equals: data-offset-x expected 10 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected -10 got 0 assert_equals: data-offset-y expected 0 got 10 assert_equals: data-offset-x expected -30 got 0 assert_equals: data-offset-y expected 0 got 30
.flexbox 36FAILassert_equals: data-offset-x expected 10 got 0 assert_equals: data-expected-width expected 20 got 10 assert_equals: data-offset-y expected 10 got 0 assert_equals: data-offset-x expected -10 got 0 assert_equals: data-offset-y expected 0 got 10 assert_equals: data-offset-x expected -30 got 0 assert_equals: data-offset-y expected 0 got 30
.flexbox 37PASS
.flexbox 38PASS
.flexbox 39PASS
.flexbox 40PASS
.flexbox 41FAILassert_equals: data-offset-x expected 20 got 0
.flexbox 42FAILassert_equals: data-offset-x expected 10 got 0 assert_equals: data-offset-y expected 0 got 5
.flexbox 43FAILassert_equals: data-offset-x expected 10 got 0 assert_equals: data-offset-y expected 0 got 5
.flexbox 44FAILassert_equals: data-expected-width expected 30 got 10

/css/css-flexbox/align-content-wrap-003.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
<style>
.flexbox {
    display: flex;
    background-color: #aaa;
    position: relative;
    flex-wrap: wrap;
}

.horizontal {
    width: 200px;
    height: 120px;
}
.horizontal > div {
    min-height: 20px;
}
.horizontal > :nth-child(1) {
    width: 100px;
    min-height: 10px;
}
.horizontal > :nth-child(2) {
    width: 100px;
}
.horizontal > :nth-child(3) {
    width: 200px;
}
.horizontal > :nth-child(4) {
    width: 50px;
}

.vertical-rl {
    writing-mode: vertical-rl;
    width: 120px;
    height: 20px;
}
.vertical-rl > div {
    min-width: 20px;
}
.vertical-rl > :nth-child(1) {
    height: 10px;
    min-width: 10px;
}
.vertical-rl > :nth-child(2) {
    height: 10px;
}
.vertical-rl > :nth-child(3) {
    height: 20px;
}
.vertical-rl > :nth-child(4) {
    height: 5px;
}

.flexbox :nth-child(1) {
    background-color: lightblue;
}
.flexbox :nth-child(2) {
    background-color: lightgreen;
}
.flexbox :nth-child(3) {
    background-color: pink;
}
.flexbox :nth-child(4) {
    background-color: yellow;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>
<p>Test to make sure that align-content works properly.</p>

<div data-expected-height="120" class="flexbox horizontal">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
  <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
  <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
  <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
</div>

<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-start">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
</div>

<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-end">
  <div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
</div>

<div data-expected-height="120" class="flexbox horizontal" style="align-content: center">
  <div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div>
</div>

<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
</div>

<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly">
  <div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div>
</div>

<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around">
  <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div>
</div>

<div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
  <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
  <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
  <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
</div>

<!-- Negative overflow goes out the top. -->
<div data-expected-height="30" class="flexbox horizontal" style="align-content: flex-end; height: 30px">
  <div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
</div>

<!-- If we overflow, we should true center. -->
<div data-expected-height="30" class="flexbox horizontal" style="align-content: center; height: 30px">
  <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
</div>

<!-- If we overflow, we should be the same as flex-start. -->
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
</div>

<!-- If we overflow, we should safe center. -->
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
</div>

<!-- If we overflow, we should true center. -->
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
</div>

<!-- Stretch should only grow, not shrink. -->
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
</div>

<!-- 0 lines should not crash. -->
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
</div>
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
</div>
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
</div>
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
</div>

<!-- 1 line should not crash. -->
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div>
</div>
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
  <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
</div>
<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
  <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
</div>
<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
  <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
</div>


<div data-expected-width="120" class="flexbox vertical-rl">
  <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
  <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
  <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
  <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
</div>

<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-start">
  <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div>
</div>

<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-end">
  <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
</div>

<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: center">
  <div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div>
</div>

<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-between">
  <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
</div>

<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around">
  <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
</div>

<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly">
  <div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div>
</div>

<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch">
  <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
  <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
  <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
  <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
</div>

<!-- Negative overflow goes out the right. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;">
  <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
</div>

<!-- If we overflow, we should true center. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: center; width: 30px;">
  <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
</div>

<!-- If we overflow, we should be the same as flex-start. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px;">
  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
</div>

<!-- If we overflow, we should safe center. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;">
  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
</div>

<!-- If we overflow, we should true center. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;">
  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
</div>

<!-- Stretch should only grow, not shrink. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;">
  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
</div>

<!-- 0 lines should not crash. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
</div>
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
</div>
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
</div>
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
</div>

<!-- 1 line should not crash. -->
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
  <div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div>
</div>
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
  <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
</div>
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
  <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
</div>
<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
  <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
</div>