Rename flex-align to flex-item-align.
[WebKit-https.git] / LayoutTests / css3 / flexbox / orthogonal-flex-directions.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 body {
5     margin: 0;
6 }
7 .flexbox {
8     width: 600px;
9     display: -webkit-flexbox;
10     background-color: #aaa;
11     position: relative;
12 }
13 .flexbox > :nth-child(1) {
14     background-color: blue;
15 }
16 .flexbox > :nth-child(2) {
17     background-color: green;
18 }
19
20 .flexbox > div > :nth-child(1) {
21     background-color: pink;
22 }
23 .flexbox > div > :nth-child(2) {
24     background-color: purple;
25 }
26
27 .flexbox > div > div > :nth-child(1) {
28     background-color: red;
29 }
30 .flexbox > div > div > :nth-child(2) {
31     background-color: yellow;
32 }
33
34 .nested {
35     display: -webkit-flexbox;  
36     background-color: #ddd;
37 }
38
39 .rtl {
40     direction: rtl;
41 }
42 .bt {
43     -webkit-writing-mode: horizontal-bt;
44 }
45 .vertical-rl {
46     -webkit-writing-mode: vertical-rl;
47 }
48 .vertical-lr {
49     -webkit-writing-mode: vertical-lr;
50 }
51 .row-reverse {
52     -webkit-flex-flow: row-reverse;
53 }
54 .column {
55     -webkit-flex-flow: column;
56 }
57 .column-reverse {
58     -webkit-flex-flow: column-reverse;
59 }
60
61 .align-start {
62     -webkit-flex-item-align: start;
63 }
64 </style>
65 <script>
66 if (window.layoutTestController)
67     layoutTestController.dumpAsText();
68 </script>
69 <script src="resources/flexbox.js"></script>
70 <body onload="checkFlexBoxen()">
71
72 <div class="flexbox">
73     <div class="column nested">
74         <div data-expected-height="50" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
75         <div data-expected-height="50" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
76     </div>
77     <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
78 </div>
79
80 <div class="flexbox">
81     <div class="column nested align-start">
82         <div data-expected-height="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
83         <div data-expected-height="0" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
84     </div>
85     <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
86 </div>
87
88 <div class="flexbox">
89     <div class="column nested align-start" style="height: 50px">
90         <div data-expected-height="25" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
91         <div data-expected-height="25" style="height: -webkit-flex(1 0 0); width: 100px;"></div>
92     </div>
93     <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
94 </div>
95
96 <div class="flexbox">
97     <div class="column nested" style="height: 50px">
98         <div class="nested" style="height: -webkit-flex(1); width: 100px;">
99             <div data-expected-height="25" style="width: -webkit-flex(1 0 auto);"></div>
100             <div data-expected-height="25" style="width: -webkit-flex(1 0 auto);"></div>
101         </div>
102         <div style="height: -webkit-flex(1);"></div>
103     </div>
104     <div data-expected-width="500" style="width: -webkit-flex(1 0 0); height:100px;"></div>
105 </div>
106
107 <div class="flexbox column" style="height: 100px">
108     <div class="row-reverse nested" style="height: -webkit-flex(1); width: 100px;">
109         <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
110         <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
111     </div>
112     <div data-expected-height="50" style="height: -webkit-flex(1 0 0);"></div>
113 </div>
114
115 <div class="flexbox column-reverse" style="height: 100px">
116     <div class="row-reverse nested" style="height: -webkit-flex(1); width: 100px;">
117         <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
118         <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
119     </div>
120     <div data-expected-height="50" style="height: -webkit-flex(1 0 0);"></div>
121 </div>
122
123 <div class="flexbox vertical-lr" style="height: 100px">
124     <div class="column nested" style="height: -webkit-flex(1); width: 100px;">
125         <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
126         <div data-expected-width="50" style="width: -webkit-flex(1 0 auto);"></div>
127     </div>
128     <div data-expected-height="50" style="height: -webkit-flex(1 0 0);"></div>
129 </div>
130
131 </body>
132 </html>