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