Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(680)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/position-absolute-child.html

Issue 1088633002: Unprefix flexbox tests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: whoops, a > went missing Created 5 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item.html ('k') | LayoutTests/css3/flexbox/position-absolute-children.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 body { 4 body {
5 margin: 0; 5 margin: 0;
6 } 6 }
7 7
8 .title { 8 .title {
9 margin-top: 1em; 9 margin-top: 1em;
10 } 10 }
11 11
12 .flexbox { 12 .flexbox {
13 display: -webkit-flex; 13 display: flex;
14 background-color: #aaa; 14 background-color: #aaa;
15 position: relative; 15 position: relative;
16 } 16 }
17 .flexbox div { 17 .flexbox div {
18 border: 0; 18 border: 0;
19 -webkit-flex: none; 19 flex: none;
20 } 20 }
21 21
22 .horizontal-tb { 22 .horizontal-tb {
23 -webkit-writing-mode: horizontal-tb; 23 -webkit-writing-mode: horizontal-tb;
24 } 24 }
25 .horizontal-bt { 25 .horizontal-bt {
26 -webkit-writing-mode: horizontal-bt; 26 -webkit-writing-mode: horizontal-bt;
27 } 27 }
28 .vertical-rl { 28 .vertical-rl {
29 -webkit-writing-mode: vertical-rl; 29 -webkit-writing-mode: vertical-rl;
30 } 30 }
31 .vertical-lr { 31 .vertical-lr {
32 -webkit-writing-mode: vertical-lr; 32 -webkit-writing-mode: vertical-lr;
33 } 33 }
34 34
35 .row { 35 .row {
36 -webkit-flex-flow: row; 36 flex-flow: row;
37 } 37 }
38 .row-reverse { 38 .row-reverse {
39 -webkit-flex-flow: row-reverse; 39 flex-flow: row-reverse;
40 } 40 }
41 .column { 41 .column {
42 -webkit-flex-flow: column; 42 flex-flow: column;
43 } 43 }
44 .column-reverse { 44 .column-reverse {
45 -webkit-flex-flow: column-reverse; 45 flex-flow: column-reverse;
46 } 46 }
47 47
48 .flexbox :nth-child(1) { 48 .flexbox :nth-child(1) {
49 background-color: blue; 49 background-color: blue;
50 } 50 }
51 .flexbox :nth-child(2) { 51 .flexbox :nth-child(2) {
52 background-color: green; 52 background-color: green;
53 } 53 }
54 .flexbox :nth-child(3) { 54 .flexbox :nth-child(3) {
55 background-color: red; 55 background-color: red;
(...skipping 439 matching lines...) Expand 10 before | Expand all | Expand 10 after
495 for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) { 495 for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
496 var expected = expectations[writingMode][flexFlow][direction][2 + absolu teIndex]; 496 var expected = expectations[writingMode][flexFlow][direction][2 + absolu teIndex];
497 497
498 // Absolute div is 20px, other divs should be 40px. 498 // Absolute div is 20px, other divs should be 40px.
499 expected.sizes = [40, 40, 40]; 499 expected.sizes = [40, 40, 40];
500 expected.sizes[absoluteIndex - 1] = 20; 500 expected.sizes[absoluteIndex - 1] = 20;
501 501
502 var flexbox = document.createElement('div'); 502 var flexbox = document.createElement('div');
503 flexbox.className = 'flexbox ' + flexboxClassName; 503 flexbox.className = 'flexbox ' + flexboxClassName;
504 setFlexboxSize(flexbox, flexDirection); 504 setFlexboxSize(flexbox, flexDirection);
505 flexbox.style.webkitJustifyContent = 'space-between'; 505 flexbox.style.justifyContent = 'space-between';
506 for (var childIndex = 1; childIndex <= 3; ++childIndex) { 506 for (var childIndex = 1; childIndex <= 3; ++childIndex) {
507 var child = document.createElement('div'); 507 var child = document.createElement('div');
508 child.style[flexDirection] = '40px'; 508 child.style[flexDirection] = '40px';
509 if (absoluteIndex == childIndex) { 509 if (absoluteIndex == childIndex) {
510 child.style.position = 'absolute'; 510 child.style.position = 'absolute';
511 child.style[flexDirection] = '20px'; 511 child.style[flexDirection] = '20px';
512 if ('height' == flexDirection) 512 if ('height' == flexDirection)
513 child.style.width = '100px'; 513 child.style.width = '100px';
514 } 514 }
515 515
(...skipping 13 matching lines...) Expand all
529 { 529 {
530 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow; 530 var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
531 for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) { 531 for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
532 var expected = expectations[writingMode][flexFlow][direction][5 + absolu teIndex]; 532 var expected = expectations[writingMode][flexFlow][direction][5 + absolu teIndex];
533 533
534 var flexbox = document.createElement('div'); 534 var flexbox = document.createElement('div');
535 flexbox.className = 'flexbox ' + flexboxClassName; 535 flexbox.className = 'flexbox ' + flexboxClassName;
536 flexbox.style.height = '100px'; 536 flexbox.style.height = '100px';
537 flexbox.style.width = '100px'; 537 flexbox.style.width = '100px';
538 flexbox.style.margin = "20px"; 538 flexbox.style.margin = "20px";
539 flexbox.style.webkitJustifyContent = 'center'; 539 flexbox.style.justifyContent = 'center';
540 flexbox.style.webkitAlignItems = 'center'; 540 flexbox.style.alignItems = 'center';
541 541
542 for (var childIndex = 1; childIndex <= 3; ++childIndex) { 542 for (var childIndex = 1; childIndex <= 3; ++childIndex) {
543 var child = document.createElement('div'); 543 var child = document.createElement('div');
544 if (absoluteIndex == childIndex) { 544 if (absoluteIndex == childIndex) {
545 child.style.position = 'absolute'; 545 child.style.position = 'absolute';
546 child.style.outline = "2px solid yellow"; 546 child.style.outline = "2px solid yellow";
547 } 547 }
548 child.style.width = '40px'; 548 child.style.width = '40px';
549 child.style.height = '40px'; 549 child.style.height = '40px';
550 550
(...skipping 18 matching lines...) Expand all
569 569
570 var flexDirection = getFlexDirection(flexFlow, writingMode); 570 var flexDirection = getFlexDirection(flexFlow, writingMode);
571 for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) { 571 for (var absoluteIndex = 1; absoluteIndex <= 3; ++absoluteIndex) {
572 var expected = expectations[writingMode][flexFlow][direction][ab soluteIndex - 1]; 572 var expected = expectations[writingMode][flexFlow][direction][ab soluteIndex - 1];
573 573
574 var flexbox = document.createElement('div'); 574 var flexbox = document.createElement('div');
575 flexbox.className = 'flexbox ' + flexboxClassName; 575 flexbox.className = 'flexbox ' + flexboxClassName;
576 setFlexboxSize(flexbox, flexDirection); 576 setFlexboxSize(flexbox, flexDirection);
577 for (var childIndex = 1; childIndex <= 3; ++childIndex) { 577 for (var childIndex = 1; childIndex <= 3; ++childIndex) {
578 var child = document.createElement('div'); 578 var child = document.createElement('div');
579 child.style.webkitFlex = childIndex; 579 child.style.flex = childIndex;
580 if (childIndex == absoluteIndex) 580 if (childIndex == absoluteIndex)
581 child.style.position = 'absolute'; 581 child.style.position = 'absolute';
582 582
583 if ('width' == flexDirection) 583 if ('width' == flexDirection)
584 child.style.height = '20px'; 584 child.style.height = '20px';
585 585
586 child.setAttribute('data-offset-' + (flexDirection == 'width ' ? 'x' : 'y'), expected.offsets[childIndex - 1]); 586 child.setAttribute('data-offset-' + (flexDirection == 'width ' ? 'x' : 'y'), expected.offsets[childIndex - 1]);
587 child.setAttribute('data-expected-' + flexDirection, expecte d.sizes[childIndex - 1]); 587 child.setAttribute('data-expected-' + flexDirection, expecte d.sizes[childIndex - 1]);
588 flexbox.appendChild(child); 588 flexbox.appendChild(child);
589 } 589 }
590 590
591 document.body.appendChild(flexbox); 591 document.body.appendChild(flexbox);
592 } 592 }
593 addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction, flexDirection); 593 addJustifyContentSpaceBetweenTests(writingMode, flexFlow, direction, flexDirection);
594 addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirec tion); 594 addAlignItemsCenterTests(writingMode, flexFlow, direction, flexDirec tion);
595 }) 595 })
596 }) 596 })
597 }) 597 })
598 598
599 </script> 599 </script>
600 600
601 </body> 601 </body>
602 </html> 602 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/perpendicular-writing-modes-inside-flex-item.html ('k') | LayoutTests/css3/flexbox/position-absolute-children.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698