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

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