| <html lang="en"> |
| <title>CSS 3.0 HSL color support test</title> |
| |
| <style type="text/css"> |
| h1#red {color: hsl(0, 100%, 50%) } |
| h1#green {color: hsl(120, 100%, 50%) } |
| h1#blue {color: hsl(240, 100%, 50%) } |
| h1#aqua {color: hsl(180, 100%, 50%) } |
| h1#darkgreen {color: hsl(120, 100%, 25%) } |
| h1#lightgreen {color: hsl(120, 100%, 75%) } |
| h1#pastelgreen {color: hsl(120, 50%, 50%) } |
| |
| h1#twohundredgreen {color: hsl(120, 200%, 50%) } |
| |
| h1#grey {color: hsl(120, 0%, 50%) } |
| h1#negpercentgrey {color: hsl(120, -100%, 50%) } |
| |
| h1#threesixtydarkgreen {color: hsl(480, 100%, 25%) } |
| |
| h1#neghuelightgreen {color: hsl(-240, 100%, 75%) } |
| h1#neghuethreesixtylightgreen {color: hsl(-600, 100%, 75%) } |
| |
| h1#redFloat {color: hsl(0.0, 100%, 50%) } |
| h1#greenFloat {color: hsl(120.00, 100%, 50%) } |
| h1#blueFloat {color: hsl(240.000, 100%, 50%) } |
| |
| </style> |
| </head> |
| |
| <body> |
| <h1 id="red">This should be red: hsl(0, 100%, 50%)</h1> |
| <h1 id="green">This should be green: hsl(120, 100%, 50%)</h1> |
| <h1 id="aqua">This should be aqua: hsl(180, 100%, 50%)</h1> |
| <h1 id="blue">This should be blue: hsl(240, 100%, 50%)</h1> |
| <h1 id="lightgreen">This should be light green: hsl(120, 100%, 75%)</h1> |
| <h1 id="darkgreen">This should be dark green: hsl(120, 100%, 25%)</h1> |
| <h1 id="pastelgreen">This should be pastel green: hsl(120, 50%, 50%)</h1> |
| <b>Out of bounds cases:</b><br> |
| Check percentages larger than 100%, should be limited to 100% |
| <h1 id="green">This should be green: hsl(120, 100%, 50%)</h1> |
| <h1 id="twohundredgreen">This should be green too: hsl(120, 200%, 50%) </h1> |
| Check percentages less than 0% (negative values), should be limited to 0% |
| <h1 id="grey">This should be grey: hsl(120, 0%, 50%) </h1> |
| <h1 id="negpercentgrey">This should be grey, too: hsl(120, -100%, 50%) </h1> |
| Check Hue values that are larger than 360, should be normalized back to a value between 0 and 360. As Hue values are in degrees, there is no maximum like percentages, they are loop around. |
| <h1 id="darkgreen">This should be dark green: hsl(120, 100%, 25%) </h1> |
| <h1 id="threesixtydarkgreen">This should be dark green, too: hsl(480, 100%, 25%) </h1> |
| Check Hue values with a negative angle. |
| <h1 id="lightgreen">This should be light green: hsl(120, 100%, 75%)</h1> |
| <h1 id="neghuelightgreen">This should be light green, too: hsl(-240, 100%, 75%)</h1> |
| <h1 id="neghuethreesixtylightgreen">This should be light green, too: hsl(-600, 100%, 75%)</h1> |
| Check Hues values with a floating point angle. |
| <h1 id="redFloat">This should be red: hsl(0.0, 100%, 50%)</h1> |
| <h1 id="greenFloat">This should be green: hsl(120.00, 100%, 50%)</h1> |
| <h1 id="blueFloat">This should be blue: hsl(240.000, 100%, 50%)</h1> |
| |
| </body> |
| </html> |
