wpt / css / css-flexbox / flex-container-min-content-002.tentative.html

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

TestTest SourceSubtests (4/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 4FAILassert_equals: data-expected-width expected 80 got 180 assert_equals: data-expected-height expected 70 got 45 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 35 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 35
.flex 5FAILassert_equals: data-expected-width expected 80 got 10 assert_equals: data-expected-height expected 70 got 10 assert_equals: data-expected-height expected 60 got 10 assert_equals: data-expected-height expected 60 got 10
.flex 6FAILassert_equals: data-expected-width expected 80 got 210 assert_equals: data-expected-height expected 70 got 210 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 200 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 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 10FAILassert_equals: data-expected-width expected 45 got 95 assert_equals: data-expected-height expected 130 got 80 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 35 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 35
.flex 11FAILassert_equals: data-expected-width expected 45 got 10 assert_equals: data-expected-height expected 130 got 10 assert_equals: data-expected-width expected 35 got 10 assert_equals: data-expected-width expected 35 got 10
.flex 12FAILassert_equals: data-expected-width expected 45 got 210 assert_equals: data-expected-height expected 130 got 210 assert_equals: data-expected-width expected 35 got 200 assert_equals: data-expected-height expected 60 got 35 assert_equals: data-expected-width expected 35 got 200 assert_equals: data-expected-height expected 60 got 35
.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 16FAILassert_equals: data-expected-width expected 45 got 180 assert_equals: data-expected-height expected 130 got 45 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 35 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 35
.flex 17FAILassert_equals: data-expected-width expected 45 got 10 assert_equals: data-expected-height expected 130 got 10
.flex 18FAILassert_equals: data-expected-width expected 45 got 210 assert_equals: data-expected-height expected 130 got 210 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 200 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 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 22FAILassert_equals: data-expected-width expected 45 got 95 assert_equals: data-expected-height expected 130 got 80 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 35 assert_equals: data-expected-width expected 35 got 85 assert_equals: data-expected-height expected 60 got 35
.flex 23FAILassert_equals: data-expected-width expected 45 got 10 assert_equals: data-expected-height expected 70 got 10
.flex 24FAILassert_equals: data-expected-width expected 45 got 210 assert_equals: data-expected-height expected 130 got 210 assert_equals: data-expected-width expected 35 got 200 assert_equals: data-expected-height expected 60 got 35 assert_equals: data-expected-width expected 35 got 200 assert_equals: data-expected-height expected 60 got 35

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

<!DOCTYPE html>
<meta charset="utf-8">
<title>Flex Container Min-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: min-content;
  height: min-content;
}
.flex.min {
  width: 0;
  height: 0;
  min-width: min-content;
  min-height: min-content;
}
.flex.max {
  width: 200px;
  height: 200px;
  max-width: min-content;
  max-height: min-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="80" data-expected-height="70">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: row nowrap"
     data-expected-width="80" data-expected-height="70">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: row nowrap"
     data-expected-width="80" data-expected-height="70">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">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="45" data-expected-height="130">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: column nowrap"
     data-expected-width="45" data-expected-height="130">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: column nowrap"
     data-expected-width="45" data-expected-height="130">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">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="45" data-expected-height="130">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: row wrap"
     data-expected-width="45" data-expected-height="130">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: row wrap"
     data-expected-width="45" data-expected-height="130">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">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="45" data-expected-height="130">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex min" style="flex-flow: column wrap"
     data-expected-width="45" data-expected-height="70">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">X X</div>
</div>
<div class="flex max" style="flex-flow: column wrap"
     data-expected-width="45" data-expected-height="130">
  <div data-expected-width="35" data-expected-height="60">X X</div>
  <div data-expected-width="35" data-expected-height="60">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>