3 <link href=
"resources/flexbox.css" rel=
"stylesheet">
7 background-color: #aaa;
20 <script src=
"../../resources/check-layout.js"></script>
21 <body onload=
"checkLayout('.flexbox')">
22 <div class=
"flexbox" style=
"height:200px">
23 <button data-expected-display=
"block" data-expected-width=
"100" data-expected-height=
"200">button
</button>
24 <canvas data-expected-display=
"block" data-expected-width=
"100" data-expected-height=
"200">canvas
</canvas>
25 <iframe data-expected-display=
"block" data-expected-width=
"100" data-expected-height=
"200" src=
"data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
26 <object data-expected-display=
"block" data-expected-width=
"100" data-expected-height=
"200">object
</object>
27 <select data-expected-display=
"block" data-expected-width=
"100" data-expected-height=
"200">
28 <option>select
</option>
30 <textarea data-expected-display=
"block" data-expected-width=
"100" data-expected-height=
"200">textarea
</textarea>
35 <input data-expected-display=
"block" data-expected-width=
"75" type=
"checkbox" value=
"radio"></input>
36 <input data-expected-display=
"block" data-expected-width=
"75" type=
"file" value=
"file"></input>
37 <input data-expected-display=
"block" data-expected-width=
"75" type=
"image" value=
"image"></input>
38 <input data-expected-display=
"block" data-expected-width=
"75" type=
"password" value=
"password"></input>
39 <input data-expected-display=
"block" data-expected-width=
"75" type=
"radio" value=
"radio"></input>
40 <input data-expected-display=
"block" data-expected-width=
"75" type=
"reset" value=
"reset"></input>
41 <input data-expected-display=
"block" data-expected-width=
"75" type=
"submit" value=
"submit"></input>
42 <input data-expected-display=
"block" data-expected-width=
"75" type=
"text" value=
"text"></input>
46 <img data-expected-display=
"block" data-expected-width=
"200" style=
"flex: 1 0 auto;" src=
"../images/resources/blue-100.png">
47 <img data-expected-display=
"block" data-expected-width=
"200" data-expected-height=
"100" style=
"flex: 2 0 0;" src=
"doesnotexist.png">
48 <img data-expected-display=
"block" data-expected-width=
"200" data-expected-height=
"100" style=
"flex: 2 0 0;" src=
"doesnotexist.png" alt=
"placeholder text">
52 <svg data-expected-display=
"block" data-expected-width=
"100" style=
"flex: 1 0 auto; width: 100px; height: 100px">
53 <circle cx=
"50" cy=
"50" r=
"50" fill=
"blue">
56 <svg data-expected-display=
"block" data-expected-width=
"500" style=
"flex: 1 1 auto; height: 100px; width: 100%">
57 <circle cx=
"50" cy=
"50" r=
"50" fill=
"green">
63 <span data-expected-display=
"block" data-expected-width=
"200" style=
"flex: 2 0 0"></span>
64 <button data-expected-display=
"block" data-expected-width=
"100" style=
"flex: 1 0 0">button
</button>
65 <span data-expected-display=
"block" data-expected-width=
"300" style=
"flex: 2 2 100px"></span>
68 <div class=
"flexbox" style=
"width: 700px">
69 <div data-expected-display=
"block" data-expected-width=
"100" style=
"display: inline-block;"></div>
70 <div data-expected-display=
"-webkit-box" data-expected-width=
"100" style=
"display: -webkit-inline-box;"></div>
71 <div data-expected-display=
"flex" data-expected-width=
"100" style=
"display: inline-flex;"></div>
72 <div data-expected-display=
"block" data-expected-width=
"100" style=
"display: table-cell"></div>
73 <div data-expected-display=
"block" data-expected-width=
"100" style=
"display: compact"></div>
74 <div data-expected-display=
"block" data-expected-width=
"100" style=
"display: run-in"></div>
75 <div data-expected-display=
"block" data-expected-width=
"100" style=
"display: inline;"></div>
79 <!-- FIXME: This table should flex. -->
80 <div data-expected-display=
"table" data-expected-width=
"600" style=
"display: inline-table"></div>
83 <div class=
"flexbox" style=
"height:200px">
84 <iframe data-expected-display=
"block" data-expected-height=
"200" src=
"data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
85 <iframe seamless
data-expected-display=
"block" data-expected-height=
"200" src=
"data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
88 <div class=
"flexbox" style=
"height:100px">
89 <iframe data-expected-display=
"block" data-expected-height=
"100" src=
"data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
90 <iframe seamless
data-expected-display=
"block" data-expected-height=
"100" src=
"data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
93 <div class=
"flexbox column" style=
"width:100px">
94 <iframe data-expected-display=
"block" data-expected-width=
"100" src=
"data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
95 <iframe seamless
data-expected-display=
"block" data-expected-width=
"100" src=
"data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
98 <div class=
"flexbox column" style=
"height:210px">
99 <button data-expected-display=
"block" data-expected-width=
"600" data-expected-height=
"30">button
</button>
100 <canvas data-expected-display=
"block" data-expected-width=
"600" data-expected-height=
"30" style=
"height:30px">canvas
</canvas>
101 <iframe data-expected-display=
"block" data-expected-width=
"600" data-expected-height=
"30" style=
"height:30px" src=
"data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
102 <iframe seamless
data-expected-display=
"block" data-expected-width=
"600" data-expected-height=
"30" style=
"height:30px" src=
"data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
103 <object data-expected-display=
"block" data-expected-width=
"600" data-expected-height=
"30">object
</object>
104 <select data-expected-display=
"block" data-expected-width=
"600" data-expected-height=
"30">
105 <option>select
</option>
107 <textarea data-expected-display=
"block" data-expected-width=
"600" data-expected-height=
"30">textarea
</textarea>
110 <!-- tests that min-height expands the height of flex items beyond the height of the flexbox -->
111 <div class=
"flexbox" style=
"height:50px">
112 <img data-expected-height=
"60" style=
"min-height:60px" src=
"../images/resources/blue-100.png">
113 <img data-expected-height=
"60" style=
"min-height:60px" src=
"../images/resources/green-10.png">
114 <img data-expected-height=
"75" style=
"min-height:150%" src=
"../images/resources/blue-100.png">
115 <img data-expected-height=
"75" style=
"min-height:150%" src=
"../images/resources/green-10.png">
116 <img data-expected-height=
"10" style=
"min-height:-webkit-min-content;height:1px" src=
"../images/resources/blue-10.png">
117 <img data-expected-height=
"100" style=
"min-height:-webkit-max-content;height:1px" src=
"../images/resources/green-100.png">
118 <img data-expected-height=
"50" style=
"min-height:-webkit-fill-available" src=
"../images/resources/blue-10.png">
119 <img data-expected-height=
"10" style=
"min-height:-webkit-fit-content;height:1px" src=
"../images/resources/green-10.png">
122 <!-- tests that max-height shrinks the height of flex items less than the height of the flexbox -->
123 <div class=
"flexbox" style=
"height:50px">
124 <img data-expected-height=
"40" style=
"max-height:40px" src=
"../images/resources/blue-100.png">
125 <img data-expected-height=
"40" style=
"max-height:40px" src=
"../images/resources/green-10.png">
126 <img data-expected-height=
"25" style=
"max-height:50%" src=
"../images/resources/blue-100.png">
127 <img data-expected-height=
"25" style=
"max-height:50%" src=
"../images/resources/green-10.png">
128 <img data-expected-height=
"10" style=
"max-height:-webkit-min-content;height:1000px;" src=
"../images/resources/blue-10.png">
129 <img data-expected-height=
"100" style=
"max-height:-webkit-max-content;height:1000px;" src=
"../images/resources/green-100.png">
130 <img data-expected-height=
"50" style=
"max-height:-webkit-fill-available" src=
"../images/resources/blue-100.png">
131 <img data-expected-height=
"10" style=
"max-height:-webkit-fit-content;height:1000px" src=
"../images/resources/green-10.png">
134 <!-- tests that images can shrink below their CSS height with min-height: min-content -->
135 <div class=
"flexbox column" style=
"height:50px">
136 <img data-expected-height=
"50" style=
"flex-shrink:1;height:1000px;min-height:-webkit-min-content;" src=
"../images/resources/blue-10.png">
139 <!-- tests that text can shrink below its CSS height with min-height: min-content -->
140 <div class=
"flexbox column" style=
"height:50px">
141 <div data-expected-height=
"50" style=
"flex-shrink:1;height:1000px;min-height:-webkit-min-content;" src=
"../images/resources/blue-10.png">
147 <!-- tests that images can shrink below their CSS width with min-width: min-content -->
148 <div class=
"flexbox" style=
"width:50px">
149 <img data-expected-width=
"50" style=
"flex-shrink:1;width:1000px;min-width:-webkit-min-content;" src=
"../images/resources/blue-10.png">
152 <!-- tests that min-width expands the width of flex items beyond the width of the flexbox -->
153 <div class=
"flexbox column" style=
"width:50px">
154 <img data-expected-width=
"60" style=
"min-width:60px" src=
"../images/resources/blue-100.png">
155 <img data-expected-width=
"60" style=
"min-width:60px" src=
"../images/resources/green-10.png">
156 <img data-expected-width=
"75" style=
"min-width:150%" src=
"../images/resources/blue-100.png">
157 <img data-expected-width=
"75" style=
"min-width:150%" src=
"../images/resources/green-10.png">
158 <img data-expected-width=
"100" style=
"min-width:-webkit-min-content" src=
"../images/resources/blue-100.png">
159 <img data-expected-width=
"50" style=
"min-width:-webkit-min-content" src=
"../images/resources/green-10.png">
160 <img data-expected-width=
"100" style=
"min-width:-webkit-max-content" src=
"../images/resources/blue-100.png">
161 <img data-expected-width=
"50" style=
"min-width:-webkit-max-content" src=
"../images/resources/green-10.png">
162 <img data-expected-width=
"50" style=
"min-width:-webkit-fill-available" src=
"../images/resources/blue-100.png">
163 <img data-expected-width=
"50" style=
"min-width:-webkit-fill-available" src=
"../images/resources/green-10.png">
164 <img data-expected-width=
"100" style=
"min-width:-webkit-fit-content" src=
"../images/resources/blue-100.png">
165 <img data-expected-width=
"50" style=
"min-width:-webkit-fit-content" src=
"../images/resources/green-10.png">
168 <!-- tests that max-width shrinks the width of flex items less than the width of the flexbox -->
169 <div class=
"flexbox column" style=
"width:50px">
170 <img data-expected-width=
"40" style=
"max-width:40px" src=
"../images/resources/blue-100.png">
171 <img data-expected-width=
"40" style=
"max-width:40px" src=
"../images/resources/green-10.png">
172 <img data-expected-width=
"25" style=
"max-width:50%" src=
"../images/resources/blue-100.png">
173 <img data-expected-width=
"25" style=
"max-width:50%" src=
"../images/resources/green-10.png">
174 <img data-expected-width=
"50" style=
"max-width:-webkit-min-content" src=
"../images/resources/blue-100.png">
175 <img data-expected-width=
"10" style=
"max-width:-webkit-min-content" src=
"../images/resources/green-10.png">
176 <img data-expected-width=
"50" style=
"max-width:-webkit-max-content" src=
"../images/resources/blue-100.png">
177 <img data-expected-width=
"10" style=
"max-width:-webkit-max-content" src=
"../images/resources/green-10.png">
178 <img data-expected-width=
"50" style=
"max-width:-webkit-fill-available" src=
"../images/resources/blue-100.png">
179 <img data-expected-width=
"50" style=
"max-width:-webkit-fill-available" src=
"../images/resources/green-10.png">
180 <img data-expected-width=
"50" style=
"max-width:-webkit-fit-content" src=
"../images/resources/blue-100.png">
181 <img data-expected-width=
"10" style=
"max-width:-webkit-fit-content" src=
"../images/resources/green-10.png">