The Tor Browser / file comparison

comparison: content/canvas/test/test_canvas.html

content/canvas/test/test_canvas.html

branch
TOR_BUG_9701
changeset 8
97036ab72558
equal deleted inserted replaced
-1:000000000000 0:780b3edf1560
1 <!DOCTYPE HTML>
2 <title>Canvas Tests</title>
3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
4 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
5 <body>
6 <script>
7
8 SimpleTest.waitForExplicitFinish();
9 const Cc = SpecialPowers.Cc;
10 const Cr = SpecialPowers.Cr;
11
12 function IsD2DEnabled() {
13 var enabled = false;
14
15 try {
16 enabled = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).D2DEnabled;
17 } catch(e) {}
18
19 return enabled;
20 }
21
22 function IsLinux() {
23 var os = "";
24
25 try {
26 os = Cc["@mozilla.org/xre/app-info;1"]
27 .getService(SpecialPowers.Ci.nsIXULRuntime).OS;
28 } catch (e) {}
29
30 return os.indexOf("Linux") == 0 &&
31 navigator.appVersion.indexOf("Android") == -1;
32 }
33
34 function IsMacOSX10_5orOlder() {
35 var is105orOlder = false;
36
37 if (navigator.platform.indexOf("Mac") == 0) {
38 var version = Cc["@mozilla.org/system-info;1"]
39 .getService(SpecialPowers.Ci.nsIPropertyBag2)
40 .getProperty("version");
41 // the next line is correct: Mac OS 10.6 corresponds to Darwin version 10 !
42 // Mac OS 10.5 would be Darwin version 9. the |version| string we've got here
43 // is the Darwin version.
44 is105orOlder = (parseFloat(version) < 10.0);
45 }
46 return is105orOlder;
47 }
48
49
50 function IsAzureSkia() {
51 var enabled = false;
52
53 try {
54 var backend = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).getInfo().AzureCanvasBackend;
55 enabled = (backend == "skia");
56 } catch (e) { }
57
58 return enabled;
59 }
60
61 function IsAcceleratedSkia() {
62 var enabled = false;
63
64 try {
65 var props = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).getInfo();
66 enabled = props.AzureCanvasBackend == "skia" && props.AzureSkiaAccelerated;
67 } catch(e) { }
68
69 return enabled;
70 }
71
72 function IsAzureCairo() {
73 var enabled = false;
74
75 try {
76 var backend = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).getInfo().AzureCanvasBackend;
77 enabled = (backend == "cairo");
78 } catch (e) { }
79
80 return enabled;
81 }
82
83 </script>
84 <!-- Includes all the tests in the content/canvas/tests except for test_bug397524.html -->
85
86 <!-- [[[ test_2d.canvas.readonly.html ]]] -->
87
88 <p>Canvas test: 2d.canvas.readonly</p>
89 <!-- Testing: CanvasRenderingContext2D.canvas is readonly -->
90 <canvas id="c1" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
91 <script>
92
93 function test_2d_canvas_readonly() {
94
95 var canvas = document.getElementById('c1');
96 var ctx = canvas.getContext('2d');
97
98 var c = document.createElement('canvas');
99 var d = ctx.canvas;
100 ok(c !== d, "c !== d");
101 try { ctx.canvas = c; } catch (e) {} // not sure whether this should throw or not...
102 ok(ctx.canvas === d, "ctx.canvas === d");
103
104
105 }
106 </script>
107
108 <!-- [[[ test_2d.canvas.reference.html ]]] -->
109
110 <p>Canvas test: 2d.canvas.reference</p>
111 <!-- Testing: CanvasRenderingContext2D.canvas refers back to its canvas -->
112 <canvas id="c2" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
113 <script>
114
115 function test_2d_canvas_reference() {
116
117 var canvas = document.getElementById('c2');
118 var ctx = canvas.getContext('2d');
119
120 ok(ctx.canvas === canvas, "ctx.canvas === canvas");
121
122
123 }
124 </script>
125
126 <!-- [[[ test_2d.clearRect.basic.html ]]] -->
127
128 <p>Canvas test: 2d.clearRect.basic</p>
129 <canvas id="c3" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
130 <script>
131 function isPixel(ctx, x,y, r,g,b,a, d) {
132 var pos = x + "," + y;
133 var colour = r + "," + g + "," + b + "," + a;
134 var pixel = ctx.getImageData(x, y, 1, 1);
135 var pr = pixel.data[0],
136 pg = pixel.data[1],
137 pb = pixel.data[2],
138 pa = pixel.data[3];
139 ok(r-d <= pr && pr <= r+d &&
140 g-d <= pg && pg <= g+d &&
141 b-d <= pb && pb <= b+d &&
142 a-d <= pa && pa <= a+d,
143 "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+"; expected "+colour+" +/- "+d);
144 }
145
146 function test_2d_clearRect_basic() {
147
148 var canvas = document.getElementById('c3');
149 var ctx = canvas.getContext('2d');
150
151 ctx.fillStyle = '#f00';
152 ctx.fillRect(0, 0, 100, 50);
153 ctx.clearRect(0, 0, 100, 50);
154 isPixel(ctx, 50,25, 0,0,0,0, 0);
155
156
157 }
158 </script>
159
160 <!-- [[[ test_2d.clearRect.clip.html ]]] -->
161
162 <p>Canvas test: 2d.clearRect.clip</p>
163 <canvas id="c4" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
164 <script>
165
166
167 function test_2d_clearRect_clip() {
168
169 var canvas = document.getElementById('c4');
170 var ctx = canvas.getContext('2d');
171
172 ctx.fillStyle = '#0f0';
173 ctx.fillRect(0, 0, 100, 50);
174
175 ctx.beginPath();
176 ctx.rect(0, 0, 16, 16);
177 ctx.clip();
178
179 ctx.clearRect(0, 0, 100, 50);
180
181 ctx.fillStyle = '#0f0';
182 ctx.fillRect(0, 0, 16, 16);
183
184 isPixel(ctx, 50,25, 0,255,0,255, 0);
185
186
187 }
188 </script>
189
190 <!-- [[[ test_2d.clearRect.globalalpha.html ]]] -->
191
192 <p>Canvas test: 2d.clearRect.globalalpha</p>
193 <canvas id="c5" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
194 <script>
195
196
197 function test_2d_clearRect_globalalpha() {
198
199 var canvas = document.getElementById('c5');
200 var ctx = canvas.getContext('2d');
201
202 ctx.fillStyle = '#f00';
203 ctx.fillRect(0, 0, 100, 50);
204 ctx.globalAlpha = 0.1;
205 ctx.clearRect(0, 0, 100, 50);
206 isPixel(ctx, 50,25, 0,0,0,0, 0);
207
208
209 }
210 </script>
211
212 <!-- [[[ test_2d.clearRect.globalcomposite.html ]]] -->
213
214 <p>Canvas test: 2d.clearRect.globalcomposite</p>
215 <canvas id="c6" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
216 <script>
217
218
219 function test_2d_clearRect_globalcomposite() {
220
221 var canvas = document.getElementById('c6');
222 var ctx = canvas.getContext('2d');
223
224 ctx.fillStyle = '#f00';
225 ctx.fillRect(0, 0, 100, 50);
226 ctx.globalCompositeOperation = 'destination-atop';
227 ctx.clearRect(0, 0, 100, 50);
228 isPixel(ctx, 50,25, 0,0,0,0, 0);
229
230
231 }
232 </script>
233
234 <!-- [[[ test_2d.clearRect.negative.html ]]] -->
235
236 <p>Canvas test: 2d.clearRect.negative</p>
237 <canvas id="c7" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
238 <script>
239
240
241 function test_2d_clearRect_negative() {
242
243 var canvas = document.getElementById('c7');
244 var ctx = canvas.getContext('2d');
245
246 ctx.fillStyle = '#f00';
247 ctx.fillRect(0, 0, 100, 50);
248 ctx.clearRect(0, 0, 50, 25);
249 ctx.clearRect(100, 0, -50, 25);
250 ctx.clearRect(0, 50, 50, -25);
251 ctx.clearRect(100, 50, -50, -25);
252 isPixel(ctx, 25,12, 0,0,0,0, 0);
253 isPixel(ctx, 75,12, 0,0,0,0, 0);
254 isPixel(ctx, 25,37, 0,0,0,0, 0);
255 isPixel(ctx, 75,37, 0,0,0,0, 0);
256
257
258 }
259 </script>
260
261 <!-- [[[ test_2d.clearRect.nonfinite.html ]]] -->
262
263 <p>Canvas test: 2d.clearRect.nonfinite</p>
264 <!-- Testing: clearRect() with Infinity/NaN is ignored -->
265 <canvas id="c8" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
266 <script>
267
268
269 function test_2d_clearRect_nonfinite() {
270
271 var canvas = document.getElementById('c8');
272 var ctx = canvas.getContext('2d');
273
274 var _thrown_outer = false;
275 try {
276
277 ctx.fillStyle = '#0f0';
278 ctx.fillRect(0, 0, 100, 50);
279
280 ctx.clearRect(Infinity, 0, 100, 50);
281 ctx.clearRect(-Infinity, 0, 100, 50);
282 ctx.clearRect(NaN, 0, 100, 50);
283 ctx.clearRect(0, Infinity, 100, 50);
284 ctx.clearRect(0, -Infinity, 100, 50);
285 ctx.clearRect(0, NaN, 100, 50);
286 ctx.clearRect(0, 0, Infinity, 50);
287 ctx.clearRect(0, 0, -Infinity, 50);
288 ctx.clearRect(0, 0, NaN, 50);
289 ctx.clearRect(0, 0, 100, Infinity);
290 ctx.clearRect(0, 0, 100, -Infinity);
291 ctx.clearRect(0, 0, 100, NaN);
292 ctx.clearRect(Infinity, Infinity, 100, 50);
293 ctx.clearRect(Infinity, Infinity, Infinity, 50);
294 ctx.clearRect(Infinity, Infinity, Infinity, Infinity);
295 ctx.clearRect(Infinity, Infinity, 100, Infinity);
296 ctx.clearRect(Infinity, 0, Infinity, 50);
297 ctx.clearRect(Infinity, 0, Infinity, Infinity);
298 ctx.clearRect(Infinity, 0, 100, Infinity);
299 ctx.clearRect(0, Infinity, Infinity, 50);
300 ctx.clearRect(0, Infinity, Infinity, Infinity);
301 ctx.clearRect(0, Infinity, 100, Infinity);
302 ctx.clearRect(0, 0, Infinity, Infinity);
303
304 isPixel(ctx, 50,25, 0,255,0,255, 0);
305
306 } catch (e) {
307 _thrown_outer = true;
308 }
309 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
310
311
312 }
313 </script>
314
315 <!-- [[[ test_2d.clearRect.path.html ]]] -->
316
317 <p>Canvas test: 2d.clearRect.path</p>
318 <canvas id="c9" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
319 <script>
320
321
322 function test_2d_clearRect_path() {
323
324 var canvas = document.getElementById('c9');
325 var ctx = canvas.getContext('2d');
326
327 ctx.fillStyle = '#0f0';
328 ctx.beginPath();
329 ctx.rect(0, 0, 100, 50);
330 ctx.clearRect(0, 0, 16, 16);
331 ctx.fill();
332 isPixel(ctx, 50,25, 0,255,0,255, 0);
333
334
335 }
336 </script>
337
338 <!-- [[[ test_2d.clearRect.shadow.html ]]] -->
339
340 <p>Canvas test: 2d.clearRect.shadow</p>
341 <canvas id="c10" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
342 <script>
343
344
345 function test_2d_clearRect_shadow() {
346
347 var canvas = document.getElementById('c10');
348 var ctx = canvas.getContext('2d');
349
350 ctx.fillStyle = '#0f0';
351 ctx.fillRect(0, 0, 100, 50);
352 ctx.shadowColor = '#f00';
353 ctx.shadowBlur = 0;
354 ctx.shadowOffsetX = 0;
355 ctx.shadowOffsetY = 50;
356 ctx.clearRect(0, -50, 100, 50);
357 isPixel(ctx, 50,25, 0,255,0,255, 0);
358
359
360 }
361 </script>
362
363 <!-- [[[ test_2d.clearRect.transform.html ]]] -->
364
365 <p>Canvas test: 2d.clearRect.transform</p>
366 <canvas id="c11" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
367 <script>
368
369
370 function test_2d_clearRect_transform() {
371
372 var canvas = document.getElementById('c11');
373 var ctx = canvas.getContext('2d');
374
375 ctx.fillStyle = '#f00';
376 ctx.fillRect(0, 0, 100, 50);
377 ctx.scale(10, 10);
378 ctx.translate(0, 5);
379 ctx.clearRect(0, -5, 10, 5);
380 isPixel(ctx, 50,25, 0,0,0,0, 0);
381
382
383 }
384 </script>
385
386 <!-- [[[ test_2d.clearRect.zero.html ]]] -->
387
388 <p>Canvas test: 2d.clearRect.zero</p>
389 <canvas id="c12" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
390 <script>
391
392
393 function test_2d_clearRect_zero() {
394
395 var canvas = document.getElementById('c12');
396 var ctx = canvas.getContext('2d');
397
398 ctx.fillStyle = '#0f0';
399 ctx.fillRect(0, 0, 100, 50);
400 ctx.clearRect(0, 0, 100, 0);
401 ctx.clearRect(0, 0, 0, 50);
402 ctx.clearRect(0, 0, 0, 0);
403 isPixel(ctx, 50,25, 0,255,0,255, 0);
404
405
406 }
407 </script>
408
409 <!-- [[[ test_2d.composite.canvas.copy.html ]]] -->
410
411 <p>Canvas test: 2d.composite.canvas.copy</p>
412 <canvas id="c13" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
413 <script>
414
415
416 function test_2d_composite_canvas_copy() {
417
418 var canvas = document.getElementById('c13');
419 var ctx = canvas.getContext('2d');
420
421
422 var canvas2 = document.createElement('canvas');
423 canvas2.width = canvas.width;
424 canvas2.height = canvas.height;
425 var ctx2 = canvas2.getContext('2d');
426 ctx2.drawImage(document.getElementById('yellow75_1.png'), 0, 0);
427 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
428 ctx.fillRect(0, 0, 100, 50);
429 ctx.globalCompositeOperation = 'copy';
430 ctx.drawImage(canvas2, 0, 0);
431 isPixel(ctx, 50,25, 255,255,0,191, 5);
432
433
434 }
435 </script>
436 <img src="image_yellow75.png" id="yellow75_1.png" class="resource">
437
438 <!-- [[[ test_2d.composite.canvas.destination-atop.html ]]] -->
439
440 <p>Canvas test: 2d.composite.canvas.destination-atop</p>
441 <canvas id="c14" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
442 <script>
443
444
445 function test_2d_composite_canvas_destination_atop() {
446
447 var canvas = document.getElementById('c14');
448 var ctx = canvas.getContext('2d');
449
450
451 var canvas2 = document.createElement('canvas');
452 canvas2.width = canvas.width;
453 canvas2.height = canvas.height;
454 var ctx2 = canvas2.getContext('2d');
455 ctx2.drawImage(document.getElementById('yellow75_2.png'), 0, 0);
456 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
457 ctx.fillRect(0, 0, 100, 50);
458 ctx.globalCompositeOperation = 'destination-atop';
459 ctx.drawImage(canvas2, 0, 0);
460 isPixel(ctx, 50,25, 127,255,127,191, 5);
461
462
463 }
464 </script>
465 <img src="image_yellow75.png" id="yellow75_2.png" class="resource">
466
467 <!-- [[[ test_2d.composite.canvas.destination-in.html ]]] -->
468
469 <p>Canvas test: 2d.composite.canvas.destination-in</p>
470 <canvas id="c15" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
471 <script>
472
473
474 function test_2d_composite_canvas_destination_in() {
475
476 var canvas = document.getElementById('c15');
477 var ctx = canvas.getContext('2d');
478
479
480 var canvas2 = document.createElement('canvas');
481 canvas2.width = canvas.width;
482 canvas2.height = canvas.height;
483 var ctx2 = canvas2.getContext('2d');
484 ctx2.drawImage(document.getElementById('yellow75_3.png'), 0, 0);
485 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
486 ctx.fillRect(0, 0, 100, 50);
487 ctx.globalCompositeOperation = 'destination-in';
488 ctx.drawImage(canvas2, 0, 0);
489 isPixel(ctx, 50,25, 0,255,255,95, 5);
490
491
492 }
493 </script>
494 <img src="image_yellow75.png" id="yellow75_3.png" class="resource">
495
496 <!-- [[[ test_2d.composite.canvas.destination-out.html ]]] -->
497
498 <p>Canvas test: 2d.composite.canvas.destination-out</p>
499 <canvas id="c16" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
500 <script>
501
502
503 function test_2d_composite_canvas_destination_out() {
504
505 var canvas = document.getElementById('c16');
506 var ctx = canvas.getContext('2d');
507
508
509 var canvas2 = document.createElement('canvas');
510 canvas2.width = canvas.width;
511 canvas2.height = canvas.height;
512 var ctx2 = canvas2.getContext('2d');
513 ctx2.drawImage(document.getElementById('yellow75_4.png'), 0, 0);
514 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
515 ctx.fillRect(0, 0, 100, 50);
516 ctx.globalCompositeOperation = 'destination-out';
517 ctx.drawImage(canvas2, 0, 0);
518 isPixel(ctx, 50,25, 0,255,255,31, 5);
519
520
521 }
522 </script>
523 <img src="image_yellow75.png" id="yellow75_4.png" class="resource">
524
525 <!-- [[[ test_2d.composite.canvas.destination-over.html ]]] -->
526
527 <p>Canvas test: 2d.composite.canvas.destination-over</p>
528 <canvas id="c17" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
529 <script>
530
531
532 function test_2d_composite_canvas_destination_over() {
533
534 var canvas = document.getElementById('c17');
535 var ctx = canvas.getContext('2d');
536
537
538 var canvas2 = document.createElement('canvas');
539 canvas2.width = canvas.width;
540 canvas2.height = canvas.height;
541 var ctx2 = canvas2.getContext('2d');
542 ctx2.drawImage(document.getElementById('yellow75_5.png'), 0, 0);
543 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
544 ctx.fillRect(0, 0, 100, 50);
545 ctx.globalCompositeOperation = 'destination-over';
546 ctx.drawImage(canvas2, 0, 0);
547 isPixel(ctx, 50,25, 109,255,145,223, 5);
548
549
550 }
551 </script>
552 <img src="image_yellow75.png" id="yellow75_5.png" class="resource">
553
554 <!-- [[[ test_2d.composite.canvas.lighter.html ]]] -->
555
556 <p>Canvas test: 2d.composite.canvas.lighter</p>
557 <canvas id="c18" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
558 <script>
559
560
561 function test_2d_composite_canvas_lighter() {
562
563 var canvas = document.getElementById('c18');
564 var ctx = canvas.getContext('2d');
565
566
567 var canvas2 = document.createElement('canvas');
568 canvas2.width = canvas.width;
569 canvas2.height = canvas.height;
570 var ctx2 = canvas2.getContext('2d');
571 ctx2.drawImage(document.getElementById('yellow75_6.png'), 0, 0);
572 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
573 ctx.fillRect(0, 0, 100, 50);
574 ctx.globalCompositeOperation = 'lighter';
575 ctx.drawImage(canvas2, 0, 0);
576 isPixel(ctx, 50,25, 191,255,127,255, 5);
577
578
579 }
580 </script>
581 <img src="image_yellow75.png" id="yellow75_6.png" class="resource">
582
583 <!-- [[[ test_2d.composite.canvas.source-atop.html ]]] -->
584
585 <p>Canvas test: 2d.composite.canvas.source-atop</p>
586 <canvas id="c19" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
587 <script>
588
589
590 function test_2d_composite_canvas_source_atop() {
591
592 var canvas = document.getElementById('c19');
593 var ctx = canvas.getContext('2d');
594
595
596 var canvas2 = document.createElement('canvas');
597 canvas2.width = canvas.width;
598 canvas2.height = canvas.height;
599 var ctx2 = canvas2.getContext('2d');
600 ctx2.drawImage(document.getElementById('yellow75_7.png'), 0, 0);
601 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
602 ctx.fillRect(0, 0, 100, 50);
603 ctx.globalCompositeOperation = 'source-atop';
604 ctx.drawImage(canvas2, 0, 0);
605 isPixel(ctx, 50,25, 191,255,63,127, 5);
606
607
608 }
609 </script>
610 <img src="image_yellow75.png" id="yellow75_7.png" class="resource">
611
612 <!-- [[[ test_2d.composite.canvas.source-in.html ]]] -->
613
614 <p>Canvas test: 2d.composite.canvas.source-in</p>
615 <canvas id="c20" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
616 <script>
617
618
619 function test_2d_composite_canvas_source_in() {
620
621 var canvas = document.getElementById('c20');
622 var ctx = canvas.getContext('2d');
623
624
625 var canvas2 = document.createElement('canvas');
626 canvas2.width = canvas.width;
627 canvas2.height = canvas.height;
628 var ctx2 = canvas2.getContext('2d');
629 ctx2.drawImage(document.getElementById('yellow75_8.png'), 0, 0);
630 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
631 ctx.fillRect(0, 0, 100, 50);
632 ctx.globalCompositeOperation = 'source-in';
633 ctx.drawImage(canvas2, 0, 0);
634 isPixel(ctx, 50,25, 255,255,0,95, 5);
635
636
637 }
638 </script>
639 <img src="image_yellow75.png" id="yellow75_8.png" class="resource">
640
641 <!-- [[[ test_2d.composite.canvas.source-out.html ]]] -->
642
643 <p>Canvas test: 2d.composite.canvas.source-out</p>
644 <canvas id="c21" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
645 <script>
646
647
648 function test_2d_composite_canvas_source_out() {
649
650 var canvas = document.getElementById('c21');
651 var ctx = canvas.getContext('2d');
652
653
654 var canvas2 = document.createElement('canvas');
655 canvas2.width = canvas.width;
656 canvas2.height = canvas.height;
657 var ctx2 = canvas2.getContext('2d');
658 ctx2.drawImage(document.getElementById('yellow75_9.png'), 0, 0);
659 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
660 ctx.fillRect(0, 0, 100, 50);
661 ctx.globalCompositeOperation = 'source-out';
662 ctx.drawImage(canvas2, 0, 0);
663 isPixel(ctx, 50,25, 255,255,0,95, 5);
664
665
666 }
667 </script>
668 <img src="image_yellow75.png" id="yellow75_9.png" class="resource">
669
670 <!-- [[[ test_2d.composite.canvas.source-over.html ]]] -->
671
672 <p>Canvas test: 2d.composite.canvas.source-over</p>
673 <canvas id="c22" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
674 <script>
675
676
677 function test_2d_composite_canvas_source_over() {
678
679 var canvas = document.getElementById('c22');
680 var ctx = canvas.getContext('2d');
681
682
683 var canvas2 = document.createElement('canvas');
684 canvas2.width = canvas.width;
685 canvas2.height = canvas.height;
686 var ctx2 = canvas2.getContext('2d');
687 ctx2.drawImage(document.getElementById('yellow75_10.png'), 0, 0);
688 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
689 ctx.fillRect(0, 0, 100, 50);
690 ctx.globalCompositeOperation = 'source-over';
691 ctx.drawImage(canvas2, 0, 0);
692 isPixel(ctx, 50,25, 218,255,36,223, 5);
693
694
695 }
696 </script>
697 <img src="image_yellow75.png" id="yellow75_10.png" class="resource">
698
699 <!-- [[[ test_2d.composite.canvas.xor.html ]]] -->
700
701 <p>Canvas test: 2d.composite.canvas.xor</p>
702 <canvas id="c23" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
703 <script>
704
705
706 function test_2d_composite_canvas_xor() {
707
708 var canvas = document.getElementById('c23');
709 var ctx = canvas.getContext('2d');
710
711
712 var canvas2 = document.createElement('canvas');
713 canvas2.width = canvas.width;
714 canvas2.height = canvas.height;
715 var ctx2 = canvas2.getContext('2d');
716 ctx2.drawImage(document.getElementById('yellow75_11.png'), 0, 0);
717 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
718 ctx.fillRect(0, 0, 100, 50);
719 ctx.globalCompositeOperation = 'xor';
720 ctx.drawImage(canvas2, 0, 0);
721 isPixel(ctx, 50,25, 191,255,63,127, 5);
722
723
724 }
725 </script>
726 <img src="image_yellow75.png" id="yellow75_11.png" class="resource">
727
728 <!-- [[[ test_2d.composite.clip.copy.html ]]] -->
729
730 <p>Canvas test: 2d.composite.clip.copy</p>
731 <!-- Testing: fill() does not affect pixels outside the clip region. -->
732 <canvas id="c24" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
733 <script>
734
735
736 function test_2d_composite_clip_copy() {
737
738 var canvas = document.getElementById('c24');
739 var ctx = canvas.getContext('2d');
740
741
742 ctx.fillStyle = '#0f0';
743 ctx.fillRect(0, 0, 100, 50);
744 ctx.globalCompositeOperation = 'copy';
745 ctx.rect(-20, -20, 10, 10);
746 ctx.clip();
747 ctx.fillStyle = '#f00';
748 ctx.fillRect(0, 0, 50, 50);
749 isPixel(ctx, 25,25, 0,255,0,255, 0);
750 isPixel(ctx, 75,25, 0,255,0,255, 0);
751
752
753 }
754 </script>
755
756 <!-- [[[ test_2d.composite.clip.destination-atop.html ]]] -->
757
758 <p>Canvas test: 2d.composite.clip.destination-atop</p>
759 <!-- Testing: fill() does not affect pixels outside the clip region. -->
760 <canvas id="c25" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
761 <script>
762
763
764 function test_2d_composite_clip_destination_atop() {
765
766 var canvas = document.getElementById('c25');
767 var ctx = canvas.getContext('2d');
768
769
770 ctx.fillStyle = '#0f0';
771 ctx.fillRect(0, 0, 100, 50);
772 ctx.globalCompositeOperation = 'destination-atop';
773 ctx.rect(-20, -20, 10, 10);
774 ctx.clip();
775 ctx.fillStyle = '#f00';
776 ctx.fillRect(0, 0, 50, 50);
777 isPixel(ctx, 25,25, 0,255,0,255, 0);
778 isPixel(ctx, 75,25, 0,255,0,255, 0);
779
780
781 }
782 </script>
783
784 <!-- [[[ test_2d.composite.clip.destination-in.html ]]] -->
785
786 <p>Canvas test: 2d.composite.clip.destination-in</p>
787 <!-- Testing: fill() does not affect pixels outside the clip region. -->
788 <canvas id="c26" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
789 <script>
790
791
792 function test_2d_composite_clip_destination_in() {
793
794 var canvas = document.getElementById('c26');
795 var ctx = canvas.getContext('2d');
796
797
798 ctx.fillStyle = '#0f0';
799 ctx.fillRect(0, 0, 100, 50);
800 ctx.globalCompositeOperation = 'destination-in';
801 ctx.rect(-20, -20, 10, 10);
802 ctx.clip();
803 ctx.fillStyle = '#f00';
804 ctx.fillRect(0, 0, 50, 50);
805 isPixel(ctx, 25,25, 0,255,0,255, 0);
806 isPixel(ctx, 75,25, 0,255,0,255, 0);
807
808
809 }
810 </script>
811
812 <!-- [[[ test_2d.composite.clip.destination-out.html ]]] -->
813
814 <p>Canvas test: 2d.composite.clip.destination-out</p>
815 <!-- Testing: fill() does not affect pixels outside the clip region. -->
816 <canvas id="c27" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
817 <script>
818
819
820 function test_2d_composite_clip_destination_out() {
821
822 var canvas = document.getElementById('c27');
823 var ctx = canvas.getContext('2d');
824
825
826 ctx.fillStyle = '#0f0';
827 ctx.fillRect(0, 0, 100, 50);
828 ctx.globalCompositeOperation = 'destination-out';
829 ctx.rect(-20, -20, 10, 10);
830 ctx.clip();
831 ctx.fillStyle = '#f00';
832 ctx.fillRect(0, 0, 50, 50);
833 isPixel(ctx, 25,25, 0,255,0,255, 0);
834 isPixel(ctx, 75,25, 0,255,0,255, 0);
835
836
837 }
838 </script>
839
840 <!-- [[[ test_2d.composite.clip.destination-over.html ]]] -->
841
842 <p>Canvas test: 2d.composite.clip.destination-over</p>
843 <!-- Testing: fill() does not affect pixels outside the clip region. -->
844 <canvas id="c28" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
845 <script>
846
847
848 function test_2d_composite_clip_destination_over() {
849
850 var canvas = document.getElementById('c28');
851 var ctx = canvas.getContext('2d');
852
853
854 ctx.fillStyle = '#0f0';
855 ctx.fillRect(0, 0, 100, 50);
856 ctx.globalCompositeOperation = 'destination-over';
857 ctx.rect(-20, -20, 10, 10);
858 ctx.clip();
859 ctx.fillStyle = '#f00';
860 ctx.fillRect(0, 0, 50, 50);
861 isPixel(ctx, 25,25, 0,255,0,255, 0);
862 isPixel(ctx, 75,25, 0,255,0,255, 0);
863
864
865 }
866 </script>
867
868 <!-- [[[ test_2d.composite.clip.lighter.html ]]] -->
869
870 <p>Canvas test: 2d.composite.clip.lighter</p>
871 <!-- Testing: fill() does not affect pixels outside the clip region. -->
872 <canvas id="c29" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
873 <script>
874
875
876 function test_2d_composite_clip_lighter() {
877
878 var canvas = document.getElementById('c29');
879 var ctx = canvas.getContext('2d');
880
881
882 ctx.fillStyle = '#0f0';
883 ctx.fillRect(0, 0, 100, 50);
884 ctx.globalCompositeOperation = 'lighter';
885 ctx.rect(-20, -20, 10, 10);
886 ctx.clip();
887 ctx.fillStyle = '#f00';
888 ctx.fillRect(0, 0, 50, 50);
889 isPixel(ctx, 25,25, 0,255,0,255, 0);
890 isPixel(ctx, 75,25, 0,255,0,255, 0);
891
892
893 }
894 </script>
895
896 <!-- [[[ test_2d.composite.clip.source-atop.html ]]] -->
897
898 <p>Canvas test: 2d.composite.clip.source-atop</p>
899 <!-- Testing: fill() does not affect pixels outside the clip region. -->
900 <canvas id="c30" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
901 <script>
902
903
904 function test_2d_composite_clip_source_atop() {
905
906 var canvas = document.getElementById('c30');
907 var ctx = canvas.getContext('2d');
908
909
910 ctx.fillStyle = '#0f0';
911 ctx.fillRect(0, 0, 100, 50);
912 ctx.globalCompositeOperation = 'source-atop';
913 ctx.rect(-20, -20, 10, 10);
914 ctx.clip();
915 ctx.fillStyle = '#f00';
916 ctx.fillRect(0, 0, 50, 50);
917 isPixel(ctx, 25,25, 0,255,0,255, 0);
918 isPixel(ctx, 75,25, 0,255,0,255, 0);
919
920
921 }
922 </script>
923
924 <!-- [[[ test_2d.composite.clip.source-in.html ]]] -->
925
926 <p>Canvas test: 2d.composite.clip.source-in</p>
927 <!-- Testing: fill() does not affect pixels outside the clip region. -->
928 <canvas id="c31" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
929 <script>
930
931
932 function test_2d_composite_clip_source_in() {
933
934 var canvas = document.getElementById('c31');
935 var ctx = canvas.getContext('2d');
936
937
938 ctx.fillStyle = '#0f0';
939 ctx.fillRect(0, 0, 100, 50);
940 ctx.globalCompositeOperation = 'source-in';
941 ctx.rect(-20, -20, 10, 10);
942 ctx.clip();
943 ctx.fillStyle = '#f00';
944 ctx.fillRect(0, 0, 50, 50);
945 isPixel(ctx, 25,25, 0,255,0,255, 0);
946 isPixel(ctx, 75,25, 0,255,0,255, 0);
947
948
949 }
950 </script>
951
952 <!-- [[[ test_2d.composite.clip.source-out.html ]]] -->
953
954 <p>Canvas test: 2d.composite.clip.source-out</p>
955 <!-- Testing: fill() does not affect pixels outside the clip region. -->
956 <canvas id="c32" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
957 <script>
958
959
960 function test_2d_composite_clip_source_out() {
961
962 var canvas = document.getElementById('c32');
963 var ctx = canvas.getContext('2d');
964
965
966 ctx.fillStyle = '#0f0';
967 ctx.fillRect(0, 0, 100, 50);
968 ctx.globalCompositeOperation = 'source-out';
969 ctx.rect(-20, -20, 10, 10);
970 ctx.clip();
971 ctx.fillStyle = '#f00';
972 ctx.fillRect(0, 0, 50, 50);
973 isPixel(ctx, 25,25, 0,255,0,255, 0);
974 isPixel(ctx, 75,25, 0,255,0,255, 0);
975
976
977 }
978 </script>
979
980 <!-- [[[ test_2d.composite.clip.source-over.html ]]] -->
981
982 <p>Canvas test: 2d.composite.clip.source-over</p>
983 <!-- Testing: fill() does not affect pixels outside the clip region. -->
984 <canvas id="c33" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
985 <script>
986
987
988 function test_2d_composite_clip_source_over() {
989
990 var canvas = document.getElementById('c33');
991 var ctx = canvas.getContext('2d');
992
993
994 ctx.fillStyle = '#0f0';
995 ctx.fillRect(0, 0, 100, 50);
996 ctx.globalCompositeOperation = 'source-over';
997 ctx.rect(-20, -20, 10, 10);
998 ctx.clip();
999 ctx.fillStyle = '#f00';
1000 ctx.fillRect(0, 0, 50, 50);
1001 isPixel(ctx, 25,25, 0,255,0,255, 0);
1002 isPixel(ctx, 75,25, 0,255,0,255, 0);
1003
1004
1005 }
1006 </script>
1007
1008 <!-- [[[ test_2d.composite.clip.xor.html ]]] -->
1009
1010 <p>Canvas test: 2d.composite.clip.xor</p>
1011 <!-- Testing: fill() does not affect pixels outside the clip region. -->
1012 <canvas id="c34" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1013 <script>
1014
1015
1016 function test_2d_composite_clip_xor() {
1017
1018 var canvas = document.getElementById('c34');
1019 var ctx = canvas.getContext('2d');
1020
1021
1022 ctx.fillStyle = '#0f0';
1023 ctx.fillRect(0, 0, 100, 50);
1024 ctx.globalCompositeOperation = 'xor';
1025 ctx.rect(-20, -20, 10, 10);
1026 ctx.clip();
1027 ctx.fillStyle = '#f00';
1028 ctx.fillRect(0, 0, 50, 50);
1029 isPixel(ctx, 25,25, 0,255,0,255, 0);
1030 isPixel(ctx, 75,25, 0,255,0,255, 0);
1031
1032
1033 }
1034 </script>
1035
1036 <!-- [[[ test_2d.composite.globalAlpha.canvas.html ]]] -->
1037
1038 <p>Canvas test: 2d.composite.globalAlpha.canvas</p>
1039 <canvas id="c35" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1040 <script>
1041
1042
1043 function test_2d_composite_globalAlpha_canvas() {
1044
1045 var canvas = document.getElementById('c35');
1046 var ctx = canvas.getContext('2d');
1047
1048 var canvas2 = document.createElement('canvas');
1049 canvas2.width = 100;
1050 canvas2.height = 50;
1051 var ctx2 = canvas2.getContext('2d');
1052 ctx2.fillStyle = '#f00';
1053 ctx2.fillRect(0, 0, 100, 50);
1054
1055 ctx.fillStyle = '#0f0';
1056 ctx.fillRect(0, 0, 100, 50);
1057 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1058 ctx.drawImage(canvas2, 0, 0);
1059 isPixel(ctx, 50,25, 2,253,0,255, 2);
1060
1061
1062 }
1063 </script>
1064
1065 <!-- [[[ test_2d.composite.globalAlpha.canvaspattern.html ]]] -->
1066
1067 <p>Canvas test: 2d.composite.globalAlpha.canvaspattern - bug 401790</p>
1068 <canvas id="c36" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1069 <script>
1070
1071 function todo_isPixel(ctx, x,y, r,g,b,a, d) {
1072 var pos = x + "," + y;
1073 var colour = r + "," + g + "," + b + "," + a;
1074 var pixel = ctx.getImageData(x, y, 1, 1);
1075 var pr = pixel.data[0],
1076 pg = pixel.data[1],
1077 pb = pixel.data[2],
1078 pa = pixel.data[3];
1079 todo(r-d <= pr && pr <= r+d &&
1080 g-d <= pg && pg <= g+d &&
1081 b-d <= pb && pb <= b+d &&
1082 a-d <= pa && pa <= a+d,
1083 "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+" (marked todo); expected "+colour+" +/- " + d);
1084 }
1085
1086 function test_2d_composite_globalAlpha_canvaspattern() {
1087
1088 var canvas = document.getElementById('c36');
1089 var ctx = canvas.getContext('2d');
1090
1091 var canvas2 = document.createElement('canvas');
1092 canvas2.width = 100;
1093 canvas2.height = 50;
1094 var ctx2 = canvas2.getContext('2d');
1095 ctx2.fillStyle = '#f00';
1096 ctx2.fillRect(0, 0, 100, 50);
1097
1098 ctx.fillStyle = '#0f0';
1099 ctx.fillRect(0, 0, 100, 50);
1100 ctx.fillStyle = ctx.createPattern(canvas2, 'no-repeat');
1101 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1102 ctx.fillRect(0, 0, 100, 50);
1103 isPixel(ctx, 50,25, 2,253,0,255, 2);
1104
1105
1106 }
1107 </script>
1108
1109 <!-- [[[ test_2d.composite.globalAlpha.default.html ]]] -->
1110
1111 <p>Canvas test: 2d.composite.globalAlpha.default</p>
1112 <canvas id="c37" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1113 <script>
1114
1115 function test_2d_composite_globalAlpha_default() {
1116
1117 var canvas = document.getElementById('c37');
1118 var ctx = canvas.getContext('2d');
1119
1120 ok(ctx.globalAlpha === 1.0, "ctx.globalAlpha === 1.0");
1121
1122
1123 }
1124 </script>
1125
1126 <!-- [[[ test_2d.composite.globalAlpha.fill.html ]]] -->
1127
1128 <p>Canvas test: 2d.composite.globalAlpha.fill</p>
1129 <canvas id="c38" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1130 <script>
1131
1132
1133 function test_2d_composite_globalAlpha_fill() {
1134
1135 var canvas = document.getElementById('c38');
1136 var ctx = canvas.getContext('2d');
1137
1138 ctx.fillStyle = '#0f0';
1139 ctx.fillRect(0, 0, 100, 50);
1140 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1141 ctx.fillStyle = '#f00';
1142 ctx.fillRect(0, 0, 100, 50);
1143 isPixel(ctx, 50,25, 2,253,0,255, 2);
1144
1145
1146 }
1147 </script>
1148
1149 <!-- [[[ test_2d.composite.globalAlpha.image.html ]]] -->
1150
1151 <p>Canvas test: 2d.composite.globalAlpha.image</p>
1152 <canvas id="c39" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1153 <script>
1154
1155
1156 function test_2d_composite_globalAlpha_image() {
1157
1158 var canvas = document.getElementById('c39');
1159 var ctx = canvas.getContext('2d');
1160
1161 ctx.fillStyle = '#0f0';
1162 ctx.fillRect(0, 0, 100, 50);
1163 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1164 ctx.drawImage(document.getElementById('red_1.png'), 0, 0);
1165 isPixel(ctx, 50,25, 2,253,0,255, 2);
1166
1167
1168 }
1169 </script>
1170 <img src="image_red.png" id="red_1.png" class="resource">
1171
1172 <!-- [[[ test_2d.composite.globalAlpha.imagepattern.html ]]] -->
1173
1174 <p>Canvas test: 2d.composite.globalAlpha.imagepattern - bug 401790</p>
1175 <canvas id="c40" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1176 <script>
1177
1178
1179
1180 function test_2d_composite_globalAlpha_imagepattern() {
1181
1182 var canvas = document.getElementById('c40');
1183 var ctx = canvas.getContext('2d');
1184
1185 ctx.fillStyle = '#0f0';
1186 ctx.fillRect(0, 0, 100, 50);
1187 ctx.fillStyle = ctx.createPattern(document.getElementById('red_2.png'), 'no-repeat');
1188 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1189 ctx.fillRect(0, 0, 100, 50);
1190 isPixel(ctx, 50,25, 2,253,0,255, 2);
1191
1192
1193 }
1194 </script>
1195 <img src="image_red.png" id="red_2.png" class="resource">
1196
1197 <!-- [[[ test_2d.composite.globalAlpha.invalid.html ]]] -->
1198
1199 <p>Canvas test: 2d.composite.globalAlpha.invalid</p>
1200 <canvas id="c41" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1201 <script>
1202
1203 function test_2d_composite_globalAlpha_invalid() {
1204
1205 var canvas = document.getElementById('c41');
1206 var ctx = canvas.getContext('2d');
1207
1208 ctx.globalAlpha = 0.5;
1209 var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
1210 ctx.globalAlpha = Infinity;
1211 ok(ctx.globalAlpha === a, "ctx.globalAlpha === a");
1212 ctx.globalAlpha = -Infinity;
1213 ok(ctx.globalAlpha === a, "ctx.globalAlpha === a");
1214 ctx.globalAlpha = NaN;
1215 ok(ctx.globalAlpha === a, "ctx.globalAlpha === a");
1216
1217 }
1218 </script>
1219
1220 <!-- [[[ test_2d.composite.globalAlpha.range.html ]]] -->
1221
1222 <p>Canvas test: 2d.composite.globalAlpha.range</p>
1223 <canvas id="c42" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1224 <script>
1225
1226 function test_2d_composite_globalAlpha_range() {
1227
1228 var canvas = document.getElementById('c42');
1229 var ctx = canvas.getContext('2d');
1230
1231 ctx.globalAlpha = 0.5;
1232 var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
1233 ctx.globalAlpha = 1.1;
1234 ok(ctx.globalAlpha == a, "ctx.globalAlpha == a");
1235 ctx.globalAlpha = -0.1;
1236 ok(ctx.globalAlpha == a, "ctx.globalAlpha == a");
1237 ctx.globalAlpha = 0;
1238 ok(ctx.globalAlpha == 0, "ctx.globalAlpha == 0");
1239 ctx.globalAlpha = 1;
1240 ok(ctx.globalAlpha == 1, "ctx.globalAlpha == 1");
1241
1242
1243 }
1244 </script>
1245
1246 <!-- [[[ test_2d.composite.image.copy.html ]]] -->
1247
1248 <p>Canvas test: 2d.composite.image.copy</p>
1249 <canvas id="c43" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1250 <script>
1251
1252
1253 function test_2d_composite_image_copy() {
1254
1255 var canvas = document.getElementById('c43');
1256 var ctx = canvas.getContext('2d');
1257
1258
1259 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1260 ctx.fillRect(0, 0, 100, 50);
1261 ctx.globalCompositeOperation = 'copy';
1262 ctx.drawImage(document.getElementById('yellow75_12.png'), 0, 0);
1263 isPixel(ctx, 50,25, 255,255,0,191, 5);
1264
1265
1266 }
1267 </script>
1268 <img src="image_yellow75.png" id="yellow75_12.png" class="resource">
1269
1270 <!-- [[[ test_2d.composite.image.destination-atop.html ]]] -->
1271
1272 <p>Canvas test: 2d.composite.image.destination-atop</p>
1273 <canvas id="c44" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1274 <script>
1275
1276
1277 function test_2d_composite_image_destination_atop() {
1278
1279 var canvas = document.getElementById('c44');
1280 var ctx = canvas.getContext('2d');
1281
1282
1283 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1284 ctx.fillRect(0, 0, 100, 50);
1285 ctx.globalCompositeOperation = 'destination-atop';
1286 ctx.drawImage(document.getElementById('yellow75_13.png'), 0, 0);
1287 isPixel(ctx, 50,25, 127,255,127,191, 5);
1288
1289
1290 }
1291 </script>
1292 <img src="image_yellow75.png" id="yellow75_13.png" class="resource">
1293
1294 <!-- [[[ test_2d.composite.image.destination-in.html ]]] -->
1295
1296 <p>Canvas test: 2d.composite.image.destination-in</p>
1297 <canvas id="c45" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1298 <script>
1299
1300
1301 function test_2d_composite_image_destination_in() {
1302
1303 var canvas = document.getElementById('c45');
1304 var ctx = canvas.getContext('2d');
1305
1306
1307 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1308 ctx.fillRect(0, 0, 100, 50);
1309 ctx.globalCompositeOperation = 'destination-in';
1310 ctx.drawImage(document.getElementById('yellow75_14.png'), 0, 0);
1311 isPixel(ctx, 50,25, 0,255,255,95, 5);
1312
1313
1314 }
1315 </script>
1316 <img src="image_yellow75.png" id="yellow75_14.png" class="resource">
1317
1318 <!-- [[[ test_2d.composite.image.destination-out.html ]]] -->
1319
1320 <p>Canvas test: 2d.composite.image.destination-out</p>
1321 <canvas id="c46" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1322 <script>
1323
1324
1325 function test_2d_composite_image_destination_out() {
1326
1327 var canvas = document.getElementById('c46');
1328 var ctx = canvas.getContext('2d');
1329
1330
1331 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1332 ctx.fillRect(0, 0, 100, 50);
1333 ctx.globalCompositeOperation = 'destination-out';
1334 ctx.drawImage(document.getElementById('yellow75_15.png'), 0, 0);
1335 isPixel(ctx, 50,25, 0,255,255,31, 5);
1336
1337
1338 }
1339 </script>
1340 <img src="image_yellow75.png" id="yellow75_15.png" class="resource">
1341
1342 <!-- [[[ test_2d.composite.image.destination-over.html ]]] -->
1343
1344 <p>Canvas test: 2d.composite.image.destination-over</p>
1345 <canvas id="c47" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1346 <script>
1347
1348
1349 function test_2d_composite_image_destination_over() {
1350
1351 var canvas = document.getElementById('c47');
1352 var ctx = canvas.getContext('2d');
1353
1354
1355 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1356 ctx.fillRect(0, 0, 100, 50);
1357 ctx.globalCompositeOperation = 'destination-over';
1358 ctx.drawImage(document.getElementById('yellow75_16.png'), 0, 0);
1359 isPixel(ctx, 50,25, 109,255,145,223, 5);
1360
1361
1362 }
1363 </script>
1364 <img src="image_yellow75.png" id="yellow75_16.png" class="resource">
1365
1366 <!-- [[[ test_2d.composite.image.lighter.html ]]] -->
1367
1368 <p>Canvas test: 2d.composite.image.lighter</p>
1369 <canvas id="c48" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1370 <script>
1371
1372
1373 function test_2d_composite_image_lighter() {
1374
1375 var canvas = document.getElementById('c48');
1376 var ctx = canvas.getContext('2d');
1377
1378
1379 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1380 ctx.fillRect(0, 0, 100, 50);
1381 ctx.globalCompositeOperation = 'lighter';
1382 ctx.drawImage(document.getElementById('yellow75_17.png'), 0, 0);
1383 isPixel(ctx, 50,25, 191,255,127,255, 5);
1384
1385
1386 }
1387 </script>
1388 <img src="image_yellow75.png" id="yellow75_17.png" class="resource">
1389
1390 <!-- [[[ test_2d.composite.image.source-atop.html ]]] -->
1391
1392 <p>Canvas test: 2d.composite.image.source-atop</p>
1393 <canvas id="c49" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1394 <script>
1395
1396
1397 function test_2d_composite_image_source_atop() {
1398
1399 var canvas = document.getElementById('c49');
1400 var ctx = canvas.getContext('2d');
1401
1402
1403 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1404 ctx.fillRect(0, 0, 100, 50);
1405 ctx.globalCompositeOperation = 'source-atop';
1406 ctx.drawImage(document.getElementById('yellow75_18.png'), 0, 0);
1407 isPixel(ctx, 50,25, 191,255,63,127, 5);
1408
1409
1410 }
1411 </script>
1412 <img src="image_yellow75.png" id="yellow75_18.png" class="resource">
1413
1414 <!-- [[[ test_2d.composite.image.source-in.html ]]] -->
1415
1416 <p>Canvas test: 2d.composite.image.source-in</p>
1417 <canvas id="c50" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1418 <script>
1419
1420
1421 function test_2d_composite_image_source_in() {
1422
1423 var canvas = document.getElementById('c50');
1424 var ctx = canvas.getContext('2d');
1425
1426
1427 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1428 ctx.fillRect(0, 0, 100, 50);
1429 ctx.globalCompositeOperation = 'source-in';
1430 ctx.drawImage(document.getElementById('yellow75_19.png'), 0, 0);
1431 isPixel(ctx, 50,25, 255,255,0,95, 5);
1432
1433
1434 }
1435 </script>
1436 <img src="image_yellow75.png" id="yellow75_19.png" class="resource">
1437
1438 <!-- [[[ test_2d.composite.image.source-out.html ]]] -->
1439
1440 <p>Canvas test: 2d.composite.image.source-out</p>
1441 <canvas id="c51" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1442 <script>
1443
1444
1445 function test_2d_composite_image_source_out() {
1446
1447 var canvas = document.getElementById('c51');
1448 var ctx = canvas.getContext('2d');
1449
1450
1451 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1452 ctx.fillRect(0, 0, 100, 50);
1453 ctx.globalCompositeOperation = 'source-out';
1454 ctx.drawImage(document.getElementById('yellow75_20.png'), 0, 0);
1455 isPixel(ctx, 50,25, 255,255,0,95, 5);
1456
1457
1458 }
1459 </script>
1460 <img src="image_yellow75.png" id="yellow75_20.png" class="resource">
1461
1462 <!-- [[[ test_2d.composite.image.source-over.html ]]] -->
1463
1464 <p>Canvas test: 2d.composite.image.source-over</p>
1465 <canvas id="c52" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1466 <script>
1467
1468
1469 function test_2d_composite_image_source_over() {
1470
1471 var canvas = document.getElementById('c52');
1472 var ctx = canvas.getContext('2d');
1473
1474
1475 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1476 ctx.fillRect(0, 0, 100, 50);
1477 ctx.globalCompositeOperation = 'source-over';
1478 ctx.drawImage(document.getElementById('yellow75_21.png'), 0, 0);
1479 isPixel(ctx, 50,25, 218,255,36,223, 5);
1480
1481
1482 }
1483 </script>
1484 <img src="image_yellow75.png" id="yellow75_21.png" class="resource">
1485
1486 <!-- [[[ test_2d.composite.image.xor.html ]]] -->
1487
1488 <p>Canvas test: 2d.composite.image.xor</p>
1489 <canvas id="c53" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1490 <script>
1491
1492
1493 function test_2d_composite_image_xor() {
1494
1495 var canvas = document.getElementById('c53');
1496 var ctx = canvas.getContext('2d');
1497
1498
1499 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1500 ctx.fillRect(0, 0, 100, 50);
1501 ctx.globalCompositeOperation = 'xor';
1502 ctx.drawImage(document.getElementById('yellow75_22.png'), 0, 0);
1503 isPixel(ctx, 50,25, 191,255,63,127, 5);
1504
1505
1506 }
1507 </script>
1508 <img src="image_yellow75.png" id="yellow75_22.png" class="resource">
1509
1510 <!-- [[[ test_2d.composite.operation.casesensitive.html ]]] -->
1511
1512 <p>Canvas test: 2d.composite.operation.casesensitive - bug 401788</p>
1513 <canvas id="c54" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1514 <script>
1515
1516 function test_2d_composite_operation_casesensitive() {
1517
1518 var canvas = document.getElementById('c54');
1519 var ctx = canvas.getContext('2d');
1520
1521 var _thrown_outer = false;
1522 try {
1523
1524 ctx.globalCompositeOperation = 'xor';
1525 ctx.globalCompositeOperation = 'Source-over';
1526 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1527
1528 } catch (e) {
1529 _thrown_outer = true;
1530 }
1531 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
1532
1533
1534 }
1535 </script>
1536
1537 <!-- [[[ test_2d.composite.operation.clear.html ]]] -->
1538
1539 <p>Canvas test: 2d.composite.operation.clear</p>
1540 <canvas id="c55" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1541 <script>
1542
1543 function test_2d_composite_operation_clear() {
1544
1545 var canvas = document.getElementById('c55');
1546 var ctx = canvas.getContext('2d');
1547
1548 ctx.globalCompositeOperation = 'xor';
1549 ctx.globalCompositeOperation = 'clear';
1550 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1551
1552
1553 }
1554 </script>
1555
1556 <!-- [[[ test_2d.composite.operation.darker.html ]]] -->
1557
1558 <p>Canvas test: 2d.composite.operation.darker</p>
1559 <canvas id="c56" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1560 <script>
1561
1562 function test_2d_composite_operation_darker() {
1563
1564 var canvas = document.getElementById('c56');
1565 var ctx = canvas.getContext('2d');
1566
1567 ctx.globalCompositeOperation = 'xor';
1568 ctx.globalCompositeOperation = 'darker';
1569 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1570
1571
1572 }
1573 </script>
1574
1575 <!-- [[[ test_2d.composite.operation.default.html ]]] -->
1576
1577 <p>Canvas test: 2d.composite.operation.default</p>
1578 <canvas id="c57" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1579 <script>
1580
1581 function test_2d_composite_operation_default() {
1582
1583 var canvas = document.getElementById('c57');
1584 var ctx = canvas.getContext('2d');
1585
1586 ok(ctx.globalCompositeOperation == 'source-over', "ctx.globalCompositeOperation == 'source-over'");
1587
1588
1589 }
1590 </script>
1591
1592 <!-- [[[ test_2d.composite.operation.get.html ]]] -->
1593
1594 <p>Canvas test: 2d.composite.operation.get</p>
1595 <canvas id="c58" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1596 <script>
1597
1598 function test_2d_composite_operation_get() {
1599
1600 var canvas = document.getElementById('c58');
1601 var ctx = canvas.getContext('2d');
1602
1603 var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
1604 'destination-atop', 'destination-in', 'destination-out', 'destination-over',
1605 'lighter', 'copy', 'xor'];
1606 for (var i = 0; i < modes.length; ++i)
1607 {
1608 ctx.globalCompositeOperation = modes[i];
1609 ok(ctx.globalCompositeOperation == modes[i], "ctx.globalCompositeOperation == modes[\""+(i)+"\"]");
1610 }
1611
1612
1613 }
1614 </script>
1615
1616 <!-- [[[ test_2d.composite.operation.highlight.html ]]] -->
1617
1618 <p>Canvas test: 2d.composite.operation.highlight - bug 401788</p>
1619 <canvas id="c59" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1620 <script>
1621
1622 function test_2d_composite_operation_highlight() {
1623
1624 var canvas = document.getElementById('c59');
1625 var ctx = canvas.getContext('2d');
1626
1627 var _thrown_outer = false;
1628 try {
1629
1630 ctx.globalCompositeOperation = 'xor';
1631 ctx.globalCompositeOperation = 'highlight';
1632 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1633
1634 } catch (e) {
1635 _thrown_outer = true;
1636 }
1637 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
1638
1639
1640 }
1641 </script>
1642
1643 <!-- [[[ test_2d.composite.operation.nullsuffix.html ]]] -->
1644
1645 <p>Canvas test: 2d.composite.operation.nullsuffix - bug 401788</p>
1646 <canvas id="c60" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1647 <script>
1648
1649 function test_2d_composite_operation_nullsuffix() {
1650
1651 var canvas = document.getElementById('c60');
1652 var ctx = canvas.getContext('2d');
1653
1654 var _thrown_outer = false;
1655 try {
1656
1657 ctx.globalCompositeOperation = 'xor';
1658 ctx.globalCompositeOperation = 'source-over\0';
1659 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1660
1661 } catch (e) {
1662 _thrown_outer = true;
1663 }
1664 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
1665
1666
1667 }
1668 </script>
1669
1670 <!-- [[[ test_2d.composite.operation.over.html ]]] -->
1671
1672 <p>Canvas test: 2d.composite.operation.over</p>
1673 <canvas id="c61" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1674 <script>
1675
1676 function test_2d_composite_operation_over() {
1677
1678 var canvas = document.getElementById('c61');
1679 var ctx = canvas.getContext('2d');
1680
1681 ctx.globalCompositeOperation = 'xor';
1682 ctx.globalCompositeOperation = 'over';
1683 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1684
1685
1686 }
1687 </script>
1688
1689 <!-- [[[ test_2d.composite.operation.unrecognised.html ]]] -->
1690
1691 <p>Canvas test: 2d.composite.operation.unrecognised - bug 401788</p>
1692 <canvas id="c62" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1693 <script>
1694
1695 function test_2d_composite_operation_unrecognised() {
1696
1697 var canvas = document.getElementById('c62');
1698 var ctx = canvas.getContext('2d');
1699
1700 var _thrown_outer = false;
1701 try {
1702
1703 ctx.globalCompositeOperation = 'xor';
1704 ctx.globalCompositeOperation = 'nonexistent';
1705 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1706
1707 } catch (e) {
1708 _thrown_outer = true;
1709 }
1710 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
1711
1712
1713 }
1714 </script>
1715
1716 <!-- [[[ test_2d.composite.solid.copy.html ]]] -->
1717
1718 <p>Canvas test: 2d.composite.solid.copy</p>
1719 <canvas id="c63" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1720 <script>
1721
1722
1723 function test_2d_composite_solid_copy() {
1724
1725 var canvas = document.getElementById('c63');
1726 var ctx = canvas.getContext('2d');
1727
1728
1729 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1730 ctx.fillRect(0, 0, 100, 50);
1731 ctx.globalCompositeOperation = 'copy';
1732 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1733 ctx.fillRect(0, 0, 100, 50);
1734 isPixel(ctx, 50,25, 255,255,0,255, 5);
1735
1736
1737 }
1738 </script>
1739
1740 <!-- [[[ test_2d.composite.solid.destination-atop.html ]]] -->
1741
1742 <p>Canvas test: 2d.composite.solid.destination-atop</p>
1743 <canvas id="c64" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1744 <script>
1745
1746
1747 function test_2d_composite_solid_destination_atop() {
1748
1749 var canvas = document.getElementById('c64');
1750 var ctx = canvas.getContext('2d');
1751
1752
1753 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1754 ctx.fillRect(0, 0, 100, 50);
1755 ctx.globalCompositeOperation = 'destination-atop';
1756 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1757 ctx.fillRect(0, 0, 100, 50);
1758 isPixel(ctx, 50,25, 0,255,255,255, 5);
1759
1760
1761 }
1762 </script>
1763
1764 <!-- [[[ test_2d.composite.solid.destination-in.html ]]] -->
1765
1766 <p>Canvas test: 2d.composite.solid.destination-in</p>
1767 <canvas id="c65" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1768 <script>
1769
1770
1771 function test_2d_composite_solid_destination_in() {
1772
1773 var canvas = document.getElementById('c65');
1774 var ctx = canvas.getContext('2d');
1775
1776
1777 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1778 ctx.fillRect(0, 0, 100, 50);
1779 ctx.globalCompositeOperation = 'destination-in';
1780 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1781 ctx.fillRect(0, 0, 100, 50);
1782 isPixel(ctx, 50,25, 0,255,255,255, 5);
1783
1784
1785 }
1786 </script>
1787
1788 <!-- [[[ test_2d.composite.solid.destination-out.html ]]] -->
1789
1790 <p>Canvas test: 2d.composite.solid.destination-out</p>
1791 <canvas id="c66" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1792 <script>
1793
1794
1795 function test_2d_composite_solid_destination_out() {
1796
1797 var canvas = document.getElementById('c66');
1798 var ctx = canvas.getContext('2d');
1799
1800
1801 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1802 ctx.fillRect(0, 0, 100, 50);
1803 ctx.globalCompositeOperation = 'destination-out';
1804 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1805 ctx.fillRect(0, 0, 100, 50);
1806 isPixel(ctx, 50,25, 0,0,0,0, 5);
1807
1808
1809 }
1810 </script>
1811
1812 <!-- [[[ test_2d.composite.solid.destination-over.html ]]] -->
1813
1814 <p>Canvas test: 2d.composite.solid.destination-over</p>
1815 <canvas id="c67" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1816 <script>
1817
1818
1819 function test_2d_composite_solid_destination_over() {
1820
1821 var canvas = document.getElementById('c67');
1822 var ctx = canvas.getContext('2d');
1823
1824
1825 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1826 ctx.fillRect(0, 0, 100, 50);
1827 ctx.globalCompositeOperation = 'destination-over';
1828 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1829 ctx.fillRect(0, 0, 100, 50);
1830 isPixel(ctx, 50,25, 0,255,255,255, 5);
1831
1832
1833 }
1834 </script>
1835
1836 <!-- [[[ test_2d.composite.solid.lighter.html ]]] -->
1837
1838 <p>Canvas test: 2d.composite.solid.lighter</p>
1839 <canvas id="c68" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1840 <script>
1841
1842
1843 function test_2d_composite_solid_lighter() {
1844
1845 var canvas = document.getElementById('c68');
1846 var ctx = canvas.getContext('2d');
1847
1848
1849 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1850 ctx.fillRect(0, 0, 100, 50);
1851 ctx.globalCompositeOperation = 'lighter';
1852 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1853 ctx.fillRect(0, 0, 100, 50);
1854 isPixel(ctx, 50,25, 255,255,255,255, 5);
1855
1856
1857 }
1858 </script>
1859
1860 <!-- [[[ test_2d.composite.solid.source-atop.html ]]] -->
1861
1862 <p>Canvas test: 2d.composite.solid.source-atop</p>
1863 <canvas id="c69" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1864 <script>
1865
1866
1867 function test_2d_composite_solid_source_atop() {
1868
1869 var canvas = document.getElementById('c69');
1870 var ctx = canvas.getContext('2d');
1871
1872
1873 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1874 ctx.fillRect(0, 0, 100, 50);
1875 ctx.globalCompositeOperation = 'source-atop';
1876 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1877 ctx.fillRect(0, 0, 100, 50);
1878 isPixel(ctx, 50,25, 255,255,0,255, 5);
1879
1880
1881 }
1882 </script>
1883
1884 <!-- [[[ test_2d.composite.solid.source-in.html ]]] -->
1885
1886 <p>Canvas test: 2d.composite.solid.source-in</p>
1887 <canvas id="c70" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1888 <script>
1889
1890
1891 function test_2d_composite_solid_source_in() {
1892
1893 var canvas = document.getElementById('c70');
1894 var ctx = canvas.getContext('2d');
1895
1896
1897 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1898 ctx.fillRect(0, 0, 100, 50);
1899 ctx.globalCompositeOperation = 'source-in';
1900 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1901 ctx.fillRect(0, 0, 100, 50);
1902 isPixel(ctx, 50,25, 255,255,0,255, 5);
1903
1904
1905 }
1906 </script>
1907
1908 <!-- [[[ test_2d.composite.solid.source-out.html ]]] -->
1909
1910 <p>Canvas test: 2d.composite.solid.source-out</p>
1911 <canvas id="c71" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1912 <script>
1913
1914
1915 function test_2d_composite_solid_source_out() {
1916
1917 var canvas = document.getElementById('c71');
1918 var ctx = canvas.getContext('2d');
1919
1920
1921 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1922 ctx.fillRect(0, 0, 100, 50);
1923 ctx.globalCompositeOperation = 'source-out';
1924 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1925 ctx.fillRect(0, 0, 100, 50);
1926 isPixel(ctx, 50,25, 0,0,0,0, 5);
1927
1928
1929 }
1930 </script>
1931
1932 <!-- [[[ test_2d.composite.solid.source-over.html ]]] -->
1933
1934 <p>Canvas test: 2d.composite.solid.source-over</p>
1935 <canvas id="c72" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1936 <script>
1937
1938
1939 function test_2d_composite_solid_source_over() {
1940
1941 var canvas = document.getElementById('c72');
1942 var ctx = canvas.getContext('2d');
1943
1944
1945 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1946 ctx.fillRect(0, 0, 100, 50);
1947 ctx.globalCompositeOperation = 'source-over';
1948 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1949 ctx.fillRect(0, 0, 100, 50);
1950 isPixel(ctx, 50,25, 255,255,0,255, 5);
1951
1952
1953 }
1954 </script>
1955
1956 <!-- [[[ test_2d.composite.solid.xor.html ]]] -->
1957
1958 <p>Canvas test: 2d.composite.solid.xor</p>
1959 <canvas id="c73" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1960 <script>
1961
1962
1963 function test_2d_composite_solid_xor() {
1964
1965 var canvas = document.getElementById('c73');
1966 var ctx = canvas.getContext('2d');
1967
1968
1969 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1970 ctx.fillRect(0, 0, 100, 50);
1971 ctx.globalCompositeOperation = 'xor';
1972 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1973 ctx.fillRect(0, 0, 100, 50);
1974 isPixel(ctx, 50,25, 0,0,0,0, 5);
1975
1976
1977 }
1978 </script>
1979
1980 <!-- [[[ test_2d.composite.transparent.copy.html ]]] -->
1981
1982 <p>Canvas test: 2d.composite.transparent.copy</p>
1983 <canvas id="c74" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1984 <script>
1985
1986
1987 function test_2d_composite_transparent_copy() {
1988
1989 var canvas = document.getElementById('c74');
1990 var ctx = canvas.getContext('2d');
1991
1992
1993 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
1994 ctx.fillRect(0, 0, 100, 50);
1995 ctx.globalCompositeOperation = 'copy';
1996 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
1997 ctx.fillRect(0, 0, 100, 50);
1998 isPixel(ctx, 50,25, 0,0,255,191, 5);
1999
2000
2001 }
2002 </script>
2003
2004 <!-- [[[ test_2d.composite.transparent.destination-atop.html ]]] -->
2005
2006 <p>Canvas test: 2d.composite.transparent.destination-atop</p>
2007 <canvas id="c75" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2008 <script>
2009
2010
2011 function test_2d_composite_transparent_destination_atop() {
2012
2013 var canvas = document.getElementById('c75');
2014 var ctx = canvas.getContext('2d');
2015
2016
2017 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2018 ctx.fillRect(0, 0, 100, 50);
2019 ctx.globalCompositeOperation = 'destination-atop';
2020 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2021 ctx.fillRect(0, 0, 100, 50);
2022 isPixel(ctx, 50,25, 0,127,127,191, 5);
2023
2024
2025 }
2026 </script>
2027
2028 <!-- [[[ test_2d.composite.transparent.destination-in.html ]]] -->
2029
2030 <p>Canvas test: 2d.composite.transparent.destination-in</p>
2031 <canvas id="c76" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2032 <script>
2033
2034
2035 function test_2d_composite_transparent_destination_in() {
2036
2037 var canvas = document.getElementById('c76');
2038 var ctx = canvas.getContext('2d');
2039
2040
2041 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2042 ctx.fillRect(0, 0, 100, 50);
2043 ctx.globalCompositeOperation = 'destination-in';
2044 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2045 ctx.fillRect(0, 0, 100, 50);
2046 isPixel(ctx, 50,25, 0,255,0,95, 5);
2047
2048
2049 }
2050 </script>
2051
2052 <!-- [[[ test_2d.composite.transparent.destination-out.html ]]] -->
2053
2054 <p>Canvas test: 2d.composite.transparent.destination-out</p>
2055 <canvas id="c77" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2056 <script>
2057
2058
2059 function test_2d_composite_transparent_destination_out() {
2060
2061 var canvas = document.getElementById('c77');
2062 var ctx = canvas.getContext('2d');
2063
2064
2065 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2066 ctx.fillRect(0, 0, 100, 50);
2067 ctx.globalCompositeOperation = 'destination-out';
2068 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2069 ctx.fillRect(0, 0, 100, 50);
2070 isPixel(ctx, 50,25, 0,255,0,31, 5);
2071
2072
2073 }
2074 </script>
2075
2076 <!-- [[[ test_2d.composite.transparent.destination-over.html ]]] -->
2077
2078 <p>Canvas test: 2d.composite.transparent.destination-over</p>
2079 <canvas id="c78" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2080 <script>
2081
2082
2083 function test_2d_composite_transparent_destination_over() {
2084
2085 var canvas = document.getElementById('c78');
2086 var ctx = canvas.getContext('2d');
2087
2088
2089 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2090 ctx.fillRect(0, 0, 100, 50);
2091 ctx.globalCompositeOperation = 'destination-over';
2092 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2093 ctx.fillRect(0, 0, 100, 50);
2094 isPixel(ctx, 50,25, 0,145,109,223, 5);
2095
2096
2097 }
2098 </script>
2099
2100 <!-- [[[ test_2d.composite.transparent.lighter.html ]]] -->
2101
2102 <p>Canvas test: 2d.composite.transparent.lighter</p>
2103 <canvas id="c79" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2104 <script>
2105
2106
2107 function test_2d_composite_transparent_lighter() {
2108
2109 var canvas = document.getElementById('c79');
2110 var ctx = canvas.getContext('2d');
2111
2112
2113 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2114 ctx.fillRect(0, 0, 100, 50);
2115 ctx.globalCompositeOperation = 'lighter';
2116 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2117 ctx.fillRect(0, 0, 100, 50);
2118 isPixel(ctx, 50,25, 0,127,191,255, 5);
2119
2120
2121 }
2122 </script>
2123
2124 <!-- [[[ test_2d.composite.transparent.source-atop.html ]]] -->
2125
2126 <p>Canvas test: 2d.composite.transparent.source-atop</p>
2127 <canvas id="c80" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2128 <script>
2129
2130
2131 function test_2d_composite_transparent_source_atop() {
2132
2133 var canvas = document.getElementById('c80');
2134 var ctx = canvas.getContext('2d');
2135
2136
2137 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2138 ctx.fillRect(0, 0, 100, 50);
2139 ctx.globalCompositeOperation = 'source-atop';
2140 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2141 ctx.fillRect(0, 0, 100, 50);
2142 isPixel(ctx, 50,25, 0,63,191,127, 5);
2143
2144
2145 }
2146 </script>
2147
2148 <!-- [[[ test_2d.composite.transparent.source-in.html ]]] -->
2149
2150 <p>Canvas test: 2d.composite.transparent.source-in</p>
2151 <canvas id="c81" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2152 <script>
2153
2154
2155 function test_2d_composite_transparent_source_in() {
2156
2157 var canvas = document.getElementById('c81');
2158 var ctx = canvas.getContext('2d');
2159
2160
2161 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2162 ctx.fillRect(0, 0, 100, 50);
2163 ctx.globalCompositeOperation = 'source-in';
2164 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2165 ctx.fillRect(0, 0, 100, 50);
2166 isPixel(ctx, 50,25, 0,0,255,95, 5);
2167
2168
2169 }
2170 </script>
2171
2172 <!-- [[[ test_2d.composite.transparent.source-out.html ]]] -->
2173
2174 <p>Canvas test: 2d.composite.transparent.source-out</p>
2175 <canvas id="c82" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2176 <script>
2177
2178
2179 function test_2d_composite_transparent_source_out() {
2180
2181 var canvas = document.getElementById('c82');
2182 var ctx = canvas.getContext('2d');
2183
2184
2185 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2186 ctx.fillRect(0, 0, 100, 50);
2187 ctx.globalCompositeOperation = 'source-out';
2188 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2189 ctx.fillRect(0, 0, 100, 50);
2190 isPixel(ctx, 50,25, 0,0,255,95, 5);
2191
2192
2193 }
2194 </script>
2195
2196 <!-- [[[ test_2d.composite.transparent.source-over.html ]]] -->
2197
2198 <p>Canvas test: 2d.composite.transparent.source-over</p>
2199 <canvas id="c83" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2200 <script>
2201
2202
2203 function test_2d_composite_transparent_source_over() {
2204
2205 var canvas = document.getElementById('c83');
2206 var ctx = canvas.getContext('2d');
2207
2208
2209 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2210 ctx.fillRect(0, 0, 100, 50);
2211 ctx.globalCompositeOperation = 'source-over';
2212 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2213 ctx.fillRect(0, 0, 100, 50);
2214 isPixel(ctx, 50,25, 0,36,218,223, 5);
2215
2216
2217 }
2218 </script>
2219
2220 <!-- [[[ test_2d.composite.transparent.xor.html ]]] -->
2221
2222 <p>Canvas test: 2d.composite.transparent.xor</p>
2223 <canvas id="c84" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2224 <script>
2225
2226
2227 function test_2d_composite_transparent_xor() {
2228
2229 var canvas = document.getElementById('c84');
2230 var ctx = canvas.getContext('2d');
2231
2232
2233 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2234 ctx.fillRect(0, 0, 100, 50);
2235 ctx.globalCompositeOperation = 'xor';
2236 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2237 ctx.fillRect(0, 0, 100, 50);
2238 isPixel(ctx, 50,25, 0,63,191,127, 5);
2239
2240
2241 }
2242 </script>
2243
2244 <!-- [[[ test_2d.composite.uncovered.fill.copy.html ]]] -->
2245
2246 <p>Canvas test: 2d.composite.uncovered.fill.copy</p>
2247 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2248 <canvas id="c85" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2249 <script>
2250
2251
2252
2253 function test_2d_composite_uncovered_fill_copy() {
2254
2255 var canvas = document.getElementById('c85');
2256 var ctx = canvas.getContext('2d');
2257
2258
2259 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2260 ctx.fillRect(0, 0, 100, 50);
2261 ctx.globalCompositeOperation = 'copy';
2262 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2263 ctx.translate(0, 25);
2264 ctx.fillRect(0, 50, 100, 50);
2265 isPixel(ctx, 50,25, 0,0,0,0, 5);
2266
2267
2268 }
2269 </script>
2270
2271 <!-- [[[ test_2d.composite.uncovered.fill.destination-atop.html ]]] -->
2272
2273 <p>Canvas test: 2d.composite.uncovered.fill.destination-atop</p>
2274 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2275 <canvas id="c86" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2276 <script>
2277
2278
2279
2280 function test_2d_composite_uncovered_fill_destination_atop() {
2281
2282 var canvas = document.getElementById('c86');
2283 var ctx = canvas.getContext('2d');
2284
2285
2286 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2287 ctx.fillRect(0, 0, 100, 50);
2288 ctx.globalCompositeOperation = 'destination-atop';
2289 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2290 ctx.translate(0, 25);
2291 ctx.fillRect(0, 50, 100, 50);
2292 isPixel(ctx, 50,25, 0,0,0,0, 5);
2293
2294
2295 }
2296 </script>
2297
2298 <!-- [[[ test_2d.composite.uncovered.fill.destination-in.html ]]] -->
2299
2300 <p>Canvas test: 2d.composite.uncovered.fill.destination-in</p>
2301 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2302 <canvas id="c87" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2303 <script>
2304
2305
2306
2307 function test_2d_composite_uncovered_fill_destination_in() {
2308
2309 var canvas = document.getElementById('c87');
2310 var ctx = canvas.getContext('2d');
2311
2312
2313 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2314 ctx.fillRect(0, 0, 100, 50);
2315 ctx.globalCompositeOperation = 'destination-in';
2316 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2317 ctx.translate(0, 25);
2318 ctx.fillRect(0, 50, 100, 50);
2319 isPixel(ctx, 50,25, 0,0,0,0, 5);
2320
2321
2322 }
2323 </script>
2324
2325 <!-- [[[ test_2d.composite.uncovered.fill.source-in.html ]]] -->
2326
2327 <p>Canvas test: 2d.composite.uncovered.fill.source-in</p>
2328 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2329 <canvas id="c88" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2330 <script>
2331
2332
2333
2334 function test_2d_composite_uncovered_fill_source_in() {
2335
2336 var canvas = document.getElementById('c88');
2337 var ctx = canvas.getContext('2d');
2338
2339
2340 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2341 ctx.fillRect(0, 0, 100, 50);
2342 ctx.globalCompositeOperation = 'source-in';
2343 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2344 ctx.translate(0, 25);
2345 ctx.fillRect(0, 50, 100, 50);
2346 isPixel(ctx, 50,25, 0,0,0,0, 5);
2347
2348
2349 }
2350 </script>
2351
2352 <!-- [[[ test_2d.composite.uncovered.fill.source-out.html ]]] -->
2353
2354 <p>Canvas test: 2d.composite.uncovered.fill.source-out</p>
2355 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2356 <canvas id="c89" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2357 <script>
2358
2359
2360
2361 function test_2d_composite_uncovered_fill_source_out() {
2362
2363 var canvas = document.getElementById('c89');
2364 var ctx = canvas.getContext('2d');
2365
2366
2367 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2368 ctx.fillRect(0, 0, 100, 50);
2369 ctx.globalCompositeOperation = 'source-out';
2370 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2371 ctx.translate(0, 25);
2372 ctx.fillRect(0, 50, 100, 50);
2373 isPixel(ctx, 50,25, 0,0,0,0, 5);
2374
2375
2376 }
2377 </script>
2378
2379 <!-- [[[ test_2d.composite.uncovered.image.copy.html ]]] -->
2380
2381 <p>Canvas test: 2d.composite.uncovered.image.copy</p>
2382 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2383 <canvas id="c90" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2384 <script>
2385
2386
2387
2388 function test_2d_composite_uncovered_image_copy() {
2389
2390 var canvas = document.getElementById('c90');
2391 var ctx = canvas.getContext('2d');
2392
2393
2394 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2395 ctx.fillRect(0, 0, 100, 50);
2396 ctx.globalCompositeOperation = 'copy';
2397 ctx.drawImage(document.getElementById('yellow_1.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2398 isPixel(ctx, 15,15, 0,0,0,0, 5);
2399 isPixel(ctx, 50,25, 0,0,0,0, 5);
2400
2401
2402 }
2403 </script>
2404 <img src="image_yellow.png" id="yellow_1.png" class="resource">
2405
2406 <!-- [[[ test_2d.composite.uncovered.image.destination-atop.html ]]] -->
2407
2408 <p>Canvas test: 2d.composite.uncovered.image.destination-atop</p>
2409 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2410 <canvas id="c91" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2411 <script>
2412
2413
2414
2415 function test_2d_composite_uncovered_image_destination_atop() {
2416
2417 var canvas = document.getElementById('c91');
2418 var ctx = canvas.getContext('2d');
2419
2420
2421 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2422 ctx.fillRect(0, 0, 100, 50);
2423 ctx.globalCompositeOperation = 'destination-atop';
2424 ctx.drawImage(document.getElementById('yellow_2.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2425 isPixel(ctx, 15,15, 0,0,0,0, 5);
2426 isPixel(ctx, 50,25, 0,0,0,0, 5);
2427
2428
2429 }
2430 </script>
2431 <img src="image_yellow.png" id="yellow_2.png" class="resource">
2432
2433 <!-- [[[ test_2d.composite.uncovered.image.destination-in.html ]]] -->
2434
2435 <p>Canvas test: 2d.composite.uncovered.image.destination-in</p>
2436 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2437 <canvas id="c92" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2438 <script>
2439
2440
2441
2442 function test_2d_composite_uncovered_image_destination_in() {
2443
2444 var canvas = document.getElementById('c92');
2445 var ctx = canvas.getContext('2d');
2446
2447
2448 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2449 ctx.fillRect(0, 0, 100, 50);
2450 ctx.globalCompositeOperation = 'destination-in';
2451 ctx.drawImage(document.getElementById('yellow_3.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2452 isPixel(ctx, 15,15, 0,0,0,0, 5);
2453 isPixel(ctx, 50,25, 0,0,0,0, 5);
2454
2455
2456 }
2457 </script>
2458 <img src="image_yellow.png" id="yellow_3.png" class="resource">
2459
2460 <!-- [[[ test_2d.composite.uncovered.image.source-in.html ]]] -->
2461
2462 <p>Canvas test: 2d.composite.uncovered.image.source-in</p>
2463 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2464 <canvas id="c93" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2465 <script>
2466
2467
2468
2469 function test_2d_composite_uncovered_image_source_in() {
2470
2471 var canvas = document.getElementById('c93');
2472 var ctx = canvas.getContext('2d');
2473
2474
2475 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2476 ctx.fillRect(0, 0, 100, 50);
2477 ctx.globalCompositeOperation = 'source-in';
2478 ctx.drawImage(document.getElementById('yellow_4.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2479 isPixel(ctx, 15,15, 0,0,0,0, 5);
2480 isPixel(ctx, 50,25, 0,0,0,0, 5);
2481
2482
2483 }
2484 </script>
2485 <img src="image_yellow.png" id="yellow_4.png" class="resource">
2486
2487 <!-- [[[ test_2d.composite.uncovered.image.source-out.html ]]] -->
2488
2489 <p>Canvas test: 2d.composite.uncovered.image.source-out</p>
2490 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2491 <canvas id="c94" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2492 <script>
2493
2494
2495
2496 function test_2d_composite_uncovered_image_source_out() {
2497
2498 var canvas = document.getElementById('c94');
2499 var ctx = canvas.getContext('2d');
2500
2501
2502 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2503 ctx.fillRect(0, 0, 100, 50);
2504 ctx.globalCompositeOperation = 'source-out';
2505 ctx.drawImage(document.getElementById('yellow_5.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2506 isPixel(ctx, 15,15, 0,0,0,0, 5);
2507 isPixel(ctx, 50,25, 0,0,0,0, 5);
2508
2509
2510 }
2511 </script>
2512 <img src="image_yellow.png" id="yellow_5.png" class="resource">
2513
2514 <!-- [[[ test_2d.composite.uncovered.pattern.copy.html ]]] -->
2515
2516 <p>Canvas test: 2d.composite.uncovered.pattern.copy</p>
2517 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2518 <canvas id="c95" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2519 <script>
2520
2521
2522
2523 function test_2d_composite_uncovered_pattern_copy() {
2524
2525 var canvas = document.getElementById('c95');
2526 var ctx = canvas.getContext('2d');
2527
2528
2529 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2530 ctx.fillRect(0, 0, 100, 50);
2531 ctx.globalCompositeOperation = 'copy';
2532 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_6.png'), 'no-repeat');
2533 ctx.fillRect(0, 50, 100, 50);
2534 isPixel(ctx, 50,25, 0,0,0,0, 5);
2535
2536
2537 }
2538 </script>
2539 <img src="image_yellow.png" id="yellow_6.png" class="resource">
2540
2541 <!-- [[[ test_2d.composite.uncovered.pattern.destination-atop.html ]]] -->
2542
2543 <p>Canvas test: 2d.composite.uncovered.pattern.destination-atop</p>
2544 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2545 <canvas id="c96" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2546 <script>
2547
2548
2549
2550 function test_2d_composite_uncovered_pattern_destination_atop() {
2551
2552 var canvas = document.getElementById('c96');
2553 var ctx = canvas.getContext('2d');
2554
2555
2556 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2557 ctx.fillRect(0, 0, 100, 50);
2558 ctx.globalCompositeOperation = 'destination-atop';
2559 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_7.png'), 'no-repeat');
2560 ctx.fillRect(0, 50, 100, 50);
2561 isPixel(ctx, 50,25, 0,0,0,0, 5);
2562
2563
2564 }
2565 </script>
2566 <img src="image_yellow.png" id="yellow_7.png" class="resource">
2567
2568 <!-- [[[ test_2d.composite.uncovered.pattern.destination-in.html ]]] -->
2569
2570 <p>Canvas test: 2d.composite.uncovered.pattern.destination-in</p>
2571 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2572 <canvas id="c97" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2573 <script>
2574
2575
2576
2577 function test_2d_composite_uncovered_pattern_destination_in() {
2578
2579 var canvas = document.getElementById('c97');
2580 var ctx = canvas.getContext('2d');
2581
2582
2583 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2584 ctx.fillRect(0, 0, 100, 50);
2585 ctx.globalCompositeOperation = 'destination-in';
2586 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_8.png'), 'no-repeat');
2587 ctx.fillRect(0, 50, 100, 50);
2588 isPixel(ctx, 50,25, 0,0,0,0, 5);
2589
2590
2591 }
2592 </script>
2593 <img src="image_yellow.png" id="yellow_8.png" class="resource">
2594
2595 <!-- [[[ test_2d.composite.uncovered.pattern.source-in.html ]]] -->
2596
2597 <p>Canvas test: 2d.composite.uncovered.pattern.source-in</p>
2598 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2599 <canvas id="c98" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2600 <script>
2601
2602
2603
2604 function test_2d_composite_uncovered_pattern_source_in() {
2605
2606 var canvas = document.getElementById('c98');
2607 var ctx = canvas.getContext('2d');
2608
2609
2610 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2611 ctx.fillRect(0, 0, 100, 50);
2612 ctx.globalCompositeOperation = 'source-in';
2613 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_9.png'), 'no-repeat');
2614 ctx.fillRect(0, 50, 100, 50);
2615 isPixel(ctx, 50,25, 0,0,0,0, 5);
2616
2617
2618 }
2619 </script>
2620 <img src="image_yellow.png" id="yellow_9.png" class="resource">
2621
2622 <!-- [[[ test_2d.composite.uncovered.pattern.source-out.html ]]] -->
2623
2624 <p>Canvas test: 2d.composite.uncovered.pattern.source-out</p>
2625 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2626 <canvas id="c99" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2627 <script>
2628
2629
2630
2631 function test_2d_composite_uncovered_pattern_source_out() {
2632
2633 var canvas = document.getElementById('c99');
2634 var ctx = canvas.getContext('2d');
2635
2636
2637 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2638 ctx.fillRect(0, 0, 100, 50);
2639 ctx.globalCompositeOperation = 'source-out';
2640 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_10.png'), 'no-repeat');
2641 ctx.fillRect(0, 50, 100, 50);
2642 isPixel(ctx, 50,25, 0,0,0,0, 5);
2643
2644
2645 }
2646 </script>
2647 <img src="image_yellow.png" id="yellow_10.png" class="resource">
2648
2649 <!-- [[[ test_2d.drawImage.3arg.html ]]] -->
2650
2651 <p>Canvas test: 2d.drawImage.3arg</p>
2652 <canvas id="c100" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2653 <script>
2654
2655
2656 function test_2d_drawImage_3arg() {
2657
2658 var canvas = document.getElementById('c100');
2659 var ctx = canvas.getContext('2d');
2660
2661 ctx.drawImage(document.getElementById('green_1.png'), 0, 0);
2662 ctx.drawImage(document.getElementById('red_3.png'), -100, 0);
2663 ctx.drawImage(document.getElementById('red_3.png'), 100, 0);
2664 ctx.drawImage(document.getElementById('red_3.png'), 0, -50);
2665 ctx.drawImage(document.getElementById('red_3.png'), 0, 50);
2666
2667 isPixel(ctx, 0,0, 0,255,0,255, 2);
2668 isPixel(ctx, 99,0, 0,255,0,255, 2);
2669 isPixel(ctx, 0,49, 0,255,0,255, 2);
2670 isPixel(ctx, 99,49, 0,255,0,255, 2);
2671
2672
2673 }
2674 </script>
2675 <img src="image_red.png" id="red_3.png" class="resource">
2676 <img src="image_green.png" id="green_1.png" class="resource">
2677
2678 <!-- [[[ test_2d.drawImage.5arg.html ]]] -->
2679
2680 <p>Canvas test: 2d.drawImage.5arg</p>
2681 <canvas id="c101" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2682 <script>
2683
2684
2685 function test_2d_drawImage_5arg() {
2686
2687 var canvas = document.getElementById('c101');
2688 var ctx = canvas.getContext('2d');
2689
2690 ctx.fillStyle = '#f00';
2691 ctx.fillRect(0, 0, 100, 50);
2692 ctx.drawImage(document.getElementById('green_2.png'), 50, 0, 50, 50);
2693 ctx.drawImage(document.getElementById('red_4.png'), 0, 0, 50, 50);
2694 ctx.fillStyle = '#0f0';
2695 ctx.fillRect(0, 0, 50, 50);
2696
2697 isPixel(ctx, 0,0, 0,255,0,255, 2);
2698 isPixel(ctx, 99,0, 0,255,0,255, 2);
2699 isPixel(ctx, 0,49, 0,255,0,255, 2);
2700 isPixel(ctx, 99,49, 0,255,0,255, 2);
2701
2702
2703 }
2704 </script>
2705 <img src="image_red.png" id="red_4.png" class="resource">
2706 <img src="image_green.png" id="green_2.png" class="resource">
2707
2708 <!-- [[[ test_2d.drawImage.9arg.basic.html ]]] -->
2709
2710 <p>Canvas test: 2d.drawImage.9arg.basic</p>
2711 <canvas id="c102" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2712 <script>
2713
2714
2715 function test_2d_drawImage_9arg_basic() {
2716
2717 var canvas = document.getElementById('c102');
2718 var ctx = canvas.getContext('2d');
2719
2720 ctx.fillStyle = '#f00';
2721 ctx.fillRect(0, 0, 100, 50);
2722 ctx.drawImage(document.getElementById('green_3.png'), 0, 0, 100, 50, 0, 0, 100, 50);
2723 isPixel(ctx, 0,0, 0,255,0,255, 2);
2724 isPixel(ctx, 99,0, 0,255,0,255, 2);
2725 isPixel(ctx, 0,49, 0,255,0,255, 2);
2726 isPixel(ctx, 99,49, 0,255,0,255, 2);
2727
2728
2729 }
2730 </script>
2731 <img src="image_green.png" id="green_3.png" class="resource">
2732
2733 <!-- [[[ test_2d.drawImage.9arg.destpos.html ]]] -->
2734
2735 <p>Canvas test: 2d.drawImage.9arg.destpos</p>
2736 <canvas id="c103" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2737 <script>
2738
2739
2740 function test_2d_drawImage_9arg_destpos() {
2741
2742 var canvas = document.getElementById('c103');
2743 var ctx = canvas.getContext('2d');
2744
2745 ctx.fillStyle = '#f00';
2746 ctx.fillRect(0, 0, 100, 50);
2747 ctx.drawImage(document.getElementById('green_4.png'), 0, 0, 100, 50, 0, 0, 100, 50);
2748 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, -100, 0, 100, 50);
2749 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 100, 0, 100, 50);
2750 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 0, -50, 100, 50);
2751 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 0, 50, 100, 50);
2752 isPixel(ctx, 0,0, 0,255,0,255, 2);
2753 isPixel(ctx, 99,0, 0,255,0,255, 2);
2754 isPixel(ctx, 0,49, 0,255,0,255, 2);
2755 isPixel(ctx, 99,49, 0,255,0,255, 2);
2756
2757
2758 }
2759 </script>
2760 <img src="image_red.png" id="red_5.png" class="resource">
2761 <img src="image_green.png" id="green_4.png" class="resource">
2762
2763 <!-- [[[ test_2d.drawImage.9arg.destsize.html ]]] -->
2764
2765 <p>Canvas test: 2d.drawImage.9arg.destsize</p>
2766 <canvas id="c104" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2767 <script>
2768
2769
2770 function test_2d_drawImage_9arg_destsize() {
2771
2772 var canvas = document.getElementById('c104');
2773 var ctx = canvas.getContext('2d');
2774
2775 ctx.fillStyle = '#f00';
2776 ctx.fillRect(0, 0, 100, 50);
2777 ctx.drawImage(document.getElementById('green_5.png'), 1, 1, 1, 1, 0, 0, 100, 50);
2778 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, -50, 0, 50, 50);
2779 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 100, 0, 50, 50);
2780 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 0, -25, 100, 25);
2781 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 0, 50, 100, 25);
2782 isPixel(ctx, 0,0, 0,255,0,255, 2);
2783 isPixel(ctx, 99,0, 0,255,0,255, 2);
2784 isPixel(ctx, 0,49, 0,255,0,255, 2);
2785 isPixel(ctx, 99,49, 0,255,0,255, 2);
2786
2787
2788 }
2789 </script>
2790 <img src="image_red.png" id="red_6.png" class="resource">
2791 <img src="image_green.png" id="green_5.png" class="resource">
2792
2793 <!-- [[[ test_2d.drawImage.9arg.sourcepos.html ]]] -->
2794
2795 <p>Canvas test: 2d.drawImage.9arg.sourcepos</p>
2796 <canvas id="c105" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2797 <script>
2798
2799
2800 function test_2d_drawImage_9arg_sourcepos() {
2801
2802 var canvas = document.getElementById('c105');
2803 var ctx = canvas.getContext('2d');
2804
2805 ctx.fillStyle = '#f00';
2806 ctx.fillRect(0, 0, 100, 50);
2807 ctx.drawImage(document.getElementById('rgrg-256x256_1.png'), 140, 20, 100, 50, 0, 0, 100, 50);
2808 isPixel(ctx, 0,0, 0,255,0,255, 2);
2809 isPixel(ctx, 99,0, 0,255,0,255, 2);
2810 isPixel(ctx, 0,49, 0,255,0,255, 2);
2811 isPixel(ctx, 99,49, 0,255,0,255, 2);
2812
2813
2814 }
2815 </script>
2816 <img src="image_rgrg-256x256.png" id="rgrg-256x256_1.png" class="resource">
2817
2818 <!-- [[[ test_2d.drawImage.9arg.sourcesize.html ]]] -->
2819
2820 <p>Canvas test: 2d.drawImage.9arg.sourcesize</p>
2821 <canvas id="c106" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2822 <script>
2823
2824
2825 function test_2d_drawImage_9arg_sourcesize() {
2826
2827 var canvas = document.getElementById('c106');
2828 var ctx = canvas.getContext('2d');
2829
2830 ctx.fillStyle = '#f00';
2831 ctx.fillRect(0, 0, 100, 50);
2832 ctx.drawImage(document.getElementById('rgrg-256x256_2.png'), 0, 0, 256, 256, 0, 0, 100, 50);
2833 ctx.fillStyle = '#0f0';
2834 ctx.fillRect(0, 0, 51, 26);
2835 ctx.fillRect(49, 24, 51, 26);
2836 isPixel(ctx, 0,0, 0,255,0,255, 3);
2837 isPixel(ctx, 99,0, 0,255,0,255, 3);
2838 isPixel(ctx, 0,49, 0,255,0,255, 3);
2839 isPixel(ctx, 99,49, 0,255,0,255, 3);
2840 isPixel(ctx, 20,20, 0,255,0,255, 3);
2841 isPixel(ctx, 80,20, 0,255,0,255, 3);
2842 isPixel(ctx, 20,30, 0,255,0,255, 3);
2843 isPixel(ctx, 80,30, 0,255,0,255, 3);
2844
2845
2846 }
2847 </script>
2848 <img src="image_rgrg-256x256.png" id="rgrg-256x256_2.png" class="resource">
2849
2850 <!-- [[[ test_2d.drawImage.alpha.html ]]] -->
2851
2852 <p>Canvas test: 2d.drawImage.alpha</p>
2853 <canvas id="c107" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2854 <script>
2855
2856
2857 function test_2d_drawImage_alpha() {
2858
2859 var canvas = document.getElementById('c107');
2860 var ctx = canvas.getContext('2d');
2861
2862 ctx.fillStyle = '#0f0';
2863 ctx.fillRect(0, 0, 100, 50);
2864 ctx.globalAlpha = 0;
2865 ctx.drawImage(document.getElementById('red_7.png'), 0, 0);
2866 isPixel(ctx, 50,25, 0,255,0,255, 2);
2867
2868
2869 }
2870 </script>
2871 <img src="image_red.png" id="red_7.png" class="resource">
2872
2873 <!-- [[[ test_2d.drawImage.animated.apng.html ]]] -->
2874
2875 <p>Canvas test: 2d.drawImage.animated.apng</p>
2876 <!-- Testing: drawImage() of an APNG with no poster frame draws the first frame -->
2877 <canvas id="c108" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2878 <script>
2879
2880
2881 function deferTest() {
2882 _deferred = true;
2883 }
2884 function wrapFunction(f) {
2885 return function () {
2886 f.apply(null, arguments);
2887 };
2888 }
2889
2890 var canvas108 = document.getElementById('c108');
2891 var ctx108 = canvas108.getContext('2d');
2892 var isDone_test_2d_drawImage_animated_apng = false;
2893
2894 function test_2d_drawImage_animated_apng() {
2895
2896 deferTest();
2897 setTimeout(wrapFunction(function () {
2898 ctx108.drawImage(document.getElementById('anim-gr_1.png'), 0, 0);
2899 isPixel(ctx108, 50,25, 0,255,0,255, 2);
2900 isDone_test_2d_drawImage_animated_apng = true;
2901 }), 5000);
2902
2903
2904 }
2905 </script>
2906 <img src="image_anim-gr.png" id="anim-gr_1.png" class="resource">
2907
2908 <!-- [[[ test_2d.drawImage.animated.gif.html ]]] -->
2909
2910 <p>Canvas test: 2d.drawImage.animated.gif</p>
2911 <!-- Testing: drawImage() of an animated GIF draws the first frame -->
2912 <canvas id="c109" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2913 <script>
2914
2915 var canvas109 = document.getElementById('c109');
2916 var ctx109 = canvas109.getContext('2d');
2917 var isDone_test_2d_drawImage_animated_gif = false;
2918
2919 function test_2d_drawImage_animated_gif() {
2920
2921 deferTest();
2922 setTimeout(wrapFunction(function () {
2923 ctx109.drawImage(document.getElementById('anim-gr_1.gif'), 0, 0);
2924 isPixel(ctx109, 50,25, 0,255,0,255, 2);
2925 isDone_test_2d_drawImage_animated_gif = true;
2926 }), 5000);
2927
2928
2929 }
2930 </script>
2931 <img src="image_anim-gr.gif" id="anim-gr_1.gif" class="resource">
2932
2933 <!-- [[[ test_2d.drawImage.animated.poster.html ]]] -->
2934
2935 <p>Canvas test: 2d.drawImage.animated.poster</p>
2936 <!-- Testing: drawImage() of an APNG draws the poster frame -->
2937 <canvas id="c110" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2938 <script>
2939
2940 var canvas110 = document.getElementById('c110');
2941 var ctx110 = canvas110.getContext('2d');
2942
2943
2944 function test_2d_drawImage_animated_poster() {
2945
2946 ctx110.drawImage(document.getElementById('anim-poster-gr_1.png'), 0, 0);
2947 todo_isPixel(ctx110, 50,25, 0,255,0,255, 2);
2948
2949
2950 }
2951 </script>
2952 <img src="image_anim-poster-gr.png" id="anim-poster-gr_1.png" class="resource">
2953
2954 <!-- [[[ test_2d.drawImage.broken.html ]]] -->
2955
2956 <p>Canvas test: 2d.drawImage.broken</p>
2957 <canvas id="c111" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2958 <script>
2959
2960 function test_2d_drawImage_broken() {
2961
2962 var canvas = document.getElementById('c111');
2963 var ctx = canvas.getContext('2d');
2964
2965 var img = document.getElementById('broken_1.png');
2966 todo(img.complete === false, "img.complete === false");
2967 var _thrown = undefined; try {
2968 ctx.drawImage(img, 0, 0);
2969 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
2970
2971
2972 }
2973 </script>
2974 <img src="image_broken.png" id="broken_1.png" class="resource">
2975
2976 <!-- [[[ test_2d.drawImage.canvas.html ]]] -->
2977
2978 <p>Canvas test: 2d.drawImage.canvas</p>
2979 <canvas id="c112" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2980 <script>
2981
2982
2983 function test_2d_drawImage_canvas() {
2984
2985 var canvas = document.getElementById('c112');
2986 var ctx = canvas.getContext('2d');
2987
2988 var canvas2 = document.createElement('canvas');
2989 canvas2.width = 100;
2990 canvas2.height = 50;
2991 var ctx2 = canvas2.getContext('2d');
2992 ctx2.fillStyle = '#0f0';
2993 ctx2.fillRect(0, 0, 100, 50);
2994
2995 ctx.fillStyle = '#f00';
2996 ctx.drawImage(canvas2, 0, 0);
2997
2998 isPixel(ctx, 0,0, 0,255,0,255, 2);
2999 isPixel(ctx, 99,0, 0,255,0,255, 2);
3000 isPixel(ctx, 0,49, 0,255,0,255, 2);
3001 isPixel(ctx, 99,49, 0,255,0,255, 2);
3002
3003
3004 }
3005 </script>
3006
3007 <!-- [[[ test_2d.drawImage.clip.html ]]] -->
3008
3009 <p>Canvas test: 2d.drawImage.clip</p>
3010 <canvas id="c113" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3011 <script>
3012
3013
3014 function test_2d_drawImage_clip() {
3015
3016 var canvas = document.getElementById('c113');
3017 var ctx = canvas.getContext('2d');
3018
3019 ctx.fillStyle = '#0f0';
3020 ctx.fillRect(0, 0, 100, 50);
3021 ctx.rect(-10, -10, 1, 1);
3022 ctx.clip();
3023 ctx.drawImage(document.getElementById('red_8.png'), 0, 0);
3024 isPixel(ctx, 50,25, 0,255,0,255, 2);
3025
3026
3027 }
3028 </script>
3029 <img src="image_red.png" id="red_8.png" class="resource">
3030
3031 <!-- [[[ test_2d.drawImage.composite.html ]]] -->
3032
3033 <p>Canvas test: 2d.drawImage.composite</p>
3034 <canvas id="c114" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3035 <script>
3036
3037
3038 function test_2d_drawImage_composite() {
3039
3040 var canvas = document.getElementById('c114');
3041 var ctx = canvas.getContext('2d');
3042
3043 ctx.fillStyle = '#0f0';
3044 ctx.fillRect(0, 0, 100, 50);
3045 ctx.globalCompositeOperation = 'destination-over';
3046 ctx.drawImage(document.getElementById('red_9.png'), 0, 0);
3047 isPixel(ctx, 50,25, 0,255,0,255, 2);
3048
3049
3050 }
3051 </script>
3052 <img src="image_red.png" id="red_9.png" class="resource">
3053
3054 <!-- [[[ test_2d.drawImage.floatsource.html ]]] -->
3055
3056 <p>Canvas test: 2d.drawImage.floatsource</p>
3057 <canvas id="c115" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3058 <script>
3059
3060
3061 function test_2d_drawImage_floatsource() {
3062
3063 var canvas = document.getElementById('c115');
3064 var ctx = canvas.getContext('2d');
3065
3066 ctx.drawImage(document.getElementById('green_6.png'), 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50);
3067 isPixel(ctx, 50,25, 0,255,0,255, 2);
3068
3069
3070 }
3071 </script>
3072 <img src="image_green.png" id="green_6.png" class="resource">
3073
3074 <!-- [[[ test_2d.drawImage.incomplete.html ]]] -->
3075
3076 <p>Canvas test: 2d.drawImage.incomplete</p>
3077 <canvas id="c116" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3078 <script>
3079
3080 function test_2d_drawImage_incomplete() {
3081
3082 var canvas = document.getElementById('c116');
3083 var ctx = canvas.getContext('2d');
3084
3085 var img = new Image();
3086 todo(img.complete === false, "img.complete === false");
3087 var _thrown = undefined; try {
3088 ctx.drawImage(img, 0, 0);
3089 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
3090
3091
3092 }
3093 </script>
3094
3095 <!-- [[[ test_2d.drawImage.negativedest.html ]]] -->
3096
3097 <p>Canvas test: 2d.drawImage.negativedest</p>
3098 <canvas id="c117" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3099 <script>
3100
3101
3102 function test_2d_drawImage_negativedest() {
3103
3104 var canvas = document.getElementById('c117');
3105 var ctx = canvas.getContext('2d');
3106
3107 var _thrown_outer = false;
3108 try {
3109
3110 ctx.fillStyle = '#f00';
3111 ctx.fillRect(0, 0, 100, 50);
3112 ctx.drawImage(document.getElementById('ggrr-256x256_1.png'), 100, 78, 50, 50, 0, 50, 50, -50);
3113 ctx.drawImage(document.getElementById('ggrr-256x256_1.png'), 100, 128, 50, -50, 100, 50, -50, -50);
3114 isPixel(ctx, 1,1, 0,255,0,255, 2);
3115 isPixel(ctx, 1,48, 0,255,0,255, 2);
3116 isPixel(ctx, 98,1, 0,255,0,255, 2);
3117 isPixel(ctx, 98,48, 0,255,0,255, 2);
3118 isPixel(ctx, 48,1, 0,255,0,255, 2);
3119 isPixel(ctx, 48,48, 0,255,0,255, 2);
3120 isPixel(ctx, 51,1, 0,255,0,255, 2);
3121 isPixel(ctx, 51,48, 0,255,0,255, 2);
3122 isPixel(ctx, 25,25, 0,255,0,255, 2);
3123 isPixel(ctx, 75,25, 0,255,0,255, 2);
3124
3125 } catch (e) {
3126 _thrown_outer = true;
3127 }
3128 todo(!_thrown_outer, 'should not throw exception');
3129
3130
3131 }
3132 </script>
3133 <img src="image_ggrr-256x256.png" id="ggrr-256x256_1.png" class="resource">
3134
3135 <!-- [[[ test_2d.drawImage.negativesource.html ]]] -->
3136
3137 <p>Canvas test: 2d.drawImage.negativesource</p>
3138 <canvas id="c118" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3139 <script>
3140
3141
3142 function test_2d_drawImage_negativesource() {
3143
3144 var canvas = document.getElementById('c118');
3145 var ctx = canvas.getContext('2d');
3146
3147 var _thrown_outer = false;
3148 try {
3149
3150 ctx.fillStyle = '#f00';
3151 ctx.fillRect(0, 0, 100, 50);
3152 ctx.drawImage(document.getElementById('ggrr-256x256_2.png'), 100, 78, -100, 50, 0, 0, 50, 50);
3153 ctx.drawImage(document.getElementById('ggrr-256x256_2.png'), 100, 128, -100, -50, 50, 0, 50, 50);
3154 isPixel(ctx, 1,1, 0,255,0,255, 2);
3155 isPixel(ctx, 1,48, 0,255,0,255, 2);
3156 isPixel(ctx, 98,1, 0,255,0,255, 2);
3157 isPixel(ctx, 98,48, 0,255,0,255, 2);
3158 isPixel(ctx, 48,1, 0,255,0,255, 2);
3159 isPixel(ctx, 48,48, 0,255,0,255, 2);
3160 isPixel(ctx, 51,1, 0,255,0,255, 2);
3161 isPixel(ctx, 51,48, 0,255,0,255, 2);
3162 isPixel(ctx, 25,25, 0,255,0,255, 2);
3163 isPixel(ctx, 75,25, 0,255,0,255, 2);
3164
3165 } catch (e) {
3166 _thrown_outer = true;
3167 }
3168 todo(!_thrown_outer, 'should not throw exception');
3169
3170
3171 }
3172 </script>
3173 <img src="image_ggrr-256x256.png" id="ggrr-256x256_2.png" class="resource">
3174
3175 <!-- [[[ test_2d.drawImage.nonfinite.html ]]] -->
3176
3177 <p>Canvas test: 2d.drawImage.nonfinite</p>
3178 <!-- Testing: drawImage() with Infinity/NaN is ignored -->
3179 <canvas id="c119" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3180 <script>
3181
3182
3183 function test_2d_drawImage_nonfinite() {
3184
3185 var canvas = document.getElementById('c119');
3186 var ctx = canvas.getContext('2d');
3187
3188 var _thrown_outer = false;
3189
3190 try {
3191
3192 ctx.fillStyle = '#0f0';
3193 ctx.fillRect(0, 0, 100, 50);
3194 var red = document.getElementById('red_10.png');
3195 ctx.drawImage(red, Infinity, 0);
3196 ctx.drawImage(red, -Infinity, 0);
3197 ctx.drawImage(red, NaN, 0);
3198 ctx.drawImage(red, 0, Infinity);
3199 ctx.drawImage(red, 0, -Infinity);
3200 ctx.drawImage(red, 0, NaN);
3201 ctx.drawImage(red, Infinity, Infinity);
3202 ctx.drawImage(red, Infinity, 0, 100, 50);
3203 ctx.drawImage(red, -Infinity, 0, 100, 50);
3204 ctx.drawImage(red, NaN, 0, 100, 50);
3205 ctx.drawImage(red, 0, Infinity, 100, 50);
3206 ctx.drawImage(red, 0, -Infinity, 100, 50);
3207 ctx.drawImage(red, 0, NaN, 100, 50);
3208 ctx.drawImage(red, 0, 0, Infinity, 50);
3209 ctx.drawImage(red, 0, 0, -Infinity, 50);
3210 ctx.drawImage(red, 0, 0, NaN, 50);
3211 ctx.drawImage(red, 0, 0, 100, Infinity);
3212 ctx.drawImage(red, 0, 0, 100, -Infinity);
3213 ctx.drawImage(red, 0, 0, 100, NaN);
3214 ctx.drawImage(red, Infinity, Infinity, 100, 50);
3215 ctx.drawImage(red, Infinity, Infinity, Infinity, 50);
3216 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity);
3217 ctx.drawImage(red, Infinity, Infinity, 100, Infinity);
3218 ctx.drawImage(red, Infinity, 0, Infinity, 50);
3219 ctx.drawImage(red, Infinity, 0, Infinity, Infinity);
3220 ctx.drawImage(red, Infinity, 0, 100, Infinity);
3221 ctx.drawImage(red, 0, Infinity, Infinity, 50);
3222 ctx.drawImage(red, 0, Infinity, Infinity, Infinity);
3223 ctx.drawImage(red, 0, Infinity, 100, Infinity);
3224 ctx.drawImage(red, 0, 0, Infinity, Infinity);
3225 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, 100, 50);
3226 ctx.drawImage(red, -Infinity, 0, 100, 50, 0, 0, 100, 50);
3227 ctx.drawImage(red, NaN, 0, 100, 50, 0, 0, 100, 50);
3228 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, 100, 50);
3229 ctx.drawImage(red, 0, -Infinity, 100, 50, 0, 0, 100, 50);
3230 ctx.drawImage(red, 0, NaN, 100, 50, 0, 0, 100, 50);
3231 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, 100, 50);
3232 ctx.drawImage(red, 0, 0, -Infinity, 50, 0, 0, 100, 50);
3233 ctx.drawImage(red, 0, 0, NaN, 50, 0, 0, 100, 50);
3234 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, 100, 50);
3235 ctx.drawImage(red, 0, 0, 100, -Infinity, 0, 0, 100, 50);
3236 ctx.drawImage(red, 0, 0, 100, NaN, 0, 0, 100, 50);
3237 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, 100, 50);
3238 ctx.drawImage(red, 0, 0, 100, 50, -Infinity, 0, 100, 50);
3239 ctx.drawImage(red, 0, 0, 100, 50, NaN, 0, 100, 50);
3240 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, 100, 50);
3241 ctx.drawImage(red, 0, 0, 100, 50, 0, -Infinity, 100, 50);
3242 ctx.drawImage(red, 0, 0, 100, 50, 0, NaN, 100, 50);
3243 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, Infinity, 50);
3244 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, -Infinity, 50);
3245 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, NaN, 50);
3246 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, Infinity);
3247 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, -Infinity);
3248 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, NaN);
3249 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, 100, 50);
3250 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, 100, 50);
3251 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, 50);
3252 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, 50);
3253 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50);
3254 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
3255 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
3256 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
3257 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50);
3258 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
3259 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity);
3260 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, 50);
3261 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50);
3262 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
3263 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity);
3264 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, 50);
3265 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity);
3266 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, Infinity);
3267 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, 50);
3268 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, 50);
3269 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50);
3270 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
3271 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity);
3272 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, 50);
3273 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity);
3274 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, Infinity);
3275 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, 50);
3276 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, 50);
3277 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity);
3278 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, Infinity);
3279 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, 50);
3280 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, Infinity);
3281 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, 100, Infinity);
3282 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, 100, 50);
3283 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, 50);
3284 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, 50);
3285 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50);
3286 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
3287 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity);
3288 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, 50);
3289 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity);
3290 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, Infinity);
3291 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, 50);
3292 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, 50);
3293 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity);
3294 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, Infinity);
3295 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, 50);
3296 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, Infinity);
3297 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, 100, Infinity);
3298 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, 100, 50);
3299 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, 50);
3300 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, 50);
3301 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity);
3302 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, Infinity);
3303 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, 50);
3304 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, Infinity);
3305 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, 100, Infinity);
3306 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, 100, 50);
3307 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, 50);
3308 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, Infinity);
3309 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, 100, Infinity);
3310 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, Infinity, 50);
3311 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, Infinity, Infinity);
3312 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, 100, Infinity);
3313 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, 100, 50);
3314 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, 100, 50);
3315 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, 50);
3316 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, 50);
3317 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
3318 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
3319 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
3320 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, 50);
3321 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
3322 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, Infinity);
3323 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, 50);
3324 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, 50);
3325 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
3326 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, Infinity);
3327 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, 50);
3328 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, Infinity);
3329 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, 100, Infinity);
3330 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, 100, 50);
3331 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, 50);
3332 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, 50);
3333 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
3334 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, Infinity);
3335 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, 50);
3336 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, Infinity);
3337 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, 100, Infinity);
3338 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, 100, 50);
3339 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, 50);
3340 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, Infinity);
3341 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, 100, Infinity);
3342 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, Infinity, 50);
3343 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, Infinity, Infinity);
3344 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, 100, Infinity);
3345 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, 100, 50);
3346 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, 100, 50);
3347 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, 50);
3348 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, 50);
3349 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
3350 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, Infinity);
3351 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, 50);
3352 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, Infinity);
3353 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, 100, Infinity);
3354 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, 100, 50);
3355 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, 50);
3356 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, Infinity);
3357 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, 100, Infinity);
3358 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, Infinity, 50);
3359 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, Infinity, Infinity);
3360 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, 100, Infinity);
3361 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, 100, 50);
3362 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, 100, 50);
3363 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, 50);
3364 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, Infinity);
3365 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, 100, Infinity);
3366 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, Infinity, 50);
3367 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, Infinity, Infinity);
3368 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, 100, Infinity);
3369 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, 100, 50);
3370 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, Infinity, 50);
3371 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, Infinity, Infinity);
3372 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, 100, Infinity);
3373 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, Infinity, 50);
3374 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, Infinity, Infinity);
3375 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, 100, Infinity);
3376 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, 100, 50);
3377 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, 100, 50);
3378 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, 50);
3379 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50);
3380 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
3381 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
3382 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
3383 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50);
3384 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
3385 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity);
3386 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, 50);
3387 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50);
3388 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
3389 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity);
3390 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, 50);
3391 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity);
3392 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, 100, Infinity);
3393 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, 100, 50);
3394 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, 50);
3395 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50);
3396 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
3397 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity);
3398 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, 50);
3399 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity);
3400 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, 100, Infinity);
3401 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, 100, 50);
3402 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, 50);
3403 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity);
3404 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, 100, Infinity);
3405 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, Infinity, 50);
3406 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, Infinity, Infinity);
3407 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, 100, Infinity);
3408 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, 100, 50);
3409 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, 100, 50);
3410 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, 50);
3411 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50);
3412 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
3413 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity);
3414 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, 50);
3415 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity);
3416 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, 100, Infinity);
3417 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, 100, 50);
3418 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, 50);
3419 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity);
3420 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, 100, Infinity);
3421 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, Infinity, 50);
3422 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, Infinity, Infinity);
3423 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, 100, Infinity);
3424 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, 100, 50);
3425 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, 100, 50);
3426 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, 50);
3427 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity);
3428 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, 100, Infinity);
3429 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, Infinity, 50);
3430 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, Infinity, Infinity);
3431 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, 100, Infinity);
3432 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, 100, 50);
3433 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, Infinity, 50);
3434 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, Infinity, Infinity);
3435 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, 100, Infinity);
3436 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, Infinity, 50);
3437 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, Infinity, Infinity);
3438 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, 100, Infinity);
3439 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, 100, 50);
3440 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, 100, 50);
3441 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, 50);
3442 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
3443 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
3444 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
3445 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, 50);
3446 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
3447 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, 100, Infinity);
3448 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, 100, 50);
3449 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, 50);
3450 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
3451 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, 100, Infinity);
3452 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, Infinity, 50);
3453 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, Infinity, Infinity);
3454 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, 100, Infinity);
3455 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, 100, 50);
3456 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, 100, 50);
3457 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, 50);
3458 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
3459 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, 100, Infinity);
3460 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, Infinity, 50);
3461 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, Infinity, Infinity);
3462 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, 100, Infinity);
3463 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, 100, 50);
3464 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, Infinity, 50);
3465 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, Infinity, Infinity);
3466 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, 100, Infinity);
3467 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, Infinity, 50);
3468 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, Infinity, Infinity);
3469 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, 100, Infinity);
3470 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, 100, 50);
3471 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, 100, 50);
3472 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, 50);
3473 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
3474 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, 100, Infinity);
3475 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, Infinity, 50);
3476 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, Infinity, Infinity);
3477 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, 100, Infinity);
3478 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, 100, 50);
3479 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, Infinity, 50);
3480 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, Infinity, Infinity);
3481 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, 100, Infinity);
3482 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, Infinity, 50);
3483 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, Infinity, Infinity);
3484 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, 100, Infinity);
3485 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, 100, 50);
3486 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, Infinity, 50);
3487 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, Infinity, Infinity);
3488 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, 100, Infinity);
3489 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, Infinity, 50);
3490 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, Infinity, Infinity);
3491 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, 100, Infinity);
3492 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, Infinity, 50);
3493 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, Infinity, Infinity);
3494 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, 100, Infinity);
3495 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, Infinity, Infinity);
3496 isPixel(ctx, 50,25, 0,255,0,255, 0);
3497
3498 } catch (e) {
3499 _thrown_outer = true;
3500 }
3501 ok(!_thrown_outer, 'should not throw exception');
3502
3503
3504 }
3505 </script>
3506 <img src="image_red.png" id="red_10.png" class="resource">
3507
3508 <!-- [[[ test_2d.drawImage.nowrap.html ]]] -->
3509
3510 <p>Canvas test: 2d.drawImage.nowrap</p>
3511 <!-- Testing: Stretched images do not get pixels wrapping around the edges -->
3512 <canvas id="c120" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3513 <script>
3514
3515
3516 function test_2d_drawImage_nowrap() {
3517
3518 var canvas = document.getElementById('c120');
3519 var ctx = canvas.getContext('2d');
3520
3521 ctx.fillStyle = '#0f0';
3522 ctx.fillRect(0, 0, 100, 50);
3523 ctx.drawImage(document.getElementById('redtransparent_1.png'), -1950, 0, 2000, 50);
3524 isPixel(ctx, 45,25, 0,255,0,255, 2);
3525 isPixel(ctx, 50,25, 0,255,0,255, 2);
3526 isPixel(ctx, 55,25, 0,255,0,255, 2);
3527
3528
3529 }
3530 </script>
3531 <img src="image_redtransparent.png" id="redtransparent_1.png" class="resource">
3532
3533 <!-- [[[ test_2d.drawImage.null.html ]]] -->
3534
3535 <p>Canvas test: 2d.drawImage.null</p>
3536 <canvas id="c121" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3537 <script>
3538
3539 function test_2d_drawImage_null() {
3540
3541 var canvas = document.getElementById('c121');
3542 var ctx = canvas.getContext('2d');
3543
3544 var _thrown = undefined; try {
3545 ctx.drawImage(null, 0, 0);
3546 } catch (e) { _thrown = e };
3547
3548 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
3549
3550 }
3551 </script>
3552
3553 <!-- [[[ test_2d.drawImage.outsidesource.html ]]] -->
3554
3555 <p>Canvas test: 2d.drawImage.outsidesource</p>
3556 <canvas id="c122" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3557 <script>
3558
3559
3560
3561 function test_2d_drawImage_outsidesource() {
3562
3563 var canvas = document.getElementById('c122');
3564 var ctx = canvas.getContext('2d');
3565
3566 var _thrown_outer = false;
3567 try {
3568
3569 ctx.drawImage(document.getElementById('green_7.png'), 10.5, 10.5, 89.5, 39.5, 0, 0, 100, 50);
3570 ctx.drawImage(document.getElementById('green_7.png'), 5.5, 5.5, -5.5, -5.5, 0, 0, 100, 50);
3571 ctx.drawImage(document.getElementById('green_7.png'), 100, 50, -5, -5, 0, 0, 100, 50);
3572 var _thrown = undefined; try {
3573 ctx.drawImage(document.getElementById('red_11.png'), -0.001, 0, 100, 50, 0, 0, 100, 50);
3574 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3575 var _thrown = undefined; try {
3576 ctx.drawImage(document.getElementById('red_11.png'), 0, -0.001, 100, 50, 0, 0, 100, 50);
3577 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3578 var _thrown = undefined; try {
3579 ctx.drawImage(document.getElementById('red_11.png'), 0, 0, 100.001, 50, 0, 0, 100, 50);
3580 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3581 var _thrown = undefined; try {
3582 ctx.drawImage(document.getElementById('red_11.png'), 0, 0, 100, 50.001, 0, 0, 100, 50);
3583 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3584 var _thrown = undefined; try {
3585 ctx.drawImage(document.getElementById('red_11.png'), 50, 0, 50.001, 50, 0, 0, 100, 50);
3586 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3587 var _thrown = undefined; try {
3588 ctx.drawImage(document.getElementById('red_11.png'), 0, 0, -5, 5, 0, 0, 100, 50);
3589 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3590 var _thrown = undefined; try {
3591 ctx.drawImage(document.getElementById('red_11.png'), 0, 0, 5, -5, 0, 0, 100, 50);
3592 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3593 var _thrown = undefined; try {
3594 ctx.drawImage(document.getElementById('red_11.png'), 110, 60, -20, -20, 0, 0, 100, 50);
3595 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3596 todo_isPixel(ctx, 50,25, 0,255,0,255, 2);
3597
3598 } catch (e) {
3599 _thrown_outer = true;
3600 }
3601 todo(!_thrown_outer, 'should not throw exception');
3602
3603
3604 }
3605 </script>
3606 <img src="image_green.png" id="green_7.png" class="resource">
3607 <img src="image_red.png" id="red_11.png" class="resource">
3608
3609 <!-- [[[ test_2d.drawImage.path.html ]]] -->
3610
3611 <p>Canvas test: 2d.drawImage.path</p>
3612 <canvas id="c123" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3613 <script>
3614
3615
3616 function test_2d_drawImage_path() {
3617
3618 var canvas = document.getElementById('c123');
3619 var ctx = canvas.getContext('2d');
3620
3621 ctx.fillStyle = '#0f0';
3622 ctx.rect(0, 0, 100, 50);
3623 ctx.drawImage(document.getElementById('red_12.png'), 0, 0);
3624 ctx.fill();
3625 isPixel(ctx, 50,25, 0,255,0,255, 2);
3626
3627
3628 }
3629 </script>
3630 <img src="image_red.png" id="red_12.png" class="resource">
3631
3632 <!-- [[[ test_2d.drawImage.self.1.html ]]] -->
3633
3634 <p>Canvas test: 2d.drawImage.self.1 - bug 433235</p>
3635 <canvas id="c124" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3636 <script>
3637
3638
3639 function test_2d_drawImage_self_1() {
3640
3641 var canvas = document.getElementById('c124');
3642 var ctx = canvas.getContext('2d');
3643
3644 ctx.fillStyle = '#0f0';
3645 ctx.fillRect(0, 0, 50, 50);
3646 ctx.fillStyle = '#f00';
3647 ctx.fillRect(50, 0, 50, 50);
3648 ctx.drawImage(canvas, 50, 0);
3649
3650 isPixel(ctx, 0,0, 0,255,0,255, 2);
3651 isPixel(ctx, 99,0, 0,255,0,255, 2);
3652 isPixel(ctx, 0,49, 0,255,0,255, 2);
3653 isPixel(ctx, 99,49, 0,255,0,255, 2);
3654
3655
3656 }
3657 </script>
3658
3659 <!-- [[[ test_2d.drawImage.self.2.html ]]] -->
3660
3661 <p>Canvas test: 2d.drawImage.self.2 - bug 433235</p>
3662 <canvas id="c125" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3663 <script>
3664
3665
3666 function test_2d_drawImage_self_2() {
3667
3668 var canvas = document.getElementById('c125');
3669 var ctx = canvas.getContext('2d');
3670
3671 ctx.fillStyle = '#0f0';
3672 ctx.fillRect(0, 1, 100, 49);
3673 ctx.fillStyle = '#f00';
3674 ctx.fillRect(0, 0, 100, 1);
3675 ctx.drawImage(canvas, 0, 1);
3676 ctx.fillStyle = '#0f0';
3677 ctx.fillRect(0, 0, 100, 2);
3678
3679 isPixel(ctx, 0,0, 0,255,0,255, 2);
3680 isPixel(ctx, 99,0, 0,255,0,255, 2);
3681 isPixel(ctx, 0,49, 0,255,0,255, 2);
3682 isPixel(ctx, 99,49, 0,255,0,255, 2);
3683
3684
3685 }
3686 </script>
3687
3688 <!-- [[[ test_2d.drawImage.transform.html ]]] -->
3689
3690 <p>Canvas test: 2d.drawImage.transform</p>
3691 <canvas id="c126" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3692 <script>
3693
3694
3695 function test_2d_drawImage_transform() {
3696
3697 var canvas = document.getElementById('c126');
3698 var ctx = canvas.getContext('2d');
3699
3700 ctx.fillStyle = '#0f0';
3701 ctx.fillRect(0, 0, 100, 50);
3702 ctx.translate(100, 0);
3703 ctx.drawImage(document.getElementById('red_13.png'), 0, 0);
3704 isPixel(ctx, 50,25, 0,255,0,255, 2);
3705
3706
3707 }
3708 </script>
3709 <img src="image_red.png" id="red_13.png" class="resource">
3710
3711 <!-- [[[ test_2d.drawImage.wrongtype.html ]]] -->
3712
3713 <p>Canvas test: 2d.drawImage.wrongtype</p>
3714 <canvas id="c127" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3715 <script>
3716
3717 function test_2d_drawImage_wrongtype() {
3718
3719 var canvas = document.getElementById('c127');
3720 var ctx = canvas.getContext('2d');
3721
3722 var _thrown = undefined; try {
3723 ctx.drawImage(undefined, 0, 0);
3724 } catch (e) { _thrown = e };
3725 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
3726
3727 var _thrown = undefined; try {
3728 ctx.drawImage(0, 0, 0);
3729 } catch (e) { _thrown = e };
3730 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
3731
3732 var _thrown = undefined; try {
3733 ctx.drawImage("", 0, 0);
3734 } catch (e) { _thrown = e };
3735 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
3736
3737 var _thrown = undefined; try {
3738 ctx.drawImage(document.createElement('p'), 0, 0);
3739 } catch (e) { _thrown = e };
3740 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
3741
3742 }
3743 </script>
3744
3745 <!-- [[[ test_2d.drawImage.zerosource.html ]]] -->
3746
3747 <p>Canvas test: 2d.drawImage.zerosource</p>
3748 <!-- Testing: drawImage with zero-sized source rectangle throws INDEX_SIZE_ERR -->
3749 <canvas id="c128" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3750 <script>
3751
3752
3753 function test_2d_drawImage_zerosource() {
3754
3755 var canvas = document.getElementById('c128');
3756 var ctx = canvas.getContext('2d');
3757
3758 ctx.fillStyle = '#0f0';
3759 ctx.fillRect(0, 0, 100, 50);
3760 var _thrown = undefined; try {
3761 ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 1, 0, 0, 100, 50);
3762 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3763 var _thrown = undefined; try {
3764 ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 1, 0, 0, 0, 100, 50);
3765 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3766 var _thrown = undefined; try {
3767 ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 0, 0, 0, 100, 50);
3768 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
3769 isPixel(ctx, 50,25, 0,255,0,255, 2);
3770
3771
3772 }
3773 </script>
3774 <img src="image_red.png" id="red_14.png" class="resource">
3775
3776 <!-- [[[ test_2d.fillRect.basic.html ]]] -->
3777
3778 <p>Canvas test: 2d.fillRect.basic</p>
3779 <canvas id="c129" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
3780 <script>
3781
3782
3783 function test_2d_fillRect_basic() {
3784
3785 var canvas = document.getElementById('c129');
3786 var ctx = canvas.getContext('2d');
3787
3788 ctx.fillStyle = '#0f0';
3789 ctx.fillRect(0, 0, 100, 50);
3790 isPixel(ctx, 50,25, 0,255,0,255, 0);
3791
3792
3793 }
3794 </script>
3795
3796 <!-- [[[ test_2d.fillRect.clip.html ]]] -->
3797
3798 <p>Canvas test: 2d.fillRect.clip</p>
3799 <canvas id="c130" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3800 <script>
3801
3802
3803 function test_2d_fillRect_clip() {
3804
3805 var canvas = document.getElementById('c130');
3806 var ctx = canvas.getContext('2d');
3807
3808 ctx.fillStyle = '#0f0';
3809 ctx.fillRect(0, 0, 100, 50);
3810
3811 ctx.beginPath();
3812 ctx.rect(0, 0, 16, 16);
3813 ctx.clip();
3814
3815 ctx.fillStyle = '#f00';
3816 ctx.fillRect(0, 0, 100, 50);
3817
3818 ctx.fillStyle = '#0f0';
3819 ctx.fillRect(0, 0, 16, 16);
3820
3821 isPixel(ctx, 50,25, 0,255,0,255, 0);
3822
3823
3824 }
3825 </script>
3826
3827 <!-- [[[ test_2d.fillRect.negative.html ]]] -->
3828
3829 <p>Canvas test: 2d.fillRect.negative</p>
3830 <canvas id="c131" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3831 <script>
3832
3833
3834 function test_2d_fillRect_negative() {
3835
3836 var canvas = document.getElementById('c131');
3837 var ctx = canvas.getContext('2d');
3838
3839 ctx.fillStyle = '#f00';
3840 ctx.fillRect(0, 0, 100, 50);
3841 ctx.fillStyle = '#0f0';
3842 ctx.fillRect(0, 0, 50, 25);
3843 ctx.fillRect(100, 0, -50, 25);
3844 ctx.fillRect(0, 50, 50, -25);
3845 ctx.fillRect(100, 50, -50, -25);
3846 isPixel(ctx, 25,12, 0,255,0,255, 0);
3847 isPixel(ctx, 75,12, 0,255,0,255, 0);
3848 isPixel(ctx, 25,37, 0,255,0,255, 0);
3849 isPixel(ctx, 75,37, 0,255,0,255, 0);
3850
3851
3852 }
3853 </script>
3854
3855 <!-- [[[ test_2d.fillRect.nonfinite.html ]]] -->
3856
3857 <p>Canvas test: 2d.fillRect.nonfinite</p>
3858 <!-- Testing: fillRect() with Infinity/NaN is ignored -->
3859 <canvas id="c132" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3860 <script>
3861
3862
3863 function test_2d_fillRect_nonfinite() {
3864
3865 var canvas = document.getElementById('c132');
3866 var ctx = canvas.getContext('2d');
3867
3868 var _thrown_outer = false;
3869 try {
3870
3871 ctx.fillStyle = '#0f0';
3872 ctx.fillRect(0, 0, 100, 50);
3873
3874 ctx.fillStyle = '#f00';
3875 ctx.fillRect(Infinity, 0, 100, 50);
3876 ctx.fillRect(-Infinity, 0, 100, 50);
3877 ctx.fillRect(NaN, 0, 100, 50);
3878 ctx.fillRect(0, Infinity, 100, 50);
3879 ctx.fillRect(0, -Infinity, 100, 50);
3880 ctx.fillRect(0, NaN, 100, 50);
3881 ctx.fillRect(0, 0, Infinity, 50);
3882 ctx.fillRect(0, 0, -Infinity, 50);
3883 ctx.fillRect(0, 0, NaN, 50);
3884 ctx.fillRect(0, 0, 100, Infinity);
3885 ctx.fillRect(0, 0, 100, -Infinity);
3886 ctx.fillRect(0, 0, 100, NaN);
3887 ctx.fillRect(Infinity, Infinity, 100, 50);
3888 ctx.fillRect(Infinity, Infinity, Infinity, 50);
3889 ctx.fillRect(Infinity, Infinity, Infinity, Infinity);
3890 ctx.fillRect(Infinity, Infinity, 100, Infinity);
3891 ctx.fillRect(Infinity, 0, Infinity, 50);
3892 ctx.fillRect(Infinity, 0, Infinity, Infinity);
3893 ctx.fillRect(Infinity, 0, 100, Infinity);
3894 ctx.fillRect(0, Infinity, Infinity, 50);
3895 ctx.fillRect(0, Infinity, Infinity, Infinity);
3896 ctx.fillRect(0, Infinity, 100, Infinity);
3897 ctx.fillRect(0, 0, Infinity, Infinity);
3898
3899 isPixel(ctx, 50,25, 0,255,0,255, 0);
3900
3901 } catch (e) {
3902 _thrown_outer = true;
3903 }
3904 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
3905
3906
3907 }
3908 </script>
3909
3910 <!-- [[[ test_2d.fillRect.path.html ]]] -->
3911
3912 <p>Canvas test: 2d.fillRect.path</p>
3913 <canvas id="c133" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
3914 <script>
3915
3916
3917 function test_2d_fillRect_path() {
3918
3919 var canvas = document.getElementById('c133');
3920 var ctx = canvas.getContext('2d');
3921
3922 ctx.beginPath();
3923 ctx.rect(0, 0, 100, 50);
3924 ctx.fillStyle = '#f00';
3925 ctx.fillRect(0, 0, 16, 16);
3926 ctx.fillStyle = '#0f0';
3927 ctx.fill();
3928 isPixel(ctx, 50,25, 0,255,0,255, 0);
3929
3930
3931 }
3932 </script>
3933
3934 <!-- [[[ test_2d.fillRect.shadow.html ]]] -->
3935
3936 <p>Canvas test: 2d.fillRect.shadow</p>
3937 <canvas id="c134" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3938 <script>
3939
3940
3941 function test_2d_fillRect_shadow() {
3942
3943 var canvas = document.getElementById('c134');
3944 var ctx = canvas.getContext('2d');
3945
3946 ctx.fillStyle = '#0f0';
3947 ctx.fillRect(0, 0, 100, 50);
3948
3949 ctx.fillStyle = '#f00';
3950 ctx.shadowBlur = 0;
3951 ctx.shadowOffsetX = 0;
3952 ctx.shadowOffsetY = 50;
3953
3954 // Shadows are optional, so just test that if they apply to fill() then they apply to fillRect() too
3955 ctx.beginPath();
3956 ctx.rect(0, -50, 100, 50);
3957 ctx.shadowColor = '#f00';
3958 ctx.fill();
3959
3960 ctx.shadowColor = '#0f0';
3961 ctx.fillRect(0, -50, 100, 50);
3962
3963 isPixel(ctx, 50,25, 0,255,0,255, 0);
3964
3965
3966 }
3967 </script>
3968
3969 <!-- [[[ test_2d.fillRect.transform.html ]]] -->
3970
3971 <p>Canvas test: 2d.fillRect.transform</p>
3972 <canvas id="c135" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
3973 <script>
3974
3975
3976 function test_2d_fillRect_transform() {
3977
3978 var canvas = document.getElementById('c135');
3979 var ctx = canvas.getContext('2d');
3980
3981 ctx.scale(10, 10);
3982 ctx.translate(0, 5);
3983 ctx.fillStyle = '#0f0';
3984 ctx.fillRect(0, -5, 10, 5);
3985 isPixel(ctx, 50,25, 0,255,0,255, 0);
3986
3987
3988 }
3989 </script>
3990
3991 <!-- [[[ test_2d.fillRect.zero.html ]]] -->
3992
3993 <p>Canvas test: 2d.fillRect.zero</p>
3994 <canvas id="c136" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3995 <script>
3996
3997
3998 function test_2d_fillRect_zero() {
3999
4000 var canvas = document.getElementById('c136');
4001 var ctx = canvas.getContext('2d');
4002
4003 ctx.fillStyle = '#0f0';
4004 ctx.fillRect(0, 0, 100, 50);
4005 ctx.fillStyle = '#f00';
4006 ctx.fillRect(0, 0, 100, 0);
4007 ctx.fillRect(0, 0, 0, 50);
4008 ctx.fillRect(0, 0, 0, 0);
4009 isPixel(ctx, 50,25, 0,255,0,255, 0);
4010
4011
4012 }
4013 </script>
4014
4015 <!-- [[[ test_2d.fillStyle.default.html ]]] -->
4016
4017 <p>Canvas test: 2d.fillStyle.default</p>
4018 <canvas id="c137" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4019 <script>
4020
4021 function test_2d_fillStyle_default() {
4022
4023 var canvas = document.getElementById('c137');
4024 var ctx = canvas.getContext('2d');
4025
4026 ok(ctx.fillStyle == '#000000', "ctx.fillStyle == '#000000'");
4027
4028
4029 }
4030 </script>
4031
4032 <!-- [[[ test_2d.fillStyle.get.semitransparent.html ]]] -->
4033
4034 <p>Canvas test: 2d.fillStyle.get.semitransparent</p>
4035 <canvas id="c138" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4036 <script>
4037
4038 function test_2d_fillStyle_get_semitransparent() {
4039
4040 var canvas = document.getElementById('c138');
4041 var ctx = canvas.getContext('2d');
4042
4043 ctx.fillStyle = 'rgba(255,255,255,0.45)';
4044 ok(/^rgba\(255, 255, 255, 0\.4\d+\)$/.test(ctx.fillStyle), "ctx.fillStyle =~ /^rgba\\(255, 255, 255, 0\\.4\\d+\\)$/");
4045
4046
4047 }
4048 </script>
4049
4050 <!-- [[[ test_2d.fillStyle.get.solid.html ]]] -->
4051
4052 <p>Canvas test: 2d.fillStyle.get.solid</p>
4053 <canvas id="c139" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4054 <script>
4055
4056 function test_2d_fillStyle_get_solid() {
4057
4058 var canvas = document.getElementById('c139');
4059 var ctx = canvas.getContext('2d');
4060
4061 ctx.fillStyle = '#fa0';
4062 ok(ctx.fillStyle === '#ffaa00', "ctx.fillStyle === '#ffaa00'");
4063
4064
4065 }
4066 </script>
4067
4068 <!-- [[[ test_2d.fillStyle.get.transparent.html ]]] -->
4069
4070 <p>Canvas test: 2d.fillStyle.get.transparent</p>
4071 <canvas id="c140" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4072 <script>
4073
4074 function test_2d_fillStyle_get_transparent() {
4075
4076 var canvas = document.getElementById('c140');
4077 var ctx = canvas.getContext('2d');
4078
4079 ctx.fillStyle = 'rgba(0,0,0,0)';
4080 is(ctx.fillStyle, 'rgba(0, 0, 0, 0)', "ctx.fillStyle should be what we set it to");
4081
4082
4083 }
4084 </script>
4085
4086 <!-- [[[ test_2d.fillStyle.invalidstring.html ]]] -->
4087
4088 <p>Canvas test: 2d.fillStyle.invalidstring</p>
4089 <canvas id="c141" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4090 <script>
4091
4092
4093 function test_2d_fillStyle_invalidstring() {
4094
4095 var canvas = document.getElementById('c141');
4096 var ctx = canvas.getContext('2d');
4097
4098 ctx.fillStyle = '#f00';
4099 ctx.fillRect(0, 0, 100, 50);
4100 ctx.fillStyle = '#0f0';
4101 ctx.fillStyle = 'invalid';
4102 ctx.fillRect(0, 0, 100, 50);
4103 isPixel(ctx, 50,25, 0,255,0,255, 0);
4104
4105
4106 }
4107 </script>
4108
4109 <!-- [[[ test_2d.fillStyle.invalidtype.html ]]] -->
4110
4111 <p>Canvas test: 2d.fillStyle.invalidtype</p>
4112 <canvas id="c142" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4113 <script>
4114
4115
4116 function test_2d_fillStyle_invalidtype() {
4117
4118 var canvas = document.getElementById('c142');
4119 var ctx = canvas.getContext('2d');
4120
4121 ctx.fillStyle = '#f00';
4122 ctx.fillRect(0, 0, 100, 50);
4123 ctx.fillStyle = '#0f0';
4124 ctx.fillStyle = null;
4125 ctx.fillRect(0, 0, 100, 50);
4126 isPixel(ctx, 50,25, 0,255,0,255, 0);
4127
4128
4129 }
4130 </script>
4131
4132 <!-- [[[ test_2d.fillStyle.parse.current.basic.html ]]] -->
4133
4134 <p>Canvas test: 2d.fillStyle.parse.current.basic</p>
4135 <!-- Testing: currentColor is computed from the canvas element -->
4136 <canvas id="c143" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4137 <script>
4138
4139
4140
4141 function test_2d_fillStyle_parse_current_basic() {
4142
4143 var canvas = document.getElementById('c143');
4144 var ctx = canvas.getContext('2d');
4145
4146 canvas.setAttribute('style', 'color: #0f0');
4147 ctx.fillStyle = '#f00';
4148 ctx.fillStyle = 'currentColor';
4149 ctx.fillRect(0, 0, 100, 50);
4150 isPixel(ctx, 50,25, 0,255,0,255, 0);
4151
4152
4153 }
4154 </script>
4155
4156 <!-- [[[ test_2d.fillStyle.parse.current.changed.html ]]] -->
4157
4158 <p>Canvas test: 2d.fillStyle.parse.current.changed</p>
4159 <!-- Testing: currentColor is computed when the attribute is set, not when it is painted -->
4160 <canvas id="c144" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4161 <script>
4162
4163
4164
4165 function test_2d_fillStyle_parse_current_changed() {
4166
4167 var canvas = document.getElementById('c144');
4168 var ctx = canvas.getContext('2d');
4169
4170 canvas.setAttribute('style', 'color: #0f0');
4171 ctx.fillStyle = '#f00';
4172 ctx.fillStyle = 'currentColor';
4173 canvas.setAttribute('style', 'color: #f00');
4174 ctx.fillRect(0, 0, 100, 50);
4175 isPixel(ctx, 50,25, 0,255,0,255, 0);
4176
4177
4178 }
4179 </script>
4180
4181 <!-- [[[ test_2d.fillStyle.parse.current.removed.html ]]] -->
4182
4183 <p>Canvas test: 2d.fillStyle.parse.current.removed</p>
4184 <!-- Testing: currentColor is solid black when the canvas element is not in a document -->
4185 <canvas id="c145" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4186 <script>
4187
4188
4189
4190 function test_2d_fillStyle_parse_current_removed() {
4191
4192 var canvas = document.getElementById('c145');
4193 var ctx = canvas.getContext('2d');
4194
4195 // Try not to let it undetectably incorrectly pick up opaque-black
4196 // from other parts of the document:
4197 document.body.parentNode.setAttribute('style', 'color: #f00');
4198 document.body.setAttribute('style', 'color: #f00');
4199 canvas.setAttribute('style', 'color: #f00');
4200
4201 var canvas2 = document.createElement('canvas');
4202 var ctx2 = canvas2.getContext('2d');
4203 ctx2.fillStyle = '#f00';
4204 ctx2.fillStyle = 'currentColor';
4205 ctx2.fillRect(0, 0, 100, 50);
4206 ctx.drawImage(canvas2, 0, 0);
4207
4208 document.body.parentNode.removeAttribute('style');
4209 document.body.removeAttribute('style');
4210
4211 isPixel(ctx, 50,25, 0,0,0,255, 0);
4212
4213
4214 }
4215 </script>
4216
4217 <!-- [[[ test_2d.fillStyle.parse.hex3.html ]]] -->
4218
4219 <p>Canvas test: 2d.fillStyle.parse.hex3</p>
4220 <canvas id="c146" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4221 <script>
4222
4223
4224 function test_2d_fillStyle_parse_hex3() {
4225
4226 var canvas = document.getElementById('c146');
4227 var ctx = canvas.getContext('2d');
4228
4229
4230 ctx.fillStyle = '#f00';
4231 ctx.fillStyle = '#0f0';
4232 ctx.fillRect(0, 0, 100, 50);
4233 isPixel(ctx, 50,25, 0,255,0,255, 0);
4234
4235
4236 }
4237 </script>
4238
4239 <!-- [[[ test_2d.fillStyle.parse.hex6.html ]]] -->
4240
4241 <p>Canvas test: 2d.fillStyle.parse.hex6</p>
4242 <canvas id="c147" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4243 <script>
4244
4245
4246 function test_2d_fillStyle_parse_hex6() {
4247
4248 var canvas = document.getElementById('c147');
4249 var ctx = canvas.getContext('2d');
4250
4251
4252 ctx.fillStyle = '#f00';
4253 ctx.fillStyle = '#00fF00';
4254 ctx.fillRect(0, 0, 100, 50);
4255 isPixel(ctx, 50,25, 0,255,0,255, 0);
4256
4257
4258 }
4259 </script>
4260
4261 <!-- [[[ test_2d.fillStyle.parse.hsl-1.html ]]] -->
4262
4263 <p>Canvas test: 2d.fillStyle.parse.hsl-1</p>
4264 <canvas id="c148" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4265 <script>
4266
4267
4268 function test_2d_fillStyle_parse_hsl_1() {
4269
4270 var canvas = document.getElementById('c148');
4271 var ctx = canvas.getContext('2d');
4272
4273
4274 ctx.fillStyle = '#f00';
4275 ctx.fillStyle = 'hsl(120, 100%, 50%)';
4276 ctx.fillRect(0, 0, 100, 50);
4277 isPixel(ctx, 50,25, 0,255,0,255, 0);
4278
4279
4280 }
4281 </script>
4282
4283 <!-- [[[ test_2d.fillStyle.parse.hsl-2.html ]]] -->
4284
4285 <p>Canvas test: 2d.fillStyle.parse.hsl-2</p>
4286 <canvas id="c149" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4287 <script>
4288
4289
4290 function test_2d_fillStyle_parse_hsl_2() {
4291
4292 var canvas = document.getElementById('c149');
4293 var ctx = canvas.getContext('2d');
4294
4295
4296 ctx.fillStyle = '#f00';
4297 ctx.fillStyle = 'hsl( -240 , 100% , 50% )';
4298 ctx.fillRect(0, 0, 100, 50);
4299 isPixel(ctx, 50,25, 0,255,0,255, 0);
4300
4301
4302 }
4303 </script>
4304
4305 <!-- [[[ test_2d.fillStyle.parse.hsl-3.html ]]] -->
4306
4307 <p>Canvas test: 2d.fillStyle.parse.hsl-3</p>
4308 <canvas id="c150" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4309 <script>
4310
4311
4312 function test_2d_fillStyle_parse_hsl_3() {
4313
4314 var canvas = document.getElementById('c150');
4315 var ctx = canvas.getContext('2d');
4316
4317
4318 ctx.fillStyle = '#f00';
4319 ctx.fillStyle = 'hsl(360120, 100%, 50%)';
4320 ctx.fillRect(0, 0, 100, 50);
4321 isPixel(ctx, 50,25, 0,255,0,255, 0);
4322
4323
4324 }
4325 </script>
4326
4327 <!-- [[[ test_2d.fillStyle.parse.hsl-4.html ]]] -->
4328
4329 <p>Canvas test: 2d.fillStyle.parse.hsl-4</p>
4330 <canvas id="c151" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4331 <script>
4332
4333
4334 function test_2d_fillStyle_parse_hsl_4() {
4335
4336 var canvas = document.getElementById('c151');
4337 var ctx = canvas.getContext('2d');
4338
4339
4340 ctx.fillStyle = '#f00';
4341 ctx.fillStyle = 'hsl(-360240, 100%, 50%)';
4342 ctx.fillRect(0, 0, 100, 50);
4343 isPixel(ctx, 50,25, 0,255,0,255, 0);
4344
4345
4346 }
4347 </script>
4348
4349 <!-- [[[ test_2d.fillStyle.parse.hsl-5.html ]]] -->
4350
4351 <p>Canvas test: 2d.fillStyle.parse.hsl-5</p>
4352 <canvas id="c152" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4353 <script>
4354
4355
4356 function test_2d_fillStyle_parse_hsl_5() {
4357
4358 var canvas = document.getElementById('c152');
4359 var ctx = canvas.getContext('2d');
4360
4361
4362 ctx.fillStyle = '#f00';
4363 ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%)';
4364 ctx.fillRect(0, 0, 100, 50);
4365 isPixel(ctx, 50,25, 0,255,0,255, 0);
4366
4367
4368 }
4369 </script>
4370
4371 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-1.html ]]] -->
4372
4373 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-1</p>
4374 <canvas id="c153" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4375 <script>
4376
4377
4378 function test_2d_fillStyle_parse_hsl_clamp_1() {
4379
4380 var canvas = document.getElementById('c153');
4381 var ctx = canvas.getContext('2d');
4382
4383
4384 ctx.fillStyle = '#f00';
4385 ctx.fillStyle = 'hsl(120, 200%, 50%)';
4386 ctx.fillRect(0, 0, 100, 50);
4387 isPixel(ctx, 50,25, 0,255,0,255, 0);
4388
4389
4390 }
4391 </script>
4392
4393 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-2.html ]]] -->
4394
4395 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-2</p>
4396 <canvas id="c154" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4397 <script>
4398
4399
4400 function test_2d_fillStyle_parse_hsl_clamp_2() {
4401
4402 var canvas = document.getElementById('c154');
4403 var ctx = canvas.getContext('2d');
4404
4405
4406 ctx.fillStyle = '#f00';
4407 ctx.fillStyle = 'hsl(120, -200%, 49.9%)';
4408 ctx.fillRect(0, 0, 100, 50);
4409 isPixel(ctx, 50,25, 127,127,127,255, 0);
4410
4411
4412 }
4413 </script>
4414
4415 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-3.html ]]] -->
4416
4417 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-3</p>
4418 <canvas id="c155" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4419 <script>
4420
4421
4422 function test_2d_fillStyle_parse_hsl_clamp_3() {
4423
4424 var canvas = document.getElementById('c155');
4425 var ctx = canvas.getContext('2d');
4426
4427
4428 ctx.fillStyle = '#f00';
4429 ctx.fillStyle = 'hsl(120, 100%, 200%)';
4430 ctx.fillRect(0, 0, 100, 50);
4431 isPixel(ctx, 50,25, 255,255,255,255, 0);
4432
4433
4434 }
4435 </script>
4436
4437 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-4.html ]]] -->
4438
4439 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-4</p>
4440 <canvas id="c156" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4441 <script>
4442
4443
4444 function test_2d_fillStyle_parse_hsl_clamp_4() {
4445
4446 var canvas = document.getElementById('c156');
4447 var ctx = canvas.getContext('2d');
4448
4449
4450 ctx.fillStyle = '#f00';
4451 ctx.fillStyle = 'hsl(120, 100%, -200%)';
4452 ctx.fillRect(0, 0, 100, 50);
4453 isPixel(ctx, 50,25, 0,0,0,255, 0);
4454
4455
4456 }
4457 </script>
4458
4459 <!-- [[[ test_2d.fillStyle.parse.hsla-1.html ]]] -->
4460
4461 <p>Canvas test: 2d.fillStyle.parse.hsla-1</p>
4462 <canvas id="c157" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4463 <script>
4464
4465
4466 function test_2d_fillStyle_parse_hsla_1() {
4467
4468 var canvas = document.getElementById('c157');
4469 var ctx = canvas.getContext('2d');
4470
4471
4472 ctx.fillStyle = '#f00';
4473 ctx.fillStyle = 'hsla(120, 100%, 50%, 0.499)';
4474 ctx.fillRect(0, 0, 100, 50);
4475 isPixel(ctx, 50,25, 0,255,0,127, 0);
4476
4477
4478 }
4479 </script>
4480
4481 <!-- [[[ test_2d.fillStyle.parse.hsla-2.html ]]] -->
4482
4483 <p>Canvas test: 2d.fillStyle.parse.hsla-2</p>
4484 <canvas id="c158" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4485 <script>
4486
4487
4488 function test_2d_fillStyle_parse_hsla_2() {
4489
4490 var canvas = document.getElementById('c158');
4491 var ctx = canvas.getContext('2d');
4492
4493
4494 ctx.fillStyle = '#f00';
4495 ctx.fillStyle = 'hsla( 120.0 , 100.0% , 50.0% , 1 )';
4496 ctx.fillRect(0, 0, 100, 50);
4497 isPixel(ctx, 50,25, 0,255,0,255, 0);
4498
4499
4500 }
4501 </script>
4502
4503 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-1.html ]]] -->
4504
4505 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-1</p>
4506 <canvas id="c159" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4507 <script>
4508
4509
4510 function test_2d_fillStyle_parse_hsla_clamp_1() {
4511
4512 var canvas = document.getElementById('c159');
4513 var ctx = canvas.getContext('2d');
4514
4515
4516 ctx.fillStyle = '#f00';
4517 ctx.fillStyle = 'hsla(120, 200%, 50%, 1)';
4518 ctx.fillRect(0, 0, 100, 50);
4519 isPixel(ctx, 50,25, 0,255,0,255, 0);
4520
4521
4522 }
4523 </script>
4524
4525 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-2.html ]]] -->
4526
4527 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-2</p>
4528 <canvas id="c160" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4529 <script>
4530
4531
4532 function test_2d_fillStyle_parse_hsla_clamp_2() {
4533
4534 var canvas = document.getElementById('c160');
4535 var ctx = canvas.getContext('2d');
4536
4537
4538 ctx.fillStyle = '#f00';
4539 ctx.fillStyle = 'hsla(120, -200%, 49.9%, 1)';
4540 ctx.fillRect(0, 0, 100, 50);
4541 isPixel(ctx, 50,25, 127,127,127,255, 0);
4542
4543
4544 }
4545 </script>
4546
4547 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-3.html ]]] -->
4548
4549 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-3</p>
4550 <canvas id="c161" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4551 <script>
4552
4553
4554 function test_2d_fillStyle_parse_hsla_clamp_3() {
4555
4556 var canvas = document.getElementById('c161');
4557 var ctx = canvas.getContext('2d');
4558
4559
4560 ctx.fillStyle = '#f00';
4561 ctx.fillStyle = 'hsla(120, 100%, 200%, 1)';
4562 ctx.fillRect(0, 0, 100, 50);
4563 isPixel(ctx, 50,25, 255,255,255,255, 0);
4564
4565
4566 }
4567 </script>
4568
4569 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-4.html ]]] -->
4570
4571 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-4</p>
4572 <canvas id="c162" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4573 <script>
4574
4575
4576 function test_2d_fillStyle_parse_hsla_clamp_4() {
4577
4578 var canvas = document.getElementById('c162');
4579 var ctx = canvas.getContext('2d');
4580
4581
4582 ctx.fillStyle = '#f00';
4583 ctx.fillStyle = 'hsla(120, 100%, -200%, 1)';
4584 ctx.fillRect(0, 0, 100, 50);
4585 isPixel(ctx, 50,25, 0,0,0,255, 0);
4586
4587
4588 }
4589 </script>
4590
4591 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-5.html ]]] -->
4592
4593 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-5</p>
4594 <canvas id="c163" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4595 <script>
4596
4597
4598 function test_2d_fillStyle_parse_hsla_clamp_5() {
4599
4600 var canvas = document.getElementById('c163');
4601 var ctx = canvas.getContext('2d');
4602
4603
4604 ctx.fillStyle = '#f00';
4605 ctx.fillStyle = 'hsla(120, 100%, 50%, 2)';
4606 ctx.fillRect(0, 0, 100, 50);
4607 isPixel(ctx, 50,25, 0,255,0,255, 0);
4608
4609
4610 }
4611 </script>
4612
4613 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-6.html ]]] -->
4614
4615 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-6</p>
4616 <canvas id="c164" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4617 <script>
4618
4619
4620 function test_2d_fillStyle_parse_hsla_clamp_6() {
4621
4622 var canvas = document.getElementById('c164');
4623 var ctx = canvas.getContext('2d');
4624
4625
4626 ctx.fillStyle = '#f00';
4627 ctx.fillStyle = 'hsla(120, 100%, 0%, -2)';
4628 ctx.fillRect(0, 0, 100, 50);
4629 isPixel(ctx, 50,25, 0,0,0,0, 0);
4630
4631
4632 }
4633 </script>
4634
4635 <!-- [[[ test_2d.fillStyle.parse.html4.html ]]] -->
4636
4637 <p>Canvas test: 2d.fillStyle.parse.html4</p>
4638 <canvas id="c165" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4639 <script>
4640
4641
4642 function test_2d_fillStyle_parse_html4() {
4643
4644 var canvas = document.getElementById('c165');
4645 var ctx = canvas.getContext('2d');
4646
4647
4648 ctx.fillStyle = '#f00';
4649 ctx.fillStyle = 'limE';
4650 ctx.fillRect(0, 0, 100, 50);
4651 isPixel(ctx, 50,25, 0,255,0,255, 0);
4652
4653
4654 }
4655 </script>
4656
4657 <!-- [[[ test_2d.fillStyle.parse.invalid.hex3.html ]]] -->
4658
4659 <p>Canvas test: 2d.fillStyle.parse.invalid.hex3</p>
4660 <canvas id="c166" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4661 <script>
4662
4663
4664 function test_2d_fillStyle_parse_invalid_hex3() {
4665
4666 var canvas = document.getElementById('c166');
4667 var ctx = canvas.getContext('2d');
4668
4669
4670 ctx.fillStyle = '#0f0';
4671 try { ctx.fillStyle = '#g00'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4672 ctx.fillRect(0, 0, 100, 50);
4673 isPixel(ctx, 50,25, 0,255,0,255, 0);
4674
4675
4676 }
4677 </script>
4678
4679 <!-- [[[ test_2d.fillStyle.parse.invalid.hex6.html ]]] -->
4680
4681 <p>Canvas test: 2d.fillStyle.parse.invalid.hex6</p>
4682 <canvas id="c167" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4683 <script>
4684
4685
4686 function test_2d_fillStyle_parse_invalid_hex6() {
4687
4688 var canvas = document.getElementById('c167');
4689 var ctx = canvas.getContext('2d');
4690
4691
4692 ctx.fillStyle = '#0f0';
4693 try { ctx.fillStyle = '#fg0000'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4694 ctx.fillRect(0, 0, 100, 50);
4695 isPixel(ctx, 50,25, 0,255,0,255, 0);
4696
4697
4698 }
4699 </script>
4700
4701 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-1.html ]]] -->
4702
4703 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-1</p>
4704 <canvas id="c168" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4705 <script>
4706
4707
4708 function test_2d_fillStyle_parse_invalid_hsl_1() {
4709
4710 var canvas = document.getElementById('c168');
4711 var ctx = canvas.getContext('2d');
4712
4713
4714 ctx.fillStyle = '#0f0';
4715 try { ctx.fillStyle = 'hsl(0%, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4716 ctx.fillRect(0, 0, 100, 50);
4717 isPixel(ctx, 50,25, 0,255,0,255, 0);
4718
4719
4720 }
4721 </script>
4722
4723 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-2.html ]]] -->
4724
4725 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-2</p>
4726 <canvas id="c169" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4727 <script>
4728
4729
4730 function test_2d_fillStyle_parse_invalid_hsl_2() {
4731
4732 var canvas = document.getElementById('c169');
4733 var ctx = canvas.getContext('2d');
4734
4735
4736 ctx.fillStyle = '#0f0';
4737 try { ctx.fillStyle = 'hsl(z, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4738 ctx.fillRect(0, 0, 100, 50);
4739 isPixel(ctx, 50,25, 0,255,0,255, 0);
4740
4741
4742 }
4743 </script>
4744
4745 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-3.html ]]] -->
4746
4747 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-3</p>
4748 <canvas id="c170" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4749 <script>
4750
4751
4752 function test_2d_fillStyle_parse_invalid_hsl_3() {
4753
4754 var canvas = document.getElementById('c170');
4755 var ctx = canvas.getContext('2d');
4756
4757
4758 ctx.fillStyle = '#0f0';
4759 try { ctx.fillStyle = 'hsl(0, 0, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4760 ctx.fillRect(0, 0, 100, 50);
4761 isPixel(ctx, 50,25, 0,255,0,255, 0);
4762
4763
4764 }
4765 </script>
4766
4767 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-4.html ]]] -->
4768
4769 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-4</p>
4770 <canvas id="c171" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4771 <script>
4772
4773
4774 function test_2d_fillStyle_parse_invalid_hsl_4() {
4775
4776 var canvas = document.getElementById('c171');
4777 var ctx = canvas.getContext('2d');
4778
4779
4780 ctx.fillStyle = '#0f0';
4781 try { ctx.fillStyle = 'hsl(0, 100%, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4782 ctx.fillRect(0, 0, 100, 50);
4783 isPixel(ctx, 50,25, 0,255,0,255, 0);
4784
4785
4786 }
4787 </script>
4788
4789 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-5.html ]]] -->
4790
4791 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-5</p>
4792 <canvas id="c172" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4793 <script>
4794
4795
4796 function test_2d_fillStyle_parse_invalid_hsl_5() {
4797
4798 var canvas = document.getElementById('c172');
4799 var ctx = canvas.getContext('2d');
4800
4801
4802 ctx.fillStyle = '#0f0';
4803 try { ctx.fillStyle = 'hsl(0, 100%, 100%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4804 ctx.fillRect(0, 0, 100, 50);
4805 isPixel(ctx, 50,25, 0,255,0,255, 0);
4806
4807
4808 }
4809 </script>
4810
4811 <!-- [[[ test_2d.fillStyle.parse.invalid.hsla-1.html ]]] -->
4812
4813 <p>Canvas test: 2d.fillStyle.parse.invalid.hsla-1</p>
4814 <canvas id="c173" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4815 <script>
4816
4817
4818 function test_2d_fillStyle_parse_invalid_hsla_1() {
4819
4820 var canvas = document.getElementById('c173');
4821 var ctx = canvas.getContext('2d');
4822
4823
4824 ctx.fillStyle = '#0f0';
4825 try { ctx.fillStyle = 'hsla(0%, 100%, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4826 ctx.fillRect(0, 0, 100, 50);
4827 isPixel(ctx, 50,25, 0,255,0,255, 0);
4828
4829
4830 }
4831 </script>
4832
4833 <!-- [[[ test_2d.fillStyle.parse.invalid.hsla-2.html ]]] -->
4834
4835 <p>Canvas test: 2d.fillStyle.parse.invalid.hsla-2</p>
4836 <canvas id="c174" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4837 <script>
4838
4839
4840 function test_2d_fillStyle_parse_invalid_hsla_2() {
4841
4842 var canvas = document.getElementById('c174');
4843 var ctx = canvas.getContext('2d');
4844
4845
4846 ctx.fillStyle = '#0f0';
4847 try { ctx.fillStyle = 'hsla(0, 0, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4848 ctx.fillRect(0, 0, 100, 50);
4849 isPixel(ctx, 50,25, 0,255,0,255, 0);
4850
4851
4852 }
4853 </script>
4854
4855 <!-- [[[ test_2d.fillStyle.parse.invalid.name-1.html ]]] -->
4856
4857 <p>Canvas test: 2d.fillStyle.parse.invalid.name-1</p>
4858 <canvas id="c174a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4859 <script>
4860
4861
4862 function test_2d_fillStyle_parse_invalid_name_1() {
4863
4864 var canvas = document.getElementById('c174a');
4865 var ctx = canvas.getContext('2d');
4866
4867 ctx.fillStyle = '#0f0';
4868 try { ctx.fillStyle = 'darkbrown'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4869 ctx.fillRect(0, 0, 100, 50);
4870 isPixel(ctx, 50,25, 0,255,0,255, 0);
4871
4872
4873 }
4874 </script>
4875
4876 <!-- [[[ test_2d.fillStyle.parse.invalid.name-2.html ]]] -->
4877
4878 <p>Canvas test: 2d.fillStyle.parse.invalid.name-2</p>
4879 <canvas id="c174b" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4880 <script>
4881
4882
4883 function test_2d_fillStyle_parse_invalid_name_2() {
4884
4885 var canvas = document.getElementById('c174b');
4886 var ctx = canvas.getContext('2d');
4887
4888 ctx.fillStyle = '#0f0';
4889 try { ctx.fillStyle = 'firebrick1'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4890 ctx.fillRect(0, 0, 100, 50);
4891 isPixel(ctx, 50,25, 0,255,0,255, 0);
4892
4893
4894 }
4895 </script>
4896
4897 <!-- [[[ test_2d.fillStyle.parse.invalid.name-3.html ]]] -->
4898
4899 <p>Canvas test: 2d.fillStyle.parse.invalid.name-3</p>
4900 <canvas id="c174c" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4901 <script>
4902
4903
4904 function test_2d_fillStyle_parse_invalid_name_3() {
4905
4906 var canvas = document.getElementById('c174c');
4907 var ctx = canvas.getContext('2d');
4908
4909 ctx.fillStyle = '#0f0';
4910 try { ctx.fillStyle = 'red blue'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4911 ctx.fillRect(0, 0, 100, 50);
4912 isPixel(ctx, 50,25, 0,255,0,255, 0);
4913
4914
4915 }
4916 </script>
4917
4918 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-1.html ]]] -->
4919
4920 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-1</p>
4921 <canvas id="c175" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4922 <script>
4923
4924
4925 function test_2d_fillStyle_parse_invalid_rgb_1() {
4926
4927 var canvas = document.getElementById('c175');
4928 var ctx = canvas.getContext('2d');
4929
4930
4931 ctx.fillStyle = '#0f0';
4932 try { ctx.fillStyle = 'rgb(255.0, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4933 ctx.fillRect(0, 0, 100, 50);
4934 isPixel(ctx, 50,25, 0,255,0,255, 0);
4935
4936
4937 }
4938 </script>
4939
4940 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-2.html ]]] -->
4941
4942 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-2</p>
4943 <canvas id="c176" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4944 <script>
4945
4946
4947 function test_2d_fillStyle_parse_invalid_rgb_2() {
4948
4949 var canvas = document.getElementById('c176');
4950 var ctx = canvas.getContext('2d');
4951
4952
4953 ctx.fillStyle = '#0f0';
4954 try { ctx.fillStyle = 'rgb(255, 0.0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4955 ctx.fillRect(0, 0, 100, 50);
4956 isPixel(ctx, 50,25, 0,255,0,255, 0);
4957
4958
4959 }
4960 </script>
4961
4962 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-3.html ]]] -->
4963
4964 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-3</p>
4965 <canvas id="c177" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4966 <script>
4967
4968
4969 function test_2d_fillStyle_parse_invalid_rgb_3() {
4970
4971 var canvas = document.getElementById('c177');
4972 var ctx = canvas.getContext('2d');
4973
4974
4975 ctx.fillStyle = '#0f0';
4976 try { ctx.fillStyle = 'rgb(255.0, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4977 ctx.fillRect(0, 0, 100, 50);
4978 isPixel(ctx, 50,25, 0,255,0,255, 0);
4979
4980
4981 }
4982 </script>
4983
4984 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-4.html ]]] -->
4985
4986 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-4</p>
4987 <canvas id="c178" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4988 <script>
4989
4990
4991 function test_2d_fillStyle_parse_invalid_rgb_4() {
4992
4993 var canvas = document.getElementById('c178');
4994 var ctx = canvas.getContext('2d');
4995
4996
4997 ctx.fillStyle = '#0f0';
4998 try { ctx.fillStyle = 'rgb(100%, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4999 ctx.fillRect(0, 0, 100, 50);
5000 isPixel(ctx, 50,25, 0,255,0,255, 0);
5001
5002
5003 }
5004 </script>
5005
5006 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-5.html ]]] -->
5007
5008 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-5</p>
5009 <canvas id="c179" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5010 <script>
5011
5012
5013 function test_2d_fillStyle_parse_invalid_rgb_5() {
5014
5015 var canvas = document.getElementById('c179');
5016 var ctx = canvas.getContext('2d');
5017
5018
5019 ctx.fillStyle = '#0f0';
5020 try { ctx.fillStyle = 'rgb(255 0 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5021 ctx.fillRect(0, 0, 100, 50);
5022 isPixel(ctx, 50,25, 0,255,0,255, 0);
5023
5024
5025 }
5026 </script>
5027
5028 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-6.html ]]] -->
5029
5030 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-6</p>
5031 <canvas id="c180" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5032 <script>
5033
5034
5035 function test_2d_fillStyle_parse_invalid_rgb_6() {
5036
5037 var canvas = document.getElementById('c180');
5038 var ctx = canvas.getContext('2d');
5039
5040
5041 ctx.fillStyle = '#0f0';
5042 try { ctx.fillStyle = 'rgb(255, - 1, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5043 ctx.fillRect(0, 0, 100, 50);
5044 isPixel(ctx, 50,25, 0,255,0,255, 0);
5045
5046
5047 }
5048 </script>
5049
5050 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-7.html ]]] -->
5051
5052 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-7</p>
5053 <canvas id="c181" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5054 <script>
5055
5056
5057 function test_2d_fillStyle_parse_invalid_rgb_7() {
5058
5059 var canvas = document.getElementById('c181');
5060 var ctx = canvas.getContext('2d');
5061
5062
5063 ctx.fillStyle = '#0f0';
5064 try { ctx.fillStyle = 'rgb(255, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5065 ctx.fillRect(0, 0, 100, 50);
5066 isPixel(ctx, 50,25, 0,255,0,255, 0);
5067
5068
5069 }
5070 </script>
5071
5072 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-1.html ]]] -->
5073
5074 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-1</p>
5075 <canvas id="c182" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5076 <script>
5077
5078
5079 function test_2d_fillStyle_parse_invalid_rgba_1() {
5080
5081 var canvas = document.getElementById('c182');
5082 var ctx = canvas.getContext('2d');
5083
5084
5085 ctx.fillStyle = '#0f0';
5086 try { ctx.fillStyle = 'rgba(255, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5087 ctx.fillRect(0, 0, 100, 50);
5088 isPixel(ctx, 50,25, 0,255,0,255, 0);
5089
5090
5091 }
5092 </script>
5093
5094 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-2.html ]]] -->
5095
5096 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-2</p>
5097 <canvas id="c183" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5098 <script>
5099
5100
5101 function test_2d_fillStyle_parse_invalid_rgba_2() {
5102
5103 var canvas = document.getElementById('c183');
5104 var ctx = canvas.getContext('2d');
5105
5106
5107 ctx.fillStyle = '#0f0';
5108 try { ctx.fillStyle = 'rgba(255.0, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5109 ctx.fillRect(0, 0, 100, 50);
5110 isPixel(ctx, 50,25, 0,255,0,255, 0);
5111
5112
5113 }
5114 </script>
5115
5116 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-3.html ]]] -->
5117
5118 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-3</p>
5119 <canvas id="c184" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5120 <script>
5121
5122
5123 function test_2d_fillStyle_parse_invalid_rgba_3() {
5124
5125 var canvas = document.getElementById('c184');
5126 var ctx = canvas.getContext('2d');
5127
5128
5129 ctx.fillStyle = '#0f0';
5130 try { ctx.fillStyle = 'rgba(100%, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5131 ctx.fillRect(0, 0, 100, 50);
5132 isPixel(ctx, 50,25, 0,255,0,255, 0);
5133
5134
5135 }
5136 </script>
5137
5138 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-4.html ]]] -->
5139
5140 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-4</p>
5141 <canvas id="c185" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5142 <script>
5143
5144
5145 function test_2d_fillStyle_parse_invalid_rgba_4() {
5146
5147 var canvas = document.getElementById('c185');
5148 var ctx = canvas.getContext('2d');
5149
5150
5151 ctx.fillStyle = '#0f0';
5152 try { ctx.fillStyle = 'rgba(255, 0, 0, 100%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5153 ctx.fillRect(0, 0, 100, 50);
5154 isPixel(ctx, 50,25, 0,255,0,255, 0);
5155
5156
5157 }
5158 </script>
5159
5160 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-5.html ]]] -->
5161
5162 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-5</p>
5163 <canvas id="c186" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5164 <script>
5165
5166
5167 function test_2d_fillStyle_parse_invalid_rgba_5() {
5168
5169 var canvas = document.getElementById('c186');
5170 var ctx = canvas.getContext('2d');
5171
5172
5173 ctx.fillStyle = '#0f0';
5174 try { ctx.fillStyle = 'rgba(255, 0, 0, 1. 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5175 ctx.fillRect(0, 0, 100, 50);
5176 isPixel(ctx, 50,25, 0,255,0,255, 0);
5177
5178
5179 }
5180 </script>
5181
5182 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-1.html ]]] -->
5183
5184 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-1</p>
5185 <canvas id="c187" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5186 <script>
5187
5188
5189 function test_2d_fillStyle_parse_rgb_clamp_1() {
5190
5191 var canvas = document.getElementById('c187');
5192 var ctx = canvas.getContext('2d');
5193
5194
5195 ctx.fillStyle = '#f00';
5196 ctx.fillStyle = 'rgb(-1000, 1000, -1000)';
5197 ctx.fillRect(0, 0, 100, 50);
5198 isPixel(ctx, 50,25, 0,255,0,255, 0);
5199
5200
5201 }
5202 </script>
5203
5204 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-2.html ]]] -->
5205
5206 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-2</p>
5207 <canvas id="c188" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5208 <script>
5209
5210
5211 function test_2d_fillStyle_parse_rgb_clamp_2() {
5212
5213 var canvas = document.getElementById('c188');
5214 var ctx = canvas.getContext('2d');
5215
5216
5217 ctx.fillStyle = '#f00';
5218 ctx.fillStyle = 'rgb(-200%, 200%, -200%)';
5219 ctx.fillRect(0, 0, 100, 50);
5220 isPixel(ctx, 50,25, 0,255,0,255, 0);
5221
5222
5223 }
5224 </script>
5225
5226 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-3.html ]]] -->
5227
5228 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-3</p>
5229 <canvas id="c189" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5230 <script>
5231
5232
5233 function test_2d_fillStyle_parse_rgb_clamp_3() {
5234
5235 var canvas = document.getElementById('c189');
5236 var ctx = canvas.getContext('2d');
5237
5238
5239 ctx.fillStyle = '#f00';
5240 ctx.fillStyle = 'rgb(-2147483649, 4294967298, -18446744073709551619)';
5241 ctx.fillRect(0, 0, 100, 50);
5242 isPixel(ctx, 50,25, 0,255,0,255, 0);
5243
5244
5245 }
5246 </script>
5247
5248 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-4.html ]]] -->
5249
5250 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-4</p>
5251 <canvas id="c190" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5252 <script>
5253
5254
5255 function test_2d_fillStyle_parse_rgb_clamp_4() {
5256
5257 var canvas = document.getElementById('c190');
5258 var ctx = canvas.getContext('2d');
5259
5260
5261 ctx.fillStyle = '#f00';
5262 ctx.fillStyle = 'rgb(-1000000000000000000000000000000000000000, 1000000000000000000000000000000000000000, -1000000000000000000000000000000000000000)';
5263 ctx.fillRect(0, 0, 100, 50);
5264 isPixel(ctx, 50,25, 0,255,0,255, 0);
5265
5266
5267 }
5268 </script>
5269
5270 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-5.html ]]] -->
5271
5272 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-5</p>
5273 <canvas id="c191" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5274 <script>
5275
5276
5277 function test_2d_fillStyle_parse_rgb_clamp_5() {
5278
5279 var canvas = document.getElementById('c191');
5280 var ctx = canvas.getContext('2d');
5281
5282
5283 ctx.fillStyle = '#f00';
5284 ctx.fillStyle = 'rgb(-10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, -10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000)';
5285 ctx.fillRect(0, 0, 100, 50);
5286 isPixel(ctx, 50,25, 0,255,0,255, 0);
5287
5288
5289 }
5290 </script>
5291
5292 <!-- [[[ test_2d.fillStyle.parse.rgb-num.html ]]] -->
5293
5294 <p>Canvas test: 2d.fillStyle.parse.rgb-num</p>
5295 <canvas id="c192" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5296 <script>
5297
5298
5299 function test_2d_fillStyle_parse_rgb_num() {
5300
5301 var canvas = document.getElementById('c192');
5302 var ctx = canvas.getContext('2d');
5303
5304
5305 ctx.fillStyle = '#f00';
5306 ctx.fillStyle = 'rgb(0,255,0)';
5307 ctx.fillRect(0, 0, 100, 50);
5308 isPixel(ctx, 50,25, 0,255,0,255, 0);
5309
5310
5311 }
5312 </script>
5313
5314 <!-- [[[ test_2d.fillStyle.parse.rgb-percent.html ]]] -->
5315
5316 <p>Canvas test: 2d.fillStyle.parse.rgb-percent</p>
5317 <canvas id="c193" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5318 <script>
5319
5320
5321 function test_2d_fillStyle_parse_rgb_percent() {
5322
5323 var canvas = document.getElementById('c193');
5324 var ctx = canvas.getContext('2d');
5325
5326
5327 ctx.fillStyle = '#f00';
5328 ctx.fillStyle = 'rgb(0% ,100% ,0%)';
5329 ctx.fillRect(0, 0, 100, 50);
5330 isPixel(ctx, 50,25, 0,255,0,255, 0);
5331
5332
5333 }
5334 </script>
5335
5336 <!-- [[[ test_2d.fillStyle.parse.rgba-clamp-1.html ]]] -->
5337
5338 <p>Canvas test: 2d.fillStyle.parse.rgba-clamp-1</p>
5339 <canvas id="c194" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5340 <script>
5341
5342
5343 function test_2d_fillStyle_parse_rgba_clamp_1() {
5344
5345 var canvas = document.getElementById('c194');
5346 var ctx = canvas.getContext('2d');
5347
5348
5349 ctx.fillStyle = '#f00';
5350 ctx.fillStyle = 'rgba(0, 255, 0, -2)';
5351 ctx.fillRect(0, 0, 100, 50);
5352 isPixel(ctx, 50,25, 0,0,0,0, 0);
5353
5354
5355 }
5356 </script>
5357
5358 <!-- [[[ test_2d.fillStyle.parse.rgba-clamp-2.html ]]] -->
5359
5360 <p>Canvas test: 2d.fillStyle.parse.rgba-clamp-2</p>
5361 <canvas id="c195" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5362 <script>
5363
5364
5365 function test_2d_fillStyle_parse_rgba_clamp_2() {
5366
5367 var canvas = document.getElementById('c195');
5368 var ctx = canvas.getContext('2d');
5369
5370
5371 ctx.fillStyle = '#f00';
5372 ctx.fillStyle = 'rgba(0, 255, 0, 2)';
5373 ctx.fillRect(0, 0, 100, 50);
5374 isPixel(ctx, 50,25, 0,255,0,255, 0);
5375
5376
5377 }
5378 </script>
5379
5380 <!-- [[[ test_2d.fillStyle.parse.rgba-num-1.html ]]] -->
5381
5382 <p>Canvas test: 2d.fillStyle.parse.rgba-num-1</p>
5383 <canvas id="c196" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5384 <script>
5385
5386
5387 function test_2d_fillStyle_parse_rgba_num_1() {
5388
5389 var canvas = document.getElementById('c196');
5390 var ctx = canvas.getContext('2d');
5391
5392
5393 ctx.fillStyle = '#f00';
5394 ctx.fillStyle = 'rgba( 0 , 255 , 0 , .499 )';
5395 ctx.fillRect(0, 0, 100, 50);
5396 isPixel(ctx, 50,25, 0,255,0,127, 0);
5397
5398
5399 }
5400 </script>
5401
5402 <!-- [[[ test_2d.fillStyle.parse.rgba-num-2.html ]]] -->
5403
5404 <p>Canvas test: 2d.fillStyle.parse.rgba-num-2</p>
5405 <canvas id="c197" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5406 <script>
5407
5408
5409 function test_2d_fillStyle_parse_rgba_num_2() {
5410
5411 var canvas = document.getElementById('c197');
5412 var ctx = canvas.getContext('2d');
5413
5414
5415 ctx.fillStyle = '#f00';
5416 ctx.fillStyle = 'rgba( 0 , 255 , 0 , 0.499 )';
5417 ctx.fillRect(0, 0, 100, 50);
5418 isPixel(ctx, 50,25, 0,255,0,127, 0);
5419
5420
5421 }
5422 </script>
5423
5424 <!-- [[[ test_2d.fillStyle.parse.rgba-percent.html ]]] -->
5425
5426 <p>Canvas test: 2d.fillStyle.parse.rgba-percent</p>
5427 <canvas id="c198" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5428 <script>
5429
5430
5431 function test_2d_fillStyle_parse_rgba_percent() {
5432
5433 var canvas = document.getElementById('c198');
5434 var ctx = canvas.getContext('2d');
5435
5436
5437 ctx.fillStyle = '#f00';
5438 ctx.fillStyle = 'rgba(0%,100%,0%,0.499)';
5439 ctx.fillRect(0, 0, 100, 50);
5440 isPixel(ctx, 50,25, 0,255,0,127, 0);
5441
5442
5443 }
5444 </script>
5445
5446 <!-- [[[ test_2d.fillStyle.parse.rgba-solid-1.html ]]] -->
5447
5448 <p>Canvas test: 2d.fillStyle.parse.rgba-solid-1</p>
5449 <canvas id="c199" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5450 <script>
5451
5452
5453 function test_2d_fillStyle_parse_rgba_solid_1() {
5454
5455 var canvas = document.getElementById('c199');
5456 var ctx = canvas.getContext('2d');
5457
5458
5459 ctx.fillStyle = '#f00';
5460 ctx.fillStyle = 'rgba( 0 , 255 , 0 , 1 )';
5461 ctx.fillRect(0, 0, 100, 50);
5462 isPixel(ctx, 50,25, 0,255,0,255, 0);
5463
5464
5465 }
5466 </script>
5467
5468 <!-- [[[ test_2d.fillStyle.parse.rgba-solid-2.html ]]] -->
5469
5470 <p>Canvas test: 2d.fillStyle.parse.rgba-solid-2</p>
5471 <canvas id="c200" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5472 <script>
5473
5474
5475 function test_2d_fillStyle_parse_rgba_solid_2() {
5476
5477 var canvas = document.getElementById('c200');
5478 var ctx = canvas.getContext('2d');
5479
5480
5481 ctx.fillStyle = '#f00';
5482 ctx.fillStyle = 'rgba( 0 , 255 , 0 , 1.0 )';
5483 ctx.fillRect(0, 0, 100, 50);
5484 isPixel(ctx, 50,25, 0,255,0,255, 0);
5485
5486
5487 }
5488 </script>
5489
5490 <!-- [[[ test_2d.fillStyle.parse.svg-1.html ]]] -->
5491
5492 <p>Canvas test: 2d.fillStyle.parse.svg-1</p>
5493 <canvas id="c201" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5494 <script>
5495
5496
5497 function test_2d_fillStyle_parse_svg_1() {
5498
5499 var canvas = document.getElementById('c201');
5500 var ctx = canvas.getContext('2d');
5501
5502
5503 ctx.fillStyle = '#f00';
5504 ctx.fillStyle = 'gray';
5505 ctx.fillRect(0, 0, 100, 50);
5506 isPixel(ctx, 50,25, 128,128,128,255, 0);
5507
5508
5509 }
5510 </script>
5511
5512 <!-- [[[ test_2d.fillStyle.parse.svg-2.html ]]] -->
5513
5514 <p>Canvas test: 2d.fillStyle.parse.svg-2</p>
5515 <canvas id="c202" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5516 <script>
5517
5518
5519 function test_2d_fillStyle_parse_svg_2() {
5520
5521 var canvas = document.getElementById('c202');
5522 var ctx = canvas.getContext('2d');
5523
5524
5525 ctx.fillStyle = '#f00';
5526 ctx.fillStyle = 'grey';
5527 ctx.fillRect(0, 0, 100, 50);
5528 isPixel(ctx, 50,25, 128,128,128,255, 0);
5529
5530
5531 }
5532 </script>
5533
5534 <!-- [[[ test_2d.fillStyle.parse.system.html ]]] -->
5535
5536 <p>Canvas test: 2d.fillStyle.parse.system</p>
5537 <canvas id="c203" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5538 <script>
5539
5540 function test_2d_fillStyle_parse_system() {
5541
5542 var canvas = document.getElementById('c203');
5543 var ctx = canvas.getContext('2d');
5544
5545
5546 ctx.fillStyle = '#f00';
5547 ctx.fillStyle = 'ThreeDDarkShadow';
5548 ok(/^#(?!(FF0000|ff0000|f00)$)/.test(ctx.fillStyle), "ctx.fillStyle =~ /^#(?!(FF0000|ff0000|f00)$)/"); // test that it's not red
5549
5550
5551 }
5552 </script>
5553
5554 <!-- [[[ test_2d.fillStyle.parse.transparent-1.html ]]] -->
5555
5556 <p>Canvas test: 2d.fillStyle.parse.transparent-1</p>
5557 <canvas id="c204" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5558 <script>
5559
5560
5561 function test_2d_fillStyle_parse_transparent_1() {
5562
5563 var canvas = document.getElementById('c204');
5564 var ctx = canvas.getContext('2d');
5565
5566
5567 ctx.fillStyle = '#f00';
5568 ctx.fillStyle = 'transparent';
5569 ctx.fillRect(0, 0, 100, 50);
5570 isPixel(ctx, 50,25, 0,0,0,0, 0);
5571
5572
5573 }
5574 </script>
5575
5576 <!-- [[[ test_2d.fillStyle.parse.transparent-2.html ]]] -->
5577
5578 <p>Canvas test: 2d.fillStyle.parse.transparent-2</p>
5579 <canvas id="c205" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5580 <script>
5581
5582
5583 function test_2d_fillStyle_parse_transparent_2() {
5584
5585 var canvas = document.getElementById('c205');
5586 var ctx = canvas.getContext('2d');
5587
5588
5589 ctx.fillStyle = '#f00';
5590 ctx.fillStyle = 'TrAnSpArEnT';
5591 ctx.fillRect(0, 0, 100, 50);
5592 isPixel(ctx, 50,25, 0,0,0,0, 0);
5593
5594
5595 }
5596 </script>
5597
5598 <!-- [[[ test_2d.getcontext.exists.html ]]] -->
5599
5600 <p>Canvas test: 2d.getcontext.exists</p>
5601 <!-- Testing: The 2D context is implemented -->
5602 <canvas id="c206" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5603 <script>
5604
5605 function test_2d_getcontext_exists() {
5606
5607 var canvas = document.getElementById('c206');
5608 var ctx = canvas.getContext('2d');
5609
5610 ok(canvas.getContext('2d') !== null, "canvas.getContext('2d') !== null");
5611
5612
5613 }
5614 </script>
5615
5616 <!-- [[[ test_2d.getcontext.shared.html ]]] -->
5617
5618 <p>Canvas test: 2d.getcontext.shared</p>
5619 <!-- Testing: getContext('2d') returns objects which share canvas state -->
5620 <canvas id="c207" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5621 <script>
5622
5623
5624 function test_2d_getcontext_shared() {
5625
5626 var canvas = document.getElementById('c207');
5627 var ctx = canvas.getContext('2d');
5628
5629 var ctx2 = canvas.getContext('2d');
5630 ctx.fillStyle = '#f00';
5631 ctx2.fillStyle = '#0f0';
5632 ctx.fillRect(0, 0, 100, 50);
5633 isPixel(ctx, 50,25, 0,255,0,255, 0);
5634
5635
5636 }
5637 </script>
5638
5639 <!-- [[[ test_2d.getcontext.unique.html ]]] -->
5640
5641 <p>Canvas test: 2d.getcontext.unique</p>
5642 <!-- Testing: getContext('2d') returns the same object -->
5643 <canvas id="c208" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5644 <script>
5645
5646 function test_2d_getcontext_unique() {
5647
5648 var canvas = document.getElementById('c208');
5649 var ctx = canvas.getContext('2d');
5650
5651 ok(canvas.getContext('2d') === canvas.getContext('2d'), "canvas.getContext('2d') === canvas.getContext('2d')");
5652
5653
5654 }
5655 </script>
5656
5657 <!-- [[[ test_2d.gradient.empty.html ]]] -->
5658
5659 <p>Canvas test: 2d.gradient.empty</p>
5660 <canvas id="c209" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5661 <script>
5662
5663
5664 function test_2d_gradient_empty() {
5665
5666 var canvas = document.getElementById('c209');
5667 var ctx = canvas.getContext('2d');
5668
5669 ctx.fillStyle = '#0f0';
5670 ctx.fillRect(0, 0, 100, 50);
5671 var g = ctx.createLinearGradient(0, 0, 0, 50);
5672 ctx.fillStyle = g;
5673 ctx.fillRect(0, 0, 100, 50);
5674 isPixel(ctx, 50,25, 0,255,0,255, 2);
5675
5676
5677 }
5678 </script>
5679
5680 <!-- [[[ test_2d.gradient.interpolate.alpha.html ]]] -->
5681
5682 <p>Canvas test: 2d.gradient.interpolate.alpha</p>
5683 <canvas id="c210" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5684 <script>
5685
5686
5687 function test_2d_gradient_interpolate_alpha() {
5688
5689 var canvas = document.getElementById('c210');
5690 var ctx = canvas.getContext('2d');
5691
5692 ctx.fillStyle = '#ff0';
5693 ctx.fillRect(0, 0, 100, 50);
5694 var g = ctx.createLinearGradient(0, 0, 100, 0);
5695 g.addColorStop(0, 'rgba(0,0,255, 0)');
5696 g.addColorStop(1, 'rgba(0,0,255, 1)');
5697 ctx.fillStyle = g;
5698 ctx.fillRect(0, 0, 100, 50);
5699 isPixel(ctx, 25,25, 191,191,63,255, 3);
5700 isPixel(ctx, 50,25, 127,127,127,255, 3);
5701 isPixel(ctx, 75,25, 63,63,191,255, 3);
5702
5703
5704 }
5705 </script>
5706
5707 <!-- [[[ test_2d.gradient.interpolate.colour.html ]]] -->
5708
5709 <p>Canvas test: 2d.gradient.interpolate.colour</p>
5710 <canvas id="c211" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5711 <script>
5712
5713
5714 function test_2d_gradient_interpolate_colour() {
5715
5716 var canvas = document.getElementById('c211');
5717 var ctx = canvas.getContext('2d');
5718
5719 var g = ctx.createLinearGradient(0, 0, 100, 0);
5720 g.addColorStop(0, '#ff0');
5721 g.addColorStop(1, '#00f');
5722 ctx.fillStyle = g;
5723 ctx.fillRect(0, 0, 100, 50);
5724 isPixel(ctx, 25,25, 191,191,63,255, 3);
5725 isPixel(ctx, 50,25, 127,127,127,255, 3);
5726 isPixel(ctx, 75,25, 63,63,191,255, 3);
5727
5728
5729 }
5730 </script>
5731
5732 <!-- [[[ test_2d.gradient.interpolate.colouralpha.html ]]] -->
5733
5734 <p>Canvas test: 2d.gradient.interpolate.colouralpha</p>
5735 <canvas id="c212" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5736 <script>
5737
5738
5739 function test_2d_gradient_interpolate_colouralpha() {
5740
5741 var canvas = document.getElementById('c212');
5742 var ctx = canvas.getContext('2d');
5743
5744 var g = ctx.createLinearGradient(0, 0, 100, 0);
5745 g.addColorStop(0, 'rgba(255,255,0, 0)');
5746 g.addColorStop(1, 'rgba(0,0,255, 1)');
5747 ctx.fillStyle = g;
5748 ctx.fillRect(0, 0, 100, 50);
5749 isPixel(ctx, 25,25, 191,191,63,63, 3);
5750 isPixel(ctx, 50,25, 127,127,127,127, 3);
5751 isPixel(ctx, 75,25, 63,63,191,191, 3);
5752
5753
5754 }
5755 </script>
5756
5757 <!-- [[[ test_2d.gradient.interpolate.multiple.html ]]] -->
5758
5759 <p>Canvas test: 2d.gradient.interpolate.multiple</p>
5760 <canvas id="c213" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5761 <script>
5762
5763
5764 function test_2d_gradient_interpolate_multiple() {
5765
5766 var canvas = document.getElementById('c213');
5767 var ctx = canvas.getContext('2d');
5768
5769 canvas.width = 200;
5770 var g = ctx.createLinearGradient(0, 0, 200, 0);
5771 g.addColorStop(0, '#ff0');
5772 g.addColorStop(0.5, '#0ff');
5773 g.addColorStop(1, '#f0f');
5774 ctx.fillStyle = g;
5775 ctx.fillRect(0, 0, 200, 50);
5776 isPixel(ctx, 50,25, 127,255,127,255, 3);
5777 isPixel(ctx, 100,25, 0,255,255,255, 3);
5778 isPixel(ctx, 150,25, 127,127,255,255, 3);
5779
5780
5781 }
5782 </script>
5783
5784 <!-- [[[ test_2d.gradient.interpolate.outside.html ]]] -->
5785
5786 <p>Canvas test: 2d.gradient.interpolate.outside</p>
5787 <canvas id="c214" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5788 <script>
5789
5790
5791 function test_2d_gradient_interpolate_outside() {
5792
5793 var canvas = document.getElementById('c214');
5794 var ctx = canvas.getContext('2d');
5795
5796 ctx.fillStyle = '#f00';
5797 ctx.fillRect(0, 0, 100, 50);
5798
5799 var g = ctx.createLinearGradient(25, 0, 75, 0);
5800 g.addColorStop(0.4, '#0f0');
5801 g.addColorStop(0.6, '#0f0');
5802
5803 ctx.fillStyle = g;
5804 ctx.fillRect(0, 0, 100, 50);
5805 isPixel(ctx, 20,25, 0,255,0,255, 2);
5806 isPixel(ctx, 50,25, 0,255,0,255, 2);
5807 isPixel(ctx, 80,25, 0,255,0,255, 2);
5808
5809
5810 }
5811 </script>
5812
5813 <!-- [[[ test_2d.gradient.interpolate.overlap.html ]]] -->
5814
5815 <p>Canvas test: 2d.gradient.interpolate.overlap</p>
5816 <canvas id="c215" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5817 <script>
5818
5819
5820 function test_2d_gradient_interpolate_overlap() {
5821
5822 var canvas = document.getElementById('c215');
5823 var ctx = canvas.getContext('2d');
5824
5825 if (!IsD2DEnabled() && !IsMacOSX10_5orOlder()) {
5826 // On D2D the different nature of how gradients
5827 // are drawn makes it so we cannot guarantee these stops are completely
5828 // hard.
5829
5830 // On OS X 10.5 quartz is confused by the overlapping stops: Bug #715235
5831 canvas.width = 200;
5832 var g = ctx.createLinearGradient(0, 0, 200, 0);
5833 g.addColorStop(0, '#f00');
5834 g.addColorStop(0, '#ff0');
5835 g.addColorStop(0.25, '#00f');
5836 g.addColorStop(0.25, '#0f0');
5837 g.addColorStop(0.25, '#0f0');
5838 g.addColorStop(0.25, '#0f0');
5839 g.addColorStop(0.25, '#ff0');
5840 g.addColorStop(0.5, '#00f');
5841 g.addColorStop(0.5, '#0f0');
5842 g.addColorStop(0.75, '#00f');
5843 g.addColorStop(0.75, '#f00');
5844 g.addColorStop(0.75, '#ff0');
5845 g.addColorStop(0.5, '#0f0');
5846 g.addColorStop(0.5, '#0f0');
5847 g.addColorStop(0.5, '#ff0');
5848 g.addColorStop(1, '#00f');
5849 ctx.fillStyle = g;
5850 ctx.fillRect(0, 0, 200, 50);
5851 isPixel(ctx, 49,25, 0,0,255,255, 16);
5852 isPixel(ctx, 51,25, 255,255,0,255, 16);
5853 isPixel(ctx, 99,25, 0,0,255,255, 16);
5854 isPixel(ctx, 101,25, 255,255,0,255, 16);
5855 isPixel(ctx, 149,25, 0,0,255,255, 16);
5856 isPixel(ctx, 151,25, 255,255,0,255, 16);
5857 }
5858 }
5859 </script>
5860
5861 <!-- [[[ test_2d.gradient.interpolate.overlap2.html ]]] -->
5862
5863 <p>Canvas test: 2d.gradient.interpolate.overlap2</p>
5864 <canvas id="c216" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5865 <script>
5866
5867
5868 function test_2d_gradient_interpolate_overlap2() {
5869
5870 var canvas = document.getElementById('c216');
5871 var ctx = canvas.getContext('2d');
5872
5873 var g = ctx.createLinearGradient(0, 0, 100, 0);
5874 var ps = [ 0, 1/10, 1/4, 1/3, 1/2, 3/4, 1 ];
5875 for (var p = 0; p < ps.length; ++p)
5876 {
5877 g.addColorStop(ps[p], '#0f0');
5878 for (var i = 0; i < 15; ++i)
5879 g.addColorStop(ps[p], '#f00');
5880 g.addColorStop(ps[p], '#0f0');
5881 }
5882 ctx.fillStyle = g;
5883 ctx.fillRect(0, 0, 100, 50);
5884
5885 if (!IsMacOSX10_5orOlder()) {
5886 // On OS X 10.5 quartz is confused by the overlapping stops: Bug #715235
5887 isPixel(ctx, 1,25, 0,255,0,255, 0);
5888 isPixel(ctx, 30,25, 0,255,0,255, 0);
5889 isPixel(ctx, 40,25, 0,255,0,255, 0);
5890 isPixel(ctx, 60,25, 0,255,0,255, 0);
5891 isPixel(ctx, 80,25, 0,255,0,255, 0);
5892 }
5893
5894 }
5895 </script>
5896
5897 <!-- [[[ test_2d.gradient.interpolate.solid.html ]]] -->
5898
5899 <p>Canvas test: 2d.gradient.interpolate.solid</p>
5900 <canvas id="c217" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5901 <script>
5902
5903
5904 function test_2d_gradient_interpolate_solid() {
5905
5906 var canvas = document.getElementById('c217');
5907 var ctx = canvas.getContext('2d');
5908
5909 var g = ctx.createLinearGradient(0, 0, 100, 0);
5910 g.addColorStop(0, '#0f0');
5911 g.addColorStop(1, '#0f0');
5912 ctx.fillStyle = g;
5913 ctx.fillRect(0, 0, 100, 50);
5914 isPixel(ctx, 50,25, 0,255,0,255, 0);
5915
5916
5917 }
5918 </script>
5919
5920 <!-- [[[ test_2d.gradient.interpolate.vertical.html ]]] -->
5921
5922 <p>Canvas test: 2d.gradient.interpolate.vertical</p>
5923 <canvas id="c218" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5924 <script>
5925
5926
5927 function test_2d_gradient_interpolate_vertical() {
5928
5929 var canvas = document.getElementById('c218');
5930 var ctx = canvas.getContext('2d');
5931
5932 var g = ctx.createLinearGradient(0, 0, 0, 50);
5933 g.addColorStop(0, '#ff0');
5934 g.addColorStop(1, '#00f');
5935 ctx.fillStyle = g;
5936 ctx.fillRect(0, 0, 100, 50);
5937 isPixel(ctx, 50,12, 191,191,63,255, 10);
5938 isPixel(ctx, 50,25, 127,127,127,255, 5);
5939 isPixel(ctx, 50,37, 63,63,191,255, 10);
5940
5941
5942 }
5943 </script>
5944
5945 <!-- [[[ test_2d.gradient.interpolate.zerosize.html ]]] -->
5946
5947 <p>Canvas test: 2d.gradient.interpolate.zerosize</p>
5948 <canvas id="c219" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5949 <script>
5950
5951
5952
5953 function test_2d_gradient_interpolate_zerosize() {
5954
5955 var canvas = document.getElementById('c219');
5956 var ctx = canvas.getContext('2d');
5957
5958 ctx.fillStyle = '#0f0';
5959 ctx.fillRect(0, 0, 100, 50);
5960
5961 var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
5962 g.addColorStop(0, '#f00');
5963 g.addColorStop(1, '#f00');
5964 ctx.fillStyle = g;
5965 ctx.fillRect(0, 0, 100, 50);
5966
5967 todo_isPixel(ctx, 40,20, 0,255,0,255, 2);
5968
5969 }
5970 </script>
5971
5972 <!-- [[[ test_2d.gradient.linear.nonfinite.html ]]] -->
5973
5974 <p>Canvas test: 2d.gradient.linear.nonfinite</p>
5975 <!-- Testing: createLinearGradient() throws NOT_SUPPORTED_ERR if arguments are not finite -->
5976 <canvas id="c220" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5977 <script>
5978
5979 function test_2d_gradient_linear_nonfinite() {
5980
5981 var canvas = document.getElementById('c220');
5982 var ctx = canvas.getContext('2d');
5983
5984 var _thrown = undefined; try {
5985 ctx.createLinearGradient(Infinity, 0, 1, 0);
5986 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5987 var _thrown = undefined; try {
5988 ctx.createLinearGradient(-Infinity, 0, 1, 0);
5989 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5990 var _thrown = undefined; try {
5991 ctx.createLinearGradient(NaN, 0, 1, 0);
5992 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5993 var _thrown = undefined; try {
5994 ctx.createLinearGradient(0, Infinity, 1, 0);
5995 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5996 var _thrown = undefined; try {
5997 ctx.createLinearGradient(0, -Infinity, 1, 0);
5998 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5999 var _thrown = undefined; try {
6000 ctx.createLinearGradient(0, NaN, 1, 0);
6001 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6002 var _thrown = undefined; try {
6003 ctx.createLinearGradient(0, 0, Infinity, 0);
6004 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6005 var _thrown = undefined; try {
6006 ctx.createLinearGradient(0, 0, -Infinity, 0);
6007 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6008 var _thrown = undefined; try {
6009 ctx.createLinearGradient(0, 0, NaN, 0);
6010 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6011 var _thrown = undefined; try {
6012 ctx.createLinearGradient(0, 0, 1, Infinity);
6013 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6014 var _thrown = undefined; try {
6015 ctx.createLinearGradient(0, 0, 1, -Infinity);
6016 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6017 var _thrown = undefined; try {
6018 ctx.createLinearGradient(0, 0, 1, NaN);
6019 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6020 var _thrown = undefined; try {
6021 ctx.createLinearGradient(Infinity, Infinity, 1, 0);
6022 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6023 var _thrown = undefined; try {
6024 ctx.createLinearGradient(Infinity, Infinity, Infinity, 0);
6025 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6026 var _thrown = undefined; try {
6027 ctx.createLinearGradient(Infinity, Infinity, Infinity, Infinity);
6028 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6029 var _thrown = undefined; try {
6030 ctx.createLinearGradient(Infinity, Infinity, 1, Infinity);
6031 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6032 var _thrown = undefined; try {
6033 ctx.createLinearGradient(Infinity, 0, Infinity, 0);
6034 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6035 var _thrown = undefined; try {
6036 ctx.createLinearGradient(Infinity, 0, Infinity, Infinity);
6037 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6038 var _thrown = undefined; try {
6039 ctx.createLinearGradient(Infinity, 0, 1, Infinity);
6040 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6041 var _thrown = undefined; try {
6042 ctx.createLinearGradient(0, Infinity, Infinity, 0);
6043 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6044 var _thrown = undefined; try {
6045 ctx.createLinearGradient(0, Infinity, Infinity, Infinity);
6046 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6047 var _thrown = undefined; try {
6048 ctx.createLinearGradient(0, Infinity, 1, Infinity);
6049 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6050 var _thrown = undefined; try {
6051 ctx.createLinearGradient(0, 0, Infinity, Infinity);
6052 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6053
6054
6055 }
6056 </script>
6057
6058 <!-- [[[ test_2d.gradient.linear.transform.1.html ]]] -->
6059
6060 <p>Canvas test: 2d.gradient.linear.transform.1</p>
6061 <!-- Testing: Linear gradient coordinates are relative to the coordinate space at the time of filling -->
6062 <canvas id="c221" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6063 <script>
6064
6065
6066 function test_2d_gradient_linear_transform_1() {
6067
6068 var canvas = document.getElementById('c221');
6069 var ctx = canvas.getContext('2d');
6070
6071 var g = ctx.createLinearGradient(0, 0, 200, 0);
6072 g.addColorStop(0, '#f00');
6073 g.addColorStop(0.25, '#0f0');
6074 g.addColorStop(0.75, '#0f0');
6075 g.addColorStop(1, '#f00');
6076 ctx.fillStyle = g;
6077 ctx.translate(-50, 0);
6078 ctx.fillRect(50, 0, 100, 50);
6079 isPixel(ctx, 25,25, 0,255,0,255, 0);
6080 isPixel(ctx, 50,25, 0,255,0,255, 0);
6081 isPixel(ctx, 75,25, 0,255,0,255, 0);
6082
6083
6084 }
6085 </script>
6086
6087 <!-- [[[ test_2d.gradient.linear.transform.2.html ]]] -->
6088
6089 <p>Canvas test: 2d.gradient.linear.transform.2</p>
6090 <!-- Testing: Linear gradient coordinates are relative to the coordinate space at the time of filling -->
6091 <canvas id="c222" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6092 <script>
6093
6094
6095 function test_2d_gradient_linear_transform_2() {
6096
6097 var canvas = document.getElementById('c222');
6098 var ctx = canvas.getContext('2d');
6099
6100 ctx.translate(100, 0);
6101 var g = ctx.createLinearGradient(0, 0, 200, 0);
6102 g.addColorStop(0, '#f00');
6103 g.addColorStop(0.25, '#0f0');
6104 g.addColorStop(0.75, '#0f0');
6105 g.addColorStop(1, '#f00');
6106 ctx.fillStyle = g;
6107 ctx.translate(-150, 0);
6108 ctx.fillRect(50, 0, 100, 50);
6109 isPixel(ctx, 25,25, 0,255,0,255, 0);
6110 isPixel(ctx, 50,25, 0,255,0,255, 0);
6111 isPixel(ctx, 75,25, 0,255,0,255, 0);
6112
6113
6114 }
6115 </script>
6116
6117 <!-- [[[ test_2d.gradient.linear.transform.3.html ]]] -->
6118
6119 <p>Canvas test: 2d.gradient.linear.transform.3</p>
6120 <!-- Testing: Linear gradient transforms do not experience broken caching effects -->
6121 <canvas id="c223" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6122 <script>
6123
6124
6125
6126 function test_2d_gradient_linear_transform_3() {
6127
6128 var canvas = document.getElementById('c223');
6129 var ctx = canvas.getContext('2d');
6130
6131 var g = ctx.createLinearGradient(0, 0, 200, 0);
6132 g.addColorStop(0, '#f00');
6133 g.addColorStop(0.25, '#0f0');
6134 g.addColorStop(0.75, '#0f0');
6135 g.addColorStop(1, '#f00');
6136 ctx.fillStyle = g;
6137 ctx.fillRect(0, 0, 100, 50);
6138 ctx.translate(-50, 0);
6139 ctx.fillRect(50, 0, 100, 50);
6140
6141 isPixel(ctx, 25,25, 0,255,0,255, 0);
6142 isPixel(ctx, 50,25, 0,255,0,255, 0);
6143 isPixel(ctx, 75,25, 0,255,0,255, 0);
6144 }
6145 </script>
6146
6147 <!-- [[[ test_2d.gradient.object.compare.html ]]] -->
6148
6149 <p>Canvas test: 2d.gradient.object.compare</p>
6150 <canvas id="c224" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6151 <script>
6152
6153 function test_2d_gradient_object_compare() {
6154
6155 var canvas = document.getElementById('c224');
6156 var ctx = canvas.getContext('2d');
6157
6158 var g1 = ctx.createLinearGradient(0, 0, 100, 0);
6159 var g2 = ctx.createLinearGradient(0, 0, 100, 0);
6160 ok(g1 !== g2, "g1 !== g2");
6161 ctx.fillStyle = g1;
6162 ok(ctx.fillStyle === g1, "ctx.fillStyle === g1");
6163
6164
6165 }
6166 </script>
6167
6168 <!-- [[[ test_2d.gradient.object.crosscanvas.html ]]] -->
6169
6170 <p>Canvas test: 2d.gradient.object.crosscanvas</p>
6171 <canvas id="c225" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6172 <script>
6173
6174
6175 function test_2d_gradient_object_crosscanvas() {
6176
6177 var canvas = document.getElementById('c225');
6178 var ctx = canvas.getContext('2d');
6179
6180 ctx.fillStyle = '#f00';
6181 ctx.fillRect(0, 0, 100, 50);
6182 var g = document.createElement('canvas').getContext('2d').createLinearGradient(0, 0, 100, 0);
6183 g.addColorStop(0, '#0f0');
6184 g.addColorStop(1, '#0f0');
6185 ctx.fillStyle = g;
6186 ctx.fillRect(0, 0, 100, 50);
6187 isPixel(ctx, 50,25, 0,255,0,255, 2);
6188
6189
6190 }
6191 </script>
6192
6193 <!-- [[[ test_2d.gradient.object.invalidcolour.html ]]] -->
6194
6195 <p>Canvas test: 2d.gradient.object.invalidcolour</p>
6196 <canvas id="c226" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6197 <script>
6198
6199 function test_2d_gradient_object_invalidcolour() {
6200
6201 var canvas = document.getElementById('c226');
6202 var ctx = canvas.getContext('2d');
6203
6204 var g = ctx.createLinearGradient(0, 0, 100, 0);
6205 var _thrown = undefined; try {
6206 g.addColorStop(0, "");
6207 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
6208 var _thrown = undefined; try {
6209 g.addColorStop(0, 'undefined');
6210 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
6211
6212
6213 }
6214 </script>
6215
6216 <!-- [[[ test_2d.gradient.object.invalidoffset.html ]]] -->
6217
6218 <p>Canvas test: 2d.gradient.object.invalidoffset</p>
6219 <canvas id="c227" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6220 <script>
6221
6222 function test_2d_gradient_object_invalidoffset() {
6223
6224 var canvas = document.getElementById('c227');
6225 var ctx = canvas.getContext('2d');
6226
6227 var g = ctx.createLinearGradient(0, 0, 100, 0);
6228 var _thrown = undefined; try {
6229 g.addColorStop(-1, '#000');
6230 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6231 var _thrown = undefined; try {
6232 g.addColorStop(2, '#000');
6233 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6234 var _thrown = undefined; try {
6235 g.addColorStop(Infinity, '#000');
6236 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
6237 var _thrown = undefined; try {
6238 g.addColorStop(-Infinity, '#000');
6239 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
6240 var _thrown = undefined; try {
6241 g.addColorStop(NaN, '#000');
6242 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
6243
6244
6245 }
6246 </script>
6247
6248 <!-- [[[ test_2d.gradient.object.return.html ]]] -->
6249
6250 <p>Canvas test: 2d.gradient.object.return</p>
6251 <!-- Testing: createLinearGradient() and createRadialGradient() returns objects implementing CanvasGradient -->
6252 <canvas id="c228" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6253 <script>
6254
6255 function test_2d_gradient_object_return() {
6256
6257 var canvas = document.getElementById('c228');
6258 var ctx = canvas.getContext('2d');
6259
6260 window.CanvasGradient.prototype.thisImplementsCanvasGradient = true;
6261
6262 var g1 = ctx.createLinearGradient(0, 0, 100, 0);
6263 ok(g1.addColorStop !== undefined, "g1.addColorStop !== undefined");
6264 ok(g1.thisImplementsCanvasGradient === true, "g1.thisImplementsCanvasGradient === true");
6265
6266 var g2 = ctx.createRadialGradient(0, 0, 10, 0, 0, 20);
6267 ok(g2.addColorStop !== undefined, "g2.addColorStop !== undefined");
6268 ok(g2.thisImplementsCanvasGradient === true, "g2.thisImplementsCanvasGradient === true");
6269
6270
6271 }
6272 </script>
6273
6274 <!-- [[[ test_2d.gradient.object.type.html ]]] -->
6275
6276 <p>Canvas test: 2d.gradient.object.type</p>
6277 <!-- Testing: window.CanvasGradient exists and has the right properties -->
6278 <canvas id="c229" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6279 <script>
6280
6281 function test_2d_gradient_object_type() {
6282
6283 var canvas = document.getElementById('c229');
6284 var ctx = canvas.getContext('2d');
6285
6286 ok(window.CanvasGradient !== undefined, "window.CanvasGradient !== undefined");
6287 ok(window.CanvasGradient.prototype.addColorStop !== undefined, "window.CanvasGradient.prototype.addColorStop !== undefined");
6288
6289
6290 }
6291 </script>
6292
6293 <!-- [[[ test_2d.gradient.object.update.html ]]] -->
6294
6295 <p>Canvas test: 2d.gradient.object.update</p>
6296 <canvas id="c230" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6297 <script>
6298
6299
6300 function test_2d_gradient_object_update() {
6301
6302 var canvas = document.getElementById('c230');
6303 var ctx = canvas.getContext('2d');
6304
6305 var g = ctx.createLinearGradient(-100, 0, 200, 0);
6306 g.addColorStop(0, '#f00');
6307 g.addColorStop(1, '#f00');
6308 ctx.fillStyle = g;
6309 g.addColorStop(0.1, '#0f0');
6310 g.addColorStop(0.9, '#0f0');
6311 ctx.fillRect(0, 0, 100, 50);
6312 isPixel(ctx, 50,25, 0,255,0,255, 2);
6313
6314
6315 }
6316 </script>
6317
6318 <!-- [[[ test_2d.gradient.radial.cone.behind.html ]]] -->
6319
6320 <p>Canvas test: 2d.gradient.radial.cone.behind</p>
6321 <canvas id="c231" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6322 <script>
6323
6324
6325
6326 function test_2d_gradient_radial_cone_behind() {
6327
6328 var canvas = document.getElementById('c231');
6329 var ctx = canvas.getContext('2d');
6330
6331 ctx.fillStyle = '#0f0';
6332 ctx.fillRect(0, 0, 100, 50);
6333
6334 var g = ctx.createRadialGradient(120, 25, 10, 211, 25, 100);
6335 g.addColorStop(0, '#f00');
6336 g.addColorStop(1, '#f00');
6337 ctx.fillStyle = g;
6338 ctx.fillRect(0, 0, 100, 50);
6339
6340 isPixel(ctx, 1,1, 0,255,0,255, 0);
6341 isPixel(ctx, 50,1, 0,255,0,255, 0);
6342 isPixel(ctx, 98,1, 0,255,0,255, 0);
6343 isPixel(ctx, 1,25, 0,255,0,255, 0);
6344 isPixel(ctx, 50,25, 0,255,0,255, 0);
6345 isPixel(ctx, 98,25, 0,255,0,255, 0);
6346 isPixel(ctx, 1,48, 0,255,0,255, 0);
6347 isPixel(ctx, 50,48, 0,255,0,255, 0);
6348 isPixel(ctx, 98,48, 0,255,0,255, 0);
6349
6350
6351 }
6352 </script>
6353
6354 <!-- [[[ test_2d.gradient.radial.cone.beside.html ]]] -->
6355
6356 <p>Canvas test: 2d.gradient.radial.cone.beside</p>
6357 <canvas id="c232" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6358 <script>
6359
6360
6361
6362 function test_2d_gradient_radial_cone_beside() {
6363
6364 var canvas = document.getElementById('c232');
6365 var ctx = canvas.getContext('2d');
6366
6367 ctx.fillStyle = '#0f0';
6368 ctx.fillRect(0, 0, 100, 50);
6369
6370 var g = ctx.createRadialGradient(0, 100, 40, 100, 100, 50);
6371 g.addColorStop(0, '#f00');
6372 g.addColorStop(1, '#f00');
6373 ctx.fillStyle = g;
6374 ctx.fillRect(0, 0, 100, 50);
6375
6376 isPixel(ctx, 1,1, 0,255,0,255, 0);
6377 isPixel(ctx, 50,1, 0,255,0,255, 0);
6378 isPixel(ctx, 98,1, 0,255,0,255, 0);
6379 isPixel(ctx, 1,25, 0,255,0,255, 0);
6380 isPixel(ctx, 50,25, 0,255,0,255, 0);
6381 isPixel(ctx, 98,25, 0,255,0,255, 0);
6382 isPixel(ctx, 1,48, 0,255,0,255, 0);
6383 isPixel(ctx, 50,48, 0,255,0,255, 0);
6384 isPixel(ctx, 98,48, 0,255,0,255, 0);
6385
6386
6387 }
6388 </script>
6389
6390 <!-- [[[ test_2d.gradient.radial.cone.bottom.html ]]] -->
6391
6392 <p>Canvas test: 2d.gradient.radial.cone.bottom</p>
6393 <canvas id="c233" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6394 <script>
6395
6396
6397 function test_2d_gradient_radial_cone_bottom() {
6398
6399 var canvas = document.getElementById('c233');
6400 var ctx = canvas.getContext('2d');
6401
6402 ctx.fillStyle = '#f00';
6403 ctx.fillRect(0, 0, 100, 50);
6404
6405 var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 101);
6406 g.addColorStop(0, '#0f0');
6407 g.addColorStop(1, '#f00');
6408 ctx.fillStyle = g;
6409 ctx.fillRect(0, 0, 100, 50);
6410
6411 isPixel(ctx, 1,1, 0,255,0,255, 0);
6412 isPixel(ctx, 50,1, 0,255,0,255, 0);
6413 isPixel(ctx, 98,1, 0,255,0,255, 0);
6414 isPixel(ctx, 1,25, 0,255,0,255, 0);
6415 isPixel(ctx, 50,25, 0,255,0,255, 0);
6416 isPixel(ctx, 98,25, 0,255,0,255, 0);
6417 isPixel(ctx, 1,48, 0,255,0,255, 0);
6418 isPixel(ctx, 50,48, 0,255,0,255, 0);
6419 isPixel(ctx, 98,48, 0,255,0,255, 0);
6420
6421
6422 }
6423 </script>
6424
6425 <!-- [[[ test_2d.gradient.radial.cone.cylinder.html ]]] -->
6426
6427 <p>Canvas test: 2d.gradient.radial.cone.cylinder</p>
6428 <canvas id="c234" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6429 <script>
6430
6431
6432 function test_2d_gradient_radial_cone_cylinder() {
6433
6434 var canvas = document.getElementById('c234');
6435 var ctx = canvas.getContext('2d');
6436
6437 ctx.fillStyle = '#f00';
6438 ctx.fillRect(0, 0, 100, 50);
6439
6440 var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 100);
6441 g.addColorStop(0, '#0f0');
6442 g.addColorStop(1, '#f00');
6443 ctx.fillStyle = g;
6444 ctx.fillRect(0, 0, 100, 50);
6445
6446 isPixel(ctx, 1, 1, 0, 255, 0, 255, 0);
6447 isPixel(ctx, 50, 1, 0, 255, 0, 255, 0);
6448 isPixel(ctx, 98, 1, 0, 255, 0, 255, 0);
6449 isPixel(ctx, 1, 25, 0, 255, 0, 255, 0);
6450 isPixel(ctx, 50, 25, 0, 255, 0, 255, 0);
6451 isPixel(ctx, 98, 25, 0, 255, 0, 255, 0);
6452 isPixel(ctx, 1, 48, 0, 255, 0, 255, 0);
6453 isPixel(ctx, 50, 48, 0, 255, 0, 255, 0);
6454 isPixel(ctx, 98, 48, 0, 255, 0, 255, 0);
6455
6456 }
6457 </script>
6458
6459 <!-- [[[ test_2d.gradient.radial.cone.front.html ]]] -->
6460
6461 <p>Canvas test: 2d.gradient.radial.cone.front</p>
6462 <canvas id="c235" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6463 <script>
6464
6465
6466 function test_2d_gradient_radial_cone_front() {
6467
6468 var canvas = document.getElementById('c235');
6469 var ctx = canvas.getContext('2d');
6470
6471 ctx.fillStyle = '#f00';
6472 ctx.fillRect(0, 0, 100, 50);
6473
6474 var g = ctx.createRadialGradient(311, 25, 10, 210, 25, 100);
6475 g.addColorStop(0, '#f00');
6476 g.addColorStop(1, '#0f0');
6477 ctx.fillStyle = g;
6478 ctx.fillRect(0, 0, 100, 50);
6479
6480 isPixel(ctx, 1,1, 0,255,0,255, 0);
6481 isPixel(ctx, 50,1, 0,255,0,255, 0);
6482 isPixel(ctx, 98,1, 0,255,0,255, 0);
6483 isPixel(ctx, 1,25, 0,255,0,255, 0);
6484 isPixel(ctx, 50,25, 0,255,0,255, 0);
6485 isPixel(ctx, 98,25, 0,255,0,255, 0);
6486 isPixel(ctx, 1,48, 0,255,0,255, 0);
6487 isPixel(ctx, 50,48, 0,255,0,255, 0);
6488 isPixel(ctx, 98,48, 0,255,0,255, 0);
6489
6490
6491 }
6492 </script>
6493
6494 <!-- [[[ test_2d.gradient.radial.cone.shape1.html ]]] -->
6495
6496 <p>Canvas test: 2d.gradient.radial.cone.shape1</p>
6497 <canvas id="c236" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6498 <script>
6499
6500
6501 function test_2d_gradient_radial_cone_shape1() {
6502
6503 var canvas = document.getElementById('c236');
6504 var ctx = canvas.getContext('2d');
6505
6506 var tol = 1; // tolerance to avoid antialiasing artifacts
6507
6508 ctx.fillStyle = '#0f0';
6509 ctx.fillRect(0, 0, 100, 50);
6510
6511 ctx.fillStyle = '#f00';
6512 ctx.beginPath();
6513 ctx.moveTo(30+tol, 40);
6514 ctx.lineTo(110, -20+tol);
6515 ctx.lineTo(110, 100-tol);
6516 ctx.fill();
6517
6518 var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
6519 g.addColorStop(0, '#0f0');
6520 g.addColorStop(1, '#0f0');
6521 ctx.fillStyle = g;
6522 ctx.fillRect(0, 0, 100, 50);
6523
6524 isPixel(ctx, 1,1, 0,255,0,255, 0);
6525 isPixel(ctx, 50,1, 0,255,0,255, 0);
6526 isPixel(ctx, 98,1, 0,255,0,255, 0);
6527 isPixel(ctx, 1,25, 0,255,0,255, 0);
6528 isPixel(ctx, 50,25, 0,255,0,255, 0);
6529 isPixel(ctx, 98,25, 0,255,0,255, 0);
6530 isPixel(ctx, 1,48, 0,255,0,255, 0);
6531 isPixel(ctx, 50,48, 0,255,0,255, 0);
6532 isPixel(ctx, 98,48, 0,255,0,255, 0);
6533
6534
6535 }
6536 </script>
6537
6538 <!-- [[[ test_2d.gradient.radial.cone.shape2.html ]]] -->
6539
6540 <p>Canvas test: 2d.gradient.radial.cone.shape2</p>
6541 <canvas id="c237" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6542 <script>
6543
6544
6545
6546 function test_2d_gradient_radial_cone_shape2() {
6547
6548 var canvas = document.getElementById('c237');
6549 var ctx = canvas.getContext('2d');
6550
6551 var tol = 1; // tolerance to avoid antialiasing artifacts
6552
6553 ctx.fillStyle = '#0f0';
6554 ctx.fillRect(0, 0, 100, 50);
6555
6556 var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
6557 g.addColorStop(0, '#f00');
6558 g.addColorStop(1, '#f00');
6559 ctx.fillStyle = g;
6560 ctx.fillRect(0, 0, 100, 50);
6561
6562 ctx.fillStyle = '#0f0';
6563 ctx.beginPath();
6564 ctx.moveTo(30-tol, 40);
6565 ctx.lineTo(110, -20-tol);
6566 ctx.lineTo(110, 100+tol);
6567 ctx.fill();
6568
6569 isPixel(ctx, 1,1, 0,255,0,255, 0);
6570 isPixel(ctx, 50,1, 0,255,0,255, 0);
6571 isPixel(ctx, 98,1, 0,255,0,255, 0);
6572 isPixel(ctx, 1,25, 0,255,0,255, 0);
6573 isPixel(ctx, 50,25, 0,255,0,255, 0);
6574 isPixel(ctx, 98,25, 0,255,0,255, 0);
6575 isPixel(ctx, 1,48, 0,255,0,255, 0);
6576 isPixel(ctx, 50,48, 0,255,0,255, 0);
6577 isPixel(ctx, 98,48, 0,255,0,255, 0);
6578
6579
6580 }
6581 </script>
6582
6583 <!-- [[[ test_2d.gradient.radial.cone.top.html ]]] -->
6584
6585 <p>Canvas test: 2d.gradient.radial.cone.top</p>
6586 <canvas id="c238" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6587 <script>
6588
6589
6590 function test_2d_gradient_radial_cone_top() {
6591
6592 var canvas = document.getElementById('c238');
6593 var ctx = canvas.getContext('2d');
6594
6595 ctx.fillStyle = '#f00';
6596 ctx.fillRect(0, 0, 100, 50);
6597
6598 var g = ctx.createRadialGradient(230, 25, 100, 100, 25, 101);
6599 g.addColorStop(0, '#f00');
6600 g.addColorStop(1, '#0f0');
6601 ctx.fillStyle = g;
6602 ctx.fillRect(0, 0, 100, 50);
6603
6604 isPixel(ctx, 1, 1, 0, 255, 0, 255, 0);
6605 isPixel(ctx, 50, 1, 0, 255, 0, 255, 0);
6606 isPixel(ctx, 98, 1, 0, 255, 0, 255, 0);
6607 isPixel(ctx, 1, 25, 0, 255, 0, 255, 0);
6608 isPixel(ctx, 50, 25, 0, 255, 0, 255, 0);
6609 isPixel(ctx, 98, 25, 0, 255, 0, 255, 0);
6610 isPixel(ctx, 1, 48, 0, 255, 0, 255, 0);
6611 isPixel(ctx, 50, 48, 0, 255, 0, 255, 0);
6612 isPixel(ctx, 98, 48, 0, 255, 0, 255, 0);
6613
6614 }
6615 </script>
6616
6617 <!-- [[[ test_2d.gradient.radial.equal.html ]]] -->
6618
6619 <p>Canvas test: 2d.gradient.radial.equal</p>
6620 <canvas id="c239" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6621 <script>
6622
6623
6624
6625 function test_2d_gradient_radial_equal() {
6626
6627 var canvas = document.getElementById('c239');
6628 var ctx = canvas.getContext('2d');
6629
6630 ctx.fillStyle = '#0f0';
6631 ctx.fillRect(0, 0, 100, 50);
6632
6633 var g = ctx.createRadialGradient(50, 25, 20, 50, 25, 20);
6634 g.addColorStop(0, '#f00');
6635 g.addColorStop(1, '#f00');
6636 ctx.fillStyle = g;
6637 ctx.fillRect(0, 0, 100, 50);
6638
6639 isPixel(ctx, 1,1, 0,255,0,255, 0);
6640 isPixel(ctx, 50,1, 0,255,0,255, 0);
6641 isPixel(ctx, 98,1, 0,255,0,255, 0);
6642 isPixel(ctx, 1,25, 0,255,0,255, 0);
6643 isPixel(ctx, 50,25, 0,255,0,255, 0);
6644 isPixel(ctx, 98,25, 0,255,0,255, 0);
6645 isPixel(ctx, 1,48, 0,255,0,255, 0);
6646 isPixel(ctx, 50,48, 0,255,0,255, 0);
6647 isPixel(ctx, 98,48, 0,255,0,255, 0);
6648
6649
6650 }
6651 </script>
6652
6653 <!-- [[[ test_2d.gradient.radial.inside1.html ]]] -->
6654
6655 <p>Canvas test: 2d.gradient.radial.inside1</p>
6656 <canvas id="c240" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6657 <script>
6658
6659
6660 function test_2d_gradient_radial_inside1() {
6661
6662 if (IsAcceleratedSkia())
6663 return;
6664
6665 var canvas = document.getElementById('c240');
6666 var ctx = canvas.getContext('2d');
6667
6668 ctx.fillStyle = '#f00';
6669 ctx.fillRect(0, 0, 100, 50);
6670
6671 var g = ctx.createRadialGradient(50, 25, 100, 50, 25, 200);
6672 g.addColorStop(0, '#0f0');
6673 g.addColorStop(1, '#f00');
6674 ctx.fillStyle = g;
6675 ctx.fillRect(0, 0, 100, 50);
6676
6677 isPixel(ctx, 1,1, 0,255,0,255, 0);
6678 isPixel(ctx, 50,1, 0,255,0,255, 0);
6679 isPixel(ctx, 98,1, 0,255,0,255, 0);
6680 isPixel(ctx, 1,25, 0,255,0,255, 0);
6681 isPixel(ctx, 50,25, 0,255,0,255, 0);
6682 isPixel(ctx, 98,25, 0,255,0,255, 0);
6683 isPixel(ctx, 1,48, 0,255,0,255, 0);
6684 isPixel(ctx, 50,48, 0,255,0,255, 0);
6685 isPixel(ctx, 98,48, 0,255,0,255, 0);
6686
6687
6688 }
6689 </script>
6690
6691 <!-- [[[ test_2d.gradient.radial.inside2.html ]]] -->
6692
6693 <p>Canvas test: 2d.gradient.radial.inside2</p>
6694 <canvas id="c241" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6695 <script>
6696
6697
6698 function test_2d_gradient_radial_inside2() {
6699
6700 var canvas = document.getElementById('c241');
6701 var ctx = canvas.getContext('2d');
6702
6703 ctx.fillStyle = '#f00';
6704 ctx.fillRect(0, 0, 100, 50);
6705
6706 var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
6707 g.addColorStop(0, '#f00');
6708 g.addColorStop(1, '#0f0');
6709 ctx.fillStyle = g;
6710 ctx.fillRect(0, 0, 100, 50);
6711
6712 isPixel(ctx, 1,1, 0,255,0,255, 0);
6713 isPixel(ctx, 50,1, 0,255,0,255, 0);
6714 isPixel(ctx, 98,1, 0,255,0,255, 0);
6715 isPixel(ctx, 1,25, 0,255,0,255, 0);
6716 isPixel(ctx, 50,25, 0,255,0,255, 0);
6717 isPixel(ctx, 98,25, 0,255,0,255, 0);
6718 isPixel(ctx, 1,48, 0,255,0,255, 0);
6719 isPixel(ctx, 50,48, 0,255,0,255, 0);
6720 isPixel(ctx, 98,48, 0,255,0,255, 0);
6721
6722
6723 }
6724 </script>
6725
6726 <!-- [[[ test_2d.gradient.radial.inside3.html ]]] -->
6727
6728 <p>Canvas test: 2d.gradient.radial.inside3</p>
6729 <canvas id="c242" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6730 <script>
6731
6732
6733 function test_2d_gradient_radial_inside3() {
6734
6735 var canvas = document.getElementById('c242');
6736 var ctx = canvas.getContext('2d');
6737
6738 ctx.fillStyle = '#f00';
6739 ctx.fillRect(0, 0, 100, 50);
6740
6741 var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
6742 g.addColorStop(0, '#f00');
6743 g.addColorStop(0.993, '#f00');
6744 g.addColorStop(1, '#0f0');
6745 ctx.fillStyle = g;
6746 ctx.fillRect(0, 0, 100, 50);
6747
6748 isPixel(ctx, 1,1, 0,255,0,255, 0);
6749 isPixel(ctx, 50,1, 0,255,0,255, 0);
6750 isPixel(ctx, 98,1, 0,255,0,255, 0);
6751 isPixel(ctx, 1,25, 0,255,0,255, 0);
6752 isPixel(ctx, 50,25, 0,255,0,255, 0);
6753 isPixel(ctx, 98,25, 0,255,0,255, 0);
6754 isPixel(ctx, 1,48, 0,255,0,255, 0);
6755 isPixel(ctx, 50,48, 0,255,0,255, 0);
6756 isPixel(ctx, 98,48, 0,255,0,255, 0);
6757
6758
6759 }
6760 </script>
6761
6762 <!-- [[[ test_2d.gradient.radial.negative.html ]]] -->
6763
6764 <p>Canvas test: 2d.gradient.radial.negative</p>
6765 <!-- Testing: createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative -->
6766 <canvas id="c243" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6767 <script>
6768
6769 function test_2d_gradient_radial_negative() {
6770
6771 var canvas = document.getElementById('c243');
6772 var ctx = canvas.getContext('2d');
6773
6774 var _thrown = undefined; try {
6775 ctx.createRadialGradient(0, 0, -0.1, 0, 0, 1);
6776 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6777 var _thrown = undefined; try {
6778 ctx.createRadialGradient(0, 0, 1, 0, 0, -0.1);
6779 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6780 var _thrown = undefined; try {
6781 ctx.createRadialGradient(0, 0, -0.1, 0, 0, -0.1);
6782 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6783
6784
6785 }
6786 </script>
6787
6788 <!-- [[[ test_2d.gradient.radial.nonfinite.html ]]] -->
6789
6790 <p>Canvas test: 2d.gradient.radial.nonfinite</p>
6791 <!-- Testing: createRadialGradient() throws NOT_SUPPORTED_ERR if arguments are not finite -->
6792 <canvas id="c244" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6793 <script>
6794
6795 function test_2d_gradient_radial_nonfinite() {
6796
6797 var canvas = document.getElementById('c244');
6798 var ctx = canvas.getContext('2d');
6799
6800 var _thrown = undefined; try {
6801 ctx.createRadialGradient(Infinity, 0, 1, 0, 0, 1);
6802 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6803 var _thrown = undefined; try {
6804 ctx.createRadialGradient(-Infinity, 0, 1, 0, 0, 1);
6805 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6806 var _thrown = undefined; try {
6807 ctx.createRadialGradient(NaN, 0, 1, 0, 0, 1);
6808 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6809 var _thrown = undefined; try {
6810 ctx.createRadialGradient(0, Infinity, 1, 0, 0, 1);
6811 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6812 var _thrown = undefined; try {
6813 ctx.createRadialGradient(0, -Infinity, 1, 0, 0, 1);
6814 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6815 var _thrown = undefined; try {
6816 ctx.createRadialGradient(0, NaN, 1, 0, 0, 1);
6817 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6818 var _thrown = undefined; try {
6819 ctx.createRadialGradient(0, 0, Infinity, 0, 0, 1);
6820 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6821 var _thrown = undefined; try {
6822 ctx.createRadialGradient(0, 0, -Infinity, 0, 0, 1);
6823 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6824 var _thrown = undefined; try {
6825 ctx.createRadialGradient(0, 0, NaN, 0, 0, 1);
6826 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6827 var _thrown = undefined; try {
6828 ctx.createRadialGradient(0, 0, 1, Infinity, 0, 1);
6829 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6830 var _thrown = undefined; try {
6831 ctx.createRadialGradient(0, 0, 1, -Infinity, 0, 1);
6832 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6833 var _thrown = undefined; try {
6834 ctx.createRadialGradient(0, 0, 1, NaN, 0, 1);
6835 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6836 var _thrown = undefined; try {
6837 ctx.createRadialGradient(0, 0, 1, 0, Infinity, 1);
6838 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6839 var _thrown = undefined; try {
6840 ctx.createRadialGradient(0, 0, 1, 0, -Infinity, 1);
6841 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6842 var _thrown = undefined; try {
6843 ctx.createRadialGradient(0, 0, 1, 0, NaN, 1);
6844 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6845 var _thrown = undefined; try {
6846 ctx.createRadialGradient(0, 0, 1, 0, 0, Infinity);
6847 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6848 var _thrown = undefined; try {
6849 ctx.createRadialGradient(0, 0, 1, 0, 0, -Infinity);
6850 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6851 var _thrown = undefined; try {
6852 ctx.createRadialGradient(0, 0, 1, 0, 0, NaN);
6853 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6854 var _thrown = undefined; try {
6855 ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, 1);
6856 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6857 var _thrown = undefined; try {
6858 ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, 1);
6859 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6860 var _thrown = undefined; try {
6861 ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, 1);
6862 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6863 var _thrown = undefined; try {
6864 ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, 1);
6865 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6866 var _thrown = undefined; try {
6867 ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
6868 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6869 var _thrown = undefined; try {
6870 ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
6871 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6872 var _thrown = undefined; try {
6873 ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, 1);
6874 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6875 var _thrown = undefined; try {
6876 ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
6877 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6878 var _thrown = undefined; try {
6879 ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, Infinity);
6880 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6881 var _thrown = undefined; try {
6882 ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, 1);
6883 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6884 var _thrown = undefined; try {
6885 ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, 1);
6886 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6887 var _thrown = undefined; try {
6888 ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, Infinity);
6889 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6890 var _thrown = undefined; try {
6891 ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, Infinity);
6892 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6893 var _thrown = undefined; try {
6894 ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, 1);
6895 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6896 var _thrown = undefined; try {
6897 ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, Infinity);
6898 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6899 var _thrown = undefined; try {
6900 ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, Infinity);
6901 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6902 var _thrown = undefined; try {
6903 ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, 1);
6904 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6905 var _thrown = undefined; try {
6906 ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, 1);
6907 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6908 var _thrown = undefined; try {
6909 ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, 1);
6910 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6911 var _thrown = undefined; try {
6912 ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
6913 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6914 var _thrown = undefined; try {
6915 ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, Infinity);
6916 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6917 var _thrown = undefined; try {
6918 ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, 1);
6919 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6920 var _thrown = undefined; try {
6921 ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, Infinity);
6922 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6923 var _thrown = undefined; try {
6924 ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, Infinity);
6925 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6926 var _thrown = undefined; try {
6927 ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, 1);
6928 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6929 var _thrown = undefined; try {
6930 ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, 1);
6931 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6932 var _thrown = undefined; try {
6933 ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, Infinity);
6934 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6935 var _thrown = undefined; try {
6936 ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, Infinity);
6937 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6938 var _thrown = undefined; try {
6939 ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, 1);
6940 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6941 var _thrown = undefined; try {
6942 ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, Infinity);
6943 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6944 var _thrown = undefined; try {
6945 ctx.createRadialGradient(Infinity, 0, 1, 0, 0, Infinity);
6946 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6947 var _thrown = undefined; try {
6948 ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, 1);
6949 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6950 var _thrown = undefined; try {
6951 ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, 1);
6952 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6953 var _thrown = undefined; try {
6954 ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, 1);
6955 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6956 var _thrown = undefined; try {
6957 ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, Infinity);
6958 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6959 var _thrown = undefined; try {
6960 ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, Infinity);
6961 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6962 var _thrown = undefined; try {
6963 ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, 1);
6964 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6965 var _thrown = undefined; try {
6966 ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, Infinity);
6967 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6968 var _thrown = undefined; try {
6969 ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, Infinity);
6970 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6971 var _thrown = undefined; try {
6972 ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, 1);
6973 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6974 var _thrown = undefined; try {
6975 ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, 1);
6976 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6977 var _thrown = undefined; try {
6978 ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, Infinity);
6979 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6980 var _thrown = undefined; try {
6981 ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, Infinity);
6982 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6983 var _thrown = undefined; try {
6984 ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, 1);
6985 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6986 var _thrown = undefined; try {
6987 ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, Infinity);
6988 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6989 var _thrown = undefined; try {
6990 ctx.createRadialGradient(0, Infinity, 1, 0, 0, Infinity);
6991 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6992 var _thrown = undefined; try {
6993 ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, 1);
6994 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6995 var _thrown = undefined; try {
6996 ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, 1);
6997 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6998 var _thrown = undefined; try {
6999 ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, Infinity);
7000 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7001 var _thrown = undefined; try {
7002 ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, Infinity);
7003 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7004 var _thrown = undefined; try {
7005 ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, 1);
7006 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7007 var _thrown = undefined; try {
7008 ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, Infinity);
7009 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7010 var _thrown = undefined; try {
7011 ctx.createRadialGradient(0, 0, Infinity, 0, 0, Infinity);
7012 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7013 var _thrown = undefined; try {
7014 ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, 1);
7015 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7016 var _thrown = undefined; try {
7017 ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, Infinity);
7018 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7019 var _thrown = undefined; try {
7020 ctx.createRadialGradient(0, 0, 1, Infinity, 0, Infinity);
7021 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7022 var _thrown = undefined; try {
7023 ctx.createRadialGradient(0, 0, 1, 0, Infinity, Infinity);
7024 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7025
7026
7027 }
7028 </script>
7029
7030 <!-- [[[ test_2d.gradient.radial.outside1.html ]]] -->
7031
7032 <p>Canvas test: 2d.gradient.radial.outside1</p>
7033 <canvas id="c245" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7034 <script>
7035
7036
7037 function test_2d_gradient_radial_outside1() {
7038
7039 var canvas = document.getElementById('c245');
7040 var ctx = canvas.getContext('2d');
7041
7042 ctx.fillStyle = '#f00';
7043 ctx.fillRect(0, 0, 100, 50);
7044
7045 var g = ctx.createRadialGradient(200, 25, 10, 200, 25, 20);
7046 g.addColorStop(0, '#f00');
7047 g.addColorStop(1, '#0f0');
7048 ctx.fillStyle = g;
7049 ctx.fillRect(0, 0, 100, 50);
7050
7051 isPixel(ctx, 1,1, 0,255,0,255, 0);
7052 isPixel(ctx, 50,1, 0,255,0,255, 0);
7053 isPixel(ctx, 98,1, 0,255,0,255, 0);
7054 isPixel(ctx, 1,25, 0,255,0,255, 0);
7055 isPixel(ctx, 50,25, 0,255,0,255, 0);
7056 isPixel(ctx, 98,25, 0,255,0,255, 0);
7057 isPixel(ctx, 1,48, 0,255,0,255, 0);
7058 isPixel(ctx, 50,48, 0,255,0,255, 0);
7059 isPixel(ctx, 98,48, 0,255,0,255, 0);
7060
7061
7062 }
7063 </script>
7064
7065 <!-- [[[ test_2d.gradient.radial.outside2.html ]]] -->
7066
7067 <p>Canvas test: 2d.gradient.radial.outside2</p>
7068 <canvas id="c246" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7069 <script>
7070
7071
7072
7073 function test_2d_gradient_radial_outside2() {
7074
7075 var canvas = document.getElementById('c246');
7076 var ctx = canvas.getContext('2d');
7077
7078 ctx.fillStyle = '#f00';
7079 ctx.fillRect(0, 0, 100, 50);
7080
7081 var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
7082 g.addColorStop(0, '#0f0');
7083 g.addColorStop(1, '#f00');
7084 ctx.fillStyle = g;
7085 ctx.fillRect(0, 0, 100, 50);
7086
7087 isPixel(ctx, 1,1, 0,255,0,255, 0);
7088 isPixel(ctx, 50,1, 0,255,0,255, 0);
7089 isPixel(ctx, 98,1, 0,255,0,255, 0);
7090 isPixel(ctx, 1,25, 0,255,0,255, 0);
7091 isPixel(ctx, 50,25, 0,255,0,255, 0);
7092 isPixel(ctx, 98,25, 0,255,0,255, 0);
7093 isPixel(ctx, 1,48, 0,255,0,255, 0);
7094 isPixel(ctx, 50,48, 0,255,0,255, 0);
7095 isPixel(ctx, 98,48, 0,255,0,255, 0);
7096
7097
7098 }
7099 </script>
7100
7101 <!-- [[[ test_2d.gradient.radial.outside3.html ]]] -->
7102
7103 <p>Canvas test: 2d.gradient.radial.outside3</p>
7104 <canvas id="c247" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7105 <script>
7106
7107
7108
7109 function test_2d_gradient_radial_outside3() {
7110
7111 var canvas = document.getElementById('c247');
7112 var ctx = canvas.getContext('2d');
7113
7114 ctx.fillStyle = '#f00';
7115 ctx.fillRect(0, 0, 100, 50);
7116
7117 var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
7118 g.addColorStop(0, '#0f0');
7119 g.addColorStop(0.001, '#f00');
7120 g.addColorStop(1, '#f00');
7121 ctx.fillStyle = g;
7122 ctx.fillRect(0, 0, 100, 50);
7123
7124 isPixel(ctx, 1,1, 0,255,0,255, 0);
7125 isPixel(ctx, 50,1, 0,255,0,255, 0);
7126 isPixel(ctx, 98,1, 0,255,0,255, 0);
7127 isPixel(ctx, 1,25, 0,255,0,255, 0);
7128 isPixel(ctx, 50,25, 0,255,0,255, 0);
7129 isPixel(ctx, 98,25, 0,255,0,255, 0);
7130 isPixel(ctx, 1,48, 0,255,0,255, 0);
7131 isPixel(ctx, 50,48, 0,255,0,255, 0);
7132 isPixel(ctx, 98,48, 0,255,0,255, 0);
7133
7134
7135 }
7136 </script>
7137
7138 <!-- [[[ test_2d.gradient.radial.touch1.html ]]] -->
7139
7140 <p>Canvas test: 2d.gradient.radial.touch1</p>
7141 <canvas id="c248" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7142 <script>
7143
7144
7145
7146 function test_2d_gradient_radial_touch1() {
7147
7148 var canvas = document.getElementById('c248');
7149 var ctx = canvas.getContext('2d');
7150
7151 ctx.fillStyle = '#0f0';
7152 ctx.fillRect(0, 0, 100, 50);
7153
7154 var g = ctx.createRadialGradient(150, 25, 50, 200, 25, 100);
7155 g.addColorStop(0, '#f00');
7156 g.addColorStop(1, '#f00');
7157 ctx.fillStyle = g;
7158 ctx.fillRect(0, 0, 100, 50);
7159
7160 isPixel(ctx, 1,1, 0,255,0,255, 0);
7161 isPixel(ctx, 50,1, 0,255,0,255, 0);
7162 isPixel(ctx, 98,1, 0,255,0,255, 0);
7163 isPixel(ctx, 1,25, 0,255,0,255, 0);
7164 isPixel(ctx, 50,25, 0,255,0,255, 0);
7165 isPixel(ctx, 98,25, 0,255,0,255, 0);
7166 isPixel(ctx, 1,48, 0,255,0,255, 0);
7167 isPixel(ctx, 50,48, 0,255,0,255, 0);
7168 isPixel(ctx, 98,48, 0,255,0,255, 0);
7169
7170
7171 }
7172 </script>
7173
7174 <!-- [[[ test_2d.gradient.radial.touch2.html ]]] -->
7175
7176 <p>Canvas test: 2d.gradient.radial.touch2</p>
7177 <canvas id="c249" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7178 <script>
7179
7180
7181
7182 function test_2d_gradient_radial_touch2() {
7183
7184 var canvas = document.getElementById('c249');
7185 var ctx = canvas.getContext('2d');
7186
7187 ctx.fillStyle = '#f00';
7188 ctx.fillRect(0, 0, 100, 50);
7189
7190 var g = ctx.createRadialGradient(-80, 25, 70, 0, 25, 150);
7191 g.addColorStop(0, '#f00');
7192 g.addColorStop(0.01, '#0f0');
7193 g.addColorStop(0.99, '#0f0');
7194 g.addColorStop(1, '#f00');
7195 ctx.fillStyle = g;
7196 ctx.fillRect(0, 0, 100, 50);
7197
7198 isPixel(ctx, 1,1, 0,255,0,255, 0);
7199 isPixel(ctx, 50,1, 0,255,0,255, 0);
7200 isPixel(ctx, 98,1, 0,255,0,255, 0);
7201 isPixel(ctx, 1,25, 0,255,0,255, 0);
7202 isPixel(ctx, 50,25, 0,255,0,255, 0);
7203 isPixel(ctx, 98,25, 0,255,0,255, 0);
7204 isPixel(ctx, 1,48, 0,255,0,255, 0);
7205 isPixel(ctx, 50,48, 0,255,0,255, 0);
7206 isPixel(ctx, 98,48, 0,255,0,255, 0);
7207
7208
7209 }
7210 </script>
7211
7212 <!-- [[[ test_2d.gradient.radial.touch3.html ]]] -->
7213
7214 <p>Canvas test: 2d.gradient.radial.touch3</p>
7215 <canvas id="c250" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7216 <script>
7217
7218
7219
7220 function test_2d_gradient_radial_touch3() {
7221
7222 var canvas = document.getElementById('c250');
7223 var ctx = canvas.getContext('2d');
7224
7225 ctx.fillStyle = '#0f0';
7226 ctx.fillRect(0, 0, 100, 50);
7227
7228 var g = ctx.createRadialGradient(120, -15, 25, 140, -30, 50);
7229 g.addColorStop(0, '#f00');
7230 g.addColorStop(1, '#f00');
7231 ctx.fillStyle = g;
7232 ctx.fillRect(0, 0, 100, 50);
7233
7234 isPixel(ctx, 1,1, 0,255,0,255, 0);
7235 isPixel(ctx, 50,1, 0,255,0,255, 0);
7236 isPixel(ctx, 98,1, 0,255,0,255, 0);
7237 isPixel(ctx, 1,25, 0,255,0,255, 0);
7238 isPixel(ctx, 50,25, 0,255,0,255, 0);
7239 isPixel(ctx, 98,25, 0,255,0,255, 0);
7240 isPixel(ctx, 1,48, 0,255,0,255, 0);
7241 isPixel(ctx, 50,48, 0,255,0,255, 0);
7242 isPixel(ctx, 98,48, 0,255,0,255, 0);
7243
7244
7245 }
7246 </script>
7247
7248 <!-- [[[ test_2d.gradient.radial.transform.1.html ]]] -->
7249
7250 <p>Canvas test: 2d.gradient.radial.transform.1</p>
7251 <!-- Testing: Radial gradient coordinates are relative to the coordinate space at the time of filling -->
7252 <canvas id="c251" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7253 <script>
7254
7255
7256 function test_2d_gradient_radial_transform_1() {
7257
7258 var canvas = document.getElementById('c251');
7259 var ctx = canvas.getContext('2d');
7260
7261 var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
7262 g.addColorStop(0, '#0f0');
7263 g.addColorStop(0.5, '#0f0');
7264 g.addColorStop(0.51, '#f00');
7265 g.addColorStop(1, '#f00');
7266 ctx.fillStyle = g;
7267 ctx.translate(50, 25);
7268 ctx.scale(10, 10);
7269 ctx.fillRect(-5, -2.5, 10, 5);
7270 isPixel(ctx, 25,25, 0,255,0,255, 0);
7271 isPixel(ctx, 50,25, 0,255,0,255, 0);
7272 isPixel(ctx, 75,25, 0,255,0,255, 0);
7273
7274
7275 }
7276 </script>
7277
7278 <!-- [[[ test_2d.gradient.radial.transform.2.html ]]] -->
7279
7280 <p>Canvas test: 2d.gradient.radial.transform.2</p>
7281 <!-- Testing: Radial gradient coordinates are relative to the coordinate space at the time of filling -->
7282 <canvas id="c252" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7283 <script>
7284
7285
7286 function test_2d_gradient_radial_transform_2() {
7287
7288 var canvas = document.getElementById('c252');
7289 var ctx = canvas.getContext('2d');
7290
7291 ctx.translate(100, 0);
7292 var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
7293 g.addColorStop(0, '#0f0');
7294 g.addColorStop(0.5, '#0f0');
7295 g.addColorStop(0.51, '#f00');
7296 g.addColorStop(1, '#f00');
7297 ctx.fillStyle = g;
7298 ctx.translate(-50, 25);
7299 ctx.scale(10, 10);
7300 ctx.fillRect(-5, -2.5, 10, 5);
7301 isPixel(ctx, 25,25, 0,255,0,255, 0);
7302 isPixel(ctx, 50,25, 0,255,0,255, 0);
7303 isPixel(ctx, 75,25, 0,255,0,255, 0);
7304
7305
7306 }
7307 </script>
7308
7309 <!-- [[[ test_2d.gradient.radial.transform.3.html ]]] -->
7310
7311 <p>Canvas test: 2d.gradient.radial.transform.3</p>
7312 <!-- Testing: Radial gradient transforms do not experience broken caching effects -->
7313 <canvas id="c253" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7314 <script>
7315
7316
7317
7318 function test_2d_gradient_radial_transform_3() {
7319
7320 var canvas = document.getElementById('c253');
7321 var ctx = canvas.getContext('2d');
7322
7323 var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
7324 g.addColorStop(0, '#0f0');
7325 g.addColorStop(0.5, '#0f0');
7326 g.addColorStop(0.51, '#f00');
7327 g.addColorStop(1, '#f00');
7328 ctx.fillStyle = g;
7329 ctx.fillRect(0, 0, 100, 50);
7330 ctx.translate(50, 25);
7331 ctx.scale(10, 10);
7332 ctx.fillRect(-5, -2.5, 10, 5);
7333
7334 isPixel(ctx, 25,25, 0,255,0,255, 0);
7335 isPixel(ctx, 50,25, 0,255,0,255, 0);
7336 isPixel(ctx, 75,25, 0,255,0,255, 0);
7337
7338 }
7339 </script>
7340
7341 <!-- [[[ test_2d.imageData.create.basic.html ]]] -->
7342
7343 <p>Canvas test: 2d.imageData.create.basic - bug 433004</p>
7344 <!-- Testing: createImageData() exists and returns something -->
7345 <canvas id="c254" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7346 <script>
7347
7348 function test_2d_imageData_create_basic() {
7349
7350 var canvas = document.getElementById('c254');
7351 var ctx = canvas.getContext('2d');
7352
7353 ok(ctx.createImageData(1, 1) !== null, "ctx.createImageData(1, 1) !== null");
7354
7355
7356 }
7357 </script>
7358
7359 <!-- [[[ test_2d.imageData.create1.basic.html ]]] -->
7360
7361 <p>Canvas test: 2d.imageData.create1.basic - bug 630040</p>
7362 <!-- Testing: createImageData(imgdata) exists and returns something -->
7363 <canvas id="c254a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7364 <script>
7365
7366 function test_2d_imageData_create1_basic() {
7367
7368 var canvas = document.getElementById('c254a');
7369 var ctx = canvas.getContext('2d');
7370
7371 ok(ctx.createImageData(ctx.createImageData(1, 1)) != null, "ctx.createImageData(ctx.createImageData(1, 1)) != null");
7372
7373
7374 }
7375 </script>
7376
7377 <!-- [[[ test_2d.imageData.create.initial.html ]]] -->
7378
7379 <p>Canvas test: 2d.imageData.create.initial - bug 433004</p>
7380 <!-- Testing: createImageData() returns transparent black data of the right size -->
7381 <canvas id="c255" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7382 <script>
7383
7384 function test_2d_imageData_create_initial() {
7385
7386 var canvas = document.getElementById('c255');
7387 var ctx = canvas.getContext('2d');
7388
7389 var imgdata = ctx.createImageData(10, 20);
7390 ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4");
7391 ok(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");
7392 ok(imgdata.width > 0, "imgdata.width > 0");
7393 var isTransparentBlack = true;
7394 for (var i = 0; i < imgdata.data.length; ++i)
7395 if (imgdata.data[i] !== 0)
7396 isTransparentBlack = false;
7397 ok(isTransparentBlack, "isTransparentBlack");
7398
7399
7400 }
7401 </script>
7402
7403 <!-- [[[ test_2d.imageData.create1.initial.html ]]] -->
7404
7405 <p>Canvas test: 2d.imageData.create1.initial - bug 630040</p>
7406 <!-- Testing: createImageData(imgdata) returns transparent black data of the right size -->
7407 <canvas id="c255a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7408 <script>
7409
7410 function test_2d_imageData_create1_initial() {
7411
7412 var canvas = document.getElementById('c255a');
7413 var ctx = canvas.getContext('2d');
7414
7415 ctx.fillStyle = '#0f0';
7416 ctx.fillRect(0, 0, 100, 50);
7417 var imgdata1 = ctx.getImageData(0, 0, 10, 20);
7418 var imgdata2 = ctx.createImageData(imgdata1);
7419 ok(imgdata2.data.length == imgdata1.data.length, "imgdata2.data.length == imgdata1.data.length");
7420 ok(imgdata2.width == imgdata1.width, "imgdata2.width == imgdata1.width");
7421 ok(imgdata2.height == imgdata1.height, "imgdata2.height == imgdata1.height");
7422 var isTransparentBlack = true;
7423 for (var i = 0; i < imgdata2.data.length; ++i)
7424 if (imgdata2.data[i] !== 0)
7425 isTransparentBlack = false;
7426 ok(isTransparentBlack, "isTransparentBlack");
7427
7428
7429 }
7430 </script>
7431
7432 <!-- [[[ test_2d.imageData.create.large.html ]]] -->
7433
7434 <p>Canvas test: 2d.imageData.create.large - bug 433004</p>
7435 <!-- Testing: createImageData() works for sizes much larger than the canvas -->
7436 <canvas id="c256" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7437 <script>
7438
7439 function test_2d_imageData_create_large() {
7440
7441 var canvas = document.getElementById('c256');
7442 var ctx = canvas.getContext('2d');
7443
7444 var _thrown_outer = false;
7445
7446 var imgdata = ctx.createImageData(1000, 2000);
7447 ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4");
7448 ok(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");
7449 ok(imgdata.width > 0, "imgdata.width > 0");
7450 var isTransparentBlack = true;
7451 for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling)
7452 if (imgdata.data[i] !== 0)
7453 isTransparentBlack = false;
7454 ok(isTransparentBlack, "isTransparentBlack");
7455
7456
7457 }
7458 </script>
7459
7460 <!-- [[[ test_2d.imageData.create.negative.html ]]] -->
7461
7462 <p>Canvas test: 2d.imageData.create.negative - bug 433004</p>
7463 <!-- Testing: createImageData() takes the absolute magnitude of the size arguments -->
7464 <canvas id="c257" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7465 <script>
7466
7467 function test_2d_imageData_create_negative() {
7468
7469 var canvas = document.getElementById('c257');
7470 var ctx = canvas.getContext('2d');
7471
7472 var _thrown_outer = false;
7473 try {
7474
7475 var imgdata1 = ctx.createImageData(10, 20);
7476 var imgdata2 = ctx.createImageData(-10, 20);
7477 var imgdata3 = ctx.createImageData(10, -20);
7478 var imgdata4 = ctx.createImageData(-10, -20);
7479 ok(imgdata1.data.length == imgdata2.data.length, "imgdata1.data.length == imgdata2.data.length");
7480 ok(imgdata2.data.length == imgdata3.data.length, "imgdata2.data.length == imgdata3.data.length");
7481 ok(imgdata3.data.length == imgdata4.data.length, "imgdata3.data.length == imgdata4.data.length");
7482
7483 } catch (e) {
7484 _thrown_outer = true;
7485 }
7486 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
7487
7488
7489 }
7490 </script>
7491
7492 <!-- [[[ test_2d.imageData.create.nonfinite.html ]]] -->
7493
7494 <p>Canvas test: 2d.imageData.create.nonfinite - bug 433004</p>
7495 <!-- Testing: createImageData() throws NOT_SUPPORTED_ERR if arguments are not finite -->
7496 <canvas id="c258" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7497 <script>
7498
7499 function test_2d_imageData_create_nonfinite() {
7500
7501 var canvas = document.getElementById('c258');
7502 var ctx = canvas.getContext('2d');
7503
7504 var _thrown = undefined; try {
7505 ctx.createImageData(Infinity, 10);
7506 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7507 var _thrown = undefined; try {
7508 ctx.createImageData(-Infinity, 10);
7509 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7510 var _thrown = undefined; try {
7511 ctx.createImageData(NaN, 10);
7512 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7513 var _thrown = undefined; try {
7514 ctx.createImageData(10, Infinity);
7515 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7516 var _thrown = undefined; try {
7517 ctx.createImageData(10, -Infinity);
7518 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7519 var _thrown = undefined; try {
7520 ctx.createImageData(10, NaN);
7521 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7522 var _thrown = undefined; try {
7523 ctx.createImageData(Infinity, Infinity);
7524 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7525 var _thrown = undefined; try {
7526 ctx.createImageData({valueOf:function() Infinity}, 10);
7527 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7528 var _thrown = undefined; try {
7529 ctx.createImageData({valueOf:function() -Infinity}, 10);
7530 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7531 var _thrown = undefined; try {
7532 ctx.createImageData({valueOf:function() NaN}, 10);
7533 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7534 var _thrown = undefined; try {
7535 ctx.createImageData(10, {valueOf:function() Infinity});
7536 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7537 var _thrown = undefined; try {
7538 ctx.createImageData(10, {valueOf:function() -Infinity});
7539 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7540 var _thrown = undefined; try {
7541 ctx.createImageData(10, {valueOf:function() NaN});
7542 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7543 var _thrown = undefined; try {
7544 ctx.createImageData({valueOf:function() Infinity}, {valueOf:function() Infinity});
7545 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7546
7547
7548 }
7549 </script>
7550
7551 <!-- [[[ test_2d.imageData.create.round.html ]]] -->
7552
7553 <p>Canvas test: 2d.imageData.create.round - bug 433004</p>
7554 <!-- Testing: createImageData(w, h) is rounded the same as getImageData(0, 0, w, h) -->
7555 <canvas id="c259" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7556 <script>
7557
7558 function test_2d_imageData_create_round() {
7559
7560 var canvas = document.getElementById('c259');
7561 var ctx = canvas.getContext('2d');
7562
7563 var _thrown_outer = false;
7564
7565 var imgdata1 = ctx.createImageData(10.01, 10.99);
7566 var imgdata2 = ctx.getImageData(0, 0, 10.01, 10.99);
7567 is(imgdata1.width, imgdata2.width, "imgdata1.width == imgdata2.width");
7568 is(imgdata1.height, imgdata2.height, "imgdata1.height == imgdata2.height");
7569
7570
7571 }
7572 </script>
7573
7574 <!-- [[[ test_2d.imageData.create.tiny.html ]]] -->
7575
7576 <p>Canvas test: 2d.imageData.create.tiny - bug 433004</p>
7577 <!-- Testing: createImageData() works for sizes smaller than one pixel -->
7578 <canvas id="c260" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7579 <script>
7580
7581 function test_2d_imageData_create_tiny() {
7582
7583 var canvas = document.getElementById('c260');
7584 var ctx = canvas.getContext('2d');
7585
7586 var _thrown_outer = false;
7587 try {
7588
7589 var imgdata = ctx.createImageData(0.0001, 0.0001);
7590 ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4");
7591 ok(imgdata.width == 1, "imgdata.width == 1");
7592 ok(imgdata.height == 1, "imgdata.height == 1");
7593 var isTransparentBlack = true;
7594 for (var i = 0; i < imgdata.data.length; ++i)
7595 if (imgdata.data[i] !== 0)
7596 isTransparentBlack = false;
7597 ok(isTransparentBlack, "isTransparentBlack");
7598
7599 } catch (e) {
7600 _thrown_outer = true;
7601 }
7602 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
7603
7604
7605 }
7606 </script>
7607
7608 <!-- [[[ test_2d.imageData.create.type.html ]]] -->
7609
7610 <p>Canvas test: 2d.imageData.create.type - bug 433004</p>
7611 <!-- Testing: createImageData() returns an ImageData object containing a Uint8ClampedArray object -->
7612 <canvas id="c261" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7613 <script>
7614
7615 function test_2d_imageData_create_type() {
7616
7617 var canvas = document.getElementById('c261');
7618 var ctx = canvas.getContext('2d');
7619
7620 ok(window.ImageData !== undefined, "window.ImageData !== undefined");
7621 ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined");
7622 window.ImageData.prototype.thisImplementsImageData = true;
7623 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
7624 var imgdata = ctx.createImageData(1, 1);
7625 ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
7626 ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
7627
7628
7629 }
7630 </script>
7631
7632 <!-- [[[ test_2d.imageData.create1.type.html ]]] -->
7633
7634 <p>Canvas test: 2d.imageData.create1.type - bug 630040</p>
7635 <!-- Testing: createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray object -->
7636 <canvas id="c261a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7637 <script>
7638
7639 function test_2d_imageData_create1_type() {
7640
7641 var canvas = document.getElementById('c261a');
7642 var ctx = canvas.getContext('2d');
7643
7644 ok(window.ImageData !== undefined, "window.ImageData !== undefined");
7645 ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined");
7646 window.ImageData.prototype.thisImplementsImageData = true;
7647 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
7648 var imgdata = ctx.createImageData(ctx.createImageData(1, 1));
7649 ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
7650 ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
7651
7652
7653 }
7654 </script>
7655
7656 <!-- [[[ test_2d.imageData.create.zero.html ]]] -->
7657
7658 <p>Canvas test: 2d.imageData.create.zero - bug 433004</p>
7659 <!-- Testing: createImageData() throws INDEX_SIZE_ERR if size is zero -->
7660 <canvas id="c262" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7661 <script>
7662
7663 function test_2d_imageData_create_zero() {
7664
7665 var canvas = document.getElementById('c262');
7666 var ctx = canvas.getContext('2d');
7667
7668 var _thrown = undefined; try {
7669 ctx.createImageData(10, 0);
7670 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
7671 var _thrown = undefined; try {
7672 ctx.createImageData(0, 10);
7673 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
7674 var _thrown = undefined; try {
7675 ctx.createImageData(0, 0);
7676 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
7677
7678
7679 }
7680 </script>
7681
7682 <!-- [[[ test_2d.imageData.create1.zero.html ]]] -->
7683
7684 <p>Canvas test: 2d.imageData.create1.zero - bug 630040</p>
7685 <!-- Testing: createImageData(null) throws TypeError -->
7686 <canvas id="c262a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7687 <script>
7688
7689 function test_2d_imageData_create1_zero() {
7690
7691 var canvas = document.getElementById('c262a');
7692 var ctx = canvas.getContext('2d');
7693
7694 var _thrown = undefined; try {
7695 ctx.createImageData(null);
7696 } catch (e) { _thrown = e };
7697 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
7698
7699
7700 }
7701 </script>
7702
7703 <!-- [[[ test_2d.imageData.get.basic.html ]]] -->
7704
7705 <p>Canvas test: 2d.imageData.get.basic</p>
7706 <!-- Testing: getImageData() exists and returns something -->
7707 <canvas id="c263" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7708 <script>
7709
7710 function test_2d_imageData_get_basic() {
7711
7712 var canvas = document.getElementById('c263');
7713 var ctx = canvas.getContext('2d');
7714
7715 ok(ctx.getImageData(0, 0, 100, 50) !== null, "ctx.getImageData(0, 0, 100, 50) !== null");
7716
7717
7718 }
7719 </script>
7720
7721 <!-- [[[ test_2d.imageData.get.clamp.html ]]] -->
7722
7723 <p>Canvas test: 2d.imageData.get.clamp</p>
7724 <!-- Testing: getImageData() clamps colours to the range [0, 255] -->
7725 <canvas id="c264" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7726 <script>
7727
7728 function test_2d_imageData_get_clamp() {
7729
7730 var canvas = document.getElementById('c264');
7731 var ctx = canvas.getContext('2d');
7732
7733 ctx.fillStyle = 'rgb(-100, -200, -300)';
7734 ctx.fillRect(0, 0, 100, 50);
7735 ctx.fillStyle = 'rgb(256, 300, 400)';
7736 ctx.fillRect(20, 10, 60, 10);
7737 var imgdata1 = ctx.getImageData(10, 5, 1, 1);
7738 ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0");
7739 ok(imgdata1.data[1] === 0, "imgdata1.data[\""+(1)+"\"] === 0");
7740 ok(imgdata1.data[2] === 0, "imgdata1.data[\""+(2)+"\"] === 0");
7741 var imgdata2 = ctx.getImageData(30, 15, 1, 1);
7742 ok(imgdata2.data[0] === 255, "imgdata2.data[\""+(0)+"\"] === 255");
7743 ok(imgdata2.data[1] === 255, "imgdata2.data[\""+(1)+"\"] === 255");
7744 ok(imgdata2.data[2] === 255, "imgdata2.data[\""+(2)+"\"] === 255");
7745
7746
7747 }
7748 </script>
7749
7750 <!-- [[[ test_2d.imageData.get.nonfinite.html ]]] -->
7751
7752 <p>Canvas test: 2d.imageData.get.nonfinite</p>
7753 <!-- Testing: getImageData() throws NOT_SUPPORTED_ERR if arguments are not finite -->
7754 <canvas id="c265" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7755 <script>
7756
7757 function test_2d_imageData_get_nonfinite() {
7758
7759 var canvas = document.getElementById('c265');
7760 var ctx = canvas.getContext('2d');
7761
7762 var _thrown = undefined; try {
7763 ctx.getImageData(Infinity, 10, 10, 10);
7764 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7765 var _thrown = undefined; try {
7766 ctx.getImageData(-Infinity, 10, 10, 10);
7767 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7768 var _thrown = undefined; try {
7769 ctx.getImageData(NaN, 10, 10, 10);
7770 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7771 var _thrown = undefined; try {
7772 ctx.getImageData(10, Infinity, 10, 10);
7773 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7774 var _thrown = undefined; try {
7775 ctx.getImageData(10, -Infinity, 10, 10);
7776 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7777 var _thrown = undefined; try {
7778 ctx.getImageData(10, NaN, 10, 10);
7779 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7780 var _thrown = undefined; try {
7781 ctx.getImageData(10, 10, Infinity, 10);
7782 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7783 var _thrown = undefined; try {
7784 ctx.getImageData(10, 10, -Infinity, 10);
7785 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7786 var _thrown = undefined; try {
7787 ctx.getImageData(10, 10, NaN, 10);
7788 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7789 var _thrown = undefined; try {
7790 ctx.getImageData(10, 10, 10, Infinity);
7791 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7792 var _thrown = undefined; try {
7793 ctx.getImageData(10, 10, 10, -Infinity);
7794 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7795 var _thrown = undefined; try {
7796 ctx.getImageData(10, 10, 10, NaN);
7797 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7798 var _thrown = undefined; try {
7799 ctx.getImageData(Infinity, Infinity, 10, 10);
7800 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7801 var _thrown = undefined; try {
7802 ctx.getImageData(Infinity, Infinity, Infinity, 10);
7803 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7804 var _thrown = undefined; try {
7805 ctx.getImageData(Infinity, Infinity, Infinity, Infinity);
7806 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7807 var _thrown = undefined; try {
7808 ctx.getImageData(Infinity, Infinity, 10, Infinity);
7809 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7810 var _thrown = undefined; try {
7811 ctx.getImageData(Infinity, 10, Infinity, 10);
7812 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7813 var _thrown = undefined; try {
7814 ctx.getImageData(Infinity, 10, Infinity, Infinity);
7815 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7816 var _thrown = undefined; try {
7817 ctx.getImageData(Infinity, 10, 10, Infinity);
7818 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7819 var _thrown = undefined; try {
7820 ctx.getImageData(10, Infinity, Infinity, 10);
7821 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7822 var _thrown = undefined; try {
7823 ctx.getImageData(10, Infinity, Infinity, Infinity);
7824 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7825 var _thrown = undefined; try {
7826 ctx.getImageData(10, Infinity, 10, Infinity);
7827 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7828 var _thrown = undefined; try {
7829 ctx.getImageData(10, 10, Infinity, Infinity);
7830 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7831 var _thrown = undefined; try {
7832 ctx.getImageData({valueOf:function() Infinity}, 10, 10, 10);
7833 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7834 var _thrown = undefined; try {
7835 ctx.getImageData({valueOf:function() -Infinity}, 10, 10, 10);
7836 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7837 var _thrown = undefined; try {
7838 ctx.getImageData({valueOf:function() NaN}, 10, 10, 10);
7839 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7840 var _thrown = undefined; try {
7841 ctx.getImageData(10, {valueOf:function() Infinity}, 10, 10);
7842 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7843 var _thrown = undefined; try {
7844 ctx.getImageData(10, {valueOf:function() -Infinity}, 10, 10);
7845 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7846 var _thrown = undefined; try {
7847 ctx.getImageData(10, {valueOf:function() NaN}, 10, 10);
7848 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7849 var _thrown = undefined; try {
7850 ctx.getImageData(10, 10, {valueOf:function() Infinity}, 10);
7851 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7852 var _thrown = undefined; try {
7853 ctx.getImageData(10, 10, {valueOf:function() -Infinity}, 10);
7854 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7855 var _thrown = undefined; try {
7856 ctx.getImageData(10, 10, {valueOf:function() NaN}, 10);
7857 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7858 var _thrown = undefined; try {
7859 ctx.getImageData(10, 10, 10, {valueOf:function() Infinity});
7860 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7861 var _thrown = undefined; try {
7862 ctx.getImageData(10, 10, 10, {valueOf:function() -Infinity});
7863 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7864 var _thrown = undefined; try {
7865 ctx.getImageData(10, 10, 10, {valueOf:function() NaN});
7866 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7867 var _thrown = undefined; try {
7868 ctx.getImageData({valueOf:function() Infinity}, {valueOf:function() Infinity}, 10, 10);
7869 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7870 var _thrown = undefined; try {
7871 ctx.getImageData({valueOf:function() Infinity}, {valueOf:function() Infinity}, {valueOf:function() Infinity}, 10);
7872 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7873 var _thrown = undefined; try {
7874 ctx.getImageData({valueOf:function() Infinity}, {valueOf:function() Infinity}, {valueOf:function() Infinity}, {valueOf:function() Infinity});
7875 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7876 var _thrown = undefined; try {
7877 ctx.getImageData({valueOf:function() Infinity}, {valueOf:function() Infinity}, 10, {valueOf:function() Infinity});
7878 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7879 var _thrown = undefined; try {
7880 ctx.getImageData({valueOf:function() Infinity}, 10, {valueOf:function() Infinity}, 10);
7881 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7882 var _thrown = undefined; try {
7883 ctx.getImageData({valueOf:function() Infinity}, 10, {valueOf:function() Infinity}, {valueOf:function() Infinity});
7884 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7885 var _thrown = undefined; try {
7886 ctx.getImageData({valueOf:function() Infinity}, 10, 10, {valueOf:function() Infinity});
7887 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7888 var _thrown = undefined; try {
7889 ctx.getImageData(10, {valueOf:function() Infinity}, {valueOf:function() Infinity}, 10);
7890 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7891 var _thrown = undefined; try {
7892 ctx.getImageData(10, {valueOf:function() Infinity}, {valueOf:function() Infinity}, {valueOf:function() Infinity});
7893 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7894 var _thrown = undefined; try {
7895 ctx.getImageData(10, {valueOf:function() Infinity}, 10, {valueOf:function() Infinity});
7896 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7897 var _thrown = undefined; try {
7898 ctx.getImageData(10, 10, {valueOf:function() Infinity}, {valueOf:function() Infinity});
7899 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7900
7901
7902 }
7903 </script>
7904
7905 <!-- [[[ test_2d.imageData.get.nonpremul.html ]]] -->
7906
7907 <p>Canvas test: 2d.imageData.get.nonpremul</p>
7908 <!-- Testing: getImageData() returns non-premultiplied colours -->
7909 <canvas id="c266" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7910 <script>
7911
7912 function test_2d_imageData_get_nonpremul() {
7913
7914 var canvas = document.getElementById('c266');
7915 var ctx = canvas.getContext('2d');
7916
7917 ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
7918 ctx.fillRect(0, 0, 100, 50);
7919 var imgdata = ctx.getImageData(10, 10, 10, 10);
7920 ok(imgdata.data[0] > 200, "imgdata.data[\""+(0)+"\"] > 200");
7921 ok(imgdata.data[1] > 200, "imgdata.data[\""+(1)+"\"] > 200");
7922 ok(imgdata.data[2] > 200, "imgdata.data[\""+(2)+"\"] > 200");
7923 ok(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");
7924 ok(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");
7925
7926
7927 }
7928 </script>
7929
7930 <!-- [[[ test_2d.imageData.get.order.alpha.html ]]] -->
7931
7932 <p>Canvas test: 2d.imageData.get.order.alpha</p>
7933 <!-- Testing: getImageData() returns A in the fourth component -->
7934 <canvas id="c267" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7935 <script>
7936
7937 function test_2d_imageData_get_order_alpha() {
7938
7939 var canvas = document.getElementById('c267');
7940 var ctx = canvas.getContext('2d');
7941
7942 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
7943 ctx.fillRect(0, 0, 100, 50);
7944 var imgdata = ctx.getImageData(0, 0, 10, 10);
7945 ok(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");
7946 ok(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");
7947
7948
7949 }
7950 </script>
7951
7952 <!-- [[[ test_2d.imageData.get.order.cols.html ]]] -->
7953
7954 <p>Canvas test: 2d.imageData.get.order.cols</p>
7955 <!-- Testing: getImageData() returns leftmost columns first -->
7956 <canvas id="c268" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7957 <script>
7958
7959 function test_2d_imageData_get_order_cols() {
7960
7961 var canvas = document.getElementById('c268');
7962 var ctx = canvas.getContext('2d');
7963
7964 ctx.fillStyle = '#fff';
7965 ctx.fillRect(0, 0, 100, 50);
7966 ctx.fillStyle = '#000';
7967 ctx.fillRect(0, 0, 2, 50);
7968 var imgdata = ctx.getImageData(0, 0, 10, 10);
7969 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
7970 ok(imgdata.data[Math.round(imgdata.width/2*4)] === 255, "imgdata.data[Math.round(imgdata.width/2*4)] === 255");
7971 ok(imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0, "imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0");
7972
7973
7974 }
7975 </script>
7976
7977 <!-- [[[ test_2d.imageData.get.order.rgb.html ]]] -->
7978
7979 <p>Canvas test: 2d.imageData.get.order.rgb</p>
7980 <!-- Testing: getImageData() returns R then G then B -->
7981 <canvas id="c269" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7982 <script>
7983
7984 function test_2d_imageData_get_order_rgb() {
7985
7986 var canvas = document.getElementById('c269');
7987 var ctx = canvas.getContext('2d');
7988
7989 ctx.fillStyle = '#48c';
7990 ctx.fillRect(0, 0, 100, 50);
7991 var imgdata = ctx.getImageData(0, 0, 10, 10);
7992 ok(imgdata.data[0] === 0x44, "imgdata.data[\""+(0)+"\"] === 0x44");
7993 ok(imgdata.data[1] === 0x88, "imgdata.data[\""+(1)+"\"] === 0x88");
7994 ok(imgdata.data[2] === 0xCC, "imgdata.data[\""+(2)+"\"] === 0xCC");
7995 ok(imgdata.data[3] === 255, "imgdata.data[\""+(3)+"\"] === 255");
7996
7997
7998 }
7999 </script>
8000
8001 <!-- [[[ test_2d.imageData.get.order.rows.html ]]] -->
8002
8003 <p>Canvas test: 2d.imageData.get.order.rows</p>
8004 <!-- Testing: getImageData() returns topmost rows first -->
8005 <canvas id="c270" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8006 <script>
8007
8008 function test_2d_imageData_get_order_rows() {
8009
8010 var canvas = document.getElementById('c270');
8011 var ctx = canvas.getContext('2d');
8012
8013 ctx.fillStyle = '#fff';
8014 ctx.fillRect(0, 0, 100, 50);
8015 ctx.fillStyle = '#000';
8016 ctx.fillRect(0, 0, 100, 2);
8017 var imgdata = ctx.getImageData(0, 0, 10, 10);
8018 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8019 ok(imgdata.data[Math.floor(imgdata.width/2*4)] === 0, "imgdata.data[Math.floor(imgdata.width/2*4)] === 0");
8020 ok(imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255, "imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255");
8021
8022
8023 }
8024 </script>
8025
8026 <!-- [[[ test_2d.imageData.get.range.html ]]] -->
8027
8028 <p>Canvas test: 2d.imageData.get.range</p>
8029 <!-- Testing: getImageData() returns values in the range [0, 255] -->
8030 <canvas id="c271" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8031 <script>
8032
8033 function test_2d_imageData_get_range() {
8034
8035 var canvas = document.getElementById('c271');
8036 var ctx = canvas.getContext('2d');
8037
8038 ctx.fillStyle = '#000';
8039 ctx.fillRect(0, 0, 100, 50);
8040 ctx.fillStyle = '#fff';
8041 ctx.fillRect(20, 10, 60, 10);
8042 var imgdata1 = ctx.getImageData(10, 5, 1, 1);
8043 ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0");
8044 var imgdata2 = ctx.getImageData(30, 15, 1, 1);
8045 ok(imgdata2.data[0] === 255, "imgdata2.data[\""+(0)+"\"] === 255");
8046
8047
8048 }
8049 </script>
8050
8051 <!-- [[[ test_2d.imageData.get.source.negative.html ]]] -->
8052
8053 <p>Canvas test: 2d.imageData.get.source.negative</p>
8054 <!-- Testing: getImageData() works with negative width and height -->
8055 <canvas id="c272" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8056 <script>
8057
8058 function test_2d_imageData_get_source_negative() {
8059
8060 var canvas = document.getElementById('c272');
8061 var ctx = canvas.getContext('2d');
8062
8063 ctx.fillStyle = '#000';
8064 ctx.fillRect(0, 0, 100, 50);
8065 ctx.fillStyle = '#fff';
8066 ctx.fillRect(20, 10, 60, 10);
8067
8068 var imgdata1 = ctx.getImageData(85, 25, -10, -10);
8069 ok(imgdata1.data[0] === 255, "imgdata1.data[\""+(0)+"\"] === 255");
8070 ok(imgdata1.data[1] === 255, "imgdata1.data[\""+(1)+"\"] === 255");
8071 ok(imgdata1.data[2] === 255, "imgdata1.data[\""+(2)+"\"] === 255");
8072 ok(imgdata1.data[3] === 255, "imgdata1.data[\""+(3)+"\"] === 255");
8073 ok(imgdata1.data[imgdata1.data.length-4+0] === 0, "imgdata1.data[imgdata1.data.length-4+0] === 0");
8074 ok(imgdata1.data[imgdata1.data.length-4+1] === 0, "imgdata1.data[imgdata1.data.length-4+1] === 0");
8075 ok(imgdata1.data[imgdata1.data.length-4+2] === 0, "imgdata1.data[imgdata1.data.length-4+2] === 0");
8076 ok(imgdata1.data[imgdata1.data.length-4+3] === 255, "imgdata1.data[imgdata1.data.length-4+3] === 255");
8077
8078 var imgdata2 = ctx.getImageData(0, 0, -1, -1);
8079 ok(imgdata2.data[0] === 0, "imgdata2.data[\""+(0)+"\"] === 0");
8080 ok(imgdata2.data[1] === 0, "imgdata2.data[\""+(1)+"\"] === 0");
8081 ok(imgdata2.data[2] === 0, "imgdata2.data[\""+(2)+"\"] === 0");
8082 ok(imgdata2.data[3] === 0, "imgdata2.data[\""+(3)+"\"] === 0");
8083
8084
8085 }
8086 </script>
8087
8088 <!-- [[[ test_2d.imageData.get.source.outside.html ]]] -->
8089
8090 <p>Canvas test: 2d.imageData.get.source.outside</p>
8091 <!-- Testing: getImageData() returns transparent black outside the canvas -->
8092 <canvas id="c273" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8093 <script>
8094
8095 function test_2d_imageData_get_source_outside() {
8096
8097 var canvas = document.getElementById('c273');
8098 var ctx = canvas.getContext('2d');
8099
8100 var _thrown_outer = false;
8101 try {
8102
8103 ctx.fillStyle = '#08f';
8104 ctx.fillRect(0, 0, 100, 50);
8105
8106 var imgdata1 = ctx.getImageData(-10, 5, 1, 1);
8107 ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0");
8108 ok(imgdata1.data[1] === 0, "imgdata1.data[\""+(1)+"\"] === 0");
8109 ok(imgdata1.data[2] === 0, "imgdata1.data[\""+(2)+"\"] === 0");
8110 ok(imgdata1.data[3] === 0, "imgdata1.data[\""+(3)+"\"] === 0");
8111
8112 var imgdata2 = ctx.getImageData(10, -5, 1, 1);
8113 ok(imgdata2.data[0] === 0, "imgdata2.data[\""+(0)+"\"] === 0");
8114 ok(imgdata2.data[1] === 0, "imgdata2.data[\""+(1)+"\"] === 0");
8115 ok(imgdata2.data[2] === 0, "imgdata2.data[\""+(2)+"\"] === 0");
8116 ok(imgdata2.data[3] === 0, "imgdata2.data[\""+(3)+"\"] === 0");
8117
8118 var imgdata3 = ctx.getImageData(200, 5, 1, 1);
8119 ok(imgdata3.data[0] === 0, "imgdata3.data[\""+(0)+"\"] === 0");
8120 ok(imgdata3.data[1] === 0, "imgdata3.data[\""+(1)+"\"] === 0");
8121 ok(imgdata3.data[2] === 0, "imgdata3.data[\""+(2)+"\"] === 0");
8122 ok(imgdata3.data[3] === 0, "imgdata3.data[\""+(3)+"\"] === 0");
8123
8124 var imgdata4 = ctx.getImageData(10, 60, 1, 1);
8125 ok(imgdata4.data[0] === 0, "imgdata4.data[\""+(0)+"\"] === 0");
8126 ok(imgdata4.data[1] === 0, "imgdata4.data[\""+(1)+"\"] === 0");
8127 ok(imgdata4.data[2] === 0, "imgdata4.data[\""+(2)+"\"] === 0");
8128 ok(imgdata4.data[3] === 0, "imgdata4.data[\""+(3)+"\"] === 0");
8129
8130 var imgdata5 = ctx.getImageData(100, 10, 1, 1);
8131 ok(imgdata5.data[0] === 0, "imgdata5.data[\""+(0)+"\"] === 0");
8132 ok(imgdata5.data[1] === 0, "imgdata5.data[\""+(1)+"\"] === 0");
8133 ok(imgdata5.data[2] === 0, "imgdata5.data[\""+(2)+"\"] === 0");
8134 ok(imgdata5.data[3] === 0, "imgdata5.data[\""+(3)+"\"] === 0");
8135
8136 var imgdata6 = ctx.getImageData(0, 10, 1, 1);
8137 ok(imgdata6.data[0] === 0, "imgdata6.data[\""+(0)+"\"] === 0");
8138 ok(imgdata6.data[1] === 136, "imgdata6.data[\""+(1)+"\"] === 136");
8139 ok(imgdata6.data[2] === 255, "imgdata6.data[\""+(2)+"\"] === 255");
8140 ok(imgdata6.data[3] === 255, "imgdata6.data[\""+(3)+"\"] === 255");
8141
8142 var imgdata7 = ctx.getImageData(-10, 10, 20, 20);
8143 ok(imgdata7.data[ 0*4+0] === 0, "imgdata7.data[ 0*4+0] === 0");
8144 ok(imgdata7.data[ 0*4+1] === 0, "imgdata7.data[ 0*4+1] === 0");
8145 ok(imgdata7.data[ 0*4+2] === 0, "imgdata7.data[ 0*4+2] === 0");
8146 ok(imgdata7.data[ 0*4+3] === 0, "imgdata7.data[ 0*4+3] === 0");
8147 ok(imgdata7.data[ 9*4+0] === 0, "imgdata7.data[ 9*4+0] === 0");
8148 ok(imgdata7.data[ 9*4+1] === 0, "imgdata7.data[ 9*4+1] === 0");
8149 ok(imgdata7.data[ 9*4+2] === 0, "imgdata7.data[ 9*4+2] === 0");
8150 ok(imgdata7.data[ 9*4+3] === 0, "imgdata7.data[ 9*4+3] === 0");
8151 ok(imgdata7.data[10*4+0] === 0, "imgdata7.data[10*4+0] === 0");
8152 ok(imgdata7.data[10*4+1] === 136, "imgdata7.data[10*4+1] === 136");
8153 ok(imgdata7.data[10*4+2] === 255, "imgdata7.data[10*4+2] === 255");
8154 ok(imgdata7.data[10*4+3] === 255, "imgdata7.data[10*4+3] === 255");
8155 ok(imgdata7.data[19*4+0] === 0, "imgdata7.data[19*4+0] === 0");
8156 ok(imgdata7.data[19*4+1] === 136, "imgdata7.data[19*4+1] === 136");
8157 ok(imgdata7.data[19*4+2] === 255, "imgdata7.data[19*4+2] === 255");
8158 ok(imgdata7.data[19*4+3] === 255, "imgdata7.data[19*4+3] === 255");
8159 ok(imgdata7.data[20*4+0] === 0, "imgdata7.data[20*4+0] === 0");
8160 ok(imgdata7.data[20*4+1] === 0, "imgdata7.data[20*4+1] === 0");
8161 ok(imgdata7.data[20*4+2] === 0, "imgdata7.data[20*4+2] === 0");
8162 ok(imgdata7.data[20*4+3] === 0, "imgdata7.data[20*4+3] === 0");
8163
8164 } catch (e) {
8165 _thrown_outer = true;
8166 }
8167 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8168
8169
8170 }
8171 </script>
8172
8173 <!-- [[[ test_2d.imageData.get.source.size.html ]]] -->
8174
8175 <p>Canvas test: 2d.imageData.get.source.size</p>
8176 <!-- Testing: getImageData() returns bigger ImageData for bigger source rectangle -->
8177 <canvas id="c274" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8178 <script>
8179
8180 function test_2d_imageData_get_source_size() {
8181
8182 var canvas = document.getElementById('c274');
8183 var ctx = canvas.getContext('2d');
8184
8185 var imgdata1 = ctx.getImageData(0, 0, 10, 10);
8186 var imgdata2 = ctx.getImageData(0, 0, 20, 20);
8187 ok(imgdata2.width > imgdata1.width, "imgdata2.width > imgdata1.width");
8188 ok(imgdata2.height > imgdata1.height, "imgdata2.height > imgdata1.height");
8189
8190
8191 }
8192 </script>
8193
8194 <!-- [[[ test_2d.imageData.get.tiny.html ]]] -->
8195
8196 <p>Canvas test: 2d.imageData.get.tiny</p>
8197 <!-- Testing: getImageData() works for sizes smaller than one pixel -->
8198 <canvas id="c275" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8199 <script>
8200
8201 function test_2d_imageData_get_tiny() {
8202
8203 var canvas = document.getElementById('c275');
8204 var ctx = canvas.getContext('2d');
8205
8206 var _thrown_outer = false;
8207 try {
8208
8209 var imgdata = ctx.getImageData(0, 0, 0.0001, 0.0001);
8210 ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4");
8211 ok(imgdata.width == 1, "imgdata.width == 1");
8212 ok(imgdata.height == 1, "imgdata.height == 1");
8213
8214 } catch (e) {
8215 _thrown_outer = true;
8216 }
8217 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8218
8219
8220 }
8221 </script>
8222
8223 <!-- [[[ test_2d.imageData.get.type.html ]]] -->
8224
8225 <p>Canvas test: 2d.imageData.get.type</p>
8226 <!-- Testing: getImageData() returns an ImageData object containing a Uint8ClampedArray object -->
8227 <canvas id="c276" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8228 <script>
8229
8230 function test_2d_imageData_get_type() {
8231
8232 var canvas = document.getElementById('c276');
8233 var ctx = canvas.getContext('2d');
8234
8235 ok(window.ImageData !== undefined, "window.ImageData !== undefined");
8236 ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined");
8237 window.ImageData.prototype.thisImplementsImageData = true;
8238 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
8239 var imgdata = ctx.getImageData(0, 0, 1, 1);
8240 ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
8241 ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
8242
8243
8244 }
8245 </script>
8246
8247 <!-- [[[ test_2d.imageData.get.unaffected.html ]]] -->
8248
8249 <p>Canvas test: 2d.imageData.get.unaffected</p>
8250 <!-- Testing: getImageData() is not affected by context state -->
8251 <canvas id="c277" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8252 <script>
8253
8254
8255 function test_2d_imageData_get_unaffected() {
8256
8257 var canvas = document.getElementById('c277');
8258 var ctx = canvas.getContext('2d');
8259
8260 ctx.fillStyle = '#0f0';
8261 ctx.fillRect(0, 0, 50, 50)
8262 ctx.fillStyle = '#f00';
8263 ctx.fillRect(50, 0, 50, 50)
8264 ctx.save();
8265 ctx.translate(50, 0);
8266 ctx.globalAlpha = 0.1;
8267 ctx.globalCompositeOperation = 'destination-atop';
8268 ctx.shadowColor = '#f00';
8269 ctx.rect(0, 0, 5, 5);
8270 ctx.clip();
8271 var imgdata = ctx.getImageData(0, 0, 50, 50);
8272 ctx.restore();
8273 ctx.putImageData(imgdata, 50, 0);
8274 isPixel(ctx, 25,25, 0,255,0,255, 2);
8275 isPixel(ctx, 75,25, 0,255,0,255, 2);
8276
8277
8278 }
8279 </script>
8280
8281 <!-- [[[ test_2d.imageData.get.zero.html ]]] -->
8282
8283 <p>Canvas test: 2d.imageData.get.zero</p>
8284 <!-- Testing: getImageData() throws INDEX_SIZE_ERR if size is zero -->
8285 <canvas id="c278" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8286 <script>
8287
8288 function test_2d_imageData_get_zero() {
8289
8290 var canvas = document.getElementById('c278');
8291 var ctx = canvas.getContext('2d');
8292
8293 var _thrown = undefined; try {
8294 ctx.getImageData(1, 1, 10, 0);
8295 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
8296 var _thrown = undefined; try {
8297 ctx.getImageData(1, 1, 0, 10);
8298 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
8299 var _thrown = undefined; try {
8300 ctx.getImageData(1, 1, 0, 0);
8301 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
8302
8303
8304 }
8305 </script>
8306
8307 <!-- [[[ test_2d.imageData.object.clamp.html ]]] -->
8308
8309 <p>Canvas test: 2d.imageData.object.clamp</p>
8310 <!-- Testing: ImageData.data clamps numbers to [0, 255] -->
8311 <canvas id="c279" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8312 <script>
8313
8314 function test_2d_imageData_object_clamp() {
8315
8316 var canvas = document.getElementById('c279');
8317 var ctx = canvas.getContext('2d');
8318
8319 var imgdata = ctx.getImageData(0, 0, 10, 10);
8320
8321 imgdata.data[0] = 100;
8322 imgdata.data[0] = 300;
8323 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
8324 imgdata.data[0] = 100;
8325 imgdata.data[0] = -100;
8326 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8327
8328 imgdata.data[0] = 100;
8329 imgdata.data[0] = 200+Math.pow(2, 32);
8330 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
8331 imgdata.data[0] = 100;
8332 imgdata.data[0] = -200-Math.pow(2, 32);
8333 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8334
8335 imgdata.data[0] = 100;
8336 imgdata.data[0] = Math.pow(10, 39);
8337 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
8338 imgdata.data[0] = 100;
8339 imgdata.data[0] = -Math.pow(10, 39);
8340 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8341
8342 imgdata.data[0] = 100;
8343 imgdata.data[0] = -Infinity;
8344 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8345 imgdata.data[0] = 100;
8346 imgdata.data[0] = Infinity;
8347 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
8348
8349
8350 }
8351 </script>
8352
8353 <!-- [[[ test_2d.imageData.object.ctor.html ]]] -->
8354
8355 <p>Canvas test: 2d.imageData.object.ctor</p>
8356 <!-- Testing: ImageData does not have a usable constructor -->
8357 <canvas id="c280" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8358 <script>
8359
8360 function test_2d_imageData_object_ctor() {
8361
8362 var canvas = document.getElementById('c280');
8363 var ctx = canvas.getContext('2d');
8364
8365 ok(window.ImageData !== undefined, "window.ImageData !== undefined");
8366
8367 var _thrown_outer = false;
8368 try {
8369
8370 new window.ImageData(1,1);
8371
8372 } catch (e) {
8373 _thrown_outer = true;
8374 }
8375 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8376
8377
8378 }
8379 </script>
8380
8381 <!-- [[[ test_2d.imageData.object.nan.html ]]] -->
8382
8383 <p>Canvas test: 2d.imageData.object.nan</p>
8384 <!-- Testing: ImageData.data converts NaN to 0 -->
8385 <canvas id="c281" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8386 <script>
8387
8388 function test_2d_imageData_object_nan() {
8389
8390 var canvas = document.getElementById('c281');
8391 var ctx = canvas.getContext('2d');
8392
8393 var imgdata = ctx.getImageData(0, 0, 10, 10);
8394 imgdata.data[0] = 100;
8395 imgdata.data[0] = NaN;
8396 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8397 imgdata.data[0] = 100;
8398 imgdata.data[0] = "cheese";
8399 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8400
8401
8402 }
8403 </script>
8404
8405 <!-- [[[ test_2d.imageData.object.properties.html ]]] -->
8406
8407 <p>Canvas test: 2d.imageData.object.properties</p>
8408 <!-- Testing: ImageData objects have the right properties -->
8409 <canvas id="c282" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8410 <script>
8411
8412 function test_2d_imageData_object_properties() {
8413
8414 var canvas = document.getElementById('c282');
8415 var ctx = canvas.getContext('2d');
8416
8417 var imgdata = ctx.getImageData(0, 0, 10, 10);
8418 ok(typeof(imgdata.width) == 'number', "typeof(imgdata.width) == 'number'");
8419 ok(typeof(imgdata.height) == 'number', "typeof(imgdata.height) == 'number'");
8420 ok(typeof(imgdata.data) == 'object', "typeof(imgdata.data) == 'object'");
8421
8422
8423 }
8424 </script>
8425
8426 <!-- [[[ test_2d.imageData.object.readonly.html ]]] -->
8427
8428 <p>Canvas test: 2d.imageData.object.readonly</p>
8429 <!-- Testing: ImageData objects properties are read-only -->
8430 <canvas id="c283" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8431 <script>
8432
8433 function test_2d_imageData_object_readonly() {
8434
8435 var canvas = document.getElementById('c283');
8436 var ctx = canvas.getContext('2d');
8437
8438 var imgdata = ctx.getImageData(0, 0, 10, 10);
8439 var w = imgdata.width;
8440 var h = imgdata.height;
8441 var d = imgdata.data;
8442 imgdata.width = 123;
8443 imgdata.height = 123;
8444 imgdata.data = [100,100,100,100];
8445 ok(imgdata.width === w, "imgdata.width === w");
8446 ok(imgdata.height === h, "imgdata.height === h");
8447 ok(imgdata.data === d, "imgdata.data === d");
8448 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8449 ok(imgdata.data[1] === 0, "imgdata.data[\""+(1)+"\"] === 0");
8450 ok(imgdata.data[2] === 0, "imgdata.data[\""+(2)+"\"] === 0");
8451 ok(imgdata.data[3] === 0, "imgdata.data[\""+(3)+"\"] === 0");
8452
8453
8454 }
8455 </script>
8456
8457 <!-- [[[ test_2d.imageData.object.round.html ]]] -->
8458
8459 <p>Canvas test: 2d.imageData.object.round</p>
8460 <!-- Testing: ImageData.data rounds numbers with convertToIntegerTiesToEven -->
8461 <canvas id="c284" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8462 <script>
8463
8464 function test_2d_imageData_object_round() {
8465
8466 var canvas = document.getElementById('c284');
8467 var ctx = canvas.getContext('2d');
8468
8469 var imgdata = ctx.getImageData(0, 0, 10, 10);
8470 imgdata.data[0] = 0.499;
8471 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8472 imgdata.data[0] = 0.5;
8473 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8474 imgdata.data[0] = 0.501;
8475 ok(imgdata.data[0] === 1, "imgdata.data[\""+(0)+"\"] === 1");
8476 imgdata.data[0] = 1.499;
8477 ok(imgdata.data[0] === 1, "imgdata.data[\""+(0)+"\"] === 1");
8478 imgdata.data[0] = 1.5;
8479 ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2");
8480 imgdata.data[0] = 1.501;
8481 ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2");
8482 imgdata.data[0] = 2.5;
8483 ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2");
8484 imgdata.data[0] = 3.5;
8485 ok(imgdata.data[0] === 4, "imgdata.data[\""+(0)+"\"] === 4");
8486 imgdata.data[0] = 252.5;
8487 ok(imgdata.data[0] === 252, "imgdata.data[\""+(0)+"\"] === 252");
8488 imgdata.data[0] = 253.5;
8489 ok(imgdata.data[0] === 254, "imgdata.data[\""+(0)+"\"] === 254");
8490 imgdata.data[0] = 254.5;
8491 ok(imgdata.data[0] === 254, "imgdata.data[\""+(0)+"\"] === 254");
8492
8493
8494 }
8495 </script>
8496
8497 <!-- [[[ test_2d.imageData.object.set.html ]]] -->
8498
8499 <p>Canvas test: 2d.imageData.object.set</p>
8500 <!-- Testing: ImageData.data can be modified -->
8501 <canvas id="c285" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8502 <script>
8503
8504 function test_2d_imageData_object_set() {
8505
8506 var canvas = document.getElementById('c285');
8507 var ctx = canvas.getContext('2d');
8508
8509 var imgdata = ctx.getImageData(0, 0, 10, 10);
8510 imgdata.data[0] = 100;
8511 ok(imgdata.data[0] === 100, "imgdata.data[\""+(0)+"\"] === 100");
8512 imgdata.data[0] = 200;
8513 ok(imgdata.data[0] === 200, "imgdata.data[\""+(0)+"\"] === 200");
8514
8515
8516 }
8517 </script>
8518
8519 <!-- [[[ test_2d.imageData.object.string.html ]]] -->
8520
8521 <p>Canvas test: 2d.imageData.object.string</p>
8522 <!-- Testing: ImageData.data converts strings to numbers with ToNumber -->
8523 <canvas id="c286" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8524 <script>
8525
8526 function test_2d_imageData_object_string() {
8527
8528 var canvas = document.getElementById('c286');
8529 var ctx = canvas.getContext('2d');
8530
8531 var imgdata = ctx.getImageData(0, 0, 10, 10);
8532 imgdata.data[0] = 100;
8533 imgdata.data[0] = "110";
8534 ok(imgdata.data[0] === 110, "imgdata.data[\""+(0)+"\"] === 110");
8535 imgdata.data[0] = 100;
8536 imgdata.data[0] = "0x78";
8537 ok(imgdata.data[0] === 120, "imgdata.data[\""+(0)+"\"] === 120");
8538 imgdata.data[0] = 100;
8539 imgdata.data[0] = " +130e0 ";
8540 ok(imgdata.data[0] === 130, "imgdata.data[\""+(0)+"\"] === 130");
8541
8542
8543 }
8544 </script>
8545
8546 <!-- [[[ test_2d.imageData.object.undefined.html ]]] -->
8547
8548 <p>Canvas test: 2d.imageData.object.undefined</p>
8549 <!-- Testing: ImageData.data converts undefined to 0 -->
8550 <canvas id="c287" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8551 <script>
8552
8553 function test_2d_imageData_object_undefined() {
8554
8555 var canvas = document.getElementById('c287');
8556 var ctx = canvas.getContext('2d');
8557
8558 var imgdata = ctx.getImageData(0, 0, 10, 10);
8559 imgdata.data[0] = 100;
8560 imgdata.data[0] = undefined;
8561 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8562
8563
8564 }
8565 </script>
8566
8567 <!-- [[[ test_2d.imageData.put.alpha.html ]]] -->
8568
8569 <p>Canvas test: 2d.imageData.put.alpha</p>
8570 <!-- Testing: putImageData() puts non-solid image data correctly -->
8571 <canvas id="c288" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8572 <script>
8573
8574
8575 function test_2d_imageData_put_alpha() {
8576
8577 var canvas = document.getElementById('c288');
8578 var ctx = canvas.getContext('2d');
8579
8580 ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
8581 ctx.fillRect(0, 0, 100, 50)
8582 var imgdata = ctx.getImageData(0, 0, 100, 50);
8583 ctx.fillStyle = '#f00';
8584 ctx.fillRect(0, 0, 100, 50)
8585 ctx.putImageData(imgdata, 0, 0);
8586 isPixel(ctx, 50,25, 0,255,0,64, 2);
8587
8588
8589 }
8590 </script>
8591
8592 <!-- [[[ test_2d.imageData.put.basic.html ]]] -->
8593
8594 <p>Canvas test: 2d.imageData.put.basic</p>
8595 <!-- Testing: putImageData() puts image data from getImageData() onto the canvas -->
8596 <canvas id="c289" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8597 <script>
8598
8599
8600 function test_2d_imageData_put_basic() {
8601
8602 var canvas = document.getElementById('c289');
8603 var ctx = canvas.getContext('2d');
8604
8605 ctx.fillStyle = '#0f0';
8606 ctx.fillRect(0, 0, 100, 50)
8607 var imgdata = ctx.getImageData(0, 0, 100, 50);
8608 ctx.fillStyle = '#f00';
8609 ctx.fillRect(0, 0, 100, 50)
8610 ctx.putImageData(imgdata, 0, 0);
8611 isPixel(ctx, 50,25, 0,255,0,255, 2);
8612
8613
8614 }
8615 </script>
8616
8617 <!-- [[[ test_2d.imageData.put.clip.html ]]] -->
8618
8619 <p>Canvas test: 2d.imageData.put.clip - bug 433397</p>
8620 <!-- Testing: putImageData() is not affected by clipping regions -->
8621 <canvas id="c290" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8622 <script>
8623
8624
8625
8626 function test_2d_imageData_put_clip() {
8627
8628 var canvas = document.getElementById('c290');
8629 var ctx = canvas.getContext('2d');
8630
8631 ctx.fillStyle = '#0f0';
8632 ctx.fillRect(0, 0, 100, 50)
8633 var imgdata = ctx.getImageData(0, 0, 100, 50);
8634 ctx.fillStyle = '#f00';
8635 ctx.fillRect(0, 0, 100, 50)
8636 ctx.beginPath();
8637 ctx.rect(0, 0, 50, 50);
8638 ctx.clip();
8639 ctx.putImageData(imgdata, 0, 0);
8640 isPixel(ctx, 25,25, 0,255,0,255, 2);
8641 isPixel(ctx, 75,25, 0,255,0,255, 2);
8642
8643
8644 }
8645 </script>
8646
8647 <!-- [[[ test_2d.imageData.put.created.html ]]] -->
8648
8649 <p>Canvas test: 2d.imageData.put.created - bug 433004</p>
8650 <!-- Testing: putImageData() puts image data from createImageData() onto the canvas -->
8651 <canvas id="c291" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8652 <script>
8653
8654
8655 function test_2d_imageData_put_created() {
8656
8657 var canvas = document.getElementById('c291');
8658 var ctx = canvas.getContext('2d');
8659
8660 var imgdata = ctx.createImageData(100, 50);
8661 for (var i = 0; i < imgdata.data.length; i += 4) {
8662 imgdata.data[i] = 0;
8663 imgdata.data[i+1] = 255;
8664 imgdata.data[i+2] = 0;
8665 imgdata.data[i+3] = 255;
8666 }
8667 ctx.fillStyle = '#f00';
8668 ctx.fillRect(0, 0, 100, 50)
8669 ctx.putImageData(imgdata, 0, 0);
8670 isPixel(ctx, 50,25, 0,255,0,255, 2);
8671
8672
8673 }
8674 </script>
8675
8676 <!-- [[[ test_2d.imageData.put.cross.html ]]] -->
8677
8678 <p>Canvas test: 2d.imageData.put.cross</p>
8679 <!-- Testing: putImageData() accepts image data got from a different canvas -->
8680 <canvas id="c292" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8681 <script>
8682
8683
8684 function test_2d_imageData_put_cross() {
8685
8686 var canvas = document.getElementById('c292');
8687 var ctx = canvas.getContext('2d');
8688
8689 var canvas2 = document.createElement('canvas');
8690 var ctx2 = canvas2.getContext('2d');
8691 ctx2.fillStyle = '#0f0';
8692 ctx2.fillRect(0, 0, 100, 50)
8693 var imgdata = ctx2.getImageData(0, 0, 100, 50);
8694 ctx.fillStyle = '#f00';
8695 ctx.fillRect(0, 0, 100, 50)
8696 ctx.putImageData(imgdata, 0, 0);
8697 isPixel(ctx, 50,25, 0,255,0,255, 2);
8698
8699
8700 }
8701 </script>
8702
8703 <!-- [[[ test_2d.imageData.put.dirty.negative.html ]]] -->
8704
8705 <p>Canvas test: 2d.imageData.put.dirty.negative</p>
8706 <!-- Testing: putImageData() handles negative-sized dirty rectangles correctly -->
8707 <canvas id="c293" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8708 <script>
8709
8710
8711 function test_2d_imageData_put_dirty_negative() {
8712
8713 var canvas = document.getElementById('c293');
8714 var ctx = canvas.getContext('2d');
8715
8716 var _thrown_outer = false;
8717 try {
8718
8719 ctx.fillStyle = '#f00';
8720 ctx.fillRect(0, 0, 100, 50)
8721 ctx.fillStyle = '#0f0';
8722 ctx.fillRect(0, 0, 20, 20)
8723
8724 var imgdata = ctx.getImageData(0, 0, 100, 50);
8725
8726 ctx.fillStyle = '#0f0';
8727 ctx.fillRect(0, 0, 100, 50)
8728 ctx.fillStyle = '#f00';
8729 ctx.fillRect(40, 20, 20, 20)
8730 ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20);
8731
8732 isPixel(ctx, 50,25, 0,255,0,255, 2);
8733 isPixel(ctx, 35,25, 0,255,0,255, 2);
8734 isPixel(ctx, 65,25, 0,255,0,255, 2);
8735 isPixel(ctx, 50,15, 0,255,0,255, 2);
8736 isPixel(ctx, 50,45, 0,255,0,255, 2);
8737
8738 } catch (e) {
8739 _thrown_outer = true;
8740 }
8741 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8742
8743
8744 }
8745 </script>
8746
8747 <!-- [[[ test_2d.imageData.put.dirty.outside.html ]]] -->
8748
8749 <p>Canvas test: 2d.imageData.put.dirty.outside</p>
8750 <!-- Testing: putImageData() handles dirty rectangles outside the canvas correctly -->
8751 <canvas id="c294" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8752 <script>
8753
8754
8755 function test_2d_imageData_put_dirty_outside() {
8756
8757 var canvas = document.getElementById('c294');
8758 var ctx = canvas.getContext('2d');
8759
8760 var _thrown_outer = false;
8761 try {
8762
8763 ctx.fillStyle = '#f00';
8764 ctx.fillRect(0, 0, 100, 50)
8765
8766 var imgdata = ctx.getImageData(0, 0, 100, 50);
8767
8768 ctx.fillStyle = '#0f0';
8769 ctx.fillRect(0, 0, 100, 50)
8770
8771 ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20);
8772 ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50);
8773 ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20);
8774 ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20);
8775
8776 isPixel(ctx, 50,25, 0,255,0,255, 2);
8777 isPixel(ctx, 98,15, 0,255,0,255, 2);
8778 isPixel(ctx, 98,25, 0,255,0,255, 2);
8779 isPixel(ctx, 98,45, 0,255,0,255, 2);
8780 isPixel(ctx, 1,5, 0,255,0,255, 2);
8781 isPixel(ctx, 1,25, 0,255,0,255, 2);
8782 isPixel(ctx, 1,45, 0,255,0,255, 2);
8783
8784 } catch (e) {
8785 _thrown_outer = true;
8786 }
8787 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8788
8789
8790 }
8791 </script>
8792
8793 <!-- [[[ test_2d.imageData.put.dirty.rect1.html ]]] -->
8794
8795 <p>Canvas test: 2d.imageData.put.dirty.rect1</p>
8796 <!-- Testing: putImageData() only modifies areas inside the dirty rectangle, using width and height -->
8797 <canvas id="c295" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8798 <script>
8799
8800
8801 function test_2d_imageData_put_dirty_rect1() {
8802
8803 var canvas = document.getElementById('c295');
8804 var ctx = canvas.getContext('2d');
8805
8806 var _thrown_outer = false;
8807 try {
8808
8809 ctx.fillStyle = '#f00';
8810 ctx.fillRect(0, 0, 100, 50)
8811 ctx.fillStyle = '#0f0';
8812 ctx.fillRect(0, 0, 20, 20)
8813
8814 var imgdata = ctx.getImageData(0, 0, 100, 50);
8815
8816 ctx.fillStyle = '#0f0';
8817 ctx.fillRect(0, 0, 100, 50)
8818 ctx.fillStyle = '#f00';
8819 ctx.fillRect(40, 20, 20, 20)
8820 ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20);
8821
8822 isPixel(ctx, 50,25, 0,255,0,255, 2);
8823 isPixel(ctx, 35,25, 0,255,0,255, 2);
8824 isPixel(ctx, 65,25, 0,255,0,255, 2);
8825 isPixel(ctx, 50,15, 0,255,0,255, 2);
8826 isPixel(ctx, 50,45, 0,255,0,255, 2);
8827
8828 } catch (e) {
8829 _thrown_outer = true;
8830 }
8831 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8832
8833
8834 }
8835 </script>
8836
8837 <!-- [[[ test_2d.imageData.put.dirty.rect2.html ]]] -->
8838
8839 <p>Canvas test: 2d.imageData.put.dirty.rect2</p>
8840 <!-- Testing: putImageData() only modifies areas inside the dirty rectangle, using x and y -->
8841 <canvas id="c296" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8842 <script>
8843
8844
8845 function test_2d_imageData_put_dirty_rect2() {
8846
8847 var canvas = document.getElementById('c296');
8848 var ctx = canvas.getContext('2d');
8849
8850 var _thrown_outer = false;
8851 try {
8852
8853 ctx.fillStyle = '#f00';
8854 ctx.fillRect(0, 0, 100, 50)
8855 ctx.fillStyle = '#0f0';
8856 ctx.fillRect(60, 30, 20, 20)
8857
8858 var imgdata = ctx.getImageData(0, 0, 100, 50);
8859
8860 ctx.fillStyle = '#0f0';
8861 ctx.fillRect(0, 0, 100, 50)
8862 ctx.fillStyle = '#f00';
8863 ctx.fillRect(40, 20, 20, 20)
8864 ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20);
8865
8866 isPixel(ctx, 50,25, 0,255,0,255, 2);
8867 isPixel(ctx, 35,25, 0,255,0,255, 2);
8868 isPixel(ctx, 65,25, 0,255,0,255, 2);
8869 isPixel(ctx, 50,15, 0,255,0,255, 2);
8870 isPixel(ctx, 50,45, 0,255,0,255, 2);
8871
8872 } catch (e) {
8873 _thrown_outer = true;
8874 }
8875 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8876
8877
8878 }
8879 </script>
8880
8881 <!-- [[[ test_2d.imageData.put.dirty.zero.html ]]] -->
8882
8883 <p>Canvas test: 2d.imageData.put.dirty.zero</p>
8884 <!-- Testing: putImageData() with zero-sized dirty rectangle puts nothing -->
8885 <canvas id="c297" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8886 <script>
8887
8888
8889
8890 function test_2d_imageData_put_dirty_zero() {
8891
8892 var canvas = document.getElementById('c297');
8893 var ctx = canvas.getContext('2d');
8894
8895 ctx.fillStyle = '#f00';
8896 ctx.fillRect(0, 0, 100, 50)
8897 var imgdata = ctx.getImageData(0, 0, 100, 50);
8898 ctx.fillStyle = '#0f0';
8899 ctx.fillRect(0, 0, 100, 50)
8900 ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0);
8901 isPixel(ctx, 50,25, 0,255,0,255, 2);
8902
8903
8904 }
8905 </script>
8906
8907 <!-- [[[ test_2d.imageData.put.modified.html ]]] -->
8908
8909 <p>Canvas test: 2d.imageData.put.modified</p>
8910 <!-- Testing: putImageData() puts modified image data correctly -->
8911 <canvas id="c298" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8912 <script>
8913
8914
8915 function test_2d_imageData_put_modified() {
8916
8917 var canvas = document.getElementById('c298');
8918 var ctx = canvas.getContext('2d');
8919
8920 ctx.fillStyle = '#0f0';
8921 ctx.fillRect(0, 0, 100, 50)
8922 ctx.fillStyle = '#f00';
8923 ctx.fillRect(45, 20, 10, 10)
8924 var imgdata = ctx.getImageData(45, 20, 10, 10);
8925 for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4)
8926 {
8927 imgdata.data[i] = 0;
8928 imgdata.data[i+1] = 255;
8929 }
8930 ctx.putImageData(imgdata, 45, 20);
8931 isPixel(ctx, 50,25, 0,255,0,255, 2);
8932
8933
8934 }
8935 </script>
8936
8937 <!-- [[[ test_2d.imageData.put.nonfinite.html ]]] -->
8938
8939 <p>Canvas test: 2d.imageData.put.nonfinite</p>
8940 <!-- Testing: putImageData() throws NOT_SUPPORTED_ERR if arguments are not finite -->
8941 <canvas id="c299" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8942 <script>
8943
8944 function test_2d_imageData_put_nonfinite() {
8945
8946 var canvas = document.getElementById('c299');
8947 var ctx = canvas.getContext('2d');
8948
8949 var imgdata = ctx.getImageData(0, 0, 10, 10);
8950 var _thrown = undefined; try {
8951 ctx.putImageData(imgdata, Infinity, 10);
8952 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8953 var _thrown = undefined; try {
8954 ctx.putImageData(imgdata, -Infinity, 10);
8955 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8956 var _thrown = undefined; try {
8957 ctx.putImageData(imgdata, NaN, 10);
8958 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8959 var _thrown = undefined; try {
8960 ctx.putImageData(imgdata, 10, Infinity);
8961 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8962 var _thrown = undefined; try {
8963 ctx.putImageData(imgdata, 10, -Infinity);
8964 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8965 var _thrown = undefined; try {
8966 ctx.putImageData(imgdata, 10, NaN);
8967 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8968 var _thrown = undefined; try {
8969 ctx.putImageData(imgdata, Infinity, Infinity);
8970 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8971 var _thrown = undefined; try {
8972 ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, 10);
8973 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8974 var _thrown = undefined; try {
8975 ctx.putImageData(imgdata, -Infinity, 10, 10, 10, 10, 10);
8976 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8977 var _thrown = undefined; try {
8978 ctx.putImageData(imgdata, NaN, 10, 10, 10, 10, 10);
8979 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8980 var _thrown = undefined; try {
8981 ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, 10);
8982 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8983 var _thrown = undefined; try {
8984 ctx.putImageData(imgdata, 10, -Infinity, 10, 10, 10, 10);
8985 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8986 var _thrown = undefined; try {
8987 ctx.putImageData(imgdata, 10, NaN, 10, 10, 10, 10);
8988 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8989 var _thrown = undefined; try {
8990 ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, 10);
8991 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8992 var _thrown = undefined; try {
8993 ctx.putImageData(imgdata, 10, 10, -Infinity, 10, 10, 10);
8994 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8995 var _thrown = undefined; try {
8996 ctx.putImageData(imgdata, 10, 10, NaN, 10, 10, 10);
8997 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8998 var _thrown = undefined; try {
8999 ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, 10);
9000 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9001 var _thrown = undefined; try {
9002 ctx.putImageData(imgdata, 10, 10, 10, -Infinity, 10, 10);
9003 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9004 var _thrown = undefined; try {
9005 ctx.putImageData(imgdata, 10, 10, 10, NaN, 10, 10);
9006 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9007 var _thrown = undefined; try {
9008 ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, 10);
9009 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9010 var _thrown = undefined; try {
9011 ctx.putImageData(imgdata, 10, 10, 10, 10, -Infinity, 10);
9012 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9013 var _thrown = undefined; try {
9014 ctx.putImageData(imgdata, 10, 10, 10, 10, NaN, 10);
9015 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9016 var _thrown = undefined; try {
9017 ctx.putImageData(imgdata, 10, 10, 10, 10, 10, Infinity);
9018 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9019 var _thrown = undefined; try {
9020 ctx.putImageData(imgdata, 10, 10, 10, 10, 10, -Infinity);
9021 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9022 var _thrown = undefined; try {
9023 ctx.putImageData(imgdata, 10, 10, 10, 10, 10, NaN);
9024 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9025 var _thrown = undefined; try {
9026 ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, 10);
9027 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9028 var _thrown = undefined; try {
9029 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, 10);
9030 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9031 var _thrown = undefined; try {
9032 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, 10);
9033 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9034 var _thrown = undefined; try {
9035 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, 10);
9036 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9037 var _thrown = undefined; try {
9038 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
9039 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9040 var _thrown = undefined; try {
9041 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, Infinity);
9042 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9043 var _thrown = undefined; try {
9044 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, 10);
9045 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9046 var _thrown = undefined; try {
9047 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, Infinity);
9048 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9049 var _thrown = undefined; try {
9050 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, Infinity);
9051 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9052 var _thrown = undefined; try {
9053 ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, 10);
9054 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9055 var _thrown = undefined; try {
9056 ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, 10);
9057 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9058 var _thrown = undefined; try {
9059 ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, Infinity);
9060 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9061 var _thrown = undefined; try {
9062 ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, Infinity);
9063 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9064 var _thrown = undefined; try {
9065 ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, 10);
9066 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9067 var _thrown = undefined; try {
9068 ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, Infinity);
9069 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9070 var _thrown = undefined; try {
9071 ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, Infinity);
9072 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9073 var _thrown = undefined; try {
9074 ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, 10);
9075 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9076 var _thrown = undefined; try {
9077 ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, 10);
9078 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9079 var _thrown = undefined; try {
9080 ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, 10);
9081 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9082 var _thrown = undefined; try {
9083 ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, Infinity);
9084 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9085 var _thrown = undefined; try {
9086 ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, Infinity);
9087 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9088 var _thrown = undefined; try {
9089 ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, 10);
9090 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9091 var _thrown = undefined; try {
9092 ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, Infinity);
9093 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9094 var _thrown = undefined; try {
9095 ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, Infinity);
9096 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9097 var _thrown = undefined; try {
9098 ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, 10);
9099 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9100 var _thrown = undefined; try {
9101 ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, 10);
9102 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9103 var _thrown = undefined; try {
9104 ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, Infinity);
9105 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9106 var _thrown = undefined; try {
9107 ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, Infinity);
9108 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9109 var _thrown = undefined; try {
9110 ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, 10);
9111 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9112 var _thrown = undefined; try {
9113 ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, Infinity);
9114 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9115 var _thrown = undefined; try {
9116 ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, Infinity);
9117 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9118 var _thrown = undefined; try {
9119 ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, 10);
9120 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9121 var _thrown = undefined; try {
9122 ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, 10);
9123 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9124 var _thrown = undefined; try {
9125 ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, 10);
9126 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9127 var _thrown = undefined; try {
9128 ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, Infinity);
9129 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9130 var _thrown = undefined; try {
9131 ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, Infinity);
9132 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9133 var _thrown = undefined; try {
9134 ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, 10);
9135 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9136 var _thrown = undefined; try {
9137 ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, Infinity);
9138 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9139 var _thrown = undefined; try {
9140 ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, Infinity);
9141 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9142 var _thrown = undefined; try {
9143 ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, 10);
9144 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9145 var _thrown = undefined; try {
9146 ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, 10);
9147 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9148 var _thrown = undefined; try {
9149 ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, Infinity);
9150 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9151 var _thrown = undefined; try {
9152 ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, Infinity);
9153 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9154 var _thrown = undefined; try {
9155 ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, 10);
9156 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9157 var _thrown = undefined; try {
9158 ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, Infinity);
9159 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9160 var _thrown = undefined; try {
9161 ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, Infinity);
9162 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9163 var _thrown = undefined; try {
9164 ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, 10);
9165 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9166 var _thrown = undefined; try {
9167 ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, 10);
9168 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9169 var _thrown = undefined; try {
9170 ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, Infinity);
9171 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9172 var _thrown = undefined; try {
9173 ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, Infinity);
9174 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9175 var _thrown = undefined; try {
9176 ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, 10);
9177 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9178 var _thrown = undefined; try {
9179 ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, Infinity);
9180 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9181 var _thrown = undefined; try {
9182 ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, Infinity);
9183 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9184 var _thrown = undefined; try {
9185 ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, 10);
9186 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9187 var _thrown = undefined; try {
9188 ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, Infinity);
9189 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9190 var _thrown = undefined; try {
9191 ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, Infinity);
9192 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9193 var _thrown = undefined; try {
9194 ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, Infinity);
9195 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9196
9197
9198 }
9199 </script>
9200
9201 <!-- [[[ test_2d.imageData.put.null.html ]]] -->
9202
9203 <p>Canvas test: 2d.imageData.put.null - bug 421715</p>
9204 <!-- Testing: putImageData() with null imagedata throws TYPE_MISMATCH_ERR -->
9205 <canvas id="c300" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9206 <script>
9207
9208 function test_2d_imageData_put_null() {
9209
9210 var canvas = document.getElementById('c300');
9211 var ctx = canvas.getContext('2d');
9212
9213 var _thrown = undefined; try {
9214 ctx.putImageData(null, 0, 0);
9215 } catch (e) { _thrown = e };
9216 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
9217
9218 }
9219 </script>
9220
9221 <!-- [[[ test_2d.imageData.put.path.html ]]] -->
9222
9223 <p>Canvas test: 2d.imageData.put.path</p>
9224 <!-- Testing: putImageData() does not affect the current path -->
9225 <canvas id="c301" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9226 <script>
9227
9228
9229 function test_2d_imageData_put_path() {
9230
9231 var canvas = document.getElementById('c301');
9232 var ctx = canvas.getContext('2d');
9233
9234 ctx.fillStyle = '#f00';
9235 ctx.fillRect(0, 0, 100, 50)
9236 ctx.rect(0, 0, 100, 50);
9237 var imgdata = ctx.getImageData(0, 0, 100, 50);
9238 ctx.putImageData(imgdata, 0, 0);
9239 ctx.fillStyle = '#0f0';
9240 ctx.fill();
9241 isPixel(ctx, 50,25, 0,255,0,255, 2);
9242
9243
9244 }
9245 </script>
9246
9247 <!-- [[[ test_2d.imageData.put.unaffected.html ]]] -->
9248
9249 <p>Canvas test: 2d.imageData.put.unaffected</p>
9250 <!-- Testing: putImageData() is not affected by context state -->
9251 <canvas id="c302" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9252 <script>
9253
9254
9255 function test_2d_imageData_put_unaffected() {
9256
9257 var canvas = document.getElementById('c302');
9258 var ctx = canvas.getContext('2d');
9259
9260 ctx.fillStyle = '#0f0';
9261 ctx.fillRect(0, 0, 100, 50)
9262 var imgdata = ctx.getImageData(0, 0, 100, 50);
9263 ctx.fillStyle = '#f00';
9264 ctx.fillRect(0, 0, 100, 50)
9265 ctx.globalAlpha = 0.1;
9266 ctx.globalCompositeOperation = 'destination-atop';
9267 ctx.shadowColor = '#f00';
9268 ctx.translate(100, 50);
9269 ctx.scale(0.1, 0.1);
9270 ctx.putImageData(imgdata, 0, 0);
9271 isPixel(ctx, 50,25, 0,255,0,255, 2);
9272
9273
9274 }
9275 </script>
9276
9277 <!-- [[[ test_2d.imageData.put.unchanged.html ]]] -->
9278
9279 <p>Canvas test: 2d.imageData.put.unchanged</p>
9280 <!-- Testing: putImageData(getImageData(...), ...) has no effect -->
9281 <canvas id="c303" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9282 <script>
9283
9284 function test_2d_imageData_put_unchanged() {
9285
9286 var canvas = document.getElementById('c303');
9287 var ctx = canvas.getContext('2d');
9288
9289 var i = 0;
9290 for (var y = 0; y < 16; ++y) {
9291 for (var x = 0; x < 16; ++x, ++i) {
9292 ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')';
9293 ctx.fillRect(x, y, 1, 1);
9294 }
9295 }
9296 var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
9297 var olddata = [];
9298 for (var i = 0; i < imgdata1.data.length; ++i)
9299 olddata[i] = imgdata1.data[i];
9300
9301 ctx.putImageData(imgdata1, 0.1, 0.2);
9302
9303 var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
9304 for (var i = 0; i < imgdata2.data.length; ++i) {
9305 ok(olddata[i] === imgdata2.data[i], "olddata[\""+(i)+"\"] === imgdata2.data[\""+(i)+"\"]");
9306 }
9307
9308
9309 }
9310 </script>
9311
9312 <!-- [[[ test_2d.imageData.put.wrongtype.html ]]] -->
9313
9314 <p>Canvas test: 2d.imageData.put.wrongtype</p>
9315 <!-- Testing: putImageData() does not accept non-ImageData objects -->
9316 <canvas id="c304" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9317 <script>
9318
9319 function test_2d_imageData_put_wrongtype() {
9320
9321 var canvas = document.getElementById('c304');
9322 var ctx = canvas.getContext('2d');
9323
9324 var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] };
9325 var _thrown = undefined; try {
9326 ctx.putImageData(imgdata, 0, 0);
9327 } catch (e) { _thrown = e };
9328 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
9329
9330 var _thrown = undefined; try {
9331 ctx.putImageData("cheese", 0, 0);
9332 } catch (e) { _thrown = e };
9333 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
9334
9335 var _thrown = undefined; try {
9336 ctx.putImageData(42, 0, 0);
9337 } catch (e) { _thrown = e };
9338 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
9339 }
9340 </script>
9341
9342 <!-- [[[ test_2d.line.cap.butt.html ]]] -->
9343
9344 <p>Canvas test: 2d.line.cap.butt</p>
9345 <!-- Testing: lineCap 'butt' is rendered correctly -->
9346 <canvas id="c305" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9347 <script>
9348
9349
9350 function test_2d_line_cap_butt() {
9351
9352 var canvas = document.getElementById('c305');
9353 var ctx = canvas.getContext('2d');
9354
9355 ctx.fillStyle = '#0f0';
9356 ctx.fillRect(0, 0, 100, 50);
9357
9358 ctx.lineCap = 'butt';
9359 ctx.lineWidth = 20;
9360
9361 ctx.fillStyle = '#f00';
9362 ctx.strokeStyle = '#0f0';
9363 ctx.fillRect(15, 15, 20, 20);
9364 ctx.beginPath();
9365 ctx.moveTo(25, 15);
9366 ctx.lineTo(25, 35);
9367 ctx.stroke();
9368
9369 ctx.fillStyle = '#0f0';
9370 ctx.strokeStyle = '#f00';
9371 ctx.beginPath();
9372 ctx.moveTo(75, 15);
9373 ctx.lineTo(75, 35);
9374 ctx.stroke();
9375 ctx.fillRect(65, 15, 20, 20);
9376
9377 isPixel(ctx, 25,14, 0,255,0,255, 0);
9378 isPixel(ctx, 25,15, 0,255,0,255, 0);
9379 isPixel(ctx, 25,16, 0,255,0,255, 0);
9380 isPixel(ctx, 25,34, 0,255,0,255, 0);
9381 isPixel(ctx, 25,35, 0,255,0,255, 0);
9382 isPixel(ctx, 25,36, 0,255,0,255, 0);
9383
9384 isPixel(ctx, 75,14, 0,255,0,255, 0);
9385 isPixel(ctx, 75,15, 0,255,0,255, 0);
9386 isPixel(ctx, 75,16, 0,255,0,255, 0);
9387 isPixel(ctx, 75,34, 0,255,0,255, 0);
9388 isPixel(ctx, 75,35, 0,255,0,255, 0);
9389 isPixel(ctx, 75,36, 0,255,0,255, 0);
9390
9391
9392 }
9393 </script>
9394
9395 <!-- [[[ test_2d.line.cap.closed.html ]]] -->
9396
9397 <p>Canvas test: 2d.line.cap.closed</p>
9398 <!-- Testing: Line caps are not drawn at the corners of an unclosed rectangle -->
9399 <canvas id="c306" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9400 <script>
9401
9402
9403 function test_2d_line_cap_closed() {
9404
9405 var canvas = document.getElementById('c306');
9406 var ctx = canvas.getContext('2d');
9407
9408 ctx.fillStyle = '#0f0';
9409 ctx.strokeStyle = '#f00';
9410 ctx.fillRect(0, 0, 100, 50);
9411
9412 ctx.lineJoin = 'bevel';
9413 ctx.lineCap = 'square';
9414 ctx.lineWidth = 400;
9415
9416 ctx.beginPath();
9417 ctx.moveTo(200, 200);
9418 ctx.lineTo(200, 1000);
9419 ctx.lineTo(1000, 1000);
9420 ctx.lineTo(1000, 200);
9421 ctx.closePath();
9422 ctx.stroke();
9423
9424 isPixel(ctx, 1,1, 0,255,0,255, 0);
9425 isPixel(ctx, 48,1, 0,255,0,255, 0);
9426 isPixel(ctx, 48,48, 0,255,0,255, 0);
9427 isPixel(ctx, 1,48, 0,255,0,255, 0);
9428
9429
9430 }
9431 </script>
9432
9433 <!-- [[[ test_2d.line.cap.invalid.html ]]] -->
9434
9435 <p>Canvas test: 2d.line.cap.invalid - bug 401788</p>
9436 <!-- Testing: Setting lineCap to invalid values is ignored -->
9437 <canvas id="c307" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9438 <script>
9439
9440 function test_2d_line_cap_invalid() {
9441
9442 var canvas = document.getElementById('c307');
9443 var ctx = canvas.getContext('2d');
9444
9445 var _thrown_outer = false;
9446 try {
9447
9448 ctx.lineCap = 'butt'
9449 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9450
9451 ctx.lineCap = 'butt';
9452 ctx.lineCap = 'invalid';
9453 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9454
9455 ctx.lineCap = 'butt';
9456 ctx.lineCap = 'ROUND';
9457 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9458
9459 ctx.lineCap = 'butt';
9460 ctx.lineCap = 'round\0';
9461 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9462
9463 ctx.lineCap = 'butt';
9464 ctx.lineCap = 'round ';
9465 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9466
9467 ctx.lineCap = 'butt';
9468 ctx.lineCap = "";
9469 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9470
9471 ctx.lineCap = 'butt';
9472 ctx.lineCap = 'bevel';
9473 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9474
9475 } catch (e) {
9476 _thrown_outer = true;
9477 }
9478 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
9479
9480
9481 }
9482 </script>
9483
9484 <!-- [[[ test_2d.line.cap.open.html ]]] -->
9485
9486 <p>Canvas test: 2d.line.cap.open</p>
9487 <!-- Testing: Line caps are drawn at the corners of an unclosed rectangle -->
9488 <canvas id="c308" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9489 <script>
9490
9491
9492 function test_2d_line_cap_open() {
9493
9494 var canvas = document.getElementById('c308');
9495 var ctx = canvas.getContext('2d');
9496
9497 ctx.fillStyle = '#f00';
9498 ctx.strokeStyle = '#0f0';
9499 ctx.fillRect(0, 0, 100, 50);
9500
9501 ctx.lineJoin = 'bevel';
9502 ctx.lineCap = 'square';
9503 ctx.lineWidth = 400;
9504
9505 ctx.beginPath();
9506 ctx.moveTo(200, 200);
9507 ctx.lineTo(200, 1000);
9508 ctx.lineTo(1000, 1000);
9509 ctx.lineTo(1000, 200);
9510 ctx.lineTo(200, 200);
9511 ctx.stroke();
9512
9513 isPixel(ctx, 1,1, 0,255,0,255, 0);
9514 isPixel(ctx, 48,1, 0,255,0,255, 0);
9515 isPixel(ctx, 48,48, 0,255,0,255, 0);
9516 isPixel(ctx, 1,48, 0,255,0,255, 0);
9517
9518
9519 }
9520 </script>
9521
9522 <!-- [[[ test_2d.line.cap.round.html ]]] -->
9523
9524 <p>Canvas test: 2d.line.cap.round</p>
9525 <!-- Testing: lineCap 'round' is rendered correctly -->
9526 <canvas id="c309" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9527 <script>
9528
9529
9530 function test_2d_line_cap_round() {
9531
9532 var canvas = document.getElementById('c309');
9533 var ctx = canvas.getContext('2d');
9534
9535 ctx.fillStyle = '#0f0';
9536 ctx.fillRect(0, 0, 100, 50);
9537
9538 var tol = 1; // tolerance to avoid antialiasing artifacts
9539
9540 ctx.lineCap = 'round';
9541 ctx.lineWidth = 20;
9542
9543
9544 ctx.fillStyle = '#f00';
9545 ctx.strokeStyle = '#0f0';
9546
9547 ctx.beginPath();
9548 ctx.moveTo(35-tol, 15);
9549 ctx.arc(25, 15, 10-tol, 0, Math.PI, true);
9550 ctx.arc(25, 35, 10-tol, Math.PI, 0, true);
9551 ctx.fill();
9552
9553 ctx.beginPath();
9554 ctx.moveTo(25, 15);
9555 ctx.lineTo(25, 35);
9556 ctx.stroke();
9557
9558
9559 ctx.fillStyle = '#0f0';
9560 ctx.strokeStyle = '#f00';
9561
9562 ctx.beginPath();
9563 ctx.moveTo(75, 15);
9564 ctx.lineTo(75, 35);
9565 ctx.stroke();
9566
9567 ctx.beginPath();
9568 ctx.moveTo(85+tol, 15);
9569 ctx.arc(75, 15, 10+tol, 0, Math.PI, true);
9570 ctx.arc(75, 35, 10+tol, Math.PI, 0, true);
9571 ctx.fill();
9572
9573 isPixel(ctx, 17,6, 0,255,0,255, 0);
9574 isPixel(ctx, 25,6, 0,255,0,255, 0);
9575 isPixel(ctx, 32,6, 0,255,0,255, 0);
9576 isPixel(ctx, 17,43, 0,255,0,255, 0);
9577 isPixel(ctx, 25,43, 0,255,0,255, 0);
9578 isPixel(ctx, 32,43, 0,255,0,255, 0);
9579
9580 isPixel(ctx, 67,6, 0,255,0,255, 0);
9581 isPixel(ctx, 75,6, 0,255,0,255, 0);
9582 isPixel(ctx, 82,6, 0,255,0,255, 0);
9583 isPixel(ctx, 67,43, 0,255,0,255, 0);
9584 isPixel(ctx, 75,43, 0,255,0,255, 0);
9585 isPixel(ctx, 82,43, 0,255,0,255, 0);
9586
9587
9588 }
9589 </script>
9590
9591 <!-- [[[ test_2d.line.cap.square.html ]]] -->
9592
9593 <p>Canvas test: 2d.line.cap.square</p>
9594 <!-- Testing: lineCap 'square' is rendered correctly -->
9595 <canvas id="c310" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9596 <script>
9597
9598
9599 function test_2d_line_cap_square() {
9600
9601 var canvas = document.getElementById('c310');
9602 var ctx = canvas.getContext('2d');
9603
9604 ctx.fillStyle = '#0f0';
9605 ctx.fillRect(0, 0, 100, 50);
9606
9607 ctx.lineCap = 'square';
9608 ctx.lineWidth = 20;
9609
9610 ctx.fillStyle = '#f00';
9611 ctx.strokeStyle = '#0f0';
9612 ctx.fillRect(15, 5, 20, 40);
9613 ctx.beginPath();
9614 ctx.moveTo(25, 15);
9615 ctx.lineTo(25, 35);
9616 ctx.stroke();
9617
9618 ctx.fillStyle = '#0f0';
9619 ctx.strokeStyle = '#f00';
9620 ctx.beginPath();
9621 ctx.moveTo(75, 15);
9622 ctx.lineTo(75, 35);
9623 ctx.stroke();
9624 ctx.fillRect(65, 5, 20, 40);
9625
9626 isPixel(ctx, 25,4, 0,255,0,255, 0);
9627 isPixel(ctx, 25,5, 0,255,0,255, 0);
9628 isPixel(ctx, 25,6, 0,255,0,255, 0);
9629 isPixel(ctx, 25,44, 0,255,0,255, 0);
9630 isPixel(ctx, 25,45, 0,255,0,255, 0);
9631 isPixel(ctx, 25,46, 0,255,0,255, 0);
9632
9633 isPixel(ctx, 75,4, 0,255,0,255, 0);
9634 isPixel(ctx, 75,5, 0,255,0,255, 0);
9635 isPixel(ctx, 75,6, 0,255,0,255, 0);
9636 isPixel(ctx, 75,44, 0,255,0,255, 0);
9637 isPixel(ctx, 75,45, 0,255,0,255, 0);
9638 isPixel(ctx, 75,46, 0,255,0,255, 0);
9639
9640
9641 }
9642 </script>
9643
9644 <!-- [[[ test_2d.line.cross.html ]]] -->
9645
9646 <p>Canvas test: 2d.line.cross</p>
9647 <canvas id="c311" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9648 <script>
9649
9650
9651 function test_2d_line_cross() {
9652
9653 var canvas = document.getElementById('c311');
9654 var ctx = canvas.getContext('2d');
9655
9656 ctx.fillStyle = '#0f0';
9657 ctx.fillRect(0, 0, 100, 50);
9658
9659 ctx.lineWidth = 200;
9660 ctx.lineJoin = 'bevel';
9661
9662 ctx.strokeStyle = '#f00';
9663 ctx.beginPath();
9664 ctx.moveTo(110, 50);
9665 ctx.lineTo(110, 60);
9666 ctx.lineTo(100, 60);
9667 ctx.stroke();
9668
9669 isPixel(ctx, 1,1, 0,255,0,255, 0);
9670 isPixel(ctx, 48,1, 0,255,0,255, 0);
9671 isPixel(ctx, 48,48, 0,255,0,255, 0);
9672 isPixel(ctx, 1,48, 0,255,0,255, 0);
9673
9674
9675 }
9676 </script>
9677
9678 <!-- [[[ test_2d.line.defaults.html ]]] -->
9679
9680 <p>Canvas test: 2d.line.defaults</p>
9681 <canvas id="c312" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9682 <script>
9683
9684 function test_2d_line_defaults() {
9685
9686 var canvas = document.getElementById('c312');
9687 var ctx = canvas.getContext('2d');
9688
9689 ok(ctx.lineWidth === 1, "ctx.lineWidth === 1");
9690 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9691 ok(ctx.lineJoin === 'miter', "ctx.lineJoin === 'miter'");
9692 ok(ctx.miterLimit === 10, "ctx.miterLimit === 10");
9693
9694
9695 }
9696 </script>
9697
9698 <!-- [[[ test_2d.line.join.bevel.html ]]] -->
9699
9700 <p>Canvas test: 2d.line.join.bevel</p>
9701 <!-- Testing: lineJoin 'bevel' is rendered correctly -->
9702 <canvas id="c313" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9703 <script>
9704
9705
9706 function test_2d_line_join_bevel() {
9707
9708 var canvas = document.getElementById('c313');
9709 var ctx = canvas.getContext('2d');
9710
9711 ctx.fillStyle = '#0f0';
9712 ctx.fillRect(0, 0, 100, 50);
9713
9714 var tol = 1; // tolerance to avoid antialiasing artifacts
9715
9716 ctx.lineJoin = 'bevel';
9717 ctx.lineWidth = 20;
9718
9719 ctx.fillStyle = '#f00';
9720 ctx.strokeStyle = '#0f0';
9721
9722 ctx.fillRect(10, 10, 20, 20);
9723 ctx.fillRect(20, 20, 20, 20);
9724 ctx.beginPath();
9725 ctx.moveTo(30, 20);
9726 ctx.lineTo(40-tol, 20);
9727 ctx.lineTo(30, 10+tol);
9728 ctx.fill();
9729
9730 ctx.beginPath();
9731 ctx.moveTo(10, 20);
9732 ctx.lineTo(30, 20);
9733 ctx.lineTo(30, 40);
9734 ctx.stroke();
9735
9736
9737 ctx.fillStyle = '#0f0';
9738 ctx.strokeStyle = '#f00';
9739
9740 ctx.beginPath();
9741 ctx.moveTo(60, 20);
9742 ctx.lineTo(80, 20);
9743 ctx.lineTo(80, 40);
9744 ctx.stroke();
9745
9746 ctx.fillRect(60, 10, 20, 20);
9747 ctx.fillRect(70, 20, 20, 20);
9748 ctx.beginPath();
9749 ctx.moveTo(80, 20);
9750 ctx.lineTo(90+tol, 20);
9751 ctx.lineTo(80, 10-tol);
9752 ctx.fill();
9753
9754 isPixel(ctx, 34,16, 0,255,0,255, 0);
9755 isPixel(ctx, 34,15, 0,255,0,255, 0);
9756 isPixel(ctx, 35,15, 0,255,0,255, 0);
9757 isPixel(ctx, 36,15, 0,255,0,255, 0);
9758 isPixel(ctx, 36,14, 0,255,0,255, 0);
9759
9760 isPixel(ctx, 84,16, 0,255,0,255, 0);
9761 isPixel(ctx, 84,15, 0,255,0,255, 0);
9762 isPixel(ctx, 85,15, 0,255,0,255, 0);
9763 isPixel(ctx, 86,15, 0,255,0,255, 0);
9764 isPixel(ctx, 86,14, 0,255,0,255, 0);
9765
9766
9767 }
9768 </script>
9769
9770 <!-- [[[ test_2d.line.join.closed.html ]]] -->
9771
9772 <p>Canvas test: 2d.line.join.closed</p>
9773 <!-- Testing: Line joins are drawn at the corner of a closed rectangle -->
9774 <canvas id="c314" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9775 <script>
9776
9777
9778 function test_2d_line_join_closed() {
9779
9780 var canvas = document.getElementById('c314');
9781 var ctx = canvas.getContext('2d');
9782
9783 ctx.fillStyle = '#f00';
9784 ctx.strokeStyle = '#0f0';
9785 ctx.fillRect(0, 0, 100, 50);
9786
9787 ctx.lineJoin = 'miter';
9788 ctx.lineWidth = 200;
9789
9790 ctx.beginPath();
9791 ctx.moveTo(100, 50);
9792 ctx.lineTo(100, 1000);
9793 ctx.lineTo(1000, 1000);
9794 ctx.lineTo(1000, 50);
9795 ctx.closePath();
9796 ctx.stroke();
9797
9798 isPixel(ctx, 1,1, 0,255,0,255, 0);
9799 isPixel(ctx, 48,1, 0,255,0,255, 0);
9800 isPixel(ctx, 48,48, 0,255,0,255, 0);
9801 isPixel(ctx, 1,48, 0,255,0,255, 0);
9802
9803
9804 }
9805 </script>
9806
9807 <!-- [[[ test_2d.line.join.invalid.html ]]] -->
9808
9809 <p>Canvas test: 2d.line.join.invalid - bug 401788</p>
9810 <!-- Testing: Setting lineJoin to invalid values is ignored -->
9811 <canvas id="c315" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9812 <script>
9813
9814 function test_2d_line_join_invalid() {
9815
9816 var canvas = document.getElementById('c315');
9817 var ctx = canvas.getContext('2d');
9818
9819 var _thrown_outer = false;
9820 try {
9821
9822 ctx.lineJoin = 'bevel'
9823 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9824
9825 ctx.lineJoin = 'bevel';
9826 ctx.lineJoin = 'invalid';
9827 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9828
9829 ctx.lineJoin = 'bevel';
9830 ctx.lineJoin = 'ROUND';
9831 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9832
9833 ctx.lineJoin = 'bevel';
9834 ctx.lineJoin = 'round\0';
9835 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9836
9837 ctx.lineJoin = 'bevel';
9838 ctx.lineJoin = 'round ';
9839 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9840
9841 ctx.lineJoin = 'bevel';
9842 ctx.lineJoin = "";
9843 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9844
9845 ctx.lineJoin = 'bevel';
9846 ctx.lineJoin = 'butt';
9847 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9848
9849 } catch (e) {
9850 _thrown_outer = true;
9851 }
9852 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
9853
9854
9855 }
9856 </script>
9857
9858 <!-- [[[ test_2d.line.join.miter.html ]]] -->
9859
9860 <p>Canvas test: 2d.line.join.miter</p>
9861 <!-- Testing: lineJoin 'miter' is rendered correctly -->
9862 <canvas id="c316" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9863 <script>
9864
9865
9866 function test_2d_line_join_miter() {
9867
9868 var canvas = document.getElementById('c316');
9869 var ctx = canvas.getContext('2d');
9870
9871 ctx.fillStyle = '#0f0';
9872 ctx.fillRect(0, 0, 100, 50);
9873
9874 ctx.lineJoin = 'miter';
9875 ctx.lineWidth = 20;
9876
9877 ctx.fillStyle = '#f00';
9878 ctx.strokeStyle = '#0f0';
9879
9880 ctx.fillStyle = '#f00';
9881 ctx.strokeStyle = '#0f0';
9882
9883 ctx.fillRect(10, 10, 30, 20);
9884 ctx.fillRect(20, 10, 20, 30);
9885
9886 ctx.beginPath();
9887 ctx.moveTo(10, 20);
9888 ctx.lineTo(30, 20);
9889 ctx.lineTo(30, 40);
9890 ctx.stroke();
9891
9892
9893 ctx.fillStyle = '#0f0';
9894 ctx.strokeStyle = '#f00';
9895
9896 ctx.beginPath();
9897 ctx.moveTo(60, 20);
9898 ctx.lineTo(80, 20);
9899 ctx.lineTo(80, 40);
9900 ctx.stroke();
9901
9902 ctx.fillRect(60, 10, 30, 20);
9903 ctx.fillRect(70, 10, 20, 30);
9904
9905 isPixel(ctx, 38,12, 0,255,0,255, 0);
9906 isPixel(ctx, 39,11, 0,255,0,255, 0);
9907 isPixel(ctx, 40,10, 0,255,0,255, 0);
9908 isPixel(ctx, 41,9, 0,255,0,255, 0);
9909 isPixel(ctx, 42,8, 0,255,0,255, 0);
9910
9911 isPixel(ctx, 88,12, 0,255,0,255, 0);
9912 isPixel(ctx, 89,11, 0,255,0,255, 0);
9913 isPixel(ctx, 90,10, 0,255,0,255, 0);
9914 isPixel(ctx, 91,9, 0,255,0,255, 0);
9915 isPixel(ctx, 92,8, 0,255,0,255, 0);
9916
9917
9918 }
9919 </script>
9920
9921 <!-- [[[ test_2d.line.join.open.html ]]] -->
9922
9923 <p>Canvas test: 2d.line.join.open</p>
9924 <!-- Testing: Line joins are not drawn at the corner of an unclosed rectangle -->
9925 <canvas id="c317" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9926 <script>
9927
9928
9929 function test_2d_line_join_open() {
9930
9931 var canvas = document.getElementById('c317');
9932 var ctx = canvas.getContext('2d');
9933
9934 ctx.fillStyle = '#0f0';
9935 ctx.strokeStyle = '#f00';
9936 ctx.fillRect(0, 0, 100, 50);
9937
9938 ctx.lineJoin = 'miter';
9939 ctx.lineWidth = 200;
9940
9941 ctx.beginPath();
9942 ctx.moveTo(100, 50);
9943 ctx.lineTo(100, 1000);
9944 ctx.lineTo(1000, 1000);
9945 ctx.lineTo(1000, 50);
9946 ctx.lineTo(100, 50);
9947 ctx.stroke();
9948
9949 isPixel(ctx, 1,1, 0,255,0,255, 0);
9950 isPixel(ctx, 48,1, 0,255,0,255, 0);
9951 isPixel(ctx, 48,48, 0,255,0,255, 0);
9952 isPixel(ctx, 1,48, 0,255,0,255, 0);
9953
9954
9955 }
9956 </script>
9957
9958 <!-- [[[ test_2d.line.join.parallel.html ]]] -->
9959
9960 <p>Canvas test: 2d.line.join.parallel</p>
9961 <!-- Testing: Line joins are drawn at 180-degree joins -->
9962 <canvas id="c318" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9963 <script>
9964
9965
9966 function test_2d_line_join_parallel() {
9967
9968 var canvas = document.getElementById('c318');
9969 var ctx = canvas.getContext('2d');
9970
9971 ctx.fillStyle = '#f00';
9972 ctx.fillRect(0, 0, 100, 50);
9973
9974 ctx.strokeStyle = '#0f0';
9975 ctx.lineWidth = 300;
9976 ctx.lineJoin = 'round';
9977 ctx.beginPath();
9978 ctx.moveTo(-100, 25);
9979 ctx.lineTo(0, 25);
9980 ctx.lineTo(-100, 25);
9981 ctx.stroke();
9982
9983 isPixel(ctx, 1,1, 0,255,0,255, 0);
9984 isPixel(ctx, 48,1, 0,255,0,255, 0);
9985 isPixel(ctx, 48,48, 0,255,0,255, 0);
9986 isPixel(ctx, 1,48, 0,255,0,255, 0);
9987
9988
9989 }
9990 </script>
9991
9992 <!-- [[[ test_2d.line.join.round.html ]]] -->
9993
9994 <p>Canvas test: 2d.line.join.round</p>
9995 <!-- Testing: lineJoin 'round' is rendered correctly -->
9996 <canvas id="c319" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9997 <script>
9998
9999
10000 function test_2d_line_join_round() {
10001
10002 var canvas = document.getElementById('c319');
10003 var ctx = canvas.getContext('2d');
10004
10005 ctx.fillStyle = '#0f0';
10006 ctx.fillRect(0, 0, 100, 50);
10007
10008 var tol = 1; // tolerance to avoid antialiasing artifacts
10009
10010 ctx.lineJoin = 'round';
10011 ctx.lineWidth = 20;
10012
10013 ctx.fillStyle = '#f00';
10014 ctx.strokeStyle = '#0f0';
10015
10016 ctx.fillRect(10, 10, 20, 20);
10017 ctx.fillRect(20, 20, 20, 20);
10018 ctx.beginPath();
10019 ctx.moveTo(30, 20);
10020 ctx.arc(30, 20, 10-tol, 0, 2*Math.PI, true);
10021 ctx.fill();
10022
10023 ctx.beginPath();
10024 ctx.moveTo(10, 20);
10025 ctx.lineTo(30, 20);
10026 ctx.lineTo(30, 40);
10027 ctx.stroke();
10028
10029
10030 ctx.fillStyle = '#0f0';
10031 ctx.strokeStyle = '#f00';
10032
10033 ctx.beginPath();
10034 ctx.moveTo(60, 20);
10035 ctx.lineTo(80, 20);
10036 ctx.lineTo(80, 40);
10037 ctx.stroke();
10038
10039 ctx.fillRect(60, 10, 20, 20);
10040 ctx.fillRect(70, 20, 20, 20);
10041 ctx.beginPath();
10042 ctx.moveTo(80, 20);
10043 ctx.arc(80, 20, 10+tol, 0, 2*Math.PI, true);
10044 ctx.fill();
10045
10046 isPixel(ctx, 36,14, 0,255,0,255, 0);
10047 isPixel(ctx, 36,13, 0,255,0,255, 0);
10048 isPixel(ctx, 37,13, 0,255,0,255, 0);
10049 isPixel(ctx, 38,13, 0,255,0,255, 0);
10050 isPixel(ctx, 38,12, 0,255,0,255, 0);
10051
10052 isPixel(ctx, 86,14, 0,255,0,255, 0);
10053 isPixel(ctx, 86,13, 0,255,0,255, 0);
10054 isPixel(ctx, 87,13, 0,255,0,255, 0);
10055 isPixel(ctx, 88,13, 0,255,0,255, 0);
10056 isPixel(ctx, 88,12, 0,255,0,255, 0);
10057
10058
10059 }
10060 </script>
10061
10062 <!-- [[[ test_2d.line.miter.acute.html ]]] -->
10063
10064 <p>Canvas test: 2d.line.miter.acute</p>
10065 <!-- Testing: Miter joins are drawn correctly with acute angles -->
10066 <canvas id="c320" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10067 <script>
10068
10069
10070 function test_2d_line_miter_acute() {
10071
10072 var canvas = document.getElementById('c320');
10073 var ctx = canvas.getContext('2d');
10074
10075 ctx.fillStyle = '#f00';
10076 ctx.fillRect(0, 0, 100, 50);
10077
10078 ctx.lineWidth = 200;
10079 ctx.lineJoin = 'miter';
10080
10081 ctx.strokeStyle = '#0f0';
10082 ctx.miterLimit = 2.614;
10083 ctx.beginPath();
10084 ctx.moveTo(100, 1000);
10085 ctx.lineTo(100, 100);
10086 ctx.lineTo(1000, 1000);
10087 ctx.stroke();
10088
10089 ctx.strokeStyle = '#f00';
10090 ctx.miterLimit = 2.613;
10091 ctx.beginPath();
10092 ctx.moveTo(100, 1000);
10093 ctx.lineTo(100, 100);
10094 ctx.lineTo(1000, 1000);
10095 ctx.stroke();
10096
10097 isPixel(ctx, 1,1, 0,255,0,255, 0);
10098 isPixel(ctx, 48,1, 0,255,0,255, 0);
10099 isPixel(ctx, 48,48, 0,255,0,255, 0);
10100 isPixel(ctx, 1,48, 0,255,0,255, 0);
10101
10102
10103 }
10104 </script>
10105
10106 <!-- [[[ test_2d.line.miter.exceeded.html ]]] -->
10107
10108 <p>Canvas test: 2d.line.miter.exceeded</p>
10109 <!-- Testing: Miter joins are not drawn when the miter limit is exceeded -->
10110 <canvas id="c321" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10111 <script>
10112
10113
10114 function test_2d_line_miter_exceeded() {
10115
10116 var canvas = document.getElementById('c321');
10117 var ctx = canvas.getContext('2d');
10118
10119 ctx.fillStyle = '#0f0';
10120 ctx.fillRect(0, 0, 100, 50);
10121
10122 ctx.lineWidth = 400;
10123 ctx.lineJoin = 'miter';
10124
10125 ctx.strokeStyle = '#f00';
10126 ctx.miterLimit = 1.414;
10127 ctx.beginPath();
10128 ctx.moveTo(200, 1000);
10129 ctx.lineTo(200, 200);
10130 ctx.lineTo(1000, 201); // slightly non-right-angle to avoid being a special case
10131 ctx.stroke();
10132
10133 isPixel(ctx, 1,1, 0,255,0,255, 0);
10134 isPixel(ctx, 48,1, 0,255,0,255, 0);
10135 isPixel(ctx, 48,48, 0,255,0,255, 0);
10136 isPixel(ctx, 1,48, 0,255,0,255, 0);
10137
10138
10139 }
10140 </script>
10141
10142 <!-- [[[ test_2d.line.miter.invalid.html ]]] -->
10143
10144 <p>Canvas test: 2d.line.miter.invalid</p>
10145 <!-- Testing: Setting miterLimit to invalid values is ignored -->
10146 <canvas id="c322" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10147 <script>
10148
10149 function test_2d_line_miter_invalid() {
10150
10151 var canvas = document.getElementById('c322');
10152 var ctx = canvas.getContext('2d');
10153
10154 var _thrown_outer = false;
10155 try {
10156
10157 ctx.miterLimit = 1.5;
10158 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10159
10160 ctx.miterLimit = 1.5;
10161 ctx.miterLimit = 0;
10162 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10163
10164 ctx.miterLimit = 1.5;
10165 ctx.miterLimit = -1;
10166 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10167
10168 ctx.miterLimit = 1.5;
10169 ctx.miterLimit = Infinity;
10170 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10171
10172 ctx.miterLimit = 1.5;
10173 ctx.miterLimit = -Infinity;
10174 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10175
10176 ctx.miterLimit = 1.5;
10177 ctx.miterLimit = NaN;
10178 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10179
10180 } catch (e) {
10181 _thrown_outer = true;
10182 }
10183 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
10184
10185
10186 }
10187 </script>
10188
10189 <!-- [[[ test_2d.line.miter.lineedge.html ]]] -->
10190
10191 <p>Canvas test: 2d.line.miter.lineedge - bug 401791</p>
10192 <!-- Testing: Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle -->
10193 <canvas id="c323" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10194 <script>
10195
10196
10197 function test_2d_line_miter_lineedge() {
10198
10199 var canvas = document.getElementById('c323');
10200 var ctx = canvas.getContext('2d');
10201
10202 ctx.fillStyle = '#0f0';
10203 ctx.fillRect(0, 0, 100, 50);
10204
10205 ctx.lineWidth = 200;
10206 ctx.lineJoin = 'miter';
10207
10208 ctx.strokeStyle = '#f00';
10209 ctx.miterLimit = 1.414;
10210 ctx.beginPath();
10211 ctx.strokeRect(100, 25, 200, 0);
10212
10213 isPixel(ctx, 1,1, 0,255,0,255, 0);
10214 isPixel(ctx, 48,1, 0,255,0,255, 0);
10215 isPixel(ctx, 48,48, 0,255,0,255, 0);
10216 isPixel(ctx, 1,48, 0,255,0,255, 0);
10217
10218
10219 }
10220 </script>
10221
10222 <!-- [[[ test_2d.line.miter.obtuse.html ]]] -->
10223
10224 <p>Canvas test: 2d.line.miter.obtuse</p>
10225 <!-- Testing: Miter joins are drawn correctly with obtuse angles -->
10226 <canvas id="c324" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10227 <script>
10228
10229
10230 function test_2d_line_miter_obtuse() {
10231
10232 var canvas = document.getElementById('c324');
10233 var ctx = canvas.getContext('2d');
10234
10235 ctx.fillStyle = '#f00';
10236 ctx.fillRect(0, 0, 100, 50);
10237
10238 var x=800;
10239 var y=300;
10240 ctx.lineWidth = 1600;
10241 ctx.lineJoin = 'miter';
10242
10243 ctx.strokeStyle = '#0f0';
10244 ctx.miterLimit = 1.083;
10245 ctx.beginPath();
10246 ctx.moveTo(800, 10000);
10247 ctx.lineTo(800, 300);
10248 ctx.lineTo(10000, -8900);
10249 ctx.stroke();
10250
10251 ctx.strokeStyle = '#f00';
10252 ctx.miterLimit = 1.082;
10253 ctx.beginPath();
10254 ctx.moveTo(800, 10000);
10255 ctx.lineTo(800, 300);
10256 ctx.lineTo(10000, -8900);
10257 ctx.stroke();
10258
10259 isPixel(ctx, 1,1, 0,255,0,255, 0);
10260 isPixel(ctx, 48,1, 0,255,0,255, 0);
10261 isPixel(ctx, 48,48, 0,255,0,255, 0);
10262 isPixel(ctx, 1,48, 0,255,0,255, 0);
10263
10264
10265 }
10266 </script>
10267
10268 <!-- [[[ test_2d.line.miter.rightangle.html ]]] -->
10269
10270 <p>Canvas test: 2d.line.miter.rightangle - bug 401791</p>
10271 <!-- Testing: Miter joins are not drawn when the miter limit is exceeded, on exact right angles -->
10272 <canvas id="c325" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10273 <script>
10274
10275
10276 function test_2d_line_miter_rightangle() {
10277
10278 var canvas = document.getElementById('c325');
10279 var ctx = canvas.getContext('2d');
10280
10281 ctx.fillStyle = '#0f0';
10282 ctx.fillRect(0, 0, 100, 50);
10283
10284 ctx.lineWidth = 400;
10285 ctx.lineJoin = 'miter';
10286
10287 ctx.strokeStyle = '#f00';
10288 ctx.miterLimit = 1.414;
10289 ctx.beginPath();
10290 ctx.moveTo(200, 1000);
10291 ctx.lineTo(200, 200);
10292 ctx.lineTo(1000, 200);
10293 ctx.stroke();
10294
10295 isPixel(ctx, 1,1, 0,255,0,255, 0);
10296 isPixel(ctx, 48,1, 0,255,0,255, 0);
10297 isPixel(ctx, 48,48, 0,255,0,255, 0);
10298 isPixel(ctx, 1,48, 0,255,0,255, 0);
10299
10300
10301 }
10302 </script>
10303
10304 <!-- [[[ test_2d.line.miter.within.html ]]] -->
10305
10306 <p>Canvas test: 2d.line.miter.within</p>
10307 <!-- Testing: Miter joins are drawn when the miter limit is not quite exceeded -->
10308 <canvas id="c326" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10309 <script>
10310
10311
10312 function test_2d_line_miter_within() {
10313
10314 var canvas = document.getElementById('c326');
10315 var ctx = canvas.getContext('2d');
10316
10317 ctx.fillStyle = '#f00';
10318 ctx.fillRect(0, 0, 100, 50);
10319
10320 ctx.lineWidth = 400;
10321 ctx.lineJoin = 'miter';
10322
10323 ctx.strokeStyle = '#0f0';
10324 ctx.miterLimit = 1.416;
10325 ctx.beginPath();
10326 ctx.moveTo(200, 1000);
10327 ctx.lineTo(200, 200);
10328 ctx.lineTo(1000, 201);
10329 ctx.stroke();
10330
10331 isPixel(ctx, 1,1, 0,255,0,255, 0);
10332 isPixel(ctx, 48,1, 0,255,0,255, 0);
10333 isPixel(ctx, 48,48, 0,255,0,255, 0);
10334 isPixel(ctx, 1,48, 0,255,0,255, 0);
10335
10336
10337 }
10338 </script>
10339
10340 <!-- [[[ test_2d.line.union.html ]]] -->
10341
10342 <p>Canvas test: 2d.line.union</p>
10343 <canvas id="c327" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10344 <script>
10345
10346
10347 function test_2d_line_union() {
10348
10349 var canvas = document.getElementById('c327');
10350 var ctx = canvas.getContext('2d');
10351
10352 ctx.fillStyle = '#f00';
10353 ctx.fillRect(0, 0, 100, 50);
10354
10355 ctx.lineWidth = 100;
10356 ctx.lineCap = 'round';
10357
10358 ctx.strokeStyle = '#0f0';
10359 ctx.beginPath();
10360 ctx.moveTo(0, 24);
10361 ctx.lineTo(100, 25);
10362 ctx.lineTo(0, 26);
10363 ctx.closePath();
10364 ctx.stroke();
10365
10366 isPixel(ctx, 1,1, 0,255,0,255, 0);
10367 isPixel(ctx, 25,1, 0,255,0,255, 0);
10368 isPixel(ctx, 48,1, 0,255,0,255, 0);
10369 isPixel(ctx, 1,48, 0,255,0,255, 0);
10370 isPixel(ctx, 25,1, 0,255,0,255, 0);
10371 isPixel(ctx, 48,48, 0,255,0,255, 0);
10372
10373
10374 }
10375 </script>
10376
10377 <!-- [[[ test_2d.line.width.basic.html ]]] -->
10378
10379 <p>Canvas test: 2d.line.width.basic</p>
10380 <!-- Testing: lineWidth determines the width of line strokes -->
10381 <canvas id="c328" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10382 <script>
10383
10384
10385 function test_2d_line_width_basic() {
10386
10387 var canvas = document.getElementById('c328');
10388 var ctx = canvas.getContext('2d');
10389
10390 ctx.fillStyle = '#0f0';
10391 ctx.fillRect(0, 0, 100, 50);
10392
10393 ctx.lineWidth = 20;
10394 // Draw a green line over a red box, to check the line is not too small
10395 ctx.fillStyle = '#f00';
10396 ctx.strokeStyle = '#0f0';
10397 ctx.fillRect(15, 15, 20, 20);
10398 ctx.beginPath();
10399 ctx.moveTo(25, 15);
10400 ctx.lineTo(25, 35);
10401 ctx.stroke();
10402
10403 // Draw a green box over a red line, to check the line is not too large
10404 ctx.fillStyle = '#0f0';
10405 ctx.strokeStyle = '#f00';
10406 ctx.beginPath();
10407 ctx.moveTo(75, 15);
10408 ctx.lineTo(75, 35);
10409 ctx.stroke();
10410 ctx.fillRect(65, 15, 20, 20);
10411
10412 isPixel(ctx, 14,25, 0,255,0,255, 0);
10413 isPixel(ctx, 15,25, 0,255,0,255, 0);
10414 isPixel(ctx, 16,25, 0,255,0,255, 0);
10415 isPixel(ctx, 25,25, 0,255,0,255, 0);
10416 isPixel(ctx, 34,25, 0,255,0,255, 0);
10417 isPixel(ctx, 35,25, 0,255,0,255, 0);
10418 isPixel(ctx, 36,25, 0,255,0,255, 0);
10419
10420 isPixel(ctx, 64,25, 0,255,0,255, 0);
10421 isPixel(ctx, 65,25, 0,255,0,255, 0);
10422 isPixel(ctx, 66,25, 0,255,0,255, 0);
10423 isPixel(ctx, 75,25, 0,255,0,255, 0);
10424 isPixel(ctx, 84,25, 0,255,0,255, 0);
10425 isPixel(ctx, 85,25, 0,255,0,255, 0);
10426 isPixel(ctx, 86,25, 0,255,0,255, 0);
10427
10428
10429 }
10430 </script>
10431
10432 <!-- [[[ test_2d.line.width.invalid.html ]]] -->
10433
10434 <p>Canvas test: 2d.line.width.invalid</p>
10435 <!-- Testing: Setting lineWidth to invalid values is ignored -->
10436 <canvas id="c329" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10437 <script>
10438
10439 function test_2d_line_width_invalid() {
10440
10441 var canvas = document.getElementById('c329');
10442 var ctx = canvas.getContext('2d');
10443
10444 var _thrown_outer = false;
10445 try {
10446
10447 ctx.lineWidth = 1.5;
10448 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10449
10450 ctx.lineWidth = 1.5;
10451 ctx.lineWidth = 0;
10452 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10453
10454 ctx.lineWidth = 1.5;
10455 ctx.lineWidth = -1;
10456 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10457
10458 ctx.lineWidth = 1.5;
10459 ctx.lineWidth = Infinity;
10460 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10461
10462 ctx.lineWidth = 1.5;
10463 ctx.lineWidth = -Infinity;
10464 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10465
10466 ctx.lineWidth = 1.5;
10467 ctx.lineWidth = NaN;
10468 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10469
10470 } catch (e) {
10471 _thrown_outer = true;
10472 }
10473 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
10474
10475
10476 }
10477 </script>
10478
10479 <!-- [[[ test_2d.line.width.transformed.html ]]] -->
10480
10481 <p>Canvas test: 2d.line.width.transformed</p>
10482 <!-- Testing: Line stroke widths are affected by scale transformations -->
10483 <canvas id="c330" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10484 <script>
10485
10486
10487 function test_2d_line_width_transformed() {
10488
10489 var canvas = document.getElementById('c330');
10490 var ctx = canvas.getContext('2d');
10491
10492 ctx.fillStyle = '#0f0';
10493 ctx.fillRect(0, 0, 100, 50);
10494
10495 ctx.lineWidth = 4;
10496 // Draw a green line over a red box, to check the line is not too small
10497 ctx.fillStyle = '#f00';
10498 ctx.strokeStyle = '#0f0';
10499 ctx.fillRect(15, 15, 20, 20);
10500 ctx.save();
10501 ctx.scale(5, 1);
10502 ctx.beginPath();
10503 ctx.moveTo(5, 15);
10504 ctx.lineTo(5, 35);
10505 ctx.stroke();
10506 ctx.restore();
10507
10508 // Draw a green box over a red line, to check the line is not too large
10509 ctx.fillStyle = '#0f0';
10510 ctx.strokeStyle = '#f00';
10511 ctx.save();
10512 ctx.scale(-5, 1);
10513 ctx.beginPath();
10514 ctx.moveTo(-15, 15);
10515 ctx.lineTo(-15, 35);
10516 ctx.stroke();
10517 ctx.restore();
10518 ctx.fillRect(65, 15, 20, 20);
10519
10520 isPixel(ctx, 14,25, 0,255,0,255, 0);
10521 isPixel(ctx, 15,25, 0,255,0,255, 0);
10522 isPixel(ctx, 16,25, 0,255,0,255, 0);
10523 isPixel(ctx, 25,25, 0,255,0,255, 0);
10524 isPixel(ctx, 34,25, 0,255,0,255, 0);
10525 isPixel(ctx, 35,25, 0,255,0,255, 0);
10526 isPixel(ctx, 36,25, 0,255,0,255, 0);
10527
10528 isPixel(ctx, 64,25, 0,255,0,255, 0);
10529 isPixel(ctx, 65,25, 0,255,0,255, 0);
10530 isPixel(ctx, 66,25, 0,255,0,255, 0);
10531 isPixel(ctx, 75,25, 0,255,0,255, 0);
10532 isPixel(ctx, 84,25, 0,255,0,255, 0);
10533 isPixel(ctx, 85,25, 0,255,0,255, 0);
10534 isPixel(ctx, 86,25, 0,255,0,255, 0);
10535
10536
10537 }
10538 </script>
10539
10540 <!-- [[[ test_2d.missingargs.html ]]] -->
10541
10542 <p>Canvas test: 2d.missingargs</p>
10543 <!-- Testing: Missing arguments cause NOT_SUPPORTED_ERR -->
10544 <canvas id="c331" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10545 <script>
10546
10547 function test_2d_missingargs() {
10548
10549 var canvas = document.getElementById('c331');
10550 var ctx = canvas.getContext('2d');
10551
10552 var _thrown = undefined; try {
10553 ctx.scale();
10554 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10555 var _thrown = undefined; try {
10556 ctx.scale(1);
10557 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10558 var _thrown = undefined; try {
10559 ctx.rotate();
10560 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10561 var _thrown = undefined; try {
10562 ctx.translate();
10563 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10564 var _thrown = undefined; try {
10565 ctx.translate(0);
10566 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10567 if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
10568 var _thrown = undefined; try {
10569 ctx.transform();
10570 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10571 var _thrown = undefined; try {
10572 ctx.transform(1);
10573 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10574 var _thrown = undefined; try {
10575 ctx.transform(1, 0);
10576 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10577 var _thrown = undefined; try {
10578 ctx.transform(1, 0, 0);
10579 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10580 var _thrown = undefined; try {
10581 ctx.transform(1, 0, 0, 1);
10582 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10583 var _thrown = undefined; try {
10584 ctx.transform(1, 0, 0, 1, 0);
10585 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10586 }
10587 if (ctx.setTransform) {
10588 var _thrown = undefined; try {
10589 ctx.setTransform();
10590 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10591 var _thrown = undefined; try {
10592 ctx.setTransform(1);
10593 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10594 var _thrown = undefined; try {
10595 ctx.setTransform(1, 0);
10596 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10597 var _thrown = undefined; try {
10598 ctx.setTransform(1, 0, 0);
10599 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10600 var _thrown = undefined; try {
10601 ctx.setTransform(1, 0, 0, 1);
10602 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10603 var _thrown = undefined; try {
10604 ctx.setTransform(1, 0, 0, 1, 0);
10605 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10606 }
10607 var _thrown = undefined; try {
10608 ctx.createLinearGradient();
10609 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10610 var _thrown = undefined; try {
10611 ctx.createLinearGradient(0);
10612 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10613 var _thrown = undefined; try {
10614 ctx.createLinearGradient(0, 0);
10615 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10616 var _thrown = undefined; try {
10617 ctx.createLinearGradient(0, 0, 1);
10618 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10619 var _thrown = undefined; try {
10620 ctx.createRadialGradient();
10621 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10622 var _thrown = undefined; try {
10623 ctx.createRadialGradient(0);
10624 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10625 var _thrown = undefined; try {
10626 ctx.createRadialGradient(0, 0);
10627 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10628 var _thrown = undefined; try {
10629 ctx.createRadialGradient(0, 0, 1);
10630 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10631 var _thrown = undefined; try {
10632 ctx.createRadialGradient(0, 0, 1, 0);
10633 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10634 var _thrown = undefined; try {
10635 ctx.createRadialGradient(0, 0, 1, 0, 0);
10636 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10637 var _thrown = undefined; try {
10638 ctx.createPattern(canvas);
10639 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10640 var _thrown = undefined; try {
10641 ctx.clearRect();
10642 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10643 var _thrown = undefined; try {
10644 ctx.clearRect(0);
10645 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10646 var _thrown = undefined; try {
10647 ctx.clearRect(0, 0);
10648 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10649 var _thrown = undefined; try {
10650 ctx.clearRect(0, 0, 0);
10651 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10652 var _thrown = undefined; try {
10653 ctx.fillRect();
10654 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10655 var _thrown = undefined; try {
10656 ctx.fillRect(0);
10657 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10658 var _thrown = undefined; try {
10659 ctx.fillRect(0, 0);
10660 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10661 var _thrown = undefined; try {
10662 ctx.fillRect(0, 0, 0);
10663 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10664 var _thrown = undefined; try {
10665 ctx.strokeRect();
10666 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10667 var _thrown = undefined; try {
10668 ctx.strokeRect(0);
10669 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10670 var _thrown = undefined; try {
10671 ctx.strokeRect(0, 0);
10672 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10673 var _thrown = undefined; try {
10674 ctx.strokeRect(0, 0, 0);
10675 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10676 var _thrown = undefined; try {
10677 ctx.moveTo();
10678 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10679 var _thrown = undefined; try {
10680 ctx.moveTo(0);
10681 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10682 var _thrown = undefined; try {
10683 ctx.lineTo();
10684 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10685 var _thrown = undefined; try {
10686 ctx.lineTo(0);
10687 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10688 var _thrown = undefined; try {
10689 ctx.quadraticCurveTo();
10690 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10691 var _thrown = undefined; try {
10692 ctx.quadraticCurveTo(0);
10693 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10694 var _thrown = undefined; try {
10695 ctx.quadraticCurveTo(0, 0);
10696 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10697 var _thrown = undefined; try {
10698 ctx.quadraticCurveTo(0, 0, 0);
10699 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10700 var _thrown = undefined; try {
10701 ctx.bezierCurveTo();
10702 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10703 var _thrown = undefined; try {
10704 ctx.bezierCurveTo(0);
10705 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10706 var _thrown = undefined; try {
10707 ctx.bezierCurveTo(0, 0);
10708 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10709 var _thrown = undefined; try {
10710 ctx.bezierCurveTo(0, 0, 0);
10711 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10712 var _thrown = undefined; try {
10713 ctx.bezierCurveTo(0, 0, 0, 0);
10714 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10715 var _thrown = undefined; try {
10716 ctx.bezierCurveTo(0, 0, 0, 0, 0);
10717 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10718 var _thrown = undefined; try {
10719 ctx.arcTo();
10720 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10721 var _thrown = undefined; try {
10722 ctx.arcTo(0);
10723 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10724 var _thrown = undefined; try {
10725 ctx.arcTo(0, 0);
10726 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10727 var _thrown = undefined; try {
10728 ctx.arcTo(0, 0, 0);
10729 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10730 var _thrown = undefined; try {
10731 ctx.arcTo(0, 0, 0, 0);
10732 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10733 var _thrown = undefined; try {
10734 ctx.rect();
10735 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10736 var _thrown = undefined; try {
10737 ctx.rect(0);
10738 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10739 var _thrown = undefined; try {
10740 ctx.rect(0, 0);
10741 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10742 var _thrown = undefined; try {
10743 ctx.rect(0, 0, 0);
10744 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10745 var _thrown = undefined; try {
10746 ctx.arc();
10747 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10748 var _thrown = undefined; try {
10749 ctx.arc(0);
10750 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10751 var _thrown = undefined; try {
10752 ctx.arc(0, 0);
10753 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10754 var _thrown = undefined; try {
10755 ctx.arc(0, 0, 1);
10756 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10757 var _thrown = undefined; try {
10758 ctx.arc(0, 0, 1, 0);
10759 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10760 var _thrown = undefined; try {
10761 ctx.arc(0, 0, 1, 0, 0);
10762 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10763 if (ctx.isPointInPath) {
10764 var _thrown = undefined; try {
10765 ctx.isPointInPath();
10766 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10767 var _thrown = undefined; try {
10768 ctx.isPointInPath(0);
10769 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10770 }
10771 var _thrown = undefined; try {
10772 ctx.drawImage();
10773 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10774 var _thrown = undefined; try {
10775 ctx.drawImage(canvas);
10776 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10777 var _thrown = undefined; try {
10778 ctx.drawImage(canvas, 0);
10779 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10780 // TODO: n >= 3 args on drawImage could be either a valid overload,
10781 // or too few for another overload, or too many for another
10782 // overload - what should happen?
10783 if (ctx.createImageData) {
10784 var _thrown = undefined; try {
10785 ctx.createImageData();
10786 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10787 var _thrown = undefined; try {
10788 ctx.createImageData(1);
10789 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10790 }
10791 if (ctx.getImageData) {
10792 var _thrown = undefined; try {
10793 ctx.getImageData();
10794 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10795 var _thrown = undefined; try {
10796 ctx.getImageData(0);
10797 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10798 var _thrown = undefined; try {
10799 ctx.getImageData(0, 0);
10800 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10801 var _thrown = undefined; try {
10802 ctx.getImageData(0, 0, 1);
10803 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10804 }
10805 if (ctx.putImageData) {
10806 var imgdata = ctx.getImageData(0, 0, 1, 1);
10807 var _thrown = undefined; try {
10808 ctx.putImageData();
10809 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10810 var _thrown = undefined; try {
10811 ctx.putImageData(imgdata);
10812 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10813 var _thrown = undefined; try {
10814 ctx.putImageData(imgdata, 0);
10815 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10816 }
10817 var g = ctx.createLinearGradient(0, 0, 0, 0);
10818 var _thrown = undefined; try {
10819 g.addColorStop();
10820 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10821 var _thrown = undefined; try {
10822 g.addColorStop(0);
10823 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10824
10825
10826 }
10827 </script>
10828
10829 <!-- [[[ test_2d.path.arc.angle.1.html ]]] -->
10830
10831 <p>Canvas test: 2d.path.arc.angle.1</p>
10832 <!-- Testing: arc() draws pi/2 .. -pi anticlockwise correctly -->
10833 <canvas id="c332" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10834 <script>
10835
10836
10837 function test_2d_path_arc_angle_1() {
10838
10839 var canvas = document.getElementById('c332');
10840 var ctx = canvas.getContext('2d');
10841
10842 ctx.fillStyle = '#0f0';
10843 ctx.fillRect(0, 0, 100, 50);
10844 ctx.fillStyle = '#f00';
10845 ctx.beginPath();
10846 ctx.moveTo(100, 0);
10847 ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true);
10848 ctx.fill();
10849 isPixel(ctx, 50,25, 0,255,0,255, 0);
10850
10851
10852 }
10853 </script>
10854
10855 <!-- [[[ test_2d.path.arc.angle.2.html ]]] -->
10856
10857 <p>Canvas test: 2d.path.arc.angle.2</p>
10858 <!-- Testing: arc() draws -3pi/2 .. -pi anticlockwise correctly -->
10859 <canvas id="c333" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10860 <script>
10861
10862
10863 function test_2d_path_arc_angle_2() {
10864
10865 var canvas = document.getElementById('c333');
10866 var ctx = canvas.getContext('2d');
10867
10868 ctx.fillStyle = '#0f0';
10869 ctx.fillRect(0, 0, 100, 50);
10870 ctx.fillStyle = '#f00';
10871 ctx.beginPath();
10872 ctx.moveTo(100, 0);
10873 ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true);
10874 ctx.fill();
10875 isPixel(ctx, 50,25, 0,255,0,255, 0);
10876
10877
10878 }
10879 </script>
10880
10881 <!-- [[[ test_2d.path.arc.angle.3.html ]]] -->
10882
10883 <p>Canvas test: 2d.path.arc.angle.3</p>
10884 <!-- Testing: arc() wraps angles mod 2pi when anticlockwise and end > start+2pi -->
10885 <canvas id="c334" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10886 <script>
10887
10888
10889 function test_2d_path_arc_angle_3() {
10890
10891 var canvas = document.getElementById('c334');
10892 var ctx = canvas.getContext('2d');
10893
10894 ctx.fillStyle = '#0f0';
10895 ctx.fillRect(0, 0, 100, 50);
10896 ctx.fillStyle = '#f00';
10897 ctx.beginPath();
10898 ctx.moveTo(100, 0);
10899 ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
10900 ctx.fill();
10901 isPixel(ctx, 50,25, 0,255,0,255, 0);
10902
10903
10904 }
10905 </script>
10906
10907 <!-- [[[ test_2d.path.arc.angle.4.html ]]] -->
10908
10909 <p>Canvas test: 2d.path.arc.angle.4</p>
10910 <!-- Testing: arc() draws a full circle when clockwise and end > start+2pi -->
10911 <canvas id="c335" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10912 <script>
10913
10914
10915 function test_2d_path_arc_angle_4() {
10916
10917 var canvas = document.getElementById('c335');
10918 var ctx = canvas.getContext('2d');
10919
10920 ctx.fillStyle = '#f00';
10921 ctx.fillRect(0, 0, 100, 50);
10922 ctx.fillStyle = '#0f0';
10923 ctx.beginPath();
10924 ctx.moveTo(50, 25);
10925 ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
10926 ctx.fill();
10927 isPixel(ctx, 1,1, 0,255,0,255, 0);
10928 isPixel(ctx, 98,1, 0,255,0,255, 0);
10929 isPixel(ctx, 1,48, 0,255,0,255, 0);
10930 isPixel(ctx, 98,48, 0,255,0,255, 0);
10931
10932
10933 }
10934 </script>
10935
10936 <!-- [[[ test_2d.path.arc.angle.5.html ]]] -->
10937
10938 <p>Canvas test: 2d.path.arc.angle.5</p>
10939 <!-- Testing: arc() wraps angles mod 2pi when clockwise and start > end+2pi -->
10940 <canvas id="c336" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10941 <script>
10942
10943
10944 function test_2d_path_arc_angle_5() {
10945
10946 var canvas = document.getElementById('c336');
10947 var ctx = canvas.getContext('2d');
10948
10949 ctx.fillStyle = '#0f0';
10950 ctx.fillRect(0, 0, 100, 50);
10951 ctx.fillStyle = '#f00';
10952 ctx.beginPath();
10953 ctx.moveTo(100, 0);
10954 ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
10955 ctx.fill();
10956 isPixel(ctx, 50,25, 0,255,0,255, 0);
10957
10958
10959 }
10960 </script>
10961
10962 <!-- [[[ test_2d.path.arc.angle.6.html ]]] -->
10963
10964 <p>Canvas test: 2d.path.arc.angle.6</p>
10965 <!-- Testing: arc() draws a full circle when anticlockwise and start > end+2pi -->
10966 <canvas id="c337" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10967 <script>
10968
10969
10970 function test_2d_path_arc_angle_6() {
10971
10972 var canvas = document.getElementById('c337');
10973 var ctx = canvas.getContext('2d');
10974
10975 ctx.fillStyle = '#f00';
10976 ctx.fillRect(0, 0, 100, 50);
10977 ctx.fillStyle = '#0f0';
10978 ctx.beginPath();
10979 ctx.moveTo(50, 25);
10980 ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
10981 ctx.fill();
10982 isPixel(ctx, 1,1, 0,255,0,255, 0);
10983 isPixel(ctx, 98,1, 0,255,0,255, 0);
10984 isPixel(ctx, 1,48, 0,255,0,255, 0);
10985 isPixel(ctx, 98,48, 0,255,0,255, 0);
10986
10987
10988 }
10989 </script>
10990
10991 <!-- [[[ test_2d.path.arc.empty.html ]]] -->
10992
10993 <p>Canvas test: 2d.path.arc.empty</p>
10994 <!-- Testing: arc() with an empty path does not draw a straight line to the start point -->
10995 <canvas id="c338" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10996 <script>
10997
10998
10999 function test_2d_path_arc_empty() {
11000
11001 var canvas = document.getElementById('c338');
11002 var ctx = canvas.getContext('2d');
11003
11004 ctx.fillStyle = '#0f0';
11005 ctx.fillRect(0, 0, 100, 50);
11006 ctx.lineWidth = 50;
11007 ctx.strokeStyle = '#f00';
11008 ctx.beginPath();
11009 ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
11010 ctx.stroke();
11011 isPixel(ctx, 50,25, 0,255,0,255, 0);
11012
11013
11014 }
11015 </script>
11016
11017 <!-- [[[ test_2d.path.arc.end.html ]]] -->
11018
11019 <p>Canvas test: 2d.path.arc.end</p>
11020 <!-- Testing: arc() adds the end point of the arc to the subpath -->
11021 <canvas id="c339" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11022 <script>
11023
11024
11025 function test_2d_path_arc_end() {
11026
11027 var canvas = document.getElementById('c339');
11028 var ctx = canvas.getContext('2d');
11029
11030 ctx.fillStyle = '#f00';
11031 ctx.fillRect(0, 0, 100, 50);
11032 ctx.lineWidth = 50;
11033 ctx.strokeStyle = '#0f0';
11034 ctx.beginPath();
11035 ctx.moveTo(-100, 0);
11036 ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true);
11037 ctx.lineTo(100, 25);
11038 ctx.stroke();
11039 isPixel(ctx, 50,25, 0,255,0,255, 0);
11040
11041
11042 }
11043 </script>
11044
11045 <!-- [[[ test_2d.path.arc.negative.html ]]] -->
11046
11047 <p>Canvas test: 2d.path.arc.negative</p>
11048 <!-- Testing: arc() with negative radius throws INDEX_SIZE_ERR -->
11049 <canvas id="c340" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11050 <script>
11051
11052 function test_2d_path_arc_negative() {
11053
11054 var canvas = document.getElementById('c340');
11055 var ctx = canvas.getContext('2d');
11056
11057 var _thrown = undefined; try {
11058 ctx.arc(0, 0, -1, 0, 0, true);
11059 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
11060
11061
11062 }
11063 </script>
11064
11065 <!-- [[[ test_2d.path.arc.nonempty.html ]]] -->
11066
11067 <p>Canvas test: 2d.path.arc.nonempty</p>
11068 <!-- Testing: arc() with a non-empty path does draw a straight line to the start point -->
11069 <canvas id="c341" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11070 <script>
11071
11072
11073 function test_2d_path_arc_nonempty() {
11074
11075 var canvas = document.getElementById('c341');
11076 var ctx = canvas.getContext('2d');
11077
11078 ctx.fillStyle = '#f00';
11079 ctx.fillRect(0, 0, 100, 50);
11080 ctx.lineWidth = 50;
11081 ctx.strokeStyle = '#0f0';
11082 ctx.beginPath();
11083 ctx.moveTo(0, 25);
11084 ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
11085 ctx.stroke();
11086 isPixel(ctx, 50,25, 0,255,0,255, 0);
11087
11088
11089 }
11090 </script>
11091
11092 <!-- [[[ test_2d.path.arc.nonfinite.html ]]] -->
11093
11094 <p>Canvas test: 2d.path.arc.nonfinite</p>
11095 <!-- Testing: arc() with Infinity/NaN is ignored -->
11096 <canvas id="c342" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11097 <script>
11098
11099
11100 function test_2d_path_arc_nonfinite() {
11101
11102 var canvas = document.getElementById('c342');
11103 var ctx = canvas.getContext('2d');
11104
11105 var _thrown_outer = false;
11106 try {
11107
11108 ctx.fillStyle = '#f00';
11109 ctx.fillRect(0, 0, 100, 50);
11110 ctx.moveTo(0, 0);
11111 ctx.lineTo(100, 0);
11112 ctx.arc(Infinity, 50, 0, 2*Math.PI, true);
11113 ctx.arc(-Infinity, 50, 0, 2*Math.PI, true);
11114 ctx.arc(NaN, 50, 0, 2*Math.PI, true);
11115 ctx.arc(0, Infinity, 0, 2*Math.PI, true);
11116 ctx.arc(0, -Infinity, 0, 2*Math.PI, true);
11117 ctx.arc(0, NaN, 0, 2*Math.PI, true);
11118 ctx.arc(0, 50, Infinity, 2*Math.PI, true);
11119 ctx.arc(0, 50, -Infinity, 2*Math.PI, true);
11120 ctx.arc(0, 50, NaN, 2*Math.PI, true);
11121 ctx.arc(0, 50, 0, Infinity, true);
11122 ctx.arc(0, 50, 0, -Infinity, true);
11123 ctx.arc(0, 50, 0, NaN, true);
11124 ctx.arc(Infinity, Infinity, 0, 2*Math.PI, true);
11125 ctx.arc(Infinity, Infinity, Infinity, 2*Math.PI, true);
11126 ctx.arc(Infinity, Infinity, Infinity, Infinity, true);
11127 ctx.arc(Infinity, Infinity, 0, Infinity, true);
11128 ctx.arc(Infinity, 50, Infinity, 2*Math.PI, true);
11129 ctx.arc(Infinity, 50, Infinity, Infinity, true);
11130 ctx.arc(Infinity, 50, 0, Infinity, true);
11131 ctx.arc(0, Infinity, Infinity, 2*Math.PI, true);
11132 ctx.arc(0, Infinity, Infinity, Infinity, true);
11133 ctx.arc(0, Infinity, 0, Infinity, true);
11134 ctx.arc(0, 50, Infinity, Infinity, true);
11135 ctx.lineTo(100, 50);
11136 ctx.lineTo(0, 50);
11137 ctx.fillStyle = '#0f0';
11138 ctx.fill();
11139 isPixel(ctx, 50,25, 0,255,0,255, 0);
11140 isPixel(ctx, 90,45, 0,255,0,255, 0);
11141
11142 } catch (e) {
11143 _thrown_outer = true;
11144 }
11145 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
11146
11147
11148 }
11149 </script>
11150
11151 <!-- [[[ test_2d.path.arc.scale.1.html ]]] -->
11152
11153 <p>Canvas test: 2d.path.arc.scale.1</p>
11154 <!-- Testing: Non-uniformly scaled arcs are the right shape -->
11155 <canvas id="c343" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11156 <script>
11157
11158
11159 function test_2d_path_arc_scale_1() {
11160
11161 var canvas = document.getElementById('c343');
11162 var ctx = canvas.getContext('2d');
11163
11164 ctx.fillStyle = '#f00';
11165 ctx.fillRect(0, 0, 100, 50);
11166 ctx.scale(2, 0.5);
11167 ctx.fillStyle = '#0f0';
11168 ctx.beginPath();
11169 var hypothenuse = Math.sqrt(50 * 50 + 25 * 25);
11170 var tolerance = 0.5;
11171 var radius = hypothenuse + tolerance;
11172 ctx.arc(25, 50, radius, 0, 2*Math.PI, false);
11173 ctx.fill();
11174 ctx.fillStyle = '#f00';
11175 ctx.beginPath();
11176 ctx.moveTo(-25, 50);
11177 ctx.arc(-25, 50, 24, 0, 2*Math.PI, false);
11178 ctx.moveTo(75, 50);
11179 ctx.arc(75, 50, 24, 0, 2*Math.PI, false);
11180 ctx.moveTo(25, -25);
11181 ctx.arc(25, -25, 24, 0, 2*Math.PI, false);
11182 ctx.moveTo(25, 125);
11183 ctx.arc(25, 125, 24, 0, 2*Math.PI, false);
11184 ctx.fill();
11185
11186 isPixel(ctx, 0,0, 0,255,0,255, 0);
11187 isPixel(ctx, 50,0, 0,255,0,255, 0);
11188 isPixel(ctx, 99,0, 0,255,0,255, 0);
11189 isPixel(ctx, 0,25, 0,255,0,255, 0);
11190 isPixel(ctx, 50,25, 0,255,0,255, 0);
11191 isPixel(ctx, 99,25, 0,255,0,255, 0);
11192 isPixel(ctx, 0,49, 0,255,0,255, 0);
11193 isPixel(ctx, 50,49, 0,255,0,255, 0);
11194 isPixel(ctx, 99,49, 0,255,0,255, 0);
11195
11196
11197 }
11198 </script>
11199
11200 <!-- [[[ test_2d.path.arc.scale.2.html ]]] -->
11201
11202 <p>Canvas test: 2d.path.arc.scale.2</p>
11203 <!-- Testing: Highly scaled arcs are the right shape -->
11204 <canvas id="c344" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11205 <script>
11206
11207
11208 function test_2d_path_arc_scale_2() {
11209
11210 var canvas = document.getElementById('c344');
11211 var ctx = canvas.getContext('2d');
11212
11213 ctx.fillStyle = '#f00';
11214 ctx.fillRect(0, 0, 100, 50);
11215 ctx.scale(100, 100);
11216 ctx.strokeStyle = '#0f0';
11217 ctx.lineWidth = 1.2;
11218 ctx.beginPath();
11219 ctx.arc(0, 0, 0.6, 0, Math.PI/2, false);
11220 ctx.stroke();
11221
11222 isPixel(ctx, 1,1, 0,255,0,255, 0);
11223 isPixel(ctx, 50,1, 0,255,0,255, 0);
11224 isPixel(ctx, 98,1, 0,255,0,255, 0);
11225 isPixel(ctx, 1,25, 0,255,0,255, 0);
11226 isPixel(ctx, 50,25, 0,255,0,255, 0);
11227 isPixel(ctx, 98,25, 0,255,0,255, 0);
11228 isPixel(ctx, 1,48, 0,255,0,255, 0);
11229 isPixel(ctx, 50,48, 0,255,0,255, 0);
11230 isPixel(ctx, 98,48, 0,255,0,255, 0);
11231
11232
11233 }
11234 </script>
11235
11236 <!-- [[[ test_2d.path.arc.selfintersect.1.html ]]] -->
11237
11238 <p>Canvas test: 2d.path.arc.selfintersect.1</p>
11239 <!-- Testing: arc() with lineWidth > 2*radius is drawn sensibly -->
11240 <canvas id="c345" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11241 <script>
11242
11243
11244 function test_2d_path_arc_selfintersect_1() {
11245
11246 var canvas = document.getElementById('c345');
11247 var ctx = canvas.getContext('2d');
11248
11249 ctx.fillStyle = '#0f0';
11250 ctx.fillRect(0, 0, 100, 50);
11251 ctx.lineWidth = 200;
11252 ctx.strokeStyle = '#f00';
11253 ctx.beginPath();
11254 ctx.arc(100, 50, 25, 0, -Math.PI/2, true);
11255 ctx.stroke();
11256 ctx.beginPath();
11257 ctx.arc(0, 0, 25, 0, -Math.PI/2, true);
11258 ctx.stroke();
11259 isPixel(ctx, 50,25, 0,255,0,255, 0);
11260
11261
11262 }
11263 </script>
11264
11265 <!-- [[[ test_2d.path.arc.selfintersect.2.html ]]] -->
11266
11267 <p>Canvas test: 2d.path.arc.selfintersect.2</p>
11268 <!-- Testing: arc() with lineWidth > 2*radius is drawn sensibly -->
11269 <canvas id="c346" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11270 <script>
11271
11272
11273 function test_2d_path_arc_selfintersect_2() {
11274
11275 var canvas = document.getElementById('c346');
11276 var ctx = canvas.getContext('2d');
11277
11278 ctx.fillStyle = '#f00';
11279 ctx.fillRect(0, 0, 100, 50);
11280 ctx.lineWidth = 180;
11281 ctx.strokeStyle = '#0f0';
11282 ctx.beginPath();
11283 ctx.arc(-50, 50, 25, 0, -Math.PI/2, true);
11284 ctx.stroke();
11285 ctx.beginPath();
11286 ctx.arc(100, 0, 25, 0, -Math.PI/2, true);
11287 ctx.stroke();
11288 isPixel(ctx, 50,25, 0,255,0,255, 0);
11289 isPixel(ctx, 90,10, 0,255,0,255, 0);
11290 isPixel(ctx, 97,1, 0,255,0,255, 0);
11291 isPixel(ctx, 97,2, 0,255,0,255, 0);
11292 isPixel(ctx, 97,3, 0,255,0,255, 0);
11293 isPixel(ctx, 2,48, 0,255,0,255, 0);
11294
11295
11296 }
11297 </script>
11298
11299 <!-- [[[ test_2d.path.arc.shape.1.html ]]] -->
11300
11301 <p>Canvas test: 2d.path.arc.shape.1</p>
11302 <!-- Testing: arc() from 0 to pi does not draw anything in the wrong half -->
11303 <canvas id="c347" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11304 <script>
11305
11306
11307 function test_2d_path_arc_shape_1() {
11308
11309 var canvas = document.getElementById('c347');
11310 var ctx = canvas.getContext('2d');
11311
11312 ctx.fillStyle = '#0f0';
11313 ctx.fillRect(0, 0, 100, 50);
11314 ctx.lineWidth = 50;
11315 ctx.strokeStyle = '#f00';
11316 ctx.beginPath();
11317 ctx.arc(50, 50, 50, 0, Math.PI, false);
11318 ctx.stroke();
11319 isPixel(ctx, 50,25, 0,255,0,255, 0);
11320 isPixel(ctx, 1,1, 0,255,0,255, 0);
11321 isPixel(ctx, 98,1, 0,255,0,255, 0);
11322 isPixel(ctx, 1,48, 0,255,0,255, 0);
11323 // Fails on Linux with Azure/Cairo only
11324 // The arc is drawn badly due to Cairo limitations, the error only becomes
11325 // apparent on Linux because of anti-aliasing, probably due to X.
11326 // The limitation is that Cairo draws arcs by stroking perpendicular to the arc,
11327 // and at very large stroke thicknesses, this becomes a fan. Where exactly the
11328 // 'blades' of the fan appear seems to depend on exactly how the arc is defined
11329 // and the platform. So if the blades of the fan are where pixels are tested it
11330 // passes the test, if the testing pixels fall in between the blades, then we fail.
11331 // With Thebes/Cairo, we were rendering wrong, but got lucky with the test, now
11332 // we are not so lucky.
11333 // Bug 764125
11334 if (IsAzureCairo() && IsLinux()) {
11335 todo_isPixel(ctx, 20,48, 0,255,0,255, 0);
11336 } else {
11337 isPixel(ctx, 20,48, 0,255,0,255, 0);
11338 }
11339 isPixel(ctx, 98,48, 0,255,0,255, 0);
11340
11341 }
11342 </script>
11343
11344 <!-- [[[ test_2d.path.arc.shape.2.html ]]] -->
11345
11346 <p>Canvas test: 2d.path.arc.shape.2</p>
11347 <!-- Testing: arc() from 0 to pi draws stuff in the right half -->
11348 <canvas id="c348" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11349 <script>
11350
11351
11352 function test_2d_path_arc_shape_2() {
11353
11354 var canvas = document.getElementById('c348');
11355 var ctx = canvas.getContext('2d');
11356
11357 ctx.fillStyle = '#f00';
11358 ctx.fillRect(0, 0, 100, 50);
11359 ctx.lineWidth = 100;
11360 ctx.strokeStyle = '#0f0';
11361 ctx.beginPath();
11362 ctx.arc(50, 50, 50, 0, Math.PI, true);
11363 ctx.stroke();
11364 isPixel(ctx, 50,25, 0,255,0,255, 0);
11365 isPixel(ctx, 1,1, 0,255,0,255, 0);
11366 isPixel(ctx, 98,1, 0,255,0,255, 0);
11367 isPixel(ctx, 1,48, 0,255,0,255, 0);
11368 isPixel(ctx, 20,48, 0,255,0,255, 0);
11369 isPixel(ctx, 98,48, 0,255,0,255, 0);
11370
11371
11372 }
11373 </script>
11374
11375 <!-- [[[ test_2d.path.arc.shape.3.html ]]] -->
11376
11377 <p>Canvas test: 2d.path.arc.shape.3</p>
11378 <!-- Testing: arc() from 0 to -pi/2 does not draw anything in the wrong quadrant -->
11379 <canvas id="c349" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11380 <script>
11381
11382
11383
11384 function test_2d_path_arc_shape_3() {
11385
11386 var canvas = document.getElementById('c349');
11387 var ctx = canvas.getContext('2d');
11388
11389 ctx.fillStyle = '#0f0';
11390 ctx.fillRect(0, 0, 100, 50);
11391 ctx.lineWidth = 100;
11392 ctx.strokeStyle = '#f00';
11393 ctx.beginPath();
11394 ctx.arc(0, 50, 50, 0, -Math.PI/2, false);
11395 ctx.stroke();
11396 isPixel(ctx, 50,25, 0,255,0,255, 0);
11397 isPixel(ctx, 1,1, 0,255,0,255, 0);
11398 isPixel(ctx, 98,1, 0,255,0,255, 0);
11399 isPixel(ctx, 1,48, 0,255,0,255, 0);
11400 isPixel(ctx, 98,48, 0,255,0,255, 0);
11401
11402
11403 }
11404 </script>
11405
11406 <!-- [[[ test_2d.path.arc.shape.4.html ]]] -->
11407
11408 <p>Canvas test: 2d.path.arc.shape.4</p>
11409 <!-- Testing: arc() from 0 to -pi/2 draws stuff in the right quadrant -->
11410 <canvas id="c350" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11411 <script>
11412
11413
11414 function test_2d_path_arc_shape_4() {
11415
11416 var canvas = document.getElementById('c350');
11417 var ctx = canvas.getContext('2d');
11418
11419 ctx.fillStyle = '#f00';
11420 ctx.fillRect(0, 0, 100, 50);
11421 ctx.lineWidth = 150;
11422 ctx.strokeStyle = '#0f0';
11423 ctx.beginPath();
11424 ctx.arc(-50, 50, 100, 0, -Math.PI/2, true);
11425 ctx.stroke();
11426 isPixel(ctx, 50,25, 0,255,0,255, 0);
11427 isPixel(ctx, 1,1, 0,255,0,255, 0);
11428 isPixel(ctx, 98,1, 0,255,0,255, 0);
11429 isPixel(ctx, 1,48, 0,255,0,255, 0);
11430 isPixel(ctx, 98,48, 0,255,0,255, 0);
11431
11432
11433 }
11434 </script>
11435
11436 <!-- [[[ test_2d.path.arc.shape.5.html ]]] -->
11437
11438 <p>Canvas test: 2d.path.arc.shape.5</p>
11439 <!-- Testing: arc() from 0 to 5pi does not draw crazy things -->
11440 <canvas id="c351" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11441 <script>
11442
11443
11444 function test_2d_path_arc_shape_5() {
11445
11446 var canvas = document.getElementById('c351');
11447 var ctx = canvas.getContext('2d');
11448
11449 ctx.fillStyle = '#0f0';
11450 ctx.fillRect(0, 0, 100, 50);
11451 ctx.lineWidth = 200;
11452 ctx.strokeStyle = '#f00';
11453 ctx.beginPath();
11454 ctx.arc(300, 0, 100, 0, 5*Math.PI, false);
11455 ctx.stroke();
11456 isPixel(ctx, 50,25, 0,255,0,255, 0);
11457 isPixel(ctx, 1,1, 0,255,0,255, 0);
11458 isPixel(ctx, 98,1, 0,255,0,255, 0);
11459 isPixel(ctx, 1,48, 0,255,0,255, 0);
11460 isPixel(ctx, 98,48, 0,255,0,255, 0);
11461
11462
11463 }
11464 </script>
11465
11466 <!-- [[[ test_2d.path.arc.twopie.1.html ]]] -->
11467
11468 <p>Canvas test: 2d.path.arc.twopie.1</p>
11469 <!-- Testing: arc() draws nothing when end = start + 2pi-e and anticlockwise -->
11470 <canvas id="c352" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11471 <script>
11472
11473
11474 function test_2d_path_arc_twopie_1() {
11475
11476 var canvas = document.getElementById('c352');
11477 var ctx = canvas.getContext('2d');
11478
11479 ctx.fillStyle = '#0f0';
11480 ctx.fillRect(0, 0, 100, 50);
11481 ctx.strokeStyle = '#f00';
11482 ctx.lineWidth = 100;
11483 ctx.beginPath();
11484 ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true);
11485 ctx.stroke();
11486 isPixel(ctx, 50,20, 0,255,0,255, 0);
11487
11488
11489 }
11490 </script>
11491
11492 <!-- [[[ test_2d.path.arc.twopie.2.html ]]] -->
11493
11494 <p>Canvas test: 2d.path.arc.twopie.2</p>
11495 <!-- Testing: arc() draws a full circle when end = start + 2pi-e and clockwise -->
11496 <canvas id="c353" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11497 <script>
11498
11499
11500 function test_2d_path_arc_twopie_2() {
11501
11502 var canvas = document.getElementById('c353');
11503 var ctx = canvas.getContext('2d');
11504
11505 ctx.fillStyle = '#f00';
11506 ctx.fillRect(0, 0, 100, 50);
11507 ctx.strokeStyle = '#0f0';
11508 ctx.lineWidth = 100;
11509 ctx.beginPath();
11510 ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false);
11511 ctx.stroke();
11512 isPixel(ctx, 50,20, 0,255,0,255, 0);
11513
11514
11515 }
11516 </script>
11517
11518 <!-- [[[ test_2d.path.arc.twopie.3.html ]]] -->
11519
11520 <p>Canvas test: 2d.path.arc.twopie.3</p>
11521 <!-- Testing: arc() draws a full circle when end = start + 2pi+e and anticlockwise -->
11522 <canvas id="c354" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11523 <script>
11524
11525
11526 function test_2d_path_arc_twopie_3() {
11527
11528 var canvas = document.getElementById('c354');
11529 var ctx = canvas.getContext('2d');
11530
11531 ctx.fillStyle = '#f00';
11532 ctx.fillRect(0, 0, 100, 50);
11533 ctx.strokeStyle = '#0f0';
11534 ctx.lineWidth = 100;
11535 ctx.beginPath();
11536 ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true);
11537 ctx.stroke();
11538 isPixel(ctx, 50,20, 0,255,0,255, 0);
11539
11540
11541 }
11542 </script>
11543
11544 <!-- [[[ test_2d.path.arc.twopie.4.html ]]] -->
11545
11546 <p>Canvas test: 2d.path.arc.twopie.4</p>
11547 <!-- Testing: arc() draws nothing when end = start + 2pi+e and clockwise -->
11548 <canvas id="c355" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11549 <script>
11550
11551
11552 function test_2d_path_arc_twopie_4() {
11553
11554 var canvas = document.getElementById('c355');
11555 var ctx = canvas.getContext('2d');
11556
11557 ctx.fillStyle = '#f00';
11558 ctx.fillRect(0, 0, 100, 50);
11559 ctx.strokeStyle = '#0f0';
11560 ctx.lineWidth = 100;
11561 ctx.beginPath();
11562 ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false);
11563 ctx.stroke();
11564 isPixel(ctx, 50,20, 0,255,0,255, 0);
11565
11566
11567 }
11568 </script>
11569
11570 <!-- [[[ test_2d.path.arc.zero.1.html ]]] -->
11571
11572 <p>Canvas test: 2d.path.arc.zero.1</p>
11573 <!-- Testing: arc() draws nothing when startAngle = endAngle and anticlockwise -->
11574 <canvas id="c356" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11575 <script>
11576
11577
11578 function test_2d_path_arc_zero_1() {
11579
11580 var canvas = document.getElementById('c356');
11581 var ctx = canvas.getContext('2d');
11582
11583 ctx.fillStyle = '#0f0';
11584 ctx.fillRect(0, 0, 100, 50);
11585 ctx.strokeStyle = '#f00';
11586 ctx.lineWidth = 100;
11587 ctx.beginPath();
11588 ctx.arc(50, 25, 50, 0, 0, true);
11589 ctx.stroke();
11590 isPixel(ctx, 50,20, 0,255,0,255, 0);
11591
11592
11593 }
11594 </script>
11595
11596 <!-- [[[ test_2d.path.arc.zero.2.html ]]] -->
11597
11598 <p>Canvas test: 2d.path.arc.zero.2</p>
11599 <!-- Testing: arc() draws nothing when startAngle = endAngle and clockwise -->
11600 <canvas id="c357" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11601 <script>
11602
11603
11604 function test_2d_path_arc_zero_2() {
11605
11606 var canvas = document.getElementById('c357');
11607 var ctx = canvas.getContext('2d');
11608
11609 ctx.fillStyle = '#0f0';
11610 ctx.fillRect(0, 0, 100, 50);
11611 ctx.strokeStyle = '#f00';
11612 ctx.lineWidth = 100;
11613 ctx.beginPath();
11614 ctx.arc(50, 25, 50, 0, 0, false);
11615 ctx.stroke();
11616 isPixel(ctx, 50,20, 0,255,0,255, 0);
11617
11618
11619 }
11620 </script>
11621
11622 <!-- [[[ test_2d.path.arc.zeroradius.html ]]] -->
11623
11624 <p>Canvas test: 2d.path.arc.zeroradius</p>
11625 <!-- Testing: arc() with zero radius draws a line to the start point -->
11626 <canvas id="c358" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11627 <script>
11628
11629
11630
11631 function test_2d_path_arc_zeroradius() {
11632
11633 var canvas = document.getElementById('c358');
11634 var ctx = canvas.getContext('2d');
11635
11636 ctx.fillStyle = '#f00'
11637 ctx.fillRect(0, 0, 100, 50);
11638 ctx.lineWidth = 50;
11639 ctx.strokeStyle = '#0f0';
11640 ctx.beginPath();
11641 ctx.moveTo(0, 25);
11642 ctx.arc(200, 25, 0, 0, Math.PI, true);
11643 ctx.stroke();
11644
11645 isPixel(ctx, 50,25, 0,255,0,255, 0);
11646 }
11647 </script>
11648
11649 <!-- [[[ test_2d.path.arcTo.coincide.1.html ]]] -->
11650
11651 <p>Canvas test: 2d.path.arcTo.coincide.1</p>
11652 <!-- Testing: arcTo() has no effect if P0 = P1 -->
11653 <canvas id="c359" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11654 <script>
11655
11656
11657
11658 function test_2d_path_arcTo_coincide_1() {
11659
11660 var canvas = document.getElementById('c359');
11661 var ctx = canvas.getContext('2d');
11662
11663 ctx.fillStyle = '#f00';
11664 ctx.fillRect(0, 0, 100, 50);
11665 ctx.lineWidth = 50;
11666
11667 ctx.strokeStyle = '#0f0';
11668 ctx.beginPath();
11669 ctx.moveTo(0, 25);
11670 ctx.arcTo(0, 25, 50, 1000, 1);
11671 ctx.lineTo(100, 25);
11672 ctx.stroke();
11673
11674 ctx.strokeStyle = '#f00';
11675 ctx.beginPath();
11676 ctx.moveTo(50, 25);
11677 ctx.arcTo(50, 25, 100, 25, 1);
11678 ctx.stroke();
11679
11680 isPixel(ctx, 50,1, 0,255,0,255, 0);
11681 isPixel(ctx, 50,25, 0,255,0,255, 0);
11682 isPixel(ctx, 50,48, 0,255,0,255, 0);
11683
11684
11685 }
11686 </script>
11687
11688 <!-- [[[ test_2d.path.arcTo.coincide.2.html ]]] -->
11689
11690 <p>Canvas test: 2d.path.arcTo.coincide.2</p>
11691 <!-- Testing: arcTo() draws a straight line to P1 if P1 = P2 -->
11692 <canvas id="c360" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11693 <script>
11694
11695
11696 function test_2d_path_arcTo_coincide_2() {
11697
11698 var canvas = document.getElementById('c360');
11699 var ctx = canvas.getContext('2d');
11700
11701 ctx.fillStyle = '#f00';
11702 ctx.fillRect(0, 0, 100, 50);
11703 ctx.lineWidth = 50;
11704 ctx.strokeStyle = '#0f0';
11705 ctx.beginPath();
11706 ctx.moveTo(0, 25);
11707 ctx.arcTo(100, 25, 100, 25, 1);
11708 ctx.stroke();
11709
11710 isPixel(ctx, 50,25, 0,255,0,255, 0);
11711
11712
11713 }
11714 </script>
11715
11716 <!-- [[[ test_2d.path.arcTo.collinear.1.html ]]] -->
11717
11718 <p>Canvas test: 2d.path.arcTo.collinear.1</p>
11719 <!-- Testing: arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1 -->
11720 <canvas id="c361" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11721 <script>
11722
11723
11724
11725 function test_2d_path_arcTo_collinear_1() {
11726
11727 var canvas = document.getElementById('c361');
11728 var ctx = canvas.getContext('2d');
11729
11730 ctx.fillStyle = '#f00';
11731 ctx.fillRect(0, 0, 100, 50);
11732 ctx.lineWidth = 50;
11733
11734 ctx.strokeStyle = '#0f0';
11735 ctx.beginPath();
11736 ctx.moveTo(0, 25);
11737 ctx.arcTo(100, 25, 200, 25, 1);
11738 ctx.stroke();
11739
11740 ctx.strokeStyle = '#f00';
11741 ctx.beginPath();
11742 ctx.moveTo(-100, 25);
11743 ctx.arcTo(0, 25, 100, 25, 1);
11744 ctx.stroke();
11745
11746 isPixel(ctx, 50,25, 0,255,0,255, 0);
11747
11748
11749 }
11750 </script>
11751
11752 <!-- [[[ test_2d.path.arcTo.collinear.2.html ]]] -->
11753
11754 <p>Canvas test: 2d.path.arcTo.collinear.2</p>
11755 <!-- Testing: arcTo() with all points on a line, and P2 between P0/P1, draws an infinite line along P1..P2 -->
11756 <canvas id="c362" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11757 <script>
11758
11759
11760
11761 function test_2d_path_arcTo_collinear_2() {
11762
11763 var canvas = document.getElementById('c362');
11764 var ctx = canvas.getContext('2d');
11765
11766 ctx.fillStyle = '#f00';
11767 ctx.fillRect(0, 0, 100, 50);
11768 ctx.lineWidth = 50;
11769
11770 ctx.strokeStyle = '#0f0';
11771 ctx.beginPath();
11772 ctx.moveTo(1000, 25);
11773 ctx.arcTo(1100, 25, 1050, 25, 1);
11774 ctx.stroke();
11775
11776 ctx.strokeStyle = '#f00';
11777 ctx.beginPath();
11778 ctx.moveTo(0, 25);
11779 ctx.arcTo(100, 25, -50, 25, 1);
11780 ctx.stroke();
11781
11782 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
11783
11784
11785 }
11786 </script>
11787
11788 <!-- [[[ test_2d.path.arcTo.collinear.3.html ]]] -->
11789
11790 <p>Canvas test: 2d.path.arcTo.collinear.3</p>
11791 <!-- Testing: arcTo() with all points on a line, and P0 between P1/P2, draws an infinite line along P1..P2 -->
11792 <canvas id="c363" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11793 <script>
11794
11795
11796
11797 function test_2d_path_arcTo_collinear_3() {
11798
11799 var canvas = document.getElementById('c363');
11800 var ctx = canvas.getContext('2d');
11801
11802 ctx.fillStyle = '#f00';
11803 ctx.fillRect(0, 0, 100, 50);
11804 ctx.lineWidth = 50;
11805
11806 ctx.strokeStyle = '#0f0';
11807 ctx.beginPath();
11808 ctx.moveTo(150, 25);
11809 ctx.arcTo(200, 25, 100, 25, 1);
11810 ctx.stroke();
11811
11812 ctx.strokeStyle = '#f00';
11813 ctx.beginPath();
11814 ctx.moveTo(0, 25);
11815 ctx.arcTo(100, 25, 50, 25, 1);
11816 ctx.stroke();
11817
11818 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
11819
11820
11821 }
11822 </script>
11823
11824 <!-- [[[ test_2d.path.arcTo.emptysubpath.html ]]] -->
11825
11826 <p>Canvas test: 2d.path.arcTo.emptysubpath</p>
11827 <!-- Testing: arcTo() does nothing if there are no subpaths -->
11828 <canvas id="c364" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11829 <script>
11830
11831
11832
11833 function test_2d_path_arcTo_emptysubpath() {
11834
11835 var canvas = document.getElementById('c364');
11836 var ctx = canvas.getContext('2d');
11837
11838 ctx.fillStyle = '#0f0';
11839 ctx.fillRect(0, 0, 100, 50);
11840 ctx.lineWidth = 50;
11841 ctx.strokeStyle = '#f00';
11842 ctx.beginPath();
11843 ctx.arcTo(0, 25, 0, 25, 0.1);
11844 ctx.arcTo(100, 25, 100, 25, 0.1);
11845 ctx.stroke();
11846 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
11847
11848
11849 }
11850 </script>
11851
11852 <!-- [[[ test_2d.path.arcTo.negative.html ]]] -->
11853
11854 <p>Canvas test: 2d.path.arcTo.negative</p>
11855 <!-- Testing: arcTo() with negative radius throws an exception -->
11856 <canvas id="c365" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11857 <script>
11858
11859 function test_2d_path_arcTo_negative() {
11860
11861 var canvas = document.getElementById('c365');
11862 var ctx = canvas.getContext('2d');
11863
11864 var _thrown = undefined; try {
11865 ctx.arcTo(0, 0, 0, 0, -1);
11866 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
11867
11868
11869 }
11870 </script>
11871
11872 <!-- [[[ test_2d.path.arcTo.nonfinite.html ]]] -->
11873
11874 <p>Canvas test: 2d.path.arcTo.nonfinite</p>
11875 <!-- Testing: arcTo() with Infinity/NaN is ignored -->
11876 <canvas id="c366" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11877 <script>
11878
11879
11880 function test_2d_path_arcTo_nonfinite() {
11881
11882 var canvas = document.getElementById('c366');
11883 var ctx = canvas.getContext('2d');
11884
11885 var _thrown_outer = false;
11886 try {
11887
11888 ctx.moveTo(0, 0);
11889 ctx.lineTo(100, 0);
11890 ctx.arcTo(Infinity, 50, 0, 50, 0);
11891 ctx.arcTo(-Infinity, 50, 0, 50, 0);
11892 ctx.arcTo(NaN, 50, 0, 50, 0);
11893 ctx.arcTo(0, Infinity, 0, 50, 0);
11894 ctx.arcTo(0, -Infinity, 0, 50, 0);
11895 ctx.arcTo(0, NaN, 0, 50, 0);
11896 ctx.arcTo(0, 50, Infinity, 50, 0);
11897 ctx.arcTo(0, 50, -Infinity, 50, 0);
11898 ctx.arcTo(0, 50, NaN, 50, 0);
11899 ctx.arcTo(0, 50, 0, Infinity, 0);
11900 ctx.arcTo(0, 50, 0, -Infinity, 0);
11901 ctx.arcTo(0, 50, 0, NaN, 0);
11902 ctx.arcTo(0, 50, 0, 50, Infinity);
11903 ctx.arcTo(0, 50, 0, 50, -Infinity);
11904 ctx.arcTo(0, 50, 0, 50, NaN);
11905 ctx.arcTo(Infinity, Infinity, 0, 50, 0);
11906 ctx.arcTo(Infinity, Infinity, Infinity, 50, 0);
11907 ctx.arcTo(Infinity, Infinity, Infinity, Infinity, 0);
11908 ctx.arcTo(Infinity, Infinity, Infinity, Infinity, Infinity);
11909 ctx.arcTo(Infinity, Infinity, Infinity, 50, Infinity);
11910 ctx.arcTo(Infinity, Infinity, 0, Infinity, 0);
11911 ctx.arcTo(Infinity, Infinity, 0, Infinity, Infinity);
11912 ctx.arcTo(Infinity, Infinity, 0, 50, Infinity);
11913 ctx.arcTo(Infinity, 50, Infinity, 50, 0);
11914 ctx.arcTo(Infinity, 50, Infinity, Infinity, 0);
11915 ctx.arcTo(Infinity, 50, Infinity, Infinity, Infinity);
11916 ctx.arcTo(Infinity, 50, Infinity, 50, Infinity);
11917 ctx.arcTo(Infinity, 50, 0, Infinity, 0);
11918 ctx.arcTo(Infinity, 50, 0, Infinity, Infinity);
11919 ctx.arcTo(Infinity, 50, 0, 50, Infinity);
11920 ctx.arcTo(0, Infinity, Infinity, 50, 0);
11921 ctx.arcTo(0, Infinity, Infinity, Infinity, 0);
11922 ctx.arcTo(0, Infinity, Infinity, Infinity, Infinity);
11923 ctx.arcTo(0, Infinity, Infinity, 50, Infinity);
11924 ctx.arcTo(0, Infinity, 0, Infinity, 0);
11925 ctx.arcTo(0, Infinity, 0, Infinity, Infinity);
11926 ctx.arcTo(0, Infinity, 0, 50, Infinity);
11927 ctx.arcTo(0, 50, Infinity, Infinity, 0);
11928 ctx.arcTo(0, 50, Infinity, Infinity, Infinity);
11929 ctx.arcTo(0, 50, Infinity, 50, Infinity);
11930 ctx.arcTo(0, 50, 0, Infinity, Infinity);
11931 ctx.lineTo(100, 50);
11932 ctx.lineTo(0, 50);
11933 ctx.fillStyle = '#0f0';
11934 ctx.fill();
11935 isPixel(ctx, 50,25, 0,255,0,255, 0);
11936 isPixel(ctx, 90,45, 0,255,0,255, 0);
11937
11938 } catch (e) {
11939 _thrown_outer = true;
11940 }
11941 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
11942
11943
11944 }
11945 </script>
11946
11947 <!-- [[[ test_2d.path.arcTo.scale.html ]]] -->
11948
11949 <p>Canvas test: 2d.path.arcTo.scale</p>
11950 <!-- Testing: arcTo scales the curve, not just the control points -->
11951 <canvas id="c367" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11952 <script>
11953
11954
11955 function test_2d_path_arcTo_scale() {
11956
11957 var canvas = document.getElementById('c367');
11958 var ctx = canvas.getContext('2d');
11959
11960 ctx.fillStyle = '#f00';
11961 ctx.fillRect(0, 0, 100, 50);
11962
11963 ctx.fillStyle = '#0f0';
11964 ctx.beginPath();
11965 ctx.moveTo(0, 50);
11966 ctx.translate(100, 0);
11967 ctx.scale(0.1, 1);
11968 ctx.arcTo(50, 50, 50, 0, 50);
11969 ctx.lineTo(-1000, 0);
11970 ctx.fill();
11971
11972 isPixel(ctx, 0,0, 0,255,0,255, 0);
11973 isPixel(ctx, 50,0, 0,255,0,255, 0);
11974 isPixel(ctx, 99,0, 0,255,0,255, 0);
11975 isPixel(ctx, 0,25, 0,255,0,255, 0);
11976 isPixel(ctx, 50,25, 0,255,0,255, 0);
11977 isPixel(ctx, 99,25, 0,255,0,255, 0);
11978 isPixel(ctx, 0,49, 0,255,0,255, 0);
11979 isPixel(ctx, 50,49, 0,255,0,255, 0);
11980 isPixel(ctx, 99,49, 0,255,0,255, 0);
11981
11982
11983 }
11984 </script>
11985
11986 <!-- [[[ test_2d.path.arcTo.shape.curve1.html ]]] -->
11987
11988 <p>Canvas test: 2d.path.arcTo.shape.curve1</p>
11989 <!-- Testing: arcTo() curves in the right kind of shape -->
11990 <canvas id="c368" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11991 <script>
11992
11993
11994
11995 function test_2d_path_arcTo_shape_curve1() {
11996
11997 var canvas = document.getElementById('c368');
11998 var ctx = canvas.getContext('2d');
11999
12000 var tol = 1.5; // tolerance to avoid antialiasing artifacts
12001
12002 ctx.fillStyle = '#0f0';
12003 ctx.fillRect(0, 0, 100, 50);
12004
12005 ctx.strokeStyle = '#f00';
12006 ctx.lineWidth = 10;
12007 ctx.beginPath();
12008 ctx.moveTo(10, 25);
12009 ctx.arcTo(75, 25, 75, 60, 20);
12010 ctx.stroke();
12011
12012 ctx.fillStyle = '#0f0';
12013 ctx.beginPath();
12014 ctx.rect(10, 20, 45, 10);
12015 ctx.moveTo(80, 45);
12016 ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true);
12017 ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false);
12018 ctx.fill();
12019
12020 isPixel(ctx, 50,25, 0,255,0,255, 0);
12021 isPixel(ctx, 55,19, 0,255,0,255, 0);
12022 isPixel(ctx, 55,20, 0,255,0,255, 0);
12023 isPixel(ctx, 55,21, 0,255,0,255, 0);
12024 isPixel(ctx, 64,22, 0,255,0,255, 0);
12025 isPixel(ctx, 65,21, 0,255,0,255, 0);
12026 isPixel(ctx, 72,28, 0,255,0,255, 0);
12027 isPixel(ctx, 73,27, 0,255,0,255, 0);
12028 isPixel(ctx, 78,36, 0,255,0,255, 0);
12029 isPixel(ctx, 79,35, 0,255,0,255, IsAzureSkia() ? 1 : 0);
12030 isPixel(ctx, 80,44, 0,255,0,255, 0);
12031 isPixel(ctx, 80,45, 0,255,0,255, 0);
12032 isPixel(ctx, 80,46, 0,255,0,255, 0);
12033
12034
12035 }
12036 </script>
12037
12038 <!-- [[[ test_2d.path.arcTo.shape.curve2.html ]]] -->
12039
12040 <p>Canvas test: 2d.path.arcTo.shape.curve2</p>
12041 <!-- Testing: arcTo() curves in the right kind of shape -->
12042 <canvas id="c369" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12043 <script>
12044
12045
12046
12047 function test_2d_path_arcTo_shape_curve2() {
12048
12049 var canvas = document.getElementById('c369');
12050 var ctx = canvas.getContext('2d');
12051
12052 var tol = 1.5; // tolerance to avoid antialiasing artifacts
12053
12054 ctx.fillStyle = '#0f0';
12055 ctx.fillRect(0, 0, 100, 50);
12056
12057 ctx.fillStyle = '#f00';
12058 ctx.beginPath();
12059 ctx.rect(10, 20, 45, 10);
12060 ctx.moveTo(80, 45);
12061 ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true);
12062 ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false);
12063 ctx.fill();
12064
12065 ctx.strokeStyle = '#0f0';
12066 ctx.lineWidth = 10;
12067 ctx.beginPath();
12068 ctx.moveTo(10, 25);
12069 ctx.arcTo(75, 25, 75, 60, 20);
12070 ctx.stroke();
12071
12072 isPixel(ctx, 50,25, 0,255,0,255, 0);
12073 isPixel(ctx, 55,19, 0,255,0,255, 0);
12074 isPixel(ctx, 55,20, 0,255,0,255, 0);
12075 isPixel(ctx, 55,21, 0,255,0,255, 0);
12076 isPixel(ctx, 64,22, 0,255,0,255, IsAzureSkia() ? 1 : 0);
12077 isPixel(ctx, 65,21, 0,255,0,255, 0);
12078 isPixel(ctx, 72,28, 0,255,0,255, 0);
12079 isPixel(ctx, 73,27, 0,255,0,255, IsAzureSkia() ? 1 : 0);
12080 isPixel(ctx, 78,36, 0,255,0,255, IsAzureSkia() ? 1 : 0);
12081 isPixel(ctx, 79,35, 0,255,0,255, 0);
12082 isPixel(ctx, 80,44, 0,255,0,255, 0);
12083 isPixel(ctx, 80,45, 0,255,0,255, 0);
12084 isPixel(ctx, 80,46, 0,255,0,255, 0);
12085
12086
12087 }
12088 </script>
12089
12090 <!-- [[[ test_2d.path.arcTo.shape.end.html ]]] -->
12091
12092 <p>Canvas test: 2d.path.arcTo.shape.end</p>
12093 <!-- Testing: arcTo() does not draw anything from P1 to P2 -->
12094 <canvas id="c370" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12095 <script>
12096
12097
12098
12099 function test_2d_path_arcTo_shape_end() {
12100
12101 var canvas = document.getElementById('c370');
12102 var ctx = canvas.getContext('2d');
12103
12104 ctx.fillStyle = '#0f0';
12105 ctx.fillRect(0, 0, 100, 50);
12106 ctx.strokeStyle = '#f00';
12107 ctx.lineWidth = 50;
12108 ctx.beginPath();
12109 ctx.moveTo(-100, -100);
12110 ctx.arcTo(-100, 25, 200, 25, 10);
12111 ctx.stroke();
12112
12113 isPixel(ctx, 1,1, 0,255,0,255, 0);
12114 isPixel(ctx, 1,48, 0,255,0,255, 0);
12115 isPixel(ctx, 50,25, 0,255,0,255, 0);
12116 isPixel(ctx, 98,1, 0,255,0,255, 0);
12117 isPixel(ctx, 98,48, 0,255,0,255, 0);
12118
12119
12120 }
12121 </script>
12122
12123 <!-- [[[ test_2d.path.arcTo.shape.start.html ]]] -->
12124
12125 <p>Canvas test: 2d.path.arcTo.shape.start</p>
12126 <!-- Testing: arcTo() draws a straight line from P0 to P1 -->
12127 <canvas id="c371" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12128 <script>
12129
12130
12131
12132 function test_2d_path_arcTo_shape_start() {
12133
12134 var canvas = document.getElementById('c371');
12135 var ctx = canvas.getContext('2d');
12136
12137 ctx.fillStyle = '#f00';
12138 ctx.fillRect(0, 0, 100, 50);
12139 ctx.strokeStyle = '#0f0';
12140 ctx.lineWidth = 50;
12141 ctx.beginPath();
12142 ctx.moveTo(0, 25);
12143 ctx.arcTo(200, 25, 200, 50, 10);
12144 ctx.stroke();
12145
12146 isPixel(ctx, 1,1, 0,255,0,255, 0);
12147 isPixel(ctx, 1,48, 0,255,0,255, 0);
12148 isPixel(ctx, 50,25, 0,255,0,255, 0);
12149 isPixel(ctx, 98,1, 0,255,0,255, 0);
12150 isPixel(ctx, 98,48, 0,255,0,255, 0);
12151
12152
12153 }
12154 </script>
12155
12156 <!-- [[[ test_2d.path.arcTo.transformation.html ]]] -->
12157
12158 <p>Canvas test: 2d.path.arcTo.transformation</p>
12159 <!-- Testing: arcTo joins up to the last subpath point correctly -->
12160 <canvas id="c372" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12161 <script>
12162
12163
12164 function test_2d_path_arcTo_transformation() {
12165
12166 var canvas = document.getElementById('c372');
12167 var ctx = canvas.getContext('2d');
12168
12169 ctx.fillStyle = '#f00';
12170 ctx.fillRect(0, 0, 100, 50);
12171
12172 ctx.fillStyle = '#0f0';
12173 ctx.beginPath();
12174 ctx.moveTo(0, 50);
12175 ctx.translate(100, 0);
12176 ctx.arcTo(50, 50, 50, 0, 50);
12177 ctx.lineTo(-100, 0);
12178 ctx.fill();
12179
12180 isPixel(ctx, 0,0, 0,255,0,255, 0);
12181 isPixel(ctx, 50,0, 0,255,0,255, 0);
12182 isPixel(ctx, 99,0, 0,255,0,255, 0);
12183 isPixel(ctx, 0,25, 0,255,0,255, 0);
12184 isPixel(ctx, 50,25, 0,255,0,255, 0);
12185 isPixel(ctx, 99,25, 0,255,0,255, 0);
12186 isPixel(ctx, 0,49, 0,255,0,255, 0);
12187 isPixel(ctx, 50,49, 0,255,0,255, 0);
12188 isPixel(ctx, 99,49, 0,255,0,255, 0);
12189
12190
12191 }
12192 </script>
12193
12194 <!-- [[[ test_2d.path.arcTo.zero.1.html ]]] -->
12195
12196 <p>Canvas test: 2d.path.arcTo.zero.1</p>
12197 <!-- Testing: arcTo() with zero radius draws a straight line from P0 to P1 -->
12198 <canvas id="c373" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12199 <script>
12200
12201
12202 function test_2d_path_arcTo_zero_1() {
12203
12204 var canvas = document.getElementById('c373');
12205 var ctx = canvas.getContext('2d');
12206
12207 var _thrown_outer = false;
12208 try {
12209
12210 ctx.fillStyle = '#f00';
12211 ctx.fillRect(0, 0, 100, 50);
12212 ctx.lineWidth = 50;
12213
12214 ctx.strokeStyle = '#0f0';
12215 ctx.beginPath();
12216 ctx.moveTo(0, 25);
12217 ctx.arcTo(100, 25, 100, 100, 0);
12218 ctx.stroke();
12219
12220 ctx.strokeStyle = '#f00';
12221 ctx.beginPath();
12222 ctx.moveTo(0, -25);
12223 ctx.arcTo(50, -25, 50, 50, 0);
12224 ctx.stroke();
12225
12226 isPixel(ctx, 50,25, 0,255,0,255, 0);
12227
12228 } catch (e) {
12229 _thrown_outer = true;
12230 }
12231 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
12232
12233
12234 }
12235 </script>
12236
12237 <!-- [[[ test_2d.path.arcTo.zero.2.html ]]] -->
12238
12239 <p>Canvas test: 2d.path.arcTo.zero.2</p>
12240 <!-- Testing: arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear -->
12241 <canvas id="c374" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12242 <script>
12243
12244
12245 function test_2d_path_arcTo_zero_2() {
12246
12247 var canvas = document.getElementById('c374');
12248 var ctx = canvas.getContext('2d');
12249
12250 var _thrown_outer = false;
12251 try {
12252
12253 ctx.fillStyle = '#f00';
12254 ctx.fillRect(0, 0, 100, 50);
12255 ctx.lineWidth = 50;
12256
12257 ctx.strokeStyle = '#0f0';
12258 ctx.beginPath();
12259 ctx.moveTo(0, 25);
12260 ctx.arcTo(100, 25, -100, 25, 0);
12261 ctx.stroke();
12262
12263 ctx.strokeStyle = '#f00';
12264 ctx.beginPath();
12265 ctx.moveTo(100, 25);
12266 ctx.arcTo(200, 25, 50, 25, 0);
12267 ctx.stroke();
12268
12269 isPixel(ctx, 50,25, 0,255,0,255, 0);
12270
12271 } catch (e) {
12272 _thrown_outer = true;
12273 }
12274 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
12275
12276
12277 }
12278 </script>
12279
12280 <!-- [[[ test_2d.path.beginPath.html ]]] -->
12281
12282 <p>Canvas test: 2d.path.beginPath</p>
12283 <canvas id="c375" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
12284 <script>
12285
12286
12287 function test_2d_path_beginPath() {
12288
12289 var canvas = document.getElementById('c375');
12290 var ctx = canvas.getContext('2d');
12291
12292 ctx.rect(0, 0, 100, 50);
12293 ctx.beginPath();
12294 ctx.fillStyle = '#f00';
12295 ctx.fill();
12296 isPixel(ctx, 50,25, 0,0,0,0, 0);
12297
12298
12299 }
12300 </script>
12301
12302 <!-- [[[ test_2d.path.bezierCurveTo.basic.html ]]] -->
12303
12304 <p>Canvas test: 2d.path.bezierCurveTo.basic</p>
12305 <canvas id="c376" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12306 <script>
12307
12308
12309 function test_2d_path_bezierCurveTo_basic() {
12310
12311 var canvas = document.getElementById('c376');
12312 var ctx = canvas.getContext('2d');
12313
12314 ctx.strokeStyle = '#0f0';
12315 ctx.lineWidth = 50;
12316 ctx.beginPath();
12317 ctx.moveTo(0, 25);
12318 ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
12319 ctx.stroke();
12320 isPixel(ctx, 50,25, 0,255,0,255, 0);
12321
12322
12323 }
12324 </script>
12325
12326 <!-- [[[ test_2d.path.bezierCurveTo.emptysubpath.html ]]] -->
12327
12328 <p>Canvas test: 2d.path.bezierCurveTo.emptysubpath</p>
12329 <canvas id="c377" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
12330 <script>
12331
12332
12333
12334 function test_2d_path_bezierCurveTo_emptysubpath() {
12335
12336 var canvas = document.getElementById('c377');
12337 var ctx = canvas.getContext('2d');
12338
12339 ctx.strokeStyle = '#f00';
12340 ctx.lineWidth = 50;
12341 ctx.beginPath();
12342 ctx.bezierCurveTo(0, 25, 0, 25, 0, 25);
12343 ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
12344 ctx.stroke();
12345 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
12346
12347
12348 }
12349 </script>
12350
12351 <!-- [[[ test_2d.path.bezierCurveTo.nonfinite.html ]]] -->
12352
12353 <p>Canvas test: 2d.path.bezierCurveTo.nonfinite</p>
12354 <!-- Testing: bezierCurveTo() with Infinity/NaN is ignored -->
12355 <canvas id="c378" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12356 <script>
12357
12358
12359 function test_2d_path_bezierCurveTo_nonfinite() {
12360
12361 var canvas = document.getElementById('c378');
12362 var ctx = canvas.getContext('2d');
12363
12364 var _thrown_outer = false;
12365 try {
12366
12367 ctx.moveTo(0, 0);
12368 ctx.lineTo(100, 0);
12369 ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, 50);
12370 ctx.bezierCurveTo(-Infinity, 50, 0, 50, 0, 50);
12371 ctx.bezierCurveTo(NaN, 50, 0, 50, 0, 50);
12372 ctx.bezierCurveTo(0, Infinity, 0, 50, 0, 50);
12373 ctx.bezierCurveTo(0, -Infinity, 0, 50, 0, 50);
12374 ctx.bezierCurveTo(0, NaN, 0, 50, 0, 50);
12375 ctx.bezierCurveTo(0, 50, Infinity, 50, 0, 50);
12376 ctx.bezierCurveTo(0, 50, -Infinity, 50, 0, 50);
12377 ctx.bezierCurveTo(0, 50, NaN, 50, 0, 50);
12378 ctx.bezierCurveTo(0, 50, 0, Infinity, 0, 50);
12379 ctx.bezierCurveTo(0, 50, 0, -Infinity, 0, 50);
12380 ctx.bezierCurveTo(0, 50, 0, NaN, 0, 50);
12381 ctx.bezierCurveTo(0, 50, 0, 50, Infinity, 50);
12382 ctx.bezierCurveTo(0, 50, 0, 50, -Infinity, 50);
12383 ctx.bezierCurveTo(0, 50, 0, 50, NaN, 50);
12384 ctx.bezierCurveTo(0, 50, 0, 50, 0, Infinity);
12385 ctx.bezierCurveTo(0, 50, 0, 50, 0, -Infinity);
12386 ctx.bezierCurveTo(0, 50, 0, 50, 0, NaN);
12387 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, 50);
12388 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, 50);
12389 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, 50);
12390 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, 50);
12391 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
12392 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
12393 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, 50);
12394 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, Infinity);
12395 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, Infinity);
12396 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, 50);
12397 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, 50);
12398 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
12399 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, Infinity);
12400 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, 50);
12401 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, Infinity);
12402 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, Infinity);
12403 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, 50);
12404 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, 50);
12405 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, 50);
12406 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, Infinity);
12407 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, Infinity);
12408 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, 50);
12409 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, Infinity);
12410 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, Infinity);
12411 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, 50);
12412 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, 50);
12413 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, Infinity);
12414 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, Infinity);
12415 ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, 50);
12416 ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, Infinity);
12417 ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, Infinity);
12418 ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, 50);
12419 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, 50);
12420 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, 50);
12421 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, Infinity);
12422 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, Infinity);
12423 ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, 50);
12424 ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, Infinity);
12425 ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, Infinity);
12426 ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, 50);
12427 ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, 50);
12428 ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, Infinity);
12429 ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, Infinity);
12430 ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, 50);
12431 ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, Infinity);
12432 ctx.bezierCurveTo(0, Infinity, 0, 50, 0, Infinity);
12433 ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, 50);
12434 ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, 50);
12435 ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, Infinity);
12436 ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, Infinity);
12437 ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, 50);
12438 ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, Infinity);
12439 ctx.bezierCurveTo(0, 50, Infinity, 50, 0, Infinity);
12440 ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, 50);
12441 ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, Infinity);
12442 ctx.bezierCurveTo(0, 50, 0, Infinity, 0, Infinity);
12443 ctx.bezierCurveTo(0, 50, 0, 50, Infinity, Infinity);
12444 ctx.lineTo(100, 50);
12445 ctx.lineTo(0, 50);
12446 ctx.fillStyle = '#0f0';
12447 ctx.fill();
12448 isPixel(ctx, 50,25, 0,255,0,255, 0);
12449 isPixel(ctx, 90,45, 0,255,0,255, 0);
12450
12451 } catch (e) {
12452 _thrown_outer = true;
12453 }
12454 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
12455
12456
12457 }
12458 </script>
12459
12460 <!-- [[[ test_2d.path.bezierCurveTo.scaled.html ]]] -->
12461
12462 <p>Canvas test: 2d.path.bezierCurveTo.scaled</p>
12463 <canvas id="c379" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12464 <script>
12465
12466
12467 function test_2d_path_bezierCurveTo_scaled() {
12468
12469 var canvas = document.getElementById('c379');
12470 var ctx = canvas.getContext('2d');
12471
12472 ctx.scale(1000, 1000);
12473 ctx.strokeStyle = '#0f0';
12474 ctx.lineWidth = 0.055;
12475 ctx.beginPath();
12476 ctx.moveTo(-2, 3.1);
12477 ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1);
12478 ctx.stroke();
12479 isPixel(ctx, 50,25, 0,255,0,255, 0);
12480 isPixel(ctx, 1,1, 0,255,0,255, 0);
12481 isPixel(ctx, 98,1, 0,255,0,255, 0);
12482 isPixel(ctx, 1,48, 0,255,0,255, 0);
12483 isPixel(ctx, 98,48, 0,255,0,255, 0);
12484
12485
12486 }
12487 </script>
12488
12489 <!-- [[[ test_2d.path.bezierCurveTo.shape.html ]]] -->
12490
12491 <p>Canvas test: 2d.path.bezierCurveTo.shape</p>
12492 <canvas id="c380" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12493 <script>
12494
12495
12496 function test_2d_path_bezierCurveTo_shape() {
12497
12498 var canvas = document.getElementById('c380');
12499 var ctx = canvas.getContext('2d');
12500
12501 ctx.strokeStyle = '#0f0';
12502 ctx.lineWidth = 55;
12503 ctx.beginPath();
12504 ctx.moveTo(-2000, 3100);
12505 ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100);
12506 ctx.stroke();
12507 isPixel(ctx, 50,25, 0,255,0,255, 0);
12508 isPixel(ctx, 1,1, 0,255,0,255, 0);
12509 isPixel(ctx, 98,1, 0,255,0,255, 0);
12510 isPixel(ctx, 1,48, 0,255,0,255, 0);
12511 isPixel(ctx, 98,48, 0,255,0,255, 0);
12512
12513
12514 }
12515 </script>
12516
12517 <!-- [[[ test_2d.path.clip.basic.1.html ]]] -->
12518
12519 <p>Canvas test: 2d.path.clip.basic.1</p>
12520 <canvas id="c381" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12521 <script>
12522
12523
12524 function test_2d_path_clip_basic_1() {
12525
12526 var canvas = document.getElementById('c381');
12527 var ctx = canvas.getContext('2d');
12528
12529 ctx.fillStyle = '#f00';
12530 ctx.fillRect(0, 0, 100, 50);
12531
12532 ctx.beginPath();
12533 ctx.rect(0, 0, 100, 50);
12534 ctx.clip();
12535
12536 ctx.fillStyle = '#0f0';
12537 ctx.fillRect(0, 0, 100, 50);
12538
12539 isPixel(ctx, 50,25, 0,255,0,255, 0);
12540
12541
12542 }
12543 </script>
12544
12545 <!-- [[[ test_2d.path.clip.basic.2.html ]]] -->
12546
12547 <p>Canvas test: 2d.path.clip.basic.2</p>
12548 <canvas id="c382" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12549 <script>
12550
12551
12552 function test_2d_path_clip_basic_2() {
12553
12554 var canvas = document.getElementById('c382');
12555 var ctx = canvas.getContext('2d');
12556
12557 ctx.fillStyle = '#0f0';
12558 ctx.fillRect(0, 0, 100, 50);
12559
12560 ctx.beginPath();
12561 ctx.rect(-100, 0, 100, 50);
12562 ctx.clip();
12563
12564 ctx.fillStyle = '#f00';
12565 ctx.fillRect(0, 0, 100, 50);
12566
12567 isPixel(ctx, 50,25, 0,255,0,255, 0);
12568
12569
12570 }
12571 </script>
12572
12573 <!-- [[[ test_2d.path.clip.empty.html ]]] -->
12574
12575 <p>Canvas test: 2d.path.clip.empty</p>
12576 <canvas id="c383" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12577 <script>
12578
12579
12580 function test_2d_path_clip_empty() {
12581
12582 var canvas = document.getElementById('c383');
12583 var ctx = canvas.getContext('2d');
12584
12585 ctx.fillStyle = '#0f0';
12586 ctx.fillRect(0, 0, 100, 50);
12587
12588 ctx.beginPath();
12589 ctx.clip();
12590
12591 ctx.fillStyle = '#f00';
12592 ctx.fillRect(0, 0, 100, 50);
12593
12594 isPixel(ctx, 50,25, 0,255,0,255, 0);
12595
12596
12597 }
12598 </script>
12599
12600 <!-- [[[ test_2d.path.clip.intersect.html ]]] -->
12601
12602 <p>Canvas test: 2d.path.clip.intersect</p>
12603 <canvas id="c384" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12604 <script>
12605
12606
12607 function test_2d_path_clip_intersect() {
12608
12609 var canvas = document.getElementById('c384');
12610 var ctx = canvas.getContext('2d');
12611
12612 ctx.fillStyle = '#0f0';
12613 ctx.fillRect(0, 0, 100, 50);
12614
12615 ctx.beginPath();
12616 ctx.rect(0, 0, 50, 50);
12617 ctx.clip();
12618 ctx.beginPath();
12619 ctx.rect(50, 0, 50, 50)
12620 ctx.clip();
12621
12622 ctx.fillStyle = '#f00';
12623 ctx.fillRect(0, 0, 100, 50);
12624
12625 isPixel(ctx, 50,25, 0,255,0,255, 0);
12626
12627
12628 }
12629 </script>
12630
12631 <!-- [[[ test_2d.path.clip.unaffected.html ]]] -->
12632
12633 <p>Canvas test: 2d.path.clip.unaffected</p>
12634 <canvas id="c385" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12635 <script>
12636
12637
12638 function test_2d_path_clip_unaffected() {
12639
12640 var canvas = document.getElementById('c385');
12641 var ctx = canvas.getContext('2d');
12642
12643 ctx.fillStyle = '#f00';
12644 ctx.fillRect(0, 0, 100, 50);
12645
12646 ctx.fillStyle = '#0f0';
12647
12648 ctx.beginPath();
12649 ctx.lineTo(0, 0);
12650 ctx.lineTo(0, 50);
12651 ctx.lineTo(100, 50);
12652 ctx.lineTo(100, 0);
12653 ctx.clip();
12654
12655 ctx.lineTo(0, 0);
12656 ctx.fill();
12657
12658 isPixel(ctx, 50,25, 0,255,0,255, 0);
12659
12660
12661 }
12662 </script>
12663
12664 <!-- [[[ test_2d.path.clip.winding.1.html ]]] -->
12665
12666 <p>Canvas test: 2d.path.clip.winding.1</p>
12667 <canvas id="c386" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12668 <script>
12669
12670
12671 function test_2d_path_clip_winding_1() {
12672
12673 var canvas = document.getElementById('c386');
12674 var ctx = canvas.getContext('2d');
12675
12676 ctx.fillStyle = '#0f0';
12677 ctx.fillRect(0, 0, 100, 50);
12678
12679 ctx.beginPath();
12680 ctx.moveTo(-10, -10);
12681 ctx.lineTo(110, -10);
12682 ctx.lineTo(110, 60);
12683 ctx.lineTo(-10, 60);
12684 ctx.lineTo(-10, -10);
12685 ctx.lineTo(0, 0);
12686 ctx.lineTo(0, 50);
12687 ctx.lineTo(100, 50);
12688 ctx.lineTo(100, 0);
12689 ctx.clip();
12690
12691 ctx.fillStyle = '#f00';
12692 ctx.fillRect(0, 0, 100, 50);
12693
12694 isPixel(ctx, 50,25, 0,255,0,255, 0);
12695
12696
12697 }
12698 </script>
12699
12700 <!-- [[[ test_2d.path.clip.winding.2.html ]]] -->
12701
12702 <p>Canvas test: 2d.path.clip.winding.2</p>
12703 <canvas id="c387" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12704 <script>
12705
12706
12707 function test_2d_path_clip_winding_2() {
12708
12709 var canvas = document.getElementById('c387');
12710 var ctx = canvas.getContext('2d');
12711
12712 ctx.fillStyle = '#f00';
12713 ctx.fillRect(0, 0, 100, 50);
12714
12715 ctx.beginPath();
12716 ctx.moveTo(-10, -10);
12717 ctx.lineTo(110, -10);
12718 ctx.lineTo(110, 60);
12719 ctx.lineTo(-10, 60);
12720 ctx.lineTo(-10, -10);
12721 ctx.clip();
12722
12723 ctx.beginPath();
12724 ctx.lineTo(0, 0);
12725 ctx.lineTo(0, 50);
12726 ctx.lineTo(100, 50);
12727 ctx.lineTo(100, 0);
12728 ctx.lineTo(0, 0);
12729 ctx.clip();
12730
12731 ctx.fillStyle = '#0f0';
12732 ctx.fillRect(0, 0, 100, 50);
12733
12734 isPixel(ctx, 50,25, 0,255,0,255, 0);
12735
12736
12737 }
12738 </script>
12739
12740 <!-- [[[ test_2d.path.closePath.empty.html ]]] -->
12741
12742 <p>Canvas test: 2d.path.closePath.empty</p>
12743 <canvas id="c388" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
12744 <script>
12745
12746
12747 function test_2d_path_closePath_empty() {
12748
12749 var canvas = document.getElementById('c388');
12750 var ctx = canvas.getContext('2d');
12751
12752 ctx.closePath();
12753 ctx.fillStyle = '#f00';
12754 ctx.fill();
12755 isPixel(ctx, 50,25, 0,0,0,0, 0);
12756
12757
12758 }
12759 </script>
12760
12761 <!-- [[[ test_2d.path.closePath.newline.html ]]] -->
12762
12763 <p>Canvas test: 2d.path.closePath.newline</p>
12764 <canvas id="c389" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12765 <script>
12766
12767
12768 function test_2d_path_closePath_newline() {
12769
12770 var canvas = document.getElementById('c389');
12771 var ctx = canvas.getContext('2d');
12772
12773 ctx.strokeStyle = '#0f0';
12774 ctx.lineWidth = 50;
12775 ctx.moveTo(-100, 25);
12776 ctx.lineTo(-100, -100);
12777 ctx.lineTo(200, -100);
12778 ctx.lineTo(200, 25);
12779 ctx.closePath();
12780 ctx.stroke();
12781 isPixel(ctx, 50,25, 0,255,0,255, 0);
12782
12783
12784 }
12785 </script>
12786
12787 <!-- [[[ test_2d.path.closePath.nextpoint.html ]]] -->
12788
12789 <p>Canvas test: 2d.path.closePath.nextpoint</p>
12790 <canvas id="c390" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12791 <script>
12792
12793
12794 function test_2d_path_closePath_nextpoint() {
12795
12796 var canvas = document.getElementById('c390');
12797 var ctx = canvas.getContext('2d');
12798
12799 ctx.strokeStyle = '#0f0';
12800 ctx.lineWidth = 50;
12801 ctx.moveTo(-100, 25);
12802 ctx.lineTo(-100, -1000);
12803 ctx.closePath();
12804 ctx.lineTo(1000, 25);
12805 ctx.stroke();
12806 isPixel(ctx, 50,25, 0,255,0,255, 0);
12807
12808
12809 }
12810 </script>
12811
12812 <!-- [[[ test_2d.path.fill.closed.basic.html ]]] -->
12813
12814 <p>Canvas test: 2d.path.fill.closed.basic</p>
12815 <canvas id="c391" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12816 <script>
12817
12818
12819 function test_2d_path_fill_closed_basic() {
12820
12821 var canvas = document.getElementById('c391');
12822 var ctx = canvas.getContext('2d');
12823
12824 ctx.fillStyle = '#f00';
12825 ctx.fillRect(0, 0, 100, 50);
12826
12827 ctx.fillStyle = '#0f0';
12828 ctx.moveTo(0, 0);
12829 ctx.lineTo(100, 0);
12830 ctx.lineTo(100, 50);
12831 ctx.lineTo(0, 50);
12832 ctx.fill();
12833
12834 isPixel(ctx, 50,25, 0,255,0,255, 0);
12835
12836
12837 }
12838 </script>
12839
12840 <!-- [[[ test_2d.path.fill.closed.unaffected.html ]]] -->
12841
12842 <p>Canvas test: 2d.path.fill.closed.unaffected</p>
12843 <canvas id="c392" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12844 <script>
12845
12846
12847 function test_2d_path_fill_closed_unaffected() {
12848
12849 var canvas = document.getElementById('c392');
12850 var ctx = canvas.getContext('2d');
12851
12852 ctx.fillStyle = '#00f';
12853 ctx.fillRect(0, 0, 100, 50);
12854
12855 ctx.moveTo(0, 0);
12856 ctx.lineTo(100, 0);
12857 ctx.lineTo(100, 50);
12858 ctx.fillStyle = '#f00';
12859 ctx.fill();
12860 ctx.lineTo(0, 50);
12861 ctx.fillStyle = '#0f0';
12862 ctx.fill();
12863
12864 isPixel(ctx, 90,10, 0,255,0,255, 0);
12865 isPixel(ctx, 10,40, 0,255,0,255, 0);
12866
12867
12868 }
12869 </script>
12870
12871 <!-- [[[ test_2d.path.fill.overlap.html ]]] -->
12872
12873 <p>Canvas test: 2d.path.fill.overlap</p>
12874 <canvas id="c393" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12875 <script>
12876
12877
12878 function test_2d_path_fill_overlap() {
12879
12880 var canvas = document.getElementById('c393');
12881 var ctx = canvas.getContext('2d');
12882
12883 ctx.fillStyle = '#000';
12884 ctx.fillRect(0, 0, 100, 50);
12885
12886 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
12887 ctx.rect(0, 0, 100, 50);
12888 ctx.closePath();
12889 ctx.rect(10, 10, 80, 30);
12890 ctx.fill();
12891
12892 isPixel(ctx, 50,25, 0,127,0,255, 1);
12893
12894
12895 }
12896 </script>
12897
12898 <!-- [[[ test_2d.path.fill.winding.add.html ]]] -->
12899
12900 <p>Canvas test: 2d.path.fill.winding.add</p>
12901 <canvas id="c394" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12902 <script>
12903
12904
12905 function test_2d_path_fill_winding_add() {
12906
12907 var canvas = document.getElementById('c394');
12908 var ctx = canvas.getContext('2d');
12909
12910 ctx.fillStyle = '#f00';
12911 ctx.fillRect(0, 0, 100, 50);
12912
12913 ctx.fillStyle = '#0f0';
12914 ctx.moveTo(-10, -10);
12915 ctx.lineTo(110, -10);
12916 ctx.lineTo(110, 60);
12917 ctx.lineTo(-10, 60);
12918 ctx.lineTo(-10, -10);
12919 ctx.lineTo(0, 0);
12920 ctx.lineTo(100, 0);
12921 ctx.lineTo(100, 50);
12922 ctx.lineTo(0, 50);
12923 ctx.fill();
12924
12925 isPixel(ctx, 50,25, 0,255,0,255, 0);
12926
12927
12928 }
12929 </script>
12930
12931 <!-- [[[ test_2d.path.fill.winding.subtract.1.html ]]] -->
12932
12933 <p>Canvas test: 2d.path.fill.winding.subtract.1</p>
12934 <canvas id="c395" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12935 <script>
12936
12937
12938 function test_2d_path_fill_winding_subtract_1() {
12939
12940 var canvas = document.getElementById('c395');
12941 var ctx = canvas.getContext('2d');
12942
12943 ctx.fillStyle = '#0f0';
12944 ctx.fillRect(0, 0, 100, 50);
12945
12946 ctx.fillStyle = '#f00';
12947 ctx.moveTo(-10, -10);
12948 ctx.lineTo(110, -10);
12949 ctx.lineTo(110, 60);
12950 ctx.lineTo(-10, 60);
12951 ctx.lineTo(-10, -10);
12952 ctx.lineTo(0, 0);
12953 ctx.lineTo(0, 50);
12954 ctx.lineTo(100, 50);
12955 ctx.lineTo(100, 0);
12956 ctx.fill();
12957
12958 isPixel(ctx, 50,25, 0,255,0,255, 0);
12959
12960
12961 }
12962 </script>
12963
12964 <!-- [[[ test_2d.path.fill.winding.subtract.2.html ]]] -->
12965
12966 <p>Canvas test: 2d.path.fill.winding.subtract.2</p>
12967 <canvas id="c396" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12968 <script>
12969
12970
12971 function test_2d_path_fill_winding_subtract_2() {
12972
12973 var canvas = document.getElementById('c396');
12974 var ctx = canvas.getContext('2d');
12975
12976 ctx.fillStyle = '#0f0';
12977 ctx.fillRect(0, 0, 100, 50);
12978
12979 ctx.fillStyle = '#f00';
12980 ctx.moveTo(-10, -10);
12981 ctx.lineTo(110, -10);
12982 ctx.lineTo(110, 60);
12983 ctx.lineTo(-10, 60);
12984 ctx.moveTo(0, 0);
12985 ctx.lineTo(0, 50);
12986 ctx.lineTo(100, 50);
12987 ctx.lineTo(100, 0);
12988 ctx.fill();
12989
12990 isPixel(ctx, 50,25, 0,255,0,255, 0);
12991
12992
12993 }
12994 </script>
12995
12996 <!-- [[[ test_2d.path.fill.winding.subtract.3.html ]]] -->
12997
12998 <p>Canvas test: 2d.path.fill.winding.subtract.3</p>
12999 <canvas id="c397" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13000 <script>
13001
13002
13003 function test_2d_path_fill_winding_subtract_3() {
13004
13005 var canvas = document.getElementById('c397');
13006 var ctx = canvas.getContext('2d');
13007
13008 ctx.fillStyle = '#f00';
13009 ctx.fillRect(0, 0, 100, 50);
13010
13011 ctx.fillStyle = '#0f0';
13012 ctx.moveTo(-10, -10);
13013 ctx.lineTo(110, -10);
13014 ctx.lineTo(110, 60);
13015 ctx.lineTo(-10, 60);
13016 ctx.lineTo(-10, -10);
13017 ctx.lineTo(-20, -20);
13018 ctx.lineTo(120, -20);
13019 ctx.lineTo(120, 70);
13020 ctx.lineTo(-20, 70);
13021 ctx.lineTo(-20, -20);
13022 ctx.lineTo(0, 0);
13023 ctx.lineTo(0, 50);
13024 ctx.lineTo(100, 50);
13025 ctx.lineTo(100, 0);
13026 ctx.fill();
13027
13028 isPixel(ctx, 50,25, 0,255,0,255, 0);
13029
13030
13031 }
13032 </script>
13033
13034 <!-- [[[ test_2d.path.initial.html ]]] -->
13035
13036 <p>Canvas test: 2d.path.initial</p>
13037 <canvas id="c398" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
13038 <script>
13039
13040
13041
13042 function test_2d_path_initial() {
13043
13044 var canvas = document.getElementById('c398');
13045 var ctx = canvas.getContext('2d');
13046
13047 ctx.lineTo(0, 0);
13048 ctx.lineTo(100, 0);
13049 ctx.lineTo(100, 50);
13050 ctx.lineTo(0, 50);
13051 ctx.closePath();
13052 ctx.fillStyle = '#f00';
13053 ctx.fill();
13054 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
13055
13056
13057 }
13058 </script>
13059
13060 <!-- [[[ test_2d.path.isPointInPath.arc.html ]]] -->
13061
13062 <p>Canvas test: 2d.path.isPointInPath.arc</p>
13063 <!-- Testing: isPointInPath() works on arcs -->
13064 <canvas id="c399" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13065 <script>
13066
13067 function test_2d_path_isPointInPath_arc() {
13068
13069 var canvas = document.getElementById('c399');
13070 var ctx = canvas.getContext('2d');
13071
13072 ctx.arc(50, 25, 10, 0, Math.PI, false);
13073 ok(ctx.isPointInPath(50, 10) === false, "ctx.isPointInPath(50, 10) === false");
13074 ok(ctx.isPointInPath(50, 20) === false, "ctx.isPointInPath(50, 20) === false");
13075 ok(ctx.isPointInPath(50, 30) === true, "ctx.isPointInPath(50, 30) === true");
13076 ok(ctx.isPointInPath(50, 40) === false, "ctx.isPointInPath(50, 40) === false");
13077 ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false");
13078 ok(ctx.isPointInPath(70, 20) === false, "ctx.isPointInPath(70, 20) === false");
13079 ok(ctx.isPointInPath(30, 30) === false, "ctx.isPointInPath(30, 30) === false");
13080 ok(ctx.isPointInPath(70, 30) === false, "ctx.isPointInPath(70, 30) === false");
13081
13082
13083 }
13084 </script>
13085
13086 <!-- [[[ test_2d.path.isPointInPath.basic.1.html ]]] -->
13087
13088 <p>Canvas test: 2d.path.isPointInPath.basic.1</p>
13089 <!-- Testing: isPointInPath() detects whether the point is inside the path -->
13090 <canvas id="c400" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13091 <script>
13092
13093 function test_2d_path_isPointInPath_basic_1() {
13094
13095 var canvas = document.getElementById('c400');
13096 var ctx = canvas.getContext('2d');
13097
13098 ctx.rect(0, 0, 20, 20);
13099 ok(ctx.isPointInPath(10, 10) === true, "ctx.isPointInPath(10, 10) === true");
13100 ok(ctx.isPointInPath(30, 10) === false, "ctx.isPointInPath(30, 10) === false");
13101
13102
13103 }
13104 </script>
13105
13106 <!-- [[[ test_2d.path.isPointInPath.basic.2.html ]]] -->
13107
13108 <p>Canvas test: 2d.path.isPointInPath.basic.2</p>
13109 <!-- Testing: isPointInPath() detects whether the point is inside the path -->
13110 <canvas id="c401" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13111 <script>
13112
13113 function test_2d_path_isPointInPath_basic_2() {
13114
13115 var canvas = document.getElementById('c401');
13116 var ctx = canvas.getContext('2d');
13117
13118 ctx.rect(20, 0, 20, 20);
13119 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
13120 ok(ctx.isPointInPath(30, 10) === true, "ctx.isPointInPath(30, 10) === true");
13121
13122
13123 }
13124 </script>
13125
13126 <!-- [[[ test_2d.path.isPointInPath.bezier.html ]]] -->
13127
13128 <p>Canvas test: 2d.path.isPointInPath.bezier</p>
13129 <!-- Testing: isPointInPath() works on Bezier curves -->
13130 <canvas id="c402" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13131 <script>
13132
13133 function test_2d_path_isPointInPath_bezier() {
13134
13135 var canvas = document.getElementById('c402');
13136 var ctx = canvas.getContext('2d');
13137
13138 ctx.moveTo(25, 25);
13139 ctx.bezierCurveTo(50, -50, 50, 100, 75, 25);
13140 ok(ctx.isPointInPath(25, 20) == false, "ctx.isPointInPath(25, 20) == false");
13141 ok(ctx.isPointInPath(25, 30) == false, "ctx.isPointInPath(25, 30) == false");
13142 ok(ctx.isPointInPath(30, 20) == true, "ctx.isPointInPath(30, 20) == true");
13143 ok(ctx.isPointInPath(30, 30) == false, "ctx.isPointInPath(30, 30) == false");
13144 ok(ctx.isPointInPath(40, 2) == false, "ctx.isPointInPath(40, 2) == false");
13145 ok(ctx.isPointInPath(40, 20) == true, "ctx.isPointInPath(40, 20) == true");
13146 ok(ctx.isPointInPath(40, 30) == false, "ctx.isPointInPath(40, 30) == false");
13147 ok(ctx.isPointInPath(40, 47) == false, "ctx.isPointInPath(40, 47) == false");
13148 ok(ctx.isPointInPath(45, 20) == true, "ctx.isPointInPath(45, 20) == true");
13149 ok(ctx.isPointInPath(45, 30) == false, "ctx.isPointInPath(45, 30) == false");
13150 ok(ctx.isPointInPath(55, 20) == false, "ctx.isPointInPath(55, 20) == false");
13151 ok(ctx.isPointInPath(55, 30) == true, "ctx.isPointInPath(55, 30) == true");
13152 ok(ctx.isPointInPath(60, 2) == false, "ctx.isPointInPath(60, 2) == false");
13153 ok(ctx.isPointInPath(60, 20) == false, "ctx.isPointInPath(60, 20) == false");
13154 ok(ctx.isPointInPath(60, 30) == true, "ctx.isPointInPath(60, 30) == true");
13155 ok(ctx.isPointInPath(60, 47) == false, "ctx.isPointInPath(60, 47) == false");
13156 ok(ctx.isPointInPath(70, 20) == false, "ctx.isPointInPath(70, 20) == false");
13157 ok(ctx.isPointInPath(70, 30) == true, "ctx.isPointInPath(70, 30) == true");
13158 ok(ctx.isPointInPath(75, 20) == false, "ctx.isPointInPath(75, 20) == false");
13159 ok(ctx.isPointInPath(75, 30) == false, "ctx.isPointInPath(75, 30) == false");
13160
13161
13162 }
13163 </script>
13164
13165 <!-- [[[ test_2d.path.isPointInPath.bigarc.html ]]] -->
13166
13167 <p>Canvas test: 2d.path.isPointInPath.bigarc</p>
13168 <!-- Testing: isPointInPath() works on unclosed arcs larger than 2pi -->
13169 <canvas id="c403" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13170 <script>
13171
13172 function test_2d_path_isPointInPath_bigarc() {
13173
13174 var canvas = document.getElementById('c403');
13175 var ctx = canvas.getContext('2d');
13176
13177 ctx.arc(50, 25, 10, 0, 7, false);
13178 ok(ctx.isPointInPath(50, 10) === false, "ctx.isPointInPath(50, 10) === false");
13179 ok(ctx.isPointInPath(50, 20) === true, "ctx.isPointInPath(50, 20) === true");
13180 ok(ctx.isPointInPath(50, 30) === true, "ctx.isPointInPath(50, 30) === true");
13181 ok(ctx.isPointInPath(50, 40) === false, "ctx.isPointInPath(50, 40) === false");
13182 ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false");
13183 ok(ctx.isPointInPath(70, 20) === false, "ctx.isPointInPath(70, 20) === false");
13184 ok(ctx.isPointInPath(30, 30) === false, "ctx.isPointInPath(30, 30) === false");
13185 ok(ctx.isPointInPath(70, 30) === false, "ctx.isPointInPath(70, 30) === false");
13186
13187
13188 }
13189 </script>
13190
13191 <!-- [[[ test_2d.path.isPointInPath.edge.html ]]] -->
13192
13193 <p>Canvas test: 2d.path.isPointInPath.edge</p>
13194 <!-- Testing: isPointInPath() counts points on the path as being inside -->
13195 <canvas id="c404" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13196 <script>
13197
13198 function test_2d_path_isPointInPath_edge() {
13199
13200 var canvas = document.getElementById('c404');
13201 var ctx = canvas.getContext('2d');
13202
13203 ctx.rect(0, 0, 20, 20);
13204
13205 ok(ctx.isPointInPath(0, 0) === true, "ctx.isPointInPath(0, 0) === true");
13206 ok(ctx.isPointInPath(10, 0) === true, "ctx.isPointInPath(10, 0) === true");
13207 ok(ctx.isPointInPath(20, 0) === true, "ctx.isPointInPath(20, 0) === true");
13208 ok(ctx.isPointInPath(20, 10) === true, "ctx.isPointInPath(20, 10) === true");
13209 ok(ctx.isPointInPath(20, 20) === true, "ctx.isPointInPath(20, 20) === true");
13210 ok(ctx.isPointInPath(10, 20) === true, "ctx.isPointInPath(10, 20) === true");
13211 ok(ctx.isPointInPath(0, 20) === true, "ctx.isPointInPath(0, 20) === true");
13212 ok(ctx.isPointInPath(0, 10) === true, "ctx.isPointInPath(0, 10) === true");
13213 ok(ctx.isPointInPath(10, -0.01) === false, "ctx.isPointInPath(10, -0.01) === false");
13214 ok(ctx.isPointInPath(10, 20.01) === false, "ctx.isPointInPath(10, 20.01) === false");
13215 ok(ctx.isPointInPath(-0.01, 10) === false, "ctx.isPointInPath(-0.01, 10) === false");
13216 ok(ctx.isPointInPath(20.01, 10) === false, "ctx.isPointInPath(20.01, 10) === false");
13217
13218 }
13219 </script>
13220
13221 <!-- [[[ test_2d.path.isPointInPath.empty.html ]]] -->
13222
13223 <p>Canvas test: 2d.path.isPointInPath.empty</p>
13224 <!-- Testing: isPointInPath() works when there is no path -->
13225 <canvas id="c405" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13226 <script>
13227
13228 function test_2d_path_isPointInPath_empty() {
13229
13230 var canvas = document.getElementById('c405');
13231 var ctx = canvas.getContext('2d');
13232
13233 ok(ctx.isPointInPath(0, 0) === false, "ctx.isPointInPath(0, 0) === false");
13234
13235
13236 }
13237 </script>
13238
13239 <!-- [[[ test_2d.path.isPointInPath.nonfinite.html ]]] -->
13240
13241 <p>Canvas test: 2d.path.isPointInPath.nonfinite</p>
13242 <!-- Testing: isPointInPath() returns false for non-finite arguments -->
13243 <canvas id="c406" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13244 <script>
13245
13246 function test_2d_path_isPointInPath_nonfinite() {
13247
13248 var canvas = document.getElementById('c406');
13249 var ctx = canvas.getContext('2d');
13250
13251 var _thrown_outer = false;
13252 try {
13253
13254 ctx.rect(-100, -50, 200, 100);
13255 ok(ctx.isPointInPath(Infinity, 0) === false, "ctx.isPointInPath(Infinity, 0) === false");
13256 ok(ctx.isPointInPath(-Infinity, 0) === false, "ctx.isPointInPath(-Infinity, 0) === false");
13257 ok(ctx.isPointInPath(NaN, 0) === false, "ctx.isPointInPath(NaN, 0) === false");
13258 ok(ctx.isPointInPath(0, Infinity) === false, "ctx.isPointInPath(0, Infinity) === false");
13259 ok(ctx.isPointInPath(0, -Infinity) === false, "ctx.isPointInPath(0, -Infinity) === false");
13260 ok(ctx.isPointInPath(0, NaN) === false, "ctx.isPointInPath(0, NaN) === false");
13261 ok(ctx.isPointInPath(NaN, NaN) === false, "ctx.isPointInPath(NaN, NaN) === false");
13262
13263 } catch (e) {
13264 _thrown_outer = true;
13265 }
13266 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
13267
13268
13269 }
13270 </script>
13271
13272 <!-- [[[ test_2d.path.isPointInPath.outside.html ]]] -->
13273
13274 <p>Canvas test: 2d.path.isPointInPath.outside</p>
13275 <!-- Testing: isPointInPath() works on paths outside the canvas -->
13276 <canvas id="c407" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13277 <script>
13278
13279 function test_2d_path_isPointInPath_outside() {
13280
13281 var canvas = document.getElementById('c407');
13282 var ctx = canvas.getContext('2d');
13283
13284 ctx.rect(0, -100, 20, 20);
13285 ctx.rect(20, -10, 20, 20);
13286 ok(ctx.isPointInPath(10, -110) === false, "ctx.isPointInPath(10, -110) === false");
13287 ok(ctx.isPointInPath(10, -90) === true, "ctx.isPointInPath(10, -90) === true");
13288 ok(ctx.isPointInPath(10, -70) === false, "ctx.isPointInPath(10, -70) === false");
13289 ok(ctx.isPointInPath(30, -20) === false, "ctx.isPointInPath(30, -20) === false");
13290 ok(ctx.isPointInPath(30, 0) === true, "ctx.isPointInPath(30, 0) === true");
13291 ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false");
13292
13293
13294 }
13295 </script>
13296
13297 <!-- [[[ test_2d.path.isPointInPath.subpath.html ]]] -->
13298
13299 <p>Canvas test: 2d.path.isPointInPath.subpath</p>
13300 <!-- Testing: isPointInPath() uses the current path, not just the subpath -->
13301 <canvas id="c408" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13302 <script>
13303
13304 function test_2d_path_isPointInPath_subpath() {
13305
13306 var canvas = document.getElementById('c408');
13307 var ctx = canvas.getContext('2d');
13308
13309 ctx.rect(0, 0, 20, 20);
13310 ctx.beginPath();
13311 ctx.rect(20, 0, 20, 20);
13312 ctx.closePath();
13313 ctx.rect(40, 0, 20, 20);
13314 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
13315 ok(ctx.isPointInPath(30, 10) === true, "ctx.isPointInPath(30, 10) === true");
13316 ok(ctx.isPointInPath(50, 10) === true, "ctx.isPointInPath(50, 10) === true");
13317
13318
13319 }
13320 </script>
13321
13322 <!-- [[[ test_2d.path.isPointInPath.transform.1.html ]]] -->
13323
13324 <p>Canvas test: 2d.path.isPointInPath.transform.1 - bug 405300</p>
13325 <!-- Testing: isPointInPath() handles transformations correctly -->
13326 <canvas id="c409" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13327 <script>
13328
13329 function test_2d_path_isPointInPath_transform_1() {
13330
13331 var canvas = document.getElementById('c409');
13332 var ctx = canvas.getContext('2d');
13333
13334 ctx.translate(50, 0);
13335 ctx.rect(0, 0, 20, 20);
13336 ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false");
13337 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
13338 ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false");
13339 ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true");
13340 ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true");
13341 ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false");
13342
13343
13344 }
13345 </script>
13346
13347 <!-- [[[ test_2d.path.isPointInPath.transform.2.html ]]] -->
13348
13349 <p>Canvas test: 2d.path.isPointInPath.transform.2 - bug 405300</p>
13350 <!-- Testing: isPointInPath() handles transformations correctly -->
13351 <canvas id="c410" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13352 <script>
13353
13354 function test_2d_path_isPointInPath_transform_2() {
13355
13356 var canvas = document.getElementById('c410');
13357 var ctx = canvas.getContext('2d');
13358
13359 ctx.rect(50, 0, 20, 20);
13360 ctx.translate(50, 0);
13361 ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false");
13362 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
13363 ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false");
13364 ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true");
13365 ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true");
13366 ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false");
13367
13368
13369 }
13370 </script>
13371
13372 <!-- [[[ test_2d.path.isPointInPath.transform.3.html ]]] -->
13373
13374 <p>Canvas test: 2d.path.isPointInPath.transform.3 - bug 405300</p>
13375 <!-- Testing: isPointInPath() handles transformations correctly -->
13376 <canvas id="c411" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13377 <script>
13378
13379 function test_2d_path_isPointInPath_transform_3() {
13380
13381 var canvas = document.getElementById('c411');
13382 var ctx = canvas.getContext('2d');
13383
13384 ctx.scale(-1, 1);
13385 ctx.rect(-70, 0, 20, 20);
13386 ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false");
13387 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
13388 ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false");
13389 ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true");
13390 ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true");
13391 ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false");
13392
13393
13394 }
13395 </script>
13396
13397 <!-- [[[ test_2d.path.isPointInPath.unclosed.html ]]] -->
13398
13399 <p>Canvas test: 2d.path.isPointInPath.unclosed</p>
13400 <!-- Testing: isPointInPath() works on unclosed subpaths -->
13401 <canvas id="c412" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13402 <script>
13403
13404 function test_2d_path_isPointInPath_unclosed() {
13405
13406 var canvas = document.getElementById('c412');
13407 var ctx = canvas.getContext('2d');
13408
13409 ctx.moveTo(0, 0);
13410 ctx.lineTo(20, 0);
13411 ctx.lineTo(20, 20);
13412 ctx.lineTo(0, 20);
13413 ok(ctx.isPointInPath(10, 10) === true, "ctx.isPointInPath(10, 10) === true");
13414 ok(ctx.isPointInPath(30, 10) === false, "ctx.isPointInPath(30, 10) === false");
13415
13416
13417 }
13418 </script>
13419
13420 <!-- [[[ test_2d.path.isPointInPath.winding.html ]]] -->
13421
13422 <p>Canvas test: 2d.path.isPointInPath.winding</p>
13423 <!-- Testing: isPointInPath() uses the non-zero winding number rule -->
13424 <canvas id="c413" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13425 <script>
13426
13427 function test_2d_path_isPointInPath_winding() {
13428
13429 var canvas = document.getElementById('c413');
13430 var ctx = canvas.getContext('2d');
13431
13432 // Create a square ring, using opposite windings to make a hole in the centre
13433 ctx.moveTo(0, 0);
13434 ctx.lineTo(50, 0);
13435 ctx.lineTo(50, 50);
13436 ctx.lineTo(0, 50);
13437 ctx.lineTo(0, 0);
13438 ctx.lineTo(10, 10);
13439 ctx.lineTo(10, 40);
13440 ctx.lineTo(40, 40);
13441 ctx.lineTo(40, 10);
13442 ctx.lineTo(10, 10);
13443
13444 ok(ctx.isPointInPath(5, 5) === true, "ctx.isPointInPath(5, 5) === true");
13445 ok(ctx.isPointInPath(25, 5) === true, "ctx.isPointInPath(25, 5) === true");
13446 ok(ctx.isPointInPath(45, 5) === true, "ctx.isPointInPath(45, 5) === true");
13447 ok(ctx.isPointInPath(5, 25) === true, "ctx.isPointInPath(5, 25) === true");
13448 ok(ctx.isPointInPath(25, 25) === false, "ctx.isPointInPath(25, 25) === false");
13449 ok(ctx.isPointInPath(45, 25) === true, "ctx.isPointInPath(45, 25) === true");
13450 ok(ctx.isPointInPath(5, 45) === true, "ctx.isPointInPath(5, 45) === true");
13451 ok(ctx.isPointInPath(25, 45) === true, "ctx.isPointInPath(25, 45) === true");
13452 ok(ctx.isPointInPath(45, 45) === true, "ctx.isPointInPath(45, 45) === true");
13453
13454
13455 }
13456 </script>
13457
13458 <!-- [[[ test_2d.path.lineTo.basic.html ]]] -->
13459
13460 <p>Canvas test: 2d.path.lineTo.basic</p>
13461 <canvas id="c414" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13462 <script>
13463
13464
13465 function test_2d_path_lineTo_basic() {
13466
13467 var canvas = document.getElementById('c414');
13468 var ctx = canvas.getContext('2d');
13469
13470 ctx.strokeStyle = '#0f0';
13471 ctx.lineWidth = 50;
13472 ctx.beginPath();
13473 ctx.moveTo(0, 25);
13474 ctx.lineTo(100, 25);
13475 ctx.stroke();
13476 isPixel(ctx, 50,25, 0,255,0,255, 0);
13477
13478
13479 }
13480 </script>
13481
13482 <!-- [[[ test_2d.path.lineTo.emptysubpath.html ]]] -->
13483
13484 <p>Canvas test: 2d.path.lineTo.emptysubpath</p>
13485 <canvas id="c415" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
13486 <script>
13487
13488
13489
13490 function test_2d_path_lineTo_emptysubpath() {
13491
13492 var canvas = document.getElementById('c415');
13493 var ctx = canvas.getContext('2d');
13494
13495 ctx.strokeStyle = '#f00';
13496 ctx.lineWidth = 50;
13497 ctx.beginPath();
13498 ctx.lineTo(0, 25);
13499 ctx.lineTo(100, 25);
13500 ctx.stroke();
13501 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
13502
13503
13504 }
13505 </script>
13506
13507 <!-- [[[ test_2d.path.lineTo.nextpoint.html ]]] -->
13508
13509 <p>Canvas test: 2d.path.lineTo.nextpoint</p>
13510 <canvas id="c416" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13511 <script>
13512
13513
13514 function test_2d_path_lineTo_nextpoint() {
13515
13516 var canvas = document.getElementById('c416');
13517 var ctx = canvas.getContext('2d');
13518
13519 ctx.strokeStyle = '#0f0';
13520 ctx.lineWidth = 50;
13521 ctx.beginPath();
13522 ctx.moveTo(-100, -100);
13523 ctx.lineTo(0, 25);
13524 ctx.lineTo(100, 25);
13525 ctx.stroke();
13526 isPixel(ctx, 50,25, 0,255,0,255, 0);
13527
13528
13529 }
13530 </script>
13531
13532 <!-- [[[ test_2d.path.lineTo.nonfinite.html ]]] -->
13533
13534 <p>Canvas test: 2d.path.lineTo.nonfinite</p>
13535 <!-- Testing: lineTo() with Infinity/NaN is ignored -->
13536 <canvas id="c417" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13537 <script>
13538
13539
13540 function test_2d_path_lineTo_nonfinite() {
13541
13542 var canvas = document.getElementById('c417');
13543 var ctx = canvas.getContext('2d');
13544
13545 var _thrown_outer = false;
13546 try {
13547
13548 ctx.moveTo(0, 0);
13549 ctx.lineTo(100, 0);
13550 ctx.lineTo(Infinity, 50);
13551 ctx.lineTo(-Infinity, 50);
13552 ctx.lineTo(NaN, 50);
13553 ctx.lineTo(0, Infinity);
13554 ctx.lineTo(0, -Infinity);
13555 ctx.lineTo(0, NaN);
13556 ctx.lineTo(Infinity, Infinity);
13557 ctx.lineTo(100, 50);
13558 ctx.lineTo(0, 50);
13559 ctx.fillStyle = '#0f0';
13560 ctx.fill();
13561 isPixel(ctx, 50,25, 0,255,0,255, 0);
13562 isPixel(ctx, 90,45, 0,255,0,255, 0);
13563
13564 } catch (e) {
13565 _thrown_outer = true;
13566 }
13567 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
13568
13569
13570 }
13571 </script>
13572
13573 <!-- [[[ test_2d.path.moveTo.basic.html ]]] -->
13574
13575 <p>Canvas test: 2d.path.moveTo.basic</p>
13576 <canvas id="c418" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13577 <script>
13578
13579
13580 function test_2d_path_moveTo_basic() {
13581
13582 var canvas = document.getElementById('c418');
13583 var ctx = canvas.getContext('2d');
13584
13585 ctx.rect(0, 0, 10, 50);
13586 ctx.moveTo(100, 0);
13587 ctx.lineTo(10, 0);
13588 ctx.lineTo(10, 50);
13589 ctx.lineTo(100, 50);
13590 ctx.fillStyle = '#0f0';
13591 ctx.fill();
13592 isPixel(ctx, 90,25, 0,255,0,255, 0);
13593
13594
13595 }
13596 </script>
13597
13598 <!-- [[[ test_2d.path.moveTo.multiple.html ]]] -->
13599
13600 <p>Canvas test: 2d.path.moveTo.multiple</p>
13601 <canvas id="c419" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13602 <script>
13603
13604
13605 function test_2d_path_moveTo_multiple() {
13606
13607 var canvas = document.getElementById('c419');
13608 var ctx = canvas.getContext('2d');
13609
13610 ctx.moveTo(0, 25);
13611 ctx.moveTo(100, 25);
13612 ctx.moveTo(0, 25);
13613 ctx.lineTo(100, 25);
13614 ctx.strokeStyle = '#0f0';
13615 ctx.lineWidth = 50;
13616 ctx.stroke();
13617 isPixel(ctx, 50,25, 0,255,0,255, 0);
13618
13619
13620 }
13621 </script>
13622
13623 <!-- [[[ test_2d.path.moveTo.newsubpath.html ]]] -->
13624
13625 <p>Canvas test: 2d.path.moveTo.newsubpath</p>
13626 <canvas id="c420" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
13627 <script>
13628
13629
13630 function test_2d_path_moveTo_newsubpath() {
13631
13632 var canvas = document.getElementById('c420');
13633 var ctx = canvas.getContext('2d');
13634
13635 ctx.beginPath();
13636 ctx.moveTo(0, 0);
13637 ctx.moveTo(100, 0);
13638 ctx.moveTo(100, 50);
13639 ctx.moveTo(0, 50);
13640 ctx.fillStyle = '#f00';
13641 ctx.fill();
13642 isPixel(ctx, 50,25, 0,0,0,0, 0);
13643
13644
13645 }
13646 </script>
13647
13648 <!-- [[[ test_2d.path.moveTo.nonfinite.html ]]] -->
13649
13650 <p>Canvas test: 2d.path.moveTo.nonfinite</p>
13651 <!-- Testing: moveTo() with Infinity/NaN is ignored -->
13652 <canvas id="c421" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13653 <script>
13654
13655
13656 function test_2d_path_moveTo_nonfinite() {
13657
13658 var canvas = document.getElementById('c421');
13659 var ctx = canvas.getContext('2d');
13660
13661 var _thrown_outer = false;
13662 try {
13663
13664 ctx.moveTo(0, 0);
13665 ctx.lineTo(100, 0);
13666 ctx.moveTo(Infinity, 50);
13667 ctx.moveTo(-Infinity, 50);
13668 ctx.moveTo(NaN, 50);
13669 ctx.moveTo(0, Infinity);
13670 ctx.moveTo(0, -Infinity);
13671 ctx.moveTo(0, NaN);
13672 ctx.moveTo(Infinity, Infinity);
13673 ctx.lineTo(100, 50);
13674 ctx.lineTo(0, 50);
13675 ctx.fillStyle = '#0f0';
13676 ctx.fill();
13677 isPixel(ctx, 50,25, 0,255,0,255, 0);
13678
13679 } catch (e) {
13680 _thrown_outer = true;
13681 }
13682 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
13683
13684
13685 }
13686 </script>
13687
13688 <!-- [[[ test_2d.path.quadraticCurveTo.basic.html ]]] -->
13689
13690 <p>Canvas test: 2d.path.quadraticCurveTo.basic</p>
13691 <canvas id="c422" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13692 <script>
13693
13694
13695 function test_2d_path_quadraticCurveTo_basic() {
13696
13697 var canvas = document.getElementById('c422');
13698 var ctx = canvas.getContext('2d');
13699
13700 ctx.strokeStyle = '#0f0';
13701 ctx.lineWidth = 50;
13702 ctx.beginPath();
13703 ctx.moveTo(0, 25);
13704 ctx.quadraticCurveTo(100, 25, 100, 25);
13705 ctx.stroke();
13706 isPixel(ctx, 50,25, 0,255,0,255, 0);
13707
13708
13709 }
13710 </script>
13711
13712 <!-- [[[ test_2d.path.quadraticCurveTo.emptysubpath.html ]]] -->
13713
13714 <p>Canvas test: 2d.path.quadraticCurveTo.emptysubpath</p>
13715 <canvas id="c423" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
13716 <script>
13717
13718
13719
13720 function test_2d_path_quadraticCurveTo_emptysubpath() {
13721
13722 var canvas = document.getElementById('c423');
13723 var ctx = canvas.getContext('2d');
13724
13725 ctx.strokeStyle = '#f00';
13726 ctx.lineWidth = 50;
13727 ctx.beginPath();
13728 ctx.quadraticCurveTo(0, 25, 0, 25);
13729 ctx.quadraticCurveTo(100, 25, 100, 25);
13730 ctx.stroke();
13731 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
13732
13733
13734 }
13735 </script>
13736
13737 <!-- [[[ test_2d.path.quadraticCurveTo.nonfinite.html ]]] -->
13738
13739 <p>Canvas test: 2d.path.quadraticCurveTo.nonfinite</p>
13740 <!-- Testing: quadraticCurveTo() with Infinity/NaN is ignored -->
13741 <canvas id="c424" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13742 <script>
13743
13744
13745 function test_2d_path_quadraticCurveTo_nonfinite() {
13746
13747 var canvas = document.getElementById('c424');
13748 var ctx = canvas.getContext('2d');
13749
13750 var _thrown_outer = false;
13751 try {
13752
13753 ctx.moveTo(0, 0);
13754 ctx.lineTo(100, 0);
13755 ctx.quadraticCurveTo(Infinity, 50, 0, 50);
13756 ctx.quadraticCurveTo(-Infinity, 50, 0, 50);
13757 ctx.quadraticCurveTo(NaN, 50, 0, 50);
13758 ctx.quadraticCurveTo(0, Infinity, 0, 50);
13759 ctx.quadraticCurveTo(0, -Infinity, 0, 50);
13760 ctx.quadraticCurveTo(0, NaN, 0, 50);
13761 ctx.quadraticCurveTo(0, 50, Infinity, 50);
13762 ctx.quadraticCurveTo(0, 50, -Infinity, 50);
13763 ctx.quadraticCurveTo(0, 50, NaN, 50);
13764 ctx.quadraticCurveTo(0, 50, 0, Infinity);
13765 ctx.quadraticCurveTo(0, 50, 0, -Infinity);
13766 ctx.quadraticCurveTo(0, 50, 0, NaN);
13767 ctx.quadraticCurveTo(Infinity, Infinity, 0, 50);
13768 ctx.quadraticCurveTo(Infinity, Infinity, Infinity, 50);
13769 ctx.quadraticCurveTo(Infinity, Infinity, Infinity, Infinity);
13770 ctx.quadraticCurveTo(Infinity, Infinity, 0, Infinity);
13771 ctx.quadraticCurveTo(Infinity, 50, Infinity, 50);
13772 ctx.quadraticCurveTo(Infinity, 50, Infinity, Infinity);
13773 ctx.quadraticCurveTo(Infinity, 50, 0, Infinity);
13774 ctx.quadraticCurveTo(0, Infinity, Infinity, 50);
13775 ctx.quadraticCurveTo(0, Infinity, Infinity, Infinity);
13776 ctx.quadraticCurveTo(0, Infinity, 0, Infinity);
13777 ctx.quadraticCurveTo(0, 50, Infinity, Infinity);
13778 ctx.lineTo(100, 50);
13779 ctx.lineTo(0, 50);
13780 ctx.fillStyle = '#0f0';
13781 ctx.fill();
13782 isPixel(ctx, 50,25, 0,255,0,255, 0);
13783 isPixel(ctx, 90,45, 0,255,0,255, 0);
13784
13785 } catch (e) {
13786 _thrown_outer = true;
13787 }
13788 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
13789
13790
13791 }
13792 </script>
13793
13794 <!-- [[[ test_2d.path.quadraticCurveTo.scaled.html ]]] -->
13795
13796 <p>Canvas test: 2d.path.quadraticCurveTo.scaled</p>
13797 <canvas id="c425" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13798 <script>
13799
13800
13801 function test_2d_path_quadraticCurveTo_scaled() {
13802
13803 var canvas = document.getElementById('c425');
13804 var ctx = canvas.getContext('2d');
13805
13806 ctx.scale(1000, 1000);
13807 ctx.strokeStyle = '#0f0';
13808 ctx.lineWidth = 0.055;
13809 ctx.beginPath();
13810 ctx.moveTo(-1, 1.05);
13811 ctx.quadraticCurveTo(0, -1, 1.2, 1.05);
13812 ctx.stroke();
13813 isPixel(ctx, 50,25, 0,255,0,255, 0);
13814 isPixel(ctx, 1,1, 0,255,0,255, 0);
13815 isPixel(ctx, 98,1, 0,255,0,255, 0);
13816 isPixel(ctx, 1,48, 0,255,0,255, 0);
13817 isPixel(ctx, 98,48, 0,255,0,255, 0);
13818
13819
13820 }
13821 </script>
13822
13823 <!-- [[[ test_2d.path.quadraticCurveTo.shape.html ]]] -->
13824
13825 <p>Canvas test: 2d.path.quadraticCurveTo.shape</p>
13826 <canvas id="c426" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13827 <script>
13828
13829
13830 function test_2d_path_quadraticCurveTo_shape() {
13831
13832 var canvas = document.getElementById('c426');
13833 var ctx = canvas.getContext('2d');
13834
13835 ctx.strokeStyle = '#0f0';
13836 ctx.lineWidth = 55;
13837 ctx.beginPath();
13838 ctx.moveTo(-1000, 1050);
13839 ctx.quadraticCurveTo(0, -1000, 1200, 1050);
13840 ctx.stroke();
13841 isPixel(ctx, 50,25, 0,255,0,255, 0);
13842 isPixel(ctx, 1,1, 0,255,0,255, 0);
13843 isPixel(ctx, 98,1, 0,255,0,255, 0);
13844 isPixel(ctx, 1,48, 0,255,0,255, 0);
13845 isPixel(ctx, 98,48, 0,255,0,255, 0);
13846
13847
13848 }
13849 </script>
13850
13851 <!-- [[[ test_2d.path.rect.basic.html ]]] -->
13852
13853 <p>Canvas test: 2d.path.rect.basic</p>
13854 <canvas id="c427" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13855 <script>
13856
13857
13858 function test_2d_path_rect_basic() {
13859
13860 var canvas = document.getElementById('c427');
13861 var ctx = canvas.getContext('2d');
13862
13863 ctx.fillStyle = '#0f0';
13864 ctx.rect(0, 0, 100, 50);
13865 ctx.fill();
13866 isPixel(ctx, 50,25, 0,255,0,255, 0);
13867
13868
13869 }
13870 </script>
13871
13872 <!-- [[[ test_2d.path.rect.closed.html ]]] -->
13873
13874 <p>Canvas test: 2d.path.rect.closed</p>
13875 <canvas id="c428" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13876 <script>
13877
13878
13879 function test_2d_path_rect_closed() {
13880
13881 var canvas = document.getElementById('c428');
13882 var ctx = canvas.getContext('2d');
13883
13884 ctx.strokeStyle = '#0f0';
13885 ctx.lineWidth = 200;
13886 ctx.lineJoin = 'miter';
13887 ctx.rect(100, 50, 100, 100);
13888 ctx.stroke();
13889 isPixel(ctx, 50,25, 0,255,0,255, 0);
13890
13891
13892 }
13893 </script>
13894
13895 <!-- [[[ test_2d.path.rect.end.1.html ]]] -->
13896
13897 <p>Canvas test: 2d.path.rect.end.1</p>
13898 <canvas id="c429" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13899 <script>
13900
13901
13902 function test_2d_path_rect_end_1() {
13903
13904 var canvas = document.getElementById('c429');
13905 var ctx = canvas.getContext('2d');
13906
13907 ctx.strokeStyle = '#0f0';
13908 ctx.lineWidth = 100;
13909 ctx.rect(200, 100, 400, 1000);
13910 ctx.lineTo(-2000, -1000);
13911 ctx.stroke();
13912 isPixel(ctx, 50,25, 0,255,0,255, 0);
13913
13914
13915 }
13916 </script>
13917
13918 <!-- [[[ test_2d.path.rect.end.2.html ]]] -->
13919
13920 <p>Canvas test: 2d.path.rect.end.2</p>
13921 <canvas id="c430" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13922 <script>
13923
13924
13925 function test_2d_path_rect_end_2() {
13926
13927 var canvas = document.getElementById('c430');
13928 var ctx = canvas.getContext('2d');
13929
13930 ctx.strokeStyle = '#0f0';
13931 ctx.lineWidth = 450;
13932 ctx.lineCap = 'round';
13933 ctx.lineJoin = 'bevel';
13934 ctx.rect(150, 150, 2000, 2000);
13935 ctx.lineTo(160, 160);
13936 ctx.stroke();
13937 isPixel(ctx, 1,1, 0,255,0,255, 0);
13938 isPixel(ctx, 98,1, 0,255,0,255, 0);
13939 isPixel(ctx, 1,48, 0,255,0,255, 0);
13940 isPixel(ctx, 98,48, 0,255,0,255, 0);
13941
13942
13943 }
13944 </script>
13945
13946 <!-- [[[ test_2d.path.rect.negative.html ]]] -->
13947
13948 <p>Canvas test: 2d.path.rect.negative</p>
13949 <canvas id="c431" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13950 <script>
13951
13952
13953 function test_2d_path_rect_negative() {
13954
13955 var canvas = document.getElementById('c431');
13956 var ctx = canvas.getContext('2d');
13957
13958 ctx.fillStyle = '#f00';
13959 ctx.fillRect(0, 0, 100, 50);
13960 ctx.beginPath();
13961 ctx.fillStyle = '#0f0';
13962 ctx.rect(0, 0, 50, 25);
13963 ctx.rect(100, 0, -50, 25);
13964 ctx.rect(0, 50, 50, -25);
13965 ctx.rect(100, 50, -50, -25);
13966 ctx.fill();
13967 isPixel(ctx, 25,12, 0,255,0,255, 0);
13968 isPixel(ctx, 75,12, 0,255,0,255, 0);
13969 isPixel(ctx, 25,37, 0,255,0,255, 0);
13970 isPixel(ctx, 75,37, 0,255,0,255, 0);
13971
13972
13973 }
13974 </script>
13975
13976 <!-- [[[ test_2d.path.rect.newsubpath.html ]]] -->
13977
13978 <p>Canvas test: 2d.path.rect.newsubpath</p>
13979 <canvas id="c432" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
13980 <script>
13981
13982
13983 function test_2d_path_rect_newsubpath() {
13984
13985 var canvas = document.getElementById('c432');
13986 var ctx = canvas.getContext('2d');
13987
13988 ctx.beginPath();
13989 ctx.strokeStyle = '#f00';
13990 ctx.lineWidth = 50;
13991 ctx.moveTo(-100, 25);
13992 ctx.lineTo(-50, 25);
13993 ctx.rect(200, 25, 1, 1);
13994 ctx.stroke();
13995 isPixel(ctx, 50,25, 0,0,0,0, 0);
13996
13997
13998 }
13999 </script>
14000
14001 <!-- [[[ test_2d.path.rect.nonfinite.html ]]] -->
14002
14003 <p>Canvas test: 2d.path.rect.nonfinite</p>
14004 <!-- Testing: rect() with Infinity/NaN is ignored -->
14005 <canvas id="c433" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14006 <script>
14007
14008
14009 function test_2d_path_rect_nonfinite() {
14010
14011 var canvas = document.getElementById('c433');
14012 var ctx = canvas.getContext('2d');
14013
14014 var _thrown_outer = false;
14015 try {
14016
14017 ctx.moveTo(0, 0);
14018 ctx.lineTo(100, 0);
14019 ctx.rect(Infinity, 50, 1, 1);
14020 ctx.rect(-Infinity, 50, 1, 1);
14021 ctx.rect(NaN, 50, 1, 1);
14022 ctx.rect(0, Infinity, 1, 1);
14023 ctx.rect(0, -Infinity, 1, 1);
14024 ctx.rect(0, NaN, 1, 1);
14025 ctx.rect(0, 50, Infinity, 1);
14026 ctx.rect(0, 50, -Infinity, 1);
14027 ctx.rect(0, 50, NaN, 1);
14028 ctx.rect(0, 50, 1, Infinity);
14029 ctx.rect(0, 50, 1, -Infinity);
14030 ctx.rect(0, 50, 1, NaN);
14031 ctx.rect(Infinity, Infinity, 1, 1);
14032 ctx.rect(Infinity, Infinity, Infinity, 1);
14033 ctx.rect(Infinity, Infinity, Infinity, Infinity);
14034 ctx.rect(Infinity, Infinity, 1, Infinity);
14035 ctx.rect(Infinity, 50, Infinity, 1);
14036 ctx.rect(Infinity, 50, Infinity, Infinity);
14037 ctx.rect(Infinity, 50, 1, Infinity);
14038 ctx.rect(0, Infinity, Infinity, 1);
14039 ctx.rect(0, Infinity, Infinity, Infinity);
14040 ctx.rect(0, Infinity, 1, Infinity);
14041 ctx.rect(0, 50, Infinity, Infinity);
14042 ctx.lineTo(100, 50);
14043 ctx.lineTo(0, 50);
14044 ctx.fillStyle = '#0f0';
14045 ctx.fill();
14046 isPixel(ctx, 50,25, 0,255,0,255, 0);
14047 isPixel(ctx, 90,45, 0,255,0,255, 0);
14048
14049 } catch (e) {
14050 _thrown_outer = true;
14051 }
14052 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
14053
14054
14055 }
14056 </script>
14057
14058 <!-- [[[ test_2d.path.rect.selfintersect.html ]]] -->
14059
14060 <p>Canvas test: 2d.path.rect.selfintersect</p>
14061 <canvas id="c434" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
14062 <script>
14063
14064
14065
14066 function test_2d_path_rect_selfintersect() {
14067
14068 var canvas = document.getElementById('c434');
14069 var ctx = canvas.getContext('2d');
14070
14071 ctx.strokeStyle = '#0f0';
14072 ctx.lineWidth = 90;
14073 ctx.beginPath();
14074 ctx.rect(45, 20, 10, 10);
14075 ctx.stroke();
14076 isPixel(ctx, 50,25, 0,255,0,255, 0);
14077
14078
14079 }
14080 </script>
14081
14082 <!-- [[[ test_2d.path.rect.winding.html ]]] -->
14083
14084 <p>Canvas test: 2d.path.rect.winding</p>
14085 <canvas id="c435" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14086 <script>
14087
14088
14089 function test_2d_path_rect_winding() {
14090
14091 var canvas = document.getElementById('c435');
14092 var ctx = canvas.getContext('2d');
14093
14094 ctx.fillStyle = '#0f0';
14095 ctx.fillRect(0, 0, 100, 50);
14096 ctx.beginPath();
14097 ctx.fillStyle = '#f00';
14098 ctx.rect(0, 0, 50, 50);
14099 ctx.rect(100, 50, -50, -50);
14100 ctx.rect(0, 25, 100, -25);
14101 ctx.rect(100, 25, -100, 25);
14102 ctx.fill();
14103 isPixel(ctx, 25,12, 0,255,0,255, 0);
14104 isPixel(ctx, 75,12, 0,255,0,255, 0);
14105 isPixel(ctx, 25,37, 0,255,0,255, 0);
14106 isPixel(ctx, 75,37, 0,255,0,255, 0);
14107
14108
14109 }
14110 </script>
14111
14112 <!-- [[[ test_2d.path.rect.zero.1.html ]]] -->
14113
14114 <p>Canvas test: 2d.path.rect.zero.1</p>
14115 <canvas id="c436" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
14116 <script>
14117
14118
14119 function test_2d_path_rect_zero_1() {
14120
14121 var canvas = document.getElementById('c436');
14122 var ctx = canvas.getContext('2d');
14123
14124 ctx.strokeStyle = '#0f0';
14125 ctx.lineWidth = 100;
14126 ctx.beginPath();
14127 ctx.rect(0, 50, 100, 0);
14128 ctx.stroke();
14129 isPixel(ctx, 50,25, 0,255,0,255, 0);
14130
14131
14132 }
14133 </script>
14134
14135 <!-- [[[ test_2d.path.rect.zero.2.html ]]] -->
14136
14137 <p>Canvas test: 2d.path.rect.zero.2</p>
14138 <canvas id="c437" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
14139 <script>
14140
14141
14142 function test_2d_path_rect_zero_2() {
14143
14144 var canvas = document.getElementById('c437');
14145 var ctx = canvas.getContext('2d');
14146
14147 ctx.strokeStyle = '#0f0';
14148 ctx.lineWidth = 100;
14149 ctx.beginPath();
14150 ctx.rect(50, -100, 0, 250);
14151 ctx.stroke();
14152 isPixel(ctx, 50,25, 0,255,0,255, 0);
14153
14154
14155 }
14156 </script>
14157
14158 <!-- [[[ test_2d.path.rect.zero.3.html ]]] -->
14159
14160 <p>Canvas test: 2d.path.rect.zero.3</p>
14161 <canvas id="c438" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
14162 <script>
14163
14164
14165 function test_2d_path_rect_zero_3() {
14166
14167 var canvas = document.getElementById('c438');
14168 var ctx = canvas.getContext('2d');
14169
14170 if (!IsD2DEnabled()) {
14171 // Disabled for D2D until we can figure out Bug 587554.
14172 ctx.strokeStyle = '#f00';
14173 ctx.lineWidth = 100;
14174 ctx.beginPath();
14175 ctx.rect(50, 25, 0, 0);
14176 ctx.stroke();
14177 isPixel(ctx, 50,25, 0,0,0,0, 0);
14178 }
14179
14180 }
14181 </script>
14182
14183 <!-- [[[ test_2d.path.rect.zero.4.html ]]] -->
14184
14185 <p>Canvas test: 2d.path.rect.zero.4</p>
14186 <canvas id="c439" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
14187 <script>
14188
14189
14190 function test_2d_path_rect_zero_4() {
14191
14192 var canvas = document.getElementById('c439');
14193 var ctx = canvas.getContext('2d');
14194
14195 ctx.strokeStyle = '#0f0';
14196 ctx.lineWidth = 50;
14197 ctx.rect(100, 25, 0, 0);
14198 ctx.lineTo(0, 25);
14199 ctx.stroke();
14200 isPixel(ctx, 50,25, 0,255,0,255, 0);
14201
14202
14203 }
14204 </script>
14205
14206 <!-- [[[ test_2d.path.rect.zero.5.html ]]] -->
14207
14208 <p>Canvas test: 2d.path.rect.zero.5</p>
14209 <canvas id="c440" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
14210 <script>
14211
14212
14213 function test_2d_path_rect_zero_5() {
14214
14215 var canvas = document.getElementById('c440');
14216 var ctx = canvas.getContext('2d');
14217
14218 ctx.strokeStyle = '#f00';
14219 ctx.lineWidth = 50;
14220 ctx.moveTo(0, 0);
14221 ctx.rect(100, 25, 0, 0);
14222 ctx.stroke();
14223 isPixel(ctx, 50,25, 0,0,0,0, 0);
14224
14225
14226 }
14227 </script>
14228
14229 <!-- [[[ test_2d.path.rect.zero.6.html ]]] -->
14230
14231 <p>Canvas test: 2d.path.rect.zero.6</p>
14232 <canvas id="c441" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
14233 <script>
14234
14235
14236
14237 function test_2d_path_rect_zero_6() {
14238
14239 var canvas = document.getElementById('c441');
14240 var ctx = canvas.getContext('2d');
14241
14242 ctx.strokeStyle = '#f00';
14243 ctx.lineJoin = 'miter';
14244 ctx.miterLimit = 1.5;
14245 ctx.lineWidth = 200;
14246 ctx.beginPath();
14247 ctx.rect(100, 25, 1000, 0);
14248 ctx.stroke();
14249 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
14250
14251
14252 }
14253 </script>
14254
14255 <!-- [[[ test_2d.path.stroke.empty.html ]]] -->
14256
14257 <p>Canvas test: 2d.path.stroke.empty</p>
14258 <!-- Testing: Empty subpaths are not stroked -->
14259 <canvas id="c442" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14260 <script>
14261
14262
14263 function test_2d_path_stroke_empty() {
14264
14265 var canvas = document.getElementById('c442');
14266 var ctx = canvas.getContext('2d');
14267
14268 ctx.fillStyle = '#0f0';
14269 ctx.fillRect(0, 0, 100, 50);
14270
14271 ctx.strokeStyle = '#f00';
14272 ctx.lineWidth = 100;
14273 ctx.lineCap = 'round';
14274 ctx.lineJoin = 'round';
14275
14276 ctx.beginPath();
14277 ctx.moveTo(40, 25);
14278 ctx.moveTo(60, 25);
14279 ctx.stroke();
14280
14281 isPixel(ctx, 50,25, 0,255,0,255, 0);
14282
14283
14284 }
14285 </script>
14286
14287 <!-- [[[ test_2d.path.stroke.overlap.html ]]] -->
14288
14289 <p>Canvas test: 2d.path.stroke.overlap</p>
14290 <!-- Testing: Stroked subpaths are combined before being drawn -->
14291 <canvas id="c443" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14292 <script>
14293
14294
14295 function test_2d_path_stroke_overlap() {
14296
14297 var canvas = document.getElementById('c443');
14298 var ctx = canvas.getContext('2d');
14299
14300 ctx.fillStyle = '#000';
14301 ctx.fillRect(0, 0, 100, 50);
14302
14303 ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
14304 ctx.lineWidth = 50;
14305 ctx.moveTo(0, 20);
14306 ctx.lineTo(100, 20);
14307 ctx.moveTo(0, 30);
14308 ctx.lineTo(100, 30);
14309 ctx.stroke();
14310
14311 isPixel(ctx, 50,25, 0,127,0,255, 1);
14312
14313
14314 }
14315 </script>
14316
14317 <!-- [[[ test_2d.path.stroke.prune.arc.html ]]] -->
14318
14319 <p>Canvas test: 2d.path.stroke.prune.arc</p>
14320 <!-- Testing: Zero-length line segments from arcTo and arc are removed before stroking -->
14321 <canvas id="c444" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14322 <script>
14323
14324
14325
14326 function test_2d_path_stroke_prune_arc() {
14327
14328 var canvas = document.getElementById('c444');
14329 var ctx = canvas.getContext('2d');
14330
14331 ctx.fillStyle = '#0f0';
14332 ctx.fillRect(0, 0, 100, 50);
14333
14334 ctx.strokeStyle = '#f00';
14335 ctx.lineWidth = 100;
14336 ctx.lineCap = 'round';
14337 ctx.lineJoin = 'round';
14338
14339 ctx.beginPath();
14340 ctx.moveTo(50, 25);
14341 ctx.arcTo(50, 25, 150, 25, 10);
14342 ctx.stroke();
14343
14344 ctx.beginPath();
14345 ctx.moveTo(50, 25);
14346 ctx.arc(50, 25, 10, 0, 0, false);
14347 ctx.stroke();
14348
14349 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
14350
14351
14352 }
14353 </script>
14354
14355 <!-- [[[ test_2d.path.stroke.prune.closed.html ]]] -->
14356
14357 <p>Canvas test: 2d.path.stroke.prune.closed</p>
14358 <!-- Testing: Zero-length line segments from closed paths are removed before stroking -->
14359 <canvas id="c445" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14360 <script>
14361
14362
14363
14364 function test_2d_path_stroke_prune_closed() {
14365
14366 var canvas = document.getElementById('c445');
14367 var ctx = canvas.getContext('2d');
14368
14369 ctx.fillStyle = '#0f0';
14370 ctx.fillRect(0, 0, 100, 50);
14371
14372 ctx.strokeStyle = '#f00';
14373 ctx.lineWidth = 100;
14374 ctx.lineCap = 'round';
14375 ctx.lineJoin = 'round';
14376
14377 ctx.beginPath();
14378 ctx.moveTo(50, 25);
14379 ctx.lineTo(50, 25);
14380 ctx.closePath();
14381 ctx.stroke();
14382
14383 if (IsAzureSkia()) {
14384 isPixel(ctx, 50,25, 0,255,0,255, 0);
14385 } else {
14386 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
14387 }
14388
14389 }
14390 </script>
14391
14392 <!-- [[[ test_2d.path.stroke.prune.corner.html ]]] -->
14393
14394 <p>Canvas test: 2d.path.stroke.prune.corner</p>
14395 <!-- Testing: Zero-length line segments are removed before stroking with miters -->
14396 <canvas id="c446" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14397 <script>
14398
14399
14400 function test_2d_path_stroke_prune_corner() {
14401
14402 var canvas = document.getElementById('c446');
14403 var ctx = canvas.getContext('2d');
14404
14405 ctx.fillStyle = '#0f0';
14406 ctx.fillRect(0, 0, 100, 50);
14407
14408 ctx.strokeStyle = '#f00';
14409 ctx.lineWidth = 400;
14410 ctx.lineJoin = 'miter';
14411 ctx.miterLimit = 1.4;
14412
14413 ctx.beginPath();
14414 ctx.moveTo(-1000, 200, 0, 0);
14415 ctx.lineTo(-100, 200);
14416 ctx.lineTo(-100, 200);
14417 ctx.lineTo(-100, 200);
14418 ctx.lineTo(-100, 1000);
14419 ctx.stroke();
14420
14421 isPixel(ctx, 50,25, 0,255,0,255, 0);
14422
14423
14424 }
14425 </script>
14426
14427 <!-- [[[ test_2d.path.stroke.prune.curve.html ]]] -->
14428
14429 <p>Canvas test: 2d.path.stroke.prune.curve</p>
14430 <!-- Testing: Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking -->
14431 <canvas id="c447" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14432 <script>
14433
14434
14435
14436 function test_2d_path_stroke_prune_curve() {
14437
14438 var canvas = document.getElementById('c447');
14439 var ctx = canvas.getContext('2d');
14440
14441 ctx.fillStyle = '#0f0';
14442 ctx.fillRect(0, 0, 100, 50);
14443
14444 ctx.strokeStyle = '#f00';
14445 ctx.lineWidth = 100;
14446 ctx.lineCap = 'round';
14447 ctx.lineJoin = 'round';
14448
14449 ctx.beginPath();
14450 ctx.moveTo(50, 25);
14451 ctx.quadraticCurveTo(50, 25, 50, 25);
14452 ctx.stroke();
14453
14454 ctx.beginPath();
14455 ctx.moveTo(50, 25);
14456 ctx.bezierCurveTo(50, 25, 50, 25, 50, 25);
14457 ctx.stroke();
14458
14459 if (IsAzureSkia()) {
14460 isPixel(ctx, 50,25, 0,255,0,255, 0);
14461 } else {
14462 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
14463 }
14464
14465
14466 }
14467 </script>
14468
14469 <!-- [[[ test_2d.path.stroke.prune.line.html ]]] -->
14470
14471 <p>Canvas test: 2d.path.stroke.prune.line</p>
14472 <!-- Testing: Zero-length line segments from lineTo are removed before stroking -->
14473 <canvas id="c448" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14474 <script>
14475
14476
14477
14478 function test_2d_path_stroke_prune_line() {
14479
14480 var canvas = document.getElementById('c448');
14481 var ctx = canvas.getContext('2d');
14482
14483 ctx.fillStyle = '#0f0';
14484 ctx.fillRect(0, 0, 100, 50);
14485
14486 ctx.strokeStyle = '#f00';
14487 ctx.lineWidth = 100;
14488 ctx.lineCap = 'round';
14489 ctx.lineJoin = 'round';
14490
14491 ctx.beginPath();
14492 ctx.moveTo(50, 25);
14493 ctx.lineTo(50, 25);
14494 ctx.stroke();
14495
14496 if (IsAzureSkia()) {
14497 isPixel(ctx, 50,25, 0,255,0,255, 0);
14498 } else {
14499 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
14500 }
14501
14502 }
14503 </script>
14504
14505 <!-- [[[ test_2d.path.stroke.prune.rect.html ]]] -->
14506
14507 <p>Canvas test: 2d.path.stroke.prune.rect</p>
14508 <!-- Testing: Zero-length line segments from rect and strokeRect are removed before stroking -->
14509 <canvas id="c449" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14510 <script>
14511
14512
14513
14514 function test_2d_path_stroke_prune_rect() {
14515
14516 var canvas = document.getElementById('c449');
14517 var ctx = canvas.getContext('2d');
14518
14519 ctx.fillStyle = '#0f0';
14520 ctx.fillRect(0, 0, 100, 50);
14521
14522 ctx.strokeStyle = '#f00';
14523 ctx.lineWidth = 100;
14524 ctx.lineCap = 'round';
14525 ctx.lineJoin = 'round';
14526
14527 ctx.beginPath();
14528 ctx.rect(50, 25, 0, 0);
14529 ctx.stroke();
14530
14531 ctx.strokeRect(50, 25, 0, 0);
14532
14533 if (IsAzureSkia()) {
14534 isPixel(ctx, 50,25, 0,255,0,255, 0);
14535 } else {
14536 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
14537 }
14538
14539 }
14540 </script>
14541
14542 <!-- [[[ test_2d.path.stroke.scale1.html ]]] -->
14543
14544 <p>Canvas test: 2d.path.stroke.scale1</p>
14545 <!-- Testing: Stroke line widths are scaled by the current transformation matrix -->
14546 <canvas id="c450" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14547 <script>
14548
14549
14550 function test_2d_path_stroke_scale1() {
14551
14552 var canvas = document.getElementById('c450');
14553 var ctx = canvas.getContext('2d');
14554
14555 ctx.fillStyle = '#f00';
14556 ctx.fillRect(0, 0, 100, 50);
14557
14558 ctx.beginPath();
14559 ctx.rect(25, 12.5, 50, 25);
14560 ctx.save();
14561 ctx.scale(50, 25);
14562 ctx.strokeStyle = '#0f0';
14563 ctx.stroke();
14564 ctx.restore();
14565
14566 ctx.beginPath();
14567 ctx.rect(-25, -12.5, 150, 75);
14568 ctx.save();
14569 ctx.scale(50, 25);
14570 ctx.strokeStyle = '#f00';
14571 ctx.stroke();
14572 ctx.restore();
14573
14574 isPixel(ctx, 0,0, 0,255,0,255, 0);
14575 isPixel(ctx, 50,0, 0,255,0,255, 0);
14576 isPixel(ctx, 99,0, 0,255,0,255, 0);
14577 isPixel(ctx, 0,25, 0,255,0,255, 0);
14578 isPixel(ctx, 50,25, 0,255,0,255, 0);
14579 isPixel(ctx, 99,25, 0,255,0,255, 0);
14580 isPixel(ctx, 0,49, 0,255,0,255, 0);
14581 isPixel(ctx, 50,49, 0,255,0,255, 0);
14582 isPixel(ctx, 99,49, 0,255,0,255, 0);
14583
14584
14585 }
14586 </script>
14587
14588 <!-- [[[ test_2d.path.stroke.scale2.html ]]] -->
14589
14590 <p>Canvas test: 2d.path.stroke.scale2</p>
14591 <!-- Testing: Stroke line widths are scaled by the current transformation matrix -->
14592 <canvas id="c451" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14593 <script>
14594
14595
14596 function test_2d_path_stroke_scale2() {
14597
14598 var canvas = document.getElementById('c451');
14599 var ctx = canvas.getContext('2d');
14600
14601 if (!IsD2DEnabled()) {
14602 // On D2D a rasterization bug causes a small discrepancy here. See bug 587316
14603 ctx.fillStyle = '#f00';
14604 ctx.fillRect(0, 0, 100, 50);
14605
14606 ctx.beginPath();
14607 ctx.rect(25, 12.5, 50, 25);
14608 ctx.save();
14609 ctx.rotate(Math.PI/2);
14610 ctx.scale(25, 50);
14611 ctx.strokeStyle = '#0f0';
14612 ctx.stroke();
14613 ctx.restore();
14614
14615 ctx.beginPath();
14616 ctx.rect(-25, -12.5, 150, 75);
14617 ctx.save();
14618 ctx.rotate(Math.PI/2);
14619 ctx.scale(25, 50);
14620 ctx.strokeStyle = '#f00';
14621 ctx.stroke();
14622 ctx.restore();
14623
14624 isPixel(ctx, 0,0, 0,255,0,255, 0);
14625 isPixel(ctx, 50,0, 0,255,0,255, 0);
14626 isPixel(ctx, 99,0, 0,255,0,255, 0);
14627 isPixel(ctx, 0,25, 0,255,0,255, 0);
14628 isPixel(ctx, 50,25, 0,255,0,255, 0);
14629 isPixel(ctx, 99,25, 0,255,0,255, 0);
14630 isPixel(ctx, 0,49, 0,255,0,255, 0);
14631 isPixel(ctx, 50,49, 0,255,0,255, 0);
14632 isPixel(ctx, 99,49, 0,255,0,255, 0);
14633 }
14634
14635 }
14636 </script>
14637
14638 <!-- [[[ test_2d.path.stroke.skew.html ]]] -->
14639
14640 <p>Canvas test: 2d.path.stroke.skew</p>
14641 <!-- Testing: Strokes lines are skewed by the current transformation matrix -->
14642 <canvas id="c452" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14643 <script>
14644
14645
14646 function test_2d_path_stroke_skew() {
14647
14648 var canvas = document.getElementById('c452');
14649 var ctx = canvas.getContext('2d');
14650
14651 ctx.fillStyle = '#f00';
14652 ctx.fillRect(0, 0, 100, 50);
14653
14654 ctx.save();
14655 ctx.beginPath();
14656 ctx.moveTo(49, -50);
14657 ctx.lineTo(201, -50);
14658 ctx.rotate(Math.PI/4);
14659 ctx.scale(1, 283);
14660 ctx.strokeStyle = '#0f0';
14661 ctx.stroke();
14662 ctx.restore();
14663
14664 ctx.save();
14665 ctx.beginPath();
14666 ctx.translate(-150, 0);
14667 ctx.moveTo(49, -50);
14668 ctx.lineTo(199, -50);
14669 ctx.rotate(Math.PI/4);
14670 ctx.scale(1, 142);
14671 ctx.strokeStyle = '#f00';
14672 ctx.stroke();
14673 ctx.restore();
14674
14675 ctx.save();
14676 ctx.beginPath();
14677 ctx.translate(-150, 0);
14678 ctx.moveTo(49, -50);
14679 ctx.lineTo(199, -50);
14680 ctx.rotate(Math.PI/4);
14681 ctx.scale(1, 142);
14682 ctx.strokeStyle = '#f00';
14683 ctx.stroke();
14684 ctx.restore();
14685
14686 isPixel(ctx, 0,0, 0,255,0,255, 0);
14687 isPixel(ctx, 50,0, 0,255,0,255, 0);
14688 isPixel(ctx, 99,0, 0,255,0,255, 0);
14689 isPixel(ctx, 0,25, 0,255,0,255, 0);
14690 isPixel(ctx, 50,25, 0,255,0,255, 0);
14691 isPixel(ctx, 99,25, 0,255,0,255, 0);
14692 isPixel(ctx, 0,49, 0,255,0,255, 0);
14693 isPixel(ctx, 50,49, 0,255,0,255, 0);
14694 isPixel(ctx, 99,49, 0,255,0,255, 0);
14695
14696 }
14697 </script>
14698
14699 <!-- [[[ test_2d.path.stroke.unaffected.html ]]] -->
14700
14701 <p>Canvas test: 2d.path.stroke.unaffected</p>
14702 <!-- Testing: Stroking does not start a new path or subpath -->
14703 <canvas id="c453" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14704 <script>
14705
14706
14707 function test_2d_path_stroke_unaffected() {
14708
14709 var canvas = document.getElementById('c453');
14710 var ctx = canvas.getContext('2d');
14711
14712 ctx.fillStyle = '#f00';
14713 ctx.fillRect(0, 0, 100, 50);
14714
14715 ctx.lineWidth = 50;
14716 ctx.moveTo(-100, 25);
14717 ctx.lineTo(-100, -100);
14718 ctx.lineTo(200, -100);
14719 ctx.lineTo(200, 25);
14720 ctx.strokeStyle = '#f00';
14721 ctx.stroke();
14722
14723 ctx.closePath();
14724 ctx.strokeStyle = '#0f0';
14725 ctx.stroke();
14726
14727 isPixel(ctx, 50,25, 0,255,0,255, 0);
14728
14729
14730 }
14731 </script>
14732
14733 <!-- [[[ test_2d.path.stroke.union.html ]]] -->
14734
14735 <p>Canvas test: 2d.path.stroke.union</p>
14736 <!-- Testing: Strokes in opposite directions are unioned, not subtracted -->
14737 <canvas id="c454" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14738 <script>
14739
14740
14741 function test_2d_path_stroke_union() {
14742
14743 var canvas = document.getElementById('c454');
14744 var ctx = canvas.getContext('2d');
14745
14746 ctx.fillStyle = '#f00';
14747 ctx.fillRect(0, 0, 100, 50);
14748
14749 ctx.strokeStyle = '#0f0';
14750 ctx.lineWidth = 40;
14751 ctx.moveTo(0, 10);
14752 ctx.lineTo(100, 10);
14753 ctx.moveTo(100, 40);
14754 ctx.lineTo(0, 40);
14755 ctx.stroke();
14756
14757 isPixel(ctx, 50,25, 0,255,0,255, 0);
14758
14759
14760 }
14761 </script>
14762
14763 <!-- [[[ test_2d.path.transformation.basic.html ]]] -->
14764
14765 <p>Canvas test: 2d.path.transformation.basic</p>
14766 <canvas id="c455" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14767 <script>
14768
14769
14770 function test_2d_path_transformation_basic() {
14771
14772 var canvas = document.getElementById('c455');
14773 var ctx = canvas.getContext('2d');
14774
14775 ctx.fillStyle = '#f00';
14776 ctx.fillRect(0, 0, 100, 50);
14777
14778 ctx.translate(-100, 0);
14779 ctx.rect(100, 0, 100, 50);
14780 ctx.translate(0, -100);
14781 ctx.fillStyle = '#0f0';
14782 ctx.fill();
14783
14784 isPixel(ctx, 50,25, 0,255,0,255, 0);
14785
14786
14787 }
14788 </script>
14789
14790 <!-- [[[ test_2d.path.transformation.changing.html ]]] -->
14791
14792 <p>Canvas test: 2d.path.transformation.changing</p>
14793 <!-- Testing: Transformations are applied while building paths, not when drawing -->
14794 <canvas id="c456" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14795 <script>
14796
14797
14798 function test_2d_path_transformation_changing() {
14799
14800 var canvas = document.getElementById('c456');
14801 var ctx = canvas.getContext('2d');
14802
14803 ctx.fillStyle = '#f00';
14804 ctx.fillRect(0, 0, 100, 50);
14805 ctx.fillStyle = '#0f0';
14806 ctx.moveTo(0, 0);
14807 ctx.translate(100, 0);
14808 ctx.lineTo(0, 0);
14809 ctx.translate(0, 50);
14810 ctx.lineTo(0, 0);
14811 ctx.translate(-100, 0);
14812 ctx.lineTo(0, 0);
14813 ctx.translate(1000, 1000);
14814 ctx.rotate(Math.PI/2);
14815 ctx.scale(0.1, 0.1);
14816 ctx.fill();
14817
14818 isPixel(ctx, 50,25, 0,255,0,255, 0);
14819
14820
14821 }
14822 </script>
14823
14824 <!-- [[[ test_2d.path.transformation.multiple.html ]]] -->
14825
14826 <p>Canvas test: 2d.path.transformation.multiple</p>
14827 <canvas id="c457" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14828 <script>
14829
14830
14831 function test_2d_path_transformation_multiple() {
14832
14833 var canvas = document.getElementById('c457');
14834 var ctx = canvas.getContext('2d');
14835
14836 ctx.fillStyle = '#f00';
14837 ctx.fillRect(0, 0, 100, 50);
14838
14839 ctx.rect(0, 0, 100, 50);
14840 ctx.fill();
14841 ctx.translate(-100, 0);
14842 ctx.fillStyle = '#0f0';
14843 ctx.fill();
14844
14845 isPixel(ctx, 50,25, 0,255,0,255, 0);
14846
14847
14848 }
14849 </script>
14850
14851 <!-- [[[ test_2d.pattern.animated.gif.html ]]] -->
14852
14853 <p>Canvas test: 2d.pattern.animated.gif</p>
14854 <!-- Testing: createPattern() of an animated GIF draws the first frame -->
14855 <canvas id="c458" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14856 <script>
14857
14858 var canvas458 = document.getElementById('c458');
14859 var ctx458 = canvas458.getContext('2d');
14860 var isDone_test_2d_pattern_animated_gif = false;
14861
14862 function test_2d_pattern_animated_gif() {
14863
14864 deferTest();
14865 setTimeout(function () {
14866 var pattern = ctx458.createPattern(document.getElementById('anim-gr_2.gif'), 'repeat');
14867 ctx458.fillStyle = pattern;
14868 ctx458.fillRect(0, 0, 50, 50);
14869 setTimeout(wrapFunction(function () {
14870 ctx458.fillRect(50, 0, 50, 50);
14871 isPixel(ctx458, 25,25, 0,255,0,255, 2);
14872 isPixel(ctx458, 75,25, 0,255,0,255, 2);
14873 isDone_test_2d_pattern_animated_gif = true;
14874 }), 2500);
14875 }, 2500);
14876
14877
14878 }
14879 </script>
14880 <img src="image_anim-gr.gif" id="anim-gr_2.gif" class="resource">
14881
14882 <!-- [[[ test_2d.pattern.basic.canvas.html ]]] -->
14883
14884 <p>Canvas test: 2d.pattern.basic.canvas</p>
14885 <canvas id="c459" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14886 <script>
14887
14888
14889 function test_2d_pattern_basic_canvas() {
14890
14891 var canvas = document.getElementById('c459');
14892 var ctx = canvas.getContext('2d');
14893
14894 ctx.fillStyle = '#f00';
14895 ctx.fillRect(0, 0, 100, 50);
14896
14897 var canvas2 = document.createElement('canvas');
14898 canvas2.width = 100;
14899 canvas2.height = 50;
14900 var ctx2 = canvas2.getContext('2d');
14901 ctx2.fillStyle = '#0f0';
14902 ctx2.fillRect(0, 0, 100, 50);
14903
14904 var pattern = ctx.createPattern(canvas2, 'no-repeat');
14905 ctx.fillStyle = pattern;
14906 ctx.fillRect(0, 0, 100, 50);
14907
14908 isPixel(ctx, 1,1, 0,255,0,255, 0);
14909 isPixel(ctx, 50,1, 0,255,0,255, 0);
14910 isPixel(ctx, 98,1, 0,255,0,255, 0);
14911 isPixel(ctx, 1,25, 0,255,0,255, 0);
14912 isPixel(ctx, 50,25, 0,255,0,255, 0);
14913 isPixel(ctx, 98,25, 0,255,0,255, 0);
14914 isPixel(ctx, 1,48, 0,255,0,255, 0);
14915 isPixel(ctx, 50,48, 0,255,0,255, 0);
14916 isPixel(ctx, 98,48, 0,255,0,255, 0);
14917
14918
14919 }
14920 </script>
14921
14922 <!-- [[[ test_2d.pattern.basic.image.html ]]] -->
14923
14924 <p>Canvas test: 2d.pattern.basic.image</p>
14925 <canvas id="c460" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14926 <script>
14927
14928
14929 function test_2d_pattern_basic_image() {
14930
14931 var canvas = document.getElementById('c460');
14932 var ctx = canvas.getContext('2d');
14933
14934 ctx.fillStyle = '#f00';
14935 ctx.fillRect(0, 0, 100, 50);
14936 var img = document.getElementById('green_8.png');
14937 var pattern = ctx.createPattern(img, 'no-repeat');
14938 ctx.fillStyle = pattern;
14939 ctx.fillRect(0, 0, 100, 50);
14940
14941 isPixel(ctx, 1,1, 0,255,0,255, 0);
14942 isPixel(ctx, 98,1, 0,255,0,255, 0);
14943 isPixel(ctx, 1,48, 0,255,0,255, 0);
14944 isPixel(ctx, 98,48, 0,255,0,255, 0);
14945
14946
14947 }
14948 </script>
14949 <img src="image_green.png" id="green_8.png" class="resource">
14950
14951 <!-- [[[ test_2d.pattern.basic.nocontext.html ]]] -->
14952
14953 <p>Canvas test: 2d.pattern.basic.nocontext</p>
14954 <canvas id="c461" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14955 <script>
14956
14957
14958 function test_2d_pattern_basic_nocontext() {
14959
14960 var canvas = document.getElementById('c461');
14961 var ctx = canvas.getContext('2d');
14962
14963 var canvas2 = document.createElement('canvas');
14964 canvas2.width = 100;
14965 canvas2.height = 50;
14966 var pattern = ctx.createPattern(canvas2, 'no-repeat');
14967
14968 ctx.fillStyle = '#0f0';
14969 ctx.fillRect(0, 0, 100, 50);
14970 ctx.fillStyle = pattern;
14971 ctx.fillRect(0, 0, 100, 50);
14972
14973 isPixel(ctx, 1,1, 0,255,0,255, 0);
14974 isPixel(ctx, 98,1, 0,255,0,255, 0);
14975 isPixel(ctx, 1,48, 0,255,0,255, 0);
14976 isPixel(ctx, 98,48, 0,255,0,255, 0);
14977
14978
14979 }
14980 </script>
14981
14982 <!-- [[[ test_2d.pattern.basic.type.html ]]] -->
14983
14984 <p>Canvas test: 2d.pattern.basic.type</p>
14985 <canvas id="c462" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14986 <script>
14987
14988 function test_2d_pattern_basic_type() {
14989
14990 var canvas = document.getElementById('c462');
14991 var ctx = canvas.getContext('2d');
14992
14993 ok(window.CanvasPattern !== undefined, "window.CanvasPattern !== undefined");
14994
14995 window.CanvasPattern.prototype.thisImplementsCanvasPattern = true;
14996
14997 var img = document.getElementById('green_9.png');
14998 var pattern = ctx.createPattern(img, 'no-repeat');
14999 ok(pattern.thisImplementsCanvasPattern, "pattern.thisImplementsCanvasPattern");
15000
15001
15002 }
15003 </script>
15004 <img src="image_green.png" id="green_9.png" class="resource">
15005
15006 <!-- [[[ test_2d.pattern.basic.zerocanvas.html ]]] -->
15007
15008 <p>Canvas test: 2d.pattern.basic.zerocanvas</p>
15009 <canvas id="c463" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15010 <script>
15011
15012
15013
15014 function test_2d_pattern_basic_zerocanvas() {
15015
15016 var canvas = document.getElementById('c463');
15017 var ctx = canvas.getContext('2d');
15018
15019 canvas.width = 0;
15020 canvas.height = 10;
15021 ok(canvas.width === 0, "canvas.width === 0");
15022 ok(canvas.height === 10, "canvas.height === 10");
15023 var _thrown = undefined; try {
15024 ctx.createPattern(canvas, 'repeat');
15025 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
15026
15027 canvas.width = 10;
15028 canvas.height = 0;
15029 ok(canvas.width === 10, "canvas.width === 10");
15030 ok(canvas.height === 0, "canvas.height === 0");
15031 var _thrown = undefined; try {
15032 ctx.createPattern(canvas, 'repeat');
15033 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
15034
15035 canvas.width = 0;
15036 canvas.height = 0;
15037 ok(canvas.width === 0, "canvas.width === 0");
15038 ok(canvas.height === 0, "canvas.height === 0");
15039 var _thrown = undefined; try {
15040 ctx.createPattern(canvas, 'repeat');
15041 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
15042
15043
15044 }
15045 </script>
15046
15047 <!-- [[[ test_2d.pattern.crosscanvas.html ]]] -->
15048
15049 <p>Canvas test: 2d.pattern.crosscanvas</p>
15050 <canvas id="c464" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15051 <script>
15052
15053
15054 function test_2d_pattern_crosscanvas() {
15055
15056 var canvas = document.getElementById('c464');
15057 var ctx = canvas.getContext('2d');
15058
15059 var img = document.getElementById('green_10.png');
15060
15061 var pattern = document.createElement('canvas').getContext('2d').createPattern(img, 'no-repeat');
15062 ctx.fillStyle = '#f00';
15063 ctx.fillRect(0, 0, 100, 50);
15064 ctx.fillStyle = pattern;
15065 ctx.fillRect(0, 0, 100, 50);
15066
15067 isPixel(ctx, 50,25, 0,255,0,255, 0);
15068
15069
15070 }
15071 </script>
15072 <img src="image_green.png" id="green_10.png" class="resource">
15073
15074 <!-- [[[ test_2d.pattern.image.broken.html ]]] -->
15075
15076 <p>Canvas test: 2d.pattern.image.broken</p>
15077 <canvas id="c465" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15078 <script>
15079
15080 function test_2d_pattern_image_broken() {
15081
15082 var canvas = document.getElementById('c465');
15083 var ctx = canvas.getContext('2d');
15084
15085 var img = document.getElementById('broken_2.png');
15086 todo(img.complete === false, "img.complete === false");
15087 var _thrown = undefined; try {
15088 ctx.createPattern(img, 'repeat');
15089 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
15090
15091
15092 }
15093 </script>
15094 <img src="image_broken.png" id="broken_2.png" class="resource">
15095
15096 <!-- [[[ test_2d.pattern.image.incomplete.html ]]] -->
15097
15098 <p>Canvas test: 2d.pattern.image.incomplete</p>
15099 <canvas id="c466" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15100 <script>
15101
15102 function test_2d_pattern_image_incomplete() {
15103
15104 var canvas = document.getElementById('c466');
15105 var ctx = canvas.getContext('2d');
15106
15107 var img = new Image();
15108 todo(img.complete === false, "img.complete === false");
15109 var _thrown = undefined; try {
15110 ctx.createPattern(img, 'repeat');
15111 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
15112
15113
15114 }
15115 </script>
15116
15117 <!-- [[[ test_2d.pattern.image.null.html ]]] -->
15118
15119 <p>Canvas test: 2d.pattern.image.null</p>
15120 <canvas id="c467" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15121 <script>
15122
15123 function test_2d_pattern_image_null() {
15124
15125 var canvas = document.getElementById('c467');
15126 var ctx = canvas.getContext('2d');
15127
15128 var _thrown = undefined; try {
15129 ctx.createPattern(null, 'repeat');
15130 } catch (e) { _thrown = e };
15131 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
15132 }
15133 </script>
15134
15135 <!-- [[[ test_2d.pattern.image.string.html ]]] -->
15136
15137 <p>Canvas test: 2d.pattern.image.string</p>
15138 <canvas id="c468" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15139 <script>
15140
15141 function test_2d_pattern_image_string() {
15142
15143 var canvas = document.getElementById('c468');
15144 var ctx = canvas.getContext('2d');
15145
15146 var _thrown = undefined; try {
15147 ctx.createPattern('image_red.png', 'repeat');
15148 } catch (e) { _thrown = e };
15149 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
15150 }
15151 </script>
15152
15153 <!-- [[[ test_2d.pattern.image.undefined.html ]]] -->
15154
15155 <p>Canvas test: 2d.pattern.image.undefined</p>
15156 <canvas id="c469" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15157 <script>
15158
15159 function test_2d_pattern_image_undefined() {
15160
15161 var canvas = document.getElementById('c469');
15162 var ctx = canvas.getContext('2d');
15163
15164 var _thrown = undefined; try {
15165 ctx.createPattern(undefined, 'repeat');
15166 } catch (e) { _thrown = e };
15167 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
15168 }
15169 </script>
15170
15171 <!-- [[[ test_2d.pattern.modify.canvas1.html ]]] -->
15172
15173 <p>Canvas test: 2d.pattern.modify.canvas1</p>
15174 <canvas id="c470" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15175 <script>
15176
15177
15178 function test_2d_pattern_modify_canvas1() {
15179
15180 var canvas = document.getElementById('c470');
15181 var ctx = canvas.getContext('2d');
15182
15183 var canvas2 = document.createElement('canvas');
15184 canvas2.width = 100;
15185 canvas2.height = 50;
15186 var ctx2 = canvas2.getContext('2d');
15187 ctx2.fillStyle = '#0f0';
15188 ctx2.fillRect(0, 0, 100, 50);
15189
15190 var pattern = ctx.createPattern(canvas2, 'no-repeat');
15191
15192 ctx2.fillStyle = '#f00';
15193 ctx2.fillRect(0, 0, 100, 50);
15194
15195 ctx.fillStyle = pattern;
15196 ctx.fillRect(0, 0, 100, 50);
15197
15198 isPixel(ctx, 1,1, 0,255,0,255, 0);
15199 isPixel(ctx, 98,1, 0,255,0,255, 0);
15200 isPixel(ctx, 1,48, 0,255,0,255, 0);
15201 isPixel(ctx, 98,48, 0,255,0,255, 0);
15202
15203
15204 }
15205 </script>
15206
15207 <!-- [[[ test_2d.pattern.modify.canvas2.html ]]] -->
15208
15209 <p>Canvas test: 2d.pattern.modify.canvas2</p>
15210 <canvas id="c471" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15211 <script>
15212
15213
15214 function test_2d_pattern_modify_canvas2() {
15215
15216 var canvas = document.getElementById('c471');
15217 var ctx = canvas.getContext('2d');
15218
15219 var canvas2 = document.createElement('canvas');
15220 canvas2.width = 100;
15221 canvas2.height = 50;
15222 var ctx2 = canvas2.getContext('2d');
15223 ctx2.fillStyle = '#0f0';
15224 ctx2.fillRect(0, 0, 100, 50);
15225
15226 var pattern = ctx.createPattern(canvas2, 'no-repeat');
15227 ctx.fillStyle = pattern;
15228 ctx.fillRect(0, 0, 100, 50);
15229 ctx.fillStyle = '#f00';
15230 ctx.fillRect(0, 0, 100, 50);
15231
15232 ctx2.fillStyle = '#f00';
15233 ctx2.fillRect(0, 0, 100, 50);
15234
15235 ctx.fillStyle = pattern;
15236 ctx.fillRect(0, 0, 100, 50);
15237
15238 isPixel(ctx, 1,1, 0,255,0,255, 0);
15239 isPixel(ctx, 98,1, 0,255,0,255, 0);
15240 isPixel(ctx, 1,48, 0,255,0,255, 0);
15241 isPixel(ctx, 98,48, 0,255,0,255, 0);
15242
15243
15244 }
15245 </script>
15246
15247 <!-- [[[ test_2d.pattern.modify.image1.html ]]] -->
15248
15249 <p>Canvas test: 2d.pattern.modify.image1</p>
15250 <canvas id="c472" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15251 <script>
15252
15253 var canvas472 = document.getElementById('c472');
15254 var ctx472 = canvas472.getContext('2d');
15255
15256 function test_2d_pattern_modify_image1() {
15257
15258 var img = document.getElementById('green_11.png');
15259 var pattern = ctx472.createPattern(img, 'no-repeat');
15260 deferTest();
15261 img.onload = wrapFunction(function ()
15262 {
15263 ctx472.fillStyle = pattern;
15264 ctx472.fillRect(0, 0, 100, 50);
15265
15266 isPixel(ctx472, 1,1, 0,255,0,255, 0);
15267 isPixel(ctx472, 98,1, 0,255,0,255, 0);
15268 isPixel(ctx472, 1,48, 0,255,0,255, 0);
15269 isPixel(ctx472, 98,48, 0,255,0,255, 0);
15270 });
15271 img.src = 'image_red.png';
15272
15273
15274 }
15275 </script>
15276 <img src="image_green.png" id="green_11.png" class="resource">
15277
15278 <!-- [[[ test_2d.pattern.modify.image2.html ]]] -->
15279
15280 <p>Canvas test: 2d.pattern.modify.image2</p>
15281 <canvas id="c473" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15282 <script>
15283
15284
15285 var canvas473 = document.getElementById('c473');
15286 var ctx473 = canvas473.getContext('2d');
15287
15288 function test_2d_pattern_modify_image2() {
15289
15290 var img = document.getElementById('green_12.png');
15291 var pattern = ctx473.createPattern(img, 'no-repeat');
15292 ctx473.fillStyle = pattern;
15293 ctx473.fillRect(0, 0, 100, 50);
15294 ctx473.fillStyle = '#00f';
15295 ctx473.fillRect(0, 0, 100, 50);
15296 deferTest();
15297 img.onload = wrapFunction(function ()
15298 {
15299 ctx473.fillStyle = pattern;
15300 ctx473.fillRect(0, 0, 100, 50);
15301
15302 isPixel(ctx473, 1,1, 0,255,0,255, 0);
15303 isPixel(ctx473, 98,1, 0,255,0,255, 0);
15304 isPixel(ctx473, 1,48, 0,255,0,255, 0);
15305 isPixel(ctx473, 98,48, 0,255,0,255, 0);
15306 });
15307 img.src = 'image_red.png';
15308
15309
15310 }
15311 </script>
15312 <img src="image_green.png" id="green_12.png" class="resource">
15313
15314 <!-- [[[ test_2d.pattern.paint.norepeat.basic.html ]]] -->
15315
15316 <p>Canvas test: 2d.pattern.paint.norepeat.basic</p>
15317 <canvas id="c474" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15318 <script>
15319
15320
15321 function test_2d_pattern_paint_norepeat_basic() {
15322
15323 var canvas = document.getElementById('c474');
15324 var ctx = canvas.getContext('2d');
15325
15326 ctx.fillStyle = '#f00';
15327 ctx.fillRect(0, 0, 100, 50);
15328
15329 var img = document.getElementById('green_13.png');
15330 var pattern = ctx.createPattern(img, 'no-repeat');
15331 ctx.fillStyle = pattern;
15332 ctx.fillRect(0, 0, 100, 50);
15333
15334 isPixel(ctx, 1,1, 0,255,0,255, 0);
15335 isPixel(ctx, 98,1, 0,255,0,255, 0);
15336 isPixel(ctx, 1,48, 0,255,0,255, 0);
15337 isPixel(ctx, 98,48, 0,255,0,255, 0);
15338
15339
15340 }
15341 </script>
15342 <img src="image_green.png" id="green_13.png" class="resource">
15343
15344 <!-- [[[ test_2d.pattern.paint.norepeat.coord1.html ]]] -->
15345
15346 <p>Canvas test: 2d.pattern.paint.norepeat.coord1</p>
15347 <canvas id="c475" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15348 <script>
15349
15350
15351 function test_2d_pattern_paint_norepeat_coord1() {
15352
15353 var canvas = document.getElementById('c475');
15354 var ctx = canvas.getContext('2d');
15355
15356 ctx.fillStyle = '#0f0';
15357 ctx.fillRect(0, 0, 50, 50);
15358 ctx.fillStyle = '#f00';
15359 ctx.fillRect(50, 0, 50, 50);
15360
15361 var img = document.getElementById('green_14.png');
15362 var pattern = ctx.createPattern(img, 'no-repeat');
15363 ctx.fillStyle = pattern;
15364 ctx.translate(50, 0);
15365 ctx.fillRect(-50, 0, 100, 50);
15366
15367 isPixel(ctx, 1,1, 0,255,0,255, 0);
15368 isPixel(ctx, 98,1, 0,255,0,255, 0);
15369 isPixel(ctx, 1,48, 0,255,0,255, 0);
15370 isPixel(ctx, 98,48, 0,255,0,255, 0);
15371
15372
15373 }
15374 </script>
15375 <img src="image_green.png" id="green_14.png" class="resource">
15376
15377 <!-- [[[ test_2d.pattern.paint.norepeat.coord2.html ]]] -->
15378
15379 <p>Canvas test: 2d.pattern.paint.norepeat.coord2</p>
15380 <canvas id="c476" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15381 <script>
15382
15383
15384 function test_2d_pattern_paint_norepeat_coord2() {
15385
15386 var canvas = document.getElementById('c476');
15387 var ctx = canvas.getContext('2d');
15388
15389 var img = document.getElementById('green_15.png');
15390 var pattern = ctx.createPattern(img, 'no-repeat');
15391 ctx.fillStyle = pattern;
15392 ctx.fillRect(0, 0, 50, 50);
15393
15394 ctx.fillStyle = '#f00';
15395 ctx.fillRect(50, 0, 50, 50);
15396
15397 ctx.fillStyle = pattern;
15398 ctx.translate(50, 0);
15399 ctx.fillRect(-50, 0, 100, 50);
15400
15401 isPixel(ctx, 1,1, 0,255,0,255, 0);
15402 isPixel(ctx, 98,1, 0,255,0,255, 0);
15403 isPixel(ctx, 1,48, 0,255,0,255, 0);
15404 isPixel(ctx, 98,48, 0,255,0,255, 0);
15405
15406
15407 }
15408 </script>
15409 <img src="image_green.png" id="green_15.png" class="resource">
15410
15411 <!-- [[[ test_2d.pattern.paint.norepeat.coord3.html ]]] -->
15412
15413 <p>Canvas test: 2d.pattern.paint.norepeat.coord3</p>
15414 <canvas id="c477" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15415 <script>
15416
15417
15418 function test_2d_pattern_paint_norepeat_coord3() {
15419
15420 var canvas = document.getElementById('c477');
15421 var ctx = canvas.getContext('2d');
15422
15423 ctx.fillStyle = '#0f0';
15424 ctx.fillRect(0, 0, 100, 50);
15425
15426 var img = document.getElementById('red_15.png');
15427 var pattern = ctx.createPattern(img, 'no-repeat');
15428 ctx.fillStyle = pattern;
15429 ctx.translate(50, 25);
15430 ctx.fillRect(-50, -25, 100, 50);
15431
15432 ctx.fillStyle = '#0f0';
15433 ctx.fillRect(0, 0, 50, 25);
15434
15435 isPixel(ctx, 1,1, 0,255,0,255, 0);
15436 isPixel(ctx, 98,1, 0,255,0,255, 0);
15437 isPixel(ctx, 1,48, 0,255,0,255, 0);
15438 isPixel(ctx, 98,48, 0,255,0,255, 0);
15439
15440
15441 }
15442 </script>
15443 <img src="image_red.png" id="red_15.png" class="resource">
15444
15445 <!-- [[[ test_2d.pattern.paint.norepeat.outside.html ]]] -->
15446
15447 <p>Canvas test: 2d.pattern.paint.norepeat.outside</p>
15448 <canvas id="c478" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15449 <script>
15450
15451
15452 function test_2d_pattern_paint_norepeat_outside() {
15453
15454 var canvas = document.getElementById('c478');
15455 var ctx = canvas.getContext('2d');
15456
15457 ctx.fillStyle = '#f00';
15458 ctx.fillRect(0, 0, 100, 50);
15459
15460 var img = document.getElementById('red_16.png');
15461 var pattern = ctx.createPattern(img, 'no-repeat');
15462 ctx.fillStyle = '#0f0';
15463 ctx.fillRect(0, 0, 100, 50);
15464
15465 ctx.fillStyle = pattern;
15466 ctx.fillRect(0, -50, 100, 50);
15467 ctx.fillRect(-100, 0, 100, 50);
15468 ctx.fillRect(0, 50, 100, 50);
15469 ctx.fillRect(100, 0, 100, 50);
15470
15471 isPixel(ctx, 1,1, 0,255,0,255, 0);
15472 isPixel(ctx, 98,1, 0,255,0,255, 0);
15473 isPixel(ctx, 1,48, 0,255,0,255, 0);
15474 isPixel(ctx, 98,48, 0,255,0,255, 0);
15475
15476
15477 }
15478 </script>
15479 <img src="image_red.png" id="red_16.png" class="resource">
15480
15481 <!-- [[[ test_2d.pattern.paint.orientation.canvas.html ]]] -->
15482
15483 <p>Canvas test: 2d.pattern.paint.orientation.canvas</p>
15484 <!-- Testing: Canvas patterns do not get flipped when painted -->
15485 <canvas id="c479" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15486 <script>
15487
15488
15489 function test_2d_pattern_paint_orientation_canvas() {
15490
15491 var canvas = document.getElementById('c479');
15492 var ctx = canvas.getContext('2d');
15493
15494 ctx.fillStyle = '#f00';
15495 ctx.fillRect(0, 0, 100, 50);
15496
15497 var canvas2 = document.createElement('canvas');
15498 canvas2.width = 100;
15499 canvas2.height = 50;
15500 var ctx2 = canvas2.getContext('2d');
15501 ctx2.fillStyle = '#f00';
15502 ctx2.fillRect(0, 0, 100, 25);
15503 ctx2.fillStyle = '#0f0';
15504 ctx2.fillRect(0, 25, 100, 25);
15505
15506 var pattern = ctx.createPattern(canvas2, 'no-repeat');
15507 ctx.fillStyle = pattern;
15508 ctx.fillRect(0, 0, 100, 50);
15509 ctx.fillStyle = '#0f0';
15510 ctx.fillRect(0, 0, 100, 25);
15511
15512 isPixel(ctx, 1,1, 0,255,0,255, 0);
15513 isPixel(ctx, 98,1, 0,255,0,255, 0);
15514 isPixel(ctx, 1,48, 0,255,0,255, 0);
15515 isPixel(ctx, 98,48, 0,255,0,255, 0);
15516
15517
15518 }
15519 </script>
15520
15521 <!-- [[[ test_2d.pattern.paint.orientation.image.html ]]] -->
15522
15523 <p>Canvas test: 2d.pattern.paint.orientation.image</p>
15524 <!-- Testing: Image patterns do not get flipped when painted -->
15525 <canvas id="c480" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15526 <script>
15527
15528
15529 function test_2d_pattern_paint_orientation_image() {
15530
15531 var canvas = document.getElementById('c480');
15532 var ctx = canvas.getContext('2d');
15533
15534 ctx.fillStyle = '#f00';
15535 ctx.fillRect(0, 0, 100, 50);
15536
15537 var img = document.getElementById('rrgg-256x256_1.png');
15538 var pattern = ctx.createPattern(img, 'no-repeat');
15539 ctx.fillStyle = pattern;
15540 ctx.save();
15541 ctx.translate(0, -103);
15542 ctx.fillRect(0, 103, 100, 50);
15543 ctx.restore();
15544
15545 ctx.fillStyle = '#0f0';
15546 ctx.fillRect(0, 0, 100, 25);
15547
15548 isPixel(ctx, 1,1, 0,255,0,255, 0);
15549 isPixel(ctx, 98,1, 0,255,0,255, 0);
15550 isPixel(ctx, 1,48, 0,255,0,255, 0);
15551 isPixel(ctx, 98,48, 0,255,0,255, 0);
15552
15553
15554 }
15555 </script>
15556 <img src="image_rrgg-256x256.png" id="rrgg-256x256_1.png" class="resource">
15557
15558 <!-- [[[ test_2d.pattern.paint.repeat.basic.html ]]] -->
15559
15560 <p>Canvas test: 2d.pattern.paint.repeat.basic</p>
15561 <canvas id="c481" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15562 <script>
15563
15564
15565 function test_2d_pattern_paint_repeat_basic() {
15566
15567 var canvas = document.getElementById('c481');
15568 var ctx = canvas.getContext('2d');
15569
15570 ctx.fillStyle = '#f00';
15571 ctx.fillRect(0, 0, 100, 50);
15572
15573 var img = document.getElementById('green-16x16_1.png');
15574 var pattern = ctx.createPattern(img, 'repeat');
15575 ctx.fillStyle = pattern;
15576 ctx.fillRect(0, 0, 100, 50);
15577
15578 isPixel(ctx, 1,1, 0,255,0,255, 0);
15579 isPixel(ctx, 98,1, 0,255,0,255, 0);
15580 isPixel(ctx, 1,48, 0,255,0,255, 0);
15581 isPixel(ctx, 98,48, 0,255,0,255, 0);
15582
15583
15584 }
15585 </script>
15586 <img src="image_green-16x16.png" id="green-16x16_1.png" class="resource">
15587
15588 <!-- [[[ test_2d.pattern.paint.repeat.coord1.html ]]] -->
15589
15590 <p>Canvas test: 2d.pattern.paint.repeat.coord1</p>
15591 <canvas id="c482" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15592 <script>
15593
15594
15595 function test_2d_pattern_paint_repeat_coord1() {
15596
15597 var canvas = document.getElementById('c482');
15598 var ctx = canvas.getContext('2d');
15599
15600 ctx.fillStyle = '#f00';
15601 ctx.fillRect(0, 0, 100, 50);
15602
15603 var img = document.getElementById('rgrg-256x256_3.png');
15604 var pattern = ctx.createPattern(img, 'repeat');
15605 ctx.fillStyle = pattern;
15606 ctx.translate(-128, -78);
15607 ctx.fillRect(128, 78, 100, 50);
15608
15609 isPixel(ctx, 1,1, 0,255,0,255, 0);
15610 isPixel(ctx, 98,1, 0,255,0,255, 0);
15611 isPixel(ctx, 1,48, 0,255,0,255, 0);
15612 isPixel(ctx, 98,48, 0,255,0,255, 0);
15613
15614
15615 }
15616 </script>
15617 <img src="image_rgrg-256x256.png" id="rgrg-256x256_3.png" class="resource">
15618
15619 <!-- [[[ test_2d.pattern.paint.repeat.coord2.html ]]] -->
15620
15621 <p>Canvas test: 2d.pattern.paint.repeat.coord2</p>
15622 <canvas id="c483" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15623 <script>
15624
15625
15626 function test_2d_pattern_paint_repeat_coord2() {
15627
15628 var canvas = document.getElementById('c483');
15629 var ctx = canvas.getContext('2d');
15630
15631 var img = document.getElementById('ggrr-256x256_3.png');
15632 var pattern = ctx.createPattern(img, 'repeat');
15633 ctx.fillStyle = pattern;
15634 ctx.fillRect(0, 0, 100, 50);
15635
15636 isPixel(ctx, 1,1, 0,255,0,255, 0);
15637 isPixel(ctx, 98,1, 0,255,0,255, 0);
15638 isPixel(ctx, 1,48, 0,255,0,255, 0);
15639 isPixel(ctx, 98,48, 0,255,0,255, 0);
15640
15641
15642 }
15643 </script>
15644 <img src="image_ggrr-256x256.png" id="ggrr-256x256_3.png" class="resource">
15645
15646 <!-- [[[ test_2d.pattern.paint.repeat.coord3.html ]]] -->
15647
15648 <p>Canvas test: 2d.pattern.paint.repeat.coord3</p>
15649 <canvas id="c484" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15650 <script>
15651
15652
15653
15654 function test_2d_pattern_paint_repeat_coord3() {
15655
15656 var canvas = document.getElementById('c484');
15657 var ctx = canvas.getContext('2d');
15658
15659 var img = document.getElementById('rgrg-256x256_4.png');
15660 var pattern = ctx.createPattern(img, 'repeat');
15661 ctx.fillStyle = pattern;
15662 ctx.fillRect(0, 0, 100, 50);
15663
15664 ctx.translate(-128, -78);
15665 ctx.fillRect(128, 78, 100, 50);
15666
15667 isPixel(ctx, 1,1, 0,255,0,255, 0);
15668 isPixel(ctx, 98,1, 0,255,0,255, 0);
15669 isPixel(ctx, 1,48, 0,255,0,255, 0);
15670 isPixel(ctx, 98,48, 0,255,0,255, 0);
15671 }
15672 </script>
15673 <img src="image_rgrg-256x256.png" id="rgrg-256x256_4.png" class="resource">
15674
15675 <!-- [[[ test_2d.pattern.paint.repeat.outside.html ]]] -->
15676
15677 <p>Canvas test: 2d.pattern.paint.repeat.outside</p>
15678 <canvas id="c485" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15679 <script>
15680
15681
15682 function test_2d_pattern_paint_repeat_outside() {
15683
15684 var canvas = document.getElementById('c485');
15685 var ctx = canvas.getContext('2d');
15686
15687 ctx.fillStyle = '#f00';
15688 ctx.fillRect(0, 0, 100, 50);
15689
15690 var img = document.getElementById('green-16x16_2.png');
15691 var pattern = ctx.createPattern(img, 'repeat');
15692 ctx.fillStyle = pattern;
15693 ctx.translate(50, 25);
15694 ctx.fillRect(-50, -25, 100, 50);
15695
15696 isPixel(ctx, 1,1, 0,255,0,255, 0);
15697 isPixel(ctx, 98,1, 0,255,0,255, 0);
15698 isPixel(ctx, 1,48, 0,255,0,255, 0);
15699 isPixel(ctx, 98,48, 0,255,0,255, 0);
15700
15701
15702 }
15703 </script>
15704 <img src="image_green-16x16.png" id="green-16x16_2.png" class="resource">
15705
15706 <!-- [[[ test_2d.pattern.paint.repeatx.basic.html ]]] -->
15707
15708 <p>Canvas test: 2d.pattern.paint.repeatx.basic</p>
15709 <canvas id="c486" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15710 <script>
15711
15712
15713 function test_2d_pattern_paint_repeatx_basic() {
15714
15715 var canvas = document.getElementById('c486');
15716 var ctx = canvas.getContext('2d');
15717
15718 ctx.fillStyle = '#0f0';
15719 ctx.fillRect(0, 0, 100, 50);
15720 ctx.fillStyle = '#f00';
15721 ctx.fillRect(0, 0, 100, 16);
15722
15723 var img = document.getElementById('green-16x16_3.png');
15724 var pattern = ctx.createPattern(img, 'repeat-x');
15725 ctx.fillStyle = pattern;
15726 ctx.fillRect(0, 0, 100, 50);
15727
15728 isPixel(ctx, 1,1, 0,255,0,255, 0);
15729 isPixel(ctx, 98,1, 0,255,0,255, 0);
15730 isPixel(ctx, 1,48, 0,255,0,255, 0);
15731 isPixel(ctx, 98,48, 0,255,0,255, 0);
15732
15733
15734 }
15735 </script>
15736 <img src="image_green-16x16.png" id="green-16x16_3.png" class="resource">
15737
15738 <!-- [[[ test_2d.pattern.paint.repeatx.coord1.html ]]] -->
15739
15740 <p>Canvas test: 2d.pattern.paint.repeatx.coord1</p>
15741 <canvas id="c487" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15742 <script>
15743
15744
15745
15746 function test_2d_pattern_paint_repeatx_coord1() {
15747
15748 var canvas = document.getElementById('c487');
15749 var ctx = canvas.getContext('2d');
15750
15751 ctx.fillStyle = '#0f0';
15752 ctx.fillRect(0, 0, 100, 50);
15753
15754 var img = document.getElementById('red-16x16_1.png');
15755 var pattern = ctx.createPattern(img, 'repeat-x');
15756 ctx.fillStyle = pattern;
15757 ctx.translate(0, 16);
15758 ctx.fillRect(0, -16, 100, 50);
15759
15760 ctx.fillStyle = '#0f0';
15761 ctx.fillRect(0, 0, 100, 16);
15762
15763 isPixel(ctx, 1,1, 0,255,0,255, 0);
15764 isPixel(ctx, 98,1, 0,255,0,255, 0);
15765 isPixel(ctx, 1,48, 0,255,0,255, 0);
15766 isPixel(ctx, 98,48, 0,255,0,255, 0);
15767 isPixel(ctx, 1,25, 0,255,0,255, 0);
15768 isPixel(ctx, 98,25, 0,255,0,255, 0);
15769 }
15770 </script>
15771 <img src="image_red-16x16.png" id="red-16x16_1.png" class="resource">
15772
15773 <!-- [[[ test_2d.pattern.paint.repeatx.outside.html ]]] -->
15774
15775 <p>Canvas test: 2d.pattern.paint.repeatx.outside</p>
15776 <canvas id="c488" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15777 <script>
15778
15779
15780
15781 function test_2d_pattern_paint_repeatx_outside() {
15782
15783 var canvas = document.getElementById('c488');
15784 var ctx = canvas.getContext('2d');
15785
15786 ctx.fillStyle = '#0f0';
15787 ctx.fillRect(0, 0, 100, 50);
15788
15789 var img = document.getElementById('red-16x16_2.png');
15790 var pattern = ctx.createPattern(img, 'repeat-x');
15791 ctx.fillStyle = pattern;
15792 ctx.fillRect(0, 0, 100, 50);
15793
15794 ctx.fillStyle = '#0f0';
15795 ctx.fillRect(0, 0, 100, 16);
15796
15797 isPixel(ctx, 1,1, 0,255,0,255, 0);
15798 isPixel(ctx, 98,1, 0,255,0,255, 0);
15799 isPixel(ctx, 1,48, 0,255,0,255, 0);
15800 isPixel(ctx, 98,48, 0,255,0,255, 0);
15801 }
15802 </script>
15803 <img src="image_red-16x16.png" id="red-16x16_2.png" class="resource">
15804
15805 <!-- [[[ test_2d.pattern.paint.repeaty.basic.html ]]] -->
15806
15807 <p>Canvas test: 2d.pattern.paint.repeaty.basic</p>
15808 <canvas id="c489" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15809 <script>
15810
15811
15812 function test_2d_pattern_paint_repeaty_basic() {
15813
15814 var canvas = document.getElementById('c489');
15815 var ctx = canvas.getContext('2d');
15816
15817 ctx.fillStyle = '#0f0';
15818 ctx.fillRect(0, 0, 100, 50);
15819 ctx.fillStyle = '#f00';
15820 ctx.fillRect(0, 0, 16, 50);
15821
15822 var img = document.getElementById('green-16x16_4.png');
15823 var pattern = ctx.createPattern(img, 'repeat-y');
15824 ctx.fillStyle = pattern;
15825 ctx.fillRect(0, 0, 100, 50);
15826
15827 isPixel(ctx, 1,1, 0,255,0,255, 0);
15828 isPixel(ctx, 98,1, 0,255,0,255, 0);
15829 isPixel(ctx, 1,48, 0,255,0,255, 0);
15830 isPixel(ctx, 98,48, 0,255,0,255, 0);
15831
15832
15833 }
15834 </script>
15835 <img src="image_green-16x16.png" id="green-16x16_4.png" class="resource">
15836
15837 <!-- [[[ test_2d.pattern.paint.repeaty.coord1.html ]]] -->
15838
15839 <p>Canvas test: 2d.pattern.paint.repeaty.coord1</p>
15840 <canvas id="c490" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15841 <script>
15842
15843
15844
15845 function test_2d_pattern_paint_repeaty_coord1() {
15846
15847 var canvas = document.getElementById('c490');
15848 var ctx = canvas.getContext('2d');
15849
15850 ctx.fillStyle = '#0f0';
15851 ctx.fillRect(0, 0, 100, 50);
15852
15853 var img = document.getElementById('red-16x16_3.png');
15854 var pattern = ctx.createPattern(img, 'repeat-y');
15855 ctx.fillStyle = pattern;
15856 ctx.translate(48, 0);
15857 ctx.fillRect(-48, 0, 100, 50);
15858
15859 ctx.fillStyle = '#0f0';
15860 ctx.fillRect(0, 0, 16, 50);
15861
15862 isPixel(ctx, 50,1, 0,255,0,255, 0);
15863 isPixel(ctx, 50,48, 0,255,0,255, 0);
15864
15865 isPixel(ctx, 1,1, 0,255,0,255, 0);
15866 isPixel(ctx, 98,1, 0,255,0,255, 0);
15867 isPixel(ctx, 1,48, 0,255,0,255, 0);
15868 isPixel(ctx, 98,48, 0,255,0,255, 0);
15869 }
15870 </script>
15871 <img src="image_red-16x16.png" id="red-16x16_3.png" class="resource">
15872
15873 <!-- [[[ test_2d.pattern.paint.repeaty.outside.html ]]] -->
15874
15875 <p>Canvas test: 2d.pattern.paint.repeaty.outside</p>
15876 <canvas id="c491" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15877 <script>
15878
15879
15880
15881 function test_2d_pattern_paint_repeaty_outside() {
15882
15883 var canvas = document.getElementById('c491');
15884 var ctx = canvas.getContext('2d');
15885
15886 ctx.fillStyle = '#0f0';
15887 ctx.fillRect(0, 0, 100, 50);
15888
15889 var img = document.getElementById('red-16x16_4.png');
15890 var pattern = ctx.createPattern(img, 'repeat-y');
15891 ctx.fillStyle = pattern;
15892 ctx.fillRect(0, 0, 100, 50);
15893
15894 ctx.fillStyle = '#0f0';
15895 ctx.fillRect(0, 0, 16, 50);
15896
15897 isPixel(ctx, 1,1, 0,255,0,255, 0);
15898 isPixel(ctx, 1,48, 0,255,0,255, 0);
15899 isPixel(ctx, 98,1, 0,255,0,255, 0);
15900 isPixel(ctx, 98,48, 0,255,0,255, 0);
15901 }
15902 </script>
15903 <img src="image_red-16x16.png" id="red-16x16_4.png" class="resource">
15904
15905 <!-- [[[ test_2d.pattern.repeat.case.html ]]] -->
15906
15907 <p>Canvas test: 2d.pattern.repeat.case</p>
15908 <canvas id="c492" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15909 <script>
15910
15911 function test_2d_pattern_repeat_case() {
15912
15913 var canvas = document.getElementById('c492');
15914 var ctx = canvas.getContext('2d');
15915
15916 var _thrown = undefined; try {
15917 ctx.createPattern(canvas, "Repeat");
15918 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
15919
15920
15921 }
15922 </script>
15923
15924 <!-- [[[ test_2d.pattern.repeat.empty.html ]]] -->
15925
15926 <p>Canvas test: 2d.pattern.repeat.empty</p>
15927 <canvas id="c493" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15928 <script>
15929
15930
15931 function test_2d_pattern_repeat_empty() {
15932
15933 var canvas = document.getElementById('c493');
15934 var ctx = canvas.getContext('2d');
15935
15936 ctx.fillStyle = '#f00';
15937 ctx.fillRect(0, 0, 100, 50);
15938 var img = document.getElementById('green-1x1_1.png');
15939 var pattern = ctx.createPattern(img, "");
15940 ctx.fillStyle = pattern;
15941 ctx.fillRect(0, 0, 200, 50);
15942
15943 isPixel(ctx, 1,1, 0,255,0,255, 0);
15944 isPixel(ctx, 98,1, 0,255,0,255, 0);
15945 isPixel(ctx, 1,48, 0,255,0,255, 0);
15946 isPixel(ctx, 98,48, 0,255,0,255, 0);
15947
15948
15949 }
15950 </script>
15951 <img src="image_green-1x1.png" id="green-1x1_1.png" class="resource">
15952
15953 <!-- [[[ test_2d.pattern.repeat.null.html ]]] -->
15954
15955 <p>Canvas test: 2d.pattern.repeat.null</p>
15956 <canvas id="c494" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15957 <script>
15958
15959
15960 function test_2d_pattern_repeat_null() {
15961
15962 var canvas = document.getElementById('c494');
15963 var ctx = canvas.getContext('2d');
15964
15965 ctx.fillStyle = '#f00';
15966 ctx.fillRect(0, 0, 100, 50);
15967 var img = document.getElementById('green-1x1_2.png');
15968 var pattern = ctx.createPattern(img, null);
15969 ctx.fillStyle = pattern;
15970 ctx.fillRect(0, 0, 100, 50);
15971
15972 isPixel(ctx, 1,1, 0,255,0,255, 0);
15973 isPixel(ctx, 98,1, 0,255,0,255, 0);
15974 isPixel(ctx, 1,48, 0,255,0,255, 0);
15975 isPixel(ctx, 98,48, 0,255,0,255, 0);
15976
15977
15978 }
15979 </script>
15980 <img src="image_green-1x1.png" id="green-1x1_2.png" class="resource">
15981
15982 <!-- [[[ test_2d.pattern.repeat.nullsuffix.html ]]] -->
15983
15984 <p>Canvas test: 2d.pattern.repeat.nullsuffix</p>
15985 <canvas id="c495" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15986 <script>
15987
15988 function test_2d_pattern_repeat_nullsuffix() {
15989
15990 var canvas = document.getElementById('c495');
15991 var ctx = canvas.getContext('2d');
15992
15993 var _thrown = undefined; try {
15994 ctx.createPattern(canvas, "repeat\0");
15995 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
15996
15997
15998 }
15999 </script>
16000
16001 <!-- [[[ test_2d.pattern.repeat.undefined.html ]]] -->
16002
16003 <p>Canvas test: 2d.pattern.repeat.undefined</p>
16004 <canvas id="c496" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16005 <script>
16006
16007 function test_2d_pattern_repeat_undefined() {
16008
16009 var canvas = document.getElementById('c496');
16010 var ctx = canvas.getContext('2d');
16011
16012 var _thrown = undefined; try {
16013 ctx.createPattern(canvas, undefined);
16014 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
16015
16016
16017 }
16018 </script>
16019
16020 <!-- [[[ test_2d.pattern.repeat.unrecognised.html ]]] -->
16021
16022 <p>Canvas test: 2d.pattern.repeat.unrecognised</p>
16023 <canvas id="c497" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16024 <script>
16025
16026 function test_2d_pattern_repeat_unrecognised() {
16027
16028 var canvas = document.getElementById('c497');
16029 var ctx = canvas.getContext('2d');
16030
16031 var _thrown = undefined; try {
16032 ctx.createPattern(canvas, "invalid");
16033 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
16034
16035
16036 }
16037 </script>
16038
16039 <!-- [[[ test_2d.scaled.html ]]] -->
16040
16041 <p>Canvas test: 2d.scaled</p>
16042 <!-- Testing: CSS-scaled canvases get drawn correctly -->
16043 <canvas id="c498" width="50" height="25" style="width: 100px; height: 50px"><p class="fallback">FAIL (fallback content)</p></canvas>
16044 <script>
16045
16046 function test_2d_scaled() {
16047
16048 var canvas = document.getElementById('c498');
16049 var ctx = canvas.getContext('2d');
16050
16051 ctx.fillStyle = '#00f';
16052 ctx.fillRect(0, 0, 50, 25);
16053 ctx.fillStyle = '#0ff';
16054 ctx.fillRect(0, 0, 25, 10);
16055
16056 todo(false, "test completed successfully"); // (Bug 483989)
16057
16058 }
16059
16060 </script>
16061 <!-- [[[ test_2d.shadow.alpha.1.html ]]] -->
16062
16063 <p>Canvas test: 2d.shadow.alpha.1</p>
16064 <canvas id="c499" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16065 <script>
16066
16067
16068 function test_2d_shadow_alpha_1() {
16069
16070 var canvas = document.getElementById('c499');
16071 var ctx = canvas.getContext('2d');
16072
16073 ctx.fillStyle = '#0f0';
16074 ctx.fillRect(0, 0, 100, 50);
16075 ctx.shadowColor = 'rgba(255, 0, 0, 0.01)';
16076 ctx.shadowOffsetY = 50;
16077 ctx.fillRect(0, -50, 100, 50);
16078
16079 isPixel(ctx, 50,25, 0,255,0,255, 4);
16080
16081
16082 }
16083 </script>
16084
16085 <!-- [[[ test_2d.shadow.alpha.2.html ]]] -->
16086
16087 <p>Canvas test: 2d.shadow.alpha.2</p>
16088 <canvas id="c500" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16089 <script>
16090
16091
16092
16093 function test_2d_shadow_alpha_2() {
16094
16095 var canvas = document.getElementById('c500');
16096 var ctx = canvas.getContext('2d');
16097
16098 ctx.fillStyle = '#f00';
16099 ctx.fillRect(0, 0, 100, 50);
16100 ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
16101 ctx.shadowOffsetY = 50;
16102 ctx.fillRect(0, -50, 100, 50);
16103
16104 isPixel(ctx, 50,25, 127,0,127,255, 2);
16105
16106
16107 }
16108 </script>
16109
16110 <!-- [[[ test_2d.shadow.alpha.3.html ]]] -->
16111
16112 <p>Canvas test: 2d.shadow.alpha.3</p>
16113 <canvas id="c501" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16114 <script>
16115
16116
16117
16118 function test_2d_shadow_alpha_3() {
16119
16120 var canvas = document.getElementById('c501');
16121 var ctx = canvas.getContext('2d');
16122
16123 ctx.fillStyle = '#f00';
16124 ctx.fillRect(0, 0, 100, 50);
16125 ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
16126 ctx.shadowColor = '#00f';
16127 ctx.shadowOffsetY = 50;
16128 ctx.globalAlpha = 0.5;
16129 ctx.fillRect(0, -50, 100, 50);
16130
16131 isPixel(ctx, 50,25, 127,0,127,255, 2);
16132
16133
16134 }
16135 </script>
16136
16137 <!-- [[[ test_2d.shadow.alpha.4.html ]]] -->
16138
16139 <p>Canvas test: 2d.shadow.alpha.4</p>
16140 <canvas id="c502" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16141 <script>
16142
16143
16144
16145 function test_2d_shadow_alpha_4() {
16146
16147 var canvas = document.getElementById('c502');
16148 var ctx = canvas.getContext('2d');
16149
16150 ctx.fillStyle = '#f00';
16151 ctx.fillRect(0, 0, 100, 50);
16152 ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
16153 ctx.shadowColor = 'rgba(0, 0, 255, 0.707)';
16154 ctx.shadowOffsetY = 50;
16155 ctx.globalAlpha = 0.707;
16156 ctx.fillRect(0, -50, 100, 50);
16157
16158 isPixel(ctx, 50,25, 127,0,127,255, 2);
16159
16160
16161 }
16162 </script>
16163
16164 <!-- [[[ test_2d.shadow.alpha.5.html ]]] -->
16165
16166 <p>Canvas test: 2d.shadow.alpha.5</p>
16167 <canvas id="c503" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16168 <script>
16169
16170
16171
16172 function test_2d_shadow_alpha_5() {
16173
16174 var canvas = document.getElementById('c503');
16175 var ctx = canvas.getContext('2d');
16176
16177 ctx.fillStyle = '#f00';
16178 ctx.fillRect(0, 0, 100, 50);
16179 ctx.fillStyle = 'rgba(64, 0, 0, 0.5)';
16180 ctx.shadowColor = '#00f';
16181 ctx.shadowOffsetY = 50;
16182 ctx.fillRect(0, -50, 100, 50);
16183
16184 isPixel(ctx, 50,25, 127,0,127,255, 2);
16185
16186
16187 }
16188 </script>
16189
16190 <!-- [[[ test_2d.shadow.attributes.shadowBlur.1.html ]]] -->
16191
16192 <p>Canvas test: 2d.shadow.attributes.shadowBlur.1</p>
16193 <canvas id="c504" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16194 <script>
16195
16196 function test_2d_shadow_attributes_shadowBlur_1() {
16197
16198 var canvas = document.getElementById('c504');
16199 var ctx = canvas.getContext('2d');
16200
16201 ctx.shadowBlur = 1;
16202 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16203 ctx.shadowBlur = 0.5;
16204 ok(ctx.shadowBlur === 0.5, "ctx.shadowBlur === 0.5");
16205 ctx.shadowBlur = 1e6;
16206 ok(ctx.shadowBlur === 1e6, "ctx.shadowBlur === 1e6");
16207 ctx.shadowBlur = 1;
16208 ctx.shadowBlur = -2;
16209 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16210 ctx.shadowBlur = 0;
16211 ok(ctx.shadowBlur === 0, "ctx.shadowBlur === 0");
16212
16213
16214 }
16215 </script>
16216
16217 <!-- [[[ test_2d.shadow.attributes.shadowBlur.2.html ]]] -->
16218
16219 <p>Canvas test: 2d.shadow.attributes.shadowBlur.2</p>
16220 <canvas id="c505" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16221 <script>
16222
16223 function test_2d_shadow_attributes_shadowBlur_2() {
16224
16225 var canvas = document.getElementById('c505');
16226 var ctx = canvas.getContext('2d');
16227
16228 ctx.shadowBlur = 1;
16229 ctx.shadowBlur = -2;
16230 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16231
16232 ctx.shadowBlur = 1;
16233 ctx.shadowBlur = Infinity;
16234 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16235
16236 ctx.shadowBlur = 1;
16237 ctx.shadowBlur = -Infinity;
16238 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16239
16240 ctx.shadowBlur = 1;
16241 ctx.shadowBlur = NaN;
16242 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16243
16244 }
16245 </script>
16246
16247 <!-- [[[ test_2d.shadow.attributes.shadowColor.1.html ]]] -->
16248
16249 <p>Canvas test: 2d.shadow.attributes.shadowColor.1</p>
16250 <canvas id="c506" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16251 <script>
16252
16253 function test_2d_shadow_attributes_shadowColor_1() {
16254
16255 var canvas = document.getElementById('c506');
16256 var ctx = canvas.getContext('2d');
16257
16258 ctx.shadowColor = 'lime';
16259 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
16260 ctx.shadowColor = 'RGBA(0,255, 0,0)';
16261 is(ctx.shadowColor, 'rgba(0, 255, 0, 0)', "ctx.shadowColor should be what we set it to");
16262
16263
16264 }
16265 </script>
16266
16267 <!-- [[[ test_2d.shadow.attributes.shadowColor.2.html ]]] -->
16268
16269 <p>Canvas test: 2d.shadow.attributes.shadowColor.2</p>
16270 <canvas id="c507" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16271 <script>
16272
16273 function test_2d_shadow_attributes_shadowColor_2() {
16274
16275 var canvas = document.getElementById('c507');
16276 var ctx = canvas.getContext('2d');
16277
16278 ctx.shadowColor = '#00ff00';
16279 ctx.shadowColor = 'bogus';
16280 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
16281 ctx.shadowColor = ctx;
16282 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
16283 ctx.shadowColor = undefined;
16284 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
16285
16286
16287 }
16288 </script>
16289
16290 <!-- [[[ test_2d.shadow.attributes.shadowOffset.1.html ]]] -->
16291
16292 <p>Canvas test: 2d.shadow.attributes.shadowOffset.1</p>
16293 <canvas id="c508" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16294 <script>
16295
16296 function test_2d_shadow_attributes_shadowOffset_1() {
16297
16298 var canvas = document.getElementById('c508');
16299 var ctx = canvas.getContext('2d');
16300
16301 ctx.shadowOffsetX = 1;
16302 ctx.shadowOffsetY = 2;
16303 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
16304 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
16305 ctx.shadowOffsetX = 0.5;
16306 ctx.shadowOffsetY = 0.25;
16307 ok(ctx.shadowOffsetX === 0.5, "ctx.shadowOffsetX === 0.5");
16308 ok(ctx.shadowOffsetY === 0.25, "ctx.shadowOffsetY === 0.25");
16309 ctx.shadowOffsetX = -0.5;
16310 ctx.shadowOffsetY = -0.25;
16311 ok(ctx.shadowOffsetX === -0.5, "ctx.shadowOffsetX === -0.5");
16312 ok(ctx.shadowOffsetY === -0.25, "ctx.shadowOffsetY === -0.25");
16313 ctx.shadowOffsetX = 1e6;
16314 ctx.shadowOffsetY = 1e6;
16315 ok(ctx.shadowOffsetX === 1e6, "ctx.shadowOffsetX === 1e6");
16316 ok(ctx.shadowOffsetY === 1e6, "ctx.shadowOffsetY === 1e6");
16317
16318
16319 }
16320 </script>
16321
16322 <!-- [[[ test_2d.shadow.attributes.shadowOffset.2.html ]]] -->
16323
16324 <p>Canvas test: 2d.shadow.attributes.shadowOffset.2</p>
16325 <canvas id="c509" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16326 <script>
16327
16328 function test_2d_shadow_attributes_shadowOffset_2() {
16329
16330 var canvas = document.getElementById('c509');
16331 var ctx = canvas.getContext('2d');
16332
16333 ctx.shadowOffsetX = 1;
16334 ctx.shadowOffsetY = 2;
16335 ctx.shadowOffsetX = Infinity;
16336 ctx.shadowOffsetY = Infinity;
16337 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
16338 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
16339
16340 ctx.shadowOffsetX = 1;
16341 ctx.shadowOffsetY = 2;
16342 ctx.shadowOffsetX = -Infinity;
16343 ctx.shadowOffsetY = -Infinity;
16344 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
16345 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
16346
16347 ctx.shadowOffsetX = 1;
16348 ctx.shadowOffsetY = 2;
16349 ctx.shadowOffsetX = NaN;
16350 ctx.shadowOffsetY = NaN;
16351 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
16352 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
16353
16354 }
16355 </script>
16356
16357 <!-- [[[ test_2d.shadow.basic.1.html ]]] -->
16358
16359 <p>Canvas test: 2d.shadow.basic.1</p>
16360 <canvas id="c510" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16361 <script>
16362
16363
16364 function test_2d_shadow_basic_1() {
16365
16366 var canvas = document.getElementById('c510');
16367 var ctx = canvas.getContext('2d');
16368
16369 ctx.shadowColor = '#f00';
16370 ctx.fillStyle = '#0f0';
16371 ctx.fillRect(0, 0, 100, 50);
16372 isPixel(ctx, 50,25, 0,255,0,255, 0);
16373
16374
16375 }
16376 </script>
16377
16378 <!-- [[[ test_2d.shadow.basic.2.html ]]] -->
16379
16380 <p>Canvas test: 2d.shadow.basic.2</p>
16381 <canvas id="c511" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16382 <script>
16383
16384
16385 function test_2d_shadow_basic_2() {
16386
16387 var canvas = document.getElementById('c511');
16388 var ctx = canvas.getContext('2d');
16389
16390 ctx.fillStyle = '#0f0';
16391 ctx.fillRect(0, 0, 100, 50);
16392 ctx.fillStyle = '#f00';
16393 ctx.shadowColor = '#f00';
16394 ctx.fillRect(0, -50, 100, 50);
16395 isPixel(ctx, 50,25, 0,255,0,255, 0);
16396
16397
16398 }
16399 </script>
16400
16401 <!-- [[[ test_2d.shadow.blur.high.html ]]] -->
16402
16403 <p>Canvas test: 2d.shadow.blur.high</p>
16404 <canvas id="c512" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16405 <script>
16406
16407 function test_2d_shadow_blur_high() {
16408
16409 var canvas = document.getElementById('c512');
16410 var ctx = canvas.getContext('2d');
16411
16412 ctx.fillStyle = '#ff0';
16413 ctx.fillRect(0, 0, 100, 50);
16414 ctx.shadowColor = '#00f';
16415 ctx.shadowOffsetY = 0;
16416 ctx.shadowBlur = 555.6;
16417 ctx.fillRect(-200, -200, 200, 400);
16418
16419 todo(false, "test completed successfully"); // (Bug 483989)
16420
16421 }
16422
16423 </script>
16424 <!-- [[[ test_2d.shadow.blur.low.html ]]] -->
16425
16426 <p>Canvas test: 2d.shadow.blur.low</p>
16427 <canvas id="c513" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16428 <script>
16429
16430 function test_2d_shadow_blur_low() {
16431
16432 var canvas = document.getElementById('c513');
16433 var ctx = canvas.getContext('2d');
16434
16435 ctx.fillStyle = '#ff0';
16436 ctx.fillRect(0, 0, 100, 50);
16437 ctx.shadowColor = '#00f';
16438 ctx.shadowOffsetY = 25;
16439 for (var x = 0; x < 100; ++x) {
16440 ctx.save();
16441 ctx.beginPath();
16442 ctx.rect(x, 0, 1, 50);
16443 ctx.clip();
16444 ctx.shadowBlur = x;
16445 ctx.fillRect(-200, -200, 500, 200);
16446 ctx.restore();
16447 }
16448
16449 todo(false, "test completed successfully"); // (Bug 483989)
16450
16451 }
16452 </script>
16453 <!-- [[[ test_2d.shadow.canvas.alpha.html ]]] -->
16454
16455 <p>Canvas test: 2d.shadow.canvas.alpha</p>
16456 <canvas id="c514" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16457 <script>
16458
16459
16460
16461 function test_2d_shadow_canvas_alpha() {
16462
16463 var canvas = document.getElementById('c514');
16464 var ctx = canvas.getContext('2d');
16465
16466 var canvas2 = document.createElement('canvas');
16467 canvas2.width = 100;
16468 canvas2.height = 50;
16469 var ctx2 = canvas2.getContext('2d');
16470 ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)';
16471 ctx2.fillRect(0, 0, 100, 50);
16472
16473 ctx.fillStyle = '#f00';
16474 ctx.fillRect(0, 0, 100, 50);
16475 ctx.shadowOffsetY = 50;
16476 ctx.shadowColor = '#00f';
16477 ctx.drawImage(canvas2, 0, -50);
16478
16479 isPixel(ctx, 50,25, 127,0,127,255, 2);
16480
16481
16482 }
16483 </script>
16484 <img src="image_transparent50.png" id="transparent50_1.png" class="resource">
16485
16486 <!-- [[[ test_2d.shadow.canvas.basic.html ]]] -->
16487
16488 <p>Canvas test: 2d.shadow.canvas.basic</p>
16489 <canvas id="c515" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16490 <script>
16491
16492
16493
16494 function test_2d_shadow_canvas_basic() {
16495
16496 var canvas = document.getElementById('c515');
16497 var ctx = canvas.getContext('2d');
16498
16499 var canvas2 = document.createElement('canvas');
16500 canvas2.width = 100;
16501 canvas2.height = 50;
16502 var ctx2 = canvas2.getContext('2d');
16503 ctx2.fillStyle = '#f00';
16504 ctx2.fillRect(0, 0, 100, 50);
16505
16506 ctx.fillStyle = '#f00';
16507 ctx.fillRect(0, 0, 100, 50);
16508 ctx.shadowColor = '#0f0';
16509 ctx.shadowOffsetY = 50;
16510 ctx.drawImage(canvas2, 0, -50);
16511
16512 isPixel(ctx, 50,25, 0,255,0,255, 0);
16513
16514
16515 }
16516 </script>
16517
16518 <!-- [[[ test_2d.shadow.canvas.transparent.1.html ]]] -->
16519
16520 <p>Canvas test: 2d.shadow.canvas.transparent.1</p>
16521 <canvas id="c516" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16522 <script>
16523
16524
16525 function test_2d_shadow_canvas_transparent_1() {
16526
16527 var canvas = document.getElementById('c516');
16528 var ctx = canvas.getContext('2d');
16529
16530 var canvas2 = document.createElement('canvas');
16531 canvas2.width = 100;
16532 canvas2.height = 50;
16533 var ctx2 = canvas2.getContext('2d');
16534
16535 ctx.fillStyle = '#0f0';
16536 ctx.fillRect(0, 0, 100, 50);
16537 ctx.shadowColor = '#f00';
16538 ctx.shadowOffsetY = 50;
16539 ctx.drawImage(canvas2, 0, -50);
16540
16541 isPixel(ctx, 50,25, 0,255,0,255, 0);
16542
16543
16544 }
16545 </script>
16546
16547 <!-- [[[ test_2d.shadow.canvas.transparent.2.html ]]] -->
16548
16549 <p>Canvas test: 2d.shadow.canvas.transparent.2</p>
16550 <canvas id="c517" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16551 <script>
16552
16553
16554
16555 function test_2d_shadow_canvas_transparent_2() {
16556
16557 var canvas = document.getElementById('c517');
16558 var ctx = canvas.getContext('2d');
16559
16560 var canvas2 = document.createElement('canvas');
16561 canvas2.width = 100;
16562 canvas2.height = 50;
16563 var ctx2 = canvas2.getContext('2d');
16564 ctx2.fillStyle = '#f00';
16565 ctx2.fillRect(0, 0, 50, 50);
16566
16567 ctx.fillStyle = '#0f0';
16568 ctx.fillRect(0, 0, 50, 50);
16569 ctx.fillStyle = '#f00';
16570 ctx.fillRect(50, 0, 50, 50);
16571 ctx.shadowOffsetY = 50;
16572 ctx.shadowColor = '#0f0';
16573 ctx.drawImage(canvas2, 50, -50);
16574 ctx.shadowColor = '#f00';
16575 ctx.drawImage(canvas2, -50, -50);
16576
16577 isPixel(ctx, 25,25, 0,255,0,255, 0);
16578 isPixel(ctx, 50,25, 0,255,0,255, 0);
16579 isPixel(ctx, 75,25, 0,255,0,255, 0);
16580
16581
16582 }
16583 </script>
16584
16585 <!-- [[[ test_2d.shadow.clip.1.html ]]] -->
16586
16587 <p>Canvas test: 2d.shadow.clip.1</p>
16588 <canvas id="c518" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16589 <script>
16590
16591
16592
16593 function test_2d_shadow_clip_1() {
16594
16595 var canvas = document.getElementById('c518');
16596 var ctx = canvas.getContext('2d');
16597
16598 ctx.fillStyle = '#0f0';
16599 ctx.fillRect(0, 0, 50, 50);
16600 ctx.fillStyle = '#f00';
16601 ctx.fillRect(50, 0, 50, 50);
16602
16603 ctx.save();
16604 ctx.beginPath();
16605 ctx.rect(50, 0, 50, 50);
16606 ctx.clip();
16607 ctx.shadowColor = '#0f0';
16608 ctx.shadowOffsetX = 50;
16609 ctx.fillRect(0, 0, 50, 50);
16610 ctx.restore();
16611
16612 isPixel(ctx, 25,25, 0,255,0,255, 0);
16613 isPixel(ctx, 75,25, 0,255,0,255, 0);
16614
16615
16616 }
16617 </script>
16618
16619 <!-- [[[ test_2d.shadow.clip.2.html ]]] -->
16620
16621 <p>Canvas test: 2d.shadow.clip.2</p>
16622 <canvas id="c519" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16623 <script>
16624
16625
16626 function test_2d_shadow_clip_2() {
16627
16628 var canvas = document.getElementById('c519');
16629 var ctx = canvas.getContext('2d');
16630
16631 ctx.fillStyle = '#f00';
16632 ctx.fillRect(0, 0, 50, 50);
16633 ctx.fillStyle = '#0f0';
16634 ctx.fillRect(50, 0, 50, 50);
16635
16636 ctx.save();
16637 ctx.beginPath();
16638 ctx.rect(0, 0, 50, 50);
16639 ctx.clip();
16640 ctx.shadowColor = '#f00';
16641 ctx.shadowOffsetX = 50;
16642 ctx.fillRect(0, 0, 50, 50);
16643 ctx.restore();
16644
16645 isPixel(ctx, 25,25, 0,255,0,255, 0);
16646 isPixel(ctx, 75,25, 0,255,0,255, 0);
16647
16648
16649 }
16650 </script>
16651
16652 <!-- [[[ test_2d.shadow.clip.3.html ]]] -->
16653
16654 <p>Canvas test: 2d.shadow.clip.3</p>
16655 <canvas id="c520" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16656 <script>
16657
16658
16659
16660 function test_2d_shadow_clip_3() {
16661
16662 var canvas = document.getElementById('c520');
16663 var ctx = canvas.getContext('2d');
16664
16665 ctx.fillStyle = '#f00';
16666 ctx.fillRect(0, 0, 50, 50);
16667 ctx.fillStyle = '#0f0';
16668 ctx.fillRect(50, 0, 50, 50);
16669
16670 ctx.save();
16671 ctx.beginPath();
16672 ctx.rect(0, 0, 50, 50);
16673 ctx.clip();
16674 ctx.fillStyle = '#f00';
16675 ctx.shadowColor = '#0f0';
16676 ctx.shadowOffsetX = 50;
16677 ctx.fillRect(-50, 0, 50, 50);
16678 ctx.restore();
16679
16680 isPixel(ctx, 25,25, 0,255,0,255, 0);
16681 isPixel(ctx, 75,25, 0,255,0,255, 0);
16682
16683
16684 }
16685 </script>
16686
16687 <!-- [[[ test_2d.shadow.composite.1.html ]]] -->
16688
16689 <p>Canvas test: 2d.shadow.composite.1</p>
16690 <canvas id="c521" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16691 <script>
16692
16693
16694
16695 function test_2d_shadow_composite_1() {
16696
16697 var canvas = document.getElementById('c521');
16698 var ctx = canvas.getContext('2d');
16699
16700 ctx.fillStyle = '#f00';
16701 ctx.fillRect(0, 0, 100, 50);
16702 ctx.globalCompositeOperation = 'xor';
16703 ctx.shadowColor = '#f00';
16704 ctx.shadowOffsetX = 100;
16705 ctx.fillStyle = '#0f0';
16706 ctx.fillRect(-100, 0, 200, 50);
16707
16708 isPixel(ctx, 50, 25, 0, 255, 0, 255, 2);
16709
16710 }
16711 </script>
16712
16713 <!-- [[[ test_2d.shadow.composite.2.html ]]] -->
16714
16715 <p>Canvas test: 2d.shadow.composite.2</p>
16716 <canvas id="c522" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16717 <script>
16718
16719
16720
16721 function test_2d_shadow_composite_2() {
16722
16723 var canvas = document.getElementById('c522');
16724 var ctx = canvas.getContext('2d');
16725
16726 ctx.fillStyle = '#f00';
16727 ctx.fillRect(0, 0, 100, 50);
16728 ctx.globalCompositeOperation = 'xor';
16729 ctx.shadowColor = '#f00';
16730 ctx.shadowBlur = 1;
16731 ctx.fillStyle = '#0f0';
16732 ctx.fillRect(-10, -10, 120, 70);
16733
16734 isPixel(ctx, 50, 25, 0, 255, 0, 255, 2);
16735
16736 }
16737 </script>
16738
16739 <!-- [[[ test_2d.shadow.composite.3.html ]]] -->
16740
16741 <p>Canvas test: 2d.shadow.composite.3</p>
16742 <canvas id="c523" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16743 <script>
16744
16745
16746
16747 function test_2d_shadow_composite_3() {
16748
16749 var canvas = document.getElementById('c523');
16750 var ctx = canvas.getContext('2d');
16751
16752 ctx.fillStyle = '#f00';
16753 ctx.fillRect(0, 0, 100, 50);
16754 ctx.globalCompositeOperation = 'xor';
16755 ctx.shadowColor = '#f00';
16756 ctx.fillStyle = '#0f0';
16757 ctx.fillRect(0, 0, 100, 50);
16758
16759 isPixel(ctx, 50,25, 0,255,0,255, 2);
16760
16761
16762 }
16763 </script>
16764
16765 <!-- [[[ test_2d.shadow.composite.4.html ]]] -->
16766
16767 <p>Canvas test: 2d.shadow.composite.4</p>
16768 <canvas id="c524" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16769 <script>
16770
16771
16772
16773 function test_2d_shadow_composite_4() {
16774
16775 var canvas = document.getElementById('c524');
16776 var ctx = canvas.getContext('2d');
16777
16778 ctx.globalCompositeOperation = 'destination-over';
16779 ctx.shadowColor = '#0f0';
16780 ctx.fillStyle = '#f00';
16781 ctx.fillRect(0, 0, 100, 50);
16782
16783 isPixel(ctx, 50,25, 0,255,0,255, 2);
16784
16785
16786 }
16787 </script>
16788
16789 <!-- [[[ test_2d.shadow.gradient.alpha.html ]]] -->
16790
16791 <p>Canvas test: 2d.shadow.gradient.alpha</p>
16792 <canvas id="c525" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16793 <script>
16794
16795
16796
16797 function test_2d_shadow_gradient_alpha() {
16798
16799 var canvas = document.getElementById('c525');
16800 var ctx = canvas.getContext('2d');
16801
16802 var gradient = ctx.createLinearGradient(0, 0, 100, 0);
16803 gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
16804 gradient.addColorStop(1, 'rgba(255,0,0,0.5)');
16805 ctx.fillStyle = '#f00';
16806 ctx.fillRect(0, 0, 100, 50);
16807 ctx.shadowOffsetY = 50;
16808 ctx.shadowColor = '#00f';
16809 ctx.fillStyle = gradient;
16810 ctx.fillRect(0, -50, 100, 50);
16811
16812 isPixel(ctx, 50,25, 127,0,127,255, 2);
16813
16814
16815 }
16816 </script>
16817
16818 <!-- [[[ test_2d.shadow.gradient.basic.html ]]] -->
16819
16820 <p>Canvas test: 2d.shadow.gradient.basic</p>
16821 <canvas id="c526" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16822 <script>
16823
16824
16825
16826 function test_2d_shadow_gradient_basic() {
16827
16828 var canvas = document.getElementById('c526');
16829 var ctx = canvas.getContext('2d');
16830
16831 var gradient = ctx.createLinearGradient(0, 0, 100, 0);
16832 gradient.addColorStop(0, '#f00');
16833 gradient.addColorStop(1, '#f00');
16834 ctx.fillStyle = '#f00';
16835 ctx.fillRect(0, 0, 100, 50);
16836 ctx.shadowColor = '#0f0';
16837 ctx.shadowOffsetY = 50;
16838 ctx.fillStyle = gradient;
16839 ctx.fillRect(0, -50, 100, 50);
16840
16841 isPixel(ctx, 50,25, 0,255,0,255, 0);
16842
16843
16844 }
16845 </script>
16846
16847 <!-- [[[ test_2d.shadow.gradient.transparent.1.html ]]] -->
16848
16849 <p>Canvas test: 2d.shadow.gradient.transparent.1</p>
16850 <canvas id="c527" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16851 <script>
16852
16853
16854 function test_2d_shadow_gradient_transparent_1() {
16855
16856 var canvas = document.getElementById('c527');
16857 var ctx = canvas.getContext('2d');
16858
16859 var gradient = ctx.createLinearGradient(0, 0, 100, 0);
16860 gradient.addColorStop(0, 'rgba(0,0,0,0)');
16861 gradient.addColorStop(1, 'rgba(0,0,0,0)');
16862 ctx.fillStyle = '#0f0';
16863 ctx.fillRect(0, 0, 100, 50);
16864 ctx.shadowColor = '#f00';
16865 ctx.shadowOffsetY = 50;
16866 ctx.fillStyle = gradient;
16867 ctx.fillRect(0, -50, 100, 50);
16868
16869 isPixel(ctx, 50,25, 0,255,0,255, 0);
16870
16871
16872 }
16873 </script>
16874
16875 <!-- [[[ test_2d.shadow.gradient.transparent.2.html ]]] -->
16876
16877 <p>Canvas test: 2d.shadow.gradient.transparent.2</p>
16878 <canvas id="c528" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16879 <script>
16880
16881
16882
16883 function test_2d_shadow_gradient_transparent_2() {
16884
16885 var canvas = document.getElementById('c528');
16886 var ctx = canvas.getContext('2d');
16887
16888 var gradient = ctx.createLinearGradient(0, 0, 100, 0);
16889 gradient.addColorStop(0, '#f00');
16890 gradient.addColorStop(0.499, '#f00');
16891 gradient.addColorStop(0.5, 'rgba(0,0,0,0)');
16892 gradient.addColorStop(1, 'rgba(0,0,0,0)');
16893 ctx.fillStyle = '#f00';
16894 ctx.fillRect(0, 0, 50, 50);
16895 ctx.fillStyle = '#0f0';
16896 ctx.fillRect(50, 0, 50, 50);
16897 ctx.shadowOffsetY = 50;
16898 ctx.shadowColor = '#0f0';
16899 ctx.fillStyle = gradient;
16900 ctx.fillRect(0, -50, 100, 50);
16901
16902 isPixel(ctx, 25,25, 0,255,0,255, 0);
16903 isPixel(ctx, 50,25, 0,255,0,255, 0);
16904 isPixel(ctx, 75,25, 0,255,0,255, 0);
16905
16906
16907 }
16908 </script>
16909
16910 <!-- [[[ test_2d.shadow.image.alpha.html ]]] -->
16911
16912 <p>Canvas test: 2d.shadow.image.alpha</p>
16913 <canvas id="c529" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16914 <script>
16915
16916
16917
16918 function test_2d_shadow_image_alpha() {
16919
16920 var canvas = document.getElementById('c529');
16921 var ctx = canvas.getContext('2d');
16922
16923 ctx.fillStyle = '#f00';
16924 ctx.fillRect(0, 0, 100, 50);
16925 ctx.shadowOffsetY = 50;
16926 ctx.shadowColor = '#00f';
16927 ctx.drawImage(document.getElementById('transparent50_2.png'), 0, -50);
16928
16929 isPixel(ctx, 50,25, 127,0,127,255, 2);
16930
16931
16932 }
16933 </script>
16934 <img src="image_transparent50.png" id="transparent50_2.png" class="resource">
16935
16936 <!-- [[[ test_2d.shadow.image.basic.html ]]] -->
16937
16938 <p>Canvas test: 2d.shadow.image.basic</p>
16939 <canvas id="c530" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16940 <script>
16941
16942
16943
16944 function test_2d_shadow_image_basic() {
16945
16946 var canvas = document.getElementById('c530');
16947 var ctx = canvas.getContext('2d');
16948
16949 ctx.fillStyle = '#f00';
16950 ctx.fillRect(0, 0, 100, 50);
16951 ctx.shadowColor = '#0f0';
16952 ctx.shadowOffsetY = 50;
16953 ctx.drawImage(document.getElementById('red_17.png'), 0, -50);
16954
16955 isPixel(ctx, 50,25, 0,255,0,255, 0);
16956
16957
16958 }
16959 </script>
16960 <img src="image_red.png" id="red_17.png" class="resource">
16961
16962 <!-- [[[ test_2d.shadow.image.scale.html ]]] -->
16963
16964 <p>Canvas test: 2d.shadow.image.scale</p>
16965 <canvas id="c531" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16966 <script>
16967
16968
16969
16970 function test_2d_shadow_image_scale() {
16971
16972 var canvas = document.getElementById('c531');
16973 var ctx = canvas.getContext('2d');
16974
16975 ctx.fillStyle = '#f00';
16976 ctx.fillRect(0, 0, 100, 50);
16977 ctx.shadowOffsetY = 50;
16978 ctx.shadowColor = '#0f0';
16979 ctx.drawImage(document.getElementById('redtransparent_2.png'), 0, 0, 100, 50, -10, -50, 240, 50);
16980
16981 isPixel(ctx, 25,25, 0,255,0,255, 2);
16982 isPixel(ctx, 50,25, 0,255,0,255, 2);
16983 isPixel(ctx, 75,25, 0,255,0,255, 2);
16984
16985
16986 }
16987 </script>
16988 <img src="image_redtransparent.png" id="redtransparent_2.png" class="resource">
16989
16990 <!-- [[[ test_2d.shadow.image.section.html ]]] -->
16991
16992 <p>Canvas test: 2d.shadow.image.section</p>
16993 <canvas id="c532" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16994 <script>
16995
16996
16997 function test_2d_shadow_image_section() {
16998
16999 var canvas = document.getElementById('c532');
17000 var ctx = canvas.getContext('2d');
17001
17002 ctx.fillStyle = '#0f0';
17003 ctx.fillRect(0, 0, 100, 50);
17004 ctx.shadowOffsetY = 50;
17005 ctx.shadowColor = '#f00';
17006 ctx.drawImage(document.getElementById('redtransparent_3.png'), 50, 0, 50, 50, 0, -50, 50, 50);
17007
17008 isPixel(ctx, 25,25, 0,255,0,255, 2);
17009 isPixel(ctx, 50,25, 0,255,0,255, 2);
17010 isPixel(ctx, 75,25, 0,255,0,255, 2);
17011
17012
17013 }
17014 </script>
17015 <img src="image_redtransparent.png" id="redtransparent_3.png" class="resource">
17016
17017 <!-- [[[ test_2d.shadow.image.transparent.1.html ]]] -->
17018
17019 <p>Canvas test: 2d.shadow.image.transparent.1</p>
17020 <canvas id="c533" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17021 <script>
17022
17023
17024 function test_2d_shadow_image_transparent_1() {
17025
17026 var canvas = document.getElementById('c533');
17027 var ctx = canvas.getContext('2d');
17028
17029 ctx.fillStyle = '#0f0';
17030 ctx.fillRect(0, 0, 100, 50);
17031 ctx.shadowColor = '#f00';
17032 ctx.shadowOffsetY = 50;
17033 ctx.drawImage(document.getElementById('transparent_1.png'), 0, -50);
17034
17035 isPixel(ctx, 50,25, 0,255,0,255, 0);
17036
17037
17038 }
17039 </script>
17040 <img src="image_transparent.png" id="transparent_1.png" class="resource">
17041
17042 <!-- [[[ test_2d.shadow.image.transparent.2.html ]]] -->
17043
17044 <p>Canvas test: 2d.shadow.image.transparent.2</p>
17045 <canvas id="c534" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17046 <script>
17047
17048
17049
17050 function test_2d_shadow_image_transparent_2() {
17051
17052 var canvas = document.getElementById('c534');
17053 var ctx = canvas.getContext('2d');
17054
17055 ctx.fillStyle = '#0f0';
17056 ctx.fillRect(0, 0, 50, 50);
17057 ctx.fillStyle = '#f00';
17058 ctx.fillRect(50, 0, 50, 50);
17059 ctx.shadowOffsetY = 50;
17060 ctx.shadowColor = '#0f0';
17061 ctx.drawImage(document.getElementById('redtransparent_4.png'), 50, -50);
17062 ctx.shadowColor = '#f00';
17063 ctx.drawImage(document.getElementById('redtransparent_4.png'), -50, -50);
17064
17065 isPixel(ctx, 25,25, 0,255,0,255, 0);
17066 isPixel(ctx, 50,25, 0,255,0,255, 0);
17067 isPixel(ctx, 75,25, 0,255,0,255, 0);
17068
17069
17070 }
17071 </script>
17072 <img src="image_redtransparent.png" id="redtransparent_4.png" class="resource">
17073
17074 <!-- [[[ test_2d.shadow.offset.negativeX.html ]]] -->
17075
17076 <p>Canvas test: 2d.shadow.offset.negativeX</p>
17077 <canvas id="c535" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17078 <script>
17079
17080
17081
17082 function test_2d_shadow_offset_negativeX() {
17083
17084 var canvas = document.getElementById('c535');
17085 var ctx = canvas.getContext('2d');
17086
17087 ctx.fillStyle = '#f00';
17088 ctx.fillRect(0, 0, 100, 50);
17089 ctx.fillStyle = '#0f0';
17090 ctx.shadowColor = '#0f0';
17091 ctx.shadowOffsetX = -50;
17092 ctx.fillRect(50, 0, 50, 50);
17093 isPixel(ctx, 25,25, 0,255,0,255, 0);
17094 isPixel(ctx, 75,25, 0,255,0,255, 0);
17095
17096
17097 }
17098 </script>
17099
17100 <!-- [[[ test_2d.shadow.offset.negativeY.html ]]] -->
17101
17102 <p>Canvas test: 2d.shadow.offset.negativeY</p>
17103 <canvas id="c536" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17104 <script>
17105
17106
17107
17108 function test_2d_shadow_offset_negativeY() {
17109
17110 var canvas = document.getElementById('c536');
17111 var ctx = canvas.getContext('2d');
17112
17113 ctx.fillStyle = '#f00';
17114 ctx.fillRect(0, 0, 100, 50);
17115 ctx.fillStyle = '#0f0';
17116 ctx.shadowColor = '#0f0';
17117 ctx.shadowOffsetY = -25;
17118 ctx.fillRect(0, 25, 100, 25);
17119 isPixel(ctx, 50,12, 0,255,0,255, 0);
17120 isPixel(ctx, 50,37, 0,255,0,255, 0);
17121
17122
17123 }
17124 </script>
17125
17126 <!-- [[[ test_2d.shadow.offset.positiveX.html ]]] -->
17127
17128 <p>Canvas test: 2d.shadow.offset.positiveX</p>
17129 <canvas id="c537" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17130 <script>
17131
17132
17133
17134 function test_2d_shadow_offset_positiveX() {
17135
17136 var canvas = document.getElementById('c537');
17137 var ctx = canvas.getContext('2d');
17138
17139 ctx.fillStyle = '#f00';
17140 ctx.fillRect(0, 0, 100, 50);
17141 ctx.fillStyle = '#0f0';
17142 ctx.shadowColor = '#0f0';
17143 ctx.shadowOffsetX = 50;
17144 ctx.fillRect(0, 0, 50, 50);
17145 isPixel(ctx, 25,25, 0,255,0,255, 0);
17146 isPixel(ctx, 75,25, 0,255,0,255, 0);
17147
17148
17149 }
17150 </script>
17151
17152 <!-- [[[ test_2d.shadow.offset.positiveY.html ]]] -->
17153
17154 <p>Canvas test: 2d.shadow.offset.positiveY</p>
17155 <canvas id="c538" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17156 <script>
17157
17158
17159
17160 function test_2d_shadow_offset_positiveY() {
17161
17162 var canvas = document.getElementById('c538');
17163 var ctx = canvas.getContext('2d');
17164
17165 ctx.fillStyle = '#f00';
17166 ctx.fillRect(0, 0, 100, 50);
17167 ctx.fillStyle = '#0f0';
17168 ctx.shadowColor = '#0f0';
17169 ctx.shadowOffsetY = 25;
17170 ctx.fillRect(0, 0, 100, 25);
17171 isPixel(ctx, 50,12, 0,255,0,255, 0);
17172 isPixel(ctx, 50,37, 0,255,0,255, 0);
17173
17174
17175 }
17176 </script>
17177
17178 <!-- [[[ test_2d.shadow.outside.html ]]] -->
17179
17180 <p>Canvas test: 2d.shadow.outside</p>
17181 <canvas id="c539" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17182 <script>
17183
17184
17185
17186 function test_2d_shadow_outside() {
17187
17188 var canvas = document.getElementById('c539');
17189 var ctx = canvas.getContext('2d');
17190
17191 ctx.fillStyle = '#f00';
17192 ctx.fillRect(0, 0, 100, 50);
17193 ctx.shadowColor = '#0f0';
17194 ctx.shadowOffsetX = 100;
17195 ctx.fillRect(-100, 0, 25, 50);
17196 ctx.shadowOffsetX = -100;
17197 ctx.fillRect(175, 0, 25, 50);
17198 ctx.shadowOffsetX = 0;
17199 ctx.shadowOffsetY = 100;
17200 ctx.fillRect(25, -100, 50, 25);
17201 ctx.shadowOffsetY = -100;
17202 ctx.fillRect(25, 125, 50, 25);
17203 isPixel(ctx, 12,25, 0,255,0,255, 0);
17204 isPixel(ctx, 87,25, 0,255,0,255, 0);
17205 isPixel(ctx, 50,12, 0,255,0,255, 0);
17206 isPixel(ctx, 50,37, 0,255,0,255, 0);
17207
17208
17209 }
17210 </script>
17211
17212 <!-- [[[ test_2d.shadow.pattern.alpha.html ]]] -->
17213
17214 <p>Canvas test: 2d.shadow.pattern.alpha</p>
17215 <canvas id="c540" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17216 <script>
17217
17218
17219
17220 function test_2d_shadow_pattern_alpha() {
17221
17222 var canvas = document.getElementById('c540');
17223 var ctx = canvas.getContext('2d');
17224
17225 var pattern = ctx.createPattern(document.getElementById('transparent50_3.png'), 'repeat');
17226 ctx.fillStyle = '#f00';
17227 ctx.fillRect(0, 0, 100, 50);
17228 ctx.shadowOffsetY = 50;
17229 ctx.shadowColor = '#00f';
17230 ctx.fillStyle = pattern;
17231 ctx.fillRect(0, -50, 100, 50);
17232
17233 isPixel(ctx, 50,25, 127,0,127,255, 2);
17234
17235
17236 }
17237 </script>
17238 <img src="image_transparent50.png" id="transparent50_3.png" class="resource">
17239
17240 <!-- [[[ test_2d.shadow.pattern.basic.html ]]] -->
17241
17242 <p>Canvas test: 2d.shadow.pattern.basic</p>
17243 <canvas id="c541" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17244 <script>
17245
17246
17247
17248 function test_2d_shadow_pattern_basic() {
17249
17250 var canvas = document.getElementById('c541');
17251 var ctx = canvas.getContext('2d');
17252
17253 var pattern = ctx.createPattern(document.getElementById('red_18.png'), 'repeat');
17254 ctx.fillStyle = '#f00';
17255 ctx.fillRect(0, 0, 100, 50);
17256 ctx.shadowColor = '#0f0';
17257 ctx.shadowOffsetY = 50;
17258 ctx.fillStyle = pattern;
17259 ctx.fillRect(0, -50, 100, 50);
17260
17261 isPixel(ctx, 50,25, 0,255,0,255, 0);
17262
17263
17264 }
17265 </script>
17266 <img src="image_red.png" id="red_18.png" class="resource">
17267
17268 <!-- [[[ test_2d.shadow.pattern.transparent.1.html ]]] -->
17269
17270 <p>Canvas test: 2d.shadow.pattern.transparent.1</p>
17271 <canvas id="c542" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17272 <script>
17273
17274
17275 function test_2d_shadow_pattern_transparent_1() {
17276
17277 var canvas = document.getElementById('c542');
17278 var ctx = canvas.getContext('2d');
17279
17280 var pattern = ctx.createPattern(document.getElementById('transparent_2.png'), 'repeat');
17281 ctx.fillStyle = '#0f0';
17282 ctx.fillRect(0, 0, 100, 50);
17283 ctx.shadowColor = '#f00';
17284 ctx.shadowOffsetY = 50;
17285 ctx.fillStyle = pattern;
17286 ctx.fillRect(0, -50, 100, 50);
17287
17288 isPixel(ctx, 50,25, 0,255,0,255, 0);
17289
17290
17291 }
17292 </script>
17293 <img src="image_transparent.png" id="transparent_2.png" class="resource">
17294
17295 <!-- [[[ test_2d.shadow.pattern.transparent.2.html ]]] -->
17296
17297 <p>Canvas test: 2d.shadow.pattern.transparent.2</p>
17298 <canvas id="c543" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17299 <script>
17300
17301
17302
17303 function test_2d_shadow_pattern_transparent_2() {
17304
17305 var canvas = document.getElementById('c543');
17306 var ctx = canvas.getContext('2d');
17307
17308 var pattern = ctx.createPattern(document.getElementById('redtransparent_5.png'), 'repeat');
17309 ctx.fillStyle = '#f00';
17310 ctx.fillRect(0, 0, 50, 50);
17311 ctx.fillStyle = '#0f0';
17312 ctx.fillRect(50, 0, 50, 50);
17313 ctx.shadowOffsetY = 50;
17314 ctx.shadowColor = '#0f0';
17315 ctx.fillStyle = pattern;
17316 ctx.fillRect(0, -50, 100, 50);
17317
17318 isPixel(ctx, 25,25, 0,255,0,255, 0);
17319 isPixel(ctx, 50,25, 0,255,0,255, 0);
17320 isPixel(ctx, 75,25, 0,255,0,255, 0);
17321
17322
17323 }
17324 </script>
17325 <img src="image_redtransparent.png" id="redtransparent_5.png" class="resource">
17326
17327 <!-- [[[ test_2d.shadow.stroke.basic.html ]]] -->
17328
17329 <p>Canvas test: 2d.shadow.stroke.basic</p>
17330 <canvas id="c544" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17331 <script>
17332
17333
17334
17335 function test_2d_shadow_stroke_basic() {
17336
17337 var canvas = document.getElementById('c544');
17338 var ctx = canvas.getContext('2d');
17339
17340 ctx.fillStyle = '#f00';
17341 ctx.fillRect(0, 0, 100, 50);
17342 ctx.strokeStyle = '#f00';
17343 ctx.shadowColor = '#0f0';
17344 ctx.shadowOffsetY = 50;
17345 ctx.beginPath();
17346 ctx.lineWidth = 50;
17347 ctx.moveTo(0, -25);
17348 ctx.lineTo(100, -25);
17349 ctx.stroke();
17350
17351 isPixel(ctx, 1,25, 0,255,0,255, 0);
17352 isPixel(ctx, 50,25, 0,255,0,255, 0);
17353 isPixel(ctx, 98,25, 0,255,0,255, 0);
17354
17355
17356 }
17357 </script>
17358
17359 <!-- [[[ test_2d.shadow.stroke.cap.1.html ]]] -->
17360
17361 <p>Canvas test: 2d.shadow.stroke.cap.1</p>
17362 <canvas id="c545" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17363 <script>
17364
17365
17366 function test_2d_shadow_stroke_cap_1() {
17367
17368 var canvas = document.getElementById('c545');
17369 var ctx = canvas.getContext('2d');
17370
17371 ctx.fillStyle = '#0f0';
17372 ctx.fillRect(0, 0, 100, 50);
17373 ctx.strokeStyle = '#f00';
17374 ctx.shadowColor = '#f00';
17375 ctx.shadowOffsetY = 50;
17376 ctx.beginPath();
17377 ctx.lineWidth = 50;
17378 ctx.lineCap = 'butt';
17379 ctx.moveTo(-50, -25);
17380 ctx.lineTo(0, -25);
17381 ctx.moveTo(100, -25);
17382 ctx.lineTo(150, -25);
17383 ctx.stroke();
17384
17385 isPixel(ctx, 1,25, 0,255,0,255, 0);
17386 isPixel(ctx, 50,25, 0,255,0,255, 0);
17387 isPixel(ctx, 98,25, 0,255,0,255, 0);
17388
17389
17390 }
17391 </script>
17392
17393 <!-- [[[ test_2d.shadow.stroke.cap.2.html ]]] -->
17394
17395 <p>Canvas test: 2d.shadow.stroke.cap.2</p>
17396 <canvas id="c546" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17397 <script>
17398
17399
17400
17401 function test_2d_shadow_stroke_cap_2() {
17402
17403 var canvas = document.getElementById('c546');
17404 var ctx = canvas.getContext('2d');
17405
17406 ctx.fillStyle = '#f00';
17407 ctx.fillRect(0, 0, 100, 50);
17408 ctx.strokeStyle = '#f00';
17409 ctx.shadowColor = '#0f0';
17410 ctx.shadowOffsetY = 50;
17411 ctx.beginPath();
17412 ctx.lineWidth = 50;
17413 ctx.lineCap = 'square';
17414 ctx.moveTo(25, -25);
17415 ctx.lineTo(75, -25);
17416 ctx.stroke();
17417
17418 isPixel(ctx, 1,25, 0,255,0,255, 0);
17419 isPixel(ctx, 50,25, 0,255,0,255, 0);
17420 isPixel(ctx, 98,25, 0,255,0,255, 0);
17421
17422
17423 }
17424 </script>
17425
17426 <!-- [[[ test_2d.shadow.stroke.join.1.html ]]] -->
17427
17428 <p>Canvas test: 2d.shadow.stroke.join.1</p>
17429 <canvas id="c547" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17430 <script>
17431
17432
17433 function test_2d_shadow_stroke_join_1() {
17434
17435 var canvas = document.getElementById('c547');
17436 var ctx = canvas.getContext('2d');
17437
17438 ctx.fillStyle = '#0f0';
17439 ctx.fillRect(0, 0, 100, 50);
17440 ctx.strokeStyle = '#f00';
17441 ctx.shadowColor = '#f00';
17442 ctx.shadowOffsetX = 100;
17443 ctx.lineWidth = 200;
17444 ctx.lineJoin = 'bevel';
17445 ctx.beginPath();
17446 ctx.moveTo(-200, -50);
17447 ctx.lineTo(-150, -50);
17448 ctx.lineTo(-151, -100);
17449 ctx.stroke();
17450
17451 isPixel(ctx, 1,1, 0,255,0,255, 0);
17452 isPixel(ctx, 48,48, 0,255,0,255, 0);
17453 isPixel(ctx, 50,25, 0,255,0,255, 0);
17454 isPixel(ctx, 98,48, 0,255,0,255, 0);
17455
17456
17457 }
17458 </script>
17459
17460 <!-- [[[ test_2d.shadow.stroke.join.2.html ]]] -->
17461
17462 <p>Canvas test: 2d.shadow.stroke.join.2</p>
17463 <canvas id="c548" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17464 <script>
17465
17466
17467
17468 function test_2d_shadow_stroke_join_2() {
17469
17470 var canvas = document.getElementById('c548');
17471 var ctx = canvas.getContext('2d');
17472
17473 ctx.fillStyle = '#f00';
17474 ctx.fillRect(0, 0, 50, 50);
17475 ctx.fillStyle = '#0f0';
17476 ctx.fillRect(50, 0, 50, 50);
17477 ctx.strokeStyle = '#f00';
17478 ctx.shadowColor = '#0f0';
17479 ctx.shadowOffsetX = 100;
17480 ctx.lineWidth = 200;
17481 ctx.lineJoin = 'miter';
17482 ctx.beginPath();
17483 ctx.moveTo(-200, -50);
17484 ctx.lineTo(-150, -50);
17485 ctx.lineTo(-151, -100);
17486 ctx.stroke();
17487
17488 isPixel(ctx, 1,1, 0,255,0,255, 0);
17489 isPixel(ctx, 48,48, 0,255,0,255, 0);
17490 isPixel(ctx, 50,25, 0,255,0,255, 0);
17491 isPixel(ctx, 98,48, 0,255,0,255, 0);
17492
17493
17494 }
17495 </script>
17496
17497 <!-- [[[ test_2d.shadow.stroke.join.3.html ]]] -->
17498
17499 <p>Canvas test: 2d.shadow.stroke.join.3</p>
17500 <canvas id="c549" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17501 <script>
17502
17503
17504 function test_2d_shadow_stroke_join_3() {
17505
17506 var canvas = document.getElementById('c549');
17507 var ctx = canvas.getContext('2d');
17508
17509 ctx.fillStyle = '#0f0';
17510 ctx.fillRect(0, 0, 100, 50);
17511 ctx.strokeStyle = '#f00';
17512 ctx.shadowColor = '#f00';
17513 ctx.shadowOffsetX = 100;
17514 ctx.lineWidth = 200;
17515 ctx.lineJoin = 'miter';
17516 ctx.miterLimit = 0.1;
17517 ctx.beginPath();
17518 ctx.moveTo(-200, -50);
17519 ctx.lineTo(-150, -50);
17520 ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3)
17521 ctx.stroke();
17522
17523 isPixel(ctx, 1,1, 0,255,0,255, 0);
17524 isPixel(ctx, 48,48, 0,255,0,255, 0);
17525 isPixel(ctx, 50,25, 0,255,0,255, 0);
17526 isPixel(ctx, 98,48, 0,255,0,255, 0);
17527
17528
17529 }
17530 </script>
17531
17532 <!-- [[[ test_2d.shadow.transform.1.html ]]] -->
17533
17534 <p>Canvas test: 2d.shadow.transform.1</p>
17535 <canvas id="c550" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17536 <script>
17537
17538
17539
17540 function test_2d_shadow_transform_1() {
17541
17542 var canvas = document.getElementById('c550');
17543 var ctx = canvas.getContext('2d');
17544
17545 ctx.fillStyle = '#f00';
17546 ctx.fillRect(0, 0, 100, 50);
17547 ctx.shadowOffsetY = 50;
17548 ctx.shadowColor = '#0f0';
17549 ctx.translate(100, 100);
17550 ctx.fillRect(-100, -150, 100, 50);
17551
17552 isPixel(ctx, 50,25, 0,255,0,255, 0);
17553
17554
17555 }
17556 </script>
17557
17558 <!-- [[[ test_2d.shadow.transform.2.html ]]] -->
17559
17560 <p>Canvas test: 2d.shadow.transform.2</p>
17561 <canvas id="c551" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17562 <script>
17563
17564
17565
17566 function test_2d_shadow_transform_2() {
17567
17568 var canvas = document.getElementById('c551');
17569 var ctx = canvas.getContext('2d');
17570
17571 ctx.fillStyle = '#f00';
17572 ctx.fillRect(0, 0, 100, 50);
17573 ctx.shadowOffsetY = 50;
17574 ctx.shadowColor = '#0f0';
17575 ctx.rotate(Math.PI)
17576 ctx.fillRect(-100, 0, 100, 50);
17577
17578 isPixel(ctx, 50,25, 0,255,0,255, 0);
17579
17580
17581 }
17582 </script>
17583
17584 <!-- [[[ test_2d.state.saverestore.bitmap.html ]]] -->
17585
17586 <p>Canvas test: 2d.state.saverestore.bitmap</p>
17587 <!-- Testing: save()/restore() does not affect the current bitmap -->
17588 <canvas id="c552" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17589 <script>
17590
17591
17592 function test_2d_state_saverestore_bitmap() {
17593
17594 var canvas = document.getElementById('c552');
17595 var ctx = canvas.getContext('2d');
17596
17597 ctx.fillStyle = '#f00';
17598 ctx.fillRect(0, 0, 100, 50);
17599 ctx.save();
17600 ctx.fillStyle = '#0f0';
17601 ctx.fillRect(0, 0, 100, 50);
17602 ctx.restore();
17603 isPixel(ctx, 50,25, 0,255,0,255, 0);
17604
17605
17606 }
17607 </script>
17608
17609 <!-- [[[ test_2d.state.saverestore.clip.html ]]] -->
17610
17611 <p>Canvas test: 2d.state.saverestore.clip</p>
17612 <!-- Testing: save()/restore() affects the clipping path -->
17613 <canvas id="c553" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17614 <script>
17615
17616
17617 function test_2d_state_saverestore_clip() {
17618
17619 var canvas = document.getElementById('c553');
17620 var ctx = canvas.getContext('2d');
17621
17622 ctx.fillStyle = '#f00';
17623 ctx.fillRect(0, 0, 100, 50);
17624 ctx.save();
17625 ctx.rect(0, 0, 1, 1);
17626 ctx.clip();
17627 ctx.restore();
17628 ctx.fillStyle = '#0f0';
17629 ctx.fillRect(0, 0, 100, 50);
17630 isPixel(ctx, 50,25, 0,255,0,255, 0);
17631
17632
17633 }
17634 </script>
17635
17636 <!-- [[[ test_2d.state.saverestore.fillStyle.html ]]] -->
17637
17638 <p>Canvas test: 2d.state.saverestore.fillStyle</p>
17639 <!-- Testing: save()/restore() works for fillStyle -->
17640 <canvas id="c554" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17641 <script>
17642
17643 function test_2d_state_saverestore_fillStyle() {
17644
17645 var canvas = document.getElementById('c554');
17646 var ctx = canvas.getContext('2d');
17647
17648 // Test that restore() undoes any modifications
17649 var old = ctx.fillStyle;
17650 ctx.save();
17651 ctx.fillStyle = "#ff0000";
17652 ctx.restore();
17653 ok(ctx.fillStyle === old, "ctx.fillStyle === old");
17654
17655 // Also test that save() doesn't modify the values
17656 ctx.fillStyle = "#ff0000";
17657 old = ctx.fillStyle;
17658 // we're not interested in failures caused by get(set(x)) != x (e.g.
17659 // from rounding), so compare against d instead of against "#ff0000"
17660 ctx.save();
17661 ok(ctx.fillStyle === old, "ctx.fillStyle === old");
17662 ctx.restore();
17663
17664
17665 }
17666 </script>
17667
17668 <!-- [[[ test_2d.state.saverestore.globalAlpha.html ]]] -->
17669
17670 <p>Canvas test: 2d.state.saverestore.globalAlpha</p>
17671 <!-- Testing: save()/restore() works for globalAlpha -->
17672 <canvas id="c555" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17673 <script>
17674
17675 function test_2d_state_saverestore_globalAlpha() {
17676
17677 var canvas = document.getElementById('c555');
17678 var ctx = canvas.getContext('2d');
17679
17680 // Test that restore() undoes any modifications
17681 var old = ctx.globalAlpha;
17682 ctx.save();
17683 ctx.globalAlpha = 0.5;
17684 ctx.restore();
17685 ok(ctx.globalAlpha === old, "ctx.globalAlpha === old");
17686
17687 // Also test that save() doesn't modify the values
17688 ctx.globalAlpha = 0.5;
17689 old = ctx.globalAlpha;
17690 // we're not interested in failures caused by get(set(x)) != x (e.g.
17691 // from rounding), so compare against d instead of against 0.5
17692 ctx.save();
17693 ok(ctx.globalAlpha === old, "ctx.globalAlpha === old");
17694 ctx.restore();
17695
17696
17697 }
17698 </script>
17699
17700 <!-- [[[ test_2d.state.saverestore.globalCompositeOperation.html ]]] -->
17701
17702 <p>Canvas test: 2d.state.saverestore.globalCompositeOperation</p>
17703 <!-- Testing: save()/restore() works for globalCompositeOperation -->
17704 <canvas id="c556" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17705 <script>
17706
17707 function test_2d_state_saverestore_globalCompositeOperation() {
17708
17709 var canvas = document.getElementById('c556');
17710 var ctx = canvas.getContext('2d');
17711
17712 // Test that restore() undoes any modifications
17713 var old = ctx.globalCompositeOperation;
17714 ctx.save();
17715 ctx.globalCompositeOperation = "copy";
17716 ctx.restore();
17717 ok(ctx.globalCompositeOperation === old, "ctx.globalCompositeOperation === old");
17718
17719 // Also test that save() doesn't modify the values
17720 ctx.globalCompositeOperation = "copy";
17721 old = ctx.globalCompositeOperation;
17722 // we're not interested in failures caused by get(set(x)) != x (e.g.
17723 // from rounding), so compare against d instead of against "copy"
17724 ctx.save();
17725 ok(ctx.globalCompositeOperation === old, "ctx.globalCompositeOperation === old");
17726 ctx.restore();
17727
17728
17729 }
17730 </script>
17731
17732 <!-- [[[ test_2d.state.saverestore.lineCap.html ]]] -->
17733
17734 <p>Canvas test: 2d.state.saverestore.lineCap</p>
17735 <!-- Testing: save()/restore() works for lineCap -->
17736 <canvas id="c557" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17737 <script>
17738
17739 function test_2d_state_saverestore_lineCap() {
17740
17741 var canvas = document.getElementById('c557');
17742 var ctx = canvas.getContext('2d');
17743
17744 // Test that restore() undoes any modifications
17745 var old = ctx.lineCap;
17746 ctx.save();
17747 ctx.lineCap = "round";
17748 ctx.restore();
17749 ok(ctx.lineCap === old, "ctx.lineCap === old");
17750
17751 // Also test that save() doesn't modify the values
17752 ctx.lineCap = "round";
17753 old = ctx.lineCap;
17754 // we're not interested in failures caused by get(set(x)) != x (e.g.
17755 // from rounding), so compare against d instead of against "round"
17756 ctx.save();
17757 ok(ctx.lineCap === old, "ctx.lineCap === old");
17758 ctx.restore();
17759
17760
17761 }
17762 </script>
17763
17764 <!-- [[[ test_2d.state.saverestore.lineJoin.html ]]] -->
17765
17766 <p>Canvas test: 2d.state.saverestore.lineJoin</p>
17767 <!-- Testing: save()/restore() works for lineJoin -->
17768 <canvas id="c558" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17769 <script>
17770
17771 function test_2d_state_saverestore_lineJoin() {
17772
17773 var canvas = document.getElementById('c558');
17774 var ctx = canvas.getContext('2d');
17775
17776 // Test that restore() undoes any modifications
17777 var old = ctx.lineJoin;
17778 ctx.save();
17779 ctx.lineJoin = "round";
17780 ctx.restore();
17781 ok(ctx.lineJoin === old, "ctx.lineJoin === old");
17782
17783 // Also test that save() doesn't modify the values
17784 ctx.lineJoin = "round";
17785 old = ctx.lineJoin;
17786 // we're not interested in failures caused by get(set(x)) != x (e.g.
17787 // from rounding), so compare against d instead of against "round"
17788 ctx.save();
17789 ok(ctx.lineJoin === old, "ctx.lineJoin === old");
17790 ctx.restore();
17791
17792
17793 }
17794 </script>
17795
17796 <!-- [[[ test_2d.state.saverestore.lineWidth.html ]]] -->
17797
17798 <p>Canvas test: 2d.state.saverestore.lineWidth</p>
17799 <!-- Testing: save()/restore() works for lineWidth -->
17800 <canvas id="c559" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17801 <script>
17802
17803 function test_2d_state_saverestore_lineWidth() {
17804
17805 var canvas = document.getElementById('c559');
17806 var ctx = canvas.getContext('2d');
17807
17808 // Test that restore() undoes any modifications
17809 var old = ctx.lineWidth;
17810 ctx.save();
17811 ctx.lineWidth = 0.5;
17812 ctx.restore();
17813 ok(ctx.lineWidth === old, "ctx.lineWidth === old");
17814
17815 // Also test that save() doesn't modify the values
17816 ctx.lineWidth = 0.5;
17817 old = ctx.lineWidth;
17818 // we're not interested in failures caused by get(set(x)) != x (e.g.
17819 // from rounding), so compare against d instead of against 0.5
17820 ctx.save();
17821 ok(ctx.lineWidth === old, "ctx.lineWidth === old");
17822 ctx.restore();
17823
17824
17825 }
17826 </script>
17827
17828 <!-- [[[ test_2d.state.saverestore.miterLimit.html ]]] -->
17829
17830 <p>Canvas test: 2d.state.saverestore.miterLimit</p>
17831 <!-- Testing: save()/restore() works for miterLimit -->
17832 <canvas id="c560" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17833 <script>
17834
17835 function test_2d_state_saverestore_miterLimit() {
17836
17837 var canvas = document.getElementById('c560');
17838 var ctx = canvas.getContext('2d');
17839
17840 // Test that restore() undoes any modifications
17841 var old = ctx.miterLimit;
17842 ctx.save();
17843 ctx.miterLimit = 0.5;
17844 ctx.restore();
17845 ok(ctx.miterLimit === old, "ctx.miterLimit === old");
17846
17847 // Also test that save() doesn't modify the values
17848 ctx.miterLimit = 0.5;
17849 old = ctx.miterLimit;
17850 // we're not interested in failures caused by get(set(x)) != x (e.g.
17851 // from rounding), so compare against d instead of against 0.5
17852 ctx.save();
17853 ok(ctx.miterLimit === old, "ctx.miterLimit === old");
17854 ctx.restore();
17855
17856
17857 }
17858 </script>
17859
17860 <!-- [[[ test_2d.state.saverestore.path.html ]]] -->
17861
17862 <p>Canvas test: 2d.state.saverestore.path</p>
17863 <!-- Testing: save()/restore() does not affect the current path -->
17864 <canvas id="c561" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17865 <script>
17866
17867
17868 function test_2d_state_saverestore_path() {
17869
17870 var canvas = document.getElementById('c561');
17871 var ctx = canvas.getContext('2d');
17872
17873 ctx.fillStyle = '#f00';
17874 ctx.fillRect(0, 0, 100, 50);
17875 ctx.save();
17876 ctx.rect(0, 0, 100, 50);
17877 ctx.restore();
17878 ctx.fillStyle = '#0f0';
17879 ctx.fill();
17880 isPixel(ctx, 50,25, 0,255,0,255, 0);
17881
17882
17883 }
17884 </script>
17885
17886 <!-- [[[ test_2d.state.saverestore.shadowBlur.html ]]] -->
17887
17888 <p>Canvas test: 2d.state.saverestore.shadowBlur</p>
17889 <!-- Testing: save()/restore() works for shadowBlur -->
17890 <canvas id="c562" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17891 <script>
17892
17893 function test_2d_state_saverestore_shadowBlur() {
17894
17895 var canvas = document.getElementById('c562');
17896 var ctx = canvas.getContext('2d');
17897
17898 // Test that restore() undoes any modifications
17899 var old = ctx.shadowBlur;
17900 ctx.save();
17901 ctx.shadowBlur = 5;
17902 ctx.restore();
17903 ok(ctx.shadowBlur === old, "ctx.shadowBlur === old");
17904
17905 // Also test that save() doesn't modify the values
17906 ctx.shadowBlur = 5;
17907 old = ctx.shadowBlur;
17908 // we're not interested in failures caused by get(set(x)) != x (e.g.
17909 // from rounding), so compare against d instead of against 5
17910 ctx.save();
17911 ok(ctx.shadowBlur === old, "ctx.shadowBlur === old");
17912 ctx.restore();
17913
17914
17915 }
17916 </script>
17917
17918 <!-- [[[ test_2d.state.saverestore.shadowColor.html ]]] -->
17919
17920 <p>Canvas test: 2d.state.saverestore.shadowColor</p>
17921 <!-- Testing: save()/restore() works for shadowColor -->
17922 <canvas id="c563" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17923 <script>
17924
17925 function test_2d_state_saverestore_shadowColor() {
17926
17927 var canvas = document.getElementById('c563');
17928 var ctx = canvas.getContext('2d');
17929
17930 // Test that restore() undoes any modifications
17931 var old = ctx.shadowColor;
17932 ctx.save();
17933 ctx.shadowColor = "#ff0000";
17934 ctx.restore();
17935 ok(ctx.shadowColor === old, "ctx.shadowColor === old");
17936
17937 // Also test that save() doesn't modify the values
17938 ctx.shadowColor = "#ff0000";
17939 old = ctx.shadowColor;
17940 // we're not interested in failures caused by get(set(x)) != x (e.g.
17941 // from rounding), so compare against d instead of against "#ff0000"
17942 ctx.save();
17943 ok(ctx.shadowColor === old, "ctx.shadowColor === old");
17944 ctx.restore();
17945
17946
17947 }
17948 </script>
17949
17950 <!-- [[[ test_2d.state.saverestore.shadowOffsetX.html ]]] -->
17951
17952 <p>Canvas test: 2d.state.saverestore.shadowOffsetX</p>
17953 <!-- Testing: save()/restore() works for shadowOffsetX -->
17954 <canvas id="c564" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17955 <script>
17956
17957 function test_2d_state_saverestore_shadowOffsetX() {
17958
17959 var canvas = document.getElementById('c564');
17960 var ctx = canvas.getContext('2d');
17961
17962 // Test that restore() undoes any modifications
17963 var old = ctx.shadowOffsetX;
17964 ctx.save();
17965 ctx.shadowOffsetX = 5;
17966 ctx.restore();
17967 ok(ctx.shadowOffsetX === old, "ctx.shadowOffsetX === old");
17968
17969 // Also test that save() doesn't modify the values
17970 ctx.shadowOffsetX = 5;
17971 old = ctx.shadowOffsetX;
17972 // we're not interested in failures caused by get(set(x)) != x (e.g.
17973 // from rounding), so compare against d instead of against 5
17974 ctx.save();
17975 ok(ctx.shadowOffsetX === old, "ctx.shadowOffsetX === old");
17976 ctx.restore();
17977
17978
17979 }
17980 </script>
17981
17982 <!-- [[[ test_2d.state.saverestore.shadowOffsetY.html ]]] -->
17983
17984 <p>Canvas test: 2d.state.saverestore.shadowOffsetY</p>
17985 <!-- Testing: save()/restore() works for shadowOffsetY -->
17986 <canvas id="c565" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17987 <script>
17988
17989 function test_2d_state_saverestore_shadowOffsetY() {
17990
17991 var canvas = document.getElementById('c565');
17992 var ctx = canvas.getContext('2d');
17993
17994 // Test that restore() undoes any modifications
17995 var old = ctx.shadowOffsetY;
17996 ctx.save();
17997 ctx.shadowOffsetY = 5;
17998 ctx.restore();
17999 ok(ctx.shadowOffsetY === old, "ctx.shadowOffsetY === old");
18000
18001 // Also test that save() doesn't modify the values
18002 ctx.shadowOffsetY = 5;
18003 old = ctx.shadowOffsetY;
18004 // we're not interested in failures caused by get(set(x)) != x (e.g.
18005 // from rounding), so compare against d instead of against 5
18006 ctx.save();
18007 ok(ctx.shadowOffsetY === old, "ctx.shadowOffsetY === old");
18008 ctx.restore();
18009
18010
18011 }
18012 </script>
18013
18014 <!-- [[[ test_2d.state.saverestore.stack.html ]]] -->
18015
18016 <p>Canvas test: 2d.state.saverestore.stack</p>
18017 <!-- Testing: save()/restore() can be nested as a stack -->
18018 <canvas id="c566" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18019 <script>
18020
18021 function test_2d_state_saverestore_stack() {
18022
18023 var canvas = document.getElementById('c566');
18024 var ctx = canvas.getContext('2d');
18025
18026 ctx.lineWidth = 1;
18027 ctx.save();
18028 ctx.lineWidth = 2;
18029 ctx.save();
18030 ctx.lineWidth = 3;
18031 ok(ctx.lineWidth == 3, "ctx.lineWidth == 3");
18032 ctx.restore();
18033 ok(ctx.lineWidth == 2, "ctx.lineWidth == 2");
18034 ctx.restore();
18035 ok(ctx.lineWidth == 1, "ctx.lineWidth == 1");
18036
18037
18038 }
18039 </script>
18040
18041 <!-- [[[ test_2d.state.saverestore.stackdepth.html ]]] -->
18042
18043 <p>Canvas test: 2d.state.saverestore.stackdepth</p>
18044 <!-- Testing: save()/restore() stack depth is not unreasonably limited -->
18045 <canvas id="c567" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18046 <script>
18047
18048 function test_2d_state_saverestore_stackdepth() {
18049
18050 var canvas = document.getElementById('c567');
18051 var ctx = canvas.getContext('2d');
18052
18053 var limit = 512;
18054 for (var i = 1; i < limit; ++i)
18055 {
18056 ctx.save();
18057 ctx.lineWidth = i;
18058 }
18059 for (var i = limit-1; i > 0; --i)
18060 {
18061 ok(ctx.lineWidth == i, "ctx.lineWidth == i");
18062 ctx.restore();
18063 }
18064
18065
18066 }
18067 </script>
18068
18069 <!-- [[[ test_2d.state.saverestore.strokeStyle.html ]]] -->
18070
18071 <p>Canvas test: 2d.state.saverestore.strokeStyle</p>
18072 <!-- Testing: save()/restore() works for strokeStyle -->
18073 <canvas id="c568" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18074 <script>
18075
18076 function test_2d_state_saverestore_strokeStyle() {
18077
18078 var canvas = document.getElementById('c568');
18079 var ctx = canvas.getContext('2d');
18080
18081 // Test that restore() undoes any modifications
18082 var old = ctx.strokeStyle;
18083 ctx.save();
18084 ctx.strokeStyle = "#ff0000";
18085 ctx.restore();
18086 ok(ctx.strokeStyle === old, "ctx.strokeStyle === old");
18087
18088 // Also test that save() doesn't modify the values
18089 ctx.strokeStyle = "#ff0000";
18090 old = ctx.strokeStyle;
18091 // we're not interested in failures caused by get(set(x)) != x (e.g.
18092 // from rounding), so compare against d instead of against "#ff0000"
18093 ctx.save();
18094 ok(ctx.strokeStyle === old, "ctx.strokeStyle === old");
18095 ctx.restore();
18096
18097
18098 }
18099 </script>
18100
18101 <!-- [[[ test_2d.state.saverestore.transformation.html ]]] -->
18102
18103 <p>Canvas test: 2d.state.saverestore.transformation</p>
18104 <!-- Testing: save()/restore() affects the current transformation matrix -->
18105 <canvas id="c569" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18106 <script>
18107
18108
18109 function test_2d_state_saverestore_transformation() {
18110
18111 var canvas = document.getElementById('c569');
18112 var ctx = canvas.getContext('2d');
18113
18114 ctx.fillStyle = '#0f0';
18115 ctx.fillRect(0, 0, 100, 50);
18116 ctx.save();
18117 ctx.translate(200, 0);
18118 ctx.restore();
18119 ctx.fillStyle = '#f00';
18120 ctx.fillRect(-200, 0, 100, 50);
18121 isPixel(ctx, 50,25, 0,255,0,255, 0);
18122
18123
18124 }
18125 </script>
18126
18127 <!-- [[[ test_2d.state.saverestore.underflow.html ]]] -->
18128
18129 <p>Canvas test: 2d.state.saverestore.underflow - bug 296821</p>
18130 <!-- Testing: restore() with an empty stack has no effect -->
18131 <canvas id="c570" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18132 <script>
18133
18134 function test_2d_state_saverestore_underflow() {
18135
18136 var canvas = document.getElementById('c570');
18137 var ctx = canvas.getContext('2d');
18138
18139 for (var i = 0; i < 16; ++i)
18140 ctx.restore();
18141 ctx.lineWidth = 0.5;
18142 ctx.restore();
18143 ok(ctx.lineWidth == 0.5, "ctx.lineWidth == 0.5");
18144
18145
18146 }
18147 </script>
18148
18149 <!-- [[[ test_2d.strokeRect.basic.html ]]] -->
18150
18151 <p>Canvas test: 2d.strokeRect.basic</p>
18152 <canvas id="c571" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
18153 <script>
18154
18155
18156 function test_2d_strokeRect_basic() {
18157
18158 var canvas = document.getElementById('c571');
18159 var ctx = canvas.getContext('2d');
18160
18161 ctx.strokeStyle = '#0f0';
18162 ctx.lineWidth = 50;
18163 ctx.strokeRect(25, 24, 50, 2);
18164 isPixel(ctx, 50,25, 0,255,0,255, 0);
18165
18166
18167 }
18168 </script>
18169
18170 <!-- [[[ test_2d.strokeRect.clip.html ]]] -->
18171
18172 <p>Canvas test: 2d.strokeRect.clip</p>
18173 <canvas id="c572" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18174 <script>
18175
18176
18177 function test_2d_strokeRect_clip() {
18178
18179 var canvas = document.getElementById('c572');
18180 var ctx = canvas.getContext('2d');
18181
18182 ctx.fillStyle = '#0f0';
18183 ctx.fillRect(0, 0, 100, 50);
18184
18185 ctx.beginPath();
18186 ctx.rect(0, 0, 16, 16);
18187 ctx.clip();
18188
18189 ctx.strokeStyle = '#f00';
18190 ctx.lineWidth = 50;
18191 ctx.strokeRect(0, 0, 100, 50);
18192
18193 ctx.fillStyle = '#0f0';
18194 ctx.fillRect(0, 0, 16, 16);
18195
18196 isPixel(ctx, 50,25, 0,255,0,255, 0);
18197
18198
18199 }
18200 </script>
18201
18202 <!-- [[[ test_2d.strokeRect.globalalpha.html ]]] -->
18203
18204 <p>Canvas test: 2d.strokeRect.globalalpha</p>
18205 <canvas id="c573" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18206 <script>
18207
18208
18209 function test_2d_strokeRect_globalalpha() {
18210
18211 var canvas = document.getElementById('c573');
18212 var ctx = canvas.getContext('2d');
18213
18214 ctx.globalAlpha = 0;
18215 ctx.strokeStyle = '#f00';
18216 ctx.lineWidth = 50;
18217 ctx.strokeRect(25, 24, 50, 2);
18218 isPixel(ctx, 50,25, 0,0,0,0, 0);
18219
18220
18221 }
18222 </script>
18223
18224 <!-- [[[ test_2d.strokeRect.globalcomposite.html ]]] -->
18225
18226 <p>Canvas test: 2d.strokeRect.globalcomposite</p>
18227 <canvas id="c574" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18228 <script>
18229
18230
18231 function test_2d_strokeRect_globalcomposite() {
18232
18233 var canvas = document.getElementById('c574');
18234 var ctx = canvas.getContext('2d');
18235
18236 ctx.globalCompositeOperation = 'source-in';
18237 ctx.strokeStyle = '#f00';
18238 ctx.lineWidth = 50;
18239 ctx.strokeRect(25, 24, 50, 2);
18240 isPixel(ctx, 50,25, 0,0,0,0, 0);
18241
18242
18243 }
18244 </script>
18245
18246 <!-- [[[ test_2d.strokeRect.negative.html ]]] -->
18247
18248 <p>Canvas test: 2d.strokeRect.negative</p>
18249 <canvas id="c575" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18250 <script>
18251
18252
18253 function test_2d_strokeRect_negative() {
18254
18255 var canvas = document.getElementById('c575');
18256 var ctx = canvas.getContext('2d');
18257
18258 ctx.fillStyle = '#f00';
18259 ctx.fillRect(0, 0, 100, 50);
18260 ctx.strokeStyle = '#0f0';
18261 ctx.lineWidth = 25;
18262 ctx.strokeRect(12, 12, 26, 1);
18263 ctx.strokeRect(88, 12, -26, 1);
18264 ctx.strokeRect(12, 38, 26, -1);
18265 ctx.strokeRect(88, 38, -26, -1);
18266 isPixel(ctx, 25,12, 0,255,0,255, 0);
18267 isPixel(ctx, 75,12, 0,255,0,255, 0);
18268 isPixel(ctx, 25,37, 0,255,0,255, 0);
18269 isPixel(ctx, 75,37, 0,255,0,255, 0);
18270
18271
18272 }
18273 </script>
18274
18275 <!-- [[[ test_2d.strokeRect.nonfinite.html ]]] -->
18276
18277 <p>Canvas test: 2d.strokeRect.nonfinite</p>
18278 <!-- Testing: strokeRect() with Infinity/NaN is ignored -->
18279 <canvas id="c576" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18280 <script>
18281
18282
18283 function test_2d_strokeRect_nonfinite() {
18284
18285 var canvas = document.getElementById('c576');
18286 var ctx = canvas.getContext('2d');
18287
18288 var _thrown_outer = false;
18289 try {
18290
18291 ctx.fillStyle = '#0f0';
18292 ctx.fillRect(0, 0, 100, 50);
18293
18294 ctx.strokeStyle = '#f00';
18295 ctx.lineWidth = 150;
18296 ctx.strokeRect(Infinity, 0, 100, 50);
18297 ctx.strokeRect(-Infinity, 0, 100, 50);
18298 ctx.strokeRect(NaN, 0, 100, 50);
18299 ctx.strokeRect(0, Infinity, 100, 50);
18300 ctx.strokeRect(0, -Infinity, 100, 50);
18301 ctx.strokeRect(0, NaN, 100, 50);
18302 ctx.strokeRect(0, 0, Infinity, 50);
18303 ctx.strokeRect(0, 0, -Infinity, 50);
18304 ctx.strokeRect(0, 0, NaN, 50);
18305 ctx.strokeRect(0, 0, 100, Infinity);
18306 ctx.strokeRect(0, 0, 100, -Infinity);
18307 ctx.strokeRect(0, 0, 100, NaN);
18308 ctx.strokeRect(Infinity, Infinity, 100, 50);
18309 ctx.strokeRect(Infinity, Infinity, Infinity, 50);
18310 ctx.strokeRect(Infinity, Infinity, Infinity, Infinity);
18311 ctx.strokeRect(Infinity, Infinity, 100, Infinity);
18312 ctx.strokeRect(Infinity, 0, Infinity, 50);
18313 ctx.strokeRect(Infinity, 0, Infinity, Infinity);
18314 ctx.strokeRect(Infinity, 0, 100, Infinity);
18315 ctx.strokeRect(0, Infinity, Infinity, 50);
18316 ctx.strokeRect(0, Infinity, Infinity, Infinity);
18317 ctx.strokeRect(0, Infinity, 100, Infinity);
18318 ctx.strokeRect(0, 0, Infinity, Infinity);
18319
18320 isPixel(ctx, 50,25, 0,255,0,255, 0);
18321
18322 } catch (e) {
18323 _thrown_outer = true;
18324 }
18325 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
18326
18327
18328 }
18329 </script>
18330
18331 <!-- [[[ test_2d.strokeRect.path.html ]]] -->
18332
18333 <p>Canvas test: 2d.strokeRect.path</p>
18334 <canvas id="c577" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
18335 <script>
18336
18337
18338 function test_2d_strokeRect_path() {
18339
18340 var canvas = document.getElementById('c577');
18341 var ctx = canvas.getContext('2d');
18342
18343 ctx.beginPath();
18344 ctx.rect(0, 0, 100, 50);
18345 ctx.strokeStyle = '#f00';
18346 ctx.lineWidth = 5;
18347 ctx.strokeRect(0, 0, 16, 16);
18348 ctx.fillStyle = '#0f0';
18349 ctx.fill();
18350 isPixel(ctx, 50,25, 0,255,0,255, 0);
18351
18352
18353 }
18354 </script>
18355
18356 <!-- [[[ test_2d.strokeRect.shadow.html ]]] -->
18357
18358 <p>Canvas test: 2d.strokeRect.shadow</p>
18359 <canvas id="c578" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18360 <script>
18361
18362
18363 function test_2d_strokeRect_shadow() {
18364
18365 var canvas = document.getElementById('c578');
18366 var ctx = canvas.getContext('2d');
18367
18368 ctx.fillStyle = '#0f0';
18369 ctx.fillRect(0, 0, 100, 50);
18370
18371 ctx.fillStyle = '#f00';
18372 ctx.shadowBlur = 0;
18373 ctx.shadowOffsetX = 0;
18374 ctx.shadowOffsetY = 50;
18375
18376 // Shadows are optional, so just test that if they apply to fill() then they apply to strokeRect() too
18377 ctx.beginPath();
18378 ctx.rect(0, -50, 100, 50);
18379 ctx.shadowColor = '#f00';
18380 ctx.fill();
18381
18382 ctx.shadowColor = '#0f0';
18383 ctx.strokeStyle = '#f00';
18384 ctx.lineWidth = 50;
18385 ctx.strokeRect(0, -75, 100, 50);
18386
18387 isPixel(ctx, 50,25, 0,255,0,255, 0);
18388
18389
18390 }
18391 </script>
18392
18393 <!-- [[[ test_2d.strokeRect.transform.html ]]] -->
18394
18395 <p>Canvas test: 2d.strokeRect.transform</p>
18396 <canvas id="c579" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
18397 <script>
18398
18399
18400 function test_2d_strokeRect_transform() {
18401
18402 var canvas = document.getElementById('c579');
18403 var ctx = canvas.getContext('2d');
18404
18405 ctx.scale(10, 10);
18406 ctx.translate(0, 5);
18407 ctx.strokeStyle = '#0f0';
18408 ctx.lineWidth = 5;
18409 ctx.strokeRect(2.5, -2.6, 5, 0.2);
18410 isPixel(ctx, 50,25, 0,255,0,255, 0);
18411
18412
18413 }
18414 </script>
18415
18416 <!-- [[[ test_2d.strokeRect.zero.1.html ]]] -->
18417
18418 <p>Canvas test: 2d.strokeRect.zero.1</p>
18419 <canvas id="c580" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18420 <script>
18421
18422
18423 function test_2d_strokeRect_zero_1() {
18424
18425 var canvas = document.getElementById('c580');
18426 var ctx = canvas.getContext('2d');
18427
18428 if (!IsD2DEnabled()) {
18429 // Disabled for D2D until we can figure out Bug 587554.
18430 ctx.strokeStyle = '#f00';
18431 ctx.lineWidth = 250;
18432 ctx.strokeRect(50, 25, 0, 0);
18433 isPixel(ctx, 50,25, 0,0,0,0, 0);
18434 }
18435
18436 }
18437 </script>
18438
18439 <!-- [[[ test_2d.strokeRect.zero.2.html ]]] -->
18440
18441 <p>Canvas test: 2d.strokeRect.zero.2</p>
18442 <canvas id="c581" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18443 <script>
18444
18445
18446
18447 function test_2d_strokeRect_zero_2() {
18448
18449 var canvas = document.getElementById('c581');
18450 var ctx = canvas.getContext('2d');
18451
18452 ctx.strokeStyle = '#f00';
18453 ctx.lineWidth = 250;
18454 ctx.lineCap = 'round';
18455 ctx.lineJoin = 'round';
18456 ctx.strokeRect(50, 25, 0, 0);
18457 isPixel(ctx, 50,25, 0,0,0,0, 0);
18458
18459
18460 }
18461 </script>
18462
18463 <!-- [[[ test_2d.strokeRect.zero.3.html ]]] -->
18464
18465 <p>Canvas test: 2d.strokeRect.zero.3</p>
18466 <canvas id="c582" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
18467 <script>
18468
18469
18470 function test_2d_strokeRect_zero_3() {
18471
18472 var canvas = document.getElementById('c582');
18473 var ctx = canvas.getContext('2d');
18474
18475 ctx.strokeStyle = '#0f0';
18476 ctx.lineWidth = 50;
18477 ctx.strokeRect(0, 25, 100, 0);
18478 isPixel(ctx, 50,25, 0,255,0,255, 0);
18479
18480
18481 }
18482 </script>
18483
18484 <!-- [[[ test_2d.strokeRect.zero.4.html ]]] -->
18485
18486 <p>Canvas test: 2d.strokeRect.zero.4</p>
18487 <canvas id="c583" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18488 <script>
18489
18490
18491 function test_2d_strokeRect_zero_4() {
18492
18493 var canvas = document.getElementById('c583');
18494 var ctx = canvas.getContext('2d');
18495
18496 ctx.strokeStyle = '#f00';
18497 ctx.lineWidth = 250;
18498 ctx.lineCap = 'round';
18499 ctx.strokeRect(100, 25, 100, 0);
18500 isPixel(ctx, 50,25, 0,0,0,0, 0);
18501
18502
18503 }
18504 </script>
18505
18506 <!-- [[[ test_2d.strokeRect.zero.5.html ]]] -->
18507
18508 <p>Canvas test: 2d.strokeRect.zero.5</p>
18509 <canvas id="c584" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
18510 <script>
18511
18512
18513 function test_2d_strokeRect_zero_5() {
18514
18515 var canvas = document.getElementById('c584');
18516 var ctx = canvas.getContext('2d');
18517
18518 ctx.strokeStyle = '#0f0';
18519 ctx.lineWidth = 250;
18520 ctx.lineJoin = 'round';
18521 ctx.strokeRect(100, 25, 100, 0);
18522 isPixel(ctx, 50,25, 0,255,0,255, 0);
18523
18524
18525 }
18526 </script>
18527
18528 <!-- [[[ test_2d.strokeStyle.default.html ]]] -->
18529
18530 <p>Canvas test: 2d.strokeStyle.default</p>
18531 <canvas id="c585" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18532 <script>
18533
18534 function test_2d_strokeStyle_default() {
18535
18536 var canvas = document.getElementById('c585');
18537 var ctx = canvas.getContext('2d');
18538
18539 ok(ctx.strokeStyle == '#000000', "ctx.strokeStyle == '#000000'");
18540
18541
18542 }
18543 </script>
18544
18545 <!-- [[[ test_2d.text.align.default.html ]]] -->
18546
18547 <p>Canvas test: 2d.text.align.default</p>
18548 <canvas height="50" id="c569a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
18549 <script>
18550
18551 function test_2d_text_align_default() {
18552
18553 var canvas = document.getElementById('c569a');
18554 var ctx = canvas.getContext('2d');
18555
18556 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18557
18558
18559 }
18560 </script>
18561
18562 <!-- [[[ test_2d.text.align.invalid.html ]]] -->
18563
18564 <p>Canvas test: 2d.text.align.invalid</p>
18565 <canvas height="50" id="c570a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
18566 <script>
18567
18568 function test_2d_text_align_invalid() {
18569
18570 var canvas = document.getElementById('c570a');
18571 var ctx = canvas.getContext('2d');
18572
18573 ctx.textAlign = 'start';
18574 ctx.textAlign = 'bogus';
18575 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18576
18577 ctx.textAlign = 'start';
18578 ctx.textAlign = 'END';
18579 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18580
18581 ctx.textAlign = 'start';
18582 ctx.textAlign = 'end ';
18583 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18584
18585 ctx.textAlign = 'start';
18586 ctx.textAlign = 'end\0';
18587 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18588
18589
18590 }
18591 </script>
18592
18593 <!-- [[[ test_2d.text.baseline.default.html ]]] -->
18594
18595 <p>Canvas test: 2d.text.baseline.default</p>
18596 <canvas height="50" id="c572a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
18597 <script>
18598
18599 function test_2d_text_baseline_default() {
18600
18601 var canvas = document.getElementById('c572a');
18602 var ctx = canvas.getContext('2d');
18603
18604 ok(ctx.textBaseline === 'alphabetic', "ctx.textBaseline === 'alphabetic'");
18605
18606
18607 }
18608 </script>
18609
18610 <!-- [[[ test_2d.text.baseline.invalid.html ]]] -->
18611
18612 <p>Canvas test: 2d.text.baseline.invalid</p>
18613 <canvas height="50" id="c573a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
18614 <script>
18615
18616 function test_2d_text_baseline_invalid() {
18617
18618 var canvas = document.getElementById('c573a');
18619 var ctx = canvas.getContext('2d');
18620
18621 ctx.textBaseline = 'top';
18622 ctx.textBaseline = 'bogus';
18623 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
18624
18625 ctx.textBaseline = 'top';
18626 ctx.textBaseline = 'MIDDLE';
18627 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
18628
18629 ctx.textBaseline = 'top';
18630 ctx.textBaseline = 'middle ';
18631 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
18632
18633 ctx.textBaseline = 'top';
18634 ctx.textBaseline = 'middle\0';
18635 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
18636
18637
18638 }
18639 </script>
18640
18641 <!-- [[[ test_2d.transformation.order.html ]]] -->
18642
18643 <p>Canvas test: 2d.transformation.order</p>
18644 <!-- Testing: Transformations are applied in the right order -->
18645 <canvas id="c586" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18646 <script>
18647
18648
18649 function test_2d_transformation_order() {
18650
18651 var canvas = document.getElementById('c586');
18652 var ctx = canvas.getContext('2d');
18653
18654 ctx.fillStyle = '#f00';
18655 ctx.fillRect(0, 0, 100, 50);
18656
18657 ctx.scale(2, 1);
18658 ctx.rotate(Math.PI / 2);
18659 ctx.fillStyle = '#0f0';
18660 ctx.fillRect(0, -50, 50, 50);
18661 isPixel(ctx, 75,25, 0,255,0,255, 0);
18662
18663
18664 }
18665 </script>
18666
18667 <!-- [[[ test_2d.transformation.rotate.direction.html ]]] -->
18668
18669 <p>Canvas test: 2d.transformation.rotate.direction</p>
18670 <!-- Testing: rotate() is clockwise -->
18671 <canvas id="c587" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18672 <script>
18673
18674
18675 function test_2d_transformation_rotate_direction() {
18676
18677 var canvas = document.getElementById('c587');
18678 var ctx = canvas.getContext('2d');
18679
18680 ctx.fillStyle = '#f00';
18681 ctx.fillRect(0, 0, 100, 50);
18682
18683 ctx.rotate(Math.PI / 2);
18684 ctx.fillStyle = '#0f0';
18685 ctx.fillRect(0, -100, 50, 100);
18686 isPixel(ctx, 50,25, 0,255,0,255, 0);
18687
18688
18689 }
18690 </script>
18691
18692 <!-- [[[ test_2d.transformation.rotate.nonfinite.html ]]] -->
18693
18694 <p>Canvas test: 2d.transformation.rotate.nonfinite</p>
18695 <!-- Testing: rotate() with Infinity/NaN is ignored -->
18696 <canvas id="c588" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18697 <script>
18698
18699
18700 function test_2d_transformation_rotate_nonfinite() {
18701
18702 var canvas = document.getElementById('c588');
18703 var ctx = canvas.getContext('2d');
18704
18705 var _thrown_outer = false;
18706 try {
18707
18708 ctx.fillStyle = '#f00';
18709 ctx.fillRect(0, 0, 100, 50);
18710
18711 ctx.translate(100, 10);
18712 ctx.rotate(Infinity);
18713 ctx.rotate(-Infinity);
18714 ctx.rotate(NaN);
18715
18716 ctx.fillStyle = '#0f0';
18717 ctx.fillRect(-100, -10, 100, 50);
18718
18719 isPixel(ctx, 50,25, 0,255,0,255, 0);
18720
18721 } catch (e) {
18722 _thrown_outer = true;
18723 }
18724 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
18725
18726
18727 }
18728 </script>
18729
18730 <!-- [[[ test_2d.transformation.rotate.radians.html ]]] -->
18731
18732 <p>Canvas test: 2d.transformation.rotate.radians</p>
18733 <!-- Testing: rotate() uses radians -->
18734 <canvas id="c589" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18735 <script>
18736
18737
18738 function test_2d_transformation_rotate_radians() {
18739
18740 var canvas = document.getElementById('c589');
18741 var ctx = canvas.getContext('2d');
18742
18743 ctx.fillStyle = '#f00';
18744 ctx.fillRect(0, 0, 100, 50);
18745
18746 ctx.rotate(Math.PI); // should fail obviously if this is 3.1 degrees
18747 ctx.fillStyle = '#0f0';
18748 ctx.fillRect(-100, -50, 100, 50);
18749 isPixel(ctx, 50,25, 0,255,0,255, 0);
18750
18751
18752 }
18753 </script>
18754
18755 <!-- [[[ test_2d.transformation.rotate.wrap.html ]]] -->
18756
18757 <p>Canvas test: 2d.transformation.rotate.wrap</p>
18758 <!-- Testing: rotate() wraps large positive values correctly -->
18759 <canvas id="c590" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18760 <script>
18761
18762
18763 function test_2d_transformation_rotate_wrap() {
18764
18765 var canvas = document.getElementById('c590');
18766 var ctx = canvas.getContext('2d');
18767
18768 ctx.fillStyle = '#f00';
18769 ctx.fillRect(0, 0, 100, 50);
18770
18771 ctx.rotate(Math.PI * (1 + 4096)); // == pi (mod 2*pi)
18772 // We need about pi +/- 0.001 in order to get correct-looking results
18773 // 32-bit floats can store pi*4097 with precision 2^-10, so that should
18774 // be safe enough on reasonable implementations
18775 ctx.fillStyle = '#0f0';
18776 ctx.fillRect(-100, -50, 100, 50);
18777 isPixel(ctx, 50,25, 0,255,0,255, 0);
18778 isPixel(ctx, 98,2, 0,255,0,255, 0);
18779 isPixel(ctx, 98,47, 0,255,0,255, 0);
18780
18781
18782 }
18783 </script>
18784
18785 <!-- [[[ test_2d.transformation.rotate.wrapnegative.html ]]] -->
18786
18787 <p>Canvas test: 2d.transformation.rotate.wrapnegative</p>
18788 <!-- Testing: rotate() wraps large negative values correctly -->
18789 <canvas id="c591" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18790 <script>
18791
18792
18793 function test_2d_transformation_rotate_wrapnegative() {
18794
18795 var canvas = document.getElementById('c591');
18796 var ctx = canvas.getContext('2d');
18797
18798 ctx.fillStyle = '#f00';
18799 ctx.fillRect(0, 0, 100, 50);
18800
18801 ctx.rotate(-Math.PI * (1 + 4096));
18802 ctx.fillStyle = '#0f0';
18803 ctx.fillRect(-100, -50, 100, 50);
18804 isPixel(ctx, 50,25, 0,255,0,255, 0);
18805 isPixel(ctx, 98,2, 0,255,0,255, 0);
18806 isPixel(ctx, 98,47, 0,255,0,255, 0);
18807
18808
18809 }
18810 </script>
18811
18812 <!-- [[[ test_2d.transformation.rotate.zero.html ]]] -->
18813
18814 <p>Canvas test: 2d.transformation.rotate.zero</p>
18815 <!-- Testing: rotate() by 0 does nothing -->
18816 <canvas id="c592" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18817 <script>
18818
18819
18820 function test_2d_transformation_rotate_zero() {
18821
18822 var canvas = document.getElementById('c592');
18823 var ctx = canvas.getContext('2d');
18824
18825 ctx.fillStyle = '#f00';
18826 ctx.fillRect(0, 0, 100, 50);
18827
18828 ctx.rotate(0);
18829 ctx.fillStyle = '#0f0';
18830 ctx.fillRect(0, 0, 100, 50);
18831 isPixel(ctx, 50,25, 0,255,0,255, 0);
18832
18833
18834 }
18835 </script>
18836
18837 <!-- [[[ test_2d.transformation.scale.basic.html ]]] -->
18838
18839 <p>Canvas test: 2d.transformation.scale.basic</p>
18840 <!-- Testing: scale() works -->
18841 <canvas id="c593" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18842 <script>
18843
18844
18845 function test_2d_transformation_scale_basic() {
18846
18847 var canvas = document.getElementById('c593');
18848 var ctx = canvas.getContext('2d');
18849
18850 ctx.fillStyle = '#f00';
18851 ctx.fillRect(0, 0, 100, 50);
18852
18853 ctx.scale(2, 4);
18854 ctx.fillStyle = '#0f0';
18855 ctx.fillRect(0, 0, 50, 12.5);
18856 isPixel(ctx, 90,40, 0,255,0,255, 0);
18857
18858
18859 }
18860 </script>
18861
18862 <!-- [[[ test_2d.transformation.scale.large.html ]]] -->
18863
18864 <p>Canvas test: 2d.transformation.scale.large</p>
18865 <!-- Testing: scale() with large scale factors works -->
18866 <canvas id="c594" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18867 <script>
18868
18869
18870 function test_2d_transformation_scale_large() {
18871
18872 var canvas = document.getElementById('c594');
18873 var ctx = canvas.getContext('2d');
18874
18875 ctx.fillStyle = '#f00';
18876 ctx.fillRect(0, 0, 100, 50);
18877
18878 ctx.scale(1e5, 1e5);
18879 ctx.fillStyle = '#0f0';
18880 ctx.fillRect(0, 0, 1, 1);
18881 isPixel(ctx, 50,25, 0,255,0,255, 0);
18882
18883
18884 }
18885 </script>
18886
18887 <!-- [[[ test_2d.transformation.scale.multiple.html ]]] -->
18888
18889 <p>Canvas test: 2d.transformation.scale.multiple</p>
18890 <!-- Testing: Multiple scale()s combine -->
18891 <canvas id="c595" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18892 <script>
18893
18894
18895 function test_2d_transformation_scale_multiple() {
18896
18897 var canvas = document.getElementById('c595');
18898 var ctx = canvas.getContext('2d');
18899
18900 ctx.fillStyle = '#f00';
18901 ctx.fillRect(0, 0, 100, 50);
18902
18903 ctx.scale(Math.sqrt(2), Math.sqrt(2));
18904 ctx.scale(Math.sqrt(2), Math.sqrt(2));
18905 ctx.fillStyle = '#0f0';
18906 ctx.fillRect(0, 0, 50, 25);
18907 isPixel(ctx, 90,40, 0,255,0,255, 0);
18908
18909
18910 }
18911 </script>
18912
18913 <!-- [[[ test_2d.transformation.scale.negative.html ]]] -->
18914
18915 <p>Canvas test: 2d.transformation.scale.negative</p>
18916 <!-- Testing: scale() with negative scale factors works -->
18917 <canvas id="c596" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18918 <script>
18919
18920
18921 function test_2d_transformation_scale_negative() {
18922
18923 var canvas = document.getElementById('c596');
18924 var ctx = canvas.getContext('2d');
18925
18926 ctx.fillStyle = '#f00';
18927 ctx.fillRect(0, 0, 100, 50);
18928
18929 ctx.save();
18930 ctx.scale(-1, 1);
18931 ctx.fillStyle = '#0f0';
18932 ctx.fillRect(-50, 0, 50, 50);
18933 ctx.restore();
18934
18935 ctx.save();
18936 ctx.scale(1, -1);
18937 ctx.fillStyle = '#0f0';
18938 ctx.fillRect(50, -50, 50, 50);
18939 ctx.restore();
18940 isPixel(ctx, 25,25, 0,255,0,255, 0);
18941 isPixel(ctx, 75,25, 0,255,0,255, 0);
18942
18943
18944 }
18945 </script>
18946
18947 <!-- [[[ test_2d.transformation.scale.nonfinite.html ]]] -->
18948
18949 <p>Canvas test: 2d.transformation.scale.nonfinite</p>
18950 <!-- Testing: scale() with Infinity/NaN is ignored -->
18951 <canvas id="c597" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18952 <script>
18953
18954
18955 function test_2d_transformation_scale_nonfinite() {
18956
18957 var canvas = document.getElementById('c597');
18958 var ctx = canvas.getContext('2d');
18959
18960 var _thrown_outer = false;
18961 try {
18962
18963 ctx.fillStyle = '#f00';
18964 ctx.fillRect(0, 0, 100, 50);
18965
18966 ctx.translate(100, 10);
18967 ctx.scale(Infinity, 0.1);
18968 ctx.scale(-Infinity, 0.1);
18969 ctx.scale(NaN, 0.1);
18970 ctx.scale(0.1, Infinity);
18971 ctx.scale(0.1, -Infinity);
18972 ctx.scale(0.1, NaN);
18973 ctx.scale(Infinity, Infinity);
18974
18975 ctx.fillStyle = '#0f0';
18976 ctx.fillRect(-100, -10, 100, 50);
18977
18978 isPixel(ctx, 50,25, 0,255,0,255, 0);
18979
18980 } catch (e) {
18981 _thrown_outer = true;
18982 }
18983 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
18984
18985
18986 }
18987 </script>
18988
18989 <!-- [[[ test_2d.transformation.scale.zero.html ]]] -->
18990
18991 <p>Canvas test: 2d.transformation.scale.zero</p>
18992 <!-- Testing: scale() with a scale factor of zero works -->
18993 <canvas id="c598" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18994 <script>
18995
18996
18997 function test_2d_transformation_scale_zero() {
18998
18999 var canvas = document.getElementById('c598');
19000 var ctx = canvas.getContext('2d');
19001
19002 ctx.fillStyle = '#0f0';
19003 ctx.fillRect(0, 0, 100, 50);
19004
19005 ctx.save();
19006 ctx.translate(50, 0);
19007 ctx.scale(0, 1);
19008 ctx.fillStyle = '#f00';
19009 ctx.fillRect(0, 0, 100, 50);
19010 ctx.restore();
19011
19012 ctx.save();
19013 ctx.translate(0, 25);
19014 ctx.scale(1, 0);
19015 ctx.fillStyle = '#f00';
19016 ctx.fillRect(0, 0, 100, 50);
19017 ctx.restore();
19018 isPixel(ctx, 50,25, 0,255,0,255, 0);
19019
19020
19021 }
19022 </script>
19023
19024 <!-- [[[ test_2d.transformation.setTransform.multiple.html ]]] -->
19025
19026 <p>Canvas test: 2d.transformation.setTransform.multiple</p>
19027 <canvas id="c599" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19028 <script>
19029
19030
19031 function test_2d_transformation_setTransform_multiple() {
19032
19033 var canvas = document.getElementById('c599');
19034 var ctx = canvas.getContext('2d');
19035
19036 ctx.fillStyle = '#f00';
19037 ctx.fillRect(0, 0, 100, 50);
19038
19039 ctx.setTransform(1/2,0, 0,1/2, 0,0);
19040 ctx.setTransform(2,0, 0,2, 0,0);
19041 ctx.fillStyle = '#0f0';
19042 ctx.fillRect(0, 0, 50, 25);
19043 isPixel(ctx, 75,35, 0,255,0,255, 0);
19044
19045
19046 }
19047 </script>
19048
19049 <!-- [[[ test_2d.transformation.setTransform.nonfinite.html ]]] -->
19050
19051 <p>Canvas test: 2d.transformation.setTransform.nonfinite</p>
19052 <!-- Testing: setTransform() with Infinity/NaN is ignored -->
19053 <canvas id="c600" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19054 <script>
19055
19056
19057 function test_2d_transformation_setTransform_nonfinite() {
19058
19059 var canvas = document.getElementById('c600');
19060 var ctx = canvas.getContext('2d');
19061
19062 var _thrown_outer = false;
19063 try {
19064
19065 ctx.fillStyle = '#f00';
19066 ctx.fillRect(0, 0, 100, 50);
19067
19068 ctx.translate(100, 10);
19069 ctx.setTransform(Infinity, 0, 0, 0, 0, 0);
19070 ctx.setTransform(-Infinity, 0, 0, 0, 0, 0);
19071 ctx.setTransform(NaN, 0, 0, 0, 0, 0);
19072 ctx.setTransform(0, Infinity, 0, 0, 0, 0);
19073 ctx.setTransform(0, -Infinity, 0, 0, 0, 0);
19074 ctx.setTransform(0, NaN, 0, 0, 0, 0);
19075 ctx.setTransform(0, 0, Infinity, 0, 0, 0);
19076 ctx.setTransform(0, 0, -Infinity, 0, 0, 0);
19077 ctx.setTransform(0, 0, NaN, 0, 0, 0);
19078 ctx.setTransform(0, 0, 0, Infinity, 0, 0);
19079 ctx.setTransform(0, 0, 0, -Infinity, 0, 0);
19080 ctx.setTransform(0, 0, 0, NaN, 0, 0);
19081 ctx.setTransform(0, 0, 0, 0, Infinity, 0);
19082 ctx.setTransform(0, 0, 0, 0, -Infinity, 0);
19083 ctx.setTransform(0, 0, 0, 0, NaN, 0);
19084 ctx.setTransform(0, 0, 0, 0, 0, Infinity);
19085 ctx.setTransform(0, 0, 0, 0, 0, -Infinity);
19086 ctx.setTransform(0, 0, 0, 0, 0, NaN);
19087 ctx.setTransform(Infinity, Infinity, 0, 0, 0, 0);
19088 ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, 0);
19089 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, 0);
19090 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
19091 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
19092 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
19093 ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, 0);
19094 ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
19095 ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, Infinity);
19096 ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, 0);
19097 ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, 0);
19098 ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
19099 ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, Infinity);
19100 ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, 0);
19101 ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, Infinity);
19102 ctx.setTransform(Infinity, Infinity, 0, 0, 0, Infinity);
19103 ctx.setTransform(Infinity, 0, Infinity, 0, 0, 0);
19104 ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, 0);
19105 ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, 0);
19106 ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
19107 ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, Infinity);
19108 ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, 0);
19109 ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, Infinity);
19110 ctx.setTransform(Infinity, 0, Infinity, 0, 0, Infinity);
19111 ctx.setTransform(Infinity, 0, 0, Infinity, 0, 0);
19112 ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, 0);
19113 ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, Infinity);
19114 ctx.setTransform(Infinity, 0, 0, Infinity, 0, Infinity);
19115 ctx.setTransform(Infinity, 0, 0, 0, Infinity, 0);
19116 ctx.setTransform(Infinity, 0, 0, 0, Infinity, Infinity);
19117 ctx.setTransform(Infinity, 0, 0, 0, 0, Infinity);
19118 ctx.setTransform(0, Infinity, Infinity, 0, 0, 0);
19119 ctx.setTransform(0, Infinity, Infinity, Infinity, 0, 0);
19120 ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, 0);
19121 ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
19122 ctx.setTransform(0, Infinity, Infinity, Infinity, 0, Infinity);
19123 ctx.setTransform(0, Infinity, Infinity, 0, Infinity, 0);
19124 ctx.setTransform(0, Infinity, Infinity, 0, Infinity, Infinity);
19125 ctx.setTransform(0, Infinity, Infinity, 0, 0, Infinity);
19126 ctx.setTransform(0, Infinity, 0, Infinity, 0, 0);
19127 ctx.setTransform(0, Infinity, 0, Infinity, Infinity, 0);
19128 ctx.setTransform(0, Infinity, 0, Infinity, Infinity, Infinity);
19129 ctx.setTransform(0, Infinity, 0, Infinity, 0, Infinity);
19130 ctx.setTransform(0, Infinity, 0, 0, Infinity, 0);
19131 ctx.setTransform(0, Infinity, 0, 0, Infinity, Infinity);
19132 ctx.setTransform(0, Infinity, 0, 0, 0, Infinity);
19133 ctx.setTransform(0, 0, Infinity, Infinity, 0, 0);
19134 ctx.setTransform(0, 0, Infinity, Infinity, Infinity, 0);
19135 ctx.setTransform(0, 0, Infinity, Infinity, Infinity, Infinity);
19136 ctx.setTransform(0, 0, Infinity, Infinity, 0, Infinity);
19137 ctx.setTransform(0, 0, Infinity, 0, Infinity, 0);
19138 ctx.setTransform(0, 0, Infinity, 0, Infinity, Infinity);
19139 ctx.setTransform(0, 0, Infinity, 0, 0, Infinity);
19140 ctx.setTransform(0, 0, 0, Infinity, Infinity, 0);
19141 ctx.setTransform(0, 0, 0, Infinity, Infinity, Infinity);
19142 ctx.setTransform(0, 0, 0, Infinity, 0, Infinity);
19143 ctx.setTransform(0, 0, 0, 0, Infinity, Infinity);
19144
19145 ctx.fillStyle = '#0f0';
19146 ctx.fillRect(-100, -10, 100, 50);
19147
19148 isPixel(ctx, 50,25, 0,255,0,255, 0);
19149
19150 } catch (e) {
19151 _thrown_outer = true;
19152 }
19153 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19154
19155
19156 }
19157 </script>
19158
19159 <!-- [[[ test_2d.transformation.setTransform.skewed.html ]]] -->
19160
19161 <p>Canvas test: 2d.transformation.setTransform.skewed</p>
19162 <canvas id="c601" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19163 <script>
19164
19165
19166 function test_2d_transformation_setTransform_skewed() {
19167
19168 var canvas = document.getElementById('c601');
19169 var ctx = canvas.getContext('2d');
19170
19171 // Create green with a red square ring inside it
19172 ctx.fillStyle = '#0f0';
19173 ctx.fillRect(0, 0, 100, 50);
19174 ctx.fillStyle = '#f00';
19175 ctx.fillRect(20, 10, 60, 30);
19176 ctx.fillStyle = '#0f0';
19177 ctx.fillRect(40, 20, 20, 10);
19178
19179 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly
19180 ctx.setTransform(1,4, 2,3, 5,6);
19181 // Post-transform coordinates:
19182 // [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
19183 // Hence pre-transform coordinates:
19184 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
19185 [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
19186 [-7.4,11.2]];
19187 ctx.beginPath();
19188 ctx.moveTo(pts[0][0], pts[0][1]);
19189 for (var i = 0; i < pts.length; ++i)
19190 ctx.lineTo(pts[i][0], pts[i][1]);
19191 ctx.fill();
19192 isPixel(ctx, 21,11, 0,255,0,255, 0);
19193 isPixel(ctx, 79,11, 0,255,0,255, 0);
19194 isPixel(ctx, 21,39, 0,255,0,255, 0);
19195 isPixel(ctx, 79,39, 0,255,0,255, 0);
19196 isPixel(ctx, 39,19, 0,255,0,255, IsAzureSkia() ? 1 : 0);
19197 isPixel(ctx, 61,19, 0,255,0,255, 0);
19198 isPixel(ctx, 39,31, 0,255,0,255, 0);
19199 isPixel(ctx, 61,31, 0,255,0,255, 0);
19200
19201
19202 }
19203 </script>
19204
19205 <!-- [[[ test_2d.transformation.transform.identity.html ]]] -->
19206
19207 <p>Canvas test: 2d.transformation.transform.identity</p>
19208 <!-- Testing: transform() with the identity matrix does nothing -->
19209 <canvas id="c602" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19210 <script>
19211
19212
19213 function test_2d_transformation_transform_identity() {
19214
19215 var canvas = document.getElementById('c602');
19216 var ctx = canvas.getContext('2d');
19217
19218 ctx.fillStyle = '#f00';
19219 ctx.fillRect(0, 0, 100, 50);
19220
19221 ctx.transform(1,0, 0,1, 0,0);
19222 ctx.fillStyle = '#0f0';
19223 ctx.fillRect(0, 0, 100, 50);
19224 isPixel(ctx, 50,25, 0,255,0,255, 0);
19225
19226
19227 }
19228 </script>
19229
19230 <!-- [[[ test_2d.transformation.transform.multiply.html ]]] -->
19231
19232 <p>Canvas test: 2d.transformation.transform.multiply</p>
19233 <!-- Testing: transform() multiplies the CTM -->
19234 <canvas id="c603" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19235 <script>
19236
19237
19238 function test_2d_transformation_transform_multiply() {
19239
19240 var canvas = document.getElementById('c603');
19241 var ctx = canvas.getContext('2d');
19242
19243 ctx.fillStyle = '#f00';
19244 ctx.fillRect(0, 0, 100, 50);
19245
19246 ctx.transform(1,2, 3,4, 5,6);
19247 ctx.transform(-2,1, 3/2,-1/2, 1,-2);
19248 ctx.fillStyle = '#0f0';
19249 ctx.fillRect(0, 0, 100, 50);
19250 isPixel(ctx, 50,25, 0,255,0,255, 0);
19251
19252
19253 }
19254 </script>
19255
19256 <!-- [[[ test_2d.transformation.transform.nonfinite.html ]]] -->
19257
19258 <p>Canvas test: 2d.transformation.transform.nonfinite</p>
19259 <!-- Testing: transform() with Infinity/NaN is ignored -->
19260 <canvas id="c604" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19261 <script>
19262
19263
19264 function test_2d_transformation_transform_nonfinite() {
19265
19266 var canvas = document.getElementById('c604');
19267 var ctx = canvas.getContext('2d');
19268
19269 var _thrown_outer = false;
19270 try {
19271
19272 ctx.fillStyle = '#f00';
19273 ctx.fillRect(0, 0, 100, 50);
19274
19275 ctx.translate(100, 10);
19276 ctx.transform(Infinity, 0, 0, 0, 0, 0);
19277 ctx.transform(-Infinity, 0, 0, 0, 0, 0);
19278 ctx.transform(NaN, 0, 0, 0, 0, 0);
19279 ctx.transform(0, Infinity, 0, 0, 0, 0);
19280 ctx.transform(0, -Infinity, 0, 0, 0, 0);
19281 ctx.transform(0, NaN, 0, 0, 0, 0);
19282 ctx.transform(0, 0, Infinity, 0, 0, 0);
19283 ctx.transform(0, 0, -Infinity, 0, 0, 0);
19284 ctx.transform(0, 0, NaN, 0, 0, 0);
19285 ctx.transform(0, 0, 0, Infinity, 0, 0);
19286 ctx.transform(0, 0, 0, -Infinity, 0, 0);
19287 ctx.transform(0, 0, 0, NaN, 0, 0);
19288 ctx.transform(0, 0, 0, 0, Infinity, 0);
19289 ctx.transform(0, 0, 0, 0, -Infinity, 0);
19290 ctx.transform(0, 0, 0, 0, NaN, 0);
19291 ctx.transform(0, 0, 0, 0, 0, Infinity);
19292 ctx.transform(0, 0, 0, 0, 0, -Infinity);
19293 ctx.transform(0, 0, 0, 0, 0, NaN);
19294 ctx.transform(Infinity, Infinity, 0, 0, 0, 0);
19295 ctx.transform(Infinity, Infinity, Infinity, 0, 0, 0);
19296 ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, 0);
19297 ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
19298 ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
19299 ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
19300 ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, 0);
19301 ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
19302 ctx.transform(Infinity, Infinity, Infinity, 0, 0, Infinity);
19303 ctx.transform(Infinity, Infinity, 0, Infinity, 0, 0);
19304 ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, 0);
19305 ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
19306 ctx.transform(Infinity, Infinity, 0, Infinity, 0, Infinity);
19307 ctx.transform(Infinity, Infinity, 0, 0, Infinity, 0);
19308 ctx.transform(Infinity, Infinity, 0, 0, Infinity, Infinity);
19309 ctx.transform(Infinity, Infinity, 0, 0, 0, Infinity);
19310 ctx.transform(Infinity, 0, Infinity, 0, 0, 0);
19311 ctx.transform(Infinity, 0, Infinity, Infinity, 0, 0);
19312 ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, 0);
19313 ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
19314 ctx.transform(Infinity, 0, Infinity, Infinity, 0, Infinity);
19315 ctx.transform(Infinity, 0, Infinity, 0, Infinity, 0);
19316 ctx.transform(Infinity, 0, Infinity, 0, Infinity, Infinity);
19317 ctx.transform(Infinity, 0, Infinity, 0, 0, Infinity);
19318 ctx.transform(Infinity, 0, 0, Infinity, 0, 0);
19319 ctx.transform(Infinity, 0, 0, Infinity, Infinity, 0);
19320 ctx.transform(Infinity, 0, 0, Infinity, Infinity, Infinity);
19321 ctx.transform(Infinity, 0, 0, Infinity, 0, Infinity);
19322 ctx.transform(Infinity, 0, 0, 0, Infinity, 0);
19323 ctx.transform(Infinity, 0, 0, 0, Infinity, Infinity);
19324 ctx.transform(Infinity, 0, 0, 0, 0, Infinity);
19325 ctx.transform(0, Infinity, Infinity, 0, 0, 0);
19326 ctx.transform(0, Infinity, Infinity, Infinity, 0, 0);
19327 ctx.transform(0, Infinity, Infinity, Infinity, Infinity, 0);
19328 ctx.transform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
19329 ctx.transform(0, Infinity, Infinity, Infinity, 0, Infinity);
19330 ctx.transform(0, Infinity, Infinity, 0, Infinity, 0);
19331 ctx.transform(0, Infinity, Infinity, 0, Infinity, Infinity);
19332 ctx.transform(0, Infinity, Infinity, 0, 0, Infinity);
19333 ctx.transform(0, Infinity, 0, Infinity, 0, 0);
19334 ctx.transform(0, Infinity, 0, Infinity, Infinity, 0);
19335 ctx.transform(0, Infinity, 0, Infinity, Infinity, Infinity);
19336 ctx.transform(0, Infinity, 0, Infinity, 0, Infinity);
19337 ctx.transform(0, Infinity, 0, 0, Infinity, 0);
19338 ctx.transform(0, Infinity, 0, 0, Infinity, Infinity);
19339 ctx.transform(0, Infinity, 0, 0, 0, Infinity);
19340 ctx.transform(0, 0, Infinity, Infinity, 0, 0);
19341 ctx.transform(0, 0, Infinity, Infinity, Infinity, 0);
19342 ctx.transform(0, 0, Infinity, Infinity, Infinity, Infinity);
19343 ctx.transform(0, 0, Infinity, Infinity, 0, Infinity);
19344 ctx.transform(0, 0, Infinity, 0, Infinity, 0);
19345 ctx.transform(0, 0, Infinity, 0, Infinity, Infinity);
19346 ctx.transform(0, 0, Infinity, 0, 0, Infinity);
19347 ctx.transform(0, 0, 0, Infinity, Infinity, 0);
19348 ctx.transform(0, 0, 0, Infinity, Infinity, Infinity);
19349 ctx.transform(0, 0, 0, Infinity, 0, Infinity);
19350 ctx.transform(0, 0, 0, 0, Infinity, Infinity);
19351
19352 ctx.fillStyle = '#0f0';
19353 ctx.fillRect(-100, -10, 100, 50);
19354
19355 isPixel(ctx, 50,25, 0,255,0,255, 0);
19356
19357 } catch (e) {
19358 _thrown_outer = true;
19359 }
19360 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19361
19362
19363 }
19364 </script>
19365
19366 <!-- [[[ test_2d.transformation.transform.skewed.html ]]] -->
19367
19368 <p>Canvas test: 2d.transformation.transform.skewed</p>
19369 <!-- Testing: transform() with skewy matrix transforms correctly -->
19370 <canvas id="c605" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19371 <script>
19372
19373
19374 function test_2d_transformation_transform_skewed() {
19375
19376 var canvas = document.getElementById('c605');
19377 var ctx = canvas.getContext('2d');
19378
19379 // Create green with a red square ring inside it
19380 ctx.fillStyle = '#0f0';
19381 ctx.fillRect(0, 0, 100, 50);
19382 ctx.fillStyle = '#f00';
19383 ctx.fillRect(20, 10, 60, 30);
19384 ctx.fillStyle = '#0f0';
19385 ctx.fillRect(40, 20, 20, 10);
19386
19387 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly
19388 ctx.transform(1,4, 2,3, 5,6);
19389 // Post-transform coordinates:
19390 // [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
19391 // Hence pre-transform coordinates:
19392 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
19393 [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
19394 [-7.4,11.2]];
19395 ctx.beginPath();
19396 ctx.moveTo(pts[0][0], pts[0][1]);
19397 for (var i = 0; i < pts.length; ++i)
19398 ctx.lineTo(pts[i][0], pts[i][1]);
19399 ctx.fill();
19400 isPixel(ctx, 21,11, 0,255,0,255, 0);
19401 isPixel(ctx, 79,11, 0,255,0,255, 0);
19402 isPixel(ctx, 21,39, 0,255,0,255, 0);
19403 isPixel(ctx, 79,39, 0,255,0,255, 0);
19404 isPixel(ctx, 39,19, 0,255,0,255, IsAzureSkia() ? 1 : 0);
19405 isPixel(ctx, 61,19, 0,255,0,255, 0);
19406 isPixel(ctx, 39,31, 0,255,0,255, 0);
19407 isPixel(ctx, 61,31, 0,255,0,255, 0);
19408
19409
19410 }
19411 </script>
19412
19413 <!-- [[[ test_2d.transformation.translate.basic.html ]]] -->
19414
19415 <p>Canvas test: 2d.transformation.translate.basic</p>
19416 <!-- Testing: translate() works -->
19417 <canvas id="c606" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19418 <script>
19419
19420
19421 function test_2d_transformation_translate_basic() {
19422
19423 var canvas = document.getElementById('c606');
19424 var ctx = canvas.getContext('2d');
19425
19426 ctx.fillStyle = '#f00';
19427 ctx.fillRect(0, 0, 100, 50);
19428
19429 ctx.translate(100, 50);
19430 ctx.fillStyle = '#0f0';
19431 ctx.fillRect(-100, -50, 100, 50);
19432 isPixel(ctx, 90,40, 0,255,0,255, 0);
19433
19434
19435 }
19436 </script>
19437
19438 <!-- [[[ test_2d.transformation.translate.nonfinite.html ]]] -->
19439
19440 <p>Canvas test: 2d.transformation.translate.nonfinite</p>
19441 <!-- Testing: translate() with Infinity/NaN is ignored -->
19442 <canvas id="c607" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19443 <script>
19444
19445
19446 function test_2d_transformation_translate_nonfinite() {
19447
19448 var canvas = document.getElementById('c607');
19449 var ctx = canvas.getContext('2d');
19450
19451 var _thrown_outer = false;
19452 try {
19453
19454 ctx.fillStyle = '#f00';
19455 ctx.fillRect(0, 0, 100, 50);
19456
19457 ctx.translate(100, 10);
19458 ctx.translate(Infinity, 0.1);
19459 ctx.translate(-Infinity, 0.1);
19460 ctx.translate(NaN, 0.1);
19461 ctx.translate(0.1, Infinity);
19462 ctx.translate(0.1, -Infinity);
19463 ctx.translate(0.1, NaN);
19464 ctx.translate(Infinity, Infinity);
19465
19466 ctx.fillStyle = '#0f0';
19467 ctx.fillRect(-100, -10, 100, 50);
19468
19469 isPixel(ctx, 50,25, 0,255,0,255, 0);
19470
19471 } catch (e) {
19472 _thrown_outer = true;
19473 }
19474 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19475
19476
19477 }
19478 </script>
19479
19480 <!-- [[[ test_2d.type.exists.html ]]] -->
19481
19482 <p>Canvas test: 2d.type.exists</p>
19483 <!-- Testing: The 2D context interface is a property of 'window' -->
19484 <canvas id="c609" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19485 <script>
19486
19487 function test_2d_type_exists() {
19488
19489 var canvas = document.getElementById('c609');
19490 var ctx = canvas.getContext('2d');
19491
19492 ok(window.CanvasRenderingContext2D, "window.CanvasRenderingContext2D");
19493
19494
19495 }
19496 </script>
19497
19498 <!-- [[[ test_2d.type.extend.html ]]] -->
19499
19500 <p>Canvas test: 2d.type.extend</p>
19501 <!-- Testing: Interface methods can be added -->
19502 <canvas id="c610" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19503 <script>
19504
19505
19506 function test_2d_type_extend() {
19507
19508 var canvas = document.getElementById('c610');
19509 var ctx = canvas.getContext('2d');
19510
19511 window.CanvasRenderingContext2D.prototype.fillRectGreen = function (x, y, w, h)
19512 {
19513 this.fillStyle = '#0f0';
19514 this.fillRect(x, y, w, h);
19515 };
19516 ctx.fillStyle = '#f00';
19517 ctx.fillRectGreen(0, 0, 100, 50);
19518 isPixel(ctx, 50,25, 0,255,0,255, 0);
19519
19520
19521 }
19522 </script>
19523
19524 <!-- [[[ test_2d.type.prototype.html ]]] -->
19525
19526 <p>Canvas test: 2d.type.prototype</p>
19527 <!-- Testing: window.CanvasRenderingContext2D.prototype is { DontDelete, ReadOnly }, and its methods are not -->
19528 <canvas id="c611" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19529 <script>
19530
19531 function test_2d_type_prototype() {
19532
19533 var canvas = document.getElementById('c611');
19534 var ctx = canvas.getContext('2d');
19535
19536 var fill = window.CanvasRenderingContext2D.prototype.fill;
19537 ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
19538 ok(window.CanvasRenderingContext2D.prototype.fill, "window.CanvasRenderingContext2D.prototype.fill");
19539 window.CanvasRenderingContext2D.prototype = null;
19540 ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
19541 delete window.CanvasRenderingContext2D.prototype;
19542 ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
19543 window.CanvasRenderingContext2D.prototype.fill = 1;
19544 ok(window.CanvasRenderingContext2D.prototype.fill === 1, "window.CanvasRenderingContext2D.prototype.fill === 1");
19545 delete window.CanvasRenderingContext2D.prototype.fill;
19546 ok(window.CanvasRenderingContext2D.prototype.fill === undefined, "window.CanvasRenderingContext2D.prototype.fill === undefined");
19547
19548 //restore the original method to ensure that other tests can run successfully
19549 window.CanvasRenderingContext2D.prototype.fill = fill;
19550 }
19551 </script>
19552
19553 <!-- [[[ test_2d.type.replace.html ]]] -->
19554
19555 <p>Canvas test: 2d.type.replace</p>
19556 <!-- Testing: Interface methods can be overridden -->
19557 <canvas id="c612" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19558 <script>
19559
19560
19561 function test_2d_type_replace() {
19562
19563 var canvas = document.getElementById('c612');
19564 var ctx = canvas.getContext('2d');
19565
19566 var fillRect = window.CanvasRenderingContext2D.prototype.fillRect;
19567 window.CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h)
19568 {
19569 this.fillStyle = '#0f0';
19570 fillRect.call(this, x, y, w, h);
19571 };
19572 ctx.fillStyle = '#f00';
19573 ctx.fillRect(0, 0, 100, 50);
19574 isPixel(ctx, 50,25, 0,255,0,255, 0);
19575
19576 //restore the original method to ensure that other tests can run successfully
19577 window.CanvasRenderingContext2D.prototype.fillRect = fillRect;
19578 }
19579 </script>
19580
19581 <!-- [[[ test_2d.voidreturn.html ]]] -->
19582
19583 <p>Canvas test: 2d.voidreturn</p>
19584 <!-- Testing: void methods return undefined -->
19585 <canvas id="c613" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19586 <script>
19587
19588 function test_2d_voidreturn() {
19589
19590 var canvas = document.getElementById('c613');
19591 var ctx = canvas.getContext('2d');
19592
19593 ok(ctx.save() === undefined, "ctx.save() === undefined");
19594 ok(ctx.restore() === undefined, "ctx.restore() === undefined");
19595 ok(ctx.scale(1, 1) === undefined, "ctx.scale(1, 1) === undefined");
19596 ok(ctx.rotate(0) === undefined, "ctx.rotate(0) === undefined");
19597 ok(ctx.translate(0, 0) === undefined, "ctx.translate(0, 0) === undefined");
19598 if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
19599 ok(ctx.transform(1, 0, 0, 1, 0, 0) === undefined, "ctx.transform(1, 0, 0, 1, 0, 0) === undefined");
19600 }
19601 if (ctx.setTransform) {
19602 ok(ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined, "ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined");
19603 }
19604 ok(ctx.clearRect(0, 0, 0, 0) === undefined, "ctx.clearRect(0, 0, 0, 0) === undefined");
19605 ok(ctx.fillRect(0, 0, 0, 0) === undefined, "ctx.fillRect(0, 0, 0, 0) === undefined");
19606 ok(ctx.strokeRect(0, 0, 0, 0) === undefined, "ctx.strokeRect(0, 0, 0, 0) === undefined");
19607 ok(ctx.beginPath() === undefined, "ctx.beginPath() === undefined");
19608 ok(ctx.closePath() === undefined, "ctx.closePath() === undefined");
19609 ok(ctx.moveTo(0, 0) === undefined, "ctx.moveTo(0, 0) === undefined");
19610 ok(ctx.lineTo(0, 0) === undefined, "ctx.lineTo(0, 0) === undefined");
19611 ok(ctx.quadraticCurveTo(0, 0, 0, 0) === undefined, "ctx.quadraticCurveTo(0, 0, 0, 0) === undefined");
19612 ok(ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined, "ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined");
19613 ok(ctx.arcTo(0, 0, 0, 0, 1) === undefined, "ctx.arcTo(0, 0, 0, 0, 1) === undefined");
19614 ok(ctx.rect(0, 0, 0, 0) === undefined, "ctx.rect(0, 0, 0, 0) === undefined");
19615 ok(ctx.arc(0, 0, 1, 0, 0, true) === undefined, "ctx.arc(0, 0, 1, 0, 0, true) === undefined");
19616 ok(ctx.fill() === undefined, "ctx.fill() === undefined");
19617 ok(ctx.stroke() === undefined, "ctx.stroke() === undefined");
19618 ok(ctx.clip() === undefined, "ctx.clip() === undefined");
19619 if (ctx.putImageData) {
19620 ok(ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined, "ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined");
19621 }
19622 ok(ctx.drawImage(document.getElementById('yellow_11.png'), 0, 0, 1, 1, 0, 0, 0, 0) === undefined, "ctx.drawImage(document.getElementById('yellow_11.png'), 0, 0, 1, 1, 0, 0, 0, 0) === undefined");
19623 ok(ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0) === undefined, "ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0) === undefined");
19624 ok(ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined, "ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined");
19625
19626
19627 }
19628 </script>
19629 <img src="image_yellow.png" id="yellow_11.png" class="resource">
19630
19631 <!-- [[[ test_bug397524.html ]]] -->
19632
19633 <p>Test for Bug 397524</p>
19634 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=397524">Mozilla Bug 397524</a>
19635 <p id="display">
19636 <canvas id="canvas1" width="1" height="1"></canvas>
19637 <canvas id="canvas2" width="1" height="1"></canvas>
19638 <canvas id="canvas3" width="1" height="1"></canvas>
19639 <img id="i1", src="image_green-1x1.png">
19640 <img id="i2" src="http://example.com/tests/content/canvas/test/image_green-1x1.png">
19641 <img id="i3" src="image_green-redirect">
19642 </p>
19643 <div id="content" style="display: none">
19644
19645 </div>
19646 <pre id="test">
19647 <script class="testbody" type="text/javascript">
19648
19649 /** Test for Bug 397524 **/
19650
19651 function draw(n) {
19652 $("canvas" + n).getContext('2d').drawImage($("i" + n), 0, 0);
19653 }
19654
19655 function test_bug397524() {
19656 draw(1);
19657 draw(2);
19658 draw(3);
19659
19660 // Should be able to get the data out of the first canvas
19661 $("canvas1").toDataURL("image/png");
19662
19663 // Should not be able to get the data out of a cross-site load
19664 var gotData = false;
19665 try {
19666 $("canvas2").toDataURL("image/png");
19667 gotData = true;
19668 } catch (ex if (ex.code == 18 && ex.name == "SecurityError")) {
19669 }
19670 is(gotData, false, "Shouldn't be able to read images cross-site!");
19671
19672 // Should not be able to get the data out of a redirected cross-site load
19673 var gotData = false;
19674 try {
19675 $("canvas3").toDataURL("image/png");
19676 gotData = true;
19677 } catch (ex if (ex.code == 18 && ex.name == "SecurityError")) {
19678 }
19679 is(gotData, false, "Shouldn't be able to read images redirected cross-site!");
19680
19681 }
19682
19683 </script>
19684 </pre>
19685
19686 <!-- [[[ test_bug405982.html ]]] -->
19687
19688 <p>Canvas test: toDataURL.png</p>
19689 <canvas id="c614" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19690 <script>
19691 function test_bug405982() {
19692
19693 var canvas = SpecialPowers.wrap(document.getElementById('c614'));
19694 var ctx = canvas.getContext('2d');
19695
19696 var _threw = false;
19697 try {
19698 var data = canvas.toDataURL('image/png', 'quality=100');
19699 }
19700 catch (e) {
19701 _threw = true;
19702 }
19703 ok(!_threw, "Should not throw an exception for invalid args to png encoder");
19704
19705 _threw = false;
19706 try {
19707 var data = canvas.toDataURL('image/jpeg', 'foobar=true');
19708 }
19709 catch (e) {
19710 _threw = true;
19711 }
19712 ok(!_threw, "Should not throw an exception for invalid args to jpeg encoder");
19713
19714 }
19715 </script>
19716 <!-- [[[ test_context.arguments.extra.html ]]] -->
19717
19718 <p>Canvas test: context.arguments.extra</p>
19719 <canvas id="c615" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19720 <script>
19721
19722 function test_context_arguments_extra() {
19723
19724 var canvas = document.getElementById('c615');
19725 var ctx = canvas.getContext('2d');
19726
19727 ok(canvas.getContext('2d', 'foo') !== null, "canvas.getContext('2d', 'foo') !== null");
19728
19729
19730 }
19731 </script>
19732
19733 <!-- [[[ test_context.arguments.missing.html ]]] -->
19734
19735 <p>Canvas test: context.arguments.missing</p>
19736 <canvas id="c616" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19737 <script>
19738
19739 function test_context_arguments_missing() {
19740
19741 var canvas = document.getElementById('c616');
19742 var ctx = canvas.getContext('2d');
19743
19744 var _thrown = undefined; try {
19745 canvas.getContext();
19746 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
19747
19748
19749 }
19750 </script>
19751
19752 <!-- [[[ test_context.casesensitive.html ]]] -->
19753
19754 <p>Canvas test: context.casesensitive - bug 401788</p>
19755 <!-- Testing: Context name "2D" is unrecognised; matching is case sensitive -->
19756 <canvas id="c617" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19757 <script>
19758
19759 function test_context_casesensitive() {
19760
19761 var canvas = document.getElementById('c617');
19762 var ctx = canvas.getContext('2d');
19763
19764 var _thrown_outer = false;
19765 try {
19766
19767 ok(canvas.getContext('2D') === null, "canvas.getContext('2D') === null");
19768
19769 } catch (e) {
19770 _thrown_outer = true;
19771 }
19772 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19773
19774
19775 }
19776 </script>
19777
19778 <!-- [[[ test_context.emptystring.html ]]] -->
19779
19780 <p>Canvas test: context.emptystring - bug 401788</p>
19781 <!-- Testing: getContext with empty string returns null -->
19782 <canvas id="c618" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19783 <script>
19784
19785 function test_context_emptystring() {
19786
19787 var canvas = document.getElementById('c618');
19788 var ctx = canvas.getContext('2d');
19789
19790 var _thrown_outer = false;
19791 try {
19792
19793 ok(canvas.getContext("") === null, "canvas.getContext(\"\") === null");
19794
19795 } catch (e) {
19796 _thrown_outer = true;
19797 }
19798 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19799
19800
19801 }
19802 </script>
19803
19804 <!-- [[[ test_context.unrecognised.badname.html ]]] -->
19805
19806 <p>Canvas test: context.unrecognised.badname - bug 401788</p>
19807 <!-- Testing: getContext with unrecognised context name returns null -->
19808 <canvas id="c619" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19809 <script>
19810
19811 function test_context_unrecognised_badname() {
19812
19813 var canvas = document.getElementById('c619');
19814 var ctx = canvas.getContext('2d');
19815
19816 var _thrown_outer = false;
19817 try {
19818
19819 ok(canvas.getContext('This is not an implemented context in any real browser') === null, "canvas.getContext('This is not an implemented context in any real browser') === null");
19820
19821 } catch (e) {
19822 _thrown_outer = true;
19823 }
19824 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19825
19826
19827 }
19828 </script>
19829
19830 <!-- [[[ test_context.unrecognised.badsuffix.html ]]] -->
19831
19832 <p>Canvas test: context.unrecognised.badsuffix - bug 401788</p>
19833 <!-- Testing: Context name "2d" plus a suffix is unrecognised -->
19834 <canvas id="c620" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19835 <script>
19836
19837 function test_context_unrecognised_badsuffix() {
19838
19839 var canvas = document.getElementById('c620');
19840 var ctx = canvas.getContext('2d');
19841
19842 var _thrown_outer = false;
19843 try {
19844
19845 ok(canvas.getContext("2d#") === null, "canvas.getContext(\"2d#\") === null");
19846
19847 } catch (e) {
19848 _thrown_outer = true;
19849 }
19850 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19851
19852
19853 }
19854 </script>
19855
19856 <!-- [[[ test_context.unrecognised.nullsuffix.html ]]] -->
19857
19858 <p>Canvas test: context.unrecognised.nullsuffix - bug 401788</p>
19859 <!-- Testing: Context name "2d" plus a "\0" suffix is unrecognised -->
19860 <canvas id="c621" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19861 <script>
19862
19863 function test_context_unrecognised_nullsuffix() {
19864
19865 var canvas = document.getElementById('c621');
19866 var ctx = canvas.getContext('2d');
19867
19868 var _thrown_outer = false;
19869 try {
19870
19871 ok(canvas.getContext("2d\0") === null, "canvas.getContext(\"2d\\0\") === null");
19872
19873 } catch (e) {
19874 _thrown_outer = true;
19875 }
19876 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19877
19878
19879 }
19880 </script>
19881
19882 <!-- [[[ test_context.unrecognised.unicode.html ]]] -->
19883
19884 <p>Canvas test: context.unrecognised.unicode - bug 401788</p>
19885 <!-- Testing: Context name which kind of looks like "2d" is unrecognised -->
19886 <canvas id="c622" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19887 <script>
19888
19889 function test_context_unrecognised_unicode() {
19890
19891 var canvas = document.getElementById('c622');
19892 var ctx = canvas.getContext('2d');
19893
19894 var _thrown_outer = false;
19895 try {
19896
19897 ok(canvas.getContext("2\uFF44") === null, "canvas.getContext(\"2\\uFF44\") === null"); // Fullwidth Latin Small Letter D
19898
19899 } catch (e) {
19900 _thrown_outer = true;
19901 }
19902 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19903
19904
19905 }
19906 </script>
19907
19908 <!-- [[[ test_fallback.basic.html ]]] -->
19909
19910 <p>Canvas test: fallback.basic</p>
19911 <!-- Testing: Fallback content is inserted into the DOM -->
19912 <canvas id="c623" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19913 <script>
19914
19915 function test_fallback_basic() {
19916
19917 var canvas = document.getElementById('c623');
19918 var ctx = canvas.getContext('2d');
19919
19920 ok(canvas.childNodes.length == 1, "canvas.childNodes.length == 1");
19921
19922
19923 }
19924 </script>
19925
19926 <!-- [[[ test_fallback.multiple.html ]]] -->
19927
19928 <p>Canvas test: fallback.multiple</p>
19929 <!-- Testing: Fallback content with multiple elements -->
19930 <canvas id="c624" width="100" height="50"><p class="fallback">FAIL</p><p class="fallback">FAIL</p></canvas>
19931 <script>
19932
19933 function test_fallback_multiple() {
19934
19935 var canvas = document.getElementById('c624');
19936 var ctx = canvas.getContext('2d');
19937
19938 ok(canvas.childNodes.length == 2, "canvas.childNodes.length == 2");
19939
19940
19941 }
19942 </script>
19943
19944 <!-- [[[ test_fallback.nested.html ]]] -->
19945
19946 <p>Canvas test: fallback.nested</p>
19947 <!-- Testing: Fallback content containing another canvas (mostly testing parsers) -->
19948 <canvas id="c625" width="100" height="50"><canvas><p class="fallback">FAIL (fallback content)</p></canvas><p class="fallback">FAIL (fallback content)</p></canvas>
19949 <script>
19950
19951 function test_fallback_nested() {
19952
19953 var canvas = document.getElementById('c625');
19954 var ctx = canvas.getContext('2d');
19955
19956 ok(canvas.childNodes.length == 2, "canvas.childNodes.length == 2");
19957
19958
19959 }
19960 </script>
19961
19962 <!-- [[[ test_initial.colour.html ]]] -->
19963
19964 <p>Canvas test: initial.colour</p>
19965 <!-- Testing: Initial state is transparent black -->
19966 <canvas id="c626" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19967 <script>
19968
19969
19970 function test_initial_colour() {
19971
19972 var canvas = document.getElementById('c626');
19973 var ctx = canvas.getContext('2d');
19974
19975 isPixel(ctx, 20,20, 0,0,0,0, 0);
19976
19977
19978 }
19979 </script>
19980
19981 <!-- [[[ test_initial.reset.2dstate.html ]]] -->
19982
19983 <p>Canvas test: initial.reset.2dstate</p>
19984 <!-- Testing: Resetting the canvas state resets 2D state variables -->
19985 <canvas id="c627" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19986 <script>
19987
19988 function test_initial_reset_2dstate() {
19989
19990 var canvas = document.getElementById('c627');
19991 var ctx = canvas.getContext('2d');
19992
19993 canvas.width = 100;
19994 var default_val;
19995
19996 default_val = ctx.strokeStyle;
19997 ctx.strokeStyle = "#ff0000";
19998 canvas.width = 100;
19999 ok(ctx.strokeStyle === default_val, "ctx.strokeStyle === default_val");
20000
20001 default_val = ctx.fillStyle;
20002 ctx.fillStyle = "#ff0000";
20003 canvas.width = 100;
20004 ok(ctx.fillStyle === default_val, "ctx.fillStyle === default_val");
20005
20006 default_val = ctx.globalAlpha;
20007 ctx.globalAlpha = 0.5;
20008 canvas.width = 100;
20009 ok(ctx.globalAlpha === default_val, "ctx.globalAlpha === default_val");
20010
20011 default_val = ctx.lineWidth;
20012 ctx.lineWidth = 0.5;
20013 canvas.width = 100;
20014 ok(ctx.lineWidth === default_val, "ctx.lineWidth === default_val");
20015
20016 default_val = ctx.lineCap;
20017 ctx.lineCap = "round";
20018 canvas.width = 100;
20019 ok(ctx.lineCap === default_val, "ctx.lineCap === default_val");
20020
20021 default_val = ctx.lineJoin;
20022 ctx.lineJoin = "round";
20023 canvas.width = 100;
20024 ok(ctx.lineJoin === default_val, "ctx.lineJoin === default_val");
20025
20026 default_val = ctx.miterLimit;
20027 ctx.miterLimit = 0.5;
20028 canvas.width = 100;
20029 ok(ctx.miterLimit === default_val, "ctx.miterLimit === default_val");
20030
20031 default_val = ctx.shadowOffsetX;
20032 ctx.shadowOffsetX = 5;
20033 canvas.width = 100;
20034 ok(ctx.shadowOffsetX === default_val, "ctx.shadowOffsetX === default_val");
20035
20036 default_val = ctx.shadowOffsetY;
20037 ctx.shadowOffsetY = 5;
20038 canvas.width = 100;
20039 ok(ctx.shadowOffsetY === default_val, "ctx.shadowOffsetY === default_val");
20040
20041 default_val = ctx.shadowBlur;
20042 ctx.shadowBlur = 5;
20043 canvas.width = 100;
20044 ok(ctx.shadowBlur === default_val, "ctx.shadowBlur === default_val");
20045
20046 default_val = ctx.shadowColor;
20047 ctx.shadowColor = "#ff0000";
20048 canvas.width = 100;
20049 ok(ctx.shadowColor === default_val, "ctx.shadowColor === default_val");
20050
20051 default_val = ctx.globalCompositeOperation;
20052 ctx.globalCompositeOperation = "copy";
20053 canvas.width = 100;
20054 ok(ctx.globalCompositeOperation === default_val, "ctx.globalCompositeOperation === default_val");
20055
20056
20057 }
20058 </script>
20059
20060 <!-- [[[ test_initial.reset.clip.html ]]] -->
20061
20062 <p>Canvas test: initial.reset.clip</p>
20063 <!-- Testing: Resetting the canvas state resets the current clip region -->
20064 <canvas id="c628" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
20065 <script>
20066
20067
20068 function test_initial_reset_clip() {
20069
20070 var canvas = document.getElementById('c628');
20071 var ctx = canvas.getContext('2d');
20072
20073 canvas.width = 100;
20074 ctx.rect(0, 0, 1, 1);
20075 ctx.clip();
20076 canvas.width = 100;
20077 ctx.fillStyle = '#0f0';
20078 ctx.fillRect(0, 0, 100, 50);
20079 isPixel(ctx, 20,20, 0,255,0,255, 0);
20080
20081
20082 }
20083 </script>
20084
20085 <!-- [[[ test_initial.reset.different.html ]]] -->
20086
20087 <p>Canvas test: initial.reset.different</p>
20088 <!-- Testing: Changing size resets canvas to transparent black -->
20089 <canvas id="c629" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
20090 <script>
20091
20092
20093 function test_initial_reset_different() {
20094
20095 var canvas = document.getElementById('c629');
20096 var ctx = canvas.getContext('2d');
20097
20098 ctx.fillStyle = '#f00';
20099 ctx.fillRect(0, 0, 50, 50);
20100 isPixel(ctx, 20,20, 255,0,0,255, 0);
20101 canvas.width = 50;
20102 isPixel(ctx, 20,20, 0,0,0,0, 0);
20103
20104
20105 }
20106 </script>
20107
20108 <!-- [[[ test_initial.reset.gradient.html ]]] -->
20109
20110 <p>Canvas test: initial.reset.gradient</p>
20111 <!-- Testing: Resetting the canvas state does not invalidate any existing gradients -->
20112 <canvas id="c630" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20113 <script>
20114
20115
20116 function test_initial_reset_gradient() {
20117
20118 var canvas = document.getElementById('c630');
20119 var ctx = canvas.getContext('2d');
20120
20121 canvas.width = 50;
20122 var g = ctx.createLinearGradient(0, 0, 100, 0);
20123 g.addColorStop(0, '#0f0');
20124 g.addColorStop(1, '#0f0');
20125 canvas.width = 100;
20126 ctx.fillStyle = '#f00';
20127 ctx.fillRect(0, 0, 100, 50);
20128 ctx.fillStyle = g;
20129 ctx.fillRect(0, 0, 100, 50);
20130 isPixel(ctx, 50,25, 0,255,0,255, 0);
20131
20132
20133 }
20134 </script>
20135
20136 <!-- [[[ test_initial.reset.path.html ]]] -->
20137
20138 <p>Canvas test: initial.reset.path</p>
20139 <!-- Testing: Resetting the canvas state resets the current path -->
20140 <canvas id="c631" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
20141 <script>
20142
20143
20144 function test_initial_reset_path() {
20145
20146 var canvas = document.getElementById('c631');
20147 var ctx = canvas.getContext('2d');
20148
20149 canvas.width = 100;
20150 ctx.rect(0, 0, 100, 50);
20151 canvas.width = 100;
20152 ctx.fillStyle = '#f00';
20153 ctx.fill();
20154 isPixel(ctx, 20,20, 0,0,0,0, 0);
20155
20156
20157 }
20158 </script>
20159
20160 <!-- [[[ test_initial.reset.pattern.html ]]] -->
20161
20162 <p>Canvas test: initial.reset.pattern</p>
20163 <!-- Testing: Resetting the canvas state does not invalidate any existing patterns -->
20164 <canvas id="c632" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20165 <script>
20166
20167
20168 function test_initial_reset_pattern() {
20169
20170 var canvas = document.getElementById('c632');
20171 var ctx = canvas.getContext('2d');
20172
20173 canvas.width = 50;
20174 ctx.fillStyle = '#0f0';
20175 ctx.fillRect(0, 0, 50, 50);
20176 var p = ctx.createPattern(canvas, 'repeat-x');
20177 canvas.width = 100;
20178 ctx.fillStyle = '#f00';
20179 ctx.fillRect(0, 0, 100, 50);
20180 ctx.fillStyle = p;
20181 ctx.fillRect(0, 0, 100, 50);
20182 isPixel(ctx, 50,25, 0,255,0,255, 0);
20183
20184
20185 }
20186 </script>
20187
20188 <!-- [[[ test_initial.reset.same.html ]]] -->
20189
20190 <p>Canvas test: initial.reset.same</p>
20191 <!-- Testing: Setting size (not changing the value) resets canvas to transparent black -->
20192 <canvas id="c633" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
20193 <script>
20194
20195
20196 function test_initial_reset_same() {
20197
20198 var canvas = document.getElementById('c633');
20199 var ctx = canvas.getContext('2d');
20200
20201 canvas.width = 100;
20202 ctx.fillStyle = '#f00';
20203 ctx.fillRect(0, 0, 50, 50);
20204 isPixel(ctx, 20,20, 255,0,0,255, 0);
20205 canvas.width = 100;
20206 isPixel(ctx, 20,20, 0,0,0,0, 0);
20207
20208
20209 }
20210 </script>
20211
20212 <!-- [[[ test_initial.reset.transform.html ]]] -->
20213
20214 <p>Canvas test: initial.reset.transform</p>
20215 <!-- Testing: Resetting the canvas state resets the current transformation matrix -->
20216 <canvas id="c634" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20217 <script>
20218
20219
20220 function test_initial_reset_transform() {
20221
20222 var canvas = document.getElementById('c634');
20223 var ctx = canvas.getContext('2d');
20224
20225 canvas.width = 100;
20226 ctx.scale(0, 0);
20227 canvas.width = 100;
20228 ctx.fillStyle = '#0f0';
20229 ctx.fillRect(0, 0, 100, 50);
20230 isPixel(ctx, 20,20, 0,255,0,255, 0);
20231
20232
20233 }
20234 </script>
20235
20236 <!-- [[[ test_size.attributes.default.html ]]] -->
20237
20238 <p>Canvas test: size.attributes.default</p>
20239 <!-- Testing: Default width/height -->
20240 <canvas id="c635" ><p class="fallback">FAIL (fallback content)</p></canvas>
20241 <script>
20242
20243 function test_size_attributes_default() {
20244
20245 var canvas = document.getElementById('c635');
20246 var ctx = canvas.getContext('2d');
20247
20248 ok(canvas.width == 300, "canvas.width == 300");
20249 ok(canvas.height == 150, "canvas.height == 150");
20250 ok(!canvas.hasAttribute('width'), "!canvas.hasAttribute('width')");
20251 ok(!canvas.hasAttribute('height'), "!canvas.hasAttribute('height')");
20252
20253
20254 }
20255 </script>
20256
20257 <!-- [[[ test_size.attributes.html ]]] -->
20258
20259 <p>Canvas test: size.attributes</p>
20260 <!-- Testing: width/height DOM attributes and content attributes -->
20261 <canvas id="c636" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas>
20262 <script>
20263
20264 function test_size_attributes() {
20265
20266 var canvas = document.getElementById('c636');
20267 var ctx = canvas.getContext('2d');
20268
20269 ok(canvas.width == 120, "canvas.width == 120");
20270 ok(canvas.height == 60, "canvas.height == 60");
20271 ok(canvas.getAttribute('width') == 120, "canvas.getAttribute('width') == 120");
20272 ok(canvas.getAttribute('height') == 60, "canvas.getAttribute('height') == 60");
20273
20274
20275 }
20276 </script>
20277
20278 <!-- [[[ test_size.attributes.parse.badsuffix.html ]]] -->
20279
20280 <p>Canvas test: size.attributes.parse.badsuffix</p>
20281 <!-- Testing: Parsing of non-negative integers -->
20282 <canvas id="c637" width="100foo" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20283 <script>
20284
20285 function test_size_attributes_parse_badsuffix() {
20286
20287 var canvas = document.getElementById('c637');
20288 var ctx = canvas.getContext('2d');
20289
20290 is(canvas.width, 100, "canvas.width == 100");
20291
20292
20293 }
20294 </script>
20295
20296 <!-- [[[ test_size.attributes.parse.floatsuffix.html ]]] -->
20297
20298 <p>Canvas test: size.attributes.parse.floatsuffix</p>
20299 <!-- Testing: Parsing of non-negative integers -->
20300 <canvas id="c638" width="100.9" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20301 <script>
20302
20303 function test_size_attributes_parse_floatsuffix() {
20304
20305 var canvas = document.getElementById('c638');
20306 var ctx = canvas.getContext('2d');
20307
20308 ok(canvas.width == 100, "canvas.width == 100");
20309
20310
20311 }
20312 </script>
20313
20314 <!-- [[[ test_size.attributes.parse.negative.html ]]] -->
20315
20316 <p>Canvas test: size.attributes.parse.negative</p>
20317 <!-- Testing: Parsing of non-negative integers -->
20318 <canvas id="c639" width="-100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20319 <script>
20320
20321 function test_size_attributes_parse_negative() {
20322
20323 var canvas = document.getElementById('c639');
20324 var ctx = canvas.getContext('2d');
20325
20326 ok(canvas.width == 300, "canvas.width == 300");
20327
20328
20329 }
20330 </script>
20331
20332 <!-- [[[ test_size.attributes.parse.nonnumber.html ]]] -->
20333
20334 <p>Canvas test: size.attributes.parse.nonnumber</p>
20335 <!-- Testing: Parsing of non-negative integers -->
20336 <canvas id="c640" width="foo" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20337 <script>
20338
20339 function test_size_attributes_parse_nonnumber() {
20340
20341 var canvas = document.getElementById('c640');
20342 var ctx = canvas.getContext('2d');
20343
20344 ok(canvas.width == 300, "canvas.width == 300");
20345
20346
20347 }
20348 </script>
20349
20350 <!-- [[[ test_size.attributes.parse.percentsuffix.html ]]] -->
20351
20352 <p>Canvas test: size.attributes.parse.percentsuffix</p>
20353 <!-- Testing: Parsing of non-negative integers -->
20354 <canvas id="c641" width="100%" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20355 <script>
20356
20357 function test_size_attributes_parse_percentsuffix() {
20358
20359 var canvas = document.getElementById('c641');
20360 var ctx = canvas.getContext('2d');
20361
20362 ok(canvas.width == 100, "canvas.width == 100");
20363
20364
20365 }
20366 </script>
20367
20368 <!-- [[[ test_size.attributes.parse.whitespace.html ]]] -->
20369
20370 <p>Canvas test: size.attributes.parse.whitespace</p>
20371 <!-- Testing: Parsing of non-negative integers -->
20372 <canvas id="c642" width=" 100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20373 <script>
20374
20375 function test_size_attributes_parse_whitespace() {
20376
20377 var canvas = document.getElementById('c642');
20378 var ctx = canvas.getContext('2d');
20379
20380 ok(canvas.width == 100, "canvas.width == 100");
20381
20382
20383 }
20384 </script>
20385
20386 <!-- [[[ test_size.attributes.parse.zero.html ]]] -->
20387
20388 <p>Canvas test: size.attributes.parse.zero</p>
20389 <!-- Testing: Parsing of non-negative integers -->
20390 <canvas id="c643" width="0" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20391 <script>
20392
20393 function test_size_attributes_parse_zero() {
20394
20395 var canvas = document.getElementById('c643');
20396 var ctx = canvas.getContext('2d');
20397
20398 ok(canvas.width == 0, "canvas.width == 0");
20399
20400
20401 }
20402 </script>
20403
20404 <!-- [[[ test_size.attributes.parse.zerosuffix.html ]]] -->
20405
20406 <p>Canvas test: size.attributes.parse.zerosuffix</p>
20407 <!-- Testing: Parsing of non-negative integers -->
20408 <canvas id="c644" width="100.0" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20409 <script>
20410
20411 function test_size_attributes_parse_zerosuffix() {
20412
20413 var canvas = document.getElementById('c644');
20414 var ctx = canvas.getContext('2d');
20415
20416 ok(canvas.width == 100, "canvas.width == 100");
20417
20418
20419 }
20420 </script>
20421
20422 <!-- [[[ test_size.attributes.reflect.1.html ]]] -->
20423
20424 <p>Canvas test: size.attributes.reflect.1</p>
20425 <!-- Testing: Setting DOM attributes updates DOM and content attributes -->
20426 <canvas id="c645" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20427 <script>
20428
20429 function test_size_attributes_reflect_1() {
20430
20431 var canvas = document.getElementById('c645');
20432 var ctx = canvas.getContext('2d');
20433
20434 canvas.width = 120;
20435 canvas.height = 60;
20436 ok(canvas.getAttribute('width') == '120', "canvas.getAttribute('width') == '120'");
20437 ok(canvas.getAttribute('height') == '60', "canvas.getAttribute('height') == '60'");
20438 ok(canvas.width == 120, "canvas.width == 120");
20439 ok(canvas.height == 60, "canvas.height == 60");
20440
20441
20442 }
20443 </script>
20444
20445 <!-- [[[ test_size.attributes.reflect.2.html ]]] -->
20446
20447 <p>Canvas test: size.attributes.reflect.2</p>
20448 <!-- Testing: Setting content attributes updates DOM and content attributes -->
20449 <canvas id="c646" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20450 <script>
20451
20452 function test_size_attributes_reflect_2() {
20453
20454 var canvas = document.getElementById('c646');
20455 var ctx = canvas.getContext('2d');
20456
20457 canvas.setAttribute('width', '120');
20458 canvas.setAttribute('height', '60');
20459 ok(canvas.getAttribute('width') == '120', "canvas.getAttribute('width') == '120'");
20460 ok(canvas.getAttribute('height') == '60', "canvas.getAttribute('height') == '60'");
20461 ok(canvas.width == 120, "canvas.width == 120");
20462 ok(canvas.height == 60, "canvas.height == 60");
20463
20464
20465 }
20466 </script>
20467
20468 <!-- [[[ test_size.attributes.removed.html ]]] -->
20469
20470 <p>Canvas test: size.attributes.removed</p>
20471 <!-- Testing: Removing content attributes reverts to default size -->
20472 <canvas id="c647" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas>
20473 <script>
20474
20475 function test_size_attributes_removed() {
20476
20477 var canvas = document.getElementById('c647');
20478 var ctx = canvas.getContext('2d');
20479
20480 canvas.removeAttribute('width');
20481 ok(canvas.width == 300, "canvas.width == 300");
20482
20483
20484 }
20485 </script>
20486
20487 <!-- [[[ test_size.attributes.setAttribute.badsuffix.html ]]] -->
20488
20489 <p>Canvas test: size.attributes.setAttribute.badsuffix</p>
20490 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20491 <canvas id="c648" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20492 <script>
20493
20494 function test_size_attributes_setAttribute_badsuffix() {
20495
20496 var canvas = document.getElementById('c648');
20497 var ctx = canvas.getContext('2d');
20498
20499 canvas.setAttribute('width', '100foo');
20500 is(canvas.width, 100, "canvas.width == 100");
20501
20502
20503 }
20504 </script>
20505
20506 <!-- [[[ test_size.attributes.setAttribute.floatsuffix.html ]]] -->
20507
20508 <p>Canvas test: size.attributes.setAttribute.floatsuffix</p>
20509 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20510 <canvas id="c649" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20511 <script>
20512
20513 function test_size_attributes_setAttribute_floatsuffix() {
20514
20515 var canvas = document.getElementById('c649');
20516 var ctx = canvas.getContext('2d');
20517
20518 canvas.setAttribute('width', '1');
20519 canvas.setAttribute('width', '100.9');
20520 ok(canvas.width == 100, "canvas.width == 100");
20521
20522
20523 }
20524 </script>
20525
20526 <!-- [[[ test_size.attributes.setAttribute.negative.html ]]] -->
20527
20528 <p>Canvas test: size.attributes.setAttribute.negative</p>
20529 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20530 <canvas id="c650" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20531 <script>
20532
20533 function test_size_attributes_setAttribute_negative() {
20534
20535 var canvas = document.getElementById('c650');
20536 var ctx = canvas.getContext('2d');
20537
20538 canvas.setAttribute('width', '-100');
20539 ok(canvas.width == 300, "canvas.width == 300");
20540
20541
20542 }
20543 </script>
20544
20545 <!-- [[[ test_size.attributes.setAttribute.nonnumber.html ]]] -->
20546
20547 <p>Canvas test: size.attributes.setAttribute.nonnumber</p>
20548 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20549 <canvas id="c651" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20550 <script>
20551
20552 function test_size_attributes_setAttribute_nonnumber() {
20553
20554 var canvas = document.getElementById('c651');
20555 var ctx = canvas.getContext('2d');
20556
20557 canvas.setAttribute('width', 'foo');
20558 ok(canvas.width == 300, "canvas.width == 300");
20559
20560
20561 }
20562 </script>
20563
20564 <!-- [[[ test_size.attributes.setAttribute.percentsuffix.html ]]] -->
20565
20566 <p>Canvas test: size.attributes.setAttribute.percentsuffix</p>
20567 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20568 <canvas id="c652" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20569 <script>
20570
20571 function test_size_attributes_setAttribute_percentsuffix() {
20572
20573 var canvas = document.getElementById('c652');
20574 var ctx = canvas.getContext('2d');
20575
20576 canvas.setAttribute('width', '100%');
20577 ok(canvas.width == 100, "canvas.width == 100");
20578
20579
20580 }
20581 </script>
20582
20583 <!-- [[[ test_size.attributes.setAttribute.whitespace.html ]]] -->
20584
20585 <p>Canvas test: size.attributes.setAttribute.whitespace</p>
20586 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20587 <canvas id="c653" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20588 <script>
20589
20590 function test_size_attributes_setAttribute_whitespace() {
20591
20592 var canvas = document.getElementById('c653');
20593 var ctx = canvas.getContext('2d');
20594
20595 canvas.setAttribute('width', ' 100');
20596 ok(canvas.width == 100, "canvas.width == 100");
20597
20598
20599 }
20600 </script>
20601
20602 <!-- [[[ test_size.attributes.setAttribute.zero.html ]]] -->
20603
20604 <p>Canvas test: size.attributes.setAttribute.zero</p>
20605 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20606 <canvas id="c654" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20607 <script>
20608
20609 function test_size_attributes_setAttribute_zero() {
20610
20611 var canvas = document.getElementById('c654');
20612 var ctx = canvas.getContext('2d');
20613
20614 canvas.setAttribute('width', '0');
20615 ok(canvas.width == 0, "canvas.width == 0");
20616
20617
20618 }
20619 </script>
20620
20621 <!-- [[[ test_size.attributes.setAttribute.zerosuffix.html ]]] -->
20622
20623 <p>Canvas test: size.attributes.setAttribute.zerosuffix</p>
20624 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20625 <canvas id="c655" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20626 <script>
20627
20628 function test_size_attributes_setAttribute_zerosuffix() {
20629
20630 var canvas = document.getElementById('c655');
20631 var ctx = canvas.getContext('2d');
20632
20633 canvas.setAttribute('width', '1');
20634 canvas.setAttribute('width', '100.0');
20635 ok(canvas.width == 100, "canvas.width == 100");
20636
20637
20638 }
20639 </script>
20640
20641 <!-- [[[ test_size.attributes.style.html ]]] -->
20642
20643 <p>Canvas test: size.attributes.style</p>
20644 <!-- Testing: Canvas size is independent of CSS resizing -->
20645 <canvas id="c656" width="50" height="30" style="width: 100px; height: 50px"><p class="fallback">FAIL (fallback content)</p></canvas>
20646 <script>
20647
20648 function test_size_attributes_style() {
20649
20650 var canvas = document.getElementById('c656');
20651 var ctx = canvas.getContext('2d');
20652
20653 ok(canvas.width == 50, "canvas.width == 50");
20654 ok(canvas.height == 30, "canvas.height == 30");
20655
20656
20657 }
20658 </script>
20659
20660 <!-- [[[ test_size.attributes.type.get.html ]]] -->
20661
20662 <p>Canvas test: size.attributes.type.get</p>
20663 <!-- Testing: width/height DOM/content attributes - string vs number types -->
20664 <canvas id="c657" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas>
20665 <script>
20666
20667 function test_size_attributes_type_get() {
20668
20669 var canvas = document.getElementById('c657');
20670 var ctx = canvas.getContext('2d');
20671
20672 ok(canvas.width === 120, "canvas.width === 120");
20673 ok(canvas.height === 60, "canvas.height === 60");
20674 ok(canvas.getAttribute('width') === '120', "canvas.getAttribute('width') === '120'");
20675 ok(canvas.getAttribute('height') === '60', "canvas.getAttribute('height') === '60'");
20676
20677
20678 }
20679 </script>
20680
20681 <!-- [[[ test_size.attributes.type.set.html ]]] -->
20682
20683 <p>Canvas test: size.attributes.type.set</p>
20684 <!-- Testing: Setting width/height DOM attributes -->
20685 <canvas id="c658" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20686 <script>
20687
20688 function test_size_attributes_type_set() {
20689
20690 var canvas = document.getElementById('c658');
20691 var ctx = canvas.getContext('2d');
20692
20693 canvas.width = 120;
20694 canvas.height = 60;
20695 ok(canvas.width === 120, "canvas.width === 120");
20696 ok(canvas.height === 60, "canvas.height === 60");
20697
20698
20699 }
20700 </script>
20701
20702 <!-- [[[ test_text.font.html ]]] -->
20703
20704 <p>Canvas test: text.font</p>
20705 <canvas id="c659" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20706 <script>
20707 var _deferred = true;
20708
20709 function test_text_font() {
20710
20711 var canvas = document.getElementById('c659');
20712 var ctx = canvas.getContext('2d');
20713
20714 is(ctx.font, '10px sans-serif', "default font is not '10px sans-serif'");
20715
20716 ctx.save();
20717 ctx.font = '20pt serif';
20718 is(ctx.font, '20pt serif', 'font getter returns incorrect value');
20719
20720 ctx.restore();
20721 is(ctx.font, '10px sans-serif', 'font not being stored in the context state');
20722
20723 if (!_deferred) SimpleTest.finish();
20724 }
20725 </script>
20726
20727 <!-- [[[ test_text.measure.html ]]] -->
20728
20729 <p>Canvas test: text.measure</p>
20730 <canvas id="c660" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20731 <script>
20732 var _deferred = true;
20733
20734 function test_text_measure() {
20735
20736 var canvas = document.getElementById('c660');
20737 var ctx = canvas.getContext('2d');
20738
20739 ctx.font = "10px sans-serif";
20740 ctx.textAlign = "left";
20741 ctx.textBaseline = "top";
20742
20743 var str = 'Test String';
20744 var wid = ctx.measureText(str).width;
20745
20746 ok(wid > 0, "measureText returns nonpositive value for non-empty string");
20747
20748 ctx.font = "20px sans-serif";
20749 isnot(wid, ctx.measureText(str).width, "measureText does not change with a different font size");
20750
20751 ctx.font = "10px sans-serif";
20752 ctx.textAlign = "center";
20753 ctx.textBaseline = "alphabetic";
20754
20755 is(wid, ctx.measureText(str).width, "measureText changes when alignement/baseline is changed");
20756
20757
20758 if (!_deferred) SimpleTest.finish();
20759 }
20760 </script>
20761
20762 <!-- [[[ test_text.space.replace.html ]]] -->
20763
20764 <p>Canvas test: text.space.replace</p>
20765 <canvas id="c661" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20766 <script>
20767 var _deferred = true;
20768
20769 function test_text_space_replace() {
20770
20771 var canvas = document.getElementById('c661');
20772 var ctx = canvas.getContext('2d');
20773
20774 var swid = ctx.measureText(' ').width;
20775 ctx.font = "10px sans-serif";
20776
20777 isnot(swid, 0.0, "measureText reutuns zero for a non-empty string");
20778 is(swid, ctx.measureText('\x09').width, "measureText does not replace whitespace char with a space");
20779 is(swid, ctx.measureText('\x0A').width, "measureText does not replace whitespace char with a space");
20780 is(swid, ctx.measureText('\x0B').width, "measureText does not replace whitespace char with a space");
20781 is(swid, ctx.measureText('\x0C').width, "measureText does not replace whitespace char with a space");
20782 is(swid, ctx.measureText('\x0D').width, "measureText does not replace whitespace char with a space");
20783
20784 if (!_deferred) SimpleTest.finish();
20785 }
20786 </script>
20787
20788 <!-- [[[ test_text.textAlign.html ]]] -->
20789
20790 <p>Canvas test: text.textAlign</p>
20791 <canvas id="c662" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20792 <script>
20793 var _deferred = true;
20794
20795 function test_text_textAlign() {
20796
20797 var canvas = document.getElementById('c662');
20798 var ctx = canvas.getContext('2d');
20799
20800 is(ctx.textAlign, 'start', "default textAlign is not 'start'");
20801
20802 ctx.save();
20803 ctx.textAlign = 'end';
20804 is(ctx.textAlign, 'end', 'textAlign getter returns incorrect value');
20805
20806 ctx.save();
20807 ctx.textAlign = 'left';
20808 is(ctx.textAlign, 'left', 'textAlign getter returns incorrect value');
20809
20810 ctx.save();
20811 ctx.textAlign = 'center';
20812 is(ctx.textAlign, 'center', 'textAlign getter returns incorrect value');
20813
20814 ctx.save();
20815 ctx.textAlign = 'right';
20816 is(ctx.textAlign, 'right', 'textAlign getter returns incorrect value');
20817
20818 ctx.save();
20819 ctx.textAlign = 'start';
20820 is(ctx.textAlign, 'start', 'textAlign getter returns incorrect value');
20821
20822 ctx.restore();
20823 is(ctx.textAlign, 'right', 'textAlign not being stored in the context state');
20824
20825 ctx.restore();
20826 is(ctx.textAlign, 'center', 'textAlign not being stored in the context state');
20827
20828 ctx.restore();
20829 is(ctx.textAlign, 'left', 'textAlign not being stored in the context state');
20830
20831 ctx.restore();
20832 is(ctx.textAlign, 'end', 'textAlign not being stored in the context state');
20833
20834 ctx.restore();
20835 is(ctx.textAlign, 'start', 'textAlign not being stored in the context state');
20836
20837 if (!_deferred) SimpleTest.finish();
20838 }
20839 </script>
20840
20841 <!-- [[[ test_text.textBaseline.html ]]] -->
20842
20843 <p>Canvas test: text.textBaseline</p>
20844 <canvas id="c663" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20845 <script>
20846 var _deferred = true;
20847
20848 function test_text_textBaseline() {
20849
20850 var canvas = document.getElementById('c663');
20851 var ctx = canvas.getContext('2d');
20852
20853 is(ctx.textBaseline, 'alphabetic', "default textBaseline is not 'alphabetic'");
20854
20855 ctx.save();
20856 ctx.textBaseline = 'ideographic';
20857 is(ctx.textBaseline, 'ideographic', 'textBaseline getter returns incorrect value');
20858
20859 ctx.save();
20860 ctx.textBaseline = 'top';
20861 is(ctx.textBaseline, 'top', 'textBaseline getter returns incorrect value');
20862
20863 ctx.save();
20864 ctx.textBaseline = 'middle';
20865 is(ctx.textBaseline, 'middle', 'textBaseline getter returns incorrect value');
20866
20867 ctx.save();
20868 ctx.textBaseline = 'bottom';
20869 is(ctx.textBaseline, 'bottom', 'textBaseline getter returns incorrect value');
20870
20871 ctx.save();
20872 ctx.textBaseline = 'hanging';
20873 is(ctx.textBaseline, 'hanging', 'textBaseline getter returns incorrect value');
20874
20875 ctx.save();
20876 ctx.textBaseline = 'alphabetic';
20877 is(ctx.textBaseline, 'alphabetic', 'textBaseline getter returns incorrect value');
20878
20879 ctx.restore();
20880 is(ctx.textBaseline, 'hanging', 'textBaseline not being stored in the context state');
20881
20882 ctx.restore();
20883 is(ctx.textBaseline, 'bottom', 'textBaseline not being stored in the context state');
20884
20885 ctx.restore();
20886 is(ctx.textBaseline, 'middle', 'textBaseline not being stored in the context state');
20887
20888 ctx.restore();
20889 is(ctx.textBaseline, 'top', 'textBaseline not being stored in the context state');
20890
20891 ctx.restore();
20892 is(ctx.textBaseline, 'ideographic', 'textBaseline not being stored in the context state');
20893
20894 ctx.restore();
20895 is(ctx.textBaseline, 'alphabetic', 'textBaseline not being stored in the context state');
20896
20897 if (!_deferred) SimpleTest.finish();
20898 }
20899 </script>
20900
20901 <!-- [[[ test_toDataURL.arguments.1.html ]]] -->
20902
20903 <p>Canvas test: toDataURL.arguments.1 - bug 401795</p>
20904 <!-- Testing: toDataURL ignores extra arguments -->
20905 <canvas id="c664" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20906 <script>
20907
20908 function test_toDataURL_arguments_1() {
20909
20910 var canvas = document.getElementById('c664');
20911 var ctx = canvas.getContext('2d');
20912
20913 var _thrown_outer = false;
20914 try {
20915
20916 var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception');
20917 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20918
20919 } catch (e) {
20920 _thrown_outer = true;
20921 }
20922 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
20923
20924
20925 }
20926 </script>
20927
20928 <!-- [[[ test_toDataURL.arguments.2.html ]]] -->
20929
20930 <p>Canvas test: toDataURL.arguments.2 - bug 401795</p>
20931 <!-- Testing: toDataURL ignores extra arguments -->
20932 <canvas id="c665" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20933 <script>
20934
20935 function test_toDataURL_arguments_2() {
20936
20937 var canvas = document.getElementById('c665');
20938 var ctx = canvas.getContext('2d');
20939
20940 var _thrown_outer = false;
20941 try {
20942
20943 var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception', 'and another');
20944 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20945
20946 } catch (e) {
20947 _thrown_outer = true;
20948 }
20949 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
20950
20951
20952 }
20953 </script>
20954
20955 <!-- [[[ test_toDataURL.arguments.3.html ]]] -->
20956
20957 <p>Canvas test: toDataURL.arguments.3 - bug 401795</p>
20958 <!-- Testing: toDataURL ignores extra arguments -->
20959 <canvas id="c666" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20960 <script>
20961
20962 function test_toDataURL_arguments_3() {
20963
20964 var canvas = document.getElementById('c666');
20965 var ctx = canvas.getContext('2d');
20966
20967 var _thrown_outer = false;
20968 try {
20969
20970 // More arguments that should not raise exceptions
20971 var data = canvas.toDataURL('image/png', null, null, null);
20972 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20973
20974 } catch (e) {
20975 _thrown_outer = true;
20976 }
20977 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
20978
20979
20980 }
20981 </script>
20982
20983 <!-- [[[ test_toDataURL.complexcolours.html ]]] -->
20984
20985 <p>Canvas test: toDataURL.complexcolours</p>
20986 <!-- Testing: toDataURL handles non-primary and non-solid colours correctly -->
20987 <canvas id="c667" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20988 <script>
20989
20990 var canvas667 = document.getElementById('c667');
20991 var ctx667 = canvas667.getContext('2d');
20992
20993 function test_toDataURL_complexcolours() {
20994
20995 // (These values are chosen to survive relatively alright through being premultiplied)
20996 ctx667.fillStyle = 'rgba(1, 3, 254, 1)';
20997 ctx667.fillRect(0, 0, 25, 25);
20998 ctx667.fillStyle = 'rgba(8, 252, 248, 0.75)';
20999 ctx667.fillRect(25, 0, 25, 25);
21000 ctx667.fillStyle = 'rgba(6, 10, 250, 0.502)';
21001 ctx667.fillRect(50, 0, 25, 25);
21002 ctx667.fillStyle = 'rgba(12, 16, 244, 0.25)';
21003 ctx667.fillRect(75, 0, 25, 25);
21004 var img = new Image();
21005 deferTest();
21006 img.onload = wrapFunction(function ()
21007 {
21008 ctx667.drawImage(img, 0, 25);
21009 // (The alpha values do not really survive float->int conversion, so just
21010 // do approximate comparisons)
21011 isPixel(ctx667, 12,40, 1,3,254,255, 0);
21012 isPixel(ctx667, 37,40, 8,252,248,191, 2);
21013 isPixel(ctx667, 62,40, 6,10,250,127, 4);
21014 isPixel(ctx667, 87,40, 12,16,244,63, 8);
21015 });
21016 img.src = canvas667.toDataURL();
21017
21018
21019 }
21020 </script>
21021
21022 <!-- [[[ test_toDataURL.default.html ]]] -->
21023
21024 <p>Canvas test: toDataURL.default</p>
21025 <!-- Testing: toDataURL with no arguments returns a PNG -->
21026 <canvas id="c668" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21027 <script>
21028
21029 function test_toDataURL_default() {
21030
21031 var canvas = document.getElementById('c668');
21032 var ctx = canvas.getContext('2d');
21033
21034 var data = canvas.toDataURL();
21035 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
21036
21037
21038 }
21039 </script>
21040
21041 <!-- [[[ test_toDataURL.lowercase.html ]]] -->
21042
21043 <p>Canvas test: toDataURL.lowercase - bug 401795</p>
21044 <!-- Testing: toDataURL type is case-sensitive -->
21045 <canvas id="c669" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21046 <script>
21047
21048 function test_toDataURL_lowercase() {
21049
21050 var canvas = document.getElementById('c669');
21051 var ctx = canvas.getContext('2d');
21052
21053 var _thrown_outer = false;
21054 try {
21055
21056 var data = canvas.toDataURL('ImAgE/PnG');
21057 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
21058
21059 } catch (e) {
21060 _thrown_outer = true;
21061 }
21062 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
21063
21064
21065 }
21066 </script>
21067
21068 <!-- [[[ test_toDataURL.nocontext.html ]]] -->
21069
21070 <p>Canvas test: toDataURL.nocontext</p>
21071 <!-- Testing: toDataURL works before any context has been got -->
21072 <canvas id="c670" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21073 <script>
21074
21075 function test_toDataURL_nocontext() {
21076
21077 var canvas = document.getElementById('c670');
21078 var ctx = canvas.getContext('2d');
21079
21080 var canvas2 = document.createElement('canvas');
21081
21082 var data = canvas2.toDataURL();
21083 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
21084
21085
21086 }
21087 </script>
21088
21089 <!-- [[[ test_toDataURL.png.html ]]] -->
21090
21091 <p>Canvas test: toDataURL.png</p>
21092 <!-- Testing: toDataURL with image/png returns a PNG -->
21093 <canvas id="c671" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21094 <script>
21095
21096 function test_toDataURL_png() {
21097
21098 var canvas = document.getElementById('c671');
21099 var ctx = canvas.getContext('2d');
21100
21101 var data = canvas.toDataURL('image/png');
21102 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
21103
21104
21105 }
21106 </script>
21107
21108 <!-- [[[ test_toDataURL.primarycolours.html ]]] -->
21109
21110 <p>Canvas test: toDataURL.primarycolours</p>
21111 <!-- Testing: toDataURL handles simple colours correctly -->
21112 <canvas id="c672" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21113 <script>
21114
21115
21116 var canvas672 = document.getElementById('c672');
21117 var ctx672 = canvas672.getContext('2d');
21118
21119 function test_toDataURL_primarycolours() {
21120
21121 ctx672.fillStyle = '#ff0';
21122 ctx672.fillRect(0, 0, 25, 40);
21123 ctx672.fillStyle = '#0ff';
21124 ctx672.fillRect(25, 0, 50, 40);
21125 ctx672.fillStyle = '#00f';
21126 ctx672.fillRect(75, 0, 25, 40);
21127 ctx672.fillStyle = '#fff';
21128 ctx672.fillRect(0, 40, 100, 10);
21129 var data = canvas672.toDataURL();
21130 ctx672.fillStyle = '#f00';
21131 ctx672.fillRect(0, 0, 100, 50);
21132 var img = new Image();
21133 deferTest();
21134 img.onload = wrapFunction(function ()
21135 {
21136 ctx672.drawImage(img, 0, 0);
21137 isPixel(ctx672, 12,20, 255,255,0,255, 0);
21138 isPixel(ctx672, 50,20, 0,255,255,255, 0);
21139 isPixel(ctx672, 87,20, 0,0,255,255, 0);
21140 isPixel(ctx672, 50,45, 255,255,255,255, 0);
21141 });
21142 img.src = data;
21143
21144
21145 }
21146 </script>
21147
21148 <!-- [[[ test_toDataURL.unrecognised.html ]]] -->
21149
21150 <p>Canvas test: toDataURL.unrecognised - bug 401795</p>
21151 <!-- Testing: toDataURL with an unhandled type returns a PNG -->
21152 <canvas id="c673" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21153 <script>
21154
21155 function test_toDataURL_unrecognised() {
21156
21157 var canvas = document.getElementById('c673');
21158 var ctx = canvas.getContext('2d');
21159
21160 var _thrown_outer = false;
21161 try {
21162
21163 var data = canvas.toDataURL('image/example');
21164 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
21165
21166 } catch (e) {
21167 _thrown_outer = true;
21168 }
21169 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
21170
21171
21172 }
21173 </script>
21174
21175 <!-- [[[ test_toDataURL.zerosize.html ]]] -->
21176
21177 <p>Canvas test: toDataURL.zerosize</p>
21178 <!-- Testing: toDataURL on zero-size canvas returns 'data:,' -->
21179 <canvas id="c674" width="0" height="0"><p class="fallback">FAIL (fallback content)</p></canvas>
21180 <script>
21181
21182 function test_toDataURL_zerosize() {
21183
21184 var canvas = document.getElementById('c674');
21185 var ctx = canvas.getContext('2d');
21186
21187 var data = canvas.toDataURL();
21188 ok(data === 'data:,', "data === 'data:,'");
21189
21190
21191 }
21192 </script>
21193
21194 <!-- [[[ test_type.exists.html ]]] -->
21195
21196 <p>Canvas test: type.exists</p>
21197 <!-- Testing: HTMLCanvasElement is a property of window -->
21198 <canvas id="c676" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21199 <script>
21200
21201 function test_type_exists() {
21202
21203 var canvas = document.getElementById('c676');
21204 var ctx = canvas.getContext('2d');
21205
21206 ok(window.HTMLCanvasElement, "window.HTMLCanvasElement");
21207
21208
21209 }
21210 </script>
21211
21212 <!-- [[[ test_type.extend.html ]]] -->
21213
21214 <p>Canvas test: type.extend</p>
21215 <!-- Testing: HTMLCanvasElement methods can be added, and the new methods used by canvases -->
21216 <canvas id="c677" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21217 <script>
21218
21219 function test_type_extend() {
21220
21221 var canvas = document.getElementById('c677');
21222 var ctx = canvas.getContext('2d');
21223
21224 window.HTMLCanvasElement.prototype.getZero = function () { return 0; };
21225 ok(canvas.getZero() === 0, "canvas.getZero() === 0");
21226
21227
21228 }
21229 </script>
21230
21231 <!-- [[[ test_type.name.html ]]] -->
21232
21233 <p>Canvas test: type.name</p>
21234 <!-- Testing: HTMLCanvasElement type and toString -->
21235 <canvas id="c678" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21236 <script>
21237
21238 function test_type_name() {
21239
21240 var canvas = document.getElementById('c678');
21241 var ctx = canvas.getContext('2d');
21242
21243 ok(Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]', "Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]'");
21244
21245
21246 }
21247 </script>
21248
21249 <!-- [[[ test_type.prototype.html ]]] -->
21250
21251 <p>Canvas test: type.prototype</p>
21252 <!-- Testing: window.HTMLCanvasElement has prototype, which is { ReadOnly, DontDelete }. prototype has getContext, which is not -->
21253 <canvas id="c679" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21254 <script>
21255
21256 function test_type_prototype() {
21257
21258 var canvas = document.getElementById('c679');
21259 var ctx = canvas.getContext('2d');
21260
21261 ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype");
21262 ok(window.HTMLCanvasElement.prototype.getContext, "window.HTMLCanvasElement.prototype.getContext");
21263 window.HTMLCanvasElement.prototype = null;
21264 ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype");
21265 delete window.HTMLCanvasElement.prototype;
21266 ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype");
21267 var getContext = window.HTMLCanvasElement.prototype.getContext;
21268 window.HTMLCanvasElement.prototype.getContext = 1;
21269 ok(window.HTMLCanvasElement.prototype.getContext === 1, "window.HTMLCanvasElement.prototype.getContext === 1");
21270 delete window.HTMLCanvasElement.prototype.getContext;
21271 ok(window.HTMLCanvasElement.prototype.getContext === undefined, "window.HTMLCanvasElement.prototype.getContext === undefined");
21272 window.HTMLCanvasElement.prototype.getContext = getContext;
21273
21274
21275 }
21276 </script>
21277
21278 <!-- [[[ test_type.replace.html ]]] -->
21279
21280 <p>Canvas test: type.replace</p>
21281 <!-- Testing: HTMLCanvasElement methods can be replaced, and the replacement methods used by canvases -->
21282 <canvas id="c680" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21283 <script>
21284
21285 function test_type_replace() {
21286
21287 var canvas = document.getElementById('c680');
21288 var ctx = canvas.getContext('2d');
21289
21290 var getContext = window.HTMLCanvasElement.prototype.getContext;
21291 window.HTMLCanvasElement.prototype.getContext = function (name) { return 0; };
21292 ok(canvas.getContext('2d') === 0, "canvas.getContext('2d') === 0");
21293 window.HTMLCanvasElement.prototype.getContext = getContext;
21294
21295
21296 }
21297 </script>
21298
21299 <!-- [[[ test_2d.imagedata_coercion.html ]]] -->
21300
21301 <p>Canvas test: 2d.imagedata_coercion</p>
21302 <!-- Testing: imagedata coerced correctly on set -->
21303 <canvas id="c681" width="100" height="1"><p class="fallback">FAIL (fallback content)</p></canvas>
21304 <script>
21305
21306 /* NOTE: Due to round-tripping through premultiplied values and the rounding
21307 that ensues, values of alpha < 255 will tend to do weird things. In
21308 particular, the premultiplied color values are computed by multiplying by a,
21309 dividing by 255, then always rounding up. The conversion the other way is done
21310 by multiplying by 255/a and rounding down. So if
21311
21312 255/a * (amount added when rounding) > 1
21313
21314 we will get a change in value when we go through a putImageData/getImageData cycle. Therefore, to make sure we don't have to worry about our color
21315 channels, our alpha channel should never be < 250, unless it's 0. And when it's 0, all our color channels will come back as 0 too. */
21316
21317 /* Our tests. Each test has two arrays: the array of values to set and the
21318 array of values that should read back as a result. */
21319 var tests = [
21320 [
21321 [ 0, 1, 3, 250 ], [ 0, 1, 3, 250 ]
21322 ],
21323 [
21324 [ 0, 1, 2, 250, 4, 5, 6, 250 ], [ 0, 1, 2, 250, 4, 5, 6, 250 ]
21325 ],
21326 [
21327 [ 0, 1000, 2, 300, 400, 5, 600, 250 ], [ 0, 255, 2, 255, 255, 5, 255, 250 ]
21328 ],
21329 [
21330 [ -10, -5, NaN, 250, 4, 5, 6, -250 ], [ 0, 0, 0, 250, 0, 0, 0, 0 ]
21331 ],
21332 [
21333 [ 0.5, 12.2, 12.8, 251.5, 12.5, 13.5, 13.2, 250.5 ],
21334 [ 0, 12, 13, 252, 12, 14, 13, 250 ]
21335 ]
21336 ];
21337
21338 function doTest(type, idx) {
21339 var testPair = tests[idx];
21340 var test = testPair[0];
21341 var ref = testPair[1];
21342 var descSuffix = " for " + type + " test #" + (idx+1);
21343 function myIs(a, b, str) {
21344 is(a, b, str + descSuffix);
21345 }
21346
21347 myIs(test.length, ref.length, "Length mismatch");
21348 myIs(test.length % 4, 0, "Length not a multiple of 4");
21349 var pixels = test.length / 4;
21350 var imageData = ctx681.createImageData(pixels, 1);
21351 myIs(imageData.width, pixels, "Incorrect created data width");
21352 myIs(imageData.height, 1, "Incorrect created data height");
21353 myIs(imageData.data.length, test.length,
21354 "Incorrect length in created image data");
21355
21356 ctx681.putImageData(imageData, 0, 0);
21357 var testImageData = ctx681.getImageData(0, 0, pixels, 1);
21358 myIs(testImageData.data.length, test.length,
21359 "Incorrect length in test image data after clearing pixels");
21360 var j;
21361 for (j = 0; j < testImageData.data.length; ++j) {
21362 myIs(testImageData.data[j], 0,
21363 "Nonzero value at position " + j + " in test image data " +
21364 "after clearing pixels");
21365 }
21366 for (j = 0; j < imageData.data.length; ++j) {
21367 imageData.data[j] = test[j];
21368 }
21369 if (type == "slow") {
21370 // convert to a non-dense array so we can test that codepath
21371 imageData.data.makeMeSlow = 1;
21372 }
21373 ctx681.putImageData(imageData, 0, 0);
21374 testImageData = ctx681.getImageData(0, 0, pixels, 1);
21375 myIs(testImageData.data.length, test.length,
21376 "Incorrect length in test image data after putting our imagedata");
21377 for (j = 0; j < testImageData.data.length; ++j) {
21378 myIs(testImageData.data[j], ref[j],
21379 "Incorrect value at position " + j + " in test image data " +
21380 "after putting our imagedata");
21381 }
21382 }
21383
21384 function doTests(type) {
21385 for (var i = 0; i < tests.length; ++i) {
21386 doTest(type, i);
21387 }
21388 }
21389
21390 var canvas681;
21391 var ctx681;
21392
21393 function test_2d_imagedata_coercion() {
21394
21395 canvas681 = document.getElementById('c681');
21396 ctx681 = canvas681.getContext('2d');
21397
21398 doTests("fast");
21399 doTests("slow");
21400
21401 }
21402 </script>
21403
21404 <!-- [[[ test_2d.imageSmoothing.html ]]] -->
21405
21406 <p>Canvas test: 2d.imageRenderingQuality</p>
21407 <canvas id="c682" width="10" height="10"></canvas><br>
21408 <canvas style="visibility: hidden" id="c683" width="2" height="2"></canvas>
21409 <script type="text/javascript">
21410
21411 function setup_test_2d_imageSmoothing() {
21412 var c683 = document.getElementById("c683");
21413 var cx683 = c683.getContext("2d");
21414
21415 cx683.fillStyle = "red";
21416 cx683.fillRect(0, 0, 2, 2);
21417
21418 cx683.fillStyle = "rgb(0,255,0)";
21419 cx683.fillRect(0, 0, 1, 1);
21420 }
21421
21422 function test_2d_imageSmoothing() {
21423 setup_test_2d_imageSmoothing();
21424
21425 var c682 = document.getElementById("c682");
21426 var c683 = document.getElementById("c683");
21427
21428 var cx682 = c682.getContext("2d");
21429
21430 ok(cx682.mozImageSmoothingEnabled == true, "initial mozImageSmoothingEnabled is true");
21431
21432 // check that mozImageSmoothingEnabled is part of the context
21433 cx682.save();
21434 cx682.mozImageSmoothingEnabled = false;
21435 ok(cx682.mozImageSmoothingEnabled == false, "mozImageSmoothingEnabled is false after setting");
21436 cx682.restore();
21437 ok(cx682.mozImageSmoothingEnabled == true, "mozImageSmoothingEnabled is true after restore");
21438
21439 // check that false works
21440 cx682.mozImageSmoothingEnabled = false;
21441
21442 cx682.scale(10,10);
21443 cx682.drawImage(c683, 0, 0);
21444
21445 // this should be all red
21446 var data = cx682.getImageData(9, 9, 1, 1);
21447 var pixels = data.data;
21448 ok (pixels[0] == 0 &&
21449 pixels[1] == 255 &&
21450 pixels[2] == 0 &&
21451 pixels[3] == 255,
21452 "pixel is " + pixels.toSource() + " (expected [0,255,0,255])");
21453 }
21454
21455 </script>
21456
21457 <p>Canvas test: zero_dimensions</p>
21458 <canvas id="c684" width="0" height="0"></canvas>
21459 <script type="text/javascript">
21460 function test_zero_dimensions() {
21461 var c = document.getElementById("c684");
21462 ok(c.width == 0, "c.width not 0");
21463 ok(c.height == 0, "c.height not 0");
21464 }
21465 </script>
21466
21467 <p>Canvas test: zero_dimensions_image_data</p>
21468 <canvas id="c685" width="0" height="0"></canvas>
21469 <script type="text/javascript">
21470 function test_zero_dimensions_imagedata() {
21471 var c = document.getElementById("c685");
21472 var ctx = c.getContext("2d");
21473 ctx.fillStyle = "blue";
21474 ctx.fillRect(0, 0, 100, 100);
21475 var imgdata = ctx.getImageData(0, 0, 100, 100);
21476 var isTransparentBlack = true;
21477 for (var i = 0; i < imgdata.data.length; ++i)
21478 if (imgdata.data[i] !== 0)
21479 isTransparentBlack = false;
21480 ok(isTransparentBlack, "isTransparentBlack");
21481 }
21482 </script>
21483
21484 <p>Canvas test: getImageData_after_zero_canvas</p>
21485 <canvas id="c686" width="100" height="100"></canvas>
21486 <script type="text/javascript">
21487 function test_getImageData_after_zero_canvas() {
21488 var c = document.getElementById("c686");
21489 var ctx = c.getContext("2d");
21490 ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
21491 ctx.fillRect(0, 0, c.width, c.height);
21492 var oldimgdata = ctx.getImageData(0, 0, c.width, c.height);
21493 c.width = c.height = 0;
21494 c.width = c.height = 100;
21495 ctx.fillRect(0, 0, c.width, c.height);
21496 var imgdata = ctx.getImageData(0, 0, c.width, c.height);
21497 var same = false;
21498 ok(imgdata.data.length === oldimgdata.data.length, "not the same length");
21499 for (var i = 0; i < imgdata.data.length; ++i)
21500 same = imgdata.data[i] === oldimgdata.data[i];
21501 ok(same, "changing dimensions broke canvas");
21502 }
21503 </script>
21504
21505 <p>Canvas test: zero_dimensions_image_data</p>
21506 <canvas id="c687" width="150" height="50"></canvas>
21507 <script type="text/javascript">
21508
21509 function test_linedash() {
21510 var c = document.getElementById("c687");
21511 var ctx = c.getContext("2d");
21512 ok(ctx.lineDashOffset==0, "initial dash offset is not 0");
21513
21514 ctx.setLineDash([15, 10]);
21515 ctx.lineDashOffset = 5;
21516 ctx.strokeRect (10,10,100,100);
21517
21518 var lineDash = ctx.getLineDash();
21519 ok(lineDash[0]==15&&lineDash[1]==10, "dash pattern [15, 10] is wrong");
21520 ok(ctx.lineDashOffset==5, "dash offset is wrong");
21521
21522 ctx.setLineDash([5, 10, 15]);
21523 ctx.strokeRect(20, 20, 120, 120);
21524 lineDash = ctx.getLineDash();
21525 ok(lineDash[0]==5
21526 && lineDash[1]==10
21527 && lineDash[2]==15
21528 && lineDash[3]==5
21529 && lineDash[4]==10
21530 && lineDash[5]==15, "dash pattern [5, 10, 15] is wrong");
21531
21532 ctx.setLineDash(["1", 2]);
21533 lineDash = ctx.getLineDash();
21534 ok(lineDash[0] == 1 && lineDash[1] == 2, "dash pattern ['1', 2] is wrong");
21535
21536 ctx.clearRect(0, 0, 700, 700);
21537 ok(ctx.lineDashOffset==5, "dash offset is wrong");
21538
21539 ctx.setLineDash([20, 10]);
21540 ctx.lineDashOffset = 0;
21541 ctx.lineWidth = 4; // To make the test immune to plaform anti-aliasing discrepancies
21542 ctx.strokeStyle = '#00FF00';
21543 ctx.strokeRect(10.5, 10.5, 30, 30);
21544
21545 isPixel(ctx, 25, 10, 0, 255, 0, 255, 0);
21546 isPixel(ctx, 35, 10, 0, 0, 0, 0, 0);
21547 isPixel(ctx, 40, 25, 0, 255, 0, 255, 0);
21548 isPixel(ctx, 40, 35, 0, 0, 0, 0, 0);
21549 isPixel(ctx, 25, 40, 0, 255, 0, 255, 0);
21550 isPixel(ctx, 15, 40, 0, 0, 0, 0, 0);
21551 isPixel(ctx, 10, 25, 0, 255, 0, 255, 0);
21552 isPixel(ctx, 10, 15, 0, 0, 0, 0, 0);
21553
21554 // Verify that lineDashOffset works as expected
21555 ctx.lineDashOffset = 20;
21556 ctx.strokeRect(50.5, 10.5, 30, 30);
21557 isPixel(ctx, 55, 10, 0, 0, 0, 0, 0);
21558 isPixel(ctx, 65, 10, 0, 255, 0, 255, 0);
21559 isPixel(ctx, 80, 15, 0, 0, 0, 0, 0);
21560 isPixel(ctx, 80, 25, 0, 255, 0, 255, 0);
21561 isPixel(ctx, 75, 40, 0, 0, 0, 0, 0);
21562 isPixel(ctx, 65, 40, 0, 255, 0, 255, 0);
21563 isPixel(ctx, 50, 35, 0, 0, 0, 0, 0);
21564 isPixel(ctx, 50, 25, 0, 255, 0, 255, 0);
21565
21566 // Verify negative lineDashOffset
21567 ctx.lineDashOffset = -10;
21568 ctx.strokeRect(90.5, 10.5, 30, 30);
21569 isPixel(ctx, 95, 10, 0, 0, 0, 0, 0);
21570 isPixel(ctx, 105, 10, 0, 255, 0, 255, 0);
21571 isPixel(ctx, 120, 15, 0, 0, 0, 0, 0);
21572 isPixel(ctx, 120, 25, 0, 255, 0, 255, 0);
21573 isPixel(ctx, 115, 40, 0, 0, 0, 0, 0);
21574 isPixel(ctx, 105, 40, 0, 255, 0, 255, 0);
21575 isPixel(ctx, 90, 35, 0, 0, 0, 0, 0);
21576 isPixel(ctx, 90, 25, 0, 255, 0, 255, 0);
21577 }
21578 </script>
21579
21580 <p>Canvas test: test_opaque</p>
21581 <canvas id="c688" width="150" height="50"></canvas>
21582 <script type="text/javascript">
21583
21584 function test_opaque() {
21585 var c = document.getElementById("c688");
21586 var ctx = c.getContext("2d", {alpha: false});
21587 ctx.fillStyle = "green";
21588 ctx.fillRect(0,0,10,10);
21589 ctx.fillStyle = "rgba(255,0,0,.5)";
21590 ctx.fillRect(10,0,10,10);
21591
21592 isPixel(ctx, 20, 20, 0, 0, 0, 255, 0);
21593 isPixel(ctx, 5, 5, 0, 128, 0, 255, 0);
21594 isPixel(ctx, 15, 5, 128, 0, 0, 255, 0);
21595 }
21596 </script>
21597
21598 <script>
21599
21600 function asyncTestsDone() {
21601 if (isDone_test_2d_drawImage_animated_apng &&
21602 isDone_test_2d_drawImage_animated_gif) {
21603 SimpleTest.finish();
21604 } else {
21605 setTimeout(asyncTestsDone, 500);
21606 }
21607 }
21608
21609 function runTests() {
21610 /**
21611 * xor and lighter aren't well handled by cairo; they mostly work, but we don't want
21612 * to test that
21613 */
21614 //test_2d_composite_solid_lighter();
21615 //test_2d_composite_transparent_xor();
21616 //test_2d_composite_solid_xor();
21617 //test_2d_composite_transparent_lighter();
21618 //test_2d_composite_image_xor();
21619 //test_2d_composite_image_lighter();
21620 //test_2d_composite_canvas_xor();
21621 //test_2d_composite_canvas_lighter();
21622 //test_2d_composite_clip_xor();
21623 //test_2d_composite_clip_lighter();
21624
21625 /**
21626 * Temporarily disabled tests; unbounded operators changed behaviour, need to reevaluate tests
21627 */
21628 //test_2d_composite_canvas_destination_atop();
21629 //test_2d_composite_canvas_destination_in();
21630 //test_2d_composite_canvas_source_in();
21631 //test_2d_composite_canvas_source_out();
21632 //test_2d_composite_image_destination_atop();
21633 //test_2d_composite_image_destination_in();
21634 //test_2d_composite_image_source_in();
21635 //test_2d_composite_image_source_out();
21636
21637 /**
21638 * These tests only pass on Mac OS X >= 10.5; see bug 450114
21639 */
21640 //test_2d_gradient_radial_equal();
21641 //test_2d_gradient_radial_touch1();
21642 //test_2d_gradient_radial_touch2();
21643 //test_2d_gradient_radial_touch3();
21644
21645 /**
21646 * These 19 tests receive special makefile treatment
21647 */
21648 //test_2d_composite_uncovered_image_destination_atop();
21649 //test_2d_composite_uncovered_image_destination_in();
21650 //test_2d_composite_uncovered_image_source_in();
21651 //test_2d_composite_uncovered_image_source_out();
21652 //test_2d_gradient_radial_cone_behind();
21653 //test_2d_gradient_radial_cone_beside();
21654 //test_2d_gradient_radial_cone_front();
21655 //test_2d_gradient_radial_cone_shape2();
21656 //test_2d_gradient_radial_cone_top();
21657 //test_2d_gradient_radial_inside2();
21658 //test_2d_gradient_radial_inside3();
21659 //test_2d_gradient_radial_outside1();
21660 //test_2d_gradient_radial_outside2();
21661 //test_2d_gradient_radial_outside3();
21662 //test_2d_line_cap_closed();
21663 //test_2d_line_join_parallel();
21664 //test_2d_path_arc_shape_3();
21665 //test_2d_path_rect_selfintersect();
21666 //test_2d_strokeRect_zero_5();
21667
21668 /**
21669 * Other tests not being run
21670 */
21671 //test_2d_composite_uncovered_fill_destination_atop();
21672 //test_2d_composite_uncovered_fill_destination_in();
21673 //test_2d_composite_uncovered_fill_source_in();
21674 //test_2d_composite_uncovered_fill_source_out();
21675 //test_2d_composite_uncovered_pattern_destination_atop();
21676 //test_2d_composite_uncovered_pattern_destination_in();
21677 //test_2d_composite_uncovered_pattern_source_in();
21678 //test_2d_composite_uncovered_pattern_source_out();
21679
21680 //test_2d_path_rect_zero_6(); // This test is bogus according to the spec; see bug 407107
21681
21682 // These tests are bogus according to the spec: shadows should not be
21683 // drawn if shadowBlur, shadowOffsetX, and shadowOffsetY are all zero, whic
21684 // they are in these tests
21685 //test_2d_shadow_composite_3();
21686 //test_2d_shadow_composite_4();
21687 try {
21688 test_2d_canvas_readonly();
21689 } catch (e) {
21690 ok(false, "unexpected exception thrown in: test_2d_canvas_readonly");
21691 }
21692 try {
21693 test_2d_canvas_reference();
21694 } catch (e) {
21695 ok(false, "unexpected exception thrown in: test_2d_canvas_reference");
21696 }
21697 try {
21698 test_2d_clearRect_basic();
21699 } catch (e) {
21700 ok(false, "unexpected exception thrown in: test_2d_clearRect_basic");
21701 }
21702 try {
21703 test_2d_clearRect_clip();
21704 } catch (e) {
21705 ok(false, "unexpected exception thrown in: test_2d_clearRect_clip");
21706 }
21707 try {
21708 test_2d_clearRect_globalalpha();
21709 } catch (e) {
21710 ok(false, "unexpected exception thrown in: test_2d_clearRect_globalalpha");
21711 }
21712 try {
21713 test_2d_clearRect_globalcomposite();
21714 } catch (e) {
21715 ok(false, "unexpected exception thrown in: test_2d_clearRect_globalcomposite");
21716 }
21717 try {
21718 test_2d_clearRect_negative();
21719 } catch (e) {
21720 ok(false, "unexpected exception thrown in: test_2d_clearRect_negative");
21721 }
21722 try {
21723 test_2d_clearRect_nonfinite();
21724 } catch (e) {
21725 ok(false, "unexpected exception thrown in: test_2d_clearRect_nonfinite");
21726 }
21727 try {
21728 test_2d_clearRect_path();
21729 } catch (e) {
21730 ok(false, "unexpected exception thrown in: test_2d_clearRect_path");
21731 }
21732 try {
21733 test_2d_clearRect_shadow();
21734 } catch (e) {
21735 ok(false, "unexpected exception thrown in: test_2d_clearRect_shadow");
21736 }
21737 try {
21738 test_2d_clearRect_transform();
21739 } catch (e) {
21740 ok(false, "unexpected exception thrown in: test_2d_clearRect_transform");
21741 }
21742 try {
21743 test_2d_clearRect_zero();
21744 } catch (e) {
21745 ok(false, "unexpected exception thrown in: test_2d_clearRect_zero");
21746 }
21747 try {
21748 test_2d_composite_canvas_copy();
21749 } catch (e) {
21750 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_copy");
21751 }
21752 try {
21753 test_2d_composite_canvas_destination_out();
21754 } catch (e) {
21755 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_destination_out");
21756 }
21757 try {
21758 test_2d_composite_canvas_destination_over();
21759 } catch (e) {
21760 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_destination_over");
21761 }
21762 try {
21763 test_2d_composite_canvas_source_atop();
21764 } catch (e) {
21765 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_source_atop");
21766 }
21767 try {
21768 test_2d_composite_canvas_source_over();
21769 } catch (e) {
21770 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_source_over");
21771 }
21772 try {
21773 test_2d_composite_clip_copy();
21774 } catch (e) {
21775 ok(false, "unexpected exception thrown in: test_2d_composite_clip_copy");
21776 }
21777 try {
21778 test_2d_composite_clip_destination_atop();
21779 } catch (e) {
21780 ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_atop");
21781 }
21782 try {
21783 test_2d_composite_clip_destination_in();
21784 } catch (e) {
21785 ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_in");
21786 }
21787 try {
21788 test_2d_composite_clip_destination_out();
21789 } catch (e) {
21790 ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_out");
21791 }
21792 try {
21793 test_2d_composite_clip_destination_over();
21794 } catch (e) {
21795 ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_over");
21796 }
21797 try {
21798 test_2d_composite_clip_source_atop();
21799 } catch (e) {
21800 ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_atop");
21801 }
21802 try {
21803 test_2d_composite_clip_source_in();
21804 } catch (e) {
21805 ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_in");
21806 }
21807 try {
21808 test_2d_composite_clip_source_out();
21809 } catch (e) {
21810 ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_out");
21811 }
21812 try {
21813 test_2d_composite_clip_source_over();
21814 } catch (e) {
21815 ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_over");
21816 }
21817 try {
21818 test_2d_composite_globalAlpha_canvas();
21819 } catch (e) {
21820 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_canvas");
21821 }
21822 try {
21823 test_2d_composite_globalAlpha_canvaspattern();
21824 } catch (e) {
21825 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_canvaspattern");
21826 }
21827 try {
21828 test_2d_composite_globalAlpha_default();
21829 } catch (e) {
21830 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_default");
21831 }
21832 try {
21833 test_2d_composite_globalAlpha_fill();
21834 } catch (e) {
21835 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_fill");
21836 }
21837 try {
21838 test_2d_composite_globalAlpha_image();
21839 } catch (e) {
21840 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_image");
21841 }
21842 try {
21843 test_2d_composite_globalAlpha_imagepattern();
21844 } catch (e) {
21845 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_imagepattern");
21846 }
21847 try {
21848 test_2d_composite_globalAlpha_invalid();
21849 } catch (e) {
21850 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_invalid");
21851 }
21852 try {
21853 test_2d_composite_globalAlpha_range();
21854 } catch (e) {
21855 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_range");
21856 }
21857 try {
21858 test_2d_composite_image_copy();
21859 } catch (e) {
21860 ok(false, "unexpected exception thrown in: test_2d_composite_image_copy");
21861 }
21862 try {
21863 test_2d_composite_image_destination_out();
21864 } catch (e) {
21865 ok(false, "unexpected exception thrown in: test_2d_composite_image_destination_out");
21866 }
21867 try {
21868 test_2d_composite_image_destination_over();
21869 } catch (e) {
21870 ok(false, "unexpected exception thrown in: test_2d_composite_image_destination_over");
21871 }
21872 try {
21873 test_2d_composite_image_source_atop();
21874 } catch (e) {
21875 ok(false, "unexpected exception thrown in: test_2d_composite_image_source_atop");
21876 }
21877 try {
21878 test_2d_composite_image_source_over();
21879 } catch (e) {
21880 ok(false, "unexpected exception thrown in: test_2d_composite_image_source_over");
21881 }
21882 try {
21883 test_2d_composite_operation_casesensitive();
21884 } catch (e) {
21885 ok(false, "unexpected exception thrown in: test_2d_composite_operation_casesensitive");
21886 }
21887 try {
21888 test_2d_composite_operation_clear();
21889 } catch (e) {
21890 ok(false, "unexpected exception thrown in: test_2d_composite_operation_clear");
21891 }
21892 try {
21893 test_2d_composite_operation_darker();
21894 } catch (e) {
21895 ok(false, "unexpected exception thrown in: test_2d_composite_operation_darker");
21896 }
21897 try {
21898 test_2d_composite_operation_default();
21899 } catch (e) {
21900 ok(false, "unexpected exception thrown in: test_2d_composite_operation_default");
21901 }
21902 try {
21903 test_2d_composite_operation_get();
21904 } catch (e) {
21905 ok(false, "unexpected exception thrown in: test_2d_composite_operation_get");
21906 }
21907 try {
21908 test_2d_composite_operation_highlight();
21909 } catch (e) {
21910 ok(false, "unexpected exception thrown in: test_2d_composite_operation_highlight");
21911 }
21912 try {
21913 test_2d_composite_operation_nullsuffix();
21914 } catch (e) {
21915 ok(false, "unexpected exception thrown in: test_2d_composite_operation_nullsuffix");
21916 }
21917 try {
21918 test_2d_composite_operation_over();
21919 } catch (e) {
21920 ok(false, "unexpected exception thrown in: test_2d_composite_operation_over");
21921 }
21922 try {
21923 test_2d_composite_operation_unrecognised();
21924 } catch (e) {
21925 ok(false, "unexpected exception thrown in: test_2d_composite_operation_unrecognised");
21926 }
21927 try {
21928 test_2d_composite_solid_copy();
21929 } catch (e) {
21930 ok(false, "unexpected exception thrown in: test_2d_composite_solid_copy");
21931 }
21932 try {
21933 test_2d_composite_solid_destination_atop();
21934 } catch (e) {
21935 ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_atop");
21936 }
21937 try {
21938 test_2d_composite_solid_destination_in();
21939 } catch (e) {
21940 ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_in");
21941 }
21942 try {
21943 test_2d_composite_solid_destination_out();
21944 } catch (e) {
21945 ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_out");
21946 }
21947 try {
21948 test_2d_composite_solid_destination_over();
21949 } catch (e) {
21950 ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_over");
21951 }
21952 try {
21953 test_2d_composite_solid_source_atop();
21954 } catch (e) {
21955 ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_atop");
21956 }
21957 try {
21958 test_2d_composite_solid_source_in();
21959 } catch (e) {
21960 ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_in");
21961 }
21962 try {
21963 test_2d_composite_solid_source_out();
21964 } catch (e) {
21965 ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_out");
21966 }
21967 try {
21968 test_2d_composite_solid_source_over();
21969 } catch (e) {
21970 ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_over");
21971 }
21972 try {
21973 test_2d_composite_transparent_copy();
21974 } catch (e) {
21975 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_copy");
21976 }
21977 try {
21978 test_2d_composite_transparent_destination_atop();
21979 } catch (e) {
21980 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_atop");
21981 }
21982 try {
21983 test_2d_composite_transparent_destination_in();
21984 } catch (e) {
21985 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_in");
21986 }
21987 try {
21988 test_2d_composite_transparent_destination_out();
21989 } catch (e) {
21990 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_out");
21991 }
21992 try {
21993 test_2d_composite_transparent_destination_over();
21994 } catch (e) {
21995 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_over");
21996 }
21997 try {
21998 test_2d_composite_transparent_source_atop();
21999 } catch (e) {
22000 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_atop");
22001 }
22002 try {
22003 test_2d_composite_transparent_source_in();
22004 } catch (e) {
22005 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_in");
22006 }
22007 try {
22008 test_2d_composite_transparent_source_out();
22009 } catch (e) {
22010 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_out");
22011 }
22012 try {
22013 test_2d_composite_transparent_source_over();
22014 } catch (e) {
22015 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_over");
22016 }
22017 try {
22018 test_2d_composite_uncovered_fill_copy();
22019 } catch (e) {
22020 ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_fill_copy");
22021 }
22022 try {
22023 test_2d_composite_uncovered_image_copy();
22024 } catch (e) {
22025 ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_image_copy");
22026 }
22027 try {
22028 test_2d_composite_uncovered_pattern_copy();
22029 } catch (e) {
22030 ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_pattern_copy");
22031 }
22032 try {
22033 test_2d_drawImage_3arg();
22034 } catch (e) {
22035 ok(false, "unexpected exception thrown in: test_2d_drawImage_3arg");
22036 }
22037 try {
22038 test_2d_drawImage_5arg();
22039 } catch (e) {
22040 ok(false, "unexpected exception thrown in: test_2d_drawImage_5arg");
22041 }
22042 try {
22043 test_2d_drawImage_9arg_basic();
22044 } catch (e) {
22045 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_basic");
22046 }
22047 try {
22048 test_2d_drawImage_9arg_destpos();
22049 } catch (e) {
22050 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_destpos");
22051 }
22052 try {
22053 test_2d_drawImage_9arg_destsize();
22054 } catch (e) {
22055 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_destsize");
22056 }
22057 try {
22058 test_2d_drawImage_9arg_sourcepos();
22059 } catch (e) {
22060 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_sourcepos");
22061 }
22062 try {
22063 test_2d_drawImage_9arg_sourcesize();
22064 } catch (e) {
22065 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_sourcesize");
22066 }
22067 try {
22068 test_2d_drawImage_alpha();
22069 } catch (e) {
22070 ok(false, "unexpected exception thrown in: test_2d_drawImage_alpha");
22071 }
22072 try {
22073 test_2d_drawImage_animated_poster();
22074 } catch (e) {
22075 ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_poster");
22076 }
22077 try {
22078 test_2d_drawImage_broken();
22079 } catch (e) {
22080 ok(false, "unexpected exception thrown in: test_2d_drawImage_broken");
22081 }
22082 try {
22083 test_2d_drawImage_canvas();
22084 } catch (e) {
22085 ok(false, "unexpected exception thrown in: test_2d_drawImage_canvas");
22086 }
22087 try {
22088 test_2d_drawImage_clip();
22089 } catch (e) {
22090 ok(false, "unexpected exception thrown in: test_2d_drawImage_clip");
22091 }
22092 try {
22093 test_2d_drawImage_composite();
22094 } catch (e) {
22095 ok(false, "unexpected exception thrown in: test_2d_drawImage_composite");
22096 }
22097 try {
22098 test_2d_drawImage_floatsource();
22099 } catch (e) {
22100 ok(false, "unexpected exception thrown in: test_2d_drawImage_floatsource");
22101 }
22102 try {
22103 test_2d_drawImage_incomplete();
22104 } catch (e) {
22105 ok(false, "unexpected exception thrown in: test_2d_drawImage_incomplete");
22106 }
22107 try {
22108 test_2d_drawImage_negativedest();
22109 } catch (e) {
22110 ok(false, "unexpected exception thrown in: test_2d_drawImage_negativedest");
22111 }
22112 try {
22113 test_2d_drawImage_negativesource();
22114 } catch (e) {
22115 ok(false, "unexpected exception thrown in: test_2d_drawImage_negativesource");
22116 }
22117 try {
22118 test_2d_drawImage_nonfinite();
22119 } catch (e) {
22120 ok(false, "unexpected exception thrown in: test_2d_drawImage_nonfinite");
22121 }
22122 try {
22123 test_2d_drawImage_nowrap();
22124 } catch (e) {
22125 ok(false, "unexpected exception thrown in: test_2d_drawImage_nowrap");
22126 }
22127 try {
22128 test_2d_drawImage_null();
22129 } catch (e) {
22130 ok(false, "unexpected exception thrown in: test_2d_drawImage_null");
22131 }
22132 try {
22133 test_2d_drawImage_outsidesource();
22134 } catch (e) {
22135 ok(false, "unexpected exception thrown in: test_2d_drawImage_outsidesource");
22136 }
22137 try {
22138 test_2d_drawImage_path();
22139 } catch (e) {
22140 ok(false, "unexpected exception thrown in: test_2d_drawImage_path");
22141 }
22142 try {
22143 test_2d_drawImage_self_1();
22144 } catch (e) {
22145 ok(false, "unexpected exception thrown in: test_2d_drawImage_self_1");
22146 }
22147 try {
22148 test_2d_drawImage_self_2();
22149 } catch (e) {
22150 ok(false, "unexpected exception thrown in: test_2d_drawImage_self_2");
22151 }
22152 try {
22153 test_2d_drawImage_transform();
22154 } catch (e) {
22155 ok(false, "unexpected exception thrown in: test_2d_drawImage_transform");
22156 }
22157 try {
22158 test_2d_drawImage_wrongtype();
22159 } catch (e) {
22160 ok(false, "unexpected exception thrown in: test_2d_drawImage_wrongtype");
22161 }
22162 try {
22163 test_2d_drawImage_zerosource();
22164 } catch (e) {
22165 ok(false, "unexpected exception thrown in: test_2d_drawImage_zerosource");
22166 }
22167 try {
22168 test_2d_fillRect_basic();
22169 } catch (e) {
22170 ok(false, "unexpected exception thrown in: test_2d_fillRect_basic");
22171 }
22172 try {
22173 test_2d_fillRect_clip();
22174 } catch (e) {
22175 ok(false, "unexpected exception thrown in: test_2d_fillRect_clip");
22176 }
22177 try {
22178 test_2d_fillRect_negative();
22179 } catch (e) {
22180 ok(false, "unexpected exception thrown in: test_2d_fillRect_negative");
22181 }
22182 try {
22183 test_2d_fillRect_nonfinite();
22184 } catch (e) {
22185 ok(false, "unexpected exception thrown in: test_2d_fillRect_nonfinite");
22186 }
22187 try {
22188 test_2d_fillRect_path();
22189 } catch (e) {
22190 ok(false, "unexpected exception thrown in: test_2d_fillRect_path");
22191 }
22192 try {
22193 test_2d_fillRect_shadow();
22194 } catch (e) {
22195 ok(false, "unexpected exception thrown in: test_2d_fillRect_shadow");
22196 }
22197 try {
22198 test_2d_fillRect_transform();
22199 } catch (e) {
22200 ok(false, "unexpected exception thrown in: test_2d_fillRect_transform");
22201 }
22202 try {
22203 test_2d_fillRect_zero();
22204 } catch (e) {
22205 ok(false, "unexpected exception thrown in: test_2d_fillRect_zero");
22206 }
22207 try {
22208 test_2d_fillStyle_default();
22209 } catch (e) {
22210 ok(false, "unexpected exception thrown in: test_2d_fillStyle_default");
22211 }
22212 try {
22213 test_2d_fillStyle_get_semitransparent();
22214 } catch (e) {
22215 ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_semitransparent");
22216 }
22217 try {
22218 test_2d_fillStyle_get_solid();
22219 } catch (e) {
22220 ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_solid");
22221 }
22222 try {
22223 test_2d_fillStyle_get_transparent();
22224 } catch (e) {
22225 ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_transparent");
22226 }
22227 try {
22228 test_2d_fillStyle_invalidstring();
22229 } catch (e) {
22230 ok(false, "unexpected exception thrown in: test_2d_fillStyle_invalidstring");
22231 }
22232 try {
22233 test_2d_fillStyle_invalidtype();
22234 } catch (e) {
22235 ok(false, "unexpected exception thrown in: test_2d_fillStyle_invalidtype");
22236 }
22237 try {
22238 test_2d_fillStyle_parse_current_basic();
22239 } catch (e) {
22240 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_basic");
22241 }
22242 try {
22243 test_2d_fillStyle_parse_current_changed();
22244 } catch (e) {
22245 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_changed");
22246 }
22247 try {
22248 test_2d_fillStyle_parse_current_removed();
22249 } catch (e) {
22250 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_removed");
22251 }
22252 try {
22253 test_2d_fillStyle_parse_hex3();
22254 } catch (e) {
22255 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hex3");
22256 }
22257 try {
22258 test_2d_fillStyle_parse_hex6();
22259 } catch (e) {
22260 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hex6");
22261 }
22262 try {
22263 test_2d_fillStyle_parse_hsl_1();
22264 } catch (e) {
22265 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_1");
22266 }
22267 try {
22268 test_2d_fillStyle_parse_hsl_2();
22269 } catch (e) {
22270 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_2");
22271 }
22272 try {
22273 test_2d_fillStyle_parse_hsl_3();
22274 } catch (e) {
22275 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_3");
22276 }
22277 try {
22278 test_2d_fillStyle_parse_hsl_4();
22279 } catch (e) {
22280 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_4");
22281 }
22282 try {
22283 test_2d_fillStyle_parse_hsl_5();
22284 } catch (e) {
22285 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_5");
22286 }
22287 try {
22288 test_2d_fillStyle_parse_hsl_clamp_1();
22289 } catch (e) {
22290 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_1");
22291 }
22292 try {
22293 test_2d_fillStyle_parse_hsl_clamp_2();
22294 } catch (e) {
22295 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_2");
22296 }
22297 try {
22298 test_2d_fillStyle_parse_hsl_clamp_3();
22299 } catch (e) {
22300 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_3");
22301 }
22302 try {
22303 test_2d_fillStyle_parse_hsl_clamp_4();
22304 } catch (e) {
22305 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_4");
22306 }
22307 try {
22308 test_2d_fillStyle_parse_hsla_1();
22309 } catch (e) {
22310 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_1");
22311 }
22312 try {
22313 test_2d_fillStyle_parse_hsla_2();
22314 } catch (e) {
22315 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_2");
22316 }
22317 try {
22318 test_2d_fillStyle_parse_hsla_clamp_1();
22319 } catch (e) {
22320 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_1");
22321 }
22322 try {
22323 test_2d_fillStyle_parse_hsla_clamp_2();
22324 } catch (e) {
22325 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_2");
22326 }
22327 try {
22328 test_2d_fillStyle_parse_hsla_clamp_3();
22329 } catch (e) {
22330 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_3");
22331 }
22332 try {
22333 test_2d_fillStyle_parse_hsla_clamp_4();
22334 } catch (e) {
22335 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_4");
22336 }
22337 try {
22338 test_2d_fillStyle_parse_hsla_clamp_5();
22339 } catch (e) {
22340 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_5");
22341 }
22342 try {
22343 test_2d_fillStyle_parse_hsla_clamp_6();
22344 } catch (e) {
22345 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_6");
22346 }
22347 try {
22348 test_2d_fillStyle_parse_html4();
22349 } catch (e) {
22350 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_html4");
22351 }
22352 try {
22353 test_2d_fillStyle_parse_invalid_hex3();
22354 } catch (e) {
22355 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hex3");
22356 }
22357 try {
22358 test_2d_fillStyle_parse_invalid_hex6();
22359 } catch (e) {
22360 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hex6");
22361 }
22362 try {
22363 test_2d_fillStyle_parse_invalid_hsl_1();
22364 } catch (e) {
22365 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_1");
22366 }
22367 try {
22368 test_2d_fillStyle_parse_invalid_hsl_2();
22369 } catch (e) {
22370 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_2");
22371 }
22372 try {
22373 test_2d_fillStyle_parse_invalid_hsl_3();
22374 } catch (e) {
22375 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_3");
22376 }
22377 try {
22378 test_2d_fillStyle_parse_invalid_hsl_4();
22379 } catch (e) {
22380 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_4");
22381 }
22382 try {
22383 test_2d_fillStyle_parse_invalid_hsl_5();
22384 } catch (e) {
22385 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_5");
22386 }
22387 try {
22388 test_2d_fillStyle_parse_invalid_hsla_1();
22389 } catch (e) {
22390 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsla_1");
22391 }
22392 try {
22393 test_2d_fillStyle_parse_invalid_hsla_2();
22394 } catch (e) {
22395 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsla_2");
22396 }
22397 try {
22398 test_2d_fillStyle_parse_invalid_name_1()
22399 } catch (e) {
22400 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_1");
22401 }
22402 try {
22403 test_2d_fillStyle_parse_invalid_name_2()
22404 } catch (e) {
22405 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_2");
22406 }
22407 try {
22408 test_2d_fillStyle_parse_invalid_name_3()
22409 } catch (e) {
22410 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_3");
22411 }
22412 try {
22413 test_2d_fillStyle_parse_invalid_rgb_1();
22414 } catch (e) {
22415 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_1");
22416 }
22417 try {
22418 test_2d_fillStyle_parse_invalid_rgb_2();
22419 } catch (e) {
22420 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_2");
22421 }
22422 try {
22423 test_2d_fillStyle_parse_invalid_rgb_3();
22424 } catch (e) {
22425 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_3");
22426 }
22427 try {
22428 test_2d_fillStyle_parse_invalid_rgb_4();
22429 } catch (e) {
22430 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_4");
22431 }
22432 try {
22433 test_2d_fillStyle_parse_invalid_rgb_5();
22434 } catch (e) {
22435 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_5");
22436 }
22437 try {
22438 test_2d_fillStyle_parse_invalid_rgb_6();
22439 } catch (e) {
22440 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_6");
22441 }
22442 try {
22443 test_2d_fillStyle_parse_invalid_rgb_7();
22444 } catch (e) {
22445 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_7");
22446 }
22447 try {
22448 test_2d_fillStyle_parse_invalid_rgba_1();
22449 } catch (e) {
22450 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_1");
22451 }
22452 try {
22453 test_2d_fillStyle_parse_invalid_rgba_2();
22454 } catch (e) {
22455 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_2");
22456 }
22457 try {
22458 test_2d_fillStyle_parse_invalid_rgba_3();
22459 } catch (e) {
22460 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_3");
22461 }
22462 try {
22463 test_2d_fillStyle_parse_invalid_rgba_4();
22464 } catch (e) {
22465 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_4");
22466 }
22467 try {
22468 test_2d_fillStyle_parse_invalid_rgba_5();
22469 } catch (e) {
22470 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_5");
22471 }
22472 try {
22473 test_2d_fillStyle_parse_rgb_clamp_1();
22474 } catch (e) {
22475 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_1");
22476 }
22477 try {
22478 test_2d_fillStyle_parse_rgb_clamp_2();
22479 } catch (e) {
22480 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_2");
22481 }
22482 try {
22483 test_2d_fillStyle_parse_rgb_clamp_3();
22484 } catch (e) {
22485 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_3");
22486 }
22487 try {
22488 test_2d_fillStyle_parse_rgb_clamp_4();
22489 } catch (e) {
22490 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_4");
22491 }
22492 try {
22493 test_2d_fillStyle_parse_rgb_clamp_5();
22494 } catch (e) {
22495 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_5");
22496 }
22497 try {
22498 test_2d_fillStyle_parse_rgb_num();
22499 } catch (e) {
22500 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_num");
22501 }
22502 try {
22503 test_2d_fillStyle_parse_rgb_percent();
22504 } catch (e) {
22505 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_percent");
22506 }
22507 try {
22508 test_2d_fillStyle_parse_rgba_clamp_1();
22509 } catch (e) {
22510 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_clamp_1");
22511 }
22512 try {
22513 test_2d_fillStyle_parse_rgba_clamp_2();
22514 } catch (e) {
22515 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_clamp_2");
22516 }
22517 try {
22518 test_2d_fillStyle_parse_rgba_num_1();
22519 } catch (e) {
22520 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_num_1");
22521 }
22522 try {
22523 test_2d_fillStyle_parse_rgba_num_2();
22524 } catch (e) {
22525 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_num_2");
22526 }
22527 try {
22528 test_2d_fillStyle_parse_rgba_percent();
22529 } catch (e) {
22530 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_percent");
22531 }
22532 try {
22533 test_2d_fillStyle_parse_rgba_solid_1();
22534 } catch (e) {
22535 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_solid_1");
22536 }
22537 try {
22538 test_2d_fillStyle_parse_rgba_solid_2();
22539 } catch (e) {
22540 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_solid_2");
22541 }
22542 try {
22543 test_2d_fillStyle_parse_svg_1();
22544 } catch (e) {
22545 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_svg_1");
22546 }
22547 try {
22548 test_2d_fillStyle_parse_svg_2();
22549 } catch (e) {
22550 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_svg_2");
22551 }
22552 try {
22553 test_2d_fillStyle_parse_system();
22554 } catch (e) {
22555 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_system");
22556 }
22557 try {
22558 test_2d_fillStyle_parse_transparent_1();
22559 } catch (e) {
22560 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_transparent_1");
22561 }
22562 try {
22563 test_2d_fillStyle_parse_transparent_2();
22564 } catch (e) {
22565 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_transparent_2");
22566 }
22567 try {
22568 test_2d_getcontext_exists();
22569 } catch (e) {
22570 ok(false, "unexpected exception thrown in: test_2d_getcontext_exists");
22571 }
22572 try {
22573 test_2d_getcontext_shared();
22574 } catch (e) {
22575 ok(false, "unexpected exception thrown in: test_2d_getcontext_shared");
22576 }
22577 try {
22578 test_2d_getcontext_unique();
22579 } catch (e) {
22580 ok(false, "unexpected exception thrown in: test_2d_getcontext_unique");
22581 }
22582 try {
22583 test_2d_gradient_empty();
22584 } catch (e) {
22585 ok(false, "unexpected exception thrown in: test_2d_gradient_empty");
22586 }
22587 try {
22588 test_2d_gradient_interpolate_alpha();
22589 } catch (e) {
22590 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_alpha");
22591 }
22592 try {
22593 test_2d_gradient_interpolate_colour();
22594 } catch (e) {
22595 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_colour");
22596 }
22597 try {
22598 test_2d_gradient_interpolate_colouralpha();
22599 } catch (e) {
22600 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_colouralpha");
22601 }
22602 try {
22603 test_2d_gradient_interpolate_multiple();
22604 } catch (e) {
22605 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_multiple");
22606 }
22607 try {
22608 test_2d_gradient_interpolate_outside();
22609 } catch (e) {
22610 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_outside");
22611 }
22612 try {
22613 test_2d_gradient_interpolate_overlap();
22614 } catch (e) {
22615 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_overlap");
22616 }
22617 try {
22618 test_2d_gradient_interpolate_overlap2();
22619 } catch (e) {
22620 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_overlap2");
22621 }
22622 try {
22623 test_2d_gradient_interpolate_solid();
22624 } catch (e) {
22625 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_solid");
22626 }
22627 try {
22628 test_2d_gradient_interpolate_vertical();
22629 } catch (e) {
22630 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_vertical");
22631 }
22632 try {
22633 test_2d_gradient_interpolate_zerosize();
22634 } catch (e) {
22635 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_zerosize");
22636 }
22637 try {
22638 test_2d_gradient_linear_nonfinite();
22639 } catch (e) {
22640 ok(false, "unexpected exception thrown in: test_2d_gradient_linear_nonfinite");
22641 }
22642 try {
22643 test_2d_gradient_linear_transform_1();
22644 } catch (e) {
22645 ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_1");
22646 }
22647 try {
22648 test_2d_gradient_linear_transform_2();
22649 } catch (e) {
22650 ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_2");
22651 }
22652 try {
22653 test_2d_gradient_linear_transform_3();
22654 } catch (e) {
22655 ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_3");
22656 }
22657 try {
22658 test_2d_gradient_object_compare();
22659 } catch (e) {
22660 ok(false, "unexpected exception thrown in: test_2d_gradient_object_compare");
22661 }
22662 try {
22663 test_2d_gradient_object_crosscanvas();
22664 } catch (e) {
22665 ok(false, "unexpected exception thrown in: test_2d_gradient_object_crosscanvas");
22666 }
22667 try {
22668 test_2d_gradient_object_invalidcolour();
22669 } catch (e) {
22670 ok(false, "unexpected exception thrown in: test_2d_gradient_object_invalidcolour");
22671 }
22672 try {
22673 test_2d_gradient_object_invalidoffset();
22674 } catch (e) {
22675 ok(false, "unexpected exception thrown in: test_2d_gradient_object_invalidoffset");
22676 }
22677 try {
22678 test_2d_gradient_object_return();
22679 } catch (e) {
22680 ok(false, "unexpected exception thrown in: test_2d_gradient_object_return");
22681 }
22682 try {
22683 test_2d_gradient_object_type();
22684 } catch (e) {
22685 ok(false, "unexpected exception thrown in: test_2d_gradient_object_type");
22686 }
22687 try {
22688 test_2d_gradient_object_update();
22689 } catch (e) {
22690 ok(false, "unexpected exception thrown in: test_2d_gradient_object_update");
22691 }
22692 try {
22693 test_2d_gradient_radial_cone_bottom();
22694 } catch (e) {
22695 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_bottom");
22696 }
22697 try {
22698 test_2d_gradient_radial_cone_cylinder();
22699 } catch (e) {
22700 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_cylinder");
22701 }
22702 try {
22703 test_2d_gradient_radial_cone_shape1();
22704 } catch (e) {
22705 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_shape1");
22706 }
22707 try {
22708 test_2d_gradient_radial_inside1();
22709 } catch (e) {
22710 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_inside1");
22711 }
22712 try {
22713 test_2d_gradient_radial_negative();
22714 } catch (e) {
22715 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_negative");
22716 }
22717 try {
22718 test_2d_gradient_radial_nonfinite();
22719 } catch (e) {
22720 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_nonfinite");
22721 }
22722 try {
22723 test_2d_gradient_radial_transform_1();
22724 } catch (e) {
22725 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_1");
22726 }
22727 try {
22728 test_2d_gradient_radial_transform_2();
22729 } catch (e) {
22730 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_2");
22731 }
22732 try {
22733 test_2d_gradient_radial_transform_3();
22734 } catch (e) {
22735 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_3");
22736 }
22737 try {
22738 test_2d_imageData_create_basic();
22739 } catch (e) {
22740 ok(false, "unexpected exception thrown in: test_2d_imageData_create_basic");
22741 }
22742 try {
22743 test_2d_imageData_create1_basic();
22744 } catch (e) {
22745 ok(false, "unexpected exception thrown in: test_2d_imageData_create1_basic");
22746 }
22747 try {
22748 test_2d_imageData_create_initial();
22749 } catch (e) {
22750 ok(false, "unexpected exception thrown in: test_2d_imageData_create_initial");
22751 }
22752 try {
22753 test_2d_imageData_create1_initial();
22754 } catch (e) {
22755 ok(false, "unexpected exception thrown in: test_2d_imageData_create1_initial");
22756 }
22757 try {
22758 test_2d_imageData_create_large();
22759 } catch (e) {
22760 ok(false, "unexpected exception thrown in: test_2d_imageData_create_large");
22761 }
22762 try {
22763 test_2d_imageData_create_negative();
22764 } catch (e) {
22765 ok(false, "unexpected exception thrown in: test_2d_imageData_create_negative");
22766 }
22767 try {
22768 test_2d_imageData_create_nonfinite();
22769 } catch (e) {
22770 ok(false, "unexpected exception thrown in: test_2d_imageData_create_nonfinite");
22771 }
22772 try {
22773 test_2d_imageData_create_round();
22774 } catch (e) {
22775 ok(false, "unexpected exception thrown in: test_2d_imageData_create_round");
22776 }
22777 try {
22778 test_2d_imageData_create_tiny();
22779 } catch (e) {
22780 ok(false, "unexpected exception thrown in: test_2d_imageData_create_tiny");
22781 }
22782 try {
22783 test_2d_imageData_create_type();
22784 } catch (e) {
22785 ok(false, "unexpected exception thrown in: test_2d_imageData_create_type");
22786 }
22787 try {
22788 test_2d_imageData_create1_type();
22789 } catch (e) {
22790 ok(false, "unexpected exception thrown in: test_2d_imageData_create1_type");
22791 }
22792 try {
22793 test_2d_imageData_create_zero();
22794 } catch (e) {
22795 ok(false, "unexpected exception thrown in: test_2d_imageData_create_zero");
22796 }
22797 try {
22798 test_2d_imageData_create1_zero();
22799 } catch (e) {
22800 ok(false, "unexpected exception thrown in: test_2d_imageData_create1_zero");
22801 }
22802 try {
22803 test_2d_imageData_get_basic();
22804 } catch (e) {
22805 ok(false, "unexpected exception thrown in: test_2d_imageData_get_basic");
22806 }
22807 try {
22808 test_2d_imageData_get_clamp();
22809 } catch (e) {
22810 ok(false, "unexpected exception thrown in: test_2d_imageData_get_clamp");
22811 }
22812 try {
22813 test_2d_imageData_get_nonfinite();
22814 } catch (e) {
22815 ok(false, "unexpected exception thrown in: test_2d_imageData_get_nonfinite");
22816 }
22817 try {
22818 test_2d_imageData_get_nonpremul();
22819 } catch (e) {
22820 ok(false, "unexpected exception thrown in: test_2d_imageData_get_nonpremul");
22821 }
22822 try {
22823 test_2d_imageData_get_order_alpha();
22824 } catch (e) {
22825 ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_alpha");
22826 }
22827 try {
22828 test_2d_imageData_get_order_cols();
22829 } catch (e) {
22830 ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_cols");
22831 }
22832 try {
22833 test_2d_imageData_get_order_rgb();
22834 } catch (e) {
22835 ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_rgb");
22836 }
22837 try {
22838 test_2d_imageData_get_order_rows();
22839 } catch (e) {
22840 ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_rows");
22841 }
22842 try {
22843 test_2d_imageData_get_range();
22844 } catch (e) {
22845 ok(false, "unexpected exception thrown in: test_2d_imageData_get_range");
22846 }
22847 try {
22848 test_2d_imageData_get_source_negative();
22849 } catch (e) {
22850 ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_negative");
22851 }
22852 try {
22853 test_2d_imageData_get_source_outside();
22854 } catch (e) {
22855 ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_outside");
22856 }
22857 try {
22858 test_2d_imageData_get_source_size();
22859 } catch (e) {
22860 ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_size");
22861 }
22862 try {
22863 test_2d_imageData_get_tiny();
22864 } catch (e) {
22865 ok(false, "unexpected exception thrown in: test_2d_imageData_get_tiny");
22866 }
22867 try {
22868 test_2d_imageData_get_type();
22869 } catch (e) {
22870 ok(false, "unexpected exception thrown in: test_2d_imageData_get_type");
22871 }
22872 try {
22873 test_2d_imageData_get_unaffected();
22874 } catch (e) {
22875 ok(false, "unexpected exception thrown in: test_2d_imageData_get_unaffected");
22876 }
22877 try {
22878 test_2d_imageData_get_zero();
22879 } catch (e) {
22880 ok(false, "unexpected exception thrown in: test_2d_imageData_get_zero");
22881 }
22882 try {
22883 test_2d_imageData_object_clamp();
22884 } catch (e) {
22885 ok(false, "unexpected exception thrown in: test_2d_imageData_object_clamp");
22886 }
22887 try {
22888 test_2d_imageData_object_ctor();
22889 } catch (e) {
22890 ok(false, "unexpected exception thrown in: test_2d_imageData_object_ctor");
22891 }
22892 try {
22893 test_2d_imageData_object_nan();
22894 } catch (e) {
22895 ok(false, "unexpected exception thrown in: test_2d_imageData_object_nan");
22896 }
22897 try {
22898 test_2d_imageData_object_properties();
22899 } catch (e) {
22900 ok(false, "unexpected exception thrown in: test_2d_imageData_object_properties");
22901 }
22902 try {
22903 test_2d_imageData_object_readonly();
22904 } catch (e) {
22905 ok(false, "unexpected exception thrown in: test_2d_imageData_object_readonly");
22906 }
22907 try {
22908 test_2d_imageData_object_round();
22909 } catch (e) {
22910 ok(false, "unexpected exception thrown in: test_2d_imageData_object_round");
22911 }
22912 try {
22913 test_2d_imageData_object_set();
22914 } catch (e) {
22915 ok(false, "unexpected exception thrown in: test_2d_imageData_object_set");
22916 }
22917 try {
22918 test_2d_imageData_object_string();
22919 } catch (e) {
22920 ok(false, "unexpected exception thrown in: test_2d_imageData_object_string");
22921 }
22922 try {
22923 test_2d_imageData_object_undefined();
22924 } catch (e) {
22925 ok(false, "unexpected exception thrown in: test_2d_imageData_object_undefined");
22926 }
22927 try {
22928 test_2d_imageData_put_alpha();
22929 } catch (e) {
22930 ok(false, "unexpected exception thrown in: test_2d_imageData_put_alpha");
22931 }
22932 try {
22933 test_2d_imageData_put_basic();
22934 } catch (e) {
22935 ok(false, "unexpected exception thrown in: test_2d_imageData_put_basic");
22936 }
22937 try {
22938 test_2d_imageData_put_clip();
22939 } catch (e) {
22940 ok(false, "unexpected exception thrown in: test_2d_imageData_put_clip");
22941 }
22942 try {
22943 test_2d_imageData_put_created();
22944 } catch (e) {
22945 ok(false, "unexpected exception thrown in: test_2d_imageData_put_created");
22946 }
22947 try {
22948 test_2d_imageData_put_cross();
22949 } catch (e) {
22950 ok(false, "unexpected exception thrown in: test_2d_imageData_put_cross");
22951 }
22952 try {
22953 test_2d_imageData_put_dirty_negative();
22954 } catch (e) {
22955 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_negative");
22956 }
22957 try {
22958 test_2d_imageData_put_dirty_outside();
22959 } catch (e) {
22960 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_outside");
22961 }
22962 try {
22963 test_2d_imageData_put_dirty_rect1();
22964 } catch (e) {
22965 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_rect1");
22966 }
22967 try {
22968 test_2d_imageData_put_dirty_rect2();
22969 } catch (e) {
22970 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_rect2");
22971 }
22972 try {
22973 test_2d_imageData_put_dirty_zero();
22974 } catch (e) {
22975 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_zero");
22976 }
22977 try {
22978 test_2d_imageData_put_modified();
22979 } catch (e) {
22980 ok(false, "unexpected exception thrown in: test_2d_imageData_put_modified");
22981 }
22982 try {
22983 test_2d_imageData_put_nonfinite();
22984 } catch (e) {
22985 ok(false, "unexpected exception thrown in: test_2d_imageData_put_nonfinite");
22986 }
22987 try {
22988 test_2d_imageData_put_null();
22989 } catch (e) {
22990 ok(false, "unexpected exception thrown in: test_2d_imageData_put_null");
22991 }
22992 try {
22993 test_2d_imageData_put_path();
22994 } catch (e) {
22995 ok(false, "unexpected exception thrown in: test_2d_imageData_put_path");
22996 }
22997 try {
22998 test_2d_imageData_put_unaffected();
22999 } catch (e) {
23000 ok(false, "unexpected exception thrown in: test_2d_imageData_put_unaffected");
23001 }
23002 try {
23003 test_2d_imageData_put_unchanged();
23004 } catch (e) {
23005 ok(false, "unexpected exception thrown in: test_2d_imageData_put_unchanged");
23006 }
23007 try {
23008 test_2d_imageData_put_wrongtype();
23009 } catch (e) {
23010 ok(false, "unexpected exception thrown in: test_2d_imageData_put_wrongtype");
23011 }
23012 try {
23013 test_2d_line_cap_butt();
23014 } catch (e) {
23015 ok(false, "unexpected exception thrown in: test_2d_line_cap_butt");
23016 }
23017 try {
23018 test_2d_line_cap_invalid();
23019 } catch (e) {
23020 ok(false, "unexpected exception thrown in: test_2d_line_cap_invalid");
23021 }
23022 try {
23023 test_2d_line_cap_open();
23024 } catch (e) {
23025 ok(false, "unexpected exception thrown in: test_2d_line_cap_open");
23026 }
23027 try {
23028 test_2d_line_cap_round();
23029 } catch (e) {
23030 ok(false, "unexpected exception thrown in: test_2d_line_cap_round");
23031 }
23032 try {
23033 test_2d_line_cap_square();
23034 } catch (e) {
23035 ok(false, "unexpected exception thrown in: test_2d_line_cap_square");
23036 }
23037 try {
23038 test_2d_line_cross();
23039 } catch (e) {
23040 ok(false, "unexpected exception thrown in: test_2d_line_cross");
23041 }
23042 try {
23043 test_2d_line_defaults();
23044 } catch (e) {
23045 ok(false, "unexpected exception thrown in: test_2d_line_defaults");
23046 }
23047 try {
23048 test_2d_line_join_bevel();
23049 } catch (e) {
23050 ok(false, "unexpected exception thrown in: test_2d_line_join_bevel");
23051 }
23052 try {
23053 test_2d_line_join_closed();
23054 } catch (e) {
23055 ok(false, "unexpected exception thrown in: test_2d_line_join_closed");
23056 }
23057 try {
23058 test_2d_line_join_invalid();
23059 } catch (e) {
23060 ok(false, "unexpected exception thrown in: test_2d_line_join_invalid");
23061 }
23062 try {
23063 test_2d_line_join_miter();
23064 } catch (e) {
23065 ok(false, "unexpected exception thrown in: test_2d_line_join_miter");
23066 }
23067 try {
23068 test_2d_line_join_open();
23069 } catch (e) {
23070 ok(false, "unexpected exception thrown in: test_2d_line_join_open");
23071 }
23072 try {
23073 test_2d_line_join_round();
23074 } catch (e) {
23075 ok(false, "unexpected exception thrown in: test_2d_line_join_round");
23076 }
23077 try {
23078 test_2d_line_miter_acute();
23079 } catch (e) {
23080 ok(false, "unexpected exception thrown in: test_2d_line_miter_acute");
23081 }
23082 try {
23083 test_2d_line_miter_exceeded();
23084 } catch (e) {
23085 ok(false, "unexpected exception thrown in: test_2d_line_miter_exceeded");
23086 }
23087 try {
23088 test_2d_line_miter_invalid();
23089 } catch (e) {
23090 ok(false, "unexpected exception thrown in: test_2d_line_miter_invalid");
23091 }
23092 try {
23093 test_2d_line_miter_lineedge();
23094 } catch (e) {
23095 ok(false, "unexpected exception thrown in: test_2d_line_miter_lineedge");
23096 }
23097 try {
23098 test_2d_line_miter_obtuse();
23099 } catch (e) {
23100 ok(false, "unexpected exception thrown in: test_2d_line_miter_obtuse");
23101 }
23102 try {
23103 test_2d_line_miter_rightangle();
23104 } catch (e) {
23105 ok(false, "unexpected exception thrown in: test_2d_line_miter_rightangle");
23106 }
23107 try {
23108 test_2d_line_miter_within();
23109 } catch (e) {
23110 ok(false, "unexpected exception thrown in: test_2d_line_miter_within");
23111 }
23112 try {
23113 test_2d_line_union();
23114 } catch (e) {
23115 ok(false, "unexpected exception thrown in: test_2d_line_union");
23116 }
23117 try {
23118 test_2d_line_width_basic();
23119 } catch (e) {
23120 ok(false, "unexpected exception thrown in: test_2d_line_width_basic");
23121 }
23122 try {
23123 test_2d_line_width_invalid();
23124 } catch (e) {
23125 ok(false, "unexpected exception thrown in: test_2d_line_width_invalid");
23126 }
23127 try {
23128 test_2d_line_width_transformed();
23129 } catch (e) {
23130 ok(false, "unexpected exception thrown in: test_2d_line_width_transformed");
23131 }
23132 try {
23133 test_2d_missingargs();
23134 } catch (e) {
23135 ok(false, "unexpected exception thrown in: test_2d_missingargs");
23136 }
23137 try {
23138 test_2d_path_arc_angle_1();
23139 } catch (e) {
23140 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_1");
23141 }
23142 try {
23143 test_2d_path_arc_angle_2();
23144 } catch (e) {
23145 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_2");
23146 }
23147 try {
23148 test_2d_path_arc_angle_3();
23149 } catch (e) {
23150 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_3");
23151 }
23152 try {
23153 test_2d_path_arc_angle_4();
23154 } catch (e) {
23155 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_4");
23156 }
23157 try {
23158 test_2d_path_arc_angle_5();
23159 } catch (e) {
23160 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_5");
23161 }
23162 try {
23163 test_2d_path_arc_angle_6();
23164 } catch (e) {
23165 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_6");
23166 }
23167 try {
23168 test_2d_path_arc_empty();
23169 } catch (e) {
23170 ok(false, "unexpected exception thrown in: test_2d_path_arc_empty");
23171 }
23172 try {
23173 test_2d_path_arc_end();
23174 } catch (e) {
23175 ok(false, "unexpected exception thrown in: test_2d_path_arc_end");
23176 }
23177 try {
23178 test_2d_path_arc_negative();
23179 } catch (e) {
23180 ok(false, "unexpected exception thrown in: test_2d_path_arc_negative");
23181 }
23182 try {
23183 test_2d_path_arc_nonempty();
23184 } catch (e) {
23185 ok(false, "unexpected exception thrown in: test_2d_path_arc_nonempty");
23186 }
23187 try {
23188 test_2d_path_arc_nonfinite();
23189 } catch (e) {
23190 ok(false, "unexpected exception thrown in: test_2d_path_arc_nonfinite");
23191 }
23192 try {
23193 test_2d_path_arc_scale_1();
23194 } catch (e) {
23195 ok(false, "unexpected exception thrown in: test_2d_path_arc_scale_1");
23196 }
23197 try {
23198 test_2d_path_arc_scale_2();
23199 } catch (e) {
23200 ok(false, "unexpected exception thrown in: test_2d_path_arc_scale_2");
23201 }
23202 try {
23203 test_2d_path_arc_selfintersect_1();
23204 } catch (e) {
23205 ok(false, "unexpected exception thrown in: test_2d_path_arc_selfintersect_1");
23206 }
23207 try {
23208 test_2d_path_arc_selfintersect_2();
23209 } catch (e) {
23210 ok(false, "unexpected exception thrown in: test_2d_path_arc_selfintersect_2");
23211 }
23212 try {
23213 test_2d_path_arc_shape_1();
23214 } catch (e) {
23215 ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_1");
23216 }
23217 try {
23218 test_2d_path_arc_shape_2();
23219 } catch (e) {
23220 ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_2");
23221 }
23222 try {
23223 test_2d_path_arc_shape_4();
23224 } catch (e) {
23225 ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_4");
23226 }
23227 try {
23228 test_2d_path_arc_shape_5();
23229 } catch (e) {
23230 ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_5");
23231 }
23232 try {
23233 test_2d_path_arc_twopie_1();
23234 } catch (e) {
23235 ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_1");
23236 }
23237 try {
23238 test_2d_path_arc_twopie_2();
23239 } catch (e) {
23240 ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_2");
23241 }
23242 try {
23243 test_2d_path_arc_twopie_3();
23244 } catch (e) {
23245 ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_3");
23246 }
23247 try {
23248 test_2d_path_arc_twopie_4();
23249 } catch (e) {
23250 ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_4");
23251 }
23252 try {
23253 test_2d_path_arc_zero_1();
23254 } catch (e) {
23255 ok(false, "unexpected exception thrown in: test_2d_path_arc_zero_1");
23256 }
23257 try {
23258 test_2d_path_arc_zero_2();
23259 } catch (e) {
23260 ok(false, "unexpected exception thrown in: test_2d_path_arc_zero_2");
23261 }
23262 try {
23263 test_2d_path_arc_zeroradius();
23264 } catch (e) {
23265 ok(false, "unexpected exception thrown in: test_2d_path_arc_zeroradius");
23266 }
23267 try {
23268 test_2d_path_arcTo_coincide_1();
23269 } catch (e) {
23270 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_coincide_1");
23271 }
23272 try {
23273 test_2d_path_arcTo_coincide_2();
23274 } catch (e) {
23275 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_coincide_2");
23276 }
23277 try {
23278 test_2d_path_arcTo_collinear_1();
23279 } catch (e) {
23280 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_1");
23281 }
23282 try {
23283 test_2d_path_arcTo_collinear_2();
23284 } catch (e) {
23285 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_2");
23286 }
23287 try {
23288 test_2d_path_arcTo_collinear_3();
23289 } catch (e) {
23290 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_3");
23291 }
23292 try {
23293 test_2d_path_arcTo_emptysubpath();
23294 } catch (e) {
23295 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_emptysubpath");
23296 }
23297 try {
23298 test_2d_path_arcTo_negative();
23299 } catch (e) {
23300 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_negative");
23301 }
23302 try {
23303 test_2d_path_arcTo_nonfinite();
23304 } catch (e) {
23305 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_nonfinite");
23306 }
23307 try {
23308 test_2d_path_arcTo_scale();
23309 } catch (e) {
23310 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_scale");
23311 }
23312 try {
23313 test_2d_path_arcTo_shape_curve1();
23314 } catch (e) {
23315 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_curve1");
23316 }
23317 try {
23318 test_2d_path_arcTo_shape_curve2();
23319 } catch (e) {
23320 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_curve2");
23321 }
23322 try {
23323 test_2d_path_arcTo_shape_end();
23324 } catch (e) {
23325 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_end");
23326 }
23327 try {
23328 test_2d_path_arcTo_shape_start();
23329 } catch (e) {
23330 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_start");
23331 }
23332 try {
23333 test_2d_path_arcTo_transformation();
23334 } catch (e) {
23335 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_transformation");
23336 }
23337 try {
23338 test_2d_path_arcTo_zero_1();
23339 } catch (e) {
23340 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_zero_1");
23341 }
23342 try {
23343 test_2d_path_arcTo_zero_2();
23344 } catch (e) {
23345 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_zero_2");
23346 }
23347 try {
23348 test_2d_path_beginPath();
23349 } catch (e) {
23350 ok(false, "unexpected exception thrown in: test_2d_path_beginPath");
23351 }
23352 try {
23353 test_2d_path_bezierCurveTo_basic();
23354 } catch (e) {
23355 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_basic");
23356 }
23357 try {
23358 test_2d_path_bezierCurveTo_emptysubpath();
23359 } catch (e) {
23360 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_emptysubpath");
23361 }
23362 try {
23363 test_2d_path_bezierCurveTo_nonfinite();
23364 } catch (e) {
23365 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_nonfinite");
23366 }
23367 try {
23368 test_2d_path_bezierCurveTo_scaled();
23369 } catch (e) {
23370 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_scaled");
23371 }
23372 try {
23373 test_2d_path_bezierCurveTo_shape();
23374 } catch (e) {
23375 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_shape");
23376 }
23377 try {
23378 test_2d_path_clip_basic_1();
23379 } catch (e) {
23380 ok(false, "unexpected exception thrown in: test_2d_path_clip_basic_1");
23381 }
23382 try {
23383 test_2d_path_clip_basic_2();
23384 } catch (e) {
23385 ok(false, "unexpected exception thrown in: test_2d_path_clip_basic_2");
23386 }
23387 try {
23388 test_2d_path_clip_empty();
23389 } catch (e) {
23390 ok(false, "unexpected exception thrown in: test_2d_path_clip_empty");
23391 }
23392 try {
23393 test_2d_path_clip_intersect();
23394 } catch (e) {
23395 ok(false, "unexpected exception thrown in: test_2d_path_clip_intersect");
23396 }
23397 try {
23398 test_2d_path_clip_unaffected();
23399 } catch (e) {
23400 ok(false, "unexpected exception thrown in: test_2d_path_clip_unaffected");
23401 }
23402 try {
23403 test_2d_path_clip_winding_1();
23404 } catch (e) {
23405 ok(false, "unexpected exception thrown in: test_2d_path_clip_winding_1");
23406 }
23407 try {
23408 test_2d_path_clip_winding_2();
23409 } catch (e) {
23410 ok(false, "unexpected exception thrown in: test_2d_path_clip_winding_2");
23411 }
23412 try {
23413 test_2d_path_closePath_empty();
23414 } catch (e) {
23415 ok(false, "unexpected exception thrown in: test_2d_path_closePath_empty");
23416 }
23417 try {
23418 test_2d_path_closePath_newline();
23419 } catch (e) {
23420 ok(false, "unexpected exception thrown in: test_2d_path_closePath_newline");
23421 }
23422 try {
23423 test_2d_path_closePath_nextpoint();
23424 } catch (e) {
23425 ok(false, "unexpected exception thrown in: test_2d_path_closePath_nextpoint");
23426 }
23427 try {
23428 test_2d_path_fill_closed_basic();
23429 } catch (e) {
23430 ok(false, "unexpected exception thrown in: test_2d_path_fill_closed_basic");
23431 }
23432 try {
23433 test_2d_path_fill_closed_unaffected();
23434 } catch (e) {
23435 ok(false, "unexpected exception thrown in: test_2d_path_fill_closed_unaffected");
23436 }
23437 try {
23438 test_2d_path_fill_overlap();
23439 } catch (e) {
23440 ok(false, "unexpected exception thrown in: test_2d_path_fill_overlap");
23441 }
23442 try {
23443 test_2d_path_fill_winding_add();
23444 } catch (e) {
23445 ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_add");
23446 }
23447 try {
23448 test_2d_path_fill_winding_subtract_1();
23449 } catch (e) {
23450 ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_1");
23451 }
23452 try {
23453 test_2d_path_fill_winding_subtract_2();
23454 } catch (e) {
23455 ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_2");
23456 }
23457 try {
23458 test_2d_path_fill_winding_subtract_3();
23459 } catch (e) {
23460 ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_3");
23461 }
23462 try {
23463 test_2d_path_initial();
23464 } catch (e) {
23465 ok(false, "unexpected exception thrown in: test_2d_path_initial");
23466 }
23467 try {
23468 test_2d_path_isPointInPath_arc();
23469 } catch (e) {
23470 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_arc");
23471 }
23472 try {
23473 test_2d_path_isPointInPath_basic_1();
23474 } catch (e) {
23475 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_basic_1");
23476 }
23477 try {
23478 test_2d_path_isPointInPath_basic_2();
23479 } catch (e) {
23480 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_basic_2");
23481 }
23482 try {
23483 test_2d_path_isPointInPath_bezier();
23484 } catch (e) {
23485 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_bezier");
23486 }
23487 try {
23488 test_2d_path_isPointInPath_bigarc();
23489 } catch (e) {
23490 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_bigarc");
23491 }
23492 try {
23493 test_2d_path_isPointInPath_edge();
23494 } catch (e) {
23495 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_edge");
23496 }
23497 try {
23498 test_2d_path_isPointInPath_empty();
23499 } catch (e) {
23500 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_empty");
23501 }
23502 try {
23503 test_2d_path_isPointInPath_nonfinite();
23504 } catch (e) {
23505 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_nonfinite");
23506 }
23507 try {
23508 test_2d_path_isPointInPath_outside();
23509 } catch (e) {
23510 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_outside");
23511 }
23512 try {
23513 test_2d_path_isPointInPath_subpath();
23514 } catch (e) {
23515 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_subpath");
23516 }
23517 try {
23518 test_2d_path_isPointInPath_transform_1();
23519 } catch (e) {
23520 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_1");
23521 }
23522 try {
23523 test_2d_path_isPointInPath_transform_2();
23524 } catch (e) {
23525 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_2");
23526 }
23527 try {
23528 test_2d_path_isPointInPath_transform_3();
23529 } catch (e) {
23530 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_3");
23531 }
23532 try {
23533 test_2d_path_isPointInPath_unclosed();
23534 } catch (e) {
23535 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_unclosed");
23536 }
23537 try {
23538 test_2d_path_isPointInPath_winding();
23539 } catch (e) {
23540 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_winding");
23541 }
23542 try {
23543 test_2d_path_lineTo_basic();
23544 } catch (e) {
23545 ok(false, "unexpected exception thrown in: test_2d_path_lineTo_basic");
23546 }
23547 try {
23548 test_2d_path_lineTo_emptysubpath();
23549 } catch (e) {
23550 ok(false, "unexpected exception thrown in: test_2d_path_lineTo_emptysubpath");
23551 }
23552 try {
23553 test_2d_path_lineTo_nextpoint();
23554 } catch (e) {
23555 ok(false, "unexpected exception thrown in: test_2d_path_lineTo_nextpoint");
23556 }
23557 try {
23558 test_2d_path_lineTo_nonfinite();
23559 } catch (e) {
23560 ok(false, "unexpected exception thrown in: test_2d_path_lineTo_nonfinite");
23561 }
23562 try {
23563 test_2d_path_moveTo_basic();
23564 } catch (e) {
23565 ok(false, "unexpected exception thrown in: test_2d_path_moveTo_basic");
23566 }
23567 try {
23568 test_2d_path_moveTo_multiple();
23569 } catch (e) {
23570 ok(false, "unexpected exception thrown in: test_2d_path_moveTo_multiple");
23571 }
23572 try {
23573 test_2d_path_moveTo_newsubpath();
23574 } catch (e) {
23575 ok(false, "unexpected exception thrown in: test_2d_path_moveTo_newsubpath");
23576 }
23577 try {
23578 test_2d_path_moveTo_nonfinite();
23579 } catch (e) {
23580 ok(false, "unexpected exception thrown in: test_2d_path_moveTo_nonfinite");
23581 }
23582 try {
23583 test_2d_path_quadraticCurveTo_basic();
23584 } catch (e) {
23585 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_basic");
23586 }
23587 try {
23588 test_2d_path_quadraticCurveTo_emptysubpath();
23589 } catch (e) {
23590 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_emptysubpath");
23591 }
23592 try {
23593 test_2d_path_quadraticCurveTo_nonfinite();
23594 } catch (e) {
23595 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_nonfinite");
23596 }
23597 try {
23598 test_2d_path_quadraticCurveTo_scaled();
23599 } catch (e) {
23600 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_scaled");
23601 }
23602 try {
23603 test_2d_path_quadraticCurveTo_shape();
23604 } catch (e) {
23605 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_shape");
23606 }
23607 try {
23608 test_2d_path_rect_basic();
23609 } catch (e) {
23610 ok(false, "unexpected exception thrown in: test_2d_path_rect_basic");
23611 }
23612 try {
23613 test_2d_path_rect_closed();
23614 } catch (e) {
23615 ok(false, "unexpected exception thrown in: test_2d_path_rect_closed");
23616 }
23617 try {
23618 test_2d_path_rect_end_1();
23619 } catch (e) {
23620 ok(false, "unexpected exception thrown in: test_2d_path_rect_end_1");
23621 }
23622 try {
23623 test_2d_path_rect_end_2();
23624 } catch (e) {
23625 ok(false, "unexpected exception thrown in: test_2d_path_rect_end_2");
23626 }
23627 try {
23628 test_2d_path_rect_negative();
23629 } catch (e) {
23630 ok(false, "unexpected exception thrown in: test_2d_path_rect_negative");
23631 }
23632 try {
23633 test_2d_path_rect_newsubpath();
23634 } catch (e) {
23635 ok(false, "unexpected exception thrown in: test_2d_path_rect_newsubpath");
23636 }
23637 try {
23638 test_2d_path_rect_nonfinite();
23639 } catch (e) {
23640 ok(false, "unexpected exception thrown in: test_2d_path_rect_nonfinite");
23641 }
23642 try {
23643 test_2d_path_rect_winding();
23644 } catch (e) {
23645 ok(false, "unexpected exception thrown in: test_2d_path_rect_winding");
23646 }
23647 try {
23648 test_2d_path_rect_zero_1();
23649 } catch (e) {
23650 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_1");
23651 }
23652 try {
23653 test_2d_path_rect_zero_2();
23654 } catch (e) {
23655 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_2");
23656 }
23657 try {
23658 test_2d_path_rect_zero_3();
23659 } catch (e) {
23660 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_3");
23661 }
23662 try {
23663 test_2d_path_rect_zero_4();
23664 } catch (e) {
23665 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_4");
23666 }
23667 try {
23668 test_2d_path_rect_zero_5();
23669 } catch (e) {
23670 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_5");
23671 }
23672 try {
23673 test_2d_path_stroke_empty();
23674 } catch (e) {
23675 ok(false, "unexpected exception thrown in: test_2d_path_stroke_empty");
23676 }
23677 try {
23678 test_2d_path_stroke_overlap();
23679 } catch (e) {
23680 ok(false, "unexpected exception thrown in: test_2d_path_stroke_overlap");
23681 }
23682 try {
23683 test_2d_path_stroke_prune_arc();
23684 } catch (e) {
23685 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_arc");
23686 }
23687 try {
23688 test_2d_path_stroke_prune_closed();
23689 } catch (e) {
23690 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_closed");
23691 }
23692 try {
23693 test_2d_path_stroke_prune_corner();
23694 } catch (e) {
23695 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_corner");
23696 }
23697 try {
23698 test_2d_path_stroke_prune_curve();
23699 } catch (e) {
23700 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_curve");
23701 }
23702 try {
23703 test_2d_path_stroke_prune_line();
23704 } catch (e) {
23705 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_line");
23706 }
23707 try {
23708 test_2d_path_stroke_prune_rect();
23709 } catch (e) {
23710 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_rect");
23711 }
23712 try {
23713 test_2d_path_stroke_scale1();
23714 } catch (e) {
23715 ok(false, "unexpected exception thrown in: test_2d_path_stroke_scale1");
23716 }
23717 try {
23718 test_2d_path_stroke_scale2();
23719 } catch (e) {
23720 ok(false, "unexpected exception thrown in: test_2d_path_stroke_scale2");
23721 }
23722 try {
23723 test_2d_path_stroke_skew();
23724 } catch (e) {
23725 ok(false, "unexpected exception thrown in: test_2d_path_stroke_skew");
23726 }
23727 try {
23728 test_2d_path_stroke_unaffected();
23729 } catch (e) {
23730 ok(false, "unexpected exception thrown in: test_2d_path_stroke_unaffected");
23731 }
23732 try {
23733 test_2d_path_stroke_union();
23734 } catch (e) {
23735 ok(false, "unexpected exception thrown in: test_2d_path_stroke_union");
23736 }
23737 try {
23738 test_2d_path_transformation_basic();
23739 } catch (e) {
23740 ok(false, "unexpected exception thrown in: test_2d_path_transformation_basic");
23741 }
23742 try {
23743 test_2d_path_transformation_changing();
23744 } catch (e) {
23745 ok(false, "unexpected exception thrown in: test_2d_path_transformation_changing");
23746 }
23747 try {
23748 test_2d_path_transformation_multiple();
23749 } catch (e) {
23750 ok(false, "unexpected exception thrown in: test_2d_path_transformation_multiple");
23751 }
23752 try {
23753 test_2d_pattern_animated_gif();
23754 } catch (e) {
23755 ok(false, "unexpected exception thrown in: test_2d_pattern_animated_gif");
23756 }
23757 try {
23758 test_2d_pattern_basic_canvas();
23759 } catch (e) {
23760 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_canvas");
23761 }
23762 try {
23763 test_2d_pattern_basic_image();
23764 } catch (e) {
23765 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_image");
23766 }
23767 try {
23768 test_2d_pattern_basic_nocontext();
23769 } catch (e) {
23770 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_nocontext");
23771 }
23772 try {
23773 test_2d_pattern_basic_type();
23774 } catch (e) {
23775 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_type");
23776 }
23777 try {
23778 test_2d_pattern_basic_zerocanvas();
23779 } catch (e) {
23780 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_zerocanvas");
23781 }
23782 try {
23783 test_2d_pattern_crosscanvas();
23784 } catch (e) {
23785 ok(false, "unexpected exception thrown in: test_2d_pattern_crosscanvas");
23786 }
23787 try {
23788 test_2d_pattern_image_broken();
23789 } catch (e) {
23790 ok(false, "unexpected exception thrown in: test_2d_pattern_image_broken");
23791 }
23792 try {
23793 test_2d_pattern_image_incomplete();
23794 } catch (e) {
23795 ok(false, "unexpected exception thrown in: test_2d_pattern_image_incomplete");
23796 }
23797 try {
23798 test_2d_pattern_image_null();
23799 } catch (e) {
23800 ok(false, "unexpected exception thrown in: test_2d_pattern_image_null");
23801 }
23802 try {
23803 test_2d_pattern_image_string();
23804 } catch (e) {
23805 ok(false, "unexpected exception thrown in: test_2d_pattern_image_string");
23806 }
23807 try {
23808 test_2d_pattern_image_undefined();
23809 } catch (e) {
23810 ok(false, "unexpected exception thrown in: test_2d_pattern_image_undefined");
23811 }
23812 try {
23813 test_2d_pattern_modify_canvas1();
23814 } catch (e) {
23815 ok(false, "unexpected exception thrown in: test_2d_pattern_modify_canvas1");
23816 }
23817 try {
23818 test_2d_pattern_modify_canvas2();
23819 } catch (e) {
23820 ok(false, "unexpected exception thrown in: test_2d_pattern_modify_canvas2");
23821 }
23822 try {
23823 test_2d_pattern_modify_image1();
23824 } catch (e) {
23825 ok(false, "unexpected exception thrown in: test_2d_pattern_modify_image1");
23826 }
23827 try {
23828 test_2d_pattern_modify_image2();
23829 } catch (e) {
23830 ok(false, "unexpected exception thrown in: test_2d_pattern_modify_image2");
23831 }
23832 try {
23833 test_2d_pattern_paint_norepeat_basic();
23834 } catch (e) {
23835 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_basic");
23836 }
23837 try {
23838 test_2d_pattern_paint_norepeat_coord1();
23839 } catch (e) {
23840 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord1");
23841 }
23842 try {
23843 test_2d_pattern_paint_norepeat_coord2();
23844 } catch (e) {
23845 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord2");
23846 }
23847 try {
23848 test_2d_pattern_paint_norepeat_coord3();
23849 } catch (e) {
23850 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord3");
23851 }
23852 try {
23853 test_2d_pattern_paint_norepeat_outside();
23854 } catch (e) {
23855 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_outside");
23856 }
23857 try {
23858 test_2d_pattern_paint_orientation_canvas();
23859 } catch (e) {
23860 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_orientation_canvas");
23861 }
23862 try {
23863 test_2d_pattern_paint_orientation_image();
23864 } catch (e) {
23865 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_orientation_image");
23866 }
23867 try {
23868 test_2d_pattern_paint_repeat_basic();
23869 } catch (e) {
23870 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_basic");
23871 }
23872 try {
23873 test_2d_pattern_paint_repeat_coord1();
23874 } catch (e) {
23875 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord1");
23876 }
23877 try {
23878 test_2d_pattern_paint_repeat_coord2();
23879 } catch (e) {
23880 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord2");
23881 }
23882 try {
23883 test_2d_pattern_paint_repeat_coord3();
23884 } catch (e) {
23885 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord3");
23886 }
23887 try {
23888 test_2d_pattern_paint_repeat_outside();
23889 } catch (e) {
23890 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_outside");
23891 }
23892 try {
23893 test_2d_pattern_paint_repeatx_basic();
23894 } catch (e) {
23895 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_basic");
23896 }
23897 try {
23898 test_2d_pattern_paint_repeatx_coord1();
23899 } catch (e) {
23900 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_coord1");
23901 }
23902 try {
23903 test_2d_pattern_paint_repeatx_outside();
23904 } catch (e) {
23905 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_outside");
23906 }
23907 try {
23908 test_2d_pattern_paint_repeaty_basic();
23909 } catch (e) {
23910 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_basic");
23911 }
23912 try {
23913 test_2d_pattern_paint_repeaty_coord1();
23914 } catch (e) {
23915 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_coord1");
23916 }
23917 try {
23918 test_2d_pattern_paint_repeaty_outside();
23919 } catch (e) {
23920 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_outside");
23921 }
23922 try {
23923 test_2d_pattern_repeat_case();
23924 } catch (e) {
23925 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_case");
23926 }
23927 try {
23928 test_2d_pattern_repeat_empty();
23929 } catch (e) {
23930 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_empty");
23931 }
23932 try {
23933 test_2d_pattern_repeat_null();
23934 } catch (e) {
23935 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_null");
23936 }
23937 try {
23938 test_2d_pattern_repeat_nullsuffix();
23939 } catch (e) {
23940 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_nullsuffix");
23941 }
23942 try {
23943 test_2d_pattern_repeat_undefined();
23944 } catch (e) {
23945 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_undefined");
23946 }
23947 try {
23948 test_2d_pattern_repeat_unrecognised();
23949 } catch (e) {
23950 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_unrecognised");
23951 }
23952 try {
23953 test_2d_scaled();
23954 } catch (e) {
23955 ok(false, "unexpected exception thrown in: test_2d_scaled");
23956 }
23957 try {
23958 test_2d_shadow_alpha_1();
23959 } catch (e) {
23960 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_1");
23961 }
23962 try {
23963 test_2d_shadow_alpha_2();
23964 } catch (e) {
23965 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_2");
23966 }
23967 try {
23968 test_2d_shadow_alpha_3();
23969 } catch (e) {
23970 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_3");
23971 }
23972 try {
23973 test_2d_shadow_alpha_4();
23974 } catch (e) {
23975 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_4");
23976 }
23977 try {
23978 test_2d_shadow_alpha_5();
23979 } catch (e) {
23980 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_5");
23981 }
23982 try {
23983 test_2d_shadow_attributes_shadowBlur_1();
23984 } catch (e) {
23985 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowBlur_1");
23986 }
23987 try {
23988 test_2d_shadow_attributes_shadowBlur_2();
23989 } catch (e) {
23990 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowBlur_2");
23991 }
23992 try {
23993 test_2d_shadow_attributes_shadowColor_1();
23994 } catch (e) {
23995 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowColor_1");
23996 }
23997 try {
23998 test_2d_shadow_attributes_shadowColor_2();
23999 } catch (e) {
24000 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowColor_2");
24001 }
24002 try {
24003 test_2d_shadow_attributes_shadowOffset_1();
24004 } catch (e) {
24005 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowOffset_1");
24006 }
24007 try {
24008 test_2d_shadow_attributes_shadowOffset_2();
24009 } catch (e) {
24010 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowOffset_2");
24011 }
24012 try {
24013 test_2d_shadow_basic_1();
24014 } catch (e) {
24015 ok(false, "unexpected exception thrown in: test_2d_shadow_basic_1");
24016 }
24017 try {
24018 test_2d_shadow_basic_2();
24019 } catch (e) {
24020 ok(false, "unexpected exception thrown in: test_2d_shadow_basic_2");
24021 }
24022 try {
24023 test_2d_shadow_blur_high();
24024 } catch (e) {
24025 ok(false, "unexpected exception thrown in: test_2d_shadow_blur_high");
24026 }
24027 try {
24028 test_2d_shadow_blur_low();
24029 } catch (e) {
24030 ok(false, "unexpected exception thrown in: test_2d_shadow_blur_low");
24031 }
24032 try {
24033 test_2d_shadow_canvas_alpha();
24034 } catch (e) {
24035 ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_alpha");
24036 }
24037 try {
24038 test_2d_shadow_canvas_basic();
24039 } catch (e) {
24040 ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_basic");
24041 }
24042 try {
24043 test_2d_shadow_canvas_transparent_1();
24044 } catch (e) {
24045 ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_transparent_1");
24046 }
24047 try {
24048 test_2d_shadow_canvas_transparent_2();
24049 } catch (e) {
24050 ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_transparent_2");
24051 }
24052 try {
24053 test_2d_shadow_clip_1();
24054 } catch (e) {
24055 ok(false, "unexpected exception thrown in: test_2d_shadow_clip_1");
24056 }
24057 try {
24058 test_2d_shadow_clip_2();
24059 } catch (e) {
24060 ok(false, "unexpected exception thrown in: test_2d_shadow_clip_2");
24061 }
24062 try {
24063 test_2d_shadow_clip_3();
24064 } catch (e) {
24065 ok(false, "unexpected exception thrown in: test_2d_shadow_clip_3");
24066 }
24067 try {
24068 test_2d_shadow_composite_1();
24069 } catch (e) {
24070 ok(false, "unexpected exception thrown in: test_2d_shadow_composite_1");
24071 }
24072 try {
24073 test_2d_shadow_composite_2();
24074 } catch (e) {
24075 ok(false, "unexpected exception thrown in: test_2d_shadow_composite_2");
24076 }
24077 try {
24078 test_2d_shadow_gradient_alpha();
24079 } catch (e) {
24080 ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_alpha");
24081 }
24082 try {
24083 test_2d_shadow_gradient_basic();
24084 } catch (e) {
24085 ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_basic");
24086 }
24087 try {
24088 test_2d_shadow_gradient_transparent_1();
24089 } catch (e) {
24090 ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_transparent_1");
24091 }
24092 try {
24093 test_2d_shadow_gradient_transparent_2();
24094 } catch (e) {
24095 ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_transparent_2");
24096 }
24097 try {
24098 test_2d_shadow_image_alpha();
24099 } catch (e) {
24100 ok(false, "unexpected exception thrown in: test_2d_shadow_image_alpha");
24101 }
24102 try {
24103 test_2d_shadow_image_basic();
24104 } catch (e) {
24105 ok(false, "unexpected exception thrown in: test_2d_shadow_image_basic");
24106 }
24107 try {
24108 test_2d_shadow_image_scale();
24109 } catch (e) {
24110 ok(false, "unexpected exception thrown in: test_2d_shadow_image_scale");
24111 }
24112 try {
24113 test_2d_shadow_image_section();
24114 } catch (e) {
24115 ok(false, "unexpected exception thrown in: test_2d_shadow_image_section");
24116 }
24117 try {
24118 test_2d_shadow_image_transparent_1();
24119 } catch (e) {
24120 ok(false, "unexpected exception thrown in: test_2d_shadow_image_transparent_1");
24121 }
24122 try {
24123 test_2d_shadow_image_transparent_2();
24124 } catch (e) {
24125 ok(false, "unexpected exception thrown in: test_2d_shadow_image_transparent_2");
24126 }
24127 try {
24128 test_2d_shadow_offset_negativeX();
24129 } catch (e) {
24130 ok(false, "unexpected exception thrown in: test_2d_shadow_offset_negativeX");
24131 }
24132 try {
24133 test_2d_shadow_offset_negativeY();
24134 } catch (e) {
24135 ok(false, "unexpected exception thrown in: test_2d_shadow_offset_negativeY");
24136 }
24137 try {
24138 test_2d_shadow_offset_positiveX();
24139 } catch (e) {
24140 ok(false, "unexpected exception thrown in: test_2d_shadow_offset_positiveX");
24141 }
24142 try {
24143 test_2d_shadow_offset_positiveY();
24144 } catch (e) {
24145 ok(false, "unexpected exception thrown in: test_2d_shadow_offset_positiveY");
24146 }
24147 try {
24148 test_2d_shadow_outside();
24149 } catch (e) {
24150 ok(false, "unexpected exception thrown in: test_2d_shadow_outside");
24151 }
24152 try {
24153 test_2d_shadow_pattern_alpha();
24154 } catch (e) {
24155 ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_alpha");
24156 }
24157 try {
24158 test_2d_shadow_pattern_basic();
24159 } catch (e) {
24160 ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_basic");
24161 }
24162 try {
24163 test_2d_shadow_pattern_transparent_1();
24164 } catch (e) {
24165 ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_transparent_1");
24166 }
24167 try {
24168 test_2d_shadow_pattern_transparent_2();
24169 } catch (e) {
24170 ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_transparent_2");
24171 }
24172 try {
24173 test_2d_shadow_stroke_basic();
24174 } catch (e) {
24175 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_basic");
24176 }
24177 try {
24178 test_2d_shadow_stroke_cap_1();
24179 } catch (e) {
24180 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_cap_1");
24181 }
24182 try {
24183 test_2d_shadow_stroke_cap_2();
24184 } catch (e) {
24185 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_cap_2");
24186 }
24187 try {
24188 test_2d_shadow_stroke_join_1();
24189 } catch (e) {
24190 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_1");
24191 }
24192 try {
24193 test_2d_shadow_stroke_join_2();
24194 } catch (e) {
24195 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_2");
24196 }
24197 try {
24198 test_2d_shadow_stroke_join_3();
24199 } catch (e) {
24200 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_3");
24201 }
24202 try {
24203 test_2d_shadow_transform_1();
24204 } catch (e) {
24205 ok(false, "unexpected exception thrown in: test_2d_shadow_transform_1");
24206 }
24207 try {
24208 test_2d_shadow_transform_2();
24209 } catch (e) {
24210 ok(false, "unexpected exception thrown in: test_2d_shadow_transform_2");
24211 }
24212 try {
24213 test_2d_state_saverestore_bitmap();
24214 } catch (e) {
24215 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_bitmap");
24216 }
24217 try {
24218 test_2d_state_saverestore_clip();
24219 } catch (e) {
24220 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_clip");
24221 }
24222 try {
24223 test_2d_state_saverestore_fillStyle();
24224 } catch (e) {
24225 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_fillStyle");
24226 }
24227 try {
24228 test_2d_state_saverestore_globalAlpha();
24229 } catch (e) {
24230 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_globalAlpha");
24231 }
24232 try {
24233 test_2d_state_saverestore_globalCompositeOperation();
24234 } catch (e) {
24235 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_globalCompositeOperation");
24236 }
24237 try {
24238 test_2d_state_saverestore_lineCap();
24239 } catch (e) {
24240 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineCap");
24241 }
24242 try {
24243 test_2d_state_saverestore_lineJoin();
24244 } catch (e) {
24245 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineJoin");
24246 }
24247 try {
24248 test_2d_state_saverestore_lineWidth();
24249 } catch (e) {
24250 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineWidth");
24251 }
24252 try {
24253 test_2d_state_saverestore_miterLimit();
24254 } catch (e) {
24255 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_miterLimit");
24256 }
24257 try {
24258 test_2d_state_saverestore_path();
24259 } catch (e) {
24260 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_path");
24261 }
24262 try {
24263 test_2d_state_saverestore_shadowBlur();
24264 } catch (e) {
24265 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowBlur");
24266 }
24267 try {
24268 test_2d_state_saverestore_shadowColor();
24269 } catch (e) {
24270 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowColor");
24271 }
24272 try {
24273 test_2d_state_saverestore_shadowOffsetX();
24274 } catch (e) {
24275 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowOffsetX");
24276 }
24277 try {
24278 test_2d_state_saverestore_shadowOffsetY();
24279 } catch (e) {
24280 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowOffsetY");
24281 }
24282 try {
24283 test_2d_state_saverestore_stack();
24284 } catch (e) {
24285 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_stack");
24286 }
24287 try {
24288 test_2d_state_saverestore_stackdepth();
24289 } catch (e) {
24290 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_stackdepth");
24291 }
24292 try {
24293 test_2d_state_saverestore_strokeStyle();
24294 } catch (e) {
24295 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_strokeStyle");
24296 }
24297 try {
24298 test_2d_state_saverestore_transformation();
24299 } catch (e) {
24300 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_transformation");
24301 }
24302 try {
24303 test_2d_state_saverestore_underflow();
24304 } catch (e) {
24305 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_underflow");
24306 }
24307 try {
24308 test_2d_strokeRect_basic();
24309 } catch (e) {
24310 ok(false, "unexpected exception thrown in: test_2d_strokeRect_basic");
24311 }
24312 try {
24313 test_2d_strokeRect_clip();
24314 } catch (e) {
24315 ok(false, "unexpected exception thrown in: test_2d_strokeRect_clip");
24316 }
24317 try {
24318 test_2d_strokeRect_globalalpha();
24319 } catch (e) {
24320 ok(false, "unexpected exception thrown in: test_2d_strokeRect_globalalpha");
24321 }
24322 try {
24323 test_2d_strokeRect_globalcomposite();
24324 } catch (e) {
24325 ok(false, "unexpected exception thrown in: test_2d_strokeRect_globalcomposite");
24326 }
24327 try {
24328 test_2d_strokeRect_negative();
24329 } catch (e) {
24330 ok(false, "unexpected exception thrown in: test_2d_strokeRect_negative");
24331 }
24332 try {
24333 test_2d_strokeRect_nonfinite();
24334 } catch (e) {
24335 ok(false, "unexpected exception thrown in: test_2d_strokeRect_nonfinite");
24336 }
24337 try {
24338 test_2d_strokeRect_path();
24339 } catch (e) {
24340 ok(false, "unexpected exception thrown in: test_2d_strokeRect_path");
24341 }
24342 try {
24343 test_2d_strokeRect_shadow();
24344 } catch (e) {
24345 ok(false, "unexpected exception thrown in: test_2d_strokeRect_shadow");
24346 }
24347 try {
24348 test_2d_strokeRect_transform();
24349 } catch (e) {
24350 ok(false, "unexpected exception thrown in: test_2d_strokeRect_transform");
24351 }
24352 try {
24353 test_2d_strokeRect_zero_1();
24354 } catch (e) {
24355 ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_1");
24356 }
24357 try {
24358 test_2d_strokeRect_zero_2();
24359 } catch (e) {
24360 ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_2");
24361 }
24362 try {
24363 test_2d_strokeRect_zero_3();
24364 } catch (e) {
24365 ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_3");
24366 }
24367 try {
24368 test_2d_strokeRect_zero_4();
24369 } catch (e) {
24370 ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_4");
24371 }
24372 try {
24373 test_2d_strokeStyle_default();
24374 } catch (e) {
24375 ok(false, "unexpected exception thrown in: test_2d_strokeStyle_default");
24376 }
24377 try {
24378 test_2d_text_align_default();
24379 } catch (e) {
24380 ok(false, "unexpected exception thrown in: test_2d_text_align_default");
24381 }
24382 try {
24383 test_2d_text_align_invalid();
24384 } catch (e) {
24385 ok(false, "unexpected exception thrown in: test_2d_text_align_invalid");
24386 }
24387 try {
24388 test_2d_text_baseline_default();
24389 } catch (e) {
24390 ok(false, "unexpected exception thrown in: test_2d_text_baseline_default");
24391 }
24392 try {
24393 test_2d_text_baseline_invalid();
24394 } catch (e) {
24395 ok(false, "unexpected exception thrown in: test_2d_text_baseline_invalid");
24396 }
24397 try {
24398 test_2d_transformation_order();
24399 } catch (e) {
24400 ok(false, "unexpected exception thrown in: test_2d_transformation_order");
24401 }
24402 try {
24403 test_2d_transformation_rotate_direction();
24404 } catch (e) {
24405 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_direction");
24406 }
24407 try {
24408 test_2d_transformation_rotate_nonfinite();
24409 } catch (e) {
24410 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_nonfinite");
24411 }
24412 try {
24413 test_2d_transformation_rotate_radians();
24414 } catch (e) {
24415 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_radians");
24416 }
24417 try {
24418 test_2d_transformation_rotate_wrap();
24419 } catch (e) {
24420 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_wrap");
24421 }
24422 try {
24423 test_2d_transformation_rotate_wrapnegative();
24424 } catch (e) {
24425 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_wrapnegative");
24426 }
24427 try {
24428 test_2d_transformation_rotate_zero();
24429 } catch (e) {
24430 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_zero");
24431 }
24432 try {
24433 test_2d_transformation_scale_basic();
24434 } catch (e) {
24435 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_basic");
24436 }
24437 try {
24438 test_2d_transformation_scale_large();
24439 } catch (e) {
24440 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_large");
24441 }
24442 try {
24443 test_2d_transformation_scale_multiple();
24444 } catch (e) {
24445 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_multiple");
24446 }
24447 try {
24448 test_2d_transformation_scale_negative();
24449 } catch (e) {
24450 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_negative");
24451 }
24452 try {
24453 test_2d_transformation_scale_nonfinite();
24454 } catch (e) {
24455 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_nonfinite");
24456 }
24457 try {
24458 test_2d_transformation_scale_zero();
24459 } catch (e) {
24460 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_zero");
24461 }
24462 try {
24463 test_2d_transformation_setTransform_multiple();
24464 } catch (e) {
24465 ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_multiple");
24466 }
24467 try {
24468 test_2d_transformation_setTransform_nonfinite();
24469 } catch (e) {
24470 ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_nonfinite");
24471 }
24472 try {
24473 test_2d_transformation_setTransform_skewed();
24474 } catch (e) {
24475 ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_skewed");
24476 }
24477 try {
24478 test_2d_transformation_transform_identity();
24479 } catch (e) {
24480 ok(false, "unexpected exception thrown in: test_2d_transformation_transform_identity");
24481 }
24482 try {
24483 test_2d_transformation_transform_multiply();
24484 } catch (e) {
24485 ok(false, "unexpected exception thrown in: test_2d_transformation_transform_multiply");
24486 }
24487 try {
24488 test_2d_transformation_transform_nonfinite();
24489 } catch (e) {
24490 ok(false, "unexpected exception thrown in: test_2d_transformation_transform_nonfinite");
24491 }
24492 try {
24493 test_2d_transformation_transform_skewed();
24494 } catch (e) {
24495 ok(false, "unexpected exception thrown in: test_2d_transformation_transform_skewed");
24496 }
24497 try {
24498 test_2d_transformation_translate_basic();
24499 } catch (e) {
24500 ok(false, "unexpected exception thrown in: test_2d_transformation_translate_basic");
24501 }
24502 try {
24503 test_2d_transformation_translate_nonfinite();
24504 } catch (e) {
24505 ok(false, "unexpected exception thrown in: test_2d_transformation_translate_nonfinite");
24506 }
24507 try {
24508 test_2d_type_exists();
24509 } catch (e) {
24510 ok(false, "unexpected exception thrown in: test_2d_type_exists");
24511 }
24512 try {
24513 test_2d_type_extend();
24514 } catch (e) {
24515 ok(false, "unexpected exception thrown in: test_2d_type_extend");
24516 }
24517 try {
24518 test_2d_type_prototype();
24519 } catch (e) {
24520 ok(false, "unexpected exception thrown in: test_2d_type_prototype");
24521 }
24522 try {
24523 test_2d_type_replace();
24524 } catch (e) {
24525 ok(false, "unexpected exception thrown in: test_2d_type_replace");
24526 }
24527 try {
24528 test_2d_voidreturn();
24529 } catch (e) {
24530 ok(false, "unexpected exception thrown in: test_2d_voidreturn");
24531 }
24532 try {
24533 test_bug397524();
24534 } catch (e) {
24535 ok(false, "unexpected exception thrown in: test_bug397524");
24536 }
24537 try {
24538 test_bug405982();
24539 } catch (e) {
24540 ok(false, "unexpected exception thrown in: test_bug405982");
24541 }
24542 try {
24543 test_context_arguments_extra();
24544 } catch (e) {
24545 ok(false, "unexpected exception thrown in: test_context_arguments_extra");
24546 }
24547 try {
24548 test_context_arguments_missing();
24549 } catch (e) {
24550 ok(false, "unexpected exception thrown in: test_context_arguments_missing");
24551 }
24552 try {
24553 test_context_casesensitive();
24554 } catch (e) {
24555 ok(false, "unexpected exception thrown in: test_context_casesensitive");
24556 }
24557 try {
24558 test_context_emptystring();
24559 } catch (e) {
24560 ok(false, "unexpected exception thrown in: test_context_emptystring");
24561 }
24562 try {
24563 test_context_unrecognised_badname();
24564 } catch (e) {
24565 ok(false, "unexpected exception thrown in: test_context_unrecognised_badname");
24566 }
24567 try {
24568 test_context_unrecognised_badsuffix();
24569 } catch (e) {
24570 ok(false, "unexpected exception thrown in: test_context_unrecognised_badsuffix");
24571 }
24572 try {
24573 test_context_unrecognised_nullsuffix();
24574 } catch (e) {
24575 ok(false, "unexpected exception thrown in: test_context_unrecognised_nullsuffix");
24576 }
24577 try {
24578 test_context_unrecognised_unicode();
24579 } catch (e) {
24580 ok(false, "unexpected exception thrown in: test_context_unrecognised_unicode");
24581 }
24582 try {
24583 test_fallback_basic();
24584 } catch (e) {
24585 ok(false, "unexpected exception thrown in: test_fallback_basic");
24586 }
24587 try {
24588 test_fallback_multiple();
24589 } catch (e) {
24590 ok(false, "unexpected exception thrown in: test_fallback_multiple");
24591 }
24592 try {
24593 test_fallback_nested();
24594 } catch (e) {
24595 ok(false, "unexpected exception thrown in: test_fallback_nested");
24596 }
24597 try {
24598 test_initial_colour();
24599 } catch (e) {
24600 ok(false, "unexpected exception thrown in: test_initial_colour");
24601 }
24602 try {
24603 test_initial_reset_2dstate();
24604 } catch (e) {
24605 ok(false, "unexpected exception thrown in: test_initial_reset_2dstate");
24606 }
24607 try {
24608 test_initial_reset_clip();
24609 } catch (e) {
24610 ok(false, "unexpected exception thrown in: test_initial_reset_clip");
24611 }
24612 try {
24613 test_initial_reset_different();
24614 } catch (e) {
24615 ok(false, "unexpected exception thrown in: test_initial_reset_different");
24616 }
24617 try {
24618 test_initial_reset_gradient();
24619 } catch (e) {
24620 ok(false, "unexpected exception thrown in: test_initial_reset_gradient");
24621 }
24622 try {
24623 test_initial_reset_path();
24624 } catch (e) {
24625 ok(false, "unexpected exception thrown in: test_initial_reset_path");
24626 }
24627 try {
24628 test_initial_reset_pattern();
24629 } catch (e) {
24630 ok(false, "unexpected exception thrown in: test_initial_reset_pattern");
24631 }
24632 try {
24633 test_initial_reset_same();
24634 } catch (e) {
24635 ok(false, "unexpected exception thrown in: test_initial_reset_same");
24636 }
24637 try {
24638 test_initial_reset_transform();
24639 } catch (e) {
24640 ok(false, "unexpected exception thrown in: test_initial_reset_transform");
24641 }
24642 try {
24643 test_size_attributes_default();
24644 } catch (e) {
24645 ok(false, "unexpected exception thrown in: test_size_attributes_default");
24646 }
24647 try {
24648 test_size_attributes();
24649 } catch (e) {
24650 ok(false, "unexpected exception thrown in: test_size_attributes");
24651 }
24652 try {
24653 test_size_attributes_parse_badsuffix();
24654 } catch (e) {
24655 ok(false, "unexpected exception thrown in: test_size_attributes_parse_badsuffix");
24656 }
24657 try {
24658 test_size_attributes_parse_floatsuffix();
24659 } catch (e) {
24660 ok(false, "unexpected exception thrown in: test_size_attributes_parse_floatsuffix");
24661 }
24662 try {
24663 test_size_attributes_parse_negative();
24664 } catch (e) {
24665 ok(false, "unexpected exception thrown in: test_size_attributes_parse_negative");
24666 }
24667 try {
24668 test_size_attributes_parse_nonnumber();
24669 } catch (e) {
24670 ok(false, "unexpected exception thrown in: test_size_attributes_parse_nonnumber");
24671 }
24672 try {
24673 test_size_attributes_parse_percentsuffix();
24674 } catch (e) {
24675 ok(false, "unexpected exception thrown in: test_size_attributes_parse_percentsuffix");
24676 }
24677 try {
24678 test_size_attributes_parse_whitespace();
24679 } catch (e) {
24680 ok(false, "unexpected exception thrown in: test_size_attributes_parse_whitespace");
24681 }
24682 try {
24683 test_size_attributes_parse_zero();
24684 } catch (e) {
24685 ok(false, "unexpected exception thrown in: test_size_attributes_parse_zero");
24686 }
24687 try {
24688 test_size_attributes_parse_zerosuffix();
24689 } catch (e) {
24690 ok(false, "unexpected exception thrown in: test_size_attributes_parse_zerosuffix");
24691 }
24692 try {
24693 test_size_attributes_reflect_1();
24694 } catch (e) {
24695 ok(false, "unexpected exception thrown in: test_size_attributes_reflect_1");
24696 }
24697 try {
24698 test_size_attributes_reflect_2();
24699 } catch (e) {
24700 ok(false, "unexpected exception thrown in: test_size_attributes_reflect_2");
24701 }
24702 try {
24703 test_size_attributes_removed();
24704 } catch (e) {
24705 ok(false, "unexpected exception thrown in: test_size_attributes_removed");
24706 }
24707 try {
24708 test_size_attributes_setAttribute_badsuffix();
24709 } catch (e) {
24710 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_badsuffix");
24711 }
24712 try {
24713 test_size_attributes_setAttribute_floatsuffix();
24714 } catch (e) {
24715 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_floatsuffix");
24716 }
24717 try {
24718 test_size_attributes_setAttribute_negative();
24719 } catch (e) {
24720 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_negative");
24721 }
24722 try {
24723 test_size_attributes_setAttribute_nonnumber();
24724 } catch (e) {
24725 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_nonnumber");
24726 }
24727 try {
24728 test_size_attributes_setAttribute_percentsuffix();
24729 } catch (e) {
24730 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_percentsuffix");
24731 }
24732 try {
24733 test_size_attributes_setAttribute_whitespace();
24734 } catch (e) {
24735 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_whitespace");
24736 }
24737 try {
24738 test_size_attributes_setAttribute_zero();
24739 } catch (e) {
24740 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_zero");
24741 }
24742 try {
24743 test_size_attributes_setAttribute_zerosuffix();
24744 } catch (e) {
24745 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_zerosuffix");
24746 }
24747 try {
24748 test_size_attributes_style();
24749 } catch (e) {
24750 ok(false, "unexpected exception thrown in: test_size_attributes_style");
24751 }
24752 try {
24753 test_size_attributes_type_get();
24754 } catch (e) {
24755 ok(false, "unexpected exception thrown in: test_size_attributes_type_get");
24756 }
24757 try {
24758 test_size_attributes_type_set();
24759 } catch (e) {
24760 ok(false, "unexpected exception thrown in: test_size_attributes_type_set");
24761 }
24762 try {
24763 test_text_font();
24764 } catch (e) {
24765 ok(false, "unexpected exception thrown in: test_text_font");
24766 }
24767 try {
24768 test_text_measure();
24769 } catch (e) {
24770 ok(false, "unexpected exception thrown in: test_text_measure");
24771 }
24772 try {
24773 test_text_space_replace();
24774 } catch (e) {
24775 ok(false, "unexpected exception thrown in: test_text_space_replace");
24776 }
24777 try {
24778 test_text_textAlign();
24779 } catch (e) {
24780 ok(false, "unexpected exception thrown in: test_text_textAlign");
24781 }
24782 try {
24783 test_text_textBaseline();
24784 } catch (e) {
24785 ok(false, "unexpected exception thrown in: test_text_textBaseline");
24786 }
24787 try {
24788 test_toDataURL_arguments_1();
24789 } catch (e) {
24790 ok(false, "unexpected exception thrown in: test_toDataURL_arguments_1");
24791 }
24792 try {
24793 test_toDataURL_arguments_2();
24794 } catch (e) {
24795 ok(false, "unexpected exception thrown in: test_toDataURL_arguments_2");
24796 }
24797 try {
24798 test_toDataURL_arguments_3();
24799 } catch (e) {
24800 ok(false, "unexpected exception thrown in: test_toDataURL_arguments_3");
24801 }
24802 try {
24803 test_toDataURL_complexcolours();
24804 } catch (e) {
24805 ok(false, "unexpected exception thrown in: test_toDataURL_complexcolours");
24806 }
24807 try {
24808 test_toDataURL_default();
24809 } catch (e) {
24810 ok(false, "unexpected exception thrown in: test_toDataURL_default");
24811 }
24812 try {
24813 test_toDataURL_lowercase();
24814 } catch (e) {
24815 ok(false, "unexpected exception thrown in: test_toDataURL_lowercase");
24816 }
24817 try {
24818 test_toDataURL_nocontext();
24819 } catch (e) {
24820 ok(false, "unexpected exception thrown in: test_toDataURL_nocontext");
24821 }
24822 try {
24823 test_toDataURL_png();
24824 } catch (e) {
24825 ok(false, "unexpected exception thrown in: test_toDataURL_png");
24826 }
24827 try {
24828 test_toDataURL_primarycolours();
24829 } catch (e) {
24830 ok(false, "unexpected exception thrown in: test_toDataURL_primarycolours");
24831 }
24832 try {
24833 test_toDataURL_unrecognised();
24834 } catch (e) {
24835 ok(false, "unexpected exception thrown in: test_toDataURL_unrecognised");
24836 }
24837 try {
24838 test_toDataURL_zerosize();
24839 } catch (e) {
24840 ok(false, "unexpected exception thrown in: test_toDataURL_zerosize");
24841 }
24842 try {
24843 test_type_exists();
24844 } catch (e) {
24845 ok(false, "unexpected exception thrown in: test_type_exists");
24846 }
24847 try {
24848 test_type_extend();
24849 } catch (e) {
24850 ok(false, "unexpected exception thrown in: test_type_extend");
24851 }
24852 try {
24853 test_type_name();
24854 } catch (e) {
24855 ok(false, "unexpected exception thrown in: test_type_name");
24856 }
24857 try {
24858 test_type_prototype();
24859 } catch (e) {
24860 ok(false, "unexpected exception thrown in: test_type_prototype");
24861 }
24862 try {
24863 test_2d_imagedata_coercion();
24864 } catch (e) {
24865 ok(false, "unexpected exception thrown in: test_2d_imagedata_coercion");
24866 }
24867 try {
24868 test_2d_imageSmoothing();
24869 } catch (e) {
24870 ok(false, "unexpected exception thrown in: test_2d_imageSmoothing");
24871 }
24872 try {
24873 test_zero_dimensions();
24874 } catch (e) {
24875 ok(false, "unexpected exception thrown in: test_zero_dimensions");
24876 }
24877 try {
24878 test_zero_dimensions_imagedata();
24879 } catch(e) {
24880 ok(false, "unexpected exception thrown in: test_zero_dimensions_imagedata");
24881 }
24882 try {
24883 test_getImageData_after_zero_canvas();
24884 } catch(e) {
24885 throw e;
24886 ok(false, "unexpected exception thrown in: test_getImageData_after_zero_canvas");
24887 }
24888 try {
24889 test_linedash();
24890 } catch(e) {
24891 throw e;
24892 ok(false, "unexpected exception thrown in: test_linedash");
24893 }
24894 try {
24895 test_opaque();
24896 } catch(e) {
24897 throw e;
24898 ok(false, "unexpected exception thrown in: test_opaque");
24899 }
24900 try {
24901 // run this test last since it replaces the getContext method
24902 test_type_replace();
24903 } catch (e) {
24904 ok(false, "unexpected exception thrown in: test_type_replace");
24905 }
24906
24907 //run the asynchronous tests
24908 try {
24909 test_2d_drawImage_animated_apng();
24910 } catch (e) {
24911 ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_apng");
24912 }
24913 try {
24914 test_2d_drawImage_animated_gif();
24915 } catch (e) {
24916 ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_gif");
24917 }
24918
24919 setTimeout(asyncTestsDone, 500);
24920 }
24921
24922 addLoadEvent(runTests);
24923
24924 </script>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial