Reviewed by Darin.
[WebKit-https.git] / LayoutTests / css1 / color_and_background / background_repeat.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: 5.3.4 background-repeat</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 .one {background-image: url(../resources/oransqr.gif); background-repeat: repeat-y;}
11 .two {background-image: url(../resources/oransqr.gif); background-repeat: repeat-x;}
12 .three {background-image: url(../resources/oransqr.gif); background-repeat: no-repeat;}
13 .four {background-image: url(../resources/bg.gif); background-position: 50% 50%; background-repeat: repeat-y;}
14 .five {background-image: url(../resources/crosshair2.gif); background-position: 50% 50%;
15        background-color: red;}
16 .six {background-image: url(../resources/crosshair2.gif); background-position: center top;
17       background-color: red;}
18 .seven {background-image: url(../resources/crosshair2.gif); background-position: top left;
19         background-color: red;}
20 .eight {background-image: url(../resources/crosshair2.gif); background-position: bottom right;
21         background-color: red;}
22 .nine {background-image: url(../resources/crosshair2.gif); background-position: 50% 50%;
23        background-color: red;}
24 </STYLE>
25
26 </HEAD>
27
28 <BODY><P>The style declarations which apply to the text below are:</P>
29 <PRE>.one {background-image: url(../resources/oransqr.gif); background-repeat: repeat-y;}
30 .two {background-image: url(../resources/oransqr.gif); background-repeat: repeat-x;}
31 .three {background-image: url(../resources/oransqr.gif); background-repeat: no-repeat;}
32 .four {background-image: url(../resources/bg.gif); background-position: 50% 50%; background-repeat: repeat-y;}
33 .five {background-image: url(../resources/crosshair2.gif); background-position: 50% 50%;
34        background-color: red;}
35 .six {background-image: url(../resources/crosshair2.gif); background-position: center top;
36       background-color: red;}
37 .seven {background-image: url(../resources/crosshair2.gif); background-position: top left;
38         background-color: red;}
39 .eight {background-image: url(../resources/crosshair2.gif); background-position: bottom right;
40         background-color: red;}
41 .nine {background-image: url(../resources/crosshair2.gif); background-position: 50% 50%;
42        background-color: red;}
43
44 </PRE>
45 <HR>
46 <P class="one">
47 This sentence should have an orange stripe repeated in the "y" direction, starting at the upper left corner (since the default for <CODE>background-position</CODE> 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.
48 </P>
49 <P class="two">
50 This sentence should have an orange stripe repeated in the "x" direction, starting at the upper left corner (since the default for <CODE>background-position</CODE> 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.
51 </P>
52 <P class="three">
53 This sentence should have a single orange square behind it, placed at the upper left corner (since the default for <CODE>background-position</CODE> 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.
54 </P>
55 <P class="four">
56 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 <CODE>repeat-y</CODE> specifies tiling in <EM>both</EM> directions on the y-axis.  Note that this test is only valid if the user agent supports <CODE>background-position</CODE> (see <A HREF="sec536.htm">test 5.3.6</A>).  I'll fill the paragraph with extra text to make the conformance (or lack thereof) more obvious.
57 </P>
58 <P class="five">
59 This paragraph should have a tiled background, with the origin image exactly centered in the paragraph.  This is because <CODE>background-repeat</CODE> specifies tiling in <EM>all</EM> directions, regardless of the position of the origin image.  Note that this test is only valid if the user agent supports <CODE>background-position</CODE> (see <A HREF="sec536.htm">test 5.3.6</A>).  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.
60 </P>
61 <P class="six">
62 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.
63 </P>
64 <P class="seven">
65 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.
66 </P>
67 <P class="eight">
68 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.
69 </P>
70 <P class="nine">
71 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.
72 </P>
73
74
75 <TABLE border cellspacing="0" cellpadding="3" class="tabletest">
76 <TR>
77 <TD colspan="2" bgcolor="silver"><STRONG>TABLE Testing Section</STRONG></TD>
78 </TR>
79 <TR>
80 <TD bgcolor="silver">&nbsp;</TD>
81 <TD><P class="one">
82 This sentence should have an orange stripe repeated in the "y" direction, starting at the upper left corner (since the default for <CODE>background-position</CODE> 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.
83 </P>
84 <P class="two">
85 This sentence should have an orange stripe repeated in the "x" direction, starting at the upper left corner (since the default for <CODE>background-position</CODE> 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.
86 </P>
87 <P class="three">
88 This sentence should have a single orange square behind it, placed at the upper left corner (since the default for <CODE>background-position</CODE> 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.
89 </P>
90 <P class="four">
91 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 <CODE>repeat-y</CODE> specifies tiling in <EM>both</EM> directions on the y-axis.  Note that this test is only valid if the user agent supports <CODE>background-position</CODE> (see <A HREF="sec536.htm">test 5.3.6</A>).  I'll fill the paragraph with extra text to make the conformance (or lack thereof) more obvious.
92 </P>
93 <P class="five">
94 This paragraph should have a tiled background, with the origin image exactly centered in the paragraph.  This is because <CODE>background-repeat</CODE> specifies tiling in <EM>all</EM> directions, regardless of the position of the origin image.  Note that this test is only valid if the user agent supports <CODE>background-position</CODE> (see <A HREF="sec536.htm">test 5.3.6</A>).  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.
95 </P>
96 <P class="six">
97 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.
98 </P>
99 <P class="seven">
100 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.
101 </P>
102 <P class="eight">
103 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.
104 </P>
105 <P class="nine">
106 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.
107 </P>
108 </TD></TR></TABLE></BODY>
109 </HTML>