<!DOCTYPE html>
<html>
<head>
<style>
    td {
        border: 1px solid #f90; padding: 0px;
    }
    #text-bottom {
        vertical-align:text-bottom;
    }
    #text-top {
        vertical-align:text-top;
    }
</style>
<script>
    function loadAndStall()
    {
        return "http://127.0.0.1:8000/resources/load-and-stall.php";
    }
    
    function pngImage()
    {
        return "?name=../../../fast/css/resources/bikes.bmp&mimeType=image%bmp";
    }
    
    function runTest()
    {
        var images = document.querySelectorAll("img");
        for (var i = 0, len = images.length; i < len; i++) {
            var image = images[i];
            image.src = loadAndStall() + pngImage() + "&stallAt=0&stallFor=0";
        }
    }
</script>
</head>
<body>
<p> https://bugs.webkit.org/show_bug.cgi?id=108357:  There should be no space between the top of the image and the orange border.</p>
<table>
    <tbody>
        <tr>
             <td id="text-bottom"><img></td><td id="text-bottom"><video autoplay></video></td>
        </tr>
        <tr>
             <td id="text-top"><img></td><td id="text-top"><video autoplay></video></td>
        </tr>
    </tbody>
             <script>runTest();</script>
</table>
</body>
</html>