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