<!DOCTYPE html>
<style>
body {
    padding: 0;
    margin: 0;
    font: 10px Ahem;
}
.outside {
    height: 300px;
}
.inside {
    display: inline-block;
    width: 50px;
}
.tall {
    height: 120px;
    vertical-align: bottom;
}
.short {
    height: 85px;
    vertical-align: top;
}
.shorter {
    height: 65px;
    vertical-align: bottom;
}
div:nth-of-type(4) {
    height: 25px;
    vertical-align: top;
}
div:nth-of-type(5) {
    height: 150px;
    vertical-align: top;
}
div:nth-of-type(6) {
    height: 100px;
    vertical-align: middle;
}
div:nth-of-type(7) {
    height: 190px;
    vertical-align: bottom;
}
</style>
<script src="../../resources/check-layout.js"></script>
<div class="outside">
    <div class="inside tall">1</div>
    <div class="inside short">2</div>
    <div class="inside shorter">3</div>
    <div class="inside">4</div>
    <div class="inside">5</div>
    <div class="inside">6</div>
    <div class="inside">7</div>
    <span id="line" data-total-y=136>crbug.com/604144: The middle-aligned container should line up with the text line.</span>
</div>
<div id="test-output"></div>
<script>
window.checkLayout("#line", document.getElementById("test-output"));
</script>