flex-basis-intrinsics-001.html | Explore in Territory

<!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="[email protected]">
<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>
chromium/third_party/blink/web_tests/external/wpt/css/css-flexbox/flex-basis-intrinsics-001.html
