<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>CSS Test: Vertical Alignment boxes: replaced elements</title>
  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
  <meta name="flags" content="ahem image">
  <meta name="assert" content="Vertical alignment aligns the margin box of inline replaced elements.">
  <style type="text/css">
    .test {
        height: 2em;
        font: 40px/60px Ahem; color: blue;
    }

    #control {
      height: 40px;
      margin-bottom: -18px;
    }
    #length {
      vertical-align: -28px;
      padding-top: 15px;
      border-top: 10px solid;
      margin: 10px 0;
    }
    #percent {
      vertical-align: 50%;
      padding-bottom: 15px;
      border-bottom: 10px solid;
      margin-bottom: -48px;
    }
    #text-bottom {
      vertical-align: text-bottom;
      padding-bottom: 10px;
      border-bottom: 15px solid;
      margin-bottom: -10px;
    }
    #text-top {
      vertical-align: text-top;
      padding-top: 15px;
      border-top: 10px solid;
      margin-top: 10px;
    }
    #middle {
      vertical-align: middle;
      padding-top: 15px;
      border-top: 10px solid;
      margin-bottom: -28px;
    }
    #baseline {
      vertical-align: baseline;
      padding-bottom: 10px;
      border-bottom: 15px solid;
      margin-bottom: -18px;
    }

    img {
      background: blue;
    }
  </style>
 </head>
 <body>
  <p>There should be a single blue rectangle with perfectly straight sides below.</p>
  <div class="test">
    <img id="control" src="support/swatch-blue.png" alt="FAIL"><!--
 --><img id="baseline" src="support/swatch-blue.png" alt="FAIL"><!--
 --><img id="middle" src="support/swatch-blue.png" alt="FAIL"><!--
 --><img id="text-top" src="support/swatch-blue.png" alt="FAIL"><!--
 --><img id="text-bottom" src="support/swatch-blue.png" alt="FAIL"><!--
 --><img id="percent" src="support/swatch-blue.png" alt="FAIL"><!--
 --><img id="length" src="support/swatch-blue.png" alt="FAIL">
  </div>

 </body>
</html>