servo/tests/wpt/web-platform-tests/2dcontext/wide-gamut-canvas/ImageData-fidelity.html

<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>