third_party/WebKit/LayoutTests/css3/flexbox/flex-algorithm.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/flexbox.css" rel="stylesheet">
   4 <style>
   5 body {
   6     margin: 0;
   7 }
   8 .flexbox {
   9     width: 600px;
  10 }
  11 .flexbox div {
  12     height: 20px;
  13     border: 0;
  14 }
  15
  16 .flexbox :nth-child(1) {
  17     background-color: blue;
  18 }
  19 .flexbox :nth-child(2) {
  20     background-color: green;
  21 }
  22 .flexbox :nth-child(3) {
  23     background-color: red;
  24 }
  25
  26 .flex1 {
  27     flex: 1;
  28 }
  29 .flex2 {
  30     flex: 2;
  31 }
  32 .flex3 {
  33     flex: 3;
  34 }
  35 .flex1-0-0 {
  36     flex: 1 0 0px;
  37 }
  38 </style>
  39 <script src="../../resources/check-layout.js"></script>
  40 <body onload="checkLayout('.flexbox')">
  41
  42 <div class="flexbox">
  43   <div data-expected-width="200" class="flex1"></div>
  44   <div data-expected-width="200" class="flex1"></div>
  45   <div data-expected-width="200" class="flex1"></div>
  46 </div>
  47
  48 <div class="flexbox">
  49   <div data-expected-width="200" style="flex: .5;"></div>
  50   <div data-expected-width="200" style="flex: .5;"></div>
  51   <div data-expected-width="200" style="flex: .5;"></div>
  52 </div>
  53
  54 <div class="flexbox">
  55   <div data-expected-width="300" class="flex3"></div>
  56   <div data-expected-width="200" class="flex2"></div>
  57   <div data-expected-width="100" class="flex1"></div>
  58 </div>
  59
  60 <div class="flexbox">
  61   <div data-expected-width="250" class="flex1"></div>
  62   <div data-expected-width="250" class="flex1"></div>
  63   <div data-expected-width="100" class="flex-none" style="width: 100px"></div>
  64 </div>
  65
  66 <div class="flexbox">
  67   <div data-expected-width="150" class="flex1"></div>
  68   <div data-expected-width="150" class="flex1"></div>
  69   <div data-expected-width="300" class="flex-none" style="width: 50%"></div>
  70 </div>
  71
  72 <!-- The first two boxes should fill the extra 300px evenly (each gets 150px extra). -->
  73 <div class="flexbox">
  74   <div data-expected-width="150" class="flex1"></div>
  75   <div data-expected-width="350" style="flex: 1 200px;"></div>
  76   <div data-expected-width="100" class="flex-none" style="width: 100px"></div>
  77 </div>
  78
  79 <!-- Like the last test, except the middle box gets more space than the first box. -->
  80 <div class="flexbox">
  81   <div data-expected-width="100" class="flex1"></div>
  82   <div data-expected-width="400" style="flex: 2 33.333333%;"></div>
  83   <div data-expected-width="100" class="flex-none" style="width: 100px"></div>
  84 </div>
  85
  86 <!-- Test some negative flexing. -->
  87 <div class="flexbox">
  88   <div data-expected-width="200" style="flex: 1 1 300px;"></div>
  89   <div data-expected-width="200" style="flex: 2 1 300px;"></div>
  90   <div data-expected-width="200" style="flex: 3 1 300px;"></div>
  91 </div>
  92
  93 <div class="flexbox">
  94   <div data-expected-width="250" style="flex: 1 1 300px;"></div>
  95   <div data-expected-width="150" style="flex: 2 3 300px;"></div>
  96   <div data-expected-width="200" class="flex-none" style="width: 200px"></div>
  97 </div>
  98
  99 <div class="flexbox">
 100   <div data-expected-width="50" style="flex: 1 1 100px;"></div>
 101   <div data-expected-width="250" style="flex: 1 1 500px;"></div>
 102   <div data-expected-width="300" class="flex-none" style="width: 300px"></div>
 103 </div>
 104
 105 <div class="flexbox">
 106   <div data-expected-width="50" style="flex: 1 1 100px;"></div>
 107   <div data-expected-width="250" style="flex: 1 1 500px; margin-right: 300px;"></div>
 108 </div>
 109
 110 <div class="flexbox">
 111   <div data-expected-width="50" style="flex: 1 1 100px;"></div>
 112   <div data-expected-width="550" style="flex: 1 1 500px; padding-left: 300px;"></div>
 113 </div>
 114
 115 <div class="flexbox">
 116   <div data-expected-width="50" style="flex: 1 1 100px;"></div>
 117   <div data-expected-width="550" style="flex: 1 1 500px; border-left: 200px dashed orange; border-right: 100px dashed orange;"></div>
 118 </div>
 119
 120 <!-- Test some overflow cases. -->
 121 <div class="flexbox">
 122   <div data-expected-width="600" style="flex: 0 100000000000000000000000000000000000000 600px;"></div>
 123   <div data-expected-width="600" style="flex: 0 100000000000000000000000000000000000000 600px;"></div>
 124 </div>
 125
 126 <div class="flexbox">
 127   <div data-expected-width="600" style="flex: 100000000000000000000000000000000000000 0 600px;"></div>
 128   <div data-expected-width="600" style="flex: 0 100000000000000000000000000000000000000 600px;"></div>
 129   <div data-expected-width="33554428" style="flex: 1 1 100000000000000000000000000000000000000px;"></div>
 130 </div>
 131
 132 <!-- Test flexitem borders. -->
 133 <div class="flexbox">
 134   <div data-expected-width="250" class="flex1" style="border-left: 150px solid black"></div>
 135   <div data-expected-width="250" class="flex1-0-0" style="border-right: 150px solid orange"></div>
 136   <div data-expected-width="100" class="flex1-0-0"></div>
 137 </div>
 138
 139 <div class="flexbox">
 140   <div data-expected-width="300" style="width: 100px; border: 100px solid black; flex: none;"></div>
 141   <div data-expected-width="200" class="flex2"></div>
 142   <div data-expected-width="100" class="flex1"></div>
 143 </div>
 144
 145 <!-- Test flexitem padding. -->
 146 <div class="flexbox">
 147   <div data-expected-width="250" class="flex1" style="padding-left: 150px"></div>
 148   <div data-expected-width="250" class="flex1-0-0" style="padding-right: 150px"></div>
 149   <div data-expected-width="100" class="flex1-0-0"></div>
 150 </div>
 151
 152 <div class="flexbox">
 153   <div data-expected-width="300" class="flex-none" style="width: 100px; padding: 100px"></div>
 154   <div data-expected-width="200" class="flex2"></div>
 155   <div data-expected-width="100" class="flex1"></div>
 156 </div>
 157
 158 <div class="flexbox">
 159   <div data-expected-width="200" class="flex1" style="padding-left: 25%"></div>
 160   <div data-expected-width="150" class="flex3"></div>
 161   <div data-expected-width="250" class="flex-none" style="width: 100px; padding-right: 25%"></div>
 162 </div>
 163
 164 <div class="flexbox">
 165   <div data-expected-width="200" class="flex1" style="padding-left: 50px; border-right: 50px solid black"></div>
 166   <div data-expected-width="250" class="flex2" style="border-right: 50px solid orange"></div>
 167   <div data-expected-width="150" class="flex1" style="padding-right: 50px;"></div>
 168 </div>
 169
 170 <!-- Test items with an intrinsic size. -->
 171 <div class="flexbox">
 172   <div data-expected-width="120" class="flex1">
 173       <div style="width: 100px; height: 100%;"></div>
 174   </div>
 175   <div data-expected-width="240" class="flex2"></div>
 176   <div data-expected-width="240" class="flex2"></div>
 177 </div>
 178
 179 <div class="flexbox">
 180   <div data-expected-width="200" class="flex1-0-0">
 181       <div style="width: 100px; height: 100%;"></div>
 182   </div>
 183   <div data-expected-width="200" class="flex1"></div>
 184   <div data-expected-width="200" class="flex1"></div>
 185 </div>
 186
 187 <div class="flexbox">
 188   <div data-expected-width="200" class="flex-auto">
 189       <div style="width: 100px;"></div>
 190   </div>
 191   <div data-expected-width="100" class="flex-auto"></div>
 192   <div data-expected-width="300" class="flex-auto">
 193       <div style="width: 200px;"></div>
 194   </div>
 195 </div>
 196
 197 <div class="flexbox" style="height: 60px; flex-flow: row wrap; position: relative;">
 198   <div data-offset-x="0" data-offset-y="0" style="position: absolute;"></div>
 199   <div data-offset-x="0" data-offset-y="0" style="width: 700px;"></div>
 200 </div>
 201
 202 <!-- Test border/padding/margin on the flexbox itself. -->
 203 <div data-expected-width="830" style="border: 10px solid; display: inline-block;">
 204     <div data-expected-width="700" style="padding-left: 10px; padding-right: 20px; border-left: 30px solid; border-right: 40px solid; margin-left: 50px; margin-right:60px;" class="flexbox">
 205       <div data-offset-x="100" data-expected-width="200" class="flex1"></div>
 206       <div data-offset-x="300" data-expected-width="200" class="flex1"></div>
 207       <div data-offset-x="500" data-expected-width="200" class="flex1"></div>
 208     </div>
 209 </div>
 210
 211 </body>
 212 </html>