| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/check-layout.js"></script> |
| <script> |
| function test() |
| { |
| checkLayout('#table1'); |
| checkLayout('#table2'); |
| checkLayout('#table3'); |
| checkLayout('#table4'); |
| } |
| </script> |
| <style> |
| td { |
| height: 20px; |
| padding: 0px; |
| } |
| table { border-spacing: 0px; } |
| #table1, #table3 { |
| width: 100%; |
| table-layout: fixed; |
| border: 1px solid black; |
| } |
| #table2, #table4 { |
| width: 50%; |
| table-layout: fixed; |
| border: 1px solid black; |
| } |
| body { |
| max-width: 600px; |
| } |
| </style> |
| </head> |
| <body onload="test()"> |
| <div>Test for Bugzilla bug:<a href="https://bugs.webkit.org/show_bug.cgi?id=18153"> 18153</a> table not aligned in center column and seems shrunk because of float:right (table-layout: fixed and width: 100%).</div> |
| <p>The following fixed layout tables, with 100% percent widths, should expand to the full length of their containing blocks.</p> |
| <div style="display: inline-block"> |
| <table id="table1" data-expected-width="600"> |
| <tr> |
| <td style="width:100px;"></td> |
| <td style="width:80px;"></td> |
| <td style="width:120px;"></td> |
| <td style="width:150px;"></td> |
| </tr> |
| </table> |
| <table id="table2" data-expected-width="452"> |
| <tr> |
| <td style="width:100px;"></td> |
| <td style="width:80px;"></td> |
| <td style="width:120px;"></td> |
| <td style="width:150px;"></td> |
| </tr> |
| </table> |
| </div> |
| |
| <table><tr><td> |
| <table><tr><td> |
| <table id="table3" data-expected-width="600"> |
| <tr><td></td></tr> |
| </table> |
| </td></tr></table> |
| </td></tr></table> |
| <table><tr><td> |
| <table><tr><td> |
| <table id="table4" data-expected-width="300"> |
| <tr><td></td></tr> |
| </table> |
| </td></tr></table> |
| </td></tr></table> |
| </body> |
| </html> |
| |
