1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: rgba values</title>
5 <link rel="author" title="L. David Baron" href="https://dbaron.org/">
6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
7 <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color">
8 <meta name="flags" content="">
9 <meta name="assert" content="Test that the color components in rgba colors are interpreted correctly.">
10 <style type="text/css">
11 table { border-spacing: 0; padding: 0; border: none; }
12 td { border: none; padding: 0; }
13 td { width: 1.2em; height: 1.2em; }
14 </style>
15 </head>
16 <body>
17
18 <p>The following table should have four matching rows changing (in 5 steps) from red at the left to black at the right: (plus a checkerboard at both ends to show where the rows are):</p>
19
20 <div style="background: black">
21 <table border="border">
22 <tr>
23 <td style="background: black"> </td>
24 <td style="background: rgba(255, 0, 0, 1.0)"> </td>
25 <td style="background: rgba(204, 0, 0, 1.0)"> </td>
26 <td style="background: rgba(153, 0, 0, 1.0)"> </td>
27 <td style="background: rgba(102, 0, 0, 1.0)"> </td>
28 <td style="background: rgba(51, 0, 0, 1.0)"> </td>
29 <td style="background: rgba(0, 0, 0, 1.0)"> </td>
30 <td style="background: white"> </td>
31 </tr>
32 <tr>
33 <td style="background: white"> </td>
34 <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td>
35 <td style="background: rgba(80%, 0%, 0%, 1.0)"> </td>
36 <td style="background: rgba(60%, 0%, 0%, 1.0)"> </td>
37 <td style="background: rgba(40%, 0%, 0%, 1.0)"> </td>
38 <td style="background: rgba(20%, 0%, 0%, 1.0)"> </td>
39 <td style="background: rgba(0%, 0%, 0%, 1.0)"> </td>
40 <td style="background: black"> </td>
41 </tr>
42 <tr>
43 <td style="background: black"> </td>
44 <td style="background: rgba(255, 0, 0, 1.0)"> </td>
45 <td style="background: rgba(255, 0, 0, 0.8)"> </td>
46 <td style="background: rgba(255, 0, 0, 0.6)"> </td>
47 <td style="background: rgba(255, 0, 0, 0.4)"> </td>
48 <td style="background: rgba(255, 0, 0, 0.2)"> </td>
49 <td style="background: rgba(255, 0, 0, 0.0)"> </td>
50 <td style="background: white"> </td>
51 </tr>
52 <tr>
53 <td style="background: white"> </td>
54 <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td>
55 <td style="background: rgba(100%, 0%, 0%, 0.8)"> </td>
56 <td style="background: rgba(100%, 0%, 0%, 0.6)"> </td>
57 <td style="background: rgba(100%, 0%, 0%, 0.4)"> </td>
58 <td style="background: rgba(100%, 0%, 0%, 0.2)"> </td>
59 <td style="background: rgba(100%, 0%, 0%, 0.0)"> </td>
60 <td style="background: black"> </td>
61 </tr>
62 </table>
63 </div>
64
65 <p>The following table should have four matching rows changing (in 5 steps) from red at the left to white at the right: (plus a checkerboard at both ends to show where the rows are):</p>
66
67 <div style="background: white">
68 <table border="border">
69 <tr>
70 <td style="background: black"> </td>
71 <td style="background: rgba(255, 0, 0, 1.0)"> </td>
72 <td style="background: rgba(255, 51, 51, 1.0)"> </td>
73 <td style="background: rgba(255, 102, 102, 1.0)"> </td>
74 <td style="background: rgba(255, 153, 153, 1.0)"> </td>
75 <td style="background: rgba(255, 204, 204, 1.0)"> </td>
76 <td style="background: rgba(255, 255, 255, 1.0)"> </td>
77 <td style="background: white"> </td>
78 </tr>
79 <tr>
80 <td style="background: white"> </td>
81 <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td>
82 <td style="background: rgba(100%, 20%, 20%, 1.0)"> </td>
83 <td style="background: rgba(100%, 40%, 40%, 1.0)"> </td>
84 <td style="background: rgba(100%, 60%, 60%, 1.0)"> </td>
85 <td style="background: rgba(100%, 80%, 80%, 1.0)"> </td>
86 <td style="background: rgba(100%, 100%, 100%, 1.0)"> </td>
87 <td style="background: black"> </td>
88 </tr>
89 <tr>
90 <td style="background: black"> </td>
91 <td style="background: rgba(255, 0, 0, 1.0)"> </td>
92 <td style="background: rgba(255, 0, 0, 0.8)"> </td>
93 <td style="background: rgba(255, 0, 0, 0.6)"> </td>
94 <td style="background: rgba(255, 0, 0, 0.4)"> </td>
95 <td style="background: rgba(255, 0, 0, 0.2)"> </td>
96 <td style="background: rgba(255, 0, 0, 0.0)"> </td>
97 <td style="background: white"> </td>
98 </tr>
99 <tr>
100 <td style="background: white"> </td>
101 <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td>
102 <td style="background: rgba(100%, 0%, 0%, 0.8)"> </td>
103 <td style="background: rgba(100%, 0%, 0%, 0.6)"> </td>
104 <td style="background: rgba(100%, 0%, 0%, 0.4)"> </td>
105 <td style="background: rgba(100%, 0%, 0%, 0.2)"> </td>
106 <td style="background: rgba(100%, 0%, 0%, 0.0)"> </td>
107 <td style="background: black"> </td>
108 </tr>
109 </table>
110 </div>
111
112 <p>The following table should have four matching rows changing (in 5 steps) from green at the left to black at the right: (plus a checkerboard at both ends to show where the rows are):</p>
113
114 <div style="background: black">
115 <table border="border">
116 <tr>
117 <td style="background: black"> </td>
118 <td style="background: rgba(0, 255, 0, 1.0)"> </td>
119 <td style="background: rgba(0, 204, 0, 1.0)"> </td>
120 <td style="background: rgba(0, 153, 0, 1.0)"> </td>
121 <td style="background: rgba(0, 102, 0, 1.0)"> </td>
122 <td style="background: rgba(0, 51, 0, 1.0)"> </td>
123 <td style="background: rgba(0, 0, 0, 1.0)"> </td>
124 <td style="background: white"> </td>
125 </tr>
126 <tr>
127 <td style="background: white"> </td>
128 <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td>
129 <td style="background: rgba(0%, 80%, 0%, 1.0)"> </td>
130 <td style="background: rgba(0%, 60%, 0%, 1.0)"> </td>
131 <td style="background: rgba(0%, 40%, 0%, 1.0)"> </td>
132 <td style="background: rgba(0%, 20%, 0%, 1.0)"> </td>
133 <td style="background: rgba(0%, 0%, 0%, 1.0)"> </td>
134 <td style="background: black"> </td>
135 </tr>
136 <tr>
137 <td style="background: black"> </td>
138 <td style="background: rgba(0, 255, 0, 1.0)"> </td>
139 <td style="background: rgba(0, 255, 0, 0.8)"> </td>
140 <td style="background: rgba(0, 255, 0, 0.6)"> </td>
141 <td style="background: rgba(0, 255, 0, 0.4)"> </td>
142 <td style="background: rgba(0, 255, 0, 0.2)"> </td>
143 <td style="background: rgba(0, 255, 0, 0.0)"> </td>
144 <td style="background: white"> </td>
145 </tr>
146 <tr>
147 <td style="background: white"> </td>
148 <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td>
149 <td style="background: rgba(0%, 100%, 0%, 0.8)"> </td>
150 <td style="background: rgba(0%, 100%, 0%, 0.6)"> </td>
151 <td style="background: rgba(0%, 100%, 0%, 0.4)"> </td>
152 <td style="background: rgba(0%, 100%, 0%, 0.2)"> </td>
153 <td style="background: rgba(0%, 100%, 0%, 0.0)"> </td>
154 <td style="background: black"> </td>
155 </tr>
156 </table>
157 </div>
158
159 <p>The following table should have four matching rows changing (in 5 steps) from green at the left to white at the right: (plus a checkerboard at both ends to show where the rows are):</p>
160
161 <div style="background: white">
162 <table border="border">
163 <tr>
164 <td style="background: black"> </td>
165 <td style="background: rgba(0, 255, 0, 1.0)"> </td>
166 <td style="background: rgba(51, 255, 51, 1.0)"> </td>
167 <td style="background: rgba(102, 255, 102, 1.0)"> </td>
168 <td style="background: rgba(153, 255, 153, 1.0)"> </td>
169 <td style="background: rgba(204, 255, 204, 1.0)"> </td>
170 <td style="background: rgba(255, 255, 255, 1.0)"> </td>
171 <td style="background: white"> </td>
172 </tr>
173 <tr>
174 <td style="background: white"> </td>
175 <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td>
176 <td style="background: rgba(20%, 100%, 20%, 1.0)"> </td>
177 <td style="background: rgba(40%, 100%, 40%, 1.0)"> </td>
178 <td style="background: rgba(60%, 100%, 60%, 1.0)"> </td>
179 <td style="background: rgba(80%, 100%, 80%, 1.0)"> </td>
180 <td style="background: rgba(100%, 100%, 100%, 1.0)"> </td>
181 <td style="background: black"> </td>
182 </tr>
183 <tr>
184 <td style="background: black"> </td>
185 <td style="background: rgba(0, 255, 0, 1.0)"> </td>
186 <td style="background: rgba(0, 255, 0, 0.8)"> </td>
187 <td style="background: rgba(0, 255, 0, 0.6)"> </td>
188 <td style="background: rgba(0, 255, 0, 0.4)"> </td>
189 <td style="background: rgba(0, 255, 0, 0.2)"> </td>
190 <td style="background: rgba(0, 255, 0, 0.0)"> </td>
191 <td style="background: white"> </td>
192 </tr>
193 <tr>
194 <td style="background: white"> </td>
195 <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td>
196 <td style="background: rgba(0%, 100%, 0%, 0.8)"> </td>
197 <td style="background: rgba(0%, 100%, 0%, 0.6)"> </td>
198 <td style="background: rgba(0%, 100%, 0%, 0.4)"> </td>
199 <td style="background: rgba(0%, 100%, 0%, 0.2)"> </td>
200 <td style="background: rgba(0%, 100%, 0%, 0.0)"> </td>
201 <td style="background: black"> </td>
202 </tr>
203 </table>
204 </div>
205
206 <p>The following table should have four matching rows changing (in 5 steps) from blue at the left to black at the right: (plus a checkerboard at both ends to show where the rows are):</p>
207
208 <div style="background: black">
209 <table border="border">
210 <tr>
211 <td style="background: black"> </td>
212 <td style="background: rgba(0, 0, 255, 1.0)"> </td>
213 <td style="background: rgba(0, 0, 204, 1.0)"> </td>
214 <td style="background: rgba(0, 0, 153, 1.0)"> </td>
215 <td style="background: rgba(0, 0, 102, 1.0)"> </td>
216 <td style="background: rgba(0, 0, 51, 1.0)"> </td>
217 <td style="background: rgba(0, 0, 0, 1.0)"> </td>
218 <td style="background: white"> </td>
219 </tr>
220 <tr>
221 <td style="background: white"> </td>
222 <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td>
223 <td style="background: rgba(0%, 0%, 80%, 1.0)"> </td>
224 <td style="background: rgba(0%, 0%, 60%, 1.0)"> </td>
225 <td style="background: rgba(0%, 0%, 40%, 1.0)"> </td>
226 <td style="background: rgba(0%, 0%, 20%, 1.0)"> </td>
227 <td style="background: rgba(0%, 0%, 0%, 1.0)"> </td>
228 <td style="background: black"> </td>
229 </tr>
230 <tr>
231 <td style="background: black"> </td>
232 <td style="background: rgba(0, 0, 255, 1.0)"> </td>
233 <td style="background: rgba(0, 0, 255, 0.8)"> </td>
234 <td style="background: rgba(0, 0, 255, 0.6)"> </td>
235 <td style="background: rgba(0, 0, 255, 0.4)"> </td>
236 <td style="background: rgba(0, 0, 255, 0.2)"> </td>
237 <td style="background: rgba(0, 0, 255, 0.0)"> </td>
238 <td style="background: white"> </td>
239 </tr>
240 <tr>
241 <td style="background: white"> </td>
242 <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td>
243 <td style="background: rgba(0%, 0%, 100%, 0.8)"> </td>
244 <td style="background: rgba(0%, 0%, 100%, 0.6)"> </td>
245 <td style="background: rgba(0%, 0%, 100%, 0.4)"> </td>
246 <td style="background: rgba(0%, 0%, 100%, 0.2)"> </td>
247 <td style="background: rgba(0%, 0%, 100%, 0.0)"> </td>
248 <td style="background: black"> </td>
249 </tr>
250 </table>
251 </div>
252
253 <p>The following table should have four matching rows changing (in 5 steps) from blue at the left to white at the right: (plus a checkerboard at both ends to show where the rows are):</p>
254
255 <div style="background: white">
256 <table border="border">
257 <tr>
258 <td style="background: black"> </td>
259 <td style="background: rgba(0, 0, 255, 1.0)"> </td>
260 <td style="background: rgba(51, 51, 255, 1.0)"> </td>
261 <td style="background: rgba(102, 102, 255, 1.0)"> </td>
262 <td style="background: rgba(153, 153, 255, 1.0)"> </td>
263 <td style="background: rgba(204, 204, 255, 1.0)"> </td>
264 <td style="background: rgba(255, 255, 255, 1.0)"> </td>
265 <td style="background: white"> </td>
266 </tr>
267 <tr>
268 <td style="background: white"> </td>
269 <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td>
270 <td style="background: rgba(20%, 20%, 100%, 1.0)"> </td>
271 <td style="background: rgba(40%, 40%, 100%, 1.0)"> </td>
272 <td style="background: rgba(60%, 60%, 100%, 1.0)"> </td>
273 <td style="background: rgba(80%, 80%, 100%, 1.0)"> </td>
274 <td style="background: rgba(100%, 100%, 100%, 1.0)"> </td>
275 <td style="background: black"> </td>
276 </tr>
277 <tr>
278 <td style="background: black"> </td>
279 <td style="background: rgba(0, 0, 255, 1.0)"> </td>
280 <td style="background: rgba(0, 0, 255, 0.8)"> </td>
281 <td style="background: rgba(0, 0, 255, 0.6)"> </td>
282 <td style="background: rgba(0, 0, 255, 0.4)"> </td>
283 <td style="background: rgba(0, 0, 255, 0.2)"> </td>
284 <td style="background: rgba(0, 0, 255, 0.0)"> </td>
285 <td style="background: white"> </td>
286 </tr>
287 <tr>
288 <td style="background: white"> </td>
289 <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td>
290 <td style="background: rgba(0%, 0%, 100%, 0.8)"> </td>
291 <td style="background: rgba(0%, 0%, 100%, 0.6)"> </td>
292 <td style="background: rgba(0%, 0%, 100%, 0.4)"> </td>
293 <td style="background: rgba(0%, 0%, 100%, 0.2)"> </td>
294 <td style="background: rgba(0%, 0%, 100%, 0.0)"> </td>
295 <td style="background: black"> </td>
296 </tr>
297 </table>
298 </div>
299
300 <p>The following table should have four matching rows changing (in 5 steps) from red at the left to green at the right: (plus a checkerboard at both ends to show where the rows are):</p>
301
302 <div style="background: lime">
303 <table border="border">
304 <tr>
305 <td style="background: black"> </td>
306 <td style="background: rgba(255, 0, 0, 1.0)"> </td>
307 <td style="background: rgba(204, 51, 0, 1.0)"> </td>
308 <td style="background: rgba(153, 102, 0, 1.0)"> </td>
309 <td style="background: rgba(102, 153, 0, 1.0)"> </td>
310 <td style="background: rgba(51, 204, 0, 1.0)"> </td>
311 <td style="background: rgba(0, 255, 0, 1.0)"> </td>
312 <td style="background: white"> </td>
313 </tr>
314 <tr>
315 <td style="background: white"> </td>
316 <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td>
317 <td style="background: rgba(80%, 20%, 0%, 1.0)"> </td>
318 <td style="background: rgba(60%, 40%, 0%, 1.0)"> </td>
319 <td style="background: rgba(40%, 60%, 0%, 1.0)"> </td>
320 <td style="background: rgba(20%, 80%, 0%, 1.0)"> </td>
321 <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td>
322 <td style="background: black"> </td>
323 </tr>
324 <tr>
325 <td style="background: black"> </td>
326 <td style="background: rgba(255, 0, 0, 1.0)"> </td>
327 <td style="background: rgba(255, 0, 0, 0.8)"> </td>
328 <td style="background: rgba(255, 0, 0, 0.6)"> </td>
329 <td style="background: rgba(255, 0, 0, 0.4)"> </td>
330 <td style="background: rgba(255, 0, 0, 0.2)"> </td>
331 <td style="background: rgba(255, 0, 0, 0.0)"> </td>
332 <td style="background: white"> </td>
333 </tr>
334 <tr>
335 <td style="background: white"> </td>
336 <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td>
337 <td style="background: rgba(100%, 0%, 0%, 0.8)"> </td>
338 <td style="background: rgba(100%, 0%, 0%, 0.6)"> </td>
339 <td style="background: rgba(100%, 0%, 0%, 0.4)"> </td>
340 <td style="background: rgba(100%, 0%, 0%, 0.2)"> </td>
341 <td style="background: rgba(100%, 0%, 0%, 0.0)"> </td>
342 <td style="background: black"> </td>
343 </tr>
344 </table>
345 </div>
346
347 <p>The following table should have four matching rows changing (in 5 steps) from green at the left to blue at the right: (plus a checkerboard at both ends to show where the rows are):</p>
348
349 <div style="background: blue">
350 <table border="border">
351 <tr>
352 <td style="background: black"> </td>
353 <td style="background: rgba(0, 255, 0, 1.0)"> </td>
354 <td style="background: rgba(0, 204, 51, 1.0)"> </td>
355 <td style="background: rgba(0, 153, 102, 1.0)"> </td>
356 <td style="background: rgba(0, 102, 153, 1.0)"> </td>
357 <td style="background: rgba(0, 51, 204, 1.0)"> </td>
358 <td style="background: rgba(0, 0, 255, 1.0)"> </td>
359 <td style="background: white"> </td>
360 </tr>
361 <tr>
362 <td style="background: white"> </td>
363 <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td>
364 <td style="background: rgba(0%, 80%, 20%, 1.0)"> </td>
365 <td style="background: rgba(0%, 60%, 40%, 1.0)"> </td>
366 <td style="background: rgba(0%, 40%, 60%, 1.0)"> </td>
367 <td style="background: rgba(0%, 20%, 80%, 1.0)"> </td>
368 <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td>
369 <td style="background: black"> </td>
370 </tr>
371 <tr>
372 <td style="background: black"> </td>
373 <td style="background: rgba(0, 255, 0, 1.0)"> </td>
374 <td style="background: rgba(0, 255, 0, 0.8)"> </td>
375 <td style="background: rgba(0, 255, 0, 0.6)"> </td>
376 <td style="background: rgba(0, 255, 0, 0.4)"> </td>
377 <td style="background: rgba(0, 255, 0, 0.2)"> </td>
378 <td style="background: rgba(0, 255, 0, 0.0)"> </td>
379 <td style="background: white"> </td>
380 </tr>
381 <tr>
382 <td style="background: white"> </td>
383 <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td>
384 <td style="background: rgba(0%, 100%, 0%, 0.8)"> </td>
385 <td style="background: rgba(0%, 100%, 0%, 0.6)"> </td>
386 <td style="background: rgba(0%, 100%, 0%, 0.4)"> </td>
387 <td style="background: rgba(0%, 100%, 0%, 0.2)"> </td>
388 <td style="background: rgba(0%, 100%, 0%, 0.0)"> </td>
389 <td style="background: black"> </td>
390 </tr>
391 </table>
392 </div>
393
394 <p>The following table should have four matching rows changing (in 5 steps) from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p>
395
396 <div style="background: red">
397 <table border="border">
398 <tr>
399 <td style="background: black"> </td>
400 <td style="background: rgba(0, 0, 255, 1.0)"> </td>
401 <td style="background: rgba(51, 0, 204, 1.0)"> </td>
402 <td style="background: rgba(102, 0, 153, 1.0)"> </td>
403 <td style="background: rgba(153, 0, 102, 1.0)"> </td>
404 <td style="background: rgba(204, 0, 51, 1.0)"> </td>
405 <td style="background: rgba(255, 0, 0, 1.0)"> </td>
406 <td style="background: white"> </td>
407 </tr>
408 <tr>
409 <td style="background: white"> </td>
410 <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td>
411 <td style="background: rgba(20%, 0%, 80%, 1.0)"> </td>
412 <td style="background: rgba(40%, 0%, 60%, 1.0)"> </td>
413 <td style="background: rgba(60%, 0%, 40%, 1.0)"> </td>
414 <td style="background: rgba(80%, 0%, 20%, 1.0)"> </td>
415 <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td>
416 <td style="background: black"> </td>
417 </tr>
418 <tr>
419 <td style="background: black"> </td>
420 <td style="background: rgba(0, 0, 255, 1.0)"> </td>
421 <td style="background: rgba(0, 0, 255, 0.8)"> </td>
422 <td style="background: rgba(0, 0, 255, 0.6)"> </td>
423 <td style="background: rgba(0, 0, 255, 0.4)"> </td>
424 <td style="background: rgba(0, 0, 255, 0.2)"> </td>
425 <td style="background: rgba(0, 0, 255, 0.0)"> </td>
426 <td style="background: white"> </td>
427 </tr>
428 <tr>
429 <td style="background: white"> </td>
430 <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td>
431 <td style="background: rgba(0%, 0%, 100%, 0.8)"> </td>
432 <td style="background: rgba(0%, 0%, 100%, 0.6)"> </td>
433 <td style="background: rgba(0%, 0%, 100%, 0.4)"> </td>
434 <td style="background: rgba(0%, 0%, 100%, 0.2)"> </td>
435 <td style="background: rgba(0%, 0%, 100%, 0.0)"> </td>
436 <td style="background: black"> </td>
437 </tr>
438 </table>
439 </div>
440
441
442 </body>
443 </html>