Revised layout tests after the <hr> changes.
[WebKit-https.git] / LayoutTests / css1 / formatting_model / horizontal_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.2 Horizontal 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 .ruler {padding: 0px; margin: 0px; border-width: 0px;}
11 P#ruled {background-color: aqua; width: 400px;
12      border-style: solid; border-color: silver;
13      border-top-width: 0px; border-bottom-width: 0px;
14      border-left-width: 40px; border-right-width: 40px;
15      padding-left: 40px; padding-right: 40px;
16      margin-top: 0px; margin-bottom: 0px; margin-left: 40px; margin-right: 40px;}
17
18 P.one {margin-left: 10px;}
19 DIV.two {margin-left: 10px;}
20 P.three {margin-left: 0; width: 50%; margin-right: auto;
21          background-color: gray;}
22 P.four {margin-left: auto; width: 50%; margin-right: auto;
23         background-color: gray;}
24 P.five {margin-left: auto; width: 50%; margin-right: 0;
25         background-color: gray;}
26 P.six {margin-left: auto; width: auto; margin-right: 0;
27        background-color: gray; }
28 P.seven {margin-left: 0; width: auto; margin-right: auto;
29          background-color: gray;}
30 P.eight {margin-left: auto; width: auto; margin-right: auto;
31          background-color: gray;}
32 P.nine {padding-left: auto; padding-right: auto; margin-left: 0; margin-right: 0;
33         width: 50%; background-color: gray;}
34 P.ten {margin-left: auto; width: 100%; margin-right: auto;
35        background-color: gray;}
36 </STYLE>
37
38 </HEAD>
39
40 <BODY><P CLASS="one">
41 This paragraph should be indented ten pixels.
42 </P>
43
44 <DIV CLASS="two">
45 <P CLASS="one">
46 This paragraph should be indented twenty pixels, since horizontal margins do not collapse.
47 </P>
48 </DIV>
49
50 <P class="three">This element has a width of 50%, and due to 'auto'
51 values applied to the right margin, the element should be left
52 justified within its parent.  The gray rectangle should therefore
53 appear on the left edge of the viewport (e.g. the browser window). The
54 text inside the gray rectangle should not be centered.</P>
55
56 <P class="four">This element has a width of 50%, and due to 'auto'
57 values applied to the left and right margins, the element should be
58 centered within its parent.  The gray rectangle should therefore appear
59 in the middle of the viewport (e.g. the browser window). The text
60 inside the gray rectangle should not be centered.</P>
61
62 <P class="five">This element has a width of 50%, and due to 'auto'
63 values applied to the left margin, the element should be right
64 justified within its parent.  The gray rectangle should therefore
65 appear on the right edge of the viewport (e.g. the browser window). The
66 text inside the gray rectangle should not be centered.</P>
67
68 <P CLASS="six">
69 Since the width is "auto," the margins that are set to "auto" become
70 zero and this paragraph should have width 100% and the text should be
71 left justified.
72 </P>
73
74 <P CLASS="seven">
75 Since the width is "auto," the margins that are set to "auto" become
76 zero and this paragraph should have width 100% and the text should be
77 left justified.
78 </P>
79
80 <P CLASS="eight">
81 Since the width is "auto," the margins that are set to "auto" become
82 zero and this paragraph should have width 100% and the text should be
83 left justified.
84 </P>
85
86 <P CLASS="nine">
87 Since auto is an invalid value for padding, the right-margin of this
88 paragraph should be reset to <CODE>auto</CODE> and thus be expanded to 50% and it should only occupy the left
89 half of the viewport.
90 </P>
91
92 <P CLASS="ten">
93 Because this paragraph has width 100%, the auto margins become zero, so
94 it should not be centered.
95 </P>
96 </TD></TR></TABLE></BODY>
97 </HTML>