Scrawl-canvas v8 - Canvas test 059

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.

Safari issue: while Safari currently supports LAB/LCH and OKLAB/OKLCH color spaces, it only supports them when formatted with L as a percentage value and A, B, C, H as number values. Where presented with alternative formats, Safari will ignore the color value in CSS, and render it as black on the canvas.

For browsers that do not currently support a given color space, 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. As a result, where a browser may display a color for a given LAB/LCH or OKLAB/OKLCH CSS color string, Safari will instead display black if the CSS color string is, in its view, malformed.

Touch test: not required

Annotated code