third_party/WebKit/LayoutTests/css3/flexbox/flex-order-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0;
   6 }
   7 .horizontal-box {
   8     display: flex;
   9 }
  10 .horizontal-box div {
  11     height: 30px;
  12     border: 0;
  13     margin-bottom: 10px;
  14     flex: 1;
  15 }
  16
  17 .first {
  18     background-color: #0f0;
  19 }
  20 .second {
  21     background-color: #0d0;
  22 }
  23 .third {
  24     background-color: #090;
  25 }
  26 .fourth {
  27     background-color: #060;
  28 }
  29 .fifth {
  30     background-color: #030;
  31 }
  32 </style>
  33 <body>
  34
  35 <div class="horizontal-box">
  36   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  37 </div>
  38
  39 <div class="horizontal-box">
  40   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  41 </div>
  42
  43 <div class="horizontal-box">
  44   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  45 </div>
  46
  47 <div class="horizontal-box">
  48   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  49 </div>
  50
  51 <div class="horizontal-box">
  52   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  53 </div>
  54
  55 <div class="horizontal-box">
  56   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  57 </div>
  58
  59 <div class="horizontal-box">
  60   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  61 </div>
  62
  63 <div class="horizontal-box">
  64   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  65 </div>
  66
  67 <div class="horizontal-box">
  68   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  69 </div>
  70
  71 <div class="horizontal-box">
  72   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  73 </div>
  74
  75 <div class="horizontal-box">
  76   <div class="first"></div><div class="second"></div><div class="third"></div><div class="fourth"></div>
  77 </div>
  78
  79
  80
  81 <div style="position:absolute; left: -10000px;">You should see identical green bars going from light green
  82 (left) to dark green (right).</div>
  83
  84 </body>
  85 </html>