| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .yellow { |
| width: 800px; |
| background-color: yellow; |
| } |
| .red { |
| width: 100%; |
| background-color: red; |
| border-spacing: 0px; |
| } |
| .green { |
| background-color: green; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test for Bugzilla <a href="https://bugs.webkit.org/show_bug.cgi?id=11645">Bug 11645</a>: Table with percentage column widths doesn't scale to fill the entire width of a table containing it.</p> |
| <p>When the inner table has auto width and the table column(s) have percent width, we should grow or scale our column(s) to the size of the containing table unless it has auto width.</p> |
| <p>No red background color should be visible for the following two tables.</p> |
| <table class="yellow"> |
| <tr> |
| <td> |
| <table class="red"> |
| <tr> |
| <td style="padding: 0px;"> |
| <table class="green"> |
| <tr> |
| <td style="width: 100px; background-color: white;">A</td> |
| <td style="width: 95%;">B</td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| <table class="yellow"> |
| <tr> |
| <td> |
| <table class="red"> |
| <tr> |
| <td style="padding: 0px;"> |
| <table class="green"> |
| <tr> |
| <td style="width: 95%;">B</td> |
| <td style="width: 100px; background-color: white;">A</td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| </body> |
| </html> |
