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