v144 · css color 4

Pixel proof

CSS Color 4 §10.5 makes a checkable claim: color(display-p3 0.591 0.123 0.264) and color(display-p3-linear 0.3081 0.014 0.0567) are the same colour. Canvas fillStyle accepts any CSS colour, and getImageData() returns the bytes that actually landed — so we can paint both declarations and diff the pixels. No trusting the spec; measuring it.

Ships in Chrome 144. An invalid fillStyle assignment is silently ignored (the old value survives), so this page detects rejection with a sentinel colour rather than a try/catch — a different trap from the enum TypeError on the canvas-feature sibling page. On a pre-144 browser the linear row honestly reports "parse rejected". The srgb-linear pair (supported since Chrome 111) proves the same mechanism live on any recent browser.

Paint both notations, diff the bytes

Each declaration painted via fillStyle on an srgb canvas, then read back with getImageData
pair declaration pixel bytes [r, g, b] verdict
not run yet

the technique

const ctx = canvas.getContext("2d");         // srgb store
ctx.fillStyle = "#010203";                    // sentinel
ctx.fillStyle = "color(display-p3-linear 0.3081 0.014 0.0567)";
if (ctx.fillStyle === "#010203") {
  // invalid fillStyle is IGNORED, not thrown — the sentinel survived,
  // so the browser rejected the declaration
} else {
  ctx.fillRect(0, 0, 1, 1);
  ctx.getImageData(0, 0, 1, 1).data;          // the bytes that landed
}

see also