Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / css2.1 / t1008-c44-ln-box-03-d-ag.html
blobbfb2c12b0c6aae340d9a163c3efa229fe889c00d
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2 <html>
3 <head>
4 <title>CSS 2.1 Test Suite: The Height of Lines</title>
5 <script src="../resources/ahem.js"></script>
6 <style type="text/css">
7 div { font: 20px/40px Ahem; color: white; background: red url(support/css1test44d.png) no-repeat;
8 width: 14em; padding: 0.5em 1em; border: 1em solid green; }
9 img.twoc { vertical-align: -0.7em
10 /* 0.4em is exactly equal to 0.5ex which is exactly equal to the distance that 'middle'
11 causes the centerpoint of the image to be from the baseline. Since the centerpoint
12 is 1em above the bottom of the image, that means the bottom of the image has to be
13 moved -0.6em so that it is at the same position as it would be with 'vertical-align'
14 set to 'middle'. The bottom of the image is a further 0.6em+1em-1.5em from the bottom
15 margin edge of the whole replaced element, which is what needs to be moved away from
16 the baseline. So -(0.6em+(0.6em+1em-1.5em)) = -0.7em is the distance to move. */;
17 width: 2em; height: 2em; padding: 0.4em 0.5em 0.6em; border: solid 1em; margin: -1.5em -0.5em; }
18 </style>
19 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties">
20 </head>
21 <body>
22 <p>There should be no red below, just the outline of an empty green box.</p>
23 <div>
24 xxxx xxxx xxxx
25 xxxx xxxx xxxx
26 xxxx
27 <img alt="" src="support/swatch-white.png" class="twoc">
28 xxxx
29 xxxx xxxx xxxx
30 xxxx xxxx xxxx
31 </div>
32 </body>
33 </html>