vertical-align-top-and-bottom.html | Explore in Territory

<!DOCTYPE html>
<style>
body {
    padding: 0;
    margin: 0;
}
.outside {
    font: 10px Ahem;
}
.inside {
    display: inline-block;
    width: 5px;
}
#top {
    height: 50px;
    vertical-align: top;
}
#bottom {
    height: 110px;
    vertical-align: bottom;
}
</style>
<script src="../../resources/check-layout.js"></script>
<div class="outside">
    <div id="top" class="inside"></div>
    <div id="bottom" class="inside"></div>
    <div id="line" style="display: inline-block;" data-total-y=110>crbug.com/604144: In an inline formatting context with a mix of top and bottom vertically aligned inline-blocks use the lowest.</div>
</div>
<div id="test-output"></div>
<script>
    window.checkLayout("#line", document.getElementById("test-output"));
</script>

chromium/third_party/blink/web_tests/fast/inline-block/vertical-align-top-and-bottom.html