third_party/WebKit/LayoutTests/css3/flexbox/multiline-reverse-wrap-baseline.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     width: 200px;
   6     display: flex;
   7     background-color: #aaa;
   8     position: relative;
   9     flex-wrap: wrap-reverse;
  10     align-items: baseline;
  11     margin-bottom: 10px;
  12 }
  13 .flexbox > div {
  14     border: 0;
  15 }
  16
  17 .flexbox :nth-child(1) {
  18     background-color: lightblue;
  19 }
  20 .flexbox :nth-child(2) {
  21     background-color: lightgreen;
  22 }
  23 .flexbox :nth-child(3) {
  24     background-color: pink;
  25 }
  26 .flexbox :nth-child(4) {
  27     background-color: yellow;
  28 }
  29 </style>
  30 <body>
  31 <p>Test to make sure that wrap-reverse flips the cross axis directions and items
  32 with baseline alignment are aligned to cross axis start.</p>
  33
  34 <div class="flexbox">
  35   <div style="flex: 1 0 100px;">first<br>first<br>first</div>
  36   <div style="flex: 1 0 100px;">second</div>
  37   <div style="flex: 1 0 100px; margin-top: 5px">third</div>
  38   <div style="flex: 1 0 100px;">fourth<br>fourth</div>
  39 </div>
  40
  41 <div class="flexbox">
  42   <div style="flex: 1 0 100px;">first<br>first<br>first</div>
  43   <div style="flex: 1 0 100px;">second</div>
  44   <div style="flex: 1 0 100px;">third</div>
  45   <div style="flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div>
  46 </div>
  47
  48 <div class="flexbox" style="width: 300px;">
  49   <div style="flex: 1 0 100px; align-self: flex-start; height: 100px">first</div>
  50   <div style="flex: 1 0 100px;">second</div>
  51   <div style="flex: 1 0 100px;">third<br>third</div>
  52 </div>
  53
  54 </body>
  55 </html>