third_party/WebKit/LayoutTests/fast/inline-block/inline-block-vertical-align-2.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>inline-block + vertical-align</title>
   5   </head>
   6   <style type="text/css">
   7 #outer {
   8     border: 1px solid blue;
   9 }
  10 #inner {
  11     display: inline-block;
  12     vertical-align: text-bottom;
  13     border: 1px solid green;
  14 }
  15   </style>
  16   <body>
  17     <p>The bottom line of the green box should be above the bottom line of the blue box.</p>
  18     <p>
  19       <span id="outer">
  20         [Text]
  21         <span id="inner">
  22           [Inline Block]
  23         </span>
  24       </span>
  25     </p>
  26     <p id="result"></p>
  27     <script type="text/javascript">
  28 if (window.testRunner)
  29     window.testRunner.dumpAsText();
  30 var result = document.getElementById('result');
  31 var outer = document.getElementById('outer');
  32 var inner = document.getElementById('inner');
  33 var outerBottom = outer.offsetTop + outer.offsetHeight;
  34 var innerBottom = inner.offsetTop + inner.offsetHeight;
  35 if (outerBottom >= innerBottom) {
  36     result.innerHTML = 'PASS';
  37     result.style.color = 'green';
  38 } else {
  39     result.innerHTML = 'FAIL (outerBottom = ' + outerBottom + ', innerBottom = ' + innerBottom + ')';
  40     result.style.color = 'red';
  41 }
  42     </script>
  43   </body>
  44 </html>