<!DOCTYPE html>
<html>
<head>
<style>
    table {
        vertical-align:baseline;
    }
    td {
        vertical-align:baseline;
        border: 1px solid #f90;
    }
    #img1 {
        width: 100px;
        height: 150px;
        background-color: green;
    }
    #img2 {
        background-color: green;
    }
</style>
</head>
<body>
<p> https://bugs.webkit.org/show_bug.cgi?id=108357:  The bottom of the two green boxes should be aligned and there should be no space above the first box.</p>
<table>
    <tbody>
        <tr>
             <td><img id="img1" src="resources/greenbox-100px.png"></td><td><img id="img2" src="resources/greenbox.png"></td>
        </tr>
    </tbody>
</table>
<script>
    var img = document.getElementById("img2");
    img.src = "resources/greenbox-100px.png"; 
</script>
</body>
</html>