flex-algorithm-min-max.html | Explore in Territory

<!DOCTYPE html>
<html>
<link href="resources/flexbox.css" rel="stylesheet">
<style>
body {
    margin: 0;
}
.flexbox {
    width: 600px;
    background-color: #aaa;
    position: relative;
}
.flexbox div {
    height: 20px;
    border: 0;
}

.flexbox :nth-child(1) {
    background-color: blue;
}
.flexbox :nth-child(2) {
    background-color: green;
}
.flexbox :nth-child(3) {
    background-color: red;
}

.flex1 {
    flex: 1;
}
.flex2 {
    flex: 2;
}
.flex3 {
    flex: 3;
}
.flex1-0-0 {
    flex: 1 0 0px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>
<div class="flexbox">
  <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></div>
  <div data-expected-width="250" class="flex1-0-0"></div>
  <div data-expected-width="250" class="flex1-0-0"></div>
</div>

<!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
<div class="flexbox">
  <div data-expected-width="50" class="flex1-0-0" style="max-width: 50px;"></div>
  <div data-expected-width="300" style="flex: 4 0 0; max-width: 300px;"></div>
  <div data-expected-width="250" style="flex: 1 0 0;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="100" class="flex1-0-0" style="max-width: 100px;"></div>
  <div data-expected-width="300" style="flex: 1 0 200px; max-width: 300px;"></div>
  <div data-expected-width="200" class="flex1-0-0"></div>
</div>

<!-- Test min-width. -->
<div class="flexbox">
  <div data-expected-width="350" style="flex: 1 1 400px; min-width: 350px;"></div>
  <div data-expected-width="250" style="flex: 1 1 400px;"></div>
</div>

<!-- The flex items can overflow the flexbox. -->
<div class="flexbox">
  <div data-expected-width="350" style="flex: 1 1 400px; min-width: 350px;"></div>
  <div data-expected-width="300" style="flex: 2 0 300px; max-width: 300px;"></div>
  <div data-expected-width="0" class="flex1-0-0"></div>
</div>

<div class="flexbox">
  <div data-expected-width="100" data-offset-x="0" class="flex1-0-0" style="margin: 0 auto; max-width: 100px;"></div>
  <div data-expected-width="333" data-offset-x="100" style="flex: 2 0 0;"></div>
  <div data-expected-width="167" data-offset-x="433" class="flex1-0-0"></div>
</div>

<!-- min-width and max-width take priority over the preferred size. -->
<div class="flexbox">
  <div data-expected-width="500" class="flex1-0-0" style="min-width: 300px"></div>
  <div data-expected-width="100" style="flex: 1 0 50%; max-width: 100px"></div>
</div>

<div class="flexbox" style="width: 200px">
  <div data-expected-width="150" class="flex1" style="min-width: 150px"></div>
  <div data-expected-width="50" class="flex1" style="max-width: 90px"></div>
</div>

<div class="flexbox" style="width: 200px">
  <div data-expected-width="150" class="flex1" style="min-width: 120px"></div>
  <div data-expected-width="50" class="flex1" style="max-width: 50px"></div>
</div>

<div class="flexbox" style="width: 200px">
  <div data-expected-width="100" class="flex1" style="min-width: 100px"></div>
  <div data-expected-width="100" class="flex3"></div>
</div>

<div class="flexbox" style="width: 200px">
  <div data-expected-width="150" style="flex: 1 50px; min-width: 100px"></div>
  <div data-expected-width="50" style="flex: 1 100px; max-width: 50px"></div>
</div>

<div class="flexbox">
  <div data-expected-width="80" class="flex1"></div>
  <div data-expected-width="160" class="flex2"></div>
  <div data-expected-width="360" class="flex1" style="min-width: 360px"></div>
</div>

</body>
</html>
chromium/third_party/blink/web_tests/css3/flexbox/flex-algorithm-min-max.html
