Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 170 lines (161 sloc) 7.062 kB
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Tests for background-size</title>
5 <style>
6 .test {
7 width: 25%;
8 height: 100px;
9 border: 10px dotted #C9C;
10 padding: 10px;
11 border-radius: 30px;
12 behavior: url(../build/PIE.htc);
13 }
14
15 .normal {
16 background: #CCF url(border.png) no-repeat;
17 -pie-background: #CCF url(border.png) no-repeat;
18 }
19 .normal-br {
20 background: #CCF url(border.png) no-repeat 100% 100%;
21 -pie-background: #CCF url(border.png) no-repeat 100% 100%;
22 }
23 .contain {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
24 background: #CCF url(border.png) no-repeat 0 0;
25 background-size: contain;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
26 -pie-background: #CCF url(border.png) no-repeat 0 0 / contain;
27 }
28 .contain-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
29 background: #CCF url(border.png) no-repeat 100% 100%;
30 background-size: contain;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
31 -pie-background: #CCF url(border.png) no-repeat 100% 100% / contain;
32 }
33 .contain-border {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
34 background: #CCF url(border.png) no-repeat 0 0 border-box;
35 background-size: contain;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
36 -pie-background: #CCF url(border.png) no-repeat 0 0 / contain border-box;
37 }
38 .contain-border-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
39 background: #CCF url(border.png) no-repeat 100% 100% border-box;
40 background-size: contain;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
41 -pie-background: #CCF url(border.png) no-repeat 100% 100% / contain border-box;
42 }
43 .contain-content {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
44 background: #CCF url(border.png) no-repeat 0 0 content-box;
45 background-size: contain;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
46 -pie-background: #CCF url(border.png) no-repeat 0 0 / contain content-box;
47 }
48 .contain-content-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
49 background: #CCF url(border.png) no-repeat 100% 100% content-box;
50 background-size: contain;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
51 -pie-background: #CCF url(border.png) no-repeat 100% 100% / contain content-box;
52 }
53 .cover {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
54 background: #CCF url(border.png) no-repeat 0 0;
55 background-size: cover;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
56 -pie-background: #CCF url(border.png) no-repeat 0 0 / cover;
57 }
58 .cover-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
59 background: #CCF url(border.png) no-repeat 100% 100%;
60 background-size: cover;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
61 -pie-background: #CCF url(border.png) no-repeat 100% 100% / cover;
62 }
63 .cover-border {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
64 background: #CCF url(border.png) no-repeat 0 0 border-box;
65 background-size: cover;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
66 -pie-background: #CCF url(border.png) no-repeat 0 0 / cover border-box;
67 }
68 .cover-border-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
69 background: #CCF url(border.png) no-repeat 100% 100% border-box;
70 background-size: cover;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
71 -pie-background: #CCF url(border.png) no-repeat 100% 100% / cover border-box;
72 }
73 .cover-content {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
74 background: #CCF url(border.png) no-repeat 0 0 content-box;
75 background-size: cover;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
76 -pie-background: #CCF url(border.png) no-repeat 0 0 / cover content-box;
77 }
78 .cover-content-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
79 background: #CCF url(border.png) no-repeat 100% 100% content-box;
80 background-size: cover;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
81 -pie-background: #CCF url(border.png) no-repeat 100% 100% / cover content-box;
82 }
83 .scale-px {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
84 background: #CCF url(border.png) no-repeat 0 0;
85 background-size: 50px;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
86 -pie-background: #CCF url(border.png) no-repeat 0 0 / 50px;
87 }
88 .scale-px-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
89 background: #CCF url(border.png) no-repeat 100% 100%;
90 background-size: 50px;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
91 -pie-background: #CCF url(border.png) no-repeat 100% 100% / 50px;
92 }
93 .scale-100pct {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
94 background: #CCF url(border.png) no-repeat 0 0;
95 background-size: 100%;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
96 -pie-background: #CCF url(border.png) no-repeat 0 0 / 100%;
97 }
98 .scale-100pct-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
99 background: #CCF url(border.png) no-repeat 100% 100%;
100 background-size: 100%;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
101 -pie-background: #CCF url(border.png) no-repeat 100% 100% / 100%;
102 }
103 .scale-100pct-50pct {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
104 background: #CCF url(border.png) no-repeat 0 0;
105 background-size: 100% 50%;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
106 -pie-background: #CCF url(border.png) no-repeat 0 0 / 100% 50%;
107 }
108 .scale-100pct-50pct-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
109 background: #CCF url(border.png) no-repeat 100% 100%;
110 background-size: 100% 50%;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
111 -pie-background: #CCF url(border.png) no-repeat 100% 100% / 100% 50%;
112 }
113 .scale-50pct-100pct {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
114 background: #CCF url(border.png) no-repeat 0 0;
115 background-size: 50% 100%;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
116 -pie-background: #CCF url(border.png) no-repeat 0 0 / 50% 100%;
117 }
118 .scale-50pct-100pct-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
119 background: #CCF url(border.png) no-repeat 100% 100%;
120 background-size: 50% 100%;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
121 -pie-background: #CCF url(border.png) no-repeat 100% 100% / 50% 100%;
122 }
123 .scale-50px-90pct {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
124 background: #CCF url(border.png) no-repeat 0 0;
125 background-size: 50px 90%;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
126 -pie-background: #CCF url(border.png) no-repeat 0 0 / 50px 90%;
127 }
128 .scale-50px-90pct-br {
1c3fb0d In test doc, separate out standard background-size property to be lon…
Jason Johnston authored
129 background: #CCF url(border.png) no-repeat 100% 100%;
130 background-size: 50px 90%;
0230feb Implement rendering of background origin and size params in IE<9. Res…
Jason Johnston authored
131 -pie-background: #CCF url(border.png) no-repeat 100% 100% / 50px 90%;
132 }
133 </style>
134 </head>
135 <body>
136 <h1>Tests for background-size</h1>
137
138
139 <div class="test normal">natural size</div>
140 <div class="test normal-br">natural size, bottom right</div>
141
142 <div class="test contain">contain</div>
143 <div class="test contain-br">contain, bottom right</div>
144 <div class="test contain-border">contain, border-box</div>
145 <div class="test contain-border-br">contain, border-box, bottom right</div>
146 <div class="test contain-content">contain, content-box</div>
147 <div class="test contain-content-br">contain, content-box, bottom right</div>
148
149 <div class="test cover">cover</div>
150 <div class="test cover-br">cover, bottom right</div>
151 <div class="test cover-border">cover, border-box</div>
152 <div class="test cover-border-br">cover, border-box, bottom right</div>
153 <div class="test cover-content">cover, content-box</div>
154 <div class="test cover-content-br">cover, content-box, bottom right</div>
155
156 <div class="test scale-px">50px</div>
157 <div class="test scale-px-br">50px, bottom right</div>
158 <div class="test scale-100pct">100%</div>
159 <div class="test scale-100pct-br">100%, bottom right</div>
160 <div class="test scale-100pct-50pct">100% 50%</div>
161 <div class="test scale-100pct-50pct-br">100% 50%, bottom right</div>
162 <div class="test scale-50pct-100pct">50% 100%</div>
163 <div class="test scale-50pct-100pct-br">50% 100%, bottom right</div>
164 <div class="test scale-50px-90pct">50px 90%</div>
165 <div class="test scale-50px-90pct-br">50px 90%, bottom right</div>
166
167
168
169 </body>
170 </html>
Something went wrong with that request. Please try again.