wpt / css / css-flexbox / flex-basis-intrinsics-001.html

Status: FAIL | Duration: 1ms | Subtests: 6/12 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (6/12)

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

SubtestStatusMessage
.flex-item 1FAILassert_equals: data-expected-width expected 50 got 100
.flex-item 2FAILassert_equals: data-expected-width expected 100 got 300
.flex-item 3FAILassert_equals: data-expected-width expected 75 got 100
.flex-item 4PASS
.flex-item 5PASS
.flex-item 6PASS
.flex-item 7PASS
.flex-item 8FAILassert_equals: data-expected-width expected 100 got 300
.flex-item 9PASS
.flex-item 10FAILassert_equals: data-expected-height expected 50 got 100
.flex-item 11PASS
.flex-item 12FAILassert_equals: data-expected-height expected 75 got 100

/css/css-flexbox/flex-basis-intrinsics-001.html

<!DOCTYPE html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='/resources/check-layout-th.js'></script>
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">
<meta name="assert" content="flex-basis:min/max/fit-content works in row and column flexboxes when the items have either parallel or orthogonal writing modes" />

<style>
.inline-block {
  float: left;
  height: 50px;
  width: 50px;
  background: blue;
}

.flexbox {
  display: flex;
  width: 75px;
  height: 75px;
  margin-bottom: 50px;
}

.flex-item {
  flex-shrink: 0;
  min-width: 0px;
  min-height: 0px;
  background: green;
}

.ortho-item {
  writing-mode: vertical-rl;
}

</style>

<div id=log></div>

<div class=flexbox>
  <div class=flex-item style="flex-basis: min-content;" data-expected-width=50>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox>
  <div class=flex-item style="flex-basis: max-content; width: 300px;" data-expected-width=100>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox>
  <div class=flex-item style="flex-basis: fit-content;" data-expected-width=75>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox style="flex-flow: column;">
  <div class=flex-item style="flex-basis: min-content;" data-expected-height=100>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox style="flex-flow: column;">
  <div class=flex-item style="flex-basis: max-content;" data-expected-height=100>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox style="flex-flow: column;">
  <div class=flex-item style="flex-basis: fit-content;" data-expected-height=100>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox>
  <div class="flex-item ortho-item" style="flex-basis: min-content;" data-expected-width=100>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox>
  <div class="flex-item ortho-item" style="flex-basis: max-content; width: 300px;" data-expected-width=100>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox>
  <div class="flex-item ortho-item" style="flex-basis: fit-content;" data-expected-width=100>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox style="flex-flow: column;">
  <div class="flex-item ortho-item" style="flex-basis: min-content;" data-expected-height=50>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox style="flex-flow: column;">
  <div class="flex-item ortho-item" style="flex-basis: max-content;" data-expected-height=100>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<div class=flexbox style="flex-flow: column;">
  <div class="flex-item ortho-item" style="flex-basis: fit-content;" data-expected-height=75>
    <div class=inline-block></div><div class=inline-block></div>
  </div>
</div>

<script>
checkLayout('.flex-item');
</script>