All child elements of a flex container should be turned into a flex item
[WebKit-https.git] / LayoutTests / css3 / flexbox / flexitem.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .flexbox {
5     width: 600px;
6     display: -webkit-flex;
7     background-color: #aaa;
8     position: relative;
9     min-height: 10px;
10 }
11 .flexbox > * {
12     -webkit-flex: 1 0 0;
13     margin: 0;
14     border: 0;
15     padding: 0;
16     font-size: 12px;
17 }
18 </style>
19 <script>
20 if (window.layoutTestController)
21     layoutTestController.dumpAsText();
22 </script>
23 <script src="resources/flexbox.js"></script>
24 <body onload="checkFlexBoxen()">
25 <div class="flexbox">
26   <button data-expected-display="block" data-expected-width="100">button</button>
27   <canvas data-expected-display="block" data-expected-width="100">canvas</canvas>
28   <iframe data-expected-display="block" data-expected-width="100" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
29   <object data-expected-display="block" data-expected-width="100">object</object>
30   <select data-expected-display="block" data-expected-width="100">
31     <option>select</option>
32   </select>
33   <textarea data-expected-display="block" data-expected-width="100">textarea</textarea>
34 </div>
35
36
37 <div class="flexbox">
38   <input data-expected-display="block" data-expected-width="75" type="checkbox" value="radio"></input>
39   <input data-expected-display="block" data-expected-width="75" type="file" value="file"></input>
40   <input data-expected-display="block" data-expected-width="75" type="image" value="image"></input>
41   <input data-expected-display="block" data-expected-width="75" type="password" value="password"></input>
42   <input data-expected-display="block" data-expected-width="75" type="radio" value="radio"></input>
43   <input data-expected-display="block" data-expected-width="75" type="reset" value="reset"></input>
44   <input data-expected-display="block" data-expected-width="75" type="submit" value="submit"></input>
45   <input data-expected-display="block" data-expected-width="75" type="text" value="text"></input>
46 </div>
47
48 <div class="flexbox">
49   <img data-expected-display="block" data-expected-width="345" style="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
50   <!-- FIXME: The image should stretch in the cross direction. -->
51   <img data-expected-display="block" data-expected-width="255" data-expected-height="100" style="-webkit-flex: 1 0 auto;" src="../images/resources/green-10.png">
52 </div>
53
54 <div class="flexbox">
55   <img data-expected-display="block" data-expected-width="200" style="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
56   <!-- FIXME: The missing image placeholders should stretch in the cross direction. -->
57   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png">
58   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
59 </div>
60
61 <div class="flexbox">
62   <svg data-expected-display="block" data-expected-width="100" style="-webkit-flex: 1 0 auto; width: 100px; height: 100px">
63     <circle cx="50" cy="50" r="50" fill="blue">
64     </circle>
65   </svg>
66   <svg data-expected-display="block" data-expected-width="500" style="-webkit-flex: 1 1 auto; height: 100px">
67     <circle cx="50" cy="50" r="50" fill="green">
68     </circle>
69   </svg>
70 </div>
71
72 <div class="flexbox">
73   <span data-expected-display="block" data-expected-width="200" style="-webkit-flex: 2 0 0"></span>
74   <button data-expected-display="block" data-expected-width="100" style="-webkit-flex: 1 0 0">button</button>
75   <span data-expected-display="block" data-expected-width="300" style="-webkit-flex: 2 2 100px"></span>
76 </div>
77
78 <div class="flexbox" style="width: 700px">
79   <div data-expected-display="block" data-expected-width="100" style="display: inline-block;"></div>
80   <div data-expected-display="-webkit-box" data-expected-width="100" style="display: -webkit-inline-box;"></div>
81   <div data-expected-display="-webkit-flex" data-expected-width="100" style="display: -webkit-inline-flex;"></div>
82   <div data-expected-display="block" data-expected-width="100" style="display: table-cell"></div>
83   <div data-expected-display="block" data-expected-width="100" style="display: compact"></div>
84   <div data-expected-display="block" data-expected-width="100" style="display: run-in"></div>
85   <div data-expected-display="block" data-expected-width="100" style="display: inline;"></div>
86 </div>
87
88 <div class="flexbox">
89   <!-- FIXME: This table should flex. -->
90   <div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
91 </div>
92
93 </html>