Implement flex-pack:distribute
[WebKit-https.git] / LayoutTests / css3 / flexbox / 004.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 div {
14     height: 20px;
15     border: 0;
16 }
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 </style>
28 <script>
29 if (window.layoutTestController)
30     layoutTestController.dumpAsText();
31 </script>
32 <script src="resources/flexbox.js"></script>
33 <body onload="checkFlexBoxen()">
34 <div class="flexbox">
35   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
36   <div data-expected-width="100" data-offset-x="100" style="width: 100px;"></div>
37   <div data-expected-width="100" data-offset-x="200" style="width: 100px;"></div>
38 </div>
39
40 <div class="flexbox" style="-webkit-flex-pack: end">
41   <div data-expected-width="100" data-offset-x="300" style="width: -webkit-flex(0 0 100px);"></div>
42   <div data-expected-width="100" data-offset-x="400" style="width: 100px;"></div>
43   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
44 </div>
45
46 <div class="flexbox" style="-webkit-flex-pack: center">
47   <div data-expected-width="100" data-offset-x="150" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
48   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
49   <div data-expected-width="100" data-offset-x="350" style="width: 100px;"></div>
50 </div>
51
52 <div class="flexbox" style="-webkit-flex-pack: justify">
53   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
54   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
55   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
56 </div>
57
58 <!-- If there's only one child, we pack start. -->
59 <div class="flexbox" style="-webkit-flex-pack: justify">
60   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
61 </div>
62
63 <div class="flexbox" style="-webkit-flex-pack: distribute">
64   <div data-expected-width="100" data-offset-x="50" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
65   <div data-expected-width="100" data-offset-x="250" style="width: 100px;"></div>
66   <div data-expected-width="100" data-offset-x="450" style="width: 100px;"></div>
67 </div>
68
69 <!-- If there's only one child, we pack center. -->
70 <div class="flexbox" style="-webkit-flex-pack: distribute">
71   <div data-expected-width="100" data-offset-x="250" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
72 </div>
73
74 <!-- Make sure we don't crash with no children. -->
75 <div class="flexbox" style="-webkit-flex-pack: distribute"></div>
76
77 <!-- margin:auto does nothing here. -->
78 <div class="flexbox" style="-webkit-flex-pack: end">
79   <div data-expected-width="100" data-offset-x="300" style="width: 100px;"></div>
80   <div data-expected-width="100" data-offset-x="400" style="width: 100px; margin-right: auto"></div>
81   <div data-expected-width="100" data-offset-x="500" style="width: 100px;"></div>
82 </div>
83
84 <!-- The flex-pack does nothing here because we are shrinking. -->
85 <div class="flexbox" style="-webkit-flex-pack: end">
86   <div data-expected-width="200" data-offset-x="0" style="width: -webkit-flex(0 1 300px);"></div>
87   <div data-expected-width="200" data-offset-x="200" style="width: 200px;"></div>
88   <div data-expected-width="200" data-offset-x="400" style="width: 200px;"></div>
89 </div>
90
91 </body>
92 </html>