1 files changed, 126 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>