OLD | NEW |
1 <style> | 1 <style> |
2 .container { | 2 .container { |
3 width: 2000000px; | 3 width: 2000000px; |
4 } | 4 } |
5 .child { | 5 .child { |
6 display:inline-block; | 6 display:inline-block; |
7 background-color: orange; | 7 background-color: orange; |
8 height: 10px; | 8 height: 10px; |
9 } | 9 } |
10 td { | 10 td { |
11 padding: 0; | 11 padding: 0; |
12 } | 12 } |
13 table { | 13 table { |
14 border-spacing: 0; | 14 border-spacing: 0; |
15 display: inline-table; | 15 display: inline-table; |
16 outline: 5px solid salmon; | 16 outline: 5px solid salmon; |
17 } | 17 } |
18 </style> | 18 </style> |
19 | 19 |
20 <!-- The inner div should fill the container. It doesn't right now because we ar
tificially limit the table's maxPreferredLogicalWidth to 1000000. | 20 <!-- The inner div should fill the container. It doesn't right now because we ar
tificially limit the table's maxPreferredLogicalWidth to 1000000. |
21 See the related FIXME in TableLayoutAlgorithm.h. | 21 See the related FIXME in TableLayoutAlgorithm.h. |
22 --> | 22 --> |
23 <div class="container"> | 23 <div class="container"> |
24 <div style="display:inline-block; border: 5px solid salmon;" data-expected-w
idth=2000000> | 24 <div style="display:inline-block; border: 5px solid salmon;" data-expected-w
idth=2000000> |
25 <table style="width:100%; background-color:green; table-layout:fixed"><t
r><td>Content</td></tr></table> | 25 <table style="width:100%; background-color:green; table-layout:fixed"><t
r><td>Content</td></tr></table> |
26 </div> | 26 </div> |
27 </div> | 27 </div> |
28 | 28 |
29 <div class="container"> | 29 <div class="container"> |
30 <!-- The 1 px extra is from the align=right td. --> | 30 <table data-expected-width=20000> |
31 <table data-expected-width=20001> | |
32 <td align=right></td> | 31 <td align=right></td> |
33 <td width="100%"> | 32 <td width="100%"> |
34 <div class="child" style="width: 10000px"></div><div class="child" s
tyle="width: 10000px"></div> | 33 <div class="child" style="width: 10000px"></div><div class="child" s
tyle="width: 10000px"></div> |
35 </td> | 34 </td> |
36 </table> | 35 </table> |
37 </div> | 36 </div> |
38 | 37 |
39 <div class="container"> | 38 <div class="container"> |
40 <!-- The 1 px extra is from the align=right td. --> | 39 <table data-expected-width=1000000> |
41 <table data-expected-width=1000001> | |
42 <td align=right></td> | 40 <td align=right></td> |
43 <td width="100%"> | 41 <td width="100%"> |
44 <div class="child" style="width: 500000px"></div><div class="child"
style="width: 500000px"></div> | 42 <div class="child" style="width: 500000px"></div><div class="child"
style="width: 500000px"></div> |
45 </td> | 43 </td> |
46 </table> | 44 </table> |
47 </div> | 45 </div> |
48 | 46 |
49 <div class="container"> | 47 <div class="container"> |
50 <!-- The 1 px extra is from the align=right td. --> | 48 <table data-expected-width=1500000> |
51 <table data-expected-width=1500001> | |
52 <td align=right></td> | 49 <td align=right></td> |
53 <td width="100%"> | 50 <td width="100%"> |
54 <div class="child" style="width: 500000px"></div><div class="child"
style="width: 500000px"></div><div class="child" style="width: 500000px"></div> | 51 <div class="child" style="width: 500000px"></div><div class="child"
style="width: 500000px"></div><div class="child" style="width: 500000px"></div> |
55 </td> | 52 </td> |
56 </table> | 53 </table> |
57 </div> | 54 </div> |
58 | 55 |
59 <script src="../../resources/check-layout.js"></script> | 56 <script src="../../resources/check-layout.js"></script> |
60 <script> | 57 <script> |
61 checkLayout('.container'); | 58 checkLayout('.container'); |
62 </script> | 59 </script> |
OLD | NEW |