summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js')
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js283
1 files changed, 283 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js
new file mode 100644
index 0000000000..c6ee97b788
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js
@@ -0,0 +1,283 @@
+// Each PNG:
+// * is 2x2 and has a single color
+// * has a filename that indicates its contents:
+// <embedded-profile>-<8-or-16-bit-color-value>.png
+// * was generated using ImageMagick commands like:
+// convert -size 2x2 xc:'#BB0000FF' -profile Display-P3.icc Display-P3-BB0000FF.png
+// convert -size 2x2 xc:'#BBBC00000000FFFF' -profile Adobe-RGB.icc Adobe-RGB-BBBC00000000FFFF.png
+
+// Top level key is the image filename. Second level key is the pair of
+// CanvasRenderingContext2DSettings.colorSpace and ImageDataSettings.colorSpace.
+const imageTests = {
+ // 8 bit source images
+
+ "sRGB-FF0000FF.png": {
+ "srgb srgb": [255, 0, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 0, 0, 255],
+ "display-p3 display-p3": [234, 51, 35, 255],
+ },
+ "sRGB-FF0000CC.png": {
+ "srgb srgb": [255, 0, 0, 204],
+ "srgb display-p3": [234, 51, 35, 204],
+ "display-p3 srgb": [255, 0, 0, 204],
+ "display-p3 display-p3": [234, 51, 35, 204],
+ },
+ "sRGB-BB0000FF.png": {
+ "srgb srgb": [187, 0, 0, 255],
+ "srgb display-p3": [171, 35, 23, 255],
+ "display-p3 srgb": [187, 1, 0, 255],
+ "display-p3 display-p3": [171, 35, 23, 255],
+ },
+ "sRGB-BB0000CC.png": {
+ "srgb srgb": [187, 0, 0, 204],
+ "srgb display-p3": [171, 35, 23, 204],
+ "display-p3 srgb": [187, 1, 0, 204],
+ "display-p3 display-p3": [171, 35, 23, 204],
+ },
+
+ "Display-P3-FF0000FF.png": {
+ "srgb srgb": [255, 0, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 0, 0, 255],
+ "display-p3 display-p3": [255, 0, 0, 255],
+ },
+ "Display-P3-FF0000CC.png": {
+ "srgb srgb": [255, 0, 0, 204],
+ "srgb display-p3": [234, 51, 35, 204],
+ "display-p3 srgb": [255, 0, 0, 204],
+ "display-p3 display-p3": [255, 0, 0, 204],
+ },
+ "Display-P3-BB0000FF.png": {
+ "srgb srgb": [205, 0, 0, 255],
+ "srgb display-p3": [188, 39, 26, 255],
+ "display-p3 srgb": [205, 0, 0, 255],
+ "display-p3 display-p3": [187, 0, 0, 255],
+ },
+ "Display-P3-BB0000CC.png": {
+ "srgb srgb": [205, 0, 0, 204],
+ "srgb display-p3": [188, 39, 26, 204],
+ "display-p3 srgb": [205, 0, 0, 204],
+ "display-p3 display-p3": [187, 0, 0, 204],
+ },
+
+ "Adobe-RGB-FF0000FF.png": {
+ "srgb srgb": [255, 0, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 19, 11, 255],
+ "display-p3 display-p3": [255, 61, 43, 255],
+ },
+ "Adobe-RGB-FF0000CC.png": {
+ "srgb srgb": [255, 0, 0, 204],
+ "srgb display-p3": [234, 51, 35, 204],
+ "display-p3 srgb": [255, 19, 11, 204],
+ "display-p3 display-p3": [255, 61, 43, 204],
+ },
+ "Adobe-RGB-BB0000FF.png": {
+ "srgb srgb": [219, 0, 0, 255],
+ "srgb display-p3": [201, 42, 29, 255],
+ "display-p3 srgb": [219, 0, 1, 255],
+ "display-p3 display-p3": [201, 42, 29, 255],
+ },
+ "Adobe-RGB-BB0000CC.png": {
+ "srgb srgb": [219, 0, 0, 204],
+ "srgb display-p3": [201, 42, 29, 204],
+ "display-p3 srgb": [219, 0, 1, 204],
+ "display-p3 display-p3": [201, 42, 29, 204],
+ },
+
+ "Generic-CMYK-FF000000.jpg": {
+ "srgb srgb": [0, 163, 218, 255],
+ "srgb display-p3": [72, 161, 213, 255],
+ "display-p3 srgb": [0, 163, 218, 255],
+ "display-p3 display-p3": [0, 160, 213, 255],
+ },
+ "Generic-CMYK-BE000000.jpg": {
+ "srgb srgb": [0, 180, 223, 255],
+ "srgb display-p3": [80, 177, 219, 255],
+ "display-p3 srgb": [0, 180, 223, 255],
+ "display-p3 display-p3": [65, 177, 219, 255],
+ },
+
+ // 16 bit source images
+
+ "sRGB-FFFF00000000FFFF.png": {
+ "srgb srgb": [255, 0, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 0, 0, 255],
+ "display-p3 display-p3": [234, 51, 35, 255],
+ },
+ "sRGB-FFFF00000000CCCC.png": {
+ "srgb srgb": [255, 0, 0, 204],
+ "srgb display-p3": [234, 51, 35, 204],
+ "display-p3 srgb": [255, 0, 0, 204],
+ "display-p3 display-p3": [234, 51, 35, 204],
+ },
+ "sRGB-BBBC00000000FFFF.png": {
+ "srgb srgb": [187, 0, 0, 255],
+ "srgb display-p3": [171, 35, 23, 255],
+ "display-p3 srgb": [187, 1, 0, 255],
+ "display-p3 display-p3": [171, 35, 23, 255],
+ },
+ "sRGB-BBBC00000000CCCC.png": {
+ "srgb srgb": [187, 0, 0, 204],
+ "srgb display-p3": [171, 35, 23, 204],
+ "display-p3 srgb": [187, 1, 0, 204],
+ "display-p3 display-p3": [171, 35, 23, 204],
+ },
+
+ "Display-P3-FFFF00000000FFFF.png": {
+ "srgb srgb": [255, 0, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 0, 0, 255],
+ "display-p3 display-p3": [255, 0, 0, 255],
+ },
+ "Display-P3-FFFF00000000CCCC.png": {
+ "srgb srgb": [255, 0, 0, 204],
+ "srgb display-p3": [234, 51, 35, 204],
+ "display-p3 srgb": [255, 0, 0, 204],
+ "display-p3 display-p3": [255, 0, 0, 204],
+ },
+ "Display-P3-BBBC00000000FFFF.png": {
+ "srgb srgb": [205, 0, 0, 255],
+ "srgb display-p3": [188, 39, 26, 255],
+ "display-p3 srgb": [205, 0, 0, 255],
+ "display-p3 display-p3": [187, 0, 0, 255],
+ },
+ "Display-P3-BBBC00000000CCCC.png": {
+ "srgb srgb": [205, 0, 0, 204],
+ "srgb display-p3": [188, 39, 26, 204],
+ "display-p3 srgb": [205, 0, 0, 204],
+ "display-p3 display-p3": [187, 0, 0, 204],
+ },
+
+ "Adobe-RGB-FFFF00000000FFFF.png": {
+ "srgb srgb": [255, 0, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 19, 11, 255],
+ "display-p3 display-p3": [255, 61, 43, 255],
+ },
+ "Adobe-RGB-FFFF00000000CCCC.png": {
+ "srgb srgb": [255, 0, 0, 204],
+ "srgb display-p3": [234, 51, 35, 204],
+ "display-p3 srgb": [255, 19, 11, 204],
+ "display-p3 display-p3": [255, 61, 43, 204],
+ },
+ "Adobe-RGB-BBBC00000000FFFF.png": {
+ "srgb srgb": [219, 0, 0, 255],
+ "srgb display-p3": [201, 42, 29, 255],
+ "display-p3 srgb": [219, 0, 1, 255],
+ "display-p3 display-p3": [201, 42, 29, 255],
+ },
+ "Adobe-RGB-BBBC00000000CCCC.png": {
+ "srgb srgb": [219, 0, 0, 204],
+ "srgb display-p3": [201, 42, 29, 204],
+ "display-p3 srgb": [219, 0, 1, 204],
+ "display-p3 display-p3": [201, 42, 29, 204],
+ },
+};
+
+const svgImageTests = {
+ // SVG source images
+
+ "sRGB-FF0000.svg": {
+ "srgb srgb": [255, 0, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 0, 0, 255],
+ "display-p3 display-p3": [234, 51, 35, 255],
+ },
+ "sRGB-BB0000.svg": {
+ "srgb srgb": [187, 0, 0, 255],
+ "srgb display-p3": [171, 35, 23, 255],
+ "display-p3 srgb": [187, 1, 0, 255],
+ "display-p3 display-p3": [171, 35, 23, 255],
+ },
+
+ "Display-P3-1-0-0.svg": {
+ "srgb srgb": [255, 0, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 0, 0, 255],
+ "display-p3 display-p3": [255, 0, 0, 255],
+ },
+ "Display-P3-0.7333-0-0.svg": {
+ "srgb srgb": [205, 0, 0, 255],
+ "srgb display-p3": [188, 39, 26, 255],
+ "display-p3 srgb": [205, 0, 0, 255],
+ "display-p3 display-p3": [187, 0, 0, 255],
+ },
+};
+
+// Each video:
+// * is 300x200 and has a single color
+// * has a filename base that indicates its contents:
+//
+// <color-space>-<8-or-10-bit-color-value>
+//
+// * was generated using commands like:
+//
+// W=300 H=200 Y=3F Cb=66 Cr=F0 ; \
+// perl -e "print pack('c', 0x$Y) x ($W * $H), pack('c', 0x$Cb) x ($W * $H / 4), pack('c', 0x$Cr) x ($W * $H / 4)" | \
+// ffmpeg -f rawvideo -pix_fmt yuv420p -s:v ${W}x$H -r 25 -i - -pix_fmt yuv420p -colorspace bt709 -color_primaries bt709 -color_trc iec61966_2_1 sRGB-FF0100.webm
+//
+// W=300 H=200 Y=0BB Cb=1BD Cr=2EF ; \
+// perl -e "print pack('s', 0x$Y) x ($W * $H), pack('s', 0x$Cb) x ($W * $H / 4), pack('s', 0x$Cr) x ($W * $H / 4)" | \
+// ffmpeg -f rawvideo -pix_fmt yuv420p10le -s:v ${W}x$H -r 25 -i - -c:v libx265 -vtag hvc1 -pix_fmt yuv420p10le -colorspace bt2020nc -color_primaries bt2020 -color_trc bt2020-10 Rec2020-222000000.mp4
+//
+// W=300 H=200 Y=0BB Cb=1BD Cr=2EF ; \
+// perl -e "print pack('s', 0x$Y) x ($W * $H), pack('s', 0x$Cb) x ($W * $H / 4), pack('s', 0x$Cr) x ($W * $H / 4)" | \
+// ffmpeg -f rawvideo -pix_fmt yuv420p10le -s:v ${W}x$H -r 25 -i - -vcodec libvpx-vp9 -profile:v 2 -pix_fmt yuv420p10le -colorspace bt2020nc -color_primaries bt2020 -color_trc bt2020-10 Rec2020-222000000.webm
+//
+// where the Y'CbCr values were computed using https://jdashg.github.io/misc/colors/from-coeffs.html.
+const videoTests = {
+ // Rec.709 Y'CbCr (0x3F, 0x66, 0xF0) = sRGB (0xFF, 0x01, 0x00)
+ "sRGB-FF0100": {
+ "srgb srgb": [255, 1, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 0, 0, 255],
+ "display-p3 display-p3": [234, 51, 35, 255],
+ },
+ // Rec.709 Y'CbCr (0x32, 0x6D, 0xD2) = sRGB (0xBB, 0x00, 0x00)
+ "sRGB-BB0000": {
+ "srgb srgb": [187, 0, 0, 255],
+ "srgb display-p3": [171, 35, 23, 255],
+ "display-p3 srgb": [187, 1, 0, 255],
+ "display-p3 display-p3": [171, 35, 23, 255],
+ },
+
+ // 10 bit Rec.2020 Y'CbCr (0x126, 0x183, 0x3C0) = Rec.2020 (0x3FF, 0x000, 0x000)
+ "Rec2020-3FF000000": {
+ "srgb srgb": [255, 0, 0, 255],
+ "srgb display-p3": [234, 51, 35, 255],
+ "display-p3 srgb": [255, 0, 0, 255],
+ "display-p3 display-p3": [255, 0, 9, 255],
+ },
+ // 10 bit Rec.2020 Y'CbCr (0x0BB, 0x1BD, 0x2EF) = Rec.2020 (0x222, 0x000, 0x000)
+ "Rec2020-222000000": {
+ "srgb srgb": [186, 0, 0, 255],
+ "srgb display-p3": [170, 34, 23, 255],
+ "display-p3 srgb": [186, 0, 0, 255],
+ "display-p3 display-p3": [169, 0, 3, 255],
+ },
+};
+
+const fromSRGBToDisplayP3 = {
+ "255,0,0,255": [234, 51, 35, 255],
+ "255,0,0,204": [234, 51, 35, 204],
+ "187,0,0,255": [171, 35, 23, 255],
+ "187,0,0,204": [171, 35, 23, 204],
+};
+
+const fromDisplayP3ToSRGB = {
+ "255,0,0,255": [255, 0, 0, 255],
+ "255,0,0,204": [255, 0, 0, 204],
+ "187,0,0,255": [205, 0, 0, 255],
+ "187,0,0,204": [205, 0, 0, 204],
+};
+
+function pixelsApproximatelyEqual(p1, p2) {
+ for (let i = 0; i < 4; ++i) {
+ if (Math.abs(p1[i] - p2[i]) > 3)
+ return false;
+ }
+ return true;
+}