flexbox flexing implementation should match the spec
[WebKit-https.git] / LayoutTests / css3 / flexbox / flex-algorithm-min-max.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" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
36   <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
37   <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
38 </div>
39
40 <!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
41 <div class="flexbox">
42   <div data-expected-width="50" style="width: -webkit-flex(1 0 0); max-width: 50px;"></div>
43   <div data-expected-width="300" style="width: -webkit-flex(4 0 0); max-width: 300px;"></div>
44   <div data-expected-width="250" style="width: -webkit-flex(1 0 0);"></div>
45 </div>
46
47 <div class="flexbox">
48   <div data-expected-width="100" style="width: -webkit-flex(1 0 0); max-width: 100px;"></div>
49   <div data-expected-width="300" style="width: -webkit-flex(1 0 200px); max-width: 300px;"></div>
50   <div data-expected-width="200" style="width: -webkit-flex(1 0 0);"></div>
51 </div>
52
53 <!-- Test min-width. -->
54 <div class="flexbox">
55   <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
56   <div data-expected-width="250" style="width: -webkit-flex(1 1 400px);"></div>
57 </div>
58
59 <!-- The flex items can overflow the flexbox. -->
60 <div class="flexbox">
61   <div data-expected-width="350" style="width: -webkit-flex(1 1 400px); min-width: 350px;"></div>
62   <div data-expected-width="300" style="width: -webkit-flex(2 0 300px); max-width: 300px;"></div>
63   <div data-expected-width="0" style="width: -webkit-flex(1 0 0);"></div>
64 </div>
65
66 <div class="flexbox">
67   <div data-expected-width="100" data-offset-x="0" style="width: -webkit-flex(1 0 0); margin: 0 auto; max-width: 100px;"></div>
68   <div data-expected-width="333" data-offset-x="100" style="width: -webkit-flex(2 0 0);"></div>
69   <div data-expected-width="167" data-offset-x="433" style="width: -webkit-flex(1 0 0);"></div>
70 </div>
71
72 <!-- min-width and max-width take priority over the preferred size. -->
73 <div class="flexbox">
74   <div data-expected-width="500" style="width: -webkit-flex(1 0 0); min-width: 300px"></div>
75   <div data-expected-width="100" style="width: -webkit-flex(1 0 50%); max-width: 100px"></div>
76 </div>
77
78 <div class="flexbox" style="width: 200px">
79   <div data-expected-width="150" style="width: -webkit-flex(1); min-width: 150px"></div>
80   <div data-expected-width="50" style="width: -webkit-flex(1); max-width: 90px"></div>
81 </div>
82
83 <div class="flexbox" style="width: 200px">
84   <div data-expected-width="150" style="width: -webkit-flex(1); min-width: 120px"></div>
85   <div data-expected-width="50" style="width: -webkit-flex(1); max-width: 50px"></div>
86 </div>
87
88 <div class="flexbox" style="width: 200px">
89   <div data-expected-width="100" style="width: -webkit-flex(1); min-width: 100px"></div>
90   <div data-expected-width="100" style="width: -webkit-flex(3);"></div>
91 </div>
92
93 <div class="flexbox" style="width: 200px">
94   <div data-expected-width="150" style="width: -webkit-flex(1 50px); min-width: 100px"></div>
95   <div data-expected-width="50" style="width: -webkit-flex(1 100px); max-width: 50px"></div>
96 </div>
97
98 <div class="flexbox">
99   <div data-expected-width="80" style="width: -webkit-flex(1)"></div>
100   <div data-expected-width="160" style="width: -webkit-flex(2)"></div>
101   <div data-expected-width="360" style="width: -webkit-flex(1); min-width: 360px"></div>
102 </div>
103
104 </body>
105 </html>