LayoutTests/css2.1/20110323/vertical-align-boxes-001.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3  <head>
   4   <title>CSS Test: Vertical Alignment boxes: replaced elements</title>
   5   <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
   6   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height">
   7   <meta name="flags" content="ahem image">
   8   <meta name="assert" content="Vertical alignment aligns the margin box of inline replaced elements.">
   9   <style type="text/css">
  10     .test {
  11         height: 2em;
  12         font: 40px/60px Ahem; color: blue;
  13     }
  14
  15     #control {
  16       height: 40px;
  17       margin-bottom: -18px;
  18     }
  19     #length {
  20       vertical-align: -28px;
  21       padding-top: 15px;
  22       border-top: 10px solid;
  23       margin: 10px 0;
  24     }
  25     #percent {
  26       vertical-align: 50%;
  27       padding-bottom: 15px;
  28       border-bottom: 10px solid;
  29       margin-bottom: -48px;
  30     }
  31     #text-bottom {
  32       vertical-align: text-bottom;
  33       padding-bottom: 10px;
  34       border-bottom: 15px solid;
  35       margin-bottom: -10px;
  36     }
  37     #text-top {
  38       vertical-align: text-top;
  39       padding-top: 15px;
  40       border-top: 10px solid;
  41       margin-top: 10px;
  42     }
  43     #middle {
  44       vertical-align: middle;
  45       padding-top: 15px;
  46       border-top: 10px solid;
  47       margin-bottom: -28px;
  48     }
  49     #baseline {
  50       vertical-align: baseline;
  51       padding-bottom: 10px;
  52       border-bottom: 15px solid;
  53       margin-bottom: -18px;
  54     }
  55
  56     img {
  57       background: blue;
  58     }
  59   </style>
  60  </head>
  61  <body>
  62   <p>There should be a single blue rectangle with perfectly straight sides below.</p>
  63   <div class="test">
  64     <img id="control" src="support/swatch-blue.png" alt="FAIL"><!--
  65  --><img id="baseline" src="support/swatch-blue.png" alt="FAIL"><!--
  66  --><img id="middle" src="support/swatch-blue.png" alt="FAIL"><!--
  67  --><img id="text-top" src="support/swatch-blue.png" alt="FAIL"><!--
  68  --><img id="text-bottom" src="support/swatch-blue.png" alt="FAIL"><!--
  69  --><img id="percent" src="support/swatch-blue.png" alt="FAIL"><!--
  70  --><img id="length" src="support/swatch-blue.png" alt="FAIL">
  71   </div>
  72
  73  </body>
  74 </html>