Weird {display:table} behavior

I cannot figure this one out. When using display:table along with display:table-cell, placing an img tag in either cell1 or cell2 will force the content (the "This is a test" content for example), in the other cell to drop below the image. Is this correct? It does this across all browsers so I'm thinking this is correct, but why?

<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        div {
            border: 2px solid #000;
            width: 100%;
            height: 100%;
        }
        .table {
            display: table;
            border-collapse: collapse;
        }
        .row {
            display: table-row;
        }
        .cell {
            display: table-cell;
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="row">
            <div id="cell1" class="cell">
                <h1>This is a test</h1>
            </div>
            <div id="cell2" class="cell">
                <img src="" />
            </div>
        </div>
    </div>
</body>
</html>

Solution

Hm. vertical-align: top in the table-cell.

Workin example: at jsFiddle