vertical-align-boxes-001.xht (2336B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 2 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>CSS Test: Vertical Alignment boxes: replaced elements</title> 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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style type="text/css"> 12 .test { 13 height: 2em; 14 font: 40px/60px Ahem; color: orange; 15 } 16 17 #control { 18 height: 40px; 19 margin-bottom: -18px; 20 } 21 #length { 22 vertical-align: -28px; 23 padding-top: 15px; 24 border-top: 10px solid; 25 margin: 10px 0; 26 } 27 #percent { 28 vertical-align: 50%; 29 padding-bottom: 15px; 30 border-bottom: 10px solid; 31 margin-bottom: -48px; 32 } 33 #text-bottom { 34 vertical-align: text-bottom; 35 padding-bottom: 10px; 36 border-bottom: 15px solid; 37 margin-bottom: -10px; 38 } 39 #text-top { 40 vertical-align: text-top; 41 padding-top: 15px; 42 border-top: 10px solid; 43 margin-top: 10px; 44 } 45 #middle { 46 vertical-align: middle; 47 padding-top: 15px; 48 border-top: 10px solid; 49 margin-bottom: -28px; 50 } 51 #baseline { 52 vertical-align: baseline; 53 padding-bottom: 10px; 54 border-bottom: 15px solid; 55 margin-bottom: -18px; 56 } 57 58 img { 59 background: orange; 60 } 61 </style> 62 </head> 63 <body> 64 <p>There should be a single orange rectangle with perfectly straight sides below.</p> 65 <div class="test"> 66 <img id="control" src="support/swatch-orange.png" alt="FAIL"/><!-- 67 --><img id="baseline" src="support/swatch-orange.png" alt="FAIL"/><!-- 68 --><img id="middle" src="support/swatch-orange.png" alt="FAIL"/><!-- 69 --><img id="text-top" src="support/swatch-orange.png" alt="FAIL"/><!-- 70 --><img id="text-bottom" src="support/swatch-orange.png" alt="FAIL"/><!-- 71 --><img id="percent" src="support/swatch-orange.png" alt="FAIL"/><!-- 72 --><img id="length" src="support/swatch-orange.png" alt="FAIL"/> 73 </div> 74 75 </body> 76 </html>