nesting horizontal flexboxes is broken
[WebKit-https.git] / LayoutTests / css3 / flexbox / preferred-widths.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     display: -webkit-flexbox;
6     background-color: grey;
7     float: left;
8 }
9 .flexbox > div {
10     padding: 2px 13px 8px 17px;
11     margin: 2px 13px 8px 17px;
12 }
13 .title {
14     margin-top: 1em;
15 }
16 .overflowX {
17     overflow-x: scroll;
18     overflow-y: hidden;
19 }
20 .overflowY {
21     overflow-x: hidden;
22     overflow-y: scroll;
23 }
24 .auto {
25     overflow: auto;
26 }
27 .horizontal-tb {
28     -webkit-writing-mode: horizontal-tb;
29 }
30 .horizontal-bt {
31     -webkit-writing-mode: horizontal-bt;
32 }
33 .vertical-rl {
34     -webkit-writing-mode: vertical-rl;
35 }
36 .vertical-lr {
37     -webkit-writing-mode: vertical-lr;
38 }
39 .row {
40     -webkit-flex-flow: row;
41 }
42 .row-reverse {
43     -webkit-flex-flow: row-reverse;
44 }
45 .column {
46     -webkit-flex-flow: column;
47 }
48 .column-reverse {
49     -webkit-flex-flow: column-reverse;
50 }
51 </style>
52 <script>
53 if (window.layoutTestController)
54     layoutTestController.dumpAsText();
55 </script>
56 <script src="resources/flexbox.js"></script>
57 <body onload="checkFlexBoxen()">
58
59 <script>
60 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-lr', 'vertical-rl'];
61 var flexFlows = ['row', 'column', 'row-reverse', 'column-reverse'];
62 var scrollDirections = ['overflowY', 'overflowX'];
63
64 var dummyNode = document.createElement('div');
65 dummyNode.style.overflow = 'scroll';
66 document.body.appendChild(dummyNode);
67 var scrollbarWidth = dummyNode.offsetWidth - dummyNode.clientWidth;
68
69 writingModes.forEach(function(writingMode) {
70     flexFlows.forEach(function(flexFlow) {
71         scrollDirections.forEach(function(scrollDirection) {
72             var flexboxClassName = writingMode + ' ' + scrollDirection + ' ' + flexFlow;
73
74             var title = document.createElement('div');
75             title.className = 'title';
76             title.innerHTML = flexboxClassName;
77             document.body.appendChild(title);
78
79             var isColumn = flexFlow.indexOf('column') != -1;
80             var isHorizontal = (writingMode.indexOf('horizontal') != -1) ? !isColumn : isColumn;
81
82             var expectedWidth = isHorizontal ? 220 : 140;
83             var expectedHeight = isHorizontal ? 60 : 110;
84             if (scrollDirection == 'overflowY')
85                 expectedWidth += scrollbarWidth;
86             if (scrollDirection == 'overflowX')
87                 expectedHeight += scrollbarWidth;
88
89
90             var container = document.createElement('div');
91             container.innerHTML = '<div class="flexbox ' + flexboxClassName + '" data-expected-width="' + expectedWidth + '" data-expected-height="' + expectedHeight + '">\n' +
92                 '<div style="background-color:pink; width: 20px; height: 30px;"></div>\n' +
93                 '<div style="background-color:red; width: 80px; height: 40px;"></div>\n' +
94             '</div><div style="clear:both;"></div>';
95
96             document.body.appendChild(container);
97         })
98     })
99 })
100 </script>
101 </body>
102 </html>