| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
| "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <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."/> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <style type="text/css"> |
| .test { |
| height: 2em; |
| font: 40px/60px Ahem; color: orange; |
| } |
| |
| #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: orange; |
| } |
| </style> |
| </head> |
| <body> |
| <p>There should be a single orange rectangle with perfectly straight sides below.</p> |
| <div class="test"> |
| <img id="control" src="support/swatch-orange.png" alt="FAIL"/><!-- |
| --><img id="baseline" src="support/swatch-orange.png" alt="FAIL"/><!-- |
| --><img id="middle" src="support/swatch-orange.png" alt="FAIL"/><!-- |
| --><img id="text-top" src="support/swatch-orange.png" alt="FAIL"/><!-- |
| --><img id="text-bottom" src="support/swatch-orange.png" alt="FAIL"/><!-- |
| --><img id="percent" src="support/swatch-orange.png" alt="FAIL"/><!-- |
| --><img id="length" src="support/swatch-orange.png" alt="FAIL"/> |
| </div> |
| |
| </body> |
| </html> |
