ImageData-fidelity.html (5221B)
1 <script src="/resources/testharness.js"></script> 2 <script src="/resources/testharnessreport.js"></script> 3 <script> 4 async_test(function(t) { 5 var image = new Image(); 6 // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255. 7 // The image has no embedded color profile. 8 image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAx" + 9 "WXB3AAAAG0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAAElFTkSuQmCC"; 10 11 image.onload = function() { 12 var canvas = document.createElement('canvas'); 13 canvas.width = 256; 14 canvas.height = 1; 15 var ctx = canvas.getContext('2d'); 16 ctx.drawImage(image, 0, 0); 17 var img = ctx.getImageData(0, 0, 256, 1); 18 t.step(function() { 19 for (var i = 0; i < 256; i++) { 20 assert_equals(img.data[4 * i], i, "red component"); 21 assert_equals(img.data[4 * i + 1], i, "green component"); 22 assert_equals(img.data[4 * i + 2], i, "blue component"); 23 assert_equals(img.data[4 * i + 3], 255, "alpha component"); 24 } 25 }); 26 t.done(); 27 } 28 }, "Verify that drawImage->getImageData round trip preserves color values " + 29 "when image metadata has no color space and canvas uses the default " + 30 "color space."); 31 32 async_test(function(t) { 33 var image = new Image(); 34 // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255. 35 // The image has an embedded sRGB color profile. 36 image.src = 37 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAA" + 38 "G0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAo3pUWHRSYXcgcHJvZm" + 39 "lsZSB0eXBlIEFQUDEAAHicZU5bCsMwDPv3KXoEv/I6TrampTC20ft/LE7WETJBkK1YQrCX" + 40 "ZzmP+/I+X9vxKLAYyCGoC9En77FCV10ROWNHrM8hUW7cQZ00V/026tDZMRKbUQYDt4lJJr" + 41 "2FxeCTJc5BV4svNE4Nxl1Tn8N1LCgMIoKJ2sHvo25sHfK/odYT02luCWMP+AA5M0KbNr61" + 42 "PwAAAABJRU5ErkJggg=="; 43 44 image.onload = function() { 45 var canvas = document.createElement('canvas'); 46 canvas.width = 256; 47 canvas.height = 1; 48 var ctx = canvas.getContext('2d', {colorSpace: 'srgb'}); 49 ctx.drawImage(image, 0, 0); 50 var img = ctx.getImageData(0, 0, 256, 1); 51 t.step(function() { 52 for (var i = 0; i < 256; i++) { 53 assert_equals(img.data[4 * i], i, "red component"); 54 assert_equals(img.data[4 * i + 1], i, "green component"); 55 assert_equals(img.data[4 * i + 2], i, "blue component"); 56 assert_equals(img.data[4 * i + 3], 255, "alpha component"); 57 } 58 }); 59 t.done(); 60 } 61 }, "Verify that drawImage->getImageData round trip preserves color values " + 62 "when image metadata has srgb color space and canvas uses the srgb " + 63 "color space."); 64 65 async_test(function(t) { 66 var image = new Image(); 67 // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255. 68 // The image has no embedded color profile. 69 image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAx" + 70 "WXB3AAAAG0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAAElFTkSuQmCC"; 71 72 image.onload = function() { 73 var canvas = document.createElement('canvas'); 74 canvas.width = 256; 75 canvas.height = 1; 76 var ctx = canvas.getContext('2d', {colorSpace: 'srgb'}); 77 ctx.drawImage(image, 0, 0); 78 var img = ctx.getImageData(0, 0, 256, 1); 79 t.step(function() { 80 for (var i = 0; i < 256; i++) { 81 assert_equals(img.data[4 * i], i, "red component"); 82 assert_equals(img.data[4 * i + 1], i, "green component"); 83 assert_equals(img.data[4 * i + 2], i, "blue component"); 84 assert_equals(img.data[4 * i + 3], 255, "alpha component"); 85 } 86 }); 87 t.done(); 88 } 89 }, "Verify that drawImage->getImageData round trip preserves color values " + 90 "when image metadata has no color space and canvas uses the srgb " + 91 "color space."); 92 93 94 async_test(function(t) { 95 var image = new Image(); 96 // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255. 97 // The image has an embedded sRGB color profile. 98 image.src = 99 "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAA" + 100 "G0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAo3pUWHRSYXcgcHJvZm" + 101 "lsZSB0eXBlIEFQUDEAAHicZU5bCsMwDPv3KXoEv/I6TrampTC20ft/LE7WETJBkK1YQrCX" + 102 "ZzmP+/I+X9vxKLAYyCGoC9En77FCV10ROWNHrM8hUW7cQZ00V/026tDZMRKbUQYDt4lJJr" + 103 "2FxeCTJc5BV4svNE4Nxl1Tn8N1LCgMIoKJ2sHvo25sHfK/odYT02luCWMP+AA5M0KbNr61" + 104 "PwAAAABJRU5ErkJggg=="; 105 106 image.onload = function() { 107 var canvas = document.createElement('canvas'); 108 canvas.width = 256; 109 canvas.height = 1; 110 var ctx = canvas.getContext('2d'); 111 ctx.drawImage(image, 0, 0); 112 var img = ctx.getImageData(0, 0, 256, 1); 113 t.step(function() { 114 for (var i = 0; i < 256; i++) { 115 assert_equals(img.data[4 * i], i, "red component"); 116 assert_equals(img.data[4 * i + 1], i, "green component"); 117 assert_equals(img.data[4 * i + 2], i, "blue component"); 118 assert_equals(img.data[4 * i + 3], 255, "alpha component"); 119 } 120 }); 121 t.done(); 122 } 123 }, "Verify that drawImage->getImageData round trip preserves color values " + 124 "when image metadata has srgb color space and canvas uses the default " + 125 "color space."); 126 </script>