flexitem.html | Explore in Territory

<!DOCTYPE html>
<html>
<link href="resources/flexbox.css" rel="stylesheet">
<style>
.flexbox {
    width: 600px;
    background-color: #aaa;
    position: relative;
    min-height: 10px;
}
.flexbox > * {
    flex: 1 0 0;
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 12px;
    min-width: 0;
}
</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" style="height:200px">
  <button data-expected-display="block" data-expected-width="100" data-expected-height="200">button</button>
  <canvas data-expected-display="block" data-expected-width="100" data-expected-height="200">canvas</canvas>
  <iframe data-expected-display="block" data-expected-width="100" data-expected-height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  <object data-expected-display="block" data-expected-width="100" data-expected-height="200">object</object>
  <select data-expected-display="block" data-expected-width="100" data-expected-height="200">
    <option>select</option>
  </select>
  <textarea data-expected-display="block" data-expected-width="100" data-expected-height="200">textarea</textarea>
</div>


<div class="flexbox">
  <input data-expected-display="block" data-expected-width="75" type="checkbox" value="radio"></input>
  <input data-expected-display="block" data-expected-width="75" type="file" value="file"></input>
  <input data-expected-display="block" data-expected-width="75" type="image" value="image"></input>
  <input data-expected-display="block" data-expected-width="75" type="password" value="password"></input>
  <input data-expected-display="block" data-expected-width="75" type="radio" value="radio"></input>
  <input data-expected-display="block" data-expected-width="75" type="reset" value="reset"></input>
  <input data-expected-display="block" data-expected-width="75" type="submit" value="submit"></input>
  <input data-expected-display="block" data-expected-width="75" type="text" value="text"></input>
</div>

<div class="flexbox">
  <img data-expected-display="block" data-expected-width="200" style="flex: 1 0 auto;" src="../../images/resources/blue-100.png">
  <img data-expected-display="block" data-expected-width="200" data-expected-height="200" style="flex: 2 0 0;" src="doesnotexist.png">
  <img data-expected-display="block" data-expected-width="200" data-expected-height="200" style="flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
</div>

<div class="flexbox">
  <svg data-expected-display="block" data-expected-bounding-client-rect-width="100" style="flex: 1 0 auto; width: 100px; height: 100px">
    <circle cx="50" cy="50" r="50" fill="blue">
    </circle>
  </svg>
  <svg data-expected-display="block" data-expected-bounding-client-rect-width="500" style="flex: 1 1 auto; height: 100px; width: 100%">
    <circle cx="50" cy="50" r="50" fill="green">
    </circle>
  </svg>
</div>

<div class="flexbox">
  <span data-expected-display="block" data-expected-width="200" style="flex: 2 0 0"></span>
  <button data-expected-display="block" data-expected-width="100" style="flex: 1 0 0">button</button>
  <span data-expected-display="block" data-expected-width="300" style="flex: 2 2 100px"></span>
</div>

<div class="flexbox" style="width: 700px">
  <div data-expected-display="block" data-expected-width="100" style="display: inline-block;"></div>
  <div data-expected-display="-webkit-box" data-expected-width="100" style="display: -webkit-inline-box;"></div>
  <div data-expected-display="flex" data-expected-width="100" style="display: inline-flex;"></div>
  <div data-expected-display="block" data-expected-width="100" style="display: table-cell"></div>
  <div data-expected-display="block" data-expected-width="100" style="display: compact"></div>
  <div data-expected-display="block" data-expected-width="100" style="display: run-in"></div>
  <div data-expected-display="block" data-expected-width="100" style="display: inline;"></div>
</div>

<div class="flexbox">
  <div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
</div>

<div class="flexbox" style="height:200px">
  <iframe data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  <iframe seamless data-expected-display="block" data-expected-height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
</div>

<div class="flexbox" style="height:100px">
  <iframe data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  <iframe seamless data-expected-display="block" data-expected-height="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
</div>

<div class="flexbox column" style="width:100px">
  <iframe data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  <iframe seamless data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
</div>

<div class="flexbox column" style="height:210px">
  <button data-expected-display="block" data-expected-width="600" data-expected-height="30">button</button>
  <canvas data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px">canvas</canvas>
  <iframe data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  <iframe seamless data-expected-display="block" data-expected-width="600" data-expected-height="30" style="height:30px" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  <object data-expected-display="block" data-expected-width="600" data-expected-height="30">object</object>
  <select data-expected-display="block" data-expected-width="600" data-expected-height="30">
    <option>select</option>
  </select>
  <textarea data-expected-display="block" data-expected-width="600" data-expected-height="30">textarea</textarea>
