1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html lang="en">
3 <head>
4 <title>CSS Test: CSS background position: parsing</title>
5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/position/003.html" type="text/html">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background">
8 <meta name="flags" content="invalid">
9 <style type="text/css">
10 .case { float: left; border: solid; margin: 0.2em; background: #FFFFCC; } /* 150 x 100 */
11 .test { padding: 16px; background: red; }
12 .negative .test { background: url(support/ring.png) no-repeat; }
13 .control { width: 118px; height: 68px; }
14
15 .a .control, .b .control, .c .control, .d .control, .e .control, .f .control { background: url(support/diamond.png) no-repeat 100% 100%; }
16 .case.a .test { background: url(support/ring.png) no-repeat right bottom; }
17 .case.b .test { background: url(support/ring.png) no-repeat bottom right; }
18 .case.c .test { background: url(support/ring.png) no-repeat 100% bottom; }
19 .case.d .test { background: url(support/ring.png) no-repeat right 100%; }
20 .case.e .test { background: url(support/ring.png) no-repeat 100% 58px; }
21 .case.f .test { background: url(support/ring.png) no-repeat 108px 100%; }
22
23 .g .control, .h .control, .i .control, .j .control, .k .control, .l .control, .m .control { background: url(support/diamond.png) no-repeat 54px 28px; }
24 .case.g .test { background: url(support/ring.png) no-repeat center center; }
25 .case.h .test { background: url(support/ring.png) no-repeat 50% 50%; }
26 .case.i .test { background: url(support/ring.png) no-repeat center 50%; }
27 .case.j .test { background: url(support/ring.png) no-repeat 50% center; }
28 .case.k .test { background: url(support/ring.png) no-repeat 50%; }
29 .case.l .test { background: url(support/ring.png) no-repeat center; }
30 .case.m .test { background: url(support/ring.png) no-repeat 54px; }
31
32 .n .control, .o .control { background: url(support/diamond.png) no-repeat 54px 56px; }
33 .case.n .test { background: url(support/ring.png) no-repeat bottom center; }
34 .case.o .test { background: url(support/ring.png) no-repeat center bottom; }
35
36 .p .control, .q .control { background: url(support/diamond.png) no-repeat 108px 28px; }
37 .case.p .test { background: url(support/ring.png) no-repeat right center; }
38 .case.q .test { background: url(support/ring.png) no-repeat center right; }
39
40 .r .control { background: url(support/diamond.png) no-repeat top right; }
41 .case.r0 .test { background: url(support/ring.png) no-repeat right top; }
42 .case.r1 .test { background: url(support/ring.png) no-repeat right 0; }
43 .case.r2 .test { background: url(support/ring.png) no-repeat right 0px; }
44 .case.r3 .test { background: url(support/ring.png) no-repeat right 0%; }
45 .case.r4 .test { background: url(support/ring.png) no-repeat 100% top; }
46 .case.r5 .test { background: url(support/ring.png) no-repeat 100% 0; }
47 .case.r6 .test { background: url(support/ring.png) no-repeat 100% 0px; }
48 .case.r7 .test { background: url(support/ring.png) no-repeat 100% 0%; }
49 .case.r8 .test { background: url(support/ring.png) no-repeat 108px top; }
50 .case.r9 .test { background: url(support/ring.png) no-repeat 108px 0; }
51 .case.r10 .test { background: url(support/ring.png) no-repeat 108px 0px; }
52 .case.r11 .test { background: url(support/ring.png) no-repeat 108px 0%; }
53
54 .negative .control { background: url(support/diamond.png) no-repeat 0% 0%; }
55 .case.t1 .test { background: red right bottom bottom; }
56 .case.t2 .test { background: red bottom right bottom; }
57 .case.t3 .test { background: red bottom 100%; }
58 .case.t4 .test { background: red 100% right; }
59 .case.t5 .test { background: red bottom 8px; }
60 .case.t6 .test { background: red 23px right; }
61 .case.t7 .test { background: red center 50% center; }
62 .case.t8 .test { background: red 50% 50% 50%; }
63 .case.t9 .test { background: red center 50% 50%; }
64 .case.t10 .test { background: red 50%, center; }
65 .case.t11 .test { background: red bottom 54px; }
66 .case.t12 .test { background: red 50 50%; }
67 .case.t13 .test { background: red bottom 100; }
68 .case.t14 .test { background: red rightbottom; }
69 .case.t15 .test { background: red 0 right; }
70 .case.t16 .test { background: red 0px right; }
71 .case.t17 .test { background: red 0% right; }
72 .case.t18 .test { background: red top 100%; }
73 .case.t19 .test { background: red top 108px; }
74 .case.t20 .test { background: red top top; }
75 .case.t21 .test { background: red left right; }
76 .case.t22 .test { background: red left left; }
77 </style>
78 </head>
79 <body>
80 <p>In all the following boxes, the fuchsia diamond should be surrounded by a ring.</p>
81 <div class="case a"><div class="test"><div class="control"></div></div></div>
82 <div class="case b"><div class="test"><div class="control"></div></div></div>
83 <div class="case c"><div class="test"><div class="control"></div></div></div>
84 <div class="case d"><div class="test"><div class="control"></div></div></div>
85 <div class="case e"><div class="test"><div class="control"></div></div></div>
86 <div class="case f"><div class="test"><div class="control"></div></div></div>
87 <div class="case g"><div class="test"><div class="control"></div></div></div>
88 <div class="case h"><div class="test"><div class="control"></div></div></div>
89 <div class="case i"><div class="test"><div class="control"></div></div></div>
90 <div class="case j"><div class="test"><div class="control"></div></div></div>
91 <div class="case k"><div class="test"><div class="control"></div></div></div>
92 <div class="case l"><div class="test"><div class="control"></div></div></div>
93 <div class="case m"><div class="test"><div class="control"></div></div></div>
94 <div class="case n"><div class="test"><div class="control"></div></div></div>
95 <div class="case o"><div class="test"><div class="control"></div></div></div>
96 <div class="case p"><div class="test"><div class="control"></div></div></div>
97 <div class="case q"><div class="test"><div class="control"></div></div></div>
98 <div class="case r r0"><div class="test"><div class="control"></div></div></div>
99 <div class="case r r1"><div class="test"><div class="control"></div></div></div>
100 <div class="case r r2"><div class="test"><div class="control"></div></div></div>
101 <div class="case r r3"><div class="test"><div class="control"></div></div></div>
102 <div class="case r r4"><div class="test"><div class="control"></div></div></div>
103 <div class="case r r5"><div class="test"><div class="control"></div></div></div>
104 <div class="case r r6"><div class="test"><div class="control"></div></div></div>
105 <div class="case r r7"><div class="test"><div class="control"></div></div></div>
106 <div class="case r r8"><div class="test"><div class="control"></div></div></div>
107 <div class="case r r9"><div class="test"><div class="control"></div></div></div>
108 <div class="case r r10"><div class="test"><div class="control"></div></div></div>
109 <div class="case negative t1"><div class="test"><div class="control"></div></div></div>
110 <div class="case negative t2"><div class="test"><div class="control"></div></div></div>
111 <div class="case negative t3"><div class="test"><div class="control"></div></div></div>
112 <div class="case negative t4"><div class="test"><div class="control"></div></div></div>
113 <div class="case negative t5"><div class="test"><div class="control"></div></div></div>
114 <div class="case negative t6"><div class="test"><div class="control"></div></div></div>
115 <div class="case negative t7"><div class="test"><div class="control"></div></div></div>
116 <div class="case negative t8"><div class="test"><div class="control"></div></div></div>
117 <div class="case negative t9"><div class="test"><div class="control"></div></div></div>
118 <div class="case negative t10"><div class="test"><div class="control"></div></div></div>
119 <div class="case negative t11"><div class="test"><div class="control"></div></div></div>
120 <div class="case negative t12"><div class="test"><div class="control"></div></div></div>
121 <div class="case negative t13"><div class="test"><div class="control"></div></div></div>
122 <div class="case negative t14"><div class="test"><div class="control"></div></div></div>
123 <div class="case negative t15"><div class="test"><div class="control"></div></div></div>
124 <div class="case negative t16"><div class="test"><div class="control"></div></div></div>
125 <div class="case negative t17"><div class="test"><div class="control"></div></div></div>
126 <div class="case negative t18"><div class="test"><div class="control"></div></div></div>
127 <div class="case negative t19"><div class="test"><div class="control"></div></div></div>
128 <div class="case negative t20"><div class="test"><div class="control"></div></div></div>
129 <div class="case negative t21"><div class="test"><div class="control"></div></div></div>
130 <div class="case negative t22"><div class="test"><div class="control"></div></div></div>
131
132
133 </body>
134 </html>