| <style> |
| .container { |
| width: 2000000px; |
| } |
| .child { |
| display:inline-block; |
| background-color: orange; |
| height: 10px; |
| } |
| td { |
| padding: 0; |
| } |
| table { |
| border-spacing: 0; |
| display: inline-table; |
| outline: 5px solid salmon; |
| } |
| </style> |
| |
| <!-- The inner div should fill the container. It doesn't right now because we artificially limit the table's maxPreferredLogicalWidth to 1000000. |
| See the related FIXME in TableLayout.h. |
| --> |
| <div class="container"> |
| <div style="display:inline-block; border: 5px solid salmon;" data-expected-width=2000000> |
| <table style="width:100%; background-color:green; table-layout:fixed"><tr><td>Content</td></tr></table> |
| </div> |
| </div> |
| |
| <div class="container"> |
| <!-- The 1 px extra is from the align=right td. --> |
| <table data-expected-width=20001> |
| <td align=right></td> |
| <td width="100%"> |
| <div class="child" style="width: 10000px"></div><div class="child" style="width: 10000px"></div> |
| </td> |
| </table> |
| </div> |
| |
| <div class="container"> |
| <!-- The 1 px extra is from the align=right td. --> |
| <table data-expected-width=1000001> |
| <td align=right></td> |
| <td width="100%"> |
| <div class="child" style="width: 500000px"></div><div class="child" style="width: 500000px"></div> |
| </td> |
| </table> |
| </div> |
| |
| <div class="container"> |
| <!-- The 1 px extra is from the align=right td. --> |
| <table data-expected-width=1500001> |
| <td align=right></td> |
| <td width="100%"> |
| <div class="child" style="width: 500000px"></div><div class="child" style="width: 500000px"></div><div class="child" style="width: 500000px"></div> |
| </td> |
| </table> |
| </div> |
| |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| checkLayout('.container'); |
| </script> |