cobalt/layout_tests/testdata/css3-flexbox/combined-order-and-multiline.html

<!DOCTYPE html>
<!--
 | Combined tests for basic functionality of CSS Flexible Box Layout Module.
 |   https://www.w3.org/TR/css-flexbox-1
 -->
<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: 4px solid #000060;
    outline: 2px solid #00f000;
    margin: 6px;
    -no-min-width: 350px;
    -no-max-width: 100px;
  }
  .item {
    flex: 1 1 100px;
    background-color: #0047ab; /* blue */
    margin: 2px;
    order: 0;
  }
  .green {
    background-color: #007700;
  }
</style>
</head>
<body>
<div class="sized flex container" style="align-content: stretch;">
  <span class="item" style="order: 9999">0<div class="small">zz</div><div class="small green">fooA fooB fooC fooD</div></span>
  <span class="item" style="flex-grow: 0; flex-basis: auto; max-height: 5%;">1</span>
  <span class="item" style="max-height: 10px;">**2**</span>
  <span class="item" style="flex-grow: 20">3</span>
  <span class="item" style="">4</span>
  <span class="item" style="">5</span>
  <span class="item" style="order: -1">6</span>
  <span class="item" style="">7</span>
  <span class="item" style="max-width: 30%">8</span>
  <span class="item" style="">9</span>
  <span class="item" style="order:9999;">X<div class="green">fooA fooB fooC fooD fooE fooF</div>barY barZ</span>
  <span class="item" style="order:9999;">foo1 foo2 foo3 foo4 foo5 foo6 foo7 foo8 foo9 foo10 foo11 foo12</span>
</div>
</body>
</html>