6 function init_data() { return testData("2d"); }
7 function test_clearRect(row) {
8 var canvas = createCanvasObject(row);
9 var ctx = canvas.getContext('2d');
11 ctx.fillStyle = '#f00';
12 ctx.fillRect(0, 0, 100, 50);
13 ctx.globalCompositeOperation = 'destination-atop';
14 ctx.clearRect(0, 0, 100, 50);
15 comparePixel(ctx, 50,25, 0,0,0,0);
18 function test_clip(row) {
19 var canvas = createCanvasObject(row);
20 var ctx = canvas.getContext('2d');
21 var composites = [ {compsite:"copy"},
22 {compsite:"destination-atop"},
23 {compsite:"destination-in"},
24 {compsite:"destination-out"},
25 {compsite:"destination-over"},
26 // {compsite:"lighter"}, //qt doesn't support lighter
27 {compsite:"source-atop"},
28 {compsite:"source-in"},
29 {compsite:"source-out"},
30 {compsite:"source-over"},
33 for (var i=0; i<composites.length; i++) {
34 // console.log("composite:" + composites[i].compsite);
36 ctx.fillStyle = '#0f0';
37 ctx.fillRect(0, 0, 100, 50);
38 ctx.globalCompositeOperation = composites[i].compsite;
39 ctx.rect(-20, -20, 10, 10);
41 ctx.fillStyle = '#f00';
42 ctx.fillRect(0, 0, 50, 50);
43 comparePixel(ctx, 25,25, 0,255,0,255);
44 comparePixel(ctx, 75,25, 0,255,0,255);
48 function test_globalAlpha(row) {
49 var canvas = createCanvasObject(row);
50 var ctx = canvas.getContext('2d');
52 compare(ctx.globalAlpha, 1.0);
54 ctx.fillStyle = '#0f0';
55 ctx.fillRect(0, 0, 100, 50);
56 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
57 ctx.fillStyle = '#f00';
58 ctx.fillRect(0, 0, 100, 50);
59 //comparePixel(ctx, 50,25, 2,253,0,255, 2);
62 ctx.globalAlpha = 0.5;
63 var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
64 ctx.globalAlpha = Infinity;
65 compare(ctx.globalAlpha, a);
66 ctx.globalAlpha = -Infinity;
67 compare(ctx.globalAlpha, a);
68 ctx.globalAlpha = NaN;
69 compare(ctx.globalAlpha, a);
71 ctx.globalAlpha = 0.5;
72 a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
73 ctx.globalAlpha = 1.1;
74 compare(ctx.globalAlpha, a);
75 ctx.globalAlpha = -0.1;
76 compare(ctx.globalAlpha, a);
78 compare(ctx.globalAlpha, 0);
80 compare(ctx.globalAlpha, 1);
84 function test_operation(row) {
85 var canvas = createCanvasObject(row);
86 var ctx = canvas.getContext('2d');
88 ctx.globalCompositeOperation = 'xor';
89 ctx.globalCompositeOperation = 'Source-over';
90 compare(ctx.globalCompositeOperation, 'xor');
93 ctx.globalCompositeOperation = 'xor';
94 ctx.globalCompositeOperation = 'clear';
95 compare(ctx.globalCompositeOperation, 'xor');
98 ctx.globalCompositeOperation = 'xor';
99 ctx.globalCompositeOperation = 'darker';
100 compare(ctx.globalCompositeOperation, 'xor');
103 compare(ctx.globalCompositeOperation, 'source-over');
107 var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
108 'destination-atop', 'destination-in', 'destination-out', 'destination-over',
109 'lighter', 'copy', 'xor'];
110 for (var i = 0; i < modes.length; ++i)
112 ctx.globalCompositeOperation = modes[i];
113 compare(ctx.globalCompositeOperation, modes[i]);
117 ctx.globalCompositeOperation = 'xor';
118 ctx.globalCompositeOperation = 'highlight';
119 compare(ctx.globalCompositeOperation, 'xor');
122 ctx.globalCompositeOperation = 'xor';
123 ctx.globalCompositeOperation = 'source-over\\0';
124 compare(ctx.globalCompositeOperation, 'xor');
127 ctx.globalCompositeOperation = 'xor';
128 ctx.globalCompositeOperation = 'over';
129 compare(ctx.globalCompositeOperation, 'xor');
133 ctx.globalCompositeOperation = 'xor';
134 ctx.globalCompositeOperation = 'nonexistent';
135 compare(ctx.globalCompositeOperation, 'xor');
138 function test_solid(row) {
139 var canvas = createCanvasObject(row);
140 var ctx = canvas.getContext('2d');
142 ctx.fillStyle = Qt.rgba(0, 1, 1, 1.0);
143 ctx.fillRect(0, 0, 100, 50);
144 ctx.globalCompositeOperation = 'copy';
145 ctx.fillStyle = Qt.rgba(1, 1, 0, 1.0);
146 ctx.fillRect(0, 0, 100, 50);
147 //comparePixel(ctx, 50,25, 255,255,0, 5);
150 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
151 ctx.fillRect(0, 0, 100, 50);
152 ctx.globalCompositeOperation = 'destination-atop';
153 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
154 ctx.fillRect(0, 0, 100, 50);
155 //comparePixel(ctx, 50,25, 0,255,255,255, 5);
158 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
159 ctx.fillRect(0, 0, 100, 50);
160 ctx.globalCompositeOperation = 'destination-in';
161 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
162 ctx.fillRect(0, 0, 100, 50);
163 //comparePixel(ctx, 50,25, 0,255,255,255, 5);
166 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
167 ctx.fillRect(0, 0, 100, 50);
168 ctx.globalCompositeOperation = 'destination-out';
169 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
170 ctx.fillRect(0, 0, 100, 50);
171 comparePixel(ctx, 50,25, 0,0,0,0, 5);
175 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
176 ctx.fillRect(0, 0, 100, 50);
177 ctx.globalCompositeOperation = 'destination-over';
178 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
179 ctx.fillRect(0, 0, 100, 50);
180 //comparePixel(ctx, 50,25, 0,255,255,255, 5);
183 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
184 ctx.fillRect(0, 0, 100, 50);
185 ctx.globalCompositeOperation = 'lighter';
186 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
187 ctx.fillRect(0, 0, 100, 50);
188 //comparePixel(ctx, 50,25, 255,255,255,255, 5);
192 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
193 ctx.fillRect(0, 0, 100, 50);
194 ctx.globalCompositeOperation = 'source-atop';
195 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
196 ctx.fillRect(0, 0, 100, 50);
197 //comparePixel(ctx, 50,25, 255,255,0, 5);
201 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
202 ctx.fillRect(0, 0, 100, 50);
203 ctx.globalCompositeOperation = 'source-in';
204 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
205 ctx.fillRect(0, 0, 100, 50);
206 //comparePixel(ctx, 50,25, 255,255,0, 5);
210 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
211 ctx.fillRect(0, 0, 100, 50);
212 ctx.globalCompositeOperation = 'source-out';
213 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
214 ctx.fillRect(0, 0, 100, 50);
215 // comparePixel(ctx, 50,25, 0,0,0,0, 5);
219 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
220 ctx.fillRect(0, 0, 100, 50);
221 ctx.globalCompositeOperation = 'source-over';
222 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
223 ctx.fillRect(0, 0, 100, 50);
224 //comparePixel(ctx, 50,25, 255,255,0, 5);
227 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
228 ctx.fillRect(0, 0, 100, 50);
229 ctx.globalCompositeOperation = 'xor';
230 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
231 ctx.fillRect(0, 0, 100, 50);
232 //comparePixel(ctx, 50,25, 0,0,0,0, 5);
234 function test_transparent(row) {
235 var canvas = createCanvasObject(row);
236 var ctx = canvas.getContext('2d');
238 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
239 ctx.fillRect(0, 0, 100, 50);
240 ctx.globalCompositeOperation = 'copy';
241 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
242 ctx.fillRect(0, 0, 100, 50);
243 comparePixel(ctx, 50,25, 0,0,255,191, 5);
246 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
247 ctx.fillRect(0, 0, 100, 50);
248 ctx.globalCompositeOperation = 'copy';
249 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
250 ctx.fillRect(0, 0, 100, 50);
251 comparePixel(ctx, 50,25, 0,0,255,191, 5);
254 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
255 ctx.fillRect(0, 0, 100, 50);
256 ctx.globalCompositeOperation = 'destination-in';
257 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
258 ctx.fillRect(0, 0, 100, 50);
259 comparePixel(ctx, 50,25, 0,255,0,95, 5);
262 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
263 ctx.fillRect(0, 0, 100, 50);
264 ctx.globalCompositeOperation = 'destination-out';
265 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
266 ctx.fillRect(0, 0, 100, 50);
267 comparePixel(ctx, 50,25, 0,255,0,31, 5);
270 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
271 ctx.fillRect(0, 0, 100, 50);
272 ctx.globalCompositeOperation = 'destination-over';
273 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
274 ctx.fillRect(0, 0, 100, 50);
275 comparePixel(ctx, 50,25, 0,145,109,223, 5);
278 // qt does not support lighter...
280 // ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
281 // ctx.fillRect(0, 0, 100, 50);
282 // ctx.globalCompositeOperation = 'lighter';
283 // ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
284 // ctx.fillRect(0, 0, 100, 50);
286 //comparePixel(ctx, 50,25, 0,127,191,255, 5);
289 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
290 ctx.fillRect(0, 0, 100, 50);
291 ctx.globalCompositeOperation = 'source-atop';
292 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
293 ctx.fillRect(0, 0, 100, 50);
294 comparePixel(ctx, 50,25, 0,63,191,127, 5);
297 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
298 ctx.fillRect(0, 0, 100, 50);
299 ctx.globalCompositeOperation = 'source-in';
300 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
301 ctx.fillRect(0, 0, 100, 50);
302 comparePixel(ctx, 50,25, 0,0,255,95, 5);
305 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
306 ctx.fillRect(0, 0, 100, 50);
307 ctx.globalCompositeOperation = 'source-out';
308 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
309 ctx.fillRect(0, 0, 100, 50);
310 comparePixel(ctx, 50,25, 0,0,255,95, 5);
314 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
315 ctx.fillRect(0, 0, 100, 50);
316 ctx.globalCompositeOperation = 'source-over';
317 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
318 ctx.fillRect(0, 0, 100, 50);
319 comparePixel(ctx, 50,25, 0,36,218,223, 5);
322 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
323 ctx.fillRect(0, 0, 100, 50);
324 ctx.globalCompositeOperation = 'xor';
325 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
326 ctx.fillRect(0, 0, 100, 50);
327 comparePixel(ctx, 50,25, 0,63,191,127, 5);
331 function test_uncovered(row) {
332 var canvas = createCanvasObject(row);
333 var ctx = canvas.getContext('2d');
335 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
336 ctx.fillRect(0, 0, 100, 50);
337 ctx.globalCompositeOperation = 'copy';
338 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
339 ctx.translate(0, 25);
340 ctx.fillRect(0, 50, 100, 50);
342 //comparePixel(ctx, 50,25, 0,0,0,0, 5);
345 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
346 ctx.fillRect(0, 0, 100, 50);
347 ctx.globalCompositeOperation = 'destination-atop';
348 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
349 ctx.translate(0, 25);
350 ctx.fillRect(0, 50, 100, 50);
352 //comparePixel(ctx, 50,25, 0,0,0,0, 5);
357 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
358 ctx.fillRect(0, 0, 100, 50);
359 ctx.globalCompositeOperation = 'destination-in';
360 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
361 ctx.translate(0, 25);
362 ctx.fillRect(0, 50, 100, 50);
364 //comparePixel(ctx, 50,25, 0,0,0,0, 5);
367 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
368 ctx.fillRect(0, 0, 100, 50);
369 ctx.globalCompositeOperation = 'source-in';
370 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
371 ctx.translate(0, 25);
372 ctx.fillRect(0, 50, 100, 50);
374 //comparePixel(ctx, 50,25, 0,0,0,0, 5);
377 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
378 ctx.fillRect(0, 0, 100, 50);
379 ctx.globalCompositeOperation = 'source-out';
380 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
381 ctx.translate(0, 25);
382 ctx.fillRect(0, 50, 100, 50);
384 //comparePixel(ctx, 50,25, 0,0,0,0, 5);