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