| <!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> |
