flexbox does wrong baseline item alignment in columns
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-align-baseline.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     margin: 120px;
6     width: 100px;
7     height: 100px;
8     display: -webkit-flex;
9     background-color: #aaa;
10     position: relative;
11     outline: 2px solid red;
12 }
13 .title {
14     margin-bottom: 10px;
15 }
16 .flexbox > div {
17     height: 110px;
18     width: 110px;
19 }
20 .flexbox :nth-child(1) {
21     background-color: blue;
22 }
23 .flexbox :nth-child(2) {
24     background-color: green;
25 }
26 .ltr {
27     direction: ltr;
28 }
29 .rtl {
30     direction: rtl;
31 }
32 .horizontal-tb {
33     -webkit-writing-mode: horizontal-tb;
34 }
35 .horizontal-bt {
36     -webkit-writing-mode: horizontal-bt;
37 }
38 .vertical-rl {
39     -webkit-writing-mode: vertical-rl;
40 }
41 .vertical-lr {
42     -webkit-writing-mode: vertical-lr;
43 }
44 .row-reverse {
45     -webkit-flex-flow: row-reverse;
46 }
47 .column {
48     -webkit-flex-flow: column;
49 }
50 .column-reverse {
51     -webkit-flex-flow: column-reverse;
52 }
53 </style>
54 <script>
55 if (window.testRunner)
56     testRunner.dumpAsText();
57 </script>
58 <script src="../../fast/js/resources/js-test-pre.js"></script>
59 <body>
60 <script>
61 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
62 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
63 var directions = ['ltr', 'rtl'];
64
65 writingModes.forEach(function(writingMode) {
66     flexFlows.forEach(function(flexFlow) {
67         directions.forEach(function(direction) {
68             var flexboxClassName = writingMode + ' ' + direction + ' ' + flexFlow;
69
70             var title = document.createElement('div');
71             title.className = 'title';
72             title.innerHTML = flexboxClassName;
73             document.body.appendChild(title);
74
75             var isColumn = flexFlow.indexOf('column') != -1;
76             var isHorizontalFlow = (writingMode.indexOf('horizontal') != -1) ? !isColumn : isColumn;
77
78             var container = document.createElement('div');
79             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" style="-webkit-align-items: baseline;">' +
80                 '<div><div style="display:inline-block;"></div></div>' +
81                 '<div style="margin-top:20px;"><div style="display:inline-block;"></div></div>' +
82             '</div>';
83
84             container.firstChild.isHorizontal = writingMode.indexOf('horizontal') != -1;
85             container.firstChild.isHorizontalFlow = isHorizontalFlow;
86             container.firstChild.isColumn = isColumn;
87             container.firstChild.isLTR = direction == 'ltr';
88             document.body.appendChild(container);
89         })
90     })
91 })
92
93 // Sanity check that the align-items:baseline flex items align to the same cross-axis position.
94 var flexboxen = document.getElementsByClassName('flexbox');
95 for (var i = 0, len = flexboxen.length; i < len; i++) {
96     var flexbox = flexboxen[i];
97     firstChild = flexbox.firstChild;
98     lastChild = flexbox.lastChild;
99     if (!flexbox.isHorizontal && flexbox.isColumn && flexbox.isLTR) {
100         shouldBe('firstChild.offsetTop', "0");
101         shouldBe('lastChild.offsetTop', "20");
102     } else if (flexbox.isHorizontalFlow)
103         shouldBe('firstChild.offsetTop', 'lastChild.offsetTop');
104     else
105         shouldBe('firstChild.offsetLeft', 'lastChild.offsetLeft');
106 }
107 </script>
108 <script src="../../fast/js/resources/js-test-post.js"></script>
109 </body>
110 </html>