CSS1 Test Suite: 4.1.2 Horizontal Formatting

The style declarations which apply to the text below are:

.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;}

This text is inside a P element. The border, padding, and margins for this paragraph should line up with the boundaries denoted in the image below; the edges of the light blue background should line up with the boundary between "padding" and "border." There should be no top or bottom margin; the images above and below should be flush with this paragraph.

This paragraph should be indented ten pixels.

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.

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.

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.

Since the width is "auto" and the right margin has a length value declared, the left margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.

Since the width is "auto" and the left margin has a length value dclared, the right margin becomes zero. This paragraph should have a width of 100% and the text should be left justified.

Since the width is "auto" and both margins are set to "auto", the margins that are set to "auto" become zero. This paragraph should have a width of 100% and the text should be left justified.

Since auto is an invalid value for padding, the right-margin of this paragraph should be reset to auto and thus be expanded to 50% and it should only occupy the left half of the viewport.

Because this paragraph has width 100%, the auto margins become zero, so it should not be centered.

TABLE Testing Section

This text is inside a P element. The border, padding, and margins for this paragraph should line up with the boundaries denoted in the image below; the edges of the light blue background should line up with the boundary between "padding" and "border." There should be no top or bottom margin; the images above and below should be flush with this paragraph. This paragraph should be indented ten pixels. This paragraph should be indented twenty pixels, since horizontal margins do not collapse. 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. 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. 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. Since the width is "auto" and the right margin has a length value declared, the left margin becomes zero. This paragraph should have a width of 100% and the text should be left justified. Since the width is "auto" and the left margin has a length value dclared, the right margin becomes zero. This paragraph should have a width of 100% and the text should be left justified. Since the width is "auto" and both margins are set to "auto", the margins that are set to "auto" become zero. This paragraph should have a width of 100% and the text should be left justified. Since auto is an invalid value for padding, the right-margin of this paragraph should be reset to auto and thus be expanded to 50% and it should only occupy the left half of the viewport. Because this paragraph has width 100%, the auto margins become zero, so it should not be centered.