wpt / css / css-sizing / keyword-sizes-on-flex-item-002.html

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

TestTest SourceSubtests (21/74)

Data from commit:
1efe22d Fix duplicate table cell padding with float layout (#675) (2026-08-10)

SubtestStatusMessage
.test 1FAILassert_equals: data-expected-width expected 30 got 90
.test 2FAILassert_equals: data-expected-width expected 70 got 90
.test 3FAILassert_equals: data-expected-width expected 70 got 90
.test 4FAILassert_equals: data-expected-width expected 70 got 90
.test 5PASS
.test 6FAILassert_equals: data-expected-width expected 150 got 90
.test 7FAILassert_equals: data-expected-width expected 110 got 90
.test 8FAILassert_equals: data-expected-width expected 110 got 90
.test 9FAILassert_equals: data-expected-width expected 230 got 90
.test 10FAILassert_equals: data-expected-width expected 30 got 10
.test 11FAILassert_equals: data-expected-width expected 70 got 10
.test 12FAILassert_equals: data-expected-width expected 70 got 10
.test 13FAILassert_equals: data-expected-width expected 70 got 10
.test 14FAILassert_equals: data-expected-width expected 90 got 10
.test 15FAILassert_equals: data-expected-width expected 150 got 10
.test 16FAILassert_equals: data-expected-width expected 110 got 10
.test 17FAILassert_equals: data-expected-width expected 110 got 10
.test 18FAILassert_equals: data-expected-width expected 230 got 10
.test 19FAILassert_equals: data-expected-width expected 30 got 510
.test 20FAILassert_equals: data-expected-width expected 70 got 510
.test 21FAILassert_equals: data-expected-width expected 70 got 510
.test 22FAILassert_equals: data-expected-width expected 70 got 510
.test 23FAILassert_equals: data-expected-width expected 90 got 510
.test 24FAILassert_equals: data-expected-width expected 150 got 510
.test 25FAILassert_equals: data-expected-width expected 110 got 510
.test 26FAILassert_equals: data-expected-width expected 110 got 510
.test 27FAILassert_equals: data-expected-width expected 230 got 510
.test 28PASS
.test 29PASS
.test 30PASS
.test 31FAILassert_equals: data-expected-height expected 30 got 10
.test 32FAILassert_equals: data-expected-height expected 30 got 10
.test 33FAILassert_equals: data-expected-height expected 30 got 10
.test 34FAILassert_equals: data-expected-height expected 30 got 510
.test 35FAILassert_equals: data-expected-height expected 30 got 510
.test 36FAILassert_equals: data-expected-height expected 30 got 510
.test 37PASS
.test 38PASS
.test 39PASS
.test 40FAILassert_equals: data-expected-width expected 90 got 10
.test 41FAILassert_equals: data-expected-width expected 90 got 10
.test 42FAILassert_equals: data-expected-width expected 90 got 10
.test 43FAILassert_equals: data-expected-width expected 90 got 510
.test 44FAILassert_equals: data-expected-width expected 90 got 510
.test 45FAILassert_equals: data-expected-width expected 90 got 510
.test 46FAILassert_equals: data-expected-height expected 90 got 30
.test 47FAILassert_equals: data-expected-height expected 90 got 50
.test 48FAILassert_equals: data-expected-height expected 90 got 50
.test 49FAILassert_equals: data-expected-height expected 90 got 10
.test 50FAILassert_equals: data-expected-height expected 90 got 10
.test 51FAILassert_equals: data-expected-height expected 90 got 10
.test 52FAILassert_equals: data-expected-height expected 90 got 510
.test 53FAILassert_equals: data-expected-height expected 90 got 510
.test 54FAILassert_equals: data-expected-height expected 90 got 510
.test 55PASS
.test 56PASS
.test 57PASS
.test 58PASS
.test 59PASS
.test 60PASS
.test 61PASS
.test 62PASS
.test 63PASS
.test 64PASS
.test 65PASS
.test 66PASS
.test 67PASS
.test 68PASS
.test 69FAILassert_equals: data-expected-height expected 30 got 10
.test 70FAILassert_equals: data-expected-height expected 50 got 10
.test 71FAILassert_equals: data-expected-height expected 50 got 10
.test 72FAILassert_equals: data-expected-height expected 30 got 510
.test 73FAILassert_equals: data-expected-height expected 50 got 510
.test 74FAILassert_equals: data-expected-height expected 50 got 510

/css/css-sizing/keyword-sizes-on-flex-item-002.html

<!DOCTYPE html>
<title>Keyword sizes on flex item: column container</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-values">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values">
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11006">
<meta assert="The various keyword sizes work as expected on flex items.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>
.wrapper {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  margin-right: 150px;
}
.test {
  flex: none;
  margin: 5px;
  border: 3px solid;
  padding: 2px;
  font: 20px/1 Ahem;
}

/* Set the preferred size to small amount, to test that the min size works */
.test.min-width  { width:  0px }
.test.min-height { height: 0px }

/* Set the preferred size to big amount, to test that the max size works */
.test.max-width  { width:  500px }
.test.max-height { height: 500px }

/* stretch isn't widely supported, fall back to vendor-prefixed alternatives */
.width.stretch      {      width: -moz-available;      width: -webkit-fill-available;      width: stretch }
.min-width.stretch  {  min-width: -moz-available;  min-width: -webkit-fill-available;  min-width: stretch }
.max-width.stretch  {  max-width: -moz-available;  max-width: -webkit-fill-available;  max-width: stretch }
.height.stretch     {     height: -moz-available;     height: -webkit-fill-available;     height: stretch }
.min-height.stretch { min-height: -moz-available; min-height: -webkit-fill-available; min-height: stretch }
.max-height.stretch { max-height: -moz-available; max-height: -webkit-fill-available; max-height: stretch }
</style>
<div id="log"></div>

<!-- Intrinsic keywords -->
<div class="wrapper" style="width: 100px; height: 100px">
  <div class="test width" style="width: min-content" data-expected-width="30">X X</div>
  <div class="test width" style="width: fit-content" data-expected-width="70">X X</div>
  <div class="test width" style="width: max-content" data-expected-width="70">X X</div>

  <div class="test width" style="width: min-content" data-expected-width="70">XXX XXX</div>
  <div class="test width" style="width: fit-content" data-expected-width="90">XXX XXX</div>
  <div class="test width" style="width: max-content" data-expected-width="150">XXX XXX</div>

  <div class="test width" style="width: min-content" data-expected-width="110">XXXXX XXXXX</div>
  <div class="test width" style="width: fit-content" data-expected-width="110">XXXXX XXXXX</div>
  <div class="test width" style="width: max-content" data-expected-width="230">XXXXX XXXXX</div>

  <br>

  <div class="test min-width" style="min-width: min-content" data-expected-width="30">X X</div>
  <div class="test min-width" style="min-width: fit-content" data-expected-width="70">X X</div>
  <div class="test min-width" style="min-width: max-content" data-expected-width="70">X X</div>

  <div class="test min-width" style="min-width: min-content" data-expected-width="70">XXX XXX</div>
  <div class="test min-width" style="min-width: fit-content" data-expected-width="90">XXX XXX</div>
  <div class="test min-width" style="min-width: max-content" data-expected-width="150">XXX XXX</div>

  <div class="test min-width" style="min-width: min-content" data-expected-width="110">XXXXX XXXXX</div>
  <div class="test min-width" style="min-width: fit-content" data-expected-width="110">XXXXX XXXXX</div>
  <div class="test min-width" style="min-width: max-content" data-expected-width="230">XXXXX XXXXX</div>

  <br>

  <div class="test max-width" style="max-width: min-content" data-expected-width="30">X X</div>
  <div class="test max-width" style="max-width: fit-content" data-expected-width="70">X X</div>
  <div class="test max-width" style="max-width: max-content" data-expected-width="70">X X</div>

  <div class="test max-width" style="max-width: min-content" data-expected-width="70">XXX XXX</div>
  <div class="test max-width" style="max-width: fit-content" data-expected-width="90">XXX XXX</div>
  <div class="test max-width" style="max-width: max-content" data-expected-width="150">XXX XXX</div>

  <div class="test max-width" style="max-width: min-content" data-expected-width="110">XXXXX XXXXX</div>
  <div class="test max-width" style="max-width: fit-content" data-expected-width="110">XXXXX XXXXX</div>
  <div class="test max-width" style="max-width: max-content" data-expected-width="230">XXXXX XXXXX</div>

  <br>

  <div class="test height" style="height: min-content" data-expected-height="30">X X</div>
  <div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
  <div class="test height" style="height: max-content" data-expected-height="30">X X</div>

  <div class="test min-height" style="min-height: min-content" data-expected-height="30">X X</div>
  <div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
  <div class="test min-height" style="min-height: max-content" data-expected-height="30">X X</div>

  <div class="test max-height" style="max-height: min-content" data-expected-height="30">X X</div>
  <div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
  <div class="test max-height" style="max-height: max-content" data-expected-height="30">X X</div>
</div>

<!-- Definite stretch -->
<div class="wrapper" style="width: 100px; height: 100px">
  <div class="test width stretch" data-expected-width="90">X X</div>
  <div class="test width stretch" data-expected-width="90">XXX XXX</div>
  <div class="test width stretch" data-expected-width="90">XXXXX XXXXX</div>

  <div class="test min-width stretch" data-expected-width="90">X X</div>
  <div class="test min-width stretch" data-expected-width="90">XXX XXX</div>
  <div class="test min-width stretch" data-expected-width="90">XXXXX XXXXX</div>

  <div class="test max-width stretch" data-expected-width="90">X X</div>
  <div class="test max-width stretch" data-expected-width="90">XXX XXX</div>
  <div class="test max-width stretch" data-expected-width="90">XXXXX XXXXX</div>

  <div class="test height stretch" data-expected-height="90">X X</div>
  <div class="test height stretch" data-expected-height="90">XXX XXX<</div>
  <div class="test height stretch" data-expected-height="90">XXXXX XXXXX</div>

  <div class="test min-height stretch" data-expected-height="90">X X</div>
  <div class="test min-height stretch" data-expected-height="90">XXX XXX</div>
  <div class="test min-height stretch" data-expected-height="90">XXXXX XXXXX</div>

  <div class="test max-height stretch" data-expected-height="90">X X</div>
  <div class="test max-height stretch" data-expected-height="90">XXX XXX</div>
  <div class="test max-height stretch" data-expected-height="90">XXXXX XXXXX</div>
</div>

<!-- Stretch sizes can't result in a negative content size -->
<div class="wrapper" style="width: 0px; height: 0px">
  <div class="test width min-width max-width stretch" data-expected-width="10"></div>
  <div class="test height min-height max-height stretch" data-expected-height="10"></div>
</div>

<!-- Indefinite stretch -->
<div class="wrapper" style="width: 100px; max-height: 100px">
  <div class="test height stretch" data-expected-height="30">X X</div>
  <div class="test height stretch" data-expected-height="50">XXX XXX</div>
  <div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>

  <div class="test min-height stretch" data-expected-height="10">X X</div>
  <div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
  <div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>

  <div class="test max-height stretch" data-expected-height="510">X X</div>
  <div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
  <div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
</div>

<!-- Fit-content with indefinite stretch -->
<div class="wrapper" style="width: 100px; max-height: 100px">
  <div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
  <div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
  <div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>

  <div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
  <div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
  <div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>

  <div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
  <div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
  <div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</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(".test"));
</script>