vertical-align-boxes-001

Vertical Alignment boxes: replaced elements

WeasyPrint

This browser

Flags
ahem, image
Assertion
Vertical alignment aligns the margin box of inline replaced elements.

Source

 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>