wpt / css / css-flexbox / flex-container-max-content-002.tentative.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
.flex 1PASS
.flex 2FAILassert_equals: data-expected-width expected 45 got 10 assert_equals: data-expected-height expected 45 got 10
.flex 3FAILassert_equals: data-expected-width expected 45 got 210 assert_equals: data-expected-height expected 45 got 210
.flex 4PASS
.flex 5FAILassert_equals: data-expected-width expected 180 got 10 assert_equals: data-expected-height expected 45 got 10 assert_equals: data-expected-width expected 85 got 35 assert_equals: data-expected-height expected 35 got 10 assert_equals: data-expected-width expected 85 got 35 assert_equals: data-expected-height expected 35 got 10
.flex 6FAILassert_equals: data-expected-width expected 180 got 210 assert_equals: data-expected-height expected 45 got 210 assert_equals: data-expected-height expected 35 got 200 assert_equals: data-expected-height expected 35 got 200
.flex 7PASS
.flex 8FAILassert_equals: data-expected-width expected 45 got 10 assert_equals: data-expected-height expected 45 got 10
.flex 9FAILassert_equals: data-expected-width expected 45 got 210 assert_equals: data-expected-height expected 45 got 210
.flex 10PASS
.flex 11FAILassert_equals: data-expected-width expected 95 got 10 assert_equals: data-expected-height expected 80 got 10 assert_equals: data-expected-width expected 85 got 10 assert_equals: data-expected-height expected 35 got 60 assert_equals: data-expected-width expected 85 got 10 assert_equals: data-expected-height expected 35 got 60
.flex 12FAILassert_equals: data-expected-width expected 95 got 210 assert_equals: data-expected-height expected 80 got 210 assert_equals: data-expected-width expected 85 got 200 assert_equals: data-expected-width expected 85 got 200
.flex 13PASS
.flex 14FAILassert_equals: data-expected-width expected 45 got 10 assert_equals: data-expected-height expected 45 got 10
.flex 15FAILassert_equals: data-expected-width expected 45 got 210 assert_equals: data-expected-height expected 45 got 210
.flex 16PASS
.flex 17FAILassert_equals: data-expected-width expected 180 got 10 assert_equals: data-expected-height expected 45 got 10 assert_equals: data-expected-width expected 85 got 35 assert_equals: data-expected-height expected 35 got 60 assert_equals: data-expected-width expected 85 got 35 assert_equals: data-expected-height expected 35 got 60
.flex 18FAILassert_equals: data-expected-width expected 180 got 210 assert_equals: data-expected-height expected 45 got 210 assert_equals: data-expected-height expected 35 got 200 assert_equals: data-expected-height expected 35 got 200
.flex 19PASS
.flex 20FAILassert_equals: data-expected-width expected 45 got 10 assert_equals: data-expected-height expected 45 got 10
.flex 21FAILassert_equals: data-expected-width expected 45 got 210 assert_equals: data-expected-height expected 45 got 210
.flex 22PASS
.flex 23FAILassert_equals: data-expected-width expected 180 got 10 assert_equals: data-expected-height expected 45 got 10 assert_equals: data-expected-width expected 85 got 35 assert_equals: data-expected-height expected 35 got 60 assert_equals: data-expected-width expected 85 got 35 assert_equals: data-expected-height expected 35 got 60
.flex 24FAILassert_equals: data-expected-width expected 95 got 210 assert_equals: data-expected-height expected 80 got 210 assert_equals: data-expected-width expected 85 got 200 assert_equals: data-expected-width expected 85 got 200

/css/css-flexbox/flex-container-max-content-002.tentative.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Flex Container Max-Content Sizes</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes"
      title="9.9.1. Flex Container Intrinsic Main Sizes">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes"
      title="9.9.2. Flex Container Intrinsic Cross Sizes">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12123">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
.flex {
  display: inline-flex;
  vertical-align: top;
  border: 5px solid magenta;
  width: max-content;
  height: max-content;
}
.flex.min {
  width: 0;
  height: 0;
  min-width: max-content;
  min-height: max-content;
}
.flex.max {
  width: 200px;
  height: 200px;
  max-width: max-content;
  max-height: max-content;
}
.flex > div {
  font: 25px/1 Ahem;
  border: 5px solid cyan;
}
</style>

<!-- Single-line row flex container -->
<div class="flex" style="flex-flow: row nowrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: row nowrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: row nowrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>

<div class="flex" style="flex-flow: row nowrap"
     data-expected-width="180" data-expected-height="45">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>
<div class="flex min" style="flex-flow: row nowrap"
     data-expected-width="180" data-expected-height="45">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>
<div class="flex max" style="flex-flow: row nowrap"
     data-expected-width="180" data-expected-height="45">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>

<hr>

<!-- Single-line column flex container -->
<div class="flex" style="flex-flow: column nowrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: column nowrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: column nowrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>

<div class="flex" style="flex-flow: column nowrap"
     data-expected-width="95" data-expected-height="80">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>
<div class="flex min" style="flex-flow: column nowrap"
     data-expected-width="95" data-expected-height="80">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>
<div class="flex max" style="flex-flow: column nowrap"
     data-expected-width="95" data-expected-height="80">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>

<hr>

<!-- Multi-line row flex container -->
<div class="flex" style="flex-flow: row wrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: row wrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: row wrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>

<div class="flex" style="flex-flow: row wrap"
     data-expected-width="180" data-expected-height="45">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>
<div class="flex min" style="flex-flow: row wrap"
     data-expected-width="180" data-expected-height="45">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>
<div class="flex max" style="flex-flow: row wrap"
     data-expected-width="180" data-expected-height="45">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>

<hr>

<!-- Multi-line column flex container -->
<div class="flex" style="flex-flow: column wrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex min" style="flex-flow: column wrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>
<div class="flex max" style="flex-flow: column wrap"
     data-expected-width="45" data-expected-height="45">
  <div style="width: 25px; height: 25px">X</div>
</div>

<div class="flex" style="flex-flow: column wrap"
     data-expected-width="95" data-expected-height="80">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>
<div class="flex min" style="flex-flow: column wrap"
     data-expected-width="180" data-expected-height="45">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>
<div class="flex max" style="flex-flow: column wrap"
     data-expected-width="95" data-expected-height="80">
  <div data-expected-width="85" data-expected-height="35">X X</div>
  <div data-expected-width="85" data-expected-height="35">X X</div>
</div>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.fonts.ready.then(() => { checkLayout(".flex") })
</script>