cobalt/layout_tests/testdata/css3-flexbox/combined-positioning-tests.html

<!DOCTYPE html>
<!--
 | Combined tests for basic functionality of CSS Flexible Box Layout Module.
 |   https://www.w3.org/TR/css-flexbox-1
 | This test also shows some differences with Chrome due to missing
 | implementation of content-based minimum size.
 -->
<html>
<head>
<style>
  body {
    margin: 0px;
    font-family: Roboto;
    background-color: #808080;
    font-size: 12px;
  }
  .sized {
    width: 250px;
    height: 250px;
  }
  .vsized {
    height: 40px;
  }
  .small {
    width: 100px;
    min-height: 40px;
  }
  .flex {
    display:flex;
    color: #99b9f3;
    background-color: #ffee00;
    opacity: 0.75;
  }
  .inlineflex {
    display:inline-flex;
    color: #99b9f3;
    background-color: #ffee08;
    opacity: 0.75;
  }
  .container {
    overflow: hidden;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    align-content: flex-end; #space-between;
    min-width: 2px;
    padding: 2px;
    border: 2px solid #000060;
    outline: 2px solid #00f000;
    margin: 6px;
  }
  .item {
    flex: 1 1 100px;
    background-color: #0047ab; /* blue */
    margin: 2px;
    order: 0;
  }
  .blue {
    background-color: #0047ab;
  }
  .green {
    background-color: #007700;
  }
</style>
</head>
<body>

<span>
  <div style="display: inline-block; width: 300px">
    <div class="sized flex container" style="height: 10px; min-height: 120px; background-color: #404040; align-content: stretch;">
      <div style="display: inline-block; background-color: #ffffff; height: auto; align-self:stretch;">xx</div>
      <div style="display: inline-block; background-color: #ffffff; height: auto; margin-top: auto;">xx</div>
      <div style="display: inline-block; background-color: #ffffff; height: auto; margin-bottom: auto;">xx</div>
      <div style="display: inline-block; background-color: #ffffff; height: auto; margin: auto;">xx</div>
      <span class="item" style="flex: 0 1 50px;">0</span>
      <span class="item" style="flex: 0 1 50px;">1</span>
      <span class="item" style="flex: 0 1 50px;">2</span>
      <span class="item" style="flex: 0 1 50px;">3</span>
      <span class="item" style="flex: 0 1 50px;">4</span>
      <span class="item" style="flex: 0 1 50px;">5</span>
      <span class="item" style="flex: 0 1 200px;">6</span>
    </div>

    <div class="small flex container" style="height:41px;">
      <span class="blue" style="margin: 0px; flex-basis: 20%;">a</span>
    </div>
    <div class="flex container">
      <span class="blue" style="flex-basis: 10%;">AA</span>
    </div>
    <div class="flex container">
      <span class="blue" style="margin:3px;">SSS1a</span>
      <span class="blue">SSS1b</span>
    </div>
    <div class="flex container green">
      <div class="flex container">
        <span class="blue" style="margin:3px;">DDD1a</span>
        <span class="blue">DDD1b</span>
      </div>
    </div>
  </div>
</span>

<span>
  <div style="display: inline-block; width: 300px">
    <div class="flex container green">
      <div class="flex container" style="flex-basis: 75%">
        <span class="blue">DDD2</span>
      </div>
    </div>

    <div class="flex container green">
      <div class="flex container">
        <span class="blue" style="flex-basis: 6%;">DDbwa</span>
      </div>
    </div>
    <div class="flex container green">
      <div class="flex container">
        <span class="blue" style="width: 6%;">DDbwb</span>
      </div>
    </div>
    <div class="flex container">
      <span class="blue" style="flex-basis: 6%;">SSbwa</span>
    </div>
    <div class="flex container">
      <span class="blue" style="width: 6%;">SSbwb</span>
    </div>

    <div class="flex container green">
      <div class="flex container" style="width:1280px;">
        <span class="blue" style="flex-basis: 1%;">DDD3bwa</span>
      </div>
    </div>
    <div class="flex container green">
      <div class="flex container" style="width:1280px;">
        <span class="blue" style="width: 1%;">DDD3bwb</span>
      </div>
    </div>
  </div>
</span>

</body>
</html>