summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas')
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/ImageData-fidelity.html126
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-Blob.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html47
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageData.html46
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-canvas.html53
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html70
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-image.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-video.html57
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-video.html52
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage.https.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-canvas.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-image.html37
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-settings.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js283
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imagedata-no-color-settings-crash.html26
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000CC.pngbin0 -> 575 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000FF.pngbin0 -> 562 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000CCCC.pngbin0 -> 560 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000FFFF.pngbin0 -> 554 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000CC.pngbin0 -> 575 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000FF.pngbin0 -> 562 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000CCCC.pngbin0 -> 575 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000FFFF.pngbin0 -> 562 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-0.7333-0-0.svg3
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-1-0-0.svg3
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000CC.pngbin0 -> 620 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000FF.pngbin0 -> 607 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000CCCC.pngbin0 -> 605 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000FFFF.pngbin0 -> 599 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000CC.pngbin0 -> 620 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000FF.pngbin0 -> 607 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000CCCC.pngbin0 -> 620 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000FFFF.pngbin0 -> 607 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-BE000000.jpgbin0 -> 55590 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-FF000000.jpgbin0 -> 55590 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.mp4bin0 -> 3275 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.webmbin0 -> 604 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.mp4bin0 -> 3275 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.webmbin0 -> 605 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.pngbin0 -> 5912 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.pngbin0 -> 6136 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-srgb.pngbin0 -> 5319 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.avifbin0 -> 529 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.bmpbin0 -> 1738 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.icobin0 -> 1742 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.pngbin0 -> 5319 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.webpbin0 -> 252 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.avifbin0 -> 330 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.bmpbin0 -> 1738 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.gifbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.icobin0 -> 1742 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.jpgbin0 -> 898 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.pngbin0 -> 163 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.svg6
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.webpbin0 -> 208 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.pngbin0 -> 3164 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.pngbin0 -> 3175 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.pngbin0 -> 3262 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.pngbin0 -> 3271 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.pngbin0 -> 3338 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.pngbin0 -> 3347 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.pngbin0 -> 3144 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.pngbin0 -> 3153 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.pngbin0 -> 3165 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.pngbin0 -> 3174 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.pngbin0 -> 3265 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.pngbin0 -> 3272 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.pngbin0 -> 3339 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.pngbin0 -> 3348 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.pngbin0 -> 3147 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.pngbin0 -> 3153 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.pngbin0 -> 2868 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.pngbin0 -> 2876 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.pngbin0 -> 2867 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.pngbin0 -> 2672 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.pngbin0 -> 3173 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.pngbin0 -> 3177 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.pngbin0 -> 3250 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.pngbin0 -> 3255 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.pngbin0 -> 3325 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.pngbin0 -> 3331 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.pngbin0 -> 3132 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.pngbin0 -> 3136 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.pngbin0 -> 2853 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.pngbin0 -> 2857 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.mp4bin0 -> 1600 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.svg3
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.webmbin0 -> 604 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000CC.pngbin0 -> 243 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000FF.pngbin0 -> 230 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000CCCC.pngbin0 -> 228 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000FFFF.pngbin0 -> 222 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000.svg3
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000CC.pngbin0 -> 243 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000FF.pngbin0 -> 230 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.mp4bin0 -> 1600 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.webmbin0 -> 605 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000CCCC.pngbin0 -> 243 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000FFFF.pngbin0 -> 230 bytes
99 files changed, 1015 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/ImageData-fidelity.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/ImageData-fidelity.html
new file mode 100644
index 0000000000..c2d158f893
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/ImageData-fidelity.html
@@ -0,0 +1,126 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+async_test(function(t) {
+ var image = new Image();
+ // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255.
+ // The image has no embedded color profile.
+ image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAx" +
+ "WXB3AAAAG0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAAElFTkSuQmCC";
+
+ image.onload = function() {
+ var canvas = document.createElement('canvas');
+ canvas.width = 256;
+ canvas.height = 1;
+ var ctx = canvas.getContext('2d');
+ ctx.drawImage(image, 0, 0);
+ var img = ctx.getImageData(0, 0, 256, 1);
+ t.step(function() {
+ for (var i = 0; i < 256; i++) {
+ assert_equals(img.data[4 * i], i, "red component");
+ assert_equals(img.data[4 * i + 1], i, "green component");
+ assert_equals(img.data[4 * i + 2], i, "blue component");
+ assert_equals(img.data[4 * i + 3], 255, "alpha component");
+ }
+ });
+ t.done();
+ }
+}, "Verify that drawImage->getImageData round trip preserves color values " +
+ "when image metadata has no color space and canvas uses the default " +
+ "color space.");
+
+async_test(function(t) {
+ var image = new Image();
+ // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255.
+ // The image has an embedded sRGB color profile.
+ image.src =
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAA" +
+ "G0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAo3pUWHRSYXcgcHJvZm" +
+ "lsZSB0eXBlIEFQUDEAAHicZU5bCsMwDPv3KXoEv/I6TrampTC20ft/LE7WETJBkK1YQrCX" +
+ "ZzmP+/I+X9vxKLAYyCGoC9En77FCV10ROWNHrM8hUW7cQZ00V/026tDZMRKbUQYDt4lJJr" +
+ "2FxeCTJc5BV4svNE4Nxl1Tn8N1LCgMIoKJ2sHvo25sHfK/odYT02luCWMP+AA5M0KbNr61" +
+ "PwAAAABJRU5ErkJggg==";
+
+ image.onload = function() {
+ var canvas = document.createElement('canvas');
+ canvas.width = 256;
+ canvas.height = 1;
+ var ctx = canvas.getContext('2d', {colorSpace: 'srgb'});
+ ctx.drawImage(image, 0, 0);
+ var img = ctx.getImageData(0, 0, 256, 1);
+ t.step(function() {
+ for (var i = 0; i < 256; i++) {
+ assert_equals(img.data[4 * i], i, "red component");
+ assert_equals(img.data[4 * i + 1], i, "green component");
+ assert_equals(img.data[4 * i + 2], i, "blue component");
+ assert_equals(img.data[4 * i + 3], 255, "alpha component");
+ }
+ });
+ t.done();
+ }
+}, "Verify that drawImage->getImageData round trip preserves color values " +
+ "when image metadata has srgb color space and canvas uses the srgb " +
+ "color space.");
+
+async_test(function(t) {
+ var image = new Image();
+ // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255.
+ // The image has no embedded color profile.
+ image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAx" +
+ "WXB3AAAAG0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAAElFTkSuQmCC";
+
+ image.onload = function() {
+ var canvas = document.createElement('canvas');
+ canvas.width = 256;
+ canvas.height = 1;
+ var ctx = canvas.getContext('2d', {colorSpace: 'srgb'});
+ ctx.drawImage(image, 0, 0);
+ var img = ctx.getImageData(0, 0, 256, 1);
+ t.step(function() {
+ for (var i = 0; i < 256; i++) {
+ assert_equals(img.data[4 * i], i, "red component");
+ assert_equals(img.data[4 * i + 1], i, "green component");
+ assert_equals(img.data[4 * i + 2], i, "blue component");
+ assert_equals(img.data[4 * i + 3], 255, "alpha component");
+ }
+ });
+ t.done();
+ }
+}, "Verify that drawImage->getImageData round trip preserves color values " +
+ "when image metadata has no color space and canvas uses the srgb " +
+ "color space.");
+
+
+async_test(function(t) {
+ var image = new Image();
+ // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255.
+ // The image has an embedded sRGB color profile.
+ image.src =
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAA" +
+ "G0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAo3pUWHRSYXcgcHJvZm" +
+ "lsZSB0eXBlIEFQUDEAAHicZU5bCsMwDPv3KXoEv/I6TrampTC20ft/LE7WETJBkK1YQrCX" +
+ "ZzmP+/I+X9vxKLAYyCGoC9En77FCV10ROWNHrM8hUW7cQZ00V/026tDZMRKbUQYDt4lJJr" +
+ "2FxeCTJc5BV4svNE4Nxl1Tn8N1LCgMIoKJ2sHvo25sHfK/odYT02luCWMP+AA5M0KbNr61" +
+ "PwAAAABJRU5ErkJggg==";
+
+ image.onload = function() {
+ var canvas = document.createElement('canvas');
+ canvas.width = 256;
+ canvas.height = 1;
+ var ctx = canvas.getContext('2d');
+ ctx.drawImage(image, 0, 0);
+ var img = ctx.getImageData(0, 0, 256, 1);
+ t.step(function() {
+ for (var i = 0; i < 256; i++) {
+ assert_equals(img.data[4 * i], i, "red component");
+ assert_equals(img.data[4 * i + 1], i, "green component");
+ assert_equals(img.data[4 * i + 2], i, "blue component");
+ assert_equals(img.data[4 * i + 3], 255, "alpha component");
+ }
+ });
+ t.done();
+ }
+}, "Verify that drawImage->getImageData round trip preserves color values " +
+ "when image metadata has srgb color space and canvas uses the default " +
+ "color space.");
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-Blob.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-Blob.html
new file mode 100644
index 0000000000..9b96b1a6d2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-Blob.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing ImageBitmaps with different image Blob source bit depths
+// and color profiles into sRGB and Display P3 canvases works, by reading pixels
+// with getImageData() as sRGB and Display P3 values.
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+ for (let contextColorSpace of ["srgb", "display-p3"]) {
+ for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+ for (let cropSource of [false, true]) {
+ async_test(function(t) {
+ fetch(`resources/${filename}`)
+ .then(t.step_func(response => response.blob()))
+ .then(t.step_func(blob => (cropSource ? createImageBitmap(blob, 1, 1, 1, 1) : createImageBitmap(blob))))
+ .then(t.step_func_done(function(imageBitmap) {
+ let canvas = document.createElement("canvas");
+ canvas.width = 2;
+ canvas.height = 2;
+
+ let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+ ctx.drawImage(imageBitmap, 0, 0);
+
+ let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+ let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+ assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+ }));
+ }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`);
+ }
+ }
+ }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html
new file mode 100644
index 0000000000..0bd18e9beb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing ImageBitmaps created from other ImageBitamps with different
+// image source bit depths and color profiles into sRGB and Display P3
+// canvases works, by reading pixels with getImageData() as sRGB and Display P3
+// values.
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+ for (let contextColorSpace of ["srgb", "display-p3"]) {
+ for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+ for (let cropSource of [false, true]) {
+ async_test(function(t) {
+ let image = new Image();
+ image.onload = t.step_func_done(function() {
+
+ let canvas = document.createElement("canvas");
+ canvas.width = 2;
+ canvas.height = 2;
+
+ let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+
+ createImageBitmap(image).then(t.step_func(function(sourceImageBitmap) {
+ let imageBitmapPromise;
+ if (cropSource)
+ imageBitmapPromise = createImageBitmap(sourceImageBitmap, 1, 1, 1, 1);
+ else
+ imageBitmapPromise = createImageBitmap(sourceImageBitmap);
+
+ imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
+ ctx.drawImage(imageBitmap, 0, 0);
+
+ let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+ let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+ assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+ }));
+ }));
+ });
+ image.src = `resources/${filename}`;
+ }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`);
+ }
+ }
+ }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageData.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageData.html
new file mode 100644
index 0000000000..2216b46dd8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageData.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that ImageBitmaps created from ImageData sources with different color
+// spaces can be drawn into sRGB and Display P3 canvases, by reading pixels with
+// getImageData() as sRGB and Display P3 values.
+function runTest(sourceColorSpace, destinationColorSpace, colors) {
+ for (let [sourceColorString, expectedColor] of Object.entries(colors)) {
+ for (let cropSource of [false, true]) {
+ async_test(function(t) {
+ let sourceColor = sourceColorString.split(",").map(x => +x);
+
+ let sourceImageData = new ImageData(4, 4, { colorSpace: sourceColorSpace });
+ for (let i = 0; i < 4 * 4 * 4; i += 4) {
+ for (let c = 0; c < 4; ++c)
+ sourceImageData.data[i + c] = sourceColor[c];
+ }
+
+ let imageBitmapPromise;
+ if (cropSource)
+ imageBitmapPromise = createImageBitmap(sourceImageData, 2, 2, 2, 2);
+ else
+ imageBitmapPromise = createImageBitmap(sourceImageData);
+
+ imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
+ let destination = document.createElement("canvas");
+ destination.width = 2;
+ destination.height = 2;
+
+ let destinationContext = destination.getContext("2d", { colorSpace: destinationColorSpace });
+ destinationContext.drawImage(imageBitmap, 0, 0);
+
+ let destinationImageData = destinationContext.getImageData(1, 1, 1, 1);
+
+ assert_true(pixelsApproximatelyEqual(destinationImageData.data, expectedColor), `Actual pixel value ${[...destinationImageData.data]} is approximately equal to ${expectedColor}.`);
+ }));
+ }, `Source ${sourceColorSpace}, destination ${destinationColorSpace}, color ${sourceColorString}, cropSource=${cropSource}`);
+ }
+ }
+}
+
+runTest("srgb", "display-p3", fromSRGBToDisplayP3);
+runTest("display-p3", "srgb", fromDisplayP3ToSRGB);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-canvas.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-canvas.html
new file mode 100644
index 0000000000..f3156349ed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-canvas.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that ImageBitmaps created from canvas sources with different color
+// spaces can be drawn into sRGB and Display P3 canvases, by reading pixels with
+// getImageData() as sRGB and Display P3 values.
+function runTest(sourceColorSpace, destinationColorSpace, colors) {
+ for (let [sourceColorString, expectedColor] of Object.entries(colors)) {
+ for (let cropSource of [false, true]) {
+ async_test(function(t) {
+ let source = document.createElement("canvas");
+ source.width = 4;
+ source.height = 4;
+
+ let sourceContext = source.getContext("2d", { colorSpace: sourceColorSpace });
+
+ let sourceColor = sourceColorString.split(",").map(x => +x);
+
+ let sourceImageData = new ImageData(4, 4, { colorSpace: sourceColorSpace });
+ for (let i = 0; i < 4 * 4 * 4; i += 4) {
+ for (let c = 0; c < 4; ++c)
+ sourceImageData.data[i + c] = sourceColor[c];
+ }
+ sourceContext.putImageData(sourceImageData, 0, 0);
+
+ let imageBitmapPromise;
+ if (cropSource)
+ imageBitmapPromise = createImageBitmap(source, 2, 2, 2, 2);
+ else
+ imageBitmapPromise = createImageBitmap(source);
+
+ imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
+ let destination = document.createElement("canvas");
+ destination.width = 2;
+ destination.height = 2;
+
+ let destinationContext = destination.getContext("2d", { colorSpace: destinationColorSpace });
+ destinationContext.drawImage(imageBitmap, 0, 0);
+
+ let destinationImageData = destinationContext.getImageData(1, 1, 1, 1);
+
+ assert_true(pixelsApproximatelyEqual(destinationImageData.data, expectedColor), `Actual pixel value ${[...destinationImageData.data]} is approximately equal to ${expectedColor}.`);
+ }));
+ }, `Source ${sourceColorSpace}, destination ${destinationColorSpace}, color ${sourceColorString}, cropSource=${cropSource}`);
+ }
+ }
+}
+
+runTest("srgb", "display-p3", fromSRGBToDisplayP3);
+runTest("display-p3", "srgb", fromDisplayP3ToSRGB);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html
new file mode 100644
index 0000000000..cf4f38f8db
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing structured cloned ImageBitmaps with different image source
+// bit depths and color profiles into sRGB and Display P3 canvases works, by
+// reading pixels with getImageData() as sRGB and Display P3 values.
+
+let nextTestID = 0;
+
+class Test {
+ constructor(testConfiguration) {
+ Object.assign(this, testConfiguration);
+ this.testID = nextTestID++;
+ }
+
+ run() {
+ let self = this;
+ async_test(function(t) {
+ self.t = t;
+ self.image = new Image();
+ self.image.onload = t.step_func(self.onImageLoaded.bind(self));
+ self.image.src = `resources/${self.filename}`;
+ }, `${this.filename}, Context ${this.contextColorSpace}, ImageData ${this.imageDataColorSpace}, cropSource=${this.cropSource}`);
+ }
+
+ onImageLoaded() {
+ let imageBitmapPromise;
+ if (this.cropSource)
+ imageBitmapPromise = createImageBitmap(this.image, 1, 1, 1, 1);
+ else
+ imageBitmapPromise = createImageBitmap(this.image);
+ imageBitmapPromise.then(this.t.step_func(this.onImageBitmapCreated.bind(this)));
+ }
+
+ onImageBitmapCreated(imageBitmap) {
+ window.addEventListener("message", this.t.step_func(this.onMessage.bind(this)));
+ window.postMessage({ imageBitmap, testID: this.testID });
+ }
+
+ onMessage(message) {
+ if (message.data.testID != this.testID)
+ return;
+
+ let canvas = document.createElement("canvas");
+ canvas.width = 2;
+ canvas.height = 2;
+
+ let ctx = canvas.getContext("2d", { colorSpace: this.contextColorSpace });
+ ctx.drawImage(message.data.imageBitmap, 0, 0);
+
+ let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: this.imageDataColorSpace });
+
+ let expected = this.expectedPixels[`${this.contextColorSpace} ${this.imageDataColorSpace}`];
+ assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+ this.t.done();
+ }
+}
+
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+ for (let contextColorSpace of ["srgb", "display-p3"]) {
+ for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+ for (let cropSource of [false, true])
+ new Test({ filename, expectedPixels, contextColorSpace, imageDataColorSpace, cropSource }).run();
+ }
+ }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-image.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-image.html
new file mode 100644
index 0000000000..e7e85c915d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-image.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing ImageBitmaps with different image source bit depths and
+// color profiles into sRGB and Display P3 canvases works, by reading pixels
+// with getImageData() as sRGB and Display P3 values.
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+ for (let contextColorSpace of ["srgb", "display-p3"]) {
+ for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+ for (let cropSource of [false, true]) {
+ async_test(function(t) {
+ let image = new Image();
+ image.onload = t.step_func(function() {
+
+ let canvas = document.createElement("canvas");
+ canvas.width = 2;
+ canvas.height = 2;
+
+ let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+
+ let imageBitmapPromise;
+ if (cropSource)
+ imageBitmapPromise = createImageBitmap(image, 1, 1, 1, 1);
+ else
+ imageBitmapPromise = createImageBitmap(image);
+
+ imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
+ ctx.drawImage(imageBitmap, 0, 0);
+
+ let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+ let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+ assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+ }));
+ });
+ image.src = `resources/${filename}`;
+ }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`);
+ }
+ }
+ }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-video.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-video.html
new file mode 100644
index 0000000000..3e86bb5596
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-video.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<body>
+<script>
+// Test that drawing ImageBitmaps with different video source color profiles
+// into sRGB and Display P3 canvases works, by reading pixels with
+// getImageData() as sRGB and Display P3 values.
+for (let [filenameBase, expectedPixels] of Object.entries(videoTests)) {
+ for (let contextColorSpace of ["srgb", "display-p3"]) {
+ for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+ for (let cropSource of [false, true]) {
+ promise_test(async function(t) {
+
+ let video = document.createElement("video");
+ for (let format of ["mp4", "webm"]) {
+ let source = document.createElement("source");
+ source.src = `resources/${filenameBase}.${format}`;
+ source.type = `video/${format}`;
+ video.append(source);
+ }
+
+ let loadedData = new Promise(resolver => video.onloadeddata = resolver);
+
+ document.body.append(video);
+ await video.play();
+ await loadedData;
+ await new Promise(requestAnimationFrame);
+
+ let imageBitmap;
+ if (cropSource)
+ imageBitmap = await createImageBitmap(video, 1, 1, 1, 1);
+ else
+ imageBitmap = await createImageBitmap(video);
+
+ video.remove();
+
+ let canvas = document.createElement("canvas");
+ canvas.width = 2;
+ canvas.height = 2;
+
+ let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+
+ ctx.drawImage(imageBitmap, 0, 0);
+
+ let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+ let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+ assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+ }, `${filenameBase}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`);
+ }
+ }
+ }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-video.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-video.html
new file mode 100644
index 0000000000..1b04cde779
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-video.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<body>
+<script>
+// Test that drawing videos with different color spaces into sRGB and Display P3
+// canvases works, by reading pixels with getImageData() as sRGB and Display P3
+// values.
+for (let [filenameBase, expectedPixels] of Object.entries(videoTests)) {
+ for (let contextColorSpace of ["srgb", "display-p3"]) {
+ for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+ for (let scaleImage of [false, true]) {
+ promise_test(async function(t) {
+
+ let video = document.createElement("video");
+ for (let format of ["mp4", "webm"]) {
+ let source = document.createElement("source");
+ source.src = `resources/${filenameBase}.${format}`;
+ source.type = `video/${format}`;
+ video.append(source);
+ }
+
+ let loadedData = new Promise(resolver => video.onloadeddata = resolver);
+
+ document.body.append(video);
+ await video.play();
+ await loadedData;
+ await new Promise(requestAnimationFrame);
+
+ let canvas = document.createElement("canvas");
+ canvas.width = 2;
+ canvas.height = 2;
+
+ let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+ if (scaleImage)
+ ctx.drawImage(video, 0, 0, 10, 10);
+ else
+ ctx.drawImage(video, 0, 0);
+ video.remove();
+
+ let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+ let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+ assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+ }, `${filenameBase}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, scaleImage=${scaleImage}`);
+ }
+ }
+ }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage.https.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage.https.html
new file mode 100644
index 0000000000..35ee91343d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage.https.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing images with different bit depths and color profiles into
+// sRGB and Display P3 canvases works, by reading pixels with getImageData()
+// as sRGB and Display P3 values.
+for (let [filename, expectedPixels] of Object.entries({...imageTests, ...svgImageTests})) {
+ for (let contextColorSpace of ["srgb", "display-p3"]) {
+ for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+ for (let scaleImage of [false, true]) {
+ async_test(function(t) {
+ let image = new Image();
+ image.onload = t.step_func_done(function() {
+
+ let canvas = document.createElement("canvas");
+ canvas.width = 2;
+ canvas.height = 2;
+
+ let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+ if (scaleImage)
+ ctx.drawImage(image, 0, 0, 10, 10);
+ else
+ ctx.drawImage(image, 0, 0);
+
+ let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+ let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+ assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+ t.done();
+
+ });
+ image.src = `resources/${filename}`;
+ }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, scaleImage=${scaleImage}`);
+ }
+ }
+ }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-canvas.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-canvas.html
new file mode 100644
index 0000000000..2b9fb9b8f4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-canvas.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that patterns created from canvas sources with different color spaces
+// can be drawn into sRGB and Display P3 canvases, by reading pixels with
+// getImageData() as sRGB and Display P3 values.
+function runTest(sourceColorSpace, destinationColorSpace, colors) {
+ for (let [sourceColorString, expectedColor] of Object.entries(colors)) {
+ test(function() {
+ let source = document.createElement("canvas");
+ source.width = 2;
+ source.height = 2;
+
+ let sourceContext = source.getContext("2d", { colorSpace: sourceColorSpace });
+
+ let sourceColor = sourceColorString.split(",").map(x => +x);
+
+ let sourceImageData = new ImageData(2, 2, { colorSpace: sourceColorSpace });
+ for (let i = 0; i < 2 * 2 * 4; i += 4) {
+ for (let c = 0; c < 4; ++c)
+ sourceImageData.data[i + c] = sourceColor[c];
+ }
+ sourceContext.putImageData(sourceImageData, 0, 0);
+
+ let destination = document.createElement("canvas");
+ destination.width = 4;
+ destination.height = 4;
+
+ let destinationContext = destination.getContext("2d", { colorSpace: destinationColorSpace });
+ destinationContext.fillStyle = destinationContext.createPattern(source, "repeat");
+ destinationContext.fillRect(0, 0, 4, 4);
+
+ let destinationImageData = destinationContext.getImageData(2, 2, 1, 1);
+
+ assert_true(pixelsApproximatelyEqual(destinationImageData.data, expectedColor), `Actual pixel value ${[...destinationImageData.data]} is approximately equal to ${expectedColor}.`);
+ }, `Source ${sourceColorSpace}, destination ${destinationColorSpace}, color ${sourceColorString}`);
+ }
+}
+
+runTest("srgb", "display-p3", fromSRGBToDisplayP3);
+runTest("display-p3", "srgb", fromDisplayP3ToSRGB);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-image.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-image.html
new file mode 100644
index 0000000000..75a8392c02
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-image.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that patterns created from images with different bit depths and color
+// profiles into can be drawn into sRGB and Display P3 canvases, by reading
+// pixels with getImageData() as sRGB and Display P3 values.
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+ for (let contextColorSpace of ["srgb", "display-p3"]) {
+ for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+ async_test(function(t) {
+ let image = new Image();
+ image.onload = t.step_func_done(function() {
+
+ let canvas = document.createElement("canvas");
+ canvas.width = 4;
+ canvas.height = 4;
+
+ let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+ ctx.fillStyle = ctx.createPattern(image, "repeat");
+ ctx.fillRect(0, 0, 4, 4);
+
+ let imageData = ctx.getImageData(2, 2, 1, 1, { colorSpace: imageDataColorSpace });
+
+ let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+ assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+ t.done();
+
+ });
+ image.src = `resources/${filename}`;
+ }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}`);
+ }
+ }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-settings.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-settings.html
new file mode 100644
index 0000000000..2b1447437d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-settings.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+// Test that creating canvas contexts and ImageData objects respect the
+// requested color space.
+
+for (let contextColorSpace of [undefined, "srgb", "display-p3"]) {
+ for (let imageDataColorSpace of [undefined, "srgb", "display-p3"]) {
+ test(function() {
+ let contextSettings = { };
+ if (contextColorSpace)
+ contextSettings.colorSpace = contextColorSpace;
+ let resolvedContextColorSpace = contextColorSpace || "srgb";
+
+ let canvas = document.createElement("canvas");
+ let ctx = canvas.getContext("2d", contextSettings);
+ assert_equals(ctx.getContextAttributes().colorSpace, resolvedContextColorSpace, `CanvasRenderingContext2DSettings.colorSpace when set to ${contextColorSpace}`);
+
+ let imageDataSettings = { };
+ if (imageDataColorSpace)
+ imageDataSettings.colorSpace = imageDataColorSpace;
+ let resolvedImageDataColorSpace = imageDataColorSpace || resolvedContextColorSpace;
+
+ let imageData = ctx.getImageData(0, 0, 1, 1, imageDataSettings);
+ assert_equals(imageData.colorSpace, resolvedImageDataColorSpace, `getImageData() colorSpace when set to ${imageDataColorSpace}`);
+
+ imageData = ctx.createImageData(1, 1, imageDataSettings);
+ assert_equals(imageData.colorSpace, resolvedImageDataColorSpace, `createImageData() colorSpace when set to ${imageDataColorSpace}`);
+
+ imageData = ctx.createImageData(imageData);
+ assert_equals(imageData.colorSpace, resolvedImageDataColorSpace, `Cloned ImageData colorSpace when set to ${imageDataColorSpace}`);
+ }, `Context ${contextColorSpace}, ImageData ${imageDataColorSpace}`);
+ }
+}
+</script>
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;
+}
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imagedata-no-color-settings-crash.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imagedata-no-color-settings-crash.html
new file mode 100644
index 0000000000..b21eaf72ab
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imagedata-no-color-settings-crash.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test(function() {
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext('2d',
+ {})
+ var dataFloat32 = new Float32Array(4);
+ var imageData = ctx.createImageData(dataFloat32, 1, 1,
+ {});
+ ctx.putImageData(imageData, 5, 5);
+ var data = ctx.getImageData(5,5,1,1).data;
+}, "Putting a float-32 ImageData with no color settings on a context 2D should not crash.");
+
+test(function() {
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext('2d',
+ {})
+ var dataUint16 = new Uint16Array(4);
+ var imageData = ctx.createImageData(dataUint16, 1, 1,
+ {});
+ ctx.putImageData(imageData, 5, 5);
+ var data = ctx.getImageData(5,5,1,1).data;
+}, "Putting a uint-16 ImageData with no color settings on a context 2D should not crash.");
+</script> \ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000CC.png
new file mode 100644
index 0000000000..9b3db7e22e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000CC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000FF.png
new file mode 100644
index 0000000000..78237d5a9d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000FF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000CCCC.png
new file mode 100644
index 0000000000..3fbe7cadc0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000CCCC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000FFFF.png
new file mode 100644
index 0000000000..ab9b1bf5b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000FFFF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000CC.png
new file mode 100644
index 0000000000..a83344933d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000CC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000FF.png
new file mode 100644
index 0000000000..3222c5e26f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000FF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000CCCC.png
new file mode 100644
index 0000000000..60f1239943
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000CCCC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000FFFF.png
new file mode 100644
index 0000000000..c558eb10b3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000FFFF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-0.7333-0-0.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-0.7333-0-0.svg
new file mode 100644
index 0000000000..2737814877
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-0.7333-0-0.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2">
+ <rect width="2" height="2" style="fill: color(display-p3 0.7333 0 0);"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-1-0-0.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-1-0-0.svg
new file mode 100644
index 0000000000..5c1b07362a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-1-0-0.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2">
+ <rect width="2" height="2" style="fill: color(display-p3 1 0 0);"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000CC.png
new file mode 100644
index 0000000000..2036aeae25
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000CC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000FF.png
new file mode 100644
index 0000000000..35347a3055
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000FF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000CCCC.png
new file mode 100644
index 0000000000..87f11b5d97
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000CCCC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000FFFF.png
new file mode 100644
index 0000000000..ea2f84caa1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000FFFF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000CC.png
new file mode 100644
index 0000000000..8a0abc74dd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000CC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000FF.png
new file mode 100644
index 0000000000..7b6d4a6150
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000FF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000CCCC.png
new file mode 100644
index 0000000000..8a0abc74dd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000CCCC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000FFFF.png
new file mode 100644
index 0000000000..7b6d4a6150
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000FFFF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-BE000000.jpg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-BE000000.jpg
new file mode 100644
index 0000000000..21eecaa25e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-BE000000.jpg
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-FF000000.jpg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-FF000000.jpg
new file mode 100644
index 0000000000..32f3b691e2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-FF000000.jpg
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.mp4 b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.mp4
new file mode 100644
index 0000000000..71ad32c5f0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.mp4
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.webm b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.webm
new file mode 100644
index 0000000000..5e4eae49dc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.webm
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.mp4 b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.mp4
new file mode 100644
index 0000000000..0e2880a93a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.mp4
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.webm b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.webm
new file mode 100644
index 0000000000..4f28de8cea
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.webm
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png
new file mode 100644
index 0000000000..5eb3f6a15f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png
new file mode 100644
index 0000000000..b64db07379
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png
new file mode 100644
index 0000000000..bfbba8b8e2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.avif b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.avif
new file mode 100644
index 0000000000..c3890c5cf6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.avif
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp
new file mode 100644
index 0000000000..9c9561c704
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.ico b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.ico
new file mode 100644
index 0000000000..87e8ff45de
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.ico
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.png
new file mode 100644
index 0000000000..bfbba8b8e2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.webp b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.webp
new file mode 100644
index 0000000000..925646067a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.webp
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.avif b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.avif
new file mode 100644
index 0000000000..c13b320ea8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.avif
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.bmp b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.bmp
new file mode 100644
index 0000000000..465d203d98
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.bmp
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.gif b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.gif
new file mode 100644
index 0000000000..25bcefb2bf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.gif
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.ico b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.ico
new file mode 100644
index 0000000000..e5375826ab
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.ico
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.jpg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.jpg
new file mode 100644
index 0000000000..c4579e8f06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.jpg
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.png
new file mode 100644
index 0000000000..1b5876b5f3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.svg
new file mode 100644
index 0000000000..0517130849
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="0" y="0" width="10px" height="10px" fill="#9b1b1b"/>
+ <rect x="10" y="0" width="10px" height="10px" fill="#1b9b1b"/>
+ <rect x="0" y="10" width="10px" height="10px" fill="#1b1b9b"/>
+ <rect x="10" y="10" width="10px" height="10px" fill="#1b1b1b"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.webp b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.webp
new file mode 100644
index 0000000000..b7c0a421dc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.webp
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png
new file mode 100644
index 0000000000..c4496db19b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png
new file mode 100644
index 0000000000..3b4cfda52c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png
new file mode 100644
index 0000000000..e7a142cd2e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png
new file mode 100644
index 0000000000..0b035317c8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png
new file mode 100644
index 0000000000..a1dc7ddb0d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png
new file mode 100644
index 0000000000..be2eb1208e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png
new file mode 100644
index 0000000000..e2a2d14451
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png
new file mode 100644
index 0000000000..960d7d8e75
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png
new file mode 100644
index 0000000000..80cf9785eb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png
new file mode 100644
index 0000000000..3ec565f8c2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png
new file mode 100644
index 0000000000..5f3134b79c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png
new file mode 100644
index 0000000000..500a70eff8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png
new file mode 100644
index 0000000000..b5d0e07a7a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png
new file mode 100644
index 0000000000..e4ec3e4454
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png
new file mode 100644
index 0000000000..c487d5846f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png
new file mode 100644
index 0000000000..78fe202c0e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png
new file mode 100644
index 0000000000..babf232a36
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png
new file mode 100644
index 0000000000..3016404009
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png
new file mode 100644
index 0000000000..8a665345e9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png
new file mode 100644
index 0000000000..e51cda77c4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png
new file mode 100644
index 0000000000..8b787b5c87
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png
new file mode 100644
index 0000000000..727028e765
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png
new file mode 100644
index 0000000000..fe8bdd4963
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png
new file mode 100644
index 0000000000..b836afebed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png
new file mode 100644
index 0000000000..5ecd868606
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png
new file mode 100644
index 0000000000..85a349dc1d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png
new file mode 100644
index 0000000000..599cd34040
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png
new file mode 100644
index 0000000000..ecf65c3d46
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png
new file mode 100644
index 0000000000..9cab6d12e6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png
new file mode 100644
index 0000000000..5fa01e62c2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.mp4 b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.mp4
new file mode 100644
index 0000000000..59572f5138
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.mp4
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.svg
new file mode 100644
index 0000000000..2b785f8cf4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2">
+ <rect width="2" height="2" style="fill: #BB0000;"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.webm b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.webm
new file mode 100644
index 0000000000..23a6364bdb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.webm
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000CC.png
new file mode 100644
index 0000000000..fe463486ef
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000CC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000FF.png
new file mode 100644
index 0000000000..be7009f613
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000FF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000CCCC.png
new file mode 100644
index 0000000000..5220ccb7a9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000CCCC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000FFFF.png
new file mode 100644
index 0000000000..416ef12986
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000FFFF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000.svg
new file mode 100644
index 0000000000..8798fdfc3a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2">
+ <rect width="2" height="2" style="fill: #FF0000;"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000CC.png
new file mode 100644
index 0000000000..e86f64b71b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000CC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000FF.png
new file mode 100644
index 0000000000..22f33b14da
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000FF.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.mp4 b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.mp4
new file mode 100644
index 0000000000..37a29f9f83
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.mp4
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.webm b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.webm
new file mode 100644
index 0000000000..31b69af924
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.webm
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000CCCC.png
new file mode 100644
index 0000000000..e86f64b71b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000CCCC.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000FFFF.png
new file mode 100644
index 0000000000..22f33b14da
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000FFFF.png
Binary files differ