fast/table/absolute-table-at-bottom.html

<!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>