blob: 61ab1e6722955e5bdaf9864aab8eefd8e3215177 [file] [log] [blame]
<!DOCTYPE html>
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;
<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> The middle-aligned container should line up with the text line.</span>
<div id="test-output"></div>
window.checkLayout("#line", document.getElementById("test-output"));