|
1 <?xml version="1.0" encoding="UTF-8"?> |
|
2 <!-- |
|
3 Any copyright is dedicated to the Public Domain. |
|
4 http://creativecommons.org/publicdomain/zero/1.0/ |
|
5 --> |
|
6 <!-- |
|
7 Reference case - see documentation in corresponding testcase. |
|
8 This reference uses blocks where the testcase uses flexboxes. |
|
9 They should be sized the same, since they're basically just text |
|
10 with no special flex sizing properties in play. |
|
11 --> |
|
12 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
13 <head> |
|
14 <link rel="stylesheet" type="text/css" href="ahem.css" /> |
|
15 <style> |
|
16 table { |
|
17 width: 300px; |
|
18 font: 10px Ahem; |
|
19 margin-bottom: 2px; |
|
20 border: 1px dashed black; |
|
21 } |
|
22 |
|
23 div.a { background: lightgreen; } |
|
24 div.b { background: lightblue; } |
|
25 |
|
26 <!-- helper-classes for assigning pref / min / auto-width to our divs --> |
|
27 div.prefWidth { |
|
28 width: -moz-max-content; |
|
29 } |
|
30 div.minWidth { |
|
31 width: -moz-min-content; |
|
32 } |
|
33 div.autoWidth { |
|
34 width: auto; |
|
35 } |
|
36 </style> |
|
37 </head> |
|
38 <body> |
|
39 <!-- both auto width --> |
|
40 <table cellpadding="0" cellspacing="0"><tr> |
|
41 <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> |
|
42 <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> |
|
43 </tr></table> |
|
44 |
|
45 <!-- MIXING MIN WIDTH & AUTO --> |
|
46 <!-- both min width --> |
|
47 <table cellpadding="0" cellspacing="0"><tr> |
|
48 <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> |
|
49 <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> |
|
50 </tr></table> |
|
51 <!-- min,auto --> |
|
52 <table cellpadding="0" cellspacing="0"><tr> |
|
53 <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> |
|
54 <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> |
|
55 </tr></table> |
|
56 <!-- auto,min --> |
|
57 <table cellpadding="0" cellspacing="0"><tr> |
|
58 <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> |
|
59 <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> |
|
60 </tr></table> |
|
61 |
|
62 <!-- MIXING PREF WIDTH & AUTO --> |
|
63 <!-- both prefWidth (NOTE: makes the table larger than it wants to be --> |
|
64 <table cellpadding="0" cellspacing="0"><tr> |
|
65 <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> |
|
66 <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> |
|
67 </tr></table> |
|
68 <!-- pref,auto --> |
|
69 <table cellpadding="0" cellspacing="0"><tr> |
|
70 <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> |
|
71 <td><div class="b autoWidth">bb bb b bb bb b bb b</div></td> |
|
72 </tr></table> |
|
73 <!-- auto,pref --> |
|
74 <table cellpadding="0" cellspacing="0"><tr> |
|
75 <td><div class="a autoWidth">aaaa aaaa aaaaa</div></td> |
|
76 <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> |
|
77 </tr></table> |
|
78 |
|
79 <!-- MIXING PREF WIDTH & MIN WIDTH --> |
|
80 <!-- min,pref --> |
|
81 <table cellpadding="0" cellspacing="0"><tr> |
|
82 <td><div class="a minWidth">aaaa aaaa aaaaa</div></td> |
|
83 <td><div class="b prefWidth">bb bb b bb bb b bb b</div></td> |
|
84 </tr></table> |
|
85 <!-- pref,min --> |
|
86 <table cellpadding="0" cellspacing="0"><tr> |
|
87 <td><div class="a prefWidth">aaaa aaaa aaaaa</div></td> |
|
88 <td><div class="b minWidth">bb bb b bb bb b bb b</div></td> |
|
89 </tr></table> |
|
90 </body> |
|
91 </html> |