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>