Note: this canvas will use the display-p3 color space where the device, browser and display screen all support it.
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 only reached broad support across browsers in 2023. Some older browsers that do support the newer color spaces in CSS may not support them in <canvas> elements.
For browsers that do not currently support a given color() CSS string, SC will render that color as transparent black - which is the expected action. Malformed CSS strings may be rendered as either a clamped version of the color, or opaque/transparent black (again, the expected action).
Touch test: not required
Annotated code
color(srgb 0.5 1 0.25)
color(srgb 20% 0.6 100%)
color(srgb 0.5 0 1 / 0.5)
color(srgb-linear 0.5 1 0.25)
color(srgb-linear 20% 0.6 100%)
color(srgb-linear 0.5 0 1 / 0.5)
color(display-p3 0.5 1 0.25)
color(display-p3 20% 0.6 100%)
color(display-p3 0.5 0 1 / 0.5)
color(a98-rgb 0.5 1 0.25)
color(a98-rgb 20% 0.6 100%)
color(a98-rgb 0.5 0 1 / 0.5)
color(prophoto-rgb 0.5 1 0.25)
color(prophoto-rgb 20% 0.6 100%)
color(prophoto-rgb 0.5 0 1 / 0.5)
color(rec2020 0.5 1 0.25)
color(rec2020 20% 0.6 100%)
color(rec2020 0.5 0 1 / 0.5)
color(xyz 0.5 1 0.25)
color(xyz 20% 0.6 100%)
color(xyz 0.5 0 1 / 0.5)
color(xyz-d50 0.5 1 0.25)
color(xyz-d50 20% 0.6 100%)
color(xyz-d50 0.5 0 1 / 0.5)
color(xyz-d65 0.5 1 0.25)
color(xyz-d65 20% 0.6 100%)
color(xyz-d65 0.5 0 1 / 0.5)
Malformed strings
color(rec2020 0.5 1.2 0.25)
color(srgb 0.5 1.2 0.25)
color(display-p3 0.5 1.2 0.25)