t424-hsl-values-b-2

hsl() values

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
Implementation of algorithm for converting hsl() colors to rgb() colors.

Source

 1 <!DOCTYPE html>
 2 <html><head><meta charset="utf-8">
 3 <title>CSS Test: hsl() values</title>
 4 <link href="https://dbaron.org/" rel="author" title="L. David Baron">
 5 <link href="http://mozilla.com/" rel="author" title="Mozilla Corporation">
 6 <link href="http://www.intel.com" rel="author" title="Intel">
 7 <link href="http://www.w3.org/TR/css3-color/#hsl-color" rel="help">
 8 <link href="reference/t424-hsl-values-b-2-ref.htm" rel="match">
 9 <meta content="" name="flags">
10 <meta content="Implementation of algorithm for converting hsl() colors to rgb() colors." name="assert">
11 <style>
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><body>
17   <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from green at the left to blue at the right (through aqua in the middle).</p>
18   <table>
19     <tbody><tr>
20       <td style="background: black">&nbsp;</td>
21       <td style="background: hsl(120, 100%, 50%)">&nbsp;</td>
22       <td style="background: hsl(132, 100%, 50%)">&nbsp;</td>
23       <td style="background: hsl(144, 100%, 50%)">&nbsp;</td>
24       <td style="background: hsl(156, 100%, 50%)">&nbsp;</td>
25       <td style="background: hsl(168, 100%, 50%)">&nbsp;</td>
26       <td style="background: hsl(180, 100%, 50%)">&nbsp;</td>
27       <td style="background: hsl(192, 100%, 50%)">&nbsp;</td>
28       <td style="background: hsl(204, 100%, 50%)">&nbsp;</td>
29       <td style="background: hsl(216, 100%, 50%)">&nbsp;</td>
30       <td style="background: hsl(228, 100%, 50%)">&nbsp;</td>
31       <td style="background: hsl(240, 100%, 50%)">&nbsp;</td>
32       <td style="background: white">&nbsp;</td>
33     </tr>
34     <tr>
35       <td style="background: white">&nbsp;</td>
36       <td style="background: rgb(0, 255, 0)">&nbsp;</td>
37       <td style="background: rgb(0, 255, 51)">&nbsp;</td>
38       <td style="background: rgb(0, 255, 102)">&nbsp;</td>
39       <td style="background: rgb(0, 255, 153)">&nbsp;</td>
40       <td style="background: rgb(0, 255, 204)">&nbsp;</td>
41       <td style="background: rgb(0, 255, 255)">&nbsp;</td>
42       <td style="background: rgb(0, 204, 255)">&nbsp;</td>
43       <td style="background: rgb(0, 153, 255)">&nbsp;</td>
44       <td style="background: rgb(0, 102, 255)">&nbsp;</td>
45       <td style="background: rgb(0, 51, 255)">&nbsp;</td>
46       <td style="background: rgb(0, 0, 255)">&nbsp;</td>
47       <td style="background: black">&nbsp;</td>
48     </tr>
49   </tbody></table>
50 
51 </body></html>