| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Absolute Bottom Table</title> |
| <style type="text/css"> |
| p { margin: 0; padding: 0; } |
| .atBottom { position: absolute; bottom: 0; left: 0; } |
| table { width: 120px; border:red solid 1px; } |
| |
| #test1 { margin-left: 120px; height:50px; } |
| #test2 { margin-left: 240px; } |
| #test3 { margin-left: 360px; height:8px; } |
| </style> |
| </head> |
| <body> |
| <p>Testcase for bug <a href="https://bugs.webkit.org/show_bug.cgi?id=4874">4874</a> - Table with absolute bottom positioning is positioned incorrectly.</p> |
| <h1>Look Down!</h1> |
| <p> |
| At the bottom of the window you should see the word "Paragraph" followed by |
| three boxes containing text. The entire red border around each box should |
| be visible without scrolling (the window should not be scrollable at all). |
| The three boxes should be aligned at the bottom with the bottom of the |
| window. The text "Tall table" should be vertically centered in its box, |
| which should be 50px tall. The other two boxes should both be shorter than |
| 50px, and have the same height. |
| </p> |
| |
| <table id="test1" class="atBottom"> |
| <tr> |
| <td>Tall table</td> |
| </tr> |
| </table> |
| <table id="test2" class="atBottom"> |
| <tr> |
| <td>Normal table</td> |
| </tr> |
| </table> |
| <table id="test3" class="atBottom"> |
| <tr> |
| <td>Short table</td> |
| </tr> |
| </table> |
| |
| <p class="atBottom"> |
| Paragraph |
| </p> |
| </body> |
| </html> |
