nesting horizontal flexboxes is broken
[WebKit-https.git] / LayoutTests / css3 / flexbox / preferred-widths-orthogonal.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     display: -webkit-flexbox;
6     background-color: #aaa;
7     float: left;
8 }
9 .flexbox > div {
10     margin: 2px 13px 8px 17px;
11 }
12 .flexbox > div:not(.nested) {
13     width: 10px;
14     height: 15px;
15 }
16 .flexbox > .nested > div:not(.nested) {
17     width: 20px;
18     height: 30px;
19 }
20 .flexbox > .nested > .nested > div {
21     width: 30px;
22     height: 40px;
23 }
24
25 .flexbox > :nth-child(1) {
26     background-color: blue;
27 }
28 .flexbox > :nth-child(2) {
29     background-color: green;
30 }
31 .flexbox > div > :nth-child(1) {
32     background-color: pink;
33 }
34 .flexbox > div > :nth-child(2) {
35     background-color: purple;
36 }
37 .flexbox > div > div > :nth-child(1) {
38     background-color: red;
39 }
40 .flexbox > div > div > :nth-child(2) {
41     background-color: yellow;
42 }
43
44 .nested {
45     display: -webkit-flexbox;
46     background-color: #ddd;
47 }
48 .horizontal-tb {
49     -webkit-writing-mode: horizontal-tb;
50 }
51 .vertical-lr {
52     -webkit-writing-mode: vertical-lr;
53 }
54 .column {
55     -webkit-flex-flow: column;
56 }
57 .clear {
58     clear: both;
59 }
60 </style>
61 <script>
62 if (window.layoutTestController)
63     layoutTestController.dumpAsText();
64 </script>
65 <script src="resources/flexbox.js"></script>
66 <body onload="checkFlexBoxen()">
67
68 <div class="flexbox" data-expected-height=70  data-expect-width=90>
69     <div class="column nested" data-expected-height=60  data-expect-width=20>
70         <div></div>
71         <div></div>
72     </div>
73     <div></div>
74 </div>
75 <br class=clear>
76
77 <div class="flexbox vertical-lr" data-expected-height=115  data-expect-width=80>
78     <div class="horizontal-tb nested" data-expected-height=80  data-expect-width=50>
79         <div class="vertical-lr nested" data-expected-height=80  data-expect-width=30>
80             <div></div>
81             <div></div>
82         </div>
83         <div></div>
84     </div>
85     <div></div>
86 </div>
87 <br class=clear>
88
89 <div class="flexbox vertical-lr" data-expected-height=65  data-expect-width=70>
90     <div class="column nested" data-expected-height=30  data-expect-width=40>
91         <div></div>
92         <div></div>
93     </div>
94     <div></div>
95 </div>
96 <br class=clear>
97
98 <div class="flexbox vertical-lr" data-expected-height=65  data-expect-width=70>
99     <div class="nested horizontal-tb" data-expected-height=30  data-expect-width=40>
100         <div></div>
101         <div></div>
102     </div>
103     <div></div>
104 </div>
105 <br class=clear>
106
107 <div class="flexbox" data-expected-height=70  data-expect-width=90>
108     <div class="nested vertical-lr" data-expected-height=60  data-expect-width=20>
109         <div></div>
110         <div></div>
111     </div>
112     <div></div>
113 </div>
114 <br class=clear>
115
116 </body>
117 </html>