third_party/WebKit/LayoutTests/css3/flexbox/position-absolute-child.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0;
   6 }
   7
   8 .title {
   9     margin-top: 1em;
  10 }
  11
  12 .flexbox {
  13     display: flex;
  14     background-color: #aaa;
  15     position: relative;
  16 }
  17 .flexbox div {
  18     border: 0;
  19     flex: none;
  20 }
  21
  22 .horizontal-tb {
  23     -webkit-writing-mode: horizontal-tb;
  24 }
  25 .horizontal-bt {
  26     -webkit-writing-mode: horizontal-bt;
  27 }
  28 .vertical-rl {
  29     -webkit-writing-mode: vertical-rl;
  30 }
  31 .vertical-lr {
  32     -webkit-writing-mode: vertical-lr;
  33 }
  34
  35 .row {
  36     flex-flow: row;
  37 }
  38 .row-reverse {
  39     flex-flow: row-reverse;
  40 }
  41 .column {
  42     flex-flow: column;
  43 }
  44 .column-reverse {
  45     flex-flow: column-reverse;
  46 }
  47
  48 .flexbox :nth-child(1) {
  49     background-color: blue;
  50 }
  51 .flexbox :nth-child(2) {
  52     background-color: green;
  53 }
  54 .flexbox :nth-child(3) {
  55     background-color: red;
  56 }
  57
  58 .rtl {
  59     direction: rtl;
  60 }
  61 .ltr {
  62     direction: ltr;
  63 }
  64
  65 </style>
  66 <script src="../../resources/check-layout.js"></script>
  67 <body onload="checkLayout('.flexbox')">
  68
  69 <script>
  70 function getFlexDirection(flexFlow, writingMode)
  71 {
  72     if (writingMode.indexOf('horizontal') != -1)
  73         return (flexFlow.indexOf('row') != -1) ? 'width' : 'height';
  74     return (flexFlow.indexOf('row') != -1) ? 'height' : 'width';
  75 }
  76
  77 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
  78 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
  79 var directions = ['ltr', 'rtl'];
  80
  81 var expectations = {
  82     'horizontal-tb': {
  83         row: {
  84             ltr: [
  85                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
  86                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
  87                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
  88                 { offsets: [0, 0, 560] },
  89                 { offsets: [0, 560, 560] },
  90                 { offsets: [0, 560, 600] },
  91                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
  92                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
  93                 { offsets: [10, 50, 90], crossAxisOffset: 0 },
  94             ],
  95             rtl: [
  96                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
  97                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
  98                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
  99                 { offsets: [580, 560, 0] },
 100                 { offsets: [560, 20, 0] },
 101                 { offsets: [560, 0, -20] },
 102                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
 103                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
 104                 { offsets: [50, 10, -30], crossAxisOffset: 0 },
 105             ],
 106         },
 107         column: {
 108             ltr: [
 109                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
 110                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
 111                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
 112                 { offsets: [0, 0, 80] },
 113                 { offsets: [0, 80, 80] },
 114                 { offsets: [0, 80, 120] },
 115                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
 116                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
 117                 { offsets: [10, 50, 90], crossAxisOffset: 0 },
 118             ],
 119             rtl: [
 120                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
 121                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
 122                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
 123                 { offsets: [0, 0, 80] },
 124                 { offsets: [0, 80, 80] },
 125                 { offsets: [0, 80, 120] },
 126                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
 127                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
 128                 { offsets: [10, 50, 90], crossAxisOffset: 60 },
 129             ],
 130         },
 131         'row-reverse': {
 132             ltr: [
 133                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
 134                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
 135                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
 136                 { offsets: [600, 560, 0] },
 137                 { offsets: [560, 40, 0] },
 138                 { offsets: [560, 0, 0] },
 139                 { offsets: [90, 50, 10], crossAxisOffset: 0 },
 140                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
 141                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
 142             ],
 143             rtl: [
 144                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
 145                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
 146                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
 147                 { offsets: [-20, 0, 560] },
 148                 { offsets: [0, 540, 560] },
 149                 { offsets: [0, 560, 580] },
 150                 { offsets: [-30, 10, 50], crossAxisOffset: 0 },
 151                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
 152                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
 153             ],
 154         },
 155         'column-reverse': {
 156             ltr: [
 157                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
 158                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
 159                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
 160                 { offsets: [120, 80, 0] },
 161                 { offsets: [80, 40, 0] },
 162                 { offsets: [80, 0, 0] },
 163                 { offsets: [90, 50, 10], crossAxisOffset: 0 },
 164                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
 165                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
 166             ],
 167             rtl: [
 168                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
 169                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
 170                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
 171                 { offsets: [120, 80, 0] },
 172                 { offsets: [80, 40, 0] },
 173                 { offsets: [80, 0, 0] },
 174                 { offsets: [90, 50, 10], crossAxisOffset: 60 },
 175                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
 176                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
 177             ],
 178         },
 179     },
 180     'horizontal-bt': {
 181         // This matches the horizontal-tb values above.
 182         row: {
 183             ltr: [
 184                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
 185                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
 186                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
 187                 { offsets: [0, 0, 560] },
 188                 { offsets: [0, 560, 560] },
 189                 { offsets: [0, 560, 600] },
 190                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
 191                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
 192                 { offsets: [10, 50, 90], crossAxisOffset: 60 },
 193             ],
 194             rtl: [
 195                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
 196                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
 197                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
 198                 { offsets: [580, 560, 0] },
 199                 { offsets: [560, 20, 0] },
 200                 { offsets: [560, 0, -20] },
 201                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
 202                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
 203                 { offsets: [50, 10, -30], crossAxisOffset: 60 },
 204             ],
 205         },
 206         // horizontal-bt flips the main axis direction so the offsets are different from horizontal-tb.
 207         column: {
 208             ltr: [
 209                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
 210                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
 211                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
 212                 { offsets: [100, 80, 0] },
 213                 { offsets: [80, 20, 0] },
 214                 { offsets: [80, 0, -20] },
 215                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
 216                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
 217                 { offsets: [50, 10, -30], crossAxisOffset: 0 },
 218             ],
 219             rtl: [
 220                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
 221                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
 222                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
 223                 { offsets: [100, 80, 0] },
 224                 { offsets: [80, 20, 0] },
 225                 { offsets: [80, 0, -20] },
 226                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
 227                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
 228                 { offsets: [50, 10, -30], crossAxisOffset: 60 },
 229             ],
 230         },
 231         'row-reverse': {
 232             ltr: [
 233                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
 234                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
 235                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
 236                 { offsets: [600, 560, 0] },
 237                 { offsets: [560, 40, 0] },
 238                 { offsets: [560, 0, 0] },
 239                 { offsets: [90, 50, 10], crossAxisOffset: 60 },
 240                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
 241                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
 242             ],
 243             rtl: [
 244                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
 245                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
 246                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
 247                 { offsets: [-20, 0, 560] },
 248                 { offsets: [0, 540, 560] },
 249                 { offsets: [0, 560, 580] },
 250                 { offsets: [-30, 10, 50], crossAxisOffset: 60 },
 251                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
 252                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
 253             ],
 254         },
 255         'column-reverse': {
 256             ltr: [
 257                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
 258                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
 259                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
 260                 { offsets: [-20, 0, 80] },
 261                 { offsets: [0, 60, 80] },
 262                 { offsets: [0, 80, 100] },
 263                 { offsets: [-30, 10, 50], crossAxisOffset: 0 },
 264                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
 265                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
 266             ],
 267             rtl: [
 268                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
 269                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
 270                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
 271                 { offsets: [-20, 0, 80] },
 272                 { offsets: [0, 60, 80] },
 273                 { offsets: [0, 80, 100] },
 274                 { offsets: [-30, 10, 50], crossAxisOffset: 60 },
 275                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
 276                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
 277             ],
 278         },
 279     },
 280     'vertical-rl': {
 281         row: {
 282             // The same as horizontal-tb + column.
 283             ltr: [
 284                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
 285                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
 286                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
 287                 { offsets: [0, 0, 80] },
 288                 { offsets: [0, 80, 80] },
 289                 { offsets: [0, 80, 120] },
 290                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
 291                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
 292                 { offsets: [10, 50, 90], crossAxisOffset: 60 },
 293             ],
 294             rtl: [
 295                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
 296                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
 297                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
 298                 { offsets: [100, 80, 0] },
 299                 { offsets: [80, 20, 0] },
 300                 { offsets: [80, 0, -20] },
 301                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
 302                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
 303                 { offsets: [50, 10, -30], crossAxisOffset: 60 },
 304             ],
 305         },
 306         column: {
 307             // The same as horizontal-tb + row.
 308             ltr: [
 309                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
 310                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
 311                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
 312                 { offsets: [580, 560, 0] },
 313                 { offsets: [560, 20, 0] },
 314                 { offsets: [560, 0, -20] },
 315                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
 316                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
 317                 { offsets: [50, 10, -30], crossAxisOffset: 0 },
 318             ],
 319             rtl: [
 320                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
 321                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
 322                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
 323                 { offsets: [580, 560, 0] },
 324                 { offsets: [560, 20, 0] },
 325                 { offsets: [560, 0, -20] },
 326                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
 327                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
 328                 { offsets: [50, 10, -30], crossAxisOffset: 60 },
 329             ],
 330         },
 331         'row-reverse': {
 332             ltr: [
 333                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
 334                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
 335                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
 336                 { offsets: [120, 80, 0] },
 337                 { offsets: [80, 40, 0] },
 338                 { offsets: [80, 0, 0] },
 339                 { offsets: [90, 50, 10], crossAxisOffset: 60 },
 340                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
 341                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
 342             ],
 343             rtl: [
 344                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
 345                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
 346                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
 347                 { offsets: [-20, 0, 80] },
 348                 { offsets: [0, 60, 80] },
 349                 { offsets: [0, 80, 100] },
 350                 { offsets: [-30, 10, 50], crossAxisOffset: 60 },
 351                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
 352                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
 353             ],
 354         },
 355         'column-reverse': {
 356             ltr: [
 357                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
 358                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
 359                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
 360                 { offsets: [-20, 0, 560] },
 361                 { offsets: [0, 540, 560] },
 362                 { offsets: [0, 560, 580] },
 363                 { offsets: [-30, 10, 50], crossAxisOffset: 0 },
 364                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
 365                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
 366             ],
 367             rtl: [
 368                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
 369                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
 370                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
 371                 { offsets: [-20, 0, 560] },
 372                 { offsets: [0, 540, 560] },
 373                 { offsets: [0, 560, 580] },
 374                 { offsets: [-30, 10, 50], crossAxisOffset: 60 },
 375                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
 376                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
 377             ],
 378         }
 379     },
 380     'vertical-lr': {
 381         row: {
 382             // The same as horizontal-tb + column.
 383             ltr: [
 384                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
 385                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
 386                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
 387                 { offsets: [0, 0, 80] },
 388                 { offsets: [0, 80, 80] },
 389                 { offsets: [0, 80, 120] },
 390                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
 391                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
 392                 { offsets: [10, 50, 90], crossAxisOffset: 0 },
 393             ],
 394             rtl: [
 395                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
 396                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
 397                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
 398                 { offsets: [100, 80, 0] },
 399                 { offsets: [80, 20, 0] },
 400                 { offsets: [80, 0, -20] },
 401                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
 402                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
 403                 { offsets: [50, 10, -30], crossAxisOffset: 0 },
 404             ],
 405         },
 406         column: {
 407             // The same as horizontal-bt + row.
 408             ltr: [
 409                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
 410                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
 411                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
 412                 { offsets: [0, 0, 560] },
 413                 { offsets: [0, 560, 560] },
 414                 { offsets: [0, 560, 600] },
 415                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
 416                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
 417                 { offsets: [10, 50, 90], crossAxisOffset: 0 },
 418             ],
 419             rtl: [
 420                 { offsets: [0, 0, 240], sizes: [0, 240, 360] },
 421                 { offsets: [0, 150, 150], sizes: [150, 0, 450] },
 422                 { offsets: [0, 200, 600], sizes: [200, 400, 0] },
 423                 { offsets: [0, 0, 560] },
 424                 { offsets: [0, 560, 560] },
 425                 { offsets: [0, 560, 600] },
 426                 { offsets: [10, 10, 50], crossAxisOffset: 60 },
 427                 { offsets: [10, 50, 50], crossAxisOffset: 60 },
 428                 { offsets: [10, 50, 90], crossAxisOffset: 60 },
 429             ],
 430         },
 431         'row-reverse': {
 432             ltr: [
 433                 { offsets: [120, 72, 0], sizes: [0, 48, 72] },
 434                 { offsets: [90, 90, 0], sizes: [30, 0, 90] },
 435                 { offsets: [80, 0, 0], sizes: [40, 80, 0] },
 436                 { offsets: [120, 80, 0] },
 437                 { offsets: [80, 40, 0] },
 438                 { offsets: [80, 0, 0] },
 439                 { offsets: [90, 50, 10], crossAxisOffset: 0 },
 440                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
 441                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
 442             ],
 443             rtl: [
 444                 { offsets: [0, 0, 48], sizes: [0, 48, 72] },
 445                 { offsets: [0, 30, 30], sizes: [30, 0, 90] },
 446                 { offsets: [0, 40, 120], sizes: [40, 80, 0] },
 447                 { offsets: [-20, 0, 80] },
 448                 { offsets: [0, 60, 80] },
 449                 { offsets: [0, 80, 100] },
 450                 { offsets: [-30, 10, 50], crossAxisOffset: 0 },
 451                 { offsets: [10, 10, 50], crossAxisOffset: 0 },
 452                 { offsets: [10, 50, 50], crossAxisOffset: 0 },
 453             ],
 454         },
 455         'column-reverse': {
 456             ltr: [
 457                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
 458                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
 459                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
 460                 { offsets: [600, 560, 0] },
 461                 { offsets: [560, 40, 0] },
 462                 { offsets: [560, 0, 0] },
 463                 { offsets: [90, 50, 10], crossAxisOffset: 0 },
 464                 { offsets: [50, 50, 10], crossAxisOffset: 0 },
 465                 { offsets: [50, 10, 10], crossAxisOffset: 0 },
 466             ],
 467             rtl: [
 468                 { offsets: [600, 360, 0], sizes: [0, 240, 360] },
 469                 { offsets: [450, 450, 0], sizes: [150, 0, 450] },
 470                 { offsets: [400, 0, 0], sizes: [200, 400, 0] },
 471                 { offsets: [600, 560, 0] },
 472                 { offsets: [560, 40, 0] },
 473                 { offsets: [560, 0, 0] },
 474                 { offsets: [90, 50, 10], crossAxisOffset: 60 },
 475                 { offsets: [50, 50, 10], crossAxisOffset: 60 },
 476                 { offsets: [50, 10, 10], crossAxisOffset: 60 },
 477             ],
 478         },
 479     }
 480 };
 481
 482 function setFlexboxSize(flexbox, flexDirection)
 483 {
 484     if ('width' == flexDirection) {
 485         flexbox.style.width = '600px';
 486     } else {
 487         flexbox.style.width = '100px';
 488         flexbox.style.height = '120px';
 489     }
 490 }
 491
 492 function addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction, flexDirection)
 493 {
 494     var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
 495     for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
 496         var expected = expectations[writingMode][flexFlow][direction][2 + absoluteIndex];
 497
 498         // Absolute div is 20px, other divs should be 40px.
 499         expected.sizes = [40, 40, 40];
 500         expected.sizes[absoluteIndex - 1] = 20;
 501
 502         var flexbox = document.createElement('div');
 503         flexbox.className = 'flexbox ' + flexboxClassName;
 504         setFlexboxSize(flexbox, flexDirection);
 505         flexbox.style.justifyContent = 'space-between';
 506         for (var childIndex = 1; childIndex <= 3; ++childIndex) {
 507             var child = document.createElement('div');
 508             child.style[flexDirection] = '40px';
 509             if (absoluteIndex == childIndex) {
 510                 child.style.position = 'absolute';
 511                 child.style[flexDirection] = '20px';
 512                 if ('height' == flexDirection)
 513                     child.style.width = '100px';
 514             }
 515
 516             if ('width' == flexDirection)
 517                 child.style.height = '20px';
 518
 519             child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'x' : 'y'), expected.offsets[childIndex - 1]);
 520             child.setAttribute('data-expected-' + flexDirection, expected.sizes[childIndex - 1]);
 521             flexbox.appendChild(child);
 522         }
 523
 524         document.body.appendChild(flexbox);
 525     }
 526 }
 527
 528 function addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirection)
 529 {
 530     var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
 531     for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
 532         var expected = expectations[writingMode][flexFlow][direction][5 + absoluteIndex];
 533
 534         var flexbox = document.createElement('div');
 535         flexbox.className = 'flexbox ' + flexboxClassName;
 536         flexbox.style.height = '100px';
 537         flexbox.style.width = '100px';
 538         flexbox.style.margin = "20px";
 539         flexbox.style.justifyContent = 'center';
 540         flexbox.style.alignItems = 'center';
 541
 542         for (var childIndex = 1; childIndex <= 3; ++childIndex) {
 543             var child = document.createElement('div');
 544             if (absoluteIndex == childIndex) {
 545                 child.style.position = 'absolute';
 546                 child.style.outline = "2px solid yellow";
 547             }
 548             child.style.width = '40px';
 549             child.style.height = '40px';
 550
 551             child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'x' : 'y'), expected.offsets[childIndex - 1]);
 552             var expectedCrossAxisOffset = (absoluteIndex == childIndex) ? expected.crossAxisOffset : 30;
 553             child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'y' : 'x'), expectedCrossAxisOffset);
 554             flexbox.appendChild(child);
 555         }
 556
 557         document.body.appendChild(flexbox);
 558     }
 559 }
 560
 561 writingModes.forEach(function(writingMode) {
 562     flexFlows.forEach(function(flexFlow) {
 563         directions.forEach(function(direction) {
 564             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
 565             var title = document.createElement('div');
 566             title.className = 'title';
 567             title.innerHTML = flexboxClassName;
 568             document.body.appendChild(title);
 569
 570             var flexDirection = getFlexDirection(flexFlow, writingMode);
 571             for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
 572                 var expected = expectations[writingMode][flexFlow][direction][absoluteIndex - 1];
 573
 574                 var flexbox = document.createElement('div');
 575                 flexbox.className = 'flexbox ' + flexboxClassName;
 576                 setFlexboxSize(flexbox, flexDirection);
 577                 for (var childIndex = 1; childIndex <= 3; ++childIndex) {
 578                     var child = document.createElement('div');
 579                     child.style.flex = childIndex;
 580                     if (childIndex == absoluteIndex)
 581                         child.style.position = 'absolute';
 582
 583                     if ('width' == flexDirection)
 584                         child.style.height = '20px';
 585
 586                     child.setAttribute('data-offset-' + (flexDirection == 'width' ? 'x' : 'y'), expected.offsets[childIndex - 1]);
 587                     child.setAttribute('data-expected-' + flexDirection, expected.sizes[childIndex - 1]);
 588                     flexbox.appendChild(child);
 589                 }
 590
 591                 document.body.appendChild(flexbox);
 592             }
 593             addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction, flexDirection);
 594             addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirection);
 595         })
 596     })
 597 })
 598
 599 </script>
 600
 601 </body>
 602 </html>