third_party/WebKit/LayoutTests/css3/flexbox/multiline-align-self.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 .title {
  12     margin-top: 1em;
  13 }
  14 .ltr {
  15     direction: ltr;
  16 }
  17 .rtl {
  18     direction: rtl;
  19 }
  20 .horizontal-tb {
  21     -webkit-writing-mode: horizontal-tb;
  22 }
  23 .horizontal-bt {
  24     -webkit-writing-mode: horizontal-bt;
  25 }
  26 .vertical-rl {
  27     -webkit-writing-mode: vertical-rl;
  28 }
  29 .vertical-lr {
  30     -webkit-writing-mode: vertical-lr;
  31 }
  32 .row {
  33     flex-flow: row;
  34 }
  35 .row-reverse {
  36     flex-flow: row-reverse;
  37 }
  38 .column {
  39     flex-flow: column;
  40 }
  41 .column-reverse {
  42     flex-flow: column-reverse;
  43 }
  44 .wrap {
  45   flex-wrap: wrap;
  46 }
  47 .wrap-reverse {
  48   flex-wrap: wrap-reverse;
  49 }
  50 .flexbox > :nth-child(1) {
  51     background-color: #0f0;
  52 }
  53 .flexbox > :nth-child(2) {
  54     background-color: #0d0;
  55 }
  56 .flexbox > :nth-child(3) {
  57     background-color: #0b0;
  58 }
  59 .flexbox > :nth-child(4) {
  60     background-color: #090;
  61 }
  62 .flexbox > :nth-child(5) {
  63     background-color: #070;
  64 }
  65 .flexbox > :nth-child(6) {
  66     background-color: #050;
  67 }
  68 .flexbox > :nth-child(7) {
  69     background-color: #030;
  70 }
  71
  72 .flexbox > :nth-child(8) {
  73     background-color: #00f;
  74 }
  75 .flexbox > :nth-child(9) {
  76     background-color: #00d;
  77 }
  78 .flexbox > :nth-child(10) {
  79     background-color: #00b;
  80 }
  81 .flexbox > :nth-child(11) {
  82     background-color: #009;
  83 }
  84 .flexbox > :nth-child(12) {
  85     background-color: #007;
  86 }
  87 .flexbox > :nth-child(13) {
  88     background-color: #005;
  89 }
  90 .flexbox > :nth-child(14) {
  91     background-color: #003;
  92 }
  93 </style>
  94 <script src="../../resources/check-layout.js"></script>
  95 <body onload="checkLayout('.flexbox')">
  96
  97 <script>
  98 var expectations = {
  99     'horizontal-tb': {
 100         'row': {
 101             'ltr': {
 102                 'wrap': {
 103                     'flexbox': [70, 60],
 104                     'child1': [10, 10, 0, 0],
 105                     'child2': [10, 10, 10, 10],
 106                     'child3': [10, 10, 20, 20],
 107                     'child4': [10, 10, 30, 5],
 108                     'child5': [10, 10, 40, 5],
 109                     'child6': [10, 30, 50, 0],
 110                     'child7': [10, 30, 60, 0],
 111                     'child8': [10, 10, 0, 30],
 112                     'child9': [10, 10, 10, 40],
 113                     'child10': [10, 10, 20, 50],
 114                     'child11': [10, 10, 30, 35],
 115                     'child12': [10, 10, 40, 35],
 116                     'child13': [10, 30, 50, 30],
 117                     'child14': [10, 30, 60, 30],
 118                 },
 119                 'wrap-reverse': {
 120                     'flexbox': [70, 60],
 121                     'child1': [10, 10, 0, 50],
 122                     'child2': [10, 10, 10, 40],
 123                     'child3': [10, 10, 20, 30],
 124                     'child4': [10, 10, 30, 50],
 125                     'child5': [10, 10, 40, 50],
 126                     'child6': [10, 30, 50, 30],
 127                     'child7': [10, 30, 60, 30],
 128                     'child8': [10, 10, 0, 20],
 129                     'child9': [10, 10, 10, 10],
 130                     'child10': [10, 10, 20, 0],
 131                     'child11': [10, 10, 30, 20],
 132                     'child12': [10, 10, 40, 20],
 133                     'child13': [10, 30, 50, 0],
 134                     'child14': [10, 30, 60, 0],
 135                 },
 136             },
 137             'rtl': {
 138                 'wrap': {
 139                     'flexbox': [70, 60],
 140                     'child1': [10, 10, 60, 0],
 141                     'child2': [10, 10, 50, 10],
 142                     'child3': [10, 10, 40, 20],
 143                     'child4': [10, 10, 30, 5],
 144                     'child5': [10, 10, 20, 5],
 145                     'child6': [10, 30, 10, 0],
 146                     'child7': [10, 30, 0, 0],
 147                     'child8': [10, 10, 60, 30],
 148                     'child9': [10, 10, 50, 40],
 149                     'child10': [10, 10, 40, 50],
 150                     'child11': [10, 10, 30, 35],
 151                     'child12': [10, 10, 20, 35],
 152                     'child13': [10, 30, 10, 30],
 153                     'child14': [10, 30, 0, 30],
 154                 },
 155                 'wrap-reverse': {
 156                     'flexbox': [70, 60],
 157                     'child1': [10, 10, 60, 50],
 158                     'child2': [10, 10, 50, 40],
 159                     'child3': [10, 10, 40, 30],
 160                     'child4': [10, 10, 30, 50],
 161                     'child5': [10, 10, 20, 50],
 162                     'child6': [10, 30, 10, 30],
 163                     'child7': [10, 30, 0, 30],
 164                     'child8': [10, 10, 60, 20],
 165                     'child9': [10, 10, 50, 10],
 166                     'child10': [10, 10, 40, 0],
 167                     'child11': [10, 10, 30, 20],
 168                     'child12': [10, 10, 20, 20],
 169                     'child13': [10, 30, 10, 0],
 170                     'child14': [10, 30, 0, 0],
 171                 },
 172             },
 173         },
 174         'column': {
 175             'ltr': {
 176                 'wrap': {
 177                     'flexbox': [600, 70],
 178                     'child1': [10, 10, 0, 0],
 179                     'child2': [10, 10, 10, 10],
 180                     'child3': [10, 10, 20, 20],
 181                     'child4': [10, 10, 0, 30],
 182                     'child5': [10, 10, 5, 40],
 183                     'child6': [30, 10, 0, 50],
 184                     'child7': [30, 10, 0, 60],
 185                     'child8': [10, 10, 30, 0],
 186                     'child9': [10, 10, 40, 10],
 187                     'child10': [10, 10, 50, 20],
 188                     'child11': [10, 10, 30, 30],
 189                     'child12': [10, 10, 35, 40],
 190                     'child13': [30, 10, 30, 50],
 191                     'child14': [30, 10, 30, 60],
 192                 },
 193                 'wrap-reverse': {
 194                     'flexbox': [600, 70],
 195                     'child1': [10, 10, 590, 0],
 196                     'child2': [10, 10, 580, 10],
 197                     'child3': [10, 10, 570, 20],
 198                     'child4': [10, 10, 590, 30],
 199                     'child5': [10, 10, 590, 40],
 200                     'child6': [30, 10, 570, 50],
 201                     'child7': [30, 10, 570, 60],
 202                     'child8': [10, 10, 560, 0],
 203                     'child9': [10, 10, 550, 10],
 204                     'child10': [10, 10, 540, 20],
 205                     'child11': [10, 10, 560, 30],
 206                     'child12': [10, 10, 560, 40],
 207                     'child13': [30, 10, 540, 50],
 208                     'child14': [30, 10, 540, 60],
 209                 },
 210             },
 211             'rtl': {
 212                 'wrap': {
 213                     'flexbox': [600, 70],
 214                     'child1': [10, 10, 590, 0],
 215                     'child2': [10, 10, 580, 10],
 216                     'child3': [10, 10, 570, 20],
 217                     'child4': [10, 10, 590, 30],
 218                     'child5': [10, 10, 585, 40],
 219                     'child6': [30, 10, 570, 50],
 220                     'child7': [30, 10, 570, 60],
 221                     'child8': [10, 10, 560, 0],
 222                     'child9': [10, 10, 550, 10],
 223                     'child10': [10, 10, 540, 20],
 224                     'child11': [10, 10, 560, 30],
 225                     'child12': [10, 10, 555, 40],
 226                     'child13': [30, 10, 540, 50],
 227                     'child14': [30, 10, 540, 60],
 228                 },
 229                 'wrap-reverse': {
 230                     'flexbox': [600, 70],
 231                     'child1': [10, 10, 0, 0],
 232                     'child2': [10, 10, 10, 10],
 233                     'child3': [10, 10, 20, 20],
 234                     'child4': [10, 10, 0, 30],
 235                     'child5': [10, 10, 0, 40],
 236                     'child6': [30, 10, 0, 50],
 237                     'child7': [30, 10, 0, 60],
 238                     'child8': [10, 10, 30, 0],
 239                     'child9': [10, 10, 40, 10],
 240                     'child10': [10, 10, 50, 20],
 241                     'child11': [10, 10, 30, 30],
 242                     'child12': [10, 10, 30, 40],
 243                     'child13': [30, 10, 30, 50],
 244                     'child14': [30, 10, 30, 60],
 245                 },
 246             },
 247         },
 248         'row-reverse': {
 249             'ltr': {
 250                 'wrap': {
 251                     'flexbox': [70, 60],
 252                     'child1': [10, 10, 60, 0],
 253                     'child2': [10, 10, 50, 10],
 254                     'child3': [10, 10, 40, 20],
 255                     'child4': [10, 10, 30, 5],
 256                     'child5': [10, 10, 20, 5],
 257                     'child6': [10, 30, 10, 0],
 258                     'child7': [10, 30, 0, 0],
 259                     'child8': [10, 10, 60, 30],
 260                     'child9': [10, 10, 50, 40],
 261                     'child10': [10, 10, 40, 50],
 262                     'child11': [10, 10, 30, 35],
 263                     'child12': [10, 10, 20, 35],
 264                     'child13': [10, 30, 10, 30],
 265                     'child14': [10, 30, 0, 30],
 266                 },
 267                 'wrap-reverse': {
 268                     'flexbox': [70, 60],
 269                     'child1': [10, 10, 60, 50],
 270                     'child2': [10, 10, 50, 40],
 271                     'child3': [10, 10, 40, 30],
 272                     'child4': [10, 10, 30, 50],
 273                     'child5': [10, 10, 20, 50],
 274                     'child6': [10, 30, 10, 30],
 275                     'child7': [10, 30, 0, 30],
 276                     'child8': [10, 10, 60, 20],
 277                     'child9': [10, 10, 50, 10],
 278                     'child10': [10, 10, 40, 0],
 279                     'child11': [10, 10, 30, 20],
 280                     'child12': [10, 10, 20, 20],
 281                     'child13': [10, 30, 10, 0],
 282                     'child14': [10, 30, 0, 0],
 283                 },
 284             },
 285             'rtl': {
 286                 'wrap': {
 287                     'flexbox': [70, 60],
 288                     'child1': [10, 10, 0, 0],
 289                     'child2': [10, 10, 10, 10],
 290                     'child3': [10, 10, 20, 20],
 291                     'child4': [10, 10, 30, 5],
 292                     'child5': [10, 10, 40, 5],
 293                     'child6': [10, 30, 50, 0],
 294                     'child7': [10, 30, 60, 0],
 295                     'child8': [10, 10, 0, 30],
 296                     'child9': [10, 10, 10, 40],
 297                     'child10': [10, 10, 20, 50],
 298                     'child11': [10, 10, 30, 35],
 299                     'child12': [10, 10, 40, 35],
 300                     'child13': [10, 30, 50, 30],
 301                     'child14': [10, 30, 60, 30],
 302                 },
 303                 'wrap-reverse': {
 304                     'flexbox': [70, 60],
 305                     'child1': [10, 10, 0, 50],
 306                     'child2': [10, 10, 10, 40],
 307                     'child3': [10, 10, 20, 30],
 308                     'child4': [10, 10, 30, 50],
 309                     'child5': [10, 10, 40, 50],
 310                     'child6': [10, 30, 50, 30],
 311                     'child7': [10, 30, 60, 30],
 312                     'child8': [10, 10, 0, 20],
 313                     'child9': [10, 10, 10, 10],
 314                     'child10': [10, 10, 20, 0],
 315                     'child11': [10, 10, 30, 20],
 316                     'child12': [10, 10, 40, 20],
 317                     'child13': [10, 30, 50, 0],
 318                     'child14': [10, 30, 60, 0],
 319                 },
 320             },
 321         },
 322         'column-reverse': {
 323             'ltr': {
 324                 'wrap': {
 325                     'flexbox': [600, 70],
 326                     'child1': [10, 10, 0, 60],
 327                     'child2': [10, 10, 10, 50],
 328                     'child3': [10, 10, 20, 40],
 329                     'child4': [10, 10, 0, 30],
 330                     'child5': [10, 10, 5, 20],
 331                     'child6': [30, 10, 0, 10],
 332                     'child7': [30, 10, 0, 0],
 333                     'child8': [10, 10, 30, 60],
 334                     'child9': [10, 10, 40, 50],
 335                     'child10': [10, 10, 50, 40],
 336                     'child11': [10, 10, 30, 30],
 337                     'child12': [10, 10, 35, 20],
 338                     'child13': [30, 10, 30, 10],
 339                     'child14': [30, 10, 30, 0],
 340                 },
 341                 'wrap-reverse': {
 342                     'flexbox': [600, 70],
 343                     'child1': [10, 10, 590, 60],
 344                     'child2': [10, 10, 580, 50],
 345                     'child3': [10, 10, 570, 40],
 346                     'child4': [10, 10, 590, 30],
 347                     'child5': [10, 10, 590, 20],
 348                     'child6': [30, 10, 570, 10],
 349                     'child7': [30, 10, 570, 0],
 350                     'child8': [10, 10, 560, 60],
 351                     'child9': [10, 10, 550, 50],
 352                     'child10': [10, 10, 540, 40],
 353                     'child11': [10, 10, 560, 30],
 354                     'child12': [10, 10, 560, 20],
 355                     'child13': [30, 10, 540, 10],
 356                     'child14': [30, 10, 540, 0],
 357                 },
 358             },
 359             'rtl': {
 360                 'wrap': {
 361                     'flexbox': [600, 70],
 362                     'child1': [10, 10, 590, 60],
 363                     'child2': [10, 10, 580, 50],
 364                     'child3': [10, 10, 570, 40],
 365                     'child4': [10, 10, 590, 30],
 366                     'child5': [10, 10, 585, 20],
 367                     'child6': [30, 10, 570, 10],
 368                     'child7': [30, 10, 570, 0],
 369                     'child8': [10, 10, 560, 60],
 370                     'child9': [10, 10, 550, 50],
 371                     'child10': [10, 10, 540, 40],
 372                     'child11': [10, 10, 560, 30],
 373                     'child12': [10, 10, 555, 20],
 374                     'child13': [30, 10, 540, 10],
 375                     'child14': [30, 10, 540, 0],
 376                 },
 377                 'wrap-reverse': {
 378                     'flexbox': [600, 70],
 379                     'child1': [10, 10, 0, 60],
 380                     'child2': [10, 10, 10, 50],
 381                     'child3': [10, 10, 20, 40],
 382                     'child4': [10, 10, 0, 30],
 383                     'child5': [10, 10, 0, 20],
 384                     'child6': [30, 10, 0, 10],
 385                     'child7': [30, 10, 0, 0],
 386                     'child8': [10, 10, 30, 60],
 387                     'child9': [10, 10, 40, 50],
 388                     'child10': [10, 10, 50, 40],
 389                     'child11': [10, 10, 30, 30],
 390                     'child12': [10, 10, 30, 20],
 391                     'child13': [30, 10, 30, 10],
 392                     'child14': [30, 10, 30, 0],
 393                 },
 394             },
 395         },
 396     },
 397     'horizontal-bt': {
 398         'row': {
 399             'ltr': {
 400                 'wrap': {
 401                     'flexbox': [70, 60],
 402                     'child1': [10, 10, 0, 50],
 403                     'child2': [10, 10, 10, 40],
 404                     'child3': [10, 10, 20, 30],
 405                     'child4': [10, 10, 30, 45],
 406                     'child5': [10, 10, 40, 45],
 407                     'child6': [10, 30, 50, 30],
 408                     'child7': [10, 30, 60, 30],
 409                     'child8': [10, 10, 0, 20],
 410                     'child9': [10, 10, 10, 10],
 411                     'child10': [10, 10, 20, 0],
 412                     'child11': [10, 10, 30, 15],
 413                     'child12': [10, 10, 40, 15],
 414                     'child13': [10, 30, 50, 0],
 415                     'child14': [10, 30, 60, 0],
 416                 },
 417                 'wrap-reverse': {
 418                     'flexbox': [70, 60],
 419                     'child1': [10, 10, 0, 0],
 420                     'child2': [10, 10, 10, 10],
 421                     'child3': [10, 10, 20, 20],
 422                     'child4': [10, 10, 30, 0],
 423                     'child5': [10, 10, 40, 0],
 424                     'child6': [10, 30, 50, 0],
 425                     'child7': [10, 30, 60, 0],
 426                     'child8': [10, 10, 0, 30],
 427                     'child9': [10, 10, 10, 40],
 428                     'child10': [10, 10, 20, 50],
 429                     'child11': [10, 10, 30, 30],
 430                     'child12': [10, 10, 40, 30],
 431                     'child13': [10, 30, 50, 30],
 432                     'child14': [10, 30, 60, 30],
 433                 },
 434             },
 435             'rtl': {
 436                 'wrap': {
 437                     'flexbox': [70, 60],
 438                     'child1': [10, 10, 60, 50],
 439                     'child2': [10, 10, 50, 40],
 440                     'child3': [10, 10, 40, 30],
 441                     'child4': [10, 10, 30, 45],
 442                     'child5': [10, 10, 20, 45],
 443                     'child6': [10, 30, 10, 30],
 444                     'child7': [10, 30, 0, 30],
 445                     'child8': [10, 10, 60, 20],
 446                     'child9': [10, 10, 50, 10],
 447                     'child10': [10, 10, 40, 0],
 448                     'child11': [10, 10, 30, 15],
 449                     'child12': [10, 10, 20, 15],
 450                     'child13': [10, 30, 10, 0],
 451                     'child14': [10, 30, 0, 0],
 452                 },
 453                 'wrap-reverse': {
 454                     'flexbox': [70, 60],
 455                     'child1': [10, 10, 60, 0],
 456                     'child2': [10, 10, 50, 10],
 457                     'child3': [10, 10, 40, 20],
 458                     'child4': [10, 10, 30, 0],
 459                     'child5': [10, 10, 20, 0],
 460                     'child6': [10, 30, 10, 0],
 461                     'child7': [10, 30, 0, 0],
 462                     'child8': [10, 10, 60, 30],
 463                     'child9': [10, 10, 50, 40],
 464                     'child10': [10, 10, 40, 50],
 465                     'child11': [10, 10, 30, 30],
 466                     'child12': [10, 10, 20, 30],
 467                     'child13': [10, 30, 10, 30],
 468                     'child14': [10, 30, 0, 30],
 469                 },
 470             },
 471         },
 472         'column': {
 473             'ltr': {
 474                 'wrap': {
 475                     'flexbox': [600, 70],
 476                     'child1': [10, 10, 0, 60],
 477                     'child2': [10, 10, 10, 50],
 478                     'child3': [10, 10, 20, 40],
 479                     'child4': [10, 10, 0, 30],
 480                     'child5': [10, 10, 5, 20],
 481                     'child6': [30, 10, 0, 10],
 482                     'child7': [30, 10, 0, 0],
 483                     'child8': [10, 10, 30, 60],
 484                     'child9': [10, 10, 40, 50],
 485                     'child10': [10, 10, 50, 40],
 486                     'child11': [10, 10, 30, 30],
 487                     'child12': [10, 10, 35, 20],
 488                     'child13': [30, 10, 30, 10],
 489                     'child14': [30, 10, 30, 0],
 490                 },
 491                 'wrap-reverse': {
 492                     'flexbox': [600, 70],
 493                     'child1': [10, 10, 590, 60],
 494                     'child2': [10, 10, 580, 50],
 495                     'child3': [10, 10, 570, 40],
 496                     'child4': [10, 10, 590, 30],
 497                     'child5': [10, 10, 590, 20],
 498                     'child6': [30, 10, 570, 10],
 499                     'child7': [30, 10, 570, 0],
 500                     'child8': [10, 10, 560, 60],
 501                     'child9': [10, 10, 550, 50],
 502                     'child10': [10, 10, 540, 40],
 503                     'child11': [10, 10, 560, 30],
 504                     'child12': [10, 10, 560, 20],
 505                     'child13': [30, 10, 540, 10],
 506                     'child14': [30, 10, 540, 0],
 507                 },
 508             },
 509             'rtl': {
 510                 'wrap': {
 511                     'flexbox': [600, 70],
 512                     'child1': [10, 10, 590, 60],
 513                     'child2': [10, 10, 580, 50],
 514                     'child3': [10, 10, 570, 40],
 515                     'child4': [10, 10, 590, 30],
 516                     'child5': [10, 10, 585, 20],
 517                     'child6': [30, 10, 570, 10],
 518                     'child7': [30, 10, 570, 0],
 519                     'child8': [10, 10, 560, 60],
 520                     'child9': [10, 10, 550, 50],
 521                     'child10': [10, 10, 540, 40],
 522                     'child11': [10, 10, 560, 30],
 523                     'child12': [10, 10, 555, 20],
 524                     'child13': [30, 10, 540, 10],
 525                     'child14': [30, 10, 540, 0],
 526                 },
 527                 'wrap-reverse': {
 528                     'flexbox': [600, 70],
 529                     'child1': [10, 10, 0, 60],
 530                     'child2': [10, 10, 10, 50],
 531                     'child3': [10, 10, 20, 40],
 532                     'child4': [10, 10, 0, 30],
 533                     'child5': [10, 10, 0, 20],
 534                     'child6': [30, 10, 0, 10],
 535                     'child7': [30, 10, 0, 0],
 536                     'child8': [10, 10, 30, 60],
 537                     'child9': [10, 10, 40, 50],
 538                     'child10': [10, 10, 50, 40],
 539                     'child11': [10, 10, 30, 30],
 540                     'child12': [10, 10, 30, 20],
 541                     'child13': [30, 10, 30, 10],
 542                     'child14': [30, 10, 30, 0],
 543                 },
 544             },
 545         },
 546         'row-reverse': {
 547             'ltr': {
 548                 'wrap': {
 549                     'flexbox': [70, 60],
 550                     'child1': [10, 10, 60, 50],
 551                     'child2': [10, 10, 50, 40],
 552                     'child3': [10, 10, 40, 30],
 553                     'child4': [10, 10, 30, 45],
 554                     'child5': [10, 10, 20, 45],
 555                     'child6': [10, 30, 10, 30],
 556                     'child7': [10, 30, 0, 30],
 557                     'child8': [10, 10, 60, 20],
 558                     'child9': [10, 10, 50, 10],
 559                     'child10': [10, 10, 40, 0],
 560                     'child11': [10, 10, 30, 15],
 561                     'child12': [10, 10, 20, 15],
 562                     'child13': [10, 30, 10, 0],
 563                     'child14': [10, 30, 0, 0],
 564                 },
 565                 'wrap-reverse': {
 566                     'flexbox': [70, 60],
 567                     'child1': [10, 10, 60, 0],
 568                     'child2': [10, 10, 50, 10],
 569                     'child3': [10, 10, 40, 20],
 570                     'child4': [10, 10, 30, 0],
 571                     'child5': [10, 10, 20, 0],
 572                     'child6': [10, 30, 10, 0],
 573                     'child7': [10, 30, 0, 0],
 574                     'child8': [10, 10, 60, 30],
 575                     'child9': [10, 10, 50, 40],
 576                     'child10': [10, 10, 40, 50],
 577                     'child11': [10, 10, 30, 30],
 578                     'child12': [10, 10, 20, 30],
 579                     'child13': [10, 30, 10, 30],
 580                     'child14': [10, 30, 0, 30],
 581                 },
 582             },
 583             'rtl': {
 584                 'wrap': {
 585                     'flexbox': [70, 60],
 586                     'child1': [10, 10, 0, 50],
 587                     'child2': [10, 10, 10, 40],
 588                     'child3': [10, 10, 20, 30],
 589                     'child4': [10, 10, 30, 45],
 590                     'child5': [10, 10, 40, 45],
 591                     'child6': [10, 30, 50, 30],
 592                     'child7': [10, 30, 60, 30],
 593                     'child8': [10, 10, 0, 20],
 594                     'child9': [10, 10, 10, 10],
 595                     'child10': [10, 10, 20, 0],
 596                     'child11': [10, 10, 30, 15],
 597                     'child12': [10, 10, 40, 15],
 598                     'child13': [10, 30, 50, 0],
 599                     'child14': [10, 30, 60, 0],
 600                 },
 601                 'wrap-reverse': {
 602                     'flexbox': [70, 60],
 603                     'child1': [10, 10, 0, 0],
 604                     'child2': [10, 10, 10, 10],
 605                     'child3': [10, 10, 20, 20],
 606                     'child4': [10, 10, 30, 0],
 607                     'child5': [10, 10, 40, 0],
 608                     'child6': [10, 30, 50, 0],
 609                     'child7': [10, 30, 60, 0],
 610                     'child8': [10, 10, 0, 30],
 611                     'child9': [10, 10, 10, 40],
 612                     'child10': [10, 10, 20, 50],
 613                     'child11': [10, 10, 30, 30],
 614                     'child12': [10, 10, 40, 30],
 615                     'child13': [10, 30, 50, 30],
 616                     'child14': [10, 30, 60, 30],
 617                 },
 618             },
 619         },
 620         'column-reverse': {
 621             'ltr': {
 622                 'wrap': {
 623                     'flexbox': [600, 70],
 624                     'child1': [10, 10, 0, 0],
 625                     'child2': [10, 10, 10, 10],
 626                     'child3': [10, 10, 20, 20],
 627                     'child4': [10, 10, 0, 30],
 628                     'child5': [10, 10, 5, 40],
 629                     'child6': [30, 10, 0, 50],
 630                     'child7': [30, 10, 0, 60],
 631                     'child8': [10, 10, 30, 0],
 632                     'child9': [10, 10, 40, 10],
 633                     'child10': [10, 10, 50, 20],
 634                     'child11': [10, 10, 30, 30],
 635                     'child12': [10, 10, 35, 40],
 636                     'child13': [30, 10, 30, 50],
 637                     'child14': [30, 10, 30, 60],
 638                 },
 639                 'wrap-reverse': {
 640                     'flexbox': [600, 70],
 641                     'child1': [10, 10, 590, 0],
 642                     'child2': [10, 10, 580, 10],
 643                     'child3': [10, 10, 570, 20],
 644                     'child4': [10, 10, 590, 30],
 645                     'child5': [10, 10, 590, 40],
 646                     'child6': [30, 10, 570, 50],
 647                     'child7': [30, 10, 570, 60],
 648                     'child8': [10, 10, 560, 0],
 649                     'child9': [10, 10, 550, 10],
 650                     'child10': [10, 10, 540, 20],
 651                     'child11': [10, 10, 560, 30],
 652                     'child12': [10, 10, 560, 40],
 653                     'child13': [30, 10, 540, 50],
 654                     'child14': [30, 10, 540, 60],
 655                 },
 656             },
 657             'rtl': {
 658                 'wrap': {
 659                     'flexbox': [600, 70],
 660                     'child1': [10, 10, 590, 0],
 661                     'child2': [10, 10, 580, 10],
 662                     'child3': [10, 10, 570, 20],
 663                     'child4': [10, 10, 590, 30],
 664                     'child5': [10, 10, 585, 40],
 665                     'child6': [30, 10, 570, 50],
 666                     'child7': [30, 10, 570, 60],
 667                     'child8': [10, 10, 560, 0],
 668                     'child9': [10, 10, 550, 10],
 669                     'child10': [10, 10, 540, 20],
 670                     'child11': [10, 10, 560, 30],
 671                     'child12': [10, 10, 555, 40],
 672                     'child13': [30, 10, 540, 50],
 673                     'child14': [30, 10, 540, 60],
 674                 },
 675                 'wrap-reverse': {
 676                     'flexbox': [600, 70],
 677                     'child1': [10, 10, 0, 0],
 678                     'child2': [10, 10, 10, 10],
 679                     'child3': [10, 10, 20, 20],
 680                     'child4': [10, 10, 0, 30],
 681                     'child5': [10, 10, 0, 40],
 682                     'child6': [30, 10, 0, 50],
 683                     'child7': [30, 10, 0, 60],
 684                     'child8': [10, 10, 30, 0],
 685                     'child9': [10, 10, 40, 10],
 686                     'child10': [10, 10, 50, 20],
 687                     'child11': [10, 10, 30, 30],
 688                     'child12': [10, 10, 30, 40],
 689                     'child13': [30, 10, 30, 50],
 690                     'child14': [30, 10, 30, 60],
 691                 },
 692             },
 693         },
 694     },
 695     'vertical-rl': {
 696         'row': {
 697             'ltr': {
 698                 'wrap': {
 699                     'flexbox': [60, 70],
 700                     'child1': [10, 10, 50, 0],
 701                     'child2': [10, 10, 40, 10],
 702                     'child3': [10, 10, 30, 20],
 703                     'child4': [10, 10, 45, 30],
 704                     'child5': [10, 10, 45, 40],
 705                     'child6': [30, 10, 30, 50],
 706                     'child7': [30, 10, 30, 60],
 707                     'child8': [10, 10, 20, 0],
 708                     'child9': [10, 10, 10, 10],
 709                     'child10': [10, 10, 0, 20],
 710                     'child11': [10, 10, 15, 30],
 711                     'child12': [10, 10, 15, 40],
 712                     'child13': [30, 10, 0, 50],
 713                     'child14': [30, 10, 0, 60],
 714                 },
 715                 'wrap-reverse': {
 716                     'flexbox': [60, 70],
 717                     'child1': [10, 10, 0, 0],
 718                     'child2': [10, 10, 10, 10],
 719                     'child3': [10, 10, 20, 20],
 720                     'child4': [10, 10, 0, 30],
 721                     'child5': [10, 10, 0, 40],
 722                     'child6': [30, 10, 0, 50],
 723                     'child7': [30, 10, 0, 60],
 724                     'child8': [10, 10, 30, 0],
 725                     'child9': [10, 10, 40, 10],
 726                     'child10': [10, 10, 50, 20],
 727                     'child11': [10, 10, 30, 30],
 728                     'child12': [10, 10, 30, 40],
 729                     'child13': [30, 10, 30, 50],
 730                     'child14': [30, 10, 30, 60],
 731                 },
 732             },
 733             'rtl': {
 734                 'wrap': {
 735                     'flexbox': [60, 70],
 736                     'child1': [10, 10, 50, 60],
 737                     'child2': [10, 10, 40, 50],
 738                     'child3': [10, 10, 30, 40],
 739                     'child4': [10, 10, 45, 30],
 740                     'child5': [10, 10, 45, 20],
 741                     'child6': [30, 10, 30, 10],
 742                     'child7': [30, 10, 30, 0],
 743                     'child8': [10, 10, 20, 60],
 744                     'child9': [10, 10, 10, 50],
 745                     'child10': [10, 10, 0, 40],
 746                     'child11': [10, 10, 15, 30],
 747                     'child12': [10, 10, 15, 20],
 748                     'child13': [30, 10, 0, 10],
 749                     'child14': [30, 10, 0, 0],
 750                 },
 751                 'wrap-reverse': {
 752                     'flexbox': [60, 70],
 753                     'child1': [10, 10, 0, 60],
 754                     'child2': [10, 10, 10, 50],
 755                     'child3': [10, 10, 20, 40],
 756                     'child4': [10, 10, 0, 30],
 757                     'child5': [10, 10, 0, 20],
 758                     'child6': [30, 10, 0, 10],
 759                     'child7': [30, 10, 0, 0],
 760                     'child8': [10, 10, 30, 60],
 761                     'child9': [10, 10, 40, 50],
 762                     'child10': [10, 10, 50, 40],
 763                     'child11': [10, 10, 30, 30],
 764                     'child12': [10, 10, 30, 20],
 765                     'child13': [30, 10, 30, 10],
 766                     'child14': [30, 10, 30, 0],
 767                 },
 768             },
 769         },
 770         'column': {
 771             'ltr': {
 772                 'wrap': {
 773                     'flexbox': [70, 30],
 774                     'child1': [10, 10, 60, 0],
 775                     'child2': [10, 10, 50, 10],
 776                     'child3': [10, 10, 40, 20],
 777                     'child4': [10, 10, 30, 0],
 778                     'child5': [10, 10, 20, 5],
 779                     'child6': [10, 30, 10, 0],
 780                     'child7': [10, 30, 0, 0],
 781                     'child8': [10, 10, 60, 30],
 782                     'child9': [10, 10, 50, 40],
 783                     'child10': [10, 10, 40, 50],
 784                     'child11': [10, 10, 30, 30],
 785                     'child12': [10, 10, 20, 35],
 786                     'child13': [10, 30, 10, 30],
 787                     'child14': [10, 30, 0, 30],
 788                 },
 789                 'wrap-reverse': {
 790                     'flexbox': [70, 30],
 791                     'child1': [10, 10, 60, 20],
 792                     'child2': [10, 10, 50, 10],
 793                     'child3': [10, 10, 40, 0],
 794                     'child4': [10, 10, 30, 20],
 795                     'child5': [10, 10, 20, 20],
 796                     'child6': [10, 30, 10, 0],
 797                     'child7': [10, 30, 0, 0],
 798                     'child8': [10, 10, 60, -10],
 799                     'child9': [10, 10, 50, -20],
 800                     'child10': [10, 10, 40, -30],
 801                     'child11': [10, 10, 30, -10],
 802                     'child12': [10, 10, 20, -10],
 803                     'child13': [10, 30, 10, -30],
 804                     'child14': [10, 30, 0, -30],
 805                 },
 806             },
 807             'rtl': {
 808                 'wrap': {
 809                     'flexbox': [70, 30],
 810                     'child1': [10, 10, 60, 20],
 811                     'child2': [10, 10, 50, 10],
 812                     'child3': [10, 10, 40, 0],
 813                     'child4': [10, 10, 30, 20],
 814                     'child5': [10, 10, 20, 15],
 815                     'child6': [10, 30, 10, 0],
 816                     'child7': [10, 30, 0, 0],
 817                     'child8': [10, 10, 60, -10],
 818                     'child9': [10, 10, 50, -20],
 819                     'child10': [10, 10, 40, -30],
 820                     'child11': [10, 10, 30, -10],
 821                     'child12': [10, 10, 20, -15],
 822                     'child13': [10, 30, 10, -30],
 823                     'child14': [10, 30, 0, -30],
 824                 },
 825                 'wrap-reverse': {
 826                     'flexbox': [70, 30],
 827                     'child1': [10, 10, 60, 0],
 828                     'child2': [10, 10, 50, 10],
 829                     'child3': [10, 10, 40, 20],
 830                     'child4': [10, 10, 30, 0],
 831                     'child5': [10, 10, 20, 0],
 832                     'child6': [10, 30, 10, 0],
 833                     'child7': [10, 30, 0, 0],
 834                     'child8': [10, 10, 60, 30],
 835                     'child9': [10, 10, 50, 40],
 836                     'child10': [10, 10, 40, 50],
 837                     'child11': [10, 10, 30, 30],
 838                     'child12': [10, 10, 20, 30],
 839                     'child13': [10, 30, 10, 30],
 840                     'child14': [10, 30, 0, 30],
 841                 },
 842             },
 843         },
 844         'row-reverse': {
 845             'ltr': {
 846                 'wrap': {
 847                     'flexbox': [60, 70],
 848                     'child1': [10, 10, 50, 60],
 849                     'child2': [10, 10, 40, 50],
 850                     'child3': [10, 10, 30, 40],
 851                     'child4': [10, 10, 45, 30],
 852                     'child5': [10, 10, 45, 20],
 853                     'child6': [30, 10, 30, 10],
 854                     'child7': [30, 10, 30, 0],
 855                     'child8': [10, 10, 20, 60],
 856                     'child9': [10, 10, 10, 50],
 857                     'child10': [10, 10, 0, 40],
 858                     'child11': [10, 10, 15, 30],
 859                     'child12': [10, 10, 15, 20],
 860                     'child13': [30, 10, 0, 10],
 861                     'child14': [30, 10, 0, 0],
 862                 },
 863                 'wrap-reverse': {
 864                     'flexbox': [60, 70],
 865                     'child1': [10, 10, 0, 60],
 866                     'child2': [10, 10, 10, 50],
 867                     'child3': [10, 10, 20, 40],
 868                     'child4': [10, 10, 0, 30],
 869                     'child5': [10, 10, 0, 20],
 870                     'child6': [30, 10, 0, 10],
 871                     'child7': [30, 10, 0, 0],
 872                     'child8': [10, 10, 30, 60],
 873                     'child9': [10, 10, 40, 50],
 874                     'child10': [10, 10, 50, 40],
 875                     'child11': [10, 10, 30, 30],
 876                     'child12': [10, 10, 30, 20],
 877                     'child13': [30, 10, 30, 10],
 878                     'child14': [30, 10, 30, 0],
 879                 },
 880             },
 881             'rtl': {
 882                 'wrap': {
 883                     'flexbox': [60, 70],
 884                     'child1': [10, 10, 50, 0],
 885                     'child2': [10, 10, 40, 10],
 886                     'child3': [10, 10, 30, 20],
 887                     'child4': [10, 10, 45, 30],
 888                     'child5': [10, 10, 45, 40],
 889                     'child6': [30, 10, 30, 50],
 890                     'child7': [30, 10, 30, 60],
 891                     'child8': [10, 10, 20, 0],
 892                     'child9': [10, 10, 10, 10],
 893                     'child10': [10, 10, 0, 20],
 894                     'child11': [10, 10, 15, 30],
 895                     'child12': [10, 10, 15, 40],
 896                     'child13': [30, 10, 0, 50],
 897                     'child14': [30, 10, 0, 60],
 898                 },
 899                 'wrap-reverse': {
 900                     'flexbox': [60, 70],
 901                     'child1': [10, 10, 0, 0],
 902                     'child2': [10, 10, 10, 10],
 903                     'child3': [10, 10, 20, 20],
 904                     'child4': [10, 10, 0, 30],
 905                     'child5': [10, 10, 0, 40],
 906                     'child6': [30, 10, 0, 50],
 907                     'child7': [30, 10, 0, 60],
 908                     'child8': [10, 10, 30, 0],
 909                     'child9': [10, 10, 40, 10],
 910                     'child10': [10, 10, 50, 20],
 911                     'child11': [10, 10, 30, 30],
 912                     'child12': [10, 10, 30, 40],
 913                     'child13': [30, 10, 30, 50],
 914                     'child14': [30, 10, 30, 60],
 915                 },
 916             },
 917         },
 918         'column-reverse': {
 919             'ltr': {
 920                 'wrap': {
 921                     'flexbox': [70, 30],
 922                     'child1': [10, 10, 0, 0],
 923                     'child2': [10, 10, 10, 10],
 924                     'child3': [10, 10, 20, 20],
 925                     'child4': [10, 10, 30, 0],
 926                     'child5': [10, 10, 40, 5],
 927                     'child6': [10, 30, 50, 0],
 928                     'child7': [10, 30, 60, 0],
 929                     'child8': [10, 10, 0, 30],
 930                     'child9': [10, 10, 10, 40],
 931                     'child10': [10, 10, 20, 50],
 932                     'child11': [10, 10, 30, 30],
 933                     'child12': [10, 10, 40, 35],
 934                     'child13': [10, 30, 50, 30],
 935                     'child14': [10, 30, 60, 30],
 936                 },
 937                 'wrap-reverse': {
 938                     'flexbox': [70, 30],
 939                     'child1': [10, 10, 0, 20],
 940                     'child2': [10, 10, 10, 10],
 941                     'child3': [10, 10, 20, 0],
 942                     'child4': [10, 10, 30, 20],
 943                     'child5': [10, 10, 40, 20],
 944                     'child6': [10, 30, 50, 0],
 945                     'child7': [10, 30, 60, 0],
 946                     'child8': [10, 10, 0, -10],
 947                     'child9': [10, 10, 10, -20],
 948                     'child10': [10, 10, 20, -30],
 949                     'child11': [10, 10, 30, -10],
 950                     'child12': [10, 10, 40, -10],
 951                     'child13': [10, 30, 50, -30],
 952                     'child14': [10, 30, 60, -30],
 953                 },
 954             },
 955             'rtl': {
 956                 'wrap': {
 957                     'flexbox': [70, 30],
 958                     'child1': [10, 10, 0, 20],
 959                     'child2': [10, 10, 10, 10],
 960                     'child3': [10, 10, 20, 0],
 961                     'child4': [10, 10, 30, 20],
 962                     'child5': [10, 10, 40, 15],
 963                     'child6': [10, 30, 50, 0],
 964                     'child7': [10, 30, 60, 0],
 965                     'child8': [10, 10, 0, -10],
 966                     'child9': [10, 10, 10, -20],
 967                     'child10': [10, 10, 20, -30],
 968                     'child11': [10, 10, 30, -10],
 969                     'child12': [10, 10, 40, -15],
 970                     'child13': [10, 30, 50, -30],
 971                     'child14': [10, 30, 60, -30],
 972                 },
 973                 'wrap-reverse': {
 974                     'flexbox': [70, 30],
 975                     'child1': [10, 10, 0, 0],
 976                     'child2': [10, 10, 10, 10],
 977                     'child3': [10, 10, 20, 20],
 978                     'child4': [10, 10, 30, 0],
 979                     'child5': [10, 10, 40, 0],
 980                     'child6': [10, 30, 50, 0],
 981                     'child7': [10, 30, 60, 0],
 982                     'child8': [10, 10, 0, 30],
 983                     'child9': [10, 10, 10, 40],
 984                     'child10': [10, 10, 20, 50],
 985                     'child11': [10, 10, 30, 30],
 986                     'child12': [10, 10, 40, 30],
 987                     'child13': [10, 30, 50, 30],
 988                     'child14': [10, 30, 60, 30],
 989                 },
 990             },
 991         },
 992     },
 993     'vertical-lr': {
 994         'row': {
 995             'ltr': {
 996                 'wrap': {
 997                     'flexbox': [60, 70],
 998                     'child1': [10, 10, 0, 0],
 999                     'child2': [10, 10, 10, 10],
1000                     'child3': [10, 10, 20, 20],
1001                     'child4': [10, 10, 5, 30],
1002                     'child5': [10, 10, 5, 40],
1003                     'child6': [30, 10, 0, 50],
1004                     'child7': [30, 10, 0, 60],
1005                     'child8': [10, 10, 30, 0],
1006                     'child9': [10, 10, 40, 10],
1007                     'child10': [10, 10, 50, 20],
1008                     'child11': [10, 10, 35, 30],
1009                     'child12': [10, 10, 35, 40],
1010                     'child13': [30, 10, 30, 50],
1011                     'child14': [30, 10, 30, 60],
1012                 },
1013                 'wrap-reverse': {
1014                     'flexbox': [60, 70],
1015                     'child1': [10, 10, 50, 0],
1016                     'child2': [10, 10, 40, 10],
1017                     'child3': [10, 10, 30, 20],
1018                     'child4': [10, 10, 50, 30],
1019                     'child5': [10, 10, 50, 40],
1020                     'child6': [30, 10, 30, 50],
1021                     'child7': [30, 10, 30, 60],
1022                     'child8': [10, 10, 20, 0],
1023                     'child9': [10, 10, 10, 10],
1024                     'child10': [10, 10, 0, 20],
1025                     'child11': [10, 10, 20, 30],
1026                     'child12': [10, 10, 20, 40],
1027                     'child13': [30, 10, 0, 50],
1028                     'child14': [30, 10, 0, 60],
1029                 },
1030             },
1031             'rtl': {
1032                 'wrap': {
1033                     'flexbox': [60, 70],
1034                     'child1': [10, 10, 0, 60],
1035                     'child2': [10, 10, 10, 50],
1036                     'child3': [10, 10, 20, 40],
1037                     'child4': [10, 10, 5, 30],
1038                     'child5': [10, 10, 5, 20],
1039                     'child6': [30, 10, 0, 10],
1040                     'child7': [30, 10, 0, 0],
1041                     'child8': [10, 10, 30, 60],
1042                     'child9': [10, 10, 40, 50],
1043                     'child10': [10, 10, 50, 40],
1044                     'child11': [10, 10, 35, 30],
1045                     'child12': [10, 10, 35, 20],
1046                     'child13': [30, 10, 30, 10],
1047                     'child14': [30, 10, 30, 0],
1048                 },
1049                 'wrap-reverse': {
1050                     'flexbox': [60, 70],
1051                     'child1': [10, 10, 50, 60],
1052                     'child2': [10, 10, 40, 50],
1053                     'child3': [10, 10, 30, 40],
1054                     'child4': [10, 10, 50, 30],
1055                     'child5': [10, 10, 50, 20],
1056                     'child6': [30, 10, 30, 10],
1057                     'child7': [30, 10, 30, 0],
1058                     'child8': [10, 10, 20, 60],
1059                     'child9': [10, 10, 10, 50],
1060                     'child10': [10, 10, 0, 40],
1061                     'child11': [10, 10, 20, 30],
1062                     'child12': [10, 10, 20, 20],
1063                     'child13': [30, 10, 0, 10],
1064                     'child14': [30, 10, 0, 0],
1065                 },
1066             },
1067         },
1068         'column': {
1069             'ltr': {
1070                 'wrap': {
1071                     'flexbox': [70, 30],
1072                     'child1': [10, 10, 0, 0],
1073                     'child2': [10, 10, 10, 10],
1074                     'child3': [10, 10, 20, 20],
1075                     'child4': [10, 10, 30, 0],
1076                     'child5': [10, 10, 40, 5],
1077                     'child6': [10, 30, 50, 0],
1078                     'child7': [10, 30, 60, 0],
1079                     'child8': [10, 10, 0, 30],
1080                     'child9': [10, 10, 10, 40],
1081                     'child10': [10, 10, 20, 50],
1082                     'child11': [10, 10, 30, 30],
1083                     'child12': [10, 10, 40, 35],
1084                     'child13': [10, 30, 50, 30],
1085                     'child14': [10, 30, 60, 30],
1086                 },
1087                 'wrap-reverse': {
1088                     'flexbox': [70, 30],
1089                     'child1': [10, 10, 0, 20],
1090                     'child2': [10, 10, 10, 10],
1091                     'child3': [10, 10, 20, 0],
1092                     'child4': [10, 10, 30, 20],
1093                     'child5': [10, 10, 40, 20],
1094                     'child6': [10, 30, 50, 0],
1095                     'child7': [10, 30, 60, 0],
1096                     'child8': [10, 10, 0, -10],
1097                     'child9': [10, 10, 10, -20],
1098                     'child10': [10, 10, 20, -30],
1099                     'child11': [10, 10, 30, -10],
1100                     'child12': [10, 10, 40, -10],
1101                     'child13': [10, 30, 50, -30],
1102                     'child14': [10, 30, 60, -30],
1103                 },
1104             },
1105             'rtl': {
1106                 'wrap': {
1107                     'flexbox': [70, 30],
1108                     'child1': [10, 10, 0, 20],
1109                     'child2': [10, 10, 10, 10],
1110                     'child3': [10, 10, 20, 0],
1111                     'child4': [10, 10, 30, 20],
1112                     'child5': [10, 10, 40, 15],
1113                     'child6': [10, 30, 50, 0],
1114                     'child7': [10, 30, 60, 0],
1115                     'child8': [10, 10, 0, -10],
1116                     'child9': [10, 10, 10, -20],
1117                     'child10': [10, 10, 20, -30],
1118                     'child11': [10, 10, 30, -10],
1119                     'child12': [10, 10, 40, -15],
1120                     'child13': [10, 30, 50, -30],
1121                     'child14': [10, 30, 60, -30],
1122                 },
1123                 'wrap-reverse': {
1124                     'flexbox': [70, 30],
1125                     'child1': [10, 10, 0, 0],
1126                     'child2': [10, 10, 10, 10],
1127                     'child3': [10, 10, 20, 20],
1128                     'child4': [10, 10, 30, 0],
1129                     'child5': [10, 10, 40, 0],
1130                     'child6': [10, 30, 50, 0],
1131                     'child7': [10, 30, 60, 0],
1132                     'child8': [10, 10, 0, 30],
1133                     'child9': [10, 10, 10, 40],
1134                     'child10': [10, 10, 20, 50],
1135                     'child11': [10, 10, 30, 30],
1136                     'child12': [10, 10, 40, 30],
1137                     'child13': [10, 30, 50, 30],
1138                     'child14': [10, 30, 60, 30],
1139                 },
1140             },
1141         },
1142         'row-reverse': {
1143             'ltr': {
1144                 'wrap': {
1145                     'flexbox': [60, 70],
1146                     'child1': [10, 10, 0, 60],
1147                     'child2': [10, 10, 10, 50],
1148                     'child3': [10, 10, 20, 40],
1149                     'child4': [10, 10, 5, 30],
1150                     'child5': [10, 10, 5, 20],
1151                     'child6': [30, 10, 0, 10],
1152                     'child7': [30, 10, 0, 0],
1153                     'child8': [10, 10, 30, 60],
1154                     'child9': [10, 10, 40, 50],
1155                     'child10': [10, 10, 50, 40],
1156                     'child11': [10, 10, 35, 30],
1157                     'child12': [10, 10, 35, 20],
1158                     'child13': [30, 10, 30, 10],
1159                     'child14': [30, 10, 30, 0],
1160                 },
1161                 'wrap-reverse': {
1162                     'flexbox': [60, 70],
1163                     'child1': [10, 10, 50, 60],
1164                     'child2': [10, 10, 40, 50],
1165                     'child3': [10, 10, 30, 40],
1166                     'child4': [10, 10, 50, 30],
1167                     'child5': [10, 10, 50, 20],
1168                     'child6': [30, 10, 30, 10],
1169                     'child7': [30, 10, 30, 0],
1170                     'child8': [10, 10, 20, 60],
1171                     'child9': [10, 10, 10, 50],
1172                     'child10': [10, 10, 0, 40],
1173                     'child11': [10, 10, 20, 30],
1174                     'child12': [10, 10, 20, 20],
1175                     'child13': [30, 10, 0, 10],
1176                     'child14': [30, 10, 0, 0],
1177                 },
1178             },
1179             'rtl': {
1180                 'wrap': {
1181                     'flexbox': [60, 70],
1182                     'child1': [10, 10, 0, 0],
1183                     'child2': [10, 10, 10, 10],
1184                     'child3': [10, 10, 20, 20],
1185                     'child4': [10, 10, 5, 30],
1186                     'child5': [10, 10, 5, 40],
1187                     'child6': [30, 10, 0, 50],
1188                     'child7': [30, 10, 0, 60],
1189                     'child8': [10, 10, 30, 0],
1190                     'child9': [10, 10, 40, 10],
1191                     'child10': [10, 10, 50, 20],
1192                     'child11': [10, 10, 35, 30],
1193                     'child12': [10, 10, 35, 40],
1194                     'child13': [30, 10, 30, 50],
1195                     'child14': [30, 10, 30, 60],
1196                 },
1197                 'wrap-reverse': {
1198                     'flexbox': [60, 70],
1199                     'child1': [10, 10, 50, 0],
1200                     'child2': [10, 10, 40, 10],
1201                     'child3': [10, 10, 30, 20],
1202                     'child4': [10, 10, 50, 30],
1203                     'child5': [10, 10, 50, 40],
1204                     'child6': [30, 10, 30, 50],
1205                     'child7': [30, 10, 30, 60],
1206                     'child8': [10, 10, 20, 0],
1207                     'child9': [10, 10, 10, 10],
1208                     'child10': [10, 10, 0, 20],
1209                     'child11': [10, 10, 20, 30],
1210                     'child12': [10, 10, 20, 40],
1211                     'child13': [30, 10, 0, 50],
1212                     'child14': [30, 10, 0, 60],
1213                 },
1214             },
1215         },
1216         'column-reverse': {
1217             'ltr': {
1218                 'wrap': {
1219                     'flexbox': [70, 30],
1220                     'child1': [10, 10, 60, 0],
1221                     'child2': [10, 10, 50, 10],
1222                     'child3': [10, 10, 40, 20],
1223                     'child4': [10, 10, 30, 0],
1224                     'child5': [10, 10, 20, 5],
1225                     'child6': [10, 30, 10, 0],
1226                     'child7': [10, 30, 0, 0],
1227                     'child8': [10, 10, 60, 30],
1228                     'child9': [10, 10, 50, 40],
1229                     'child10': [10, 10, 40, 50],
1230                     'child11': [10, 10, 30, 30],
1231                     'child12': [10, 10, 20, 35],
1232                     'child13': [10, 30, 10, 30],
1233                     'child14': [10, 30, 0, 30],
1234                 },
1235                 'wrap-reverse': {
1236                     'flexbox': [70, 30],
1237                     'child1': [10, 10, 60, 20],
1238                     'child2': [10, 10, 50, 10],
1239                     'child3': [10, 10, 40, 0],
1240                     'child4': [10, 10, 30, 20],
1241                     'child5': [10, 10, 20, 20],
1242                     'child6': [10, 30, 10, 0],
1243                     'child7': [10, 30, 0, 0],
1244                     'child8': [10, 10, 60, -10],
1245                     'child9': [10, 10, 50, -20],
1246                     'child10': [10, 10, 40, -30],
1247                     'child11': [10, 10, 30, -10],
1248                     'child12': [10, 10, 20, -10],
1249                     'child13': [10, 30, 10, -30],
1250                     'child14': [10, 30, 0, -30],
1251                 },
1252             },
1253             'rtl': {
1254                 'wrap': {
1255                     'flexbox': [70, 30],
1256                     'child1': [10, 10, 60, 20],
1257                     'child2': [10, 10, 50, 10],
1258                     'child3': [10, 10, 40, 0],
1259                     'child4': [10, 10, 30, 20],
1260                     'child5': [10, 10, 20, 15],
1261                     'child6': [10, 30, 10, 0],
1262                     'child7': [10, 30, 0, 0],
1263                     'child8': [10, 10, 60, -10],
1264                     'child9': [10, 10, 50, -20],
1265                     'child10': [10, 10, 40, -30],
1266                     'child11': [10, 10, 30, -10],
1267                     'child12': [10, 10, 20, -15],
1268                     'child13': [10, 30, 10, -30],
1269                     'child14': [10, 30, 0, -30],
1270                 },
1271                 'wrap-reverse': {
1272                     'flexbox': [70, 30],
1273                     'child1': [10, 10, 60, 0],
1274                     'child2': [10, 10, 50, 10],
1275                     'child3': [10, 10, 40, 20],
1276                     'child4': [10, 10, 30, 0],
1277                     'child5': [10, 10, 20, 0],
1278                     'child6': [10, 30, 10, 0],
1279                     'child7': [10, 30, 0, 0],
1280                     'child8': [10, 10, 60, 30],
1281                     'child9': [10, 10, 50, 40],
1282                     'child10': [10, 10, 40, 50],
1283                     'child11': [10, 10, 30, 30],
1284                     'child12': [10, 10, 20, 30],
1285                     'child13': [10, 30, 10, 30],
1286                     'child14': [10, 30, 0, 30],
1287                 },
1288             },
1289         },
1290     },
1291 };
1292
1293 function mainAxisDirection(writingMode, flexDirection)
1294 {
1295     if ((writingMode.indexOf('horizontal') != -1 && flexDirection.indexOf('row') != -1)
1296         || (writingMode.indexOf('vertical') != -1 && flexDirection.indexOf('column') != -1))
1297         return 'width';
1298     return 'height';
1299 }
1300
1301 function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength, alignment, expectations)
1302 {
1303     var child = document.createElement('div');
1304     child.setAttribute('style', 'flex: 1 ' + preferredSize + 'px;'
1305         + crossAxis + ': ' + crossAxisLength + ';'
1306         + 'align-self: ' + alignment);
1307
1308     child.setAttribute("data-expected-width", expectations[0]);
1309     child.setAttribute("data-expected-height", expectations[1]);
1310     child.setAttribute("data-offset-x", expectations[2]);
1311     child.setAttribute("data-offset-y", expectations[3]);
1312
1313     flexbox.appendChild(child);
1314 }
1315
1316 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
1317 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
1318 var directions = ['ltr', 'rtl'];
1319 var wraps = ['wrap', 'wrap-reverse'];
1320
1321 writingModes.forEach(function(writingMode) {
1322     flexDirections.forEach(function(flexDirection) {
1323         directions.forEach(function(direction) {
1324             wraps.forEach(function(wrap) {
1325                 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexDirection + ' ' + wrap;
1326                 var title = document.createElement('div');
1327                 title.className = 'title';
1328                 title.innerHTML = flexboxClassName;
1329                 document.body.appendChild(title);
1330
1331                 var mainAxis = mainAxisDirection(writingMode, flexDirection);
1332                 var crossAxis = (mainAxis == 'width') ? 'height' : 'width';
1333
1334                 var flexbox = document.createElement('div');
1335                 flexbox.className = 'flexbox ' + flexboxClassName;
1336                 flexbox.setAttribute('style', mainAxis + ': 70px');
1337
1338                 var baselineMargin = (flexDirection.indexOf('row') != -1) ? '-webkit-margin-before: 5px;' : '-webkit-margin-start: 5px;';
1339
1340                 var testExpectations = expectations[writingMode][flexDirection][direction][wrap];
1341                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-start', testExpectations['child1']);
1342                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child2']);
1343                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-end', testExpectations['child3']);
1344                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child4']);
1345                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child5']);
1346                 addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child6']);
1347                 addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'flex-start', testExpectations['child7']);
1348
1349                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-start', testExpectations['child8']);
1350                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child9']);
1351                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'flex-end', testExpectations['child10']);
1352                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline', testExpectations['child11']);
1353                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'baseline; ' + baselineMargin, testExpectations['child12']);
1354                 addChild(flexbox, mainAxis, crossAxis, 10, 'auto', 'stretch', testExpectations['child13']);
1355                 addChild(flexbox, mainAxis, crossAxis, 10, '30px', 'flex-start', testExpectations['child14']);
1356
1357                 flexbox.setAttribute("data-expected-width", testExpectations.flexbox[0]);
1358                 flexbox.setAttribute("data-expected-height", testExpectations.flexbox[1]);
1359
1360                 document.body.appendChild(flexbox);
1361             })
1362         })
1363     })
1364 })
1365 </script>
1366 </body>
1367 </html>