Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/wide-gamut-canvas/ImageData-fidelity.html - WPT Dashboard Interop Dashboard
<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>