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