src/third_party/WebKit/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 .inline-flexbox {
   6     background-color: #aaa;
   7     position: relative;
   8 }
   9
  10 .writing-mode-vertical {
  11   -webkit-writing-mode: vertical-rl;
  12 }
  13 .inline-flexbox > * {
  14     flex: none;
  15 }
  16 .inline-flexbox :nth-child(1) {
  17     background-color: lightblue;
  18 }
  19 .inline-flexbox :nth-child(2) {
  20     background-color: lightgreen;
  21 }
  22 .inline-flexbox :nth-child(3) {
  23     background-color: pink;
  24 }
  25 .inline-flexbox :nth-child(4) {
  26     background-color: yellow;
  27 }
  28 </style>
  29 <script src="../../resources/check-layout.js"></script>
  30 <body onload="checkLayout('.inline-flexbox');">
  31 <div class="inline-flexbox column align-content-flex-start wrap" data-expected-width="110" data-expected-height="60">
  32   <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
  33   <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
  34   <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="30"></div>
  35   <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
  36 </div>
  37
  38 <div class="inline-flexbox column align-content-flex-start wrap" style="height: 35px" data-expected-width="80" data-expected-height="35">
  39   <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
  40   <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
  41   <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="0"></div>
  42   <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="10"></div>
  43 </div>
  44
  45 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70">
  46   <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="0"></div>
  47   <div style="width: 100px; height: 70px" data-offset-x="130" data-offset-y="0"></div>
  48   <div style="width: 30px; height: 50px" data-offset-x="100" data-offset-y="0"></div>
  49   <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="0"></div>
  50 </div>
  51
  52 <div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
  53   <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="0"></div>
  54   <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div>
  55   <div style="width: 30px; height: 50px" data-offset-x="20" data-offset-y="0"></div>
  56   <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="70"></div>
  57 </div>
  58
  59 <div class="inline-flexbox column align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60">
  60   <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="0"></div>
  61   <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="20"></div>
  62   <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="30"></div>
  63   <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
  64 </div>
  65
  66 <div class="inline-flexbox column align-content-flex-start wrap-reverse" style="height: 35px" data-expected-width="80" data-expected-height="35">
  67   <div style="width: 10px; height: 20px" data-offset-x="70" data-offset-y="0"></div>
  68   <div style="width: 50px; height: 10px" data-offset-x="30" data-offset-y="20"></div>
  69   <div style="width: 80px; height: 10px" data-offset-x="-50" data-offset-y="0"></div>
  70   <div style="width: 40px; height: 20px" data-offset-x="-10" data-offset-y="10"></div>
  71 </div>
  72
  73 <div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70">
  74   <div style="width: 50px; height: 20px" data-offset-x="230" data-offset-y="50"></div>
  75   <div style="width: 100px; height: 50px" data-offset-x="130" data-offset-y="20"></div>
  76   <div style="width: 30px; height: 30px" data-offset-x="100" data-offset-y="40"></div>
  77   <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="0"></div>
  78 </div>
  79
  80 <div class="inline-flexbox column align-content-flex-start wrap-reverse writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
  81   <div style="width: 50px; height: 20px" data-offset-x="150" data-offset-y="50"></div>
  82   <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="20"></div>
  83   <div style="width: 30px; height: 70px" data-offset-x="20" data-offset-y="0"></div>
  84   <div style="width: 100px; height: 30px" data-offset-x="100" data-offset-y="-30"></div>
  85 </div>
  86
  87 <div class="inline-flexbox column-reverse align-content-flex-start wrap" data-expected-width="110" data-expected-height="60">
  88   <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40"></div>
  89   <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="30"></div>
  90   <div style="width: 70px; height: 10px" data-offset-x="0" data-offset-y="20"></div>
  91   <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
  92 </div>
  93
  94 <div class="inline-flexbox column-reverse align-content-flex-start wrap" style="height: 35px" data-expected-width="80" data-expected-height="35">
  95   <div style="width: 10px; height: 20px" data-offset-x="0" data-offset-y="15"></div>
  96   <div style="width: 50px; height: 10px" data-offset-x="0" data-offset-y="5"></div>
  97   <div style="width: 80px; height: 10px" data-offset-x="50" data-offset-y="25"></div>
  98   <div style="width: 40px; height: 20px" data-offset-x="50" data-offset-y="5"></div>
  99 </div>
 100
 101 <div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" data-expected-width="280" data-expected-height="70">
 102   <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
 103   <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="0"></div>
 104   <div style="width: 30px; height: 70px" data-offset-x="150" data-offset-y="0"></div>
 105   <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="0"></div>
 106 </div>
 107
 108 <div class="inline-flexbox column-reverse align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
 109   <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
 110   <div style="width: 100px; height: 70px" data-offset-x="50" data-offset-y="0"></div>
 111   <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="0"></div>
 112   <div style="width: 100px; height: 30px" data-offset-x="0" data-offset-y="70"></div>
 113 </div>
 114
 115 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" data-expected-width="110" data-expected-height="60">
 116   <div style="width: 100px; height: 20px" data-offset-x="10" data-offset-y="40"></div>
 117   <div style="width: 50px; height: 10px" data-offset-x="60" data-offset-y="30"></div>
 118   <div style="width: 70px; height: 10px" data-offset-x="40" data-offset-y="20"></div>
 119   <div style="width: 110px; height: 20px" data-offset-x="0" data-offset-y="0"></div>
 120 </div>
 121
 122 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse" style="height: 35px" data-expected-width="80" data-expected-height="35">
 123   <div style="width: 10px; height: 20px" data-offset-x="70" data-offset-y="15"></div>
 124   <div style="width: 50px; height: 10px" data-offset-x="30" data-offset-y="5"></div>
 125   <div style="width: 80px; height: 10px" data-offset-x="-50" data-offset-y="25"></div>
 126   <div style="width: 40px; height: 20px" data-offset-x="-10" data-offset-y="5"></div>
 127 </div>
 128
 129 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" data-expected-width="280" data-expected-height="70">
 130   <div style="width: 50px; height: 70px" data-offset-x="0" data-offset-y="0"></div>
 131   <div style="width: 100px; height: 20px" data-offset-x="50" data-offset-y="50"></div>
 132   <div style="width: 30px; height: 50px" data-offset-x="150" data-offset-y="20"></div>
 133   <div style="width: 100px; height: 30px" data-offset-x="180" data-offset-y="40"></div>
 134 </div>
 135
 136 <div class="inline-flexbox column-reverse align-content-flex-start wrap-reverse writing-mode-vertical" style="width: 200px" data-expected-width="200" data-expected-height="70">
 137   <div style="width: 50px; height: 20px" data-offset-x="0" data-offset-y="50"></div>
 138   <div style="width: 100px; height: 50px" data-offset-x="50" data-offset-y="20"></div>
 139   <div style="width: 30px; height: 30px" data-offset-x="150" data-offset-y="40"></div>
 140   <div style="width: 100px; height: 70px" data-offset-x="0" data-offset-y="-50"></div>
 141 </div>
 142 </body>
 143 </html>