Revised layout tests after the <hr> changes.
[WebKit-https.git] / LayoutTests / css1 / formatting_model / vertical_formatting.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.1.1 Vertical Formatting</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 {margin-bottom: 2cm; padding-bottom: 0;}
11 P.two {margin-top: 2cm; padding-top: 0;}
12 P.three {margin-top: 0; padding-top: 0;}
13 P.four {margin-top: -1cm; margin-bottom: 0;
14         padding-top: 0; padding-bottom: 0;}
15 DIV.five {margin-top: 1cm; margin-bottom: 1cm;
16           padding-top: 1cm; padding-bottom: 0;}
17 P.six {margin-top: 1cm; margin-bottom: 1cm;
18        padding-top: 0; padding-bottom: 0;}
19 P.seven {margin-top: 1cm; padding-top: 0;}
20 P.eight {margin-bottom: -1cm; padding-bottom: 2cm;}
21 P.nine {margin-top: -1cm; padding-top: 1cm;
22         padding-bottom: 0; margin-bottom: 1cm;}
23 P.ten {margin-top: 1cm;padding-top: 0;
24        float: left;width: 50%;}
25 P.eleven {margin-top: 1cm; padding-top: 0; clear: none;}
26 P.twelve {margin-bottom: 0; padding-bottom: 1cm; clear: both;}
27 P.thirteen {margin-top: 0; padding-top: 1cm;}
28 TABLE {clear: both;}
29 </STYLE>
30
31 </HEAD>
32
33 <BODY><P>The style declarations which apply to the text below are:</P>
34 <PRE>P.one {margin-bottom: 2cm; padding-bottom: 0;}
35 P.two {margin-top: 2cm; padding-top: 0;}
36 P.three {margin-top: 0; padding-top: 0;}
37 P.four {margin-top: -1cm; margin-bottom: 0;
38         padding-top: 0; padding-bottom: 0;}
39 DIV.five {margin-top: 1cm; margin-bottom: 1cm;
40           padding-top: 1cm; padding-bottom: 0;}
41 P.six {margin-top: 1cm; margin-bottom: 1cm;
42        padding-top: 0; padding-bottom: 0;}
43 P.seven {margin-top: 1cm; padding-top: 0;}
44 P.eight {margin-bottom: -1cm; padding-bottom: 2cm;}
45 P.nine {margin-top: -1cm; padding-top: 1cm;
46         padding-bottom: 0; margin-bottom: 1cm;}
47 P.ten {margin-top: 1cm;padding-top: 0;
48        float: left;width: 50%;}
49 P.eleven {margin-top: 1cm; padding-top: 0; clear: none;}
50 P.twelve {margin-bottom: 0; padding-bottom: 1cm; clear: both;}
51 P.thirteen {margin-top: 0; padding-top: 1cm;}
52 TABLE {clear: both;}
53
54 </PRE>
55 <HR>
56 <P CLASS="one">There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins.</P>
57
58 <P CLASS="two">This is another paragraph.</P>
59
60 <P CLASS="one">There should be a two-centimeter margin between this paragraph and the next.</P>
61
62 <P CLASS="three">This is another paragraph.</P>
63
64 <P CLASS="one">There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept).</P>
65
66 <P CLASS="four">This is another paragraph.</P>
67
68 <DIV CLASS="five">
69 <P CLASS="six">
70 There should be three centimeters between this text and the text above,
71 but only one centimeter between this text and the text below, because
72 vertical margins of nested elements should collapse only if there is no
73 border or padding between the margins.
74 </P></DIV>
75
76 <P CLASS="seven">This is more text.</P>
77
78 <P CLASS="eight">There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed.</P>
79
80 <P CLASS="nine">This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right.</P>
81
82 <P CLASS="ten">There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements.</P>
83
84 <P CLASS="eleven">There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing.</P>
85
86 <P CLASS="twelve">There should be two centimeters of padding between
87 this paragraph and the one below.  Padding does not collapse, and there
88 is 1cm of padding on each side.</P>
89
90 <P CLASS="thirteen">This is the next paragraph.</P>
91
92
93 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
94 <TR>
95 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
96 </TR>
97 <TR>
98 <TD bgcolor="silver">&nbsp;</TD>
99 <TD><P CLASS="one">There should be a two-centimeter margin between this paragraph and the next, because adjacent vertical margins should collapse to the maximum of the margins.</P>
100
101 <P CLASS="two">This is another paragraph.</P>
102
103 <P CLASS="one">There should be a two-centimeter margin between this paragraph and the next.</P>
104
105 <P CLASS="three">This is another paragraph.</P>
106
107 <P CLASS="one">There should be a one-centimeter margin between this paragraph and the next, because when there is one negative margin, the two margins should be added (the minus sign should be kept).</P>
108
109 <P CLASS="four">This is another paragraph.</P>
110
111 <DIV CLASS="five">
112 <P CLASS="six">
113 There should be three centimeters between this text and the text above,
114 but only one centimeter between this text and the text below, because
115 vertical margins of nested elements should collapse only if there is no
116 border or padding between the margins.
117 </P></DIV>
118
119 <P CLASS="seven">This is more text.</P>
120
121 <P CLASS="eight">There should be two centimeters between this paragraph and the one below, because negative margins collapse to a negative margin with the largest absolute value of the margins collapsed.</P>
122
123 <P CLASS="nine">This is a paragraph, which I should make very long so that you can easily see how much space there is between it and the one below it and to the right.</P>
124
125 <P CLASS="ten">There should be two centimeters between this paragraph and the one above it, since margins do not collapse on floating elements.</P>
126
127 <P CLASS="eleven">There should be one centimeter between this paragraph and the (non-floating) one above it, since the float should not effect the paragraph spacing.</P>
128
129 <P CLASS="twelve">There should be two centimeters of padding between
130 this paragraph and the one below.  Padding does not collapse, and there
131 is 1cm of padding on each side.</P>
132
133 <P CLASS="thirteen">This is the next paragraph.</P>
134 </TD></TR></TABLE></BODY>
135 </HTML>