98 lines
3.7 KiB
HTML
98 lines
3.7 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>CSS1 Test Suite: 4.1.2 Horizontal Formatting</TITLE>
|
|
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
<META http-equiv="Content-Style-Type" content="text/css">
|
|
|
|
<LINK rel="stylesheet" type="text/css" media="screen" href="../resources/base.css">
|
|
<STYLE type="text/css">
|
|
.ruler {padding: 0px; margin: 0px; border-width: 0px;}
|
|
P#ruled {background-color: aqua; width: 400px;
|
|
border-style: solid; border-color: silver;
|
|
border-top-width: 0px; border-bottom-width: 0px;
|
|
border-left-width: 40px; border-right-width: 40px;
|
|
padding-left: 40px; padding-right: 40px;
|
|
margin-top: 0px; margin-bottom: 0px; margin-left: 40px; margin-right: 40px;}
|
|
|
|
P.one {margin-left: 10px;}
|
|
DIV.two {margin-left: 10px;}
|
|
P.three {margin-left: 0; width: 50%; margin-right: auto;
|
|
background-color: gray;}
|
|
P.four {margin-left: auto; width: 50%; margin-right: auto;
|
|
background-color: gray;}
|
|
P.five {margin-left: auto; width: 50%; margin-right: 0;
|
|
background-color: gray;}
|
|
P.six {margin-left: auto; width: auto; margin-right: 0;
|
|
background-color: gray; }
|
|
P.seven {margin-left: 0; width: auto; margin-right: auto;
|
|
background-color: gray;}
|
|
P.eight {margin-left: auto; width: auto; margin-right: auto;
|
|
background-color: gray;}
|
|
P.nine {padding-left: auto; padding-right: auto; margin-left: 0; margin-right: 0;
|
|
width: 50%; background-color: gray;}
|
|
P.ten {margin-left: auto; width: 100%; margin-right: auto;
|
|
background-color: gray;}
|
|
</STYLE>
|
|
|
|
</HEAD>
|
|
|
|
<BODY><P CLASS="one">
|
|
This paragraph should be indented ten pixels.
|
|
</P>
|
|
|
|
<DIV CLASS="two">
|
|
<P CLASS="one">
|
|
This paragraph should be indented twenty pixels, since horizontal margins do not collapse.
|
|
</P>
|
|
</DIV>
|
|
|
|
<P class="three">This element has a width of 50%, and due to 'auto'
|
|
values applied to the right margin, the element should be left
|
|
justified within its parent. The gray rectangle should therefore
|
|
appear on the left edge of the viewport (e.g. the browser window). The
|
|
text inside the gray rectangle should not be centered.</P>
|
|
|
|
<P class="four">This element has a width of 50%, and due to 'auto'
|
|
values applied to the left and right margins, the element should be
|
|
centered within its parent. The gray rectangle should therefore appear
|
|
in the middle of the viewport (e.g. the browser window). The text
|
|
inside the gray rectangle should not be centered.</P>
|
|
|
|
<P class="five">This element has a width of 50%, and due to 'auto'
|
|
values applied to the left margin, the element should be right
|
|
justified within its parent. The gray rectangle should therefore
|
|
appear on the right edge of the viewport (e.g. the browser window). The
|
|
text inside the gray rectangle should not be centered.</P>
|
|
|
|
<P CLASS="six">
|
|
Since the width is "auto," the margins that are set to "auto" become
|
|
zero and this paragraph should have width 100% and the text should be
|
|
left justified.
|
|
</P>
|
|
|
|
<P CLASS="seven">
|
|
Since the width is "auto," the margins that are set to "auto" become
|
|
zero and this paragraph should have width 100% and the text should be
|
|
left justified.
|
|
</P>
|
|
|
|
<P CLASS="eight">
|
|
Since the width is "auto," the margins that are set to "auto" become
|
|
zero and this paragraph should have width 100% and the text should be
|
|
left justified.
|
|
</P>
|
|
|
|
<P CLASS="nine">
|
|
Since auto is an invalid value for padding, the right-margin of this
|
|
paragraph should be reset to <CODE>auto</CODE> and thus be expanded to 50% and it should only occupy the left
|
|
half of the viewport.
|
|
</P>
|
|
|
|
<P CLASS="ten">
|
|
Because this paragraph has width 100%, the auto margins become zero, so
|
|
it should not be centered.
|
|
</P>
|
|
</TD></TR></TABLE></BODY>
|
|
</HTML>
|