# Scrawl-canvas v8 - Canvas test 059

## CSS color space strings - rgb-key, rgb-hex, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch()

#### Test purpose

- Create a canvas; fill it with blocks whose fillStyle attributes have been populated with a range of different CSS color value strings.
- Check that the expected color displays in the canvas.
- For comparison, create a set of <div> elements with their backgroundColor values set to those same color strings.

Note that: browser support for different color spaces is somewhat patchy. Browsers that do support the newer color spacess in CSS may not support them in <canvas> elements.

Chrome issue: while Chrome supports LAB/LCH and OKLAB/OKLCH color spaces, it does not parse these colors correctly when the non-L values are given in % format.

For browsers that do not currently support a given color space (eg: Firefox), SC will calculate the required color space color (for all permitted formatting values) and render the color on the canvas using the sRGB color space.

Touch test: not required

Annotated code

Test if color strings work for CSS in this browser:

red
orange
gold
#f09
#FF0099
#ff009980
rgb(255, 0, 153)
rgb(2.55e2, 0e0, 1.53e2)
rgb(255 0 153)
rgba(100%, 0%, 60%, 1)
rgba(51 170 51 / 0.4)
rgba(51, 170, 51.6, 80%)
hsl(30, 100%, 50%)
hsl(30 100% 50%)
hsl(30.0 100% 50% / 60%)
hsla(30, 100%, 50%, 0.6)
hsla(30 100% 50% / 0.6)
hsla(30.2 100% 50% / 60%)
hwb(90 10% 10%)
hwb(90deg 10% 10% / 0.5)
hwb(.25turn 0% 40% / 50%)
lab(29.2345% 39.3825 20.0664)
lab(52.2345% 40.1645 59.9971)
lab(52.2345% 40.1645 59.9971 / .5)
lch(29.2345% 44.2 27)
lch(52.2345% 72.2 56.2)
lch(52.2345% 72.2 56.2 / .5)
oklab(59.686% 0.1009 0.1192)
oklab(0.65125 -0.0320 0.1274)
oklab(42.1% 41% -25% / .5)
oklch(59.686% 0.15619 49.7694)
oklch(0.65125 0.13138 104.097)
oklch(42.1% 48.25% 328.4 / .5)