Revised layout tests after the <hr> changes.
[WebKit-https.git] / LayoutTests / css1 / formatting_model / height_of_lines.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
2 <HTML>
3 <HEAD>
4 <TITLE>CSS1 Test Suite: 4.4 The Height of Lines</TITLE>
5 <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
6 <META http-equiv="Content-Style-Type" content="text/css">
7
8 <LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
9 <STYLE type="text/css">
10 P.one {font-size: 14px; line-height: 20px;}
11 IMG.onea {vertical-align: text-bottom;
12      width: 200px; height: 200px;}
13 IMG.oneb {vertical-align: text-top; width: 200px; height: 200px;}
14
15 P.two {font-size: 14px; line-height: 20px;}
16 IMG.twoa {vertical-align: text-bottom; width: 100px; height: 100px;
17      padding: 5px; border-style: solid;
18      border-width: 10px; margin: 15px;}
19 IMG.twob {vertical-align: text-top;
20           width: 100px; height: 100px;
21      padding: 5px; border-style: solid;
22      border-width: 10px; margin: 15px;}
23
24 IMG.twoc {vertical-align: middle; width: 50px; height: 50px;
25      padding: 5px; border-style: solid;
26      border-width: 10px; margin: -10px;}
27 </STYLE>
28
29 </HEAD>
30
31 <BODY><P>The style declarations which apply to the text below are:</P>
32 <PRE>P.one {font-size: 14px; line-height: 20px;}
33 IMG.onea {vertical-align: text-bottom;
34      width: 200px; height: 200px;}
35 IMG.oneb {vertical-align: text-top; width: 200px; height: 200px;}
36
37 P.two {font-size: 14px; line-height: 20px;}
38 IMG.twoa {vertical-align: text-bottom; width: 100px; height: 100px;
39      padding: 5px; border-style: solid;
40      border-width: 10px; margin: 15px;}
41 IMG.twob {vertical-align: text-top;
42           width: 100px; height: 100px;
43      padding: 5px; border-style: solid;
44      border-width: 10px; margin: 15px;}
45
46 IMG.twoc {vertical-align: middle; width: 50px; height: 50px;
47      padding: 5px; border-style: solid;
48      border-width: 10px; margin: -10px;}
49
50 </PRE>
51 <HR>
52 <P CLASS="one">
53 This paragraph should have a font size of 14px and a
54 line height of 20px.  This means that the lines of text within it
55 should be separated by six pixels, three of which are part of the
56 line-box of each line.  Any images within the paragraph should increase
57 the height of the line-box so that they fit within the line box, such
58 as <IMG SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="onea"> and <IMG
59 SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="oneb">.  This is additional text
60 to make sure that there is enough room left below the image so that
61 this line does not hit the image that is text-top aligned.
62 </P>
63
64 <P CLASS="two">
65 This paragraph should have a font size of 14px and a
66 line height of 20px.  This means that the lines of text within it
67 should be separated by six pixels.  Any images within the paragraph
68 should increase the height of the line-box so that they fit, including
69 their padding (5px), border (10px) and margins (15px) within the
70 line box, such as <IMG SRC="../resources/oransqr.gif" ALT="[Image]"
71 CLASS="twoa"> and <IMG SRC="../resources/oransqr.gif" ALT="[Image]"
72 CLASS="twob">.  This is additional text to make sure that there is
73 enough room left below the image so that this line does not hit the
74 image that is text-top aligned.  It is the outer edge of the margin that should be text-bottom and text-top aligned in this paragraph, so for the first image the bottom border of the image should begin 15px above the bottom of the text, and for the second image the top border should begin 15px below the top of the text <IMG SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="twoc">.  The last image in this paragraph has -10px margins set on it, so that should pull the text in toward the image in the vertical direction, and also in the horizontal direction.
75 </P>
76
77
78 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
79 <TR>
80 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
81 </TR>
82 <TR>
83 <TD bgcolor="silver">&nbsp;</TD>
84 <TD><P CLASS="one">
85 This paragraph should have a font size of 14px and a
86 line height of 20px.  This means that the lines of text within it
87 should be separated by six pixels, three of which are part of the
88 line-box of each line.  Any images within the paragraph should increase
89 the height of the line-box so that they fit within the line box, such
90 as <IMG SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="onea"> and <IMG
91 SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="oneb">.  This is additional text
92 to make sure that there is enough room left below the image so that
93 this line does not hit the image that is text-top aligned.
94 </P>
95
96 <P CLASS="two">
97 This paragraph should have a font size of 14px and a
98 line height of 20px.  This means that the lines of text within it
99 should be separated by six pixels.  Any images within the paragraph
100 should increase the height of the line-box so that they fit, including
101 their padding (5px), border (10px) and margins (15px) within the
102 line box, such as <IMG SRC="../resources/oransqr.gif" ALT="[Image]"
103 CLASS="twoa"> and <IMG SRC="../resources/oransqr.gif" ALT="[Image]"
104 CLASS="twob">.  This is additional text to make sure that there is
105 enough room left below the image so that this line does not hit the
106 image that is text-top aligned.  It is the outer edge of the margin that should be text-bottom and text-top aligned in this paragraph, so for the first image the bottom border of the image should begin 15px above the bottom of the text, and for the second image the top border should begin 15px below the top of the text <IMG SRC="../resources/oransqr.gif" ALT="[Image]" CLASS="twoc">.  The last image in this paragraph has -10px margins set on it, so that should pull the text in toward the image in the vertical direction, and also in the horizontal direction.
107 </P>
108 </TD></TR></TABLE></BODY>
109 </HTML>