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