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