|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Any copyright is dedicated to the Public Domain. |
|
4 http://creativecommons.org/publicdomain/zero/1.0/ |
|
5 --> |
|
6 <html> |
|
7 <head> |
|
8 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> |
|
9 <meta charset="utf-8"> |
|
10 <style> |
|
11 .container { |
|
12 width: 100px; |
|
13 height: 30px; |
|
14 border: 1px solid black; |
|
15 float: left; |
|
16 margin: 2px; |
|
17 } |
|
18 .container > * { |
|
19 float: left; /* emulate the testcase's horizontal lineup of flex items */ |
|
20 } |
|
21 .itemA { |
|
22 width: 22px; |
|
23 height: 22px; |
|
24 background: purple; |
|
25 border: 4px solid indigo; |
|
26 } |
|
27 .itemB { |
|
28 width: 40px; |
|
29 height: 20px; |
|
30 background: teal; |
|
31 border: 5px solid lightblue; |
|
32 } |
|
33 </style> |
|
34 </head> |
|
35 <body> |
|
36 <!-- FIRST ROW --> |
|
37 <!-- 1 inflexible item --> |
|
38 <div class="container"> |
|
39 <div class="itemA"></div> |
|
40 </div> |
|
41 <!-- 1 flexible item --> |
|
42 <div class="container"> |
|
43 <div class="itemA" style="width: 92px"></div> |
|
44 </div> |
|
45 |
|
46 <div style="clear: both"></div> |
|
47 |
|
48 <!-- SECOND ROW --> |
|
49 <!-- 2 inflexible items --> |
|
50 <div class="container"> |
|
51 <div class="itemA"></div> |
|
52 <div class="itemB"></div> |
|
53 </div> |
|
54 <!-- 2 flexible items --> |
|
55 <div class="container"> |
|
56 <div class="itemA" style="width: 32px"></div> |
|
57 <div class="itemB" style="width: 50px"></div> |
|
58 </div> |
|
59 </body> |
|
60 </html> |