CSS1 Test Suite: 5.3.4 background-repeat

The style declarations which apply to the text below are:

.one {background-image: url(oransqr.gif); background-repeat: repeat-y;}
.two {background-image: url(oransqr.gif); background-repeat: repeat-x;}
.three {background-image: url(oransqr.gif); background-repeat: no-repeat;}
.four {background-image: url(bg.gif); background-position: 50% 50%; background-repeat: repeat-y;}
.five {background-image: url(crosshair2.gif); background-position: 50% 50%;
       background-color: red;}
.six {background-image: url(crosshair2.gif); background-position: center top;
      background-color: red;}
.seven {background-image: url(crosshair2.gif); background-position: top left;
        background-color: red;}
.eight {background-image: url(crosshair2.gif); background-position: bottom right;
        background-color: red;}
.nine {background-image: url(crosshair2.gif); background-position: 50% 50%;
       background-color: red;}

This sentence should have an orange stripe repeated in the "y" direction, starting at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.

This sentence should have an orange stripe repeated in the "x" direction, starting at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.

This sentence should have a single orange square behind it, placed at the upper left corner (since the default for background-position is '0% 0%' and that property is not declared here). This is extra text included for the sole purpose of making the paragraph longer. Thank you for your understanding.

This sentence should have a green-hatch stripe running vertically down the center of the paragraph, with the origin image exactly centered in the paragraph. This is because repeat-y specifies tiling in both directions on the y-axis. Note that this test is only valid if the user agent supports background-position (see test 5.3.6). I'll fill the paragraph with extra text to make the conformance (or lack thereof) more obvious.

This paragraph should have a tiled background, with the origin image exactly centered in the paragraph. This is because background-repeat specifies tiling in all directions, regardless of the position of the origin image. Note that this test is only valid if the user agent supports background-position (see test 5.3.6). I'll fill the paragraph with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible then the image has not bee correctly tiled.

This sentence should have a fully tiled background which starts at its center top; that is, the background's origin should be the exact center of the top of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This sentence should have a fully tiled background which starts at its top left. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This sentence should have a fully tiled background which starts at its bottom right; in other words, a complete instance of the image should be anchored in the bottom right corner, with the tiled background extending out from there. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. A background color is present, although if it is visible, then the image may not have been tiled correctly.

This sentence should have a fully tiled background which starts at its center and is tiled in all directions; that is, the background's origin should be the exact center of the paragraph. I'll fill it with extra text to make the conformance (or lack thereof) more obvious. In fact, a lot of extra text will be necessary to make this at all obvious. This is true because I am not able to increase the text size without resorting to either headings or other CSS properties, neither of which I want to use in this circumstance. This ought to be enough text, though. A background color is present, although if it is visible, then the image may not have been tiled correctly.