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