| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>inline-block + vertical-align</title> |
| </head> |
| <style type="text/css"> |
| #outer { |
| border: 1px solid blue; |
| } |
| #inner { |
| display: inline-block; |
| vertical-align: text-bottom; |
| border: 1px solid green; |
| } |
| </style> |
| <body> |
| <p>The bottom line of the green box should be above the bottom line of the blue box.</p> |
| <p> |
| <span id="outer"> |
| [Text] |
| <span id="inner"> |
| [Inline Block] |
| </span> |
| </span> |
| </p> |
| <p id="result"></p> |
| <script type="text/javascript"> |
| if (window.testRunner) |
| window.testRunner.dumpAsText(); |
| var result = document.getElementById('result'); |
| var outer = document.getElementById('outer'); |
| var inner = document.getElementById('inner'); |
| var outerBottom = outer.offsetTop + outer.offsetHeight; |
| var innerBottom = inner.offsetTop + inner.offsetHeight; |
| if (outerBottom >= innerBottom) { |
| result.innerHTML = 'PASS'; |
| result.style.color = 'green'; |
| } else { |
| result.innerHTML = 'FAIL (outerBottom = ' + outerBottom + ', innerBottom = ' + innerBottom + ')'; |
| result.style.color = 'red'; |
| } |
| </script> |
| </body> |
| </html> |
