Implement absolutely positioned flex items
[WebKit-https.git] / LayoutTests / css3 / flexbox / align-absolute-child.html
1 <style>
2 body {
3     margin: 0;
4 }
5 .flexbox {
6     display: -webkit-flex;
7     background-color: green;
8     height: 100px;
9     width: 100px;
10     margin: 10px;
11 }
12 .flexbox > * {
13     -webkit-flex: none;
14 }
15 .align-center {
16     -webkit-align-items: center;
17 }
18 .stretch {
19     -webkit-align-items: stretch;
20 }
21 .relative {
22     position: relative;
23 }
24 .flexbox > div {
25     width: 20px;
26     height: 20px;
27 }
28 .absolute {
29     position: absolute;
30 }
31 #placed-absolute {
32     top: 20px;
33     left: 20px;
34 }
35
36 .horizontal-tb {
37     -webkit-writing-mode: horizontal-tb;
38 }
39 .horizontal-bt {
40     -webkit-writing-mode: horizontal-bt;
41 }
42 .vertical-rl {
43     -webkit-writing-mode: vertical-rl;
44 }
45 .vertical-lr {
46     -webkit-writing-mode: vertical-lr;
47 }
48
49 .row {
50     -webkit-flex-flow: row;
51 }
52 .row-reverse {
53     -webkit-flex-flow: row-reverse;
54 }
55 .column {
56     -webkit-flex-flow: column;
57 }
58 .column-reverse {
59     -webkit-flex-flow: column-reverse;
60 }
61
62 .rtl {
63     direction: rtl;
64 }
65 .ltr {
66     direction: ltr;
67 }
68
69 .wrap {
70     -webkit-flex-wrap: wrap;
71 }
72
73 .wrap-reverse {
74     -webkit-flex-wrap: wrap-reverse;
75 }
76
77 .flexbox :nth-child(1) {
78     background-color: blue;
79 }
80 .flexbox :nth-child(2) {
81     background-color: yellow;
82 }
83 .flexbox :nth-child(3) {
84     background-color: salmon;
85 }
86 .flexbox :nth-child(4) {
87     background-color: grey;
88 }
89 .flexbox :nth-child(5) {
90     background-color: red;
91 }
92 .flexbox :nth-child(6) {
93     background-color: orange;
94 }
95 .flexbox :nth-child(7) {
96     background-color: purple;
97 }
98 </style>
99
100 <script src="../../fast/js/resources/js-test-pre.js"></script>
101 <script src="../../resources/check-layout.js"></script>
102
103 <body onload="checkLayout('.flexbox')">
104
105 <div class='flexbox relative align-center'>
106     <div id='placed-absolute' class='absolute' data-offset-x=20 data-offset-y=20></div>
107 </div>
108
109 <div class='flexbox relative align-center'>
110     <div data-offset-x=0 data-offset-y=40></div>
111     <div class='absolute' data-offset-x=20 data-offset-y=0></div>
112     <div data-offset-x=20 data-offset-y=40></div>
113     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
114 </div>
115
116 <div class="relative">
117 <div class='flexbox align-center'>
118     <div data-offset-x=10 data-offset-y=40></div>
119     <div class='absolute' data-offset-x=30 data-offset-y=0></div>
120     <div data-offset-x=30 data-offset-y=40></div>
121     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
122 </div>
123 </div>
124
125 <div class='flexbox relative column rtl'>
126     <div data-offset-x=80 data-offset-y=0></div>
127     <div class='absolute' data-offset-x=80 data-offset-y=20></div>
128     <div data-offset-x=80 data-offset-y=20></div>
129     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
130 </div>
131
132 <div class="relative">
133 <div class='flexbox wrap-reverse'>
134     <div style="width:90px" data-offset-x=10 data-offset-y=80></div>
135     <div class="absolute" data-offset-x=100 data-offset-y=100></div>
136     <div data-offset-x=10 data-offset-y=30></div>
137     <div class="absolute" data-offset-x=30 data-offset-y=50></div>
138     <div data-offset-x=30 data-offset-y=30></div>
139     <div class="absolute" data-offset-x=50 data-offset-y=50></div>
140     <div class="absolute" style="top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
141 </div>
142 </div>
143
144 <div class='flexbox relative'>
145     <div style="margin: auto;" data-offset-x=40 data-offset-y=40></div>
146     <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
147     <div class="absolute" style="margin: auto;" data-offset-x=100 data-offset-y=0></div>
148     <div class="absolute" style="margin: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5></div>
149 </div>
150
151 <div class='flexbox stretch relative'>
152     <div style="height: auto" data-offset-x=0 data-offset-y=0 data-expected-height=100></div>
153     <div class="absolute" style="height: auto" data-offset-x=20 data-offset-y=0 data-expected-height=0></div>
154     <div class="absolute" style="height: auto; top: 5px; left: 5px" data-offset-x=5 data-offset-y=5 data-expected-height=0></div>
155 </div>
156
157 <div class="flexbox wrap relative">
158   <div style="width: 100px;" data-offset-x=0 data-offset-y=0></div>
159   <div class="absolute" data-offset-x=100 data-offset-y=0></div>
160   <div style="width: 50px;" data-offset-x=0 data-offset-y=50></div>
161   <div class="absolute" data-offset-x=50 data-offset-y=50></div>
162   <div style="width: 50px;" data-offset-x=50 data-offset-y=50></div>
163   <div class="absolute" data-offset-x=100 data-offset-y=50></div>
164 </div>
165
166 <div class="flexbox wrap relative" style="-webkit-align-items: flex-end">
167   <div style="width: 100px;" data-offset-x=0 data-offset-y=30></div>
168   <div class="absolute" data-offset-x=100 data-offset-y=0></div>
169   <div style="width: 50px;" data-offset-x=0 data-offset-y=80></div>
170   <div class="absolute" data-offset-x=50 data-offset-y=50></div>
171   <div style="width: 50px;" data-offset-x=50 data-offset-y=80></div>
172   <div class="absolute" data-offset-x=100 data-offset-y=50></div>
173 </div>
174
175
176 <script>
177 var absolute = document.getElementById('placed-absolute');
178 var beforePosition = absolute.getBoundingClientRect();
179 document.querySelector('.flexbox').style.height = '101px';
180 var afterPosition = absolute.getBoundingClientRect();
181
182 // Positioned element should not change position when the height of it's parent flexbox is changed.
183 for (key in beforePosition)
184     shouldBe('beforePosition[key]', 'afterPosition[key]');
185 </script>
186 </body>