third_party/WebKit/LayoutTests/css3/flexbox/line-wrapping.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     width: 500px;
   6     height: 500px;
   7     margin: 0;
   8     border: 1px solid;
   9 }
  10 .column {
  11     flex-flow: column;
  12 }
  13 .flexbox {
  14     display: flex;
  15     background-color: gray;
  16     position: relative;
  17 }
  18 .flexbox > div {
  19     line-height: 0px;
  20 }
  21 .flexbox > div > div {
  22     display: inline-block;
  23     line-height: 0px;
  24 }
  25 .horizontal-tb {
  26     -webkit-writing-mode: horizontal-tb;
  27 }
  28 .vertical-rl {
  29     -webkit-writing-mode: vertical-rl;
  30     -webkit-text-orientation: sideways-right;
  31 }
  32 .vertical-lr {
  33     -webkit-writing-mode: vertical-lr;
  34     -webkit-text-orientation: sideways-right;
  35 }
  36
  37 .horizontal-tb.row, .horizontal-tb.fixed.column {
  38     height: 100px;
  39 }
  40 .vertical-lr.row, .vertical-rl.row, .vertical-lr.fixed.column, .vertical-rl.fixed.column {
  41     width: 100px;
  42 }
  43
  44 .horizontal-tb.row > div {
  45     flex: 1;
  46 }
  47 .vertical-lr.row > div, .vertical-rl.row > div {
  48     flex: 1;
  49 }
  50
  51 .horizontal-tb.column > div {
  52     flex: 1 auto;
  53 }
  54 .vertical-lr.column > div, .vertical-rl.column > div {
  55     flex: 1 auto;
  56 }
  57
  58 .horizontal-tb.fixed {
  59     width: 200px;
  60 }
  61 .vertical-lr.fixed, .vertical-rl.fixed {
  62     height: 200px;
  63 }
  64
  65 .horizontal-tb.flexbox > div > div {
  66     height: 20px;
  67 }
  68 .vertical-lr.flexbox > div > div, .vertical-rl.flexbox > div > div {
  69     width: 20px;
  70 }
  71
  72 .horizontal-tb.fixed > div > div {
  73     width: 40px;
  74 }
  75 .vertical-lr.fixed > div > div, .vertical-rl.fixed > div > div {
  76     height: 40px;
  77 }
  78
  79 .horizontal-tb.auto > div > div {
  80     width: 100px;
  81 }
  82 .vertical-lr.auto > div > div, .vertical-rl.auto > div > div {
  83     height: 100px;
  84 }
  85
  86 .flexbox > :nth-child(1) {
  87     background-color: lightblue;
  88 }
  89 .flexbox > :nth-child(2) {
  90     background-color: pink;
  91 }
  92 .flexbox > div > :nth-child(1) {
  93     background-color: blue;
  94 }
  95 .flexbox > div > :nth-child(2) {
  96     background-color: green;
  97 }
  98 .flexbox > div > :nth-child(3) {
  99     background-color: red;
 100 }
 101 .flexbox > div > :nth-child(4) {
 102     background-color: yellow;
 103 }
 104 .flexbox > div > :nth-child(5) {
 105     background-color: purple;
 106 }
 107 .flexbox > div > :nth-child(6) {
 108     background-color: orange;
 109 }
 110 </style>
 111 <script src="../../resources/check-layout.js"></script>
 112 <body onload="checkLayout('.flexbox')">
 113
 114 <div class="flexbox fixed row horizontal-tb">
 115     <div data-expected-width=100 data-expected-height=100>
 116         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
 117     </div>
 118     <div data-expected-width=100 data-expected-height=40 style="align-self: flex-start;">
 119         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=100></div>
 120     </div>
 121 </div>
 122
 123 <div class="flexbox fixed column horizontal-tb">
 124     <div data-expected-width=200 data-expected-height=50>
 125         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
 126     </div>
 127     <div data-expected-width=200 data-expected-height=50 style="align-self: flex-start;">
 128         <div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=50></div><div data-offset-y=70 data-offset-x=0></div>
 129     </div>
 130 </div>
 131
 132 <div class="flexbox fixed column horizontal-tb">
 133     <div data-expected-width=200 data-expected-height=50>
 134         <div data-offset-y=0></div><div data-offset-y=0></div>
 135     </div>
 136     <div data-expected-width=80 data-expected-height=50 style="align-self: flex-start;">
 137         <div data-offset-y=50></div><div data-offset-y=50></div>
 138     </div>
 139 </div>
 140
 141 <div class="flexbox auto row horizontal-tb" data-expected-width=500>
 142     <div data-expected-width=250 data-expected-height=100>
 143         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
 144     </div>
 145     <div data-expected-width=250 data-expected-height=40 style="align-self: flex-start;">
 146         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=250></div>
 147     </div>
 148 </div>
 149
 150 <div data-expected-width=500 data-expected-height=80 class="flexbox auto column horizontal-tb">
 151     <div data-expected-width=500 data-expected-height=40>
 152         <div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=0></div><div data-offset-y=20 data-offset-x=0></div>
 153     </div>
 154     <div data-expected-width=500 data-expected-height=40 style="align-self: flex-start;">
 155         <div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=40></div><div data-offset-y=60 data-offset-x=0></div>
 156     </div>
 157 </div>
 158
 159 <!-- FIXME: All the vertical-lr cases are off by 4px in the x direction. See http://webkit.org/b/71193. -->
 160
 161 <div class="flexbox fixed row vertical-lr">
 162     <div data-expected-height data-expected-width=100>
 163         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
 164     </div>
 165     <div data-expected-height=100 data-expected-width=40 style="align-self: flex-start;">
 166         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=100></div>
 167     </div>
 168 </div>
 169
 170 <div class="flexbox fixed column vertical-lr">
 171     <div data-expected-height=200 data-expected-width=50>
 172         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
 173     </div>
 174     <div data-expected-height=200 data-expected-width=50 style="align-self: flex-start;">
 175         <div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=54></div><div data-offset-x=74 data-offset-y=0></div>
 176     </div>
 177 </div>
 178
 179 <div class="flexbox fixed column vertical-lr">
 180     <div data-expected-height=200 data-expected-width=50>
 181         <div data-offset-x=4></div><div data-offset-x=4></div>
 182     </div>
 183     <div data-expected-height=80 data-expected-width=50 style="align-self: flex-start;">
 184         <div data-offset-x=54></div><div data-offset-x=54></div>
 185     </div>
 186 </div>
 187
 188 <div class="flexbox auto row vertical-lr" data-expected-height=500>
 189     <div data-expected-height=250 data-expected-width=100>
 190         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
 191     </div>
 192     <div data-expected-height=250 data-expected-width=40 style="align-self: flex-start;">
 193         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=250></div>
 194     </div>
 195 </div>
 196
 197 <div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-lr">
 198     <div data-expected-height=500 data-expected-width=40>
 199         <div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=4></div><div data-offset-x=24 data-offset-y=0></div>
 200     </div>
 201     <div data-expected-height=500 data-expected-width=40 style="align-self: flex-start;">
 202         <div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=44></div><div data-offset-x=64 data-offset-y=0></div>
 203     </div>
 204 </div>
 205
 206
 207 <div class="flexbox fixed row vertical-rl">
 208     <div data-expected-height=100 data-expected-width=100>
 209         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
 210     </div>
 211     <div data-expected-height=100 data-expected-width=40 style="align-self: flex-start;">
 212         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=100></div>
 213     </div>
 214 </div>
 215
 216 <div class="flexbox fixed column vertical-rl">
 217     <div data-expected-height=200 data-expected-width=50>
 218         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
 219     </div>
 220     <div data-expected-height=200 data-expected-width=50 style="align-self: flex-start;">
 221         <div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=30></div><div data-offset-x=10 data-offset-y=0></div>
 222     </div>
 223 </div>
 224
 225 <div class="flexbox fixed column vertical-rl">
 226     <div data-expected-height=200 data-expected-width=50>
 227         <div data-offset-x=80></div><div data-offset-x=80></div>
 228     </div>
 229     <div data-expected-height=80 data-expected-width=50 style="align-self: flex-start;">
 230         <div data-offset-x=30></div><div data-offset-x=30></div>
 231     </div>
 232 </div>
 233
 234 <div class="flexbox auto row vertical-rl" data-expected-height=500>
 235     <div data-expected-height=250 data-expected-width=100>
 236         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=0></div>
 237     </div>
 238     <div data-expected-height=250 data-expected-width=40 style="align-self: flex-start;">
 239         <div data-offset-x=80></div><div data-offset-x=80></div><div data-offset-x=60 data-offset-y=250></div>
 240     </div>
 241 </div>
 242
 243 <div data-expected-height=500 data-expected-width=80 class="flexbox auto column vertical-rl">
 244     <div data-expected-height=500 data-expected-width=40>
 245         <div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=60></div><div data-offset-x=40 data-offset-y=0></div>
 246     </div>
 247     <div data-expected-height=500 data-expected-width=40 style="align-self: flex-start;">
 248         <div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=20></div><div data-offset-x=0 data-offset-y=0></div>
 249     </div>
 250 </div>
 251
 252 </body>
 253 </html>