1- name: 2d.color.space.p3.to.p3 2 testing: 3 - 2d.color.space.p3.and.uint8 4 desc: test getImageData with display-p3 and uint8 from display p3 uint8 canvas 5 attributes: | 6 {colorSpace: "display-p3"} 7 code: | 8 var color_style = 'rgb(50, 100, 150)'; 9 var epsilon = 2; 10 // [0.24304, 0.38818, 0.57227, 1.0] * 255 = [62, 99, 146, 255] 11 var pixel_expected = [62, 99, 146, 255]; 12 ctx.fillStyle = color_style; 13 ctx.fillRect(0, 0, 10, 10); 14 15 var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data; 16 @assert pixel.length === pixel_expected.length; 17 assert_approx_equals(pixel[0], pixel_expected[0], 2); 18 assert_approx_equals(pixel[1], pixel_expected[1], 2); 19 assert_approx_equals(pixel[2], pixel_expected[2], 2); 20 assert_approx_equals(pixel[3], pixel_expected[3], 2); 21 22- name: 2d.color.space.p3.to.srgb 23 testing: 24 - 2d.color.space.p3.and.uint8 25 desc: test getImageData with srsb and uint8 from display p3 uint8 canvas 26 attributes: | 27 {colorSpace: "display-p3"} 28 code: | 29 var color_style = 'rgb(50, 100, 150)'; 30 var epsilon = 2; 31 var pixel_expected = [50, 100, 150, 255]; 32 ctx.fillStyle = color_style; 33 ctx.fillRect(0, 0, 10, 10); 34 35 var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data; 36 @assert pixel.length === pixel_expected.length; 37 assert_approx_equals(pixel[0], pixel_expected[0], 2); 38 assert_approx_equals(pixel[1], pixel_expected[1], 2); 39 assert_approx_equals(pixel[2], pixel_expected[2], 2); 40 assert_approx_equals(pixel[3], pixel_expected[3], 2); 41 42- name: 2d.color.space.p3.toBlob.p3.canvas 43 testing: 44 - 2d.color.space.p3.and.uint8 45 desc: test if toblob returns p3 data from p3 color space canvas 46 attributes: | 47 {colorSpace: "display-p3"} 48 code: | 49 ctx.fillStyle = "rgba(155, 27, 27, 1)"; 50 ctx.fillRect(0, 0, 1, 1); 51 ctx.fillStyle = "rgba(27, 155, 27, 0)"; 52 ctx.fillRect(1, 0, 1, 1); 53 ctx.fillStyle = "rgba(27, 27, 155, 0.5)"; 54 ctx.fillRect(0, 1, 1, 1); 55 ctx.fillStyle = "rgba(27, 27, 27, 0.5)"; 56 ctx.fillRect(1, 1, 1, 1); 57 expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data; 58 59 var image = new Image(); 60 image.onload = t.step_func_done(function() { 61 var dstCanvas = document.createElement("canvas"); 62 dstCanvas.width = 2; 63 dstCanvas.height = 2; 64 var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"}); 65 ctx.drawImage(image, 0, 0); 66 var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data; 67 assert_array_approx_equals(actualPixels, expectedPixels, 2); 68 }); 69 70 canvas.toBlob(function(blob) { 71 var urlCreator = window.URL || window.webkitURL; 72 image.src = urlCreator.createObjectURL(blob); 73 }, 'image/png', 1); 74 75- name: 2d.color.space.p3.toDataURL.p3.canvas 76 testing: 77 - 2d.color.space.p3.and.uint8 78 desc: test if toblob returns p3 data from canvas with p3 color space 79 attributes: | 80 {colorSpace: "display-p3"} 81 code: | 82 ctx.fillStyle = "rgba(155, 27, 27, 1)"; 83 ctx.fillRect(0, 0, 1, 1); 84 ctx.fillStyle = "rgba(27, 155, 27, 0)"; 85 ctx.fillRect(1, 0, 1, 1); 86 ctx.fillStyle = "rgba(27, 27, 155, 0.5)"; 87 ctx.fillRect(0, 1, 1, 1); 88 ctx.fillStyle = "rgba(27, 27, 27, 0.5)"; 89 ctx.fillRect(1, 1, 1, 1); 90 expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data; 91 92 var image = new Image(); 93 image.onload = t.step_func_done(function() { 94 var dstCanvas = document.createElement("canvas"); 95 dstCanvas.width = 2; 96 dstCanvas.height = 2; 97 var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"}); 98 ctx.drawImage(image, 0, 0); 99 var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data; 100 assert_array_approx_equals(actualPixels, expectedPixels, 2); 101 }); 102 image.src = canvas.toDataURL(); 103 104- name: 2d.color.space.p3.toBlob.with.putImageData 105 testing: 106 - 2d.color.space.p3.and.uint8 107 desc: Use putImageData to put some p3 data in canvas and test if toBlob returns the same data 108 attributes: | 109 {colorSpace: "display-p3"} 110 code: | 111 canvas.width = 2; 112 canvas.height = 2; 113 114 // Create an ImageData using createImageData and populate its data array. 115 var image_data = ctx.createImageData(canvas.width, canvas.height, {colorSpace: "display-p3"}); 116 var color_data = [[255, 100, 150, 1.0], [255, 100, 150, 0.5], 117 [255, 100, 150, 0.5], [255, 100, 150, 0]]; 118 var data = image_data.data; 119 for (var i = 0; i < data.length / 4; ++i) { 120 data[4*i + 0] = color_data[i][0]; 121 data[4*i + 1] = color_data[i][1]; 122 data[4*i + 2] = color_data[i][2]; 123 data[4*i + 3] = color_data[i][3]; 124 } 125 ctx.putImageData(image_data, 0, 0); 126 expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data; 127 128 var image = new Image(); 129 image.onload = t.step_func_done(function() { 130 var dstCanvas = document.createElement("canvas"); 131 dstCanvas.width = 2; 132 dstCanvas.height = 2; 133 var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"}); 134 ctx.drawImage(image, 0, 0); 135 var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data; 136 assert_array_approx_equals(actualPixels, expectedPixels, 2); 137 }); 138 canvas.toBlob(function(blob) { 139 var urlCreator = window.URL || window.webkitURL; 140 image.src = urlCreator.createObjectURL(blob); 141 }, 'image/png', 1); 142 143- name: 2d.color.space.p3.toDataURL.with.putImageData 144 testing: 145 - 2d.color.space.p3.and.uint8 146 desc: Use putImageData to put some p3 data in canvas and test if toDataURL returns the same data 147 attributes: | 148 {colorSpace: "display-p3"} 149 code: | 150 canvas.width = 2; 151 canvas.height = 2; 152 153 // Create an ImageData using createImageData and populate its data array. 154 var image_data = ctx.createImageData(canvas.width, canvas.height, {colorSpace: "display-p3"}); 155 var color_data = [[255, 100, 150, 1.0], [255, 100, 150, 0.5], 156 [255, 100, 150, 0.5], [255, 100, 150, 0]]; 157 var data = image_data.data; 158 for (var i = 0; i < data.length / 4; ++i) { 159 data[4*i + 0] = color_data[i][0]; 160 data[4*i + 1] = color_data[i][1]; 161 data[4*i + 2] = color_data[i][2]; 162 data[4*i + 3] = color_data[i][3]; 163 } 164 ctx.putImageData(image_data, 0, 0); 165 expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data; 166 167 var image = new Image(); 168 image.onload = t.step_func_done(function() { 169 var dstCanvas = document.createElement("canvas"); 170 dstCanvas.width = 2; 171 dstCanvas.height = 2; 172 var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"}); 173 ctx.drawImage(image, 0, 0); 174 var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data; 175 assert_array_approx_equals(actualPixels, expectedPixels, 2); 176 }); 177 image.src = canvas.toDataURL(); 178