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