Revised layout tests after the <hr> changes.
[WebKit-https.git] / LayoutTests / css1 / formatting_model / replaced_elements.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.3 Replaced Elements</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 IMG.one {display: inline;}
11 IMG.two {display: block;}
12 IMG.three {display: block;
13            margin-right: auto; margin-left: auto; width: auto;}
14 IMG.four {display: block;
15           margin-right: auto; margin-left: auto; width: 50%;}
16 IMG.five {display: block;
17           margin-right: 0; margin-left: auto; width: 50%;}</STYLE>
18
19 </HEAD>
20
21 <BODY><P>The style declarations which apply to the text below are:</P>
22 <PRE>IMG.one {display: inline;}
23 IMG.two {display: block;}
24 IMG.three {display: block;
25            margin-right: auto; margin-left: auto; width: auto;}
26 IMG.four {display: block;
27           margin-right: auto; margin-left: auto; width: 50%;}
28 IMG.five {display: block;
29           margin-right: 0; margin-left: auto; width: 50%;}
30 </PRE>
31 <HR>
32 <P><IMG CLASS="one" SRC="../resources/oransqr.gif" ALT="[Image]">The image at the
33 beginning of this sentence should be a 15px square.</P>
34
35 <IMG CLASS="two" SRC="../resources/oransqr.gif" ALT="[Image]">
36 <P>The above image should be a 15px square with the same left edge as this text.</P>
37
38 <IMG CLASS="three" SRC="../resources/oransqr.gif" ALT="[Image]">
39 <P>The above image should be a 15px square aligned at the center.</P>
40
41 <IMG CLASS="four" SRC="../resources/oransqr.gif" ALT="[Image]">
42 <P>The above image should be a square resized so its width is 50% of
43 the its parent element, and centered horizontally within the parent element:  the document body in the first half, and the table in the second.</P>
44
45 <IMG CLASS="five" SRC="../resources/oransqr.gif" ALT="[Image]">
46 <P>The above image should be a square resized so its width is 50% of
47 its parent element, and aligned at the right edge of the parent element:  the document body in the first half, and the table in the second.</P>
48
49
50 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
51 <TR>
52 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
53 </TR>
54 <TR>
55 <TD bgcolor="silver">&nbsp;</TD>
56 <TD><P><IMG CLASS="one" SRC="../resources/oransqr.gif" ALT="[Image]">The image at the
57 beginning of this sentence should be a 15px square.</P>
58
59 <IMG CLASS="two" SRC="../resources/oransqr.gif" ALT="[Image]">
60 <P>The above image should be a 15px square with the same left edge as this text.</P>
61
62 <IMG CLASS="three" SRC="../resources/oransqr.gif" ALT="[Image]">
63 <P>The above image should be a 15px square aligned at the center.</P>
64
65 <IMG CLASS="four" SRC="../resources/oransqr.gif" ALT="[Image]">
66 <P>The above image should be a square resized so its width is 50% of
67 the its parent element, and centered horizontally within the parent element:  the document body in the first half, and the table in the second.</P>
68
69 <IMG CLASS="five" SRC="../resources/oransqr.gif" ALT="[Image]">
70 <P>The above image should be a square resized so its width is 50% of
71 its parent element, and aligned at the right edge of the parent element:  the document body in the first half, and the table in the second.</P>
72 </TD></TR></TABLE></BODY>
73 </HTML>