</div>

<!-- tests that min-height expands the height of flex items beyond the height of the flexbox -->
<div class="flexbox" style="height:50px">
    <img data-expected-height="60" style="min-height:60px" src="../../images/resources/blue-100.png">
    <img data-expected-height="60" style="min-height:60px" src="../../images/resources/green-10.png">
    <img data-expected-height="75" style="min-height:150%" src="../../images/resources/blue-100.png">
    <img data-expected-height="75" style="min-height:150%" src="../../images/resources/green-10.png">
    <img data-expected-height="50" style="min-height:-webkit-fill-available" src="../../images/resources/blue-10.png">
</div>

<!-- tests that max-height shrinks the height of flex items less than the height of the flexbox -->
<div class="flexbox" style="height:50px">
    <img data-expected-height="40" style="max-height:40px" src="../../images/resources/blue-100.png">
    <img data-expected-height="40" style="max-height:40px" src="../../images/resources/green-10.png">
    <img data-expected-height="25" style="max-height:50%" src="../../images/resources/blue-100.png">
    <img data-expected-height="25" style="max-height:50%" src="../../images/resources/green-10.png">
    <img data-expected-height="50" style="max-height:-webkit-fill-available" src="../../images/resources/blue-100.png">
</div>

<!-- tests that images can shrink below their CSS width with min-width: min-content -->
<div class="flexbox" style="width:50px">
    <img data-expected-width="50" style="flex-shrink:1;width:1000px;min-width:-webkit-min-content;" src="../../images/resources/blue-10.png">
</div>

<!-- tests that min-width expands the width of flex items beyond the width of the flexbox -->
<div class="flexbox column" style="width:50px">
    <img data-expected-width="60" style="min-width:60px" src="../../images/resources/blue-100.png">
    <img data-expected-width="60" style="min-width:60px" src="../../images/resources/green-10.png">
    <img data-expected-width="75" style="min-width:150%" src="../../images/resources/blue-100.png">
    <img data-expected-width="75" style="min-width:150%" src="../../images/resources/green-10.png">
    <img data-expected-width="100" style="min-width:-webkit-min-content" src="../../images/resources/blue-100.png">
    <img data-expected-width="50" style="min-width:-webkit-min-content" src="../../images/resources/green-10.png">
    <img data-expected-width="100" style="min-width:-webkit-max-content" src="../../images/resources/blue-100.png">
    <img data-expected-width="50" style="min-width:-webkit-max-content" src="../../images/resources/green-10.png">
    <img data-expected-width="50" style="min-width:-webkit-fill-available" src="../../images/resources/blue-100.png">
    <img data-expected-width="50" style="min-width:-webkit-fill-available" src="../../images/resources/green-10.png">
    <img data-expected-width="100" style="min-width:-webkit-fit-content" src="../../images/resources/blue-100.png">
    <img data-expected-width="50" style="min-width:-webkit-fit-content" src="../../images/resources/green-10.png">
</div>

<!-- tests that max-width shrinks the width of flex items less than the width of the flexbox -->
<div class="flexbox column" style="width:50px">
    <img data-expected-width="40" style="max-width:40px" src="../../images/resources/blue-100.png">
    <img data-expected-width="40" style="max-width:40px" src="../../images/resources/green-10.png">
    <img data-expected-width="25" style="max-width:50%" src="../../images/resources/blue-100.png">
    <img data-expected-width="25" style="max-width:50%" src="../../images/resources/green-10.png">
    <img data-expected-width="50" style="max-width:-webkit-min-content" src="../../images/resources/blue-100.png">
    <img data-expected-width="10" style="max-width:-webkit-min-content" src="../../images/resources/green-10.png">
    <img data-expected-width="50" style="max-width:-webkit-max-content" src="../../images/resources/blue-100.png">
    <img data-expected-width="10" style="max-width:-webkit-max-content" src="../../images/resources/green-10.png">
    <img data-expected-width="50" style="max-width:-webkit-fill-available" src="../../images/resources/blue-100.png">
    <img data-expected-width="50" style="max-width:-webkit-fill-available" src="../../images/resources/green-10.png">
    <img data-expected-width="50" style="max-width:-webkit-fit-content" src="../../images/resources/blue-100.png">
    <img data-expected-width="10" style="max-width:-webkit-fit-content" src="../../images/resources/green-10.png">
</div>

</html>
chromium/third_party/blink/web_tests/css3/flexbox/flexitem.html
