mdrejhon
commented
1 year ago Third Inconsistency Discovered
That's not just that., there's a 3rd gradient.
I have an HDR display because I am the creator of TestUFO / founder of Blur Busters. I'm working on adding HDR support to www.testufo.com and its ~30 selectable tests at upper-right corner.
Even latest Chrome Canary -> Experimental Features is still color-clipping this to SDR.
The only way I am able to unlock true HDR brighter-than-#FFFFFF whites is via a rec2100-pq <
I intentionally edited the CSS to try to create brighter-than-white (2 2 2 instead of 1 1 1), and it still clips to RGB space even in Canary 112 browser that supports HDR .AVIF image files. See RGB #FFFFFF, while in my JavaScript, I can unlock true HDR brighter-than-white on any rec2020-compatible display using the rec2100-pq colorspace in Chrome Canary 108+
Photo proof of a 3rd inconsistency (ability/inability to do brighter-than-RGB-#FFFFFF on HDR displays):
I tried 1,1,1 (standard) and 2,2,2 (nonstandard, tried to hack it brighter or piggyback on browser issues) no difference to inability to create brighter-than-white.
(there's a shadow-gradient that makes the two RGB #FFFFFF seem to mismatch, but the overexposed photo makes it hard to see. The only truly brigher-than-#FFFFFF white is in the blue circled area)
(I can also use "display-p3" in a canvas on Safari, and successfully achieve brighter-than-white on Macs (connected to HDR displays) as well as iPad Pros.
I'm incubating the world's first web-based HDR display motion testing suite; as my motion test website is hugely popular among >60Hz users; and most current new real HDR displays (2022-2023+) are also happen to be simultaneously high-Hz displays (120Hz+) too, whether mobile format or television format.
For creating a test case, do: Chrome Canary version 112, with chrome://flags "Experimental Features" = ON, with canvas created via:
// Create HDR canvas in Chrome Canary "Experimental Features ON" (rec2100-pq, Canary 108 or later)
surface = canvas.getContext("2d", {colorSpace:'rec2100-pq', pixelFormat:'float16'});
canvas.drawingBufferColorSpace = 'rec2100-pq';
canvas.unpackColorSpace = 'rec2100-pq';For Safari, replace "rec2100-pq" with "display-p3" (And remove the pixelFormat argument from getContext), and brighter-than-white works fine in Safari devices (e.g. the new 1600-nit iPad Pro, or a Mac connected to a XDR display), running Safari 16.1+ or MacOS Ventura+.
And then use drawBitmap on an AVIF file. You might want to create the .AVIF graphics file with a HDR gradient in another editor such as Krita or other (matching the gradient might be tough), as a third mismatchy HDR gradient. I haven't successfully screenshotted a HDR canvas into a HDR AVIF yet (still figuring out how to pull it off). I currently yet can't use things like line/rectangle drawing to create HDR pixels (but I last tried those in Chrome Canary 108, maybe they added support for HDR pixel drawing by now).
https://codepen.io/argyleink/pen/MWXOBqq
Safari
Chrome