b73169c67b53d19e620b205bb748e5e0cd9f1546
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-align-stretch.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 body {
5     margin: 0;
6 }
7 .flexbox {
8     display: -webkit-flexbox;
9     background-color: #aaa;
10     position: relative;
11 }
12 .flexbox div {
13     border: 0;
14 }
15
16 .flexbox > :nth-child(1) {
17     background-color: blue;
18 }
19 .flexbox > :nth-child(2) {
20     background-color: green;
21 }
22 .flexbox > :nth-child(3) {
23     background-color: red;
24 }
25
26 .absolute {
27   position: absolute;
28   width: 50px;
29   height: 50px;
30   background-color: yellow !important;
31 }
32 </style>
33 <script>
34 if (window.layoutTestController)
35     layoutTestController.dumpAsText();
36 </script>
37 <script src="resources/flexbox.js"></script>
38 <body onload="checkFlexBoxen()">
39 <div class="flexbox" style="width: 600px">
40   <div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
41     <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
42   </div>
43   <div data-expected-height="100" style="width: -webkit-flex(1 0 0); height: 100px"></div>
44   <div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
45     <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
46   </div>
47 </div>
48
49 <div style="-webkit-writing-mode: horizontal-bt">
50 <div class="flexbox" style="width: 600px">
51   <div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
52     <div data-offset-x="0" data-offset-y="0" class="absolute" style="top:0;"></div>
53   </div>
54   <div data-expected-height="100" style="width: -webkit-flex(1 0 0); height: 100px"></div>
55   <div data-expected-height="100" style="width: -webkit-flex(1 0 0); position: relative">
56     <div data-offset-x="0" data-offset-y="50" class="absolute" style="bottom:0;"></div>
57   </div>
58 </div>
59 </div>
60
61 <div style="-webkit-writing-mode: vertical-rl">
62 <div class="flexbox" style="height: 200px">
63   <div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
64     <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
65   </div>
66   <div data-expected-width="100" style="height: -webkit-flex(1 0 0); width: 100px"></div>
67   <div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
68     <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
69   </div>
70 </div>
71 </div>
72
73 <div style="-webkit-writing-mode: vertical-lr">
74 <div class="flexbox" style="height: 200px">
75   <div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
76     <div data-offset-x="50" data-offset-y="0" class="absolute" style="right:0;"></div>
77   </div>
78   <div data-expected-width="100" style="height: -webkit-flex(1 0 0); width: 100px"></div>
79   <div data-expected-width="100" style="height: -webkit-flex(1 0 0); position: relative">
80     <div data-offset-x="0" data-offset-y="0" class="absolute" style="left:0;"></div>
81   </div>
82 </div>
83 </div>
84
85 <!-- When overflowing the height, flex-align: stretch doesn't cause the flex item to get smaller. -->
86 <div class="flexbox" style="height: 50px; width: 600px;">
87   <div data-expected-height="60" style="background-color: yellow; width: 300px">
88     <div data-expected-height="60" style="height: 60px; width: 10px; background-color: orange"></div>
89   </div>
90 </div>
91
92 <!-- In the column case, the width of the flex item is constrained by the width of the flexbox, so flex-align: stretch doesn't change the width. -->
93 <div class="flexbox" style="-webkit-flex-direction: column; width: 100px;">
94   <div data-expected-width="100" data-expected-height="50" style="background-color: yellow;">
95     <div data-expected-width="200" style="height: 50px; width: 200px; background-color: orange"></div>
96   </div>
97 </div>
98
99 </html>