1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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>
|
