OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
| 3 <link href="resources/flexbox.css" rel="stylesheet"> |
3 <style> | 4 <style> |
4 .flexbox { | 5 .flexbox { |
5 width: 600px; | 6 width: 600px; |
6 display: -webkit-flex; | |
7 background-color: #aaa; | 7 background-color: #aaa; |
8 position: relative; | 8 position: relative; |
9 min-height: 10px; | 9 min-height: 10px; |
10 } | 10 } |
11 .flexbox > * { | 11 .flexbox > * { |
12 -webkit-flex: 1 0 0; | 12 flex: 1 0 0; |
13 margin: 0; | 13 margin: 0; |
14 border: 0; | 14 border: 0; |
15 padding: 0; | 15 padding: 0; |
16 font-size: 12px; | 16 font-size: 12px; |
17 min-width: 0; | 17 min-width: 0; |
18 } | 18 } |
19 .column { | |
20 -webkit-flex-direction: column; | |
21 } | |
22 </style> | 19 </style> |
23 <script src="../../resources/check-layout.js"></script> | 20 <script src="../../resources/check-layout.js"></script> |
24 <body onload="checkLayout('.flexbox')"> | 21 <body onload="checkLayout('.flexbox')"> |
25 <div class="flexbox" style="height:200px"> | 22 <div class="flexbox" style="height:200px"> |
26 <button data-expected-display="block" data-expected-width="100" data-expected-
height="200">button</button> | 23 <button data-expected-display="block" data-expected-width="100" data-expected-
height="200">button</button> |
27 <canvas data-expected-display="block" data-expected-width="100" data-expected-
height="200">canvas</canvas> | 24 <canvas data-expected-display="block" data-expected-width="100" data-expected-
height="200">canvas</canvas> |
28 <iframe data-expected-display="block" data-expected-width="100" data-expected-
height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe> | 25 <iframe data-expected-display="block" data-expected-width="100" data-expected-
height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe> |
29 <object data-expected-display="block" data-expected-width="100" data-expected-
height="200">object</object> | 26 <object data-expected-display="block" data-expected-width="100" data-expected-
height="200">object</object> |
30 <select data-expected-display="block" data-expected-width="100" data-expected-
height="200"> | 27 <select data-expected-display="block" data-expected-width="100" data-expected-
height="200"> |
31 <option>select</option> | 28 <option>select</option> |
32 </select> | 29 </select> |
33 <textarea data-expected-display="block" data-expected-width="100" data-expecte
d-height="200">textarea</textarea> | 30 <textarea data-expected-display="block" data-expected-width="100" data-expecte
d-height="200">textarea</textarea> |
34 </div> | 31 </div> |
35 | 32 |
36 | 33 |
37 <div class="flexbox"> | 34 <div class="flexbox"> |
38 <input data-expected-display="block" data-expected-width="75" type="checkbox"
value="radio"></input> | 35 <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" valu
e="file"></input> | 36 <input data-expected-display="block" data-expected-width="75" type="file" valu
e="file"></input> |
40 <input data-expected-display="block" data-expected-width="75" type="image" val
ue="image"></input> | 37 <input data-expected-display="block" data-expected-width="75" type="image" val
ue="image"></input> |
41 <input data-expected-display="block" data-expected-width="75" type="password"
value="password"></input> | 38 <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" val
ue="radio"></input> | 39 <input data-expected-display="block" data-expected-width="75" type="radio" val
ue="radio"></input> |
43 <input data-expected-display="block" data-expected-width="75" type="reset" val
ue="reset"></input> | 40 <input data-expected-display="block" data-expected-width="75" type="reset" val
ue="reset"></input> |
44 <input data-expected-display="block" data-expected-width="75" type="submit" va
lue="submit"></input> | 41 <input data-expected-display="block" data-expected-width="75" type="submit" va
lue="submit"></input> |
45 <input data-expected-display="block" data-expected-width="75" type="text" valu
e="text"></input> | 42 <input data-expected-display="block" data-expected-width="75" type="text" valu
e="text"></input> |
46 </div> | 43 </div> |
47 | 44 |
48 <div class="flexbox"> | 45 <div class="flexbox"> |
49 <img data-expected-display="block" data-expected-width="200" style="-webkit-fl
ex: 1 0 auto;" src="../images/resources/blue-100.png"> | 46 <img data-expected-display="block" data-expected-width="200" style="flex: 1 0
auto;" src="../images/resources/blue-100.png"> |
50 <img data-expected-display="block" data-expected-width="200" data-expected-hei
ght="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png"> | 47 <img data-expected-display="block" data-expected-width="200" data-expected-hei
ght="100" style="flex: 2 0 0;" src="doesnotexist.png"> |
51 <img data-expected-display="block" data-expected-width="200" data-expected-hei
ght="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png" alt="placeholder t
ext"> | 48 <img data-expected-display="block" data-expected-width="200" data-expected-hei
ght="100" style="flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text"> |
52 </div> | 49 </div> |
53 | 50 |
54 <div class="flexbox"> | 51 <div class="flexbox"> |
55 <svg data-expected-display="block" data-expected-width="100" style="-webkit-fl
ex: 1 0 auto; width: 100px; height: 100px"> | 52 <svg data-expected-display="block" data-expected-width="100" style="flex: 1 0
auto; width: 100px; height: 100px"> |
56 <circle cx="50" cy="50" r="50" fill="blue"> | 53 <circle cx="50" cy="50" r="50" fill="blue"> |
57 </circle> | 54 </circle> |
58 </svg> | 55 </svg> |
59 <svg data-expected-display="block" data-expected-width="500" style="-webkit-fl
ex: 1 1 auto; height: 100px"> | 56 <svg data-expected-display="block" data-expected-width="500" style="flex: 1 1
auto; height: 100px"> |
60 <circle cx="50" cy="50" r="50" fill="green"> | 57 <circle cx="50" cy="50" r="50" fill="green"> |
61 </circle> | 58 </circle> |
62 </svg> | 59 </svg> |
63 </div> | 60 </div> |
64 | 61 |
65 <div class="flexbox"> | 62 <div class="flexbox"> |
66 <span data-expected-display="block" data-expected-width="200" style="-webkit-f
lex: 2 0 0"></span> | 63 <span data-expected-display="block" data-expected-width="200" style="flex: 2 0
0"></span> |
67 <button data-expected-display="block" data-expected-width="100" style="-webkit
-flex: 1 0 0">button</button> | 64 <button data-expected-display="block" data-expected-width="100" style="flex: 1
0 0">button</button> |
68 <span data-expected-display="block" data-expected-width="300" style="-webkit-f
lex: 2 2 100px"></span> | 65 <span data-expected-display="block" data-expected-width="300" style="flex: 2 2
100px"></span> |
69 </div> | 66 </div> |
70 | 67 |
71 <div class="flexbox" style="width: 700px"> | 68 <div class="flexbox" style="width: 700px"> |
72 <div data-expected-display="block" data-expected-width="100" style="display: i
nline-block;"></div> | 69 <div data-expected-display="block" data-expected-width="100" style="display: i
nline-block;"></div> |
73 <div data-expected-display="-webkit-box" data-expected-width="100" style="disp
lay: -webkit-inline-box;"></div> | 70 <div data-expected-display="-webkit-box" data-expected-width="100" style="disp
lay: -webkit-inline-box;"></div> |
74 <div data-expected-display="-webkit-flex" data-expected-width="100" style="dis
play: -webkit-inline-flex;"></div> | 71 <div data-expected-display="flex" data-expected-width="100" style="display: in
line-flex;"></div> |
75 <div data-expected-display="block" data-expected-width="100" style="display: t
able-cell"></div> | 72 <div data-expected-display="block" data-expected-width="100" style="display: t
able-cell"></div> |
76 <div data-expected-display="block" data-expected-width="100" style="display: c
ompact"></div> | 73 <div data-expected-display="block" data-expected-width="100" style="display: c
ompact"></div> |
77 <div data-expected-display="block" data-expected-width="100" style="display: r
un-in"></div> | 74 <div data-expected-display="block" data-expected-width="100" style="display: r
un-in"></div> |
78 <div data-expected-display="block" data-expected-width="100" style="display: i
nline;"></div> | 75 <div data-expected-display="block" data-expected-width="100" style="display: i
nline;"></div> |
79 </div> | 76 </div> |
80 | 77 |
81 <div class="flexbox"> | 78 <div class="flexbox"> |
82 <!-- FIXME: This table should flex. --> | 79 <!-- FIXME: This table should flex. --> |
83 <div data-expected-display="table" data-expected-width="600" style="display: i
nline-table"></div> | 80 <div data-expected-display="table" data-expected-width="600" style="display: i
nline-table"></div> |
84 </div> | 81 </div> |
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
154 <img data-expected-width="10" style="max-width:-webkit-min-content" src="../
images/resources/green-10.png"> | 151 <img data-expected-width="10" style="max-width:-webkit-min-content" src="../
images/resources/green-10.png"> |
155 <img data-expected-width="50" style="max-width:-webkit-max-content" src="../
images/resources/blue-100.png"> | 152 <img data-expected-width="50" style="max-width:-webkit-max-content" src="../
images/resources/blue-100.png"> |
156 <img data-expected-width="10" style="max-width:-webkit-max-content" src="../
images/resources/green-10.png"> | 153 <img data-expected-width="10" style="max-width:-webkit-max-content" src="../
images/resources/green-10.png"> |
157 <img data-expected-width="50" style="max-width:-webkit-fill-available" src="
../images/resources/blue-100.png"> | 154 <img data-expected-width="50" style="max-width:-webkit-fill-available" src="
../images/resources/blue-100.png"> |
158 <img data-expected-width="50" style="max-width:-webkit-fill-available" src="
../images/resources/green-10.png"> | 155 <img data-expected-width="50" style="max-width:-webkit-fill-available" src="
../images/resources/green-10.png"> |
159 <img data-expected-width="50" style="max-width:-webkit-fit-content" src="../
images/resources/blue-100.png"> | 156 <img data-expected-width="50" style="max-width:-webkit-fit-content" src="../
images/resources/blue-100.png"> |
160 <img data-expected-width="10" style="max-width:-webkit-fit-content" src="../
images/resources/green-10.png"> | 157 <img data-expected-width="10" style="max-width:-webkit-fit-content" src="../
images/resources/green-10.png"> |
161 </div> | 158 </div> |
162 | 159 |
163 </html> | 160 </html> |
OLD | NEW |