Rename flex-align to flex-item-align.
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-align-column.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 body {
5     margin: 0;
6 }
7 .flexbox {
8     width: 600px;
9     height: 240px;
10     display: -webkit-flexbox;
11     background-color: #aaa;
12     position: relative;
13     -webkit-flex-flow: column;
14 }
15 .vertical {
16     -webkit-writing-mode: vertical-lr;
17 }
18 .flexbox :nth-child(1) {
19     background-color: blue;
20 }
21 .flexbox :nth-child(2) {
22     background-color: green;
23 }
24 .flexbox :nth-child(3) {
25     background-color: red;
26 }
27 .flexbox :nth-child(4) {
28     background-color: yellow;
29 }
30 .flexbox :nth-child(5) {
31     background-color: purple;
32 }
33 .flexbox :nth-child(6) {
34     background-color: orange;
35 }
36 .flexbox :nth-child(7) {
37     background-color: lime;
38 }
39 </style>
40 <script>
41 if (window.layoutTestController)
42     layoutTestController.dumpAsText();
43 </script>
44 <script src="resources/flexbox.js"></script>
45 <body onload="checkFlexBoxen()">
46
47 <div class="flexbox">
48     <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="height: -webkit-flex(1);"></div>
49     <div data-offset-x=0 data-expected-width=600 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: stretch; "></div>
50     <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: start; width: 20px;"></div>
51     <div data-offset-x=580 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: end; width: 20px;"></div>
52     <div data-offset-x=290 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: center; width: 20px;"></div>
53     <div data-offset-x=0 data-expected-width=20 data-expected-height=40 style="height: -webkit-flex(1); -webkit-flex-item-align: baseline; width: 20px;"></div>
54 </div>
55
56 <div class="flexbox vertical">
57     <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="width: -webkit-flex(1);"></div>
58     <div data-offset-y=0 data-expected-width=100 data-expected-height=240 style="width: -webkit-flex(1); -webkit-flex-item-align: stretch; "></div>
59     <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: start; height: 20px;"></div>
60     <div data-offset-y=220 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: end; height: 20px;"></div>
61     <div data-offset-y=110 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: center; height: 20px;"></div>
62     <div data-offset-y=0 data-expected-width=100 data-expected-height=20 style="width: -webkit-flex(1); -webkit-flex-item-align: baseline; height: 20px;"></div>
63 </div>
64
65 </body>
66 </html>