third_party/WebKit/LayoutTests/css3/flexbox/multiline.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     position: relative;
   6     display: flex;
   7     background-color: grey;
   8     max-width: 600px;
   9     align-content: flex-start;
  10 }
  11 .flexbox > * {
  12     flex: none;
  13 }
  14 .title {
  15     margin-top: 1em;
  16 }
  17 .ltr {
  18     direction: ltr;
  19 }
  20 .rtl {
  21     direction: rtl;
  22 }
  23 .horizontal-tb {
  24     -webkit-writing-mode: horizontal-tb;
  25 }
  26 .horizontal-bt {
  27     -webkit-writing-mode: horizontal-bt;
  28 }
  29 .vertical-rl {
  30     -webkit-writing-mode: vertical-rl;
  31 }
  32 .vertical-lr {
  33     -webkit-writing-mode: vertical-lr;
  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 .wrap {
  48     flex-wrap: wrap;
  49 }
  50 .wrap-reverse {
  51     flex-wrap: wrap-reverse;
  52 }
  53 .flexbox > :nth-child(1) {
  54     background-color: #0f0;
  55 }
  56 .flexbox > :nth-child(2) {
  57     background-color: #0d0;
  58 }
  59 .flexbox > :nth-child(3) {
  60     background-color: #090;
  61 }
  62 .flexbox > :nth-child(4) {
  63     background-color: #060;
  64 }
  65 .flexbox > :nth-child(5) {
  66     background-color: #030;
  67 }
  68 </style>
  69 <script src="../../resources/check-layout.js"></script>
  70 <body onload="checkLayout('.flexbox')">
  71
  72 <script>
  73 var expectations = {
  74     'horizontal-tb': {
  75         'row': {
  76             'ltr': {
  77                 'wrap': {
  78                     'flexbox': [60, 45],
  79                     'child1': [30, 5, 0, 0],
  80                     'child2': [30, 10, 30, 0],
  81                     'child3': [60, 5, 0, 10],
  82                     'child4': [70, 20, 0, 15],
  83                     'child5': [60, 10, 0, 35],
  84                 },
  85                 'wrap-reverse': {
  86                     'flexbox': [60, 45],
  87                     'child1': [30, 5, 0, 40],
  88                     'child2': [30, 10, 30, 35],
  89                     'child3': [60, 5, 0, 30],
  90                     'child4': [70, 20, 0, 10],
  91                     'child5': [60, 10, 0, 0],
  92                 },
  93             },
  94             'rtl': {
  95                 'wrap': {
  96                     'flexbox': [60, 45],
  97                     'child1': [30, 5, 30, 0],
  98                     'child2': [30, 10, 0, 0],
  99                     'child3': [60, 5, 0, 10],
 100                     'child4': [70, 20, -10, 15],
 101                     'child5': [60, 10, 0, 35],
 102                 },
 103                 'wrap-reverse': {
 104                     'flexbox': [60, 45],
 105                     'child1': [30, 5, 30, 40],
 106                     'child2': [30, 10, 0, 35],
 107                     'child3': [60, 5, 0, 30],
 108                     'child4': [70, 20, -10, 10],
 109                     'child5': [60, 10, 0, 0],
 110                 },
 111             },
 112         },
 113         'column': {
 114             'ltr': {
 115                 'wrap': {
 116                     'flexbox': [600, 60],
 117                     'child1': [5, 30, 0, 0],
 118                     'child2': [10, 30, 0, 30],
 119                     'child3': [5, 60, 10, 0],
 120                     'child4': [20, 70, 15, 0],
 121                     'child5': [10, 60, 35, 0],
 122                 },
 123                 'wrap-reverse': {
 124                     'flexbox': [600, 60],
 125                     'child1': [5, 30, 595, 0],
 126                     'child2': [10, 30, 590, 30],
 127                     'child3': [5, 60, 585, 0],
 128                     'child4': [20, 70, 565, 0],
 129                     'child5': [10, 60, 555, 0],
 130                 },
 131             },
 132             'rtl': {
 133                 'wrap': {
 134                     'flexbox': [600, 60],
 135                     'child1': [5, 30, 595, 0],
 136                     'child2': [10, 30, 590, 30],
 137                     'child3': [5, 60, 585, 0],
 138                     'child4': [20, 70, 565, 0],
 139                     'child5': [10, 60, 555, 0],
 140                 },
 141                 'wrap-reverse': {
 142                     'flexbox': [600, 60],
 143                     'child1': [5, 30, 0, 0],
 144                     'child2': [10, 30, 0, 30],
 145                     'child3': [5, 60, 10, 0],
 146                     'child4': [20, 70, 15, 0],
 147                     'child5': [10, 60, 35, 0],
 148                 },
 149             },
 150         },
 151         'row-reverse': {
 152             'ltr': {
 153                 'wrap': {
 154                     'flexbox': [60, 45],
 155                     'child1': [30, 5, 30, 0],
 156                     'child2': [30, 10, 0, 0],
 157                     'child3': [60, 5, 0, 10],
 158                     'child4': [70, 20, -10, 15],
 159                     'child5': [60, 10, 0, 35],
 160                 },
 161                 'wrap-reverse': {
 162                     'flexbox': [60, 45],
 163                     'child1': [30, 5, 30, 40],
 164                     'child2': [30, 10, 0, 35],
 165                     'child3': [60, 5, 0, 30],
 166                     'child4': [70, 20, -10, 10],
 167                     'child5': [60, 10, 0, 0],
 168                 },
 169             },
 170             'rtl': {
 171                 'wrap': {
 172                     'flexbox': [60, 45],
 173                     'child1': [30, 5, 0, 0],
 174                     'child2': [30, 10, 30, 0],
 175                     'child3': [60, 5, 0, 10],
 176                     'child4': [70, 20, 0, 15],
 177                     'child5': [60, 10, 0, 35],
 178                 },
 179                 'wrap-reverse': {
 180                     'flexbox': [60, 45],
 181                     'child1': [30, 5, 0, 40],
 182                     'child2': [30, 10, 30, 35],
 183                     'child3': [60, 5, 0, 30],
 184                     'child4': [70, 20, 0, 10],
 185                     'child5': [60, 10, 0, 0],
 186                 },
 187             },
 188         },
 189         'column-reverse': {
 190             'ltr': {
 191                 'wrap': {
 192                     'flexbox': [600, 60],
 193                     'child1': [5, 30, 0, 30],
 194                     'child2': [10, 30, 0, 0],
 195                     'child3': [5, 60, 10, 0],
 196                     'child4': [20, 70, 15, -10],
 197                     'child5': [10, 60, 35, 0],
 198                 },
 199                 'wrap-reverse': {
 200                     'flexbox': [600, 60],
 201                     'child1': [5, 30, 595, 30],
 202                     'child2': [10, 30, 590, 0],
 203                     'child3': [5, 60, 585, 0],
 204                     'child4': [20, 70, 565, -10],
 205                     'child5': [10, 60, 555, 0],
 206                 },
 207             },
 208             'rtl': {
 209                 'wrap': {
 210                     'flexbox': [600, 60],
 211                     'child1': [5, 30, 595, 30],
 212                     'child2': [10, 30, 590, 0],
 213                     'child3': [5, 60, 585, 0],
 214                     'child4': [20, 70, 565, -10],
 215                     'child5': [10, 60, 555, 0],
 216                 },
 217                 'wrap-reverse': {
 218                     'flexbox': [600, 60],
 219                     'child1': [5, 30, 0, 30],
 220                     'child2': [10, 30, 0, 0],
 221                     'child3': [5, 60, 10, 0],
 222                     'child4': [20, 70, 15, -10],
 223                     'child5': [10, 60, 35, 0],
 224                 },
 225             },
 226         },
 227     },
 228     'horizontal-bt': {
 229         'row': {
 230             'ltr': {
 231                 'wrap': {
 232                     'flexbox': [60, 45],
 233                     'child1': [30, 5, 0, 40],
 234                     'child2': [30, 10, 30, 35],
 235                     'child3': [60, 5, 0, 30],
 236                     'child4': [70, 20, 0, 10],
 237                     'child5': [60, 10, 0, 0],
 238                 },
 239                 'wrap-reverse': {
 240                     'flexbox': [60, 45],
 241                     'child1': [30, 5, 0, 0],
 242                     'child2': [30, 10, 30, 0],
 243                     'child3': [60, 5, 0, 10],
 244                     'child4': [70, 20, 0, 15],
 245                     'child5': [60, 10, 0, 35],
 246                 },
 247             },
 248             'rtl': {
 249                 'wrap': {
 250                     'flexbox': [60, 45],
 251                     'child1': [30, 5, 30, 40],
 252                     'child2': [30, 10, 0, 35],
 253                     'child3': [60, 5, 0, 30],
 254                     'child4': [70, 20, -10, 10],
 255                     'child5': [60, 10, 0, 0],
 256                 },
 257                 'wrap-reverse': {
 258                     'flexbox': [60, 45],
 259                     'child1': [30, 5, 30, 0],
 260                     'child2': [30, 10, 0, 0],
 261                     'child3': [60, 5, 0, 10],
 262                     'child4': [70, 20, -10, 15],
 263                     'child5': [60, 10, 0, 35],
 264                 },
 265             },
 266         },
 267         'column': {
 268             'ltr': {
 269                 'wrap': {
 270                     'flexbox': [600, 60],
 271                     'child1': [5, 30, 0, 30],
 272                     'child2': [10, 30, 0, 0],
 273                     'child3': [5, 60, 10, 0],
 274                     'child4': [20, 70, 15, -10],
 275                     'child5': [10, 60, 35, 0],
 276                 },
 277                 'wrap-reverse': {
 278                     'flexbox': [600, 60],
 279                     'child1': [5, 30, 595, 30],
 280                     'child2': [10, 30, 590, 0],
 281                     'child3': [5, 60, 585, 0],
 282                     'child4': [20, 70, 565, -10],
 283                     'child5': [10, 60, 555, 0],
 284                 },
 285             },
 286             'rtl': {
 287                 'wrap': {
 288                     'flexbox': [600, 60],
 289                     'child1': [5, 30, 595, 30],
 290                     'child2': [10, 30, 590, 0],
 291                     'child3': [5, 60, 585, 0],
 292                     'child4': [20, 70, 565, -10],
 293                     'child5': [10, 60, 555, 0],
 294                 },
 295                 'wrap-reverse': {
 296                     'flexbox': [600, 60],
 297                     'child1': [5, 30, 0, 30],
 298                     'child2': [10, 30, 0, 0],
 299                     'child3': [5, 60, 10, 0],
 300                     'child4': [20, 70, 15, -10],
 301                     'child5': [10, 60, 35, 0],
 302                 },
 303             },
 304         },
 305         'row-reverse': {
 306             'ltr': {
 307                 'wrap': {
 308                     'flexbox': [60, 45],
 309                     'child1': [30, 5, 30, 40],
 310                     'child2': [30, 10, 0, 35],
 311                     'child3': [60, 5, 0, 30],
 312                     'child4': [70, 20, -10, 10],
 313                     'child5': [60, 10, 0, 0],
 314                 },
 315                 'wrap-reverse': {
 316                     'flexbox': [60, 45],
 317                     'child1': [30, 5, 30, 0],
 318                     'child2': [30, 10, 0, 0],
 319                     'child3': [60, 5, 0, 10],
 320                     'child4': [70, 20, -10, 15],
 321                     'child5': [60, 10, 0, 35],
 322                 },
 323             },
 324             'rtl': {
 325                 'wrap': {
 326                     'flexbox': [60, 45],
 327                     'child1': [30, 5, 0, 40],
 328                     'child2': [30, 10, 30, 35],
 329                     'child3': [60, 5, 0, 30],
 330                     'child4': [70, 20, 0, 10],
 331                     'child5': [60, 10, 0, 0],
 332                 },
 333                 'wrap-reverse': {
 334                     'flexbox': [60, 45],
 335                     'child1': [30, 5, 0, 0],
 336                     'child2': [30, 10, 30, 0],
 337                     'child3': [60, 5, 0, 10],
 338                     'child4': [70, 20, 0, 15],
 339                     'child5': [60, 10, 0, 35],
 340                 },
 341             },
 342         },
 343         'column-reverse': {
 344             'ltr': {
 345                 'wrap': {
 346                     'flexbox': [600, 60],
 347                     'child1': [5, 30, 0, 0],
 348                     'child2': [10, 30, 0, 30],
 349                     'child3': [5, 60, 10, 0],
 350                     'child4': [20, 70, 15, 0],
 351                     'child5': [10, 60, 35, 0],
 352                 },
 353                 'wrap-reverse': {
 354                     'flexbox': [600, 60],
 355                     'child1': [5, 30, 595, 0],
 356                     'child2': [10, 30, 590, 30],
 357                     'child3': [5, 60, 585, 0],
 358                     'child4': [20, 70, 565, 0],
 359                     'child5': [10, 60, 555, 0],
 360                 },
 361             },
 362             'rtl': {
 363                 'wrap': {
 364                     'flexbox': [600, 60],
 365                     'child1': [5, 30, 595, 0],
 366                     'child2': [10, 30, 590, 30],
 367                     'child3': [5, 60, 585, 0],
 368                     'child4': [20, 70, 565, 0],
 369                     'child5': [10, 60, 555, 0],
 370                 },
 371                 'wrap-reverse': {
 372                     'flexbox': [600, 60],
 373                     'child1': [5, 30, 0, 0],
 374                     'child2': [10, 30, 0, 30],
 375                     'child3': [5, 60, 10, 0],
 376                     'child4': [20, 70, 15, 0],
 377                     'child5': [10, 60, 35, 0],
 378                 },
 379             },
 380         },
 381     },
 382     'vertical-rl': {
 383         'row': {
 384             'ltr': {
 385                 'wrap': {
 386                     'flexbox': [45, 60],
 387                     'child1': [5, 30, 40, 0],
 388                     'child2': [10, 30, 35, 30],
 389                     'child3': [5, 60, 30, 0],
 390                     'child4': [20, 70, 10, 0],
 391                     'child5': [10, 60, 0, 0],
 392                 },
 393                 'wrap-reverse': {
 394                     'flexbox': [45, 60],
 395                     'child1': [5, 30, 0, 0],
 396                     'child2': [10, 30, 0, 30],
 397                     'child3': [5, 60, 10, 0],
 398                     'child4': [20, 70, 15, 0],
 399                     'child5': [10, 60, 35, 0],
 400                 },
 401             },
 402             'rtl': {
 403                 'wrap': {
 404                     'flexbox': [45, 60],
 405                     'child1': [5, 30, 40, 30],
 406                     'child2': [10, 30, 35, 0],
 407                     'child3': [5, 60, 30, 0],
 408                     'child4': [20, 70, 10, -10],
 409                     'child5': [10, 60, 0, 0],
 410                 },
 411                 'wrap-reverse': {
 412                     'flexbox': [45, 60],
 413                     'child1': [5, 30, 0, 30],
 414                     'child2': [10, 30, 0, 0],
 415                     'child3': [5, 60, 10, 0],
 416                     'child4': [20, 70, 15, -10],
 417                     'child5': [10, 60, 35, 0],
 418                 },
 419             },
 420         },
 421         'column': {
 422             'ltr': {
 423                 'wrap': {
 424                     'flexbox': [60, 20],
 425                     'child1': [30, 5, 30, 0],
 426                     'child2': [30, 10, 0, 0],
 427                     'child3': [60, 5, 0, 10],
 428                     'child4': [70, 20, -10, 15],
 429                     'child5': [60, 10, 0, 35],
 430                 },
 431                 'wrap-reverse': {
 432                     'flexbox': [60, 20],
 433                     'child1': [30, 5, 30, 15],
 434                     'child2': [30, 10, 0, 10],
 435                     'child3': [60, 5, 0, 5],
 436                     'child4': [70, 20, -10, -15],
 437                     'child5': [60, 10, 0, -25],
 438                 },
 439             },
 440             'rtl': {
 441                 'wrap': {
 442                     'flexbox': [60, 20],
 443                     'child1': [30, 5, 30, 15],
 444                     'child2': [30, 10, 0, 10],
 445                     'child3': [60, 5, 0, 5],
 446                     'child4': [70, 20, -10, -15],
 447                     'child5': [60, 10, 0, -25],
 448                 },
 449                 'wrap-reverse': {
 450                     'flexbox': [60, 20],
 451                     'child1': [30, 5, 30, 0],
 452                     'child2': [30, 10, 0, 0],
 453                     'child3': [60, 5, 0, 10],
 454                     'child4': [70, 20, -10, 15],
 455                     'child5': [60, 10, 0, 35],
 456                 },
 457             },
 458         },
 459         'row-reverse': {
 460             'ltr': {
 461                 'wrap': {
 462                     'flexbox': [45, 60],
 463                     'child1': [5, 30, 40, 30],
 464                     'child2': [10, 30, 35, 0],
 465                     'child3': [5, 60, 30, 0],
 466                     'child4': [20, 70, 10, -10],
 467                     'child5': [10, 60, 0, 0],
 468                 },
 469                 'wrap-reverse': {
 470                     'flexbox': [45, 60],
 471                     'child1': [5, 30, 0, 30],
 472                     'child2': [10, 30, 0, 0],
 473                     'child3': [5, 60, 10, 0],
 474                     'child4': [20, 70, 15, -10],
 475                     'child5': [10, 60, 35, 0],
 476                 },
 477             },
 478             'rtl': {
 479                 'wrap': {
 480                     'flexbox': [45, 60],
 481                     'child1': [5, 30, 40, 0],
 482                     'child2': [10, 30, 35, 30],
 483                     'child3': [5, 60, 30, 0],
 484                     'child4': [20, 70, 10, 0],
 485                     'child5': [10, 60, 0, 0],
 486                 },
 487                 'wrap-reverse': {
 488                     'flexbox': [45, 60],
 489                     'child1': [5, 30, 0, 0],
 490                     'child2': [10, 30, 0, 30],
 491                     'child3': [5, 60, 10, 0],
 492                     'child4': [20, 70, 15, 0],
 493                     'child5': [10, 60, 35, 0],
 494                 },
 495             },
 496         },
 497         'column-reverse': {
 498             'ltr': {
 499                 'wrap': {
 500                     'flexbox': [60, 20],
 501                     'child1': [30, 5, 0, 0],
 502                     'child2': [30, 10, 30, 0],
 503                     'child3': [60, 5, 0, 10],
 504                     'child4': [70, 20, 0, 15],
 505                     'child5': [60, 10, 0, 35],
 506                 },
 507                 'wrap-reverse': {
 508                     'flexbox': [60, 20],
 509                     'child1': [30, 5, 0, 15],
 510                     'child2': [30, 10, 30, 10],
 511                     'child3': [60, 5, 0, 5],
 512                     'child4': [70, 20, 0, -15],
 513                     'child5': [60, 10, 0, -25],
 514                 },
 515             },
 516             'rtl': {
 517                 'wrap': {
 518                     'flexbox': [60, 20],
 519                     'child1': [30, 5, 0, 15],
 520                     'child2': [30, 10, 30, 10],
 521                     'child3': [60, 5, 0, 5],
 522                     'child4': [70, 20, 0,-15],
 523                     'child5': [60, 10, 0, -25],
 524                 },
 525                 'wrap-reverse': {
 526                     'flexbox': [60, 20],
 527                     'child1': [30, 5, 0, 0],
 528                     'child2': [30, 10, 30, 0],
 529                     'child3': [60, 5, 0, 10],
 530                     'child4': [70, 20, 0, 15],
 531                     'child5': [60, 10, 0, 35],
 532                 },
 533             },
 534         },
 535     },
 536     'vertical-lr': {
 537         'row': {
 538             'ltr': {
 539                 'wrap': {
 540                     'flexbox': [45, 60],
 541                     'child1': [5, 30, 0, 0],
 542                     'child2': [10, 30, 0, 30],
 543                     'child3': [5, 60, 10, 0],
 544                     'child4': [20, 70, 15, 0],
 545                     'child5': [10, 60, 35, 0],
 546                 },
 547                 'wrap-reverse': {
 548                     'flexbox': [45, 60],
 549                     'child1': [5, 30, 40, 0],
 550                     'child2': [10, 30, 35, 30],
 551                     'child3': [5, 60, 30, 0],
 552                     'child4': [20, 70, 10, 0],
 553                     'child5': [10, 60, 0, 0],
 554                 },
 555             },
 556             'rtl': {
 557                 'wrap': {
 558                     'flexbox': [45, 60],
 559                     'child1': [5, 30, 0, 30],
 560                     'child2': [10, 30, 0, 0],
 561                     'child3': [5, 60, 10, 0],
 562                     'child4': [20, 70, 15, -10],
 563                     'child5': [10, 60, 35, 0],
 564                 },
 565                 'wrap-reverse': {
 566                     'flexbox': [45, 60],
 567                     'child1': [5, 30, 40, 30],
 568                     'child2': [10, 30, 35, 0],
 569                     'child3': [5, 60, 30, 0],
 570                     'child4': [20, 70, 10, -10],
 571                     'child5': [10, 60, 0, 0],
 572                 },
 573             },
 574         },
 575         'column': {
 576             'ltr': {
 577                 'wrap': {
 578                     'flexbox': [60, 20],
 579                     'child1': [30, 5, 0, 0],
 580                     'child2': [30, 10, 30, 0],
 581                     'child3': [60, 5, 0, 10],
 582                     'child4': [70, 20, 0, 15],
 583                     'child5': [60, 10, 0, 35],
 584                 },
 585                 'wrap-reverse': {
 586                     'flexbox': [60, 20],
 587                     'child1': [30, 5, 0, 15],
 588                     'child2': [30, 10, 30, 10],
 589                     'child3': [60, 5, 0, 5],
 590                     'child4': [70, 20, 0, -15],
 591                     'child5': [60, 10, 0, -25],
 592                 },
 593             },
 594             'rtl': {
 595                 'wrap': {
 596                     'flexbox': [60, 20],
 597                     'child1': [30, 5, 0, 15],
 598                     'child2': [30, 10, 30, 10],
 599                     'child3': [60, 5, 0, 5],
 600                     'child4': [70, 20, 0, -15],
 601                     'child5': [60, 10, 0, -25],
 602                 },
 603                 'wrap-reverse': {
 604                     'flexbox': [60, 20],
 605                     'child1': [30, 5, 0, 0],
 606                     'child2': [30, 10, 30, 0],
 607                     'child3': [60, 5, 0, 10],
 608                     'child4': [70, 20, 0, 15],
 609                     'child5': [60, 10, 0, 35],
 610                 },
 611             },
 612         },
 613         'row-reverse': {
 614             'ltr': {
 615                 'wrap': {
 616                     'flexbox': [45, 60],
 617                     'child1': [5, 30, 0, 30],
 618                     'child2': [10, 30, 0, 0],
 619                     'child3': [5, 60, 10, 0],
 620                     'child4': [20, 70, 15, -10],
 621                     'child5': [10, 60, 35, 0],
 622                 },
 623                 'wrap-reverse': {
 624                     'flexbox': [45, 60],
 625                     'child1': [5, 30, 40, 30],
 626                     'child2': [10, 30, 35, 0],
 627                     'child3': [5, 60, 30, 0],
 628                     'child4': [20, 70, 10, -10],
 629                     'child5': [10, 60, 0, 0],
 630                 },
 631             },
 632             'rtl': {
 633                 'wrap': {
 634                     'flexbox': [45, 60],
 635                     'child1': [5, 30, 0, 0],
 636                     'child2': [10, 30, 0, 30],
 637                     'child3': [5, 60, 10, 0],
 638                     'child4': [20, 70, 15, 0],
 639                     'child5': [10, 60, 35, 0],
 640                 },
 641                 'wrap-reverse': {
 642                     'flexbox': [45, 60],
 643                     'child1': [5, 30, 40, 0],
 644                     'child2': [10, 30, 35, 30],
 645                     'child3': [5, 60, 30, 0],
 646                     'child4': [20, 70, 10, 0],
 647                     'child5': [10, 60, 0, 0],
 648                 },
 649             },
 650         },
 651         'column-reverse': {
 652             'ltr': {
 653                 'wrap': {
 654                     'flexbox': [60, 20],
 655                     'child1': [30, 5, 30, 0],
 656                     'child2': [30, 10, 0, 0],
 657                     'child3': [60, 5, 0, 10],
 658                     'child4': [70, 20, -10, 15],
 659                     'child5': [60, 10, 0, 35],
 660                 },
 661                 'wrap-reverse': {
 662                     'flexbox': [60, 20],
 663                     'child1': [30, 5, 30, 15],
 664                     'child2': [30, 10, 0, 10],
 665                     'child3': [60, 5, 0, 5],
 666                     'child4': [70, 20, -10, -15],
 667                     'child5': [60, 10, 0, -25],
 668                 },
 669             },
 670             'rtl': {
 671                 'wrap': {
 672                     'flexbox': [60, 20],
 673                     'child1': [30, 5, 30, 15],
 674                     'child2': [30, 10, 0, 10],
 675                     'child3': [60, 5, 0, 5],
 676                     'child4': [70, 20, -10, -15],
 677                     'child5': [60, 10, 0, -25],
 678                 },
 679                 'wrap-reverse': {
 680                     'flexbox': [60, 20],
 681                     'child1': [30, 5, 30, 0],
 682                     'child2': [30, 10, 0, 0],
 683                     'child3': [60, 5, 0, 10],
 684                     'child4': [70, 20, -10, 15],
 685                     'child5': [60, 10, 0, 35],
 686                 },
 687             },
 688         },
 689     },
 690 };
 691
 692 function mainAxisDirection(writingMode, flexDirection)
 693 {
 694     if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
 695         || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
 696         return 'width';
 697     return 'height';
 698 }
 699
 700 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, expectations)
 701 {
 702     var child = document.createElement('div');
 703     child.setAttribute('style', 'flex: 1 0 ' + preferredSize + 'px;'
 704         + crossAxis + ': ' + crossAxisLength + 'px;');
 705
 706     child.setAttribute("data-expected-width", expectations[0]);
 707     child.setAttribute("data-expected-height", expectations[1]);
 708     child.setAttribute("data-offset-x", expectations[2]);
 709     child.setAttribute("data-offset-y", expectations[3]);
 710
 711     flexbox.appendChild(child);
 712 }
 713
 714 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
 715 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
 716 var directions = ['ltr', 'rtl'];
 717 var wraps = ['wrap', 'wrap-reverse'];
 718
 719 writingModes.forEach(function(writingMode) {
 720     flexDirections.forEach(function(flexDirection) {
 721         directions.forEach(function(direction) {
 722             wraps.forEach(function(wrap) {
 723                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap;
 724                 var title = document.createElement('div');
 725                 title.className = 'title';
 726                 title.innerHTML = flexboxClassName;
 727                 document.body.appendChild(title);
 728
 729                 var mainAxis = mainAxisDirection(writingMode, flexDirection);
 730                 var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
 731
 732                 var flexbox = document.createElement('div');
 733                 flexbox.className = 'flexbox ' + flexboxClassName;
 734                 flexbox.setAttribute('style', mainAxis + ': 60px');
 735
 736                 var testExpectations = expectations[writingMode][flexDirection][direction][wrap];
 737                 addChild(flexbox, mainAxis, crossAxis, 25, 5, testExpectations['child1']);
 738                 addChild(flexbox, mainAxis, crossAxis, 25, 10, testExpectations['child2']);
 739                 addChild(flexbox, mainAxis, crossAxis, 25, 5, testExpectations['child3']);
 740                 addChild(flexbox, mainAxis, crossAxis, 70, 20, testExpectations['child4']);
 741                 addChild(flexbox, mainAxis, crossAxis, 5, 10, testExpectations['child5']);
 742
 743                 flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]);
 744                 flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]);
 745
 746                 document.body.appendChild(flexbox);
 747             })
 748         })
 749     })
 750 })
 751 </script>
 752 </body>
 753 </html>