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: hsla() 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/#hsla-color">
8 <link rel="match" href="reference/t425-hsla-values-b-ref.htm">
9 <meta name="flags" content="">
10 <meta name="assert" content="Implementation of algorithm for converting hsla() colors to rgba() colors.">
11 <style type="text/css">
12 table { border-spacing: 0; padding: 0; border: none; }
13 td { border: none; padding: 0; }
14 td { width: 1.2em; height: 1.2em; }
15 </style>
16 </head>
17 <body>
18
19 <p>The following table should have three 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>
20
21 <div style="background: black">
22 <table border="border">
23 <tr>
24 <td style="background: black"> </td>
25 <td style="background: hsla(0, 100%, 50%, 1)"> </td>
26 <td style="background: hsla(0, 100%, 50%, 0.8)"> </td>
27 <td style="background: hsla(0, 100%, 50%, 0.6)"> </td>
28 <td style="background: hsla(0, 100%, 50%, 0.4)"> </td>
29 <td style="background: hsla(0, 100%, 50%, 0.2)"> </td>
30 <td style="background: hsla(0, 100%, 50%, 0)"> </td>
31 <td style="background: white"> </td>
32 </tr>
33 <tr>
34 <td style="background: white"> </td>
35 <td style="background: hsla(0, 100%, 50%, 1.0)"> </td>
36 <td style="background: hsla(0, 100%, 40%, 1.0)"> </td>
37 <td style="background: hsla(0, 100%, 30%, 1.0)"> </td>
38 <td style="background: hsla(0, 100%, 20%, 1.0)"> </td>
39 <td style="background: hsla(0, 100%, 10%, 1.0)"> </td>
40 <td style="background: hsla(0, 100%, 0%, 1.0)"> </td>
41 <td style="background: black"> </td>
42 </tr>
43 <tr>
44 <td style="background: black"> </td>
45 <td style="background: rgb(100%, 0%, 0%)"> </td>
46 <td style="background: rgb(80%, 0%, 0%)"> </td>
47 <td style="background: rgb(60%, 0%, 0%)"> </td>
48 <td style="background: rgb(40%, 0%, 0%)"> </td>
49 <td style="background: rgb(20%, 0%, 0%)"> </td>
50 <td style="background: rgb(0%, 0%, 0%)"> </td>
51 <td style="background: white"> </td>
52 </tr>
53 </table>
54 </div>
55
56 <p>The following table should have three 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>
57
58 <div style="background: white">
59 <table border="border">
60 <tr>
61 <td style="background: white"> </td>
62 <td style="background: hsla(0, 100%, 50%, 1)"> </td>
63 <td style="background: hsla(0, 100%, 50%, 0.8)"> </td>
64 <td style="background: hsla(0, 100%, 50%, 0.6)"> </td>
65 <td style="background: hsla(0, 100%, 50%, 0.4)"> </td>
66 <td style="background: hsla(0, 100%, 50%, 0.2)"> </td>
67 <td style="background: hsla(0, 100%, 50%, 0)"> </td>
68 <td style="background: black"> </td>
69 </tr>
70 <tr>
71 <td style="background: black"> </td>
72 <td style="background: hsla(0, 100%, 50%, 1.0)"> </td>
73 <td style="background: hsla(0, 100%, 60%, 1.0)"> </td>
74 <td style="background: hsla(0, 100%, 70%, 1.0)"> </td>
75 <td style="background: hsla(0, 100%, 80%, 1.0)"> </td>
76 <td style="background: hsla(0, 100%, 90%, 1.0)"> </td>
77 <td style="background: hsla(0, 100%, 100%, 1.0)"> </td>
78 <td style="background: white"> </td>
79 </tr>
80 <tr>
81 <td style="background: white"> </td>
82 <td style="background: rgb(100%, 0%, 0%)"> </td>
83 <td style="background: rgb(100%, 20%, 20%)"> </td>
84 <td style="background: rgb(100%, 40%, 40%)"> </td>
85 <td style="background: rgb(100%, 60%, 60%)"> </td>
86 <td style="background: rgb(100%, 80%, 80%)"> </td>
87 <td style="background: rgb(100%, 100%, 100%)"> </td>
88 <td style="background: black"> </td>
89 </tr>
90 </table>
91 </div>
92
93 <p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
94
95 <div style="background: black">
96 <table border="border">
97 <tr>
98 <td style="background: black"> </td>
99 <td style="background: hsla(60, 100%, 50%, 1)"> </td>
100 <td style="background: hsla(60, 100%, 50%, 0.8)"> </td>
101 <td style="background: hsla(60, 100%, 50%, 0.6)"> </td>
102 <td style="background: hsla(60, 100%, 50%, 0.4)"> </td>
103 <td style="background: hsla(60, 100%, 50%, 0.2)"> </td>
104 <td style="background: hsla(60, 100%, 50%, 0)"> </td>
105 <td style="background: white"> </td>
106 </tr>
107 <tr>
108 <td style="background: white"> </td>
109 <td style="background: hsla(60, 100%, 50%, 1.0)"> </td>
110 <td style="background: hsla(60, 100%, 40%, 1.0)"> </td>
111 <td style="background: hsla(60, 100%, 30%, 1.0)"> </td>
112 <td style="background: hsla(60, 100%, 20%, 1.0)"> </td>
113 <td style="background: hsla(60, 100%, 10%, 1.0)"> </td>
114 <td style="background: hsla(60, 100%, 0%, 1.0)"> </td>
115 <td style="background: black"> </td>
116 </tr>
117 <tr>
118 <td style="background: black"> </td>
119 <td style="background: rgb(100%, 100%, 0%)"> </td>
120 <td style="background: rgb(80%, 80%, 0%)"> </td>
121 <td style="background: rgb(60%, 60%, 0%)"> </td>
122 <td style="background: rgb(40%, 40%, 0%)"> </td>
123 <td style="background: rgb(20%, 20%, 0%)"> </td>
124 <td style="background: rgb(0%, 0%, 0%)"> </td>
125 <td style="background: white"> </td>
126 </tr>
127 </table>
128 </div>
129
130 <p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
131
132 <div style="background: white">
133 <table border="border">
134 <tr>
135 <td style="background: white"> </td>
136 <td style="background: hsla(60, 100%, 50%, 1)"> </td>
137 <td style="background: hsla(60, 100%, 50%, 0.8)"> </td>
138 <td style="background: hsla(60, 100%, 50%, 0.6)"> </td>
139 <td style="background: hsla(60, 100%, 50%, 0.4)"> </td>
140 <td style="background: hsla(60, 100%, 50%, 0.2)"> </td>
141 <td style="background: hsla(60, 100%, 50%, 0)"> </td>
142 <td style="background: black"> </td>
143 </tr>
144 <tr>
145 <td style="background: black"> </td>
146 <td style="background: hsla(60, 100%, 50%, 1.0)"> </td>
147 <td style="background: hsla(60, 100%, 60%, 1.0)"> </td>
148 <td style="background: hsla(60, 100%, 70%, 1.0)"> </td>
149 <td style="background: hsla(60, 100%, 80%, 1.0)"> </td>
150 <td style="background: hsla(60, 100%, 90%, 1.0)"> </td>
151 <td style="background: hsla(60, 100%, 100%, 1.0)"> </td>
152 <td style="background: white"> </td>
153 </tr>
154 <tr>
155 <td style="background: white"> </td>
156 <td style="background: rgb(100%, 100%, 0%)"> </td>
157 <td style="background: rgb(100%, 100%, 20%)"> </td>
158 <td style="background: rgb(100%, 100%, 40%)"> </td>
159 <td style="background: rgb(100%, 100%, 60%)"> </td>
160 <td style="background: rgb(100%, 100%, 80%)"> </td>
161 <td style="background: rgb(100%, 100%, 100%)"> </td>
162 <td style="background: black"> </td>
163 </tr>
164 </table>
165 </div>
166
167 <p>The following table should have three 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>
168
169 <div style="background: black">
170 <table border="border">
171 <tr>
172 <td style="background: black"> </td>
173 <td style="background: hsla(120, 100%, 50%, 1)"> </td>
174 <td style="background: hsla(120, 100%, 50%, 0.8)"> </td>
175 <td style="background: hsla(120, 100%, 50%, 0.6)"> </td>
176 <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
177 <td style="background: hsla(120, 100%, 50%, 0.2)"> </td>
178 <td style="background: hsla(120, 100%, 50%, 0)"> </td>
179 <td style="background: white"> </td>
180 </tr>
181 <tr>
182 <td style="background: white"> </td>
183 <td style="background: hsla(120, 100%, 50%, 1.0)"> </td>
184 <td style="background: hsla(120, 100%, 40%, 1.0)"> </td>
185 <td style="background: hsla(120, 100%, 30%, 1.0)"> </td>
186 <td style="background: hsla(120, 100%, 20%, 1.0)"> </td>
187 <td style="background: hsla(120, 100%, 10%, 1.0)"> </td>
188 <td style="background: hsla(120, 100%, 0%, 1.0)"> </td>
189 <td style="background: black"> </td>
190 </tr>
191 <tr>
192 <td style="background: black"> </td>
193 <td style="background: rgb(0%, 100%, 0%)"> </td>
194 <td style="background: rgb(0%, 80%, 0%)"> </td>
195 <td style="background: rgb(0%, 60%, 0%)"> </td>
196 <td style="background: rgb(0%, 40%, 0%)"> </td>
197 <td style="background: rgb(0%, 20%, 0%)"> </td>
198 <td style="background: rgb(0%, 0%, 0%)"> </td>
199 <td style="background: white"> </td>
200 </tr>
201 </table>
202 </div>
203
204 <p>The following table should have three 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>
205
206 <div style="background: white">
207 <table border="border">
208 <tr>
209 <td style="background: white"> </td>
210 <td style="background: hsla(120, 100%, 50%, 1)"> </td>
211 <td style="background: hsla(120, 100%, 50%, 0.8)"> </td>
212 <td style="background: hsla(120, 100%, 50%, 0.6)"> </td>
213 <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
214 <td style="background: hsla(120, 100%, 50%, 0.2)"> </td>
215 <td style="background: hsla(120, 100%, 50%, 0)"> </td>
216 <td style="background: black"> </td>
217 </tr>
218 <tr>
219 <td style="background: black"> </td>
220 <td style="background: hsla(120, 100%, 50%, 1.0)"> </td>
221 <td style="background: hsla(120, 100%, 60%, 1.0)"> </td>
222 <td style="background: hsla(120, 100%, 70%, 1.0)"> </td>
223 <td style="background: hsla(120, 100%, 80%, 1.0)"> </td>
224 <td style="background: hsla(120, 100%, 90%, 1.0)"> </td>
225 <td style="background: hsla(120, 100%, 100%, 1.0)"> </td>
226 <td style="background: white"> </td>
227 </tr>
228 <tr>
229 <td style="background: white"> </td>
230 <td style="background: rgb(0%, 100%, 0%)"> </td>
231 <td style="background: rgb(20%, 100%, 20%)"> </td>
232 <td style="background: rgb(40%, 100%, 40%)"> </td>
233 <td style="background: rgb(60%, 100%, 60%)"> </td>
234 <td style="background: rgb(80%, 100%, 80%)"> </td>
235 <td style="background: rgb(100%, 100%, 100%)"> </td>
236 <td style="background: black"> </td>
237 </tr>
238 </table>
239 </div>
240
241 <p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
242
243 <div style="background: black">
244 <table border="border">
245 <tr>
246 <td style="background: black"> </td>
247 <td style="background: hsla(180, 100%, 50%, 1)"> </td>
248 <td style="background: hsla(180, 100%, 50%, 0.8)"> </td>
249 <td style="background: hsla(180, 100%, 50%, 0.6)"> </td>
250 <td style="background: hsla(180, 100%, 50%, 0.4)"> </td>
251 <td style="background: hsla(180, 100%, 50%, 0.2)"> </td>
252 <td style="background: hsla(180, 100%, 50%, 0)"> </td>
253 <td style="background: white"> </td>
254 </tr>
255 <tr>
256 <td style="background: white"> </td>
257 <td style="background: hsla(180, 100%, 50%, 1.0)"> </td>
258 <td style="background: hsla(180, 100%, 40%, 1.0)"> </td>
259 <td style="background: hsla(180, 100%, 30%, 1.0)"> </td>
260 <td style="background: hsla(180, 100%, 20%, 1.0)"> </td>
261 <td style="background: hsla(180, 100%, 10%, 1.0)"> </td>
262 <td style="background: hsla(180, 100%, 0%, 1.0)"> </td>
263 <td style="background: black"> </td>
264 </tr>
265 <tr>
266 <td style="background: black"> </td>
267 <td style="background: rgb(0%, 100%, 100%)"> </td>
268 <td style="background: rgb(0%, 80%, 80%)"> </td>
269 <td style="background: rgb(0%, 60%, 60%)"> </td>
270 <td style="background: rgb(0%, 40%, 40%)"> </td>
271 <td style="background: rgb(0%, 20%, 20%)"> </td>
272 <td style="background: rgb(0%, 0%, 0%)"> </td>
273 <td style="background: white"> </td>
274 </tr>
275 </table>
276 </div>
277
278 <p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
279
280 <div style="background: white">
281 <table border="border">
282 <tr>
283 <td style="background: white"> </td>
284 <td style="background: hsla(180, 100%, 50%, 1)"> </td>
285 <td style="background: hsla(180, 100%, 50%, 0.8)"> </td>
286 <td style="background: hsla(180, 100%, 50%, 0.6)"> </td>
287 <td style="background: hsla(180, 100%, 50%, 0.4)"> </td>
288 <td style="background: hsla(180, 100%, 50%, 0.2)"> </td>
289 <td style="background: hsla(180, 100%, 50%, 0)"> </td>
290 <td style="background: black"> </td>
291 </tr>
292 <tr>
293 <td style="background: black"> </td>
294 <td style="background: hsla(180, 100%, 50%, 1.0)"> </td>
295 <td style="background: hsla(180, 100%, 60%, 1.0)"> </td>
296 <td style="background: hsla(180, 100%, 70%, 1.0)"> </td>
297 <td style="background: hsla(180, 100%, 80%, 1.0)"> </td>
298 <td style="background: hsla(180, 100%, 90%, 1.0)"> </td>
299 <td style="background: hsla(180, 100%, 100%, 1.0)"> </td>
300 <td style="background: white"> </td>
301 </tr>
302 <tr>
303 <td style="background: white"> </td>
304 <td style="background: rgb(0%, 100%, 100%)"> </td>
305 <td style="background: rgb(20%, 100%, 100%)"> </td>
306 <td style="background: rgb(40%, 100%, 100%)"> </td>
307 <td style="background: rgb(60%, 100%, 100%)"> </td>
308 <td style="background: rgb(80%, 100%, 100%)"> </td>
309 <td style="background: rgb(100%, 100%, 100%)"> </td>
310 <td style="background: black"> </td>
311 </tr>
312 </table>
313 </div>
314
315 <p>The following table should have three 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>
316
317 <div style="background: black">
318 <table border="border">
319 <tr>
320 <td style="background: black"> </td>
321 <td style="background: hsla(240, 100%, 50%, 1)"> </td>
322 <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
323 <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
324 <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
325 <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
326 <td style="background: hsla(240, 100%, 50%, 0)"> </td>
327 <td style="background: white"> </td>
328 </tr>
329 <tr>
330 <td style="background: white"> </td>
331 <td style="background: hsla(240, 100%, 50%, 1.0)"> </td>
332 <td style="background: hsla(240, 100%, 40%, 1.0)"> </td>
333 <td style="background: hsla(240, 100%, 30%, 1.0)"> </td>
334 <td style="background: hsla(240, 100%, 20%, 1.0)"> </td>
335 <td style="background: hsla(240, 100%, 10%, 1.0)"> </td>
336 <td style="background: hsla(240, 100%, 0%, 1.0)"> </td>
337 <td style="background: black"> </td>
338 </tr>
339 <tr>
340 <td style="background: black"> </td>
341 <td style="background: rgb(0%, 0%, 100%)"> </td>
342 <td style="background: rgb(0%, 0%, 80%)"> </td>
343 <td style="background: rgb(0%, 0%, 60%)"> </td>
344 <td style="background: rgb(0%, 0%, 40%)"> </td>
345 <td style="background: rgb(0%, 0%, 20%)"> </td>
346 <td style="background: rgb(0%, 0%, 0%)"> </td>
347 <td style="background: white"> </td>
348 </tr>
349 </table>
350 </div>
351
352 <p>The following table should have three 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>
353
354 <div style="background: white">
355 <table border="border">
356 <tr>
357 <td style="background: white"> </td>
358 <td style="background: hsla(240, 100%, 50%, 1)"> </td>
359 <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
360 <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
361 <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
362 <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
363 <td style="background: hsla(240, 100%, 50%, 0)"> </td>
364 <td style="background: black"> </td>
365 </tr>
366 <tr>
367 <td style="background: black"> </td>
368 <td style="background: hsla(240, 100%, 50%, 1.0)"> </td>
369 <td style="background: hsla(240, 100%, 60%, 1.0)"> </td>
370 <td style="background: hsla(240, 100%, 70%, 1.0)"> </td>
371 <td style="background: hsla(240, 100%, 80%, 1.0)"> </td>
372 <td style="background: hsla(240, 100%, 90%, 1.0)"> </td>
373 <td style="background: hsla(240, 100%, 100%, 1.0)"> </td>
374 <td style="background: white"> </td>
375 </tr>
376 <tr>
377 <td style="background: white"> </td>
378 <td style="background: rgb(0%, 0%, 100%)"> </td>
379 <td style="background: rgb(20%, 20%, 100%)"> </td>
380 <td style="background: rgb(40%, 40%, 100%)"> </td>
381 <td style="background: rgb(60%, 60%, 100%)"> </td>
382 <td style="background: rgb(80%, 80%, 100%)"> </td>
383 <td style="background: rgb(100%, 100%, 100%)"> </td>
384 <td style="background: black"> </td>
385 </tr>
386 </table>
387 </div>
388
389 <p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
390
391 <div style="background: black">
392 <table border="border">
393 <tr>
394 <td style="background: black"> </td>
395 <td style="background: hsla(300, 100%, 50%, 1)"> </td>
396 <td style="background: hsla(300, 100%, 50%, 0.8)"> </td>
397 <td style="background: hsla(300, 100%, 50%, 0.6)"> </td>
398 <td style="background: hsla(300, 100%, 50%, 0.4)"> </td>
399 <td style="background: hsla(300, 100%, 50%, 0.2)"> </td>
400 <td style="background: hsla(300, 100%, 50%, 0)"> </td>
401 <td style="background: white"> </td>
402 </tr>
403 <tr>
404 <td style="background: white"> </td>
405 <td style="background: hsla(300, 100%, 50%, 1.0)"> </td>
406 <td style="background: hsla(300, 100%, 40%, 1.0)"> </td>
407 <td style="background: hsla(300, 100%, 30%, 1.0)"> </td>
408 <td style="background: hsla(300, 100%, 20%, 1.0)"> </td>
409 <td style="background: hsla(300, 100%, 10%, 1.0)"> </td>
410 <td style="background: hsla(300, 100%, 0%, 1.0)"> </td>
411 <td style="background: black"> </td>
412 </tr>
413 <tr>
414 <td style="background: black"> </td>
415 <td style="background: rgb(100%, 0%, 100%)"> </td>
416 <td style="background: rgb(80%, 0%, 80%)"> </td>
417 <td style="background: rgb(60%, 0%, 60%)"> </td>
418 <td style="background: rgb(40%, 0%, 40%)"> </td>
419 <td style="background: rgb(20%, 0%, 20%)"> </td>
420 <td style="background: rgb(0%, 0%, 0%)"> </td>
421 <td style="background: white"> </td>
422 </tr>
423 </table>
424 </div>
425
426 <p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p>
427
428 <div style="background: white">
429 <table border="border">
430 <tr>
431 <td style="background: white"> </td>
432 <td style="background: hsla(300, 100%, 50%, 1)"> </td>
433 <td style="background: hsla(300, 100%, 50%, 0.8)"> </td>
434 <td style="background: hsla(300, 100%, 50%, 0.6)"> </td>
435 <td style="background: hsla(300, 100%, 50%, 0.4)"> </td>
436 <td style="background: hsla(300, 100%, 50%, 0.2)"> </td>
437 <td style="background: hsla(300, 100%, 50%, 0)"> </td>
438 <td style="background: black"> </td>
439 </tr>
440 <tr>
441 <td style="background: black"> </td>
442 <td style="background: hsla(300, 100%, 50%, 1.0)"> </td>
443 <td style="background: hsla(300, 100%, 60%, 1.0)"> </td>
444 <td style="background: hsla(300, 100%, 70%, 1.0)"> </td>
445 <td style="background: hsla(300, 100%, 80%, 1.0)"> </td>
446 <td style="background: hsla(300, 100%, 90%, 1.0)"> </td>
447 <td style="background: hsla(300, 100%, 100%, 1.0)"> </td>
448 <td style="background: white"> </td>
449 </tr>
450 <tr>
451 <td style="background: white"> </td>
452 <td style="background: rgb(100%, 0%, 100%)"> </td>
453 <td style="background: rgb(100%, 20%, 100%)"> </td>
454 <td style="background: rgb(100%, 40%, 100%)"> </td>
455 <td style="background: rgb(100%, 60%, 100%)"> </td>
456 <td style="background: rgb(100%, 80%, 100%)"> </td>
457 <td style="background: rgb(100%, 100%, 100%)"> </td>
458 <td style="background: black"> </td>
459 </tr>
460 </table>
461 </div>
462
463 <p>The following table should have two 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>
464
465 <div style="background: lime">
466 <table border="border">
467 <tr>
468 <td style="background: black"> </td>
469 <td style="background: hsla(0, 100%, 50%, 1)"> </td>
470 <td style="background: hsla(0, 100%, 50%, 0.8)"> </td>
471 <td style="background: hsla(0, 100%, 50%, 0.6)"> </td>
472 <td style="background: hsla(0, 100%, 50%, 0.4)"> </td>
473 <td style="background: hsla(0, 100%, 50%, 0.2)"> </td>
474 <td style="background: hsla(0, 100%, 50%, 0)"> </td>
475 <td style="background: white"> </td>
476 </tr>
477 <tr>
478 <td style="background: white"> </td>
479 <td style="background: rgb(100%, 0%, 0%)"> </td>
480 <td style="background: rgb(80%, 20%, 0%)"> </td>
481 <td style="background: rgb(60%, 40%, 0%)"> </td>
482 <td style="background: rgb(40%, 60%, 0%)"> </td>
483 <td style="background: rgb(20%, 80%, 0%)"> </td>
484 <td style="background: rgb(0%, 100%, 0%)"> </td>
485 <td style="background: black"> </td>
486 </tr>
487 </table>
488 </div>
489
490 <p>The following table should have two 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>
491
492 <div style="background: blue">
493 <table border="border">
494 <tr>
495 <td style="background: black"> </td>
496 <td style="background: hsla(120, 100%, 50%, 1)"> </td>
497 <td style="background: hsla(120, 100%, 50%, 0.8)"> </td>
498 <td style="background: hsla(120, 100%, 50%, 0.6)"> </td>
499 <td style="background: hsla(120, 100%, 50%, 0.4)"> </td>
500 <td style="background: hsla(120, 100%, 50%, 0.2)"> </td>
501 <td style="background: hsla(120, 100%, 50%, 0)"> </td>
502 <td style="background: white"> </td>
503 </tr>
504 <tr>
505 <td style="background: white"> </td>
506 <td style="background: rgb(0%, 100%, 0%)"> </td>
507 <td style="background: rgb(0%, 80%, 20%)"> </td>
508 <td style="background: rgb(0%, 60%, 40%)"> </td>
509 <td style="background: rgb(0%, 40%, 60%)"> </td>
510 <td style="background: rgb(0%, 20%, 80%)"> </td>
511 <td style="background: rgb(0%, 0%, 100%)"> </td>
512 <td style="background: black"> </td>
513 </tr>
514 </table>
515 </div>
516
517 <p>The following table should have two 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>
518
519 <div style="background: red">
520 <table border="border">
521 <tr>
522 <td style="background: black"> </td>
523 <td style="background: hsla(240, 100%, 50%, 1)"> </td>
524 <td style="background: hsla(240, 100%, 50%, 0.8)"> </td>
525 <td style="background: hsla(240, 100%, 50%, 0.6)"> </td>
526 <td style="background: hsla(240, 100%, 50%, 0.4)"> </td>
527 <td style="background: hsla(240, 100%, 50%, 0.2)"> </td>
528 <td style="background: hsla(240, 100%, 50%, 0)"> </td>
529 <td style="background: white"> </td>
530 </tr>
531 <tr>
532 <td style="background: white"> </td>
533 <td style="background: rgb(0%, 0%, 100%)"> </td>
534 <td style="background: rgb(20%, 0%, 80%)"> </td>
535 <td style="background: rgb(40%, 0%, 60%)"> </td>
536 <td style="background: rgb(60%, 0%, 40%)"> </td>
537 <td style="background: rgb(80%, 0%, 20%)"> </td>
538 <td style="background: rgb(100%, 0%, 0%)"> </td>
539 <td style="background: black"> </td>
540 </tr>
541 </table>
542 </div>
543
544 </body>
545 </html>