flex-order-expected.html | Explore in Territory

<!DOCTYPE html>
<html>
<style>
body {
    margin: 0;
}
.horizontal-box {
    display: flex;
}
.horizontal-box div {
    height: 30px;
    border: 0;
    margin-bottom: 10px;
    flex: 1;
}

.first {
    background-color: #0f0;
}
.second {
    background-color: #0d0;
}
.third {
    background-color: #090;
}
.fourth {
    background-color: #060;
}
.fifth {
    background-color: #030;
}
</style>
<body>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>

<div class="horizontal-box">
  <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
</div>



<div style="position:absolute; left: -10000px;">You should see identical green bars going from light green
(left) to dark green (right).</div>

</body>
</html>
chromium/third_party/blink/web_tests/css3/flexbox/flex-order-expected.html
