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

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     display: flex;
   6     background-color: #aaa;
   7     position: relative;
   8     flex-wrap: wrap-reverse;
   9     margin-top: 20px;
  10     align-content: flex-start;
  11 }
  12 .flexbox > div {
  13     border: 0;
  14 }
  15
  16 .flexbox :nth-child(1) {
  17     background-color: lightblue;
  18 }
  19 .flexbox :nth-child(2) {
  20     background-color: lightgreen;
  21 }
  22 .flexbox :nth-child(3) {
  23     background-color: pink;
  24 }
  25 .flexbox :nth-child(4) {
  26     background-color: yellow;
  27 }
  28 </style>
  29 <script src="../../resources/check-layout.js"></script>
  30 <body onload="checkLayout('.flexbox')">
  31 <p>Test to make sure that wrap-reverse starts at the cross start edge if
  32 sizing is not auto.</p>
  33
  34 <div data-expected-width="200" data-expected-height="35" class="flexbox" style="width: 200px; height: 35px;">
  35   <div data-offset-x="0" data-offset-y="15" style="flex: 1 100px; height: 20px"></div>
  36   <div data-offset-x="100" data-offset-y="25" style="flex: 1 100px; height: 10px"></div>
  37   <div data-offset-x="0" data-offset-y="5" style="flex: 1 100px; height: 10px"></div>
  38   <div data-offset-x="100" data-offset-y="-5" style="flex: 1 100px; height: 20px"></div>
  39 </div>
  40
  41 <div data-expected-width="200" data-expected-height="35" class="flexbox" style="width: 200px; max-height: 35px;">
  42   <div data-offset-x="0" data-offset-y="15" style="flex: 1 100px; height: 20px"></div>
  43   <div data-offset-x="100" data-offset-y="25" style="flex: 1 100px; height: 10px"></div>
  44   <div data-offset-x="0" data-offset-y="5" style="flex: 1 100px; height: 10px"></div>
  45   <div data-offset-x="100" data-offset-y="-5" style="flex: 1 100px; height: 20px"></div>
  46 </div>
  47
  48 <div data-expected-width="200" data-expected-height="50" class="flexbox" style="width: 200px; min-height: 50px;">
  49   <div data-offset-x="0" data-offset-y="30" style="flex: 1 100px; height: 20px"></div>
  50   <div data-offset-x="100" data-offset-y="40" style="flex: 1 100px; height: 10px"></div>
  51   <div data-offset-x="0" data-offset-y="20" style="flex: 1 100px; height: 10px"></div>
  52   <div data-offset-x="100" data-offset-y="10" style="flex: 1 100px; height: 20px"></div>
  53 </div>
  54
  55
  56 <div data-expected-width="35" data-expected-height="200" class="flexbox" style="flex-direction: column; height: 200px; width: 35px">
  57   <div data-offset-x="15" data-offset-y="0" style="flex: 1 100px; width: 20px"></div>
  58   <div data-offset-x="25" data-offset-y="100" style="flex: 1 100px; width: 10px"></div>
  59   <div data-offset-x="5" data-offset-y="0" style="flex: 1 100px; width: 10px"></div>
  60   <div data-offset-x="-5" data-offset-y="100" style="flex: 1 100px; width: 20px"></div>
  61 </div>
  62
  63 <div data-expected-width="35" data-expected-height="200" class="flexbox" style="flex-direction: column; height: 200px; max-width: 35px">
  64   <div data-offset-x="15" data-offset-y="0" style="flex: 1 100px; width: 20px"></div>
  65   <div data-offset-x="25" data-offset-y="100" style="flex: 1 100px; width: 10px"></div>
  66   <div data-offset-x="5" data-offset-y="0" style="flex: 1 100px; width: 10px"></div>
  67   <div data-offset-x="-5" data-offset-y="100" style="flex: 1 100px; width: 20px"></div>
  68 </div>
  69
  70 <div data-expected-width="600" data-expected-height="200" class="flexbox" style="flex-direction: column; height: 200px; min-width: 50px; max-width: 600px">
  71   <div data-offset-x="580" data-offset-y="0" style="flex: 1 100px; width: 20px"></div>
  72   <div data-offset-x="590" data-offset-y="100" style="flex: 1 100px; width: 10px"></div>
  73   <div data-offset-x="570" data-offset-y="0" style="flex: 1 100px; width: 10px"></div>
  74   <div data-offset-x="560" data-offset-y="100" style="flex: 1 100px; width: 20px"></div>
  75 </div>
  76
  77 </body>
  78 </html>