css3/flexbox/flexitem.html

<!DOCTYPE html>
<html>
<style>
.flexbox {
    width: 600px;
    display: -webkit-flex;
    background-color: #aaa;
    position: relative;
    min-height: 10px;
}
.flexbox > * {
    -webkit-flex: 1 0 0;
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 12px;
    min-width: 0;
}
.column {
    -webkit-flex-direction: column;
}
</style>
<script>
if (window.testRunner)
    testRunner.dumpAsText();
</script>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">
<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="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
  <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png">
  <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
</div>

<div class="flexbox">
  <svg data-expected-display="block" data-expected-width="100" style="-webkit-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-width="500" style="-webkit-flex: 1 1 auto; height: 100px">
    <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="-webkit-flex: 2 0 0"></span>
  <button data-expected-display="block" data-expected-width="100" style="-webkit-flex: 1 0 0">button</button>
  <span data-expected-display="block" data-expected-width="300" style="-webkit-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="-webkit-flex" data-expected-width="100" style="display: -webkit-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">
  <!-- FIXME: This table should flex. -->
  <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="100px" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  <iframe seamless data-expected-display="block" data-expected-width="100px" 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">
    <!-- TODO: test min-content, max-content, fill-available, fit-content when these are implemented for height -->
</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">
    <!-- TODO: test min-content, max-content, fill-available, fit-content when these are implemented for height -->
</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>