test_canvas.html (751138B)
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 SimpleTest.requestFlakyTimeout("untriaged"); 10 const Cc = SpecialPowers.Cc; 11 const Cr = SpecialPowers.Cr; 12 13 function IsLinux() { 14 var os = ""; 15 16 try { 17 os = Cc["@mozilla.org/xre/app-info;1"] 18 .getService(SpecialPowers.Ci.nsIXULRuntime).OS; 19 } catch (e) {} 20 21 return os.indexOf("Linux") == 0 && 22 !navigator.appVersion.includes("Android"); 23 } 24 25 function IsWindows() { 26 var os = ""; 27 28 try { 29 os = Cc["@mozilla.org/xre/app-info;1"] 30 .getService(SpecialPowers.Ci.nsIXULRuntime).OS; 31 } catch (e) {} 32 33 return os.indexOf("WINNT") == 0; 34 } 35 36 function IsAzureSkia() { 37 var enabled = false; 38 39 try { 40 var backend = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).AzureCanvasBackend; 41 enabled = (backend == "skia"); 42 } catch (e) { } 43 44 return enabled; 45 } 46 47 function IsAzureCairo() { 48 var enabled = false; 49 50 try { 51 var backend = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).AzureCanvasBackend; 52 enabled = (backend == "cairo"); 53 } catch (e) { } 54 55 return enabled; 56 } 57 58 </script> 59 <!-- Includes all the tests in the dom/canvas/tests except for test_bug397524.html --> 60 61 <!-- [[[ test_2d.canvas.readonly.html ]]] --> 62 63 <p>Canvas test: 2d.canvas.readonly</p> 64 <!-- Testing: CanvasRenderingContext2D.canvas is readonly --> 65 <canvas id="c1" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 66 <script> 67 68 function test_2d_canvas_readonly() { 69 70 var canvas = document.getElementById('c1'); 71 var ctx = canvas.getContext('2d'); 72 73 var c = document.createElement('canvas'); 74 var d = ctx.canvas; 75 ok(c !== d, "c !== d"); 76 try { ctx.canvas = c; } catch (e) {} // not sure whether this should throw or not... 77 ok(ctx.canvas === d, "ctx.canvas === d"); 78 79 80 } 81 </script> 82 83 <!-- [[[ test_2d.canvas.reference.html ]]] --> 84 85 <p>Canvas test: 2d.canvas.reference</p> 86 <!-- Testing: CanvasRenderingContext2D.canvas refers back to its canvas --> 87 <canvas id="c2" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 88 <script> 89 90 function test_2d_canvas_reference() { 91 92 var canvas = document.getElementById('c2'); 93 var ctx = canvas.getContext('2d'); 94 95 ok(ctx.canvas === canvas, "ctx.canvas === canvas"); 96 97 98 } 99 </script> 100 101 <!-- [[[ test_2d.clearRect.basic.html ]]] --> 102 103 <p>Canvas test: 2d.clearRect.basic</p> 104 <canvas id="c3" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 105 <script> 106 function isPixel(ctx, x,y, r,g,b,a, d) { 107 var pos = x + "," + y; 108 var colour = r + "," + g + "," + b + "," + a; 109 var pixel = ctx.getImageData(x, y, 1, 1); 110 var pr = pixel.data[0], 111 pg = pixel.data[1], 112 pb = pixel.data[2], 113 pa = pixel.data[3]; 114 ok(r-d <= pr && pr <= r+d && 115 g-d <= pg && pg <= g+d && 116 b-d <= pb && pb <= b+d && 117 a-d <= pa && pa <= a+d, 118 "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+"; expected "+colour+" +/- "+d); 119 } 120 121 function test_2d_clearRect_basic() { 122 123 var canvas = document.getElementById('c3'); 124 var ctx = canvas.getContext('2d'); 125 126 ctx.fillStyle = '#f00'; 127 ctx.fillRect(0, 0, 100, 50); 128 ctx.clearRect(0, 0, 100, 50); 129 isPixel(ctx, 50,25, 0,0,0,0, 0); 130 131 132 } 133 </script> 134 135 <!-- [[[ test_2d.clearRect.clip.html ]]] --> 136 137 <p>Canvas test: 2d.clearRect.clip</p> 138 <canvas id="c4" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 139 <script> 140 141 142 function test_2d_clearRect_clip() { 143 144 var canvas = document.getElementById('c4'); 145 var ctx = canvas.getContext('2d'); 146 147 ctx.fillStyle = '#0f0'; 148 ctx.fillRect(0, 0, 100, 50); 149 150 ctx.beginPath(); 151 ctx.rect(0, 0, 16, 16); 152 ctx.clip(); 153 154 ctx.clearRect(0, 0, 100, 50); 155 156 ctx.fillStyle = '#0f0'; 157 ctx.fillRect(0, 0, 16, 16); 158 159 isPixel(ctx, 50,25, 0,255,0,255, 0); 160 161 162 } 163 </script> 164 165 <!-- [[[ test_2d.clearRect.globalalpha.html ]]] --> 166 167 <p>Canvas test: 2d.clearRect.globalalpha</p> 168 <canvas id="c5" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 169 <script> 170 171 172 function test_2d_clearRect_globalalpha() { 173 174 var canvas = document.getElementById('c5'); 175 var ctx = canvas.getContext('2d'); 176 177 ctx.fillStyle = '#f00'; 178 ctx.fillRect(0, 0, 100, 50); 179 ctx.globalAlpha = 0.1; 180 ctx.clearRect(0, 0, 100, 50); 181 isPixel(ctx, 50,25, 0,0,0,0, 0); 182 183 184 } 185 </script> 186 187 <!-- [[[ test_2d.clearRect.globalcomposite.html ]]] --> 188 189 <p>Canvas test: 2d.clearRect.globalcomposite</p> 190 <canvas id="c6" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 191 <script> 192 193 194 function test_2d_clearRect_globalcomposite() { 195 196 var canvas = document.getElementById('c6'); 197 var ctx = canvas.getContext('2d'); 198 199 ctx.fillStyle = '#f00'; 200 ctx.fillRect(0, 0, 100, 50); 201 ctx.globalCompositeOperation = 'destination-atop'; 202 ctx.clearRect(0, 0, 100, 50); 203 isPixel(ctx, 50,25, 0,0,0,0, 0); 204 205 206 } 207 </script> 208 209 <!-- [[[ test_2d.clearRect.negative.html ]]] --> 210 211 <p>Canvas test: 2d.clearRect.negative</p> 212 <canvas id="c7" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 213 <script> 214 215 216 function test_2d_clearRect_negative() { 217 218 var canvas = document.getElementById('c7'); 219 var ctx = canvas.getContext('2d'); 220 221 ctx.fillStyle = '#f00'; 222 ctx.fillRect(0, 0, 100, 50); 223 ctx.clearRect(0, 0, 50, 25); 224 ctx.clearRect(100, 0, -50, 25); 225 ctx.clearRect(0, 50, 50, -25); 226 ctx.clearRect(100, 50, -50, -25); 227 isPixel(ctx, 25,12, 0,0,0,0, 0); 228 isPixel(ctx, 75,12, 0,0,0,0, 0); 229 isPixel(ctx, 25,37, 0,0,0,0, 0); 230 isPixel(ctx, 75,37, 0,0,0,0, 0); 231 232 233 } 234 </script> 235 236 <!-- [[[ test_2d.clearRect.nonfinite.html ]]] --> 237 238 <p>Canvas test: 2d.clearRect.nonfinite</p> 239 <!-- Testing: clearRect() with Infinity/NaN is ignored --> 240 <canvas id="c8" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 241 <script> 242 243 244 function test_2d_clearRect_nonfinite() { 245 246 var canvas = document.getElementById('c8'); 247 var ctx = canvas.getContext('2d'); 248 249 var _thrown_outer = false; 250 try { 251 252 ctx.fillStyle = '#0f0'; 253 ctx.fillRect(0, 0, 100, 50); 254 255 ctx.clearRect(Infinity, 0, 100, 50); 256 ctx.clearRect(-Infinity, 0, 100, 50); 257 ctx.clearRect(NaN, 0, 100, 50); 258 ctx.clearRect(0, Infinity, 100, 50); 259 ctx.clearRect(0, -Infinity, 100, 50); 260 ctx.clearRect(0, NaN, 100, 50); 261 ctx.clearRect(0, 0, Infinity, 50); 262 ctx.clearRect(0, 0, -Infinity, 50); 263 ctx.clearRect(0, 0, NaN, 50); 264 ctx.clearRect(0, 0, 100, Infinity); 265 ctx.clearRect(0, 0, 100, -Infinity); 266 ctx.clearRect(0, 0, 100, NaN); 267 ctx.clearRect(Infinity, Infinity, 100, 50); 268 ctx.clearRect(Infinity, Infinity, Infinity, 50); 269 ctx.clearRect(Infinity, Infinity, Infinity, Infinity); 270 ctx.clearRect(Infinity, Infinity, 100, Infinity); 271 ctx.clearRect(Infinity, 0, Infinity, 50); 272 ctx.clearRect(Infinity, 0, Infinity, Infinity); 273 ctx.clearRect(Infinity, 0, 100, Infinity); 274 ctx.clearRect(0, Infinity, Infinity, 50); 275 ctx.clearRect(0, Infinity, Infinity, Infinity); 276 ctx.clearRect(0, Infinity, 100, Infinity); 277 ctx.clearRect(0, 0, Infinity, Infinity); 278 279 isPixel(ctx, 50,25, 0,255,0,255, 0); 280 281 } catch (e) { 282 _thrown_outer = true; 283 } 284 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 285 286 287 } 288 </script> 289 290 <!-- [[[ test_2d.clearRect.path.html ]]] --> 291 292 <p>Canvas test: 2d.clearRect.path</p> 293 <canvas id="c9" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 294 <script> 295 296 297 function test_2d_clearRect_path() { 298 299 var canvas = document.getElementById('c9'); 300 var ctx = canvas.getContext('2d'); 301 302 ctx.fillStyle = '#0f0'; 303 ctx.beginPath(); 304 ctx.rect(0, 0, 100, 50); 305 ctx.clearRect(0, 0, 16, 16); 306 ctx.fill(); 307 isPixel(ctx, 50,25, 0,255,0,255, 0); 308 309 310 } 311 </script> 312 313 <!-- [[[ test_2d.clearRect.shadow.html ]]] --> 314 315 <p>Canvas test: 2d.clearRect.shadow</p> 316 <canvas id="c10" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 317 <script> 318 319 320 function test_2d_clearRect_shadow() { 321 322 var canvas = document.getElementById('c10'); 323 var ctx = canvas.getContext('2d'); 324 325 ctx.fillStyle = '#0f0'; 326 ctx.fillRect(0, 0, 100, 50); 327 ctx.shadowColor = '#f00'; 328 ctx.shadowBlur = 0; 329 ctx.shadowOffsetX = 0; 330 ctx.shadowOffsetY = 50; 331 ctx.clearRect(0, -50, 100, 50); 332 isPixel(ctx, 50,25, 0,255,0,255, 0); 333 334 335 } 336 </script> 337 338 <!-- [[[ test_2d.clearRect.transform.html ]]] --> 339 340 <p>Canvas test: 2d.clearRect.transform</p> 341 <canvas id="c11" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 342 <script> 343 344 345 function test_2d_clearRect_transform() { 346 347 var canvas = document.getElementById('c11'); 348 var ctx = canvas.getContext('2d'); 349 350 ctx.fillStyle = '#f00'; 351 ctx.fillRect(0, 0, 100, 50); 352 ctx.scale(10, 10); 353 ctx.translate(0, 5); 354 ctx.clearRect(0, -5, 10, 5); 355 isPixel(ctx, 50,25, 0,0,0,0, 0); 356 357 358 } 359 </script> 360 361 <!-- [[[ test_2d.clearRect.zero.html ]]] --> 362 363 <p>Canvas test: 2d.clearRect.zero</p> 364 <canvas id="c12" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 365 <script> 366 367 368 function test_2d_clearRect_zero() { 369 370 var canvas = document.getElementById('c12'); 371 var ctx = canvas.getContext('2d'); 372 373 ctx.fillStyle = '#0f0'; 374 ctx.fillRect(0, 0, 100, 50); 375 ctx.clearRect(0, 0, 100, 0); 376 ctx.clearRect(0, 0, 0, 50); 377 ctx.clearRect(0, 0, 0, 0); 378 isPixel(ctx, 50,25, 0,255,0,255, 0); 379 380 381 } 382 </script> 383 384 <!-- [[[ test_2d.composite.canvas.copy.html ]]] --> 385 386 <p>Canvas test: 2d.composite.canvas.copy</p> 387 <canvas id="c13" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 388 <script> 389 390 391 function test_2d_composite_canvas_copy() { 392 393 var canvas = document.getElementById('c13'); 394 var ctx = canvas.getContext('2d'); 395 396 397 var canvas2 = document.createElement('canvas'); 398 canvas2.width = canvas.width; 399 canvas2.height = canvas.height; 400 var ctx2 = canvas2.getContext('2d'); 401 ctx2.drawImage(document.getElementById('yellow75_1.png'), 0, 0); 402 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 403 ctx.fillRect(0, 0, 100, 50); 404 ctx.globalCompositeOperation = 'copy'; 405 ctx.drawImage(canvas2, 0, 0); 406 isPixel(ctx, 50,25, 255,255,0,191, 5); 407 408 409 } 410 </script> 411 <img src="image_yellow75.png" id="yellow75_1.png" class="resource"> 412 413 <!-- [[[ test_2d.composite.canvas.destination-atop.html ]]] --> 414 415 <p>Canvas test: 2d.composite.canvas.destination-atop</p> 416 <canvas id="c14" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 417 <script> 418 419 420 function test_2d_composite_canvas_destination_atop() { 421 422 var canvas = document.getElementById('c14'); 423 var ctx = canvas.getContext('2d'); 424 425 426 var canvas2 = document.createElement('canvas'); 427 canvas2.width = canvas.width; 428 canvas2.height = canvas.height; 429 var ctx2 = canvas2.getContext('2d'); 430 ctx2.drawImage(document.getElementById('yellow75_2.png'), 0, 0); 431 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 432 ctx.fillRect(0, 0, 100, 50); 433 ctx.globalCompositeOperation = 'destination-atop'; 434 ctx.drawImage(canvas2, 0, 0); 435 isPixel(ctx, 50,25, 127,255,127,191, 5); 436 437 438 } 439 </script> 440 <img src="image_yellow75.png" id="yellow75_2.png" class="resource"> 441 442 <!-- [[[ test_2d.composite.canvas.destination-in.html ]]] --> 443 444 <p>Canvas test: 2d.composite.canvas.destination-in</p> 445 <canvas id="c15" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 446 <script> 447 448 449 function test_2d_composite_canvas_destination_in() { 450 451 var canvas = document.getElementById('c15'); 452 var ctx = canvas.getContext('2d'); 453 454 455 var canvas2 = document.createElement('canvas'); 456 canvas2.width = canvas.width; 457 canvas2.height = canvas.height; 458 var ctx2 = canvas2.getContext('2d'); 459 ctx2.drawImage(document.getElementById('yellow75_3.png'), 0, 0); 460 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 461 ctx.fillRect(0, 0, 100, 50); 462 ctx.globalCompositeOperation = 'destination-in'; 463 ctx.drawImage(canvas2, 0, 0); 464 isPixel(ctx, 50,25, 0,255,255,95, 5); 465 466 467 } 468 </script> 469 <img src="image_yellow75.png" id="yellow75_3.png" class="resource"> 470 471 <!-- [[[ test_2d.composite.canvas.destination-out.html ]]] --> 472 473 <p>Canvas test: 2d.composite.canvas.destination-out</p> 474 <canvas id="c16" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 475 <script> 476 477 478 function test_2d_composite_canvas_destination_out() { 479 480 var canvas = document.getElementById('c16'); 481 var ctx = canvas.getContext('2d'); 482 483 484 var canvas2 = document.createElement('canvas'); 485 canvas2.width = canvas.width; 486 canvas2.height = canvas.height; 487 var ctx2 = canvas2.getContext('2d'); 488 ctx2.drawImage(document.getElementById('yellow75_4.png'), 0, 0); 489 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 490 ctx.fillRect(0, 0, 100, 50); 491 ctx.globalCompositeOperation = 'destination-out'; 492 ctx.drawImage(canvas2, 0, 0); 493 isPixel(ctx, 50,25, 0,255,255,31, 5); 494 495 496 } 497 </script> 498 <img src="image_yellow75.png" id="yellow75_4.png" class="resource"> 499 500 <!-- [[[ test_2d.composite.canvas.destination-over.html ]]] --> 501 502 <p>Canvas test: 2d.composite.canvas.destination-over</p> 503 <canvas id="c17" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 504 <script> 505 506 507 function test_2d_composite_canvas_destination_over() { 508 509 var canvas = document.getElementById('c17'); 510 var ctx = canvas.getContext('2d'); 511 512 513 var canvas2 = document.createElement('canvas'); 514 canvas2.width = canvas.width; 515 canvas2.height = canvas.height; 516 var ctx2 = canvas2.getContext('2d'); 517 ctx2.drawImage(document.getElementById('yellow75_5.png'), 0, 0); 518 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 519 ctx.fillRect(0, 0, 100, 50); 520 ctx.globalCompositeOperation = 'destination-over'; 521 ctx.drawImage(canvas2, 0, 0); 522 isPixel(ctx, 50,25, 109,255,145,223, 5); 523 524 525 } 526 </script> 527 <img src="image_yellow75.png" id="yellow75_5.png" class="resource"> 528 529 <!-- [[[ test_2d.composite.canvas.lighter.html ]]] --> 530 531 <p>Canvas test: 2d.composite.canvas.lighter</p> 532 <canvas id="c18" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 533 <script> 534 535 536 function test_2d_composite_canvas_lighter() { 537 538 var canvas = document.getElementById('c18'); 539 var ctx = canvas.getContext('2d'); 540 541 542 var canvas2 = document.createElement('canvas'); 543 canvas2.width = canvas.width; 544 canvas2.height = canvas.height; 545 var ctx2 = canvas2.getContext('2d'); 546 ctx2.drawImage(document.getElementById('yellow75_6.png'), 0, 0); 547 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 548 ctx.fillRect(0, 0, 100, 50); 549 ctx.globalCompositeOperation = 'lighter'; 550 ctx.drawImage(canvas2, 0, 0); 551 isPixel(ctx, 50,25, 191,255,127,255, 5); 552 553 554 } 555 </script> 556 <img src="image_yellow75.png" id="yellow75_6.png" class="resource"> 557 558 <!-- [[[ test_2d.composite.canvas.source-atop.html ]]] --> 559 560 <p>Canvas test: 2d.composite.canvas.source-atop</p> 561 <canvas id="c19" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 562 <script> 563 564 565 function test_2d_composite_canvas_source_atop() { 566 567 var canvas = document.getElementById('c19'); 568 var ctx = canvas.getContext('2d'); 569 570 571 var canvas2 = document.createElement('canvas'); 572 canvas2.width = canvas.width; 573 canvas2.height = canvas.height; 574 var ctx2 = canvas2.getContext('2d'); 575 ctx2.drawImage(document.getElementById('yellow75_7.png'), 0, 0); 576 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 577 ctx.fillRect(0, 0, 100, 50); 578 ctx.globalCompositeOperation = 'source-atop'; 579 ctx.drawImage(canvas2, 0, 0); 580 isPixel(ctx, 50,25, 191,255,63,127, 5); 581 582 583 } 584 </script> 585 <img src="image_yellow75.png" id="yellow75_7.png" class="resource"> 586 587 <!-- [[[ test_2d.composite.canvas.source-in.html ]]] --> 588 589 <p>Canvas test: 2d.composite.canvas.source-in</p> 590 <canvas id="c20" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 591 <script> 592 593 594 function test_2d_composite_canvas_source_in() { 595 596 var canvas = document.getElementById('c20'); 597 var ctx = canvas.getContext('2d'); 598 599 600 var canvas2 = document.createElement('canvas'); 601 canvas2.width = canvas.width; 602 canvas2.height = canvas.height; 603 var ctx2 = canvas2.getContext('2d'); 604 ctx2.drawImage(document.getElementById('yellow75_8.png'), 0, 0); 605 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 606 ctx.fillRect(0, 0, 100, 50); 607 ctx.globalCompositeOperation = 'source-in'; 608 ctx.drawImage(canvas2, 0, 0); 609 isPixel(ctx, 50,25, 255,255,0,95, 5); 610 611 612 } 613 </script> 614 <img src="image_yellow75.png" id="yellow75_8.png" class="resource"> 615 616 <!-- [[[ test_2d.composite.canvas.source-out.html ]]] --> 617 618 <p>Canvas test: 2d.composite.canvas.source-out</p> 619 <canvas id="c21" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 620 <script> 621 622 623 function test_2d_composite_canvas_source_out() { 624 625 var canvas = document.getElementById('c21'); 626 var ctx = canvas.getContext('2d'); 627 628 629 var canvas2 = document.createElement('canvas'); 630 canvas2.width = canvas.width; 631 canvas2.height = canvas.height; 632 var ctx2 = canvas2.getContext('2d'); 633 ctx2.drawImage(document.getElementById('yellow75_9.png'), 0, 0); 634 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 635 ctx.fillRect(0, 0, 100, 50); 636 ctx.globalCompositeOperation = 'source-out'; 637 ctx.drawImage(canvas2, 0, 0); 638 isPixel(ctx, 50,25, 255,255,0,95, 5); 639 640 641 } 642 </script> 643 <img src="image_yellow75.png" id="yellow75_9.png" class="resource"> 644 645 <!-- [[[ test_2d.composite.canvas.source-over.html ]]] --> 646 647 <p>Canvas test: 2d.composite.canvas.source-over</p> 648 <canvas id="c22" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 649 <script> 650 651 652 function test_2d_composite_canvas_source_over() { 653 654 var canvas = document.getElementById('c22'); 655 var ctx = canvas.getContext('2d'); 656 657 658 var canvas2 = document.createElement('canvas'); 659 canvas2.width = canvas.width; 660 canvas2.height = canvas.height; 661 var ctx2 = canvas2.getContext('2d'); 662 ctx2.drawImage(document.getElementById('yellow75_10.png'), 0, 0); 663 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 664 ctx.fillRect(0, 0, 100, 50); 665 ctx.globalCompositeOperation = 'source-over'; 666 ctx.drawImage(canvas2, 0, 0); 667 isPixel(ctx, 50,25, 218,255,36,223, 5); 668 669 670 } 671 </script> 672 <img src="image_yellow75.png" id="yellow75_10.png" class="resource"> 673 674 <!-- [[[ test_2d.composite.canvas.xor.html ]]] --> 675 676 <p>Canvas test: 2d.composite.canvas.xor</p> 677 <canvas id="c23" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 678 <script> 679 680 681 function test_2d_composite_canvas_xor() { 682 683 var canvas = document.getElementById('c23'); 684 var ctx = canvas.getContext('2d'); 685 686 687 var canvas2 = document.createElement('canvas'); 688 canvas2.width = canvas.width; 689 canvas2.height = canvas.height; 690 var ctx2 = canvas2.getContext('2d'); 691 ctx2.drawImage(document.getElementById('yellow75_11.png'), 0, 0); 692 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 693 ctx.fillRect(0, 0, 100, 50); 694 ctx.globalCompositeOperation = 'xor'; 695 ctx.drawImage(canvas2, 0, 0); 696 isPixel(ctx, 50,25, 191,255,63,127, 5); 697 698 699 } 700 </script> 701 <img src="image_yellow75.png" id="yellow75_11.png" class="resource"> 702 703 <!-- [[[ test_2d.composite.clip.copy.html ]]] --> 704 705 <p>Canvas test: 2d.composite.clip.copy</p> 706 <!-- Testing: fill() does not affect pixels outside the clip region. --> 707 <canvas id="c24" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 708 <script> 709 710 711 function test_2d_composite_clip_copy() { 712 713 var canvas = document.getElementById('c24'); 714 var ctx = canvas.getContext('2d'); 715 716 717 ctx.fillStyle = '#0f0'; 718 ctx.fillRect(0, 0, 100, 50); 719 ctx.globalCompositeOperation = 'copy'; 720 ctx.rect(-20, -20, 10, 10); 721 ctx.clip(); 722 ctx.fillStyle = '#f00'; 723 ctx.fillRect(0, 0, 50, 50); 724 isPixel(ctx, 25,25, 0,255,0,255, 0); 725 isPixel(ctx, 75,25, 0,255,0,255, 0); 726 727 728 } 729 </script> 730 731 <!-- [[[ test_2d.composite.clip.destination-atop.html ]]] --> 732 733 <p>Canvas test: 2d.composite.clip.destination-atop</p> 734 <!-- Testing: fill() does not affect pixels outside the clip region. --> 735 <canvas id="c25" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 736 <script> 737 738 739 function test_2d_composite_clip_destination_atop() { 740 741 var canvas = document.getElementById('c25'); 742 var ctx = canvas.getContext('2d'); 743 744 745 ctx.fillStyle = '#0f0'; 746 ctx.fillRect(0, 0, 100, 50); 747 ctx.globalCompositeOperation = 'destination-atop'; 748 ctx.rect(-20, -20, 10, 10); 749 ctx.clip(); 750 ctx.fillStyle = '#f00'; 751 ctx.fillRect(0, 0, 50, 50); 752 isPixel(ctx, 25,25, 0,255,0,255, 0); 753 isPixel(ctx, 75,25, 0,255,0,255, 0); 754 755 756 } 757 </script> 758 759 <!-- [[[ test_2d.composite.clip.destination-in.html ]]] --> 760 761 <p>Canvas test: 2d.composite.clip.destination-in</p> 762 <!-- Testing: fill() does not affect pixels outside the clip region. --> 763 <canvas id="c26" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 764 <script> 765 766 767 function test_2d_composite_clip_destination_in() { 768 769 var canvas = document.getElementById('c26'); 770 var ctx = canvas.getContext('2d'); 771 772 773 ctx.fillStyle = '#0f0'; 774 ctx.fillRect(0, 0, 100, 50); 775 ctx.globalCompositeOperation = 'destination-in'; 776 ctx.rect(-20, -20, 10, 10); 777 ctx.clip(); 778 ctx.fillStyle = '#f00'; 779 ctx.fillRect(0, 0, 50, 50); 780 isPixel(ctx, 25,25, 0,255,0,255, 0); 781 isPixel(ctx, 75,25, 0,255,0,255, 0); 782 783 784 } 785 </script> 786 787 <!-- [[[ test_2d.composite.clip.destination-out.html ]]] --> 788 789 <p>Canvas test: 2d.composite.clip.destination-out</p> 790 <!-- Testing: fill() does not affect pixels outside the clip region. --> 791 <canvas id="c27" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 792 <script> 793 794 795 function test_2d_composite_clip_destination_out() { 796 797 var canvas = document.getElementById('c27'); 798 var ctx = canvas.getContext('2d'); 799 800 801 ctx.fillStyle = '#0f0'; 802 ctx.fillRect(0, 0, 100, 50); 803 ctx.globalCompositeOperation = 'destination-out'; 804 ctx.rect(-20, -20, 10, 10); 805 ctx.clip(); 806 ctx.fillStyle = '#f00'; 807 ctx.fillRect(0, 0, 50, 50); 808 isPixel(ctx, 25,25, 0,255,0,255, 0); 809 isPixel(ctx, 75,25, 0,255,0,255, 0); 810 811 812 } 813 </script> 814 815 <!-- [[[ test_2d.composite.clip.destination-over.html ]]] --> 816 817 <p>Canvas test: 2d.composite.clip.destination-over</p> 818 <!-- Testing: fill() does not affect pixels outside the clip region. --> 819 <canvas id="c28" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 820 <script> 821 822 823 function test_2d_composite_clip_destination_over() { 824 825 var canvas = document.getElementById('c28'); 826 var ctx = canvas.getContext('2d'); 827 828 829 ctx.fillStyle = '#0f0'; 830 ctx.fillRect(0, 0, 100, 50); 831 ctx.globalCompositeOperation = 'destination-over'; 832 ctx.rect(-20, -20, 10, 10); 833 ctx.clip(); 834 ctx.fillStyle = '#f00'; 835 ctx.fillRect(0, 0, 50, 50); 836 isPixel(ctx, 25,25, 0,255,0,255, 0); 837 isPixel(ctx, 75,25, 0,255,0,255, 0); 838 839 840 } 841 </script> 842 843 <!-- [[[ test_2d.composite.clip.lighter.html ]]] --> 844 845 <p>Canvas test: 2d.composite.clip.lighter</p> 846 <!-- Testing: fill() does not affect pixels outside the clip region. --> 847 <canvas id="c29" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 848 <script> 849 850 851 function test_2d_composite_clip_lighter() { 852 853 var canvas = document.getElementById('c29'); 854 var ctx = canvas.getContext('2d'); 855 856 857 ctx.fillStyle = '#0f0'; 858 ctx.fillRect(0, 0, 100, 50); 859 ctx.globalCompositeOperation = 'lighter'; 860 ctx.rect(-20, -20, 10, 10); 861 ctx.clip(); 862 ctx.fillStyle = '#f00'; 863 ctx.fillRect(0, 0, 50, 50); 864 isPixel(ctx, 25,25, 0,255,0,255, 0); 865 isPixel(ctx, 75,25, 0,255,0,255, 0); 866 867 868 } 869 </script> 870 871 <!-- [[[ test_2d.composite.clip.source-atop.html ]]] --> 872 873 <p>Canvas test: 2d.composite.clip.source-atop</p> 874 <!-- Testing: fill() does not affect pixels outside the clip region. --> 875 <canvas id="c30" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 876 <script> 877 878 879 function test_2d_composite_clip_source_atop() { 880 881 var canvas = document.getElementById('c30'); 882 var ctx = canvas.getContext('2d'); 883 884 885 ctx.fillStyle = '#0f0'; 886 ctx.fillRect(0, 0, 100, 50); 887 ctx.globalCompositeOperation = 'source-atop'; 888 ctx.rect(-20, -20, 10, 10); 889 ctx.clip(); 890 ctx.fillStyle = '#f00'; 891 ctx.fillRect(0, 0, 50, 50); 892 isPixel(ctx, 25,25, 0,255,0,255, 0); 893 isPixel(ctx, 75,25, 0,255,0,255, 0); 894 895 896 } 897 </script> 898 899 <!-- [[[ test_2d.composite.clip.source-in.html ]]] --> 900 901 <p>Canvas test: 2d.composite.clip.source-in</p> 902 <!-- Testing: fill() does not affect pixels outside the clip region. --> 903 <canvas id="c31" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 904 <script> 905 906 907 function test_2d_composite_clip_source_in() { 908 909 var canvas = document.getElementById('c31'); 910 var ctx = canvas.getContext('2d'); 911 912 913 ctx.fillStyle = '#0f0'; 914 ctx.fillRect(0, 0, 100, 50); 915 ctx.globalCompositeOperation = 'source-in'; 916 ctx.rect(-20, -20, 10, 10); 917 ctx.clip(); 918 ctx.fillStyle = '#f00'; 919 ctx.fillRect(0, 0, 50, 50); 920 isPixel(ctx, 25,25, 0,255,0,255, 0); 921 isPixel(ctx, 75,25, 0,255,0,255, 0); 922 923 924 } 925 </script> 926 927 <!-- [[[ test_2d.composite.clip.source-out.html ]]] --> 928 929 <p>Canvas test: 2d.composite.clip.source-out</p> 930 <!-- Testing: fill() does not affect pixels outside the clip region. --> 931 <canvas id="c32" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 932 <script> 933 934 935 function test_2d_composite_clip_source_out() { 936 937 var canvas = document.getElementById('c32'); 938 var ctx = canvas.getContext('2d'); 939 940 941 ctx.fillStyle = '#0f0'; 942 ctx.fillRect(0, 0, 100, 50); 943 ctx.globalCompositeOperation = 'source-out'; 944 ctx.rect(-20, -20, 10, 10); 945 ctx.clip(); 946 ctx.fillStyle = '#f00'; 947 ctx.fillRect(0, 0, 50, 50); 948 isPixel(ctx, 25,25, 0,255,0,255, 0); 949 isPixel(ctx, 75,25, 0,255,0,255, 0); 950 951 952 } 953 </script> 954 955 <!-- [[[ test_2d.composite.clip.source-over.html ]]] --> 956 957 <p>Canvas test: 2d.composite.clip.source-over</p> 958 <!-- Testing: fill() does not affect pixels outside the clip region. --> 959 <canvas id="c33" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 960 <script> 961 962 963 function test_2d_composite_clip_source_over() { 964 965 var canvas = document.getElementById('c33'); 966 var ctx = canvas.getContext('2d'); 967 968 969 ctx.fillStyle = '#0f0'; 970 ctx.fillRect(0, 0, 100, 50); 971 ctx.globalCompositeOperation = 'source-over'; 972 ctx.rect(-20, -20, 10, 10); 973 ctx.clip(); 974 ctx.fillStyle = '#f00'; 975 ctx.fillRect(0, 0, 50, 50); 976 isPixel(ctx, 25,25, 0,255,0,255, 0); 977 isPixel(ctx, 75,25, 0,255,0,255, 0); 978 979 980 } 981 </script> 982 983 <!-- [[[ test_2d.composite.clip.xor.html ]]] --> 984 985 <p>Canvas test: 2d.composite.clip.xor</p> 986 <!-- Testing: fill() does not affect pixels outside the clip region. --> 987 <canvas id="c34" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 988 <script> 989 990 991 function test_2d_composite_clip_xor() { 992 993 var canvas = document.getElementById('c34'); 994 var ctx = canvas.getContext('2d'); 995 996 997 ctx.fillStyle = '#0f0'; 998 ctx.fillRect(0, 0, 100, 50); 999 ctx.globalCompositeOperation = 'xor'; 1000 ctx.rect(-20, -20, 10, 10); 1001 ctx.clip(); 1002 ctx.fillStyle = '#f00'; 1003 ctx.fillRect(0, 0, 50, 50); 1004 isPixel(ctx, 25,25, 0,255,0,255, 0); 1005 isPixel(ctx, 75,25, 0,255,0,255, 0); 1006 1007 1008 } 1009 </script> 1010 1011 <!-- [[[ test_2d.composite.globalAlpha.canvas.html ]]] --> 1012 1013 <p>Canvas test: 2d.composite.globalAlpha.canvas</p> 1014 <canvas id="c35" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1015 <script> 1016 1017 1018 function test_2d_composite_globalAlpha_canvas() { 1019 1020 var canvas = document.getElementById('c35'); 1021 var ctx = canvas.getContext('2d'); 1022 1023 var canvas2 = document.createElement('canvas'); 1024 canvas2.width = 100; 1025 canvas2.height = 50; 1026 var ctx2 = canvas2.getContext('2d'); 1027 ctx2.fillStyle = '#f00'; 1028 ctx2.fillRect(0, 0, 100, 50); 1029 1030 ctx.fillStyle = '#0f0'; 1031 ctx.fillRect(0, 0, 100, 50); 1032 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations 1033 ctx.drawImage(canvas2, 0, 0); 1034 isPixel(ctx, 50,25, 2,253,0,255, 2); 1035 1036 1037 } 1038 </script> 1039 1040 <!-- [[[ test_2d.composite.globalAlpha.canvaspattern.html ]]] --> 1041 1042 <p>Canvas test: 2d.composite.globalAlpha.canvaspattern - bug 401790</p> 1043 <canvas id="c36" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1044 <script> 1045 1046 function todo_isPixel(ctx, x,y, r,g,b,a, d) { 1047 var pos = x + "," + y; 1048 var colour = r + "," + g + "," + b + "," + a; 1049 var pixel = ctx.getImageData(x, y, 1, 1); 1050 var pr = pixel.data[0], 1051 pg = pixel.data[1], 1052 pb = pixel.data[2], 1053 pa = pixel.data[3]; 1054 todo(r-d <= pr && pr <= r+d && 1055 g-d <= pg && pg <= g+d && 1056 b-d <= pb && pb <= b+d && 1057 a-d <= pa && pa <= a+d, 1058 "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+" (marked todo); expected "+colour+" +/- " + d); 1059 } 1060 1061 function test_2d_composite_globalAlpha_canvaspattern() { 1062 1063 var canvas = document.getElementById('c36'); 1064 var ctx = canvas.getContext('2d'); 1065 1066 var canvas2 = document.createElement('canvas'); 1067 canvas2.width = 100; 1068 canvas2.height = 50; 1069 var ctx2 = canvas2.getContext('2d'); 1070 ctx2.fillStyle = '#f00'; 1071 ctx2.fillRect(0, 0, 100, 50); 1072 1073 ctx.fillStyle = '#0f0'; 1074 ctx.fillRect(0, 0, 100, 50); 1075 ctx.fillStyle = ctx.createPattern(canvas2, 'no-repeat'); 1076 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations 1077 ctx.fillRect(0, 0, 100, 50); 1078 isPixel(ctx, 50,25, 2,253,0,255, 2); 1079 1080 1081 } 1082 </script> 1083 1084 <!-- [[[ test_2d.composite.globalAlpha.default.html ]]] --> 1085 1086 <p>Canvas test: 2d.composite.globalAlpha.default</p> 1087 <canvas id="c37" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1088 <script> 1089 1090 function test_2d_composite_globalAlpha_default() { 1091 1092 var canvas = document.getElementById('c37'); 1093 var ctx = canvas.getContext('2d'); 1094 1095 ok(ctx.globalAlpha === 1.0, "ctx.globalAlpha === 1.0"); 1096 1097 1098 } 1099 </script> 1100 1101 <!-- [[[ test_2d.composite.globalAlpha.fill.html ]]] --> 1102 1103 <p>Canvas test: 2d.composite.globalAlpha.fill</p> 1104 <canvas id="c38" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1105 <script> 1106 1107 1108 function test_2d_composite_globalAlpha_fill() { 1109 1110 var canvas = document.getElementById('c38'); 1111 var ctx = canvas.getContext('2d'); 1112 1113 ctx.fillStyle = '#0f0'; 1114 ctx.fillRect(0, 0, 100, 50); 1115 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations 1116 ctx.fillStyle = '#f00'; 1117 ctx.fillRect(0, 0, 100, 50); 1118 isPixel(ctx, 50,25, 2,253,0,255, 2); 1119 1120 1121 } 1122 </script> 1123 1124 <!-- [[[ test_2d.composite.globalAlpha.image.html ]]] --> 1125 1126 <p>Canvas test: 2d.composite.globalAlpha.image</p> 1127 <canvas id="c39" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1128 <script> 1129 1130 1131 function test_2d_composite_globalAlpha_image() { 1132 1133 var canvas = document.getElementById('c39'); 1134 var ctx = canvas.getContext('2d'); 1135 1136 ctx.fillStyle = '#0f0'; 1137 ctx.fillRect(0, 0, 100, 50); 1138 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations 1139 ctx.drawImage(document.getElementById('red_1.png'), 0, 0); 1140 isPixel(ctx, 50,25, 2,253,0,255, 2); 1141 1142 1143 } 1144 </script> 1145 <img src="image_red.png" id="red_1.png" class="resource"> 1146 1147 <!-- [[[ test_2d.composite.globalAlpha.imagepattern.html ]]] --> 1148 1149 <p>Canvas test: 2d.composite.globalAlpha.imagepattern - bug 401790</p> 1150 <canvas id="c40" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1151 <script> 1152 1153 1154 1155 function test_2d_composite_globalAlpha_imagepattern() { 1156 1157 var canvas = document.getElementById('c40'); 1158 var ctx = canvas.getContext('2d'); 1159 1160 ctx.fillStyle = '#0f0'; 1161 ctx.fillRect(0, 0, 100, 50); 1162 ctx.fillStyle = ctx.createPattern(document.getElementById('red_2.png'), 'no-repeat'); 1163 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations 1164 ctx.fillRect(0, 0, 100, 50); 1165 isPixel(ctx, 50,25, 2,253,0,255, 2); 1166 1167 1168 } 1169 </script> 1170 <img src="image_red.png" id="red_2.png" class="resource"> 1171 1172 <!-- [[[ test_2d.composite.globalAlpha.invalid.html ]]] --> 1173 1174 <p>Canvas test: 2d.composite.globalAlpha.invalid</p> 1175 <canvas id="c41" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1176 <script> 1177 1178 function test_2d_composite_globalAlpha_invalid() { 1179 1180 var canvas = document.getElementById('c41'); 1181 var ctx = canvas.getContext('2d'); 1182 1183 ctx.globalAlpha = 0.5; 1184 var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons 1185 ctx.globalAlpha = Infinity; 1186 ok(ctx.globalAlpha === a, "ctx.globalAlpha === a"); 1187 ctx.globalAlpha = -Infinity; 1188 ok(ctx.globalAlpha === a, "ctx.globalAlpha === a"); 1189 ctx.globalAlpha = NaN; 1190 ok(ctx.globalAlpha === a, "ctx.globalAlpha === a"); 1191 1192 } 1193 </script> 1194 1195 <!-- [[[ test_2d.composite.globalAlpha.range.html ]]] --> 1196 1197 <p>Canvas test: 2d.composite.globalAlpha.range</p> 1198 <canvas id="c42" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1199 <script> 1200 1201 function test_2d_composite_globalAlpha_range() { 1202 1203 var canvas = document.getElementById('c42'); 1204 var ctx = canvas.getContext('2d'); 1205 1206 ctx.globalAlpha = 0.5; 1207 var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons 1208 ctx.globalAlpha = 1.1; 1209 ok(ctx.globalAlpha == a, "ctx.globalAlpha == a"); 1210 ctx.globalAlpha = -0.1; 1211 ok(ctx.globalAlpha == a, "ctx.globalAlpha == a"); 1212 ctx.globalAlpha = 0; 1213 ok(ctx.globalAlpha == 0, "ctx.globalAlpha == 0"); 1214 ctx.globalAlpha = 1; 1215 ok(ctx.globalAlpha == 1, "ctx.globalAlpha == 1"); 1216 1217 1218 } 1219 </script> 1220 1221 <!-- [[[ test_2d.composite.image.copy.html ]]] --> 1222 1223 <p>Canvas test: 2d.composite.image.copy</p> 1224 <canvas id="c43" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1225 <script> 1226 1227 1228 function test_2d_composite_image_copy() { 1229 1230 var canvas = document.getElementById('c43'); 1231 var ctx = canvas.getContext('2d'); 1232 1233 1234 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1235 ctx.fillRect(0, 0, 100, 50); 1236 ctx.globalCompositeOperation = 'copy'; 1237 ctx.drawImage(document.getElementById('yellow75_12.png'), 0, 0); 1238 isPixel(ctx, 50,25, 255,255,0,191, 5); 1239 1240 1241 } 1242 </script> 1243 <img src="image_yellow75.png" id="yellow75_12.png" class="resource"> 1244 1245 <!-- [[[ test_2d.composite.image.destination-atop.html ]]] --> 1246 1247 <p>Canvas test: 2d.composite.image.destination-atop</p> 1248 <canvas id="c44" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1249 <script> 1250 1251 1252 function test_2d_composite_image_destination_atop() { 1253 1254 var canvas = document.getElementById('c44'); 1255 var ctx = canvas.getContext('2d'); 1256 1257 1258 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1259 ctx.fillRect(0, 0, 100, 50); 1260 ctx.globalCompositeOperation = 'destination-atop'; 1261 ctx.drawImage(document.getElementById('yellow75_13.png'), 0, 0); 1262 isPixel(ctx, 50,25, 127,255,127,191, 5); 1263 1264 1265 } 1266 </script> 1267 <img src="image_yellow75.png" id="yellow75_13.png" class="resource"> 1268 1269 <!-- [[[ test_2d.composite.image.destination-in.html ]]] --> 1270 1271 <p>Canvas test: 2d.composite.image.destination-in</p> 1272 <canvas id="c45" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1273 <script> 1274 1275 1276 function test_2d_composite_image_destination_in() { 1277 1278 var canvas = document.getElementById('c45'); 1279 var ctx = canvas.getContext('2d'); 1280 1281 1282 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1283 ctx.fillRect(0, 0, 100, 50); 1284 ctx.globalCompositeOperation = 'destination-in'; 1285 ctx.drawImage(document.getElementById('yellow75_14.png'), 0, 0); 1286 isPixel(ctx, 50,25, 0,255,255,95, 5); 1287 1288 1289 } 1290 </script> 1291 <img src="image_yellow75.png" id="yellow75_14.png" class="resource"> 1292 1293 <!-- [[[ test_2d.composite.image.destination-out.html ]]] --> 1294 1295 <p>Canvas test: 2d.composite.image.destination-out</p> 1296 <canvas id="c46" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1297 <script> 1298 1299 1300 function test_2d_composite_image_destination_out() { 1301 1302 var canvas = document.getElementById('c46'); 1303 var ctx = canvas.getContext('2d'); 1304 1305 1306 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1307 ctx.fillRect(0, 0, 100, 50); 1308 ctx.globalCompositeOperation = 'destination-out'; 1309 ctx.drawImage(document.getElementById('yellow75_15.png'), 0, 0); 1310 isPixel(ctx, 50,25, 0,255,255,31, 5); 1311 1312 1313 } 1314 </script> 1315 <img src="image_yellow75.png" id="yellow75_15.png" class="resource"> 1316 1317 <!-- [[[ test_2d.composite.image.destination-over.html ]]] --> 1318 1319 <p>Canvas test: 2d.composite.image.destination-over</p> 1320 <canvas id="c47" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1321 <script> 1322 1323 1324 function test_2d_composite_image_destination_over() { 1325 1326 var canvas = document.getElementById('c47'); 1327 var ctx = canvas.getContext('2d'); 1328 1329 1330 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1331 ctx.fillRect(0, 0, 100, 50); 1332 ctx.globalCompositeOperation = 'destination-over'; 1333 ctx.drawImage(document.getElementById('yellow75_16.png'), 0, 0); 1334 isPixel(ctx, 50,25, 109,255,145,223, 5); 1335 1336 1337 } 1338 </script> 1339 <img src="image_yellow75.png" id="yellow75_16.png" class="resource"> 1340 1341 <!-- [[[ test_2d.composite.image.lighter.html ]]] --> 1342 1343 <p>Canvas test: 2d.composite.image.lighter</p> 1344 <canvas id="c48" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1345 <script> 1346 1347 1348 function test_2d_composite_image_lighter() { 1349 1350 var canvas = document.getElementById('c48'); 1351 var ctx = canvas.getContext('2d'); 1352 1353 1354 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1355 ctx.fillRect(0, 0, 100, 50); 1356 ctx.globalCompositeOperation = 'lighter'; 1357 ctx.drawImage(document.getElementById('yellow75_17.png'), 0, 0); 1358 isPixel(ctx, 50,25, 191,255,127,255, 5); 1359 1360 1361 } 1362 </script> 1363 <img src="image_yellow75.png" id="yellow75_17.png" class="resource"> 1364 1365 <!-- [[[ test_2d.composite.image.source-atop.html ]]] --> 1366 1367 <p>Canvas test: 2d.composite.image.source-atop</p> 1368 <canvas id="c49" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1369 <script> 1370 1371 1372 function test_2d_composite_image_source_atop() { 1373 1374 var canvas = document.getElementById('c49'); 1375 var ctx = canvas.getContext('2d'); 1376 1377 1378 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1379 ctx.fillRect(0, 0, 100, 50); 1380 ctx.globalCompositeOperation = 'source-atop'; 1381 ctx.drawImage(document.getElementById('yellow75_18.png'), 0, 0); 1382 isPixel(ctx, 50,25, 191,255,63,127, 5); 1383 1384 1385 } 1386 </script> 1387 <img src="image_yellow75.png" id="yellow75_18.png" class="resource"> 1388 1389 <!-- [[[ test_2d.composite.image.source-in.html ]]] --> 1390 1391 <p>Canvas test: 2d.composite.image.source-in</p> 1392 <canvas id="c50" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1393 <script> 1394 1395 1396 function test_2d_composite_image_source_in() { 1397 1398 var canvas = document.getElementById('c50'); 1399 var ctx = canvas.getContext('2d'); 1400 1401 1402 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1403 ctx.fillRect(0, 0, 100, 50); 1404 ctx.globalCompositeOperation = 'source-in'; 1405 ctx.drawImage(document.getElementById('yellow75_19.png'), 0, 0); 1406 isPixel(ctx, 50,25, 255,255,0,95, 5); 1407 1408 1409 } 1410 </script> 1411 <img src="image_yellow75.png" id="yellow75_19.png" class="resource"> 1412 1413 <!-- [[[ test_2d.composite.image.source-out.html ]]] --> 1414 1415 <p>Canvas test: 2d.composite.image.source-out</p> 1416 <canvas id="c51" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1417 <script> 1418 1419 1420 function test_2d_composite_image_source_out() { 1421 1422 var canvas = document.getElementById('c51'); 1423 var ctx = canvas.getContext('2d'); 1424 1425 1426 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1427 ctx.fillRect(0, 0, 100, 50); 1428 ctx.globalCompositeOperation = 'source-out'; 1429 ctx.drawImage(document.getElementById('yellow75_20.png'), 0, 0); 1430 isPixel(ctx, 50,25, 255,255,0,95, 5); 1431 1432 1433 } 1434 </script> 1435 <img src="image_yellow75.png" id="yellow75_20.png" class="resource"> 1436 1437 <!-- [[[ test_2d.composite.image.source-over.html ]]] --> 1438 1439 <p>Canvas test: 2d.composite.image.source-over</p> 1440 <canvas id="c52" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1441 <script> 1442 1443 1444 function test_2d_composite_image_source_over() { 1445 1446 var canvas = document.getElementById('c52'); 1447 var ctx = canvas.getContext('2d'); 1448 1449 1450 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1451 ctx.fillRect(0, 0, 100, 50); 1452 ctx.globalCompositeOperation = 'source-over'; 1453 ctx.drawImage(document.getElementById('yellow75_21.png'), 0, 0); 1454 isPixel(ctx, 50,25, 218,255,36,223, 5); 1455 1456 1457 } 1458 </script> 1459 <img src="image_yellow75.png" id="yellow75_21.png" class="resource"> 1460 1461 <!-- [[[ test_2d.composite.image.xor.html ]]] --> 1462 1463 <p>Canvas test: 2d.composite.image.xor</p> 1464 <canvas id="c53" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1465 <script> 1466 1467 1468 function test_2d_composite_image_xor() { 1469 1470 var canvas = document.getElementById('c53'); 1471 var ctx = canvas.getContext('2d'); 1472 1473 1474 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 1475 ctx.fillRect(0, 0, 100, 50); 1476 ctx.globalCompositeOperation = 'xor'; 1477 ctx.drawImage(document.getElementById('yellow75_22.png'), 0, 0); 1478 isPixel(ctx, 50,25, 191,255,63,127, 5); 1479 1480 1481 } 1482 </script> 1483 <img src="image_yellow75.png" id="yellow75_22.png" class="resource"> 1484 1485 <!-- [[[ test_2d.composite.operation.casesensitive.html ]]] --> 1486 1487 <p>Canvas test: 2d.composite.operation.casesensitive - bug 401788</p> 1488 <canvas id="c54" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1489 <script> 1490 1491 function test_2d_composite_operation_casesensitive() { 1492 1493 var canvas = document.getElementById('c54'); 1494 var ctx = canvas.getContext('2d'); 1495 1496 var _thrown_outer = false; 1497 try { 1498 1499 ctx.globalCompositeOperation = 'xor'; 1500 ctx.globalCompositeOperation = 'Source-over'; 1501 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'"); 1502 1503 } catch (e) { 1504 _thrown_outer = true; 1505 } 1506 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 1507 1508 1509 } 1510 </script> 1511 1512 <!-- [[[ test_2d.composite.operation.darker.html ]]] --> 1513 1514 <p>Canvas test: 2d.composite.operation.darker</p> 1515 <canvas id="c56" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1516 <script> 1517 1518 function test_2d_composite_operation_darker() { 1519 1520 var canvas = document.getElementById('c56'); 1521 var ctx = canvas.getContext('2d'); 1522 1523 ctx.globalCompositeOperation = 'xor'; 1524 ctx.globalCompositeOperation = 'darker'; 1525 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'"); 1526 1527 1528 } 1529 </script> 1530 1531 <!-- [[[ test_2d.composite.operation.default.html ]]] --> 1532 1533 <p>Canvas test: 2d.composite.operation.default</p> 1534 <canvas id="c57" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1535 <script> 1536 1537 function test_2d_composite_operation_default() { 1538 1539 var canvas = document.getElementById('c57'); 1540 var ctx = canvas.getContext('2d'); 1541 1542 ok(ctx.globalCompositeOperation == 'source-over', "ctx.globalCompositeOperation == 'source-over'"); 1543 1544 1545 } 1546 </script> 1547 1548 <!-- [[[ test_2d.composite.operation.get.html ]]] --> 1549 1550 <p>Canvas test: 2d.composite.operation.get</p> 1551 <canvas id="c58" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1552 <script> 1553 1554 function test_2d_composite_operation_get() { 1555 1556 var canvas = document.getElementById('c58'); 1557 var ctx = canvas.getContext('2d'); 1558 1559 var modes = ['source-atop', 'source-in', 'source-out', 'source-over', 1560 'destination-atop', 'destination-in', 'destination-out', 'destination-over', 1561 'lighter', 'copy', 'xor']; 1562 for (var i = 0; i < modes.length; ++i) 1563 { 1564 ctx.globalCompositeOperation = modes[i]; 1565 ok(ctx.globalCompositeOperation == modes[i], "ctx.globalCompositeOperation == modes[\""+(i)+"\"]"); 1566 } 1567 1568 1569 } 1570 </script> 1571 1572 <!-- [[[ test_2d.composite.operation.highlight.html ]]] --> 1573 1574 <p>Canvas test: 2d.composite.operation.highlight - bug 401788</p> 1575 <canvas id="c59" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1576 <script> 1577 1578 function test_2d_composite_operation_highlight() { 1579 1580 var canvas = document.getElementById('c59'); 1581 var ctx = canvas.getContext('2d'); 1582 1583 var _thrown_outer = false; 1584 try { 1585 1586 ctx.globalCompositeOperation = 'xor'; 1587 ctx.globalCompositeOperation = 'highlight'; 1588 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'"); 1589 1590 } catch (e) { 1591 _thrown_outer = true; 1592 } 1593 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 1594 1595 1596 } 1597 </script> 1598 1599 <!-- [[[ test_2d.composite.operation.nullsuffix.html ]]] --> 1600 1601 <p>Canvas test: 2d.composite.operation.nullsuffix - bug 401788</p> 1602 <canvas id="c60" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1603 <script> 1604 1605 function test_2d_composite_operation_nullsuffix() { 1606 1607 var canvas = document.getElementById('c60'); 1608 var ctx = canvas.getContext('2d'); 1609 1610 var _thrown_outer = false; 1611 try { 1612 1613 ctx.globalCompositeOperation = 'xor'; 1614 ctx.globalCompositeOperation = 'source-over\0'; 1615 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'"); 1616 1617 } catch (e) { 1618 _thrown_outer = true; 1619 } 1620 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 1621 1622 1623 } 1624 </script> 1625 1626 <!-- [[[ test_2d.composite.operation.over.html ]]] --> 1627 1628 <p>Canvas test: 2d.composite.operation.over</p> 1629 <canvas id="c61" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1630 <script> 1631 1632 function test_2d_composite_operation_over() { 1633 1634 var canvas = document.getElementById('c61'); 1635 var ctx = canvas.getContext('2d'); 1636 1637 ctx.globalCompositeOperation = 'xor'; 1638 ctx.globalCompositeOperation = 'over'; 1639 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'"); 1640 1641 1642 } 1643 </script> 1644 1645 <!-- [[[ test_2d.composite.operation.unrecognised.html ]]] --> 1646 1647 <p>Canvas test: 2d.composite.operation.unrecognised - bug 401788</p> 1648 <canvas id="c62" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1649 <script> 1650 1651 function test_2d_composite_operation_unrecognised() { 1652 1653 var canvas = document.getElementById('c62'); 1654 var ctx = canvas.getContext('2d'); 1655 1656 var _thrown_outer = false; 1657 try { 1658 1659 ctx.globalCompositeOperation = 'xor'; 1660 ctx.globalCompositeOperation = 'nonexistent'; 1661 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'"); 1662 1663 } catch (e) { 1664 _thrown_outer = true; 1665 } 1666 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 1667 1668 1669 } 1670 </script> 1671 1672 <!-- [[[ test_2d.composite.solid.copy.html ]]] --> 1673 1674 <p>Canvas test: 2d.composite.solid.copy</p> 1675 <canvas id="c63" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1676 <script> 1677 1678 1679 function test_2d_composite_solid_copy() { 1680 1681 var canvas = document.getElementById('c63'); 1682 var ctx = canvas.getContext('2d'); 1683 1684 1685 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1686 ctx.fillRect(0, 0, 100, 50); 1687 ctx.globalCompositeOperation = 'copy'; 1688 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1689 ctx.fillRect(0, 0, 100, 50); 1690 isPixel(ctx, 50,25, 255,255,0,255, 5); 1691 1692 1693 } 1694 </script> 1695 1696 <!-- [[[ test_2d.composite.solid.destination-atop.html ]]] --> 1697 1698 <p>Canvas test: 2d.composite.solid.destination-atop</p> 1699 <canvas id="c64" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1700 <script> 1701 1702 1703 function test_2d_composite_solid_destination_atop() { 1704 1705 var canvas = document.getElementById('c64'); 1706 var ctx = canvas.getContext('2d'); 1707 1708 1709 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1710 ctx.fillRect(0, 0, 100, 50); 1711 ctx.globalCompositeOperation = 'destination-atop'; 1712 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1713 ctx.fillRect(0, 0, 100, 50); 1714 isPixel(ctx, 50,25, 0,255,255,255, 5); 1715 1716 1717 } 1718 </script> 1719 1720 <!-- [[[ test_2d.composite.solid.destination-in.html ]]] --> 1721 1722 <p>Canvas test: 2d.composite.solid.destination-in</p> 1723 <canvas id="c65" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1724 <script> 1725 1726 1727 function test_2d_composite_solid_destination_in() { 1728 1729 var canvas = document.getElementById('c65'); 1730 var ctx = canvas.getContext('2d'); 1731 1732 1733 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1734 ctx.fillRect(0, 0, 100, 50); 1735 ctx.globalCompositeOperation = 'destination-in'; 1736 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1737 ctx.fillRect(0, 0, 100, 50); 1738 isPixel(ctx, 50,25, 0,255,255,255, 5); 1739 1740 1741 } 1742 </script> 1743 1744 <!-- [[[ test_2d.composite.solid.destination-out.html ]]] --> 1745 1746 <p>Canvas test: 2d.composite.solid.destination-out</p> 1747 <canvas id="c66" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1748 <script> 1749 1750 1751 function test_2d_composite_solid_destination_out() { 1752 1753 var canvas = document.getElementById('c66'); 1754 var ctx = canvas.getContext('2d'); 1755 1756 1757 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1758 ctx.fillRect(0, 0, 100, 50); 1759 ctx.globalCompositeOperation = 'destination-out'; 1760 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1761 ctx.fillRect(0, 0, 100, 50); 1762 isPixel(ctx, 50,25, 0,0,0,0, 5); 1763 1764 1765 } 1766 </script> 1767 1768 <!-- [[[ test_2d.composite.solid.destination-over.html ]]] --> 1769 1770 <p>Canvas test: 2d.composite.solid.destination-over</p> 1771 <canvas id="c67" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1772 <script> 1773 1774 1775 function test_2d_composite_solid_destination_over() { 1776 1777 var canvas = document.getElementById('c67'); 1778 var ctx = canvas.getContext('2d'); 1779 1780 1781 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1782 ctx.fillRect(0, 0, 100, 50); 1783 ctx.globalCompositeOperation = 'destination-over'; 1784 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1785 ctx.fillRect(0, 0, 100, 50); 1786 isPixel(ctx, 50,25, 0,255,255,255, 5); 1787 1788 1789 } 1790 </script> 1791 1792 <!-- [[[ test_2d.composite.solid.lighter.html ]]] --> 1793 1794 <p>Canvas test: 2d.composite.solid.lighter</p> 1795 <canvas id="c68" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1796 <script> 1797 1798 1799 function test_2d_composite_solid_lighter() { 1800 1801 var canvas = document.getElementById('c68'); 1802 var ctx = canvas.getContext('2d'); 1803 1804 1805 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1806 ctx.fillRect(0, 0, 100, 50); 1807 ctx.globalCompositeOperation = 'lighter'; 1808 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1809 ctx.fillRect(0, 0, 100, 50); 1810 isPixel(ctx, 50,25, 255,255,255,255, 5); 1811 1812 1813 } 1814 </script> 1815 1816 <!-- [[[ test_2d.composite.solid.source-atop.html ]]] --> 1817 1818 <p>Canvas test: 2d.composite.solid.source-atop</p> 1819 <canvas id="c69" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1820 <script> 1821 1822 1823 function test_2d_composite_solid_source_atop() { 1824 1825 var canvas = document.getElementById('c69'); 1826 var ctx = canvas.getContext('2d'); 1827 1828 1829 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1830 ctx.fillRect(0, 0, 100, 50); 1831 ctx.globalCompositeOperation = 'source-atop'; 1832 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1833 ctx.fillRect(0, 0, 100, 50); 1834 isPixel(ctx, 50,25, 255,255,0,255, 5); 1835 1836 1837 } 1838 </script> 1839 1840 <!-- [[[ test_2d.composite.solid.source-in.html ]]] --> 1841 1842 <p>Canvas test: 2d.composite.solid.source-in</p> 1843 <canvas id="c70" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1844 <script> 1845 1846 1847 function test_2d_composite_solid_source_in() { 1848 1849 var canvas = document.getElementById('c70'); 1850 var ctx = canvas.getContext('2d'); 1851 1852 1853 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1854 ctx.fillRect(0, 0, 100, 50); 1855 ctx.globalCompositeOperation = 'source-in'; 1856 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1857 ctx.fillRect(0, 0, 100, 50); 1858 isPixel(ctx, 50,25, 255,255,0,255, 5); 1859 1860 1861 } 1862 </script> 1863 1864 <!-- [[[ test_2d.composite.solid.source-out.html ]]] --> 1865 1866 <p>Canvas test: 2d.composite.solid.source-out</p> 1867 <canvas id="c71" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1868 <script> 1869 1870 1871 function test_2d_composite_solid_source_out() { 1872 1873 var canvas = document.getElementById('c71'); 1874 var ctx = canvas.getContext('2d'); 1875 1876 1877 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1878 ctx.fillRect(0, 0, 100, 50); 1879 ctx.globalCompositeOperation = 'source-out'; 1880 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1881 ctx.fillRect(0, 0, 100, 50); 1882 isPixel(ctx, 50,25, 0,0,0,0, 5); 1883 1884 1885 } 1886 </script> 1887 1888 <!-- [[[ test_2d.composite.solid.source-over.html ]]] --> 1889 1890 <p>Canvas test: 2d.composite.solid.source-over</p> 1891 <canvas id="c72" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1892 <script> 1893 1894 1895 function test_2d_composite_solid_source_over() { 1896 1897 var canvas = document.getElementById('c72'); 1898 var ctx = canvas.getContext('2d'); 1899 1900 1901 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1902 ctx.fillRect(0, 0, 100, 50); 1903 ctx.globalCompositeOperation = 'source-over'; 1904 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1905 ctx.fillRect(0, 0, 100, 50); 1906 isPixel(ctx, 50,25, 255,255,0,255, 5); 1907 1908 1909 } 1910 </script> 1911 1912 <!-- [[[ test_2d.composite.solid.xor.html ]]] --> 1913 1914 <p>Canvas test: 2d.composite.solid.xor</p> 1915 <canvas id="c73" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1916 <script> 1917 1918 1919 function test_2d_composite_solid_xor() { 1920 1921 var canvas = document.getElementById('c73'); 1922 var ctx = canvas.getContext('2d'); 1923 1924 1925 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)'; 1926 ctx.fillRect(0, 0, 100, 50); 1927 ctx.globalCompositeOperation = 'xor'; 1928 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)'; 1929 ctx.fillRect(0, 0, 100, 50); 1930 isPixel(ctx, 50,25, 0,0,0,0, 5); 1931 1932 1933 } 1934 </script> 1935 1936 <!-- [[[ test_2d.composite.transparent.copy.html ]]] --> 1937 1938 <p>Canvas test: 2d.composite.transparent.copy</p> 1939 <canvas id="c74" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1940 <script> 1941 1942 1943 function test_2d_composite_transparent_copy() { 1944 1945 var canvas = document.getElementById('c74'); 1946 var ctx = canvas.getContext('2d'); 1947 1948 1949 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 1950 ctx.fillRect(0, 0, 100, 50); 1951 ctx.globalCompositeOperation = 'copy'; 1952 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 1953 ctx.fillRect(0, 0, 100, 50); 1954 isPixel(ctx, 50,25, 0,0,255,191, 5); 1955 1956 1957 } 1958 </script> 1959 1960 <!-- [[[ test_2d.composite.transparent.destination-atop.html ]]] --> 1961 1962 <p>Canvas test: 2d.composite.transparent.destination-atop</p> 1963 <canvas id="c75" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1964 <script> 1965 1966 1967 function test_2d_composite_transparent_destination_atop() { 1968 1969 var canvas = document.getElementById('c75'); 1970 var ctx = canvas.getContext('2d'); 1971 1972 1973 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 1974 ctx.fillRect(0, 0, 100, 50); 1975 ctx.globalCompositeOperation = 'destination-atop'; 1976 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 1977 ctx.fillRect(0, 0, 100, 50); 1978 isPixel(ctx, 50,25, 0,127,127,191, 5); 1979 1980 1981 } 1982 </script> 1983 1984 <!-- [[[ test_2d.composite.transparent.destination-in.html ]]] --> 1985 1986 <p>Canvas test: 2d.composite.transparent.destination-in</p> 1987 <canvas id="c76" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 1988 <script> 1989 1990 1991 function test_2d_composite_transparent_destination_in() { 1992 1993 var canvas = document.getElementById('c76'); 1994 var ctx = canvas.getContext('2d'); 1995 1996 1997 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 1998 ctx.fillRect(0, 0, 100, 50); 1999 ctx.globalCompositeOperation = 'destination-in'; 2000 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2001 ctx.fillRect(0, 0, 100, 50); 2002 isPixel(ctx, 50,25, 0,255,0,95, 5); 2003 2004 2005 } 2006 </script> 2007 2008 <!-- [[[ test_2d.composite.transparent.destination-out.html ]]] --> 2009 2010 <p>Canvas test: 2d.composite.transparent.destination-out</p> 2011 <canvas id="c77" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2012 <script> 2013 2014 2015 function test_2d_composite_transparent_destination_out() { 2016 2017 var canvas = document.getElementById('c77'); 2018 var ctx = canvas.getContext('2d'); 2019 2020 2021 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2022 ctx.fillRect(0, 0, 100, 50); 2023 ctx.globalCompositeOperation = 'destination-out'; 2024 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2025 ctx.fillRect(0, 0, 100, 50); 2026 isPixel(ctx, 50,25, 0,255,0,31, 5); 2027 2028 2029 } 2030 </script> 2031 2032 <!-- [[[ test_2d.composite.transparent.destination-over.html ]]] --> 2033 2034 <p>Canvas test: 2d.composite.transparent.destination-over</p> 2035 <canvas id="c78" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2036 <script> 2037 2038 2039 function test_2d_composite_transparent_destination_over() { 2040 2041 var canvas = document.getElementById('c78'); 2042 var ctx = canvas.getContext('2d'); 2043 2044 2045 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2046 ctx.fillRect(0, 0, 100, 50); 2047 ctx.globalCompositeOperation = 'destination-over'; 2048 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2049 ctx.fillRect(0, 0, 100, 50); 2050 isPixel(ctx, 50,25, 0,145,109,223, 5); 2051 2052 2053 } 2054 </script> 2055 2056 <!-- [[[ test_2d.composite.transparent.lighter.html ]]] --> 2057 2058 <p>Canvas test: 2d.composite.transparent.lighter</p> 2059 <canvas id="c79" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2060 <script> 2061 2062 2063 function test_2d_composite_transparent_lighter() { 2064 2065 var canvas = document.getElementById('c79'); 2066 var ctx = canvas.getContext('2d'); 2067 2068 2069 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2070 ctx.fillRect(0, 0, 100, 50); 2071 ctx.globalCompositeOperation = 'lighter'; 2072 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2073 ctx.fillRect(0, 0, 100, 50); 2074 isPixel(ctx, 50,25, 0,127,191,255, 5); 2075 2076 2077 } 2078 </script> 2079 2080 <!-- [[[ test_2d.composite.transparent.source-atop.html ]]] --> 2081 2082 <p>Canvas test: 2d.composite.transparent.source-atop</p> 2083 <canvas id="c80" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2084 <script> 2085 2086 2087 function test_2d_composite_transparent_source_atop() { 2088 2089 var canvas = document.getElementById('c80'); 2090 var ctx = canvas.getContext('2d'); 2091 2092 2093 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2094 ctx.fillRect(0, 0, 100, 50); 2095 ctx.globalCompositeOperation = 'source-atop'; 2096 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2097 ctx.fillRect(0, 0, 100, 50); 2098 isPixel(ctx, 50,25, 0,63,191,127, 5); 2099 2100 2101 } 2102 </script> 2103 2104 <!-- [[[ test_2d.composite.transparent.source-in.html ]]] --> 2105 2106 <p>Canvas test: 2d.composite.transparent.source-in</p> 2107 <canvas id="c81" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2108 <script> 2109 2110 2111 function test_2d_composite_transparent_source_in() { 2112 2113 var canvas = document.getElementById('c81'); 2114 var ctx = canvas.getContext('2d'); 2115 2116 2117 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2118 ctx.fillRect(0, 0, 100, 50); 2119 ctx.globalCompositeOperation = 'source-in'; 2120 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2121 ctx.fillRect(0, 0, 100, 50); 2122 isPixel(ctx, 50,25, 0,0,255,95, 5); 2123 2124 2125 } 2126 </script> 2127 2128 <!-- [[[ test_2d.composite.transparent.source-out.html ]]] --> 2129 2130 <p>Canvas test: 2d.composite.transparent.source-out</p> 2131 <canvas id="c82" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2132 <script> 2133 2134 2135 function test_2d_composite_transparent_source_out() { 2136 2137 var canvas = document.getElementById('c82'); 2138 var ctx = canvas.getContext('2d'); 2139 2140 2141 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2142 ctx.fillRect(0, 0, 100, 50); 2143 ctx.globalCompositeOperation = 'source-out'; 2144 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2145 ctx.fillRect(0, 0, 100, 50); 2146 isPixel(ctx, 50,25, 0,0,255,95, 5); 2147 2148 2149 } 2150 </script> 2151 2152 <!-- [[[ test_2d.composite.transparent.source-over.html ]]] --> 2153 2154 <p>Canvas test: 2d.composite.transparent.source-over</p> 2155 <canvas id="c83" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2156 <script> 2157 2158 2159 function test_2d_composite_transparent_source_over() { 2160 2161 var canvas = document.getElementById('c83'); 2162 var ctx = canvas.getContext('2d'); 2163 2164 2165 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2166 ctx.fillRect(0, 0, 100, 50); 2167 ctx.globalCompositeOperation = 'source-over'; 2168 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2169 ctx.fillRect(0, 0, 100, 50); 2170 isPixel(ctx, 50,25, 0,36,218,223, 5); 2171 2172 2173 } 2174 </script> 2175 2176 <!-- [[[ test_2d.composite.transparent.xor.html ]]] --> 2177 2178 <p>Canvas test: 2d.composite.transparent.xor</p> 2179 <canvas id="c84" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2180 <script> 2181 2182 2183 function test_2d_composite_transparent_xor() { 2184 2185 var canvas = document.getElementById('c84'); 2186 var ctx = canvas.getContext('2d'); 2187 2188 2189 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2190 ctx.fillRect(0, 0, 100, 50); 2191 ctx.globalCompositeOperation = 'xor'; 2192 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2193 ctx.fillRect(0, 0, 100, 50); 2194 isPixel(ctx, 50,25, 0,63,191,127, 5); 2195 2196 2197 } 2198 </script> 2199 2200 <!-- [[[ test_2d.composite.uncovered.fill.copy.html ]]] --> 2201 2202 <p>Canvas test: 2d.composite.uncovered.fill.copy</p> 2203 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2204 <canvas id="c85" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2205 <script> 2206 2207 2208 2209 function test_2d_composite_uncovered_fill_copy() { 2210 2211 var canvas = document.getElementById('c85'); 2212 var ctx = canvas.getContext('2d'); 2213 2214 2215 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2216 ctx.fillRect(0, 0, 100, 50); 2217 ctx.globalCompositeOperation = 'copy'; 2218 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2219 ctx.translate(0, 25); 2220 ctx.fillRect(0, 50, 100, 50); 2221 isPixel(ctx, 50,25, 0,0,0,0, 5); 2222 2223 2224 } 2225 </script> 2226 2227 <!-- [[[ test_2d.composite.uncovered.fill.destination-atop.html ]]] --> 2228 2229 <p>Canvas test: 2d.composite.uncovered.fill.destination-atop</p> 2230 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2231 <canvas id="c86" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2232 <script> 2233 2234 2235 2236 function test_2d_composite_uncovered_fill_destination_atop() { 2237 2238 var canvas = document.getElementById('c86'); 2239 var ctx = canvas.getContext('2d'); 2240 2241 2242 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2243 ctx.fillRect(0, 0, 100, 50); 2244 ctx.globalCompositeOperation = 'destination-atop'; 2245 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2246 ctx.translate(0, 25); 2247 ctx.fillRect(0, 50, 100, 50); 2248 isPixel(ctx, 50,25, 0,0,0,0, 5); 2249 2250 2251 } 2252 </script> 2253 2254 <!-- [[[ test_2d.composite.uncovered.fill.destination-in.html ]]] --> 2255 2256 <p>Canvas test: 2d.composite.uncovered.fill.destination-in</p> 2257 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2258 <canvas id="c87" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2259 <script> 2260 2261 2262 2263 function test_2d_composite_uncovered_fill_destination_in() { 2264 2265 var canvas = document.getElementById('c87'); 2266 var ctx = canvas.getContext('2d'); 2267 2268 2269 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2270 ctx.fillRect(0, 0, 100, 50); 2271 ctx.globalCompositeOperation = 'destination-in'; 2272 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2273 ctx.translate(0, 25); 2274 ctx.fillRect(0, 50, 100, 50); 2275 isPixel(ctx, 50,25, 0,0,0,0, 5); 2276 2277 2278 } 2279 </script> 2280 2281 <!-- [[[ test_2d.composite.uncovered.fill.source-in.html ]]] --> 2282 2283 <p>Canvas test: 2d.composite.uncovered.fill.source-in</p> 2284 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2285 <canvas id="c88" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2286 <script> 2287 2288 2289 2290 function test_2d_composite_uncovered_fill_source_in() { 2291 2292 var canvas = document.getElementById('c88'); 2293 var ctx = canvas.getContext('2d'); 2294 2295 2296 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2297 ctx.fillRect(0, 0, 100, 50); 2298 ctx.globalCompositeOperation = 'source-in'; 2299 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2300 ctx.translate(0, 25); 2301 ctx.fillRect(0, 50, 100, 50); 2302 isPixel(ctx, 50,25, 0,0,0,0, 5); 2303 2304 2305 } 2306 </script> 2307 2308 <!-- [[[ test_2d.composite.uncovered.fill.source-out.html ]]] --> 2309 2310 <p>Canvas test: 2d.composite.uncovered.fill.source-out</p> 2311 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2312 <canvas id="c89" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2313 <script> 2314 2315 2316 2317 function test_2d_composite_uncovered_fill_source_out() { 2318 2319 var canvas = document.getElementById('c89'); 2320 var ctx = canvas.getContext('2d'); 2321 2322 2323 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 2324 ctx.fillRect(0, 0, 100, 50); 2325 ctx.globalCompositeOperation = 'source-out'; 2326 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)'; 2327 ctx.translate(0, 25); 2328 ctx.fillRect(0, 50, 100, 50); 2329 isPixel(ctx, 50,25, 0,0,0,0, 5); 2330 2331 2332 } 2333 </script> 2334 2335 <!-- [[[ test_2d.composite.uncovered.image.copy.html ]]] --> 2336 2337 <p>Canvas test: 2d.composite.uncovered.image.copy</p> 2338 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2339 <canvas id="c90" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2340 <script> 2341 2342 2343 2344 function test_2d_composite_uncovered_image_copy() { 2345 2346 var canvas = document.getElementById('c90'); 2347 var ctx = canvas.getContext('2d'); 2348 2349 2350 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2351 ctx.fillRect(0, 0, 100, 50); 2352 ctx.globalCompositeOperation = 'copy'; 2353 ctx.drawImage(document.getElementById('yellow_1.png'), 40, 40, 10, 10, 40, 50, 10, 10); 2354 isPixel(ctx, 15,15, 0,0,0,0, 5); 2355 isPixel(ctx, 50,25, 0,0,0,0, 5); 2356 2357 2358 } 2359 </script> 2360 <img src="image_yellow.png" id="yellow_1.png" class="resource"> 2361 2362 <!-- [[[ test_2d.composite.uncovered.image.destination-atop.html ]]] --> 2363 2364 <p>Canvas test: 2d.composite.uncovered.image.destination-atop</p> 2365 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2366 <canvas id="c91" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2367 <script> 2368 2369 2370 2371 function test_2d_composite_uncovered_image_destination_atop() { 2372 2373 var canvas = document.getElementById('c91'); 2374 var ctx = canvas.getContext('2d'); 2375 2376 2377 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2378 ctx.fillRect(0, 0, 100, 50); 2379 ctx.globalCompositeOperation = 'destination-atop'; 2380 ctx.drawImage(document.getElementById('yellow_2.png'), 40, 40, 10, 10, 40, 50, 10, 10); 2381 isPixel(ctx, 15,15, 0,0,0,0, 5); 2382 isPixel(ctx, 50,25, 0,0,0,0, 5); 2383 2384 2385 } 2386 </script> 2387 <img src="image_yellow.png" id="yellow_2.png" class="resource"> 2388 2389 <!-- [[[ test_2d.composite.uncovered.image.destination-in.html ]]] --> 2390 2391 <p>Canvas test: 2d.composite.uncovered.image.destination-in</p> 2392 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2393 <canvas id="c92" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2394 <script> 2395 2396 2397 2398 function test_2d_composite_uncovered_image_destination_in() { 2399 2400 var canvas = document.getElementById('c92'); 2401 var ctx = canvas.getContext('2d'); 2402 2403 2404 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2405 ctx.fillRect(0, 0, 100, 50); 2406 ctx.globalCompositeOperation = 'destination-in'; 2407 ctx.drawImage(document.getElementById('yellow_3.png'), 40, 40, 10, 10, 40, 50, 10, 10); 2408 isPixel(ctx, 15,15, 0,0,0,0, 5); 2409 isPixel(ctx, 50,25, 0,0,0,0, 5); 2410 2411 2412 } 2413 </script> 2414 <img src="image_yellow.png" id="yellow_3.png" class="resource"> 2415 2416 <!-- [[[ test_2d.composite.uncovered.image.source-in.html ]]] --> 2417 2418 <p>Canvas test: 2d.composite.uncovered.image.source-in</p> 2419 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2420 <canvas id="c93" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2421 <script> 2422 2423 2424 2425 function test_2d_composite_uncovered_image_source_in() { 2426 2427 var canvas = document.getElementById('c93'); 2428 var ctx = canvas.getContext('2d'); 2429 2430 2431 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2432 ctx.fillRect(0, 0, 100, 50); 2433 ctx.globalCompositeOperation = 'source-in'; 2434 ctx.drawImage(document.getElementById('yellow_4.png'), 40, 40, 10, 10, 40, 50, 10, 10); 2435 isPixel(ctx, 15,15, 0,0,0,0, 5); 2436 isPixel(ctx, 50,25, 0,0,0,0, 5); 2437 2438 2439 } 2440 </script> 2441 <img src="image_yellow.png" id="yellow_4.png" class="resource"> 2442 2443 <!-- [[[ test_2d.composite.uncovered.image.source-out.html ]]] --> 2444 2445 <p>Canvas test: 2d.composite.uncovered.image.source-out</p> 2446 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2447 <canvas id="c94" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2448 <script> 2449 2450 2451 2452 function test_2d_composite_uncovered_image_source_out() { 2453 2454 var canvas = document.getElementById('c94'); 2455 var ctx = canvas.getContext('2d'); 2456 2457 2458 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2459 ctx.fillRect(0, 0, 100, 50); 2460 ctx.globalCompositeOperation = 'source-out'; 2461 ctx.drawImage(document.getElementById('yellow_5.png'), 40, 40, 10, 10, 40, 50, 10, 10); 2462 isPixel(ctx, 15,15, 0,0,0,0, 5); 2463 isPixel(ctx, 50,25, 0,0,0,0, 5); 2464 2465 2466 } 2467 </script> 2468 <img src="image_yellow.png" id="yellow_5.png" class="resource"> 2469 2470 <!-- [[[ test_2d.composite.uncovered.pattern.copy.html ]]] --> 2471 2472 <p>Canvas test: 2d.composite.uncovered.pattern.copy</p> 2473 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2474 <canvas id="c95" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2475 <script> 2476 2477 2478 2479 function test_2d_composite_uncovered_pattern_copy() { 2480 2481 var canvas = document.getElementById('c95'); 2482 var ctx = canvas.getContext('2d'); 2483 2484 2485 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2486 ctx.fillRect(0, 0, 100, 50); 2487 ctx.globalCompositeOperation = 'copy'; 2488 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_6.png'), 'no-repeat'); 2489 ctx.fillRect(0, 50, 100, 50); 2490 isPixel(ctx, 50,25, 0,0,0,0, 5); 2491 2492 2493 } 2494 </script> 2495 <img src="image_yellow.png" id="yellow_6.png" class="resource"> 2496 2497 <!-- [[[ test_2d.composite.uncovered.pattern.destination-atop.html ]]] --> 2498 2499 <p>Canvas test: 2d.composite.uncovered.pattern.destination-atop</p> 2500 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2501 <canvas id="c96" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2502 <script> 2503 2504 2505 2506 function test_2d_composite_uncovered_pattern_destination_atop() { 2507 2508 var canvas = document.getElementById('c96'); 2509 var ctx = canvas.getContext('2d'); 2510 2511 2512 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2513 ctx.fillRect(0, 0, 100, 50); 2514 ctx.globalCompositeOperation = 'destination-atop'; 2515 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_7.png'), 'no-repeat'); 2516 ctx.fillRect(0, 50, 100, 50); 2517 isPixel(ctx, 50,25, 0,0,0,0, 5); 2518 2519 2520 } 2521 </script> 2522 <img src="image_yellow.png" id="yellow_7.png" class="resource"> 2523 2524 <!-- [[[ test_2d.composite.uncovered.pattern.destination-in.html ]]] --> 2525 2526 <p>Canvas test: 2d.composite.uncovered.pattern.destination-in</p> 2527 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2528 <canvas id="c97" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2529 <script> 2530 2531 2532 2533 function test_2d_composite_uncovered_pattern_destination_in() { 2534 2535 var canvas = document.getElementById('c97'); 2536 var ctx = canvas.getContext('2d'); 2537 2538 2539 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2540 ctx.fillRect(0, 0, 100, 50); 2541 ctx.globalCompositeOperation = 'destination-in'; 2542 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_8.png'), 'no-repeat'); 2543 ctx.fillRect(0, 50, 100, 50); 2544 isPixel(ctx, 50,25, 0,0,0,0, 5); 2545 2546 2547 } 2548 </script> 2549 <img src="image_yellow.png" id="yellow_8.png" class="resource"> 2550 2551 <!-- [[[ test_2d.composite.uncovered.pattern.source-in.html ]]] --> 2552 2553 <p>Canvas test: 2d.composite.uncovered.pattern.source-in</p> 2554 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2555 <canvas id="c98" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2556 <script> 2557 2558 2559 2560 function test_2d_composite_uncovered_pattern_source_in() { 2561 2562 var canvas = document.getElementById('c98'); 2563 var ctx = canvas.getContext('2d'); 2564 2565 2566 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2567 ctx.fillRect(0, 0, 100, 50); 2568 ctx.globalCompositeOperation = 'source-in'; 2569 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_9.png'), 'no-repeat'); 2570 ctx.fillRect(0, 50, 100, 50); 2571 isPixel(ctx, 50,25, 0,0,0,0, 5); 2572 2573 2574 } 2575 </script> 2576 <img src="image_yellow.png" id="yellow_9.png" class="resource"> 2577 2578 <!-- [[[ test_2d.composite.uncovered.pattern.source-out.html ]]] --> 2579 2580 <p>Canvas test: 2d.composite.uncovered.pattern.source-out</p> 2581 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. --> 2582 <canvas id="c99" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2583 <script> 2584 2585 2586 2587 function test_2d_composite_uncovered_pattern_source_out() { 2588 2589 var canvas = document.getElementById('c99'); 2590 var ctx = canvas.getContext('2d'); 2591 2592 2593 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)'; 2594 ctx.fillRect(0, 0, 100, 50); 2595 ctx.globalCompositeOperation = 'source-out'; 2596 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_10.png'), 'no-repeat'); 2597 ctx.fillRect(0, 50, 100, 50); 2598 isPixel(ctx, 50,25, 0,0,0,0, 5); 2599 2600 2601 } 2602 </script> 2603 <img src="image_yellow.png" id="yellow_10.png" class="resource"> 2604 2605 <!-- [[[ test_2d.drawImage.3arg.html ]]] --> 2606 2607 <p>Canvas test: 2d.drawImage.3arg</p> 2608 <canvas id="c100" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2609 <script> 2610 2611 2612 function test_2d_drawImage_3arg() { 2613 2614 var canvas = document.getElementById('c100'); 2615 var ctx = canvas.getContext('2d'); 2616 2617 ctx.drawImage(document.getElementById('green_1.png'), 0, 0); 2618 ctx.drawImage(document.getElementById('red_3.png'), -100, 0); 2619 ctx.drawImage(document.getElementById('red_3.png'), 100, 0); 2620 ctx.drawImage(document.getElementById('red_3.png'), 0, -50); 2621 ctx.drawImage(document.getElementById('red_3.png'), 0, 50); 2622 2623 isPixel(ctx, 0,0, 0,255,0,255, 2); 2624 isPixel(ctx, 99,0, 0,255,0,255, 2); 2625 isPixel(ctx, 0,49, 0,255,0,255, 2); 2626 isPixel(ctx, 99,49, 0,255,0,255, 2); 2627 2628 2629 } 2630 </script> 2631 <img src="image_red.png" id="red_3.png" class="resource"> 2632 <img src="image_green.png" id="green_1.png" class="resource"> 2633 2634 <!-- [[[ test_2d.drawImage.5arg.html ]]] --> 2635 2636 <p>Canvas test: 2d.drawImage.5arg</p> 2637 <canvas id="c101" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2638 <script> 2639 2640 2641 function test_2d_drawImage_5arg() { 2642 2643 var canvas = document.getElementById('c101'); 2644 var ctx = canvas.getContext('2d'); 2645 2646 ctx.fillStyle = '#f00'; 2647 ctx.fillRect(0, 0, 100, 50); 2648 ctx.drawImage(document.getElementById('green_2.png'), 50, 0, 50, 50); 2649 ctx.drawImage(document.getElementById('red_4.png'), 0, 0, 50, 50); 2650 ctx.fillStyle = '#0f0'; 2651 ctx.fillRect(0, 0, 50, 50); 2652 2653 isPixel(ctx, 0,0, 0,255,0,255, 2); 2654 isPixel(ctx, 99,0, 0,255,0,255, 2); 2655 isPixel(ctx, 0,49, 0,255,0,255, 2); 2656 isPixel(ctx, 99,49, 0,255,0,255, 2); 2657 2658 2659 } 2660 </script> 2661 <img src="image_red.png" id="red_4.png" class="resource"> 2662 <img src="image_green.png" id="green_2.png" class="resource"> 2663 2664 <!-- [[[ test_2d.drawImage.9arg.basic.html ]]] --> 2665 2666 <p>Canvas test: 2d.drawImage.9arg.basic</p> 2667 <canvas id="c102" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2668 <script> 2669 2670 2671 function test_2d_drawImage_9arg_basic() { 2672 2673 var canvas = document.getElementById('c102'); 2674 var ctx = canvas.getContext('2d'); 2675 2676 ctx.fillStyle = '#f00'; 2677 ctx.fillRect(0, 0, 100, 50); 2678 ctx.drawImage(document.getElementById('green_3.png'), 0, 0, 100, 50, 0, 0, 100, 50); 2679 isPixel(ctx, 0,0, 0,255,0,255, 2); 2680 isPixel(ctx, 99,0, 0,255,0,255, 2); 2681 isPixel(ctx, 0,49, 0,255,0,255, 2); 2682 isPixel(ctx, 99,49, 0,255,0,255, 2); 2683 2684 2685 } 2686 </script> 2687 <img src="image_green.png" id="green_3.png" class="resource"> 2688 2689 <!-- [[[ test_2d.drawImage.9arg.destpos.html ]]] --> 2690 2691 <p>Canvas test: 2d.drawImage.9arg.destpos</p> 2692 <canvas id="c103" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2693 <script> 2694 2695 2696 function test_2d_drawImage_9arg_destpos() { 2697 2698 var canvas = document.getElementById('c103'); 2699 var ctx = canvas.getContext('2d'); 2700 2701 ctx.fillStyle = '#f00'; 2702 ctx.fillRect(0, 0, 100, 50); 2703 ctx.drawImage(document.getElementById('green_4.png'), 0, 0, 100, 50, 0, 0, 100, 50); 2704 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, -100, 0, 100, 50); 2705 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 100, 0, 100, 50); 2706 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 0, -50, 100, 50); 2707 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 0, 50, 100, 50); 2708 isPixel(ctx, 0,0, 0,255,0,255, 2); 2709 isPixel(ctx, 99,0, 0,255,0,255, 2); 2710 isPixel(ctx, 0,49, 0,255,0,255, 2); 2711 isPixel(ctx, 99,49, 0,255,0,255, 2); 2712 2713 2714 } 2715 </script> 2716 <img src="image_red.png" id="red_5.png" class="resource"> 2717 <img src="image_green.png" id="green_4.png" class="resource"> 2718 2719 <!-- [[[ test_2d.drawImage.9arg.destsize.html ]]] --> 2720 2721 <p>Canvas test: 2d.drawImage.9arg.destsize</p> 2722 <canvas id="c104" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2723 <script> 2724 2725 2726 function test_2d_drawImage_9arg_destsize() { 2727 2728 var canvas = document.getElementById('c104'); 2729 var ctx = canvas.getContext('2d'); 2730 2731 ctx.fillStyle = '#f00'; 2732 ctx.fillRect(0, 0, 100, 50); 2733 ctx.drawImage(document.getElementById('green_5.png'), 1, 1, 1, 1, 0, 0, 100, 50); 2734 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, -50, 0, 50, 50); 2735 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 100, 0, 50, 50); 2736 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 0, -25, 100, 25); 2737 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 0, 50, 100, 25); 2738 isPixel(ctx, 0,0, 0,255,0,255, 2); 2739 isPixel(ctx, 99,0, 0,255,0,255, 2); 2740 isPixel(ctx, 0,49, 0,255,0,255, 2); 2741 isPixel(ctx, 99,49, 0,255,0,255, 2); 2742 2743 2744 } 2745 </script> 2746 <img src="image_red.png" id="red_6.png" class="resource"> 2747 <img src="image_green.png" id="green_5.png" class="resource"> 2748 2749 <!-- [[[ test_2d.drawImage.9arg.sourcepos.html ]]] --> 2750 2751 <p>Canvas test: 2d.drawImage.9arg.sourcepos</p> 2752 <canvas id="c105" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2753 <script> 2754 2755 2756 function test_2d_drawImage_9arg_sourcepos() { 2757 2758 var canvas = document.getElementById('c105'); 2759 var ctx = canvas.getContext('2d'); 2760 2761 ctx.fillStyle = '#f00'; 2762 ctx.fillRect(0, 0, 100, 50); 2763 ctx.drawImage(document.getElementById('rgrg-256x256_1.png'), 140, 20, 100, 50, 0, 0, 100, 50); 2764 isPixel(ctx, 0,0, 0,255,0,255, 2); 2765 isPixel(ctx, 99,0, 0,255,0,255, 2); 2766 isPixel(ctx, 0,49, 0,255,0,255, 2); 2767 isPixel(ctx, 99,49, 0,255,0,255, 2); 2768 2769 2770 } 2771 </script> 2772 <img src="image_rgrg-256x256.png" id="rgrg-256x256_1.png" class="resource"> 2773 2774 <!-- [[[ test_2d.drawImage.9arg.sourcesize.html ]]] --> 2775 2776 <p>Canvas test: 2d.drawImage.9arg.sourcesize</p> 2777 <canvas id="c106" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2778 <script> 2779 2780 2781 function test_2d_drawImage_9arg_sourcesize() { 2782 2783 var canvas = document.getElementById('c106'); 2784 var ctx = canvas.getContext('2d'); 2785 2786 ctx.fillStyle = '#f00'; 2787 ctx.fillRect(0, 0, 100, 50); 2788 ctx.drawImage(document.getElementById('rgrg-256x256_2.png'), 0, 0, 256, 256, 0, 0, 100, 50); 2789 ctx.fillStyle = '#0f0'; 2790 ctx.fillRect(0, 0, 51, 26); 2791 ctx.fillRect(49, 24, 51, 26); 2792 isPixel(ctx, 0,0, 0,255,0,255, 3); 2793 isPixel(ctx, 99,0, 0,255,0,255, 3); 2794 isPixel(ctx, 0,49, 0,255,0,255, 3); 2795 isPixel(ctx, 99,49, 0,255,0,255, 3); 2796 isPixel(ctx, 20,20, 0,255,0,255, 3); 2797 isPixel(ctx, 80,20, 0,255,0,255, 3); 2798 isPixel(ctx, 20,30, 0,255,0,255, 3); 2799 isPixel(ctx, 80,30, 0,255,0,255, 3); 2800 2801 2802 } 2803 </script> 2804 <img src="image_rgrg-256x256.png" id="rgrg-256x256_2.png" class="resource"> 2805 2806 <!-- [[[ test_2d.drawImage.alpha.html ]]] --> 2807 2808 <p>Canvas test: 2d.drawImage.alpha</p> 2809 <canvas id="c107" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2810 <script> 2811 2812 2813 function test_2d_drawImage_alpha() { 2814 2815 var canvas = document.getElementById('c107'); 2816 var ctx = canvas.getContext('2d'); 2817 2818 ctx.fillStyle = '#0f0'; 2819 ctx.fillRect(0, 0, 100, 50); 2820 ctx.globalAlpha = 0; 2821 ctx.drawImage(document.getElementById('red_7.png'), 0, 0); 2822 isPixel(ctx, 50,25, 0,255,0,255, 2); 2823 2824 2825 } 2826 </script> 2827 <img src="image_red.png" id="red_7.png" class="resource"> 2828 2829 <!-- [[[ test_2d.drawImage.animated.apng.html ]]] --> 2830 2831 <p>Canvas test: 2d.drawImage.animated.apng</p> 2832 <!-- Testing: drawImage() of an APNG with no poster frame draws the first frame --> 2833 <canvas id="c108" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2834 <script> 2835 2836 2837 function deferTest() { 2838 _deferred = true; 2839 } 2840 function wrapFunction(f) { 2841 return function () { 2842 f.apply(null, arguments); 2843 }; 2844 } 2845 2846 var canvas108 = document.getElementById('c108'); 2847 var ctx108 = canvas108.getContext('2d'); 2848 var isDone_test_2d_drawImage_animated_apng = false; 2849 2850 function test_2d_drawImage_animated_apng() { 2851 2852 deferTest(); 2853 setTimeout(wrapFunction(function () { 2854 ctx108.drawImage(document.getElementById('anim-gr_1.png'), 0, 0); 2855 isPixel(ctx108, 50,25, 0,255,0,255, 2); 2856 isDone_test_2d_drawImage_animated_apng = true; 2857 }), 5000); 2858 2859 2860 } 2861 </script> 2862 <img src="image_anim-gr.png" id="anim-gr_1.png" class="resource"> 2863 2864 <!-- [[[ test_2d.drawImage.animated.gif.html ]]] --> 2865 2866 <p>Canvas test: 2d.drawImage.animated.gif</p> 2867 <!-- Testing: drawImage() of an animated GIF draws the first frame --> 2868 <canvas id="c109" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2869 <script> 2870 2871 var canvas109 = document.getElementById('c109'); 2872 var ctx109 = canvas109.getContext('2d'); 2873 var isDone_test_2d_drawImage_animated_gif = false; 2874 2875 function test_2d_drawImage_animated_gif() { 2876 2877 deferTest(); 2878 setTimeout(wrapFunction(function () { 2879 ctx109.drawImage(document.getElementById('anim-gr_1.gif'), 0, 0); 2880 isPixel(ctx109, 50,25, 0,255,0,255, 2); 2881 isDone_test_2d_drawImage_animated_gif = true; 2882 }), 5000); 2883 2884 2885 } 2886 </script> 2887 <img src="image_anim-gr.gif" id="anim-gr_1.gif" class="resource"> 2888 2889 <!-- [[[ test_2d.drawImage.animated.poster.html ]]] --> 2890 2891 <p>Canvas test: 2d.drawImage.animated.poster</p> 2892 <!-- Testing: drawImage() of an APNG draws the poster frame --> 2893 <canvas id="c110" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2894 <script> 2895 2896 var canvas110 = document.getElementById('c110'); 2897 var ctx110 = canvas110.getContext('2d'); 2898 2899 2900 function test_2d_drawImage_animated_poster() { 2901 2902 ctx110.drawImage(document.getElementById('anim-poster-gr_1.png'), 0, 0); 2903 todo_isPixel(ctx110, 50,25, 0,255,0,255, 2); 2904 2905 2906 } 2907 </script> 2908 <img src="image_anim-poster-gr.png" id="anim-poster-gr_1.png" class="resource"> 2909 2910 <!-- [[[ test_2d.drawImage.broken.html ]]] --> 2911 2912 <p>Canvas test: 2d.drawImage.broken</p> 2913 <canvas id="c111" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2914 <script> 2915 2916 function test_2d_drawImage_broken() { 2917 2918 var canvas = document.getElementById('c111'); 2919 var ctx = canvas.getContext('2d'); 2920 2921 var img = document.getElementById('broken_1.png'); 2922 todo(img.complete === false, "img.complete === false"); 2923 var _thrown = undefined; try { 2924 ctx.drawImage(img, 0, 0); 2925 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError"); 2926 2927 2928 } 2929 </script> 2930 <img src="image_broken.png" id="broken_1.png" class="resource"> 2931 2932 <!-- [[[ test_2d.drawImage.canvas.html ]]] --> 2933 2934 <p>Canvas test: 2d.drawImage.canvas</p> 2935 <canvas id="c112" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2936 <script> 2937 2938 2939 function test_2d_drawImage_canvas() { 2940 2941 var canvas = document.getElementById('c112'); 2942 var ctx = canvas.getContext('2d'); 2943 2944 var canvas2 = document.createElement('canvas'); 2945 canvas2.width = 100; 2946 canvas2.height = 50; 2947 var ctx2 = canvas2.getContext('2d'); 2948 ctx2.fillStyle = '#0f0'; 2949 ctx2.fillRect(0, 0, 100, 50); 2950 2951 ctx.fillStyle = '#f00'; 2952 ctx.drawImage(canvas2, 0, 0); 2953 2954 isPixel(ctx, 0,0, 0,255,0,255, 2); 2955 isPixel(ctx, 99,0, 0,255,0,255, 2); 2956 isPixel(ctx, 0,49, 0,255,0,255, 2); 2957 isPixel(ctx, 99,49, 0,255,0,255, 2); 2958 2959 2960 } 2961 </script> 2962 2963 <!-- [[[ test_2d.drawImage.clip.html ]]] --> 2964 2965 <p>Canvas test: 2d.drawImage.clip</p> 2966 <canvas id="c113" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2967 <script> 2968 2969 2970 function test_2d_drawImage_clip() { 2971 2972 var canvas = document.getElementById('c113'); 2973 var ctx = canvas.getContext('2d'); 2974 2975 ctx.fillStyle = '#0f0'; 2976 ctx.fillRect(0, 0, 100, 50); 2977 ctx.rect(-10, -10, 1, 1); 2978 ctx.clip(); 2979 ctx.drawImage(document.getElementById('red_8.png'), 0, 0); 2980 isPixel(ctx, 50,25, 0,255,0,255, 2); 2981 2982 2983 } 2984 </script> 2985 <img src="image_red.png" id="red_8.png" class="resource"> 2986 2987 <!-- [[[ test_2d.drawImage.composite.html ]]] --> 2988 2989 <p>Canvas test: 2d.drawImage.composite</p> 2990 <canvas id="c114" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 2991 <script> 2992 2993 2994 function test_2d_drawImage_composite() { 2995 2996 var canvas = document.getElementById('c114'); 2997 var ctx = canvas.getContext('2d'); 2998 2999 ctx.fillStyle = '#0f0'; 3000 ctx.fillRect(0, 0, 100, 50); 3001 ctx.globalCompositeOperation = 'destination-over'; 3002 ctx.drawImage(document.getElementById('red_9.png'), 0, 0); 3003 isPixel(ctx, 50,25, 0,255,0,255, 2); 3004 3005 3006 } 3007 </script> 3008 <img src="image_red.png" id="red_9.png" class="resource"> 3009 3010 <!-- [[[ test_2d.drawImage.floatsource.html ]]] --> 3011 3012 <p>Canvas test: 2d.drawImage.floatsource</p> 3013 <canvas id="c115" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3014 <script> 3015 3016 3017 function test_2d_drawImage_floatsource() { 3018 3019 var canvas = document.getElementById('c115'); 3020 var ctx = canvas.getContext('2d'); 3021 3022 ctx.drawImage(document.getElementById('green_6.png'), 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50); 3023 isPixel(ctx, 50,25, 0,255,0,255, 2); 3024 3025 3026 } 3027 </script> 3028 <img src="image_green.png" id="green_6.png" class="resource"> 3029 3030 <!-- [[[ test_2d.drawImage.incomplete.html ]]] --> 3031 3032 <p>Canvas test: 2d.drawImage.incomplete</p> 3033 <canvas id="c116" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3034 <script> 3035 3036 function test_2d_drawImage_incomplete() { 3037 3038 var canvas = document.getElementById('c116'); 3039 var ctx = canvas.getContext('2d'); 3040 3041 var img = new Image(); 3042 todo(img.complete === false, "img.complete === false"); 3043 var _thrown = undefined; try { 3044 ctx.drawImage(img, 0, 0); 3045 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError"); 3046 3047 3048 } 3049 </script> 3050 3051 <!-- [[[ test_2d.drawImage.negativedest.html ]]] --> 3052 3053 <p>Canvas test: 2d.drawImage.negativedest</p> 3054 <canvas id="c117" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3055 <script> 3056 3057 3058 function test_2d_drawImage_negativedest() { 3059 3060 var canvas = document.getElementById('c117'); 3061 var ctx = canvas.getContext('2d'); 3062 3063 var _thrown_outer = false; 3064 try { 3065 3066 ctx.fillStyle = '#f00'; 3067 ctx.fillRect(0, 0, 100, 50); 3068 ctx.drawImage(document.getElementById('ggrr-256x256_1.png'), 100, 78, 50, 50, 0, 50, 50, -50); 3069 ctx.drawImage(document.getElementById('ggrr-256x256_1.png'), 100, 128, 50, -50, 100, 50, -50, -50); 3070 isPixel(ctx, 1,1, 0,255,0,255, 2); 3071 isPixel(ctx, 1,48, 0,255,0,255, 2); 3072 isPixel(ctx, 98,1, 0,255,0,255, 2); 3073 isPixel(ctx, 98,48, 0,255,0,255, 2); 3074 isPixel(ctx, 48,1, 0,255,0,255, 2); 3075 isPixel(ctx, 48,48, 0,255,0,255, 2); 3076 isPixel(ctx, 51,1, 0,255,0,255, 2); 3077 isPixel(ctx, 51,48, 0,255,0,255, 2); 3078 isPixel(ctx, 25,25, 0,255,0,255, 2); 3079 isPixel(ctx, 75,25, 0,255,0,255, 2); 3080 3081 } catch (e) { 3082 _thrown_outer = true; 3083 } 3084 ok(!_thrown_outer, 'should not throw exception'); 3085 3086 3087 } 3088 </script> 3089 <img src="image_ggrr-256x256.png" id="ggrr-256x256_1.png" class="resource"> 3090 3091 <!-- [[[ test_2d.drawImage.negativesource.html ]]] --> 3092 3093 <p>Canvas test: 2d.drawImage.negativesource</p> 3094 <canvas id="c118" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3095 <script> 3096 3097 3098 function test_2d_drawImage_negativesource() { 3099 3100 var canvas = document.getElementById('c118'); 3101 var ctx = canvas.getContext('2d'); 3102 3103 var _thrown_outer = false; 3104 try { 3105 3106 ctx.fillStyle = '#f00'; 3107 ctx.fillRect(0, 0, 100, 50); 3108 ctx.drawImage(document.getElementById('ggrr-256x256_2.png'), 100, 78, -100, 50, 0, 0, 50, 50); 3109 ctx.drawImage(document.getElementById('ggrr-256x256_2.png'), 100, 128, -100, -50, 50, 0, 50, 50); 3110 isPixel(ctx, 1,1, 0,255,0,255, 2); 3111 isPixel(ctx, 1,48, 0,255,0,255, 2); 3112 isPixel(ctx, 98,1, 0,255,0,255, 2); 3113 isPixel(ctx, 98,48, 0,255,0,255, 2); 3114 isPixel(ctx, 48,1, 0,255,0,255, 2); 3115 isPixel(ctx, 48,48, 0,255,0,255, 2); 3116 isPixel(ctx, 51,1, 0,255,0,255, 2); 3117 isPixel(ctx, 51,48, 0,255,0,255, 2); 3118 isPixel(ctx, 25,25, 0,255,0,255, 2); 3119 isPixel(ctx, 75,25, 0,255,0,255, 2); 3120 3121 } catch (e) { 3122 _thrown_outer = true; 3123 } 3124 ok(!_thrown_outer, 'should not throw exception'); 3125 3126 3127 } 3128 </script> 3129 <img src="image_ggrr-256x256.png" id="ggrr-256x256_2.png" class="resource"> 3130 3131 <!-- [[[ test_2d.drawImage.nonfinite.html ]]] --> 3132 3133 <p>Canvas test: 2d.drawImage.nonfinite</p> 3134 <!-- Testing: drawImage() with Infinity/NaN is ignored --> 3135 <canvas id="c119" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3136 <script> 3137 3138 3139 function test_2d_drawImage_nonfinite() { 3140 3141 var canvas = document.getElementById('c119'); 3142 var ctx = canvas.getContext('2d'); 3143 3144 var _thrown_outer = false; 3145 3146 try { 3147 3148 ctx.fillStyle = '#0f0'; 3149 ctx.fillRect(0, 0, 100, 50); 3150 var red = document.getElementById('red_10.png'); 3151 ctx.drawImage(red, Infinity, 0); 3152 ctx.drawImage(red, -Infinity, 0); 3153 ctx.drawImage(red, NaN, 0); 3154 ctx.drawImage(red, 0, Infinity); 3155 ctx.drawImage(red, 0, -Infinity); 3156 ctx.drawImage(red, 0, NaN); 3157 ctx.drawImage(red, Infinity, Infinity); 3158 ctx.drawImage(red, Infinity, 0, 100, 50); 3159 ctx.drawImage(red, -Infinity, 0, 100, 50); 3160 ctx.drawImage(red, NaN, 0, 100, 50); 3161 ctx.drawImage(red, 0, Infinity, 100, 50); 3162 ctx.drawImage(red, 0, -Infinity, 100, 50); 3163 ctx.drawImage(red, 0, NaN, 100, 50); 3164 ctx.drawImage(red, 0, 0, Infinity, 50); 3165 ctx.drawImage(red, 0, 0, -Infinity, 50); 3166 ctx.drawImage(red, 0, 0, NaN, 50); 3167 ctx.drawImage(red, 0, 0, 100, Infinity); 3168 ctx.drawImage(red, 0, 0, 100, -Infinity); 3169 ctx.drawImage(red, 0, 0, 100, NaN); 3170 ctx.drawImage(red, Infinity, Infinity, 100, 50); 3171 ctx.drawImage(red, Infinity, Infinity, Infinity, 50); 3172 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity); 3173 ctx.drawImage(red, Infinity, Infinity, 100, Infinity); 3174 ctx.drawImage(red, Infinity, 0, Infinity, 50); 3175 ctx.drawImage(red, Infinity, 0, Infinity, Infinity); 3176 ctx.drawImage(red, Infinity, 0, 100, Infinity); 3177 ctx.drawImage(red, 0, Infinity, Infinity, 50); 3178 ctx.drawImage(red, 0, Infinity, Infinity, Infinity); 3179 ctx.drawImage(red, 0, Infinity, 100, Infinity); 3180 ctx.drawImage(red, 0, 0, Infinity, Infinity); 3181 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, 100, 50); 3182 ctx.drawImage(red, -Infinity, 0, 100, 50, 0, 0, 100, 50); 3183 ctx.drawImage(red, NaN, 0, 100, 50, 0, 0, 100, 50); 3184 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, 100, 50); 3185 ctx.drawImage(red, 0, -Infinity, 100, 50, 0, 0, 100, 50); 3186 ctx.drawImage(red, 0, NaN, 100, 50, 0, 0, 100, 50); 3187 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, 100, 50); 3188 ctx.drawImage(red, 0, 0, -Infinity, 50, 0, 0, 100, 50); 3189 ctx.drawImage(red, 0, 0, NaN, 50, 0, 0, 100, 50); 3190 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, 100, 50); 3191 ctx.drawImage(red, 0, 0, 100, -Infinity, 0, 0, 100, 50); 3192 ctx.drawImage(red, 0, 0, 100, NaN, 0, 0, 100, 50); 3193 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, 100, 50); 3194 ctx.drawImage(red, 0, 0, 100, 50, -Infinity, 0, 100, 50); 3195 ctx.drawImage(red, 0, 0, 100, 50, NaN, 0, 100, 50); 3196 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, 100, 50); 3197 ctx.drawImage(red, 0, 0, 100, 50, 0, -Infinity, 100, 50); 3198 ctx.drawImage(red, 0, 0, 100, 50, 0, NaN, 100, 50); 3199 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, Infinity, 50); 3200 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, -Infinity, 50); 3201 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, NaN, 50); 3202 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, Infinity); 3203 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, -Infinity); 3204 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, NaN); 3205 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, 100, 50); 3206 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, 100, 50); 3207 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, 50); 3208 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, 50); 3209 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50); 3210 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50); 3211 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); 3212 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity); 3213 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50); 3214 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity); 3215 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity); 3216 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, 50); 3217 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50); 3218 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity); 3219 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity); 3220 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, 50); 3221 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity); 3222 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, Infinity); 3223 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, 50); 3224 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, 50); 3225 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50); 3226 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity); 3227 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity); 3228 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, 50); 3229 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity); 3230 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, Infinity); 3231 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, 50); 3232 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, 50); 3233 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity); 3234 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, Infinity); 3235 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, 50); 3236 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, Infinity); 3237 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, 100, Infinity); 3238 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, 100, 50); 3239 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, 50); 3240 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, 50); 3241 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50); 3242 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity); 3243 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity); 3244 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, 50); 3245 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity); 3246 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, Infinity); 3247 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, 50); 3248 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, 50); 3249 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity); 3250 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, Infinity); 3251 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, 50); 3252 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, Infinity); 3253 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, 100, Infinity); 3254 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, 100, 50); 3255 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, 50); 3256 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, 50); 3257 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity); 3258 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, Infinity); 3259 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, 50); 3260 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, Infinity); 3261 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, 100, Infinity); 3262 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, 100, 50); 3263 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, 50); 3264 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, Infinity); 3265 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, 100, Infinity); 3266 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, Infinity, 50); 3267 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, Infinity, Infinity); 3268 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, 100, Infinity); 3269 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, 100, 50); 3270 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, 100, 50); 3271 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, 50); 3272 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, 50); 3273 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50); 3274 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); 3275 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity); 3276 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, 50); 3277 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity); 3278 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, Infinity); 3279 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, 50); 3280 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, 50); 3281 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity); 3282 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, Infinity); 3283 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, 50); 3284 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, Infinity); 3285 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, 100, Infinity); 3286 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, 100, 50); 3287 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, 50); 3288 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, 50); 3289 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity); 3290 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, Infinity); 3291 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, 50); 3292 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, Infinity); 3293 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, 100, Infinity); 3294 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, 100, 50); 3295 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, 50); 3296 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, Infinity); 3297 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, 100, Infinity); 3298 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, Infinity, 50); 3299 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, Infinity, Infinity); 3300 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, 100, Infinity); 3301 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, 100, 50); 3302 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, 100, 50); 3303 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, 50); 3304 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, 50); 3305 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity); 3306 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, Infinity); 3307 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, 50); 3308 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, Infinity); 3309 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, 100, Infinity); 3310 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, 100, 50); 3311 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, 50); 3312 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, Infinity); 3313 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, 100, Infinity); 3314 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, Infinity, 50); 3315 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, Infinity, Infinity); 3316 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, 100, Infinity); 3317 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, 100, 50); 3318 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, 100, 50); 3319 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, 50); 3320 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, Infinity); 3321 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, 100, Infinity); 3322 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, Infinity, 50); 3323 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, Infinity, Infinity); 3324 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, 100, Infinity); 3325 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, 100, 50); 3326 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, Infinity, 50); 3327 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, Infinity, Infinity); 3328 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, 100, Infinity); 3329 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, Infinity, 50); 3330 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, Infinity, Infinity); 3331 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, 100, Infinity); 3332 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, 100, 50); 3333 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, 100, 50); 3334 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, 50); 3335 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50); 3336 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50); 3337 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); 3338 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity); 3339 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50); 3340 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity); 3341 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity); 3342 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, 50); 3343 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50); 3344 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity); 3345 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity); 3346 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, 50); 3347 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity); 3348 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, 100, Infinity); 3349 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, 100, 50); 3350 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, 50); 3351 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50); 3352 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity); 3353 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity); 3354 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, 50); 3355 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity); 3356 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, 100, Infinity); 3357 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, 100, 50); 3358 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, 50); 3359 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity); 3360 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, 100, Infinity); 3361 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, Infinity, 50); 3362 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, Infinity, Infinity); 3363 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, 100, Infinity); 3364 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, 100, 50); 3365 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, 100, 50); 3366 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, 50); 3367 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50); 3368 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity); 3369 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity); 3370 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, 50); 3371 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity); 3372 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, 100, Infinity); 3373 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, 100, 50); 3374 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, 50); 3375 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity); 3376 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, 100, Infinity); 3377 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, Infinity, 50); 3378 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, Infinity, Infinity); 3379 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, 100, Infinity); 3380 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, 100, 50); 3381 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, 100, 50); 3382 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, 50); 3383 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity); 3384 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, 100, Infinity); 3385 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, Infinity, 50); 3386 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, Infinity, Infinity); 3387 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, 100, Infinity); 3388 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, 100, 50); 3389 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, Infinity, 50); 3390 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, Infinity, Infinity); 3391 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, 100, Infinity); 3392 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, Infinity, 50); 3393 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, Infinity, Infinity); 3394 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, 100, Infinity); 3395 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, 100, 50); 3396 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, 100, 50); 3397 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, 50); 3398 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50); 3399 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); 3400 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity); 3401 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, 50); 3402 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity); 3403 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, 100, Infinity); 3404 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, 100, 50); 3405 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, 50); 3406 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity); 3407 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, 100, Infinity); 3408 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, Infinity, 50); 3409 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, Infinity, Infinity); 3410 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, 100, Infinity); 3411 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, 100, 50); 3412 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, 100, 50); 3413 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, 50); 3414 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity); 3415 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, 100, Infinity); 3416 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, Infinity, 50); 3417 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, Infinity, Infinity); 3418 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, 100, Infinity); 3419 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, 100, 50); 3420 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, Infinity, 50); 3421 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, Infinity, Infinity); 3422 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, 100, Infinity); 3423 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, Infinity, 50); 3424 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, Infinity, Infinity); 3425 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, 100, Infinity); 3426 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, 100, 50); 3427 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, 100, 50); 3428 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, 50); 3429 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity); 3430 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, 100, Infinity); 3431 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, Infinity, 50); 3432 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, Infinity, Infinity); 3433 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, 100, Infinity); 3434 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, 100, 50); 3435 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, Infinity, 50); 3436 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, Infinity, Infinity); 3437 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, 100, Infinity); 3438 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, Infinity, 50); 3439 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, Infinity, Infinity); 3440 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, 100, Infinity); 3441 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, 100, 50); 3442 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, Infinity, 50); 3443 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, Infinity, Infinity); 3444 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, 100, Infinity); 3445 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, Infinity, 50); 3446 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, Infinity, Infinity); 3447 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, 100, Infinity); 3448 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, Infinity, 50); 3449 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, Infinity, Infinity); 3450 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, 100, Infinity); 3451 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, Infinity, Infinity); 3452 isPixel(ctx, 50,25, 0,255,0,255, 0); 3453 3454 } catch (e) { 3455 _thrown_outer = true; 3456 } 3457 ok(!_thrown_outer, 'should not throw exception'); 3458 3459 3460 } 3461 </script> 3462 <img src="image_red.png" id="red_10.png" class="resource"> 3463 3464 <!-- [[[ test_2d.drawImage.nowrap.html ]]] --> 3465 3466 <p>Canvas test: 2d.drawImage.nowrap</p> 3467 <!-- Testing: Stretched images do not get pixels wrapping around the edges --> 3468 <canvas id="c120" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3469 <script> 3470 3471 3472 function test_2d_drawImage_nowrap() { 3473 3474 var canvas = document.getElementById('c120'); 3475 var ctx = canvas.getContext('2d'); 3476 3477 ctx.fillStyle = '#0f0'; 3478 ctx.fillRect(0, 0, 100, 50); 3479 ctx.drawImage(document.getElementById('redtransparent_1.png'), -1950, 0, 2000, 50); 3480 isPixel(ctx, 45,25, 0,255,0,255, 2); 3481 isPixel(ctx, 50,25, 0,255,0,255, 2); 3482 isPixel(ctx, 55,25, 0,255,0,255, 2); 3483 3484 3485 } 3486 </script> 3487 <img src="image_redtransparent.png" id="redtransparent_1.png" class="resource"> 3488 3489 <!-- [[[ test_2d.drawImage.null.html ]]] --> 3490 3491 <p>Canvas test: 2d.drawImage.null</p> 3492 <canvas id="c121" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3493 <script> 3494 3495 function test_2d_drawImage_null() { 3496 3497 var canvas = document.getElementById('c121'); 3498 var ctx = canvas.getContext('2d'); 3499 3500 var _thrown = undefined; try { 3501 ctx.drawImage(null, 0, 0); 3502 } catch (e) { _thrown = e }; 3503 3504 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 3505 3506 } 3507 </script> 3508 3509 <!-- [[[ test_2d.drawImage.path.html ]]] --> 3510 3511 <p>Canvas test: 2d.drawImage.path</p> 3512 <canvas id="c123" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3513 <script> 3514 3515 3516 function test_2d_drawImage_path() { 3517 3518 var canvas = document.getElementById('c123'); 3519 var ctx = canvas.getContext('2d'); 3520 3521 ctx.fillStyle = '#0f0'; 3522 ctx.rect(0, 0, 100, 50); 3523 ctx.drawImage(document.getElementById('red_12.png'), 0, 0); 3524 ctx.fill(); 3525 isPixel(ctx, 50,25, 0,255,0,255, 2); 3526 3527 3528 } 3529 </script> 3530 <img src="image_red.png" id="red_12.png" class="resource"> 3531 3532 <!-- [[[ test_2d.drawImage.self.1.html ]]] --> 3533 3534 <p>Canvas test: 2d.drawImage.self.1 - bug 433235</p> 3535 <canvas id="c124" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3536 <script> 3537 3538 3539 function test_2d_drawImage_self_1() { 3540 3541 var canvas = document.getElementById('c124'); 3542 var ctx = canvas.getContext('2d'); 3543 3544 ctx.fillStyle = '#0f0'; 3545 ctx.fillRect(0, 0, 50, 50); 3546 ctx.fillStyle = '#f00'; 3547 ctx.fillRect(50, 0, 50, 50); 3548 ctx.drawImage(canvas, 50, 0); 3549 3550 isPixel(ctx, 0,0, 0,255,0,255, 2); 3551 isPixel(ctx, 99,0, 0,255,0,255, 2); 3552 isPixel(ctx, 0,49, 0,255,0,255, 2); 3553 isPixel(ctx, 99,49, 0,255,0,255, 2); 3554 3555 3556 } 3557 </script> 3558 3559 <!-- [[[ test_2d.drawImage.self.2.html ]]] --> 3560 3561 <p>Canvas test: 2d.drawImage.self.2 - bug 433235</p> 3562 <canvas id="c125" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3563 <script> 3564 3565 3566 function test_2d_drawImage_self_2() { 3567 3568 var canvas = document.getElementById('c125'); 3569 var ctx = canvas.getContext('2d'); 3570 3571 ctx.fillStyle = '#0f0'; 3572 ctx.fillRect(0, 1, 100, 49); 3573 ctx.fillStyle = '#f00'; 3574 ctx.fillRect(0, 0, 100, 1); 3575 ctx.drawImage(canvas, 0, 1); 3576 ctx.fillStyle = '#0f0'; 3577 ctx.fillRect(0, 0, 100, 2); 3578 3579 isPixel(ctx, 0,0, 0,255,0,255, 2); 3580 isPixel(ctx, 99,0, 0,255,0,255, 2); 3581 isPixel(ctx, 0,49, 0,255,0,255, 2); 3582 isPixel(ctx, 99,49, 0,255,0,255, 2); 3583 3584 3585 } 3586 </script> 3587 3588 <!-- [[[ test_2d.drawImage.transform.html ]]] --> 3589 3590 <p>Canvas test: 2d.drawImage.transform</p> 3591 <canvas id="c126" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3592 <script> 3593 3594 3595 function test_2d_drawImage_transform() { 3596 3597 var canvas = document.getElementById('c126'); 3598 var ctx = canvas.getContext('2d'); 3599 3600 ctx.fillStyle = '#0f0'; 3601 ctx.fillRect(0, 0, 100, 50); 3602 ctx.translate(100, 0); 3603 ctx.drawImage(document.getElementById('red_13.png'), 0, 0); 3604 isPixel(ctx, 50,25, 0,255,0,255, 2); 3605 3606 3607 } 3608 </script> 3609 <img src="image_red.png" id="red_13.png" class="resource"> 3610 3611 <!-- [[[ test_2d.drawImage.wrongtype.html ]]] --> 3612 3613 <p>Canvas test: 2d.drawImage.wrongtype</p> 3614 <canvas id="c127" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3615 <script> 3616 3617 function test_2d_drawImage_wrongtype() { 3618 3619 var canvas = document.getElementById('c127'); 3620 var ctx = canvas.getContext('2d'); 3621 3622 var _thrown = undefined; try { 3623 ctx.drawImage(undefined, 0, 0); 3624 } catch (e) { _thrown = e }; 3625 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 3626 3627 var _thrown = undefined; try { 3628 ctx.drawImage(0, 0, 0); 3629 } catch (e) { _thrown = e }; 3630 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 3631 3632 var _thrown = undefined; try { 3633 ctx.drawImage("", 0, 0); 3634 } catch (e) { _thrown = e }; 3635 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 3636 3637 var _thrown = undefined; try { 3638 ctx.drawImage(document.createElement('p'), 0, 0); 3639 } catch (e) { _thrown = e }; 3640 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 3641 3642 } 3643 </script> 3644 3645 <!-- [[[ test_2d.drawImage.zerosource.html ]]] --> 3646 3647 <p>Canvas test: 2d.drawImage.zerosource</p> 3648 <!-- Testing: drawImage with zero-sized source rectangle does nothing --> 3649 <canvas id="c128" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3650 <script> 3651 3652 3653 function test_2d_drawImage_zerosource() { 3654 3655 var canvas = document.getElementById('c128'); 3656 var ctx = canvas.getContext('2d'); 3657 3658 ctx.fillStyle = '#0f0'; 3659 ctx.fillRect(0, 0, 100, 50); 3660 ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 1, 0, 0, 100, 50); 3661 ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 1, 0, 0, 0, 100, 50); 3662 ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 0, 0, 0, 100, 50); 3663 isPixel(ctx, 50,25, 0,255,0,255, 2); 3664 3665 3666 } 3667 </script> 3668 <img src="image_red.png" id="red_14.png" class="resource"> 3669 3670 <!-- [[[ test_2d.fillRect.basic.html ]]] --> 3671 3672 <p>Canvas test: 2d.fillRect.basic</p> 3673 <canvas id="c129" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 3674 <script> 3675 3676 3677 function test_2d_fillRect_basic() { 3678 3679 var canvas = document.getElementById('c129'); 3680 var ctx = canvas.getContext('2d'); 3681 3682 ctx.fillStyle = '#0f0'; 3683 ctx.fillRect(0, 0, 100, 50); 3684 isPixel(ctx, 50,25, 0,255,0,255, 0); 3685 3686 3687 } 3688 </script> 3689 3690 <!-- [[[ test_2d.fillRect.clip.html ]]] --> 3691 3692 <p>Canvas test: 2d.fillRect.clip</p> 3693 <canvas id="c130" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3694 <script> 3695 3696 3697 function test_2d_fillRect_clip() { 3698 3699 var canvas = document.getElementById('c130'); 3700 var ctx = canvas.getContext('2d'); 3701 3702 ctx.fillStyle = '#0f0'; 3703 ctx.fillRect(0, 0, 100, 50); 3704 3705 ctx.beginPath(); 3706 ctx.rect(0, 0, 16, 16); 3707 ctx.clip(); 3708 3709 ctx.fillStyle = '#f00'; 3710 ctx.fillRect(0, 0, 100, 50); 3711 3712 ctx.fillStyle = '#0f0'; 3713 ctx.fillRect(0, 0, 16, 16); 3714 3715 isPixel(ctx, 50,25, 0,255,0,255, 0); 3716 3717 3718 } 3719 </script> 3720 3721 <!-- [[[ test_2d.fillRect.negative.html ]]] --> 3722 3723 <p>Canvas test: 2d.fillRect.negative</p> 3724 <canvas id="c131" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3725 <script> 3726 3727 3728 function test_2d_fillRect_negative() { 3729 3730 var canvas = document.getElementById('c131'); 3731 var ctx = canvas.getContext('2d'); 3732 3733 ctx.fillStyle = '#f00'; 3734 ctx.fillRect(0, 0, 100, 50); 3735 ctx.fillStyle = '#0f0'; 3736 ctx.fillRect(0, 0, 50, 25); 3737 ctx.fillRect(100, 0, -50, 25); 3738 ctx.fillRect(0, 50, 50, -25); 3739 ctx.fillRect(100, 50, -50, -25); 3740 isPixel(ctx, 25,12, 0,255,0,255, 0); 3741 isPixel(ctx, 75,12, 0,255,0,255, 0); 3742 isPixel(ctx, 25,37, 0,255,0,255, 0); 3743 isPixel(ctx, 75,37, 0,255,0,255, 0); 3744 3745 3746 } 3747 </script> 3748 3749 <!-- [[[ test_2d.fillRect.nonfinite.html ]]] --> 3750 3751 <p>Canvas test: 2d.fillRect.nonfinite</p> 3752 <!-- Testing: fillRect() with Infinity/NaN is ignored --> 3753 <canvas id="c132" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3754 <script> 3755 3756 3757 function test_2d_fillRect_nonfinite() { 3758 3759 var canvas = document.getElementById('c132'); 3760 var ctx = canvas.getContext('2d'); 3761 3762 var _thrown_outer = false; 3763 try { 3764 3765 ctx.fillStyle = '#0f0'; 3766 ctx.fillRect(0, 0, 100, 50); 3767 3768 ctx.fillStyle = '#f00'; 3769 ctx.fillRect(Infinity, 0, 100, 50); 3770 ctx.fillRect(-Infinity, 0, 100, 50); 3771 ctx.fillRect(NaN, 0, 100, 50); 3772 ctx.fillRect(0, Infinity, 100, 50); 3773 ctx.fillRect(0, -Infinity, 100, 50); 3774 ctx.fillRect(0, NaN, 100, 50); 3775 ctx.fillRect(0, 0, Infinity, 50); 3776 ctx.fillRect(0, 0, -Infinity, 50); 3777 ctx.fillRect(0, 0, NaN, 50); 3778 ctx.fillRect(0, 0, 100, Infinity); 3779 ctx.fillRect(0, 0, 100, -Infinity); 3780 ctx.fillRect(0, 0, 100, NaN); 3781 ctx.fillRect(Infinity, Infinity, 100, 50); 3782 ctx.fillRect(Infinity, Infinity, Infinity, 50); 3783 ctx.fillRect(Infinity, Infinity, Infinity, Infinity); 3784 ctx.fillRect(Infinity, Infinity, 100, Infinity); 3785 ctx.fillRect(Infinity, 0, Infinity, 50); 3786 ctx.fillRect(Infinity, 0, Infinity, Infinity); 3787 ctx.fillRect(Infinity, 0, 100, Infinity); 3788 ctx.fillRect(0, Infinity, Infinity, 50); 3789 ctx.fillRect(0, Infinity, Infinity, Infinity); 3790 ctx.fillRect(0, Infinity, 100, Infinity); 3791 ctx.fillRect(0, 0, Infinity, Infinity); 3792 3793 isPixel(ctx, 50,25, 0,255,0,255, 0); 3794 3795 } catch (e) { 3796 _thrown_outer = true; 3797 } 3798 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 3799 3800 3801 } 3802 </script> 3803 3804 <!-- [[[ test_2d.fillRect.path.html ]]] --> 3805 3806 <p>Canvas test: 2d.fillRect.path</p> 3807 <canvas id="c133" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 3808 <script> 3809 3810 3811 function test_2d_fillRect_path() { 3812 3813 var canvas = document.getElementById('c133'); 3814 var ctx = canvas.getContext('2d'); 3815 3816 ctx.beginPath(); 3817 ctx.rect(0, 0, 100, 50); 3818 ctx.fillStyle = '#f00'; 3819 ctx.fillRect(0, 0, 16, 16); 3820 ctx.fillStyle = '#0f0'; 3821 ctx.fill(); 3822 isPixel(ctx, 50,25, 0,255,0,255, 0); 3823 3824 3825 } 3826 </script> 3827 3828 <!-- [[[ test_2d.fillRect.shadow.html ]]] --> 3829 3830 <p>Canvas test: 2d.fillRect.shadow</p> 3831 <canvas id="c134" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3832 <script> 3833 3834 3835 function test_2d_fillRect_shadow() { 3836 3837 var canvas = document.getElementById('c134'); 3838 var ctx = canvas.getContext('2d'); 3839 3840 ctx.fillStyle = '#0f0'; 3841 ctx.fillRect(0, 0, 100, 50); 3842 3843 ctx.fillStyle = '#f00'; 3844 ctx.shadowBlur = 0; 3845 ctx.shadowOffsetX = 0; 3846 ctx.shadowOffsetY = 50; 3847 3848 // Shadows are optional, so just test that if they apply to fill() then they apply to fillRect() too 3849 ctx.beginPath(); 3850 ctx.rect(0, -50, 100, 50); 3851 ctx.shadowColor = '#f00'; 3852 ctx.fill(); 3853 3854 ctx.shadowColor = '#0f0'; 3855 ctx.fillRect(0, -50, 100, 50); 3856 3857 isPixel(ctx, 50,25, 0,255,0,255, 0); 3858 3859 3860 } 3861 </script> 3862 3863 <!-- [[[ test_2d.fillRect.transform.html ]]] --> 3864 3865 <p>Canvas test: 2d.fillRect.transform</p> 3866 <canvas id="c135" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 3867 <script> 3868 3869 3870 function test_2d_fillRect_transform() { 3871 3872 var canvas = document.getElementById('c135'); 3873 var ctx = canvas.getContext('2d'); 3874 3875 ctx.scale(10, 10); 3876 ctx.translate(0, 5); 3877 ctx.fillStyle = '#0f0'; 3878 ctx.fillRect(0, -5, 10, 5); 3879 isPixel(ctx, 50,25, 0,255,0,255, 0); 3880 3881 3882 } 3883 </script> 3884 3885 <!-- [[[ test_2d.fillRect.zero.html ]]] --> 3886 3887 <p>Canvas test: 2d.fillRect.zero</p> 3888 <canvas id="c136" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3889 <script> 3890 3891 3892 function test_2d_fillRect_zero() { 3893 3894 var canvas = document.getElementById('c136'); 3895 var ctx = canvas.getContext('2d'); 3896 3897 ctx.fillStyle = '#0f0'; 3898 ctx.fillRect(0, 0, 100, 50); 3899 ctx.fillStyle = '#f00'; 3900 ctx.fillRect(0, 0, 100, 0); 3901 ctx.fillRect(0, 0, 0, 50); 3902 ctx.fillRect(0, 0, 0, 0); 3903 isPixel(ctx, 50,25, 0,255,0,255, 0); 3904 3905 3906 } 3907 </script> 3908 3909 <!-- [[[ test_2d.fillStyle.default.html ]]] --> 3910 3911 <p>Canvas test: 2d.fillStyle.default</p> 3912 <canvas id="c137" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3913 <script> 3914 3915 function test_2d_fillStyle_default() { 3916 3917 var canvas = document.getElementById('c137'); 3918 var ctx = canvas.getContext('2d'); 3919 3920 ok(ctx.fillStyle == '#000000', "ctx.fillStyle == '#000000'"); 3921 3922 3923 } 3924 </script> 3925 3926 <!-- [[[ test_2d.fillStyle.get.semitransparent.html ]]] --> 3927 3928 <p>Canvas test: 2d.fillStyle.get.semitransparent</p> 3929 <canvas id="c138" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3930 <script> 3931 3932 function test_2d_fillStyle_get_semitransparent() { 3933 3934 var canvas = document.getElementById('c138'); 3935 var ctx = canvas.getContext('2d'); 3936 3937 ctx.fillStyle = 'rgba(255,255,255,0.45)'; 3938 ok(/^rgba\(255, 255, 255, 0\.4\d+\)$/.test(ctx.fillStyle), "ctx.fillStyle =~ /^rgba\\(255, 255, 255, 0\\.4\\d+\\)$/"); 3939 3940 3941 } 3942 </script> 3943 3944 <!-- [[[ test_2d.fillStyle.get.solid.html ]]] --> 3945 3946 <p>Canvas test: 2d.fillStyle.get.solid</p> 3947 <canvas id="c139" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3948 <script> 3949 3950 function test_2d_fillStyle_get_solid() { 3951 3952 var canvas = document.getElementById('c139'); 3953 var ctx = canvas.getContext('2d'); 3954 3955 ctx.fillStyle = '#fa0'; 3956 ok(ctx.fillStyle === '#ffaa00', "ctx.fillStyle === '#ffaa00'"); 3957 3958 3959 } 3960 </script> 3961 3962 <!-- [[[ test_2d.fillStyle.get.transparent.html ]]] --> 3963 3964 <p>Canvas test: 2d.fillStyle.get.transparent</p> 3965 <canvas id="c140" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3966 <script> 3967 3968 function test_2d_fillStyle_get_transparent() { 3969 3970 var canvas = document.getElementById('c140'); 3971 var ctx = canvas.getContext('2d'); 3972 3973 ctx.fillStyle = 'rgba(0,0,0,0)'; 3974 is(ctx.fillStyle, 'rgba(0, 0, 0, 0)', "ctx.fillStyle should be what we set it to"); 3975 3976 3977 } 3978 </script> 3979 3980 <!-- [[[ test_2d.fillStyle.invalidstring.html ]]] --> 3981 3982 <p>Canvas test: 2d.fillStyle.invalidstring</p> 3983 <canvas id="c141" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 3984 <script> 3985 3986 3987 function test_2d_fillStyle_invalidstring() { 3988 3989 var canvas = document.getElementById('c141'); 3990 var ctx = canvas.getContext('2d'); 3991 3992 ctx.fillStyle = '#f00'; 3993 ctx.fillRect(0, 0, 100, 50); 3994 ctx.fillStyle = '#0f0'; 3995 ctx.fillStyle = 'invalid'; 3996 ctx.fillRect(0, 0, 100, 50); 3997 isPixel(ctx, 50,25, 0,255,0,255, 0); 3998 3999 4000 } 4001 </script> 4002 4003 <!-- [[[ test_2d.fillStyle.invalidtype.html ]]] --> 4004 4005 <p>Canvas test: 2d.fillStyle.invalidtype</p> 4006 <canvas id="c142" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4007 <script> 4008 4009 4010 function test_2d_fillStyle_invalidtype() { 4011 4012 var canvas = document.getElementById('c142'); 4013 var ctx = canvas.getContext('2d'); 4014 4015 ctx.fillStyle = '#f00'; 4016 ctx.fillRect(0, 0, 100, 50); 4017 ctx.fillStyle = '#0f0'; 4018 ctx.fillStyle = null; 4019 ctx.fillRect(0, 0, 100, 50); 4020 isPixel(ctx, 50,25, 0,255,0,255, 0); 4021 4022 4023 } 4024 </script> 4025 4026 <!-- [[[ test_2d.fillStyle.parse.current.basic.html ]]] --> 4027 4028 <p>Canvas test: 2d.fillStyle.parse.current.basic</p> 4029 <!-- Testing: currentColor is computed from the canvas element --> 4030 <canvas id="c143" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4031 <script> 4032 4033 4034 4035 function test_2d_fillStyle_parse_current_basic() { 4036 4037 var canvas = document.getElementById('c143'); 4038 var ctx = canvas.getContext('2d'); 4039 4040 canvas.setAttribute('style', 'color: #0f0'); 4041 ctx.fillStyle = '#f00'; 4042 ctx.fillStyle = 'currentColor'; 4043 ctx.fillRect(0, 0, 100, 50); 4044 isPixel(ctx, 50,25, 0,255,0,255, 0); 4045 4046 4047 } 4048 </script> 4049 4050 <!-- [[[ test_2d.fillStyle.parse.current.changed.html ]]] --> 4051 4052 <p>Canvas test: 2d.fillStyle.parse.current.changed</p> 4053 <!-- Testing: currentColor is computed when the attribute is set, not when it is painted --> 4054 <canvas id="c144" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4055 <script> 4056 4057 4058 4059 function test_2d_fillStyle_parse_current_changed() { 4060 4061 var canvas = document.getElementById('c144'); 4062 var ctx = canvas.getContext('2d'); 4063 4064 canvas.setAttribute('style', 'color: #0f0'); 4065 ctx.fillStyle = '#f00'; 4066 ctx.fillStyle = 'currentColor'; 4067 canvas.setAttribute('style', 'color: #f00'); 4068 ctx.fillRect(0, 0, 100, 50); 4069 isPixel(ctx, 50,25, 0,255,0,255, 0); 4070 4071 4072 } 4073 </script> 4074 4075 <!-- [[[ test_2d.fillStyle.parse.current.removed.html ]]] --> 4076 4077 <p>Canvas test: 2d.fillStyle.parse.current.removed</p> 4078 <!-- Testing: currentColor is solid black when the canvas element is not in a document --> 4079 <canvas id="c145" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4080 <script> 4081 4082 4083 4084 function test_2d_fillStyle_parse_current_removed() { 4085 4086 var canvas = document.getElementById('c145'); 4087 var ctx = canvas.getContext('2d'); 4088 4089 // Try not to let it undetectably incorrectly pick up opaque-black 4090 // from other parts of the document: 4091 document.body.parentNode.setAttribute('style', 'color: #f00'); 4092 document.body.setAttribute('style', 'color: #f00'); 4093 canvas.setAttribute('style', 'color: #f00'); 4094 4095 var canvas2 = document.createElement('canvas'); 4096 var ctx2 = canvas2.getContext('2d'); 4097 ctx2.fillStyle = '#f00'; 4098 ctx2.fillStyle = 'currentColor'; 4099 ctx2.fillRect(0, 0, 100, 50); 4100 ctx.drawImage(canvas2, 0, 0); 4101 4102 document.body.parentNode.removeAttribute('style'); 4103 document.body.removeAttribute('style'); 4104 4105 isPixel(ctx, 50,25, 0,0,0,255, 0); 4106 4107 4108 } 4109 </script> 4110 4111 <!-- [[[ test_2d.fillStyle.parse.hex3.html ]]] --> 4112 4113 <p>Canvas test: 2d.fillStyle.parse.hex3</p> 4114 <canvas id="c146" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4115 <script> 4116 4117 4118 function test_2d_fillStyle_parse_hex3() { 4119 4120 var canvas = document.getElementById('c146'); 4121 var ctx = canvas.getContext('2d'); 4122 4123 4124 ctx.fillStyle = '#f00'; 4125 ctx.fillStyle = '#0f0'; 4126 ctx.fillRect(0, 0, 100, 50); 4127 isPixel(ctx, 50,25, 0,255,0,255, 0); 4128 4129 4130 } 4131 </script> 4132 4133 <!-- [[[ test_2d.fillStyle.parse.hex6.html ]]] --> 4134 4135 <p>Canvas test: 2d.fillStyle.parse.hex6</p> 4136 <canvas id="c147" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4137 <script> 4138 4139 4140 function test_2d_fillStyle_parse_hex6() { 4141 4142 var canvas = document.getElementById('c147'); 4143 var ctx = canvas.getContext('2d'); 4144 4145 4146 ctx.fillStyle = '#f00'; 4147 ctx.fillStyle = '#00fF00'; 4148 ctx.fillRect(0, 0, 100, 50); 4149 isPixel(ctx, 50,25, 0,255,0,255, 0); 4150 4151 4152 } 4153 </script> 4154 4155 <!-- [[[ test_2d.fillStyle.parse.hsl-1.html ]]] --> 4156 4157 <p>Canvas test: 2d.fillStyle.parse.hsl-1</p> 4158 <canvas id="c148" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4159 <script> 4160 4161 4162 function test_2d_fillStyle_parse_hsl_1() { 4163 4164 var canvas = document.getElementById('c148'); 4165 var ctx = canvas.getContext('2d'); 4166 4167 4168 ctx.fillStyle = '#f00'; 4169 ctx.fillStyle = 'hsl(120, 100%, 50%)'; 4170 ctx.fillRect(0, 0, 100, 50); 4171 isPixel(ctx, 50,25, 0,255,0,255, 0); 4172 4173 4174 } 4175 </script> 4176 4177 <!-- [[[ test_2d.fillStyle.parse.hsl-2.html ]]] --> 4178 4179 <p>Canvas test: 2d.fillStyle.parse.hsl-2</p> 4180 <canvas id="c149" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4181 <script> 4182 4183 4184 function test_2d_fillStyle_parse_hsl_2() { 4185 4186 var canvas = document.getElementById('c149'); 4187 var ctx = canvas.getContext('2d'); 4188 4189 4190 ctx.fillStyle = '#f00'; 4191 ctx.fillStyle = 'hsl( -240 , 100% , 50% )'; 4192 ctx.fillRect(0, 0, 100, 50); 4193 isPixel(ctx, 50,25, 0,255,0,255, 0); 4194 4195 4196 } 4197 </script> 4198 4199 <!-- [[[ test_2d.fillStyle.parse.hsl-3.html ]]] --> 4200 4201 <p>Canvas test: 2d.fillStyle.parse.hsl-3</p> 4202 <canvas id="c150" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4203 <script> 4204 4205 4206 function test_2d_fillStyle_parse_hsl_3() { 4207 4208 var canvas = document.getElementById('c150'); 4209 var ctx = canvas.getContext('2d'); 4210 4211 4212 ctx.fillStyle = '#f00'; 4213 ctx.fillStyle = 'hsl(360120, 100%, 50%)'; 4214 ctx.fillRect(0, 0, 100, 50); 4215 isPixel(ctx, 50,25, 0,255,0,255, 0); 4216 4217 4218 } 4219 </script> 4220 4221 <!-- [[[ test_2d.fillStyle.parse.hsl-4.html ]]] --> 4222 4223 <p>Canvas test: 2d.fillStyle.parse.hsl-4</p> 4224 <canvas id="c151" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4225 <script> 4226 4227 4228 function test_2d_fillStyle_parse_hsl_4() { 4229 4230 var canvas = document.getElementById('c151'); 4231 var ctx = canvas.getContext('2d'); 4232 4233 4234 ctx.fillStyle = '#f00'; 4235 ctx.fillStyle = 'hsl(-360240, 100%, 50%)'; 4236 ctx.fillRect(0, 0, 100, 50); 4237 isPixel(ctx, 50,25, 0,255,0,255, 0); 4238 4239 4240 } 4241 </script> 4242 4243 <!-- [[[ test_2d.fillStyle.parse.hsl-5.html ]]] --> 4244 4245 <p>Canvas test: 2d.fillStyle.parse.hsl-5</p> 4246 <canvas id="c152" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4247 <script> 4248 4249 4250 function test_2d_fillStyle_parse_hsl_5() { 4251 4252 var canvas = document.getElementById('c152'); 4253 var ctx = canvas.getContext('2d'); 4254 4255 4256 ctx.fillStyle = '#f00'; 4257 ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%)'; 4258 ctx.fillRect(0, 0, 100, 50); 4259 isPixel(ctx, 50,25, 0,255,0,255, 0); 4260 4261 4262 } 4263 </script> 4264 4265 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-1.html ]]] --> 4266 4267 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-1</p> 4268 <canvas id="c153" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4269 <script> 4270 4271 4272 function test_2d_fillStyle_parse_hsl_clamp_1() { 4273 4274 var canvas = document.getElementById('c153'); 4275 var ctx = canvas.getContext('2d'); 4276 4277 4278 ctx.fillStyle = '#f00'; 4279 ctx.fillStyle = 'hsl(120, 200%, 50%)'; 4280 ctx.fillRect(0, 0, 100, 50); 4281 isPixel(ctx, 50,25, 0,255,0,255, 0); 4282 4283 4284 } 4285 </script> 4286 4287 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-2.html ]]] --> 4288 4289 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-2</p> 4290 <canvas id="c154" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4291 <script> 4292 4293 4294 function test_2d_fillStyle_parse_hsl_clamp_2() { 4295 4296 var canvas = document.getElementById('c154'); 4297 var ctx = canvas.getContext('2d'); 4298 4299 4300 ctx.fillStyle = '#f00'; 4301 ctx.fillStyle = 'hsl(120, -200%, 49.9%)'; 4302 ctx.fillRect(0, 0, 100, 50); 4303 isPixel(ctx, 50,25, 127,127,127,255, 0); 4304 4305 4306 } 4307 </script> 4308 4309 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-3.html ]]] --> 4310 4311 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-3</p> 4312 <canvas id="c155" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4313 <script> 4314 4315 4316 function test_2d_fillStyle_parse_hsl_clamp_3() { 4317 4318 var canvas = document.getElementById('c155'); 4319 var ctx = canvas.getContext('2d'); 4320 4321 4322 ctx.fillStyle = '#f00'; 4323 ctx.fillStyle = 'hsl(120, 100%, 200%)'; 4324 ctx.fillRect(0, 0, 100, 50); 4325 isPixel(ctx, 50,25, 255,255,255,255, 0); 4326 4327 4328 } 4329 </script> 4330 4331 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-4.html ]]] --> 4332 4333 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-4</p> 4334 <canvas id="c156" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4335 <script> 4336 4337 4338 function test_2d_fillStyle_parse_hsl_clamp_4() { 4339 4340 var canvas = document.getElementById('c156'); 4341 var ctx = canvas.getContext('2d'); 4342 4343 4344 ctx.fillStyle = '#f00'; 4345 ctx.fillStyle = 'hsl(120, 100%, -200%)'; 4346 ctx.fillRect(0, 0, 100, 50); 4347 isPixel(ctx, 50,25, 0,0,0,255, 0); 4348 4349 4350 } 4351 </script> 4352 4353 <!-- [[[ test_2d.fillStyle.parse.hsla-1.html ]]] --> 4354 4355 <p>Canvas test: 2d.fillStyle.parse.hsla-1</p> 4356 <canvas id="c157" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4357 <script> 4358 4359 4360 function test_2d_fillStyle_parse_hsla_1() { 4361 4362 var canvas = document.getElementById('c157'); 4363 var ctx = canvas.getContext('2d'); 4364 4365 4366 ctx.fillStyle = '#f00'; 4367 ctx.fillStyle = 'hsla(120, 100%, 50%, 0.499)'; 4368 ctx.fillRect(0, 0, 100, 50); 4369 isPixel(ctx, 50,25, 0,255,0,127, 0); 4370 4371 4372 } 4373 </script> 4374 4375 <!-- [[[ test_2d.fillStyle.parse.hsla-2.html ]]] --> 4376 4377 <p>Canvas test: 2d.fillStyle.parse.hsla-2</p> 4378 <canvas id="c158" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4379 <script> 4380 4381 4382 function test_2d_fillStyle_parse_hsla_2() { 4383 4384 var canvas = document.getElementById('c158'); 4385 var ctx = canvas.getContext('2d'); 4386 4387 4388 ctx.fillStyle = '#f00'; 4389 ctx.fillStyle = 'hsla( 120.0 , 100.0% , 50.0% , 1 )'; 4390 ctx.fillRect(0, 0, 100, 50); 4391 isPixel(ctx, 50,25, 0,255,0,255, 0); 4392 4393 4394 } 4395 </script> 4396 4397 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-1.html ]]] --> 4398 4399 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-1</p> 4400 <canvas id="c159" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4401 <script> 4402 4403 4404 function test_2d_fillStyle_parse_hsla_clamp_1() { 4405 4406 var canvas = document.getElementById('c159'); 4407 var ctx = canvas.getContext('2d'); 4408 4409 4410 ctx.fillStyle = '#f00'; 4411 ctx.fillStyle = 'hsla(120, 200%, 50%, 1)'; 4412 ctx.fillRect(0, 0, 100, 50); 4413 isPixel(ctx, 50,25, 0,255,0,255, 0); 4414 4415 4416 } 4417 </script> 4418 4419 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-2.html ]]] --> 4420 4421 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-2</p> 4422 <canvas id="c160" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4423 <script> 4424 4425 4426 function test_2d_fillStyle_parse_hsla_clamp_2() { 4427 4428 var canvas = document.getElementById('c160'); 4429 var ctx = canvas.getContext('2d'); 4430 4431 4432 ctx.fillStyle = '#f00'; 4433 ctx.fillStyle = 'hsla(120, -200%, 49.9%, 1)'; 4434 ctx.fillRect(0, 0, 100, 50); 4435 isPixel(ctx, 50,25, 127,127,127,255, 0); 4436 4437 4438 } 4439 </script> 4440 4441 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-3.html ]]] --> 4442 4443 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-3</p> 4444 <canvas id="c161" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4445 <script> 4446 4447 4448 function test_2d_fillStyle_parse_hsla_clamp_3() { 4449 4450 var canvas = document.getElementById('c161'); 4451 var ctx = canvas.getContext('2d'); 4452 4453 4454 ctx.fillStyle = '#f00'; 4455 ctx.fillStyle = 'hsla(120, 100%, 200%, 1)'; 4456 ctx.fillRect(0, 0, 100, 50); 4457 isPixel(ctx, 50,25, 255,255,255,255, 0); 4458 4459 4460 } 4461 </script> 4462 4463 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-4.html ]]] --> 4464 4465 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-4</p> 4466 <canvas id="c162" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4467 <script> 4468 4469 4470 function test_2d_fillStyle_parse_hsla_clamp_4() { 4471 4472 var canvas = document.getElementById('c162'); 4473 var ctx = canvas.getContext('2d'); 4474 4475 4476 ctx.fillStyle = '#f00'; 4477 ctx.fillStyle = 'hsla(120, 100%, -200%, 1)'; 4478 ctx.fillRect(0, 0, 100, 50); 4479 isPixel(ctx, 50,25, 0,0,0,255, 0); 4480 4481 4482 } 4483 </script> 4484 4485 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-5.html ]]] --> 4486 4487 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-5</p> 4488 <canvas id="c163" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4489 <script> 4490 4491 4492 function test_2d_fillStyle_parse_hsla_clamp_5() { 4493 4494 var canvas = document.getElementById('c163'); 4495 var ctx = canvas.getContext('2d'); 4496 4497 4498 ctx.fillStyle = '#f00'; 4499 ctx.fillStyle = 'hsla(120, 100%, 50%, 2)'; 4500 ctx.fillRect(0, 0, 100, 50); 4501 isPixel(ctx, 50,25, 0,255,0,255, 0); 4502 4503 4504 } 4505 </script> 4506 4507 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-6.html ]]] --> 4508 4509 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-6</p> 4510 <canvas id="c164" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4511 <script> 4512 4513 4514 function test_2d_fillStyle_parse_hsla_clamp_6() { 4515 4516 var canvas = document.getElementById('c164'); 4517 var ctx = canvas.getContext('2d'); 4518 4519 4520 ctx.fillStyle = '#f00'; 4521 ctx.fillStyle = 'hsla(120, 100%, 0%, -2)'; 4522 ctx.fillRect(0, 0, 100, 50); 4523 isPixel(ctx, 50,25, 0,0,0,0, 0); 4524 4525 4526 } 4527 </script> 4528 4529 <!-- [[[ test_2d.fillStyle.parse.html4.html ]]] --> 4530 4531 <p>Canvas test: 2d.fillStyle.parse.html4</p> 4532 <canvas id="c165" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4533 <script> 4534 4535 4536 function test_2d_fillStyle_parse_html4() { 4537 4538 var canvas = document.getElementById('c165'); 4539 var ctx = canvas.getContext('2d'); 4540 4541 4542 ctx.fillStyle = '#f00'; 4543 ctx.fillStyle = 'limE'; 4544 ctx.fillRect(0, 0, 100, 50); 4545 isPixel(ctx, 50,25, 0,255,0,255, 0); 4546 4547 4548 } 4549 </script> 4550 4551 <!-- [[[ test_2d.fillStyle.parse.invalid.hex3.html ]]] --> 4552 4553 <p>Canvas test: 2d.fillStyle.parse.invalid.hex3</p> 4554 <canvas id="c166" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4555 <script> 4556 4557 4558 function test_2d_fillStyle_parse_invalid_hex3() { 4559 4560 var canvas = document.getElementById('c166'); 4561 var ctx = canvas.getContext('2d'); 4562 4563 4564 ctx.fillStyle = '#0f0'; 4565 try { ctx.fillStyle = '#g00'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4566 ctx.fillRect(0, 0, 100, 50); 4567 isPixel(ctx, 50,25, 0,255,0,255, 0); 4568 4569 4570 } 4571 </script> 4572 4573 <!-- [[[ test_2d.fillStyle.parse.invalid.hex6.html ]]] --> 4574 4575 <p>Canvas test: 2d.fillStyle.parse.invalid.hex6</p> 4576 <canvas id="c167" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4577 <script> 4578 4579 4580 function test_2d_fillStyle_parse_invalid_hex6() { 4581 4582 var canvas = document.getElementById('c167'); 4583 var ctx = canvas.getContext('2d'); 4584 4585 4586 ctx.fillStyle = '#0f0'; 4587 try { ctx.fillStyle = '#fg0000'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4588 ctx.fillRect(0, 0, 100, 50); 4589 isPixel(ctx, 50,25, 0,255,0,255, 0); 4590 4591 4592 } 4593 </script> 4594 4595 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-1.html ]]] --> 4596 4597 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-1</p> 4598 <canvas id="c168" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4599 <script> 4600 4601 4602 function test_2d_fillStyle_parse_invalid_hsl_1() { 4603 4604 var canvas = document.getElementById('c168'); 4605 var ctx = canvas.getContext('2d'); 4606 4607 4608 ctx.fillStyle = '#0f0'; 4609 try { ctx.fillStyle = 'hsl(0%, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4610 ctx.fillRect(0, 0, 100, 50); 4611 isPixel(ctx, 50,25, 0,255,0,255, 0); 4612 4613 4614 } 4615 </script> 4616 4617 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-2.html ]]] --> 4618 4619 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-2</p> 4620 <canvas id="c169" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4621 <script> 4622 4623 4624 function test_2d_fillStyle_parse_invalid_hsl_2() { 4625 4626 var canvas = document.getElementById('c169'); 4627 var ctx = canvas.getContext('2d'); 4628 4629 4630 ctx.fillStyle = '#0f0'; 4631 try { ctx.fillStyle = 'hsl(z, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4632 ctx.fillRect(0, 0, 100, 50); 4633 isPixel(ctx, 50,25, 0,255,0,255, 0); 4634 4635 4636 } 4637 </script> 4638 4639 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-3.html ]]] --> 4640 4641 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-3</p> 4642 <canvas id="c170" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4643 <script> 4644 4645 4646 function test_2d_fillStyle_parse_invalid_hsl_3() { 4647 4648 var canvas = document.getElementById('c170'); 4649 var ctx = canvas.getContext('2d'); 4650 4651 4652 ctx.fillStyle = '#0f0'; 4653 try { ctx.fillStyle = 'hsl(0, 0, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4654 ctx.fillRect(0, 0, 100, 50); 4655 isPixel(ctx, 50,25, 0,255,0,255, 0); 4656 4657 4658 } 4659 </script> 4660 4661 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-4.html ]]] --> 4662 4663 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-4</p> 4664 <canvas id="c171" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4665 <script> 4666 4667 4668 function test_2d_fillStyle_parse_invalid_hsl_4() { 4669 4670 var canvas = document.getElementById('c171'); 4671 var ctx = canvas.getContext('2d'); 4672 4673 4674 ctx.fillStyle = '#0f0'; 4675 try { ctx.fillStyle = 'hsl(0, 100%, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4676 ctx.fillRect(0, 0, 100, 50); 4677 isPixel(ctx, 50,25, 0,255,0,255, 0); 4678 4679 4680 } 4681 </script> 4682 4683 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-5.html ]]] --> 4684 4685 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-5</p> 4686 <canvas id="c172" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4687 <script> 4688 4689 4690 function test_2d_fillStyle_parse_invalid_hsl_5() { 4691 4692 var canvas = document.getElementById('c172'); 4693 var ctx = canvas.getContext('2d'); 4694 4695 4696 ctx.fillStyle = '#0f0'; 4697 try { ctx.fillStyle = 'hsl(0, 100%, 100%,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4698 ctx.fillRect(0, 0, 100, 50); 4699 isPixel(ctx, 50,25, 0,255,0,255, 0); 4700 4701 4702 } 4703 </script> 4704 4705 <!-- [[[ test_2d.fillStyle.parse.invalid.hsla-1.html ]]] --> 4706 4707 <p>Canvas test: 2d.fillStyle.parse.invalid.hsla-1</p> 4708 <canvas id="c173" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4709 <script> 4710 4711 4712 function test_2d_fillStyle_parse_invalid_hsla_1() { 4713 4714 var canvas = document.getElementById('c173'); 4715 var ctx = canvas.getContext('2d'); 4716 4717 4718 ctx.fillStyle = '#0f0'; 4719 try { ctx.fillStyle = 'hsla(0%, 100%, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4720 ctx.fillRect(0, 0, 100, 50); 4721 isPixel(ctx, 50,25, 0,255,0,255, 0); 4722 4723 4724 } 4725 </script> 4726 4727 <!-- [[[ test_2d.fillStyle.parse.invalid.hsla-2.html ]]] --> 4728 4729 <p>Canvas test: 2d.fillStyle.parse.invalid.hsla-2</p> 4730 <canvas id="c174" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4731 <script> 4732 4733 4734 function test_2d_fillStyle_parse_invalid_hsla_2() { 4735 4736 var canvas = document.getElementById('c174'); 4737 var ctx = canvas.getContext('2d'); 4738 4739 4740 ctx.fillStyle = '#0f0'; 4741 try { ctx.fillStyle = 'hsla(0, 0, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4742 ctx.fillRect(0, 0, 100, 50); 4743 isPixel(ctx, 50,25, 0,255,0,255, 0); 4744 4745 4746 } 4747 </script> 4748 4749 <!-- [[[ test_2d.fillStyle.parse.invalid.name-1.html ]]] --> 4750 4751 <p>Canvas test: 2d.fillStyle.parse.invalid.name-1</p> 4752 <canvas id="c174a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4753 <script> 4754 4755 4756 function test_2d_fillStyle_parse_invalid_name_1() { 4757 4758 var canvas = document.getElementById('c174a'); 4759 var ctx = canvas.getContext('2d'); 4760 4761 ctx.fillStyle = '#0f0'; 4762 try { ctx.fillStyle = 'darkbrown'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4763 ctx.fillRect(0, 0, 100, 50); 4764 isPixel(ctx, 50,25, 0,255,0,255, 0); 4765 4766 4767 } 4768 </script> 4769 4770 <!-- [[[ test_2d.fillStyle.parse.invalid.name-2.html ]]] --> 4771 4772 <p>Canvas test: 2d.fillStyle.parse.invalid.name-2</p> 4773 <canvas id="c174b" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4774 <script> 4775 4776 4777 function test_2d_fillStyle_parse_invalid_name_2() { 4778 4779 var canvas = document.getElementById('c174b'); 4780 var ctx = canvas.getContext('2d'); 4781 4782 ctx.fillStyle = '#0f0'; 4783 try { ctx.fillStyle = 'firebrick1'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4784 ctx.fillRect(0, 0, 100, 50); 4785 isPixel(ctx, 50,25, 0,255,0,255, 0); 4786 4787 4788 } 4789 </script> 4790 4791 <!-- [[[ test_2d.fillStyle.parse.invalid.name-3.html ]]] --> 4792 4793 <p>Canvas test: 2d.fillStyle.parse.invalid.name-3</p> 4794 <canvas id="c174c" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4795 <script> 4796 4797 4798 function test_2d_fillStyle_parse_invalid_name_3() { 4799 4800 var canvas = document.getElementById('c174c'); 4801 var ctx = canvas.getContext('2d'); 4802 4803 ctx.fillStyle = '#0f0'; 4804 try { ctx.fillStyle = 'red blue'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4805 ctx.fillRect(0, 0, 100, 50); 4806 isPixel(ctx, 50,25, 0,255,0,255, 0); 4807 4808 4809 } 4810 </script> 4811 4812 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-1.html ]]] --> 4813 4814 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-1</p> 4815 <canvas id="c175" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4816 <script> 4817 4818 4819 function test_2d_fillStyle_parse_invalid_rgb_1() { 4820 4821 var canvas = document.getElementById('c175'); 4822 var ctx = canvas.getContext('2d'); 4823 4824 4825 ctx.fillStyle = '#0f0'; 4826 try { ctx.fillStyle = 'rgb(255.0, 0%, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4827 ctx.fillRect(0, 0, 100, 50); 4828 isPixel(ctx, 50,25, 0,255,0,255, 0); 4829 4830 4831 } 4832 </script> 4833 4834 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-2.html ]]] --> 4835 4836 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-2</p> 4837 <canvas id="c176" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4838 <script> 4839 4840 4841 function test_2d_fillStyle_parse_invalid_rgb_2() { 4842 4843 var canvas = document.getElementById('c176'); 4844 var ctx = canvas.getContext('2d'); 4845 4846 4847 ctx.fillStyle = '#0f0'; 4848 try { ctx.fillStyle = 'rgb(255%, 0.0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4849 ctx.fillRect(0, 0, 100, 50); 4850 isPixel(ctx, 50,25, 0,255,0,255, 0); 4851 4852 4853 } 4854 </script> 4855 4856 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-3.html ]]] --> 4857 4858 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-3</p> 4859 <canvas id="c177" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4860 <script> 4861 4862 4863 function test_2d_fillStyle_parse_invalid_rgb_3() { 4864 4865 var canvas = document.getElementById('c177'); 4866 var ctx = canvas.getContext('2d'); 4867 4868 4869 ctx.fillStyle = '#0f0'; 4870 try { ctx.fillStyle = 'rgb(255.0, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4871 ctx.fillRect(0, 0, 100, 50); 4872 isPixel(ctx, 50,25, 0,255,0,255, 0); 4873 4874 4875 } 4876 </script> 4877 4878 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-4.html ]]] --> 4879 4880 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-4</p> 4881 <canvas id="c178" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4882 <script> 4883 4884 4885 function test_2d_fillStyle_parse_invalid_rgb_4() { 4886 4887 var canvas = document.getElementById('c178'); 4888 var ctx = canvas.getContext('2d'); 4889 4890 4891 ctx.fillStyle = '#0f0'; 4892 try { ctx.fillStyle = 'rgb(100%, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4893 ctx.fillRect(0, 0, 100, 50); 4894 isPixel(ctx, 50,25, 0,255,0,255, 0); 4895 4896 4897 } 4898 </script> 4899 4900 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-5.html ]]] --> 4901 4902 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-5</p> 4903 <canvas id="c179" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4904 <script> 4905 4906 4907 function test_2d_fillStyle_parse_invalid_rgb_5() { 4908 4909 var canvas = document.getElementById('c179'); 4910 var ctx = canvas.getContext('2d'); 4911 4912 4913 ctx.fillStyle = '#0f0'; 4914 try { ctx.fillStyle = 'rgb(255, 0 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4915 ctx.fillRect(0, 0, 100, 50); 4916 isPixel(ctx, 50,25, 0,255,0,255, 0); 4917 4918 4919 } 4920 </script> 4921 4922 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-6.html ]]] --> 4923 4924 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-6</p> 4925 <canvas id="c180" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4926 <script> 4927 4928 4929 function test_2d_fillStyle_parse_invalid_rgb_6() { 4930 4931 var canvas = document.getElementById('c180'); 4932 var ctx = canvas.getContext('2d'); 4933 4934 4935 ctx.fillStyle = '#0f0'; 4936 try { ctx.fillStyle = 'rgb(255, - 1, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4937 ctx.fillRect(0, 0, 100, 50); 4938 isPixel(ctx, 50,25, 0,255,0,255, 0); 4939 4940 4941 } 4942 </script> 4943 4944 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-7.html ]]] --> 4945 4946 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-7</p> 4947 <canvas id="c181" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4948 <script> 4949 4950 4951 function test_2d_fillStyle_parse_invalid_rgb_7() { 4952 4953 var canvas = document.getElementById('c181'); 4954 var ctx = canvas.getContext('2d'); 4955 4956 4957 ctx.fillStyle = '#0f0'; 4958 try { ctx.fillStyle = 'rgb(255, 0, 0, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4959 ctx.fillRect(0, 0, 100, 50); 4960 isPixel(ctx, 50,25, 0,255,0,255, 0); 4961 4962 4963 } 4964 </script> 4965 4966 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-1.html ]]] --> 4967 4968 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-1</p> 4969 <canvas id="c182" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4970 <script> 4971 4972 4973 function test_2d_fillStyle_parse_invalid_rgba_1() { 4974 4975 var canvas = document.getElementById('c182'); 4976 var ctx = canvas.getContext('2d'); 4977 4978 4979 ctx.fillStyle = '#0f0'; 4980 try { ctx.fillStyle = 'rgba(255, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 4981 ctx.fillRect(0, 0, 100, 50); 4982 isPixel(ctx, 50,25, 0,255,0,255, 0); 4983 4984 4985 } 4986 </script> 4987 4988 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-2.html ]]] --> 4989 4990 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-2</p> 4991 <canvas id="c183" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 4992 <script> 4993 4994 4995 function test_2d_fillStyle_parse_invalid_rgba_2() { 4996 4997 var canvas = document.getElementById('c183'); 4998 var ctx = canvas.getContext('2d'); 4999 5000 5001 ctx.fillStyle = '#0f0'; 5002 try { ctx.fillStyle = 'rgba(255.0, 0, 0, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 5003 ctx.fillRect(0, 0, 100, 50); 5004 isPixel(ctx, 50,25, 0,255,0,255, 0); 5005 5006 5007 } 5008 </script> 5009 5010 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-3.html ]]] --> 5011 5012 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-3</p> 5013 <canvas id="c184" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5014 <script> 5015 5016 5017 function test_2d_fillStyle_parse_invalid_rgba_3() { 5018 5019 var canvas = document.getElementById('c184'); 5020 var ctx = canvas.getContext('2d'); 5021 5022 5023 ctx.fillStyle = '#0f0'; 5024 try { ctx.fillStyle = 'rgba(100%, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 5025 ctx.fillRect(0, 0, 100, 50); 5026 isPixel(ctx, 50,25, 0,255,0,255, 0); 5027 5028 5029 } 5030 </script> 5031 5032 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-4.html ]]] --> 5033 5034 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-4</p> 5035 <canvas id="c185" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5036 <script> 5037 5038 5039 function test_2d_fillStyle_parse_invalid_rgba_4() { 5040 5041 var canvas = document.getElementById('c185'); 5042 var ctx = canvas.getContext('2d'); 5043 5044 5045 ctx.fillStyle = '#0f0'; 5046 try { ctx.fillStyle = 'rgba(255, 0, 0, 100.%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 5047 ctx.fillRect(0, 0, 100, 50); 5048 isPixel(ctx, 50,25, 0,255,0,255, 0); 5049 5050 5051 } 5052 </script> 5053 5054 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-5.html ]]] --> 5055 5056 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-5</p> 5057 <canvas id="c186" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5058 <script> 5059 5060 5061 function test_2d_fillStyle_parse_invalid_rgba_5() { 5062 5063 var canvas = document.getElementById('c186'); 5064 var ctx = canvas.getContext('2d'); 5065 5066 5067 ctx.fillStyle = '#0f0'; 5068 try { ctx.fillStyle = 'rgba(255, 0, 0, 1. 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does 5069 ctx.fillRect(0, 0, 100, 50); 5070 isPixel(ctx, 50,25, 0,255,0,255, 0); 5071 5072 5073 } 5074 </script> 5075 5076 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-1.html ]]] --> 5077 5078 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-1</p> 5079 <canvas id="c187" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5080 <script> 5081 5082 5083 function test_2d_fillStyle_parse_rgb_clamp_1() { 5084 5085 var canvas = document.getElementById('c187'); 5086 var ctx = canvas.getContext('2d'); 5087 5088 5089 ctx.fillStyle = '#f00'; 5090 ctx.fillStyle = 'rgb(-1000, 1000, -1000)'; 5091 ctx.fillRect(0, 0, 100, 50); 5092 isPixel(ctx, 50,25, 0,255,0,255, 0); 5093 5094 5095 } 5096 </script> 5097 5098 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-2.html ]]] --> 5099 5100 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-2</p> 5101 <canvas id="c188" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5102 <script> 5103 5104 5105 function test_2d_fillStyle_parse_rgb_clamp_2() { 5106 5107 var canvas = document.getElementById('c188'); 5108 var ctx = canvas.getContext('2d'); 5109 5110 5111 ctx.fillStyle = '#f00'; 5112 ctx.fillStyle = 'rgb(-200%, 200%, -200%)'; 5113 ctx.fillRect(0, 0, 100, 50); 5114 isPixel(ctx, 50,25, 0,255,0,255, 0); 5115 5116 5117 } 5118 </script> 5119 5120 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-3.html ]]] --> 5121 5122 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-3</p> 5123 <canvas id="c189" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5124 <script> 5125 5126 5127 function test_2d_fillStyle_parse_rgb_clamp_3() { 5128 5129 var canvas = document.getElementById('c189'); 5130 var ctx = canvas.getContext('2d'); 5131 5132 5133 ctx.fillStyle = '#f00'; 5134 ctx.fillStyle = 'rgb(-2147483649, 4294967298, -18446744073709551619)'; 5135 ctx.fillRect(0, 0, 100, 50); 5136 isPixel(ctx, 50,25, 0,255,0,255, 0); 5137 5138 5139 } 5140 </script> 5141 5142 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-4.html ]]] --> 5143 5144 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-4</p> 5145 <canvas id="c190" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5146 <script> 5147 5148 5149 function test_2d_fillStyle_parse_rgb_clamp_4() { 5150 5151 var canvas = document.getElementById('c190'); 5152 var ctx = canvas.getContext('2d'); 5153 5154 5155 ctx.fillStyle = '#f00'; 5156 ctx.fillStyle = 'rgb(-1000000000000000000000000000000000000000, 1000000000000000000000000000000000000000, -1000000000000000000000000000000000000000)'; 5157 ctx.fillRect(0, 0, 100, 50); 5158 isPixel(ctx, 50,25, 0,255,0,255, 0); 5159 5160 5161 } 5162 </script> 5163 5164 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-5.html ]]] --> 5165 5166 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-5</p> 5167 <canvas id="c191" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5168 <script> 5169 5170 5171 function test_2d_fillStyle_parse_rgb_clamp_5() { 5172 5173 var canvas = document.getElementById('c191'); 5174 var ctx = canvas.getContext('2d'); 5175 5176 5177 ctx.fillStyle = '#f00'; 5178 ctx.fillStyle = 'rgb(-10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, -10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000)'; 5179 ctx.fillRect(0, 0, 100, 50); 5180 isPixel(ctx, 50,25, 0,255,0,255, 0); 5181 5182 5183 } 5184 </script> 5185 5186 <!-- [[[ test_2d.fillStyle.parse.rgb-num.html ]]] --> 5187 5188 <p>Canvas test: 2d.fillStyle.parse.rgb-num</p> 5189 <canvas id="c192" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5190 <script> 5191 5192 5193 function test_2d_fillStyle_parse_rgb_num() { 5194 5195 var canvas = document.getElementById('c192'); 5196 var ctx = canvas.getContext('2d'); 5197 5198 5199 ctx.fillStyle = '#f00'; 5200 ctx.fillStyle = 'rgb(0,255,0)'; 5201 ctx.fillRect(0, 0, 100, 50); 5202 isPixel(ctx, 50,25, 0,255,0,255, 0); 5203 5204 5205 } 5206 </script> 5207 5208 <!-- [[[ test_2d.fillStyle.parse.rgb-percent.html ]]] --> 5209 5210 <p>Canvas test: 2d.fillStyle.parse.rgb-percent</p> 5211 <canvas id="c193" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5212 <script> 5213 5214 5215 function test_2d_fillStyle_parse_rgb_percent() { 5216 5217 var canvas = document.getElementById('c193'); 5218 var ctx = canvas.getContext('2d'); 5219 5220 5221 ctx.fillStyle = '#f00'; 5222 ctx.fillStyle = 'rgb(0% ,100% ,0%)'; 5223 ctx.fillRect(0, 0, 100, 50); 5224 isPixel(ctx, 50,25, 0,255,0,255, 0); 5225 5226 5227 } 5228 </script> 5229 5230 <!-- [[[ test_2d.fillStyle.parse.rgba-clamp-1.html ]]] --> 5231 5232 <p>Canvas test: 2d.fillStyle.parse.rgba-clamp-1</p> 5233 <canvas id="c194" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5234 <script> 5235 5236 5237 function test_2d_fillStyle_parse_rgba_clamp_1() { 5238 5239 var canvas = document.getElementById('c194'); 5240 var ctx = canvas.getContext('2d'); 5241 5242 5243 ctx.fillStyle = '#f00'; 5244 ctx.fillStyle = 'rgba(0, 255, 0, -2)'; 5245 ctx.fillRect(0, 0, 100, 50); 5246 isPixel(ctx, 50,25, 0,0,0,0, 0); 5247 5248 5249 } 5250 </script> 5251 5252 <!-- [[[ test_2d.fillStyle.parse.rgba-clamp-2.html ]]] --> 5253 5254 <p>Canvas test: 2d.fillStyle.parse.rgba-clamp-2</p> 5255 <canvas id="c195" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5256 <script> 5257 5258 5259 function test_2d_fillStyle_parse_rgba_clamp_2() { 5260 5261 var canvas = document.getElementById('c195'); 5262 var ctx = canvas.getContext('2d'); 5263 5264 5265 ctx.fillStyle = '#f00'; 5266 ctx.fillStyle = 'rgba(0, 255, 0, 2)'; 5267 ctx.fillRect(0, 0, 100, 50); 5268 isPixel(ctx, 50,25, 0,255,0,255, 0); 5269 5270 5271 } 5272 </script> 5273 5274 <!-- [[[ test_2d.fillStyle.parse.rgba-num-1.html ]]] --> 5275 5276 <p>Canvas test: 2d.fillStyle.parse.rgba-num-1</p> 5277 <canvas id="c196" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5278 <script> 5279 5280 5281 function test_2d_fillStyle_parse_rgba_num_1() { 5282 5283 var canvas = document.getElementById('c196'); 5284 var ctx = canvas.getContext('2d'); 5285 5286 5287 ctx.fillStyle = '#f00'; 5288 ctx.fillStyle = 'rgba( 0 , 255 , 0 , .499 )'; 5289 ctx.fillRect(0, 0, 100, 50); 5290 isPixel(ctx, 50,25, 0,255,0,127, 0); 5291 5292 5293 } 5294 </script> 5295 5296 <!-- [[[ test_2d.fillStyle.parse.rgba-num-2.html ]]] --> 5297 5298 <p>Canvas test: 2d.fillStyle.parse.rgba-num-2</p> 5299 <canvas id="c197" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5300 <script> 5301 5302 5303 function test_2d_fillStyle_parse_rgba_num_2() { 5304 5305 var canvas = document.getElementById('c197'); 5306 var ctx = canvas.getContext('2d'); 5307 5308 5309 ctx.fillStyle = '#f00'; 5310 ctx.fillStyle = 'rgba( 0 , 255 , 0 , 0.499 )'; 5311 ctx.fillRect(0, 0, 100, 50); 5312 isPixel(ctx, 50,25, 0,255,0,127, 0); 5313 5314 5315 } 5316 </script> 5317 5318 <!-- [[[ test_2d.fillStyle.parse.rgba-percent.html ]]] --> 5319 5320 <p>Canvas test: 2d.fillStyle.parse.rgba-percent</p> 5321 <canvas id="c198" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5322 <script> 5323 5324 5325 function test_2d_fillStyle_parse_rgba_percent() { 5326 5327 var canvas = document.getElementById('c198'); 5328 var ctx = canvas.getContext('2d'); 5329 5330 5331 ctx.fillStyle = '#f00'; 5332 ctx.fillStyle = 'rgba(0%,100%,0%,0.499)'; 5333 ctx.fillRect(0, 0, 100, 50); 5334 isPixel(ctx, 50,25, 0,255,0,127, 0); 5335 5336 5337 } 5338 </script> 5339 5340 <!-- [[[ test_2d.fillStyle.parse.rgba-solid-1.html ]]] --> 5341 5342 <p>Canvas test: 2d.fillStyle.parse.rgba-solid-1</p> 5343 <canvas id="c199" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5344 <script> 5345 5346 5347 function test_2d_fillStyle_parse_rgba_solid_1() { 5348 5349 var canvas = document.getElementById('c199'); 5350 var ctx = canvas.getContext('2d'); 5351 5352 5353 ctx.fillStyle = '#f00'; 5354 ctx.fillStyle = 'rgba( 0 , 255 , 0 , 1 )'; 5355 ctx.fillRect(0, 0, 100, 50); 5356 isPixel(ctx, 50,25, 0,255,0,255, 0); 5357 5358 5359 } 5360 </script> 5361 5362 <!-- [[[ test_2d.fillStyle.parse.rgba-solid-2.html ]]] --> 5363 5364 <p>Canvas test: 2d.fillStyle.parse.rgba-solid-2</p> 5365 <canvas id="c200" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5366 <script> 5367 5368 5369 function test_2d_fillStyle_parse_rgba_solid_2() { 5370 5371 var canvas = document.getElementById('c200'); 5372 var ctx = canvas.getContext('2d'); 5373 5374 5375 ctx.fillStyle = '#f00'; 5376 ctx.fillStyle = 'rgba( 0 , 255 , 0 , 1.0 )'; 5377 ctx.fillRect(0, 0, 100, 50); 5378 isPixel(ctx, 50,25, 0,255,0,255, 0); 5379 5380 5381 } 5382 </script> 5383 5384 <!-- [[[ test_2d.fillStyle.parse.svg-1.html ]]] --> 5385 5386 <p>Canvas test: 2d.fillStyle.parse.svg-1</p> 5387 <canvas id="c201" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5388 <script> 5389 5390 5391 function test_2d_fillStyle_parse_svg_1() { 5392 5393 var canvas = document.getElementById('c201'); 5394 var ctx = canvas.getContext('2d'); 5395 5396 5397 ctx.fillStyle = '#f00'; 5398 ctx.fillStyle = 'gray'; 5399 ctx.fillRect(0, 0, 100, 50); 5400 isPixel(ctx, 50,25, 128,128,128,255, 0); 5401 5402 5403 } 5404 </script> 5405 5406 <!-- [[[ test_2d.fillStyle.parse.svg-2.html ]]] --> 5407 5408 <p>Canvas test: 2d.fillStyle.parse.svg-2</p> 5409 <canvas id="c202" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5410 <script> 5411 5412 5413 function test_2d_fillStyle_parse_svg_2() { 5414 5415 var canvas = document.getElementById('c202'); 5416 var ctx = canvas.getContext('2d'); 5417 5418 5419 ctx.fillStyle = '#f00'; 5420 ctx.fillStyle = 'grey'; 5421 ctx.fillRect(0, 0, 100, 50); 5422 isPixel(ctx, 50,25, 128,128,128,255, 0); 5423 5424 5425 } 5426 </script> 5427 5428 <!-- [[[ test_2d.fillStyle.parse.system.html ]]] --> 5429 5430 <p>Canvas test: 2d.fillStyle.parse.system</p> 5431 <canvas id="c203" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5432 <script> 5433 5434 function test_2d_fillStyle_parse_system() { 5435 5436 var canvas = document.getElementById('c203'); 5437 var ctx = canvas.getContext('2d'); 5438 5439 5440 ctx.fillStyle = '#f00'; 5441 ctx.fillStyle = 'ThreeDDarkShadow'; 5442 ok(/^#(?!(FF0000|ff0000|f00)$)/.test(ctx.fillStyle), "ctx.fillStyle =~ /^#(?!(FF0000|ff0000|f00)$)/"); // test that it's not red 5443 5444 5445 } 5446 </script> 5447 5448 <!-- [[[ test_2d.fillStyle.parse.transparent-1.html ]]] --> 5449 5450 <p>Canvas test: 2d.fillStyle.parse.transparent-1</p> 5451 <canvas id="c204" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5452 <script> 5453 5454 5455 function test_2d_fillStyle_parse_transparent_1() { 5456 5457 var canvas = document.getElementById('c204'); 5458 var ctx = canvas.getContext('2d'); 5459 5460 5461 ctx.fillStyle = '#f00'; 5462 ctx.fillStyle = 'transparent'; 5463 ctx.fillRect(0, 0, 100, 50); 5464 isPixel(ctx, 50,25, 0,0,0,0, 0); 5465 5466 5467 } 5468 </script> 5469 5470 <!-- [[[ test_2d.fillStyle.parse.transparent-2.html ]]] --> 5471 5472 <p>Canvas test: 2d.fillStyle.parse.transparent-2</p> 5473 <canvas id="c205" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5474 <script> 5475 5476 5477 function test_2d_fillStyle_parse_transparent_2() { 5478 5479 var canvas = document.getElementById('c205'); 5480 var ctx = canvas.getContext('2d'); 5481 5482 5483 ctx.fillStyle = '#f00'; 5484 ctx.fillStyle = 'TrAnSpArEnT'; 5485 ctx.fillRect(0, 0, 100, 50); 5486 isPixel(ctx, 50,25, 0,0,0,0, 0); 5487 5488 5489 } 5490 </script> 5491 5492 <!-- [[[ test_2d.getcontext.exists.html ]]] --> 5493 5494 <p>Canvas test: 2d.getcontext.exists</p> 5495 <!-- Testing: The 2D context is implemented --> 5496 <canvas id="c206" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5497 <script> 5498 5499 function test_2d_getcontext_exists() { 5500 5501 var canvas = document.getElementById('c206'); 5502 var ctx = canvas.getContext('2d'); 5503 5504 ok(canvas.getContext('2d') !== null, "canvas.getContext('2d') !== null"); 5505 5506 5507 } 5508 </script> 5509 5510 <!-- [[[ test_2d.getcontext.shared.html ]]] --> 5511 5512 <p>Canvas test: 2d.getcontext.shared</p> 5513 <!-- Testing: getContext('2d') returns objects which share canvas state --> 5514 <canvas id="c207" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5515 <script> 5516 5517 5518 function test_2d_getcontext_shared() { 5519 5520 var canvas = document.getElementById('c207'); 5521 var ctx = canvas.getContext('2d'); 5522 5523 var ctx2 = canvas.getContext('2d'); 5524 ctx.fillStyle = '#f00'; 5525 ctx2.fillStyle = '#0f0'; 5526 ctx.fillRect(0, 0, 100, 50); 5527 isPixel(ctx, 50,25, 0,255,0,255, 0); 5528 5529 5530 } 5531 </script> 5532 5533 <!-- [[[ test_2d.getcontext.unique.html ]]] --> 5534 5535 <p>Canvas test: 2d.getcontext.unique</p> 5536 <!-- Testing: getContext('2d') returns the same object --> 5537 <canvas id="c208" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5538 <script> 5539 5540 function test_2d_getcontext_unique() { 5541 5542 var canvas = document.getElementById('c208'); 5543 var ctx = canvas.getContext('2d'); 5544 5545 // eslint-disable-next-line no-self-compare 5546 ok(canvas.getContext('2d') === canvas.getContext('2d'), "canvas.getContext('2d') === canvas.getContext('2d')"); 5547 5548 5549 } 5550 </script> 5551 5552 <!-- [[[ test_2d.gradient.empty.html ]]] --> 5553 5554 <p>Canvas test: 2d.gradient.empty</p> 5555 <canvas id="c209" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5556 <script> 5557 5558 5559 function test_2d_gradient_empty() { 5560 5561 var canvas = document.getElementById('c209'); 5562 var ctx = canvas.getContext('2d'); 5563 5564 ctx.fillStyle = '#0f0'; 5565 ctx.fillRect(0, 0, 100, 50); 5566 var g = ctx.createLinearGradient(0, 0, 0, 50); 5567 ctx.fillStyle = g; 5568 ctx.fillRect(0, 0, 100, 50); 5569 isPixel(ctx, 50,25, 0,255,0,255, 2); 5570 5571 5572 } 5573 </script> 5574 5575 <!-- [[[ test_2d.gradient.interpolate.alpha.html ]]] --> 5576 5577 <p>Canvas test: 2d.gradient.interpolate.alpha</p> 5578 <canvas id="c210" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5579 <script> 5580 5581 5582 function test_2d_gradient_interpolate_alpha() { 5583 5584 var canvas = document.getElementById('c210'); 5585 var ctx = canvas.getContext('2d'); 5586 5587 ctx.fillStyle = '#ff0'; 5588 ctx.fillRect(0, 0, 100, 50); 5589 var g = ctx.createLinearGradient(0, 0, 100, 0); 5590 g.addColorStop(0, 'rgba(0,0,255, 0)'); 5591 g.addColorStop(1, 'rgba(0,0,255, 1)'); 5592 ctx.fillStyle = g; 5593 ctx.fillRect(0, 0, 100, 50); 5594 isPixel(ctx, 25,25, 191,191,63,255, 3); 5595 isPixel(ctx, 50,25, 127,127,127,255, 3); 5596 isPixel(ctx, 75,25, 63,63,191,255, 3); 5597 5598 5599 } 5600 </script> 5601 5602 <!-- [[[ test_2d.gradient.interpolate.colour.html ]]] --> 5603 5604 <p>Canvas test: 2d.gradient.interpolate.colour</p> 5605 <canvas id="c211" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5606 <script> 5607 5608 5609 function test_2d_gradient_interpolate_colour() { 5610 5611 var canvas = document.getElementById('c211'); 5612 var ctx = canvas.getContext('2d'); 5613 5614 var g = ctx.createLinearGradient(0, 0, 100, 0); 5615 g.addColorStop(0, '#ff0'); 5616 g.addColorStop(1, '#00f'); 5617 ctx.fillStyle = g; 5618 ctx.fillRect(0, 0, 100, 50); 5619 isPixel(ctx, 25,25, 191,191,63,255, 3); 5620 isPixel(ctx, 50,25, 127,127,127,255, 3); 5621 isPixel(ctx, 75,25, 63,63,191,255, 3); 5622 5623 5624 } 5625 </script> 5626 5627 <!-- [[[ test_2d.gradient.interpolate.colouralpha.html ]]] --> 5628 5629 <p>Canvas test: 2d.gradient.interpolate.colouralpha</p> 5630 <canvas id="c212" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5631 <script> 5632 5633 5634 function test_2d_gradient_interpolate_colouralpha() { 5635 5636 var canvas = document.getElementById('c212'); 5637 var ctx = canvas.getContext('2d'); 5638 5639 var g = ctx.createLinearGradient(0, 0, 100, 0); 5640 g.addColorStop(0, 'rgba(255,255,0, 0)'); 5641 g.addColorStop(1, 'rgba(0,0,255, 1)'); 5642 ctx.fillStyle = g; 5643 ctx.fillRect(0, 0, 100, 50); 5644 // Following tests fail on Windows hardware (datacenter and local laptops), see bug 1657707 5645 if (!IsWindows()) isPixel(ctx, 25,25, 191,191,63,63, 3); 5646 if (!IsWindows()) isPixel(ctx, 50,25, 127,127,127,127, 3); 5647 if (!IsWindows()) isPixel(ctx, 75,25, 63,63,191,191, 3); 5648 5649 5650 } 5651 </script> 5652 5653 <!-- [[[ test_2d.gradient.interpolate.multiple.html ]]] --> 5654 5655 <p>Canvas test: 2d.gradient.interpolate.multiple</p> 5656 <canvas id="c213" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5657 <script> 5658 5659 5660 function test_2d_gradient_interpolate_multiple() { 5661 5662 var canvas = document.getElementById('c213'); 5663 var ctx = canvas.getContext('2d'); 5664 5665 canvas.width = 200; 5666 var g = ctx.createLinearGradient(0, 0, 200, 0); 5667 g.addColorStop(0, '#ff0'); 5668 g.addColorStop(0.5, '#0ff'); 5669 g.addColorStop(1, '#f0f'); 5670 ctx.fillStyle = g; 5671 ctx.fillRect(0, 0, 200, 50); 5672 isPixel(ctx, 50,25, 127,255,127,255, 3); 5673 isPixel(ctx, 100,25, 0,255,255,255, 3); 5674 isPixel(ctx, 150,25, 127,127,255,255, 3); 5675 5676 5677 } 5678 </script> 5679 5680 <!-- [[[ test_2d.gradient.interpolate.outside.html ]]] --> 5681 5682 <p>Canvas test: 2d.gradient.interpolate.outside</p> 5683 <canvas id="c214" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5684 <script> 5685 5686 5687 function test_2d_gradient_interpolate_outside() { 5688 5689 var canvas = document.getElementById('c214'); 5690 var ctx = canvas.getContext('2d'); 5691 5692 ctx.fillStyle = '#f00'; 5693 ctx.fillRect(0, 0, 100, 50); 5694 5695 var g = ctx.createLinearGradient(25, 0, 75, 0); 5696 g.addColorStop(0.4, '#0f0'); 5697 g.addColorStop(0.6, '#0f0'); 5698 5699 ctx.fillStyle = g; 5700 ctx.fillRect(0, 0, 100, 50); 5701 isPixel(ctx, 20,25, 0,255,0,255, 2); 5702 isPixel(ctx, 50,25, 0,255,0,255, 2); 5703 isPixel(ctx, 80,25, 0,255,0,255, 2); 5704 5705 5706 } 5707 </script> 5708 5709 <!-- [[[ test_2d.gradient.interpolate.overlap.html ]]] --> 5710 5711 <p>Canvas test: 2d.gradient.interpolate.overlap</p> 5712 <canvas id="c215" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5713 <script> 5714 5715 5716 function test_2d_gradient_interpolate_overlap() { 5717 5718 var canvas = document.getElementById('c215'); 5719 var ctx = canvas.getContext('2d'); 5720 5721 // On OS X 10.5 quartz is confused by the overlapping stops: Bug #715235 5722 canvas.width = 200; 5723 var g = ctx.createLinearGradient(0, 0, 200, 0); 5724 g.addColorStop(0, '#f00'); 5725 g.addColorStop(0, '#ff0'); 5726 g.addColorStop(0.25, '#00f'); 5727 g.addColorStop(0.25, '#0f0'); 5728 g.addColorStop(0.25, '#0f0'); 5729 g.addColorStop(0.25, '#0f0'); 5730 g.addColorStop(0.25, '#ff0'); 5731 g.addColorStop(0.5, '#00f'); 5732 g.addColorStop(0.5, '#0f0'); 5733 g.addColorStop(0.75, '#00f'); 5734 g.addColorStop(0.75, '#f00'); 5735 g.addColorStop(0.75, '#ff0'); 5736 g.addColorStop(0.5, '#0f0'); 5737 g.addColorStop(0.5, '#0f0'); 5738 g.addColorStop(0.5, '#ff0'); 5739 g.addColorStop(1, '#00f'); 5740 ctx.fillStyle = g; 5741 ctx.fillRect(0, 0, 200, 50); 5742 isPixel(ctx, 49,25, 0,0,255,255, 16); 5743 isPixel(ctx, 51,25, 255,255,0,255, 16); 5744 isPixel(ctx, 99,25, 0,0,255,255, 16); 5745 isPixel(ctx, 101,25, 255,255,0,255, 16); 5746 isPixel(ctx, 149,25, 0,0,255,255, 16); 5747 isPixel(ctx, 151,25, 255,255,0,255, 16); 5748 } 5749 </script> 5750 5751 <!-- [[[ test_2d.gradient.interpolate.overlap2.html ]]] --> 5752 5753 <p>Canvas test: 2d.gradient.interpolate.overlap2</p> 5754 <canvas id="c216" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5755 <script> 5756 5757 5758 function test_2d_gradient_interpolate_overlap2() { 5759 5760 var canvas = document.getElementById('c216'); 5761 var ctx = canvas.getContext('2d'); 5762 5763 var g = ctx.createLinearGradient(0, 0, 100, 0); 5764 var ps = [ 0, 1/10, 1/4, 1/3, 1/2, 3/4, 1 ]; 5765 for (var p = 0; p < ps.length; ++p) 5766 { 5767 g.addColorStop(ps[p], '#0f0'); 5768 for (var i = 0; i < 15; ++i) 5769 g.addColorStop(ps[p], '#f00'); 5770 g.addColorStop(ps[p], '#0f0'); 5771 } 5772 ctx.fillStyle = g; 5773 ctx.fillRect(0, 0, 100, 50); 5774 5775 isPixel(ctx, 1,25, 0,255,0,255, 0); 5776 isPixel(ctx, 30,25, 0,255,0,255, 0); 5777 isPixel(ctx, 40,25, 0,255,0,255, 0); 5778 isPixel(ctx, 60,25, 0,255,0,255, 0); 5779 isPixel(ctx, 80,25, 0,255,0,255, 0); 5780 5781 } 5782 </script> 5783 5784 <!-- [[[ test_2d.gradient.interpolate.solid.html ]]] --> 5785 5786 <p>Canvas test: 2d.gradient.interpolate.solid</p> 5787 <canvas id="c217" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5788 <script> 5789 5790 5791 function test_2d_gradient_interpolate_solid() { 5792 5793 var canvas = document.getElementById('c217'); 5794 var ctx = canvas.getContext('2d'); 5795 5796 var g = ctx.createLinearGradient(0, 0, 100, 0); 5797 g.addColorStop(0, '#0f0'); 5798 g.addColorStop(1, '#0f0'); 5799 ctx.fillStyle = g; 5800 ctx.fillRect(0, 0, 100, 50); 5801 isPixel(ctx, 50,25, 0,255,0,255, 0); 5802 5803 5804 } 5805 </script> 5806 5807 <!-- [[[ test_2d.gradient.interpolate.vertical.html ]]] --> 5808 5809 <p>Canvas test: 2d.gradient.interpolate.vertical</p> 5810 <canvas id="c218" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5811 <script> 5812 5813 5814 function test_2d_gradient_interpolate_vertical() { 5815 5816 var canvas = document.getElementById('c218'); 5817 var ctx = canvas.getContext('2d'); 5818 5819 var g = ctx.createLinearGradient(0, 0, 0, 50); 5820 g.addColorStop(0, '#ff0'); 5821 g.addColorStop(1, '#00f'); 5822 ctx.fillStyle = g; 5823 ctx.fillRect(0, 0, 100, 50); 5824 isPixel(ctx, 50,12, 191,191,63,255, 10); 5825 isPixel(ctx, 50,25, 127,127,127,255, 5); 5826 isPixel(ctx, 50,37, 63,63,191,255, 10); 5827 5828 5829 } 5830 </script> 5831 5832 <!-- [[[ test_2d.gradient.interpolate.zerosize.html ]]] --> 5833 5834 <p>Canvas test: 2d.gradient.interpolate.zerosize</p> 5835 <canvas id="c219" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5836 <script> 5837 5838 5839 5840 function test_2d_gradient_interpolate_zerosize() { 5841 5842 var canvas = document.getElementById('c219'); 5843 var ctx = canvas.getContext('2d'); 5844 5845 ctx.fillStyle = '#0f0'; 5846 ctx.fillRect(0, 0, 100, 50); 5847 5848 var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction) 5849 g.addColorStop(0, '#f00'); 5850 g.addColorStop(1, '#f00'); 5851 ctx.fillStyle = g; 5852 ctx.fillRect(0, 0, 100, 50); 5853 5854 isPixel(ctx, 40,20, 0,255,0,255, 2); 5855 5856 } 5857 </script> 5858 5859 <!-- [[[ test_2d.gradient.linear.nonfinite.html ]]] --> 5860 5861 <p>Canvas test: 2d.gradient.linear.nonfinite</p> 5862 <!-- Testing: createLinearGradient() throws NOT_SUPPORTED_ERR if arguments are not finite --> 5863 <canvas id="c220" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5864 <script> 5865 5866 // eslint-disable-next-line complexity 5867 function test_2d_gradient_linear_nonfinite() { 5868 5869 var canvas = document.getElementById('c220'); 5870 var ctx = canvas.getContext('2d'); 5871 5872 var _thrown = undefined; try { 5873 ctx.createLinearGradient(Infinity, 0, 1, 0); 5874 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5875 var _thrown = undefined; try { 5876 ctx.createLinearGradient(-Infinity, 0, 1, 0); 5877 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5878 var _thrown = undefined; try { 5879 ctx.createLinearGradient(NaN, 0, 1, 0); 5880 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5881 var _thrown = undefined; try { 5882 ctx.createLinearGradient(0, Infinity, 1, 0); 5883 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5884 var _thrown = undefined; try { 5885 ctx.createLinearGradient(0, -Infinity, 1, 0); 5886 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5887 var _thrown = undefined; try { 5888 ctx.createLinearGradient(0, NaN, 1, 0); 5889 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5890 var _thrown = undefined; try { 5891 ctx.createLinearGradient(0, 0, Infinity, 0); 5892 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5893 var _thrown = undefined; try { 5894 ctx.createLinearGradient(0, 0, -Infinity, 0); 5895 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5896 var _thrown = undefined; try { 5897 ctx.createLinearGradient(0, 0, NaN, 0); 5898 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5899 var _thrown = undefined; try { 5900 ctx.createLinearGradient(0, 0, 1, Infinity); 5901 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5902 var _thrown = undefined; try { 5903 ctx.createLinearGradient(0, 0, 1, -Infinity); 5904 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5905 var _thrown = undefined; try { 5906 ctx.createLinearGradient(0, 0, 1, NaN); 5907 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5908 var _thrown = undefined; try { 5909 ctx.createLinearGradient(Infinity, Infinity, 1, 0); 5910 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5911 var _thrown = undefined; try { 5912 ctx.createLinearGradient(Infinity, Infinity, Infinity, 0); 5913 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5914 var _thrown = undefined; try { 5915 ctx.createLinearGradient(Infinity, Infinity, Infinity, Infinity); 5916 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5917 var _thrown = undefined; try { 5918 ctx.createLinearGradient(Infinity, Infinity, 1, Infinity); 5919 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5920 var _thrown = undefined; try { 5921 ctx.createLinearGradient(Infinity, 0, Infinity, 0); 5922 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5923 var _thrown = undefined; try { 5924 ctx.createLinearGradient(Infinity, 0, Infinity, Infinity); 5925 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5926 var _thrown = undefined; try { 5927 ctx.createLinearGradient(Infinity, 0, 1, Infinity); 5928 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5929 var _thrown = undefined; try { 5930 ctx.createLinearGradient(0, Infinity, Infinity, 0); 5931 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5932 var _thrown = undefined; try { 5933 ctx.createLinearGradient(0, Infinity, Infinity, Infinity); 5934 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5935 var _thrown = undefined; try { 5936 ctx.createLinearGradient(0, Infinity, 1, Infinity); 5937 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5938 var _thrown = undefined; try { 5939 ctx.createLinearGradient(0, 0, Infinity, Infinity); 5940 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 5941 5942 5943 } 5944 </script> 5945 5946 <!-- [[[ test_2d.gradient.linear.transform.1.html ]]] --> 5947 5948 <p>Canvas test: 2d.gradient.linear.transform.1</p> 5949 <!-- Testing: Linear gradient coordinates are relative to the coordinate space at the time of filling --> 5950 <canvas id="c221" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5951 <script> 5952 5953 5954 function test_2d_gradient_linear_transform_1() { 5955 5956 var canvas = document.getElementById('c221'); 5957 var ctx = canvas.getContext('2d'); 5958 5959 var g = ctx.createLinearGradient(0, 0, 200, 0); 5960 g.addColorStop(0, '#f00'); 5961 g.addColorStop(0.25, '#0f0'); 5962 g.addColorStop(0.75, '#0f0'); 5963 g.addColorStop(1, '#f00'); 5964 ctx.fillStyle = g; 5965 ctx.translate(-50, 0); 5966 ctx.fillRect(50, 0, 100, 50); 5967 isPixel(ctx, 25,25, 0,255,0,255, 0); 5968 isPixel(ctx, 50,25, 0,255,0,255, 0); 5969 isPixel(ctx, 75,25, 0,255,0,255, 0); 5970 5971 5972 } 5973 </script> 5974 5975 <!-- [[[ test_2d.gradient.linear.transform.2.html ]]] --> 5976 5977 <p>Canvas test: 2d.gradient.linear.transform.2</p> 5978 <!-- Testing: Linear gradient coordinates are relative to the coordinate space at the time of filling --> 5979 <canvas id="c222" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 5980 <script> 5981 5982 5983 function test_2d_gradient_linear_transform_2() { 5984 5985 var canvas = document.getElementById('c222'); 5986 var ctx = canvas.getContext('2d'); 5987 5988 ctx.translate(100, 0); 5989 var g = ctx.createLinearGradient(0, 0, 200, 0); 5990 g.addColorStop(0, '#f00'); 5991 g.addColorStop(0.25, '#0f0'); 5992 g.addColorStop(0.75, '#0f0'); 5993 g.addColorStop(1, '#f00'); 5994 ctx.fillStyle = g; 5995 ctx.translate(-150, 0); 5996 ctx.fillRect(50, 0, 100, 50); 5997 isPixel(ctx, 25,25, 0,255,0,255, 0); 5998 isPixel(ctx, 50,25, 0,255,0,255, 0); 5999 isPixel(ctx, 75,25, 0,255,0,255, 0); 6000 6001 6002 } 6003 </script> 6004 6005 <!-- [[[ test_2d.gradient.linear.transform.3.html ]]] --> 6006 6007 <p>Canvas test: 2d.gradient.linear.transform.3</p> 6008 <!-- Testing: Linear gradient transforms do not experience broken caching effects --> 6009 <canvas id="c223" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6010 <script> 6011 6012 6013 6014 function test_2d_gradient_linear_transform_3() { 6015 6016 var canvas = document.getElementById('c223'); 6017 var ctx = canvas.getContext('2d'); 6018 6019 var g = ctx.createLinearGradient(0, 0, 200, 0); 6020 g.addColorStop(0, '#f00'); 6021 g.addColorStop(0.25, '#0f0'); 6022 g.addColorStop(0.75, '#0f0'); 6023 g.addColorStop(1, '#f00'); 6024 ctx.fillStyle = g; 6025 ctx.fillRect(0, 0, 100, 50); 6026 ctx.translate(-50, 0); 6027 ctx.fillRect(50, 0, 100, 50); 6028 6029 isPixel(ctx, 25,25, 0,255,0,255, 0); 6030 isPixel(ctx, 50,25, 0,255,0,255, 0); 6031 isPixel(ctx, 75,25, 0,255,0,255, 0); 6032 } 6033 </script> 6034 6035 <!-- [[[ test_2d.gradient.object.compare.html ]]] --> 6036 6037 <p>Canvas test: 2d.gradient.object.compare</p> 6038 <canvas id="c224" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6039 <script> 6040 6041 function test_2d_gradient_object_compare() { 6042 6043 var canvas = document.getElementById('c224'); 6044 var ctx = canvas.getContext('2d'); 6045 6046 var g1 = ctx.createLinearGradient(0, 0, 100, 0); 6047 var g2 = ctx.createLinearGradient(0, 0, 100, 0); 6048 ok(g1 !== g2, "g1 !== g2"); 6049 ctx.fillStyle = g1; 6050 ok(ctx.fillStyle === g1, "ctx.fillStyle === g1"); 6051 6052 6053 } 6054 </script> 6055 6056 <!-- [[[ test_2d.gradient.object.crosscanvas.html ]]] --> 6057 6058 <p>Canvas test: 2d.gradient.object.crosscanvas</p> 6059 <canvas id="c225" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6060 <script> 6061 6062 6063 function test_2d_gradient_object_crosscanvas() { 6064 6065 var canvas = document.getElementById('c225'); 6066 var ctx = canvas.getContext('2d'); 6067 6068 ctx.fillStyle = '#f00'; 6069 ctx.fillRect(0, 0, 100, 50); 6070 var g = document.createElement('canvas').getContext('2d').createLinearGradient(0, 0, 100, 0); 6071 g.addColorStop(0, '#0f0'); 6072 g.addColorStop(1, '#0f0'); 6073 ctx.fillStyle = g; 6074 ctx.fillRect(0, 0, 100, 50); 6075 isPixel(ctx, 50,25, 0,255,0,255, 2); 6076 6077 6078 } 6079 </script> 6080 6081 <!-- [[[ test_2d.gradient.object.invalidcolour.html ]]] --> 6082 6083 <p>Canvas test: 2d.gradient.object.invalidcolour</p> 6084 <canvas id="c226" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6085 <script> 6086 6087 function test_2d_gradient_object_invalidcolour() { 6088 6089 var canvas = document.getElementById('c226'); 6090 var ctx = canvas.getContext('2d'); 6091 6092 var g = ctx.createLinearGradient(0, 0, 100, 0); 6093 var _thrown = undefined; try { 6094 g.addColorStop(0, ""); 6095 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError"); 6096 var _thrown = undefined; try { 6097 g.addColorStop(0, 'undefined'); 6098 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError"); 6099 6100 6101 } 6102 </script> 6103 6104 <!-- [[[ test_2d.gradient.object.invalidoffset.html ]]] --> 6105 6106 <p>Canvas test: 2d.gradient.object.invalidoffset</p> 6107 <canvas id="c227" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6108 <script> 6109 6110 function test_2d_gradient_object_invalidoffset() { 6111 6112 var canvas = document.getElementById('c227'); 6113 var ctx = canvas.getContext('2d'); 6114 6115 var g = ctx.createLinearGradient(0, 0, 100, 0); 6116 var _thrown = undefined; try { 6117 g.addColorStop(-1, '#000'); 6118 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 6119 var _thrown = undefined; try { 6120 g.addColorStop(2, '#000'); 6121 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 6122 var _thrown = undefined; try { 6123 g.addColorStop(Infinity, '#000'); 6124 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 6125 var _thrown = undefined; try { 6126 g.addColorStop(-Infinity, '#000'); 6127 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 6128 var _thrown = undefined; try { 6129 g.addColorStop(NaN, '#000'); 6130 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 6131 6132 6133 } 6134 </script> 6135 6136 <!-- [[[ test_2d.gradient.object.return.html ]]] --> 6137 6138 <p>Canvas test: 2d.gradient.object.return</p> 6139 <!-- Testing: createLinearGradient() and createRadialGradient() returns objects implementing CanvasGradient --> 6140 <canvas id="c228" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6141 <script> 6142 6143 function test_2d_gradient_object_return() { 6144 6145 var canvas = document.getElementById('c228'); 6146 var ctx = canvas.getContext('2d'); 6147 6148 window.CanvasGradient.prototype.thisImplementsCanvasGradient = true; 6149 6150 var g1 = ctx.createLinearGradient(0, 0, 100, 0); 6151 ok(g1.addColorStop !== undefined, "g1.addColorStop !== undefined"); 6152 ok(g1.thisImplementsCanvasGradient === true, "g1.thisImplementsCanvasGradient === true"); 6153 6154 var g2 = ctx.createRadialGradient(0, 0, 10, 0, 0, 20); 6155 ok(g2.addColorStop !== undefined, "g2.addColorStop !== undefined"); 6156 ok(g2.thisImplementsCanvasGradient === true, "g2.thisImplementsCanvasGradient === true"); 6157 6158 6159 } 6160 </script> 6161 6162 <!-- [[[ test_2d.gradient.object.type.html ]]] --> 6163 6164 <p>Canvas test: 2d.gradient.object.type</p> 6165 <!-- Testing: window.CanvasGradient exists and has the right properties --> 6166 <canvas id="c229" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6167 <script> 6168 6169 function test_2d_gradient_object_type() { 6170 6171 var canvas = document.getElementById('c229'); 6172 var ctx = canvas.getContext('2d'); 6173 6174 ok(window.CanvasGradient !== undefined, "window.CanvasGradient !== undefined"); 6175 ok(window.CanvasGradient.prototype.addColorStop !== undefined, "window.CanvasGradient.prototype.addColorStop !== undefined"); 6176 6177 6178 } 6179 </script> 6180 6181 <!-- [[[ test_2d.gradient.object.update.html ]]] --> 6182 6183 <p>Canvas test: 2d.gradient.object.update</p> 6184 <canvas id="c230" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6185 <script> 6186 6187 6188 function test_2d_gradient_object_update() { 6189 6190 var canvas = document.getElementById('c230'); 6191 var ctx = canvas.getContext('2d'); 6192 6193 var g = ctx.createLinearGradient(-100, 0, 200, 0); 6194 g.addColorStop(0, '#f00'); 6195 g.addColorStop(1, '#f00'); 6196 ctx.fillStyle = g; 6197 g.addColorStop(0.1, '#0f0'); 6198 g.addColorStop(0.9, '#0f0'); 6199 ctx.fillRect(0, 0, 100, 50); 6200 isPixel(ctx, 50,25, 0,255,0,255, 2); 6201 6202 6203 } 6204 </script> 6205 6206 <!-- [[[ test_2d.gradient.radial.cone.behind.html ]]] --> 6207 6208 <p>Canvas test: 2d.gradient.radial.cone.behind</p> 6209 <canvas id="c231" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6210 <script> 6211 6212 6213 6214 function test_2d_gradient_radial_cone_behind() { 6215 6216 var canvas = document.getElementById('c231'); 6217 var ctx = canvas.getContext('2d'); 6218 6219 ctx.fillStyle = '#0f0'; 6220 ctx.fillRect(0, 0, 100, 50); 6221 6222 var g = ctx.createRadialGradient(120, 25, 10, 211, 25, 100); 6223 g.addColorStop(0, '#f00'); 6224 g.addColorStop(1, '#f00'); 6225 ctx.fillStyle = g; 6226 ctx.fillRect(0, 0, 100, 50); 6227 6228 isPixel(ctx, 1,1, 0,255,0,255, 0); 6229 isPixel(ctx, 50,1, 0,255,0,255, 0); 6230 isPixel(ctx, 98,1, 0,255,0,255, 0); 6231 isPixel(ctx, 1,25, 0,255,0,255, 0); 6232 isPixel(ctx, 50,25, 0,255,0,255, 0); 6233 isPixel(ctx, 98,25, 0,255,0,255, 0); 6234 isPixel(ctx, 1,48, 0,255,0,255, 0); 6235 isPixel(ctx, 50,48, 0,255,0,255, 0); 6236 isPixel(ctx, 98,48, 0,255,0,255, 0); 6237 6238 6239 } 6240 </script> 6241 6242 <!-- [[[ test_2d.gradient.radial.cone.beside.html ]]] --> 6243 6244 <p>Canvas test: 2d.gradient.radial.cone.beside</p> 6245 <canvas id="c232" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6246 <script> 6247 6248 6249 6250 function test_2d_gradient_radial_cone_beside() { 6251 6252 var canvas = document.getElementById('c232'); 6253 var ctx = canvas.getContext('2d'); 6254 6255 ctx.fillStyle = '#0f0'; 6256 ctx.fillRect(0, 0, 100, 50); 6257 6258 var g = ctx.createRadialGradient(0, 100, 40, 100, 100, 50); 6259 g.addColorStop(0, '#f00'); 6260 g.addColorStop(1, '#f00'); 6261 ctx.fillStyle = g; 6262 ctx.fillRect(0, 0, 100, 50); 6263 6264 isPixel(ctx, 1,1, 0,255,0,255, 0); 6265 isPixel(ctx, 50,1, 0,255,0,255, 0); 6266 isPixel(ctx, 98,1, 0,255,0,255, 0); 6267 isPixel(ctx, 1,25, 0,255,0,255, 0); 6268 isPixel(ctx, 50,25, 0,255,0,255, 0); 6269 isPixel(ctx, 98,25, 0,255,0,255, 0); 6270 isPixel(ctx, 1,48, 0,255,0,255, 0); 6271 isPixel(ctx, 50,48, 0,255,0,255, 0); 6272 isPixel(ctx, 98,48, 0,255,0,255, 0); 6273 6274 6275 } 6276 </script> 6277 6278 <!-- [[[ test_2d.gradient.radial.cone.bottom.html ]]] --> 6279 6280 <p>Canvas test: 2d.gradient.radial.cone.bottom</p> 6281 <canvas id="c233" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6282 <script> 6283 6284 6285 function test_2d_gradient_radial_cone_bottom() { 6286 6287 var canvas = document.getElementById('c233'); 6288 var ctx = canvas.getContext('2d'); 6289 6290 ctx.fillStyle = '#f00'; 6291 ctx.fillRect(0, 0, 100, 50); 6292 6293 var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 101); 6294 g.addColorStop(0, '#0f0'); 6295 g.addColorStop(1, '#f00'); 6296 ctx.fillStyle = g; 6297 ctx.fillRect(0, 0, 100, 50); 6298 6299 isPixel(ctx, 1,1, 0,255,0,255, 0); 6300 isPixel(ctx, 50,1, 0,255,0,255, 0); 6301 isPixel(ctx, 98,1, 0,255,0,255, 0); 6302 isPixel(ctx, 1,25, 0,255,0,255, 0); 6303 isPixel(ctx, 50,25, 0,255,0,255, 0); 6304 isPixel(ctx, 98,25, 0,255,0,255, 0); 6305 isPixel(ctx, 1,48, 0,255,0,255, 0); 6306 isPixel(ctx, 50,48, 0,255,0,255, 0); 6307 isPixel(ctx, 98,48, 0,255,0,255, 0); 6308 6309 6310 } 6311 </script> 6312 6313 <!-- [[[ test_2d.gradient.radial.cone.cylinder.html ]]] --> 6314 6315 <p>Canvas test: 2d.gradient.radial.cone.cylinder</p> 6316 <canvas id="c234" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6317 <script> 6318 6319 6320 function test_2d_gradient_radial_cone_cylinder() { 6321 6322 var canvas = document.getElementById('c234'); 6323 var ctx = canvas.getContext('2d'); 6324 6325 ctx.fillStyle = '#f00'; 6326 ctx.fillRect(0, 0, 100, 50); 6327 6328 var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 100); 6329 g.addColorStop(0, '#0f0'); 6330 g.addColorStop(1, '#f00'); 6331 ctx.fillStyle = g; 6332 ctx.fillRect(0, 0, 100, 50); 6333 6334 isPixel(ctx, 1, 1, 0, 255, 0, 255, 0); 6335 isPixel(ctx, 50, 1, 0, 255, 0, 255, 0); 6336 isPixel(ctx, 98, 1, 0, 255, 0, 255, 0); 6337 isPixel(ctx, 1, 25, 0, 255, 0, 255, 0); 6338 isPixel(ctx, 50, 25, 0, 255, 0, 255, 0); 6339 isPixel(ctx, 98, 25, 0, 255, 0, 255, 0); 6340 isPixel(ctx, 1, 48, 0, 255, 0, 255, 0); 6341 isPixel(ctx, 50, 48, 0, 255, 0, 255, 0); 6342 isPixel(ctx, 98, 48, 0, 255, 0, 255, 0); 6343 6344 } 6345 </script> 6346 6347 <!-- [[[ test_2d.gradient.radial.cone.front.html ]]] --> 6348 6349 <p>Canvas test: 2d.gradient.radial.cone.front</p> 6350 <canvas id="c235" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6351 <script> 6352 6353 6354 function test_2d_gradient_radial_cone_front() { 6355 6356 var canvas = document.getElementById('c235'); 6357 var ctx = canvas.getContext('2d'); 6358 6359 ctx.fillStyle = '#f00'; 6360 ctx.fillRect(0, 0, 100, 50); 6361 6362 var g = ctx.createRadialGradient(311, 25, 10, 210, 25, 100); 6363 g.addColorStop(0, '#f00'); 6364 g.addColorStop(1, '#0f0'); 6365 ctx.fillStyle = g; 6366 ctx.fillRect(0, 0, 100, 50); 6367 6368 isPixel(ctx, 1,1, 0,255,0,255, 0); 6369 isPixel(ctx, 50,1, 0,255,0,255, 0); 6370 isPixel(ctx, 98,1, 0,255,0,255, 0); 6371 isPixel(ctx, 1,25, 0,255,0,255, 0); 6372 isPixel(ctx, 50,25, 0,255,0,255, 0); 6373 isPixel(ctx, 98,25, 0,255,0,255, 0); 6374 isPixel(ctx, 1,48, 0,255,0,255, 0); 6375 isPixel(ctx, 50,48, 0,255,0,255, 0); 6376 isPixel(ctx, 98,48, 0,255,0,255, 0); 6377 6378 6379 } 6380 </script> 6381 6382 <!-- [[[ test_2d.gradient.radial.cone.shape1.html ]]] --> 6383 6384 <p>Canvas test: 2d.gradient.radial.cone.shape1</p> 6385 <canvas id="c236" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6386 <script> 6387 6388 6389 function test_2d_gradient_radial_cone_shape1() { 6390 6391 var canvas = document.getElementById('c236'); 6392 var ctx = canvas.getContext('2d'); 6393 6394 var tol = 1; // tolerance to avoid antialiasing artifacts 6395 6396 ctx.fillStyle = '#0f0'; 6397 ctx.fillRect(0, 0, 100, 50); 6398 6399 ctx.fillStyle = '#f00'; 6400 ctx.beginPath(); 6401 ctx.moveTo(30+tol, 40); 6402 ctx.lineTo(110, -20+tol); 6403 ctx.lineTo(110, 100-tol); 6404 ctx.fill(); 6405 6406 var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4); 6407 g.addColorStop(0, '#0f0'); 6408 g.addColorStop(1, '#0f0'); 6409 ctx.fillStyle = g; 6410 ctx.fillRect(0, 0, 100, 50); 6411 6412 isPixel(ctx, 1,1, 0,255,0,255, 0); 6413 isPixel(ctx, 50,1, 0,255,0,255, 0); 6414 isPixel(ctx, 98,1, 0,255,0,255, 0); 6415 isPixel(ctx, 1,25, 0,255,0,255, 0); 6416 isPixel(ctx, 50,25, 0,255,0,255, 0); 6417 isPixel(ctx, 98,25, 0,255,0,255, 0); 6418 isPixel(ctx, 1,48, 0,255,0,255, 0); 6419 isPixel(ctx, 50,48, 0,255,0,255, 0); 6420 isPixel(ctx, 98,48, 0,255,0,255, 0); 6421 6422 6423 } 6424 </script> 6425 6426 <!-- [[[ test_2d.gradient.radial.cone.shape2.html ]]] --> 6427 6428 <p>Canvas test: 2d.gradient.radial.cone.shape2</p> 6429 <canvas id="c237" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6430 <script> 6431 6432 6433 6434 function test_2d_gradient_radial_cone_shape2() { 6435 6436 var canvas = document.getElementById('c237'); 6437 var ctx = canvas.getContext('2d'); 6438 6439 var tol = 1; // tolerance to avoid antialiasing artifacts 6440 6441 ctx.fillStyle = '#0f0'; 6442 ctx.fillRect(0, 0, 100, 50); 6443 6444 var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4); 6445 g.addColorStop(0, '#f00'); 6446 g.addColorStop(1, '#f00'); 6447 ctx.fillStyle = g; 6448 ctx.fillRect(0, 0, 100, 50); 6449 6450 ctx.fillStyle = '#0f0'; 6451 ctx.beginPath(); 6452 ctx.moveTo(30-tol, 40); 6453 ctx.lineTo(110, -20-tol); 6454 ctx.lineTo(110, 100+tol); 6455 ctx.fill(); 6456 6457 isPixel(ctx, 1,1, 0,255,0,255, 0); 6458 isPixel(ctx, 50,1, 0,255,0,255, 0); 6459 isPixel(ctx, 98,1, 0,255,0,255, 0); 6460 isPixel(ctx, 1,25, 0,255,0,255, 0); 6461 isPixel(ctx, 50,25, 0,255,0,255, 0); 6462 isPixel(ctx, 98,25, 0,255,0,255, 0); 6463 isPixel(ctx, 1,48, 0,255,0,255, 0); 6464 isPixel(ctx, 50,48, 0,255,0,255, 0); 6465 isPixel(ctx, 98,48, 0,255,0,255, 0); 6466 6467 6468 } 6469 </script> 6470 6471 <!-- [[[ test_2d.gradient.radial.cone.top.html ]]] --> 6472 6473 <p>Canvas test: 2d.gradient.radial.cone.top</p> 6474 <canvas id="c238" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6475 <script> 6476 6477 6478 function test_2d_gradient_radial_cone_top() { 6479 6480 var canvas = document.getElementById('c238'); 6481 var ctx = canvas.getContext('2d'); 6482 6483 ctx.fillStyle = '#f00'; 6484 ctx.fillRect(0, 0, 100, 50); 6485 6486 var g = ctx.createRadialGradient(230, 25, 100, 100, 25, 101); 6487 g.addColorStop(0, '#f00'); 6488 g.addColorStop(1, '#0f0'); 6489 ctx.fillStyle = g; 6490 ctx.fillRect(0, 0, 100, 50); 6491 6492 isPixel(ctx, 1, 1, 0, 255, 0, 255, 0); 6493 isPixel(ctx, 50, 1, 0, 255, 0, 255, 0); 6494 isPixel(ctx, 98, 1, 0, 255, 0, 255, 0); 6495 isPixel(ctx, 1, 25, 0, 255, 0, 255, 0); 6496 isPixel(ctx, 50, 25, 0, 255, 0, 255, 0); 6497 isPixel(ctx, 98, 25, 0, 255, 0, 255, 0); 6498 isPixel(ctx, 1, 48, 0, 255, 0, 255, 0); 6499 isPixel(ctx, 50, 48, 0, 255, 0, 255, 0); 6500 isPixel(ctx, 98, 48, 0, 255, 0, 255, 0); 6501 6502 } 6503 </script> 6504 6505 <!-- [[[ test_2d.gradient.radial.equal.html ]]] --> 6506 6507 <p>Canvas test: 2d.gradient.radial.equal</p> 6508 <canvas id="c239" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6509 <script> 6510 6511 6512 6513 function test_2d_gradient_radial_equal() { 6514 6515 var canvas = document.getElementById('c239'); 6516 var ctx = canvas.getContext('2d'); 6517 6518 ctx.fillStyle = '#0f0'; 6519 ctx.fillRect(0, 0, 100, 50); 6520 6521 var g = ctx.createRadialGradient(50, 25, 20, 50, 25, 20); 6522 g.addColorStop(0, '#f00'); 6523 g.addColorStop(1, '#f00'); 6524 ctx.fillStyle = g; 6525 ctx.fillRect(0, 0, 100, 50); 6526 6527 isPixel(ctx, 1,1, 0,255,0,255, 0); 6528 isPixel(ctx, 50,1, 0,255,0,255, 0); 6529 isPixel(ctx, 98,1, 0,255,0,255, 0); 6530 isPixel(ctx, 1,25, 0,255,0,255, 0); 6531 isPixel(ctx, 50,25, 0,255,0,255, 0); 6532 isPixel(ctx, 98,25, 0,255,0,255, 0); 6533 isPixel(ctx, 1,48, 0,255,0,255, 0); 6534 isPixel(ctx, 50,48, 0,255,0,255, 0); 6535 isPixel(ctx, 98,48, 0,255,0,255, 0); 6536 6537 6538 } 6539 </script> 6540 6541 <!-- [[[ test_2d.gradient.radial.inside1.html ]]] --> 6542 6543 <p>Canvas test: 2d.gradient.radial.inside1</p> 6544 <canvas id="c240" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6545 <script> 6546 6547 6548 function test_2d_gradient_radial_inside1() { 6549 6550 var canvas = document.getElementById('c240'); 6551 var ctx = canvas.getContext('2d'); 6552 6553 ctx.fillStyle = '#f00'; 6554 ctx.fillRect(0, 0, 100, 50); 6555 6556 var g = ctx.createRadialGradient(50, 25, 100, 50, 25, 200); 6557 g.addColorStop(0, '#0f0'); 6558 g.addColorStop(1, '#f00'); 6559 ctx.fillStyle = g; 6560 ctx.fillRect(0, 0, 100, 50); 6561 6562 isPixel(ctx, 1,1, 0,255,0,255, 0); 6563 isPixel(ctx, 50,1, 0,255,0,255, 0); 6564 isPixel(ctx, 98,1, 0,255,0,255, 0); 6565 isPixel(ctx, 1,25, 0,255,0,255, 0); 6566 isPixel(ctx, 50,25, 0,255,0,255, 0); 6567 isPixel(ctx, 98,25, 0,255,0,255, 0); 6568 isPixel(ctx, 1,48, 0,255,0,255, 0); 6569 isPixel(ctx, 50,48, 0,255,0,255, 0); 6570 isPixel(ctx, 98,48, 0,255,0,255, 0); 6571 6572 6573 } 6574 </script> 6575 6576 <!-- [[[ test_2d.gradient.radial.inside2.html ]]] --> 6577 6578 <p>Canvas test: 2d.gradient.radial.inside2</p> 6579 <canvas id="c241" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6580 <script> 6581 6582 6583 function test_2d_gradient_radial_inside2() { 6584 6585 var canvas = document.getElementById('c241'); 6586 var ctx = canvas.getContext('2d'); 6587 6588 ctx.fillStyle = '#f00'; 6589 ctx.fillRect(0, 0, 100, 50); 6590 6591 var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100); 6592 g.addColorStop(0, '#f00'); 6593 g.addColorStop(1, '#0f0'); 6594 ctx.fillStyle = g; 6595 ctx.fillRect(0, 0, 100, 50); 6596 6597 isPixel(ctx, 1,1, 0,255,0,255, 0); 6598 isPixel(ctx, 50,1, 0,255,0,255, 0); 6599 isPixel(ctx, 98,1, 0,255,0,255, 0); 6600 isPixel(ctx, 1,25, 0,255,0,255, 0); 6601 isPixel(ctx, 50,25, 0,255,0,255, 0); 6602 isPixel(ctx, 98,25, 0,255,0,255, 0); 6603 isPixel(ctx, 1,48, 0,255,0,255, 0); 6604 isPixel(ctx, 50,48, 0,255,0,255, 0); 6605 isPixel(ctx, 98,48, 0,255,0,255, 0); 6606 6607 6608 } 6609 </script> 6610 6611 <!-- [[[ test_2d.gradient.radial.inside3.html ]]] --> 6612 6613 <p>Canvas test: 2d.gradient.radial.inside3</p> 6614 <canvas id="c242" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6615 <script> 6616 6617 6618 function test_2d_gradient_radial_inside3() { 6619 6620 var canvas = document.getElementById('c242'); 6621 var ctx = canvas.getContext('2d'); 6622 6623 ctx.fillStyle = '#f00'; 6624 ctx.fillRect(0, 0, 100, 50); 6625 6626 var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100); 6627 g.addColorStop(0, '#f00'); 6628 g.addColorStop(0.993, '#f00'); 6629 g.addColorStop(1, '#0f0'); 6630 ctx.fillStyle = g; 6631 ctx.fillRect(0, 0, 100, 50); 6632 6633 isPixel(ctx, 1,1, 0,255,0,255, 0); 6634 isPixel(ctx, 50,1, 0,255,0,255, 0); 6635 isPixel(ctx, 98,1, 0,255,0,255, 0); 6636 isPixel(ctx, 1,25, 0,255,0,255, 0); 6637 isPixel(ctx, 50,25, 0,255,0,255, 0); 6638 isPixel(ctx, 98,25, 0,255,0,255, 0); 6639 isPixel(ctx, 1,48, 0,255,0,255, 0); 6640 isPixel(ctx, 50,48, 0,255,0,255, 0); 6641 isPixel(ctx, 98,48, 0,255,0,255, 0); 6642 6643 6644 } 6645 </script> 6646 6647 <!-- [[[ test_2d.gradient.radial.negative.html ]]] --> 6648 6649 <p>Canvas test: 2d.gradient.radial.negative</p> 6650 <!-- Testing: createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative --> 6651 <canvas id="c243" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6652 <script> 6653 6654 function test_2d_gradient_radial_negative() { 6655 6656 var canvas = document.getElementById('c243'); 6657 var ctx = canvas.getContext('2d'); 6658 6659 var _thrown = undefined; try { 6660 ctx.createRadialGradient(0, 0, -0.1, 0, 0, 1); 6661 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 6662 var _thrown = undefined; try { 6663 ctx.createRadialGradient(0, 0, 1, 0, 0, -0.1); 6664 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 6665 var _thrown = undefined; try { 6666 ctx.createRadialGradient(0, 0, -0.1, 0, 0, -0.1); 6667 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 6668 6669 6670 } 6671 </script> 6672 6673 <!-- [[[ test_2d.gradient.radial.nonfinite.html ]]] --> 6674 6675 <p>Canvas test: 2d.gradient.radial.nonfinite</p> 6676 <!-- Testing: createRadialGradient() throws NOT_SUPPORTED_ERR if arguments are not finite --> 6677 <canvas id="c244" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6678 <script> 6679 6680 // eslint-disable-next-line complexity 6681 function test_2d_gradient_radial_nonfinite() { 6682 6683 var canvas = document.getElementById('c244'); 6684 var ctx = canvas.getContext('2d'); 6685 6686 var _thrown = undefined; try { 6687 ctx.createRadialGradient(Infinity, 0, 1, 0, 0, 1); 6688 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6689 var _thrown = undefined; try { 6690 ctx.createRadialGradient(-Infinity, 0, 1, 0, 0, 1); 6691 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6692 var _thrown = undefined; try { 6693 ctx.createRadialGradient(NaN, 0, 1, 0, 0, 1); 6694 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6695 var _thrown = undefined; try { 6696 ctx.createRadialGradient(0, Infinity, 1, 0, 0, 1); 6697 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6698 var _thrown = undefined; try { 6699 ctx.createRadialGradient(0, -Infinity, 1, 0, 0, 1); 6700 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6701 var _thrown = undefined; try { 6702 ctx.createRadialGradient(0, NaN, 1, 0, 0, 1); 6703 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6704 var _thrown = undefined; try { 6705 ctx.createRadialGradient(0, 0, Infinity, 0, 0, 1); 6706 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6707 var _thrown = undefined; try { 6708 ctx.createRadialGradient(0, 0, -Infinity, 0, 0, 1); 6709 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6710 var _thrown = undefined; try { 6711 ctx.createRadialGradient(0, 0, NaN, 0, 0, 1); 6712 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6713 var _thrown = undefined; try { 6714 ctx.createRadialGradient(0, 0, 1, Infinity, 0, 1); 6715 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6716 var _thrown = undefined; try { 6717 ctx.createRadialGradient(0, 0, 1, -Infinity, 0, 1); 6718 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6719 var _thrown = undefined; try { 6720 ctx.createRadialGradient(0, 0, 1, NaN, 0, 1); 6721 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6722 var _thrown = undefined; try { 6723 ctx.createRadialGradient(0, 0, 1, 0, Infinity, 1); 6724 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6725 var _thrown = undefined; try { 6726 ctx.createRadialGradient(0, 0, 1, 0, -Infinity, 1); 6727 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6728 var _thrown = undefined; try { 6729 ctx.createRadialGradient(0, 0, 1, 0, NaN, 1); 6730 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6731 var _thrown = undefined; try { 6732 ctx.createRadialGradient(0, 0, 1, 0, 0, Infinity); 6733 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6734 var _thrown = undefined; try { 6735 ctx.createRadialGradient(0, 0, 1, 0, 0, -Infinity); 6736 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6737 var _thrown = undefined; try { 6738 ctx.createRadialGradient(0, 0, 1, 0, 0, NaN); 6739 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6740 var _thrown = undefined; try { 6741 ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, 1); 6742 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6743 var _thrown = undefined; try { 6744 ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, 1); 6745 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6746 var _thrown = undefined; try { 6747 ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, 1); 6748 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6749 var _thrown = undefined; try { 6750 ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, 1); 6751 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6752 var _thrown = undefined; try { 6753 ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); 6754 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6755 var _thrown = undefined; try { 6756 ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, Infinity); 6757 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6758 var _thrown = undefined; try { 6759 ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, 1); 6760 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6761 var _thrown = undefined; try { 6762 ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, Infinity); 6763 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6764 var _thrown = undefined; try { 6765 ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, Infinity); 6766 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6767 var _thrown = undefined; try { 6768 ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, 1); 6769 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6770 var _thrown = undefined; try { 6771 ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, 1); 6772 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6773 var _thrown = undefined; try { 6774 ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, Infinity); 6775 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6776 var _thrown = undefined; try { 6777 ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, Infinity); 6778 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6779 var _thrown = undefined; try { 6780 ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, 1); 6781 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6782 var _thrown = undefined; try { 6783 ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, Infinity); 6784 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6785 var _thrown = undefined; try { 6786 ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, Infinity); 6787 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6788 var _thrown = undefined; try { 6789 ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, 1); 6790 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6791 var _thrown = undefined; try { 6792 ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, 1); 6793 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6794 var _thrown = undefined; try { 6795 ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, 1); 6796 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6797 var _thrown = undefined; try { 6798 ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, Infinity); 6799 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6800 var _thrown = undefined; try { 6801 ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, Infinity); 6802 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6803 var _thrown = undefined; try { 6804 ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, 1); 6805 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6806 var _thrown = undefined; try { 6807 ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, Infinity); 6808 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6809 var _thrown = undefined; try { 6810 ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, Infinity); 6811 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6812 var _thrown = undefined; try { 6813 ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, 1); 6814 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6815 var _thrown = undefined; try { 6816 ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, 1); 6817 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6818 var _thrown = undefined; try { 6819 ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, Infinity); 6820 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6821 var _thrown = undefined; try { 6822 ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, Infinity); 6823 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6824 var _thrown = undefined; try { 6825 ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, 1); 6826 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6827 var _thrown = undefined; try { 6828 ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, Infinity); 6829 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6830 var _thrown = undefined; try { 6831 ctx.createRadialGradient(Infinity, 0, 1, 0, 0, Infinity); 6832 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6833 var _thrown = undefined; try { 6834 ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, 1); 6835 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6836 var _thrown = undefined; try { 6837 ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, 1); 6838 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6839 var _thrown = undefined; try { 6840 ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, 1); 6841 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6842 var _thrown = undefined; try { 6843 ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, Infinity); 6844 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6845 var _thrown = undefined; try { 6846 ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, Infinity); 6847 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6848 var _thrown = undefined; try { 6849 ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, 1); 6850 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6851 var _thrown = undefined; try { 6852 ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, Infinity); 6853 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6854 var _thrown = undefined; try { 6855 ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, Infinity); 6856 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6857 var _thrown = undefined; try { 6858 ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, 1); 6859 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6860 var _thrown = undefined; try { 6861 ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, 1); 6862 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6863 var _thrown = undefined; try { 6864 ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, Infinity); 6865 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6866 var _thrown = undefined; try { 6867 ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, Infinity); 6868 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6869 var _thrown = undefined; try { 6870 ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, 1); 6871 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6872 var _thrown = undefined; try { 6873 ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, Infinity); 6874 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6875 var _thrown = undefined; try { 6876 ctx.createRadialGradient(0, Infinity, 1, 0, 0, Infinity); 6877 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6878 var _thrown = undefined; try { 6879 ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, 1); 6880 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6881 var _thrown = undefined; try { 6882 ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, 1); 6883 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6884 var _thrown = undefined; try { 6885 ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, Infinity); 6886 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6887 var _thrown = undefined; try { 6888 ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, Infinity); 6889 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6890 var _thrown = undefined; try { 6891 ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, 1); 6892 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6893 var _thrown = undefined; try { 6894 ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, Infinity); 6895 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6896 var _thrown = undefined; try { 6897 ctx.createRadialGradient(0, 0, Infinity, 0, 0, Infinity); 6898 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6899 var _thrown = undefined; try { 6900 ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, 1); 6901 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6902 var _thrown = undefined; try { 6903 ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, Infinity); 6904 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6905 var _thrown = undefined; try { 6906 ctx.createRadialGradient(0, 0, 1, Infinity, 0, Infinity); 6907 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6908 var _thrown = undefined; try { 6909 ctx.createRadialGradient(0, 0, 1, 0, Infinity, Infinity); 6910 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 6911 6912 6913 } 6914 </script> 6915 6916 <!-- [[[ test_2d.gradient.radial.outside1.html ]]] --> 6917 6918 <p>Canvas test: 2d.gradient.radial.outside1</p> 6919 <canvas id="c245" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6920 <script> 6921 6922 6923 function test_2d_gradient_radial_outside1() { 6924 6925 var canvas = document.getElementById('c245'); 6926 var ctx = canvas.getContext('2d'); 6927 6928 ctx.fillStyle = '#f00'; 6929 ctx.fillRect(0, 0, 100, 50); 6930 6931 var g = ctx.createRadialGradient(200, 25, 10, 200, 25, 20); 6932 g.addColorStop(0, '#f00'); 6933 g.addColorStop(1, '#0f0'); 6934 ctx.fillStyle = g; 6935 ctx.fillRect(0, 0, 100, 50); 6936 6937 isPixel(ctx, 1,1, 0,255,0,255, 0); 6938 isPixel(ctx, 50,1, 0,255,0,255, 0); 6939 isPixel(ctx, 98,1, 0,255,0,255, 0); 6940 isPixel(ctx, 1,25, 0,255,0,255, 0); 6941 isPixel(ctx, 50,25, 0,255,0,255, 0); 6942 isPixel(ctx, 98,25, 0,255,0,255, 0); 6943 isPixel(ctx, 1,48, 0,255,0,255, 0); 6944 isPixel(ctx, 50,48, 0,255,0,255, 0); 6945 isPixel(ctx, 98,48, 0,255,0,255, 0); 6946 6947 6948 } 6949 </script> 6950 6951 <!-- [[[ test_2d.gradient.radial.outside2.html ]]] --> 6952 6953 <p>Canvas test: 2d.gradient.radial.outside2</p> 6954 <canvas id="c246" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6955 <script> 6956 6957 6958 6959 function test_2d_gradient_radial_outside2() { 6960 6961 var canvas = document.getElementById('c246'); 6962 var ctx = canvas.getContext('2d'); 6963 6964 ctx.fillStyle = '#f00'; 6965 ctx.fillRect(0, 0, 100, 50); 6966 6967 var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10); 6968 g.addColorStop(0, '#0f0'); 6969 g.addColorStop(1, '#f00'); 6970 ctx.fillStyle = g; 6971 ctx.fillRect(0, 0, 100, 50); 6972 6973 isPixel(ctx, 1,1, 0,255,0,255, 0); 6974 isPixel(ctx, 50,1, 0,255,0,255, 0); 6975 isPixel(ctx, 98,1, 0,255,0,255, 0); 6976 isPixel(ctx, 1,25, 0,255,0,255, 0); 6977 isPixel(ctx, 50,25, 0,255,0,255, 0); 6978 isPixel(ctx, 98,25, 0,255,0,255, 0); 6979 isPixel(ctx, 1,48, 0,255,0,255, 0); 6980 isPixel(ctx, 50,48, 0,255,0,255, 0); 6981 isPixel(ctx, 98,48, 0,255,0,255, 0); 6982 6983 6984 } 6985 </script> 6986 6987 <!-- [[[ test_2d.gradient.radial.outside3.html ]]] --> 6988 6989 <p>Canvas test: 2d.gradient.radial.outside3</p> 6990 <canvas id="c247" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 6991 <script> 6992 6993 6994 6995 function test_2d_gradient_radial_outside3() { 6996 6997 var canvas = document.getElementById('c247'); 6998 var ctx = canvas.getContext('2d'); 6999 7000 ctx.fillStyle = '#f00'; 7001 ctx.fillRect(0, 0, 100, 50); 7002 7003 var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10); 7004 g.addColorStop(0, '#0f0'); 7005 g.addColorStop(0.001, '#f00'); 7006 g.addColorStop(1, '#f00'); 7007 ctx.fillStyle = g; 7008 ctx.fillRect(0, 0, 100, 50); 7009 7010 isPixel(ctx, 1,1, 0,255,0,255, 0); 7011 isPixel(ctx, 50,1, 0,255,0,255, 0); 7012 isPixel(ctx, 98,1, 0,255,0,255, 0); 7013 isPixel(ctx, 1,25, 0,255,0,255, 0); 7014 isPixel(ctx, 50,25, 0,255,0,255, 0); 7015 isPixel(ctx, 98,25, 0,255,0,255, 0); 7016 isPixel(ctx, 1,48, 0,255,0,255, 0); 7017 isPixel(ctx, 50,48, 0,255,0,255, 0); 7018 isPixel(ctx, 98,48, 0,255,0,255, 0); 7019 7020 7021 } 7022 </script> 7023 7024 <!-- [[[ test_2d.gradient.radial.touch1.html ]]] --> 7025 7026 <p>Canvas test: 2d.gradient.radial.touch1</p> 7027 <canvas id="c248" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7028 <script> 7029 7030 7031 7032 function test_2d_gradient_radial_touch1() { 7033 7034 var canvas = document.getElementById('c248'); 7035 var ctx = canvas.getContext('2d'); 7036 7037 ctx.fillStyle = '#0f0'; 7038 ctx.fillRect(0, 0, 100, 50); 7039 7040 var g = ctx.createRadialGradient(150, 25, 50, 200, 25, 100); 7041 g.addColorStop(0, '#f00'); 7042 g.addColorStop(1, '#f00'); 7043 ctx.fillStyle = g; 7044 ctx.fillRect(0, 0, 100, 50); 7045 7046 isPixel(ctx, 1,1, 0,255,0,255, 0); 7047 isPixel(ctx, 50,1, 0,255,0,255, 0); 7048 isPixel(ctx, 98,1, 0,255,0,255, 0); 7049 isPixel(ctx, 1,25, 0,255,0,255, 0); 7050 isPixel(ctx, 50,25, 0,255,0,255, 0); 7051 isPixel(ctx, 98,25, 0,255,0,255, 0); 7052 isPixel(ctx, 1,48, 0,255,0,255, 0); 7053 isPixel(ctx, 50,48, 0,255,0,255, 0); 7054 isPixel(ctx, 98,48, 0,255,0,255, 0); 7055 7056 7057 } 7058 </script> 7059 7060 <!-- [[[ test_2d.gradient.radial.touch2.html ]]] --> 7061 7062 <p>Canvas test: 2d.gradient.radial.touch2</p> 7063 <canvas id="c249" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7064 <script> 7065 7066 7067 7068 function test_2d_gradient_radial_touch2() { 7069 7070 var canvas = document.getElementById('c249'); 7071 var ctx = canvas.getContext('2d'); 7072 7073 ctx.fillStyle = '#f00'; 7074 ctx.fillRect(0, 0, 100, 50); 7075 7076 var g = ctx.createRadialGradient(-80, 25, 70, 0, 25, 150); 7077 g.addColorStop(0, '#f00'); 7078 g.addColorStop(0.01, '#0f0'); 7079 g.addColorStop(0.99, '#0f0'); 7080 g.addColorStop(1, '#f00'); 7081 ctx.fillStyle = g; 7082 ctx.fillRect(0, 0, 100, 50); 7083 7084 isPixel(ctx, 1,1, 0,255,0,255, 0); 7085 isPixel(ctx, 50,1, 0,255,0,255, 0); 7086 isPixel(ctx, 98,1, 0,255,0,255, 0); 7087 isPixel(ctx, 1,25, 0,255,0,255, 0); 7088 isPixel(ctx, 50,25, 0,255,0,255, 0); 7089 isPixel(ctx, 98,25, 0,255,0,255, 0); 7090 isPixel(ctx, 1,48, 0,255,0,255, 0); 7091 isPixel(ctx, 50,48, 0,255,0,255, 0); 7092 isPixel(ctx, 98,48, 0,255,0,255, 0); 7093 7094 7095 } 7096 </script> 7097 7098 <!-- [[[ test_2d.gradient.radial.touch3.html ]]] --> 7099 7100 <p>Canvas test: 2d.gradient.radial.touch3</p> 7101 <canvas id="c250" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7102 <script> 7103 7104 7105 7106 function test_2d_gradient_radial_touch3() { 7107 7108 var canvas = document.getElementById('c250'); 7109 var ctx = canvas.getContext('2d'); 7110 7111 ctx.fillStyle = '#0f0'; 7112 ctx.fillRect(0, 0, 100, 50); 7113 7114 var g = ctx.createRadialGradient(120, -15, 25, 140, -30, 50); 7115 g.addColorStop(0, '#f00'); 7116 g.addColorStop(1, '#f00'); 7117 ctx.fillStyle = g; 7118 ctx.fillRect(0, 0, 100, 50); 7119 7120 isPixel(ctx, 1,1, 0,255,0,255, 0); 7121 isPixel(ctx, 50,1, 0,255,0,255, 0); 7122 isPixel(ctx, 98,1, 0,255,0,255, 0); 7123 isPixel(ctx, 1,25, 0,255,0,255, 0); 7124 isPixel(ctx, 50,25, 0,255,0,255, 0); 7125 isPixel(ctx, 98,25, 0,255,0,255, 0); 7126 isPixel(ctx, 1,48, 0,255,0,255, 0); 7127 isPixel(ctx, 50,48, 0,255,0,255, 0); 7128 isPixel(ctx, 98,48, 0,255,0,255, 0); 7129 7130 7131 } 7132 </script> 7133 7134 <!-- [[[ test_2d.gradient.radial.transform.1.html ]]] --> 7135 7136 <p>Canvas test: 2d.gradient.radial.transform.1</p> 7137 <!-- Testing: Radial gradient coordinates are relative to the coordinate space at the time of filling --> 7138 <canvas id="c251" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7139 <script> 7140 7141 7142 function test_2d_gradient_radial_transform_1() { 7143 7144 var canvas = document.getElementById('c251'); 7145 var ctx = canvas.getContext('2d'); 7146 7147 var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2); 7148 g.addColorStop(0, '#0f0'); 7149 g.addColorStop(0.5, '#0f0'); 7150 g.addColorStop(0.51, '#f00'); 7151 g.addColorStop(1, '#f00'); 7152 ctx.fillStyle = g; 7153 ctx.translate(50, 25); 7154 ctx.scale(10, 10); 7155 ctx.fillRect(-5, -2.5, 10, 5); 7156 isPixel(ctx, 25,25, 0,255,0,255, 0); 7157 isPixel(ctx, 50,25, 0,255,0,255, 0); 7158 isPixel(ctx, 75,25, 0,255,0,255, 0); 7159 7160 7161 } 7162 </script> 7163 7164 <!-- [[[ test_2d.gradient.radial.transform.2.html ]]] --> 7165 7166 <p>Canvas test: 2d.gradient.radial.transform.2</p> 7167 <!-- Testing: Radial gradient coordinates are relative to the coordinate space at the time of filling --> 7168 <canvas id="c252" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7169 <script> 7170 7171 7172 function test_2d_gradient_radial_transform_2() { 7173 7174 var canvas = document.getElementById('c252'); 7175 var ctx = canvas.getContext('2d'); 7176 7177 ctx.translate(100, 0); 7178 var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2); 7179 g.addColorStop(0, '#0f0'); 7180 g.addColorStop(0.5, '#0f0'); 7181 g.addColorStop(0.51, '#f00'); 7182 g.addColorStop(1, '#f00'); 7183 ctx.fillStyle = g; 7184 ctx.translate(-50, 25); 7185 ctx.scale(10, 10); 7186 ctx.fillRect(-5, -2.5, 10, 5); 7187 isPixel(ctx, 25,25, 0,255,0,255, 0); 7188 isPixel(ctx, 50,25, 0,255,0,255, 0); 7189 isPixel(ctx, 75,25, 0,255,0,255, 0); 7190 7191 7192 } 7193 </script> 7194 7195 <!-- [[[ test_2d.gradient.radial.transform.3.html ]]] --> 7196 7197 <p>Canvas test: 2d.gradient.radial.transform.3</p> 7198 <!-- Testing: Radial gradient transforms do not experience broken caching effects --> 7199 <canvas id="c253" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7200 <script> 7201 7202 7203 7204 function test_2d_gradient_radial_transform_3() { 7205 7206 var canvas = document.getElementById('c253'); 7207 var ctx = canvas.getContext('2d'); 7208 7209 var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2); 7210 g.addColorStop(0, '#0f0'); 7211 g.addColorStop(0.5, '#0f0'); 7212 g.addColorStop(0.51, '#f00'); 7213 g.addColorStop(1, '#f00'); 7214 ctx.fillStyle = g; 7215 ctx.fillRect(0, 0, 100, 50); 7216 ctx.translate(50, 25); 7217 ctx.scale(10, 10); 7218 ctx.fillRect(-5, -2.5, 10, 5); 7219 7220 isPixel(ctx, 25,25, 0,255,0,255, 0); 7221 isPixel(ctx, 50,25, 0,255,0,255, 0); 7222 isPixel(ctx, 75,25, 0,255,0,255, 0); 7223 7224 } 7225 </script> 7226 7227 <!-- [[[ test_2d.imageData.create.basic.html ]]] --> 7228 7229 <p>Canvas test: 2d.imageData.create.basic - bug 433004</p> 7230 <!-- Testing: createImageData() exists and returns something --> 7231 <canvas id="c254" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7232 <script> 7233 7234 function test_2d_imageData_create_basic() { 7235 7236 var canvas = document.getElementById('c254'); 7237 var ctx = canvas.getContext('2d'); 7238 7239 ok(ctx.createImageData(1, 1) !== null, "ctx.createImageData(1, 1) !== null"); 7240 7241 7242 } 7243 </script> 7244 7245 <!-- [[[ test_2d.imageData.create1.basic.html ]]] --> 7246 7247 <p>Canvas test: 2d.imageData.create1.basic - bug 630040</p> 7248 <!-- Testing: createImageData(imgdata) exists and returns something --> 7249 <canvas id="c254a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7250 <script> 7251 7252 function test_2d_imageData_create1_basic() { 7253 7254 var canvas = document.getElementById('c254a'); 7255 var ctx = canvas.getContext('2d'); 7256 7257 ok(ctx.createImageData(ctx.createImageData(1, 1)) != null, "ctx.createImageData(ctx.createImageData(1, 1)) != null"); 7258 7259 7260 } 7261 </script> 7262 7263 <!-- [[[ test_2d.imageData.create.initial.html ]]] --> 7264 7265 <p>Canvas test: 2d.imageData.create.initial - bug 433004</p> 7266 <!-- Testing: createImageData() returns transparent black data of the right size --> 7267 <canvas id="c255" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7268 <script> 7269 7270 function test_2d_imageData_create_initial() { 7271 7272 var canvas = document.getElementById('c255'); 7273 var ctx = canvas.getContext('2d'); 7274 7275 var imgdata = ctx.createImageData(10, 20); 7276 ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4"); 7277 ok(imgdata.width < imgdata.height, "imgdata.width < imgdata.height"); 7278 ok(imgdata.width > 0, "imgdata.width > 0"); 7279 var isTransparentBlack = true; 7280 for (var i = 0; i < imgdata.data.length; ++i) 7281 if (imgdata.data[i] !== 0) 7282 isTransparentBlack = false; 7283 ok(isTransparentBlack, "isTransparentBlack"); 7284 7285 7286 } 7287 </script> 7288 7289 <!-- [[[ test_2d.imageData.create1.initial.html ]]] --> 7290 7291 <p>Canvas test: 2d.imageData.create1.initial - bug 630040</p> 7292 <!-- Testing: createImageData(imgdata) returns transparent black data of the right size --> 7293 <canvas id="c255a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7294 <script> 7295 7296 function test_2d_imageData_create1_initial() { 7297 7298 var canvas = document.getElementById('c255a'); 7299 var ctx = canvas.getContext('2d'); 7300 7301 ctx.fillStyle = '#0f0'; 7302 ctx.fillRect(0, 0, 100, 50); 7303 var imgdata1 = ctx.getImageData(0, 0, 10, 20); 7304 var imgdata2 = ctx.createImageData(imgdata1); 7305 ok(imgdata2.data.length == imgdata1.data.length, "imgdata2.data.length == imgdata1.data.length"); 7306 ok(imgdata2.width == imgdata1.width, "imgdata2.width == imgdata1.width"); 7307 ok(imgdata2.height == imgdata1.height, "imgdata2.height == imgdata1.height"); 7308 var isTransparentBlack = true; 7309 for (var i = 0; i < imgdata2.data.length; ++i) 7310 if (imgdata2.data[i] !== 0) 7311 isTransparentBlack = false; 7312 ok(isTransparentBlack, "isTransparentBlack"); 7313 7314 7315 } 7316 </script> 7317 7318 <!-- [[[ test_2d.imageData.create.large.html ]]] --> 7319 7320 <p>Canvas test: 2d.imageData.create.large - bug 433004</p> 7321 <!-- Testing: createImageData() works for sizes much larger than the canvas --> 7322 <canvas id="c256" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7323 <script> 7324 7325 function test_2d_imageData_create_large() { 7326 7327 var canvas = document.getElementById('c256'); 7328 var ctx = canvas.getContext('2d'); 7329 7330 var _thrown_outer = false; 7331 7332 var imgdata = ctx.createImageData(1000, 2000); 7333 ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4"); 7334 ok(imgdata.width < imgdata.height, "imgdata.width < imgdata.height"); 7335 ok(imgdata.width > 0, "imgdata.width > 0"); 7336 var isTransparentBlack = true; 7337 for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling) 7338 if (imgdata.data[i] !== 0) 7339 isTransparentBlack = false; 7340 ok(isTransparentBlack, "isTransparentBlack"); 7341 7342 7343 } 7344 </script> 7345 7346 <!-- [[[ test_2d.imageData.create.negative.html ]]] --> 7347 7348 <p>Canvas test: 2d.imageData.create.negative - bug 433004</p> 7349 <!-- Testing: createImageData() takes the absolute magnitude of the size arguments --> 7350 <canvas id="c257" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7351 <script> 7352 7353 function test_2d_imageData_create_negative() { 7354 7355 var canvas = document.getElementById('c257'); 7356 var ctx = canvas.getContext('2d'); 7357 7358 var _thrown_outer = false; 7359 try { 7360 7361 var imgdata1 = ctx.createImageData(10, 20); 7362 var imgdata2 = ctx.createImageData(-10, 20); 7363 var imgdata3 = ctx.createImageData(10, -20); 7364 var imgdata4 = ctx.createImageData(-10, -20); 7365 ok(imgdata1.data.length == imgdata2.data.length, "imgdata1.data.length == imgdata2.data.length"); 7366 ok(imgdata2.data.length == imgdata3.data.length, "imgdata2.data.length == imgdata3.data.length"); 7367 ok(imgdata3.data.length == imgdata4.data.length, "imgdata3.data.length == imgdata4.data.length"); 7368 7369 } catch (e) { 7370 _thrown_outer = true; 7371 } 7372 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 7373 7374 7375 } 7376 </script> 7377 7378 <!-- [[[ test_2d.imageData.create.nonfinite.html ]]] --> 7379 7380 <p>Canvas test: 2d.imageData.create.nonfinite - bug 433004</p> 7381 <!-- Testing: createImageData() throws NOT_SUPPORTED_ERR if arguments are not finite --> 7382 <canvas id="c258" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7383 <script> 7384 7385 function test_2d_imageData_create_nonfinite() { 7386 7387 var canvas = document.getElementById('c258'); 7388 var ctx = canvas.getContext('2d'); 7389 7390 var _thrown = undefined; try { 7391 ctx.createImageData(Infinity, 10); 7392 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7393 var _thrown = undefined; try { 7394 ctx.createImageData(-Infinity, 10); 7395 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7396 var _thrown = undefined; try { 7397 ctx.createImageData(NaN, 10); 7398 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7399 var _thrown = undefined; try { 7400 ctx.createImageData(10, Infinity); 7401 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7402 var _thrown = undefined; try { 7403 ctx.createImageData(10, -Infinity); 7404 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7405 var _thrown = undefined; try { 7406 ctx.createImageData(10, NaN); 7407 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7408 var _thrown = undefined; try { 7409 ctx.createImageData(Infinity, Infinity); 7410 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7411 var _thrown = undefined; try { 7412 ctx.createImageData({valueOf:() => Infinity}, 10); 7413 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7414 var _thrown = undefined; try { 7415 ctx.createImageData({valueOf:() => -Infinity}, 10); 7416 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7417 var _thrown = undefined; try { 7418 ctx.createImageData({valueOf:() => NaN}, 10); 7419 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7420 var _thrown = undefined; try { 7421 ctx.createImageData(10, {valueOf:() => Infinity}); 7422 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7423 var _thrown = undefined; try { 7424 ctx.createImageData(10, {valueOf:() => -Infinity}); 7425 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7426 var _thrown = undefined; try { 7427 ctx.createImageData(10, {valueOf:() => NaN}); 7428 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7429 var _thrown = undefined; try { 7430 ctx.createImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}); 7431 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7432 7433 7434 } 7435 </script> 7436 7437 <!-- [[[ test_2d.imageData.create.round.html ]]] --> 7438 7439 <p>Canvas test: 2d.imageData.create.round - bug 433004</p> 7440 <!-- Testing: createImageData(w, h) is rounded the same as getImageData(0, 0, w, h) --> 7441 <canvas id="c259" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7442 <script> 7443 7444 function test_2d_imageData_create_round() { 7445 7446 var canvas = document.getElementById('c259'); 7447 var ctx = canvas.getContext('2d'); 7448 7449 var _thrown_outer = false; 7450 7451 var imgdata1 = ctx.createImageData(10.01, 10.99); 7452 var imgdata2 = ctx.getImageData(0, 0, 10.01, 10.99); 7453 is(imgdata1.width, imgdata2.width, "imgdata1.width == imgdata2.width"); 7454 is(imgdata1.height, imgdata2.height, "imgdata1.height == imgdata2.height"); 7455 7456 7457 } 7458 </script> 7459 7460 <!-- [[[ test_2d.imageData.create.tiny.html ]]] --> 7461 7462 <p>Canvas test: 2d.imageData.create.tiny - bug 433004</p> 7463 <!-- Testing: createImageData() works for sizes smaller than one pixel --> 7464 <canvas id="c260" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7465 <script> 7466 7467 function test_2d_imageData_create_tiny() { 7468 7469 var canvas = document.getElementById('c260'); 7470 var ctx = canvas.getContext('2d'); 7471 7472 var _thrown_outer = false; 7473 try { 7474 var imgdata = ctx.createImageData(0.0001, 0.0001); 7475 } catch (e) { 7476 _thrown_outer = true; 7477 } 7478 ok(_thrown_outer, ctx.canvas.id + ' should throw exception'); 7479 } 7480 </script> 7481 7482 <!-- [[[ test_2d.imageData.create.type.html ]]] --> 7483 7484 <p>Canvas test: 2d.imageData.create.type - bug 433004</p> 7485 <!-- Testing: createImageData() returns an ImageData object containing a Uint8ClampedArray object --> 7486 <canvas id="c261" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7487 <script> 7488 7489 function test_2d_imageData_create_type() { 7490 7491 var canvas = document.getElementById('c261'); 7492 var ctx = canvas.getContext('2d'); 7493 7494 ok(window.ImageData !== undefined, "window.ImageData !== undefined"); 7495 ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined"); 7496 window.ImageData.prototype.thisImplementsImageData = true; 7497 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true; 7498 var imgdata = ctx.createImageData(1, 1); 7499 ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData"); 7500 ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray"); 7501 7502 7503 } 7504 </script> 7505 7506 <!-- [[[ test_2d.imageData.create1.type.html ]]] --> 7507 7508 <p>Canvas test: 2d.imageData.create1.type - bug 630040</p> 7509 <!-- Testing: createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray object --> 7510 <canvas id="c261a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7511 <script> 7512 7513 function test_2d_imageData_create1_type() { 7514 7515 var canvas = document.getElementById('c261a'); 7516 var ctx = canvas.getContext('2d'); 7517 7518 ok(window.ImageData !== undefined, "window.ImageData !== undefined"); 7519 ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined"); 7520 window.ImageData.prototype.thisImplementsImageData = true; 7521 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true; 7522 var imgdata = ctx.createImageData(ctx.createImageData(1, 1)); 7523 ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData"); 7524 ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray"); 7525 7526 7527 } 7528 </script> 7529 7530 <!-- [[[ test_2d.imageData.create.zero.html ]]] --> 7531 7532 <p>Canvas test: 2d.imageData.create.zero - bug 433004</p> 7533 <!-- Testing: createImageData() throws INDEX_SIZE_ERR if size is zero --> 7534 <canvas id="c262" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7535 <script> 7536 7537 function test_2d_imageData_create_zero() { 7538 7539 var canvas = document.getElementById('c262'); 7540 var ctx = canvas.getContext('2d'); 7541 7542 var _thrown = undefined; try { 7543 ctx.createImageData(10, 0); 7544 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 7545 var _thrown = undefined; try { 7546 ctx.createImageData(0, 10); 7547 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 7548 var _thrown = undefined; try { 7549 ctx.createImageData(0, 0); 7550 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 7551 7552 7553 } 7554 </script> 7555 7556 <!-- [[[ test_2d.imageData.create1.zero.html ]]] --> 7557 7558 <p>Canvas test: 2d.imageData.create1.zero - bug 630040</p> 7559 <!-- Testing: createImageData(null) throws TypeError --> 7560 <canvas id="c262a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7561 <script> 7562 7563 function test_2d_imageData_create1_zero() { 7564 7565 var canvas = document.getElementById('c262a'); 7566 var ctx = canvas.getContext('2d'); 7567 7568 var _thrown = undefined; try { 7569 ctx.createImageData(null); 7570 } catch (e) { _thrown = e }; 7571 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 7572 7573 7574 } 7575 </script> 7576 7577 <!-- [[[ test_2d.imageData.get.basic.html ]]] --> 7578 7579 <p>Canvas test: 2d.imageData.get.basic</p> 7580 <!-- Testing: getImageData() exists and returns something --> 7581 <canvas id="c263" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7582 <script> 7583 7584 function test_2d_imageData_get_basic() { 7585 7586 var canvas = document.getElementById('c263'); 7587 var ctx = canvas.getContext('2d'); 7588 7589 ok(ctx.getImageData(0, 0, 100, 50) !== null, "ctx.getImageData(0, 0, 100, 50) !== null"); 7590 7591 7592 } 7593 </script> 7594 7595 <!-- [[[ test_2d.imageData.get.clamp.html ]]] --> 7596 7597 <p>Canvas test: 2d.imageData.get.clamp</p> 7598 <!-- Testing: getImageData() clamps colours to the range [0, 255] --> 7599 <canvas id="c264" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7600 <script> 7601 7602 function test_2d_imageData_get_clamp() { 7603 7604 var canvas = document.getElementById('c264'); 7605 var ctx = canvas.getContext('2d'); 7606 7607 ctx.fillStyle = 'rgb(-100, -200, -300)'; 7608 ctx.fillRect(0, 0, 100, 50); 7609 ctx.fillStyle = 'rgb(256, 300, 400)'; 7610 ctx.fillRect(20, 10, 60, 10); 7611 var imgdata1 = ctx.getImageData(10, 5, 1, 1); 7612 ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0"); 7613 ok(imgdata1.data[1] === 0, "imgdata1.data[\""+(1)+"\"] === 0"); 7614 ok(imgdata1.data[2] === 0, "imgdata1.data[\""+(2)+"\"] === 0"); 7615 var imgdata2 = ctx.getImageData(30, 15, 1, 1); 7616 ok(imgdata2.data[0] === 255, "imgdata2.data[\""+(0)+"\"] === 255"); 7617 ok(imgdata2.data[1] === 255, "imgdata2.data[\""+(1)+"\"] === 255"); 7618 ok(imgdata2.data[2] === 255, "imgdata2.data[\""+(2)+"\"] === 255"); 7619 7620 7621 } 7622 </script> 7623 7624 <!-- [[[ test_2d.imageData.get.nonfinite.html ]]] --> 7625 7626 <p>Canvas test: 2d.imageData.get.nonfinite</p> 7627 <!-- Testing: getImageData() throws NOT_SUPPORTED_ERR if arguments are not finite --> 7628 <canvas id="c265" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7629 <script> 7630 7631 // eslint-disable-next-line complexity 7632 function test_2d_imageData_get_nonfinite() { 7633 7634 var canvas = document.getElementById('c265'); 7635 var ctx = canvas.getContext('2d'); 7636 7637 var _thrown = undefined; try { 7638 ctx.getImageData(Infinity, 10, 10, 10); 7639 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7640 var _thrown = undefined; try { 7641 ctx.getImageData(-Infinity, 10, 10, 10); 7642 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7643 var _thrown = undefined; try { 7644 ctx.getImageData(NaN, 10, 10, 10); 7645 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7646 var _thrown = undefined; try { 7647 ctx.getImageData(10, Infinity, 10, 10); 7648 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7649 var _thrown = undefined; try { 7650 ctx.getImageData(10, -Infinity, 10, 10); 7651 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7652 var _thrown = undefined; try { 7653 ctx.getImageData(10, NaN, 10, 10); 7654 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7655 var _thrown = undefined; try { 7656 ctx.getImageData(10, 10, Infinity, 10); 7657 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7658 var _thrown = undefined; try { 7659 ctx.getImageData(10, 10, -Infinity, 10); 7660 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7661 var _thrown = undefined; try { 7662 ctx.getImageData(10, 10, NaN, 10); 7663 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7664 var _thrown = undefined; try { 7665 ctx.getImageData(10, 10, 10, Infinity); 7666 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7667 var _thrown = undefined; try { 7668 ctx.getImageData(10, 10, 10, -Infinity); 7669 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7670 var _thrown = undefined; try { 7671 ctx.getImageData(10, 10, 10, NaN); 7672 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7673 var _thrown = undefined; try { 7674 ctx.getImageData(Infinity, Infinity, 10, 10); 7675 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7676 var _thrown = undefined; try { 7677 ctx.getImageData(Infinity, Infinity, Infinity, 10); 7678 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7679 var _thrown = undefined; try { 7680 ctx.getImageData(Infinity, Infinity, Infinity, Infinity); 7681 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7682 var _thrown = undefined; try { 7683 ctx.getImageData(Infinity, Infinity, 10, Infinity); 7684 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7685 var _thrown = undefined; try { 7686 ctx.getImageData(Infinity, 10, Infinity, 10); 7687 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7688 var _thrown = undefined; try { 7689 ctx.getImageData(Infinity, 10, Infinity, Infinity); 7690 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7691 var _thrown = undefined; try { 7692 ctx.getImageData(Infinity, 10, 10, Infinity); 7693 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7694 var _thrown = undefined; try { 7695 ctx.getImageData(10, Infinity, Infinity, 10); 7696 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7697 var _thrown = undefined; try { 7698 ctx.getImageData(10, Infinity, Infinity, Infinity); 7699 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7700 var _thrown = undefined; try { 7701 ctx.getImageData(10, Infinity, 10, Infinity); 7702 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7703 var _thrown = undefined; try { 7704 ctx.getImageData(10, 10, Infinity, Infinity); 7705 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7706 var _thrown = undefined; try { 7707 ctx.getImageData({valueOf:() => Infinity}, 10, 10, 10); 7708 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7709 var _thrown = undefined; try { 7710 ctx.getImageData({valueOf:() => -Infinity}, 10, 10, 10); 7711 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7712 var _thrown = undefined; try { 7713 ctx.getImageData({valueOf:() => NaN}, 10, 10, 10); 7714 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7715 var _thrown = undefined; try { 7716 ctx.getImageData(10, {valueOf:() => Infinity}, 10, 10); 7717 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7718 var _thrown = undefined; try { 7719 ctx.getImageData(10, {valueOf:() => -Infinity}, 10, 10); 7720 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7721 var _thrown = undefined; try { 7722 ctx.getImageData(10, {valueOf:() => NaN}, 10, 10); 7723 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7724 var _thrown = undefined; try { 7725 ctx.getImageData(10, 10, {valueOf:() => Infinity}, 10); 7726 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7727 var _thrown = undefined; try { 7728 ctx.getImageData(10, 10, {valueOf:() => -Infinity}, 10); 7729 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7730 var _thrown = undefined; try { 7731 ctx.getImageData(10, 10, {valueOf:() => NaN}, 10); 7732 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7733 var _thrown = undefined; try { 7734 ctx.getImageData(10, 10, 10, {valueOf:() => Infinity}); 7735 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7736 var _thrown = undefined; try { 7737 ctx.getImageData(10, 10, 10, {valueOf:() => -Infinity}); 7738 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7739 var _thrown = undefined; try { 7740 ctx.getImageData(10, 10, 10, {valueOf:() => NaN}); 7741 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7742 var _thrown = undefined; try { 7743 ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, 10, 10); 7744 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7745 var _thrown = undefined; try { 7746 ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity}, 10); 7747 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7748 var _thrown = undefined; try { 7749 ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity}); 7750 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7751 var _thrown = undefined; try { 7752 ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, 10, {valueOf:() => Infinity}); 7753 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7754 var _thrown = undefined; try { 7755 ctx.getImageData({valueOf:() => Infinity}, 10, {valueOf:() => Infinity}, 10); 7756 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7757 var _thrown = undefined; try { 7758 ctx.getImageData({valueOf:() => Infinity}, 10, {valueOf:() => Infinity}, {valueOf:() => Infinity}); 7759 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7760 var _thrown = undefined; try { 7761 ctx.getImageData({valueOf:() => Infinity}, 10, 10, {valueOf:() => Infinity}); 7762 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7763 var _thrown = undefined; try { 7764 ctx.getImageData(10, {valueOf:() => Infinity}, {valueOf:() => Infinity}, 10); 7765 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7766 var _thrown = undefined; try { 7767 ctx.getImageData(10, {valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity}); 7768 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7769 var _thrown = undefined; try { 7770 ctx.getImageData(10, {valueOf:() => Infinity}, 10, {valueOf:() => Infinity}); 7771 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7772 var _thrown = undefined; try { 7773 ctx.getImageData(10, 10, {valueOf:() => Infinity}, {valueOf:() => Infinity}); 7774 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 7775 7776 7777 } 7778 </script> 7779 7780 <!-- [[[ test_2d.imageData.get.nonpremul.html ]]] --> 7781 7782 <p>Canvas test: 2d.imageData.get.nonpremul</p> 7783 <!-- Testing: getImageData() returns non-premultiplied colours --> 7784 <canvas id="c266" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7785 <script> 7786 7787 function test_2d_imageData_get_nonpremul() { 7788 7789 var canvas = document.getElementById('c266'); 7790 var ctx = canvas.getContext('2d'); 7791 7792 ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; 7793 ctx.fillRect(0, 0, 100, 50); 7794 var imgdata = ctx.getImageData(10, 10, 10, 10); 7795 ok(imgdata.data[0] > 200, "imgdata.data[\""+(0)+"\"] > 200"); 7796 ok(imgdata.data[1] > 200, "imgdata.data[\""+(1)+"\"] > 200"); 7797 ok(imgdata.data[2] > 200, "imgdata.data[\""+(2)+"\"] > 200"); 7798 ok(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100"); 7799 ok(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200"); 7800 7801 7802 } 7803 </script> 7804 7805 <!-- [[[ test_2d.imageData.get.order.alpha.html ]]] --> 7806 7807 <p>Canvas test: 2d.imageData.get.order.alpha</p> 7808 <!-- Testing: getImageData() returns A in the fourth component --> 7809 <canvas id="c267" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7810 <script> 7811 7812 function test_2d_imageData_get_order_alpha() { 7813 7814 var canvas = document.getElementById('c267'); 7815 var ctx = canvas.getContext('2d'); 7816 7817 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; 7818 ctx.fillRect(0, 0, 100, 50); 7819 var imgdata = ctx.getImageData(0, 0, 10, 10); 7820 ok(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200"); 7821 ok(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100"); 7822 7823 7824 } 7825 </script> 7826 7827 <!-- [[[ test_2d.imageData.get.order.cols.html ]]] --> 7828 7829 <p>Canvas test: 2d.imageData.get.order.cols</p> 7830 <!-- Testing: getImageData() returns leftmost columns first --> 7831 <canvas id="c268" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7832 <script> 7833 7834 function test_2d_imageData_get_order_cols() { 7835 7836 var canvas = document.getElementById('c268'); 7837 var ctx = canvas.getContext('2d'); 7838 7839 ctx.fillStyle = '#fff'; 7840 ctx.fillRect(0, 0, 100, 50); 7841 ctx.fillStyle = '#000'; 7842 ctx.fillRect(0, 0, 2, 50); 7843 var imgdata = ctx.getImageData(0, 0, 10, 10); 7844 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 7845 ok(imgdata.data[Math.round(imgdata.width/2*4)] === 255, "imgdata.data[Math.round(imgdata.width/2*4)] === 255"); 7846 ok(imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0, "imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0"); 7847 7848 7849 } 7850 </script> 7851 7852 <!-- [[[ test_2d.imageData.get.order.rgb.html ]]] --> 7853 7854 <p>Canvas test: 2d.imageData.get.order.rgb</p> 7855 <!-- Testing: getImageData() returns R then G then B --> 7856 <canvas id="c269" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7857 <script> 7858 7859 function test_2d_imageData_get_order_rgb() { 7860 7861 var canvas = document.getElementById('c269'); 7862 var ctx = canvas.getContext('2d'); 7863 7864 ctx.fillStyle = '#48c'; 7865 ctx.fillRect(0, 0, 100, 50); 7866 var imgdata = ctx.getImageData(0, 0, 10, 10); 7867 ok(imgdata.data[0] === 0x44, "imgdata.data[\""+(0)+"\"] === 0x44"); 7868 ok(imgdata.data[1] === 0x88, "imgdata.data[\""+(1)+"\"] === 0x88"); 7869 ok(imgdata.data[2] === 0xCC, "imgdata.data[\""+(2)+"\"] === 0xCC"); 7870 ok(imgdata.data[3] === 255, "imgdata.data[\""+(3)+"\"] === 255"); 7871 7872 7873 } 7874 </script> 7875 7876 <!-- [[[ test_2d.imageData.get.order.rows.html ]]] --> 7877 7878 <p>Canvas test: 2d.imageData.get.order.rows</p> 7879 <!-- Testing: getImageData() returns topmost rows first --> 7880 <canvas id="c270" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7881 <script> 7882 7883 function test_2d_imageData_get_order_rows() { 7884 7885 var canvas = document.getElementById('c270'); 7886 var ctx = canvas.getContext('2d'); 7887 7888 ctx.fillStyle = '#fff'; 7889 ctx.fillRect(0, 0, 100, 50); 7890 ctx.fillStyle = '#000'; 7891 ctx.fillRect(0, 0, 100, 2); 7892 var imgdata = ctx.getImageData(0, 0, 10, 10); 7893 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 7894 ok(imgdata.data[Math.floor(imgdata.width/2*4)] === 0, "imgdata.data[Math.floor(imgdata.width/2*4)] === 0"); 7895 ok(imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255, "imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255"); 7896 7897 7898 } 7899 </script> 7900 7901 <!-- [[[ test_2d.imageData.get.range.html ]]] --> 7902 7903 <p>Canvas test: 2d.imageData.get.range</p> 7904 <!-- Testing: getImageData() returns values in the range [0, 255] --> 7905 <canvas id="c271" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7906 <script> 7907 7908 function test_2d_imageData_get_range() { 7909 7910 var canvas = document.getElementById('c271'); 7911 var ctx = canvas.getContext('2d'); 7912 7913 ctx.fillStyle = '#000'; 7914 ctx.fillRect(0, 0, 100, 50); 7915 ctx.fillStyle = '#fff'; 7916 ctx.fillRect(20, 10, 60, 10); 7917 var imgdata1 = ctx.getImageData(10, 5, 1, 1); 7918 ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0"); 7919 var imgdata2 = ctx.getImageData(30, 15, 1, 1); 7920 ok(imgdata2.data[0] === 255, "imgdata2.data[\""+(0)+"\"] === 255"); 7921 7922 7923 } 7924 </script> 7925 7926 <!-- [[[ test_2d.imageData.get.source.negative.html ]]] --> 7927 7928 <p>Canvas test: 2d.imageData.get.source.negative</p> 7929 <!-- Testing: getImageData() works with negative width and height --> 7930 <canvas id="c272" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7931 <script> 7932 7933 function test_2d_imageData_get_source_negative() { 7934 7935 var canvas = document.getElementById('c272'); 7936 var ctx = canvas.getContext('2d'); 7937 7938 ctx.fillStyle = '#000'; 7939 ctx.fillRect(0, 0, 100, 50); 7940 ctx.fillStyle = '#fff'; 7941 ctx.fillRect(20, 10, 60, 10); 7942 7943 var imgdata1 = ctx.getImageData(85, 25, -10, -10); 7944 ok(imgdata1.data[0] === 255, "imgdata1.data[\""+(0)+"\"] === 255"); 7945 ok(imgdata1.data[1] === 255, "imgdata1.data[\""+(1)+"\"] === 255"); 7946 ok(imgdata1.data[2] === 255, "imgdata1.data[\""+(2)+"\"] === 255"); 7947 ok(imgdata1.data[3] === 255, "imgdata1.data[\""+(3)+"\"] === 255"); 7948 ok(imgdata1.data[imgdata1.data.length-4+0] === 0, "imgdata1.data[imgdata1.data.length-4+0] === 0"); 7949 ok(imgdata1.data[imgdata1.data.length-4+1] === 0, "imgdata1.data[imgdata1.data.length-4+1] === 0"); 7950 ok(imgdata1.data[imgdata1.data.length-4+2] === 0, "imgdata1.data[imgdata1.data.length-4+2] === 0"); 7951 ok(imgdata1.data[imgdata1.data.length-4+3] === 255, "imgdata1.data[imgdata1.data.length-4+3] === 255"); 7952 7953 var imgdata2 = ctx.getImageData(0, 0, -1, -1); 7954 ok(imgdata2.data[0] === 0, "imgdata2.data[\""+(0)+"\"] === 0"); 7955 ok(imgdata2.data[1] === 0, "imgdata2.data[\""+(1)+"\"] === 0"); 7956 ok(imgdata2.data[2] === 0, "imgdata2.data[\""+(2)+"\"] === 0"); 7957 ok(imgdata2.data[3] === 0, "imgdata2.data[\""+(3)+"\"] === 0"); 7958 7959 7960 } 7961 </script> 7962 7963 <!-- [[[ test_2d.imageData.get.source.outside.html ]]] --> 7964 7965 <p>Canvas test: 2d.imageData.get.source.outside</p> 7966 <!-- Testing: getImageData() returns transparent black outside the canvas --> 7967 <canvas id="c273" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 7968 <script> 7969 7970 function test_2d_imageData_get_source_outside() { 7971 7972 var canvas = document.getElementById('c273'); 7973 var ctx = canvas.getContext('2d'); 7974 7975 var _thrown_outer = false; 7976 try { 7977 7978 ctx.fillStyle = '#08f'; 7979 ctx.fillRect(0, 0, 100, 50); 7980 7981 var imgdata1 = ctx.getImageData(-10, 5, 1, 1); 7982 ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0"); 7983 ok(imgdata1.data[1] === 0, "imgdata1.data[\""+(1)+"\"] === 0"); 7984 ok(imgdata1.data[2] === 0, "imgdata1.data[\""+(2)+"\"] === 0"); 7985 ok(imgdata1.data[3] === 0, "imgdata1.data[\""+(3)+"\"] === 0"); 7986 7987 var imgdata2 = ctx.getImageData(10, -5, 1, 1); 7988 ok(imgdata2.data[0] === 0, "imgdata2.data[\""+(0)+"\"] === 0"); 7989 ok(imgdata2.data[1] === 0, "imgdata2.data[\""+(1)+"\"] === 0"); 7990 ok(imgdata2.data[2] === 0, "imgdata2.data[\""+(2)+"\"] === 0"); 7991 ok(imgdata2.data[3] === 0, "imgdata2.data[\""+(3)+"\"] === 0"); 7992 7993 var imgdata3 = ctx.getImageData(200, 5, 1, 1); 7994 ok(imgdata3.data[0] === 0, "imgdata3.data[\""+(0)+"\"] === 0"); 7995 ok(imgdata3.data[1] === 0, "imgdata3.data[\""+(1)+"\"] === 0"); 7996 ok(imgdata3.data[2] === 0, "imgdata3.data[\""+(2)+"\"] === 0"); 7997 ok(imgdata3.data[3] === 0, "imgdata3.data[\""+(3)+"\"] === 0"); 7998 7999 var imgdata4 = ctx.getImageData(10, 60, 1, 1); 8000 ok(imgdata4.data[0] === 0, "imgdata4.data[\""+(0)+"\"] === 0"); 8001 ok(imgdata4.data[1] === 0, "imgdata4.data[\""+(1)+"\"] === 0"); 8002 ok(imgdata4.data[2] === 0, "imgdata4.data[\""+(2)+"\"] === 0"); 8003 ok(imgdata4.data[3] === 0, "imgdata4.data[\""+(3)+"\"] === 0"); 8004 8005 var imgdata5 = ctx.getImageData(100, 10, 1, 1); 8006 ok(imgdata5.data[0] === 0, "imgdata5.data[\""+(0)+"\"] === 0"); 8007 ok(imgdata5.data[1] === 0, "imgdata5.data[\""+(1)+"\"] === 0"); 8008 ok(imgdata5.data[2] === 0, "imgdata5.data[\""+(2)+"\"] === 0"); 8009 ok(imgdata5.data[3] === 0, "imgdata5.data[\""+(3)+"\"] === 0"); 8010 8011 var imgdata6 = ctx.getImageData(0, 10, 1, 1); 8012 ok(imgdata6.data[0] === 0, "imgdata6.data[\""+(0)+"\"] === 0"); 8013 ok(imgdata6.data[1] === 136, "imgdata6.data[\""+(1)+"\"] === 136"); 8014 ok(imgdata6.data[2] === 255, "imgdata6.data[\""+(2)+"\"] === 255"); 8015 ok(imgdata6.data[3] === 255, "imgdata6.data[\""+(3)+"\"] === 255"); 8016 8017 var imgdata7 = ctx.getImageData(-10, 10, 20, 20); 8018 ok(imgdata7.data[ 0*4+0] === 0, "imgdata7.data[ 0*4+0] === 0"); 8019 ok(imgdata7.data[ 0*4+1] === 0, "imgdata7.data[ 0*4+1] === 0"); 8020 ok(imgdata7.data[ 0*4+2] === 0, "imgdata7.data[ 0*4+2] === 0"); 8021 ok(imgdata7.data[ 0*4+3] === 0, "imgdata7.data[ 0*4+3] === 0"); 8022 ok(imgdata7.data[ 9*4+0] === 0, "imgdata7.data[ 9*4+0] === 0"); 8023 ok(imgdata7.data[ 9*4+1] === 0, "imgdata7.data[ 9*4+1] === 0"); 8024 ok(imgdata7.data[ 9*4+2] === 0, "imgdata7.data[ 9*4+2] === 0"); 8025 ok(imgdata7.data[ 9*4+3] === 0, "imgdata7.data[ 9*4+3] === 0"); 8026 ok(imgdata7.data[10*4+0] === 0, "imgdata7.data[10*4+0] === 0"); 8027 ok(imgdata7.data[10*4+1] === 136, "imgdata7.data[10*4+1] === 136"); 8028 ok(imgdata7.data[10*4+2] === 255, "imgdata7.data[10*4+2] === 255"); 8029 ok(imgdata7.data[10*4+3] === 255, "imgdata7.data[10*4+3] === 255"); 8030 ok(imgdata7.data[19*4+0] === 0, "imgdata7.data[19*4+0] === 0"); 8031 ok(imgdata7.data[19*4+1] === 136, "imgdata7.data[19*4+1] === 136"); 8032 ok(imgdata7.data[19*4+2] === 255, "imgdata7.data[19*4+2] === 255"); 8033 ok(imgdata7.data[19*4+3] === 255, "imgdata7.data[19*4+3] === 255"); 8034 ok(imgdata7.data[20*4+0] === 0, "imgdata7.data[20*4+0] === 0"); 8035 ok(imgdata7.data[20*4+1] === 0, "imgdata7.data[20*4+1] === 0"); 8036 ok(imgdata7.data[20*4+2] === 0, "imgdata7.data[20*4+2] === 0"); 8037 ok(imgdata7.data[20*4+3] === 0, "imgdata7.data[20*4+3] === 0"); 8038 8039 } catch (e) { 8040 _thrown_outer = true; 8041 } 8042 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 8043 8044 8045 } 8046 </script> 8047 8048 <!-- [[[ test_2d.imageData.get.source.size.html ]]] --> 8049 8050 <p>Canvas test: 2d.imageData.get.source.size</p> 8051 <!-- Testing: getImageData() returns bigger ImageData for bigger source rectangle --> 8052 <canvas id="c274" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8053 <script> 8054 8055 function test_2d_imageData_get_source_size() { 8056 8057 var canvas = document.getElementById('c274'); 8058 var ctx = canvas.getContext('2d'); 8059 8060 var imgdata1 = ctx.getImageData(0, 0, 10, 10); 8061 var imgdata2 = ctx.getImageData(0, 0, 20, 20); 8062 ok(imgdata2.width > imgdata1.width, "imgdata2.width > imgdata1.width"); 8063 ok(imgdata2.height > imgdata1.height, "imgdata2.height > imgdata1.height"); 8064 8065 8066 } 8067 </script> 8068 8069 <!-- [[[ test_2d.imageData.get.tiny.html ]]] --> 8070 8071 <p>Canvas test: 2d.imageData.get.tiny</p> 8072 <canvas id="c275" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8073 <script> 8074 8075 function test_2d_imageData_get_tiny() { 8076 8077 var canvas = document.getElementById('c275'); 8078 var ctx = canvas.getContext('2d'); 8079 8080 var _thrown_outer = false; 8081 try { 8082 var imgdata = ctx.getImageData(0, 0, 0.0001, 0.0001); 8083 } catch (e) { 8084 _thrown_outer = true; 8085 } 8086 ok(_thrown_outer, ctx.canvas.id + ' should throw'); 8087 8088 8089 } 8090 </script> 8091 8092 <!-- [[[ test_2d.imageData.get.type.html ]]] --> 8093 8094 <p>Canvas test: 2d.imageData.get.type</p> 8095 <!-- Testing: getImageData() returns an ImageData object containing a Uint8ClampedArray object --> 8096 <canvas id="c276" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8097 <script> 8098 8099 function test_2d_imageData_get_type() { 8100 8101 var canvas = document.getElementById('c276'); 8102 var ctx = canvas.getContext('2d'); 8103 8104 ok(window.ImageData !== undefined, "window.ImageData !== undefined"); 8105 ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined"); 8106 window.ImageData.prototype.thisImplementsImageData = true; 8107 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true; 8108 var imgdata = ctx.getImageData(0, 0, 1, 1); 8109 ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData"); 8110 ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray"); 8111 8112 8113 } 8114 </script> 8115 8116 <!-- [[[ test_2d.imageData.get.unaffected.html ]]] --> 8117 8118 <p>Canvas test: 2d.imageData.get.unaffected</p> 8119 <!-- Testing: getImageData() is not affected by context state --> 8120 <canvas id="c277" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8121 <script> 8122 8123 8124 function test_2d_imageData_get_unaffected() { 8125 8126 var canvas = document.getElementById('c277'); 8127 var ctx = canvas.getContext('2d'); 8128 8129 ctx.fillStyle = '#0f0'; 8130 ctx.fillRect(0, 0, 50, 50) 8131 ctx.fillStyle = '#f00'; 8132 ctx.fillRect(50, 0, 50, 50) 8133 ctx.save(); 8134 ctx.translate(50, 0); 8135 ctx.globalAlpha = 0.1; 8136 ctx.globalCompositeOperation = 'destination-atop'; 8137 ctx.shadowColor = '#f00'; 8138 ctx.rect(0, 0, 5, 5); 8139 ctx.clip(); 8140 var imgdata = ctx.getImageData(0, 0, 50, 50); 8141 ctx.restore(); 8142 ctx.putImageData(imgdata, 50, 0); 8143 isPixel(ctx, 25,25, 0,255,0,255, 2); 8144 isPixel(ctx, 75,25, 0,255,0,255, 2); 8145 8146 8147 } 8148 </script> 8149 8150 <!-- [[[ test_2d.imageData.get.zero.html ]]] --> 8151 8152 <p>Canvas test: 2d.imageData.get.zero</p> 8153 <!-- Testing: getImageData() throws INDEX_SIZE_ERR if size is zero --> 8154 <canvas id="c278" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8155 <script> 8156 8157 function test_2d_imageData_get_zero() { 8158 8159 var canvas = document.getElementById('c278'); 8160 var ctx = canvas.getContext('2d'); 8161 8162 var _thrown = undefined; try { 8163 ctx.getImageData(1, 1, 10, 0); 8164 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 8165 var _thrown = undefined; try { 8166 ctx.getImageData(1, 1, 0, 10); 8167 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 8168 var _thrown = undefined; try { 8169 ctx.getImageData(1, 1, 0, 0); 8170 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 8171 8172 8173 } 8174 </script> 8175 8176 <!-- [[[ test_2d.imageData.object.clamp.html ]]] --> 8177 8178 <p>Canvas test: 2d.imageData.object.clamp</p> 8179 <!-- Testing: ImageData.data clamps numbers to [0, 255] --> 8180 <canvas id="c279" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8181 <script> 8182 8183 function test_2d_imageData_object_clamp() { 8184 8185 var canvas = document.getElementById('c279'); 8186 var ctx = canvas.getContext('2d'); 8187 8188 var imgdata = ctx.getImageData(0, 0, 10, 10); 8189 8190 imgdata.data[0] = 100; 8191 imgdata.data[0] = 300; 8192 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255"); 8193 imgdata.data[0] = 100; 8194 imgdata.data[0] = -100; 8195 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8196 8197 imgdata.data[0] = 100; 8198 imgdata.data[0] = 200+Math.pow(2, 32); 8199 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255"); 8200 imgdata.data[0] = 100; 8201 imgdata.data[0] = -200-Math.pow(2, 32); 8202 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8203 8204 imgdata.data[0] = 100; 8205 imgdata.data[0] = Math.pow(10, 39); 8206 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255"); 8207 imgdata.data[0] = 100; 8208 imgdata.data[0] = -Math.pow(10, 39); 8209 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8210 8211 imgdata.data[0] = 100; 8212 imgdata.data[0] = -Infinity; 8213 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8214 imgdata.data[0] = 100; 8215 imgdata.data[0] = Infinity; 8216 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255"); 8217 8218 8219 } 8220 </script> 8221 8222 <!-- [[[ test_2d.imageData.object.ctor.html ]]] --> 8223 8224 <p>Canvas test: 2d.imageData.object.ctor</p> 8225 <!-- Testing: ImageData does not have a usable constructor --> 8226 <canvas id="c280" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8227 <script> 8228 8229 function test_2d_imageData_object_ctor() { 8230 8231 var canvas = document.getElementById('c280'); 8232 var ctx = canvas.getContext('2d'); 8233 8234 ok(window.ImageData !== undefined, "window.ImageData !== undefined"); 8235 8236 var _thrown_outer = false; 8237 try { 8238 8239 new window.ImageData(1,1); 8240 8241 } catch (e) { 8242 _thrown_outer = true; 8243 } 8244 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 8245 8246 8247 } 8248 </script> 8249 8250 <!-- [[[ test_2d.imageData.object.nan.html ]]] --> 8251 8252 <p>Canvas test: 2d.imageData.object.nan</p> 8253 <!-- Testing: ImageData.data converts NaN to 0 --> 8254 <canvas id="c281" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8255 <script> 8256 8257 function test_2d_imageData_object_nan() { 8258 8259 var canvas = document.getElementById('c281'); 8260 var ctx = canvas.getContext('2d'); 8261 8262 var imgdata = ctx.getImageData(0, 0, 10, 10); 8263 imgdata.data[0] = 100; 8264 imgdata.data[0] = NaN; 8265 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8266 imgdata.data[0] = 100; 8267 imgdata.data[0] = "cheese"; 8268 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8269 8270 8271 } 8272 </script> 8273 8274 <!-- [[[ test_2d.imageData.object.properties.html ]]] --> 8275 8276 <p>Canvas test: 2d.imageData.object.properties</p> 8277 <!-- Testing: ImageData objects have the right properties --> 8278 <canvas id="c282" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8279 <script> 8280 8281 function test_2d_imageData_object_properties() { 8282 8283 var canvas = document.getElementById('c282'); 8284 var ctx = canvas.getContext('2d'); 8285 8286 var imgdata = ctx.getImageData(0, 0, 10, 10); 8287 ok(typeof(imgdata.width) == 'number', "typeof(imgdata.width) == 'number'"); 8288 ok(typeof(imgdata.height) == 'number', "typeof(imgdata.height) == 'number'"); 8289 ok(typeof(imgdata.data) == 'object', "typeof(imgdata.data) == 'object'"); 8290 8291 8292 } 8293 </script> 8294 8295 <!-- [[[ test_2d.imageData.object.readonly.html ]]] --> 8296 8297 <p>Canvas test: 2d.imageData.object.readonly</p> 8298 <!-- Testing: ImageData objects properties are read-only --> 8299 <canvas id="c283" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8300 <script> 8301 8302 function test_2d_imageData_object_readonly() { 8303 8304 var canvas = document.getElementById('c283'); 8305 var ctx = canvas.getContext('2d'); 8306 8307 var imgdata = ctx.getImageData(0, 0, 10, 10); 8308 var w = imgdata.width; 8309 var h = imgdata.height; 8310 var d = imgdata.data; 8311 imgdata.width = 123; 8312 imgdata.height = 123; 8313 imgdata.data = [100,100,100,100]; 8314 ok(imgdata.width === w, "imgdata.width === w"); 8315 ok(imgdata.height === h, "imgdata.height === h"); 8316 ok(imgdata.data === d, "imgdata.data === d"); 8317 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8318 ok(imgdata.data[1] === 0, "imgdata.data[\""+(1)+"\"] === 0"); 8319 ok(imgdata.data[2] === 0, "imgdata.data[\""+(2)+"\"] === 0"); 8320 ok(imgdata.data[3] === 0, "imgdata.data[\""+(3)+"\"] === 0"); 8321 8322 8323 } 8324 </script> 8325 8326 <!-- [[[ test_2d.imageData.object.round.html ]]] --> 8327 8328 <p>Canvas test: 2d.imageData.object.round</p> 8329 <!-- Testing: ImageData.data rounds numbers with convertToIntegerTiesToEven --> 8330 <canvas id="c284" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8331 <script> 8332 8333 function test_2d_imageData_object_round() { 8334 8335 var canvas = document.getElementById('c284'); 8336 var ctx = canvas.getContext('2d'); 8337 8338 var imgdata = ctx.getImageData(0, 0, 10, 10); 8339 imgdata.data[0] = 0.499; 8340 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8341 imgdata.data[0] = 0.5; 8342 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8343 imgdata.data[0] = 0.501; 8344 ok(imgdata.data[0] === 1, "imgdata.data[\""+(0)+"\"] === 1"); 8345 imgdata.data[0] = 1.499; 8346 ok(imgdata.data[0] === 1, "imgdata.data[\""+(0)+"\"] === 1"); 8347 imgdata.data[0] = 1.5; 8348 ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2"); 8349 imgdata.data[0] = 1.501; 8350 ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2"); 8351 imgdata.data[0] = 2.5; 8352 ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2"); 8353 imgdata.data[0] = 3.5; 8354 ok(imgdata.data[0] === 4, "imgdata.data[\""+(0)+"\"] === 4"); 8355 imgdata.data[0] = 252.5; 8356 ok(imgdata.data[0] === 252, "imgdata.data[\""+(0)+"\"] === 252"); 8357 imgdata.data[0] = 253.5; 8358 ok(imgdata.data[0] === 254, "imgdata.data[\""+(0)+"\"] === 254"); 8359 imgdata.data[0] = 254.5; 8360 ok(imgdata.data[0] === 254, "imgdata.data[\""+(0)+"\"] === 254"); 8361 8362 8363 } 8364 </script> 8365 8366 <!-- [[[ test_2d.imageData.object.set.html ]]] --> 8367 8368 <p>Canvas test: 2d.imageData.object.set</p> 8369 <!-- Testing: ImageData.data can be modified --> 8370 <canvas id="c285" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8371 <script> 8372 8373 function test_2d_imageData_object_set() { 8374 8375 var canvas = document.getElementById('c285'); 8376 var ctx = canvas.getContext('2d'); 8377 8378 var imgdata = ctx.getImageData(0, 0, 10, 10); 8379 imgdata.data[0] = 100; 8380 ok(imgdata.data[0] === 100, "imgdata.data[\""+(0)+"\"] === 100"); 8381 imgdata.data[0] = 200; 8382 ok(imgdata.data[0] === 200, "imgdata.data[\""+(0)+"\"] === 200"); 8383 8384 8385 } 8386 </script> 8387 8388 <!-- [[[ test_2d.imageData.object.string.html ]]] --> 8389 8390 <p>Canvas test: 2d.imageData.object.string</p> 8391 <!-- Testing: ImageData.data converts strings to numbers with ToNumber --> 8392 <canvas id="c286" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8393 <script> 8394 8395 function test_2d_imageData_object_string() { 8396 8397 var canvas = document.getElementById('c286'); 8398 var ctx = canvas.getContext('2d'); 8399 8400 var imgdata = ctx.getImageData(0, 0, 10, 10); 8401 imgdata.data[0] = 100; 8402 imgdata.data[0] = "110"; 8403 ok(imgdata.data[0] === 110, "imgdata.data[\""+(0)+"\"] === 110"); 8404 imgdata.data[0] = 100; 8405 imgdata.data[0] = "0x78"; 8406 ok(imgdata.data[0] === 120, "imgdata.data[\""+(0)+"\"] === 120"); 8407 imgdata.data[0] = 100; 8408 imgdata.data[0] = " +130e0 "; 8409 ok(imgdata.data[0] === 130, "imgdata.data[\""+(0)+"\"] === 130"); 8410 8411 8412 } 8413 </script> 8414 8415 <!-- [[[ test_2d.imageData.object.undefined.html ]]] --> 8416 8417 <p>Canvas test: 2d.imageData.object.undefined</p> 8418 <!-- Testing: ImageData.data converts undefined to 0 --> 8419 <canvas id="c287" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8420 <script> 8421 8422 function test_2d_imageData_object_undefined() { 8423 8424 var canvas = document.getElementById('c287'); 8425 var ctx = canvas.getContext('2d'); 8426 8427 var imgdata = ctx.getImageData(0, 0, 10, 10); 8428 imgdata.data[0] = 100; 8429 imgdata.data[0] = undefined; 8430 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0"); 8431 8432 8433 } 8434 </script> 8435 8436 <!-- [[[ test_2d.imageData.put.alpha.html ]]] --> 8437 8438 <p>Canvas test: 2d.imageData.put.alpha</p> 8439 <!-- Testing: putImageData() puts non-solid image data correctly --> 8440 <canvas id="c288" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8441 <script> 8442 8443 8444 function test_2d_imageData_put_alpha() { 8445 8446 var canvas = document.getElementById('c288'); 8447 var ctx = canvas.getContext('2d'); 8448 8449 ctx.fillStyle = 'rgba(0, 255, 0, 0.25)'; 8450 ctx.fillRect(0, 0, 100, 50) 8451 var imgdata = ctx.getImageData(0, 0, 100, 50); 8452 ctx.fillStyle = '#f00'; 8453 ctx.fillRect(0, 0, 100, 50) 8454 ctx.putImageData(imgdata, 0, 0); 8455 isPixel(ctx, 50,25, 0,255,0,64, 2); 8456 8457 8458 } 8459 </script> 8460 8461 <!-- [[[ test_2d.imageData.put.basic.html ]]] --> 8462 8463 <p>Canvas test: 2d.imageData.put.basic</p> 8464 <!-- Testing: putImageData() puts image data from getImageData() onto the canvas --> 8465 <canvas id="c289" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8466 <script> 8467 8468 8469 function test_2d_imageData_put_basic() { 8470 8471 var canvas = document.getElementById('c289'); 8472 var ctx = canvas.getContext('2d'); 8473 8474 ctx.fillStyle = '#0f0'; 8475 ctx.fillRect(0, 0, 100, 50) 8476 var imgdata = ctx.getImageData(0, 0, 100, 50); 8477 ctx.fillStyle = '#f00'; 8478 ctx.fillRect(0, 0, 100, 50) 8479 ctx.putImageData(imgdata, 0, 0); 8480 isPixel(ctx, 50,25, 0,255,0,255, 2); 8481 8482 8483 } 8484 </script> 8485 8486 <!-- [[[ test_2d.imageData.put.clip.html ]]] --> 8487 8488 <p>Canvas test: 2d.imageData.put.clip - bug 433397</p> 8489 <!-- Testing: putImageData() is not affected by clipping regions --> 8490 <canvas id="c290" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8491 <script> 8492 8493 8494 8495 function test_2d_imageData_put_clip() { 8496 8497 var canvas = document.getElementById('c290'); 8498 var ctx = canvas.getContext('2d'); 8499 8500 ctx.fillStyle = '#0f0'; 8501 ctx.fillRect(0, 0, 100, 50) 8502 var imgdata = ctx.getImageData(0, 0, 100, 50); 8503 ctx.fillStyle = '#f00'; 8504 ctx.fillRect(0, 0, 100, 50) 8505 ctx.beginPath(); 8506 ctx.rect(0, 0, 50, 50); 8507 ctx.clip(); 8508 ctx.putImageData(imgdata, 0, 0); 8509 isPixel(ctx, 25,25, 0,255,0,255, 2); 8510 isPixel(ctx, 75,25, 0,255,0,255, 2); 8511 8512 8513 } 8514 </script> 8515 8516 <!-- [[[ test_2d.imageData.put.created.html ]]] --> 8517 8518 <p>Canvas test: 2d.imageData.put.created - bug 433004</p> 8519 <!-- Testing: putImageData() puts image data from createImageData() onto the canvas --> 8520 <canvas id="c291" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8521 <script> 8522 8523 8524 // eslint-disable-next-line complexity 8525 function test_2d_imageData_put_created() { 8526 8527 var canvas = document.getElementById('c291'); 8528 var ctx = canvas.getContext('2d'); 8529 8530 var imgdata = ctx.createImageData(100, 50); 8531 for (var i = 0; i < imgdata.data.length; i += 4) { 8532 imgdata.data[i] = 0; 8533 imgdata.data[i+1] = 255; 8534 imgdata.data[i+2] = 0; 8535 imgdata.data[i+3] = 255; 8536 } 8537 ctx.fillStyle = '#f00'; 8538 ctx.fillRect(0, 0, 100, 50) 8539 ctx.putImageData(imgdata, 0, 0); 8540 isPixel(ctx, 50,25, 0,255,0,255, 2); 8541 8542 8543 } 8544 </script> 8545 8546 <!-- [[[ test_2d.imageData.put.cross.html ]]] --> 8547 8548 <p>Canvas test: 2d.imageData.put.cross</p> 8549 <!-- Testing: putImageData() accepts image data got from a different canvas --> 8550 <canvas id="c292" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8551 <script> 8552 8553 8554 function test_2d_imageData_put_cross() { 8555 8556 var canvas = document.getElementById('c292'); 8557 var ctx = canvas.getContext('2d'); 8558 8559 var canvas2 = document.createElement('canvas'); 8560 var ctx2 = canvas2.getContext('2d'); 8561 ctx2.fillStyle = '#0f0'; 8562 ctx2.fillRect(0, 0, 100, 50) 8563 var imgdata = ctx2.getImageData(0, 0, 100, 50); 8564 ctx.fillStyle = '#f00'; 8565 ctx.fillRect(0, 0, 100, 50) 8566 ctx.putImageData(imgdata, 0, 0); 8567 isPixel(ctx, 50,25, 0,255,0,255, 2); 8568 8569 8570 } 8571 </script> 8572 8573 <!-- [[[ test_2d.imageData.put.dirty.negative.html ]]] --> 8574 8575 <p>Canvas test: 2d.imageData.put.dirty.negative</p> 8576 <!-- Testing: putImageData() handles negative-sized dirty rectangles correctly --> 8577 <canvas id="c293" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8578 <script> 8579 8580 8581 function test_2d_imageData_put_dirty_negative() { 8582 8583 var canvas = document.getElementById('c293'); 8584 var ctx = canvas.getContext('2d'); 8585 8586 var _thrown_outer = false; 8587 try { 8588 8589 ctx.fillStyle = '#f00'; 8590 ctx.fillRect(0, 0, 100, 50) 8591 ctx.fillStyle = '#0f0'; 8592 ctx.fillRect(0, 0, 20, 20) 8593 8594 var imgdata = ctx.getImageData(0, 0, 100, 50); 8595 8596 ctx.fillStyle = '#0f0'; 8597 ctx.fillRect(0, 0, 100, 50) 8598 ctx.fillStyle = '#f00'; 8599 ctx.fillRect(40, 20, 20, 20) 8600 ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20); 8601 8602 isPixel(ctx, 50,25, 0,255,0,255, 2); 8603 isPixel(ctx, 35,25, 0,255,0,255, 2); 8604 isPixel(ctx, 65,25, 0,255,0,255, 2); 8605 isPixel(ctx, 50,15, 0,255,0,255, 2); 8606 isPixel(ctx, 50,45, 0,255,0,255, 2); 8607 8608 } catch (e) { 8609 _thrown_outer = true; 8610 } 8611 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 8612 8613 8614 } 8615 </script> 8616 8617 <!-- [[[ test_2d.imageData.put.dirty.outside.html ]]] --> 8618 8619 <p>Canvas test: 2d.imageData.put.dirty.outside</p> 8620 <!-- Testing: putImageData() handles dirty rectangles outside the canvas correctly --> 8621 <canvas id="c294" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8622 <script> 8623 8624 8625 function test_2d_imageData_put_dirty_outside() { 8626 8627 var canvas = document.getElementById('c294'); 8628 var ctx = canvas.getContext('2d'); 8629 8630 var _thrown_outer = false; 8631 try { 8632 8633 ctx.fillStyle = '#f00'; 8634 ctx.fillRect(0, 0, 100, 50) 8635 8636 var imgdata = ctx.getImageData(0, 0, 100, 50); 8637 8638 ctx.fillStyle = '#0f0'; 8639 ctx.fillRect(0, 0, 100, 50) 8640 8641 ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20); 8642 ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50); 8643 ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20); 8644 ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20); 8645 8646 isPixel(ctx, 50,25, 0,255,0,255, 2); 8647 isPixel(ctx, 98,15, 0,255,0,255, 2); 8648 isPixel(ctx, 98,25, 0,255,0,255, 2); 8649 isPixel(ctx, 98,45, 0,255,0,255, 2); 8650 isPixel(ctx, 1,5, 0,255,0,255, 2); 8651 isPixel(ctx, 1,25, 0,255,0,255, 2); 8652 isPixel(ctx, 1,45, 0,255,0,255, 2); 8653 8654 } catch (e) { 8655 _thrown_outer = true; 8656 } 8657 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 8658 8659 8660 } 8661 </script> 8662 8663 <!-- [[[ test_2d.imageData.put.dirty.rect1.html ]]] --> 8664 8665 <p>Canvas test: 2d.imageData.put.dirty.rect1</p> 8666 <!-- Testing: putImageData() only modifies areas inside the dirty rectangle, using width and height --> 8667 <canvas id="c295" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8668 <script> 8669 8670 8671 function test_2d_imageData_put_dirty_rect1() { 8672 8673 var canvas = document.getElementById('c295'); 8674 var ctx = canvas.getContext('2d'); 8675 8676 var _thrown_outer = false; 8677 try { 8678 8679 ctx.fillStyle = '#f00'; 8680 ctx.fillRect(0, 0, 100, 50) 8681 ctx.fillStyle = '#0f0'; 8682 ctx.fillRect(0, 0, 20, 20) 8683 8684 var imgdata = ctx.getImageData(0, 0, 100, 50); 8685 8686 ctx.fillStyle = '#0f0'; 8687 ctx.fillRect(0, 0, 100, 50) 8688 ctx.fillStyle = '#f00'; 8689 ctx.fillRect(40, 20, 20, 20) 8690 ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20); 8691 8692 isPixel(ctx, 50,25, 0,255,0,255, 2); 8693 isPixel(ctx, 35,25, 0,255,0,255, 2); 8694 isPixel(ctx, 65,25, 0,255,0,255, 2); 8695 isPixel(ctx, 50,15, 0,255,0,255, 2); 8696 isPixel(ctx, 50,45, 0,255,0,255, 2); 8697 8698 } catch (e) { 8699 _thrown_outer = true; 8700 } 8701 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 8702 8703 8704 } 8705 </script> 8706 8707 <!-- [[[ test_2d.imageData.put.dirty.rect2.html ]]] --> 8708 8709 <p>Canvas test: 2d.imageData.put.dirty.rect2</p> 8710 <!-- Testing: putImageData() only modifies areas inside the dirty rectangle, using x and y --> 8711 <canvas id="c296" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8712 <script> 8713 8714 8715 function test_2d_imageData_put_dirty_rect2() { 8716 8717 var canvas = document.getElementById('c296'); 8718 var ctx = canvas.getContext('2d'); 8719 8720 var _thrown_outer = false; 8721 try { 8722 8723 ctx.fillStyle = '#f00'; 8724 ctx.fillRect(0, 0, 100, 50) 8725 ctx.fillStyle = '#0f0'; 8726 ctx.fillRect(60, 30, 20, 20) 8727 8728 var imgdata = ctx.getImageData(0, 0, 100, 50); 8729 8730 ctx.fillStyle = '#0f0'; 8731 ctx.fillRect(0, 0, 100, 50) 8732 ctx.fillStyle = '#f00'; 8733 ctx.fillRect(40, 20, 20, 20) 8734 ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20); 8735 8736 isPixel(ctx, 50,25, 0,255,0,255, 2); 8737 isPixel(ctx, 35,25, 0,255,0,255, 2); 8738 isPixel(ctx, 65,25, 0,255,0,255, 2); 8739 isPixel(ctx, 50,15, 0,255,0,255, 2); 8740 isPixel(ctx, 50,45, 0,255,0,255, 2); 8741 8742 } catch (e) { 8743 _thrown_outer = true; 8744 } 8745 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 8746 8747 8748 } 8749 </script> 8750 8751 <!-- [[[ test_2d.imageData.put.dirty.zero.html ]]] --> 8752 8753 <p>Canvas test: 2d.imageData.put.dirty.zero</p> 8754 <!-- Testing: putImageData() with zero-sized dirty rectangle puts nothing --> 8755 <canvas id="c297" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8756 <script> 8757 8758 8759 8760 function test_2d_imageData_put_dirty_zero() { 8761 8762 var canvas = document.getElementById('c297'); 8763 var ctx = canvas.getContext('2d'); 8764 8765 ctx.fillStyle = '#f00'; 8766 ctx.fillRect(0, 0, 100, 50) 8767 var imgdata = ctx.getImageData(0, 0, 100, 50); 8768 ctx.fillStyle = '#0f0'; 8769 ctx.fillRect(0, 0, 100, 50) 8770 ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0); 8771 isPixel(ctx, 50,25, 0,255,0,255, 2); 8772 8773 8774 } 8775 </script> 8776 8777 <!-- [[[ test_2d.imageData.put.modified.html ]]] --> 8778 8779 <p>Canvas test: 2d.imageData.put.modified</p> 8780 <!-- Testing: putImageData() puts modified image data correctly --> 8781 <canvas id="c298" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8782 <script> 8783 8784 8785 function test_2d_imageData_put_modified() { 8786 8787 var canvas = document.getElementById('c298'); 8788 var ctx = canvas.getContext('2d'); 8789 8790 ctx.fillStyle = '#0f0'; 8791 ctx.fillRect(0, 0, 100, 50) 8792 ctx.fillStyle = '#f00'; 8793 ctx.fillRect(45, 20, 10, 10) 8794 var imgdata = ctx.getImageData(45, 20, 10, 10); 8795 for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4) 8796 { 8797 imgdata.data[i] = 0; 8798 imgdata.data[i+1] = 255; 8799 } 8800 ctx.putImageData(imgdata, 45, 20); 8801 isPixel(ctx, 50,25, 0,255,0,255, 2); 8802 8803 8804 } 8805 </script> 8806 8807 <!-- [[[ test_2d.imageData.put.nonfinite.html ]]] --> 8808 8809 <p>Canvas test: 2d.imageData.put.nonfinite</p> 8810 <!-- Testing: putImageData() throws NOT_SUPPORTED_ERR if arguments are not finite --> 8811 <canvas id="c299" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 8812 <script> 8813 8814 // eslint-disable-next-line complexity 8815 function test_2d_imageData_put_nonfinite() { 8816 8817 var canvas = document.getElementById('c299'); 8818 var ctx = canvas.getContext('2d'); 8819 8820 var imgdata = ctx.getImageData(0, 0, 10, 10); 8821 var _thrown = undefined; try { 8822 ctx.putImageData(imgdata, Infinity, 10); 8823 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8824 var _thrown = undefined; try { 8825 ctx.putImageData(imgdata, -Infinity, 10); 8826 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8827 var _thrown = undefined; try { 8828 ctx.putImageData(imgdata, NaN, 10); 8829 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8830 var _thrown = undefined; try { 8831 ctx.putImageData(imgdata, 10, Infinity); 8832 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8833 var _thrown = undefined; try { 8834 ctx.putImageData(imgdata, 10, -Infinity); 8835 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8836 var _thrown = undefined; try { 8837 ctx.putImageData(imgdata, 10, NaN); 8838 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8839 var _thrown = undefined; try { 8840 ctx.putImageData(imgdata, Infinity, Infinity); 8841 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8842 var _thrown = undefined; try { 8843 ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, 10); 8844 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8845 var _thrown = undefined; try { 8846 ctx.putImageData(imgdata, -Infinity, 10, 10, 10, 10, 10); 8847 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8848 var _thrown = undefined; try { 8849 ctx.putImageData(imgdata, NaN, 10, 10, 10, 10, 10); 8850 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8851 var _thrown = undefined; try { 8852 ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, 10); 8853 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8854 var _thrown = undefined; try { 8855 ctx.putImageData(imgdata, 10, -Infinity, 10, 10, 10, 10); 8856 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8857 var _thrown = undefined; try { 8858 ctx.putImageData(imgdata, 10, NaN, 10, 10, 10, 10); 8859 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8860 var _thrown = undefined; try { 8861 ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, 10); 8862 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8863 var _thrown = undefined; try { 8864 ctx.putImageData(imgdata, 10, 10, -Infinity, 10, 10, 10); 8865 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8866 var _thrown = undefined; try { 8867 ctx.putImageData(imgdata, 10, 10, NaN, 10, 10, 10); 8868 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8869 var _thrown = undefined; try { 8870 ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, 10); 8871 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8872 var _thrown = undefined; try { 8873 ctx.putImageData(imgdata, 10, 10, 10, -Infinity, 10, 10); 8874 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8875 var _thrown = undefined; try { 8876 ctx.putImageData(imgdata, 10, 10, 10, NaN, 10, 10); 8877 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8878 var _thrown = undefined; try { 8879 ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, 10); 8880 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8881 var _thrown = undefined; try { 8882 ctx.putImageData(imgdata, 10, 10, 10, 10, -Infinity, 10); 8883 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8884 var _thrown = undefined; try { 8885 ctx.putImageData(imgdata, 10, 10, 10, 10, NaN, 10); 8886 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8887 var _thrown = undefined; try { 8888 ctx.putImageData(imgdata, 10, 10, 10, 10, 10, Infinity); 8889 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8890 var _thrown = undefined; try { 8891 ctx.putImageData(imgdata, 10, 10, 10, 10, 10, -Infinity); 8892 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8893 var _thrown = undefined; try { 8894 ctx.putImageData(imgdata, 10, 10, 10, 10, 10, NaN); 8895 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8896 var _thrown = undefined; try { 8897 ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, 10); 8898 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8899 var _thrown = undefined; try { 8900 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, 10); 8901 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8902 var _thrown = undefined; try { 8903 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, 10); 8904 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8905 var _thrown = undefined; try { 8906 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, 10); 8907 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8908 var _thrown = undefined; try { 8909 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); 8910 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8911 var _thrown = undefined; try { 8912 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, Infinity); 8913 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8914 var _thrown = undefined; try { 8915 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, 10); 8916 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8917 var _thrown = undefined; try { 8918 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, Infinity); 8919 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8920 var _thrown = undefined; try { 8921 ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, Infinity); 8922 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8923 var _thrown = undefined; try { 8924 ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, 10); 8925 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8926 var _thrown = undefined; try { 8927 ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, 10); 8928 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8929 var _thrown = undefined; try { 8930 ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, Infinity); 8931 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8932 var _thrown = undefined; try { 8933 ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, Infinity); 8934 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8935 var _thrown = undefined; try { 8936 ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, 10); 8937 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8938 var _thrown = undefined; try { 8939 ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, Infinity); 8940 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8941 var _thrown = undefined; try { 8942 ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, Infinity); 8943 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8944 var _thrown = undefined; try { 8945 ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, 10); 8946 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8947 var _thrown = undefined; try { 8948 ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, 10); 8949 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8950 var _thrown = undefined; try { 8951 ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 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, Infinity, Infinity, Infinity, Infinity); 8955 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8956 var _thrown = undefined; try { 8957 ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, Infinity); 8958 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8959 var _thrown = undefined; try { 8960 ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, 10); 8961 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8962 var _thrown = undefined; try { 8963 ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, Infinity); 8964 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8965 var _thrown = undefined; try { 8966 ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, Infinity); 8967 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8968 var _thrown = undefined; try { 8969 ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, 10); 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, Infinity, Infinity, 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, Infinity, Infinity, Infinity); 8976 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8977 var _thrown = undefined; try { 8978 ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, Infinity); 8979 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8980 var _thrown = undefined; try { 8981 ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, 10); 8982 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8983 var _thrown = undefined; try { 8984 ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, Infinity); 8985 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8986 var _thrown = undefined; try { 8987 ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, Infinity); 8988 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8989 var _thrown = undefined; try { 8990 ctx.putImageData(imgdata, 10, Infinity, 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, Infinity, Infinity, Infinity, 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, Infinity, Infinity, Infinity, Infinity, 10); 8997 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 8998 var _thrown = undefined; try { 8999 ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, Infinity); 9000 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9001 var _thrown = undefined; try { 9002 ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, Infinity); 9003 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9004 var _thrown = undefined; try { 9005 ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, 10); 9006 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9007 var _thrown = undefined; try { 9008 ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, Infinity); 9009 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9010 var _thrown = undefined; try { 9011 ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, Infinity); 9012 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9013 var _thrown = undefined; try { 9014 ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, 10); 9015 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9016 var _thrown = undefined; try { 9017 ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, 10); 9018 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9019 var _thrown = undefined; try { 9020 ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, Infinity); 9021 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9022 var _thrown = undefined; try { 9023 ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, Infinity); 9024 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9025 var _thrown = undefined; try { 9026 ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, 10); 9027 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9028 var _thrown = undefined; try { 9029 ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, Infinity); 9030 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9031 var _thrown = undefined; try { 9032 ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, Infinity); 9033 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9034 var _thrown = undefined; try { 9035 ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, 10); 9036 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9037 var _thrown = undefined; try { 9038 ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, 10); 9039 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9040 var _thrown = undefined; try { 9041 ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, Infinity); 9042 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9043 var _thrown = undefined; try { 9044 ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, Infinity); 9045 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9046 var _thrown = undefined; try { 9047 ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, 10); 9048 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9049 var _thrown = undefined; try { 9050 ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, Infinity); 9051 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9052 var _thrown = undefined; try { 9053 ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, Infinity); 9054 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9055 var _thrown = undefined; try { 9056 ctx.putImageData(imgdata, 10, 10, 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, 10, 10, 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, 10, 10, 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, 10, 10, 10, 10, Infinity, Infinity); 9066 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError"); 9067 9068 9069 } 9070 </script> 9071 9072 <!-- [[[ test_2d.imageData.put.null.html ]]] --> 9073 9074 <p>Canvas test: 2d.imageData.put.null - bug 421715</p> 9075 <!-- Testing: putImageData() with null imagedata throws TYPE_MISMATCH_ERR --> 9076 <canvas id="c300" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9077 <script> 9078 9079 function test_2d_imageData_put_null() { 9080 9081 var canvas = document.getElementById('c300'); 9082 var ctx = canvas.getContext('2d'); 9083 9084 var _thrown = undefined; try { 9085 ctx.putImageData(null, 0, 0); 9086 } catch (e) { _thrown = e }; 9087 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 9088 9089 } 9090 </script> 9091 9092 <!-- [[[ test_2d.imageData.put.path.html ]]] --> 9093 9094 <p>Canvas test: 2d.imageData.put.path</p> 9095 <!-- Testing: putImageData() does not affect the current path --> 9096 <canvas id="c301" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9097 <script> 9098 9099 9100 function test_2d_imageData_put_path() { 9101 9102 var canvas = document.getElementById('c301'); 9103 var ctx = canvas.getContext('2d'); 9104 9105 ctx.fillStyle = '#f00'; 9106 ctx.fillRect(0, 0, 100, 50) 9107 ctx.rect(0, 0, 100, 50); 9108 var imgdata = ctx.getImageData(0, 0, 100, 50); 9109 ctx.putImageData(imgdata, 0, 0); 9110 ctx.fillStyle = '#0f0'; 9111 ctx.fill(); 9112 isPixel(ctx, 50,25, 0,255,0,255, 2); 9113 9114 9115 } 9116 </script> 9117 9118 <!-- [[[ test_2d.imageData.put.unaffected.html ]]] --> 9119 9120 <p>Canvas test: 2d.imageData.put.unaffected</p> 9121 <!-- Testing: putImageData() is not affected by context state --> 9122 <canvas id="c302" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9123 <script> 9124 9125 9126 function test_2d_imageData_put_unaffected() { 9127 9128 var canvas = document.getElementById('c302'); 9129 var ctx = canvas.getContext('2d'); 9130 9131 ctx.fillStyle = '#0f0'; 9132 ctx.fillRect(0, 0, 100, 50) 9133 var imgdata = ctx.getImageData(0, 0, 100, 50); 9134 ctx.fillStyle = '#f00'; 9135 ctx.fillRect(0, 0, 100, 50) 9136 ctx.globalAlpha = 0.1; 9137 ctx.globalCompositeOperation = 'destination-atop'; 9138 ctx.shadowColor = '#f00'; 9139 ctx.translate(100, 50); 9140 ctx.scale(0.1, 0.1); 9141 ctx.putImageData(imgdata, 0, 0); 9142 isPixel(ctx, 50,25, 0,255,0,255, 2); 9143 9144 9145 } 9146 </script> 9147 9148 <!-- [[[ test_2d.imageData.put.unchanged.html ]]] --> 9149 9150 <p>Canvas test: 2d.imageData.put.unchanged</p> 9151 <!-- Testing: putImageData(getImageData(...), ...) has no effect --> 9152 <canvas id="c303" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9153 <script> 9154 9155 function test_2d_imageData_put_unchanged() { 9156 9157 var canvas = document.getElementById('c303'); 9158 var ctx = canvas.getContext('2d'); 9159 9160 var i = 0; 9161 for (var y = 0; y < 16; ++y) { 9162 for (var x = 0; x < 16; ++x, ++i) { 9163 ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')'; 9164 ctx.fillRect(x, y, 1, 1); 9165 } 9166 } 9167 var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9); 9168 var olddata = []; 9169 for (var i = 0; i < imgdata1.data.length; ++i) 9170 olddata[i] = imgdata1.data[i]; 9171 9172 ctx.putImageData(imgdata1, 0.1, 0.2); 9173 9174 var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9); 9175 for (var i = 0; i < imgdata2.data.length; ++i) { 9176 ok(olddata[i] === imgdata2.data[i], "olddata[\""+(i)+"\"] === imgdata2.data[\""+(i)+"\"]"); 9177 } 9178 9179 9180 } 9181 </script> 9182 9183 <!-- [[[ test_2d.imageData.put.wrongtype.html ]]] --> 9184 9185 <p>Canvas test: 2d.imageData.put.wrongtype</p> 9186 <!-- Testing: putImageData() does not accept non-ImageData objects --> 9187 <canvas id="c304" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9188 <script> 9189 9190 function test_2d_imageData_put_wrongtype() { 9191 9192 var canvas = document.getElementById('c304'); 9193 var ctx = canvas.getContext('2d'); 9194 9195 var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] }; 9196 var _thrown = undefined; try { 9197 ctx.putImageData(imgdata, 0, 0); 9198 } catch (e) { _thrown = e }; 9199 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 9200 9201 var _thrown = undefined; try { 9202 ctx.putImageData("cheese", 0, 0); 9203 } catch (e) { _thrown = e }; 9204 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 9205 9206 var _thrown = undefined; try { 9207 ctx.putImageData(42, 0, 0); 9208 } catch (e) { _thrown = e }; 9209 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 9210 } 9211 </script> 9212 9213 <!-- [[[ test_2d.line.cap.butt.html ]]] --> 9214 9215 <p>Canvas test: 2d.line.cap.butt</p> 9216 <!-- Testing: lineCap 'butt' is rendered correctly --> 9217 <canvas id="c305" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9218 <script> 9219 9220 9221 function test_2d_line_cap_butt() { 9222 9223 var canvas = document.getElementById('c305'); 9224 var ctx = canvas.getContext('2d'); 9225 9226 ctx.fillStyle = '#0f0'; 9227 ctx.fillRect(0, 0, 100, 50); 9228 9229 ctx.lineCap = 'butt'; 9230 ctx.lineWidth = 20; 9231 9232 ctx.fillStyle = '#f00'; 9233 ctx.strokeStyle = '#0f0'; 9234 ctx.fillRect(15, 15, 20, 20); 9235 ctx.beginPath(); 9236 ctx.moveTo(25, 15); 9237 ctx.lineTo(25, 35); 9238 ctx.stroke(); 9239 9240 ctx.fillStyle = '#0f0'; 9241 ctx.strokeStyle = '#f00'; 9242 ctx.beginPath(); 9243 ctx.moveTo(75, 15); 9244 ctx.lineTo(75, 35); 9245 ctx.stroke(); 9246 ctx.fillRect(65, 15, 20, 20); 9247 9248 isPixel(ctx, 25,14, 0,255,0,255, 0); 9249 isPixel(ctx, 25,15, 0,255,0,255, 0); 9250 isPixel(ctx, 25,16, 0,255,0,255, 0); 9251 isPixel(ctx, 25,34, 0,255,0,255, 0); 9252 isPixel(ctx, 25,35, 0,255,0,255, 0); 9253 isPixel(ctx, 25,36, 0,255,0,255, 0); 9254 9255 isPixel(ctx, 75,14, 0,255,0,255, 0); 9256 isPixel(ctx, 75,15, 0,255,0,255, 0); 9257 isPixel(ctx, 75,16, 0,255,0,255, 0); 9258 isPixel(ctx, 75,34, 0,255,0,255, 0); 9259 isPixel(ctx, 75,35, 0,255,0,255, 0); 9260 isPixel(ctx, 75,36, 0,255,0,255, 0); 9261 9262 9263 } 9264 </script> 9265 9266 <!-- [[[ test_2d.line.cap.closed.html ]]] --> 9267 9268 <p>Canvas test: 2d.line.cap.closed</p> 9269 <!-- Testing: Line caps are not drawn at the corners of an unclosed rectangle --> 9270 <canvas id="c306" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9271 <script> 9272 9273 9274 function test_2d_line_cap_closed() { 9275 9276 var canvas = document.getElementById('c306'); 9277 var ctx = canvas.getContext('2d'); 9278 9279 ctx.fillStyle = '#0f0'; 9280 ctx.strokeStyle = '#f00'; 9281 ctx.fillRect(0, 0, 100, 50); 9282 9283 ctx.lineJoin = 'bevel'; 9284 ctx.lineCap = 'square'; 9285 ctx.lineWidth = 400; 9286 9287 ctx.beginPath(); 9288 ctx.moveTo(200, 200); 9289 ctx.lineTo(200, 1000); 9290 ctx.lineTo(1000, 1000); 9291 ctx.lineTo(1000, 200); 9292 ctx.closePath(); 9293 ctx.stroke(); 9294 9295 isPixel(ctx, 1,1, 0,255,0,255, 0); 9296 isPixel(ctx, 48,1, 0,255,0,255, 0); 9297 isPixel(ctx, 48,48, 0,255,0,255, 0); 9298 isPixel(ctx, 1,48, 0,255,0,255, 0); 9299 9300 9301 } 9302 </script> 9303 9304 <!-- [[[ test_2d.line.cap.invalid.html ]]] --> 9305 9306 <p>Canvas test: 2d.line.cap.invalid - bug 401788</p> 9307 <!-- Testing: Setting lineCap to invalid values is ignored --> 9308 <canvas id="c307" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9309 <script> 9310 9311 function test_2d_line_cap_invalid() { 9312 9313 var canvas = document.getElementById('c307'); 9314 var ctx = canvas.getContext('2d'); 9315 9316 var _thrown_outer = false; 9317 try { 9318 9319 ctx.lineCap = 'butt' 9320 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'"); 9321 9322 ctx.lineCap = 'butt'; 9323 ctx.lineCap = 'invalid'; 9324 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'"); 9325 9326 ctx.lineCap = 'butt'; 9327 ctx.lineCap = 'ROUND'; 9328 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'"); 9329 9330 ctx.lineCap = 'butt'; 9331 ctx.lineCap = 'round\0'; 9332 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'"); 9333 9334 ctx.lineCap = 'butt'; 9335 ctx.lineCap = 'round '; 9336 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'"); 9337 9338 ctx.lineCap = 'butt'; 9339 ctx.lineCap = ""; 9340 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'"); 9341 9342 ctx.lineCap = 'butt'; 9343 ctx.lineCap = 'bevel'; 9344 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'"); 9345 9346 } catch (e) { 9347 _thrown_outer = true; 9348 } 9349 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 9350 9351 9352 } 9353 </script> 9354 9355 <!-- [[[ test_2d.line.cap.open.html ]]] --> 9356 9357 <p>Canvas test: 2d.line.cap.open</p> 9358 <!-- Testing: Line caps are drawn at the corners of an unclosed rectangle --> 9359 <canvas id="c308" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9360 <script> 9361 9362 9363 function test_2d_line_cap_open() { 9364 9365 var canvas = document.getElementById('c308'); 9366 var ctx = canvas.getContext('2d'); 9367 9368 ctx.fillStyle = '#f00'; 9369 ctx.strokeStyle = '#0f0'; 9370 ctx.fillRect(0, 0, 100, 50); 9371 9372 ctx.lineJoin = 'bevel'; 9373 ctx.lineCap = 'square'; 9374 ctx.lineWidth = 400; 9375 9376 ctx.beginPath(); 9377 ctx.moveTo(200, 200); 9378 ctx.lineTo(200, 1000); 9379 ctx.lineTo(1000, 1000); 9380 ctx.lineTo(1000, 200); 9381 ctx.lineTo(200, 200); 9382 ctx.stroke(); 9383 9384 isPixel(ctx, 1,1, 0,255,0,255, 0); 9385 isPixel(ctx, 48,1, 0,255,0,255, 0); 9386 isPixel(ctx, 48,48, 0,255,0,255, 0); 9387 isPixel(ctx, 1,48, 0,255,0,255, 0); 9388 9389 9390 } 9391 </script> 9392 9393 <!-- [[[ test_2d.line.cap.round.html ]]] --> 9394 9395 <p>Canvas test: 2d.line.cap.round</p> 9396 <!-- Testing: lineCap 'round' is rendered correctly --> 9397 <canvas id="c309" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9398 <script> 9399 9400 9401 function test_2d_line_cap_round() { 9402 9403 var canvas = document.getElementById('c309'); 9404 var ctx = canvas.getContext('2d'); 9405 9406 ctx.fillStyle = '#0f0'; 9407 ctx.fillRect(0, 0, 100, 50); 9408 9409 var tol = 1; // tolerance to avoid antialiasing artifacts 9410 9411 ctx.lineCap = 'round'; 9412 ctx.lineWidth = 20; 9413 9414 9415 ctx.fillStyle = '#f00'; 9416 ctx.strokeStyle = '#0f0'; 9417 9418 ctx.beginPath(); 9419 ctx.moveTo(35-tol, 15); 9420 ctx.arc(25, 15, 10-tol, 0, Math.PI, true); 9421 ctx.arc(25, 35, 10-tol, Math.PI, 0, true); 9422 ctx.fill(); 9423 9424 ctx.beginPath(); 9425 ctx.moveTo(25, 15); 9426 ctx.lineTo(25, 35); 9427 ctx.stroke(); 9428 9429 9430 ctx.fillStyle = '#0f0'; 9431 ctx.strokeStyle = '#f00'; 9432 9433 ctx.beginPath(); 9434 ctx.moveTo(75, 15); 9435 ctx.lineTo(75, 35); 9436 ctx.stroke(); 9437 9438 ctx.beginPath(); 9439 ctx.moveTo(85+tol, 15); 9440 ctx.arc(75, 15, 10+tol, 0, Math.PI, true); 9441 ctx.arc(75, 35, 10+tol, Math.PI, 0, true); 9442 ctx.fill(); 9443 9444 isPixel(ctx, 17,6, 0,255,0,255, 0); 9445 isPixel(ctx, 25,6, 0,255,0,255, 0); 9446 isPixel(ctx, 32,6, 0,255,0,255, 0); 9447 isPixel(ctx, 17,43, 0,255,0,255, 0); 9448 isPixel(ctx, 25,43, 0,255,0,255, 0); 9449 isPixel(ctx, 32,43, 0,255,0,255, 0); 9450 9451 isPixel(ctx, 67,6, 0,255,0,255, 0); 9452 isPixel(ctx, 75,6, 0,255,0,255, 0); 9453 isPixel(ctx, 82,6, 0,255,0,255, 0); 9454 isPixel(ctx, 67,43, 0,255,0,255, 0); 9455 isPixel(ctx, 75,43, 0,255,0,255, 0); 9456 isPixel(ctx, 82,43, 0,255,0,255, 0); 9457 9458 9459 } 9460 </script> 9461 9462 <!-- [[[ test_2d.line.cap.square.html ]]] --> 9463 9464 <p>Canvas test: 2d.line.cap.square</p> 9465 <!-- Testing: lineCap 'square' is rendered correctly --> 9466 <canvas id="c310" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9467 <script> 9468 9469 9470 function test_2d_line_cap_square() { 9471 9472 var canvas = document.getElementById('c310'); 9473 var ctx = canvas.getContext('2d'); 9474 9475 ctx.fillStyle = '#0f0'; 9476 ctx.fillRect(0, 0, 100, 50); 9477 9478 ctx.lineCap = 'square'; 9479 ctx.lineWidth = 20; 9480 9481 ctx.fillStyle = '#f00'; 9482 ctx.strokeStyle = '#0f0'; 9483 ctx.fillRect(15, 5, 20, 40); 9484 ctx.beginPath(); 9485 ctx.moveTo(25, 15); 9486 ctx.lineTo(25, 35); 9487 ctx.stroke(); 9488 9489 ctx.fillStyle = '#0f0'; 9490 ctx.strokeStyle = '#f00'; 9491 ctx.beginPath(); 9492 ctx.moveTo(75, 15); 9493 ctx.lineTo(75, 35); 9494 ctx.stroke(); 9495 ctx.fillRect(65, 5, 20, 40); 9496 9497 isPixel(ctx, 25,4, 0,255,0,255, 0); 9498 isPixel(ctx, 25,5, 0,255,0,255, 0); 9499 isPixel(ctx, 25,6, 0,255,0,255, 0); 9500 isPixel(ctx, 25,44, 0,255,0,255, 0); 9501 isPixel(ctx, 25,45, 0,255,0,255, 0); 9502 isPixel(ctx, 25,46, 0,255,0,255, 0); 9503 9504 isPixel(ctx, 75,4, 0,255,0,255, 0); 9505 isPixel(ctx, 75,5, 0,255,0,255, 0); 9506 isPixel(ctx, 75,6, 0,255,0,255, 0); 9507 isPixel(ctx, 75,44, 0,255,0,255, 0); 9508 isPixel(ctx, 75,45, 0,255,0,255, 0); 9509 isPixel(ctx, 75,46, 0,255,0,255, 0); 9510 9511 9512 } 9513 </script> 9514 9515 <!-- [[[ test_2d.line.cross.html ]]] --> 9516 9517 <p>Canvas test: 2d.line.cross</p> 9518 <canvas id="c311" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9519 <script> 9520 9521 9522 function test_2d_line_cross() { 9523 9524 var canvas = document.getElementById('c311'); 9525 var ctx = canvas.getContext('2d'); 9526 9527 ctx.fillStyle = '#0f0'; 9528 ctx.fillRect(0, 0, 100, 50); 9529 9530 ctx.lineWidth = 200; 9531 ctx.lineJoin = 'bevel'; 9532 9533 ctx.strokeStyle = '#f00'; 9534 ctx.beginPath(); 9535 ctx.moveTo(110, 50); 9536 ctx.lineTo(110, 60); 9537 ctx.lineTo(100, 60); 9538 ctx.stroke(); 9539 9540 isPixel(ctx, 1,1, 0,255,0,255, 0); 9541 isPixel(ctx, 48,1, 0,255,0,255, 0); 9542 isPixel(ctx, 48,48, 0,255,0,255, 0); 9543 isPixel(ctx, 1,48, 0,255,0,255, 0); 9544 9545 9546 } 9547 </script> 9548 9549 <!-- [[[ test_2d.line.defaults.html ]]] --> 9550 9551 <p>Canvas test: 2d.line.defaults</p> 9552 <canvas id="c312" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9553 <script> 9554 9555 function test_2d_line_defaults() { 9556 9557 var canvas = document.getElementById('c312'); 9558 var ctx = canvas.getContext('2d'); 9559 9560 ok(ctx.lineWidth === 1, "ctx.lineWidth === 1"); 9561 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'"); 9562 ok(ctx.lineJoin === 'miter', "ctx.lineJoin === 'miter'"); 9563 ok(ctx.miterLimit === 10, "ctx.miterLimit === 10"); 9564 9565 9566 } 9567 </script> 9568 9569 <!-- [[[ test_2d.line.join.bevel.html ]]] --> 9570 9571 <p>Canvas test: 2d.line.join.bevel</p> 9572 <!-- Testing: lineJoin 'bevel' is rendered correctly --> 9573 <canvas id="c313" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9574 <script> 9575 9576 9577 function test_2d_line_join_bevel() { 9578 9579 var canvas = document.getElementById('c313'); 9580 var ctx = canvas.getContext('2d'); 9581 9582 ctx.fillStyle = '#0f0'; 9583 ctx.fillRect(0, 0, 100, 50); 9584 9585 var tol = 1; // tolerance to avoid antialiasing artifacts 9586 9587 ctx.lineJoin = 'bevel'; 9588 ctx.lineWidth = 20; 9589 9590 ctx.fillStyle = '#f00'; 9591 ctx.strokeStyle = '#0f0'; 9592 9593 ctx.fillRect(10, 10, 20, 20); 9594 ctx.fillRect(20, 20, 20, 20); 9595 ctx.beginPath(); 9596 ctx.moveTo(30, 20); 9597 ctx.lineTo(40-tol, 20); 9598 ctx.lineTo(30, 10+tol); 9599 ctx.fill(); 9600 9601 ctx.beginPath(); 9602 ctx.moveTo(10, 20); 9603 ctx.lineTo(30, 20); 9604 ctx.lineTo(30, 40); 9605 ctx.stroke(); 9606 9607 9608 ctx.fillStyle = '#0f0'; 9609 ctx.strokeStyle = '#f00'; 9610 9611 ctx.beginPath(); 9612 ctx.moveTo(60, 20); 9613 ctx.lineTo(80, 20); 9614 ctx.lineTo(80, 40); 9615 ctx.stroke(); 9616 9617 ctx.fillRect(60, 10, 20, 20); 9618 ctx.fillRect(70, 20, 20, 20); 9619 ctx.beginPath(); 9620 ctx.moveTo(80, 20); 9621 ctx.lineTo(90+tol, 20); 9622 ctx.lineTo(80, 10-tol); 9623 ctx.fill(); 9624 9625 isPixel(ctx, 34,16, 0,255,0,255, 0); 9626 isPixel(ctx, 34,15, 0,255,0,255, 0); 9627 isPixel(ctx, 35,15, 0,255,0,255, 0); 9628 isPixel(ctx, 36,15, 0,255,0,255, 0); 9629 isPixel(ctx, 36,14, 0,255,0,255, 0); 9630 9631 isPixel(ctx, 84,16, 0,255,0,255, 0); 9632 isPixel(ctx, 84,15, 0,255,0,255, 0); 9633 isPixel(ctx, 85,15, 0,255,0,255, 0); 9634 isPixel(ctx, 86,15, 0,255,0,255, 0); 9635 isPixel(ctx, 86,14, 0,255,0,255, 0); 9636 9637 9638 } 9639 </script> 9640 9641 <!-- [[[ test_2d.line.join.closed.html ]]] --> 9642 9643 <p>Canvas test: 2d.line.join.closed</p> 9644 <!-- Testing: Line joins are drawn at the corner of a closed rectangle --> 9645 <canvas id="c314" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9646 <script> 9647 9648 9649 function test_2d_line_join_closed() { 9650 9651 var canvas = document.getElementById('c314'); 9652 var ctx = canvas.getContext('2d'); 9653 9654 ctx.fillStyle = '#f00'; 9655 ctx.strokeStyle = '#0f0'; 9656 ctx.fillRect(0, 0, 100, 50); 9657 9658 ctx.lineJoin = 'miter'; 9659 ctx.lineWidth = 200; 9660 9661 ctx.beginPath(); 9662 ctx.moveTo(100, 50); 9663 ctx.lineTo(100, 1000); 9664 ctx.lineTo(1000, 1000); 9665 ctx.lineTo(1000, 50); 9666 ctx.closePath(); 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.join.invalid.html ]]] --> 9679 9680 <p>Canvas test: 2d.line.join.invalid - bug 401788</p> 9681 <!-- Testing: Setting lineJoin to invalid values is ignored --> 9682 <canvas id="c315" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9683 <script> 9684 9685 function test_2d_line_join_invalid() { 9686 9687 var canvas = document.getElementById('c315'); 9688 var ctx = canvas.getContext('2d'); 9689 9690 var _thrown_outer = false; 9691 try { 9692 9693 ctx.lineJoin = 'bevel' 9694 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'"); 9695 9696 ctx.lineJoin = 'bevel'; 9697 ctx.lineJoin = 'invalid'; 9698 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'"); 9699 9700 ctx.lineJoin = 'bevel'; 9701 ctx.lineJoin = 'ROUND'; 9702 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'"); 9703 9704 ctx.lineJoin = 'bevel'; 9705 ctx.lineJoin = 'round\0'; 9706 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'"); 9707 9708 ctx.lineJoin = 'bevel'; 9709 ctx.lineJoin = 'round '; 9710 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'"); 9711 9712 ctx.lineJoin = 'bevel'; 9713 ctx.lineJoin = ""; 9714 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'"); 9715 9716 ctx.lineJoin = 'bevel'; 9717 ctx.lineJoin = 'butt'; 9718 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'"); 9719 9720 } catch (e) { 9721 _thrown_outer = true; 9722 } 9723 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 9724 9725 9726 } 9727 </script> 9728 9729 <!-- [[[ test_2d.line.join.miter.html ]]] --> 9730 9731 <p>Canvas test: 2d.line.join.miter</p> 9732 <!-- Testing: lineJoin 'miter' is rendered correctly --> 9733 <canvas id="c316" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9734 <script> 9735 9736 9737 function test_2d_line_join_miter() { 9738 9739 var canvas = document.getElementById('c316'); 9740 var ctx = canvas.getContext('2d'); 9741 9742 ctx.fillStyle = '#0f0'; 9743 ctx.fillRect(0, 0, 100, 50); 9744 9745 ctx.lineJoin = 'miter'; 9746 ctx.lineWidth = 20; 9747 9748 ctx.fillStyle = '#f00'; 9749 ctx.strokeStyle = '#0f0'; 9750 9751 ctx.fillStyle = '#f00'; 9752 ctx.strokeStyle = '#0f0'; 9753 9754 ctx.fillRect(10, 10, 30, 20); 9755 ctx.fillRect(20, 10, 20, 30); 9756 9757 ctx.beginPath(); 9758 ctx.moveTo(10, 20); 9759 ctx.lineTo(30, 20); 9760 ctx.lineTo(30, 40); 9761 ctx.stroke(); 9762 9763 9764 ctx.fillStyle = '#0f0'; 9765 ctx.strokeStyle = '#f00'; 9766 9767 ctx.beginPath(); 9768 ctx.moveTo(60, 20); 9769 ctx.lineTo(80, 20); 9770 ctx.lineTo(80, 40); 9771 ctx.stroke(); 9772 9773 ctx.fillRect(60, 10, 30, 20); 9774 ctx.fillRect(70, 10, 20, 30); 9775 9776 isPixel(ctx, 38,12, 0,255,0,255, 0); 9777 isPixel(ctx, 39,11, 0,255,0,255, 0); 9778 isPixel(ctx, 40,10, 0,255,0,255, 0); 9779 isPixel(ctx, 41,9, 0,255,0,255, 0); 9780 isPixel(ctx, 42,8, 0,255,0,255, 0); 9781 9782 isPixel(ctx, 88,12, 0,255,0,255, 0); 9783 isPixel(ctx, 89,11, 0,255,0,255, 0); 9784 isPixel(ctx, 90,10, 0,255,0,255, 0); 9785 isPixel(ctx, 91,9, 0,255,0,255, 0); 9786 isPixel(ctx, 92,8, 0,255,0,255, 0); 9787 9788 9789 } 9790 </script> 9791 9792 <!-- [[[ test_2d.line.join.open.html ]]] --> 9793 9794 <p>Canvas test: 2d.line.join.open</p> 9795 <!-- Testing: Line joins are not drawn at the corner of an unclosed rectangle --> 9796 <canvas id="c317" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9797 <script> 9798 9799 9800 function test_2d_line_join_open() { 9801 9802 var canvas = document.getElementById('c317'); 9803 var ctx = canvas.getContext('2d'); 9804 9805 ctx.fillStyle = '#0f0'; 9806 ctx.strokeStyle = '#f00'; 9807 ctx.fillRect(0, 0, 100, 50); 9808 9809 ctx.lineJoin = 'miter'; 9810 ctx.lineWidth = 200; 9811 9812 ctx.beginPath(); 9813 ctx.moveTo(100, 50); 9814 ctx.lineTo(100, 1000); 9815 ctx.lineTo(1000, 1000); 9816 ctx.lineTo(1000, 50); 9817 ctx.lineTo(100, 50); 9818 ctx.stroke(); 9819 9820 isPixel(ctx, 1,1, 0,255,0,255, 0); 9821 isPixel(ctx, 48,1, 0,255,0,255, 0); 9822 isPixel(ctx, 48,48, 0,255,0,255, 0); 9823 isPixel(ctx, 1,48, 0,255,0,255, 0); 9824 9825 9826 } 9827 </script> 9828 9829 <!-- [[[ test_2d.line.join.parallel.html ]]] --> 9830 9831 <p>Canvas test: 2d.line.join.parallel</p> 9832 <!-- Testing: Line joins are drawn at 180-degree joins --> 9833 <canvas id="c318" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9834 <script> 9835 9836 9837 function test_2d_line_join_parallel() { 9838 9839 var canvas = document.getElementById('c318'); 9840 var ctx = canvas.getContext('2d'); 9841 9842 ctx.fillStyle = '#f00'; 9843 ctx.fillRect(0, 0, 100, 50); 9844 9845 ctx.strokeStyle = '#0f0'; 9846 ctx.lineWidth = 300; 9847 ctx.lineJoin = 'round'; 9848 ctx.beginPath(); 9849 ctx.moveTo(-100, 25); 9850 ctx.lineTo(0, 25); 9851 ctx.lineTo(-100, 25); 9852 ctx.stroke(); 9853 9854 isPixel(ctx, 1,1, 0,255,0,255, 0); 9855 isPixel(ctx, 48,1, 0,255,0,255, 0); 9856 isPixel(ctx, 48,48, 0,255,0,255, 0); 9857 isPixel(ctx, 1,48, 0,255,0,255, 0); 9858 9859 9860 } 9861 </script> 9862 9863 <!-- [[[ test_2d.line.join.round.html ]]] --> 9864 9865 <p>Canvas test: 2d.line.join.round</p> 9866 <!-- Testing: lineJoin 'round' is rendered correctly --> 9867 <canvas id="c319" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9868 <script> 9869 9870 9871 function test_2d_line_join_round() { 9872 9873 var canvas = document.getElementById('c319'); 9874 var ctx = canvas.getContext('2d'); 9875 9876 ctx.fillStyle = '#0f0'; 9877 ctx.fillRect(0, 0, 100, 50); 9878 9879 var tol = 1; // tolerance to avoid antialiasing artifacts 9880 9881 ctx.lineJoin = 'round'; 9882 ctx.lineWidth = 20; 9883 9884 ctx.fillStyle = '#f00'; 9885 ctx.strokeStyle = '#0f0'; 9886 9887 ctx.fillRect(10, 10, 20, 20); 9888 ctx.fillRect(20, 20, 20, 20); 9889 ctx.beginPath(); 9890 ctx.moveTo(30, 20); 9891 ctx.arc(30, 20, 10-tol, 0, 2*Math.PI, true); 9892 ctx.fill(); 9893 9894 ctx.beginPath(); 9895 ctx.moveTo(10, 20); 9896 ctx.lineTo(30, 20); 9897 ctx.lineTo(30, 40); 9898 ctx.stroke(); 9899 9900 9901 ctx.fillStyle = '#0f0'; 9902 ctx.strokeStyle = '#f00'; 9903 9904 ctx.beginPath(); 9905 ctx.moveTo(60, 20); 9906 ctx.lineTo(80, 20); 9907 ctx.lineTo(80, 40); 9908 ctx.stroke(); 9909 9910 ctx.fillRect(60, 10, 20, 20); 9911 ctx.fillRect(70, 20, 20, 20); 9912 ctx.beginPath(); 9913 ctx.moveTo(80, 20); 9914 ctx.arc(80, 20, 10+tol, 0, 2*Math.PI, true); 9915 ctx.fill(); 9916 9917 isPixel(ctx, 36,14, 0,255,0,255, 0); 9918 isPixel(ctx, 36,13, 0,255,0,255, 0); 9919 isPixel(ctx, 37,13, 0,255,0,255, 0); 9920 isPixel(ctx, 38,13, 0,255,0,255, 0); 9921 isPixel(ctx, 38,12, 0,255,0,255, 0); 9922 9923 isPixel(ctx, 86,14, 0,255,0,255, 0); 9924 isPixel(ctx, 86,13, 0,255,0,255, 0); 9925 isPixel(ctx, 87,13, 0,255,0,255, 0); 9926 isPixel(ctx, 88,13, 0,255,0,255, 0); 9927 isPixel(ctx, 88,12, 0,255,0,255, 0); 9928 9929 9930 } 9931 </script> 9932 9933 <!-- [[[ test_2d.line.miter.acute.html ]]] --> 9934 9935 <p>Canvas test: 2d.line.miter.acute</p> 9936 <!-- Testing: Miter joins are drawn correctly with acute angles --> 9937 <canvas id="c320" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9938 <script> 9939 9940 9941 function test_2d_line_miter_acute() { 9942 9943 var canvas = document.getElementById('c320'); 9944 var ctx = canvas.getContext('2d'); 9945 9946 ctx.fillStyle = '#f00'; 9947 ctx.fillRect(0, 0, 100, 50); 9948 9949 ctx.lineWidth = 200; 9950 ctx.lineJoin = 'miter'; 9951 9952 ctx.strokeStyle = '#0f0'; 9953 ctx.miterLimit = 2.614; 9954 ctx.beginPath(); 9955 ctx.moveTo(100, 1000); 9956 ctx.lineTo(100, 100); 9957 ctx.lineTo(1000, 1000); 9958 ctx.stroke(); 9959 9960 ctx.strokeStyle = '#f00'; 9961 ctx.miterLimit = 2.613; 9962 ctx.beginPath(); 9963 ctx.moveTo(100, 1000); 9964 ctx.lineTo(100, 100); 9965 ctx.lineTo(1000, 1000); 9966 ctx.stroke(); 9967 9968 isPixel(ctx, 1,1, 0,255,0,255, 0); 9969 isPixel(ctx, 48,1, 0,255,0,255, 0); 9970 isPixel(ctx, 48,48, 0,255,0,255, 0); 9971 isPixel(ctx, 1,48, 0,255,0,255, 0); 9972 9973 9974 } 9975 </script> 9976 9977 <!-- [[[ test_2d.line.miter.exceeded.html ]]] --> 9978 9979 <p>Canvas test: 2d.line.miter.exceeded</p> 9980 <!-- Testing: Miter joins are not drawn when the miter limit is exceeded --> 9981 <canvas id="c321" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 9982 <script> 9983 9984 9985 function test_2d_line_miter_exceeded() { 9986 9987 var canvas = document.getElementById('c321'); 9988 var ctx = canvas.getContext('2d'); 9989 9990 ctx.fillStyle = '#0f0'; 9991 ctx.fillRect(0, 0, 100, 50); 9992 9993 ctx.lineWidth = 400; 9994 ctx.lineJoin = 'miter'; 9995 9996 ctx.strokeStyle = '#f00'; 9997 ctx.miterLimit = 1.414; 9998 ctx.beginPath(); 9999 ctx.moveTo(200, 1000); 10000 ctx.lineTo(200, 200); 10001 ctx.lineTo(1000, 201); // slightly non-right-angle to avoid being a special case 10002 ctx.stroke(); 10003 10004 isPixel(ctx, 1,1, 0,255,0,255, 0); 10005 isPixel(ctx, 48,1, 0,255,0,255, 0); 10006 isPixel(ctx, 48,48, 0,255,0,255, 0); 10007 isPixel(ctx, 1,48, 0,255,0,255, 0); 10008 10009 10010 } 10011 </script> 10012 10013 <!-- [[[ test_2d.line.miter.invalid.html ]]] --> 10014 10015 <p>Canvas test: 2d.line.miter.invalid</p> 10016 <!-- Testing: Setting miterLimit to invalid values is ignored --> 10017 <canvas id="c322" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10018 <script> 10019 10020 function test_2d_line_miter_invalid() { 10021 10022 var canvas = document.getElementById('c322'); 10023 var ctx = canvas.getContext('2d'); 10024 10025 var _thrown_outer = false; 10026 try { 10027 10028 ctx.miterLimit = 1.5; 10029 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5"); 10030 10031 ctx.miterLimit = 1.5; 10032 ctx.miterLimit = 0; 10033 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5"); 10034 10035 ctx.miterLimit = 1.5; 10036 ctx.miterLimit = -1; 10037 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5"); 10038 10039 ctx.miterLimit = 1.5; 10040 ctx.miterLimit = Infinity; 10041 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5"); 10042 10043 ctx.miterLimit = 1.5; 10044 ctx.miterLimit = -Infinity; 10045 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5"); 10046 10047 ctx.miterLimit = 1.5; 10048 ctx.miterLimit = NaN; 10049 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5"); 10050 10051 } catch (e) { 10052 _thrown_outer = true; 10053 } 10054 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 10055 10056 10057 } 10058 </script> 10059 10060 <!-- [[[ test_2d.line.miter.lineedge.html ]]] --> 10061 10062 <p>Canvas test: 2d.line.miter.lineedge - bug 401791</p> 10063 <!-- Testing: Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle --> 10064 <canvas id="c323" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10065 <script> 10066 10067 10068 function test_2d_line_miter_lineedge() { 10069 10070 var canvas = document.getElementById('c323'); 10071 var ctx = canvas.getContext('2d'); 10072 10073 ctx.fillStyle = '#0f0'; 10074 ctx.fillRect(0, 0, 100, 50); 10075 10076 ctx.lineWidth = 200; 10077 ctx.lineJoin = 'miter'; 10078 10079 ctx.strokeStyle = '#f00'; 10080 ctx.miterLimit = 1.414; 10081 ctx.beginPath(); 10082 ctx.strokeRect(100, 25, 200, 0); 10083 10084 isPixel(ctx, 1,1, 0,255,0,255, 0); 10085 isPixel(ctx, 48,1, 0,255,0,255, 0); 10086 isPixel(ctx, 48,48, 0,255,0,255, 0); 10087 isPixel(ctx, 1,48, 0,255,0,255, 0); 10088 10089 10090 } 10091 </script> 10092 10093 <!-- [[[ test_2d.line.miter.obtuse.html ]]] --> 10094 10095 <p>Canvas test: 2d.line.miter.obtuse</p> 10096 <!-- Testing: Miter joins are drawn correctly with obtuse angles --> 10097 <canvas id="c324" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10098 <script> 10099 10100 10101 function test_2d_line_miter_obtuse() { 10102 10103 var canvas = document.getElementById('c324'); 10104 var ctx = canvas.getContext('2d'); 10105 10106 ctx.fillStyle = '#f00'; 10107 ctx.fillRect(0, 0, 100, 50); 10108 10109 var x=800; 10110 var y=300; 10111 ctx.lineWidth = 1600; 10112 ctx.lineJoin = 'miter'; 10113 10114 ctx.strokeStyle = '#0f0'; 10115 ctx.miterLimit = 1.083; 10116 ctx.beginPath(); 10117 ctx.moveTo(800, 10000); 10118 ctx.lineTo(800, 300); 10119 ctx.lineTo(10000, -8900); 10120 ctx.stroke(); 10121 10122 ctx.strokeStyle = '#f00'; 10123 ctx.miterLimit = 1.082; 10124 ctx.beginPath(); 10125 ctx.moveTo(800, 10000); 10126 ctx.lineTo(800, 300); 10127 ctx.lineTo(10000, -8900); 10128 ctx.stroke(); 10129 10130 isPixel(ctx, 1,1, 0,255,0,255, 0); 10131 isPixel(ctx, 48,1, 0,255,0,255, 0); 10132 isPixel(ctx, 48,48, 0,255,0,255, 0); 10133 isPixel(ctx, 1,48, 0,255,0,255, 0); 10134 10135 10136 } 10137 </script> 10138 10139 <!-- [[[ test_2d.line.miter.rightangle.html ]]] --> 10140 10141 <p>Canvas test: 2d.line.miter.rightangle - bug 401791</p> 10142 <!-- Testing: Miter joins are not drawn when the miter limit is exceeded, on exact right angles --> 10143 <canvas id="c325" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10144 <script> 10145 10146 10147 function test_2d_line_miter_rightangle() { 10148 10149 var canvas = document.getElementById('c325'); 10150 var ctx = canvas.getContext('2d'); 10151 10152 ctx.fillStyle = '#0f0'; 10153 ctx.fillRect(0, 0, 100, 50); 10154 10155 ctx.lineWidth = 400; 10156 ctx.lineJoin = 'miter'; 10157 10158 ctx.strokeStyle = '#f00'; 10159 ctx.miterLimit = 1.414; 10160 ctx.beginPath(); 10161 ctx.moveTo(200, 1000); 10162 ctx.lineTo(200, 200); 10163 ctx.lineTo(1000, 200); 10164 ctx.stroke(); 10165 10166 isPixel(ctx, 1,1, 0,255,0,255, 0); 10167 isPixel(ctx, 48,1, 0,255,0,255, 0); 10168 isPixel(ctx, 48,48, 0,255,0,255, 0); 10169 isPixel(ctx, 1,48, 0,255,0,255, 0); 10170 10171 10172 } 10173 </script> 10174 10175 <!-- [[[ test_2d.line.miter.within.html ]]] --> 10176 10177 <p>Canvas test: 2d.line.miter.within</p> 10178 <!-- Testing: Miter joins are drawn when the miter limit is not quite exceeded --> 10179 <canvas id="c326" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10180 <script> 10181 10182 10183 function test_2d_line_miter_within() { 10184 10185 var canvas = document.getElementById('c326'); 10186 var ctx = canvas.getContext('2d'); 10187 10188 ctx.fillStyle = '#f00'; 10189 ctx.fillRect(0, 0, 100, 50); 10190 10191 ctx.lineWidth = 400; 10192 ctx.lineJoin = 'miter'; 10193 10194 ctx.strokeStyle = '#0f0'; 10195 ctx.miterLimit = 1.416; 10196 ctx.beginPath(); 10197 ctx.moveTo(200, 1000); 10198 ctx.lineTo(200, 200); 10199 ctx.lineTo(1000, 201); 10200 ctx.stroke(); 10201 10202 isPixel(ctx, 1,1, 0,255,0,255, 0); 10203 isPixel(ctx, 48,1, 0,255,0,255, 0); 10204 isPixel(ctx, 48,48, 0,255,0,255, 0); 10205 isPixel(ctx, 1,48, 0,255,0,255, 0); 10206 10207 10208 } 10209 </script> 10210 10211 <!-- [[[ test_2d.line.union.html ]]] --> 10212 10213 <p>Canvas test: 2d.line.union</p> 10214 <canvas id="c327" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10215 <script> 10216 10217 10218 function test_2d_line_union() { 10219 10220 var canvas = document.getElementById('c327'); 10221 var ctx = canvas.getContext('2d'); 10222 10223 ctx.fillStyle = '#f00'; 10224 ctx.fillRect(0, 0, 100, 50); 10225 10226 ctx.lineWidth = 100; 10227 ctx.lineCap = 'round'; 10228 10229 ctx.strokeStyle = '#0f0'; 10230 ctx.beginPath(); 10231 ctx.moveTo(0, 24); 10232 ctx.lineTo(100, 25); 10233 ctx.lineTo(0, 26); 10234 ctx.closePath(); 10235 ctx.stroke(); 10236 10237 isPixel(ctx, 1,1, 0,255,0,255, 0); 10238 isPixel(ctx, 25,1, 0,255,0,255, 0); 10239 isPixel(ctx, 48,1, 0,255,0,255, 0); 10240 isPixel(ctx, 1,48, 0,255,0,255, 0); 10241 isPixel(ctx, 25,1, 0,255,0,255, 0); 10242 isPixel(ctx, 48,48, 0,255,0,255, 0); 10243 10244 10245 } 10246 </script> 10247 10248 <!-- [[[ test_2d.line.width.basic.html ]]] --> 10249 10250 <p>Canvas test: 2d.line.width.basic</p> 10251 <!-- Testing: lineWidth determines the width of line strokes --> 10252 <canvas id="c328" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10253 <script> 10254 10255 10256 function test_2d_line_width_basic() { 10257 10258 var canvas = document.getElementById('c328'); 10259 var ctx = canvas.getContext('2d'); 10260 10261 ctx.fillStyle = '#0f0'; 10262 ctx.fillRect(0, 0, 100, 50); 10263 10264 ctx.lineWidth = 20; 10265 // Draw a green line over a red box, to check the line is not too small 10266 ctx.fillStyle = '#f00'; 10267 ctx.strokeStyle = '#0f0'; 10268 ctx.fillRect(15, 15, 20, 20); 10269 ctx.beginPath(); 10270 ctx.moveTo(25, 15); 10271 ctx.lineTo(25, 35); 10272 ctx.stroke(); 10273 10274 // Draw a green box over a red line, to check the line is not too large 10275 ctx.fillStyle = '#0f0'; 10276 ctx.strokeStyle = '#f00'; 10277 ctx.beginPath(); 10278 ctx.moveTo(75, 15); 10279 ctx.lineTo(75, 35); 10280 ctx.stroke(); 10281 ctx.fillRect(65, 15, 20, 20); 10282 10283 isPixel(ctx, 14,25, 0,255,0,255, 0); 10284 isPixel(ctx, 15,25, 0,255,0,255, 0); 10285 isPixel(ctx, 16,25, 0,255,0,255, 0); 10286 isPixel(ctx, 25,25, 0,255,0,255, 0); 10287 isPixel(ctx, 34,25, 0,255,0,255, 0); 10288 isPixel(ctx, 35,25, 0,255,0,255, 0); 10289 isPixel(ctx, 36,25, 0,255,0,255, 0); 10290 10291 isPixel(ctx, 64,25, 0,255,0,255, 0); 10292 isPixel(ctx, 65,25, 0,255,0,255, 0); 10293 isPixel(ctx, 66,25, 0,255,0,255, 0); 10294 isPixel(ctx, 75,25, 0,255,0,255, 0); 10295 isPixel(ctx, 84,25, 0,255,0,255, 0); 10296 isPixel(ctx, 85,25, 0,255,0,255, 0); 10297 isPixel(ctx, 86,25, 0,255,0,255, 0); 10298 10299 10300 } 10301 </script> 10302 10303 <!-- [[[ test_2d.line.width.invalid.html ]]] --> 10304 10305 <p>Canvas test: 2d.line.width.invalid</p> 10306 <!-- Testing: Setting lineWidth to invalid values is ignored --> 10307 <canvas id="c329" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10308 <script> 10309 10310 function test_2d_line_width_invalid() { 10311 10312 var canvas = document.getElementById('c329'); 10313 var ctx = canvas.getContext('2d'); 10314 10315 var _thrown_outer = false; 10316 try { 10317 10318 ctx.lineWidth = 1.5; 10319 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5"); 10320 10321 ctx.lineWidth = 1.5; 10322 ctx.lineWidth = 0; 10323 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5"); 10324 10325 ctx.lineWidth = 1.5; 10326 ctx.lineWidth = -1; 10327 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5"); 10328 10329 ctx.lineWidth = 1.5; 10330 ctx.lineWidth = Infinity; 10331 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5"); 10332 10333 ctx.lineWidth = 1.5; 10334 ctx.lineWidth = -Infinity; 10335 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5"); 10336 10337 ctx.lineWidth = 1.5; 10338 ctx.lineWidth = NaN; 10339 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5"); 10340 10341 } catch (e) { 10342 _thrown_outer = true; 10343 } 10344 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 10345 10346 10347 } 10348 </script> 10349 10350 <!-- [[[ test_2d.line.width.transformed.html ]]] --> 10351 10352 <p>Canvas test: 2d.line.width.transformed</p> 10353 <!-- Testing: Line stroke widths are affected by scale transformations --> 10354 <canvas id="c330" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10355 <script> 10356 10357 10358 function test_2d_line_width_transformed() { 10359 10360 var canvas = document.getElementById('c330'); 10361 var ctx = canvas.getContext('2d'); 10362 10363 ctx.fillStyle = '#0f0'; 10364 ctx.fillRect(0, 0, 100, 50); 10365 10366 ctx.lineWidth = 4; 10367 // Draw a green line over a red box, to check the line is not too small 10368 ctx.fillStyle = '#f00'; 10369 ctx.strokeStyle = '#0f0'; 10370 ctx.fillRect(15, 15, 20, 20); 10371 ctx.save(); 10372 ctx.scale(5, 1); 10373 ctx.beginPath(); 10374 ctx.moveTo(5, 15); 10375 ctx.lineTo(5, 35); 10376 ctx.stroke(); 10377 ctx.restore(); 10378 10379 // Draw a green box over a red line, to check the line is not too large 10380 ctx.fillStyle = '#0f0'; 10381 ctx.strokeStyle = '#f00'; 10382 ctx.save(); 10383 ctx.scale(-5, 1); 10384 ctx.beginPath(); 10385 ctx.moveTo(-15, 15); 10386 ctx.lineTo(-15, 35); 10387 ctx.stroke(); 10388 ctx.restore(); 10389 ctx.fillRect(65, 15, 20, 20); 10390 10391 isPixel(ctx, 14,25, 0,255,0,255, 0); 10392 isPixel(ctx, 15,25, 0,255,0,255, 0); 10393 isPixel(ctx, 16,25, 0,255,0,255, 0); 10394 isPixel(ctx, 25,25, 0,255,0,255, 0); 10395 isPixel(ctx, 34,25, 0,255,0,255, 0); 10396 isPixel(ctx, 35,25, 0,255,0,255, 0); 10397 isPixel(ctx, 36,25, 0,255,0,255, 0); 10398 10399 isPixel(ctx, 64,25, 0,255,0,255, 0); 10400 isPixel(ctx, 65,25, 0,255,0,255, 0); 10401 isPixel(ctx, 66,25, 0,255,0,255, 0); 10402 isPixel(ctx, 75,25, 0,255,0,255, 0); 10403 isPixel(ctx, 84,25, 0,255,0,255, 0); 10404 isPixel(ctx, 85,25, 0,255,0,255, 0); 10405 isPixel(ctx, 86,25, 0,255,0,255, 0); 10406 10407 10408 } 10409 </script> 10410 10411 <!-- [[[ test_2d.missingargs.html ]]] --> 10412 10413 <p>Canvas test: 2d.missingargs</p> 10414 <!-- Testing: Missing arguments cause NOT_SUPPORTED_ERR --> 10415 <canvas id="c331" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10416 <script> 10417 10418 // eslint-disable-next-line complexity 10419 function test_2d_missingargs() { 10420 10421 var canvas = document.getElementById('c331'); 10422 var ctx = canvas.getContext('2d'); 10423 10424 var _thrown = undefined; try { 10425 ctx.scale(); 10426 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10427 var _thrown = undefined; try { 10428 ctx.scale(1); 10429 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10430 var _thrown = undefined; try { 10431 ctx.rotate(); 10432 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10433 var _thrown = undefined; try { 10434 ctx.translate(); 10435 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10436 var _thrown = undefined; try { 10437 ctx.translate(0); 10438 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10439 if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported) 10440 var _thrown = undefined; try { 10441 ctx.transform(); 10442 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10443 var _thrown = undefined; try { 10444 ctx.transform(1); 10445 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10446 var _thrown = undefined; try { 10447 ctx.transform(1, 0); 10448 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10449 var _thrown = undefined; try { 10450 ctx.transform(1, 0, 0); 10451 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10452 var _thrown = undefined; try { 10453 ctx.transform(1, 0, 0, 1); 10454 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10455 var _thrown = undefined; try { 10456 ctx.transform(1, 0, 0, 1, 0); 10457 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10458 } 10459 if (ctx.setTransform) { 10460 var _thrown = undefined; try { 10461 ctx.setTransform(); 10462 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10463 var _thrown = undefined; try { 10464 ctx.setTransform(1); 10465 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10466 var _thrown = undefined; try { 10467 ctx.setTransform(1, 0); 10468 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10469 var _thrown = undefined; try { 10470 ctx.setTransform(1, 0, 0); 10471 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10472 var _thrown = undefined; try { 10473 ctx.setTransform(1, 0, 0, 1); 10474 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10475 var _thrown = undefined; try { 10476 ctx.setTransform(1, 0, 0, 1, 0); 10477 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10478 } 10479 var _thrown = undefined; try { 10480 ctx.createLinearGradient(); 10481 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10482 var _thrown = undefined; try { 10483 ctx.createLinearGradient(0); 10484 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10485 var _thrown = undefined; try { 10486 ctx.createLinearGradient(0, 0); 10487 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10488 var _thrown = undefined; try { 10489 ctx.createLinearGradient(0, 0, 1); 10490 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10491 var _thrown = undefined; try { 10492 ctx.createRadialGradient(); 10493 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10494 var _thrown = undefined; try { 10495 ctx.createRadialGradient(0); 10496 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10497 var _thrown = undefined; try { 10498 ctx.createRadialGradient(0, 0); 10499 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10500 var _thrown = undefined; try { 10501 ctx.createRadialGradient(0, 0, 1); 10502 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10503 var _thrown = undefined; try { 10504 ctx.createRadialGradient(0, 0, 1, 0); 10505 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10506 var _thrown = undefined; try { 10507 ctx.createRadialGradient(0, 0, 1, 0, 0); 10508 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10509 var _thrown = undefined; try { 10510 ctx.createPattern(canvas); 10511 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10512 var _thrown = undefined; try { 10513 ctx.clearRect(); 10514 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10515 var _thrown = undefined; try { 10516 ctx.clearRect(0); 10517 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10518 var _thrown = undefined; try { 10519 ctx.clearRect(0, 0); 10520 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10521 var _thrown = undefined; try { 10522 ctx.clearRect(0, 0, 0); 10523 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10524 var _thrown = undefined; try { 10525 ctx.fillRect(); 10526 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10527 var _thrown = undefined; try { 10528 ctx.fillRect(0); 10529 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10530 var _thrown = undefined; try { 10531 ctx.fillRect(0, 0); 10532 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10533 var _thrown = undefined; try { 10534 ctx.fillRect(0, 0, 0); 10535 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10536 var _thrown = undefined; try { 10537 ctx.strokeRect(); 10538 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10539 var _thrown = undefined; try { 10540 ctx.strokeRect(0); 10541 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10542 var _thrown = undefined; try { 10543 ctx.strokeRect(0, 0); 10544 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10545 var _thrown = undefined; try { 10546 ctx.strokeRect(0, 0, 0); 10547 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10548 var _thrown = undefined; try { 10549 ctx.moveTo(); 10550 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10551 var _thrown = undefined; try { 10552 ctx.moveTo(0); 10553 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10554 var _thrown = undefined; try { 10555 ctx.lineTo(); 10556 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10557 var _thrown = undefined; try { 10558 ctx.lineTo(0); 10559 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10560 var _thrown = undefined; try { 10561 ctx.quadraticCurveTo(); 10562 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10563 var _thrown = undefined; try { 10564 ctx.quadraticCurveTo(0); 10565 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10566 var _thrown = undefined; try { 10567 ctx.quadraticCurveTo(0, 0); 10568 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10569 var _thrown = undefined; try { 10570 ctx.quadraticCurveTo(0, 0, 0); 10571 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10572 var _thrown = undefined; try { 10573 ctx.bezierCurveTo(); 10574 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10575 var _thrown = undefined; try { 10576 ctx.bezierCurveTo(0); 10577 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10578 var _thrown = undefined; try { 10579 ctx.bezierCurveTo(0, 0); 10580 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10581 var _thrown = undefined; try { 10582 ctx.bezierCurveTo(0, 0, 0); 10583 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10584 var _thrown = undefined; try { 10585 ctx.bezierCurveTo(0, 0, 0, 0); 10586 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10587 var _thrown = undefined; try { 10588 ctx.bezierCurveTo(0, 0, 0, 0, 0); 10589 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10590 var _thrown = undefined; try { 10591 ctx.arcTo(); 10592 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10593 var _thrown = undefined; try { 10594 ctx.arcTo(0); 10595 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10596 var _thrown = undefined; try { 10597 ctx.arcTo(0, 0); 10598 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10599 var _thrown = undefined; try { 10600 ctx.arcTo(0, 0, 0); 10601 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10602 var _thrown = undefined; try { 10603 ctx.arcTo(0, 0, 0, 0); 10604 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10605 var _thrown = undefined; try { 10606 ctx.rect(); 10607 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10608 var _thrown = undefined; try { 10609 ctx.rect(0); 10610 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10611 var _thrown = undefined; try { 10612 ctx.rect(0, 0); 10613 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10614 var _thrown = undefined; try { 10615 ctx.rect(0, 0, 0); 10616 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10617 var _thrown = undefined; try { 10618 ctx.arc(); 10619 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10620 var _thrown = undefined; try { 10621 ctx.arc(0); 10622 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10623 var _thrown = undefined; try { 10624 ctx.arc(0, 0); 10625 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10626 var _thrown = undefined; try { 10627 ctx.arc(0, 0, 1); 10628 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10629 var _thrown = undefined; try { 10630 ctx.arc(0, 0, 1, 0); 10631 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10632 var _thrown = undefined; try { 10633 ctx.arc(0, 0, 1, 0, 0); 10634 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10635 if (ctx.isPointInPath) { 10636 var _thrown = undefined; try { 10637 ctx.isPointInPath(); 10638 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10639 var _thrown = undefined; try { 10640 ctx.isPointInPath(0); 10641 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10642 } 10643 var _thrown = undefined; try { 10644 ctx.drawImage(); 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.drawImage(canvas); 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.drawImage(canvas, 0); 10651 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10652 // TODO: n >= 3 args on drawImage could be either a valid overload, 10653 // or too few for another overload, or too many for another 10654 // overload - what should happen? 10655 if (ctx.createImageData) { 10656 var _thrown = undefined; try { 10657 ctx.createImageData(); 10658 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10659 var _thrown = undefined; try { 10660 ctx.createImageData(1); 10661 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10662 } 10663 if (ctx.getImageData) { 10664 var _thrown = undefined; try { 10665 ctx.getImageData(); 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.getImageData(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.getImageData(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.getImageData(0, 0, 1); 10675 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10676 } 10677 if (ctx.putImageData) { 10678 var imgdata = ctx.getImageData(0, 0, 1, 1); 10679 var _thrown = undefined; try { 10680 ctx.putImageData(); 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.putImageData(imgdata); 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.putImageData(imgdata, 0); 10687 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10688 } 10689 var g = ctx.createLinearGradient(0, 0, 0, 0); 10690 var _thrown = undefined; try { 10691 g.addColorStop(); 10692 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10693 var _thrown = undefined; try { 10694 g.addColorStop(0); 10695 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 10696 10697 10698 } 10699 </script> 10700 10701 <!-- [[[ test_2d.path.arc.angle.1.html ]]] --> 10702 10703 <p>Canvas test: 2d.path.arc.angle.1</p> 10704 <!-- Testing: arc() draws pi/2 .. -pi anticlockwise correctly --> 10705 <canvas id="c332" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10706 <script> 10707 10708 10709 function test_2d_path_arc_angle_1() { 10710 10711 var canvas = document.getElementById('c332'); 10712 var ctx = canvas.getContext('2d'); 10713 10714 ctx.fillStyle = '#0f0'; 10715 ctx.fillRect(0, 0, 100, 50); 10716 ctx.fillStyle = '#f00'; 10717 ctx.beginPath(); 10718 ctx.moveTo(100, 0); 10719 ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true); 10720 ctx.fill(); 10721 isPixel(ctx, 50,25, 0,255,0,255, 0); 10722 10723 10724 } 10725 </script> 10726 10727 <!-- [[[ test_2d.path.arc.angle.2.html ]]] --> 10728 10729 <p>Canvas test: 2d.path.arc.angle.2</p> 10730 <!-- Testing: arc() draws -3pi/2 .. -pi anticlockwise correctly --> 10731 <canvas id="c333" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10732 <script> 10733 10734 10735 function test_2d_path_arc_angle_2() { 10736 10737 var canvas = document.getElementById('c333'); 10738 var ctx = canvas.getContext('2d'); 10739 10740 ctx.fillStyle = '#0f0'; 10741 ctx.fillRect(0, 0, 100, 50); 10742 ctx.fillStyle = '#f00'; 10743 ctx.beginPath(); 10744 ctx.moveTo(100, 0); 10745 ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true); 10746 ctx.fill(); 10747 isPixel(ctx, 50,25, 0,255,0,255, 0); 10748 10749 10750 } 10751 </script> 10752 10753 <!-- [[[ test_2d.path.arc.angle.3.html ]]] --> 10754 10755 <p>Canvas test: 2d.path.arc.angle.3</p> 10756 <!-- Testing: arc() wraps angles mod 2pi when anticlockwise and end > start+2pi --> 10757 <canvas id="c334" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10758 <script> 10759 10760 10761 function test_2d_path_arc_angle_3() { 10762 10763 var canvas = document.getElementById('c334'); 10764 var ctx = canvas.getContext('2d'); 10765 10766 ctx.fillStyle = '#0f0'; 10767 ctx.fillRect(0, 0, 100, 50); 10768 ctx.fillStyle = '#f00'; 10769 ctx.beginPath(); 10770 ctx.moveTo(100, 0); 10771 ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true); 10772 ctx.fill(); 10773 isPixel(ctx, 50,25, 0,255,0,255, 0); 10774 10775 10776 } 10777 </script> 10778 10779 <!-- [[[ test_2d.path.arc.angle.4.html ]]] --> 10780 10781 <p>Canvas test: 2d.path.arc.angle.4</p> 10782 <!-- Testing: arc() draws a full circle when clockwise and end > start+2pi --> 10783 <canvas id="c335" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10784 <script> 10785 10786 10787 function test_2d_path_arc_angle_4() { 10788 10789 var canvas = document.getElementById('c335'); 10790 var ctx = canvas.getContext('2d'); 10791 10792 ctx.fillStyle = '#f00'; 10793 ctx.fillRect(0, 0, 100, 50); 10794 ctx.fillStyle = '#0f0'; 10795 ctx.beginPath(); 10796 ctx.moveTo(50, 25); 10797 ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false); 10798 ctx.fill(); 10799 isPixel(ctx, 1,1, 0,255,0,255, 0); 10800 isPixel(ctx, 98,1, 0,255,0,255, 0); 10801 isPixel(ctx, 1,48, 0,255,0,255, 0); 10802 isPixel(ctx, 98,48, 0,255,0,255, 0); 10803 10804 10805 } 10806 </script> 10807 10808 <!-- [[[ test_2d.path.arc.angle.5.html ]]] --> 10809 10810 <p>Canvas test: 2d.path.arc.angle.5</p> 10811 <!-- Testing: arc() wraps angles mod 2pi when clockwise and start > end+2pi --> 10812 <canvas id="c336" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10813 <script> 10814 10815 10816 function test_2d_path_arc_angle_5() { 10817 10818 var canvas = document.getElementById('c336'); 10819 var ctx = canvas.getContext('2d'); 10820 10821 ctx.fillStyle = '#0f0'; 10822 ctx.fillRect(0, 0, 100, 50); 10823 ctx.fillStyle = '#f00'; 10824 ctx.beginPath(); 10825 ctx.moveTo(100, 0); 10826 ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false); 10827 ctx.fill(); 10828 isPixel(ctx, 50,25, 0,255,0,255, 0); 10829 10830 10831 } 10832 </script> 10833 10834 <!-- [[[ test_2d.path.arc.angle.6.html ]]] --> 10835 10836 <p>Canvas test: 2d.path.arc.angle.6</p> 10837 <!-- Testing: arc() draws a full circle when anticlockwise and start > end+2pi --> 10838 <canvas id="c337" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10839 <script> 10840 10841 10842 function test_2d_path_arc_angle_6() { 10843 10844 var canvas = document.getElementById('c337'); 10845 var ctx = canvas.getContext('2d'); 10846 10847 ctx.fillStyle = '#f00'; 10848 ctx.fillRect(0, 0, 100, 50); 10849 ctx.fillStyle = '#0f0'; 10850 ctx.beginPath(); 10851 ctx.moveTo(50, 25); 10852 ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true); 10853 ctx.fill(); 10854 isPixel(ctx, 1,1, 0,255,0,255, 0); 10855 isPixel(ctx, 98,1, 0,255,0,255, 0); 10856 isPixel(ctx, 1,48, 0,255,0,255, 0); 10857 isPixel(ctx, 98,48, 0,255,0,255, 0); 10858 10859 10860 } 10861 </script> 10862 10863 <!-- [[[ test_2d.path.arc.empty.html ]]] --> 10864 10865 <p>Canvas test: 2d.path.arc.empty</p> 10866 <!-- Testing: arc() with an empty path does not draw a straight line to the start point --> 10867 <canvas id="c338" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10868 <script> 10869 10870 10871 function test_2d_path_arc_empty() { 10872 10873 var canvas = document.getElementById('c338'); 10874 var ctx = canvas.getContext('2d'); 10875 10876 ctx.fillStyle = '#0f0'; 10877 ctx.fillRect(0, 0, 100, 50); 10878 ctx.lineWidth = 50; 10879 ctx.strokeStyle = '#f00'; 10880 ctx.beginPath(); 10881 ctx.arc(200, 25, 5, 0, 2*Math.PI, true); 10882 ctx.stroke(); 10883 isPixel(ctx, 50,25, 0,255,0,255, 0); 10884 10885 10886 } 10887 </script> 10888 10889 <!-- [[[ test_2d.path.arc.end.html ]]] --> 10890 10891 <p>Canvas test: 2d.path.arc.end</p> 10892 <!-- Testing: arc() adds the end point of the arc to the subpath --> 10893 <canvas id="c339" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10894 <script> 10895 10896 10897 function test_2d_path_arc_end() { 10898 10899 var canvas = document.getElementById('c339'); 10900 var ctx = canvas.getContext('2d'); 10901 10902 ctx.fillStyle = '#f00'; 10903 ctx.fillRect(0, 0, 100, 50); 10904 ctx.lineWidth = 50; 10905 ctx.strokeStyle = '#0f0'; 10906 ctx.beginPath(); 10907 ctx.moveTo(-100, 0); 10908 ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true); 10909 ctx.lineTo(100, 25); 10910 ctx.stroke(); 10911 isPixel(ctx, 50,25, 0,255,0,255, 0); 10912 10913 10914 } 10915 </script> 10916 10917 <!-- [[[ test_2d.path.arc.negative.html ]]] --> 10918 10919 <p>Canvas test: 2d.path.arc.negative</p> 10920 <!-- Testing: arc() with negative radius throws INDEX_SIZE_ERR --> 10921 <canvas id="c340" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10922 <script> 10923 10924 function test_2d_path_arc_negative() { 10925 10926 var canvas = document.getElementById('c340'); 10927 var ctx = canvas.getContext('2d'); 10928 10929 var _thrown = undefined; try { 10930 ctx.arc(0, 0, -1, 0, 0, true); 10931 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 10932 10933 10934 } 10935 </script> 10936 10937 <!-- [[[ test_2d.path.arc.nonempty.html ]]] --> 10938 10939 <p>Canvas test: 2d.path.arc.nonempty</p> 10940 <!-- Testing: arc() with a non-empty path does draw a straight line to the start point --> 10941 <canvas id="c341" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10942 <script> 10943 10944 10945 function test_2d_path_arc_nonempty() { 10946 10947 var canvas = document.getElementById('c341'); 10948 var ctx = canvas.getContext('2d'); 10949 10950 ctx.fillStyle = '#f00'; 10951 ctx.fillRect(0, 0, 100, 50); 10952 ctx.lineWidth = 50; 10953 ctx.strokeStyle = '#0f0'; 10954 ctx.beginPath(); 10955 ctx.moveTo(0, 25); 10956 ctx.arc(200, 25, 5, 0, 2*Math.PI, true); 10957 ctx.stroke(); 10958 isPixel(ctx, 50,25, 0,255,0,255, 0); 10959 10960 10961 } 10962 </script> 10963 10964 <!-- [[[ test_2d.path.arc.nonfinite.html ]]] --> 10965 10966 <p>Canvas test: 2d.path.arc.nonfinite</p> 10967 <!-- Testing: arc() with Infinity/NaN is ignored --> 10968 <canvas id="c342" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 10969 <script> 10970 10971 10972 function test_2d_path_arc_nonfinite() { 10973 10974 var canvas = document.getElementById('c342'); 10975 var ctx = canvas.getContext('2d'); 10976 10977 var _thrown_outer = false; 10978 try { 10979 10980 ctx.fillStyle = '#f00'; 10981 ctx.fillRect(0, 0, 100, 50); 10982 ctx.moveTo(0, 0); 10983 ctx.lineTo(100, 0); 10984 ctx.arc(Infinity, 50, 0, 2*Math.PI, true); 10985 ctx.arc(-Infinity, 50, 0, 2*Math.PI, true); 10986 ctx.arc(NaN, 50, 0, 2*Math.PI, true); 10987 ctx.arc(0, Infinity, 0, 2*Math.PI, true); 10988 ctx.arc(0, -Infinity, 0, 2*Math.PI, true); 10989 ctx.arc(0, NaN, 0, 2*Math.PI, true); 10990 ctx.arc(0, 50, Infinity, 2*Math.PI, true); 10991 ctx.arc(0, 50, -Infinity, 2*Math.PI, true); 10992 ctx.arc(0, 50, NaN, 2*Math.PI, true); 10993 ctx.arc(0, 50, 0, Infinity, true); 10994 ctx.arc(0, 50, 0, -Infinity, true); 10995 ctx.arc(0, 50, 0, NaN, true); 10996 ctx.arc(Infinity, Infinity, 0, 2*Math.PI, true); 10997 ctx.arc(Infinity, Infinity, Infinity, 2*Math.PI, true); 10998 ctx.arc(Infinity, Infinity, Infinity, Infinity, true); 10999 ctx.arc(Infinity, Infinity, 0, Infinity, true); 11000 ctx.arc(Infinity, 50, Infinity, 2*Math.PI, true); 11001 ctx.arc(Infinity, 50, Infinity, Infinity, true); 11002 ctx.arc(Infinity, 50, 0, Infinity, true); 11003 ctx.arc(0, Infinity, Infinity, 2*Math.PI, true); 11004 ctx.arc(0, Infinity, Infinity, Infinity, true); 11005 ctx.arc(0, Infinity, 0, Infinity, true); 11006 ctx.arc(0, 50, Infinity, Infinity, true); 11007 ctx.lineTo(100, 50); 11008 ctx.lineTo(0, 50); 11009 ctx.fillStyle = '#0f0'; 11010 ctx.fill(); 11011 isPixel(ctx, 50,25, 0,255,0,255, 0); 11012 isPixel(ctx, 90,45, 0,255,0,255, 0); 11013 11014 } catch (e) { 11015 _thrown_outer = true; 11016 } 11017 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 11018 11019 11020 } 11021 </script> 11022 11023 <!-- [[[ test_2d.path.arc.scale.1.html ]]] --> 11024 11025 <p>Canvas test: 2d.path.arc.scale.1</p> 11026 <!-- Testing: Non-uniformly scaled arcs are the right shape --> 11027 <canvas id="c343" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11028 <script> 11029 11030 11031 function test_2d_path_arc_scale_1() { 11032 11033 var canvas = document.getElementById('c343'); 11034 var ctx = canvas.getContext('2d'); 11035 11036 ctx.fillStyle = '#f00'; 11037 ctx.fillRect(0, 0, 100, 50); 11038 ctx.scale(2, 0.5); 11039 ctx.fillStyle = '#0f0'; 11040 ctx.beginPath(); 11041 var hypothenuse = Math.sqrt(50 * 50 + 25 * 25); 11042 var tolerance = 0.5; 11043 var radius = hypothenuse + tolerance; 11044 ctx.arc(25, 50, radius, 0, 2*Math.PI, false); 11045 ctx.fill(); 11046 ctx.fillStyle = '#f00'; 11047 ctx.beginPath(); 11048 ctx.moveTo(-25, 50); 11049 ctx.arc(-25, 50, 24, 0, 2*Math.PI, false); 11050 ctx.moveTo(75, 50); 11051 ctx.arc(75, 50, 24, 0, 2*Math.PI, false); 11052 ctx.moveTo(25, -25); 11053 ctx.arc(25, -25, 24, 0, 2*Math.PI, false); 11054 ctx.moveTo(25, 125); 11055 ctx.arc(25, 125, 24, 0, 2*Math.PI, false); 11056 ctx.fill(); 11057 11058 isPixel(ctx, 0,0, 0,255,0,255, 0); 11059 isPixel(ctx, 50,0, 0,255,0,255, 0); 11060 isPixel(ctx, 99,0, 0,255,0,255, 0); 11061 isPixel(ctx, 0,25, 0,255,0,255, 0); 11062 isPixel(ctx, 50,25, 0,255,0,255, 0); 11063 isPixel(ctx, 99,25, 0,255,0,255, 0); 11064 isPixel(ctx, 0,49, 0,255,0,255, 0); 11065 isPixel(ctx, 50,49, 0,255,0,255, 0); 11066 isPixel(ctx, 99,49, 0,255,0,255, 0); 11067 11068 11069 } 11070 </script> 11071 11072 <!-- [[[ test_2d.path.arc.scale.2.html ]]] --> 11073 11074 <p>Canvas test: 2d.path.arc.scale.2</p> 11075 <!-- Testing: Highly scaled arcs are the right shape --> 11076 <canvas id="c344" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11077 <script> 11078 11079 11080 function test_2d_path_arc_scale_2() { 11081 11082 var canvas = document.getElementById('c344'); 11083 var ctx = canvas.getContext('2d'); 11084 11085 ctx.fillStyle = '#f00'; 11086 ctx.fillRect(0, 0, 100, 50); 11087 ctx.scale(100, 100); 11088 ctx.strokeStyle = '#0f0'; 11089 ctx.lineWidth = 1.2; 11090 ctx.beginPath(); 11091 ctx.arc(0, 0, 0.6, 0, Math.PI/2, false); 11092 ctx.stroke(); 11093 11094 isPixel(ctx, 1,1, 0,255,0,255, 0); 11095 isPixel(ctx, 50,1, 0,255,0,255, 0); 11096 isPixel(ctx, 98,1, 0,255,0,255, 0); 11097 isPixel(ctx, 1,25, 0,255,0,255, 0); 11098 isPixel(ctx, 50,25, 0,255,0,255, 0); 11099 isPixel(ctx, 98,25, 0,255,0,255, 0); 11100 isPixel(ctx, 1,48, 0,255,0,255, 0); 11101 isPixel(ctx, 50,48, 0,255,0,255, 0); 11102 isPixel(ctx, 98,48, 0,255,0,255, 0); 11103 11104 11105 } 11106 </script> 11107 11108 <!-- [[[ test_2d.path.arc.selfintersect.1.html ]]] --> 11109 11110 <p>Canvas test: 2d.path.arc.selfintersect.1</p> 11111 <!-- Testing: arc() with lineWidth > 2*radius is drawn sensibly --> 11112 <canvas id="c345" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11113 <script> 11114 11115 11116 function test_2d_path_arc_selfintersect_1() { 11117 11118 var canvas = document.getElementById('c345'); 11119 var ctx = canvas.getContext('2d'); 11120 11121 ctx.fillStyle = '#0f0'; 11122 ctx.fillRect(0, 0, 100, 50); 11123 ctx.lineWidth = 200; 11124 ctx.strokeStyle = '#f00'; 11125 ctx.beginPath(); 11126 ctx.arc(100, 50, 25, 0, -Math.PI/2, true); 11127 ctx.stroke(); 11128 ctx.beginPath(); 11129 ctx.arc(0, 0, 25, 0, -Math.PI/2, true); 11130 ctx.stroke(); 11131 isPixel(ctx, 50,25, 0,255,0,255, 0); 11132 11133 11134 } 11135 </script> 11136 11137 <!-- [[[ test_2d.path.arc.selfintersect.2.html ]]] --> 11138 11139 <p>Canvas test: 2d.path.arc.selfintersect.2</p> 11140 <!-- Testing: arc() with lineWidth > 2*radius is drawn sensibly --> 11141 <canvas id="c346" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11142 <script> 11143 11144 11145 function test_2d_path_arc_selfintersect_2() { 11146 11147 var canvas = document.getElementById('c346'); 11148 var ctx = canvas.getContext('2d'); 11149 11150 ctx.fillStyle = '#f00'; 11151 ctx.fillRect(0, 0, 100, 50); 11152 ctx.lineWidth = 180; 11153 ctx.strokeStyle = '#0f0'; 11154 ctx.beginPath(); 11155 ctx.arc(-50, 50, 25, 0, -Math.PI/2, true); 11156 ctx.stroke(); 11157 ctx.beginPath(); 11158 ctx.arc(100, 0, 25, 0, -Math.PI/2, true); 11159 ctx.stroke(); 11160 isPixel(ctx, 50,25, 0,255,0,255, 0); 11161 isPixel(ctx, 90,10, 0,255,0,255, 0); 11162 isPixel(ctx, 97,1, 0,255,0,255, 0); 11163 isPixel(ctx, 97,2, 0,255,0,255, 0); 11164 isPixel(ctx, 97,3, 0,255,0,255, 0); 11165 isPixel(ctx, 2,48, 0,255,0,255, 0); 11166 11167 11168 } 11169 </script> 11170 11171 <!-- [[[ test_2d.path.arc.shape.1.html ]]] --> 11172 11173 <p>Canvas test: 2d.path.arc.shape.1</p> 11174 <!-- Testing: arc() from 0 to pi does not draw anything in the wrong half --> 11175 <canvas id="c347" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11176 <script> 11177 11178 11179 function test_2d_path_arc_shape_1() { 11180 11181 var canvas = document.getElementById('c347'); 11182 var ctx = canvas.getContext('2d'); 11183 11184 ctx.fillStyle = '#0f0'; 11185 ctx.fillRect(0, 0, 100, 50); 11186 ctx.lineWidth = 50; 11187 ctx.strokeStyle = '#f00'; 11188 ctx.beginPath(); 11189 ctx.arc(50, 50, 50, 0, Math.PI, false); 11190 ctx.stroke(); 11191 isPixel(ctx, 50,25, 0,255,0,255, 0); 11192 isPixel(ctx, 1,1, 0,255,0,255, 0); 11193 isPixel(ctx, 98,1, 0,255,0,255, 0); 11194 isPixel(ctx, 1,48, 0,255,0,255, 0); 11195 isPixel(ctx, 20,48, 0,255,0,255, 0); 11196 isPixel(ctx, 98,48, 0,255,0,255, 0); 11197 11198 } 11199 </script> 11200 11201 <!-- [[[ test_2d.path.arc.shape.2.html ]]] --> 11202 11203 <p>Canvas test: 2d.path.arc.shape.2</p> 11204 <!-- Testing: arc() from 0 to pi draws stuff in the right half --> 11205 <canvas id="c348" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11206 <script> 11207 11208 11209 function test_2d_path_arc_shape_2() { 11210 11211 var canvas = document.getElementById('c348'); 11212 var ctx = canvas.getContext('2d'); 11213 11214 ctx.fillStyle = '#f00'; 11215 ctx.fillRect(0, 0, 100, 50); 11216 ctx.lineWidth = 100; 11217 ctx.strokeStyle = '#0f0'; 11218 ctx.beginPath(); 11219 ctx.arc(50, 50, 50, 0, Math.PI, true); 11220 ctx.stroke(); 11221 isPixel(ctx, 50,25, 0,255,0,255, 0); 11222 isPixel(ctx, 1,1, 0,255,0,255, 0); 11223 isPixel(ctx, 98,1, 0,255,0,255, 0); 11224 isPixel(ctx, 1,48, 0,255,0,255, 0); 11225 isPixel(ctx, 20,48, 0,255,0,255, 0); 11226 isPixel(ctx, 98,48, 0,255,0,255, 0); 11227 11228 11229 } 11230 </script> 11231 11232 <!-- [[[ test_2d.path.arc.shape.3.html ]]] --> 11233 11234 <p>Canvas test: 2d.path.arc.shape.3</p> 11235 <!-- Testing: arc() from 0 to -pi/2 does not draw anything in the wrong quadrant --> 11236 <canvas id="c349" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11237 <script> 11238 11239 11240 11241 function test_2d_path_arc_shape_3() { 11242 11243 var canvas = document.getElementById('c349'); 11244 var ctx = canvas.getContext('2d'); 11245 11246 ctx.fillStyle = '#0f0'; 11247 ctx.fillRect(0, 0, 100, 50); 11248 ctx.lineWidth = 100; 11249 ctx.strokeStyle = '#f00'; 11250 ctx.beginPath(); 11251 ctx.arc(0, 50, 50, 0, -Math.PI/2, false); 11252 ctx.stroke(); 11253 isPixel(ctx, 50,25, 0,255,0,255, 0); 11254 isPixel(ctx, 1,1, 0,255,0,255, 0); 11255 isPixel(ctx, 98,1, 0,255,0,255, 0); 11256 isPixel(ctx, 1,48, 0,255,0,255, 0); 11257 isPixel(ctx, 98,48, 0,255,0,255, 0); 11258 11259 11260 } 11261 </script> 11262 11263 <!-- [[[ test_2d.path.arc.shape.4.html ]]] --> 11264 11265 <p>Canvas test: 2d.path.arc.shape.4</p> 11266 <!-- Testing: arc() from 0 to -pi/2 draws stuff in the right quadrant --> 11267 <canvas id="c350" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11268 <script> 11269 11270 11271 function test_2d_path_arc_shape_4() { 11272 11273 var canvas = document.getElementById('c350'); 11274 var ctx = canvas.getContext('2d'); 11275 11276 ctx.fillStyle = '#f00'; 11277 ctx.fillRect(0, 0, 100, 50); 11278 ctx.lineWidth = 150; 11279 ctx.strokeStyle = '#0f0'; 11280 ctx.beginPath(); 11281 ctx.arc(-50, 50, 100, 0, -Math.PI/2, true); 11282 ctx.stroke(); 11283 isPixel(ctx, 50,25, 0,255,0,255, 0); 11284 isPixel(ctx, 1,1, 0,255,0,255, 0); 11285 isPixel(ctx, 98,1, 0,255,0,255, 0); 11286 isPixel(ctx, 1,48, 0,255,0,255, 0); 11287 isPixel(ctx, 98,48, 0,255,0,255, 0); 11288 11289 11290 } 11291 </script> 11292 11293 <!-- [[[ test_2d.path.arc.shape.5.html ]]] --> 11294 11295 <p>Canvas test: 2d.path.arc.shape.5</p> 11296 <!-- Testing: arc() from 0 to 5pi does not draw strange things --> 11297 <canvas id="c351" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11298 <script> 11299 11300 11301 function test_2d_path_arc_shape_5() { 11302 11303 var canvas = document.getElementById('c351'); 11304 var ctx = canvas.getContext('2d'); 11305 11306 ctx.fillStyle = '#0f0'; 11307 ctx.fillRect(0, 0, 100, 50); 11308 ctx.lineWidth = 200; 11309 ctx.strokeStyle = '#f00'; 11310 ctx.beginPath(); 11311 ctx.arc(300, 0, 100, 0, 5*Math.PI, false); 11312 ctx.stroke(); 11313 isPixel(ctx, 50,25, 0,255,0,255, 0); 11314 isPixel(ctx, 1,1, 0,255,0,255, 0); 11315 isPixel(ctx, 98,1, 0,255,0,255, 0); 11316 isPixel(ctx, 1,48, 0,255,0,255, 0); 11317 isPixel(ctx, 98,48, 0,255,0,255, 0); 11318 11319 11320 } 11321 </script> 11322 11323 <!-- [[[ test_2d.path.arc.twopie.1.html ]]] --> 11324 11325 <p>Canvas test: 2d.path.arc.twopie.1</p> 11326 <!-- Testing: arc() draws nothing when end = start + 2pi-e and anticlockwise --> 11327 <canvas id="c352" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11328 <script> 11329 11330 11331 function test_2d_path_arc_twopie_1() { 11332 11333 var canvas = document.getElementById('c352'); 11334 var ctx = canvas.getContext('2d'); 11335 11336 ctx.fillStyle = '#0f0'; 11337 ctx.fillRect(0, 0, 100, 50); 11338 ctx.strokeStyle = '#f00'; 11339 ctx.lineWidth = 100; 11340 ctx.beginPath(); 11341 ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true); 11342 ctx.stroke(); 11343 isPixel(ctx, 50,20, 0,255,0,255, 0); 11344 11345 11346 } 11347 </script> 11348 11349 <!-- [[[ test_2d.path.arc.twopie.2.html ]]] --> 11350 11351 <p>Canvas test: 2d.path.arc.twopie.2</p> 11352 <!-- Testing: arc() draws a full circle when end = start + 2pi-e and clockwise --> 11353 <canvas id="c353" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11354 <script> 11355 11356 11357 function test_2d_path_arc_twopie_2() { 11358 11359 var canvas = document.getElementById('c353'); 11360 var ctx = canvas.getContext('2d'); 11361 11362 ctx.fillStyle = '#f00'; 11363 ctx.fillRect(0, 0, 100, 50); 11364 ctx.strokeStyle = '#0f0'; 11365 ctx.lineWidth = 100; 11366 ctx.beginPath(); 11367 ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false); 11368 ctx.stroke(); 11369 isPixel(ctx, 50,20, 0,255,0,255, 0); 11370 11371 11372 } 11373 </script> 11374 11375 <!-- [[[ test_2d.path.arc.twopie.3.html ]]] --> 11376 11377 <p>Canvas test: 2d.path.arc.twopie.3</p> 11378 <!-- Testing: arc() draws a full circle when end = start + 2pi+e and anticlockwise --> 11379 <canvas id="c354" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11380 <script> 11381 11382 11383 function test_2d_path_arc_twopie_3() { 11384 11385 var canvas = document.getElementById('c354'); 11386 var ctx = canvas.getContext('2d'); 11387 11388 ctx.fillStyle = '#f00'; 11389 ctx.fillRect(0, 0, 100, 50); 11390 ctx.strokeStyle = '#0f0'; 11391 ctx.lineWidth = 100; 11392 ctx.beginPath(); 11393 ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true); 11394 ctx.stroke(); 11395 isPixel(ctx, 50,20, 0,255,0,255, 0); 11396 11397 11398 } 11399 </script> 11400 11401 <!-- [[[ test_2d.path.arc.twopie.4.html ]]] --> 11402 11403 <p>Canvas test: 2d.path.arc.twopie.4</p> 11404 <!-- Testing: arc() draws nothing when end = start + 2pi+e and clockwise --> 11405 <canvas id="c355" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11406 <script> 11407 11408 11409 function test_2d_path_arc_twopie_4() { 11410 11411 var canvas = document.getElementById('c355'); 11412 var ctx = canvas.getContext('2d'); 11413 11414 ctx.fillStyle = '#f00'; 11415 ctx.fillRect(0, 0, 100, 50); 11416 ctx.strokeStyle = '#0f0'; 11417 ctx.lineWidth = 100; 11418 ctx.beginPath(); 11419 ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false); 11420 ctx.stroke(); 11421 isPixel(ctx, 50,20, 0,255,0,255, 0); 11422 11423 11424 } 11425 </script> 11426 11427 <!-- [[[ test_2d.path.arc.zero.1.html ]]] --> 11428 11429 <p>Canvas test: 2d.path.arc.zero.1</p> 11430 <!-- Testing: arc() draws nothing when startAngle = endAngle and anticlockwise --> 11431 <canvas id="c356" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11432 <script> 11433 11434 11435 function test_2d_path_arc_zero_1() { 11436 11437 var canvas = document.getElementById('c356'); 11438 var ctx = canvas.getContext('2d'); 11439 11440 ctx.fillStyle = '#0f0'; 11441 ctx.fillRect(0, 0, 100, 50); 11442 ctx.strokeStyle = '#f00'; 11443 ctx.lineWidth = 100; 11444 ctx.beginPath(); 11445 ctx.arc(50, 25, 50, 0, 0, true); 11446 ctx.stroke(); 11447 isPixel(ctx, 50,20, 0,255,0,255, 0); 11448 11449 11450 } 11451 </script> 11452 11453 <!-- [[[ test_2d.path.arc.zero.2.html ]]] --> 11454 11455 <p>Canvas test: 2d.path.arc.zero.2</p> 11456 <!-- Testing: arc() draws nothing when startAngle = endAngle and clockwise --> 11457 <canvas id="c357" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11458 <script> 11459 11460 11461 function test_2d_path_arc_zero_2() { 11462 11463 var canvas = document.getElementById('c357'); 11464 var ctx = canvas.getContext('2d'); 11465 11466 ctx.fillStyle = '#0f0'; 11467 ctx.fillRect(0, 0, 100, 50); 11468 ctx.strokeStyle = '#f00'; 11469 ctx.lineWidth = 100; 11470 ctx.beginPath(); 11471 ctx.arc(50, 25, 50, 0, 0, false); 11472 ctx.stroke(); 11473 isPixel(ctx, 50,20, 0,255,0,255, 0); 11474 11475 11476 } 11477 </script> 11478 11479 <!-- [[[ test_2d.path.arc.zeroradius.html ]]] --> 11480 11481 <p>Canvas test: 2d.path.arc.zeroradius</p> 11482 <!-- Testing: arc() with zero radius draws a line to the start point --> 11483 <canvas id="c358" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11484 <script> 11485 11486 11487 11488 function test_2d_path_arc_zeroradius() { 11489 11490 var canvas = document.getElementById('c358'); 11491 var ctx = canvas.getContext('2d'); 11492 11493 ctx.fillStyle = '#f00' 11494 ctx.fillRect(0, 0, 100, 50); 11495 ctx.lineWidth = 50; 11496 ctx.strokeStyle = '#0f0'; 11497 ctx.beginPath(); 11498 ctx.moveTo(0, 25); 11499 ctx.arc(200, 25, 0, 0, Math.PI, true); 11500 ctx.stroke(); 11501 11502 isPixel(ctx, 50,25, 0,255,0,255, 0); 11503 } 11504 </script> 11505 11506 <!-- [[[ test_2d.path.arcTo.coincide.1.html ]]] --> 11507 11508 <p>Canvas test: 2d.path.arcTo.coincide.1</p> 11509 <!-- Testing: arcTo() has no effect if P0 = P1 --> 11510 <canvas id="c359" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11511 <script> 11512 11513 11514 11515 function test_2d_path_arcTo_coincide_1() { 11516 11517 var canvas = document.getElementById('c359'); 11518 var ctx = canvas.getContext('2d'); 11519 11520 ctx.fillStyle = '#f00'; 11521 ctx.fillRect(0, 0, 100, 50); 11522 ctx.lineWidth = 50; 11523 11524 ctx.strokeStyle = '#0f0'; 11525 ctx.beginPath(); 11526 ctx.moveTo(0, 25); 11527 ctx.arcTo(0, 25, 50, 1000, 1); 11528 ctx.lineTo(100, 25); 11529 ctx.stroke(); 11530 11531 ctx.strokeStyle = '#f00'; 11532 ctx.beginPath(); 11533 ctx.moveTo(50, 25); 11534 ctx.arcTo(50, 25, 100, 25, 1); 11535 ctx.stroke(); 11536 11537 isPixel(ctx, 50,1, 0,255,0,255, 0); 11538 isPixel(ctx, 50,25, 0,255,0,255, 0); 11539 isPixel(ctx, 50,48, 0,255,0,255, 0); 11540 11541 11542 } 11543 </script> 11544 11545 <!-- [[[ test_2d.path.arcTo.coincide.2.html ]]] --> 11546 11547 <p>Canvas test: 2d.path.arcTo.coincide.2</p> 11548 <!-- Testing: arcTo() draws a straight line to P1 if P1 = P2 --> 11549 <canvas id="c360" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11550 <script> 11551 11552 11553 function test_2d_path_arcTo_coincide_2() { 11554 11555 var canvas = document.getElementById('c360'); 11556 var ctx = canvas.getContext('2d'); 11557 11558 ctx.fillStyle = '#f00'; 11559 ctx.fillRect(0, 0, 100, 50); 11560 ctx.lineWidth = 50; 11561 ctx.strokeStyle = '#0f0'; 11562 ctx.beginPath(); 11563 ctx.moveTo(0, 25); 11564 ctx.arcTo(100, 25, 100, 25, 1); 11565 ctx.stroke(); 11566 11567 isPixel(ctx, 50,25, 0,255,0,255, 0); 11568 11569 11570 } 11571 </script> 11572 11573 <!-- [[[ test_2d.path.arcTo.collinear.1.html ]]] --> 11574 11575 <p>Canvas test: 2d.path.arcTo.collinear.1</p> 11576 <!-- Testing: arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1 --> 11577 <canvas id="c361" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11578 <script> 11579 11580 11581 11582 function test_2d_path_arcTo_collinear_1() { 11583 11584 var canvas = document.getElementById('c361'); 11585 var ctx = canvas.getContext('2d'); 11586 11587 ctx.fillStyle = '#f00'; 11588 ctx.fillRect(0, 0, 100, 50); 11589 ctx.lineWidth = 50; 11590 11591 ctx.strokeStyle = '#0f0'; 11592 ctx.beginPath(); 11593 ctx.moveTo(0, 25); 11594 ctx.arcTo(100, 25, 200, 25, 1); 11595 ctx.stroke(); 11596 11597 ctx.strokeStyle = '#f00'; 11598 ctx.beginPath(); 11599 ctx.moveTo(-100, 25); 11600 ctx.arcTo(0, 25, 100, 25, 1); 11601 ctx.stroke(); 11602 11603 isPixel(ctx, 50,25, 0,255,0,255, 0); 11604 11605 11606 } 11607 </script> 11608 11609 <!-- [[[ test_2d.path.arcTo.collinear.2.html ]]] --> 11610 11611 <p>Canvas test: 2d.path.arcTo.collinear.2</p> 11612 <!-- Testing: arcTo() with all points on a line, and P2 between P0/P1, draws an infinite line along P1..P2 --> 11613 <canvas id="c362" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11614 <script> 11615 11616 11617 11618 function test_2d_path_arcTo_collinear_2() { 11619 11620 var canvas = document.getElementById('c362'); 11621 var ctx = canvas.getContext('2d'); 11622 11623 ctx.fillStyle = '#f00'; 11624 ctx.fillRect(0, 0, 100, 50); 11625 ctx.lineWidth = 50; 11626 11627 ctx.strokeStyle = '#0f0'; 11628 ctx.beginPath(); 11629 ctx.moveTo(1000, 25); 11630 ctx.arcTo(1100, 25, 1050, 25, 1); 11631 ctx.stroke(); 11632 11633 ctx.strokeStyle = '#f00'; 11634 ctx.beginPath(); 11635 ctx.moveTo(0, 25); 11636 ctx.arcTo(100, 25, -50, 25, 1); 11637 ctx.stroke(); 11638 11639 todo_isPixel(ctx, 50,25, 0,255,0,255, 0); 11640 11641 11642 } 11643 </script> 11644 11645 <!-- [[[ test_2d.path.arcTo.collinear.3.html ]]] --> 11646 11647 <p>Canvas test: 2d.path.arcTo.collinear.3</p> 11648 <!-- Testing: arcTo() with all points on a line, and P0 between P1/P2, draws an infinite line along P1..P2 --> 11649 <canvas id="c363" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11650 <script> 11651 11652 11653 11654 function test_2d_path_arcTo_collinear_3() { 11655 11656 var canvas = document.getElementById('c363'); 11657 var ctx = canvas.getContext('2d'); 11658 11659 ctx.fillStyle = '#f00'; 11660 ctx.fillRect(0, 0, 100, 50); 11661 ctx.lineWidth = 50; 11662 11663 ctx.strokeStyle = '#0f0'; 11664 ctx.beginPath(); 11665 ctx.moveTo(150, 25); 11666 ctx.arcTo(200, 25, 100, 25, 1); 11667 ctx.stroke(); 11668 11669 ctx.strokeStyle = '#f00'; 11670 ctx.beginPath(); 11671 ctx.moveTo(0, 25); 11672 ctx.arcTo(100, 25, 50, 25, 1); 11673 ctx.stroke(); 11674 11675 todo_isPixel(ctx, 50,25, 0,255,0,255, 0); 11676 11677 11678 } 11679 </script> 11680 11681 <!-- [[[ test_2d.path.arcTo.emptysubpath.html ]]] --> 11682 11683 <p>Canvas test: 2d.path.arcTo.emptysubpath</p> 11684 <!-- Testing: arcTo() does nothing if there are no subpaths --> 11685 <canvas id="c364" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11686 <script> 11687 11688 11689 11690 function test_2d_path_arcTo_emptysubpath() { 11691 11692 var canvas = document.getElementById('c364'); 11693 var ctx = canvas.getContext('2d'); 11694 11695 ctx.fillStyle = '#0f0'; 11696 ctx.fillRect(0, 0, 100, 50); 11697 ctx.lineWidth = 50; 11698 ctx.strokeStyle = '#f00'; 11699 ctx.beginPath(); 11700 ctx.arcTo(0, 25, 0, 25, 0.1); 11701 ctx.arcTo(100, 25, 100, 25, 0.1); 11702 ctx.stroke(); 11703 todo_isPixel(ctx, 50,25, 0,255,0,255, 0); 11704 11705 11706 } 11707 </script> 11708 11709 <!-- [[[ test_2d.path.arcTo.negative.html ]]] --> 11710 11711 <p>Canvas test: 2d.path.arcTo.negative</p> 11712 <!-- Testing: arcTo() with negative radius throws an exception --> 11713 <canvas id="c365" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11714 <script> 11715 11716 function test_2d_path_arcTo_negative() { 11717 11718 var canvas = document.getElementById('c365'); 11719 var ctx = canvas.getContext('2d'); 11720 11721 var _thrown = undefined; try { 11722 ctx.arcTo(0, 0, 0, 0, -1); 11723 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 11724 11725 11726 } 11727 </script> 11728 11729 <!-- [[[ test_2d.path.arcTo.nonfinite.html ]]] --> 11730 11731 <p>Canvas test: 2d.path.arcTo.nonfinite</p> 11732 <!-- Testing: arcTo() with Infinity/NaN is ignored --> 11733 <canvas id="c366" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11734 <script> 11735 11736 11737 function test_2d_path_arcTo_nonfinite() { 11738 11739 var canvas = document.getElementById('c366'); 11740 var ctx = canvas.getContext('2d'); 11741 11742 var _thrown_outer = false; 11743 try { 11744 11745 ctx.moveTo(0, 0); 11746 ctx.lineTo(100, 0); 11747 ctx.arcTo(Infinity, 50, 0, 50, 0); 11748 ctx.arcTo(-Infinity, 50, 0, 50, 0); 11749 ctx.arcTo(NaN, 50, 0, 50, 0); 11750 ctx.arcTo(0, Infinity, 0, 50, 0); 11751 ctx.arcTo(0, -Infinity, 0, 50, 0); 11752 ctx.arcTo(0, NaN, 0, 50, 0); 11753 ctx.arcTo(0, 50, Infinity, 50, 0); 11754 ctx.arcTo(0, 50, -Infinity, 50, 0); 11755 ctx.arcTo(0, 50, NaN, 50, 0); 11756 ctx.arcTo(0, 50, 0, Infinity, 0); 11757 ctx.arcTo(0, 50, 0, -Infinity, 0); 11758 ctx.arcTo(0, 50, 0, NaN, 0); 11759 ctx.arcTo(0, 50, 0, 50, Infinity); 11760 ctx.arcTo(0, 50, 0, 50, -Infinity); 11761 ctx.arcTo(0, 50, 0, 50, NaN); 11762 ctx.arcTo(Infinity, Infinity, 0, 50, 0); 11763 ctx.arcTo(Infinity, Infinity, Infinity, 50, 0); 11764 ctx.arcTo(Infinity, Infinity, Infinity, Infinity, 0); 11765 ctx.arcTo(Infinity, Infinity, Infinity, Infinity, Infinity); 11766 ctx.arcTo(Infinity, Infinity, Infinity, 50, Infinity); 11767 ctx.arcTo(Infinity, Infinity, 0, Infinity, 0); 11768 ctx.arcTo(Infinity, Infinity, 0, Infinity, Infinity); 11769 ctx.arcTo(Infinity, Infinity, 0, 50, Infinity); 11770 ctx.arcTo(Infinity, 50, Infinity, 50, 0); 11771 ctx.arcTo(Infinity, 50, Infinity, Infinity, 0); 11772 ctx.arcTo(Infinity, 50, Infinity, Infinity, Infinity); 11773 ctx.arcTo(Infinity, 50, Infinity, 50, Infinity); 11774 ctx.arcTo(Infinity, 50, 0, Infinity, 0); 11775 ctx.arcTo(Infinity, 50, 0, Infinity, Infinity); 11776 ctx.arcTo(Infinity, 50, 0, 50, Infinity); 11777 ctx.arcTo(0, Infinity, Infinity, 50, 0); 11778 ctx.arcTo(0, Infinity, Infinity, Infinity, 0); 11779 ctx.arcTo(0, Infinity, Infinity, Infinity, Infinity); 11780 ctx.arcTo(0, Infinity, Infinity, 50, Infinity); 11781 ctx.arcTo(0, Infinity, 0, Infinity, 0); 11782 ctx.arcTo(0, Infinity, 0, Infinity, Infinity); 11783 ctx.arcTo(0, Infinity, 0, 50, Infinity); 11784 ctx.arcTo(0, 50, Infinity, Infinity, 0); 11785 ctx.arcTo(0, 50, Infinity, Infinity, Infinity); 11786 ctx.arcTo(0, 50, Infinity, 50, Infinity); 11787 ctx.arcTo(0, 50, 0, Infinity, Infinity); 11788 ctx.lineTo(100, 50); 11789 ctx.lineTo(0, 50); 11790 ctx.fillStyle = '#0f0'; 11791 ctx.fill(); 11792 isPixel(ctx, 50,25, 0,255,0,255, 0); 11793 isPixel(ctx, 90,45, 0,255,0,255, 0); 11794 11795 } catch (e) { 11796 _thrown_outer = true; 11797 } 11798 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 11799 11800 11801 } 11802 </script> 11803 11804 <!-- [[[ test_2d.path.arcTo.scale.html ]]] --> 11805 11806 <p>Canvas test: 2d.path.arcTo.scale</p> 11807 <!-- Testing: arcTo scales the curve, not just the control points --> 11808 <canvas id="c367" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11809 <script> 11810 11811 11812 function test_2d_path_arcTo_scale() { 11813 11814 var canvas = document.getElementById('c367'); 11815 var ctx = canvas.getContext('2d'); 11816 11817 ctx.fillStyle = '#f00'; 11818 ctx.fillRect(0, 0, 100, 50); 11819 11820 ctx.fillStyle = '#0f0'; 11821 ctx.beginPath(); 11822 ctx.moveTo(0, 50); 11823 ctx.translate(100, 0); 11824 ctx.scale(0.1, 1); 11825 ctx.arcTo(50, 50, 50, 0, 50); 11826 ctx.lineTo(-1000, 0); 11827 ctx.fill(); 11828 11829 isPixel(ctx, 0,0, 0,255,0,255, 0); 11830 isPixel(ctx, 50,0, 0,255,0,255, 0); 11831 isPixel(ctx, 99,0, 0,255,0,255, 0); 11832 isPixel(ctx, 0,25, 0,255,0,255, 0); 11833 isPixel(ctx, 50,25, 0,255,0,255, 0); 11834 isPixel(ctx, 99,25, 0,255,0,255, 0); 11835 isPixel(ctx, 0,49, 0,255,0,255, 0); 11836 isPixel(ctx, 50,49, 0,255,0,255, 0); 11837 isPixel(ctx, 99,49, 0,255,0,255, 0); 11838 11839 11840 } 11841 </script> 11842 11843 <!-- [[[ test_2d.path.arcTo.shape.curve1.html ]]] --> 11844 11845 <p>Canvas test: 2d.path.arcTo.shape.curve1</p> 11846 <!-- Testing: arcTo() curves in the right kind of shape --> 11847 <canvas id="c368" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11848 <script> 11849 11850 11851 11852 function test_2d_path_arcTo_shape_curve1() { 11853 11854 var canvas = document.getElementById('c368'); 11855 var ctx = canvas.getContext('2d'); 11856 11857 var tol = 1.5; // tolerance to avoid antialiasing artifacts 11858 11859 ctx.fillStyle = '#0f0'; 11860 ctx.fillRect(0, 0, 100, 50); 11861 11862 ctx.strokeStyle = '#f00'; 11863 ctx.lineWidth = 10; 11864 ctx.beginPath(); 11865 ctx.moveTo(10, 25); 11866 ctx.arcTo(75, 25, 75, 60, 20); 11867 ctx.stroke(); 11868 11869 ctx.fillStyle = '#0f0'; 11870 ctx.beginPath(); 11871 ctx.rect(10, 20, 45, 10); 11872 ctx.moveTo(80, 45); 11873 ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true); 11874 ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false); 11875 ctx.fill(); 11876 11877 isPixel(ctx, 50,25, 0,255,0,255, 0); 11878 isPixel(ctx, 55,19, 0,255,0,255, 0); 11879 isPixel(ctx, 55,20, 0,255,0,255, 0); 11880 isPixel(ctx, 55,21, 0,255,0,255, 0); 11881 isPixel(ctx, 64,22, 0,255,0,255, 0); 11882 isPixel(ctx, 65,21, 0,255,0,255, 0); 11883 isPixel(ctx, 72,28, 0,255,0,255, 0); 11884 isPixel(ctx, 73,27, 0,255,0,255, 0); 11885 isPixel(ctx, 78,36, 0,255,0,255, 0); 11886 isPixel(ctx, 79,35, 0,255,0,255, IsAzureSkia() ? 1 : 0); 11887 isPixel(ctx, 80,44, 0,255,0,255, 0); 11888 isPixel(ctx, 80,45, 0,255,0,255, 0); 11889 isPixel(ctx, 80,46, 0,255,0,255, 0); 11890 11891 11892 } 11893 </script> 11894 11895 <!-- [[[ test_2d.path.arcTo.shape.curve2.html ]]] --> 11896 11897 <p>Canvas test: 2d.path.arcTo.shape.curve2</p> 11898 <!-- Testing: arcTo() curves in the right kind of shape --> 11899 <canvas id="c369" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11900 <script> 11901 11902 11903 11904 function test_2d_path_arcTo_shape_curve2() { 11905 11906 var canvas = document.getElementById('c369'); 11907 var ctx = canvas.getContext('2d'); 11908 11909 var tol = 1.5; // tolerance to avoid antialiasing artifacts 11910 11911 ctx.fillStyle = '#0f0'; 11912 ctx.fillRect(0, 0, 100, 50); 11913 11914 ctx.fillStyle = '#f00'; 11915 ctx.beginPath(); 11916 ctx.rect(10, 20, 45, 10); 11917 ctx.moveTo(80, 45); 11918 ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true); 11919 ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false); 11920 ctx.fill(); 11921 11922 ctx.strokeStyle = '#0f0'; 11923 ctx.lineWidth = 10; 11924 ctx.beginPath(); 11925 ctx.moveTo(10, 25); 11926 ctx.arcTo(75, 25, 75, 60, 20); 11927 ctx.stroke(); 11928 11929 isPixel(ctx, 50,25, 0,255,0,255, 0); 11930 isPixel(ctx, 55,19, 0,255,0,255, 0); 11931 isPixel(ctx, 55,20, 0,255,0,255, 0); 11932 isPixel(ctx, 55,21, 0,255,0,255, 0); 11933 isPixel(ctx, 64,22, 0,255,0,255, IsAzureSkia() ? 1 : 0); 11934 isPixel(ctx, 65,21, 0,255,0,255, 0); 11935 isPixel(ctx, 72,28, 0,255,0,255, 0); 11936 isPixel(ctx, 73,27, 0,255,0,255, IsAzureSkia() ? 1 : 0); 11937 isPixel(ctx, 78,36, 0,255,0,255, IsAzureSkia() ? 1 : 0); 11938 isPixel(ctx, 79,35, 0,255,0,255, 0); 11939 isPixel(ctx, 80,44, 0,255,0,255, 0); 11940 isPixel(ctx, 80,45, 0,255,0,255, 0); 11941 isPixel(ctx, 80,46, 0,255,0,255, 0); 11942 11943 11944 } 11945 </script> 11946 11947 <!-- [[[ test_2d.path.arcTo.shape.end.html ]]] --> 11948 11949 <p>Canvas test: 2d.path.arcTo.shape.end</p> 11950 <!-- Testing: arcTo() does not draw anything from P1 to P2 --> 11951 <canvas id="c370" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11952 <script> 11953 11954 11955 11956 function test_2d_path_arcTo_shape_end() { 11957 11958 var canvas = document.getElementById('c370'); 11959 var ctx = canvas.getContext('2d'); 11960 11961 ctx.fillStyle = '#0f0'; 11962 ctx.fillRect(0, 0, 100, 50); 11963 ctx.strokeStyle = '#f00'; 11964 ctx.lineWidth = 50; 11965 ctx.beginPath(); 11966 ctx.moveTo(-100, -100); 11967 ctx.arcTo(-100, 25, 200, 25, 10); 11968 ctx.stroke(); 11969 11970 isPixel(ctx, 1,1, 0,255,0,255, 0); 11971 isPixel(ctx, 1,48, 0,255,0,255, 0); 11972 isPixel(ctx, 50,25, 0,255,0,255, 0); 11973 isPixel(ctx, 98,1, 0,255,0,255, 0); 11974 isPixel(ctx, 98,48, 0,255,0,255, 0); 11975 11976 11977 } 11978 </script> 11979 11980 <!-- [[[ test_2d.path.arcTo.shape.start.html ]]] --> 11981 11982 <p>Canvas test: 2d.path.arcTo.shape.start</p> 11983 <!-- Testing: arcTo() draws a straight line from P0 to P1 --> 11984 <canvas id="c371" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 11985 <script> 11986 11987 11988 11989 function test_2d_path_arcTo_shape_start() { 11990 11991 var canvas = document.getElementById('c371'); 11992 var ctx = canvas.getContext('2d'); 11993 11994 ctx.fillStyle = '#f00'; 11995 ctx.fillRect(0, 0, 100, 50); 11996 ctx.strokeStyle = '#0f0'; 11997 ctx.lineWidth = 50; 11998 ctx.beginPath(); 11999 ctx.moveTo(0, 25); 12000 ctx.arcTo(200, 25, 200, 50, 10); 12001 ctx.stroke(); 12002 12003 isPixel(ctx, 1,1, 0,255,0,255, 0); 12004 isPixel(ctx, 1,48, 0,255,0,255, 0); 12005 isPixel(ctx, 50,25, 0,255,0,255, 0); 12006 isPixel(ctx, 98,1, 0,255,0,255, 0); 12007 isPixel(ctx, 98,48, 0,255,0,255, 0); 12008 12009 12010 } 12011 </script> 12012 12013 <!-- [[[ test_2d.path.arcTo.transformation.html ]]] --> 12014 12015 <p>Canvas test: 2d.path.arcTo.transformation</p> 12016 <!-- Testing: arcTo joins up to the last subpath point correctly --> 12017 <canvas id="c372" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12018 <script> 12019 12020 12021 function test_2d_path_arcTo_transformation() { 12022 12023 var canvas = document.getElementById('c372'); 12024 var ctx = canvas.getContext('2d'); 12025 12026 ctx.fillStyle = '#f00'; 12027 ctx.fillRect(0, 0, 100, 50); 12028 12029 ctx.fillStyle = '#0f0'; 12030 ctx.beginPath(); 12031 ctx.moveTo(0, 50); 12032 ctx.translate(100, 0); 12033 ctx.arcTo(50, 50, 50, 0, 50); 12034 ctx.lineTo(-100, 0); 12035 ctx.fill(); 12036 12037 isPixel(ctx, 0,0, 0,255,0,255, 0); 12038 isPixel(ctx, 50,0, 0,255,0,255, 0); 12039 isPixel(ctx, 99,0, 0,255,0,255, 0); 12040 isPixel(ctx, 0,25, 0,255,0,255, 0); 12041 isPixel(ctx, 50,25, 0,255,0,255, 0); 12042 isPixel(ctx, 99,25, 0,255,0,255, 0); 12043 isPixel(ctx, 0,49, 0,255,0,255, 0); 12044 isPixel(ctx, 50,49, 0,255,0,255, 0); 12045 isPixel(ctx, 99,49, 0,255,0,255, 0); 12046 12047 12048 } 12049 </script> 12050 12051 <!-- [[[ test_2d.path.arcTo.zero.1.html ]]] --> 12052 12053 <p>Canvas test: 2d.path.arcTo.zero.1</p> 12054 <!-- Testing: arcTo() with zero radius draws a straight line from P0 to P1 --> 12055 <canvas id="c373" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12056 <script> 12057 12058 12059 function test_2d_path_arcTo_zero_1() { 12060 12061 var canvas = document.getElementById('c373'); 12062 var ctx = canvas.getContext('2d'); 12063 12064 var _thrown_outer = false; 12065 try { 12066 12067 ctx.fillStyle = '#f00'; 12068 ctx.fillRect(0, 0, 100, 50); 12069 ctx.lineWidth = 50; 12070 12071 ctx.strokeStyle = '#0f0'; 12072 ctx.beginPath(); 12073 ctx.moveTo(0, 25); 12074 ctx.arcTo(100, 25, 100, 100, 0); 12075 ctx.stroke(); 12076 12077 ctx.strokeStyle = '#f00'; 12078 ctx.beginPath(); 12079 ctx.moveTo(0, -25); 12080 ctx.arcTo(50, -25, 50, 50, 0); 12081 ctx.stroke(); 12082 12083 isPixel(ctx, 50,25, 0,255,0,255, 0); 12084 12085 } catch (e) { 12086 _thrown_outer = true; 12087 } 12088 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 12089 12090 12091 } 12092 </script> 12093 12094 <!-- [[[ test_2d.path.arcTo.zero.2.html ]]] --> 12095 12096 <p>Canvas test: 2d.path.arcTo.zero.2</p> 12097 <!-- Testing: arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear --> 12098 <canvas id="c374" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12099 <script> 12100 12101 12102 function test_2d_path_arcTo_zero_2() { 12103 12104 var canvas = document.getElementById('c374'); 12105 var ctx = canvas.getContext('2d'); 12106 12107 var _thrown_outer = false; 12108 try { 12109 12110 ctx.fillStyle = '#f00'; 12111 ctx.fillRect(0, 0, 100, 50); 12112 ctx.lineWidth = 50; 12113 12114 ctx.strokeStyle = '#0f0'; 12115 ctx.beginPath(); 12116 ctx.moveTo(0, 25); 12117 ctx.arcTo(100, 25, -100, 25, 0); 12118 ctx.stroke(); 12119 12120 ctx.strokeStyle = '#f00'; 12121 ctx.beginPath(); 12122 ctx.moveTo(100, 25); 12123 ctx.arcTo(200, 25, 50, 25, 0); 12124 ctx.stroke(); 12125 12126 isPixel(ctx, 50,25, 0,255,0,255, 0); 12127 12128 } catch (e) { 12129 _thrown_outer = true; 12130 } 12131 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 12132 12133 12134 } 12135 </script> 12136 12137 <!-- [[[ test_2d.path.beginPath.html ]]] --> 12138 12139 <p>Canvas test: 2d.path.beginPath</p> 12140 <canvas id="c375" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 12141 <script> 12142 12143 12144 function test_2d_path_beginPath() { 12145 12146 var canvas = document.getElementById('c375'); 12147 var ctx = canvas.getContext('2d'); 12148 12149 ctx.rect(0, 0, 100, 50); 12150 ctx.beginPath(); 12151 ctx.fillStyle = '#f00'; 12152 ctx.fill(); 12153 isPixel(ctx, 50,25, 0,0,0,0, 0); 12154 12155 12156 } 12157 </script> 12158 12159 <!-- [[[ test_2d.path.bezierCurveTo.basic.html ]]] --> 12160 12161 <p>Canvas test: 2d.path.bezierCurveTo.basic</p> 12162 <canvas id="c376" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 12163 <script> 12164 12165 12166 function test_2d_path_bezierCurveTo_basic() { 12167 12168 var canvas = document.getElementById('c376'); 12169 var ctx = canvas.getContext('2d'); 12170 12171 ctx.strokeStyle = '#0f0'; 12172 ctx.lineWidth = 50; 12173 ctx.beginPath(); 12174 ctx.moveTo(0, 25); 12175 ctx.bezierCurveTo(100, 25, 100, 25, 100, 25); 12176 ctx.stroke(); 12177 isPixel(ctx, 50,25, 0,255,0,255, 0); 12178 12179 12180 } 12181 </script> 12182 12183 <!-- [[[ test_2d.path.bezierCurveTo.emptysubpath.html ]]] --> 12184 12185 <p>Canvas test: 2d.path.bezierCurveTo.emptysubpath</p> 12186 <canvas id="c377" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 12187 <script> 12188 12189 12190 12191 function test_2d_path_bezierCurveTo_emptysubpath() { 12192 12193 var canvas = document.getElementById('c377'); 12194 var ctx = canvas.getContext('2d'); 12195 12196 ctx.strokeStyle = '#f00'; 12197 ctx.lineWidth = 50; 12198 ctx.beginPath(); 12199 ctx.bezierCurveTo(0, 25, 0, 25, 0, 25); 12200 ctx.bezierCurveTo(100, 25, 100, 25, 100, 25); 12201 ctx.stroke(); 12202 todo_isPixel(ctx, 50,25, 0,0,0,0, 0); 12203 12204 12205 } 12206 </script> 12207 12208 <!-- [[[ test_2d.path.bezierCurveTo.nonfinite.html ]]] --> 12209 12210 <p>Canvas test: 2d.path.bezierCurveTo.nonfinite</p> 12211 <!-- Testing: bezierCurveTo() with Infinity/NaN is ignored --> 12212 <canvas id="c378" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12213 <script> 12214 12215 12216 function test_2d_path_bezierCurveTo_nonfinite() { 12217 12218 var canvas = document.getElementById('c378'); 12219 var ctx = canvas.getContext('2d'); 12220 12221 var _thrown_outer = false; 12222 try { 12223 12224 ctx.moveTo(0, 0); 12225 ctx.lineTo(100, 0); 12226 ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, 50); 12227 ctx.bezierCurveTo(-Infinity, 50, 0, 50, 0, 50); 12228 ctx.bezierCurveTo(NaN, 50, 0, 50, 0, 50); 12229 ctx.bezierCurveTo(0, Infinity, 0, 50, 0, 50); 12230 ctx.bezierCurveTo(0, -Infinity, 0, 50, 0, 50); 12231 ctx.bezierCurveTo(0, NaN, 0, 50, 0, 50); 12232 ctx.bezierCurveTo(0, 50, Infinity, 50, 0, 50); 12233 ctx.bezierCurveTo(0, 50, -Infinity, 50, 0, 50); 12234 ctx.bezierCurveTo(0, 50, NaN, 50, 0, 50); 12235 ctx.bezierCurveTo(0, 50, 0, Infinity, 0, 50); 12236 ctx.bezierCurveTo(0, 50, 0, -Infinity, 0, 50); 12237 ctx.bezierCurveTo(0, 50, 0, NaN, 0, 50); 12238 ctx.bezierCurveTo(0, 50, 0, 50, Infinity, 50); 12239 ctx.bezierCurveTo(0, 50, 0, 50, -Infinity, 50); 12240 ctx.bezierCurveTo(0, 50, 0, 50, NaN, 50); 12241 ctx.bezierCurveTo(0, 50, 0, 50, 0, Infinity); 12242 ctx.bezierCurveTo(0, 50, 0, 50, 0, -Infinity); 12243 ctx.bezierCurveTo(0, 50, 0, 50, 0, NaN); 12244 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, 50); 12245 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, 50); 12246 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, 50); 12247 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, 50); 12248 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); 12249 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, Infinity); 12250 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, 50); 12251 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, Infinity); 12252 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, Infinity); 12253 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, 50); 12254 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, 50); 12255 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, Infinity); 12256 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, Infinity); 12257 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, 50); 12258 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, Infinity); 12259 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, Infinity); 12260 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, 50); 12261 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, 50); 12262 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, 50); 12263 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, Infinity); 12264 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, Infinity); 12265 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, 50); 12266 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, Infinity); 12267 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, Infinity); 12268 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, 50); 12269 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, 50); 12270 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, Infinity); 12271 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, Infinity); 12272 ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, 50); 12273 ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, Infinity); 12274 ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, Infinity); 12275 ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, 50); 12276 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, 50); 12277 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, 50); 12278 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, Infinity); 12279 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, Infinity); 12280 ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, 50); 12281 ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, Infinity); 12282 ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, Infinity); 12283 ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, 50); 12284 ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, 50); 12285 ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, Infinity); 12286 ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, Infinity); 12287 ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, 50); 12288 ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, Infinity); 12289 ctx.bezierCurveTo(0, Infinity, 0, 50, 0, Infinity); 12290 ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, 50); 12291 ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, 50); 12292 ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, Infinity); 12293 ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, Infinity); 12294 ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, 50); 12295 ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, Infinity); 12296 ctx.bezierCurveTo(0, 50, Infinity, 50, 0, Infinity); 12297 ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, 50); 12298 ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, Infinity); 12299 ctx.bezierCurveTo(0, 50, 0, Infinity, 0, Infinity); 12300 ctx.bezierCurveTo(0, 50, 0, 50, Infinity, Infinity); 12301 ctx.lineTo(100, 50); 12302 ctx.lineTo(0, 50); 12303 ctx.fillStyle = '#0f0'; 12304 ctx.fill(); 12305 isPixel(ctx, 50,25, 0,255,0,255, 0); 12306 isPixel(ctx, 90,45, 0,255,0,255, 0); 12307 12308 } catch (e) { 12309 _thrown_outer = true; 12310 } 12311 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 12312 12313 12314 } 12315 </script> 12316 12317 <!-- [[[ test_2d.path.bezierCurveTo.scaled.html ]]] --> 12318 12319 <p>Canvas test: 2d.path.bezierCurveTo.scaled</p> 12320 <canvas id="c379" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 12321 <script> 12322 12323 12324 function test_2d_path_bezierCurveTo_scaled() { 12325 12326 var canvas = document.getElementById('c379'); 12327 var ctx = canvas.getContext('2d'); 12328 12329 ctx.scale(1000, 1000); 12330 ctx.strokeStyle = '#0f0'; 12331 ctx.lineWidth = 0.055; 12332 ctx.beginPath(); 12333 ctx.moveTo(-2, 3.1); 12334 ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1); 12335 ctx.stroke(); 12336 isPixel(ctx, 50,25, 0,255,0,255, 0); 12337 isPixel(ctx, 1,1, 0,255,0,255, 0); 12338 isPixel(ctx, 98,1, 0,255,0,255, 0); 12339 isPixel(ctx, 1,48, 0,255,0,255, 0); 12340 isPixel(ctx, 98,48, 0,255,0,255, 0); 12341 12342 12343 } 12344 </script> 12345 12346 <!-- [[[ test_2d.path.bezierCurveTo.shape.html ]]] --> 12347 12348 <p>Canvas test: 2d.path.bezierCurveTo.shape</p> 12349 <canvas id="c380" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 12350 <script> 12351 12352 12353 function test_2d_path_bezierCurveTo_shape() { 12354 12355 var canvas = document.getElementById('c380'); 12356 var ctx = canvas.getContext('2d'); 12357 12358 ctx.strokeStyle = '#0f0'; 12359 ctx.lineWidth = 55; 12360 ctx.beginPath(); 12361 ctx.moveTo(-2000, 3100); 12362 ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100); 12363 ctx.stroke(); 12364 isPixel(ctx, 50,25, 0,255,0,255, 0); 12365 isPixel(ctx, 1,1, 0,255,0,255, 0); 12366 isPixel(ctx, 98,1, 0,255,0,255, 0); 12367 isPixel(ctx, 1,48, 0,255,0,255, 0); 12368 isPixel(ctx, 98,48, 0,255,0,255, 0); 12369 12370 12371 } 12372 </script> 12373 12374 <!-- [[[ test_2d.path.clip.basic.1.html ]]] --> 12375 12376 <p>Canvas test: 2d.path.clip.basic.1</p> 12377 <canvas id="c381" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12378 <script> 12379 12380 12381 function test_2d_path_clip_basic_1() { 12382 12383 var canvas = document.getElementById('c381'); 12384 var ctx = canvas.getContext('2d'); 12385 12386 ctx.fillStyle = '#f00'; 12387 ctx.fillRect(0, 0, 100, 50); 12388 12389 ctx.beginPath(); 12390 ctx.rect(0, 0, 100, 50); 12391 ctx.clip(); 12392 12393 ctx.fillStyle = '#0f0'; 12394 ctx.fillRect(0, 0, 100, 50); 12395 12396 isPixel(ctx, 50,25, 0,255,0,255, 0); 12397 12398 12399 } 12400 </script> 12401 12402 <!-- [[[ test_2d.path.clip.basic.2.html ]]] --> 12403 12404 <p>Canvas test: 2d.path.clip.basic.2</p> 12405 <canvas id="c382" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12406 <script> 12407 12408 12409 function test_2d_path_clip_basic_2() { 12410 12411 var canvas = document.getElementById('c382'); 12412 var ctx = canvas.getContext('2d'); 12413 12414 ctx.fillStyle = '#0f0'; 12415 ctx.fillRect(0, 0, 100, 50); 12416 12417 ctx.beginPath(); 12418 ctx.rect(-100, 0, 100, 50); 12419 ctx.clip(); 12420 12421 ctx.fillStyle = '#f00'; 12422 ctx.fillRect(0, 0, 100, 50); 12423 12424 isPixel(ctx, 50,25, 0,255,0,255, 0); 12425 12426 12427 } 12428 </script> 12429 12430 <!-- [[[ test_2d.path.clip.empty.html ]]] --> 12431 12432 <p>Canvas test: 2d.path.clip.empty</p> 12433 <canvas id="c383" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12434 <script> 12435 12436 12437 function test_2d_path_clip_empty() { 12438 12439 var canvas = document.getElementById('c383'); 12440 var ctx = canvas.getContext('2d'); 12441 12442 ctx.fillStyle = '#0f0'; 12443 ctx.fillRect(0, 0, 100, 50); 12444 12445 ctx.beginPath(); 12446 ctx.clip(); 12447 12448 ctx.fillStyle = '#f00'; 12449 ctx.fillRect(0, 0, 100, 50); 12450 12451 isPixel(ctx, 50,25, 0,255,0,255, 0); 12452 12453 12454 } 12455 </script> 12456 12457 <!-- [[[ test_2d.path.clip.intersect.html ]]] --> 12458 12459 <p>Canvas test: 2d.path.clip.intersect</p> 12460 <canvas id="c384" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12461 <script> 12462 12463 12464 function test_2d_path_clip_intersect() { 12465 12466 var canvas = document.getElementById('c384'); 12467 var ctx = canvas.getContext('2d'); 12468 12469 ctx.fillStyle = '#0f0'; 12470 ctx.fillRect(0, 0, 100, 50); 12471 12472 ctx.beginPath(); 12473 ctx.rect(0, 0, 50, 50); 12474 ctx.clip(); 12475 ctx.beginPath(); 12476 ctx.rect(50, 0, 50, 50) 12477 ctx.clip(); 12478 12479 ctx.fillStyle = '#f00'; 12480 ctx.fillRect(0, 0, 100, 50); 12481 12482 isPixel(ctx, 50,25, 0,255,0,255, 0); 12483 12484 12485 } 12486 </script> 12487 12488 <!-- [[[ test_2d.path.clip.unaffected.html ]]] --> 12489 12490 <p>Canvas test: 2d.path.clip.unaffected</p> 12491 <canvas id="c385" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12492 <script> 12493 12494 12495 function test_2d_path_clip_unaffected() { 12496 12497 var canvas = document.getElementById('c385'); 12498 var ctx = canvas.getContext('2d'); 12499 12500 ctx.fillStyle = '#f00'; 12501 ctx.fillRect(0, 0, 100, 50); 12502 12503 ctx.fillStyle = '#0f0'; 12504 12505 ctx.beginPath(); 12506 ctx.lineTo(0, 0); 12507 ctx.lineTo(0, 50); 12508 ctx.lineTo(100, 50); 12509 ctx.lineTo(100, 0); 12510 ctx.clip(); 12511 12512 ctx.lineTo(0, 0); 12513 ctx.fill(); 12514 12515 isPixel(ctx, 50,25, 0,255,0,255, 0); 12516 12517 12518 } 12519 </script> 12520 12521 <!-- [[[ test_2d.path.clip.winding.1.html ]]] --> 12522 12523 <p>Canvas test: 2d.path.clip.winding.1</p> 12524 <canvas id="c386" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12525 <script> 12526 12527 12528 function test_2d_path_clip_winding_1() { 12529 12530 var canvas = document.getElementById('c386'); 12531 var ctx = canvas.getContext('2d'); 12532 12533 ctx.fillStyle = '#0f0'; 12534 ctx.fillRect(0, 0, 100, 50); 12535 12536 ctx.beginPath(); 12537 ctx.moveTo(-10, -10); 12538 ctx.lineTo(110, -10); 12539 ctx.lineTo(110, 60); 12540 ctx.lineTo(-10, 60); 12541 ctx.lineTo(-10, -10); 12542 ctx.lineTo(0, 0); 12543 ctx.lineTo(0, 50); 12544 ctx.lineTo(100, 50); 12545 ctx.lineTo(100, 0); 12546 ctx.clip(); 12547 12548 ctx.fillStyle = '#f00'; 12549 ctx.fillRect(0, 0, 100, 50); 12550 12551 isPixel(ctx, 50,25, 0,255,0,255, 0); 12552 12553 12554 } 12555 </script> 12556 12557 <!-- [[[ test_2d.path.clip.winding.2.html ]]] --> 12558 12559 <p>Canvas test: 2d.path.clip.winding.2</p> 12560 <canvas id="c387" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12561 <script> 12562 12563 12564 function test_2d_path_clip_winding_2() { 12565 12566 var canvas = document.getElementById('c387'); 12567 var ctx = canvas.getContext('2d'); 12568 12569 ctx.fillStyle = '#f00'; 12570 ctx.fillRect(0, 0, 100, 50); 12571 12572 ctx.beginPath(); 12573 ctx.moveTo(-10, -10); 12574 ctx.lineTo(110, -10); 12575 ctx.lineTo(110, 60); 12576 ctx.lineTo(-10, 60); 12577 ctx.lineTo(-10, -10); 12578 ctx.clip(); 12579 12580 ctx.beginPath(); 12581 ctx.lineTo(0, 0); 12582 ctx.lineTo(0, 50); 12583 ctx.lineTo(100, 50); 12584 ctx.lineTo(100, 0); 12585 ctx.lineTo(0, 0); 12586 ctx.clip(); 12587 12588 ctx.fillStyle = '#0f0'; 12589 ctx.fillRect(0, 0, 100, 50); 12590 12591 isPixel(ctx, 50,25, 0,255,0,255, 0); 12592 12593 12594 } 12595 </script> 12596 12597 <!-- [[[ test_2d.path.closePath.empty.html ]]] --> 12598 12599 <p>Canvas test: 2d.path.closePath.empty</p> 12600 <canvas id="c388" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 12601 <script> 12602 12603 12604 function test_2d_path_closePath_empty() { 12605 12606 var canvas = document.getElementById('c388'); 12607 var ctx = canvas.getContext('2d'); 12608 12609 ctx.closePath(); 12610 ctx.fillStyle = '#f00'; 12611 ctx.fill(); 12612 isPixel(ctx, 50,25, 0,0,0,0, 0); 12613 12614 12615 } 12616 </script> 12617 12618 <!-- [[[ test_2d.path.closePath.newline.html ]]] --> 12619 12620 <p>Canvas test: 2d.path.closePath.newline</p> 12621 <canvas id="c389" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 12622 <script> 12623 12624 12625 function test_2d_path_closePath_newline() { 12626 12627 var canvas = document.getElementById('c389'); 12628 var ctx = canvas.getContext('2d'); 12629 12630 ctx.strokeStyle = '#0f0'; 12631 ctx.lineWidth = 50; 12632 ctx.moveTo(-100, 25); 12633 ctx.lineTo(-100, -100); 12634 ctx.lineTo(200, -100); 12635 ctx.lineTo(200, 25); 12636 ctx.closePath(); 12637 ctx.stroke(); 12638 isPixel(ctx, 50,25, 0,255,0,255, 0); 12639 12640 12641 } 12642 </script> 12643 12644 <!-- [[[ test_2d.path.closePath.nextpoint.html ]]] --> 12645 12646 <p>Canvas test: 2d.path.closePath.nextpoint</p> 12647 <canvas id="c390" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 12648 <script> 12649 12650 12651 function test_2d_path_closePath_nextpoint() { 12652 12653 var canvas = document.getElementById('c390'); 12654 var ctx = canvas.getContext('2d'); 12655 12656 ctx.strokeStyle = '#0f0'; 12657 ctx.lineWidth = 50; 12658 ctx.moveTo(-100, 25); 12659 ctx.lineTo(-100, -1000); 12660 ctx.closePath(); 12661 ctx.lineTo(1000, 25); 12662 ctx.stroke(); 12663 isPixel(ctx, 50,25, 0,255,0,255, 0); 12664 12665 12666 } 12667 </script> 12668 12669 <!-- [[[ test_2d.path.fill.closed.basic.html ]]] --> 12670 12671 <p>Canvas test: 2d.path.fill.closed.basic</p> 12672 <canvas id="c391" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12673 <script> 12674 12675 12676 function test_2d_path_fill_closed_basic() { 12677 12678 var canvas = document.getElementById('c391'); 12679 var ctx = canvas.getContext('2d'); 12680 12681 ctx.fillStyle = '#f00'; 12682 ctx.fillRect(0, 0, 100, 50); 12683 12684 ctx.fillStyle = '#0f0'; 12685 ctx.moveTo(0, 0); 12686 ctx.lineTo(100, 0); 12687 ctx.lineTo(100, 50); 12688 ctx.lineTo(0, 50); 12689 ctx.fill(); 12690 12691 isPixel(ctx, 50,25, 0,255,0,255, 0); 12692 12693 12694 } 12695 </script> 12696 12697 <!-- [[[ test_2d.path.fill.closed.unaffected.html ]]] --> 12698 12699 <p>Canvas test: 2d.path.fill.closed.unaffected</p> 12700 <canvas id="c392" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12701 <script> 12702 12703 12704 function test_2d_path_fill_closed_unaffected() { 12705 12706 var canvas = document.getElementById('c392'); 12707 var ctx = canvas.getContext('2d'); 12708 12709 ctx.fillStyle = '#00f'; 12710 ctx.fillRect(0, 0, 100, 50); 12711 12712 ctx.moveTo(0, 0); 12713 ctx.lineTo(100, 0); 12714 ctx.lineTo(100, 50); 12715 ctx.fillStyle = '#f00'; 12716 ctx.fill(); 12717 ctx.lineTo(0, 50); 12718 ctx.fillStyle = '#0f0'; 12719 ctx.fill(); 12720 12721 isPixel(ctx, 90,10, 0,255,0,255, 0); 12722 isPixel(ctx, 10,40, 0,255,0,255, 0); 12723 12724 12725 } 12726 </script> 12727 12728 <!-- [[[ test_2d.path.fill.overlap.html ]]] --> 12729 12730 <p>Canvas test: 2d.path.fill.overlap</p> 12731 <canvas id="c393" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12732 <script> 12733 12734 12735 function test_2d_path_fill_overlap() { 12736 12737 var canvas = document.getElementById('c393'); 12738 var ctx = canvas.getContext('2d'); 12739 12740 ctx.fillStyle = '#000'; 12741 ctx.fillRect(0, 0, 100, 50); 12742 12743 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; 12744 ctx.rect(0, 0, 100, 50); 12745 ctx.closePath(); 12746 ctx.rect(10, 10, 80, 30); 12747 ctx.fill(); 12748 12749 isPixel(ctx, 50,25, 0,127,0,255, 1); 12750 12751 12752 } 12753 </script> 12754 12755 <!-- [[[ test_2d.path.fill.winding.add.html ]]] --> 12756 12757 <p>Canvas test: 2d.path.fill.winding.add</p> 12758 <canvas id="c394" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12759 <script> 12760 12761 12762 function test_2d_path_fill_winding_add() { 12763 12764 var canvas = document.getElementById('c394'); 12765 var ctx = canvas.getContext('2d'); 12766 12767 ctx.fillStyle = '#f00'; 12768 ctx.fillRect(0, 0, 100, 50); 12769 12770 ctx.fillStyle = '#0f0'; 12771 ctx.moveTo(-10, -10); 12772 ctx.lineTo(110, -10); 12773 ctx.lineTo(110, 60); 12774 ctx.lineTo(-10, 60); 12775 ctx.lineTo(-10, -10); 12776 ctx.lineTo(0, 0); 12777 ctx.lineTo(100, 0); 12778 ctx.lineTo(100, 50); 12779 ctx.lineTo(0, 50); 12780 ctx.fill(); 12781 12782 isPixel(ctx, 50,25, 0,255,0,255, 0); 12783 12784 12785 } 12786 </script> 12787 12788 <!-- [[[ test_2d.path.fill.winding.subtract.1.html ]]] --> 12789 12790 <p>Canvas test: 2d.path.fill.winding.subtract.1</p> 12791 <canvas id="c395" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12792 <script> 12793 12794 12795 function test_2d_path_fill_winding_subtract_1() { 12796 12797 var canvas = document.getElementById('c395'); 12798 var ctx = canvas.getContext('2d'); 12799 12800 ctx.fillStyle = '#0f0'; 12801 ctx.fillRect(0, 0, 100, 50); 12802 12803 ctx.fillStyle = '#f00'; 12804 ctx.moveTo(-10, -10); 12805 ctx.lineTo(110, -10); 12806 ctx.lineTo(110, 60); 12807 ctx.lineTo(-10, 60); 12808 ctx.lineTo(-10, -10); 12809 ctx.lineTo(0, 0); 12810 ctx.lineTo(0, 50); 12811 ctx.lineTo(100, 50); 12812 ctx.lineTo(100, 0); 12813 ctx.fill(); 12814 12815 isPixel(ctx, 50,25, 0,255,0,255, 0); 12816 12817 12818 } 12819 </script> 12820 12821 <!-- [[[ test_2d.path.fill.winding.subtract.2.html ]]] --> 12822 12823 <p>Canvas test: 2d.path.fill.winding.subtract.2</p> 12824 <canvas id="c396" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12825 <script> 12826 12827 12828 function test_2d_path_fill_winding_subtract_2() { 12829 12830 var canvas = document.getElementById('c396'); 12831 var ctx = canvas.getContext('2d'); 12832 12833 ctx.fillStyle = '#0f0'; 12834 ctx.fillRect(0, 0, 100, 50); 12835 12836 ctx.fillStyle = '#f00'; 12837 ctx.moveTo(-10, -10); 12838 ctx.lineTo(110, -10); 12839 ctx.lineTo(110, 60); 12840 ctx.lineTo(-10, 60); 12841 ctx.moveTo(0, 0); 12842 ctx.lineTo(0, 50); 12843 ctx.lineTo(100, 50); 12844 ctx.lineTo(100, 0); 12845 ctx.fill(); 12846 12847 isPixel(ctx, 50,25, 0,255,0,255, 0); 12848 12849 12850 } 12851 </script> 12852 12853 <!-- [[[ test_2d.path.fill.winding.subtract.3.html ]]] --> 12854 12855 <p>Canvas test: 2d.path.fill.winding.subtract.3</p> 12856 <canvas id="c397" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12857 <script> 12858 12859 12860 function test_2d_path_fill_winding_subtract_3() { 12861 12862 var canvas = document.getElementById('c397'); 12863 var ctx = canvas.getContext('2d'); 12864 12865 ctx.fillStyle = '#f00'; 12866 ctx.fillRect(0, 0, 100, 50); 12867 12868 ctx.fillStyle = '#0f0'; 12869 ctx.moveTo(-10, -10); 12870 ctx.lineTo(110, -10); 12871 ctx.lineTo(110, 60); 12872 ctx.lineTo(-10, 60); 12873 ctx.lineTo(-10, -10); 12874 ctx.lineTo(-20, -20); 12875 ctx.lineTo(120, -20); 12876 ctx.lineTo(120, 70); 12877 ctx.lineTo(-20, 70); 12878 ctx.lineTo(-20, -20); 12879 ctx.lineTo(0, 0); 12880 ctx.lineTo(0, 50); 12881 ctx.lineTo(100, 50); 12882 ctx.lineTo(100, 0); 12883 ctx.fill(); 12884 12885 isPixel(ctx, 50,25, 0,255,0,255, 0); 12886 12887 12888 } 12889 </script> 12890 12891 <!-- [[[ test_2d.path.initial.html ]]] --> 12892 12893 <p>Canvas test: 2d.path.initial</p> 12894 <canvas id="c398" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 12895 <script> 12896 12897 12898 12899 function test_2d_path_initial() { 12900 12901 var canvas = document.getElementById('c398'); 12902 var ctx = canvas.getContext('2d'); 12903 12904 ctx.lineTo(0, 0); 12905 ctx.lineTo(100, 0); 12906 ctx.lineTo(100, 50); 12907 ctx.lineTo(0, 50); 12908 ctx.closePath(); 12909 ctx.fillStyle = '#f00'; 12910 ctx.fill(); 12911 todo_isPixel(ctx, 50,25, 0,0,0,0, 0); 12912 12913 12914 } 12915 </script> 12916 12917 <!-- [[[ test_2d.path.isPointInPath.arc.html ]]] --> 12918 12919 <p>Canvas test: 2d.path.isPointInPath.arc</p> 12920 <!-- Testing: isPointInPath() works on arcs --> 12921 <canvas id="c399" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12922 <script> 12923 12924 function test_2d_path_isPointInPath_arc() { 12925 12926 var canvas = document.getElementById('c399'); 12927 var ctx = canvas.getContext('2d'); 12928 12929 ctx.arc(50, 25, 10, 0, Math.PI, false); 12930 ok(ctx.isPointInPath(50, 10) === false, "ctx.isPointInPath(50, 10) === false"); 12931 ok(ctx.isPointInPath(50, 20) === false, "ctx.isPointInPath(50, 20) === false"); 12932 ok(ctx.isPointInPath(50, 30) === true, "ctx.isPointInPath(50, 30) === true"); 12933 ok(ctx.isPointInPath(50, 40) === false, "ctx.isPointInPath(50, 40) === false"); 12934 ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false"); 12935 ok(ctx.isPointInPath(70, 20) === false, "ctx.isPointInPath(70, 20) === false"); 12936 ok(ctx.isPointInPath(30, 30) === false, "ctx.isPointInPath(30, 30) === false"); 12937 ok(ctx.isPointInPath(70, 30) === false, "ctx.isPointInPath(70, 30) === false"); 12938 12939 12940 } 12941 </script> 12942 12943 <!-- [[[ test_2d.path.isPointInPath.basic.1.html ]]] --> 12944 12945 <p>Canvas test: 2d.path.isPointInPath.basic.1</p> 12946 <!-- Testing: isPointInPath() detects whether the point is inside the path --> 12947 <canvas id="c400" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12948 <script> 12949 12950 function test_2d_path_isPointInPath_basic_1() { 12951 12952 var canvas = document.getElementById('c400'); 12953 var ctx = canvas.getContext('2d'); 12954 12955 ctx.rect(0, 0, 20, 20); 12956 ok(ctx.isPointInPath(10, 10) === true, "ctx.isPointInPath(10, 10) === true"); 12957 ok(ctx.isPointInPath(30, 10) === false, "ctx.isPointInPath(30, 10) === false"); 12958 12959 12960 } 12961 </script> 12962 12963 <!-- [[[ test_2d.path.isPointInPath.basic.2.html ]]] --> 12964 12965 <p>Canvas test: 2d.path.isPointInPath.basic.2</p> 12966 <!-- Testing: isPointInPath() detects whether the point is inside the path --> 12967 <canvas id="c401" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12968 <script> 12969 12970 function test_2d_path_isPointInPath_basic_2() { 12971 12972 var canvas = document.getElementById('c401'); 12973 var ctx = canvas.getContext('2d'); 12974 12975 ctx.rect(20, 0, 20, 20); 12976 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false"); 12977 ok(ctx.isPointInPath(30, 10) === true, "ctx.isPointInPath(30, 10) === true"); 12978 12979 12980 } 12981 </script> 12982 12983 <!-- [[[ test_2d.path.isPointInPath.bezier.html ]]] --> 12984 12985 <p>Canvas test: 2d.path.isPointInPath.bezier</p> 12986 <!-- Testing: isPointInPath() works on Bezier curves --> 12987 <canvas id="c402" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 12988 <script> 12989 12990 function test_2d_path_isPointInPath_bezier() { 12991 12992 var canvas = document.getElementById('c402'); 12993 var ctx = canvas.getContext('2d'); 12994 12995 ctx.moveTo(25, 25); 12996 ctx.bezierCurveTo(50, -50, 50, 100, 75, 25); 12997 ok(ctx.isPointInPath(25, 20) == false, "ctx.isPointInPath(25, 20) == false"); 12998 ok(ctx.isPointInPath(25, 30) == false, "ctx.isPointInPath(25, 30) == false"); 12999 ok(ctx.isPointInPath(30, 20) == true, "ctx.isPointInPath(30, 20) == true"); 13000 ok(ctx.isPointInPath(30, 30) == false, "ctx.isPointInPath(30, 30) == false"); 13001 ok(ctx.isPointInPath(40, 2) == false, "ctx.isPointInPath(40, 2) == false"); 13002 ok(ctx.isPointInPath(40, 20) == true, "ctx.isPointInPath(40, 20) == true"); 13003 ok(ctx.isPointInPath(40, 30) == false, "ctx.isPointInPath(40, 30) == false"); 13004 ok(ctx.isPointInPath(40, 47) == false, "ctx.isPointInPath(40, 47) == false"); 13005 ok(ctx.isPointInPath(45, 20) == true, "ctx.isPointInPath(45, 20) == true"); 13006 ok(ctx.isPointInPath(45, 30) == false, "ctx.isPointInPath(45, 30) == false"); 13007 ok(ctx.isPointInPath(55, 20) == false, "ctx.isPointInPath(55, 20) == false"); 13008 ok(ctx.isPointInPath(55, 30) == true, "ctx.isPointInPath(55, 30) == true"); 13009 ok(ctx.isPointInPath(60, 2) == false, "ctx.isPointInPath(60, 2) == false"); 13010 ok(ctx.isPointInPath(60, 20) == false, "ctx.isPointInPath(60, 20) == false"); 13011 ok(ctx.isPointInPath(60, 30) == true, "ctx.isPointInPath(60, 30) == true"); 13012 ok(ctx.isPointInPath(60, 47) == false, "ctx.isPointInPath(60, 47) == false"); 13013 ok(ctx.isPointInPath(70, 20) == false, "ctx.isPointInPath(70, 20) == false"); 13014 ok(ctx.isPointInPath(70, 30) == true, "ctx.isPointInPath(70, 30) == true"); 13015 ok(ctx.isPointInPath(75, 20) == false, "ctx.isPointInPath(75, 20) == false"); 13016 ok(ctx.isPointInPath(75, 30) == false, "ctx.isPointInPath(75, 30) == false"); 13017 13018 13019 } 13020 </script> 13021 13022 <!-- [[[ test_2d.path.isPointInPath.bigarc.html ]]] --> 13023 13024 <p>Canvas test: 2d.path.isPointInPath.bigarc</p> 13025 <!-- Testing: isPointInPath() works on unclosed arcs larger than 2pi --> 13026 <canvas id="c403" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13027 <script> 13028 13029 function test_2d_path_isPointInPath_bigarc() { 13030 13031 var canvas = document.getElementById('c403'); 13032 var ctx = canvas.getContext('2d'); 13033 13034 ctx.arc(50, 25, 10, 0, 7, false); 13035 ok(ctx.isPointInPath(50, 10) === false, "ctx.isPointInPath(50, 10) === false"); 13036 ok(ctx.isPointInPath(50, 20) === true, "ctx.isPointInPath(50, 20) === true"); 13037 ok(ctx.isPointInPath(50, 30) === true, "ctx.isPointInPath(50, 30) === true"); 13038 ok(ctx.isPointInPath(50, 40) === false, "ctx.isPointInPath(50, 40) === false"); 13039 ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false"); 13040 ok(ctx.isPointInPath(70, 20) === false, "ctx.isPointInPath(70, 20) === false"); 13041 ok(ctx.isPointInPath(30, 30) === false, "ctx.isPointInPath(30, 30) === false"); 13042 ok(ctx.isPointInPath(70, 30) === false, "ctx.isPointInPath(70, 30) === false"); 13043 13044 13045 } 13046 </script> 13047 13048 <!-- [[[ test_2d.path.isPointInPath.edge.html ]]] --> 13049 13050 <p>Canvas test: 2d.path.isPointInPath.edge</p> 13051 <!-- Testing: isPointInPath() counts points on the path as being inside --> 13052 <canvas id="c404" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13053 <script> 13054 13055 function test_2d_path_isPointInPath_edge() { 13056 13057 var canvas = document.getElementById('c404'); 13058 var ctx = canvas.getContext('2d'); 13059 13060 ctx.rect(0, 0, 20, 20); 13061 13062 ok(ctx.isPointInPath(0, 0) === true, "ctx.isPointInPath(0, 0) === true"); 13063 ok(ctx.isPointInPath(10, 0) === true, "ctx.isPointInPath(10, 0) === true"); 13064 ok(ctx.isPointInPath(20, 0) === true, "ctx.isPointInPath(20, 0) === true"); 13065 ok(ctx.isPointInPath(20, 10) === true, "ctx.isPointInPath(20, 10) === true"); 13066 ok(ctx.isPointInPath(20, 20) === true, "ctx.isPointInPath(20, 20) === true"); 13067 ok(ctx.isPointInPath(10, 20) === true, "ctx.isPointInPath(10, 20) === true"); 13068 ok(ctx.isPointInPath(0, 20) === true, "ctx.isPointInPath(0, 20) === true"); 13069 ok(ctx.isPointInPath(0, 10) === true, "ctx.isPointInPath(0, 10) === true"); 13070 ok(ctx.isPointInPath(10, -0.01) === false, "ctx.isPointInPath(10, -0.01) === false"); 13071 ok(ctx.isPointInPath(10, 20.01) === false, "ctx.isPointInPath(10, 20.01) === false"); 13072 ok(ctx.isPointInPath(-0.01, 10) === false, "ctx.isPointInPath(-0.01, 10) === false"); 13073 ok(ctx.isPointInPath(20.01, 10) === false, "ctx.isPointInPath(20.01, 10) === false"); 13074 13075 } 13076 </script> 13077 13078 <!-- [[[ test_2d.path.isPointInPath.empty.html ]]] --> 13079 13080 <p>Canvas test: 2d.path.isPointInPath.empty</p> 13081 <!-- Testing: isPointInPath() works when there is no path --> 13082 <canvas id="c405" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13083 <script> 13084 13085 function test_2d_path_isPointInPath_empty() { 13086 13087 var canvas = document.getElementById('c405'); 13088 var ctx = canvas.getContext('2d'); 13089 13090 ok(ctx.isPointInPath(0, 0) === false, "ctx.isPointInPath(0, 0) === false"); 13091 13092 13093 } 13094 </script> 13095 13096 <!-- [[[ test_2d.path.isPointInPath.nonfinite.html ]]] --> 13097 13098 <p>Canvas test: 2d.path.isPointInPath.nonfinite</p> 13099 <!-- Testing: isPointInPath() returns false for non-finite arguments --> 13100 <canvas id="c406" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13101 <script> 13102 13103 function test_2d_path_isPointInPath_nonfinite() { 13104 13105 var canvas = document.getElementById('c406'); 13106 var ctx = canvas.getContext('2d'); 13107 13108 var _thrown_outer = false; 13109 try { 13110 13111 ctx.rect(-100, -50, 200, 100); 13112 ok(ctx.isPointInPath(Infinity, 0) === false, "ctx.isPointInPath(Infinity, 0) === false"); 13113 ok(ctx.isPointInPath(-Infinity, 0) === false, "ctx.isPointInPath(-Infinity, 0) === false"); 13114 ok(ctx.isPointInPath(NaN, 0) === false, "ctx.isPointInPath(NaN, 0) === false"); 13115 ok(ctx.isPointInPath(0, Infinity) === false, "ctx.isPointInPath(0, Infinity) === false"); 13116 ok(ctx.isPointInPath(0, -Infinity) === false, "ctx.isPointInPath(0, -Infinity) === false"); 13117 ok(ctx.isPointInPath(0, NaN) === false, "ctx.isPointInPath(0, NaN) === false"); 13118 ok(ctx.isPointInPath(NaN, NaN) === false, "ctx.isPointInPath(NaN, NaN) === false"); 13119 13120 } catch (e) { 13121 _thrown_outer = true; 13122 } 13123 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 13124 13125 13126 } 13127 </script> 13128 13129 <!-- [[[ test_2d.path.isPointInPath.outside.html ]]] --> 13130 13131 <p>Canvas test: 2d.path.isPointInPath.outside</p> 13132 <!-- Testing: isPointInPath() works on paths outside the canvas --> 13133 <canvas id="c407" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13134 <script> 13135 13136 function test_2d_path_isPointInPath_outside() { 13137 13138 var canvas = document.getElementById('c407'); 13139 var ctx = canvas.getContext('2d'); 13140 13141 ctx.rect(0, -100, 20, 20); 13142 ctx.rect(20, -10, 20, 20); 13143 ok(ctx.isPointInPath(10, -110) === false, "ctx.isPointInPath(10, -110) === false"); 13144 ok(ctx.isPointInPath(10, -90) === true, "ctx.isPointInPath(10, -90) === true"); 13145 ok(ctx.isPointInPath(10, -70) === false, "ctx.isPointInPath(10, -70) === false"); 13146 ok(ctx.isPointInPath(30, -20) === false, "ctx.isPointInPath(30, -20) === false"); 13147 ok(ctx.isPointInPath(30, 0) === true, "ctx.isPointInPath(30, 0) === true"); 13148 ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false"); 13149 13150 13151 } 13152 </script> 13153 13154 <!-- [[[ test_2d.path.isPointInPath.subpath.html ]]] --> 13155 13156 <p>Canvas test: 2d.path.isPointInPath.subpath</p> 13157 <!-- Testing: isPointInPath() uses the current path, not just the subpath --> 13158 <canvas id="c408" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13159 <script> 13160 13161 function test_2d_path_isPointInPath_subpath() { 13162 13163 var canvas = document.getElementById('c408'); 13164 var ctx = canvas.getContext('2d'); 13165 13166 ctx.rect(0, 0, 20, 20); 13167 ctx.beginPath(); 13168 ctx.rect(20, 0, 20, 20); 13169 ctx.closePath(); 13170 ctx.rect(40, 0, 20, 20); 13171 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false"); 13172 ok(ctx.isPointInPath(30, 10) === true, "ctx.isPointInPath(30, 10) === true"); 13173 ok(ctx.isPointInPath(50, 10) === true, "ctx.isPointInPath(50, 10) === true"); 13174 13175 13176 } 13177 </script> 13178 13179 <!-- [[[ test_2d.path.isPointInPath.transform.1.html ]]] --> 13180 13181 <p>Canvas test: 2d.path.isPointInPath.transform.1 - bug 405300</p> 13182 <!-- Testing: isPointInPath() handles transformations correctly --> 13183 <canvas id="c409" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13184 <script> 13185 13186 function test_2d_path_isPointInPath_transform_1() { 13187 13188 var canvas = document.getElementById('c409'); 13189 var ctx = canvas.getContext('2d'); 13190 13191 ctx.translate(50, 0); 13192 ctx.rect(0, 0, 20, 20); 13193 ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false"); 13194 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false"); 13195 ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false"); 13196 ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true"); 13197 ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true"); 13198 ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false"); 13199 13200 13201 } 13202 </script> 13203 13204 <!-- [[[ test_2d.path.isPointInPath.transform.2.html ]]] --> 13205 13206 <p>Canvas test: 2d.path.isPointInPath.transform.2 - bug 405300</p> 13207 <!-- Testing: isPointInPath() handles transformations correctly --> 13208 <canvas id="c410" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13209 <script> 13210 13211 function test_2d_path_isPointInPath_transform_2() { 13212 13213 var canvas = document.getElementById('c410'); 13214 var ctx = canvas.getContext('2d'); 13215 13216 ctx.rect(50, 0, 20, 20); 13217 ctx.translate(50, 0); 13218 ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false"); 13219 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false"); 13220 ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false"); 13221 ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true"); 13222 ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true"); 13223 ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false"); 13224 13225 13226 } 13227 </script> 13228 13229 <!-- [[[ test_2d.path.isPointInPath.transform.3.html ]]] --> 13230 13231 <p>Canvas test: 2d.path.isPointInPath.transform.3 - bug 405300</p> 13232 <!-- Testing: isPointInPath() handles transformations correctly --> 13233 <canvas id="c411" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13234 <script> 13235 13236 function test_2d_path_isPointInPath_transform_3() { 13237 13238 var canvas = document.getElementById('c411'); 13239 var ctx = canvas.getContext('2d'); 13240 13241 ctx.scale(-1, 1); 13242 ctx.rect(-70, 0, 20, 20); 13243 ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false"); 13244 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false"); 13245 ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false"); 13246 ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true"); 13247 ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true"); 13248 ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false"); 13249 13250 13251 } 13252 </script> 13253 13254 <!-- [[[ test_2d.path.isPointInPath.unclosed.html ]]] --> 13255 13256 <p>Canvas test: 2d.path.isPointInPath.unclosed</p> 13257 <!-- Testing: isPointInPath() works on unclosed subpaths --> 13258 <canvas id="c412" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13259 <script> 13260 13261 function test_2d_path_isPointInPath_unclosed() { 13262 13263 var canvas = document.getElementById('c412'); 13264 var ctx = canvas.getContext('2d'); 13265 13266 ctx.moveTo(0, 0); 13267 ctx.lineTo(20, 0); 13268 ctx.lineTo(20, 20); 13269 ctx.lineTo(0, 20); 13270 ok(ctx.isPointInPath(10, 10) === true, "ctx.isPointInPath(10, 10) === true"); 13271 ok(ctx.isPointInPath(30, 10) === false, "ctx.isPointInPath(30, 10) === false"); 13272 13273 13274 } 13275 </script> 13276 13277 <!-- [[[ test_2d.path.isPointInPath.winding.html ]]] --> 13278 13279 <p>Canvas test: 2d.path.isPointInPath.winding</p> 13280 <!-- Testing: isPointInPath() uses the non-zero winding number rule --> 13281 <canvas id="c413" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13282 <script> 13283 13284 function test_2d_path_isPointInPath_winding() { 13285 13286 var canvas = document.getElementById('c413'); 13287 var ctx = canvas.getContext('2d'); 13288 13289 // Create a square ring, using opposite windings to make a hole in the centre 13290 ctx.moveTo(0, 0); 13291 ctx.lineTo(50, 0); 13292 ctx.lineTo(50, 50); 13293 ctx.lineTo(0, 50); 13294 ctx.lineTo(0, 0); 13295 ctx.lineTo(10, 10); 13296 ctx.lineTo(10, 40); 13297 ctx.lineTo(40, 40); 13298 ctx.lineTo(40, 10); 13299 ctx.lineTo(10, 10); 13300 13301 ok(ctx.isPointInPath(5, 5) === true, "ctx.isPointInPath(5, 5) === true"); 13302 ok(ctx.isPointInPath(25, 5) === true, "ctx.isPointInPath(25, 5) === true"); 13303 ok(ctx.isPointInPath(45, 5) === true, "ctx.isPointInPath(45, 5) === true"); 13304 ok(ctx.isPointInPath(5, 25) === true, "ctx.isPointInPath(5, 25) === true"); 13305 ok(ctx.isPointInPath(25, 25) === false, "ctx.isPointInPath(25, 25) === false"); 13306 ok(ctx.isPointInPath(45, 25) === true, "ctx.isPointInPath(45, 25) === true"); 13307 ok(ctx.isPointInPath(5, 45) === true, "ctx.isPointInPath(5, 45) === true"); 13308 ok(ctx.isPointInPath(25, 45) === true, "ctx.isPointInPath(25, 45) === true"); 13309 ok(ctx.isPointInPath(45, 45) === true, "ctx.isPointInPath(45, 45) === true"); 13310 13311 13312 } 13313 </script> 13314 13315 <!-- [[[ test_2d.path.lineTo.basic.html ]]] --> 13316 13317 <p>Canvas test: 2d.path.lineTo.basic</p> 13318 <canvas id="c414" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13319 <script> 13320 13321 13322 function test_2d_path_lineTo_basic() { 13323 13324 var canvas = document.getElementById('c414'); 13325 var ctx = canvas.getContext('2d'); 13326 13327 ctx.strokeStyle = '#0f0'; 13328 ctx.lineWidth = 50; 13329 ctx.beginPath(); 13330 ctx.moveTo(0, 25); 13331 ctx.lineTo(100, 25); 13332 ctx.stroke(); 13333 isPixel(ctx, 50,25, 0,255,0,255, 0); 13334 13335 13336 } 13337 </script> 13338 13339 <!-- [[[ test_2d.path.lineTo.emptysubpath.html ]]] --> 13340 13341 <p>Canvas test: 2d.path.lineTo.emptysubpath</p> 13342 <canvas id="c415" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 13343 <script> 13344 13345 13346 13347 function test_2d_path_lineTo_emptysubpath() { 13348 13349 var canvas = document.getElementById('c415'); 13350 var ctx = canvas.getContext('2d'); 13351 13352 ctx.strokeStyle = '#f00'; 13353 ctx.lineWidth = 50; 13354 ctx.beginPath(); 13355 ctx.lineTo(0, 25); 13356 ctx.lineTo(100, 25); 13357 ctx.stroke(); 13358 todo_isPixel(ctx, 50,25, 0,0,0,0, 0); 13359 13360 13361 } 13362 </script> 13363 13364 <!-- [[[ test_2d.path.lineTo.nextpoint.html ]]] --> 13365 13366 <p>Canvas test: 2d.path.lineTo.nextpoint</p> 13367 <canvas id="c416" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13368 <script> 13369 13370 13371 function test_2d_path_lineTo_nextpoint() { 13372 13373 var canvas = document.getElementById('c416'); 13374 var ctx = canvas.getContext('2d'); 13375 13376 ctx.strokeStyle = '#0f0'; 13377 ctx.lineWidth = 50; 13378 ctx.beginPath(); 13379 ctx.moveTo(-100, -100); 13380 ctx.lineTo(0, 25); 13381 ctx.lineTo(100, 25); 13382 ctx.stroke(); 13383 isPixel(ctx, 50,25, 0,255,0,255, 0); 13384 13385 13386 } 13387 </script> 13388 13389 <!-- [[[ test_2d.path.lineTo.nonfinite.html ]]] --> 13390 13391 <p>Canvas test: 2d.path.lineTo.nonfinite</p> 13392 <!-- Testing: lineTo() with Infinity/NaN is ignored --> 13393 <canvas id="c417" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13394 <script> 13395 13396 13397 function test_2d_path_lineTo_nonfinite() { 13398 13399 var canvas = document.getElementById('c417'); 13400 var ctx = canvas.getContext('2d'); 13401 13402 var _thrown_outer = false; 13403 try { 13404 13405 ctx.moveTo(0, 0); 13406 ctx.lineTo(100, 0); 13407 ctx.lineTo(Infinity, 50); 13408 ctx.lineTo(-Infinity, 50); 13409 ctx.lineTo(NaN, 50); 13410 ctx.lineTo(0, Infinity); 13411 ctx.lineTo(0, -Infinity); 13412 ctx.lineTo(0, NaN); 13413 ctx.lineTo(Infinity, Infinity); 13414 ctx.lineTo(100, 50); 13415 ctx.lineTo(0, 50); 13416 ctx.fillStyle = '#0f0'; 13417 ctx.fill(); 13418 isPixel(ctx, 50,25, 0,255,0,255, 0); 13419 isPixel(ctx, 90,45, 0,255,0,255, 0); 13420 13421 } catch (e) { 13422 _thrown_outer = true; 13423 } 13424 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 13425 13426 13427 } 13428 </script> 13429 13430 <!-- [[[ test_2d.path.moveTo.basic.html ]]] --> 13431 13432 <p>Canvas test: 2d.path.moveTo.basic</p> 13433 <canvas id="c418" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13434 <script> 13435 13436 13437 function test_2d_path_moveTo_basic() { 13438 13439 var canvas = document.getElementById('c418'); 13440 var ctx = canvas.getContext('2d'); 13441 13442 ctx.rect(0, 0, 10, 50); 13443 ctx.moveTo(100, 0); 13444 ctx.lineTo(10, 0); 13445 ctx.lineTo(10, 50); 13446 ctx.lineTo(100, 50); 13447 ctx.fillStyle = '#0f0'; 13448 ctx.fill(); 13449 isPixel(ctx, 90,25, 0,255,0,255, 0); 13450 13451 13452 } 13453 </script> 13454 13455 <!-- [[[ test_2d.path.moveTo.multiple.html ]]] --> 13456 13457 <p>Canvas test: 2d.path.moveTo.multiple</p> 13458 <canvas id="c419" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13459 <script> 13460 13461 13462 function test_2d_path_moveTo_multiple() { 13463 13464 var canvas = document.getElementById('c419'); 13465 var ctx = canvas.getContext('2d'); 13466 13467 ctx.moveTo(0, 25); 13468 ctx.moveTo(100, 25); 13469 ctx.moveTo(0, 25); 13470 ctx.lineTo(100, 25); 13471 ctx.strokeStyle = '#0f0'; 13472 ctx.lineWidth = 50; 13473 ctx.stroke(); 13474 isPixel(ctx, 50,25, 0,255,0,255, 0); 13475 13476 13477 } 13478 </script> 13479 13480 <!-- [[[ test_2d.path.moveTo.newsubpath.html ]]] --> 13481 13482 <p>Canvas test: 2d.path.moveTo.newsubpath</p> 13483 <canvas id="c420" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 13484 <script> 13485 13486 13487 function test_2d_path_moveTo_newsubpath() { 13488 13489 var canvas = document.getElementById('c420'); 13490 var ctx = canvas.getContext('2d'); 13491 13492 ctx.beginPath(); 13493 ctx.moveTo(0, 0); 13494 ctx.moveTo(100, 0); 13495 ctx.moveTo(100, 50); 13496 ctx.moveTo(0, 50); 13497 ctx.fillStyle = '#f00'; 13498 ctx.fill(); 13499 isPixel(ctx, 50,25, 0,0,0,0, 0); 13500 13501 13502 } 13503 </script> 13504 13505 <!-- [[[ test_2d.path.moveTo.nonfinite.html ]]] --> 13506 13507 <p>Canvas test: 2d.path.moveTo.nonfinite</p> 13508 <!-- Testing: moveTo() with Infinity/NaN is ignored --> 13509 <canvas id="c421" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13510 <script> 13511 13512 13513 function test_2d_path_moveTo_nonfinite() { 13514 13515 var canvas = document.getElementById('c421'); 13516 var ctx = canvas.getContext('2d'); 13517 13518 var _thrown_outer = false; 13519 try { 13520 13521 ctx.moveTo(0, 0); 13522 ctx.lineTo(100, 0); 13523 ctx.moveTo(Infinity, 50); 13524 ctx.moveTo(-Infinity, 50); 13525 ctx.moveTo(NaN, 50); 13526 ctx.moveTo(0, Infinity); 13527 ctx.moveTo(0, -Infinity); 13528 ctx.moveTo(0, NaN); 13529 ctx.moveTo(Infinity, Infinity); 13530 ctx.lineTo(100, 50); 13531 ctx.lineTo(0, 50); 13532 ctx.fillStyle = '#0f0'; 13533 ctx.fill(); 13534 isPixel(ctx, 50,25, 0,255,0,255, 0); 13535 13536 } catch (e) { 13537 _thrown_outer = true; 13538 } 13539 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 13540 13541 13542 } 13543 </script> 13544 13545 <!-- [[[ test_2d.path.quadraticCurveTo.basic.html ]]] --> 13546 13547 <p>Canvas test: 2d.path.quadraticCurveTo.basic</p> 13548 <canvas id="c422" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13549 <script> 13550 13551 13552 function test_2d_path_quadraticCurveTo_basic() { 13553 13554 var canvas = document.getElementById('c422'); 13555 var ctx = canvas.getContext('2d'); 13556 13557 ctx.strokeStyle = '#0f0'; 13558 ctx.lineWidth = 50; 13559 ctx.beginPath(); 13560 ctx.moveTo(0, 25); 13561 ctx.quadraticCurveTo(100, 25, 100, 25); 13562 ctx.stroke(); 13563 isPixel(ctx, 50,25, 0,255,0,255, 0); 13564 13565 13566 } 13567 </script> 13568 13569 <!-- [[[ test_2d.path.quadraticCurveTo.emptysubpath.html ]]] --> 13570 13571 <p>Canvas test: 2d.path.quadraticCurveTo.emptysubpath</p> 13572 <canvas id="c423" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 13573 <script> 13574 13575 13576 13577 function test_2d_path_quadraticCurveTo_emptysubpath() { 13578 13579 var canvas = document.getElementById('c423'); 13580 var ctx = canvas.getContext('2d'); 13581 13582 ctx.strokeStyle = '#f00'; 13583 ctx.lineWidth = 50; 13584 ctx.beginPath(); 13585 ctx.quadraticCurveTo(0, 25, 0, 25); 13586 ctx.quadraticCurveTo(100, 25, 100, 25); 13587 ctx.stroke(); 13588 todo_isPixel(ctx, 50,25, 0,0,0,0, 0); 13589 13590 13591 } 13592 </script> 13593 13594 <!-- [[[ test_2d.path.quadraticCurveTo.nonfinite.html ]]] --> 13595 13596 <p>Canvas test: 2d.path.quadraticCurveTo.nonfinite</p> 13597 <!-- Testing: quadraticCurveTo() with Infinity/NaN is ignored --> 13598 <canvas id="c424" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13599 <script> 13600 13601 13602 function test_2d_path_quadraticCurveTo_nonfinite() { 13603 13604 var canvas = document.getElementById('c424'); 13605 var ctx = canvas.getContext('2d'); 13606 13607 var _thrown_outer = false; 13608 try { 13609 13610 ctx.moveTo(0, 0); 13611 ctx.lineTo(100, 0); 13612 ctx.quadraticCurveTo(Infinity, 50, 0, 50); 13613 ctx.quadraticCurveTo(-Infinity, 50, 0, 50); 13614 ctx.quadraticCurveTo(NaN, 50, 0, 50); 13615 ctx.quadraticCurveTo(0, Infinity, 0, 50); 13616 ctx.quadraticCurveTo(0, -Infinity, 0, 50); 13617 ctx.quadraticCurveTo(0, NaN, 0, 50); 13618 ctx.quadraticCurveTo(0, 50, Infinity, 50); 13619 ctx.quadraticCurveTo(0, 50, -Infinity, 50); 13620 ctx.quadraticCurveTo(0, 50, NaN, 50); 13621 ctx.quadraticCurveTo(0, 50, 0, Infinity); 13622 ctx.quadraticCurveTo(0, 50, 0, -Infinity); 13623 ctx.quadraticCurveTo(0, 50, 0, NaN); 13624 ctx.quadraticCurveTo(Infinity, Infinity, 0, 50); 13625 ctx.quadraticCurveTo(Infinity, Infinity, Infinity, 50); 13626 ctx.quadraticCurveTo(Infinity, Infinity, Infinity, Infinity); 13627 ctx.quadraticCurveTo(Infinity, Infinity, 0, Infinity); 13628 ctx.quadraticCurveTo(Infinity, 50, Infinity, 50); 13629 ctx.quadraticCurveTo(Infinity, 50, Infinity, Infinity); 13630 ctx.quadraticCurveTo(Infinity, 50, 0, Infinity); 13631 ctx.quadraticCurveTo(0, Infinity, Infinity, 50); 13632 ctx.quadraticCurveTo(0, Infinity, Infinity, Infinity); 13633 ctx.quadraticCurveTo(0, Infinity, 0, Infinity); 13634 ctx.quadraticCurveTo(0, 50, Infinity, Infinity); 13635 ctx.lineTo(100, 50); 13636 ctx.lineTo(0, 50); 13637 ctx.fillStyle = '#0f0'; 13638 ctx.fill(); 13639 isPixel(ctx, 50,25, 0,255,0,255, 0); 13640 isPixel(ctx, 90,45, 0,255,0,255, 0); 13641 13642 } catch (e) { 13643 _thrown_outer = true; 13644 } 13645 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 13646 13647 13648 } 13649 </script> 13650 13651 <!-- [[[ test_2d.path.quadraticCurveTo.scaled.html ]]] --> 13652 13653 <p>Canvas test: 2d.path.quadraticCurveTo.scaled</p> 13654 <canvas id="c425" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13655 <script> 13656 13657 13658 function test_2d_path_quadraticCurveTo_scaled() { 13659 13660 var canvas = document.getElementById('c425'); 13661 var ctx = canvas.getContext('2d'); 13662 13663 ctx.scale(1000, 1000); 13664 ctx.strokeStyle = '#0f0'; 13665 ctx.lineWidth = 0.055; 13666 ctx.beginPath(); 13667 ctx.moveTo(-1, 1.05); 13668 ctx.quadraticCurveTo(0, -1, 1.2, 1.05); 13669 ctx.stroke(); 13670 isPixel(ctx, 50,25, 0,255,0,255, 0); 13671 isPixel(ctx, 1,1, 0,255,0,255, 0); 13672 isPixel(ctx, 98,1, 0,255,0,255, 0); 13673 isPixel(ctx, 1,48, 0,255,0,255, 0); 13674 isPixel(ctx, 98,48, 0,255,0,255, 0); 13675 13676 13677 } 13678 </script> 13679 13680 <!-- [[[ test_2d.path.quadraticCurveTo.shape.html ]]] --> 13681 13682 <p>Canvas test: 2d.path.quadraticCurveTo.shape</p> 13683 <canvas id="c426" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13684 <script> 13685 13686 13687 function test_2d_path_quadraticCurveTo_shape() { 13688 13689 var canvas = document.getElementById('c426'); 13690 var ctx = canvas.getContext('2d'); 13691 13692 ctx.strokeStyle = '#0f0'; 13693 ctx.lineWidth = 55; 13694 ctx.beginPath(); 13695 ctx.moveTo(-1000, 1050); 13696 ctx.quadraticCurveTo(0, -1000, 1200, 1050); 13697 ctx.stroke(); 13698 isPixel(ctx, 50,25, 0,255,0,255, 0); 13699 isPixel(ctx, 1,1, 0,255,0,255, 0); 13700 isPixel(ctx, 98,1, 0,255,0,255, 0); 13701 isPixel(ctx, 1,48, 0,255,0,255, 0); 13702 isPixel(ctx, 98,48, 0,255,0,255, 0); 13703 13704 13705 } 13706 </script> 13707 13708 <!-- [[[ test_2d.path.rect.basic.html ]]] --> 13709 13710 <p>Canvas test: 2d.path.rect.basic</p> 13711 <canvas id="c427" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13712 <script> 13713 13714 13715 function test_2d_path_rect_basic() { 13716 13717 var canvas = document.getElementById('c427'); 13718 var ctx = canvas.getContext('2d'); 13719 13720 ctx.fillStyle = '#0f0'; 13721 ctx.rect(0, 0, 100, 50); 13722 ctx.fill(); 13723 isPixel(ctx, 50,25, 0,255,0,255, 0); 13724 13725 13726 } 13727 </script> 13728 13729 <!-- [[[ test_2d.path.rect.closed.html ]]] --> 13730 13731 <p>Canvas test: 2d.path.rect.closed</p> 13732 <canvas id="c428" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13733 <script> 13734 13735 13736 function test_2d_path_rect_closed() { 13737 13738 var canvas = document.getElementById('c428'); 13739 var ctx = canvas.getContext('2d'); 13740 13741 ctx.strokeStyle = '#0f0'; 13742 ctx.lineWidth = 200; 13743 ctx.lineJoin = 'miter'; 13744 ctx.rect(100, 50, 100, 100); 13745 ctx.stroke(); 13746 isPixel(ctx, 50,25, 0,255,0,255, 0); 13747 13748 13749 } 13750 </script> 13751 13752 <!-- [[[ test_2d.path.rect.end.1.html ]]] --> 13753 13754 <p>Canvas test: 2d.path.rect.end.1</p> 13755 <canvas id="c429" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13756 <script> 13757 13758 13759 function test_2d_path_rect_end_1() { 13760 13761 var canvas = document.getElementById('c429'); 13762 var ctx = canvas.getContext('2d'); 13763 13764 ctx.strokeStyle = '#0f0'; 13765 ctx.lineWidth = 100; 13766 ctx.rect(200, 100, 400, 1000); 13767 ctx.lineTo(-2000, -1000); 13768 ctx.stroke(); 13769 isPixel(ctx, 50,25, 0,255,0,255, 0); 13770 13771 13772 } 13773 </script> 13774 13775 <!-- [[[ test_2d.path.rect.end.2.html ]]] --> 13776 13777 <p>Canvas test: 2d.path.rect.end.2</p> 13778 <canvas id="c430" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13779 <script> 13780 13781 13782 function test_2d_path_rect_end_2() { 13783 13784 var canvas = document.getElementById('c430'); 13785 var ctx = canvas.getContext('2d'); 13786 13787 ctx.strokeStyle = '#0f0'; 13788 ctx.lineWidth = 450; 13789 ctx.lineCap = 'round'; 13790 ctx.lineJoin = 'bevel'; 13791 ctx.rect(150, 150, 2000, 2000); 13792 ctx.lineTo(160, 160); 13793 ctx.stroke(); 13794 isPixel(ctx, 1,1, 0,255,0,255, 0); 13795 isPixel(ctx, 98,1, 0,255,0,255, 0); 13796 isPixel(ctx, 1,48, 0,255,0,255, 0); 13797 isPixel(ctx, 98,48, 0,255,0,255, 0); 13798 13799 13800 } 13801 </script> 13802 13803 <!-- [[[ test_2d.path.rect.negative.html ]]] --> 13804 13805 <p>Canvas test: 2d.path.rect.negative</p> 13806 <canvas id="c431" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13807 <script> 13808 13809 13810 function test_2d_path_rect_negative() { 13811 13812 var canvas = document.getElementById('c431'); 13813 var ctx = canvas.getContext('2d'); 13814 13815 ctx.fillStyle = '#f00'; 13816 ctx.fillRect(0, 0, 100, 50); 13817 ctx.beginPath(); 13818 ctx.fillStyle = '#0f0'; 13819 ctx.rect(0, 0, 50, 25); 13820 ctx.rect(100, 0, -50, 25); 13821 ctx.rect(0, 50, 50, -25); 13822 ctx.rect(100, 50, -50, -25); 13823 ctx.fill(); 13824 isPixel(ctx, 25,12, 0,255,0,255, 0); 13825 isPixel(ctx, 75,12, 0,255,0,255, 0); 13826 isPixel(ctx, 25,37, 0,255,0,255, 0); 13827 isPixel(ctx, 75,37, 0,255,0,255, 0); 13828 13829 13830 } 13831 </script> 13832 13833 <!-- [[[ test_2d.path.rect.newsubpath.html ]]] --> 13834 13835 <p>Canvas test: 2d.path.rect.newsubpath</p> 13836 <canvas id="c432" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 13837 <script> 13838 13839 13840 function test_2d_path_rect_newsubpath() { 13841 13842 var canvas = document.getElementById('c432'); 13843 var ctx = canvas.getContext('2d'); 13844 13845 ctx.beginPath(); 13846 ctx.strokeStyle = '#f00'; 13847 ctx.lineWidth = 50; 13848 ctx.moveTo(-100, 25); 13849 ctx.lineTo(-50, 25); 13850 ctx.rect(200, 25, 1, 1); 13851 ctx.stroke(); 13852 isPixel(ctx, 50,25, 0,0,0,0, 0); 13853 13854 13855 } 13856 </script> 13857 13858 <!-- [[[ test_2d.path.rect.nonfinite.html ]]] --> 13859 13860 <p>Canvas test: 2d.path.rect.nonfinite</p> 13861 <!-- Testing: rect() with Infinity/NaN is ignored --> 13862 <canvas id="c433" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13863 <script> 13864 13865 13866 function test_2d_path_rect_nonfinite() { 13867 13868 var canvas = document.getElementById('c433'); 13869 var ctx = canvas.getContext('2d'); 13870 13871 var _thrown_outer = false; 13872 try { 13873 13874 ctx.moveTo(0, 0); 13875 ctx.lineTo(100, 0); 13876 ctx.rect(Infinity, 50, 1, 1); 13877 ctx.rect(-Infinity, 50, 1, 1); 13878 ctx.rect(NaN, 50, 1, 1); 13879 ctx.rect(0, Infinity, 1, 1); 13880 ctx.rect(0, -Infinity, 1, 1); 13881 ctx.rect(0, NaN, 1, 1); 13882 ctx.rect(0, 50, Infinity, 1); 13883 ctx.rect(0, 50, -Infinity, 1); 13884 ctx.rect(0, 50, NaN, 1); 13885 ctx.rect(0, 50, 1, Infinity); 13886 ctx.rect(0, 50, 1, -Infinity); 13887 ctx.rect(0, 50, 1, NaN); 13888 ctx.rect(Infinity, Infinity, 1, 1); 13889 ctx.rect(Infinity, Infinity, Infinity, 1); 13890 ctx.rect(Infinity, Infinity, Infinity, Infinity); 13891 ctx.rect(Infinity, Infinity, 1, Infinity); 13892 ctx.rect(Infinity, 50, Infinity, 1); 13893 ctx.rect(Infinity, 50, Infinity, Infinity); 13894 ctx.rect(Infinity, 50, 1, Infinity); 13895 ctx.rect(0, Infinity, Infinity, 1); 13896 ctx.rect(0, Infinity, Infinity, Infinity); 13897 ctx.rect(0, Infinity, 1, Infinity); 13898 ctx.rect(0, 50, Infinity, Infinity); 13899 ctx.lineTo(100, 50); 13900 ctx.lineTo(0, 50); 13901 ctx.fillStyle = '#0f0'; 13902 ctx.fill(); 13903 isPixel(ctx, 50,25, 0,255,0,255, 0); 13904 isPixel(ctx, 90,45, 0,255,0,255, 0); 13905 13906 } catch (e) { 13907 _thrown_outer = true; 13908 } 13909 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 13910 13911 13912 } 13913 </script> 13914 13915 <!-- [[[ test_2d.path.rect.selfintersect.html ]]] --> 13916 13917 <p>Canvas test: 2d.path.rect.selfintersect</p> 13918 <canvas id="c434" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13919 <script> 13920 13921 13922 13923 function test_2d_path_rect_selfintersect() { 13924 13925 var canvas = document.getElementById('c434'); 13926 var ctx = canvas.getContext('2d'); 13927 13928 ctx.strokeStyle = '#0f0'; 13929 ctx.lineWidth = 90; 13930 ctx.beginPath(); 13931 ctx.rect(45, 20, 10, 10); 13932 ctx.stroke(); 13933 isPixel(ctx, 50,25, 0,255,0,255, 0); 13934 13935 13936 } 13937 </script> 13938 13939 <!-- [[[ test_2d.path.rect.winding.html ]]] --> 13940 13941 <p>Canvas test: 2d.path.rect.winding</p> 13942 <canvas id="c435" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 13943 <script> 13944 13945 13946 function test_2d_path_rect_winding() { 13947 13948 var canvas = document.getElementById('c435'); 13949 var ctx = canvas.getContext('2d'); 13950 13951 ctx.fillStyle = '#0f0'; 13952 ctx.fillRect(0, 0, 100, 50); 13953 ctx.beginPath(); 13954 ctx.fillStyle = '#f00'; 13955 ctx.rect(0, 0, 50, 50); 13956 ctx.rect(100, 50, -50, -50); 13957 ctx.rect(0, 25, 100, -25); 13958 ctx.rect(100, 25, -100, 25); 13959 ctx.fill(); 13960 isPixel(ctx, 25,12, 0,255,0,255, 0); 13961 isPixel(ctx, 75,12, 0,255,0,255, 0); 13962 isPixel(ctx, 25,37, 0,255,0,255, 0); 13963 isPixel(ctx, 75,37, 0,255,0,255, 0); 13964 13965 13966 } 13967 </script> 13968 13969 <!-- [[[ test_2d.path.rect.zero.1.html ]]] --> 13970 13971 <p>Canvas test: 2d.path.rect.zero.1</p> 13972 <canvas id="c436" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13973 <script> 13974 13975 13976 function test_2d_path_rect_zero_1() { 13977 13978 var canvas = document.getElementById('c436'); 13979 var ctx = canvas.getContext('2d'); 13980 13981 ctx.strokeStyle = '#0f0'; 13982 ctx.lineWidth = 100; 13983 ctx.beginPath(); 13984 ctx.rect(0, 50, 100, 0); 13985 ctx.stroke(); 13986 isPixel(ctx, 50,25, 0,255,0,255, 0); 13987 13988 13989 } 13990 </script> 13991 13992 <!-- [[[ test_2d.path.rect.zero.2.html ]]] --> 13993 13994 <p>Canvas test: 2d.path.rect.zero.2</p> 13995 <canvas id="c437" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 13996 <script> 13997 13998 13999 function test_2d_path_rect_zero_2() { 14000 14001 var canvas = document.getElementById('c437'); 14002 var ctx = canvas.getContext('2d'); 14003 14004 ctx.strokeStyle = '#0f0'; 14005 ctx.lineWidth = 100; 14006 ctx.beginPath(); 14007 ctx.rect(50, -100, 0, 250); 14008 ctx.stroke(); 14009 isPixel(ctx, 50,25, 0,255,0,255, 0); 14010 14011 14012 } 14013 </script> 14014 14015 <!-- [[[ test_2d.path.rect.zero.3.html ]]] --> 14016 14017 <p>Canvas test: 2d.path.rect.zero.3</p> 14018 <canvas id="c438" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 14019 <script> 14020 14021 14022 function test_2d_path_rect_zero_3() { 14023 14024 var canvas = document.getElementById('c438'); 14025 var ctx = canvas.getContext('2d'); 14026 14027 ctx.strokeStyle = '#f00'; 14028 ctx.lineWidth = 100; 14029 ctx.beginPath(); 14030 ctx.rect(50, 25, 0, 0); 14031 ctx.stroke(); 14032 isPixel(ctx, 50,25, 0,0,0,0, 0); 14033 } 14034 </script> 14035 14036 <!-- [[[ test_2d.path.rect.zero.4.html ]]] --> 14037 14038 <p>Canvas test: 2d.path.rect.zero.4</p> 14039 <canvas id="c439" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 14040 <script> 14041 14042 14043 function test_2d_path_rect_zero_4() { 14044 14045 var canvas = document.getElementById('c439'); 14046 var ctx = canvas.getContext('2d'); 14047 14048 ctx.strokeStyle = '#0f0'; 14049 ctx.lineWidth = 50; 14050 ctx.rect(100, 25, 0, 0); 14051 ctx.lineTo(0, 25); 14052 ctx.stroke(); 14053 isPixel(ctx, 50,25, 0,255,0,255, 0); 14054 14055 14056 } 14057 </script> 14058 14059 <!-- [[[ test_2d.path.rect.zero.5.html ]]] --> 14060 14061 <p>Canvas test: 2d.path.rect.zero.5</p> 14062 <canvas id="c440" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 14063 <script> 14064 14065 14066 function test_2d_path_rect_zero_5() { 14067 14068 var canvas = document.getElementById('c440'); 14069 var ctx = canvas.getContext('2d'); 14070 14071 ctx.strokeStyle = '#f00'; 14072 ctx.lineWidth = 50; 14073 ctx.moveTo(0, 0); 14074 ctx.rect(100, 25, 0, 0); 14075 ctx.stroke(); 14076 isPixel(ctx, 50,25, 0,0,0,0, 0); 14077 14078 14079 } 14080 </script> 14081 14082 <!-- [[[ test_2d.path.rect.zero.6.html ]]] --> 14083 14084 <p>Canvas test: 2d.path.rect.zero.6</p> 14085 <canvas id="c441" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 14086 <script> 14087 14088 14089 14090 function test_2d_path_rect_zero_6() { 14091 14092 var canvas = document.getElementById('c441'); 14093 var ctx = canvas.getContext('2d'); 14094 14095 ctx.strokeStyle = '#f00'; 14096 ctx.lineJoin = 'miter'; 14097 ctx.miterLimit = 1.5; 14098 ctx.lineWidth = 200; 14099 ctx.beginPath(); 14100 ctx.rect(100, 25, 1000, 0); 14101 ctx.stroke(); 14102 todo_isPixel(ctx, 50,25, 0,0,0,0, 0); 14103 14104 14105 } 14106 </script> 14107 14108 <!-- [[[ test_2d.path.stroke.empty.html ]]] --> 14109 14110 <p>Canvas test: 2d.path.stroke.empty</p> 14111 <!-- Testing: Empty subpaths are not stroked --> 14112 <canvas id="c442" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14113 <script> 14114 14115 14116 function test_2d_path_stroke_empty() { 14117 14118 var canvas = document.getElementById('c442'); 14119 var ctx = canvas.getContext('2d'); 14120 14121 ctx.fillStyle = '#0f0'; 14122 ctx.fillRect(0, 0, 100, 50); 14123 14124 ctx.strokeStyle = '#f00'; 14125 ctx.lineWidth = 100; 14126 ctx.lineCap = 'round'; 14127 ctx.lineJoin = 'round'; 14128 14129 ctx.beginPath(); 14130 ctx.moveTo(40, 25); 14131 ctx.moveTo(60, 25); 14132 ctx.stroke(); 14133 14134 isPixel(ctx, 50,25, 0,255,0,255, 0); 14135 14136 14137 } 14138 </script> 14139 14140 <!-- [[[ test_2d.path.stroke.overlap.html ]]] --> 14141 14142 <p>Canvas test: 2d.path.stroke.overlap</p> 14143 <!-- Testing: Stroked subpaths are combined before being drawn --> 14144 <canvas id="c443" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14145 <script> 14146 14147 14148 function test_2d_path_stroke_overlap() { 14149 14150 var canvas = document.getElementById('c443'); 14151 var ctx = canvas.getContext('2d'); 14152 14153 ctx.fillStyle = '#000'; 14154 ctx.fillRect(0, 0, 100, 50); 14155 14156 ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)'; 14157 ctx.lineWidth = 50; 14158 ctx.moveTo(0, 20); 14159 ctx.lineTo(100, 20); 14160 ctx.moveTo(0, 30); 14161 ctx.lineTo(100, 30); 14162 ctx.stroke(); 14163 14164 isPixel(ctx, 50,25, 0,127,0,255, 1); 14165 14166 14167 } 14168 </script> 14169 14170 <!-- [[[ test_2d.path.stroke.prune.arc.html ]]] --> 14171 14172 <p>Canvas test: 2d.path.stroke.prune.arc</p> 14173 <!-- Testing: Zero-length line segments from arcTo and arc are removed before stroking --> 14174 <canvas id="c444" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14175 <script> 14176 14177 14178 14179 function test_2d_path_stroke_prune_arc() { 14180 14181 var canvas = document.getElementById('c444'); 14182 var ctx = canvas.getContext('2d'); 14183 14184 ctx.fillStyle = '#0f0'; 14185 ctx.fillRect(0, 0, 100, 50); 14186 14187 ctx.strokeStyle = '#f00'; 14188 ctx.lineWidth = 100; 14189 ctx.lineCap = 'round'; 14190 ctx.lineJoin = 'round'; 14191 14192 ctx.beginPath(); 14193 ctx.moveTo(50, 25); 14194 ctx.arcTo(50, 25, 150, 25, 10); 14195 ctx.stroke(); 14196 14197 ctx.beginPath(); 14198 ctx.moveTo(50, 25); 14199 ctx.arc(50, 25, 10, 0, 0, false); 14200 ctx.stroke(); 14201 14202 todo_isPixel(ctx, 50,25, 0,255,0,255, 0); 14203 14204 14205 } 14206 </script> 14207 14208 <!-- [[[ test_2d.path.stroke.prune.closed.html ]]] --> 14209 14210 <p>Canvas test: 2d.path.stroke.prune.closed</p> 14211 <!-- Testing: Zero-length line segments from closed paths are removed before stroking --> 14212 <canvas id="c445" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14213 <script> 14214 14215 14216 14217 function test_2d_path_stroke_prune_closed() { 14218 14219 var canvas = document.getElementById('c445'); 14220 var ctx = canvas.getContext('2d'); 14221 14222 ctx.fillStyle = '#0f0'; 14223 ctx.fillRect(0, 0, 100, 50); 14224 14225 ctx.strokeStyle = '#f00'; 14226 ctx.lineWidth = 100; 14227 ctx.lineCap = 'round'; 14228 ctx.lineJoin = 'round'; 14229 14230 ctx.beginPath(); 14231 ctx.moveTo(50, 25); 14232 ctx.lineTo(50, 25); 14233 ctx.closePath(); 14234 ctx.stroke(); 14235 14236 isPixel(ctx, 50,25, 0,255,0,255, 0); 14237 14238 } 14239 </script> 14240 14241 <!-- [[[ test_2d.path.stroke.prune.corner.html ]]] --> 14242 14243 <p>Canvas test: 2d.path.stroke.prune.corner</p> 14244 <!-- Testing: Zero-length line segments are removed before stroking with miters --> 14245 <canvas id="c446" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14246 <script> 14247 14248 14249 function test_2d_path_stroke_prune_corner() { 14250 14251 var canvas = document.getElementById('c446'); 14252 var ctx = canvas.getContext('2d'); 14253 14254 ctx.fillStyle = '#0f0'; 14255 ctx.fillRect(0, 0, 100, 50); 14256 14257 ctx.strokeStyle = '#f00'; 14258 ctx.lineWidth = 400; 14259 ctx.lineJoin = 'miter'; 14260 ctx.miterLimit = 1.4; 14261 14262 ctx.beginPath(); 14263 ctx.moveTo(-1000, 200, 0, 0); 14264 ctx.lineTo(-100, 200); 14265 ctx.lineTo(-100, 200); 14266 ctx.lineTo(-100, 200); 14267 ctx.lineTo(-100, 1000); 14268 ctx.stroke(); 14269 14270 isPixel(ctx, 50,25, 0,255,0,255, 0); 14271 14272 14273 } 14274 </script> 14275 14276 <!-- [[[ test_2d.path.stroke.prune.curve.html ]]] --> 14277 14278 <p>Canvas test: 2d.path.stroke.prune.curve</p> 14279 <!-- Testing: Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking --> 14280 <canvas id="c447" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14281 <script> 14282 14283 14284 14285 function test_2d_path_stroke_prune_curve() { 14286 14287 var canvas = document.getElementById('c447'); 14288 var ctx = canvas.getContext('2d'); 14289 14290 ctx.fillStyle = '#0f0'; 14291 ctx.fillRect(0, 0, 100, 50); 14292 14293 ctx.strokeStyle = '#f00'; 14294 ctx.lineWidth = 100; 14295 ctx.lineCap = 'round'; 14296 ctx.lineJoin = 'round'; 14297 14298 ctx.beginPath(); 14299 ctx.moveTo(50, 25); 14300 ctx.quadraticCurveTo(50, 25, 50, 25); 14301 ctx.stroke(); 14302 14303 ctx.beginPath(); 14304 ctx.moveTo(50, 25); 14305 ctx.bezierCurveTo(50, 25, 50, 25, 50, 25); 14306 ctx.stroke(); 14307 14308 todo_isPixel(ctx, 50,25, 0,255,0,255, 0); 14309 14310 } 14311 </script> 14312 14313 <!-- [[[ test_2d.path.stroke.prune.line.html ]]] --> 14314 14315 <p>Canvas test: 2d.path.stroke.prune.line</p> 14316 <!-- Testing: Zero-length line segments from lineTo are removed before stroking --> 14317 <canvas id="c448" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14318 <script> 14319 14320 14321 14322 function test_2d_path_stroke_prune_line() { 14323 14324 var canvas = document.getElementById('c448'); 14325 var ctx = canvas.getContext('2d'); 14326 14327 ctx.fillStyle = '#0f0'; 14328 ctx.fillRect(0, 0, 100, 50); 14329 14330 ctx.strokeStyle = '#f00'; 14331 ctx.lineWidth = 100; 14332 ctx.lineCap = 'round'; 14333 ctx.lineJoin = 'round'; 14334 14335 ctx.beginPath(); 14336 ctx.moveTo(50, 25); 14337 ctx.lineTo(50, 25); 14338 ctx.stroke(); 14339 14340 todo_isPixel(ctx, 50,25, 0,255,0,255, 0); 14341 14342 } 14343 </script> 14344 14345 <!-- [[[ test_2d.path.stroke.prune.rect.html ]]] --> 14346 14347 <p>Canvas test: 2d.path.stroke.prune.rect</p> 14348 <!-- Testing: Zero-length line segments from rect and strokeRect are removed before stroking --> 14349 <canvas id="c449" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14350 <script> 14351 14352 14353 14354 function test_2d_path_stroke_prune_rect() { 14355 14356 var canvas = document.getElementById('c449'); 14357 var ctx = canvas.getContext('2d'); 14358 14359 ctx.fillStyle = '#0f0'; 14360 ctx.fillRect(0, 0, 100, 50); 14361 14362 ctx.strokeStyle = '#f00'; 14363 ctx.lineWidth = 100; 14364 ctx.lineCap = 'round'; 14365 ctx.lineJoin = 'round'; 14366 14367 ctx.beginPath(); 14368 ctx.rect(50, 25, 0, 0); 14369 ctx.stroke(); 14370 14371 ctx.strokeRect(50, 25, 0, 0); 14372 14373 isPixel(ctx, 50,25, 0,255,0,255, 0); 14374 14375 } 14376 </script> 14377 14378 <!-- [[[ test_2d.path.stroke.scale1.html ]]] --> 14379 14380 <p>Canvas test: 2d.path.stroke.scale1</p> 14381 <!-- Testing: Stroke line widths are scaled by the current transformation matrix --> 14382 <canvas id="c450" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14383 <script> 14384 14385 14386 function test_2d_path_stroke_scale1() { 14387 14388 var canvas = document.getElementById('c450'); 14389 var ctx = canvas.getContext('2d'); 14390 14391 ctx.fillStyle = '#f00'; 14392 ctx.fillRect(0, 0, 100, 50); 14393 14394 ctx.beginPath(); 14395 ctx.rect(25, 12.5, 50, 25); 14396 ctx.save(); 14397 ctx.scale(50, 25); 14398 ctx.strokeStyle = '#0f0'; 14399 ctx.stroke(); 14400 ctx.restore(); 14401 14402 ctx.beginPath(); 14403 ctx.rect(-25, -12.5, 150, 75); 14404 ctx.save(); 14405 ctx.scale(50, 25); 14406 ctx.strokeStyle = '#f00'; 14407 ctx.stroke(); 14408 ctx.restore(); 14409 14410 isPixel(ctx, 0,0, 0,255,0,255, 0); 14411 isPixel(ctx, 50,0, 0,255,0,255, 0); 14412 isPixel(ctx, 99,0, 0,255,0,255, 0); 14413 isPixel(ctx, 0,25, 0,255,0,255, 0); 14414 isPixel(ctx, 50,25, 0,255,0,255, 0); 14415 isPixel(ctx, 99,25, 0,255,0,255, 0); 14416 isPixel(ctx, 0,49, 0,255,0,255, 0); 14417 isPixel(ctx, 50,49, 0,255,0,255, 0); 14418 isPixel(ctx, 99,49, 0,255,0,255, 0); 14419 14420 14421 } 14422 </script> 14423 14424 <!-- [[[ test_2d.path.stroke.scale2.html ]]] --> 14425 14426 <p>Canvas test: 2d.path.stroke.scale2</p> 14427 <!-- Testing: Stroke line widths are scaled by the current transformation matrix --> 14428 <canvas id="c451" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14429 <script> 14430 14431 14432 function test_2d_path_stroke_scale2() { 14433 14434 var canvas = document.getElementById('c451'); 14435 var ctx = canvas.getContext('2d'); 14436 14437 ctx.fillStyle = '#f00'; 14438 ctx.fillRect(0, 0, 100, 50); 14439 14440 ctx.beginPath(); 14441 ctx.rect(25, 12.5, 50, 25); 14442 ctx.save(); 14443 ctx.rotate(Math.PI/2); 14444 ctx.scale(25, 50); 14445 ctx.strokeStyle = '#0f0'; 14446 ctx.stroke(); 14447 ctx.restore(); 14448 14449 ctx.beginPath(); 14450 ctx.rect(-25, -12.5, 150, 75); 14451 ctx.save(); 14452 ctx.rotate(Math.PI/2); 14453 ctx.scale(25, 50); 14454 ctx.strokeStyle = '#f00'; 14455 ctx.stroke(); 14456 ctx.restore(); 14457 14458 isPixel(ctx, 0,0, 0,255,0,255, 0); 14459 isPixel(ctx, 50,0, 0,255,0,255, 0); 14460 isPixel(ctx, 99,0, 0,255,0,255, 0); 14461 isPixel(ctx, 0,25, 0,255,0,255, 0); 14462 isPixel(ctx, 50,25, 0,255,0,255, 0); 14463 isPixel(ctx, 99,25, 0,255,0,255, 0); 14464 isPixel(ctx, 0,49, 0,255,0,255, 0); 14465 isPixel(ctx, 50,49, 0,255,0,255, 0); 14466 isPixel(ctx, 99,49, 0,255,0,255, 0); 14467 } 14468 </script> 14469 14470 <!-- [[[ test_2d.path.stroke.skew.html ]]] --> 14471 14472 <p>Canvas test: 2d.path.stroke.skew</p> 14473 <!-- Testing: Strokes lines are skewed by the current transformation matrix --> 14474 <canvas id="c452" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14475 <script> 14476 14477 14478 function test_2d_path_stroke_skew() { 14479 14480 var canvas = document.getElementById('c452'); 14481 var ctx = canvas.getContext('2d'); 14482 14483 ctx.fillStyle = '#f00'; 14484 ctx.fillRect(0, 0, 100, 50); 14485 14486 ctx.save(); 14487 ctx.beginPath(); 14488 ctx.moveTo(49, -50); 14489 ctx.lineTo(201, -50); 14490 ctx.rotate(Math.PI/4); 14491 ctx.scale(1, 283); 14492 ctx.strokeStyle = '#0f0'; 14493 ctx.stroke(); 14494 ctx.restore(); 14495 14496 ctx.save(); 14497 ctx.beginPath(); 14498 ctx.translate(-150, 0); 14499 ctx.moveTo(49, -50); 14500 ctx.lineTo(199, -50); 14501 ctx.rotate(Math.PI/4); 14502 ctx.scale(1, 142); 14503 ctx.strokeStyle = '#f00'; 14504 ctx.stroke(); 14505 ctx.restore(); 14506 14507 ctx.save(); 14508 ctx.beginPath(); 14509 ctx.translate(-150, 0); 14510 ctx.moveTo(49, -50); 14511 ctx.lineTo(199, -50); 14512 ctx.rotate(Math.PI/4); 14513 ctx.scale(1, 142); 14514 ctx.strokeStyle = '#f00'; 14515 ctx.stroke(); 14516 ctx.restore(); 14517 14518 isPixel(ctx, 0,0, 0,255,0,255, 0); 14519 isPixel(ctx, 50,0, 0,255,0,255, 0); 14520 isPixel(ctx, 99,0, 0,255,0,255, 0); 14521 isPixel(ctx, 0,25, 0,255,0,255, 0); 14522 isPixel(ctx, 50,25, 0,255,0,255, 0); 14523 isPixel(ctx, 99,25, 0,255,0,255, 0); 14524 isPixel(ctx, 0,49, 0,255,0,255, 0); 14525 isPixel(ctx, 50,49, 0,255,0,255, 0); 14526 isPixel(ctx, 99,49, 0,255,0,255, 0); 14527 14528 } 14529 </script> 14530 14531 <!-- [[[ test_2d.path.stroke.unaffected.html ]]] --> 14532 14533 <p>Canvas test: 2d.path.stroke.unaffected</p> 14534 <!-- Testing: Stroking does not start a new path or subpath --> 14535 <canvas id="c453" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14536 <script> 14537 14538 14539 function test_2d_path_stroke_unaffected() { 14540 14541 var canvas = document.getElementById('c453'); 14542 var ctx = canvas.getContext('2d'); 14543 14544 ctx.fillStyle = '#f00'; 14545 ctx.fillRect(0, 0, 100, 50); 14546 14547 ctx.lineWidth = 50; 14548 ctx.moveTo(-100, 25); 14549 ctx.lineTo(-100, -100); 14550 ctx.lineTo(200, -100); 14551 ctx.lineTo(200, 25); 14552 ctx.strokeStyle = '#f00'; 14553 ctx.stroke(); 14554 14555 ctx.closePath(); 14556 ctx.strokeStyle = '#0f0'; 14557 ctx.stroke(); 14558 14559 isPixel(ctx, 50,25, 0,255,0,255, 0); 14560 14561 14562 } 14563 </script> 14564 14565 <!-- [[[ test_2d.path.stroke.union.html ]]] --> 14566 14567 <p>Canvas test: 2d.path.stroke.union</p> 14568 <!-- Testing: Strokes in opposite directions are unioned, not subtracted --> 14569 <canvas id="c454" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14570 <script> 14571 14572 14573 function test_2d_path_stroke_union() { 14574 14575 var canvas = document.getElementById('c454'); 14576 var ctx = canvas.getContext('2d'); 14577 14578 ctx.fillStyle = '#f00'; 14579 ctx.fillRect(0, 0, 100, 50); 14580 14581 ctx.strokeStyle = '#0f0'; 14582 ctx.lineWidth = 40; 14583 ctx.moveTo(0, 10); 14584 ctx.lineTo(100, 10); 14585 ctx.moveTo(100, 40); 14586 ctx.lineTo(0, 40); 14587 ctx.stroke(); 14588 14589 isPixel(ctx, 50,25, 0,255,0,255, 0); 14590 14591 14592 } 14593 </script> 14594 14595 <!-- [[[ test_2d.path.transformation.basic.html ]]] --> 14596 14597 <p>Canvas test: 2d.path.transformation.basic</p> 14598 <canvas id="c455" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14599 <script> 14600 14601 14602 function test_2d_path_transformation_basic() { 14603 14604 var canvas = document.getElementById('c455'); 14605 var ctx = canvas.getContext('2d'); 14606 14607 ctx.fillStyle = '#f00'; 14608 ctx.fillRect(0, 0, 100, 50); 14609 14610 ctx.translate(-100, 0); 14611 ctx.rect(100, 0, 100, 50); 14612 ctx.translate(0, -100); 14613 ctx.fillStyle = '#0f0'; 14614 ctx.fill(); 14615 14616 isPixel(ctx, 50,25, 0,255,0,255, 0); 14617 14618 14619 } 14620 </script> 14621 14622 <!-- [[[ test_2d.path.transformation.changing.html ]]] --> 14623 14624 <p>Canvas test: 2d.path.transformation.changing</p> 14625 <!-- Testing: Transformations are applied while building paths, not when drawing --> 14626 <canvas id="c456" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14627 <script> 14628 14629 14630 function test_2d_path_transformation_changing() { 14631 14632 var canvas = document.getElementById('c456'); 14633 var ctx = canvas.getContext('2d'); 14634 14635 ctx.fillStyle = '#f00'; 14636 ctx.fillRect(0, 0, 100, 50); 14637 ctx.fillStyle = '#0f0'; 14638 ctx.moveTo(0, 0); 14639 ctx.translate(100, 0); 14640 ctx.lineTo(0, 0); 14641 ctx.translate(0, 50); 14642 ctx.lineTo(0, 0); 14643 ctx.translate(-100, 0); 14644 ctx.lineTo(0, 0); 14645 ctx.translate(1000, 1000); 14646 ctx.rotate(Math.PI/2); 14647 ctx.scale(0.1, 0.1); 14648 ctx.fill(); 14649 14650 isPixel(ctx, 50,25, 0,255,0,255, 0); 14651 14652 14653 } 14654 </script> 14655 14656 <!-- [[[ test_2d.path.transformation.multiple.html ]]] --> 14657 14658 <p>Canvas test: 2d.path.transformation.multiple</p> 14659 <canvas id="c457" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14660 <script> 14661 14662 14663 function test_2d_path_transformation_multiple() { 14664 14665 var canvas = document.getElementById('c457'); 14666 var ctx = canvas.getContext('2d'); 14667 14668 ctx.fillStyle = '#f00'; 14669 ctx.fillRect(0, 0, 100, 50); 14670 14671 ctx.rect(0, 0, 100, 50); 14672 ctx.fill(); 14673 ctx.translate(-100, 0); 14674 ctx.fillStyle = '#0f0'; 14675 ctx.fill(); 14676 14677 isPixel(ctx, 50,25, 0,255,0,255, 0); 14678 14679 14680 } 14681 </script> 14682 14683 <!-- [[[ test_2d.pattern.animated.gif.html ]]] --> 14684 14685 <p>Canvas test: 2d.pattern.animated.gif</p> 14686 <!-- Testing: createPattern() of an animated GIF draws the first frame --> 14687 <canvas id="c458" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14688 <script> 14689 14690 var canvas458 = document.getElementById('c458'); 14691 var ctx458 = canvas458.getContext('2d'); 14692 var isDone_test_2d_pattern_animated_gif = false; 14693 14694 function test_2d_pattern_animated_gif() { 14695 14696 deferTest(); 14697 setTimeout(function () { 14698 var pattern = ctx458.createPattern(document.getElementById('anim-gr_2.gif'), 'repeat'); 14699 ctx458.fillStyle = pattern; 14700 ctx458.fillRect(0, 0, 50, 50); 14701 setTimeout(wrapFunction(function () { 14702 ctx458.fillRect(50, 0, 50, 50); 14703 isPixel(ctx458, 25,25, 0,255,0,255, 2); 14704 isPixel(ctx458, 75,25, 0,255,0,255, 2); 14705 isDone_test_2d_pattern_animated_gif = true; 14706 }), 2500); 14707 }, 2500); 14708 14709 14710 } 14711 </script> 14712 <img src="image_anim-gr.gif" id="anim-gr_2.gif" class="resource"> 14713 14714 <!-- [[[ test_2d.pattern.basic.canvas.html ]]] --> 14715 14716 <p>Canvas test: 2d.pattern.basic.canvas</p> 14717 <canvas id="c459" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14718 <script> 14719 14720 14721 function test_2d_pattern_basic_canvas() { 14722 14723 var canvas = document.getElementById('c459'); 14724 var ctx = canvas.getContext('2d'); 14725 14726 ctx.fillStyle = '#f00'; 14727 ctx.fillRect(0, 0, 100, 50); 14728 14729 var canvas2 = document.createElement('canvas'); 14730 canvas2.width = 100; 14731 canvas2.height = 50; 14732 var ctx2 = canvas2.getContext('2d'); 14733 ctx2.fillStyle = '#0f0'; 14734 ctx2.fillRect(0, 0, 100, 50); 14735 14736 var pattern = ctx.createPattern(canvas2, 'no-repeat'); 14737 ctx.fillStyle = pattern; 14738 ctx.fillRect(0, 0, 100, 50); 14739 14740 isPixel(ctx, 1,1, 0,255,0,255, 0); 14741 isPixel(ctx, 50,1, 0,255,0,255, 0); 14742 isPixel(ctx, 98,1, 0,255,0,255, 0); 14743 isPixel(ctx, 1,25, 0,255,0,255, 0); 14744 isPixel(ctx, 50,25, 0,255,0,255, 0); 14745 isPixel(ctx, 98,25, 0,255,0,255, 0); 14746 isPixel(ctx, 1,48, 0,255,0,255, 0); 14747 isPixel(ctx, 50,48, 0,255,0,255, 0); 14748 isPixel(ctx, 98,48, 0,255,0,255, 0); 14749 14750 14751 } 14752 </script> 14753 14754 <!-- [[[ test_2d.pattern.basic.image.html ]]] --> 14755 14756 <p>Canvas test: 2d.pattern.basic.image</p> 14757 <canvas id="c460" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14758 <script> 14759 14760 14761 function test_2d_pattern_basic_image() { 14762 14763 var canvas = document.getElementById('c460'); 14764 var ctx = canvas.getContext('2d'); 14765 14766 ctx.fillStyle = '#f00'; 14767 ctx.fillRect(0, 0, 100, 50); 14768 var img = document.getElementById('green_8.png'); 14769 var pattern = ctx.createPattern(img, 'no-repeat'); 14770 ctx.fillStyle = pattern; 14771 ctx.fillRect(0, 0, 100, 50); 14772 14773 isPixel(ctx, 1,1, 0,255,0,255, 0); 14774 isPixel(ctx, 98,1, 0,255,0,255, 0); 14775 isPixel(ctx, 1,48, 0,255,0,255, 0); 14776 isPixel(ctx, 98,48, 0,255,0,255, 0); 14777 14778 14779 } 14780 </script> 14781 <img src="image_green.png" id="green_8.png" class="resource"> 14782 14783 <!-- [[[ test_2d.pattern.basic.nocontext.html ]]] --> 14784 14785 <p>Canvas test: 2d.pattern.basic.nocontext</p> 14786 <canvas id="c461" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14787 <script> 14788 14789 14790 function test_2d_pattern_basic_nocontext() { 14791 14792 var canvas = document.getElementById('c461'); 14793 var ctx = canvas.getContext('2d'); 14794 14795 var canvas2 = document.createElement('canvas'); 14796 canvas2.width = 100; 14797 canvas2.height = 50; 14798 var pattern = ctx.createPattern(canvas2, 'no-repeat'); 14799 14800 ctx.fillStyle = '#0f0'; 14801 ctx.fillRect(0, 0, 100, 50); 14802 ctx.fillStyle = pattern; 14803 ctx.fillRect(0, 0, 100, 50); 14804 14805 isPixel(ctx, 1,1, 0,255,0,255, 0); 14806 isPixel(ctx, 98,1, 0,255,0,255, 0); 14807 isPixel(ctx, 1,48, 0,255,0,255, 0); 14808 isPixel(ctx, 98,48, 0,255,0,255, 0); 14809 14810 14811 } 14812 </script> 14813 14814 <!-- [[[ test_2d.pattern.basic.type.html ]]] --> 14815 14816 <p>Canvas test: 2d.pattern.basic.type</p> 14817 <canvas id="c462" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14818 <script> 14819 14820 function test_2d_pattern_basic_type() { 14821 14822 var canvas = document.getElementById('c462'); 14823 var ctx = canvas.getContext('2d'); 14824 14825 ok(window.CanvasPattern !== undefined, "window.CanvasPattern !== undefined"); 14826 14827 window.CanvasPattern.prototype.thisImplementsCanvasPattern = true; 14828 14829 var img = document.getElementById('green_9.png'); 14830 var pattern = ctx.createPattern(img, 'no-repeat'); 14831 ok(pattern.thisImplementsCanvasPattern, "pattern.thisImplementsCanvasPattern"); 14832 14833 14834 } 14835 </script> 14836 <img src="image_green.png" id="green_9.png" class="resource"> 14837 14838 <!-- [[[ test_2d.pattern.basic.zerocanvas.html ]]] --> 14839 14840 <p>Canvas test: 2d.pattern.basic.zerocanvas</p> 14841 <canvas id="c463" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14842 <script> 14843 14844 14845 14846 function test_2d_pattern_basic_zerocanvas() { 14847 14848 var canvas = document.getElementById('c463'); 14849 var ctx = canvas.getContext('2d'); 14850 14851 canvas.width = 0; 14852 canvas.height = 10; 14853 ok(canvas.width === 0, "canvas.width === 0"); 14854 ok(canvas.height === 10, "canvas.height === 10"); 14855 var _thrown = undefined; try { 14856 ctx.createPattern(canvas, 'repeat'); 14857 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError"); 14858 14859 canvas.width = 10; 14860 canvas.height = 0; 14861 ok(canvas.width === 10, "canvas.width === 10"); 14862 ok(canvas.height === 0, "canvas.height === 0"); 14863 var _thrown = undefined; try { 14864 ctx.createPattern(canvas, 'repeat'); 14865 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError"); 14866 14867 canvas.width = 0; 14868 canvas.height = 0; 14869 ok(canvas.width === 0, "canvas.width === 0"); 14870 ok(canvas.height === 0, "canvas.height === 0"); 14871 var _thrown = undefined; try { 14872 ctx.createPattern(canvas, 'repeat'); 14873 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError"); 14874 14875 14876 } 14877 </script> 14878 14879 <!-- [[[ test_2d.pattern.crosscanvas.html ]]] --> 14880 14881 <p>Canvas test: 2d.pattern.crosscanvas</p> 14882 <canvas id="c464" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14883 <script> 14884 14885 14886 function test_2d_pattern_crosscanvas() { 14887 14888 var canvas = document.getElementById('c464'); 14889 var ctx = canvas.getContext('2d'); 14890 14891 var img = document.getElementById('green_10.png'); 14892 14893 var pattern = document.createElement('canvas').getContext('2d').createPattern(img, 'no-repeat'); 14894 ctx.fillStyle = '#f00'; 14895 ctx.fillRect(0, 0, 100, 50); 14896 ctx.fillStyle = pattern; 14897 ctx.fillRect(0, 0, 100, 50); 14898 14899 isPixel(ctx, 50,25, 0,255,0,255, 0); 14900 14901 14902 } 14903 </script> 14904 <img src="image_green.png" id="green_10.png" class="resource"> 14905 14906 <!-- [[[ test_2d.pattern.image.null.html ]]] --> 14907 14908 <p>Canvas test: 2d.pattern.image.null</p> 14909 <canvas id="c467" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14910 <script> 14911 14912 function test_2d_pattern_image_null() { 14913 14914 var canvas = document.getElementById('c467'); 14915 var ctx = canvas.getContext('2d'); 14916 14917 var _thrown = undefined; try { 14918 ctx.createPattern(null, 'repeat'); 14919 } catch (e) { _thrown = e }; 14920 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 14921 } 14922 </script> 14923 14924 <!-- [[[ test_2d.pattern.image.string.html ]]] --> 14925 14926 <p>Canvas test: 2d.pattern.image.string</p> 14927 <canvas id="c468" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14928 <script> 14929 14930 function test_2d_pattern_image_string() { 14931 14932 var canvas = document.getElementById('c468'); 14933 var ctx = canvas.getContext('2d'); 14934 14935 var _thrown = undefined; try { 14936 ctx.createPattern('image_red.png', 'repeat'); 14937 } catch (e) { _thrown = e }; 14938 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 14939 } 14940 </script> 14941 14942 <!-- [[[ test_2d.pattern.image.undefined.html ]]] --> 14943 14944 <p>Canvas test: 2d.pattern.image.undefined</p> 14945 <canvas id="c469" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14946 <script> 14947 14948 function test_2d_pattern_image_undefined() { 14949 14950 var canvas = document.getElementById('c469'); 14951 var ctx = canvas.getContext('2d'); 14952 14953 var _thrown = undefined; try { 14954 ctx.createPattern(undefined, 'repeat'); 14955 } catch (e) { _thrown = e }; 14956 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError"); 14957 } 14958 </script> 14959 14960 <!-- [[[ test_2d.pattern.modify.canvas1.html ]]] --> 14961 14962 <p>Canvas test: 2d.pattern.modify.canvas1</p> 14963 <canvas id="c470" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 14964 <script> 14965 14966 14967 function test_2d_pattern_modify_canvas1() { 14968 14969 var canvas = document.getElementById('c470'); 14970 var ctx = canvas.getContext('2d'); 14971 14972 var canvas2 = document.createElement('canvas'); 14973 canvas2.width = 100; 14974 canvas2.height = 50; 14975 var ctx2 = canvas2.getContext('2d'); 14976 ctx2.fillStyle = '#0f0'; 14977 ctx2.fillRect(0, 0, 100, 50); 14978 14979 var pattern = ctx.createPattern(canvas2, 'no-repeat'); 14980 14981 ctx2.fillStyle = '#f00'; 14982 ctx2.fillRect(0, 0, 100, 50); 14983 14984 ctx.fillStyle = pattern; 14985 ctx.fillRect(0, 0, 100, 50); 14986 14987 isPixel(ctx, 1,1, 0,255,0,255, 0); 14988 isPixel(ctx, 98,1, 0,255,0,255, 0); 14989 isPixel(ctx, 1,48, 0,255,0,255, 0); 14990 isPixel(ctx, 98,48, 0,255,0,255, 0); 14991 14992 14993 } 14994 </script> 14995 14996 <!-- [[[ test_2d.pattern.modify.canvas2.html ]]] --> 14997 14998 <p>Canvas test: 2d.pattern.modify.canvas2</p> 14999 <canvas id="c471" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15000 <script> 15001 15002 15003 function test_2d_pattern_modify_canvas2() { 15004 15005 var canvas = document.getElementById('c471'); 15006 var ctx = canvas.getContext('2d'); 15007 15008 var canvas2 = document.createElement('canvas'); 15009 canvas2.width = 100; 15010 canvas2.height = 50; 15011 var ctx2 = canvas2.getContext('2d'); 15012 ctx2.fillStyle = '#0f0'; 15013 ctx2.fillRect(0, 0, 100, 50); 15014 15015 var pattern = ctx.createPattern(canvas2, 'no-repeat'); 15016 ctx.fillStyle = pattern; 15017 ctx.fillRect(0, 0, 100, 50); 15018 ctx.fillStyle = '#f00'; 15019 ctx.fillRect(0, 0, 100, 50); 15020 15021 ctx2.fillStyle = '#f00'; 15022 ctx2.fillRect(0, 0, 100, 50); 15023 15024 ctx.fillStyle = pattern; 15025 ctx.fillRect(0, 0, 100, 50); 15026 15027 isPixel(ctx, 1,1, 0,255,0,255, 0); 15028 isPixel(ctx, 98,1, 0,255,0,255, 0); 15029 isPixel(ctx, 1,48, 0,255,0,255, 0); 15030 isPixel(ctx, 98,48, 0,255,0,255, 0); 15031 15032 15033 } 15034 </script> 15035 15036 <!-- [[[ test_2d.pattern.modify.image1.html ]]] --> 15037 15038 <p>Canvas test: 2d.pattern.modify.image1</p> 15039 <canvas id="c472" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15040 <script> 15041 15042 var canvas472 = document.getElementById('c472'); 15043 var ctx472 = canvas472.getContext('2d'); 15044 15045 function test_2d_pattern_modify_image1() { 15046 15047 var img = document.getElementById('green_11.png'); 15048 var pattern = ctx472.createPattern(img, 'no-repeat'); 15049 deferTest(); 15050 img.onload = wrapFunction(function () 15051 { 15052 ctx472.fillStyle = pattern; 15053 ctx472.fillRect(0, 0, 100, 50); 15054 15055 isPixel(ctx472, 1,1, 0,255,0,255, 0); 15056 isPixel(ctx472, 98,1, 0,255,0,255, 0); 15057 isPixel(ctx472, 1,48, 0,255,0,255, 0); 15058 isPixel(ctx472, 98,48, 0,255,0,255, 0); 15059 }); 15060 img.src = 'image_red.png'; 15061 15062 15063 } 15064 </script> 15065 <img src="image_green.png" id="green_11.png" class="resource"> 15066 15067 <!-- [[[ test_2d.pattern.modify.image2.html ]]] --> 15068 15069 <p>Canvas test: 2d.pattern.modify.image2</p> 15070 <canvas id="c473" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15071 <script> 15072 15073 15074 var canvas473 = document.getElementById('c473'); 15075 var ctx473 = canvas473.getContext('2d'); 15076 15077 function test_2d_pattern_modify_image2() { 15078 15079 var img = document.getElementById('green_12.png'); 15080 var pattern = ctx473.createPattern(img, 'no-repeat'); 15081 ctx473.fillStyle = pattern; 15082 ctx473.fillRect(0, 0, 100, 50); 15083 ctx473.fillStyle = '#00f'; 15084 ctx473.fillRect(0, 0, 100, 50); 15085 deferTest(); 15086 img.onload = wrapFunction(function () 15087 { 15088 ctx473.fillStyle = pattern; 15089 ctx473.fillRect(0, 0, 100, 50); 15090 15091 isPixel(ctx473, 1,1, 0,255,0,255, 0); 15092 isPixel(ctx473, 98,1, 0,255,0,255, 0); 15093 isPixel(ctx473, 1,48, 0,255,0,255, 0); 15094 isPixel(ctx473, 98,48, 0,255,0,255, 0); 15095 }); 15096 img.src = 'image_red.png'; 15097 15098 15099 } 15100 </script> 15101 <img src="image_green.png" id="green_12.png" class="resource"> 15102 15103 <!-- [[[ test_2d.pattern.paint.norepeat.basic.html ]]] --> 15104 15105 <p>Canvas test: 2d.pattern.paint.norepeat.basic</p> 15106 <canvas id="c474" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15107 <script> 15108 15109 15110 function test_2d_pattern_paint_norepeat_basic() { 15111 15112 var canvas = document.getElementById('c474'); 15113 var ctx = canvas.getContext('2d'); 15114 15115 ctx.fillStyle = '#f00'; 15116 ctx.fillRect(0, 0, 100, 50); 15117 15118 var img = document.getElementById('green_13.png'); 15119 var pattern = ctx.createPattern(img, 'no-repeat'); 15120 ctx.fillStyle = pattern; 15121 ctx.fillRect(0, 0, 100, 50); 15122 15123 isPixel(ctx, 1,1, 0,255,0,255, 0); 15124 isPixel(ctx, 98,1, 0,255,0,255, 0); 15125 isPixel(ctx, 1,48, 0,255,0,255, 0); 15126 isPixel(ctx, 98,48, 0,255,0,255, 0); 15127 15128 15129 } 15130 </script> 15131 <img src="image_green.png" id="green_13.png" class="resource"> 15132 15133 <!-- [[[ test_2d.pattern.paint.norepeat.coord1.html ]]] --> 15134 15135 <p>Canvas test: 2d.pattern.paint.norepeat.coord1</p> 15136 <canvas id="c475" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15137 <script> 15138 15139 15140 function test_2d_pattern_paint_norepeat_coord1() { 15141 15142 var canvas = document.getElementById('c475'); 15143 var ctx = canvas.getContext('2d'); 15144 15145 ctx.fillStyle = '#0f0'; 15146 ctx.fillRect(0, 0, 50, 50); 15147 ctx.fillStyle = '#f00'; 15148 ctx.fillRect(50, 0, 50, 50); 15149 15150 var img = document.getElementById('green_14.png'); 15151 var pattern = ctx.createPattern(img, 'no-repeat'); 15152 ctx.fillStyle = pattern; 15153 ctx.translate(50, 0); 15154 ctx.fillRect(-50, 0, 100, 50); 15155 15156 isPixel(ctx, 1,1, 0,255,0,255, 0); 15157 isPixel(ctx, 98,1, 0,255,0,255, 0); 15158 isPixel(ctx, 1,48, 0,255,0,255, 0); 15159 isPixel(ctx, 98,48, 0,255,0,255, 0); 15160 15161 15162 } 15163 </script> 15164 <img src="image_green.png" id="green_14.png" class="resource"> 15165 15166 <!-- [[[ test_2d.pattern.paint.norepeat.coord2.html ]]] --> 15167 15168 <p>Canvas test: 2d.pattern.paint.norepeat.coord2</p> 15169 <canvas id="c476" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15170 <script> 15171 15172 15173 function test_2d_pattern_paint_norepeat_coord2() { 15174 15175 var canvas = document.getElementById('c476'); 15176 var ctx = canvas.getContext('2d'); 15177 15178 var img = document.getElementById('green_15.png'); 15179 var pattern = ctx.createPattern(img, 'no-repeat'); 15180 ctx.fillStyle = pattern; 15181 ctx.fillRect(0, 0, 50, 50); 15182 15183 ctx.fillStyle = '#f00'; 15184 ctx.fillRect(50, 0, 50, 50); 15185 15186 ctx.fillStyle = pattern; 15187 ctx.translate(50, 0); 15188 ctx.fillRect(-50, 0, 100, 50); 15189 15190 isPixel(ctx, 1,1, 0,255,0,255, 0); 15191 isPixel(ctx, 98,1, 0,255,0,255, 0); 15192 isPixel(ctx, 1,48, 0,255,0,255, 0); 15193 isPixel(ctx, 98,48, 0,255,0,255, 0); 15194 15195 15196 } 15197 </script> 15198 <img src="image_green.png" id="green_15.png" class="resource"> 15199 15200 <!-- [[[ test_2d.pattern.paint.norepeat.coord3.html ]]] --> 15201 15202 <p>Canvas test: 2d.pattern.paint.norepeat.coord3</p> 15203 <canvas id="c477" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15204 <script> 15205 15206 15207 function test_2d_pattern_paint_norepeat_coord3() { 15208 15209 var canvas = document.getElementById('c477'); 15210 var ctx = canvas.getContext('2d'); 15211 15212 ctx.fillStyle = '#0f0'; 15213 ctx.fillRect(0, 0, 100, 50); 15214 15215 var img = document.getElementById('red_15.png'); 15216 var pattern = ctx.createPattern(img, 'no-repeat'); 15217 ctx.fillStyle = pattern; 15218 ctx.translate(50, 25); 15219 ctx.fillRect(-50, -25, 100, 50); 15220 15221 ctx.fillStyle = '#0f0'; 15222 ctx.fillRect(0, 0, 50, 25); 15223 15224 isPixel(ctx, 1,1, 0,255,0,255, 0); 15225 isPixel(ctx, 98,1, 0,255,0,255, 0); 15226 isPixel(ctx, 1,48, 0,255,0,255, 0); 15227 isPixel(ctx, 98,48, 0,255,0,255, 0); 15228 15229 15230 } 15231 </script> 15232 <img src="image_red.png" id="red_15.png" class="resource"> 15233 15234 <!-- [[[ test_2d.pattern.paint.norepeat.outside.html ]]] --> 15235 15236 <p>Canvas test: 2d.pattern.paint.norepeat.outside</p> 15237 <canvas id="c478" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15238 <script> 15239 15240 15241 function test_2d_pattern_paint_norepeat_outside() { 15242 15243 var canvas = document.getElementById('c478'); 15244 var ctx = canvas.getContext('2d'); 15245 15246 ctx.fillStyle = '#f00'; 15247 ctx.fillRect(0, 0, 100, 50); 15248 15249 var img = document.getElementById('red_16.png'); 15250 var pattern = ctx.createPattern(img, 'no-repeat'); 15251 ctx.fillStyle = '#0f0'; 15252 ctx.fillRect(0, 0, 100, 50); 15253 15254 ctx.fillStyle = pattern; 15255 ctx.fillRect(0, -50, 100, 50); 15256 ctx.fillRect(-100, 0, 100, 50); 15257 ctx.fillRect(0, 50, 100, 50); 15258 ctx.fillRect(100, 0, 100, 50); 15259 15260 isPixel(ctx, 1,1, 0,255,0,255, 0); 15261 isPixel(ctx, 98,1, 0,255,0,255, 0); 15262 isPixel(ctx, 1,48, 0,255,0,255, 0); 15263 isPixel(ctx, 98,48, 0,255,0,255, 0); 15264 15265 15266 } 15267 </script> 15268 <img src="image_red.png" id="red_16.png" class="resource"> 15269 15270 <!-- [[[ test_2d.pattern.paint.orientation.canvas.html ]]] --> 15271 15272 <p>Canvas test: 2d.pattern.paint.orientation.canvas</p> 15273 <!-- Testing: Canvas patterns do not get flipped when painted --> 15274 <canvas id="c479" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15275 <script> 15276 15277 15278 function test_2d_pattern_paint_orientation_canvas() { 15279 15280 var canvas = document.getElementById('c479'); 15281 var ctx = canvas.getContext('2d'); 15282 15283 ctx.fillStyle = '#f00'; 15284 ctx.fillRect(0, 0, 100, 50); 15285 15286 var canvas2 = document.createElement('canvas'); 15287 canvas2.width = 100; 15288 canvas2.height = 50; 15289 var ctx2 = canvas2.getContext('2d'); 15290 ctx2.fillStyle = '#f00'; 15291 ctx2.fillRect(0, 0, 100, 25); 15292 ctx2.fillStyle = '#0f0'; 15293 ctx2.fillRect(0, 25, 100, 25); 15294 15295 var pattern = ctx.createPattern(canvas2, 'no-repeat'); 15296 ctx.fillStyle = pattern; 15297 ctx.fillRect(0, 0, 100, 50); 15298 ctx.fillStyle = '#0f0'; 15299 ctx.fillRect(0, 0, 100, 25); 15300 15301 isPixel(ctx, 1,1, 0,255,0,255, 0); 15302 isPixel(ctx, 98,1, 0,255,0,255, 0); 15303 isPixel(ctx, 1,48, 0,255,0,255, 0); 15304 isPixel(ctx, 98,48, 0,255,0,255, 0); 15305 15306 15307 } 15308 </script> 15309 15310 <!-- [[[ test_2d.pattern.paint.orientation.image.html ]]] --> 15311 15312 <p>Canvas test: 2d.pattern.paint.orientation.image</p> 15313 <!-- Testing: Image patterns do not get flipped when painted --> 15314 <canvas id="c480" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15315 <script> 15316 15317 15318 function test_2d_pattern_paint_orientation_image() { 15319 15320 var canvas = document.getElementById('c480'); 15321 var ctx = canvas.getContext('2d'); 15322 15323 ctx.fillStyle = '#f00'; 15324 ctx.fillRect(0, 0, 100, 50); 15325 15326 var img = document.getElementById('rrgg-256x256_1.png'); 15327 var pattern = ctx.createPattern(img, 'no-repeat'); 15328 ctx.fillStyle = pattern; 15329 ctx.save(); 15330 ctx.translate(0, -103); 15331 ctx.fillRect(0, 103, 100, 50); 15332 ctx.restore(); 15333 15334 ctx.fillStyle = '#0f0'; 15335 ctx.fillRect(0, 0, 100, 25); 15336 15337 isPixel(ctx, 1,1, 0,255,0,255, 0); 15338 isPixel(ctx, 98,1, 0,255,0,255, 0); 15339 isPixel(ctx, 1,48, 0,255,0,255, 0); 15340 isPixel(ctx, 98,48, 0,255,0,255, 0); 15341 15342 15343 } 15344 </script> 15345 <img src="image_rrgg-256x256.png" id="rrgg-256x256_1.png" class="resource"> 15346 15347 <!-- [[[ test_2d.pattern.paint.repeat.basic.html ]]] --> 15348 15349 <p>Canvas test: 2d.pattern.paint.repeat.basic</p> 15350 <canvas id="c481" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15351 <script> 15352 15353 15354 function test_2d_pattern_paint_repeat_basic() { 15355 15356 var canvas = document.getElementById('c481'); 15357 var ctx = canvas.getContext('2d'); 15358 15359 ctx.fillStyle = '#f00'; 15360 ctx.fillRect(0, 0, 100, 50); 15361 15362 var img = document.getElementById('green-16x16_1.png'); 15363 var pattern = ctx.createPattern(img, 'repeat'); 15364 ctx.fillStyle = pattern; 15365 ctx.fillRect(0, 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-16x16.png" id="green-16x16_1.png" class="resource"> 15376 15377 <!-- [[[ test_2d.pattern.paint.repeat.coord1.html ]]] --> 15378 15379 <p>Canvas test: 2d.pattern.paint.repeat.coord1</p> 15380 <canvas id="c482" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15381 <script> 15382 15383 15384 function test_2d_pattern_paint_repeat_coord1() { 15385 15386 var canvas = document.getElementById('c482'); 15387 var ctx = canvas.getContext('2d'); 15388 15389 ctx.fillStyle = '#f00'; 15390 ctx.fillRect(0, 0, 100, 50); 15391 15392 var img = document.getElementById('rgrg-256x256_3.png'); 15393 var pattern = ctx.createPattern(img, 'repeat'); 15394 ctx.fillStyle = pattern; 15395 ctx.translate(-128, -78); 15396 ctx.fillRect(128, 78, 100, 50); 15397 15398 isPixel(ctx, 1,1, 0,255,0,255, 0); 15399 isPixel(ctx, 98,1, 0,255,0,255, 0); 15400 isPixel(ctx, 1,48, 0,255,0,255, 0); 15401 isPixel(ctx, 98,48, 0,255,0,255, 0); 15402 15403 15404 } 15405 </script> 15406 <img src="image_rgrg-256x256.png" id="rgrg-256x256_3.png" class="resource"> 15407 15408 <!-- [[[ test_2d.pattern.paint.repeat.coord2.html ]]] --> 15409 15410 <p>Canvas test: 2d.pattern.paint.repeat.coord2</p> 15411 <canvas id="c483" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15412 <script> 15413 15414 15415 function test_2d_pattern_paint_repeat_coord2() { 15416 15417 var canvas = document.getElementById('c483'); 15418 var ctx = canvas.getContext('2d'); 15419 15420 var img = document.getElementById('ggrr-256x256_3.png'); 15421 var pattern = ctx.createPattern(img, 'repeat'); 15422 ctx.fillStyle = pattern; 15423 ctx.fillRect(0, 0, 100, 50); 15424 15425 isPixel(ctx, 1,1, 0,255,0,255, 0); 15426 isPixel(ctx, 98,1, 0,255,0,255, 0); 15427 isPixel(ctx, 1,48, 0,255,0,255, 0); 15428 isPixel(ctx, 98,48, 0,255,0,255, 0); 15429 15430 15431 } 15432 </script> 15433 <img src="image_ggrr-256x256.png" id="ggrr-256x256_3.png" class="resource"> 15434 15435 <!-- [[[ test_2d.pattern.paint.repeat.coord3.html ]]] --> 15436 15437 <p>Canvas test: 2d.pattern.paint.repeat.coord3</p> 15438 <canvas id="c484" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15439 <script> 15440 15441 15442 15443 function test_2d_pattern_paint_repeat_coord3() { 15444 15445 var canvas = document.getElementById('c484'); 15446 var ctx = canvas.getContext('2d'); 15447 15448 var img = document.getElementById('rgrg-256x256_4.png'); 15449 var pattern = ctx.createPattern(img, 'repeat'); 15450 ctx.fillStyle = pattern; 15451 ctx.fillRect(0, 0, 100, 50); 15452 15453 ctx.translate(-128, -78); 15454 ctx.fillRect(128, 78, 100, 50); 15455 15456 isPixel(ctx, 1,1, 0,255,0,255, 0); 15457 isPixel(ctx, 98,1, 0,255,0,255, 0); 15458 isPixel(ctx, 1,48, 0,255,0,255, 0); 15459 isPixel(ctx, 98,48, 0,255,0,255, 0); 15460 } 15461 </script> 15462 <img src="image_rgrg-256x256.png" id="rgrg-256x256_4.png" class="resource"> 15463 15464 <!-- [[[ test_2d.pattern.paint.repeat.outside.html ]]] --> 15465 15466 <p>Canvas test: 2d.pattern.paint.repeat.outside</p> 15467 <canvas id="c485" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15468 <script> 15469 15470 15471 function test_2d_pattern_paint_repeat_outside() { 15472 15473 var canvas = document.getElementById('c485'); 15474 var ctx = canvas.getContext('2d'); 15475 15476 ctx.fillStyle = '#f00'; 15477 ctx.fillRect(0, 0, 100, 50); 15478 15479 var img = document.getElementById('green-16x16_2.png'); 15480 var pattern = ctx.createPattern(img, 'repeat'); 15481 ctx.fillStyle = pattern; 15482 ctx.translate(50, 25); 15483 ctx.fillRect(-50, -25, 100, 50); 15484 15485 isPixel(ctx, 1,1, 0,255,0,255, 0); 15486 isPixel(ctx, 98,1, 0,255,0,255, 0); 15487 isPixel(ctx, 1,48, 0,255,0,255, 0); 15488 isPixel(ctx, 98,48, 0,255,0,255, 0); 15489 15490 15491 } 15492 </script> 15493 <img src="image_green-16x16.png" id="green-16x16_2.png" class="resource"> 15494 15495 <!-- [[[ test_2d.pattern.paint.repeatx.basic.html ]]] --> 15496 15497 <p>Canvas test: 2d.pattern.paint.repeatx.basic</p> 15498 <canvas id="c486" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15499 <script> 15500 15501 15502 function test_2d_pattern_paint_repeatx_basic() { 15503 15504 var canvas = document.getElementById('c486'); 15505 var ctx = canvas.getContext('2d'); 15506 15507 ctx.fillStyle = '#0f0'; 15508 ctx.fillRect(0, 0, 100, 50); 15509 ctx.fillStyle = '#f00'; 15510 ctx.fillRect(0, 0, 100, 16); 15511 15512 var img = document.getElementById('green-16x16_3.png'); 15513 var pattern = ctx.createPattern(img, 'repeat-x'); 15514 ctx.fillStyle = pattern; 15515 ctx.fillRect(0, 0, 100, 50); 15516 15517 isPixel(ctx, 1,1, 0,255,0,255, 0); 15518 isPixel(ctx, 98,1, 0,255,0,255, 0); 15519 isPixel(ctx, 1,48, 0,255,0,255, 0); 15520 isPixel(ctx, 98,48, 0,255,0,255, 0); 15521 15522 15523 } 15524 </script> 15525 <img src="image_green-16x16.png" id="green-16x16_3.png" class="resource"> 15526 15527 <!-- [[[ test_2d.pattern.paint.repeatx.coord1.html ]]] --> 15528 15529 <p>Canvas test: 2d.pattern.paint.repeatx.coord1</p> 15530 <canvas id="c487" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15531 <script> 15532 15533 15534 15535 function test_2d_pattern_paint_repeatx_coord1() { 15536 15537 var canvas = document.getElementById('c487'); 15538 var ctx = canvas.getContext('2d'); 15539 15540 ctx.fillStyle = '#0f0'; 15541 ctx.fillRect(0, 0, 100, 50); 15542 15543 var img = document.getElementById('red-16x16_1.png'); 15544 var pattern = ctx.createPattern(img, 'repeat-x'); 15545 ctx.fillStyle = pattern; 15546 ctx.translate(0, 16); 15547 ctx.fillRect(0, -16, 100, 50); 15548 15549 ctx.fillStyle = '#0f0'; 15550 ctx.fillRect(0, 0, 100, 16); 15551 15552 isPixel(ctx, 1,1, 0,255,0,255, 0); 15553 isPixel(ctx, 98,1, 0,255,0,255, 0); 15554 isPixel(ctx, 1,48, 0,255,0,255, 0); 15555 isPixel(ctx, 98,48, 0,255,0,255, 0); 15556 isPixel(ctx, 1,25, 0,255,0,255, 0); 15557 isPixel(ctx, 98,25, 0,255,0,255, 0); 15558 } 15559 </script> 15560 <img src="image_red-16x16.png" id="red-16x16_1.png" class="resource"> 15561 15562 <!-- [[[ test_2d.pattern.paint.repeatx.outside.html ]]] --> 15563 15564 <p>Canvas test: 2d.pattern.paint.repeatx.outside</p> 15565 <canvas id="c488" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15566 <script> 15567 15568 15569 15570 function test_2d_pattern_paint_repeatx_outside() { 15571 15572 var canvas = document.getElementById('c488'); 15573 var ctx = canvas.getContext('2d'); 15574 15575 ctx.fillStyle = '#0f0'; 15576 ctx.fillRect(0, 0, 100, 50); 15577 15578 var img = document.getElementById('red-16x16_2.png'); 15579 var pattern = ctx.createPattern(img, 'repeat-x'); 15580 ctx.fillStyle = pattern; 15581 ctx.fillRect(0, 0, 100, 50); 15582 15583 ctx.fillStyle = '#0f0'; 15584 ctx.fillRect(0, 0, 100, 16); 15585 15586 isPixel(ctx, 1,1, 0,255,0,255, 0); 15587 isPixel(ctx, 98,1, 0,255,0,255, 0); 15588 isPixel(ctx, 1,48, 0,255,0,255, 0); 15589 isPixel(ctx, 98,48, 0,255,0,255, 0); 15590 } 15591 </script> 15592 <img src="image_red-16x16.png" id="red-16x16_2.png" class="resource"> 15593 15594 <!-- [[[ test_2d.pattern.paint.repeaty.basic.html ]]] --> 15595 15596 <p>Canvas test: 2d.pattern.paint.repeaty.basic</p> 15597 <canvas id="c489" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15598 <script> 15599 15600 15601 function test_2d_pattern_paint_repeaty_basic() { 15602 15603 var canvas = document.getElementById('c489'); 15604 var ctx = canvas.getContext('2d'); 15605 15606 ctx.fillStyle = '#0f0'; 15607 ctx.fillRect(0, 0, 100, 50); 15608 ctx.fillStyle = '#f00'; 15609 ctx.fillRect(0, 0, 16, 50); 15610 15611 var img = document.getElementById('green-16x16_4.png'); 15612 var pattern = ctx.createPattern(img, 'repeat-y'); 15613 ctx.fillStyle = pattern; 15614 ctx.fillRect(0, 0, 100, 50); 15615 15616 isPixel(ctx, 1,1, 0,255,0,255, 0); 15617 isPixel(ctx, 98,1, 0,255,0,255, 0); 15618 isPixel(ctx, 1,48, 0,255,0,255, 0); 15619 isPixel(ctx, 98,48, 0,255,0,255, 0); 15620 15621 15622 } 15623 </script> 15624 <img src="image_green-16x16.png" id="green-16x16_4.png" class="resource"> 15625 15626 <!-- [[[ test_2d.pattern.paint.repeaty.coord1.html ]]] --> 15627 15628 <p>Canvas test: 2d.pattern.paint.repeaty.coord1</p> 15629 <canvas id="c490" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15630 <script> 15631 15632 15633 15634 function test_2d_pattern_paint_repeaty_coord1() { 15635 15636 var canvas = document.getElementById('c490'); 15637 var ctx = canvas.getContext('2d'); 15638 15639 ctx.fillStyle = '#0f0'; 15640 ctx.fillRect(0, 0, 100, 50); 15641 15642 var img = document.getElementById('red-16x16_3.png'); 15643 var pattern = ctx.createPattern(img, 'repeat-y'); 15644 ctx.fillStyle = pattern; 15645 ctx.translate(48, 0); 15646 ctx.fillRect(-48, 0, 100, 50); 15647 15648 ctx.fillStyle = '#0f0'; 15649 ctx.fillRect(0, 0, 16, 50); 15650 15651 isPixel(ctx, 50,1, 0,255,0,255, 0); 15652 isPixel(ctx, 50,48, 0,255,0,255, 0); 15653 15654 isPixel(ctx, 1,1, 0,255,0,255, 0); 15655 isPixel(ctx, 98,1, 0,255,0,255, 0); 15656 isPixel(ctx, 1,48, 0,255,0,255, 0); 15657 isPixel(ctx, 98,48, 0,255,0,255, 0); 15658 } 15659 </script> 15660 <img src="image_red-16x16.png" id="red-16x16_3.png" class="resource"> 15661 15662 <!-- [[[ test_2d.pattern.paint.repeaty.outside.html ]]] --> 15663 15664 <p>Canvas test: 2d.pattern.paint.repeaty.outside</p> 15665 <canvas id="c491" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15666 <script> 15667 15668 15669 15670 function test_2d_pattern_paint_repeaty_outside() { 15671 15672 var canvas = document.getElementById('c491'); 15673 var ctx = canvas.getContext('2d'); 15674 15675 ctx.fillStyle = '#0f0'; 15676 ctx.fillRect(0, 0, 100, 50); 15677 15678 var img = document.getElementById('red-16x16_4.png'); 15679 var pattern = ctx.createPattern(img, 'repeat-y'); 15680 ctx.fillStyle = pattern; 15681 ctx.fillRect(0, 0, 100, 50); 15682 15683 ctx.fillStyle = '#0f0'; 15684 ctx.fillRect(0, 0, 16, 50); 15685 15686 isPixel(ctx, 1,1, 0,255,0,255, 0); 15687 isPixel(ctx, 1,48, 0,255,0,255, 0); 15688 isPixel(ctx, 98,1, 0,255,0,255, 0); 15689 isPixel(ctx, 98,48, 0,255,0,255, 0); 15690 } 15691 </script> 15692 <img src="image_red-16x16.png" id="red-16x16_4.png" class="resource"> 15693 15694 <!-- [[[ test_2d.pattern.repeat.case.html ]]] --> 15695 15696 <p>Canvas test: 2d.pattern.repeat.case</p> 15697 <canvas id="c492" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15698 <script> 15699 15700 function test_2d_pattern_repeat_case() { 15701 15702 var canvas = document.getElementById('c492'); 15703 var ctx = canvas.getContext('2d'); 15704 15705 var _thrown = undefined; try { 15706 ctx.createPattern(canvas, "Repeat"); 15707 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError"); 15708 15709 15710 } 15711 </script> 15712 15713 <!-- [[[ test_2d.pattern.repeat.empty.html ]]] --> 15714 15715 <p>Canvas test: 2d.pattern.repeat.empty</p> 15716 <canvas id="c493" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15717 <script> 15718 15719 15720 function test_2d_pattern_repeat_empty() { 15721 15722 var canvas = document.getElementById('c493'); 15723 var ctx = canvas.getContext('2d'); 15724 15725 ctx.fillStyle = '#f00'; 15726 ctx.fillRect(0, 0, 100, 50); 15727 var img = document.getElementById('green-1x1_1.png'); 15728 var pattern = ctx.createPattern(img, ""); 15729 ctx.fillStyle = pattern; 15730 ctx.fillRect(0, 0, 200, 50); 15731 15732 isPixel(ctx, 1,1, 0,255,0,255, 0); 15733 isPixel(ctx, 98,1, 0,255,0,255, 0); 15734 isPixel(ctx, 1,48, 0,255,0,255, 0); 15735 isPixel(ctx, 98,48, 0,255,0,255, 0); 15736 15737 15738 } 15739 </script> 15740 <img src="image_green-1x1.png" id="green-1x1_1.png" class="resource"> 15741 15742 <!-- [[[ test_2d.pattern.repeat.null.html ]]] --> 15743 15744 <p>Canvas test: 2d.pattern.repeat.null</p> 15745 <canvas id="c494" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15746 <script> 15747 15748 15749 function test_2d_pattern_repeat_null() { 15750 15751 var canvas = document.getElementById('c494'); 15752 var ctx = canvas.getContext('2d'); 15753 15754 ctx.fillStyle = '#f00'; 15755 ctx.fillRect(0, 0, 100, 50); 15756 var img = document.getElementById('green-1x1_2.png'); 15757 var pattern = ctx.createPattern(img, null); 15758 ctx.fillStyle = pattern; 15759 ctx.fillRect(0, 0, 100, 50); 15760 15761 isPixel(ctx, 1,1, 0,255,0,255, 0); 15762 isPixel(ctx, 98,1, 0,255,0,255, 0); 15763 isPixel(ctx, 1,48, 0,255,0,255, 0); 15764 isPixel(ctx, 98,48, 0,255,0,255, 0); 15765 15766 15767 } 15768 </script> 15769 <img src="image_green-1x1.png" id="green-1x1_2.png" class="resource"> 15770 15771 <!-- [[[ test_2d.pattern.repeat.nullsuffix.html ]]] --> 15772 15773 <p>Canvas test: 2d.pattern.repeat.nullsuffix</p> 15774 <canvas id="c495" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15775 <script> 15776 15777 function test_2d_pattern_repeat_nullsuffix() { 15778 15779 var canvas = document.getElementById('c495'); 15780 var ctx = canvas.getContext('2d'); 15781 15782 var _thrown = undefined; try { 15783 ctx.createPattern(canvas, "repeat\0"); 15784 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError"); 15785 15786 15787 } 15788 </script> 15789 15790 <!-- [[[ test_2d.pattern.repeat.undefined.html ]]] --> 15791 15792 <p>Canvas test: 2d.pattern.repeat.undefined</p> 15793 <canvas id="c496" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15794 <script> 15795 15796 function test_2d_pattern_repeat_undefined() { 15797 15798 var canvas = document.getElementById('c496'); 15799 var ctx = canvas.getContext('2d'); 15800 15801 var _thrown = undefined; try { 15802 ctx.createPattern(canvas, undefined); 15803 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError"); 15804 15805 15806 } 15807 </script> 15808 15809 <!-- [[[ test_2d.pattern.repeat.unrecognised.html ]]] --> 15810 15811 <p>Canvas test: 2d.pattern.repeat.unrecognised</p> 15812 <canvas id="c497" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15813 <script> 15814 15815 function test_2d_pattern_repeat_unrecognised() { 15816 15817 var canvas = document.getElementById('c497'); 15818 var ctx = canvas.getContext('2d'); 15819 15820 var _thrown = undefined; try { 15821 ctx.createPattern(canvas, "invalid"); 15822 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError"); 15823 15824 15825 } 15826 </script> 15827 15828 <!-- [[[ test_2d.scaled.html ]]] --> 15829 15830 <p>Canvas test: 2d.scaled</p> 15831 <!-- Testing: CSS-scaled canvases get drawn correctly --> 15832 <canvas id="c498" width="50" height="25" style="width: 100px; height: 50px"><p class="fallback">FAIL (fallback content)</p></canvas> 15833 <script> 15834 15835 function test_2d_scaled() { 15836 15837 var canvas = document.getElementById('c498'); 15838 var ctx = canvas.getContext('2d'); 15839 15840 ctx.fillStyle = '#00f'; 15841 ctx.fillRect(0, 0, 50, 25); 15842 ctx.fillStyle = '#0ff'; 15843 ctx.fillRect(0, 0, 25, 10); 15844 15845 todo(false, "test completed successfully"); // (Bug 483989) 15846 15847 } 15848 15849 </script> 15850 <!-- [[[ test_2d.shadow.alpha.1.html ]]] --> 15851 15852 <p>Canvas test: 2d.shadow.alpha.1</p> 15853 <canvas id="c499" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15854 <script> 15855 15856 15857 function test_2d_shadow_alpha_1() { 15858 15859 var canvas = document.getElementById('c499'); 15860 var ctx = canvas.getContext('2d'); 15861 15862 ctx.fillStyle = '#0f0'; 15863 ctx.fillRect(0, 0, 100, 50); 15864 ctx.shadowColor = 'rgba(255, 0, 0, 0.01)'; 15865 ctx.shadowOffsetY = 50; 15866 ctx.fillRect(0, -50, 100, 50); 15867 15868 isPixel(ctx, 50,25, 0,255,0,255, 4); 15869 15870 15871 } 15872 </script> 15873 15874 <!-- [[[ test_2d.shadow.alpha.2.html ]]] --> 15875 15876 <p>Canvas test: 2d.shadow.alpha.2</p> 15877 <canvas id="c500" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15878 <script> 15879 15880 15881 15882 function test_2d_shadow_alpha_2() { 15883 15884 var canvas = document.getElementById('c500'); 15885 var ctx = canvas.getContext('2d'); 15886 15887 ctx.fillStyle = '#f00'; 15888 ctx.fillRect(0, 0, 100, 50); 15889 ctx.shadowColor = 'rgba(0, 0, 255, 0.5)'; 15890 ctx.shadowOffsetY = 50; 15891 ctx.fillRect(0, -50, 100, 50); 15892 15893 isPixel(ctx, 50,25, 127,0,127,255, 2); 15894 15895 15896 } 15897 </script> 15898 15899 <!-- [[[ test_2d.shadow.alpha.3.html ]]] --> 15900 15901 <p>Canvas test: 2d.shadow.alpha.3</p> 15902 <canvas id="c501" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15903 <script> 15904 15905 15906 15907 function test_2d_shadow_alpha_3() { 15908 15909 var canvas = document.getElementById('c501'); 15910 var ctx = canvas.getContext('2d'); 15911 15912 ctx.fillStyle = '#f00'; 15913 ctx.fillRect(0, 0, 100, 50); 15914 ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching) 15915 ctx.shadowColor = '#00f'; 15916 ctx.shadowOffsetY = 50; 15917 ctx.globalAlpha = 0.5; 15918 ctx.fillRect(0, -50, 100, 50); 15919 15920 isPixel(ctx, 50,25, 127,0,127,255, 2); 15921 15922 15923 } 15924 </script> 15925 15926 <!-- [[[ test_2d.shadow.alpha.4.html ]]] --> 15927 15928 <p>Canvas test: 2d.shadow.alpha.4</p> 15929 <canvas id="c502" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15930 <script> 15931 15932 15933 15934 function test_2d_shadow_alpha_4() { 15935 15936 var canvas = document.getElementById('c502'); 15937 var ctx = canvas.getContext('2d'); 15938 15939 ctx.fillStyle = '#f00'; 15940 ctx.fillRect(0, 0, 100, 50); 15941 ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching) 15942 ctx.shadowColor = 'rgba(0, 0, 255, 0.707)'; 15943 ctx.shadowOffsetY = 50; 15944 ctx.globalAlpha = 0.707; 15945 ctx.fillRect(0, -50, 100, 50); 15946 15947 isPixel(ctx, 50,25, 127,0,127,255, 2); 15948 15949 15950 } 15951 </script> 15952 15953 <!-- [[[ test_2d.shadow.alpha.5.html ]]] --> 15954 15955 <p>Canvas test: 2d.shadow.alpha.5</p> 15956 <canvas id="c503" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15957 <script> 15958 15959 15960 15961 function test_2d_shadow_alpha_5() { 15962 15963 var canvas = document.getElementById('c503'); 15964 var ctx = canvas.getContext('2d'); 15965 15966 ctx.fillStyle = '#f00'; 15967 ctx.fillRect(0, 0, 100, 50); 15968 ctx.fillStyle = 'rgba(64, 0, 0, 0.5)'; 15969 ctx.shadowColor = '#00f'; 15970 ctx.shadowOffsetY = 50; 15971 ctx.fillRect(0, -50, 100, 50); 15972 15973 isPixel(ctx, 50,25, 127,0,127,255, 2); 15974 15975 15976 } 15977 </script> 15978 15979 <!-- [[[ test_2d.shadow.attributes.shadowBlur.1.html ]]] --> 15980 15981 <p>Canvas test: 2d.shadow.attributes.shadowBlur.1</p> 15982 <canvas id="c504" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 15983 <script> 15984 15985 function test_2d_shadow_attributes_shadowBlur_1() { 15986 15987 var canvas = document.getElementById('c504'); 15988 var ctx = canvas.getContext('2d'); 15989 15990 ctx.shadowBlur = 1; 15991 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1"); 15992 ctx.shadowBlur = 0.5; 15993 ok(ctx.shadowBlur === 0.5, "ctx.shadowBlur === 0.5"); 15994 ctx.shadowBlur = 1e6; 15995 ok(ctx.shadowBlur === 1e6, "ctx.shadowBlur === 1e6"); 15996 ctx.shadowBlur = 1; 15997 ctx.shadowBlur = -2; 15998 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1"); 15999 ctx.shadowBlur = 0; 16000 ok(ctx.shadowBlur === 0, "ctx.shadowBlur === 0"); 16001 16002 16003 } 16004 </script> 16005 16006 <!-- [[[ test_2d.shadow.attributes.shadowBlur.2.html ]]] --> 16007 16008 <p>Canvas test: 2d.shadow.attributes.shadowBlur.2</p> 16009 <canvas id="c505" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16010 <script> 16011 16012 function test_2d_shadow_attributes_shadowBlur_2() { 16013 16014 var canvas = document.getElementById('c505'); 16015 var ctx = canvas.getContext('2d'); 16016 16017 ctx.shadowBlur = 1; 16018 ctx.shadowBlur = -2; 16019 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1"); 16020 16021 ctx.shadowBlur = 1; 16022 ctx.shadowBlur = Infinity; 16023 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1"); 16024 16025 ctx.shadowBlur = 1; 16026 ctx.shadowBlur = -Infinity; 16027 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1"); 16028 16029 ctx.shadowBlur = 1; 16030 ctx.shadowBlur = NaN; 16031 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1"); 16032 16033 } 16034 </script> 16035 16036 <!-- [[[ test_2d.shadow.attributes.shadowColor.1.html ]]] --> 16037 16038 <p>Canvas test: 2d.shadow.attributes.shadowColor.1</p> 16039 <canvas id="c506" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16040 <script> 16041 16042 function test_2d_shadow_attributes_shadowColor_1() { 16043 16044 var canvas = document.getElementById('c506'); 16045 var ctx = canvas.getContext('2d'); 16046 16047 ctx.shadowColor = 'lime'; 16048 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'"); 16049 ctx.shadowColor = 'RGBA(0,255, 0,0)'; 16050 is(ctx.shadowColor, 'rgba(0, 255, 0, 0)', "ctx.shadowColor should be what we set it to"); 16051 16052 16053 } 16054 </script> 16055 16056 <!-- [[[ test_2d.shadow.attributes.shadowColor.2.html ]]] --> 16057 16058 <p>Canvas test: 2d.shadow.attributes.shadowColor.2</p> 16059 <canvas id="c507" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16060 <script> 16061 16062 function test_2d_shadow_attributes_shadowColor_2() { 16063 16064 var canvas = document.getElementById('c507'); 16065 var ctx = canvas.getContext('2d'); 16066 16067 ctx.shadowColor = '#00ff00'; 16068 ctx.shadowColor = 'bogus'; 16069 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'"); 16070 ctx.shadowColor = ctx; 16071 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'"); 16072 ctx.shadowColor = undefined; 16073 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'"); 16074 16075 16076 } 16077 </script> 16078 16079 <!-- [[[ test_2d.shadow.attributes.shadowOffset.1.html ]]] --> 16080 16081 <p>Canvas test: 2d.shadow.attributes.shadowOffset.1</p> 16082 <canvas id="c508" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16083 <script> 16084 16085 function test_2d_shadow_attributes_shadowOffset_1() { 16086 16087 var canvas = document.getElementById('c508'); 16088 var ctx = canvas.getContext('2d'); 16089 16090 ctx.shadowOffsetX = 1; 16091 ctx.shadowOffsetY = 2; 16092 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1"); 16093 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2"); 16094 ctx.shadowOffsetX = 0.5; 16095 ctx.shadowOffsetY = 0.25; 16096 ok(ctx.shadowOffsetX === 0.5, "ctx.shadowOffsetX === 0.5"); 16097 ok(ctx.shadowOffsetY === 0.25, "ctx.shadowOffsetY === 0.25"); 16098 ctx.shadowOffsetX = -0.5; 16099 ctx.shadowOffsetY = -0.25; 16100 ok(ctx.shadowOffsetX === -0.5, "ctx.shadowOffsetX === -0.5"); 16101 ok(ctx.shadowOffsetY === -0.25, "ctx.shadowOffsetY === -0.25"); 16102 ctx.shadowOffsetX = 1e6; 16103 ctx.shadowOffsetY = 1e6; 16104 ok(ctx.shadowOffsetX === 1e6, "ctx.shadowOffsetX === 1e6"); 16105 ok(ctx.shadowOffsetY === 1e6, "ctx.shadowOffsetY === 1e6"); 16106 16107 16108 } 16109 </script> 16110 16111 <!-- [[[ test_2d.shadow.attributes.shadowOffset.2.html ]]] --> 16112 16113 <p>Canvas test: 2d.shadow.attributes.shadowOffset.2</p> 16114 <canvas id="c509" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16115 <script> 16116 16117 function test_2d_shadow_attributes_shadowOffset_2() { 16118 16119 var canvas = document.getElementById('c509'); 16120 var ctx = canvas.getContext('2d'); 16121 16122 ctx.shadowOffsetX = 1; 16123 ctx.shadowOffsetY = 2; 16124 ctx.shadowOffsetX = Infinity; 16125 ctx.shadowOffsetY = Infinity; 16126 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1"); 16127 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2"); 16128 16129 ctx.shadowOffsetX = 1; 16130 ctx.shadowOffsetY = 2; 16131 ctx.shadowOffsetX = -Infinity; 16132 ctx.shadowOffsetY = -Infinity; 16133 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1"); 16134 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2"); 16135 16136 ctx.shadowOffsetX = 1; 16137 ctx.shadowOffsetY = 2; 16138 ctx.shadowOffsetX = NaN; 16139 ctx.shadowOffsetY = NaN; 16140 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1"); 16141 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2"); 16142 16143 } 16144 </script> 16145 16146 <!-- [[[ test_2d.shadow.basic.1.html ]]] --> 16147 16148 <p>Canvas test: 2d.shadow.basic.1</p> 16149 <canvas id="c510" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16150 <script> 16151 16152 16153 function test_2d_shadow_basic_1() { 16154 16155 var canvas = document.getElementById('c510'); 16156 var ctx = canvas.getContext('2d'); 16157 16158 ctx.shadowColor = '#f00'; 16159 ctx.fillStyle = '#0f0'; 16160 ctx.fillRect(0, 0, 100, 50); 16161 isPixel(ctx, 50,25, 0,255,0,255, 0); 16162 16163 16164 } 16165 </script> 16166 16167 <!-- [[[ test_2d.shadow.basic.2.html ]]] --> 16168 16169 <p>Canvas test: 2d.shadow.basic.2</p> 16170 <canvas id="c511" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16171 <script> 16172 16173 16174 function test_2d_shadow_basic_2() { 16175 16176 var canvas = document.getElementById('c511'); 16177 var ctx = canvas.getContext('2d'); 16178 16179 ctx.fillStyle = '#0f0'; 16180 ctx.fillRect(0, 0, 100, 50); 16181 ctx.fillStyle = '#f00'; 16182 ctx.shadowColor = '#f00'; 16183 ctx.fillRect(0, -50, 100, 50); 16184 isPixel(ctx, 50,25, 0,255,0,255, 0); 16185 16186 16187 } 16188 </script> 16189 16190 <!-- [[[ test_2d.shadow.blur.high.html ]]] --> 16191 16192 <p>Canvas test: 2d.shadow.blur.high</p> 16193 <canvas id="c512" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16194 <script> 16195 16196 function test_2d_shadow_blur_high() { 16197 16198 var canvas = document.getElementById('c512'); 16199 var ctx = canvas.getContext('2d'); 16200 16201 ctx.fillStyle = '#ff0'; 16202 ctx.fillRect(0, 0, 100, 50); 16203 ctx.shadowColor = '#00f'; 16204 ctx.shadowOffsetY = 0; 16205 ctx.shadowBlur = 555.6; 16206 ctx.fillRect(-200, -200, 200, 400); 16207 16208 todo(false, "test completed successfully"); // (Bug 483989) 16209 16210 } 16211 16212 </script> 16213 <!-- [[[ test_2d.shadow.blur.low.html ]]] --> 16214 16215 <p>Canvas test: 2d.shadow.blur.low</p> 16216 <canvas id="c513" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16217 <script> 16218 16219 function test_2d_shadow_blur_low() { 16220 16221 var canvas = document.getElementById('c513'); 16222 var ctx = canvas.getContext('2d'); 16223 16224 ctx.fillStyle = '#ff0'; 16225 ctx.fillRect(0, 0, 100, 50); 16226 ctx.shadowColor = '#00f'; 16227 ctx.shadowOffsetY = 25; 16228 for (var x = 0; x < 100; ++x) { 16229 ctx.save(); 16230 ctx.beginPath(); 16231 ctx.rect(x, 0, 1, 50); 16232 ctx.clip(); 16233 ctx.shadowBlur = x; 16234 ctx.fillRect(-200, -200, 500, 200); 16235 ctx.restore(); 16236 } 16237 16238 todo(false, "test completed successfully"); // (Bug 483989) 16239 16240 } 16241 </script> 16242 <!-- [[[ test_2d.shadow.canvas.alpha.html ]]] --> 16243 16244 <p>Canvas test: 2d.shadow.canvas.alpha</p> 16245 <canvas id="c514" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16246 <script> 16247 16248 16249 16250 function test_2d_shadow_canvas_alpha() { 16251 16252 var canvas = document.getElementById('c514'); 16253 var ctx = canvas.getContext('2d'); 16254 16255 var canvas2 = document.createElement('canvas'); 16256 canvas2.width = 100; 16257 canvas2.height = 50; 16258 var ctx2 = canvas2.getContext('2d'); 16259 ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)'; 16260 ctx2.fillRect(0, 0, 100, 50); 16261 16262 ctx.fillStyle = '#f00'; 16263 ctx.fillRect(0, 0, 100, 50); 16264 ctx.shadowOffsetY = 50; 16265 ctx.shadowColor = '#00f'; 16266 ctx.drawImage(canvas2, 0, -50); 16267 16268 isPixel(ctx, 50,25, 127,0,127,255, 2); 16269 16270 16271 } 16272 </script> 16273 <img src="image_transparent50.png" id="transparent50_1.png" class="resource"> 16274 16275 <!-- [[[ test_2d.shadow.canvas.basic.html ]]] --> 16276 16277 <p>Canvas test: 2d.shadow.canvas.basic</p> 16278 <canvas id="c515" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16279 <script> 16280 16281 16282 16283 function test_2d_shadow_canvas_basic() { 16284 16285 var canvas = document.getElementById('c515'); 16286 var ctx = canvas.getContext('2d'); 16287 16288 var canvas2 = document.createElement('canvas'); 16289 canvas2.width = 100; 16290 canvas2.height = 50; 16291 var ctx2 = canvas2.getContext('2d'); 16292 ctx2.fillStyle = '#f00'; 16293 ctx2.fillRect(0, 0, 100, 50); 16294 16295 ctx.fillStyle = '#f00'; 16296 ctx.fillRect(0, 0, 100, 50); 16297 ctx.shadowColor = '#0f0'; 16298 ctx.shadowOffsetY = 50; 16299 ctx.drawImage(canvas2, 0, -50); 16300 16301 isPixel(ctx, 50,25, 0,255,0,255, 0); 16302 16303 16304 } 16305 </script> 16306 16307 <!-- [[[ test_2d.shadow.canvas.transparent.1.html ]]] --> 16308 16309 <p>Canvas test: 2d.shadow.canvas.transparent.1</p> 16310 <canvas id="c516" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16311 <script> 16312 16313 16314 function test_2d_shadow_canvas_transparent_1() { 16315 16316 var canvas = document.getElementById('c516'); 16317 var ctx = canvas.getContext('2d'); 16318 16319 var canvas2 = document.createElement('canvas'); 16320 canvas2.width = 100; 16321 canvas2.height = 50; 16322 var ctx2 = canvas2.getContext('2d'); 16323 16324 ctx.fillStyle = '#0f0'; 16325 ctx.fillRect(0, 0, 100, 50); 16326 ctx.shadowColor = '#f00'; 16327 ctx.shadowOffsetY = 50; 16328 ctx.drawImage(canvas2, 0, -50); 16329 16330 isPixel(ctx, 50,25, 0,255,0,255, 0); 16331 16332 16333 } 16334 </script> 16335 16336 <!-- [[[ test_2d.shadow.canvas.transparent.2.html ]]] --> 16337 16338 <p>Canvas test: 2d.shadow.canvas.transparent.2</p> 16339 <canvas id="c517" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16340 <script> 16341 16342 16343 16344 function test_2d_shadow_canvas_transparent_2() { 16345 16346 var canvas = document.getElementById('c517'); 16347 var ctx = canvas.getContext('2d'); 16348 16349 var canvas2 = document.createElement('canvas'); 16350 canvas2.width = 100; 16351 canvas2.height = 50; 16352 var ctx2 = canvas2.getContext('2d'); 16353 ctx2.fillStyle = '#f00'; 16354 ctx2.fillRect(0, 0, 50, 50); 16355 16356 ctx.fillStyle = '#0f0'; 16357 ctx.fillRect(0, 0, 50, 50); 16358 ctx.fillStyle = '#f00'; 16359 ctx.fillRect(50, 0, 50, 50); 16360 ctx.shadowOffsetY = 50; 16361 ctx.shadowColor = '#0f0'; 16362 ctx.drawImage(canvas2, 50, -50); 16363 ctx.shadowColor = '#f00'; 16364 ctx.drawImage(canvas2, -50, -50); 16365 16366 isPixel(ctx, 25,25, 0,255,0,255, 0); 16367 isPixel(ctx, 50,25, 0,255,0,255, 0); 16368 isPixel(ctx, 75,25, 0,255,0,255, 0); 16369 16370 16371 } 16372 </script> 16373 16374 <!-- [[[ test_2d.shadow.clip.1.html ]]] --> 16375 16376 <p>Canvas test: 2d.shadow.clip.1</p> 16377 <canvas id="c518" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16378 <script> 16379 16380 16381 16382 function test_2d_shadow_clip_1() { 16383 16384 var canvas = document.getElementById('c518'); 16385 var ctx = canvas.getContext('2d'); 16386 16387 ctx.fillStyle = '#0f0'; 16388 ctx.fillRect(0, 0, 50, 50); 16389 ctx.fillStyle = '#f00'; 16390 ctx.fillRect(50, 0, 50, 50); 16391 16392 ctx.save(); 16393 ctx.beginPath(); 16394 ctx.rect(50, 0, 50, 50); 16395 ctx.clip(); 16396 ctx.shadowColor = '#0f0'; 16397 ctx.shadowOffsetX = 50; 16398 ctx.fillRect(0, 0, 50, 50); 16399 ctx.restore(); 16400 16401 isPixel(ctx, 25,25, 0,255,0,255, 0); 16402 isPixel(ctx, 75,25, 0,255,0,255, 0); 16403 16404 16405 } 16406 </script> 16407 16408 <!-- [[[ test_2d.shadow.clip.2.html ]]] --> 16409 16410 <p>Canvas test: 2d.shadow.clip.2</p> 16411 <canvas id="c519" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16412 <script> 16413 16414 16415 function test_2d_shadow_clip_2() { 16416 16417 var canvas = document.getElementById('c519'); 16418 var ctx = canvas.getContext('2d'); 16419 16420 ctx.fillStyle = '#f00'; 16421 ctx.fillRect(0, 0, 50, 50); 16422 ctx.fillStyle = '#0f0'; 16423 ctx.fillRect(50, 0, 50, 50); 16424 16425 ctx.save(); 16426 ctx.beginPath(); 16427 ctx.rect(0, 0, 50, 50); 16428 ctx.clip(); 16429 ctx.shadowColor = '#f00'; 16430 ctx.shadowOffsetX = 50; 16431 ctx.fillRect(0, 0, 50, 50); 16432 ctx.restore(); 16433 16434 isPixel(ctx, 25,25, 0,255,0,255, 0); 16435 isPixel(ctx, 75,25, 0,255,0,255, 0); 16436 16437 16438 } 16439 </script> 16440 16441 <!-- [[[ test_2d.shadow.clip.3.html ]]] --> 16442 16443 <p>Canvas test: 2d.shadow.clip.3</p> 16444 <canvas id="c520" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16445 <script> 16446 16447 16448 16449 function test_2d_shadow_clip_3() { 16450 16451 var canvas = document.getElementById('c520'); 16452 var ctx = canvas.getContext('2d'); 16453 16454 ctx.fillStyle = '#f00'; 16455 ctx.fillRect(0, 0, 50, 50); 16456 ctx.fillStyle = '#0f0'; 16457 ctx.fillRect(50, 0, 50, 50); 16458 16459 ctx.save(); 16460 ctx.beginPath(); 16461 ctx.rect(0, 0, 50, 50); 16462 ctx.clip(); 16463 ctx.fillStyle = '#f00'; 16464 ctx.shadowColor = '#0f0'; 16465 ctx.shadowOffsetX = 50; 16466 ctx.fillRect(-50, 0, 50, 50); 16467 ctx.restore(); 16468 16469 isPixel(ctx, 25,25, 0,255,0,255, 0); 16470 isPixel(ctx, 75,25, 0,255,0,255, 0); 16471 16472 16473 } 16474 </script> 16475 16476 <!-- [[[ test_2d.shadow.composite.1.html ]]] --> 16477 16478 <p>Canvas test: 2d.shadow.composite.1</p> 16479 <canvas id="c521" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16480 <script> 16481 16482 16483 16484 function test_2d_shadow_composite_1() { 16485 16486 var canvas = document.getElementById('c521'); 16487 var ctx = canvas.getContext('2d'); 16488 16489 ctx.fillStyle = '#f00'; 16490 ctx.fillRect(0, 0, 100, 50); 16491 ctx.globalCompositeOperation = 'xor'; 16492 ctx.shadowColor = '#f00'; 16493 ctx.shadowOffsetX = 100; 16494 ctx.fillStyle = '#0f0'; 16495 ctx.fillRect(-100, 0, 200, 50); 16496 16497 isPixel(ctx, 50, 25, 0, 255, 0, 255, 2); 16498 16499 } 16500 </script> 16501 16502 <!-- [[[ test_2d.shadow.composite.2.html ]]] --> 16503 16504 <p>Canvas test: 2d.shadow.composite.2</p> 16505 <canvas id="c522" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16506 <script> 16507 16508 16509 16510 function test_2d_shadow_composite_2() { 16511 16512 var canvas = document.getElementById('c522'); 16513 var ctx = canvas.getContext('2d'); 16514 16515 ctx.fillStyle = '#f00'; 16516 ctx.fillRect(0, 0, 100, 50); 16517 ctx.globalCompositeOperation = 'xor'; 16518 ctx.shadowColor = '#f00'; 16519 ctx.shadowBlur = 1; 16520 ctx.fillStyle = '#0f0'; 16521 ctx.fillRect(-10, -10, 120, 70); 16522 16523 isPixel(ctx, 50, 25, 0, 255, 0, 255, 2); 16524 16525 } 16526 </script> 16527 16528 <!-- [[[ test_2d.shadow.composite.3.html ]]] --> 16529 16530 <p>Canvas test: 2d.shadow.composite.3</p> 16531 <canvas id="c523" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16532 <script> 16533 16534 16535 16536 function test_2d_shadow_composite_3() { 16537 16538 var canvas = document.getElementById('c523'); 16539 var ctx = canvas.getContext('2d'); 16540 16541 ctx.fillStyle = '#f00'; 16542 ctx.fillRect(0, 0, 100, 50); 16543 ctx.globalCompositeOperation = 'xor'; 16544 ctx.shadowColor = '#f00'; 16545 ctx.fillStyle = '#0f0'; 16546 ctx.fillRect(0, 0, 100, 50); 16547 16548 isPixel(ctx, 50,25, 0,255,0,255, 2); 16549 16550 16551 } 16552 </script> 16553 16554 <!-- [[[ test_2d.shadow.composite.4.html ]]] --> 16555 16556 <p>Canvas test: 2d.shadow.composite.4</p> 16557 <canvas id="c524" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16558 <script> 16559 16560 16561 16562 function test_2d_shadow_composite_4() { 16563 16564 var canvas = document.getElementById('c524'); 16565 var ctx = canvas.getContext('2d'); 16566 16567 ctx.globalCompositeOperation = 'destination-over'; 16568 ctx.shadowColor = '#0f0'; 16569 ctx.fillStyle = '#f00'; 16570 ctx.fillRect(0, 0, 100, 50); 16571 16572 isPixel(ctx, 50,25, 0,255,0,255, 2); 16573 16574 16575 } 16576 </script> 16577 16578 <!-- [[[ test_2d.shadow.gradient.alpha.html ]]] --> 16579 16580 <p>Canvas test: 2d.shadow.gradient.alpha</p> 16581 <canvas id="c525" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16582 <script> 16583 16584 16585 16586 function test_2d_shadow_gradient_alpha() { 16587 16588 var canvas = document.getElementById('c525'); 16589 var ctx = canvas.getContext('2d'); 16590 16591 var gradient = ctx.createLinearGradient(0, 0, 100, 0); 16592 gradient.addColorStop(0, 'rgba(255,0,0,0.5)'); 16593 gradient.addColorStop(1, 'rgba(255,0,0,0.5)'); 16594 ctx.fillStyle = '#f00'; 16595 ctx.fillRect(0, 0, 100, 50); 16596 ctx.shadowOffsetY = 50; 16597 ctx.shadowColor = '#00f'; 16598 ctx.fillStyle = gradient; 16599 ctx.fillRect(0, -50, 100, 50); 16600 16601 isPixel(ctx, 50,25, 127,0,127,255, 2); 16602 16603 16604 } 16605 </script> 16606 16607 <!-- [[[ test_2d.shadow.gradient.basic.html ]]] --> 16608 16609 <p>Canvas test: 2d.shadow.gradient.basic</p> 16610 <canvas id="c526" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16611 <script> 16612 16613 16614 16615 function test_2d_shadow_gradient_basic() { 16616 16617 var canvas = document.getElementById('c526'); 16618 var ctx = canvas.getContext('2d'); 16619 16620 var gradient = ctx.createLinearGradient(0, 0, 100, 0); 16621 gradient.addColorStop(0, '#f00'); 16622 gradient.addColorStop(1, '#f00'); 16623 ctx.fillStyle = '#f00'; 16624 ctx.fillRect(0, 0, 100, 50); 16625 ctx.shadowColor = '#0f0'; 16626 ctx.shadowOffsetY = 50; 16627 ctx.fillStyle = gradient; 16628 ctx.fillRect(0, -50, 100, 50); 16629 16630 isPixel(ctx, 50,25, 0,255,0,255, 0); 16631 16632 16633 } 16634 </script> 16635 16636 <!-- [[[ test_2d.shadow.gradient.transparent.1.html ]]] --> 16637 16638 <p>Canvas test: 2d.shadow.gradient.transparent.1</p> 16639 <canvas id="c527" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16640 <script> 16641 16642 16643 function test_2d_shadow_gradient_transparent_1() { 16644 16645 var canvas = document.getElementById('c527'); 16646 var ctx = canvas.getContext('2d'); 16647 16648 var gradient = ctx.createLinearGradient(0, 0, 100, 0); 16649 gradient.addColorStop(0, 'rgba(0,0,0,0)'); 16650 gradient.addColorStop(1, 'rgba(0,0,0,0)'); 16651 ctx.fillStyle = '#0f0'; 16652 ctx.fillRect(0, 0, 100, 50); 16653 ctx.shadowColor = '#f00'; 16654 ctx.shadowOffsetY = 50; 16655 ctx.fillStyle = gradient; 16656 ctx.fillRect(0, -50, 100, 50); 16657 16658 isPixel(ctx, 50,25, 0,255,0,255, 0); 16659 16660 16661 } 16662 </script> 16663 16664 <!-- [[[ test_2d.shadow.gradient.transparent.2.html ]]] --> 16665 16666 <p>Canvas test: 2d.shadow.gradient.transparent.2</p> 16667 <canvas id="c528" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16668 <script> 16669 16670 16671 16672 function test_2d_shadow_gradient_transparent_2() { 16673 16674 var canvas = document.getElementById('c528'); 16675 var ctx = canvas.getContext('2d'); 16676 16677 var gradient = ctx.createLinearGradient(0, 0, 100, 0); 16678 gradient.addColorStop(0, '#f00'); 16679 gradient.addColorStop(0.499, '#f00'); 16680 gradient.addColorStop(0.5, 'rgba(0,0,0,0)'); 16681 gradient.addColorStop(1, 'rgba(0,0,0,0)'); 16682 ctx.fillStyle = '#f00'; 16683 ctx.fillRect(0, 0, 50, 50); 16684 ctx.fillStyle = '#0f0'; 16685 ctx.fillRect(50, 0, 50, 50); 16686 ctx.shadowOffsetY = 50; 16687 ctx.shadowColor = '#0f0'; 16688 ctx.fillStyle = gradient; 16689 ctx.fillRect(0, -50, 100, 50); 16690 16691 isPixel(ctx, 25,25, 0,255,0,255, 0); 16692 isPixel(ctx, 50,25, 0,255,0,255, 0); 16693 isPixel(ctx, 75,25, 0,255,0,255, 0); 16694 16695 16696 } 16697 </script> 16698 16699 <!-- [[[ test_2d.shadow.image.alpha.html ]]] --> 16700 16701 <p>Canvas test: 2d.shadow.image.alpha</p> 16702 <canvas id="c529" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16703 <script> 16704 16705 16706 16707 function test_2d_shadow_image_alpha() { 16708 16709 var canvas = document.getElementById('c529'); 16710 var ctx = canvas.getContext('2d'); 16711 16712 ctx.fillStyle = '#f00'; 16713 ctx.fillRect(0, 0, 100, 50); 16714 ctx.shadowOffsetY = 50; 16715 ctx.shadowColor = '#00f'; 16716 ctx.drawImage(document.getElementById('transparent50_2.png'), 0, -50); 16717 16718 isPixel(ctx, 50,25, 127,0,127,255, 2); 16719 16720 16721 } 16722 </script> 16723 <img src="image_transparent50.png" id="transparent50_2.png" class="resource"> 16724 16725 <!-- [[[ test_2d.shadow.image.basic.html ]]] --> 16726 16727 <p>Canvas test: 2d.shadow.image.basic</p> 16728 <canvas id="c530" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16729 <script> 16730 16731 16732 16733 function test_2d_shadow_image_basic() { 16734 16735 var canvas = document.getElementById('c530'); 16736 var ctx = canvas.getContext('2d'); 16737 16738 ctx.fillStyle = '#f00'; 16739 ctx.fillRect(0, 0, 100, 50); 16740 ctx.shadowColor = '#0f0'; 16741 ctx.shadowOffsetY = 50; 16742 ctx.drawImage(document.getElementById('red_17.png'), 0, -50); 16743 16744 isPixel(ctx, 50,25, 0,255,0,255, 0); 16745 16746 16747 } 16748 </script> 16749 <img src="image_red.png" id="red_17.png" class="resource"> 16750 16751 <!-- [[[ test_2d.shadow.image.scale.html ]]] --> 16752 16753 <p>Canvas test: 2d.shadow.image.scale</p> 16754 <canvas id="c531" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16755 <script> 16756 16757 16758 16759 function test_2d_shadow_image_scale() { 16760 16761 var canvas = document.getElementById('c531'); 16762 var ctx = canvas.getContext('2d'); 16763 16764 ctx.fillStyle = '#f00'; 16765 ctx.fillRect(0, 0, 100, 50); 16766 ctx.shadowOffsetY = 50; 16767 ctx.shadowColor = '#0f0'; 16768 ctx.drawImage(document.getElementById('redtransparent_2.png'), 0, 0, 100, 50, -10, -50, 240, 50); 16769 16770 isPixel(ctx, 25,25, 0,255,0,255, 2); 16771 isPixel(ctx, 50,25, 0,255,0,255, 2); 16772 isPixel(ctx, 75,25, 0,255,0,255, 2); 16773 16774 16775 } 16776 </script> 16777 <img src="image_redtransparent.png" id="redtransparent_2.png" class="resource"> 16778 16779 <!-- [[[ test_2d.shadow.image.section.html ]]] --> 16780 16781 <p>Canvas test: 2d.shadow.image.section</p> 16782 <canvas id="c532" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16783 <script> 16784 16785 16786 function test_2d_shadow_image_section() { 16787 16788 var canvas = document.getElementById('c532'); 16789 var ctx = canvas.getContext('2d'); 16790 16791 ctx.fillStyle = '#0f0'; 16792 ctx.fillRect(0, 0, 100, 50); 16793 ctx.shadowOffsetY = 50; 16794 ctx.shadowColor = '#f00'; 16795 ctx.drawImage(document.getElementById('redtransparent_3.png'), 50, 0, 50, 50, 0, -50, 50, 50); 16796 16797 isPixel(ctx, 25,25, 0,255,0,255, 2); 16798 isPixel(ctx, 50,25, 0,255,0,255, 2); 16799 isPixel(ctx, 75,25, 0,255,0,255, 2); 16800 16801 16802 } 16803 </script> 16804 <img src="image_redtransparent.png" id="redtransparent_3.png" class="resource"> 16805 16806 <!-- [[[ test_2d.shadow.image.transparent.1.html ]]] --> 16807 16808 <p>Canvas test: 2d.shadow.image.transparent.1</p> 16809 <canvas id="c533" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16810 <script> 16811 16812 16813 function test_2d_shadow_image_transparent_1() { 16814 16815 var canvas = document.getElementById('c533'); 16816 var ctx = canvas.getContext('2d'); 16817 16818 ctx.fillStyle = '#0f0'; 16819 ctx.fillRect(0, 0, 100, 50); 16820 ctx.shadowColor = '#f00'; 16821 ctx.shadowOffsetY = 50; 16822 ctx.drawImage(document.getElementById('transparent_1.png'), 0, -50); 16823 16824 isPixel(ctx, 50,25, 0,255,0,255, 0); 16825 16826 16827 } 16828 </script> 16829 <img src="image_transparent.png" id="transparent_1.png" class="resource"> 16830 16831 <!-- [[[ test_2d.shadow.image.transparent.2.html ]]] --> 16832 16833 <p>Canvas test: 2d.shadow.image.transparent.2</p> 16834 <canvas id="c534" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16835 <script> 16836 16837 16838 16839 function test_2d_shadow_image_transparent_2() { 16840 16841 var canvas = document.getElementById('c534'); 16842 var ctx = canvas.getContext('2d'); 16843 16844 ctx.fillStyle = '#0f0'; 16845 ctx.fillRect(0, 0, 50, 50); 16846 ctx.fillStyle = '#f00'; 16847 ctx.fillRect(50, 0, 50, 50); 16848 ctx.shadowOffsetY = 50; 16849 ctx.shadowColor = '#0f0'; 16850 ctx.drawImage(document.getElementById('redtransparent_4.png'), 50, -50); 16851 ctx.shadowColor = '#f00'; 16852 ctx.drawImage(document.getElementById('redtransparent_4.png'), -50, -50); 16853 16854 isPixel(ctx, 25,25, 0,255,0,255, 0); 16855 isPixel(ctx, 50,25, 0,255,0,255, 0); 16856 isPixel(ctx, 75,25, 0,255,0,255, 0); 16857 16858 16859 } 16860 </script> 16861 <img src="image_redtransparent.png" id="redtransparent_4.png" class="resource"> 16862 16863 <!-- [[[ test_2d.shadow.offset.negativeX.html ]]] --> 16864 16865 <p>Canvas test: 2d.shadow.offset.negativeX</p> 16866 <canvas id="c535" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16867 <script> 16868 16869 16870 16871 function test_2d_shadow_offset_negativeX() { 16872 16873 var canvas = document.getElementById('c535'); 16874 var ctx = canvas.getContext('2d'); 16875 16876 ctx.fillStyle = '#f00'; 16877 ctx.fillRect(0, 0, 100, 50); 16878 ctx.fillStyle = '#0f0'; 16879 ctx.shadowColor = '#0f0'; 16880 ctx.shadowOffsetX = -50; 16881 ctx.fillRect(50, 0, 50, 50); 16882 isPixel(ctx, 25,25, 0,255,0,255, 0); 16883 isPixel(ctx, 75,25, 0,255,0,255, 0); 16884 16885 16886 } 16887 </script> 16888 16889 <!-- [[[ test_2d.shadow.offset.negativeY.html ]]] --> 16890 16891 <p>Canvas test: 2d.shadow.offset.negativeY</p> 16892 <canvas id="c536" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16893 <script> 16894 16895 16896 16897 function test_2d_shadow_offset_negativeY() { 16898 16899 var canvas = document.getElementById('c536'); 16900 var ctx = canvas.getContext('2d'); 16901 16902 ctx.fillStyle = '#f00'; 16903 ctx.fillRect(0, 0, 100, 50); 16904 ctx.fillStyle = '#0f0'; 16905 ctx.shadowColor = '#0f0'; 16906 ctx.shadowOffsetY = -25; 16907 ctx.fillRect(0, 25, 100, 25); 16908 isPixel(ctx, 50,12, 0,255,0,255, 0); 16909 isPixel(ctx, 50,37, 0,255,0,255, 0); 16910 16911 16912 } 16913 </script> 16914 16915 <!-- [[[ test_2d.shadow.offset.positiveX.html ]]] --> 16916 16917 <p>Canvas test: 2d.shadow.offset.positiveX</p> 16918 <canvas id="c537" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16919 <script> 16920 16921 16922 16923 function test_2d_shadow_offset_positiveX() { 16924 16925 var canvas = document.getElementById('c537'); 16926 var ctx = canvas.getContext('2d'); 16927 16928 ctx.fillStyle = '#f00'; 16929 ctx.fillRect(0, 0, 100, 50); 16930 ctx.fillStyle = '#0f0'; 16931 ctx.shadowColor = '#0f0'; 16932 ctx.shadowOffsetX = 50; 16933 ctx.fillRect(0, 0, 50, 50); 16934 isPixel(ctx, 25,25, 0,255,0,255, 0); 16935 isPixel(ctx, 75,25, 0,255,0,255, 0); 16936 16937 16938 } 16939 </script> 16940 16941 <!-- [[[ test_2d.shadow.offset.positiveY.html ]]] --> 16942 16943 <p>Canvas test: 2d.shadow.offset.positiveY</p> 16944 <canvas id="c538" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16945 <script> 16946 16947 16948 16949 function test_2d_shadow_offset_positiveY() { 16950 16951 var canvas = document.getElementById('c538'); 16952 var ctx = canvas.getContext('2d'); 16953 16954 ctx.fillStyle = '#f00'; 16955 ctx.fillRect(0, 0, 100, 50); 16956 ctx.fillStyle = '#0f0'; 16957 ctx.shadowColor = '#0f0'; 16958 ctx.shadowOffsetY = 25; 16959 ctx.fillRect(0, 0, 100, 25); 16960 isPixel(ctx, 50,12, 0,255,0,255, 0); 16961 isPixel(ctx, 50,37, 0,255,0,255, 0); 16962 16963 16964 } 16965 </script> 16966 16967 <!-- [[[ test_2d.shadow.outside.html ]]] --> 16968 16969 <p>Canvas test: 2d.shadow.outside</p> 16970 <canvas id="c539" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 16971 <script> 16972 16973 16974 16975 function test_2d_shadow_outside() { 16976 16977 var canvas = document.getElementById('c539'); 16978 var ctx = canvas.getContext('2d'); 16979 16980 ctx.fillStyle = '#f00'; 16981 ctx.fillRect(0, 0, 100, 50); 16982 ctx.shadowColor = '#0f0'; 16983 ctx.shadowOffsetX = 100; 16984 ctx.fillRect(-100, 0, 25, 50); 16985 ctx.shadowOffsetX = -100; 16986 ctx.fillRect(175, 0, 25, 50); 16987 ctx.shadowOffsetX = 0; 16988 ctx.shadowOffsetY = 100; 16989 ctx.fillRect(25, -100, 50, 25); 16990 ctx.shadowOffsetY = -100; 16991 ctx.fillRect(25, 125, 50, 25); 16992 isPixel(ctx, 12,25, 0,255,0,255, 0); 16993 isPixel(ctx, 87,25, 0,255,0,255, 0); 16994 isPixel(ctx, 50,12, 0,255,0,255, 0); 16995 isPixel(ctx, 50,37, 0,255,0,255, 0); 16996 16997 16998 } 16999 </script> 17000 17001 <!-- [[[ test_2d.shadow.pattern.alpha.html ]]] --> 17002 17003 <p>Canvas test: 2d.shadow.pattern.alpha</p> 17004 <canvas id="c540" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17005 <script> 17006 17007 17008 17009 function test_2d_shadow_pattern_alpha() { 17010 17011 var canvas = document.getElementById('c540'); 17012 var ctx = canvas.getContext('2d'); 17013 17014 var pattern = ctx.createPattern(document.getElementById('transparent50_3.png'), 'repeat'); 17015 ctx.fillStyle = '#f00'; 17016 ctx.fillRect(0, 0, 100, 50); 17017 ctx.shadowOffsetY = 50; 17018 ctx.shadowColor = '#00f'; 17019 ctx.fillStyle = pattern; 17020 ctx.fillRect(0, -50, 100, 50); 17021 17022 isPixel(ctx, 50,25, 127,0,127,255, 2); 17023 17024 17025 } 17026 </script> 17027 <img src="image_transparent50.png" id="transparent50_3.png" class="resource"> 17028 17029 <!-- [[[ test_2d.shadow.pattern.basic.html ]]] --> 17030 17031 <p>Canvas test: 2d.shadow.pattern.basic</p> 17032 <canvas id="c541" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17033 <script> 17034 17035 17036 17037 function test_2d_shadow_pattern_basic() { 17038 17039 var canvas = document.getElementById('c541'); 17040 var ctx = canvas.getContext('2d'); 17041 17042 var pattern = ctx.createPattern(document.getElementById('red_18.png'), 'repeat'); 17043 ctx.fillStyle = '#f00'; 17044 ctx.fillRect(0, 0, 100, 50); 17045 ctx.shadowColor = '#0f0'; 17046 ctx.shadowOffsetY = 50; 17047 ctx.fillStyle = pattern; 17048 ctx.fillRect(0, -50, 100, 50); 17049 17050 isPixel(ctx, 50,25, 0,255,0,255, 0); 17051 17052 17053 } 17054 </script> 17055 <img src="image_red.png" id="red_18.png" class="resource"> 17056 17057 <!-- [[[ test_2d.shadow.pattern.transparent.1.html ]]] --> 17058 17059 <p>Canvas test: 2d.shadow.pattern.transparent.1</p> 17060 <canvas id="c542" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17061 <script> 17062 17063 17064 function test_2d_shadow_pattern_transparent_1() { 17065 17066 var canvas = document.getElementById('c542'); 17067 var ctx = canvas.getContext('2d'); 17068 17069 var pattern = ctx.createPattern(document.getElementById('transparent_2.png'), 'repeat'); 17070 ctx.fillStyle = '#0f0'; 17071 ctx.fillRect(0, 0, 100, 50); 17072 ctx.shadowColor = '#f00'; 17073 ctx.shadowOffsetY = 50; 17074 ctx.fillStyle = pattern; 17075 ctx.fillRect(0, -50, 100, 50); 17076 17077 isPixel(ctx, 50,25, 0,255,0,255, 0); 17078 17079 17080 } 17081 </script> 17082 <img src="image_transparent.png" id="transparent_2.png" class="resource"> 17083 17084 <!-- [[[ test_2d.shadow.pattern.transparent.2.html ]]] --> 17085 17086 <p>Canvas test: 2d.shadow.pattern.transparent.2</p> 17087 <canvas id="c543" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17088 <script> 17089 17090 17091 17092 function test_2d_shadow_pattern_transparent_2() { 17093 17094 var canvas = document.getElementById('c543'); 17095 var ctx = canvas.getContext('2d'); 17096 17097 var pattern = ctx.createPattern(document.getElementById('redtransparent_5.png'), 'repeat'); 17098 ctx.fillStyle = '#f00'; 17099 ctx.fillRect(0, 0, 50, 50); 17100 ctx.fillStyle = '#0f0'; 17101 ctx.fillRect(50, 0, 50, 50); 17102 ctx.shadowOffsetY = 50; 17103 ctx.shadowColor = '#0f0'; 17104 ctx.fillStyle = pattern; 17105 ctx.fillRect(0, -50, 100, 50); 17106 17107 isPixel(ctx, 25,25, 0,255,0,255, 0); 17108 isPixel(ctx, 50,25, 0,255,0,255, 0); 17109 isPixel(ctx, 75,25, 0,255,0,255, 0); 17110 17111 17112 } 17113 </script> 17114 <img src="image_redtransparent.png" id="redtransparent_5.png" class="resource"> 17115 17116 <!-- [[[ test_2d.shadow.stroke.basic.html ]]] --> 17117 17118 <p>Canvas test: 2d.shadow.stroke.basic</p> 17119 <canvas id="c544" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17120 <script> 17121 17122 17123 17124 function test_2d_shadow_stroke_basic() { 17125 17126 var canvas = document.getElementById('c544'); 17127 var ctx = canvas.getContext('2d'); 17128 17129 ctx.fillStyle = '#f00'; 17130 ctx.fillRect(0, 0, 100, 50); 17131 ctx.strokeStyle = '#f00'; 17132 ctx.shadowColor = '#0f0'; 17133 ctx.shadowOffsetY = 50; 17134 ctx.beginPath(); 17135 ctx.lineWidth = 50; 17136 ctx.moveTo(0, -25); 17137 ctx.lineTo(100, -25); 17138 ctx.stroke(); 17139 17140 isPixel(ctx, 1,25, 0,255,0,255, 0); 17141 isPixel(ctx, 50,25, 0,255,0,255, 0); 17142 isPixel(ctx, 98,25, 0,255,0,255, 0); 17143 17144 17145 } 17146 </script> 17147 17148 <!-- [[[ test_2d.shadow.stroke.cap.1.html ]]] --> 17149 17150 <p>Canvas test: 2d.shadow.stroke.cap.1</p> 17151 <canvas id="c545" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17152 <script> 17153 17154 17155 function test_2d_shadow_stroke_cap_1() { 17156 17157 var canvas = document.getElementById('c545'); 17158 var ctx = canvas.getContext('2d'); 17159 17160 ctx.fillStyle = '#0f0'; 17161 ctx.fillRect(0, 0, 100, 50); 17162 ctx.strokeStyle = '#f00'; 17163 ctx.shadowColor = '#f00'; 17164 ctx.shadowOffsetY = 50; 17165 ctx.beginPath(); 17166 ctx.lineWidth = 50; 17167 ctx.lineCap = 'butt'; 17168 ctx.moveTo(-50, -25); 17169 ctx.lineTo(0, -25); 17170 ctx.moveTo(100, -25); 17171 ctx.lineTo(150, -25); 17172 ctx.stroke(); 17173 17174 isPixel(ctx, 1,25, 0,255,0,255, 0); 17175 isPixel(ctx, 50,25, 0,255,0,255, 0); 17176 isPixel(ctx, 98,25, 0,255,0,255, 0); 17177 17178 17179 } 17180 </script> 17181 17182 <!-- [[[ test_2d.shadow.stroke.cap.2.html ]]] --> 17183 17184 <p>Canvas test: 2d.shadow.stroke.cap.2</p> 17185 <canvas id="c546" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17186 <script> 17187 17188 17189 17190 function test_2d_shadow_stroke_cap_2() { 17191 17192 var canvas = document.getElementById('c546'); 17193 var ctx = canvas.getContext('2d'); 17194 17195 ctx.fillStyle = '#f00'; 17196 ctx.fillRect(0, 0, 100, 50); 17197 ctx.strokeStyle = '#f00'; 17198 ctx.shadowColor = '#0f0'; 17199 ctx.shadowOffsetY = 50; 17200 ctx.beginPath(); 17201 ctx.lineWidth = 50; 17202 ctx.lineCap = 'square'; 17203 ctx.moveTo(25, -25); 17204 ctx.lineTo(75, -25); 17205 ctx.stroke(); 17206 17207 isPixel(ctx, 1,25, 0,255,0,255, 0); 17208 isPixel(ctx, 50,25, 0,255,0,255, 0); 17209 isPixel(ctx, 98,25, 0,255,0,255, 0); 17210 17211 17212 } 17213 </script> 17214 17215 <!-- [[[ test_2d.shadow.stroke.join.1.html ]]] --> 17216 17217 <p>Canvas test: 2d.shadow.stroke.join.1</p> 17218 <canvas id="c547" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17219 <script> 17220 17221 17222 function test_2d_shadow_stroke_join_1() { 17223 17224 var canvas = document.getElementById('c547'); 17225 var ctx = canvas.getContext('2d'); 17226 17227 ctx.fillStyle = '#0f0'; 17228 ctx.fillRect(0, 0, 100, 50); 17229 ctx.strokeStyle = '#f00'; 17230 ctx.shadowColor = '#f00'; 17231 ctx.shadowOffsetX = 100; 17232 ctx.lineWidth = 200; 17233 ctx.lineJoin = 'bevel'; 17234 ctx.beginPath(); 17235 ctx.moveTo(-200, -50); 17236 ctx.lineTo(-150, -50); 17237 ctx.lineTo(-151, -100); 17238 ctx.stroke(); 17239 17240 isPixel(ctx, 1,1, 0,255,0,255, 0); 17241 isPixel(ctx, 48,48, 0,255,0,255, 0); 17242 isPixel(ctx, 50,25, 0,255,0,255, 0); 17243 isPixel(ctx, 98,48, 0,255,0,255, 0); 17244 17245 17246 } 17247 </script> 17248 17249 <!-- [[[ test_2d.shadow.stroke.join.2.html ]]] --> 17250 17251 <p>Canvas test: 2d.shadow.stroke.join.2</p> 17252 <canvas id="c548" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17253 <script> 17254 17255 17256 17257 function test_2d_shadow_stroke_join_2() { 17258 17259 var canvas = document.getElementById('c548'); 17260 var ctx = canvas.getContext('2d'); 17261 17262 ctx.fillStyle = '#f00'; 17263 ctx.fillRect(0, 0, 50, 50); 17264 ctx.fillStyle = '#0f0'; 17265 ctx.fillRect(50, 0, 50, 50); 17266 ctx.strokeStyle = '#f00'; 17267 ctx.shadowColor = '#0f0'; 17268 ctx.shadowOffsetX = 100; 17269 ctx.lineWidth = 200; 17270 ctx.lineJoin = 'miter'; 17271 ctx.beginPath(); 17272 ctx.moveTo(-200, -50); 17273 ctx.lineTo(-150, -50); 17274 ctx.lineTo(-151, -100); 17275 ctx.stroke(); 17276 17277 isPixel(ctx, 1,1, 0,255,0,255, 0); 17278 isPixel(ctx, 48,48, 0,255,0,255, 0); 17279 isPixel(ctx, 50,25, 0,255,0,255, 0); 17280 isPixel(ctx, 98,48, 0,255,0,255, 0); 17281 17282 17283 } 17284 </script> 17285 17286 <!-- [[[ test_2d.shadow.stroke.join.3.html ]]] --> 17287 17288 <p>Canvas test: 2d.shadow.stroke.join.3</p> 17289 <canvas id="c549" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17290 <script> 17291 17292 17293 function test_2d_shadow_stroke_join_3() { 17294 17295 var canvas = document.getElementById('c549'); 17296 var ctx = canvas.getContext('2d'); 17297 17298 ctx.fillStyle = '#0f0'; 17299 ctx.fillRect(0, 0, 100, 50); 17300 ctx.strokeStyle = '#f00'; 17301 ctx.shadowColor = '#f00'; 17302 ctx.shadowOffsetX = 100; 17303 ctx.lineWidth = 200; 17304 ctx.lineJoin = 'miter'; 17305 ctx.miterLimit = 0.1; 17306 ctx.beginPath(); 17307 ctx.moveTo(-200, -50); 17308 ctx.lineTo(-150, -50); 17309 ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3) 17310 ctx.stroke(); 17311 17312 isPixel(ctx, 1,1, 0,255,0,255, 0); 17313 isPixel(ctx, 48,48, 0,255,0,255, 0); 17314 isPixel(ctx, 50,25, 0,255,0,255, 0); 17315 isPixel(ctx, 98,48, 0,255,0,255, 0); 17316 17317 17318 } 17319 </script> 17320 17321 <!-- [[[ test_2d.shadow.transform.1.html ]]] --> 17322 17323 <p>Canvas test: 2d.shadow.transform.1</p> 17324 <canvas id="c550" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17325 <script> 17326 17327 17328 17329 function test_2d_shadow_transform_1() { 17330 17331 var canvas = document.getElementById('c550'); 17332 var ctx = canvas.getContext('2d'); 17333 17334 ctx.fillStyle = '#f00'; 17335 ctx.fillRect(0, 0, 100, 50); 17336 ctx.shadowOffsetY = 50; 17337 ctx.shadowColor = '#0f0'; 17338 ctx.translate(100, 100); 17339 ctx.fillRect(-100, -150, 100, 50); 17340 17341 isPixel(ctx, 50,25, 0,255,0,255, 0); 17342 17343 17344 } 17345 </script> 17346 17347 <!-- [[[ test_2d.shadow.transform.2.html ]]] --> 17348 17349 <p>Canvas test: 2d.shadow.transform.2</p> 17350 <canvas id="c551" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17351 <script> 17352 17353 17354 17355 function test_2d_shadow_transform_2() { 17356 17357 var canvas = document.getElementById('c551'); 17358 var ctx = canvas.getContext('2d'); 17359 17360 ctx.fillStyle = '#f00'; 17361 ctx.fillRect(0, 0, 100, 50); 17362 ctx.shadowOffsetY = 50; 17363 ctx.shadowColor = '#0f0'; 17364 ctx.rotate(Math.PI) 17365 ctx.fillRect(-100, 0, 100, 50); 17366 17367 isPixel(ctx, 50,25, 0,255,0,255, 0); 17368 17369 17370 } 17371 </script> 17372 17373 <!-- [[[ test_2d.state.saverestore.bitmap.html ]]] --> 17374 17375 <p>Canvas test: 2d.state.saverestore.bitmap</p> 17376 <!-- Testing: save()/restore() does not affect the current bitmap --> 17377 <canvas id="c552" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17378 <script> 17379 17380 17381 function test_2d_state_saverestore_bitmap() { 17382 17383 var canvas = document.getElementById('c552'); 17384 var ctx = canvas.getContext('2d'); 17385 17386 ctx.fillStyle = '#f00'; 17387 ctx.fillRect(0, 0, 100, 50); 17388 ctx.save(); 17389 ctx.fillStyle = '#0f0'; 17390 ctx.fillRect(0, 0, 100, 50); 17391 ctx.restore(); 17392 isPixel(ctx, 50,25, 0,255,0,255, 0); 17393 17394 17395 } 17396 </script> 17397 17398 <!-- [[[ test_2d.state.saverestore.clip.html ]]] --> 17399 17400 <p>Canvas test: 2d.state.saverestore.clip</p> 17401 <!-- Testing: save()/restore() affects the clipping path --> 17402 <canvas id="c553" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17403 <script> 17404 17405 17406 function test_2d_state_saverestore_clip() { 17407 17408 var canvas = document.getElementById('c553'); 17409 var ctx = canvas.getContext('2d'); 17410 17411 ctx.fillStyle = '#f00'; 17412 ctx.fillRect(0, 0, 100, 50); 17413 ctx.save(); 17414 ctx.rect(0, 0, 1, 1); 17415 ctx.clip(); 17416 ctx.restore(); 17417 ctx.fillStyle = '#0f0'; 17418 ctx.fillRect(0, 0, 100, 50); 17419 isPixel(ctx, 50,25, 0,255,0,255, 0); 17420 17421 17422 } 17423 </script> 17424 17425 <!-- [[[ test_2d.state.saverestore.fillStyle.html ]]] --> 17426 17427 <p>Canvas test: 2d.state.saverestore.fillStyle</p> 17428 <!-- Testing: save()/restore() works for fillStyle --> 17429 <canvas id="c554" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17430 <script> 17431 17432 function test_2d_state_saverestore_fillStyle() { 17433 17434 var canvas = document.getElementById('c554'); 17435 var ctx = canvas.getContext('2d'); 17436 17437 // Test that restore() undoes any modifications 17438 var old = ctx.fillStyle; 17439 ctx.save(); 17440 ctx.fillStyle = "#ff0000"; 17441 ctx.restore(); 17442 ok(ctx.fillStyle === old, "ctx.fillStyle === old"); 17443 17444 // Also test that save() doesn't modify the values 17445 ctx.fillStyle = "#ff0000"; 17446 old = ctx.fillStyle; 17447 // we're not interested in failures caused by get(set(x)) != x (e.g. 17448 // from rounding), so compare against d instead of against "#ff0000" 17449 ctx.save(); 17450 ok(ctx.fillStyle === old, "ctx.fillStyle === old"); 17451 ctx.restore(); 17452 17453 17454 } 17455 </script> 17456 17457 <!-- [[[ test_2d.state.saverestore.globalAlpha.html ]]] --> 17458 17459 <p>Canvas test: 2d.state.saverestore.globalAlpha</p> 17460 <!-- Testing: save()/restore() works for globalAlpha --> 17461 <canvas id="c555" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17462 <script> 17463 17464 function test_2d_state_saverestore_globalAlpha() { 17465 17466 var canvas = document.getElementById('c555'); 17467 var ctx = canvas.getContext('2d'); 17468 17469 // Test that restore() undoes any modifications 17470 var old = ctx.globalAlpha; 17471 ctx.save(); 17472 ctx.globalAlpha = 0.5; 17473 ctx.restore(); 17474 ok(ctx.globalAlpha === old, "ctx.globalAlpha === old"); 17475 17476 // Also test that save() doesn't modify the values 17477 ctx.globalAlpha = 0.5; 17478 old = ctx.globalAlpha; 17479 // we're not interested in failures caused by get(set(x)) != x (e.g. 17480 // from rounding), so compare against d instead of against 0.5 17481 ctx.save(); 17482 ok(ctx.globalAlpha === old, "ctx.globalAlpha === old"); 17483 ctx.restore(); 17484 17485 17486 } 17487 </script> 17488 17489 <!-- [[[ test_2d.state.saverestore.globalCompositeOperation.html ]]] --> 17490 17491 <p>Canvas test: 2d.state.saverestore.globalCompositeOperation</p> 17492 <!-- Testing: save()/restore() works for globalCompositeOperation --> 17493 <canvas id="c556" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17494 <script> 17495 17496 function test_2d_state_saverestore_globalCompositeOperation() { 17497 17498 var canvas = document.getElementById('c556'); 17499 var ctx = canvas.getContext('2d'); 17500 17501 // Test that restore() undoes any modifications 17502 var old = ctx.globalCompositeOperation; 17503 ctx.save(); 17504 ctx.globalCompositeOperation = "copy"; 17505 ctx.restore(); 17506 ok(ctx.globalCompositeOperation === old, "ctx.globalCompositeOperation === old"); 17507 17508 // Also test that save() doesn't modify the values 17509 ctx.globalCompositeOperation = "copy"; 17510 old = ctx.globalCompositeOperation; 17511 // we're not interested in failures caused by get(set(x)) != x (e.g. 17512 // from rounding), so compare against d instead of against "copy" 17513 ctx.save(); 17514 ok(ctx.globalCompositeOperation === old, "ctx.globalCompositeOperation === old"); 17515 ctx.restore(); 17516 17517 17518 } 17519 </script> 17520 17521 <!-- [[[ test_2d.state.saverestore.lineCap.html ]]] --> 17522 17523 <p>Canvas test: 2d.state.saverestore.lineCap</p> 17524 <!-- Testing: save()/restore() works for lineCap --> 17525 <canvas id="c557" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17526 <script> 17527 17528 function test_2d_state_saverestore_lineCap() { 17529 17530 var canvas = document.getElementById('c557'); 17531 var ctx = canvas.getContext('2d'); 17532 17533 // Test that restore() undoes any modifications 17534 var old = ctx.lineCap; 17535 ctx.save(); 17536 ctx.lineCap = "round"; 17537 ctx.restore(); 17538 ok(ctx.lineCap === old, "ctx.lineCap === old"); 17539 17540 // Also test that save() doesn't modify the values 17541 ctx.lineCap = "round"; 17542 old = ctx.lineCap; 17543 // we're not interested in failures caused by get(set(x)) != x (e.g. 17544 // from rounding), so compare against d instead of against "round" 17545 ctx.save(); 17546 ok(ctx.lineCap === old, "ctx.lineCap === old"); 17547 ctx.restore(); 17548 17549 17550 } 17551 </script> 17552 17553 <!-- [[[ test_2d.state.saverestore.lineJoin.html ]]] --> 17554 17555 <p>Canvas test: 2d.state.saverestore.lineJoin</p> 17556 <!-- Testing: save()/restore() works for lineJoin --> 17557 <canvas id="c558" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17558 <script> 17559 17560 function test_2d_state_saverestore_lineJoin() { 17561 17562 var canvas = document.getElementById('c558'); 17563 var ctx = canvas.getContext('2d'); 17564 17565 // Test that restore() undoes any modifications 17566 var old = ctx.lineJoin; 17567 ctx.save(); 17568 ctx.lineJoin = "round"; 17569 ctx.restore(); 17570 ok(ctx.lineJoin === old, "ctx.lineJoin === old"); 17571 17572 // Also test that save() doesn't modify the values 17573 ctx.lineJoin = "round"; 17574 old = ctx.lineJoin; 17575 // we're not interested in failures caused by get(set(x)) != x (e.g. 17576 // from rounding), so compare against d instead of against "round" 17577 ctx.save(); 17578 ok(ctx.lineJoin === old, "ctx.lineJoin === old"); 17579 ctx.restore(); 17580 17581 17582 } 17583 </script> 17584 17585 <!-- [[[ test_2d.state.saverestore.lineWidth.html ]]] --> 17586 17587 <p>Canvas test: 2d.state.saverestore.lineWidth</p> 17588 <!-- Testing: save()/restore() works for lineWidth --> 17589 <canvas id="c559" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17590 <script> 17591 17592 function test_2d_state_saverestore_lineWidth() { 17593 17594 var canvas = document.getElementById('c559'); 17595 var ctx = canvas.getContext('2d'); 17596 17597 // Test that restore() undoes any modifications 17598 var old = ctx.lineWidth; 17599 ctx.save(); 17600 ctx.lineWidth = 0.5; 17601 ctx.restore(); 17602 ok(ctx.lineWidth === old, "ctx.lineWidth === old"); 17603 17604 // Also test that save() doesn't modify the values 17605 ctx.lineWidth = 0.5; 17606 old = ctx.lineWidth; 17607 // we're not interested in failures caused by get(set(x)) != x (e.g. 17608 // from rounding), so compare against d instead of against 0.5 17609 ctx.save(); 17610 ok(ctx.lineWidth === old, "ctx.lineWidth === old"); 17611 ctx.restore(); 17612 17613 17614 } 17615 </script> 17616 17617 <!-- [[[ test_2d.state.saverestore.miterLimit.html ]]] --> 17618 17619 <p>Canvas test: 2d.state.saverestore.miterLimit</p> 17620 <!-- Testing: save()/restore() works for miterLimit --> 17621 <canvas id="c560" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17622 <script> 17623 17624 function test_2d_state_saverestore_miterLimit() { 17625 17626 var canvas = document.getElementById('c560'); 17627 var ctx = canvas.getContext('2d'); 17628 17629 // Test that restore() undoes any modifications 17630 var old = ctx.miterLimit; 17631 ctx.save(); 17632 ctx.miterLimit = 0.5; 17633 ctx.restore(); 17634 ok(ctx.miterLimit === old, "ctx.miterLimit === old"); 17635 17636 // Also test that save() doesn't modify the values 17637 ctx.miterLimit = 0.5; 17638 old = ctx.miterLimit; 17639 // we're not interested in failures caused by get(set(x)) != x (e.g. 17640 // from rounding), so compare against d instead of against 0.5 17641 ctx.save(); 17642 ok(ctx.miterLimit === old, "ctx.miterLimit === old"); 17643 ctx.restore(); 17644 17645 17646 } 17647 </script> 17648 17649 <!-- [[[ test_2d.state.saverestore.path.html ]]] --> 17650 17651 <p>Canvas test: 2d.state.saverestore.path</p> 17652 <!-- Testing: save()/restore() does not affect the current path --> 17653 <canvas id="c561" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17654 <script> 17655 17656 17657 function test_2d_state_saverestore_path() { 17658 17659 var canvas = document.getElementById('c561'); 17660 var ctx = canvas.getContext('2d'); 17661 17662 ctx.fillStyle = '#f00'; 17663 ctx.fillRect(0, 0, 100, 50); 17664 ctx.save(); 17665 ctx.rect(0, 0, 100, 50); 17666 ctx.restore(); 17667 ctx.fillStyle = '#0f0'; 17668 ctx.fill(); 17669 isPixel(ctx, 50,25, 0,255,0,255, 0); 17670 17671 17672 } 17673 </script> 17674 17675 <!-- [[[ test_2d.state.saverestore.shadowBlur.html ]]] --> 17676 17677 <p>Canvas test: 2d.state.saverestore.shadowBlur</p> 17678 <!-- Testing: save()/restore() works for shadowBlur --> 17679 <canvas id="c562" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17680 <script> 17681 17682 function test_2d_state_saverestore_shadowBlur() { 17683 17684 var canvas = document.getElementById('c562'); 17685 var ctx = canvas.getContext('2d'); 17686 17687 // Test that restore() undoes any modifications 17688 var old = ctx.shadowBlur; 17689 ctx.save(); 17690 ctx.shadowBlur = 5; 17691 ctx.restore(); 17692 ok(ctx.shadowBlur === old, "ctx.shadowBlur === old"); 17693 17694 // Also test that save() doesn't modify the values 17695 ctx.shadowBlur = 5; 17696 old = ctx.shadowBlur; 17697 // we're not interested in failures caused by get(set(x)) != x (e.g. 17698 // from rounding), so compare against d instead of against 5 17699 ctx.save(); 17700 ok(ctx.shadowBlur === old, "ctx.shadowBlur === old"); 17701 ctx.restore(); 17702 17703 17704 } 17705 </script> 17706 17707 <!-- [[[ test_2d.state.saverestore.shadowColor.html ]]] --> 17708 17709 <p>Canvas test: 2d.state.saverestore.shadowColor</p> 17710 <!-- Testing: save()/restore() works for shadowColor --> 17711 <canvas id="c563" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17712 <script> 17713 17714 function test_2d_state_saverestore_shadowColor() { 17715 17716 var canvas = document.getElementById('c563'); 17717 var ctx = canvas.getContext('2d'); 17718 17719 // Test that restore() undoes any modifications 17720 var old = ctx.shadowColor; 17721 ctx.save(); 17722 ctx.shadowColor = "#ff0000"; 17723 ctx.restore(); 17724 ok(ctx.shadowColor === old, "ctx.shadowColor === old"); 17725 17726 // Also test that save() doesn't modify the values 17727 ctx.shadowColor = "#ff0000"; 17728 old = ctx.shadowColor; 17729 // we're not interested in failures caused by get(set(x)) != x (e.g. 17730 // from rounding), so compare against d instead of against "#ff0000" 17731 ctx.save(); 17732 ok(ctx.shadowColor === old, "ctx.shadowColor === old"); 17733 ctx.restore(); 17734 17735 17736 } 17737 </script> 17738 17739 <!-- [[[ test_2d.state.saverestore.shadowOffsetX.html ]]] --> 17740 17741 <p>Canvas test: 2d.state.saverestore.shadowOffsetX</p> 17742 <!-- Testing: save()/restore() works for shadowOffsetX --> 17743 <canvas id="c564" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17744 <script> 17745 17746 function test_2d_state_saverestore_shadowOffsetX() { 17747 17748 var canvas = document.getElementById('c564'); 17749 var ctx = canvas.getContext('2d'); 17750 17751 // Test that restore() undoes any modifications 17752 var old = ctx.shadowOffsetX; 17753 ctx.save(); 17754 ctx.shadowOffsetX = 5; 17755 ctx.restore(); 17756 ok(ctx.shadowOffsetX === old, "ctx.shadowOffsetX === old"); 17757 17758 // Also test that save() doesn't modify the values 17759 ctx.shadowOffsetX = 5; 17760 old = ctx.shadowOffsetX; 17761 // we're not interested in failures caused by get(set(x)) != x (e.g. 17762 // from rounding), so compare against d instead of against 5 17763 ctx.save(); 17764 ok(ctx.shadowOffsetX === old, "ctx.shadowOffsetX === old"); 17765 ctx.restore(); 17766 17767 17768 } 17769 </script> 17770 17771 <!-- [[[ test_2d.state.saverestore.shadowOffsetY.html ]]] --> 17772 17773 <p>Canvas test: 2d.state.saverestore.shadowOffsetY</p> 17774 <!-- Testing: save()/restore() works for shadowOffsetY --> 17775 <canvas id="c565" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17776 <script> 17777 17778 function test_2d_state_saverestore_shadowOffsetY() { 17779 17780 var canvas = document.getElementById('c565'); 17781 var ctx = canvas.getContext('2d'); 17782 17783 // Test that restore() undoes any modifications 17784 var old = ctx.shadowOffsetY; 17785 ctx.save(); 17786 ctx.shadowOffsetY = 5; 17787 ctx.restore(); 17788 ok(ctx.shadowOffsetY === old, "ctx.shadowOffsetY === old"); 17789 17790 // Also test that save() doesn't modify the values 17791 ctx.shadowOffsetY = 5; 17792 old = ctx.shadowOffsetY; 17793 // we're not interested in failures caused by get(set(x)) != x (e.g. 17794 // from rounding), so compare against d instead of against 5 17795 ctx.save(); 17796 ok(ctx.shadowOffsetY === old, "ctx.shadowOffsetY === old"); 17797 ctx.restore(); 17798 17799 17800 } 17801 </script> 17802 17803 <!-- [[[ test_2d.state.saverestore.stack.html ]]] --> 17804 17805 <p>Canvas test: 2d.state.saverestore.stack</p> 17806 <!-- Testing: save()/restore() can be nested as a stack --> 17807 <canvas id="c566" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17808 <script> 17809 17810 function test_2d_state_saverestore_stack() { 17811 17812 var canvas = document.getElementById('c566'); 17813 var ctx = canvas.getContext('2d'); 17814 17815 ctx.lineWidth = 1; 17816 ctx.save(); 17817 ctx.lineWidth = 2; 17818 ctx.save(); 17819 ctx.lineWidth = 3; 17820 ok(ctx.lineWidth == 3, "ctx.lineWidth == 3"); 17821 ctx.restore(); 17822 ok(ctx.lineWidth == 2, "ctx.lineWidth == 2"); 17823 ctx.restore(); 17824 ok(ctx.lineWidth == 1, "ctx.lineWidth == 1"); 17825 17826 17827 } 17828 </script> 17829 17830 <!-- [[[ test_2d.state.saverestore.stackdepth.html ]]] --> 17831 17832 <p>Canvas test: 2d.state.saverestore.stackdepth</p> 17833 <!-- Testing: save()/restore() stack depth is not unreasonably limited --> 17834 <canvas id="c567" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17835 <script> 17836 17837 function test_2d_state_saverestore_stackdepth() { 17838 17839 var canvas = document.getElementById('c567'); 17840 var ctx = canvas.getContext('2d'); 17841 17842 var limit = 512; 17843 for (var i = 1; i < limit; ++i) 17844 { 17845 ctx.save(); 17846 ctx.lineWidth = i; 17847 } 17848 for (var i = limit-1; i > 0; --i) 17849 { 17850 ok(ctx.lineWidth == i, "ctx.lineWidth == i"); 17851 ctx.restore(); 17852 } 17853 17854 17855 } 17856 </script> 17857 17858 <!-- [[[ test_2d.state.saverestore.strokeStyle.html ]]] --> 17859 17860 <p>Canvas test: 2d.state.saverestore.strokeStyle</p> 17861 <!-- Testing: save()/restore() works for strokeStyle --> 17862 <canvas id="c568" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17863 <script> 17864 17865 function test_2d_state_saverestore_strokeStyle() { 17866 17867 var canvas = document.getElementById('c568'); 17868 var ctx = canvas.getContext('2d'); 17869 17870 // Test that restore() undoes any modifications 17871 var old = ctx.strokeStyle; 17872 ctx.save(); 17873 ctx.strokeStyle = "#ff0000"; 17874 ctx.restore(); 17875 ok(ctx.strokeStyle === old, "ctx.strokeStyle === old"); 17876 17877 // Also test that save() doesn't modify the values 17878 ctx.strokeStyle = "#ff0000"; 17879 old = ctx.strokeStyle; 17880 // we're not interested in failures caused by get(set(x)) != x (e.g. 17881 // from rounding), so compare against d instead of against "#ff0000" 17882 ctx.save(); 17883 ok(ctx.strokeStyle === old, "ctx.strokeStyle === old"); 17884 ctx.restore(); 17885 17886 17887 } 17888 </script> 17889 17890 <!-- [[[ test_2d.state.saverestore.transformation.html ]]] --> 17891 17892 <p>Canvas test: 2d.state.saverestore.transformation</p> 17893 <!-- Testing: save()/restore() affects the current transformation matrix --> 17894 <canvas id="c569" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17895 <script> 17896 17897 17898 function test_2d_state_saverestore_transformation() { 17899 17900 var canvas = document.getElementById('c569'); 17901 var ctx = canvas.getContext('2d'); 17902 17903 ctx.fillStyle = '#0f0'; 17904 ctx.fillRect(0, 0, 100, 50); 17905 ctx.save(); 17906 ctx.translate(200, 0); 17907 ctx.restore(); 17908 ctx.fillStyle = '#f00'; 17909 ctx.fillRect(-200, 0, 100, 50); 17910 isPixel(ctx, 50,25, 0,255,0,255, 0); 17911 17912 17913 } 17914 </script> 17915 17916 <!-- [[[ test_2d.state.saverestore.underflow.html ]]] --> 17917 17918 <p>Canvas test: 2d.state.saverestore.underflow - bug 296821</p> 17919 <!-- Testing: restore() with an empty stack has no effect --> 17920 <canvas id="c570" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17921 <script> 17922 17923 function test_2d_state_saverestore_underflow() { 17924 17925 var canvas = document.getElementById('c570'); 17926 var ctx = canvas.getContext('2d'); 17927 17928 for (var i = 0; i < 16; ++i) 17929 ctx.restore(); 17930 ctx.lineWidth = 0.5; 17931 ctx.restore(); 17932 ok(ctx.lineWidth == 0.5, "ctx.lineWidth == 0.5"); 17933 17934 17935 } 17936 </script> 17937 17938 <!-- [[[ test_2d.strokeRect.basic.html ]]] --> 17939 17940 <p>Canvas test: 2d.strokeRect.basic</p> 17941 <canvas id="c571" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 17942 <script> 17943 17944 17945 function test_2d_strokeRect_basic() { 17946 17947 var canvas = document.getElementById('c571'); 17948 var ctx = canvas.getContext('2d'); 17949 17950 ctx.strokeStyle = '#0f0'; 17951 ctx.lineWidth = 50; 17952 ctx.strokeRect(25, 24, 50, 2); 17953 isPixel(ctx, 50,25, 0,255,0,255, 0); 17954 17955 17956 } 17957 </script> 17958 17959 <!-- [[[ test_2d.strokeRect.clip.html ]]] --> 17960 17961 <p>Canvas test: 2d.strokeRect.clip</p> 17962 <canvas id="c572" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 17963 <script> 17964 17965 17966 function test_2d_strokeRect_clip() { 17967 17968 var canvas = document.getElementById('c572'); 17969 var ctx = canvas.getContext('2d'); 17970 17971 ctx.fillStyle = '#0f0'; 17972 ctx.fillRect(0, 0, 100, 50); 17973 17974 ctx.beginPath(); 17975 ctx.rect(0, 0, 16, 16); 17976 ctx.clip(); 17977 17978 ctx.strokeStyle = '#f00'; 17979 ctx.lineWidth = 50; 17980 ctx.strokeRect(0, 0, 100, 50); 17981 17982 ctx.fillStyle = '#0f0'; 17983 ctx.fillRect(0, 0, 16, 16); 17984 17985 isPixel(ctx, 50,25, 0,255,0,255, 0); 17986 17987 17988 } 17989 </script> 17990 17991 <!-- [[[ test_2d.strokeRect.globalalpha.html ]]] --> 17992 17993 <p>Canvas test: 2d.strokeRect.globalalpha</p> 17994 <canvas id="c573" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 17995 <script> 17996 17997 17998 function test_2d_strokeRect_globalalpha() { 17999 18000 var canvas = document.getElementById('c573'); 18001 var ctx = canvas.getContext('2d'); 18002 18003 ctx.globalAlpha = 0; 18004 ctx.strokeStyle = '#f00'; 18005 ctx.lineWidth = 50; 18006 ctx.strokeRect(25, 24, 50, 2); 18007 isPixel(ctx, 50,25, 0,0,0,0, 0); 18008 18009 18010 } 18011 </script> 18012 18013 <!-- [[[ test_2d.strokeRect.globalcomposite.html ]]] --> 18014 18015 <p>Canvas test: 2d.strokeRect.globalcomposite</p> 18016 <canvas id="c574" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 18017 <script> 18018 18019 18020 function test_2d_strokeRect_globalcomposite() { 18021 18022 var canvas = document.getElementById('c574'); 18023 var ctx = canvas.getContext('2d'); 18024 18025 ctx.globalCompositeOperation = 'source-in'; 18026 ctx.strokeStyle = '#f00'; 18027 ctx.lineWidth = 50; 18028 ctx.strokeRect(25, 24, 50, 2); 18029 isPixel(ctx, 50,25, 0,0,0,0, 0); 18030 18031 18032 } 18033 </script> 18034 18035 <!-- [[[ test_2d.strokeRect.negative.html ]]] --> 18036 18037 <p>Canvas test: 2d.strokeRect.negative</p> 18038 <canvas id="c575" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18039 <script> 18040 18041 18042 function test_2d_strokeRect_negative() { 18043 18044 var canvas = document.getElementById('c575'); 18045 var ctx = canvas.getContext('2d'); 18046 18047 ctx.fillStyle = '#f00'; 18048 ctx.fillRect(0, 0, 100, 50); 18049 ctx.strokeStyle = '#0f0'; 18050 ctx.lineWidth = 25; 18051 ctx.strokeRect(12, 12, 26, 1); 18052 ctx.strokeRect(88, 12, -26, 1); 18053 ctx.strokeRect(12, 38, 26, -1); 18054 ctx.strokeRect(88, 38, -26, -1); 18055 isPixel(ctx, 25,12, 0,255,0,255, 0); 18056 isPixel(ctx, 75,12, 0,255,0,255, 0); 18057 isPixel(ctx, 25,37, 0,255,0,255, 0); 18058 isPixel(ctx, 75,37, 0,255,0,255, 0); 18059 18060 18061 } 18062 </script> 18063 18064 <!-- [[[ test_2d.strokeRect.nonfinite.html ]]] --> 18065 18066 <p>Canvas test: 2d.strokeRect.nonfinite</p> 18067 <!-- Testing: strokeRect() with Infinity/NaN is ignored --> 18068 <canvas id="c576" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18069 <script> 18070 18071 18072 function test_2d_strokeRect_nonfinite() { 18073 18074 var canvas = document.getElementById('c576'); 18075 var ctx = canvas.getContext('2d'); 18076 18077 var _thrown_outer = false; 18078 try { 18079 18080 ctx.fillStyle = '#0f0'; 18081 ctx.fillRect(0, 0, 100, 50); 18082 18083 ctx.strokeStyle = '#f00'; 18084 ctx.lineWidth = 150; 18085 ctx.strokeRect(Infinity, 0, 100, 50); 18086 ctx.strokeRect(-Infinity, 0, 100, 50); 18087 ctx.strokeRect(NaN, 0, 100, 50); 18088 ctx.strokeRect(0, Infinity, 100, 50); 18089 ctx.strokeRect(0, -Infinity, 100, 50); 18090 ctx.strokeRect(0, NaN, 100, 50); 18091 ctx.strokeRect(0, 0, Infinity, 50); 18092 ctx.strokeRect(0, 0, -Infinity, 50); 18093 ctx.strokeRect(0, 0, NaN, 50); 18094 ctx.strokeRect(0, 0, 100, Infinity); 18095 ctx.strokeRect(0, 0, 100, -Infinity); 18096 ctx.strokeRect(0, 0, 100, NaN); 18097 ctx.strokeRect(Infinity, Infinity, 100, 50); 18098 ctx.strokeRect(Infinity, Infinity, Infinity, 50); 18099 ctx.strokeRect(Infinity, Infinity, Infinity, Infinity); 18100 ctx.strokeRect(Infinity, Infinity, 100, Infinity); 18101 ctx.strokeRect(Infinity, 0, Infinity, 50); 18102 ctx.strokeRect(Infinity, 0, Infinity, Infinity); 18103 ctx.strokeRect(Infinity, 0, 100, Infinity); 18104 ctx.strokeRect(0, Infinity, Infinity, 50); 18105 ctx.strokeRect(0, Infinity, Infinity, Infinity); 18106 ctx.strokeRect(0, Infinity, 100, Infinity); 18107 ctx.strokeRect(0, 0, Infinity, Infinity); 18108 18109 isPixel(ctx, 50,25, 0,255,0,255, 0); 18110 18111 } catch (e) { 18112 _thrown_outer = true; 18113 } 18114 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 18115 18116 18117 } 18118 </script> 18119 18120 <!-- [[[ test_2d.strokeRect.path.html ]]] --> 18121 18122 <p>Canvas test: 2d.strokeRect.path</p> 18123 <canvas id="c577" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 18124 <script> 18125 18126 18127 function test_2d_strokeRect_path() { 18128 18129 var canvas = document.getElementById('c577'); 18130 var ctx = canvas.getContext('2d'); 18131 18132 ctx.beginPath(); 18133 ctx.rect(0, 0, 100, 50); 18134 ctx.strokeStyle = '#f00'; 18135 ctx.lineWidth = 5; 18136 ctx.strokeRect(0, 0, 16, 16); 18137 ctx.fillStyle = '#0f0'; 18138 ctx.fill(); 18139 isPixel(ctx, 50,25, 0,255,0,255, 0); 18140 18141 18142 } 18143 </script> 18144 18145 <!-- [[[ test_2d.strokeRect.shadow.html ]]] --> 18146 18147 <p>Canvas test: 2d.strokeRect.shadow</p> 18148 <canvas id="c578" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18149 <script> 18150 18151 18152 function test_2d_strokeRect_shadow() { 18153 18154 var canvas = document.getElementById('c578'); 18155 var ctx = canvas.getContext('2d'); 18156 18157 ctx.fillStyle = '#0f0'; 18158 ctx.fillRect(0, 0, 100, 50); 18159 18160 ctx.fillStyle = '#f00'; 18161 ctx.shadowBlur = 0; 18162 ctx.shadowOffsetX = 0; 18163 ctx.shadowOffsetY = 50; 18164 18165 // Shadows are optional, so just test that if they apply to fill() then they apply to strokeRect() too 18166 ctx.beginPath(); 18167 ctx.rect(0, -50, 100, 50); 18168 ctx.shadowColor = '#f00'; 18169 ctx.fill(); 18170 18171 ctx.shadowColor = '#0f0'; 18172 ctx.strokeStyle = '#f00'; 18173 ctx.lineWidth = 50; 18174 ctx.strokeRect(0, -75, 100, 50); 18175 18176 isPixel(ctx, 50,25, 0,255,0,255, 0); 18177 18178 18179 } 18180 </script> 18181 18182 <!-- [[[ test_2d.strokeRect.transform.html ]]] --> 18183 18184 <p>Canvas test: 2d.strokeRect.transform</p> 18185 <canvas id="c579" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 18186 <script> 18187 18188 18189 function test_2d_strokeRect_transform() { 18190 18191 var canvas = document.getElementById('c579'); 18192 var ctx = canvas.getContext('2d'); 18193 18194 ctx.scale(10, 10); 18195 ctx.translate(0, 5); 18196 ctx.strokeStyle = '#0f0'; 18197 ctx.lineWidth = 5; 18198 ctx.strokeRect(2.5, -2.6, 5, 0.2); 18199 isPixel(ctx, 50,25, 0,255,0,255, 0); 18200 18201 18202 } 18203 </script> 18204 18205 <!-- [[[ test_2d.strokeRect.zero.1.html ]]] --> 18206 18207 <p>Canvas test: 2d.strokeRect.zero.1</p> 18208 <canvas id="c580" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 18209 <script> 18210 18211 18212 function test_2d_strokeRect_zero_1() { 18213 18214 var canvas = document.getElementById('c580'); 18215 var ctx = canvas.getContext('2d'); 18216 18217 ctx.strokeStyle = '#f00'; 18218 ctx.lineWidth = 250; 18219 ctx.strokeRect(50, 25, 0, 0); 18220 isPixel(ctx, 50,25, 0,0,0,0, 0); 18221 } 18222 </script> 18223 18224 <!-- [[[ test_2d.strokeRect.zero.2.html ]]] --> 18225 18226 <p>Canvas test: 2d.strokeRect.zero.2</p> 18227 <canvas id="c581" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 18228 <script> 18229 18230 18231 18232 function test_2d_strokeRect_zero_2() { 18233 18234 var canvas = document.getElementById('c581'); 18235 var ctx = canvas.getContext('2d'); 18236 18237 ctx.strokeStyle = '#f00'; 18238 ctx.lineWidth = 250; 18239 ctx.lineCap = 'round'; 18240 ctx.lineJoin = 'round'; 18241 ctx.strokeRect(50, 25, 0, 0); 18242 isPixel(ctx, 50,25, 0,0,0,0, 0); 18243 18244 18245 } 18246 </script> 18247 18248 <!-- [[[ test_2d.strokeRect.zero.3.html ]]] --> 18249 18250 <p>Canvas test: 2d.strokeRect.zero.3</p> 18251 <canvas id="c582" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 18252 <script> 18253 18254 18255 function test_2d_strokeRect_zero_3() { 18256 18257 var canvas = document.getElementById('c582'); 18258 var ctx = canvas.getContext('2d'); 18259 18260 ctx.strokeStyle = '#0f0'; 18261 ctx.lineWidth = 50; 18262 ctx.strokeRect(0, 25, 100, 0); 18263 isPixel(ctx, 50,25, 0,255,0,255, 0); 18264 18265 18266 } 18267 </script> 18268 18269 <!-- [[[ test_2d.strokeRect.zero.4.html ]]] --> 18270 18271 <p>Canvas test: 2d.strokeRect.zero.4</p> 18272 <canvas id="c583" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 18273 <script> 18274 18275 18276 function test_2d_strokeRect_zero_4() { 18277 18278 var canvas = document.getElementById('c583'); 18279 var ctx = canvas.getContext('2d'); 18280 18281 ctx.strokeStyle = '#f00'; 18282 ctx.lineWidth = 250; 18283 ctx.lineCap = 'round'; 18284 ctx.strokeRect(100, 25, 100, 0); 18285 isPixel(ctx, 50,25, 0,0,0,0, 0); 18286 18287 18288 } 18289 </script> 18290 18291 <!-- [[[ test_2d.strokeRect.zero.5.html ]]] --> 18292 18293 <p>Canvas test: 2d.strokeRect.zero.5</p> 18294 <canvas id="c584" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 18295 <script> 18296 18297 18298 function test_2d_strokeRect_zero_5() { 18299 18300 var canvas = document.getElementById('c584'); 18301 var ctx = canvas.getContext('2d'); 18302 18303 ctx.strokeStyle = '#0f0'; 18304 ctx.lineWidth = 250; 18305 ctx.lineJoin = 'round'; 18306 ctx.strokeRect(100, 25, 100, 0); 18307 isPixel(ctx, 50,25, 0,255,0,255, 0); 18308 18309 18310 } 18311 </script> 18312 18313 <!-- [[[ test_2d.strokeStyle.default.html ]]] --> 18314 18315 <p>Canvas test: 2d.strokeStyle.default</p> 18316 <canvas id="c585" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18317 <script> 18318 18319 function test_2d_strokeStyle_default() { 18320 18321 var canvas = document.getElementById('c585'); 18322 var ctx = canvas.getContext('2d'); 18323 18324 ok(ctx.strokeStyle == '#000000', "ctx.strokeStyle == '#000000'"); 18325 18326 18327 } 18328 </script> 18329 18330 <!-- [[[ test_2d.text.align.default.html ]]] --> 18331 18332 <p>Canvas test: 2d.text.align.default</p> 18333 <canvas height="50" id="c569a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas> 18334 <script> 18335 18336 function test_2d_text_align_default() { 18337 18338 var canvas = document.getElementById('c569a'); 18339 var ctx = canvas.getContext('2d'); 18340 18341 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'"); 18342 18343 18344 } 18345 </script> 18346 18347 <!-- [[[ test_2d.text.align.invalid.html ]]] --> 18348 18349 <p>Canvas test: 2d.text.align.invalid</p> 18350 <canvas height="50" id="c570a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas> 18351 <script> 18352 18353 function test_2d_text_align_invalid() { 18354 18355 var canvas = document.getElementById('c570a'); 18356 var ctx = canvas.getContext('2d'); 18357 18358 ctx.textAlign = 'start'; 18359 ctx.textAlign = 'bogus'; 18360 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'"); 18361 18362 ctx.textAlign = 'start'; 18363 ctx.textAlign = 'END'; 18364 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'"); 18365 18366 ctx.textAlign = 'start'; 18367 ctx.textAlign = 'end '; 18368 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'"); 18369 18370 ctx.textAlign = 'start'; 18371 ctx.textAlign = 'end\0'; 18372 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'"); 18373 18374 18375 } 18376 </script> 18377 18378 <!-- [[[ test_2d.text.baseline.default.html ]]] --> 18379 18380 <p>Canvas test: 2d.text.baseline.default</p> 18381 <canvas height="50" id="c572a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas> 18382 <script> 18383 18384 function test_2d_text_baseline_default() { 18385 18386 var canvas = document.getElementById('c572a'); 18387 var ctx = canvas.getContext('2d'); 18388 18389 ok(ctx.textBaseline === 'alphabetic', "ctx.textBaseline === 'alphabetic'"); 18390 18391 18392 } 18393 </script> 18394 18395 <!-- [[[ test_2d.text.baseline.invalid.html ]]] --> 18396 18397 <p>Canvas test: 2d.text.baseline.invalid</p> 18398 <canvas height="50" id="c573a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas> 18399 <script> 18400 18401 function test_2d_text_baseline_invalid() { 18402 18403 var canvas = document.getElementById('c573a'); 18404 var ctx = canvas.getContext('2d'); 18405 18406 ctx.textBaseline = 'top'; 18407 ctx.textBaseline = 'bogus'; 18408 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'"); 18409 18410 ctx.textBaseline = 'top'; 18411 ctx.textBaseline = 'MIDDLE'; 18412 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'"); 18413 18414 ctx.textBaseline = 'top'; 18415 ctx.textBaseline = 'middle '; 18416 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'"); 18417 18418 ctx.textBaseline = 'top'; 18419 ctx.textBaseline = 'middle\0'; 18420 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'"); 18421 18422 18423 } 18424 </script> 18425 18426 <!-- [[[ test_2d.transformation.order.html ]]] --> 18427 18428 <p>Canvas test: 2d.transformation.order</p> 18429 <!-- Testing: Transformations are applied in the right order --> 18430 <canvas id="c586" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18431 <script> 18432 18433 18434 function test_2d_transformation_order() { 18435 18436 var canvas = document.getElementById('c586'); 18437 var ctx = canvas.getContext('2d'); 18438 18439 ctx.fillStyle = '#f00'; 18440 ctx.fillRect(0, 0, 100, 50); 18441 18442 ctx.scale(2, 1); 18443 ctx.rotate(Math.PI / 2); 18444 ctx.fillStyle = '#0f0'; 18445 ctx.fillRect(0, -50, 50, 50); 18446 isPixel(ctx, 75,25, 0,255,0,255, 0); 18447 18448 18449 } 18450 </script> 18451 18452 <!-- [[[ test_2d.transformation.rotate.direction.html ]]] --> 18453 18454 <p>Canvas test: 2d.transformation.rotate.direction</p> 18455 <!-- Testing: rotate() is clockwise --> 18456 <canvas id="c587" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18457 <script> 18458 18459 18460 function test_2d_transformation_rotate_direction() { 18461 18462 var canvas = document.getElementById('c587'); 18463 var ctx = canvas.getContext('2d'); 18464 18465 ctx.fillStyle = '#f00'; 18466 ctx.fillRect(0, 0, 100, 50); 18467 18468 ctx.rotate(Math.PI / 2); 18469 ctx.fillStyle = '#0f0'; 18470 ctx.fillRect(0, -100, 50, 100); 18471 isPixel(ctx, 50,25, 0,255,0,255, 0); 18472 18473 18474 } 18475 </script> 18476 18477 <!-- [[[ test_2d.transformation.rotate.nonfinite.html ]]] --> 18478 18479 <p>Canvas test: 2d.transformation.rotate.nonfinite</p> 18480 <!-- Testing: rotate() with Infinity/NaN is ignored --> 18481 <canvas id="c588" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18482 <script> 18483 18484 18485 function test_2d_transformation_rotate_nonfinite() { 18486 18487 var canvas = document.getElementById('c588'); 18488 var ctx = canvas.getContext('2d'); 18489 18490 var _thrown_outer = false; 18491 try { 18492 18493 ctx.fillStyle = '#f00'; 18494 ctx.fillRect(0, 0, 100, 50); 18495 18496 ctx.translate(100, 10); 18497 ctx.rotate(Infinity); 18498 ctx.rotate(-Infinity); 18499 ctx.rotate(NaN); 18500 18501 ctx.fillStyle = '#0f0'; 18502 ctx.fillRect(-100, -10, 100, 50); 18503 18504 isPixel(ctx, 50,25, 0,255,0,255, 0); 18505 18506 } catch (e) { 18507 _thrown_outer = true; 18508 } 18509 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 18510 18511 18512 } 18513 </script> 18514 18515 <!-- [[[ test_2d.transformation.rotate.radians.html ]]] --> 18516 18517 <p>Canvas test: 2d.transformation.rotate.radians</p> 18518 <!-- Testing: rotate() uses radians --> 18519 <canvas id="c589" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18520 <script> 18521 18522 18523 function test_2d_transformation_rotate_radians() { 18524 18525 var canvas = document.getElementById('c589'); 18526 var ctx = canvas.getContext('2d'); 18527 18528 ctx.fillStyle = '#f00'; 18529 ctx.fillRect(0, 0, 100, 50); 18530 18531 ctx.rotate(Math.PI); // should fail obviously if this is 3.1 degrees 18532 ctx.fillStyle = '#0f0'; 18533 ctx.fillRect(-100, -50, 100, 50); 18534 isPixel(ctx, 50,25, 0,255,0,255, 0); 18535 18536 18537 } 18538 </script> 18539 18540 <!-- [[[ test_2d.transformation.rotate.wrap.html ]]] --> 18541 18542 <p>Canvas test: 2d.transformation.rotate.wrap</p> 18543 <!-- Testing: rotate() wraps large positive values correctly --> 18544 <canvas id="c590" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18545 <script> 18546 18547 18548 function test_2d_transformation_rotate_wrap() { 18549 18550 var canvas = document.getElementById('c590'); 18551 var ctx = canvas.getContext('2d'); 18552 18553 ctx.fillStyle = '#f00'; 18554 ctx.fillRect(0, 0, 100, 50); 18555 18556 ctx.rotate(Math.PI * (1 + 4096)); // == pi (mod 2*pi) 18557 // We need about pi +/- 0.001 in order to get correct-looking results 18558 // 32-bit floats can store pi*4097 with precision 2^-10, so that should 18559 // be safe enough on reasonable implementations 18560 ctx.fillStyle = '#0f0'; 18561 ctx.fillRect(-100, -50, 100, 50); 18562 isPixel(ctx, 50,25, 0,255,0,255, 0); 18563 isPixel(ctx, 98,2, 0,255,0,255, 0); 18564 isPixel(ctx, 98,47, 0,255,0,255, 0); 18565 18566 18567 } 18568 </script> 18569 18570 <!-- [[[ test_2d.transformation.rotate.wrapnegative.html ]]] --> 18571 18572 <p>Canvas test: 2d.transformation.rotate.wrapnegative</p> 18573 <!-- Testing: rotate() wraps large negative values correctly --> 18574 <canvas id="c591" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18575 <script> 18576 18577 18578 function test_2d_transformation_rotate_wrapnegative() { 18579 18580 var canvas = document.getElementById('c591'); 18581 var ctx = canvas.getContext('2d'); 18582 18583 ctx.fillStyle = '#f00'; 18584 ctx.fillRect(0, 0, 100, 50); 18585 18586 ctx.rotate(-Math.PI * (1 + 4096)); 18587 ctx.fillStyle = '#0f0'; 18588 ctx.fillRect(-100, -50, 100, 50); 18589 isPixel(ctx, 50,25, 0,255,0,255, 0); 18590 isPixel(ctx, 98,2, 0,255,0,255, 0); 18591 isPixel(ctx, 98,47, 0,255,0,255, 0); 18592 18593 18594 } 18595 </script> 18596 18597 <!-- [[[ test_2d.transformation.rotate.zero.html ]]] --> 18598 18599 <p>Canvas test: 2d.transformation.rotate.zero</p> 18600 <!-- Testing: rotate() by 0 does nothing --> 18601 <canvas id="c592" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18602 <script> 18603 18604 18605 function test_2d_transformation_rotate_zero() { 18606 18607 var canvas = document.getElementById('c592'); 18608 var ctx = canvas.getContext('2d'); 18609 18610 ctx.fillStyle = '#f00'; 18611 ctx.fillRect(0, 0, 100, 50); 18612 18613 ctx.rotate(0); 18614 ctx.fillStyle = '#0f0'; 18615 ctx.fillRect(0, 0, 100, 50); 18616 isPixel(ctx, 50,25, 0,255,0,255, 0); 18617 18618 18619 } 18620 </script> 18621 18622 <!-- [[[ test_2d.transformation.scale.basic.html ]]] --> 18623 18624 <p>Canvas test: 2d.transformation.scale.basic</p> 18625 <!-- Testing: scale() works --> 18626 <canvas id="c593" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18627 <script> 18628 18629 18630 function test_2d_transformation_scale_basic() { 18631 18632 var canvas = document.getElementById('c593'); 18633 var ctx = canvas.getContext('2d'); 18634 18635 ctx.fillStyle = '#f00'; 18636 ctx.fillRect(0, 0, 100, 50); 18637 18638 ctx.scale(2, 4); 18639 ctx.fillStyle = '#0f0'; 18640 ctx.fillRect(0, 0, 50, 12.5); 18641 isPixel(ctx, 90,40, 0,255,0,255, 0); 18642 18643 18644 } 18645 </script> 18646 18647 <!-- [[[ test_2d.transformation.scale.large.html ]]] --> 18648 18649 <p>Canvas test: 2d.transformation.scale.large</p> 18650 <!-- Testing: scale() with large scale factors works --> 18651 <canvas id="c594" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18652 <script> 18653 18654 18655 function test_2d_transformation_scale_large() { 18656 18657 var canvas = document.getElementById('c594'); 18658 var ctx = canvas.getContext('2d'); 18659 18660 ctx.fillStyle = '#f00'; 18661 ctx.fillRect(0, 0, 100, 50); 18662 18663 ctx.scale(1e5, 1e5); 18664 ctx.fillStyle = '#0f0'; 18665 ctx.fillRect(0, 0, 1, 1); 18666 isPixel(ctx, 50,25, 0,255,0,255, 0); 18667 18668 18669 } 18670 </script> 18671 18672 <!-- [[[ test_2d.transformation.scale.multiple.html ]]] --> 18673 18674 <p>Canvas test: 2d.transformation.scale.multiple</p> 18675 <!-- Testing: Multiple scale()s combine --> 18676 <canvas id="c595" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18677 <script> 18678 18679 18680 function test_2d_transformation_scale_multiple() { 18681 18682 var canvas = document.getElementById('c595'); 18683 var ctx = canvas.getContext('2d'); 18684 18685 ctx.fillStyle = '#f00'; 18686 ctx.fillRect(0, 0, 100, 50); 18687 18688 ctx.scale(Math.sqrt(2), Math.sqrt(2)); 18689 ctx.scale(Math.sqrt(2), Math.sqrt(2)); 18690 ctx.fillStyle = '#0f0'; 18691 ctx.fillRect(0, 0, 50, 25); 18692 isPixel(ctx, 90,40, 0,255,0,255, 0); 18693 18694 18695 } 18696 </script> 18697 18698 <!-- [[[ test_2d.transformation.scale.negative.html ]]] --> 18699 18700 <p>Canvas test: 2d.transformation.scale.negative</p> 18701 <!-- Testing: scale() with negative scale factors works --> 18702 <canvas id="c596" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18703 <script> 18704 18705 18706 function test_2d_transformation_scale_negative() { 18707 18708 var canvas = document.getElementById('c596'); 18709 var ctx = canvas.getContext('2d'); 18710 18711 ctx.fillStyle = '#f00'; 18712 ctx.fillRect(0, 0, 100, 50); 18713 18714 ctx.save(); 18715 ctx.scale(-1, 1); 18716 ctx.fillStyle = '#0f0'; 18717 ctx.fillRect(-50, 0, 50, 50); 18718 ctx.restore(); 18719 18720 ctx.save(); 18721 ctx.scale(1, -1); 18722 ctx.fillStyle = '#0f0'; 18723 ctx.fillRect(50, -50, 50, 50); 18724 ctx.restore(); 18725 isPixel(ctx, 25,25, 0,255,0,255, 0); 18726 isPixel(ctx, 75,25, 0,255,0,255, 0); 18727 18728 18729 } 18730 </script> 18731 18732 <!-- [[[ test_2d.transformation.scale.nonfinite.html ]]] --> 18733 18734 <p>Canvas test: 2d.transformation.scale.nonfinite</p> 18735 <!-- Testing: scale() with Infinity/NaN is ignored --> 18736 <canvas id="c597" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18737 <script> 18738 18739 18740 function test_2d_transformation_scale_nonfinite() { 18741 18742 var canvas = document.getElementById('c597'); 18743 var ctx = canvas.getContext('2d'); 18744 18745 var _thrown_outer = false; 18746 try { 18747 18748 ctx.fillStyle = '#f00'; 18749 ctx.fillRect(0, 0, 100, 50); 18750 18751 ctx.translate(100, 10); 18752 ctx.scale(Infinity, 0.1); 18753 ctx.scale(-Infinity, 0.1); 18754 ctx.scale(NaN, 0.1); 18755 ctx.scale(0.1, Infinity); 18756 ctx.scale(0.1, -Infinity); 18757 ctx.scale(0.1, NaN); 18758 ctx.scale(Infinity, Infinity); 18759 18760 ctx.fillStyle = '#0f0'; 18761 ctx.fillRect(-100, -10, 100, 50); 18762 18763 isPixel(ctx, 50,25, 0,255,0,255, 0); 18764 18765 } catch (e) { 18766 _thrown_outer = true; 18767 } 18768 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 18769 18770 18771 } 18772 </script> 18773 18774 <!-- [[[ test_2d.transformation.scale.zero.html ]]] --> 18775 18776 <p>Canvas test: 2d.transformation.scale.zero</p> 18777 <!-- Testing: scale() with a scale factor of zero works --> 18778 <canvas id="c598" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18779 <script> 18780 18781 18782 function test_2d_transformation_scale_zero() { 18783 18784 var canvas = document.getElementById('c598'); 18785 var ctx = canvas.getContext('2d'); 18786 18787 ctx.fillStyle = '#0f0'; 18788 ctx.fillRect(0, 0, 100, 50); 18789 18790 ctx.save(); 18791 ctx.translate(50, 0); 18792 ctx.scale(0, 1); 18793 ctx.fillStyle = '#f00'; 18794 ctx.fillRect(0, 0, 100, 50); 18795 ctx.restore(); 18796 18797 ctx.save(); 18798 ctx.translate(0, 25); 18799 ctx.scale(1, 0); 18800 ctx.fillStyle = '#f00'; 18801 ctx.fillRect(0, 0, 100, 50); 18802 ctx.restore(); 18803 isPixel(ctx, 50,25, 0,255,0,255, 0); 18804 18805 18806 } 18807 </script> 18808 18809 <!-- [[[ test_2d.transformation.setTransform.multiple.html ]]] --> 18810 18811 <p>Canvas test: 2d.transformation.setTransform.multiple</p> 18812 <canvas id="c599" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18813 <script> 18814 18815 18816 function test_2d_transformation_setTransform_multiple() { 18817 18818 var canvas = document.getElementById('c599'); 18819 var ctx = canvas.getContext('2d'); 18820 18821 ctx.fillStyle = '#f00'; 18822 ctx.fillRect(0, 0, 100, 50); 18823 18824 ctx.setTransform(1/2,0, 0,1/2, 0,0); 18825 ctx.setTransform(2,0, 0,2, 0,0); 18826 ctx.fillStyle = '#0f0'; 18827 ctx.fillRect(0, 0, 50, 25); 18828 isPixel(ctx, 75,35, 0,255,0,255, 0); 18829 18830 18831 } 18832 </script> 18833 18834 <!-- [[[ test_2d.transformation.setTransform.nonfinite.html ]]] --> 18835 18836 <p>Canvas test: 2d.transformation.setTransform.nonfinite</p> 18837 <!-- Testing: setTransform() with Infinity/NaN is ignored --> 18838 <canvas id="c600" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18839 <script> 18840 18841 18842 function test_2d_transformation_setTransform_nonfinite() { 18843 18844 var canvas = document.getElementById('c600'); 18845 var ctx = canvas.getContext('2d'); 18846 18847 var _thrown_outer = false; 18848 try { 18849 18850 ctx.fillStyle = '#f00'; 18851 ctx.fillRect(0, 0, 100, 50); 18852 18853 ctx.translate(100, 10); 18854 ctx.setTransform(Infinity, 0, 0, 0, 0, 0); 18855 ctx.setTransform(-Infinity, 0, 0, 0, 0, 0); 18856 ctx.setTransform(NaN, 0, 0, 0, 0, 0); 18857 ctx.setTransform(0, Infinity, 0, 0, 0, 0); 18858 ctx.setTransform(0, -Infinity, 0, 0, 0, 0); 18859 ctx.setTransform(0, NaN, 0, 0, 0, 0); 18860 ctx.setTransform(0, 0, Infinity, 0, 0, 0); 18861 ctx.setTransform(0, 0, -Infinity, 0, 0, 0); 18862 ctx.setTransform(0, 0, NaN, 0, 0, 0); 18863 ctx.setTransform(0, 0, 0, Infinity, 0, 0); 18864 ctx.setTransform(0, 0, 0, -Infinity, 0, 0); 18865 ctx.setTransform(0, 0, 0, NaN, 0, 0); 18866 ctx.setTransform(0, 0, 0, 0, Infinity, 0); 18867 ctx.setTransform(0, 0, 0, 0, -Infinity, 0); 18868 ctx.setTransform(0, 0, 0, 0, NaN, 0); 18869 ctx.setTransform(0, 0, 0, 0, 0, Infinity); 18870 ctx.setTransform(0, 0, 0, 0, 0, -Infinity); 18871 ctx.setTransform(0, 0, 0, 0, 0, NaN); 18872 ctx.setTransform(Infinity, Infinity, 0, 0, 0, 0); 18873 ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, 0); 18874 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, 0); 18875 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, 0); 18876 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); 18877 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, Infinity); 18878 ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, 0); 18879 ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, Infinity); 18880 ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, Infinity); 18881 ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, 0); 18882 ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, 0); 18883 ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, Infinity); 18884 ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, Infinity); 18885 ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, 0); 18886 ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, Infinity); 18887 ctx.setTransform(Infinity, Infinity, 0, 0, 0, Infinity); 18888 ctx.setTransform(Infinity, 0, Infinity, 0, 0, 0); 18889 ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, 0); 18890 ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, 0); 18891 ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, Infinity); 18892 ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, Infinity); 18893 ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, 0); 18894 ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, Infinity); 18895 ctx.setTransform(Infinity, 0, Infinity, 0, 0, Infinity); 18896 ctx.setTransform(Infinity, 0, 0, Infinity, 0, 0); 18897 ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, 0); 18898 ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, Infinity); 18899 ctx.setTransform(Infinity, 0, 0, Infinity, 0, Infinity); 18900 ctx.setTransform(Infinity, 0, 0, 0, Infinity, 0); 18901 ctx.setTransform(Infinity, 0, 0, 0, Infinity, Infinity); 18902 ctx.setTransform(Infinity, 0, 0, 0, 0, Infinity); 18903 ctx.setTransform(0, Infinity, Infinity, 0, 0, 0); 18904 ctx.setTransform(0, Infinity, Infinity, Infinity, 0, 0); 18905 ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, 0); 18906 ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, Infinity); 18907 ctx.setTransform(0, Infinity, Infinity, Infinity, 0, Infinity); 18908 ctx.setTransform(0, Infinity, Infinity, 0, Infinity, 0); 18909 ctx.setTransform(0, Infinity, Infinity, 0, Infinity, Infinity); 18910 ctx.setTransform(0, Infinity, Infinity, 0, 0, Infinity); 18911 ctx.setTransform(0, Infinity, 0, Infinity, 0, 0); 18912 ctx.setTransform(0, Infinity, 0, Infinity, Infinity, 0); 18913 ctx.setTransform(0, Infinity, 0, Infinity, Infinity, Infinity); 18914 ctx.setTransform(0, Infinity, 0, Infinity, 0, Infinity); 18915 ctx.setTransform(0, Infinity, 0, 0, Infinity, 0); 18916 ctx.setTransform(0, Infinity, 0, 0, Infinity, Infinity); 18917 ctx.setTransform(0, Infinity, 0, 0, 0, Infinity); 18918 ctx.setTransform(0, 0, Infinity, Infinity, 0, 0); 18919 ctx.setTransform(0, 0, Infinity, Infinity, Infinity, 0); 18920 ctx.setTransform(0, 0, Infinity, Infinity, Infinity, Infinity); 18921 ctx.setTransform(0, 0, Infinity, Infinity, 0, Infinity); 18922 ctx.setTransform(0, 0, Infinity, 0, Infinity, 0); 18923 ctx.setTransform(0, 0, Infinity, 0, Infinity, Infinity); 18924 ctx.setTransform(0, 0, Infinity, 0, 0, Infinity); 18925 ctx.setTransform(0, 0, 0, Infinity, Infinity, 0); 18926 ctx.setTransform(0, 0, 0, Infinity, Infinity, Infinity); 18927 ctx.setTransform(0, 0, 0, Infinity, 0, Infinity); 18928 ctx.setTransform(0, 0, 0, 0, Infinity, Infinity); 18929 18930 ctx.fillStyle = '#0f0'; 18931 ctx.fillRect(-100, -10, 100, 50); 18932 18933 isPixel(ctx, 50,25, 0,255,0,255, 0); 18934 18935 } catch (e) { 18936 _thrown_outer = true; 18937 } 18938 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 18939 18940 18941 } 18942 </script> 18943 18944 <!-- [[[ test_2d.transformation.setTransform.skewed.html ]]] --> 18945 18946 <p>Canvas test: 2d.transformation.setTransform.skewed</p> 18947 <canvas id="c601" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18948 <script> 18949 18950 18951 function test_2d_transformation_setTransform_skewed() { 18952 18953 var canvas = document.getElementById('c601'); 18954 var ctx = canvas.getContext('2d'); 18955 18956 // Create green with a red square ring inside it 18957 ctx.fillStyle = '#0f0'; 18958 ctx.fillRect(0, 0, 100, 50); 18959 ctx.fillStyle = '#f00'; 18960 ctx.fillRect(20, 10, 60, 30); 18961 ctx.fillStyle = '#0f0'; 18962 ctx.fillRect(40, 20, 20, 10); 18963 18964 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly 18965 ctx.setTransform(1,4, 2,3, 5,6); 18966 // Post-transform coordinates: 18967 // [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]]; 18968 // Hence pre-transform coordinates: 18969 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2], 18970 [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2], 18971 [-7.4,11.2]]; 18972 ctx.beginPath(); 18973 ctx.moveTo(pts[0][0], pts[0][1]); 18974 for (var i = 0; i < pts.length; ++i) 18975 ctx.lineTo(pts[i][0], pts[i][1]); 18976 ctx.fill(); 18977 isPixel(ctx, 21,11, 0,255,0,255, 0); 18978 isPixel(ctx, 79,11, 0,255,0,255, 0); 18979 isPixel(ctx, 21,39, 0,255,0,255, 0); 18980 isPixel(ctx, 79,39, 0,255,0,255, 0); 18981 isPixel(ctx, 39,19, 0,255,0,255, IsAzureSkia() ? 1 : 0); 18982 isPixel(ctx, 61,19, 0,255,0,255, 0); 18983 isPixel(ctx, 39,31, 0,255,0,255, 0); 18984 isPixel(ctx, 61,31, 0,255,0,255, 0); 18985 18986 18987 } 18988 </script> 18989 18990 <!-- [[[ test_2d.transformation.transform.identity.html ]]] --> 18991 18992 <p>Canvas test: 2d.transformation.transform.identity</p> 18993 <!-- Testing: transform() with the identity matrix does nothing --> 18994 <canvas id="c602" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 18995 <script> 18996 18997 18998 function test_2d_transformation_transform_identity() { 18999 19000 var canvas = document.getElementById('c602'); 19001 var ctx = canvas.getContext('2d'); 19002 19003 ctx.fillStyle = '#f00'; 19004 ctx.fillRect(0, 0, 100, 50); 19005 19006 ctx.transform(1,0, 0,1, 0,0); 19007 ctx.fillStyle = '#0f0'; 19008 ctx.fillRect(0, 0, 100, 50); 19009 isPixel(ctx, 50,25, 0,255,0,255, 0); 19010 19011 19012 } 19013 19014 </script> 19015 19016 <!-- [[[ test_2d.transformation.transform.multiply.html ]]] --> 19017 19018 <p>Canvas test: 2d.transformation.transform.multiply</p> 19019 <!-- Testing: transform() multiplies the CTM --> 19020 <canvas id="c603" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19021 <script> 19022 19023 19024 function test_2d_transformation_transform_multiply() { 19025 19026 var canvas = document.getElementById('c603'); 19027 var ctx = canvas.getContext('2d'); 19028 19029 ctx.fillStyle = '#f00'; 19030 ctx.fillRect(0, 0, 100, 50); 19031 19032 ctx.transform(1,2, 3,4, 5,6); 19033 ctx.transform(-2,1, 3/2,-1/2, 1,-2); 19034 ctx.fillStyle = '#0f0'; 19035 ctx.fillRect(0, 0, 100, 50); 19036 isPixel(ctx, 50,25, 0,255,0,255, 0); 19037 19038 19039 } 19040 </script> 19041 19042 <!-- [[[ test_2d.transformation.transform.nonfinite.html ]]] --> 19043 19044 <p>Canvas test: 2d.transformation.transform.nonfinite</p> 19045 <!-- Testing: transform() with Infinity/NaN is ignored --> 19046 <canvas id="c604" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19047 <script> 19048 19049 19050 function test_2d_transformation_transform_nonfinite() { 19051 19052 var canvas = document.getElementById('c604'); 19053 var ctx = canvas.getContext('2d'); 19054 19055 var _thrown_outer = false; 19056 try { 19057 19058 ctx.fillStyle = '#f00'; 19059 ctx.fillRect(0, 0, 100, 50); 19060 19061 ctx.translate(100, 10); 19062 ctx.transform(Infinity, 0, 0, 0, 0, 0); 19063 ctx.transform(-Infinity, 0, 0, 0, 0, 0); 19064 ctx.transform(NaN, 0, 0, 0, 0, 0); 19065 ctx.transform(0, Infinity, 0, 0, 0, 0); 19066 ctx.transform(0, -Infinity, 0, 0, 0, 0); 19067 ctx.transform(0, NaN, 0, 0, 0, 0); 19068 ctx.transform(0, 0, Infinity, 0, 0, 0); 19069 ctx.transform(0, 0, -Infinity, 0, 0, 0); 19070 ctx.transform(0, 0, NaN, 0, 0, 0); 19071 ctx.transform(0, 0, 0, Infinity, 0, 0); 19072 ctx.transform(0, 0, 0, -Infinity, 0, 0); 19073 ctx.transform(0, 0, 0, NaN, 0, 0); 19074 ctx.transform(0, 0, 0, 0, Infinity, 0); 19075 ctx.transform(0, 0, 0, 0, -Infinity, 0); 19076 ctx.transform(0, 0, 0, 0, NaN, 0); 19077 ctx.transform(0, 0, 0, 0, 0, Infinity); 19078 ctx.transform(0, 0, 0, 0, 0, -Infinity); 19079 ctx.transform(0, 0, 0, 0, 0, NaN); 19080 ctx.transform(Infinity, Infinity, 0, 0, 0, 0); 19081 ctx.transform(Infinity, Infinity, Infinity, 0, 0, 0); 19082 ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, 0); 19083 ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, 0); 19084 ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); 19085 ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, Infinity); 19086 ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, 0); 19087 ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, Infinity); 19088 ctx.transform(Infinity, Infinity, Infinity, 0, 0, Infinity); 19089 ctx.transform(Infinity, Infinity, 0, Infinity, 0, 0); 19090 ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, 0); 19091 ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, Infinity); 19092 ctx.transform(Infinity, Infinity, 0, Infinity, 0, Infinity); 19093 ctx.transform(Infinity, Infinity, 0, 0, Infinity, 0); 19094 ctx.transform(Infinity, Infinity, 0, 0, Infinity, Infinity); 19095 ctx.transform(Infinity, Infinity, 0, 0, 0, Infinity); 19096 ctx.transform(Infinity, 0, Infinity, 0, 0, 0); 19097 ctx.transform(Infinity, 0, Infinity, Infinity, 0, 0); 19098 ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, 0); 19099 ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, Infinity); 19100 ctx.transform(Infinity, 0, Infinity, Infinity, 0, Infinity); 19101 ctx.transform(Infinity, 0, Infinity, 0, Infinity, 0); 19102 ctx.transform(Infinity, 0, Infinity, 0, Infinity, Infinity); 19103 ctx.transform(Infinity, 0, Infinity, 0, 0, Infinity); 19104 ctx.transform(Infinity, 0, 0, Infinity, 0, 0); 19105 ctx.transform(Infinity, 0, 0, Infinity, Infinity, 0); 19106 ctx.transform(Infinity, 0, 0, Infinity, Infinity, Infinity); 19107 ctx.transform(Infinity, 0, 0, Infinity, 0, Infinity); 19108 ctx.transform(Infinity, 0, 0, 0, Infinity, 0); 19109 ctx.transform(Infinity, 0, 0, 0, Infinity, Infinity); 19110 ctx.transform(Infinity, 0, 0, 0, 0, Infinity); 19111 ctx.transform(0, Infinity, Infinity, 0, 0, 0); 19112 ctx.transform(0, Infinity, Infinity, Infinity, 0, 0); 19113 ctx.transform(0, Infinity, Infinity, Infinity, Infinity, 0); 19114 ctx.transform(0, Infinity, Infinity, Infinity, Infinity, Infinity); 19115 ctx.transform(0, Infinity, Infinity, Infinity, 0, Infinity); 19116 ctx.transform(0, Infinity, Infinity, 0, Infinity, 0); 19117 ctx.transform(0, Infinity, Infinity, 0, Infinity, Infinity); 19118 ctx.transform(0, Infinity, Infinity, 0, 0, Infinity); 19119 ctx.transform(0, Infinity, 0, Infinity, 0, 0); 19120 ctx.transform(0, Infinity, 0, Infinity, Infinity, 0); 19121 ctx.transform(0, Infinity, 0, Infinity, Infinity, Infinity); 19122 ctx.transform(0, Infinity, 0, Infinity, 0, Infinity); 19123 ctx.transform(0, Infinity, 0, 0, Infinity, 0); 19124 ctx.transform(0, Infinity, 0, 0, Infinity, Infinity); 19125 ctx.transform(0, Infinity, 0, 0, 0, Infinity); 19126 ctx.transform(0, 0, Infinity, Infinity, 0, 0); 19127 ctx.transform(0, 0, Infinity, Infinity, Infinity, 0); 19128 ctx.transform(0, 0, Infinity, Infinity, Infinity, Infinity); 19129 ctx.transform(0, 0, Infinity, Infinity, 0, Infinity); 19130 ctx.transform(0, 0, Infinity, 0, Infinity, 0); 19131 ctx.transform(0, 0, Infinity, 0, Infinity, Infinity); 19132 ctx.transform(0, 0, Infinity, 0, 0, Infinity); 19133 ctx.transform(0, 0, 0, Infinity, Infinity, 0); 19134 ctx.transform(0, 0, 0, Infinity, Infinity, Infinity); 19135 ctx.transform(0, 0, 0, Infinity, 0, Infinity); 19136 ctx.transform(0, 0, 0, 0, Infinity, Infinity); 19137 19138 ctx.fillStyle = '#0f0'; 19139 ctx.fillRect(-100, -10, 100, 50); 19140 19141 isPixel(ctx, 50,25, 0,255,0,255, 0); 19142 19143 } catch (e) { 19144 _thrown_outer = true; 19145 } 19146 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 19147 19148 19149 } 19150 </script> 19151 19152 <!-- [[[ test_2d.transformation.transform.skewed.html ]]] --> 19153 19154 <p>Canvas test: 2d.transformation.transform.skewed</p> 19155 <!-- Testing: transform() with skewy matrix transforms correctly --> 19156 <canvas id="c605" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19157 <script> 19158 19159 19160 function test_2d_transformation_transform_skewed() { 19161 19162 var canvas = document.getElementById('c605'); 19163 var ctx = canvas.getContext('2d'); 19164 19165 // Create green with a red square ring inside it 19166 ctx.fillStyle = '#0f0'; 19167 ctx.fillRect(0, 0, 100, 50); 19168 ctx.fillStyle = '#f00'; 19169 ctx.fillRect(20, 10, 60, 30); 19170 ctx.fillStyle = '#0f0'; 19171 ctx.fillRect(40, 20, 20, 10); 19172 19173 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly 19174 ctx.transform(1,4, 2,3, 5,6); 19175 // Post-transform coordinates: 19176 // [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]]; 19177 // Hence pre-transform coordinates: 19178 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2], 19179 [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2], 19180 [-7.4,11.2]]; 19181 ctx.beginPath(); 19182 ctx.moveTo(pts[0][0], pts[0][1]); 19183 for (var i = 0; i < pts.length; ++i) 19184 ctx.lineTo(pts[i][0], pts[i][1]); 19185 ctx.fill(); 19186 isPixel(ctx, 21,11, 0,255,0,255, 0); 19187 isPixel(ctx, 79,11, 0,255,0,255, 0); 19188 isPixel(ctx, 21,39, 0,255,0,255, 0); 19189 isPixel(ctx, 79,39, 0,255,0,255, 0); 19190 isPixel(ctx, 39,19, 0,255,0,255, IsAzureSkia() ? 1 : 0); 19191 isPixel(ctx, 61,19, 0,255,0,255, 0); 19192 isPixel(ctx, 39,31, 0,255,0,255, 0); 19193 isPixel(ctx, 61,31, 0,255,0,255, 0); 19194 19195 19196 } 19197 </script> 19198 19199 <!-- [[[ test_2d.transformation.translate.basic.html ]]] --> 19200 19201 <p>Canvas test: 2d.transformation.translate.basic</p> 19202 <!-- Testing: translate() works --> 19203 <canvas id="c606" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19204 <script> 19205 19206 19207 function test_2d_transformation_translate_basic() { 19208 19209 var canvas = document.getElementById('c606'); 19210 var ctx = canvas.getContext('2d'); 19211 19212 ctx.fillStyle = '#f00'; 19213 ctx.fillRect(0, 0, 100, 50); 19214 19215 ctx.translate(100, 50); 19216 ctx.fillStyle = '#0f0'; 19217 ctx.fillRect(-100, -50, 100, 50); 19218 isPixel(ctx, 90,40, 0,255,0,255, 0); 19219 19220 19221 } 19222 </script> 19223 19224 <!-- [[[ test_2d.transformation.translate.nonfinite.html ]]] --> 19225 19226 <p>Canvas test: 2d.transformation.translate.nonfinite</p> 19227 <!-- Testing: translate() with Infinity/NaN is ignored --> 19228 <canvas id="c607" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19229 <script> 19230 19231 19232 function test_2d_transformation_translate_nonfinite() { 19233 19234 var canvas = document.getElementById('c607'); 19235 var ctx = canvas.getContext('2d'); 19236 19237 var _thrown_outer = false; 19238 try { 19239 19240 ctx.fillStyle = '#f00'; 19241 ctx.fillRect(0, 0, 100, 50); 19242 19243 ctx.translate(100, 10); 19244 ctx.translate(Infinity, 0.1); 19245 ctx.translate(-Infinity, 0.1); 19246 ctx.translate(NaN, 0.1); 19247 ctx.translate(0.1, Infinity); 19248 ctx.translate(0.1, -Infinity); 19249 ctx.translate(0.1, NaN); 19250 ctx.translate(Infinity, Infinity); 19251 19252 ctx.fillStyle = '#0f0'; 19253 ctx.fillRect(-100, -10, 100, 50); 19254 19255 isPixel(ctx, 50,25, 0,255,0,255, 0); 19256 19257 } catch (e) { 19258 _thrown_outer = true; 19259 } 19260 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 19261 19262 19263 } 19264 </script> 19265 19266 <!-- [[[ test_2d.type.exists.html ]]] --> 19267 19268 <p>Canvas test: 2d.type.exists</p> 19269 <!-- Testing: The 2D context interface is a property of 'window' --> 19270 <canvas id="c609" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19271 <script> 19272 19273 function test_2d_type_exists() { 19274 19275 var canvas = document.getElementById('c609'); 19276 var ctx = canvas.getContext('2d'); 19277 19278 ok(window.CanvasRenderingContext2D, "window.CanvasRenderingContext2D"); 19279 19280 19281 } 19282 </script> 19283 19284 <!-- [[[ test_2d.type.extend.html ]]] --> 19285 19286 <p>Canvas test: 2d.type.extend</p> 19287 <!-- Testing: Interface methods can be added --> 19288 <canvas id="c610" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19289 <script> 19290 19291 19292 function test_2d_type_extend() { 19293 19294 var canvas = document.getElementById('c610'); 19295 var ctx = canvas.getContext('2d'); 19296 19297 window.CanvasRenderingContext2D.prototype.fillRectGreen = function (x, y, w, h) 19298 { 19299 this.fillStyle = '#0f0'; 19300 this.fillRect(x, y, w, h); 19301 }; 19302 ctx.fillStyle = '#f00'; 19303 ctx.fillRectGreen(0, 0, 100, 50); 19304 isPixel(ctx, 50,25, 0,255,0,255, 0); 19305 19306 19307 } 19308 </script> 19309 19310 <!-- [[[ test_2d.type.prototype.html ]]] --> 19311 19312 <p>Canvas test: 2d.type.prototype</p> 19313 <!-- Testing: window.CanvasRenderingContext2D.prototype is { DontDelete, ReadOnly }, and its methods are not --> 19314 <canvas id="c611" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19315 <script> 19316 19317 function test_2d_type_prototype() { 19318 19319 var canvas = document.getElementById('c611'); 19320 var ctx = canvas.getContext('2d'); 19321 19322 var fill = window.CanvasRenderingContext2D.prototype.fill; 19323 ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype"); 19324 ok(window.CanvasRenderingContext2D.prototype.fill, "window.CanvasRenderingContext2D.prototype.fill"); 19325 window.CanvasRenderingContext2D.prototype = null; 19326 ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype"); 19327 delete window.CanvasRenderingContext2D.prototype; 19328 ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype"); 19329 window.CanvasRenderingContext2D.prototype.fill = 1; 19330 ok(window.CanvasRenderingContext2D.prototype.fill === 1, "window.CanvasRenderingContext2D.prototype.fill === 1"); 19331 delete window.CanvasRenderingContext2D.prototype.fill; 19332 ok(window.CanvasRenderingContext2D.prototype.fill === undefined, "window.CanvasRenderingContext2D.prototype.fill === undefined"); 19333 19334 //restore the original method to ensure that other tests can run successfully 19335 window.CanvasRenderingContext2D.prototype.fill = fill; 19336 } 19337 </script> 19338 19339 <!-- [[[ test_2d.type.replace.html ]]] --> 19340 19341 <p>Canvas test: 2d.type.replace</p> 19342 <!-- Testing: Interface methods can be overridden --> 19343 <canvas id="c612" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19344 <script> 19345 19346 19347 function test_2d_type_replace() { 19348 19349 var canvas = document.getElementById('c612'); 19350 var ctx = canvas.getContext('2d'); 19351 19352 var fillRect = window.CanvasRenderingContext2D.prototype.fillRect; 19353 window.CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h) 19354 { 19355 this.fillStyle = '#0f0'; 19356 fillRect.call(this, x, y, w, h); 19357 }; 19358 ctx.fillStyle = '#f00'; 19359 ctx.fillRect(0, 0, 100, 50); 19360 isPixel(ctx, 50,25, 0,255,0,255, 0); 19361 19362 //restore the original method to ensure that other tests can run successfully 19363 window.CanvasRenderingContext2D.prototype.fillRect = fillRect; 19364 } 19365 </script> 19366 19367 <!-- [[[ test_2d.voidreturn.html ]]] --> 19368 19369 <p>Canvas test: 2d.voidreturn</p> 19370 <!-- Testing: void methods return undefined --> 19371 <canvas id="c613" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19372 <script> 19373 19374 function test_2d_voidreturn() { 19375 19376 var canvas = document.getElementById('c613'); 19377 var ctx = canvas.getContext('2d'); 19378 19379 ok(ctx.save() === undefined, "ctx.save() === undefined"); 19380 ok(ctx.restore() === undefined, "ctx.restore() === undefined"); 19381 ok(ctx.scale(1, 1) === undefined, "ctx.scale(1, 1) === undefined"); 19382 ok(ctx.rotate(0) === undefined, "ctx.rotate(0) === undefined"); 19383 ok(ctx.translate(0, 0) === undefined, "ctx.translate(0, 0) === undefined"); 19384 if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported) 19385 ok(ctx.transform(1, 0, 0, 1, 0, 0) === undefined, "ctx.transform(1, 0, 0, 1, 0, 0) === undefined"); 19386 } 19387 if (ctx.setTransform) { 19388 ok(ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined, "ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined"); 19389 } 19390 if (ctx.resetTransform) { 19391 ok(ctx.resetTransform() === undefined, "ctx.resetTransform() === undefined"); 19392 } 19393 ok(ctx.clearRect(0, 0, 0, 0) === undefined, "ctx.clearRect(0, 0, 0, 0) === undefined"); 19394 ok(ctx.fillRect(0, 0, 0, 0) === undefined, "ctx.fillRect(0, 0, 0, 0) === undefined"); 19395 ok(ctx.strokeRect(0, 0, 0, 0) === undefined, "ctx.strokeRect(0, 0, 0, 0) === undefined"); 19396 ok(ctx.beginPath() === undefined, "ctx.beginPath() === undefined"); 19397 ok(ctx.closePath() === undefined, "ctx.closePath() === undefined"); 19398 ok(ctx.moveTo(0, 0) === undefined, "ctx.moveTo(0, 0) === undefined"); 19399 ok(ctx.lineTo(0, 0) === undefined, "ctx.lineTo(0, 0) === undefined"); 19400 ok(ctx.quadraticCurveTo(0, 0, 0, 0) === undefined, "ctx.quadraticCurveTo(0, 0, 0, 0) === undefined"); 19401 ok(ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined, "ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined"); 19402 ok(ctx.arcTo(0, 0, 0, 0, 1) === undefined, "ctx.arcTo(0, 0, 0, 0, 1) === undefined"); 19403 ok(ctx.rect(0, 0, 0, 0) === undefined, "ctx.rect(0, 0, 0, 0) === undefined"); 19404 ok(ctx.arc(0, 0, 1, 0, 0, true) === undefined, "ctx.arc(0, 0, 1, 0, 0, true) === undefined"); 19405 ok(ctx.fill() === undefined, "ctx.fill() === undefined"); 19406 ok(ctx.stroke() === undefined, "ctx.stroke() === undefined"); 19407 ok(ctx.clip() === undefined, "ctx.clip() === undefined"); 19408 if (ctx.putImageData) { 19409 ok(ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined, "ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined"); 19410 } 19411 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"); 19412 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"); 19413 ok(ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined, "ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined"); 19414 19415 19416 } 19417 </script> 19418 <img src="image_yellow.png" id="yellow_11.png" class="resource"> 19419 19420 <!-- [[[ test_bug397524.html ]]] --> 19421 19422 <p>Test for Bug 397524</p> 19423 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=397524">Mozilla Bug 397524</a> 19424 <p id="display"> 19425 <canvas id="canvas1" width="1" height="1"></canvas> 19426 <canvas id="canvas2" width="1" height="1"></canvas> 19427 <canvas id="canvas3" width="1" height="1"></canvas> 19428 <img id="i1", src="image_green-1x1.png"> 19429 <img id="i2" src="http://example.com/tests/dom/canvas/test/image_green-1x1.png"> 19430 <img id="i3" src="image_green-redirect"> 19431 </p> 19432 <div id="content" style="display: none"> 19433 19434 </div> 19435 <pre id="test"> 19436 <script class="testbody" type="text/javascript"> 19437 19438 /** Test for Bug 397524 */ 19439 19440 function draw(n) { 19441 $("canvas" + n).getContext('2d').drawImage($("i" + n), 0, 0); 19442 } 19443 19444 function test_bug397524() { 19445 draw(1); 19446 draw(2); 19447 draw(3); 19448 19449 // Should be able to get the data out of the first canvas 19450 $("canvas1").toDataURL("image/png"); 19451 19452 // Should not be able to get the data out of a cross-site load 19453 var gotData = false; 19454 try { 19455 $("canvas2").toDataURL("image/png"); 19456 gotData = true; 19457 } catch (ex) { 19458 if (ex.code != 18 || ex.name != "SecurityError") { 19459 throw ex; 19460 } 19461 } 19462 is(gotData, false, "Shouldn't be able to read images cross-site!"); 19463 19464 // Should not be able to get the data out of a redirected cross-site load 19465 var gotData = false; 19466 try { 19467 $("canvas3").toDataURL("image/png"); 19468 gotData = true; 19469 } catch (ex) { 19470 if (ex.code != 18 || ex.name != "SecurityError") { 19471 throw ex; 19472 } 19473 } 19474 is(gotData, false, "Shouldn't be able to read images redirected cross-site!"); 19475 19476 } 19477 19478 </script> 19479 </pre> 19480 19481 <!-- [[[ test_bug405982.html ]]] --> 19482 19483 <p>Canvas test: toDataURL.png</p> 19484 <canvas id="c614" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19485 <script> 19486 function test_bug405982() { 19487 19488 var canvas = SpecialPowers.wrap(document.getElementById('c614')); 19489 var ctx = canvas.getContext('2d'); 19490 19491 var _threw = false; 19492 try { 19493 var data = canvas.toDataURL('image/png', 'quality=100'); 19494 } 19495 catch (e) { 19496 _threw = true; 19497 } 19498 ok(!_threw, "Should not throw an exception for invalid args to png encoder"); 19499 19500 _threw = false; 19501 try { 19502 var data = canvas.toDataURL('image/jpeg', 'foobar=true'); 19503 } 19504 catch (e) { 19505 _threw = true; 19506 } 19507 ok(!_threw, "Should not throw an exception for invalid args to jpeg encoder"); 19508 19509 } 19510 </script> 19511 <!-- [[[ test_context.arguments.extra.html ]]] --> 19512 19513 <p>Canvas test: context.arguments.extra</p> 19514 <canvas id="c615" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19515 <script> 19516 19517 function test_context_arguments_extra() { 19518 19519 var canvas = document.getElementById('c615'); 19520 var ctx = canvas.getContext('2d'); 19521 19522 ok(canvas.getContext('2d', 'foo') !== null, "canvas.getContext('2d', 'foo') !== null"); 19523 19524 19525 } 19526 </script> 19527 19528 <!-- [[[ test_context.arguments.missing.html ]]] --> 19529 19530 <p>Canvas test: context.arguments.missing</p> 19531 <canvas id="c616" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19532 <script> 19533 19534 function test_context_arguments_missing() { 19535 19536 var canvas = document.getElementById('c616'); 19537 var ctx = canvas.getContext('2d'); 19538 19539 var _thrown = undefined; try { 19540 canvas.getContext(); 19541 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError"); 19542 19543 19544 } 19545 </script> 19546 19547 <!-- [[[ test_context.casesensitive.html ]]] --> 19548 19549 <p>Canvas test: context.casesensitive - bug 401788</p> 19550 <!-- Testing: Context name "2D" is unrecognised; matching is case sensitive --> 19551 <canvas id="c617" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19552 <script> 19553 19554 function test_context_casesensitive() { 19555 19556 var canvas = document.getElementById('c617'); 19557 var ctx = canvas.getContext('2d'); 19558 19559 var _thrown_outer = false; 19560 try { 19561 19562 ok(canvas.getContext('2D') === null, "canvas.getContext('2D') === null"); 19563 19564 } catch (e) { 19565 _thrown_outer = true; 19566 } 19567 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 19568 19569 19570 } 19571 </script> 19572 19573 <!-- [[[ test_context.emptystring.html ]]] --> 19574 19575 <p>Canvas test: context.emptystring - bug 401788</p> 19576 <!-- Testing: getContext with empty string returns null --> 19577 <canvas id="c618" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19578 <script> 19579 19580 function test_context_emptystring() { 19581 19582 var canvas = document.getElementById('c618'); 19583 var ctx = canvas.getContext('2d'); 19584 19585 var _thrown_outer = false; 19586 try { 19587 19588 ok(canvas.getContext("") === null, "canvas.getContext(\"\") === null"); 19589 19590 } catch (e) { 19591 _thrown_outer = true; 19592 } 19593 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 19594 19595 19596 } 19597 </script> 19598 19599 <!-- [[[ test_context.unrecognised.badname.html ]]] --> 19600 19601 <p>Canvas test: context.unrecognised.badname - bug 401788</p> 19602 <!-- Testing: getContext with unrecognised context name returns null --> 19603 <canvas id="c619" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19604 <script> 19605 19606 function test_context_unrecognised_badname() { 19607 19608 var canvas = document.getElementById('c619'); 19609 var ctx = canvas.getContext('2d'); 19610 19611 var _thrown_outer = false; 19612 try { 19613 19614 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"); 19615 19616 } catch (e) { 19617 _thrown_outer = true; 19618 } 19619 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 19620 19621 19622 } 19623 </script> 19624 19625 <!-- [[[ test_context.unrecognised.badsuffix.html ]]] --> 19626 19627 <p>Canvas test: context.unrecognised.badsuffix - bug 401788</p> 19628 <!-- Testing: Context name "2d" plus a suffix is unrecognised --> 19629 <canvas id="c620" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19630 <script> 19631 19632 function test_context_unrecognised_badsuffix() { 19633 19634 var canvas = document.getElementById('c620'); 19635 var ctx = canvas.getContext('2d'); 19636 19637 var _thrown_outer = false; 19638 try { 19639 19640 ok(canvas.getContext("2d#") === null, "canvas.getContext(\"2d#\") === null"); 19641 19642 } catch (e) { 19643 _thrown_outer = true; 19644 } 19645 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 19646 19647 19648 } 19649 </script> 19650 19651 <!-- [[[ test_context.unrecognised.nullsuffix.html ]]] --> 19652 19653 <p>Canvas test: context.unrecognised.nullsuffix - bug 401788</p> 19654 <!-- Testing: Context name "2d" plus a "\0" suffix is unrecognised --> 19655 <canvas id="c621" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19656 <script> 19657 19658 function test_context_unrecognised_nullsuffix() { 19659 19660 var canvas = document.getElementById('c621'); 19661 var ctx = canvas.getContext('2d'); 19662 19663 var _thrown_outer = false; 19664 try { 19665 19666 ok(canvas.getContext("2d\0") === null, "canvas.getContext(\"2d\\0\") === null"); 19667 19668 } catch (e) { 19669 _thrown_outer = true; 19670 } 19671 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 19672 19673 19674 } 19675 </script> 19676 19677 <!-- [[[ test_context.unrecognised.unicode.html ]]] --> 19678 19679 <p>Canvas test: context.unrecognised.unicode - bug 401788</p> 19680 <!-- Testing: Context name which kind of looks like "2d" is unrecognised --> 19681 <canvas id="c622" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19682 <script> 19683 19684 function test_context_unrecognised_unicode() { 19685 19686 var canvas = document.getElementById('c622'); 19687 var ctx = canvas.getContext('2d'); 19688 19689 var _thrown_outer = false; 19690 try { 19691 19692 ok(canvas.getContext("2\uFF44") === null, "canvas.getContext(\"2\\uFF44\") === null"); // Fullwidth Latin Small Letter D 19693 19694 } catch (e) { 19695 _thrown_outer = true; 19696 } 19697 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 19698 19699 19700 } 19701 </script> 19702 19703 <!-- [[[ test_fallback.basic.html ]]] --> 19704 19705 <p>Canvas test: fallback.basic</p> 19706 <!-- Testing: Fallback content is inserted into the DOM --> 19707 <canvas id="c623" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19708 <script> 19709 19710 function test_fallback_basic() { 19711 19712 var canvas = document.getElementById('c623'); 19713 var ctx = canvas.getContext('2d'); 19714 19715 ok(canvas.childNodes.length == 1, "canvas.childNodes.length == 1"); 19716 19717 19718 } 19719 </script> 19720 19721 <!-- [[[ test_fallback.multiple.html ]]] --> 19722 19723 <p>Canvas test: fallback.multiple</p> 19724 <!-- Testing: Fallback content with multiple elements --> 19725 <canvas id="c624" width="100" height="50"><p class="fallback">FAIL</p><p class="fallback">FAIL</p></canvas> 19726 <script> 19727 19728 function test_fallback_multiple() { 19729 19730 var canvas = document.getElementById('c624'); 19731 var ctx = canvas.getContext('2d'); 19732 19733 ok(canvas.childNodes.length == 2, "canvas.childNodes.length == 2"); 19734 19735 19736 } 19737 </script> 19738 19739 <!-- [[[ test_fallback.nested.html ]]] --> 19740 19741 <p>Canvas test: fallback.nested</p> 19742 <!-- Testing: Fallback content containing another canvas (mostly testing parsers) --> 19743 <canvas id="c625" width="100" height="50"><canvas><p class="fallback">FAIL (fallback content)</p></canvas><p class="fallback">FAIL (fallback content)</p></canvas> 19744 <script> 19745 19746 function test_fallback_nested() { 19747 19748 var canvas = document.getElementById('c625'); 19749 var ctx = canvas.getContext('2d'); 19750 19751 ok(canvas.childNodes.length == 2, "canvas.childNodes.length == 2"); 19752 19753 19754 } 19755 </script> 19756 19757 <!-- [[[ test_initial.colour.html ]]] --> 19758 19759 <p>Canvas test: initial.colour</p> 19760 <!-- Testing: Initial state is transparent black --> 19761 <canvas id="c626" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19762 <script> 19763 19764 19765 function test_initial_colour() { 19766 19767 var canvas = document.getElementById('c626'); 19768 var ctx = canvas.getContext('2d'); 19769 19770 isPixel(ctx, 20,20, 0,0,0,0, 0); 19771 19772 19773 } 19774 </script> 19775 19776 <!-- [[[ test_initial.reset.2dstate.html ]]] --> 19777 19778 <p>Canvas test: initial.reset.2dstate</p> 19779 <!-- Testing: Resetting the canvas state resets 2D state variables --> 19780 <canvas id="c627" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19781 <script> 19782 19783 function test_initial_reset_2dstate() { 19784 19785 var canvas = document.getElementById('c627'); 19786 var ctx = canvas.getContext('2d'); 19787 19788 canvas.width = 100; 19789 var default_val; 19790 19791 default_val = ctx.strokeStyle; 19792 ctx.strokeStyle = "#ff0000"; 19793 canvas.width = 100; 19794 ok(ctx.strokeStyle === default_val, "ctx.strokeStyle === default_val"); 19795 19796 default_val = ctx.fillStyle; 19797 ctx.fillStyle = "#ff0000"; 19798 canvas.width = 100; 19799 ok(ctx.fillStyle === default_val, "ctx.fillStyle === default_val"); 19800 19801 default_val = ctx.globalAlpha; 19802 ctx.globalAlpha = 0.5; 19803 canvas.width = 100; 19804 ok(ctx.globalAlpha === default_val, "ctx.globalAlpha === default_val"); 19805 19806 default_val = ctx.lineWidth; 19807 ctx.lineWidth = 0.5; 19808 canvas.width = 100; 19809 ok(ctx.lineWidth === default_val, "ctx.lineWidth === default_val"); 19810 19811 default_val = ctx.lineCap; 19812 ctx.lineCap = "round"; 19813 canvas.width = 100; 19814 ok(ctx.lineCap === default_val, "ctx.lineCap === default_val"); 19815 19816 default_val = ctx.lineJoin; 19817 ctx.lineJoin = "round"; 19818 canvas.width = 100; 19819 ok(ctx.lineJoin === default_val, "ctx.lineJoin === default_val"); 19820 19821 default_val = ctx.miterLimit; 19822 ctx.miterLimit = 0.5; 19823 canvas.width = 100; 19824 ok(ctx.miterLimit === default_val, "ctx.miterLimit === default_val"); 19825 19826 default_val = ctx.shadowOffsetX; 19827 ctx.shadowOffsetX = 5; 19828 canvas.width = 100; 19829 ok(ctx.shadowOffsetX === default_val, "ctx.shadowOffsetX === default_val"); 19830 19831 default_val = ctx.shadowOffsetY; 19832 ctx.shadowOffsetY = 5; 19833 canvas.width = 100; 19834 ok(ctx.shadowOffsetY === default_val, "ctx.shadowOffsetY === default_val"); 19835 19836 default_val = ctx.shadowBlur; 19837 ctx.shadowBlur = 5; 19838 canvas.width = 100; 19839 ok(ctx.shadowBlur === default_val, "ctx.shadowBlur === default_val"); 19840 19841 default_val = ctx.shadowColor; 19842 ctx.shadowColor = "#ff0000"; 19843 canvas.width = 100; 19844 ok(ctx.shadowColor === default_val, "ctx.shadowColor === default_val"); 19845 19846 default_val = ctx.globalCompositeOperation; 19847 ctx.globalCompositeOperation = "copy"; 19848 canvas.width = 100; 19849 ok(ctx.globalCompositeOperation === default_val, "ctx.globalCompositeOperation === default_val"); 19850 19851 19852 } 19853 </script> 19854 19855 <!-- [[[ test_initial.reset.clip.html ]]] --> 19856 19857 <p>Canvas test: initial.reset.clip</p> 19858 <!-- Testing: Resetting the canvas state resets the current clip region --> 19859 <canvas id="c628" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas> 19860 <script> 19861 19862 19863 function test_initial_reset_clip() { 19864 19865 var canvas = document.getElementById('c628'); 19866 var ctx = canvas.getContext('2d'); 19867 19868 canvas.width = 100; 19869 ctx.rect(0, 0, 1, 1); 19870 ctx.clip(); 19871 canvas.width = 100; 19872 ctx.fillStyle = '#0f0'; 19873 ctx.fillRect(0, 0, 100, 50); 19874 isPixel(ctx, 20,20, 0,255,0,255, 0); 19875 19876 19877 } 19878 </script> 19879 19880 <!-- [[[ test_initial.reset.different.html ]]] --> 19881 19882 <p>Canvas test: initial.reset.different</p> 19883 <!-- Testing: Changing size resets canvas to transparent black --> 19884 <canvas id="c629" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 19885 <script> 19886 19887 19888 function test_initial_reset_different() { 19889 19890 var canvas = document.getElementById('c629'); 19891 var ctx = canvas.getContext('2d'); 19892 19893 ctx.fillStyle = '#f00'; 19894 ctx.fillRect(0, 0, 50, 50); 19895 isPixel(ctx, 20,20, 255,0,0,255, 0); 19896 canvas.width = 50; 19897 isPixel(ctx, 20,20, 0,0,0,0, 0); 19898 19899 19900 } 19901 </script> 19902 19903 <!-- [[[ test_initial.reset.gradient.html ]]] --> 19904 19905 <p>Canvas test: initial.reset.gradient</p> 19906 <!-- Testing: Resetting the canvas state does not invalidate any existing gradients --> 19907 <canvas id="c630" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19908 <script> 19909 19910 19911 function test_initial_reset_gradient() { 19912 19913 var canvas = document.getElementById('c630'); 19914 var ctx = canvas.getContext('2d'); 19915 19916 canvas.width = 50; 19917 var g = ctx.createLinearGradient(0, 0, 100, 0); 19918 g.addColorStop(0, '#0f0'); 19919 g.addColorStop(1, '#0f0'); 19920 canvas.width = 100; 19921 ctx.fillStyle = '#f00'; 19922 ctx.fillRect(0, 0, 100, 50); 19923 ctx.fillStyle = g; 19924 ctx.fillRect(0, 0, 100, 50); 19925 isPixel(ctx, 50,25, 0,255,0,255, 0); 19926 19927 19928 } 19929 </script> 19930 19931 <!-- [[[ test_initial.reset.path.html ]]] --> 19932 19933 <p>Canvas test: initial.reset.path</p> 19934 <!-- Testing: Resetting the canvas state resets the current path --> 19935 <canvas id="c631" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 19936 <script> 19937 19938 19939 function test_initial_reset_path() { 19940 19941 var canvas = document.getElementById('c631'); 19942 var ctx = canvas.getContext('2d'); 19943 19944 canvas.width = 100; 19945 ctx.rect(0, 0, 100, 50); 19946 canvas.width = 100; 19947 ctx.fillStyle = '#f00'; 19948 ctx.fill(); 19949 isPixel(ctx, 20,20, 0,0,0,0, 0); 19950 19951 19952 } 19953 </script> 19954 19955 <!-- [[[ test_initial.reset.pattern.html ]]] --> 19956 19957 <p>Canvas test: initial.reset.pattern</p> 19958 <!-- Testing: Resetting the canvas state does not invalidate any existing patterns --> 19959 <canvas id="c632" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 19960 <script> 19961 19962 19963 function test_initial_reset_pattern() { 19964 19965 var canvas = document.getElementById('c632'); 19966 var ctx = canvas.getContext('2d'); 19967 19968 canvas.width = 50; 19969 ctx.fillStyle = '#0f0'; 19970 ctx.fillRect(0, 0, 50, 50); 19971 var p = ctx.createPattern(canvas, 'repeat-x'); 19972 canvas.width = 100; 19973 ctx.fillStyle = '#f00'; 19974 ctx.fillRect(0, 0, 100, 50); 19975 ctx.fillStyle = p; 19976 ctx.fillRect(0, 0, 100, 50); 19977 isPixel(ctx, 50,25, 0,255,0,255, 0); 19978 19979 19980 } 19981 </script> 19982 19983 <!-- [[[ test_initial.reset.same.html ]]] --> 19984 19985 <p>Canvas test: initial.reset.same</p> 19986 <!-- Testing: Setting size (not changing the value) resets canvas to transparent black --> 19987 <canvas id="c633" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas> 19988 <script> 19989 19990 19991 function test_initial_reset_same() { 19992 19993 var canvas = document.getElementById('c633'); 19994 var ctx = canvas.getContext('2d'); 19995 19996 canvas.width = 100; 19997 ctx.fillStyle = '#f00'; 19998 ctx.fillRect(0, 0, 50, 50); 19999 isPixel(ctx, 20,20, 255,0,0,255, 0); 20000 canvas.width = 100; 20001 isPixel(ctx, 20,20, 0,0,0,0, 0); 20002 20003 20004 } 20005 </script> 20006 20007 <!-- [[[ test_initial.reset.transform.html ]]] --> 20008 20009 <p>Canvas test: initial.reset.transform</p> 20010 <!-- Testing: Resetting the canvas state resets the current transformation matrix --> 20011 <canvas id="c634" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20012 <script> 20013 20014 20015 function test_initial_reset_transform() { 20016 20017 var canvas = document.getElementById('c634'); 20018 var ctx = canvas.getContext('2d'); 20019 20020 canvas.width = 100; 20021 ctx.scale(0, 0); 20022 canvas.width = 100; 20023 ctx.fillStyle = '#0f0'; 20024 ctx.fillRect(0, 0, 100, 50); 20025 isPixel(ctx, 20,20, 0,255,0,255, 0); 20026 20027 20028 } 20029 </script> 20030 20031 <!-- [[[ test_size.attributes.default.html ]]] --> 20032 20033 <p>Canvas test: size.attributes.default</p> 20034 <!-- Testing: Default width/height --> 20035 <canvas id="c635" ><p class="fallback">FAIL (fallback content)</p></canvas> 20036 <script> 20037 20038 function test_size_attributes_default() { 20039 20040 var canvas = document.getElementById('c635'); 20041 var ctx = canvas.getContext('2d'); 20042 20043 ok(canvas.width == 300, "canvas.width == 300"); 20044 ok(canvas.height == 150, "canvas.height == 150"); 20045 ok(!canvas.hasAttribute('width'), "!canvas.hasAttribute('width')"); 20046 ok(!canvas.hasAttribute('height'), "!canvas.hasAttribute('height')"); 20047 20048 20049 } 20050 </script> 20051 20052 <!-- [[[ test_size.attributes.html ]]] --> 20053 20054 <p>Canvas test: size.attributes</p> 20055 <!-- Testing: width/height DOM attributes and content attributes --> 20056 <canvas id="c636" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas> 20057 <script> 20058 20059 function test_size_attributes() { 20060 20061 var canvas = document.getElementById('c636'); 20062 var ctx = canvas.getContext('2d'); 20063 20064 ok(canvas.width == 120, "canvas.width == 120"); 20065 ok(canvas.height == 60, "canvas.height == 60"); 20066 ok(canvas.getAttribute('width') == 120, "canvas.getAttribute('width') == 120"); 20067 ok(canvas.getAttribute('height') == 60, "canvas.getAttribute('height') == 60"); 20068 20069 20070 } 20071 </script> 20072 20073 <!-- [[[ test_size.attributes.parse.badsuffix.html ]]] --> 20074 20075 <p>Canvas test: size.attributes.parse.badsuffix</p> 20076 <!-- Testing: Parsing of non-negative integers --> 20077 <canvas id="c637" width="100foo" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20078 <script> 20079 20080 function test_size_attributes_parse_badsuffix() { 20081 20082 var canvas = document.getElementById('c637'); 20083 var ctx = canvas.getContext('2d'); 20084 20085 is(canvas.width, 100, "canvas.width == 100"); 20086 20087 20088 } 20089 </script> 20090 20091 <!-- [[[ test_size.attributes.parse.floatsuffix.html ]]] --> 20092 20093 <p>Canvas test: size.attributes.parse.floatsuffix</p> 20094 <!-- Testing: Parsing of non-negative integers --> 20095 <canvas id="c638" width="100.9" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20096 <script> 20097 20098 function test_size_attributes_parse_floatsuffix() { 20099 20100 var canvas = document.getElementById('c638'); 20101 var ctx = canvas.getContext('2d'); 20102 20103 ok(canvas.width == 100, "canvas.width == 100"); 20104 20105 20106 } 20107 </script> 20108 20109 <!-- [[[ test_size.attributes.parse.negative.html ]]] --> 20110 20111 <p>Canvas test: size.attributes.parse.negative</p> 20112 <!-- Testing: Parsing of non-negative integers --> 20113 <canvas id="c639" width="-100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20114 <script> 20115 20116 function test_size_attributes_parse_negative() { 20117 20118 var canvas = document.getElementById('c639'); 20119 var ctx = canvas.getContext('2d'); 20120 20121 ok(canvas.width == 300, "canvas.width == 300"); 20122 20123 20124 } 20125 </script> 20126 20127 <!-- [[[ test_size.attributes.parse.nonnumber.html ]]] --> 20128 20129 <p>Canvas test: size.attributes.parse.nonnumber</p> 20130 <!-- Testing: Parsing of non-negative integers --> 20131 <canvas id="c640" width="foo" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20132 <script> 20133 20134 function test_size_attributes_parse_nonnumber() { 20135 20136 var canvas = document.getElementById('c640'); 20137 var ctx = canvas.getContext('2d'); 20138 20139 ok(canvas.width == 300, "canvas.width == 300"); 20140 20141 20142 } 20143 </script> 20144 20145 <!-- [[[ test_size.attributes.parse.percentsuffix.html ]]] --> 20146 20147 <p>Canvas test: size.attributes.parse.percentsuffix</p> 20148 <!-- Testing: Parsing of non-negative integers --> 20149 <canvas id="c641" width="100%" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20150 <script> 20151 20152 function test_size_attributes_parse_percentsuffix() { 20153 20154 var canvas = document.getElementById('c641'); 20155 var ctx = canvas.getContext('2d'); 20156 20157 ok(canvas.width == 100, "canvas.width == 100"); 20158 20159 20160 } 20161 </script> 20162 20163 <!-- [[[ test_size.attributes.parse.whitespace.html ]]] --> 20164 20165 <p>Canvas test: size.attributes.parse.whitespace</p> 20166 <!-- Testing: Parsing of non-negative integers --> 20167 <canvas id="c642" width=" 100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20168 <script> 20169 20170 function test_size_attributes_parse_whitespace() { 20171 20172 var canvas = document.getElementById('c642'); 20173 var ctx = canvas.getContext('2d'); 20174 20175 ok(canvas.width == 100, "canvas.width == 100"); 20176 20177 20178 } 20179 </script> 20180 20181 <!-- [[[ test_size.attributes.parse.zero.html ]]] --> 20182 20183 <p>Canvas test: size.attributes.parse.zero</p> 20184 <!-- Testing: Parsing of non-negative integers --> 20185 <canvas id="c643" width="0" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20186 <script> 20187 20188 function test_size_attributes_parse_zero() { 20189 20190 var canvas = document.getElementById('c643'); 20191 var ctx = canvas.getContext('2d'); 20192 20193 ok(canvas.width == 0, "canvas.width == 0"); 20194 20195 20196 } 20197 </script> 20198 20199 <!-- [[[ test_size.attributes.parse.zerosuffix.html ]]] --> 20200 20201 <p>Canvas test: size.attributes.parse.zerosuffix</p> 20202 <!-- Testing: Parsing of non-negative integers --> 20203 <canvas id="c644" width="100.0" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20204 <script> 20205 20206 function test_size_attributes_parse_zerosuffix() { 20207 20208 var canvas = document.getElementById('c644'); 20209 var ctx = canvas.getContext('2d'); 20210 20211 ok(canvas.width == 100, "canvas.width == 100"); 20212 20213 20214 } 20215 </script> 20216 20217 <!-- [[[ test_size.attributes.reflect.1.html ]]] --> 20218 20219 <p>Canvas test: size.attributes.reflect.1</p> 20220 <!-- Testing: Setting DOM attributes updates DOM and content attributes --> 20221 <canvas id="c645" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20222 <script> 20223 20224 function test_size_attributes_reflect_1() { 20225 20226 var canvas = document.getElementById('c645'); 20227 var ctx = canvas.getContext('2d'); 20228 20229 canvas.width = 120; 20230 canvas.height = 60; 20231 ok(canvas.getAttribute('width') == '120', "canvas.getAttribute('width') == '120'"); 20232 ok(canvas.getAttribute('height') == '60', "canvas.getAttribute('height') == '60'"); 20233 ok(canvas.width == 120, "canvas.width == 120"); 20234 ok(canvas.height == 60, "canvas.height == 60"); 20235 20236 20237 } 20238 </script> 20239 20240 <!-- [[[ test_size.attributes.reflect.2.html ]]] --> 20241 20242 <p>Canvas test: size.attributes.reflect.2</p> 20243 <!-- Testing: Setting content attributes updates DOM and content attributes --> 20244 <canvas id="c646" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20245 <script> 20246 20247 function test_size_attributes_reflect_2() { 20248 20249 var canvas = document.getElementById('c646'); 20250 var ctx = canvas.getContext('2d'); 20251 20252 canvas.setAttribute('width', '120'); 20253 canvas.setAttribute('height', '60'); 20254 ok(canvas.getAttribute('width') == '120', "canvas.getAttribute('width') == '120'"); 20255 ok(canvas.getAttribute('height') == '60', "canvas.getAttribute('height') == '60'"); 20256 ok(canvas.width == 120, "canvas.width == 120"); 20257 ok(canvas.height == 60, "canvas.height == 60"); 20258 20259 20260 } 20261 </script> 20262 20263 <!-- [[[ test_size.attributes.removed.html ]]] --> 20264 20265 <p>Canvas test: size.attributes.removed</p> 20266 <!-- Testing: Removing content attributes reverts to default size --> 20267 <canvas id="c647" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas> 20268 <script> 20269 20270 function test_size_attributes_removed() { 20271 20272 var canvas = document.getElementById('c647'); 20273 var ctx = canvas.getContext('2d'); 20274 20275 canvas.removeAttribute('width'); 20276 ok(canvas.width == 300, "canvas.width == 300"); 20277 20278 20279 } 20280 </script> 20281 20282 <!-- [[[ test_size.attributes.setAttribute.badsuffix.html ]]] --> 20283 20284 <p>Canvas test: size.attributes.setAttribute.badsuffix</p> 20285 <!-- Testing: Parsing of non-negative integers in setAttribute --> 20286 <canvas id="c648" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20287 <script> 20288 20289 function test_size_attributes_setAttribute_badsuffix() { 20290 20291 var canvas = document.getElementById('c648'); 20292 var ctx = canvas.getContext('2d'); 20293 20294 canvas.setAttribute('width', '100foo'); 20295 is(canvas.width, 100, "canvas.width == 100"); 20296 20297 20298 } 20299 </script> 20300 20301 <!-- [[[ test_size.attributes.setAttribute.floatsuffix.html ]]] --> 20302 20303 <p>Canvas test: size.attributes.setAttribute.floatsuffix</p> 20304 <!-- Testing: Parsing of non-negative integers in setAttribute --> 20305 <canvas id="c649" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20306 <script> 20307 20308 function test_size_attributes_setAttribute_floatsuffix() { 20309 20310 var canvas = document.getElementById('c649'); 20311 var ctx = canvas.getContext('2d'); 20312 20313 canvas.setAttribute('width', '1'); 20314 canvas.setAttribute('width', '100.9'); 20315 ok(canvas.width == 100, "canvas.width == 100"); 20316 20317 20318 } 20319 </script> 20320 20321 <!-- [[[ test_size.attributes.setAttribute.negative.html ]]] --> 20322 20323 <p>Canvas test: size.attributes.setAttribute.negative</p> 20324 <!-- Testing: Parsing of non-negative integers in setAttribute --> 20325 <canvas id="c650" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20326 <script> 20327 20328 function test_size_attributes_setAttribute_negative() { 20329 20330 var canvas = document.getElementById('c650'); 20331 var ctx = canvas.getContext('2d'); 20332 20333 canvas.setAttribute('width', '-100'); 20334 ok(canvas.width == 300, "canvas.width == 300"); 20335 20336 20337 } 20338 </script> 20339 20340 <!-- [[[ test_size.attributes.setAttribute.nonnumber.html ]]] --> 20341 20342 <p>Canvas test: size.attributes.setAttribute.nonnumber</p> 20343 <!-- Testing: Parsing of non-negative integers in setAttribute --> 20344 <canvas id="c651" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20345 <script> 20346 20347 function test_size_attributes_setAttribute_nonnumber() { 20348 20349 var canvas = document.getElementById('c651'); 20350 var ctx = canvas.getContext('2d'); 20351 20352 canvas.setAttribute('width', 'foo'); 20353 ok(canvas.width == 300, "canvas.width == 300"); 20354 20355 20356 } 20357 </script> 20358 20359 <!-- [[[ test_size.attributes.setAttribute.percentsuffix.html ]]] --> 20360 20361 <p>Canvas test: size.attributes.setAttribute.percentsuffix</p> 20362 <!-- Testing: Parsing of non-negative integers in setAttribute --> 20363 <canvas id="c652" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20364 <script> 20365 20366 function test_size_attributes_setAttribute_percentsuffix() { 20367 20368 var canvas = document.getElementById('c652'); 20369 var ctx = canvas.getContext('2d'); 20370 20371 canvas.setAttribute('width', '100%'); 20372 ok(canvas.width == 100, "canvas.width == 100"); 20373 20374 20375 } 20376 </script> 20377 20378 <!-- [[[ test_size.attributes.setAttribute.whitespace.html ]]] --> 20379 20380 <p>Canvas test: size.attributes.setAttribute.whitespace</p> 20381 <!-- Testing: Parsing of non-negative integers in setAttribute --> 20382 <canvas id="c653" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20383 <script> 20384 20385 function test_size_attributes_setAttribute_whitespace() { 20386 20387 var canvas = document.getElementById('c653'); 20388 var ctx = canvas.getContext('2d'); 20389 20390 canvas.setAttribute('width', ' 100'); 20391 ok(canvas.width == 100, "canvas.width == 100"); 20392 20393 20394 } 20395 </script> 20396 20397 <!-- [[[ test_size.attributes.setAttribute.zero.html ]]] --> 20398 20399 <p>Canvas test: size.attributes.setAttribute.zero</p> 20400 <!-- Testing: Parsing of non-negative integers in setAttribute --> 20401 <canvas id="c654" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20402 <script> 20403 20404 function test_size_attributes_setAttribute_zero() { 20405 20406 var canvas = document.getElementById('c654'); 20407 var ctx = canvas.getContext('2d'); 20408 20409 canvas.setAttribute('width', '0'); 20410 ok(canvas.width == 0, "canvas.width == 0"); 20411 20412 20413 } 20414 </script> 20415 20416 <!-- [[[ test_size.attributes.setAttribute.zerosuffix.html ]]] --> 20417 20418 <p>Canvas test: size.attributes.setAttribute.zerosuffix</p> 20419 <!-- Testing: Parsing of non-negative integers in setAttribute --> 20420 <canvas id="c655" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20421 <script> 20422 20423 function test_size_attributes_setAttribute_zerosuffix() { 20424 20425 var canvas = document.getElementById('c655'); 20426 var ctx = canvas.getContext('2d'); 20427 20428 canvas.setAttribute('width', '1'); 20429 canvas.setAttribute('width', '100.0'); 20430 ok(canvas.width == 100, "canvas.width == 100"); 20431 20432 20433 } 20434 </script> 20435 20436 <!-- [[[ test_size.attributes.style.html ]]] --> 20437 20438 <p>Canvas test: size.attributes.style</p> 20439 <!-- Testing: Canvas size is independent of CSS resizing --> 20440 <canvas id="c656" width="50" height="30" style="width: 100px; height: 50px"><p class="fallback">FAIL (fallback content)</p></canvas> 20441 <script> 20442 20443 function test_size_attributes_style() { 20444 20445 var canvas = document.getElementById('c656'); 20446 var ctx = canvas.getContext('2d'); 20447 20448 ok(canvas.width == 50, "canvas.width == 50"); 20449 ok(canvas.height == 30, "canvas.height == 30"); 20450 20451 20452 } 20453 </script> 20454 20455 <!-- [[[ test_size.attributes.type.get.html ]]] --> 20456 20457 <p>Canvas test: size.attributes.type.get</p> 20458 <!-- Testing: width/height DOM/content attributes - string vs number types --> 20459 <canvas id="c657" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas> 20460 <script> 20461 20462 function test_size_attributes_type_get() { 20463 20464 var canvas = document.getElementById('c657'); 20465 var ctx = canvas.getContext('2d'); 20466 20467 ok(canvas.width === 120, "canvas.width === 120"); 20468 ok(canvas.height === 60, "canvas.height === 60"); 20469 ok(canvas.getAttribute('width') === '120', "canvas.getAttribute('width') === '120'"); 20470 ok(canvas.getAttribute('height') === '60', "canvas.getAttribute('height') === '60'"); 20471 20472 20473 } 20474 </script> 20475 20476 <!-- [[[ test_size.attributes.type.set.html ]]] --> 20477 20478 <p>Canvas test: size.attributes.type.set</p> 20479 <!-- Testing: Setting width/height DOM attributes --> 20480 <canvas id="c658" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20481 <script> 20482 20483 function test_size_attributes_type_set() { 20484 20485 var canvas = document.getElementById('c658'); 20486 var ctx = canvas.getContext('2d'); 20487 20488 canvas.width = 120; 20489 canvas.height = 60; 20490 ok(canvas.width === 120, "canvas.width === 120"); 20491 ok(canvas.height === 60, "canvas.height === 60"); 20492 20493 20494 } 20495 </script> 20496 20497 <!-- [[[ test_text.font.html ]]] --> 20498 20499 <p>Canvas test: text.font</p> 20500 <canvas id="c659" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20501 <script> 20502 var _deferred = true; 20503 20504 function test_text_font() { 20505 20506 var canvas = document.getElementById('c659'); 20507 var ctx = canvas.getContext('2d'); 20508 20509 is(ctx.font, '10px sans-serif', "default font is not '10px sans-serif'"); 20510 20511 ctx.save(); 20512 ctx.font = '18pt serif'; 20513 is(ctx.font, '24px serif', 'font getter returns incorrect value'); 20514 20515 ctx.restore(); 20516 is(ctx.font, '10px sans-serif', 'font not being stored in the context state'); 20517 20518 if (!_deferred) SimpleTest.finish(); 20519 } 20520 </script> 20521 20522 <!-- [[[ test_text.measure.html ]]] --> 20523 20524 <p>Canvas test: text.measure</p> 20525 <canvas id="c660" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20526 <script> 20527 var _deferred = true; 20528 20529 function test_text_measure() { 20530 20531 var canvas = document.getElementById('c660'); 20532 var ctx = canvas.getContext('2d'); 20533 20534 ctx.font = "10px sans-serif"; 20535 ctx.textAlign = "left"; 20536 ctx.textBaseline = "top"; 20537 20538 var str = 'Test String'; 20539 var wid = ctx.measureText(str).width; 20540 20541 ok(wid > 0, "measureText returns nonpositive value for non-empty string"); 20542 20543 ctx.font = "20px sans-serif"; 20544 isnot(wid, ctx.measureText(str).width, "measureText does not change with a different font size"); 20545 20546 ctx.font = "10px sans-serif"; 20547 ctx.textAlign = "center"; 20548 ctx.textBaseline = "alphabetic"; 20549 20550 is(wid, ctx.measureText(str).width, "measureText changes when alignement/baseline is changed"); 20551 20552 20553 if (!_deferred) SimpleTest.finish(); 20554 } 20555 </script> 20556 20557 <!-- [[[ test_text.space.replace.html ]]] --> 20558 20559 <p>Canvas test: text.space.replace</p> 20560 <canvas id="c661" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20561 <script> 20562 var _deferred = true; 20563 20564 function test_text_space_replace() { 20565 20566 var canvas = document.getElementById('c661'); 20567 var ctx = canvas.getContext('2d'); 20568 20569 var swid = ctx.measureText(' ').width; 20570 ctx.font = "10px sans-serif"; 20571 20572 isnot(swid, 0.0, "measureText reutuns zero for a non-empty string"); 20573 is(swid, ctx.measureText('\x09').width, "measureText does not replace whitespace char with a space"); 20574 is(swid, ctx.measureText('\x0A').width, "measureText does not replace whitespace char with a space"); 20575 is(swid, ctx.measureText('\x0B').width, "measureText does not replace whitespace char with a space"); 20576 is(swid, ctx.measureText('\x0C').width, "measureText does not replace whitespace char with a space"); 20577 is(swid, ctx.measureText('\x0D').width, "measureText does not replace whitespace char with a space"); 20578 20579 if (!_deferred) SimpleTest.finish(); 20580 } 20581 </script> 20582 20583 <!-- [[[ test_text.textAlign.html ]]] --> 20584 20585 <p>Canvas test: text.textAlign</p> 20586 <canvas id="c662" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20587 <script> 20588 var _deferred = true; 20589 20590 function test_text_textAlign() { 20591 20592 var canvas = document.getElementById('c662'); 20593 var ctx = canvas.getContext('2d'); 20594 20595 is(ctx.textAlign, 'start', "default textAlign is not 'start'"); 20596 20597 ctx.save(); 20598 ctx.textAlign = 'end'; 20599 is(ctx.textAlign, 'end', 'textAlign getter returns incorrect value'); 20600 20601 ctx.save(); 20602 ctx.textAlign = 'left'; 20603 is(ctx.textAlign, 'left', 'textAlign getter returns incorrect value'); 20604 20605 ctx.save(); 20606 ctx.textAlign = 'center'; 20607 is(ctx.textAlign, 'center', 'textAlign getter returns incorrect value'); 20608 20609 ctx.save(); 20610 ctx.textAlign = 'right'; 20611 is(ctx.textAlign, 'right', 'textAlign getter returns incorrect value'); 20612 20613 ctx.save(); 20614 ctx.textAlign = 'start'; 20615 is(ctx.textAlign, 'start', 'textAlign getter returns incorrect value'); 20616 20617 ctx.restore(); 20618 is(ctx.textAlign, 'right', 'textAlign not being stored in the context state'); 20619 20620 ctx.restore(); 20621 is(ctx.textAlign, 'center', 'textAlign not being stored in the context state'); 20622 20623 ctx.restore(); 20624 is(ctx.textAlign, 'left', 'textAlign not being stored in the context state'); 20625 20626 ctx.restore(); 20627 is(ctx.textAlign, 'end', 'textAlign not being stored in the context state'); 20628 20629 ctx.restore(); 20630 is(ctx.textAlign, 'start', 'textAlign not being stored in the context state'); 20631 20632 if (!_deferred) SimpleTest.finish(); 20633 } 20634 </script> 20635 20636 <!-- [[[ test_text.textBaseline.html ]]] --> 20637 20638 <p>Canvas test: text.textBaseline</p> 20639 <canvas id="c663" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20640 <script> 20641 var _deferred = true; 20642 20643 function test_text_textBaseline() { 20644 20645 var canvas = document.getElementById('c663'); 20646 var ctx = canvas.getContext('2d'); 20647 20648 is(ctx.textBaseline, 'alphabetic', "default textBaseline is not 'alphabetic'"); 20649 20650 ctx.save(); 20651 ctx.textBaseline = 'ideographic'; 20652 is(ctx.textBaseline, 'ideographic', 'textBaseline getter returns incorrect value'); 20653 20654 ctx.save(); 20655 ctx.textBaseline = 'top'; 20656 is(ctx.textBaseline, 'top', 'textBaseline getter returns incorrect value'); 20657 20658 ctx.save(); 20659 ctx.textBaseline = 'middle'; 20660 is(ctx.textBaseline, 'middle', 'textBaseline getter returns incorrect value'); 20661 20662 ctx.save(); 20663 ctx.textBaseline = 'bottom'; 20664 is(ctx.textBaseline, 'bottom', 'textBaseline getter returns incorrect value'); 20665 20666 ctx.save(); 20667 ctx.textBaseline = 'hanging'; 20668 is(ctx.textBaseline, 'hanging', 'textBaseline getter returns incorrect value'); 20669 20670 ctx.save(); 20671 ctx.textBaseline = 'alphabetic'; 20672 is(ctx.textBaseline, 'alphabetic', 'textBaseline getter returns incorrect value'); 20673 20674 ctx.restore(); 20675 is(ctx.textBaseline, 'hanging', 'textBaseline not being stored in the context state'); 20676 20677 ctx.restore(); 20678 is(ctx.textBaseline, 'bottom', 'textBaseline not being stored in the context state'); 20679 20680 ctx.restore(); 20681 is(ctx.textBaseline, 'middle', 'textBaseline not being stored in the context state'); 20682 20683 ctx.restore(); 20684 is(ctx.textBaseline, 'top', 'textBaseline not being stored in the context state'); 20685 20686 ctx.restore(); 20687 is(ctx.textBaseline, 'ideographic', 'textBaseline not being stored in the context state'); 20688 20689 ctx.restore(); 20690 is(ctx.textBaseline, 'alphabetic', 'textBaseline not being stored in the context state'); 20691 20692 if (!_deferred) SimpleTest.finish(); 20693 } 20694 </script> 20695 20696 <!-- [[[ test_toDataURL.arguments.1.html ]]] --> 20697 20698 <p>Canvas test: toDataURL.arguments.1 - bug 401795</p> 20699 <!-- Testing: toDataURL ignores extra arguments --> 20700 <canvas id="c664" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20701 <script> 20702 20703 function test_toDataURL_arguments_1() { 20704 20705 var canvas = document.getElementById('c664'); 20706 var ctx = canvas.getContext('2d'); 20707 20708 var _thrown_outer = false; 20709 try { 20710 20711 var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception'); 20712 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/"); 20713 20714 } catch (e) { 20715 _thrown_outer = true; 20716 } 20717 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 20718 20719 20720 } 20721 </script> 20722 20723 <!-- [[[ test_toDataURL.arguments.2.html ]]] --> 20724 20725 <p>Canvas test: toDataURL.arguments.2 - bug 401795</p> 20726 <!-- Testing: toDataURL ignores extra arguments --> 20727 <canvas id="c665" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20728 <script> 20729 20730 function test_toDataURL_arguments_2() { 20731 20732 var canvas = document.getElementById('c665'); 20733 var ctx = canvas.getContext('2d'); 20734 20735 var _thrown_outer = false; 20736 try { 20737 20738 var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception', 'and another'); 20739 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/"); 20740 20741 } catch (e) { 20742 _thrown_outer = true; 20743 } 20744 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 20745 20746 20747 } 20748 </script> 20749 20750 <!-- [[[ test_toDataURL.arguments.3.html ]]] --> 20751 20752 <p>Canvas test: toDataURL.arguments.3 - bug 401795</p> 20753 <!-- Testing: toDataURL ignores extra arguments --> 20754 <canvas id="c666" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20755 <script> 20756 20757 function test_toDataURL_arguments_3() { 20758 20759 var canvas = document.getElementById('c666'); 20760 var ctx = canvas.getContext('2d'); 20761 20762 var _thrown_outer = false; 20763 try { 20764 20765 // More arguments that should not raise exceptions 20766 var data = canvas.toDataURL('image/png', null, null, null); 20767 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/"); 20768 20769 } catch (e) { 20770 _thrown_outer = true; 20771 } 20772 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 20773 20774 20775 } 20776 </script> 20777 20778 <!-- [[[ test_toDataURL.complexcolours.html ]]] --> 20779 20780 <p>Canvas test: toDataURL.complexcolours</p> 20781 <!-- Testing: toDataURL handles non-primary and non-solid colours correctly --> 20782 <canvas id="c667" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20783 <script> 20784 20785 var canvas667 = document.getElementById('c667'); 20786 var ctx667 = canvas667.getContext('2d'); 20787 20788 function test_toDataURL_complexcolours() { 20789 20790 // (These values are chosen to survive relatively alright through being premultiplied) 20791 ctx667.fillStyle = 'rgba(1, 3, 254, 1)'; 20792 ctx667.fillRect(0, 0, 25, 25); 20793 ctx667.fillStyle = 'rgba(8, 252, 248, 0.75)'; 20794 ctx667.fillRect(25, 0, 25, 25); 20795 ctx667.fillStyle = 'rgba(6, 10, 250, 0.502)'; 20796 ctx667.fillRect(50, 0, 25, 25); 20797 ctx667.fillStyle = 'rgba(12, 16, 244, 0.25)'; 20798 ctx667.fillRect(75, 0, 25, 25); 20799 var img = new Image(); 20800 deferTest(); 20801 img.onload = wrapFunction(function () 20802 { 20803 ctx667.drawImage(img, 0, 25); 20804 // (The alpha values do not really survive float->int conversion, so just 20805 // do approximate comparisons) 20806 isPixel(ctx667, 12,40, 1,3,254,255, 0); 20807 isPixel(ctx667, 37,40, 8,252,248,191, 2); 20808 isPixel(ctx667, 62,40, 6,10,250,127, 4); 20809 isPixel(ctx667, 87,40, 12,16,244,63, 8); 20810 }); 20811 img.src = canvas667.toDataURL(); 20812 20813 20814 } 20815 </script> 20816 20817 <!-- [[[ test_toDataURL.default.html ]]] --> 20818 20819 <p>Canvas test: toDataURL.default</p> 20820 <!-- Testing: toDataURL with no arguments returns a PNG --> 20821 <canvas id="c668" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20822 <script> 20823 20824 function test_toDataURL_default() { 20825 20826 var canvas = document.getElementById('c668'); 20827 var ctx = canvas.getContext('2d'); 20828 20829 var data = canvas.toDataURL(); 20830 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/"); 20831 20832 20833 } 20834 </script> 20835 20836 <!-- [[[ test_toDataURL.lowercase.html ]]] --> 20837 20838 <p>Canvas test: toDataURL.lowercase - bug 401795</p> 20839 <!-- Testing: toDataURL type is case-sensitive --> 20840 <canvas id="c669" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20841 <script> 20842 20843 function test_toDataURL_lowercase() { 20844 20845 var canvas = document.getElementById('c669'); 20846 var ctx = canvas.getContext('2d'); 20847 20848 var _thrown_outer = false; 20849 try { 20850 20851 var data = canvas.toDataURL('ImAgE/PnG'); 20852 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/"); 20853 20854 } catch (e) { 20855 _thrown_outer = true; 20856 } 20857 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 20858 20859 20860 } 20861 </script> 20862 20863 <!-- [[[ test_toDataURL.nocontext.html ]]] --> 20864 20865 <p>Canvas test: toDataURL.nocontext</p> 20866 <!-- Testing: toDataURL works before any context has been got --> 20867 <canvas id="c670" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20868 <script> 20869 20870 function test_toDataURL_nocontext() { 20871 20872 var canvas = document.getElementById('c670'); 20873 var ctx = canvas.getContext('2d'); 20874 20875 var canvas2 = document.createElement('canvas'); 20876 20877 var data = canvas2.toDataURL(); 20878 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/"); 20879 20880 20881 } 20882 </script> 20883 20884 <!-- [[[ test_toDataURL.png.html ]]] --> 20885 20886 <p>Canvas test: toDataURL.png</p> 20887 <!-- Testing: toDataURL with image/png returns a PNG --> 20888 <canvas id="c671" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20889 <script> 20890 20891 function test_toDataURL_png() { 20892 20893 var canvas = document.getElementById('c671'); 20894 var ctx = canvas.getContext('2d'); 20895 20896 var data = canvas.toDataURL('image/png'); 20897 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/"); 20898 20899 20900 } 20901 </script> 20902 20903 <!-- [[[ test_toDataURL.primarycolours.html ]]] --> 20904 20905 <p>Canvas test: toDataURL.primarycolours</p> 20906 <!-- Testing: toDataURL handles simple colours correctly --> 20907 <canvas id="c672" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20908 <script> 20909 20910 20911 var canvas672 = document.getElementById('c672'); 20912 var ctx672 = canvas672.getContext('2d'); 20913 20914 function test_toDataURL_primarycolours() { 20915 20916 ctx672.fillStyle = '#ff0'; 20917 ctx672.fillRect(0, 0, 25, 40); 20918 ctx672.fillStyle = '#0ff'; 20919 ctx672.fillRect(25, 0, 50, 40); 20920 ctx672.fillStyle = '#00f'; 20921 ctx672.fillRect(75, 0, 25, 40); 20922 ctx672.fillStyle = '#fff'; 20923 ctx672.fillRect(0, 40, 100, 10); 20924 var data = canvas672.toDataURL(); 20925 ctx672.fillStyle = '#f00'; 20926 ctx672.fillRect(0, 0, 100, 50); 20927 var img = new Image(); 20928 deferTest(); 20929 img.onload = wrapFunction(function () 20930 { 20931 ctx672.drawImage(img, 0, 0); 20932 isPixel(ctx672, 12,20, 255,255,0,255, 0); 20933 isPixel(ctx672, 50,20, 0,255,255,255, 0); 20934 isPixel(ctx672, 87,20, 0,0,255,255, 0); 20935 isPixel(ctx672, 50,45, 255,255,255,255, 0); 20936 }); 20937 img.src = data; 20938 20939 20940 } 20941 </script> 20942 20943 <!-- [[[ test_toDataURL.unrecognised.html ]]] --> 20944 20945 <p>Canvas test: toDataURL.unrecognised - bug 401795</p> 20946 <!-- Testing: toDataURL with an unhandled type returns a PNG --> 20947 <canvas id="c673" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20948 <script> 20949 20950 function test_toDataURL_unrecognised() { 20951 20952 var canvas = document.getElementById('c673'); 20953 var ctx = canvas.getContext('2d'); 20954 20955 var _thrown_outer = false; 20956 try { 20957 20958 var data = canvas.toDataURL('image/example'); 20959 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/"); 20960 20961 } catch (e) { 20962 _thrown_outer = true; 20963 } 20964 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 20965 20966 20967 } 20968 </script> 20969 20970 <!-- [[[ test_toDataURL.zerosize.html ]]] --> 20971 20972 <p>Canvas test: toDataURL.zerosize</p> 20973 <!-- Testing: toDataURL on zero-size canvas returns 'data:,' --> 20974 <canvas id="c674" width="0" height="0"><p class="fallback">FAIL (fallback content)</p></canvas> 20975 <script> 20976 20977 function test_toDataURL_zerosize() { 20978 20979 var canvas = document.getElementById('c674'); 20980 var ctx = canvas.getContext('2d'); 20981 20982 var data = canvas.toDataURL(); 20983 ok(data === 'data:,', "data === 'data:,'"); 20984 20985 20986 } 20987 </script> 20988 20989 <!-- [[[ test_type.exists.html ]]] --> 20990 20991 <p>Canvas test: type.exists</p> 20992 <!-- Testing: HTMLCanvasElement is a property of window --> 20993 <canvas id="c676" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 20994 <script> 20995 20996 function test_type_exists() { 20997 20998 var canvas = document.getElementById('c676'); 20999 var ctx = canvas.getContext('2d'); 21000 21001 ok(window.HTMLCanvasElement, "window.HTMLCanvasElement"); 21002 21003 21004 } 21005 </script> 21006 21007 <!-- [[[ test_type.extend.html ]]] --> 21008 21009 <p>Canvas test: type.extend</p> 21010 <!-- Testing: HTMLCanvasElement methods can be added, and the new methods used by canvases --> 21011 <canvas id="c677" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21012 <script> 21013 21014 function test_type_extend() { 21015 21016 var canvas = document.getElementById('c677'); 21017 var ctx = canvas.getContext('2d'); 21018 21019 window.HTMLCanvasElement.prototype.getZero = function () { return 0; }; 21020 ok(canvas.getZero() === 0, "canvas.getZero() === 0"); 21021 21022 21023 } 21024 </script> 21025 21026 <!-- [[[ test_type.name.html ]]] --> 21027 21028 <p>Canvas test: type.name</p> 21029 <!-- Testing: HTMLCanvasElement type and toString --> 21030 <canvas id="c678" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21031 <script> 21032 21033 function test_type_name() { 21034 21035 var canvas = document.getElementById('c678'); 21036 var ctx = canvas.getContext('2d'); 21037 21038 ok(Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]', "Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]'"); 21039 21040 21041 } 21042 </script> 21043 21044 <!-- [[[ test_type.prototype.html ]]] --> 21045 21046 <p>Canvas test: type.prototype</p> 21047 <!-- Testing: window.HTMLCanvasElement has prototype, which is { ReadOnly, DontDelete }. prototype has getContext, which is not --> 21048 <canvas id="c679" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21049 <script> 21050 21051 function test_type_prototype() { 21052 21053 var canvas = document.getElementById('c679'); 21054 var ctx = canvas.getContext('2d'); 21055 21056 ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype"); 21057 ok(window.HTMLCanvasElement.prototype.getContext, "window.HTMLCanvasElement.prototype.getContext"); 21058 window.HTMLCanvasElement.prototype = null; 21059 ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype"); 21060 delete window.HTMLCanvasElement.prototype; 21061 ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype"); 21062 var getContext = window.HTMLCanvasElement.prototype.getContext; 21063 window.HTMLCanvasElement.prototype.getContext = 1; 21064 ok(window.HTMLCanvasElement.prototype.getContext === 1, "window.HTMLCanvasElement.prototype.getContext === 1"); 21065 delete window.HTMLCanvasElement.prototype.getContext; 21066 ok(window.HTMLCanvasElement.prototype.getContext === undefined, "window.HTMLCanvasElement.prototype.getContext === undefined"); 21067 window.HTMLCanvasElement.prototype.getContext = getContext; 21068 21069 21070 } 21071 </script> 21072 21073 <!-- [[[ test_type.replace.html ]]] --> 21074 21075 <p>Canvas test: type.replace</p> 21076 <!-- Testing: HTMLCanvasElement methods can be replaced, and the replacement methods used by canvases --> 21077 <canvas id="c680" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21078 <script> 21079 21080 function test_type_replace() { 21081 21082 var canvas = document.getElementById('c680'); 21083 var ctx = canvas.getContext('2d'); 21084 21085 var getContext = window.HTMLCanvasElement.prototype.getContext; 21086 window.HTMLCanvasElement.prototype.getContext = function (name) { return 0; }; 21087 ok(canvas.getContext('2d') === 0, "canvas.getContext('2d') === 0"); 21088 window.HTMLCanvasElement.prototype.getContext = getContext; 21089 21090 21091 } 21092 </script> 21093 21094 <!-- [[[ test_2d.imagedata_coercion.html ]]] --> 21095 21096 <p>Canvas test: 2d.imagedata_coercion</p> 21097 <!-- Testing: imagedata coerced correctly on set --> 21098 <canvas id="c681" width="100" height="1"><p class="fallback">FAIL (fallback content)</p></canvas> 21099 <script> 21100 21101 /* NOTE: Due to round-tripping through premultiplied values and the rounding 21102 that ensues, values of alpha < 255 will tend to do weird things. In 21103 particular, the premultiplied color values are computed by multiplying by a, 21104 dividing by 255, then always rounding up. The conversion the other way is done 21105 by multiplying by 255/a and rounding down. So if 21106 21107 255/a * (amount added when rounding) > 1 21108 21109 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 21110 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. */ 21111 21112 /* Our tests. Each test has two arrays: the array of values to set and the 21113 array of values that should read back as a result. */ 21114 var tests = [ 21115 [ 21116 [ 0, 1, 3, 250 ], [ 0, 1, 3, 250 ] 21117 ], 21118 [ 21119 [ 0, 1, 2, 250, 4, 5, 6, 250 ], [ 0, 1, 2, 250, 4, 5, 6, 250 ] 21120 ], 21121 [ 21122 [ 0, 1000, 2, 300, 400, 5, 600, 250 ], [ 0, 255, 2, 255, 255, 5, 255, 250 ] 21123 ], 21124 [ 21125 [ -10, -5, NaN, 250, 4, 5, 6, -250 ], [ 0, 0, 0, 250, 0, 0, 0, 0 ] 21126 ], 21127 [ 21128 [ 0.5, 12.2, 12.8, 251.5, 12.5, 13.5, 13.2, 250.5 ], 21129 [ 0, 12, 13, 252, 12, 14, 13, 250 ] 21130 ] 21131 ]; 21132 21133 function doTest(type, idx) { 21134 var testPair = tests[idx]; 21135 var test = testPair[0]; 21136 var ref = testPair[1]; 21137 var descSuffix = " for " + type + " test #" + (idx+1); 21138 function myIs(a, b, str) { 21139 is(a, b, str + descSuffix); 21140 } 21141 21142 myIs(test.length, ref.length, "Length mismatch"); 21143 myIs(test.length % 4, 0, "Length not a multiple of 4"); 21144 var pixels = test.length / 4; 21145 var imageData = ctx681.createImageData(pixels, 1); 21146 myIs(imageData.width, pixels, "Incorrect created data width"); 21147 myIs(imageData.height, 1, "Incorrect created data height"); 21148 myIs(imageData.data.length, test.length, 21149 "Incorrect length in created image data"); 21150 21151 ctx681.putImageData(imageData, 0, 0); 21152 var testImageData = ctx681.getImageData(0, 0, pixels, 1); 21153 myIs(testImageData.data.length, test.length, 21154 "Incorrect length in test image data after clearing pixels"); 21155 var j; 21156 for (j = 0; j < testImageData.data.length; ++j) { 21157 myIs(testImageData.data[j], 0, 21158 "Nonzero value at position " + j + " in test image data " + 21159 "after clearing pixels"); 21160 } 21161 for (j = 0; j < imageData.data.length; ++j) { 21162 imageData.data[j] = test[j]; 21163 } 21164 if (type == "slow") { 21165 // convert to a non-dense array so we can test that codepath 21166 imageData.data.makeMeSlow = 1; 21167 } 21168 ctx681.putImageData(imageData, 0, 0); 21169 testImageData = ctx681.getImageData(0, 0, pixels, 1); 21170 myIs(testImageData.data.length, test.length, 21171 "Incorrect length in test image data after putting our imagedata"); 21172 for (j = 0; j < testImageData.data.length; ++j) { 21173 myIs(testImageData.data[j], ref[j], 21174 "Incorrect value at position " + j + " in test image data " + 21175 "after putting our imagedata"); 21176 } 21177 } 21178 21179 function doTests(type) { 21180 for (var i = 0; i < tests.length; ++i) { 21181 doTest(type, i); 21182 } 21183 } 21184 21185 var canvas681; 21186 var ctx681; 21187 21188 function test_2d_imagedata_coercion() { 21189 21190 canvas681 = document.getElementById('c681'); 21191 ctx681 = canvas681.getContext('2d'); 21192 21193 doTests("fast"); 21194 doTests("slow"); 21195 21196 } 21197 </script> 21198 21199 <!-- [[[ test_2d.imageSmoothing.html ]]] --> 21200 21201 <p>Canvas test: 2d.imageRenderingQuality</p> 21202 <canvas id="c682" width="10" height="10"></canvas><br> 21203 <canvas style="visibility: hidden" id="c683" width="2" height="2"></canvas> 21204 <script type="text/javascript"> 21205 21206 function setup_test_2d_imageSmoothing() { 21207 var c683 = document.getElementById("c683"); 21208 var cx683 = c683.getContext("2d"); 21209 21210 cx683.fillStyle = "red"; 21211 cx683.fillRect(0, 0, 2, 2); 21212 21213 cx683.fillStyle = "rgb(0,255,0)"; 21214 cx683.fillRect(0, 0, 1, 1); 21215 } 21216 21217 function test_2d_imageSmoothing() { 21218 setup_test_2d_imageSmoothing(); 21219 21220 var c682 = document.getElementById("c682"); 21221 var c683 = document.getElementById("c683"); 21222 21223 var cx682 = c682.getContext("2d"); 21224 21225 ok(cx682.imageSmoothingEnabled == true, "initial imageSmoothingEnabled is true"); 21226 21227 // check that imageSmoothingEnabled is part of the context 21228 cx682.save(); 21229 cx682.imageSmoothingEnabled = false; 21230 ok(cx682.imageSmoothingEnabled == false, "imageSmoothingEnabled is false after setting"); 21231 cx682.restore(); 21232 ok(cx682.imageSmoothingEnabled == true, "imageSmoothingEnabled is true after restore"); 21233 21234 // check that false works 21235 cx682.imageSmoothingEnabled = false; 21236 21237 cx682.scale(10,10); 21238 cx682.drawImage(c683, 0, 0); 21239 21240 // this should be all red 21241 var data = cx682.getImageData(9, 9, 1, 1); 21242 var pixels = data.data; 21243 ok (pixels[0] == 0 && 21244 pixels[1] == 255 && 21245 pixels[2] == 0 && 21246 pixels[3] == 255, 21247 "pixel is [" + pixels.toString() + "] (expected [0,255,0,255])"); 21248 } 21249 21250 </script> 21251 21252 <p>Canvas test: zero_dimensions</p> 21253 <canvas id="c684" width="0" height="0"></canvas> 21254 <script type="text/javascript"> 21255 function test_zero_dimensions() { 21256 var c = document.getElementById("c684"); 21257 ok(c.width == 0, "c.width not 0"); 21258 ok(c.height == 0, "c.height not 0"); 21259 } 21260 </script> 21261 21262 <p>Canvas test: zero_dimensions_image_data</p> 21263 <canvas id="c685" width="0" height="0"></canvas> 21264 <script type="text/javascript"> 21265 function test_zero_dimensions_imagedata() { 21266 var c = document.getElementById("c685"); 21267 var ctx = c.getContext("2d"); 21268 ctx.fillStyle = "blue"; 21269 ctx.fillRect(0, 0, 100, 100); 21270 var imgdata = ctx.getImageData(0, 0, 100, 100); 21271 var isTransparentBlack = true; 21272 for (var i = 0; i < imgdata.data.length; ++i) 21273 if (imgdata.data[i] !== 0) 21274 isTransparentBlack = false; 21275 ok(isTransparentBlack, "isTransparentBlack"); 21276 } 21277 </script> 21278 21279 <p>Canvas test: getImageData_after_zero_canvas</p> 21280 <canvas id="c686" width="100" height="100"></canvas> 21281 <script type="text/javascript"> 21282 function test_getImageData_after_zero_canvas() { 21283 var c = document.getElementById("c686"); 21284 var ctx = c.getContext("2d"); 21285 ctx.fillStyle = "rgba(0, 0, 0, 1.0)"; 21286 ctx.fillRect(0, 0, c.width, c.height); 21287 var oldimgdata = ctx.getImageData(0, 0, c.width, c.height); 21288 c.width = c.height = 0; 21289 c.width = c.height = 100; 21290 ctx.fillRect(0, 0, c.width, c.height); 21291 var imgdata = ctx.getImageData(0, 0, c.width, c.height); 21292 var same = false; 21293 ok(imgdata.data.length === oldimgdata.data.length, "not the same length"); 21294 for (var i = 0; i < imgdata.data.length; ++i) 21295 same = imgdata.data[i] === oldimgdata.data[i]; 21296 ok(same, "changing dimensions broke canvas"); 21297 } 21298 </script> 21299 21300 <p>Canvas test: test_opaque</p> 21301 <canvas id="c688" width="150" height="50"></canvas> 21302 <script type="text/javascript"> 21303 21304 function test_opaque() { 21305 var c = document.getElementById("c688"); 21306 var ctx = c.getContext("2d", {alpha: false}); 21307 ctx.fillStyle = "green"; 21308 ctx.fillRect(0,0,10,10); 21309 ctx.fillStyle = "rgba(255,0,0,.5)"; 21310 ctx.fillRect(10,0,10,10); 21311 21312 isPixel(ctx, 20, 20, 0, 0, 0, 255, 0); 21313 isPixel(ctx, 5, 5, 0, 128, 0, 255, 0); 21314 isPixel(ctx, 15, 5, 128, 0, 0, 255, 0); 21315 } 21316 </script> 21317 21318 <p>Canvas test: 2d.transformation.transform.identity</p> 21319 <!-- Testing: resetTransform() changes to the identity matrix --> 21320 <canvas id="c689" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21321 <script> 21322 21323 21324 function test_2d_transformation_reset_transform() { 21325 21326 var canvas = document.getElementById('c689'); 21327 var ctx = canvas.getContext('2d'); 21328 21329 ctx.fillStyle = '#f00'; 21330 ctx.fillRect(0, 0, 100, 50); 21331 21332 ctx.setTransform(0.1, 0.0, 0.0, 0.1, 80.0, 30.0); 21333 ctx.resetTransform(); 21334 ctx.fillStyle = '#0f0'; 21335 ctx.fillRect(0, 0, 100, 50); 21336 isPixel(ctx, 50,25, 0,255,0,255, 0); 21337 21338 21339 } 21340 21341 </script> 21342 21343 <!-- [[[ test_2d.clearRect.testdoubleprecision.html ]]] --> 21344 21345 <p>Canvas test: 2d.clearRect.testdoubleprecision</p> 21346 <canvas id="c690" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21347 <script> 21348 21349 function test_2d_clearRect_testdoubleprecision() { 21350 var canvas = document.getElementById('c690'); 21351 ctx = canvas.getContext('2d'); 21352 ctx.setTransform(1, 1, 1, 1, 0, 0); 21353 ctx.clearRect(-1.79e+308, 0, 1.79e+308, 8); 21354 } 21355 </script> 21356 21357 <!-- [[[ test_2d.path.ellipse.angle.1.html ]]] --> 21358 21359 <p>Canvas test: 2d.path.ellipse.angle.1</p> 21360 <!-- Testing: ellipse() draws pi/2 .. -pi anticlockwise correctly --> 21361 <canvas id="c690" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21362 <script> 21363 21364 21365 function test_2d_path_ellipse_angle_1() { 21366 21367 var canvas = document.getElementById('c690'); 21368 var ctx = canvas.getContext('2d'); 21369 21370 ctx.fillStyle = '#0f0'; 21371 ctx.fillRect(0, 0, 100, 50); 21372 ctx.fillStyle = '#f00'; 21373 ctx.beginPath(); 21374 ctx.moveTo(100, 0); 21375 ctx.ellipse(100, 0, 150, 100, 0, Math.PI/2, -Math.PI, true); 21376 ctx.fill(); 21377 isPixel(ctx, 50,25, 0,255,0,255, 0); 21378 21379 21380 } 21381 </script> 21382 21383 <!-- [[[ test_2d.path.ellipse.angle.2.html ]]] --> 21384 21385 <p>Canvas test: 2d.path.ellipse.angle.2</p> 21386 <!-- Testing: ellipse() draws -3pi/2 .. -pi anticlockwise correctly --> 21387 <canvas id="c691" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21388 <script> 21389 21390 21391 function test_2d_path_ellipse_angle_2() { 21392 21393 var canvas = document.getElementById('c691'); 21394 var ctx = canvas.getContext('2d'); 21395 21396 ctx.fillStyle = '#0f0'; 21397 ctx.fillRect(0, 0, 100, 50); 21398 ctx.fillStyle = '#f00'; 21399 ctx.beginPath(); 21400 ctx.moveTo(100, 0); 21401 ctx.ellipse(100, 0, 150, 100, 0, -3*Math.PI/2, -Math.PI, true); 21402 ctx.fill(); 21403 isPixel(ctx, 50,25, 0,255,0,255, 0); 21404 21405 21406 } 21407 </script> 21408 21409 <!-- [[[ test_2d.path.ellipse.angle.3.html ]]] --> 21410 21411 <p>Canvas test: 2d.path.ellipse.angle.3</p> 21412 <!-- Testing: ellipse() wraps angles mod 2pi when anticlockwise and end > start+2pi --> 21413 <canvas id="c692" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21414 <script> 21415 21416 21417 function test_2d_path_ellipse_angle_3() { 21418 21419 var canvas = document.getElementById('c692'); 21420 var ctx = canvas.getContext('2d'); 21421 21422 ctx.fillStyle = '#0f0'; 21423 ctx.fillRect(0, 0, 100, 50); 21424 ctx.fillStyle = '#f00'; 21425 ctx.beginPath(); 21426 ctx.moveTo(100, 0); 21427 ctx.ellipse(100, 0, 150, 100, 0, (512+1/2)*Math.PI, (1024-1)*Math.PI, true); 21428 ctx.fill(); 21429 isPixel(ctx, 50,25, 0,255,0,255, 0); 21430 21431 21432 } 21433 </script> 21434 21435 <!-- [[[ test_2d.path.ellipse.angle.4.html ]]] --> 21436 21437 <p>Canvas test: 2d.path.ellipse.angle.4</p> 21438 <!-- Testing: ellipse() draws a full circle when clockwise and end > start+2pi --> 21439 <canvas id="c693" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21440 <script> 21441 21442 21443 function test_2d_path_ellipse_angle_4() { 21444 21445 var canvas = document.getElementById('c693'); 21446 var ctx = canvas.getContext('2d'); 21447 21448 ctx.fillStyle = '#f00'; 21449 ctx.fillRect(0, 0, 100, 50); 21450 ctx.fillStyle = '#0f0'; 21451 ctx.beginPath(); 21452 ctx.moveTo(50, 25); 21453 ctx.ellipse(50, 25, 60, 50, 0, (512+1/2)*Math.PI, (1024-1)*Math.PI, false); 21454 ctx.fill(); 21455 isPixel(ctx, 1,1, 0,255,0,255, 0); 21456 isPixel(ctx, 98,1, 0,255,0,255, 0); 21457 isPixel(ctx, 1,48, 0,255,0,255, 0); 21458 isPixel(ctx, 98,48, 0,255,0,255, 0); 21459 21460 21461 } 21462 </script> 21463 21464 <!-- [[[ test_2d.path.ellipse.angle.5.html ]]] --> 21465 21466 <p>Canvas test: 2d.path.ellipse.angle.5</p> 21467 <!-- Testing: ellipse() wraps angles mod 2pi when clockwise and start > end+2pi --> 21468 <canvas id="c694" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21469 <script> 21470 21471 21472 function test_2d_path_ellipse_angle_5() { 21473 21474 var canvas = document.getElementById('c694'); 21475 var ctx = canvas.getContext('2d'); 21476 21477 ctx.fillStyle = '#0f0'; 21478 ctx.fillRect(0, 0, 100, 50); 21479 ctx.fillStyle = '#f00'; 21480 ctx.beginPath(); 21481 ctx.moveTo(100, 0); 21482 ctx.ellipse(100, 0, 150, 100, 0, (1024-1)*Math.PI, (512+1/2)*Math.PI, false); 21483 ctx.fill(); 21484 isPixel(ctx, 50,25, 0,255,0,255, 0); 21485 21486 21487 } 21488 </script> 21489 21490 <!-- [[[ test_2d.path.ellipse.angle.6.html ]]] --> 21491 21492 <p>Canvas test: 2d.path.ellipse.angle.6</p> 21493 <!-- Testing: ellipse() draws a full circle when anticlockwise and start > end+2pi --> 21494 <canvas id="c695" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21495 <script> 21496 21497 function test_2d_path_ellipse_angle_6() { 21498 21499 var canvas = document.getElementById('c695'); 21500 var ctx = canvas.getContext('2d'); 21501 21502 ctx.fillStyle = '#f00'; 21503 ctx.fillRect(0, 0, 100, 50); 21504 ctx.fillStyle = '#0f0'; 21505 ctx.beginPath(); 21506 ctx.moveTo(50, 25); 21507 ctx.ellipse(50, 25, 60, 50, 0, (1024-1)*Math.PI, (512+1/2)*Math.PI, true); 21508 ctx.fill(); 21509 isPixel(ctx, 1,1, 0,255,0,255, 0); 21510 isPixel(ctx, 98,1, 0,255,0,255, 0); 21511 isPixel(ctx, 1,48, 0,255,0,255, 0); 21512 isPixel(ctx, 98,48, 0,255,0,255, 0); 21513 21514 21515 } 21516 </script> 21517 21518 <!-- [[[ test_2d.path.ellipse.empty.html ]]] --> 21519 21520 <p>Canvas test: 2d.path.ellipse.empty</p> 21521 <!-- Testing: ellipse() with an empty path does not draw a straight line to the start point --> 21522 <canvas id="c696" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21523 <script> 21524 21525 21526 function test_2d_path_ellipse_empty() { 21527 21528 var canvas = document.getElementById('c696'); 21529 var ctx = canvas.getContext('2d'); 21530 21531 ctx.fillStyle = '#0f0'; 21532 ctx.fillRect(0, 0, 100, 50); 21533 ctx.lineWidth = 50; 21534 ctx.strokeStyle = '#f00'; 21535 ctx.beginPath(); 21536 ctx.ellipse(200, 25, 5, 5, 0, 0, 2*Math.PI, true); 21537 ctx.stroke(); 21538 isPixel(ctx, 50,25, 0,255,0,255, 0); 21539 21540 21541 } 21542 </script> 21543 21544 <!-- [[[ test_2d.path.ellipse.end.html ]]] --> 21545 21546 <p>Canvas test: 2d.path.ellipse.end</p> 21547 <!-- Testing: ellipse() adds the end point of the ellipse to the subpath --> 21548 <canvas id="c697" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21549 <script> 21550 21551 function test_2d_path_ellipse_end() { 21552 21553 var canvas = document.getElementById('c697'); 21554 var ctx = canvas.getContext('2d'); 21555 21556 ctx.fillStyle = '#f00'; 21557 ctx.fillRect(0, 0, 100, 50); 21558 ctx.lineWidth = 50; 21559 ctx.strokeStyle = '#0f0'; 21560 ctx.beginPath(); 21561 ctx.moveTo(-100, 0); 21562 ctx.ellipse(-100, 0, 25, 25, 0, -Math.PI/2, Math.PI/2, true); 21563 ctx.lineTo(100, 25); 21564 ctx.stroke(); 21565 isPixel(ctx, 50,25, 0,255,0,255, 0); 21566 21567 21568 } 21569 </script> 21570 21571 <!-- [[[ test_2d.path.ellipse.negative.html ]]] --> 21572 21573 <p>Canvas test: 2d.path.ellipse.negative</p> 21574 <!-- Testing: ellipse() with negative radius throws INDEX_SIZE_ERR --> 21575 <canvas id="c698" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21576 <script> 21577 21578 function test_2d_path_ellipse_negative() { 21579 21580 var canvas = document.getElementById('c698'); 21581 var ctx = canvas.getContext('2d'); 21582 21583 var _thrown = undefined; 21584 try { 21585 ctx.ellipse(0, 0, -1, 0, 0, -Math.PI/2, Math.PI/2, true); 21586 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 21587 21588 try { 21589 ctx.ellipse(0, 0, 0, -1, 0, -Math.PI/2, Math.PI/2, true); 21590 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError"); 21591 21592 21593 } 21594 </script> 21595 21596 <!-- [[[ test_2d.path.ellipse.nonempty.html ]]] --> 21597 21598 <p>Canvas test: 2d.path.ellipse.nonempty</p> 21599 <!-- Testing: ellipse() with a non-empty path does draw a straight line to the start point --> 21600 <canvas id="c699" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21601 <script> 21602 21603 function test_2d_path_ellipse_nonempty() { 21604 21605 var canvas = document.getElementById('c699'); 21606 var ctx = canvas.getContext('2d'); 21607 21608 ctx.fillStyle = '#f00'; 21609 ctx.fillRect(0, 0, 100, 50); 21610 ctx.lineWidth = 50; 21611 ctx.strokeStyle = '#0f0'; 21612 ctx.beginPath(); 21613 ctx.moveTo(0, 25); 21614 ctx.ellipse(200, 25, 5, 2, 0, 0, 2*Math.PI, true); 21615 ctx.stroke(); 21616 isPixel(ctx, 50,25, 0,255,0,255, 0); 21617 21618 21619 } 21620 </script> 21621 21622 <!-- [[[ test_2d.path.bezierCurveTo.nonfinite.html ]]] --> 21623 21624 <p>Canvas test: 2d.path.ellipse.nonfinite</p> 21625 <!-- Testing: bezierCurveTo() with Infinity/NaN is ignored --> 21626 <canvas id="c700" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21627 <script> 21628 21629 function test_2d_path_ellipse_nonfinite() { 21630 21631 var canvas = document.getElementById('c700'); 21632 var ctx = canvas.getContext('2d'); 21633 21634 var _thrown_outer = false; 21635 try { 21636 21637 ctx.moveTo(0, 0); 21638 ctx.lineTo(100, 0); 21639 ctx.ellipse(Infinity, 25, 0, 0, 0, 0, 2 * Math.PI, false); 21640 ctx.ellipse(-Infinity, 25, 0, 0, 0, 0, 2 * Math.PI, false); 21641 ctx.ellipse(NaN, 25, 0, 0, 0, 0, 2 * Math.PI, false); 21642 ctx.ellipse(50, Infinity, 0, 0, 0, 0, 2 * Math.PI, false); 21643 ctx.ellipse(50, -Infinity, 0, 0, 0, 0, 2 * Math.PI, false); 21644 ctx.ellipse(50, NaN, 50, 0, 0, 0, 2 * Math.PI, false); 21645 ctx.ellipse(50, 25, Infinity, 0, 0, 0, 2 * Math.PI, false); 21646 ctx.ellipse(50, 25, -Infinity, 0, 0, 0, 2 * Math.PI, false); 21647 ctx.ellipse(50, 25, NaN, 0, 0, 0, 2 * Math.PI, false); 21648 ctx.ellipse(50, 25, 0, Infinity, 0, 0, 2 * Math.PI, false); 21649 ctx.ellipse(50, 25, 0, -Infinity, 0, 0, 2 * Math.PI, false); 21650 ctx.ellipse(50, 25, 0, NaN, 0, 0, 2 * Math.PI, false); 21651 ctx.ellipse(50, 25, 0, 0, Infinity, 0, 2 * Math.PI, false); 21652 ctx.ellipse(50, 25, 0, 0, -Infinity, 0, 2 * Math.PI, false); 21653 ctx.ellipse(50, 25, 0, 0, NaN, 0, 2 * Math.PI, false); 21654 ctx.ellipse(50, 25, 0, 0, 0, Infinity, 2 * Math.PI, false); 21655 ctx.ellipse(50, 25, 0, 0, 0, -Infinity, 2 * Math.PI, false); 21656 ctx.ellipse(50, 25, 0, 0, 0, NaN, 2 * Math.PI, false); 21657 ctx.ellipse(50, 25, 0, 0, 0, 0, Infinity, false); 21658 ctx.ellipse(50, 25, 0, 0, 0, 0, -Infinity, false); 21659 ctx.ellipse(50, 25, 0, 0, 0, 0, NaN, false); 21660 ctx.ellipse(Infinity, Infinity, 0, 0, 0, 0, 2 * Math.PI, false); 21661 ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, 0, 2 * Math.PI, false); 21662 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, 0, 2 * Math.PI, false); 21663 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false); 21664 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false); 21665 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, false); 21666 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, false); 21667 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, false); 21668 ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity, false); 21669 ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, Infinity, Infinity, false); 21670 ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, Infinity, Infinity, false); 21671 ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, false); 21672 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false); 21673 ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false); 21674 ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false); 21675 ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false); 21676 ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false); 21677 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, false); 21678 ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, 0, Infinity, false); 21679 ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, 0, Infinity, false); 21680 ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, 0, Infinity, false); 21681 ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, 0, Infinity, false); 21682 ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity, false); 21683 ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, Infinity, Infinity, false); 21684 ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, Infinity, Infinity, false); 21685 ctx.ellipse(50, Infinity, Infinity, Infinity, 0, Infinity, Infinity, false); 21686 ctx.ellipse(Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity, false); 21687 ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, Infinity, Infinity, false); 21688 ctx.ellipse(50, Infinity, Infinity, 0, Infinity, Infinity, Infinity, false); 21689 ctx.ellipse(Infinity, 25, 50, Infinity, Infinity, Infinity, Infinity, false); 21690 ctx.ellipse(50, Infinity, 50, Infinity, Infinity, Infinity, Infinity, false); 21691 ctx.ellipse(50, 25, Infinity, Infinity, Infinity, Infinity, Infinity, false); 21692 ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, 0, 2 * Math.PI, false); 21693 ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, 0, 2 * Math.PI, false); 21694 ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false); 21695 ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false); 21696 ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, Infinity, 2 * Math.PI, false); 21697 ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, Infinity, 2 * Math.PI, false); 21698 ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false); 21699 ctx.ellipse(50, Infinity, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false); 21700 ctx.ellipse(Infinity, Infinity, 0, 0, Infinity, Infinity, 2 * Math.PI, false); 21701 ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false); 21702 ctx.ellipse(50, Infinity, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false); 21703 ctx.ellipse(Infinity, 25, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false); 21704 ctx.ellipse(50, Infinity, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false); 21705 ctx.ellipse(50, 25, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false); 21706 ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, 0, Infinity, false); 21707 ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, 0, Infinity, false); 21708 ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, 0, Infinity, false); 21709 ctx.ellipse(50, Infinity, Infinity, Infinity, 0, 0, Infinity, false); 21710 ctx.ellipse(Infinity, Infinity, 0, 0, Infinity, 0, Infinity, false); 21711 ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, 0, Infinity, false); 21712 ctx.ellipse(50, Infinity, Infinity, 0, Infinity, 0, Infinity, false); 21713 ctx.ellipse(Infinity, 25, 0, Infinity, Infinity, 0, Infinity, false); 21714 ctx.ellipse(50, Infinity, 0, Infinity, Infinity, 0, Infinity, false); 21715 ctx.ellipse(50, 25, Infinity, Infinity, Infinity, 0, Infinity, false); 21716 ctx.ellipse(Infinity, Infinity, 0, 0, 0, Infinity, Infinity, false); 21717 ctx.ellipse(Infinity, 25, Infinity, 0, 0, Infinity, Infinity, false); 21718 ctx.ellipse(50, Infinity, Infinity, 0, 0, Infinity, Infinity, false); 21719 ctx.ellipse(Infinity, 25, 0, Infinity, 0, Infinity, Infinity, false); 21720 ctx.ellipse(50, Infinity, 0, Infinity, 0, Infinity, Infinity, false); 21721 ctx.ellipse(50, 25, Infinity, Infinity, 0, Infinity, Infinity, false); 21722 ctx.ellipse(Infinity, 25, 0, 0, Infinity, Infinity, Infinity, false); 21723 ctx.ellipse(50, Infinity, 0, 0, Infinity, Infinity, Infinity, false); 21724 ctx.ellipse(50, 25, Infinity, 0, Infinity, Infinity, Infinity, false); 21725 ctx.ellipse(50, 25, 50, Infinity, Infinity, Infinity, Infinity, false); 21726 ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, 0, 2 * Math.PI, false); 21727 ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, 0, 2 * Math.PI, false); 21728 ctx.ellipse(50, Infinity, Infinity, Infinity, 0, 0, 2 * Math.PI, false); 21729 ctx.ellipse(Infinity, Infinity, 0, 0, Infinity, 0, 2 * Math.PI, false); 21730 ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, 0, 2 * Math.PI, false); 21731 ctx.ellipse(50, Infinity, Infinity, 0, Infinity, 0, 2 * Math.PI, false); 21732 ctx.ellipse(Infinity, 25, 0, Infinity, Infinity, 0, 2 * Math.PI, false); 21733 ctx.ellipse(50, Infinity, 0, Infinity, Infinity, 0, 2 * Math.PI, false); 21734 ctx.ellipse(50, 25, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false); 21735 ctx.ellipse(Infinity, Infinity, 0, 0, 0, Infinity, 2 * Math.PI, false); 21736 ctx.ellipse(Infinity, 25, Infinity, 0, 0, Infinity, 2 * Math.PI, false); 21737 ctx.ellipse(50, Infinity, Infinity, 0, 0, Infinity, 2 * Math.PI, false); 21738 ctx.ellipse(Infinity, 25, 0, Infinity, 0, Infinity, 2 * Math.PI, false); 21739 ctx.ellipse(50, Infinity, 0, Infinity, 0, Infinity, 2 * Math.PI, false); 21740 ctx.ellipse(50, 25, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false); 21741 ctx.ellipse(Infinity, 25, 0, 0, Infinity, Infinity, 2 * Math.PI, false); 21742 ctx.ellipse(50, Infinity, 0, 0, Infinity, Infinity, 2 * Math.PI, false); 21743 ctx.ellipse(50, 25, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false); 21744 ctx.ellipse(50, 25, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false); 21745 ctx.ellipse(Infinity, Infinity, 0, 0, 0, 0, Infinity, false); 21746 ctx.ellipse(Infinity, 25, Infinity, 0, 0, 0, Infinity, false); 21747 ctx.ellipse(50, Infinity, Infinity, 0, 0, 0, Infinity, false); 21748 ctx.ellipse(Infinity, 25, 0, Infinity, 0, 0, Infinity, false); 21749 ctx.ellipse(50, Infinity, 0, Infinity, 0, 0, Infinity, false); 21750 ctx.ellipse(50, 25, Infinity, Infinity, 0, 0, Infinity, false); 21751 ctx.ellipse(Infinity, 25, 0, 0, Infinity, 0, Infinity, false); 21752 ctx.ellipse(50, Infinity, 0, 0, Infinity, 0, Infinity, false); 21753 ctx.ellipse(50, 25, Infinity, 0, Infinity, 0, Infinity, false); 21754 ctx.ellipse(50, 25, 0, Infinity, Infinity, 0, Infinity, false); 21755 ctx.ellipse(Infinity, 25, 0, 0, 0, Infinity, Infinity, false); 21756 ctx.ellipse(50, Infinity, 0, 0, 0, Infinity, Infinity, false); 21757 ctx.ellipse(50, 25, Infinity, 0, 0, Infinity, Infinity, false); 21758 ctx.ellipse(50, 25, 0, Infinity, 0, Infinity, Infinity, false); 21759 ctx.ellipse(50, 25, 0, 0, Infinity, Infinity, Infinity, false); 21760 ctx.ellipse(Infinity, 25, Infinity, 0, 0, 0, 2 * Math.PI, false); 21761 ctx.ellipse(50, Infinity, Infinity, 0, 0, 0, 2 * Math.PI, false); 21762 ctx.ellipse(Infinity, 25, 0, Infinity, 0, 0, 2 * Math.PI, false); 21763 ctx.ellipse(50, Infinity, 0, Infinity, 0, 0, 2 * Math.PI, false); 21764 ctx.ellipse(50, 25, Infinity, Infinity, 0, 0, 2 * Math.PI, false); 21765 ctx.ellipse(Infinity, 25, 0, 0, Infinity, 0, 2 * Math.PI, false); 21766 ctx.ellipse(50, Infinity, 0, 0, Infinity, 0, 2 * Math.PI, false); 21767 ctx.ellipse(50, 25, Infinity, 0, Infinity, 0, 2 * Math.PI, false); 21768 ctx.ellipse(50, 25, 0, Infinity, Infinity, 0, 2 * Math.PI, false); 21769 ctx.ellipse(Infinity, 25, 0, 0, 0, Infinity, 2 * Math.PI, false); 21770 ctx.ellipse(50, Infinity, 0, 0, 0, Infinity, 2 * Math.PI, false); 21771 ctx.ellipse(50, 25, Infinity, 0, 0, Infinity, 2 * Math.PI, false); 21772 ctx.ellipse(50, 25, 0, Infinity, 0, Infinity, 2 * Math.PI, false); 21773 ctx.ellipse(50, 25, 0, 0, Infinity, Infinity, 2 * Math.PI, false); 21774 ctx.ellipse(Infinity, 25, 0, 0, 0, 0, Infinity, false); 21775 ctx.ellipse(50, Infinity, 0, 0, 0, 0, Infinity, false); 21776 ctx.ellipse(50, 25, Infinity, 0, 0, 0, Infinity, false); 21777 ctx.ellipse(50, 25, 0, Infinity, 0, 0, Infinity, false); 21778 ctx.ellipse(50, 25, 0, 0, Infinity, 0, Infinity, false); 21779 ctx.ellipse(50, 25, 0, 0, 0, Infinity, Infinity, false); 21780 ctx.lineTo(100, 50); 21781 ctx.lineTo(0, 50); 21782 ctx.fillStyle = '#0f0'; 21783 ctx.fill(); 21784 isPixel(ctx, 50,25, 0,255,0,255, 0); 21785 isPixel(ctx, 90,45, 0,255,0,255, 0); 21786 21787 } catch (e) { 21788 _thrown_outer = true; 21789 } 21790 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception'); 21791 21792 21793 } 21794 </script> 21795 21796 21797 <!-- [[[ test_2d.path.ellipse.scale.1.html ]]] --> 21798 21799 <p>Canvas test: 2d.path.ellipse.scale.1</p> 21800 <!-- Testing: Non-uniformly scaled ellipse are the right shape --> 21801 <canvas id="c701" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21802 <script> 21803 21804 function test_2d_path_ellipse_scale_1() { 21805 21806 var canvas = document.getElementById('c701'); 21807 var ctx = canvas.getContext('2d'); 21808 21809 ctx.fillStyle = '#f00'; 21810 ctx.fillRect(0, 0, 100, 50); 21811 ctx.scale(2, 0.5); 21812 ctx.fillStyle = '#0f0'; 21813 ctx.beginPath(); 21814 var hypothenuse = Math.sqrt(50 * 50 + 25 * 25); 21815 var tolerance = 0.5; 21816 var radius = hypothenuse + tolerance; 21817 ctx.ellipse(25, 50, radius, radius, 0, 0, 2*Math.PI, false); 21818 ctx.fill(); 21819 ctx.fillStyle = '#f00'; 21820 ctx.beginPath(); 21821 ctx.moveTo(-25, 50); 21822 ctx.ellipse(-25, 50, 24, 34, 0, 0, 2 * Math.PI, false); 21823 ctx.moveTo(75, 50); 21824 ctx.ellipse(75, 50, 24, 34, 0, 0, 2 * Math.PI, false); 21825 ctx.moveTo(25, -25); 21826 ctx.ellipse(25, -25, 34, 24, 0, 0, 2 * Math.PI, false); 21827 ctx.moveTo(25, 125); 21828 ctx.ellipse(25, -25, 34, 24, 0, 0, 2 * Math.PI, false); 21829 ctx.fill(); 21830 21831 isPixel(ctx, 0,0, 0,255,0,255, 0); 21832 isPixel(ctx, 50,0, 0,255,0,255, 0); 21833 isPixel(ctx, 99,0, 0,255,0,255, 0); 21834 isPixel(ctx, 0,25, 0,255,0,255, 0); 21835 isPixel(ctx, 50,25, 0,255,0,255, 0); 21836 isPixel(ctx, 99,25, 0,255,0,255, 0); 21837 isPixel(ctx, 0,49, 0,255,0,255, 0); 21838 isPixel(ctx, 50,49, 0,255,0,255, 0); 21839 isPixel(ctx, 99,49, 0,255,0,255, 0); 21840 21841 21842 } 21843 </script> 21844 21845 <!-- [[[ test_2d.path.ellipse.scale.2.html ]]] --> 21846 21847 <p>Canvas test: 2d.path.ellipse.scale.2</p> 21848 <!-- Testing: Highly scaled ellipse are the right shape --> 21849 <canvas id="c702" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21850 <script> 21851 21852 21853 function test_2d_path_ellipse_scale_2() { 21854 21855 var canvas = document.getElementById('c702'); 21856 var ctx = canvas.getContext('2d'); 21857 21858 ctx.fillStyle = '#f00'; 21859 ctx.fillRect(0, 0, 100, 50); 21860 ctx.scale(100, 100); 21861 ctx.strokeStyle = '#0f0'; 21862 ctx.lineWidth = 1.2; 21863 ctx.beginPath(); 21864 ctx.ellipse(0, 0, 0.6, 1, 0, 0, Math.PI/2, false); 21865 ctx.ellipse(0, 0, 1, 0.6, 0, 0, Math.PI/2, false); 21866 ctx.stroke(); 21867 21868 isPixel(ctx, 1,1, 0,255,0,255, 0); 21869 isPixel(ctx, 50,1, 0,255,0,255, 0); 21870 isPixel(ctx, 98,1, 0,255,0,255, 0); 21871 isPixel(ctx, 1,25, 0,255,0,255, 0); 21872 isPixel(ctx, 50,25, 0,255,0,255, 0); 21873 isPixel(ctx, 98,25, 0,255,0,255, 0); 21874 isPixel(ctx, 1,48, 0,255,0,255, 0); 21875 isPixel(ctx, 50,48, 0,255,0,255, 0); 21876 isPixel(ctx, 98,48, 0,255,0,255, 0); 21877 21878 21879 } 21880 </script> 21881 21882 <!-- [[[ test_2d.path.ellipse.selfintersect.1.html ]]] --> 21883 21884 <p>Canvas test: 2d.path.ellipse.selfintersect.1</p> 21885 <!-- Testing: ellipse() with lineWidth > 2*radius is drawn sensibly --> 21886 <canvas id="c703" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21887 <script> 21888 21889 21890 function test_2d_path_ellipse_selfintersect_1() { 21891 21892 var canvas = document.getElementById('c703'); 21893 var ctx = canvas.getContext('2d'); 21894 21895 ctx.fillStyle = '#0f0'; 21896 ctx.fillRect(0, 0, 100, 50); 21897 ctx.lineWidth = 200; 21898 ctx.strokeStyle = '#f00'; 21899 ctx.beginPath(); 21900 ctx.ellipse(100, 50, 35, 25, 0, 0, -Math.PI/2, true); 21901 ctx.stroke(); 21902 ctx.beginPath(); 21903 ctx.ellipse(0, 0, 35, 25, 0, 0, -Math.PI/2, true); 21904 ctx.stroke(); 21905 isPixel(ctx, 50,25, 0,255,0,255, 0); 21906 21907 21908 } 21909 </script> 21910 21911 <!-- [[[ test_2d.path.ellipse.selfintersect.2.html ]]] --> 21912 21913 <p>Canvas test: 2d.path.ellipse.selfintersect.2</p> 21914 <!-- Testing: ellipse() with lineWidth > 2*radius is drawn sensibly --> 21915 <canvas id="c704" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21916 <script> 21917 21918 21919 function test_2d_path_ellipse_selfintersect_2() { 21920 21921 var canvas = document.getElementById('c704'); 21922 var ctx = canvas.getContext('2d'); 21923 21924 ctx.fillStyle = '#f00'; 21925 ctx.fillRect(0, 0, 100, 50); 21926 ctx.lineWidth = 180; 21927 ctx.strokeStyle = '#0f0'; 21928 ctx.beginPath(); 21929 ctx.ellipse(-50, 50, 25, 25, 0, 0, -Math.PI/2, true); 21930 ctx.stroke(); 21931 ctx.beginPath(); 21932 ctx.ellipse(100, 0, 25, 25, 0, 0, -Math.PI/2, true); 21933 ctx.stroke(); 21934 isPixel(ctx, 50,25, 0,255,0,255, 0); 21935 isPixel(ctx, 90,10, 0,255,0,255, 0); 21936 isPixel(ctx, 97,1, 0,255,0,255, 0); 21937 isPixel(ctx, 97,2, 0,255,0,255, 0); 21938 isPixel(ctx, 97,3, 0,255,0,255, 0); 21939 isPixel(ctx, 2,48, 0,255,0,255, 0); 21940 21941 21942 } 21943 </script> 21944 21945 <!-- [[[ test_2d.path.ellipse.shape.1.html ]]] --> 21946 21947 <p>Canvas test: 2d.path.ellipse.shape.1</p> 21948 <!-- Testing: ellipse() from 0 to pi does not draw anything in the wrong half --> 21949 <canvas id="c705" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21950 <script> 21951 21952 function test_2d_path_ellipse_shape_1() { 21953 21954 var canvas = document.getElementById('c705'); 21955 var ctx = canvas.getContext('2d'); 21956 21957 ctx.fillStyle = '#0f0'; 21958 ctx.fillRect(0, 0, 100, 50); 21959 ctx.lineWidth = 50; 21960 ctx.strokeStyle = '#f00'; 21961 ctx.beginPath(); 21962 ctx.ellipse(50, 50, 40, 60, 0, 0, Math.PI, false); 21963 ctx.stroke(); 21964 isPixel(ctx, 50,25, 0,255,0,255, 0); 21965 isPixel(ctx, 1,1, 0,255,0,255, 0); 21966 isPixel(ctx, 98,1, 0,255,0,255, 0); 21967 isPixel(ctx, 1,48, 0,255,0,255, 0); 21968 isPixel(ctx, 20,48, 0,255,0,255, 0); 21969 isPixel(ctx, 98,48, 0,255,0,255, 0); 21970 21971 } 21972 </script> 21973 21974 <!-- [[[ test_2d.path.ellipse.shape.2.html ]]] --> 21975 21976 <p>Canvas test: 2d.path.ellipse.shape.2</p> 21977 <!-- Testing: ellipse() from 0 to pi draws stuff in the right half --> 21978 <canvas id="c706" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 21979 <script> 21980 21981 function test_2d_path_ellipse_shape_2() { 21982 21983 var canvas = document.getElementById('c706'); 21984 var ctx = canvas.getContext('2d'); 21985 21986 ctx.fillStyle = '#f00'; 21987 ctx.fillRect(0, 0, 100, 50); 21988 ctx.lineWidth = 100; 21989 ctx.strokeStyle = '#0f0'; 21990 ctx.beginPath(); 21991 ctx.ellipse(50, 50, 30, 15, 0, 0, Math.PI, true); 21992 ctx.stroke(); 21993 isPixel(ctx, 50,25, 0,255,0,255, 0); 21994 isPixel(ctx, 1,1, 0,255,0,255, 0); 21995 isPixel(ctx, 98,1, 0,255,0,255, 0); 21996 isPixel(ctx, 1,48, 0,255,0,255, 0); 21997 isPixel(ctx, 20,48, 0,255,0,255, 0); 21998 isPixel(ctx, 98,48, 0,255,0,255, 0); 21999 22000 22001 } 22002 </script> 22003 22004 <!-- [[[ test_2d.path.ellipse.shape.3.html ]]] --> 22005 22006 <p>Canvas test: 2d.path.ellipse.shape.3</p> 22007 <!-- Testing: ellipse() from 0 to -pi/2 draws stuff in the right quadrant --> 22008 <canvas id="c707" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22009 <script> 22010 22011 22012 function test_2d_path_ellipse_shape_3() { 22013 22014 var canvas = document.getElementById('c707'); 22015 var ctx = canvas.getContext('2d'); 22016 22017 ctx.fillStyle = '#f00'; 22018 ctx.fillRect(0, 0, 100, 50); 22019 ctx.lineWidth = 150; 22020 ctx.strokeStyle = '#0f0'; 22021 ctx.beginPath(); 22022 ctx.ellipse(-50, 50, 100, 200, 0, 0, -Math.PI/2, true); 22023 ctx.stroke(); 22024 isPixel(ctx, 50,25, 0,255,0,255, 0); 22025 isPixel(ctx, 1,1, 0,255,0,255, 0); 22026 isPixel(ctx, 98,1, 0,255,0,255, 0); 22027 isPixel(ctx, 1,48, 0,255,0,255, 0); 22028 isPixel(ctx, 98,48, 0,255,0,255, 0); 22029 22030 22031 } 22032 </script> 22033 22034 <!-- [[[ test_2d.path.ellipse.shape.4.html ]]] --> 22035 22036 <p>Canvas test: 2d.path.ellipse.shape.4</p> 22037 <!-- Testing: ellipse() from 0 to 5pi does not draw strange things --> 22038 <canvas id="c708" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22039 <script> 22040 22041 22042 function test_2d_path_ellipse_shape_4() { 22043 22044 var canvas = document.getElementById('c708'); 22045 var ctx = canvas.getContext('2d'); 22046 22047 ctx.fillStyle = '#0f0'; 22048 ctx.fillRect(0, 0, 100, 50); 22049 ctx.lineWidth = 200; 22050 ctx.strokeStyle = '#f00'; 22051 ctx.beginPath(); 22052 ctx.ellipse(300, 0, 100, 200, 0, 0, 5*Math.PI, false); 22053 ctx.stroke(); 22054 isPixel(ctx, 50,25, 0,255,0,255, 0); 22055 isPixel(ctx, 1,1, 0,255,0,255, 0); 22056 isPixel(ctx, 98,1, 0,255,0,255, 0); 22057 isPixel(ctx, 1,48, 0,255,0,255, 0); 22058 isPixel(ctx, 98,48, 0,255,0,255, 0); 22059 22060 22061 } 22062 </script> 22063 22064 <!-- [[[ test_2d.path.ellipse.twopie.1.html ]]] --> 22065 22066 <p>Canvas test: 2d.path.ellipse.twopie.1</p> 22067 <!-- Testing: ellipse() draws nothing when end = start + 2pi-e and anticlockwise --> 22068 <canvas id="c709" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22069 <script> 22070 22071 function test_2d_path_ellipse_twopie_1() { 22072 22073 var canvas = document.getElementById('c709'); 22074 var ctx = canvas.getContext('2d'); 22075 22076 ctx.fillStyle = '#0f0'; 22077 ctx.fillRect(0, 0, 100, 50); 22078 ctx.strokeStyle = '#f00'; 22079 ctx.lineWidth = 100; 22080 ctx.beginPath(); 22081 ctx.ellipse(50, 25, 50, 60, 0, 0, 2*Math.PI - 1e-4, true); 22082 ctx.stroke(); 22083 isPixel(ctx, 50,20, 0,255,0,255, 0); 22084 22085 22086 } 22087 </script> 22088 22089 <!-- [[[ test_2d.path.ellipse.twopie.2.html ]]] --> 22090 22091 <p>Canvas test: 2d.path.ellipse.twopie.2</p> 22092 <!-- Testing: ellipse() draws a full ellipse when end = start + 2pi-e and clockwise --> 22093 <canvas id="c710" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22094 <script> 22095 22096 22097 function test_2d_path_ellipse_twopie_2() { 22098 22099 var canvas = document.getElementById('c710'); 22100 var ctx = canvas.getContext('2d'); 22101 22102 ctx.fillStyle = '#f00'; 22103 ctx.fillRect(0, 0, 100, 50); 22104 ctx.strokeStyle = '#0f0'; 22105 ctx.lineWidth = 100; 22106 ctx.beginPath(); 22107 ctx.ellipse(50, 25, 50, 30, 0, 0, 2*Math.PI - 1e-4, false); 22108 ctx.stroke(); 22109 isPixel(ctx, 50,20, 0,255,0,255, 0); 22110 22111 22112 } 22113 </script> 22114 22115 <!-- [[[ test_2d.path.ellipse.twopie.3.html ]]] --> 22116 22117 <p>Canvas test: 2d.path.ellipse.twopie.3</p> 22118 <!-- Testing: ellipse() draws a full circle when end = start + 2pi+e and anticlockwise --> 22119 <canvas id="c711" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22120 <script> 22121 22122 22123 function test_2d_path_ellipse_twopie_3() { 22124 22125 var canvas = document.getElementById('c711'); 22126 var ctx = canvas.getContext('2d'); 22127 22128 ctx.fillStyle = '#f00'; 22129 ctx.fillRect(0, 0, 100, 50); 22130 ctx.strokeStyle = '#0f0'; 22131 ctx.lineWidth = 100; 22132 ctx.beginPath(); 22133 ctx.ellipse(50, 25, 50, 25, 0, 0, 2*Math.PI + 1e-4, true); 22134 ctx.stroke(); 22135 isPixel(ctx, 50,20, 0,255,0,255, 0); 22136 22137 22138 } 22139 </script> 22140 22141 <!-- [[[ test_2d.path.ellipse.twopie.4.html ]]] --> 22142 22143 <p>Canvas test: 2d.path.ellipse.twopie.4</p> 22144 <!-- Testing: ellipse() draws nothing when end = start + 2pi+e and clockwise --> 22145 <canvas id="c712" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22146 <script> 22147 22148 22149 function test_2d_path_ellipse_twopie_4() { 22150 22151 var canvas = document.getElementById('c712'); 22152 var ctx = canvas.getContext('2d'); 22153 22154 ctx.fillStyle = '#f00'; 22155 ctx.fillRect(0, 0, 100, 50); 22156 ctx.strokeStyle = '#0f0'; 22157 ctx.lineWidth = 100; 22158 ctx.beginPath(); 22159 ctx.ellipse(50, 25, 50, 25, 0, 0, 2*Math.PI + 1e-4, false); 22160 ctx.stroke(); 22161 isPixel(ctx, 50,20, 0,255,0,255, 0); 22162 22163 22164 } 22165 </script> 22166 22167 <!-- [[[ test_2d.path.ellipse.zero.1.html ]]] --> 22168 22169 <p>Canvas test: 2d.path.ellipse.zero.1</p> 22170 <!-- Testing: ellipse() draws nothing when startAngle = endAngle and anticlockwise --> 22171 <canvas id="c713" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22172 <script> 22173 22174 22175 function test_2d_path_ellipse_zero_1() { 22176 22177 var canvas = document.getElementById('c713'); 22178 var ctx = canvas.getContext('2d'); 22179 22180 ctx.fillStyle = '#0f0'; 22181 ctx.fillRect(0, 0, 100, 50); 22182 ctx.strokeStyle = '#f00'; 22183 ctx.lineWidth = 100; 22184 ctx.beginPath(); 22185 ctx.ellipse(50, 25, 50, 25, 0, 0, 0, true); 22186 ctx.stroke(); 22187 isPixel(ctx, 50,20, 0,255,0,255, 0); 22188 22189 22190 22191 } 22192 </script> 22193 22194 <!-- [[[ test_2d.path.ellipse.zero.2.html ]]] --> 22195 22196 <p>Canvas test: 2d.path.ellipse.zero.2</p> 22197 <!-- Testing: ellipse() draws nothing when startAngle = endAngle and clockwise --> 22198 <canvas id="c714" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22199 <script> 22200 22201 22202 function test_2d_path_ellipse_zero_2() { 22203 22204 var canvas = document.getElementById('c714'); 22205 var ctx = canvas.getContext('2d'); 22206 22207 ctx.fillStyle = '#0f0'; 22208 ctx.fillRect(0, 0, 100, 50); 22209 ctx.strokeStyle = '#f00'; 22210 ctx.lineWidth = 100; 22211 ctx.beginPath(); 22212 ctx.ellipse(50, 25, 50, 25, 0, 0, 0, true); 22213 ctx.stroke(); 22214 isPixel(ctx, 50,20, 0,255,0,255, 0); 22215 22216 22217 } 22218 </script> 22219 22220 <!-- [[[ test_2d.path.ellipse.zeroradius.html ]]] --> 22221 22222 <p>Canvas test: 2d.path.ellipse.zeroradius</p> 22223 <!-- Testing: ellipse() with zero radius draws a line to the start point --> 22224 <canvas id="c715" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22225 <script> 22226 22227 function test_2d_path_ellipse_zeroradius() { 22228 22229 var canvas = document.getElementById('c715'); 22230 var ctx = canvas.getContext('2d'); 22231 22232 ctx.fillStyle = '#f00' 22233 ctx.fillRect(0, 0, 100, 50); 22234 ctx.lineWidth = 50; 22235 ctx.strokeStyle = '#0f0'; 22236 ctx.beginPath(); 22237 ctx.moveTo(0, 25); 22238 ctx.ellipse(200, 25, 0, 0, 0, 0, Math.PI, true); 22239 ctx.stroke(); 22240 22241 isPixel(ctx, 50, 25, 0, 255, 0, 255, 0); 22242 22243 22244 } 22245 </script> 22246 22247 <!-- [[[ test_2d.path.ellipse.rotate.html ]]] --> 22248 22249 <p>Canvas test: 2d.path.ellipse.rotate</p> 22250 <!-- Testing: ellipse() with a rotation angle works --> 22251 <canvas id="c716" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> 22252 <script> 22253 22254 function test_2d_path_ellipse_rotate() { 22255 22256 var canvas = document.getElementById('c716'); 22257 var ctx = canvas.getContext('2d'); 22258 22259 ctx.fillStyle = '#0f0'; 22260 ctx.fillRect(0, 0, 100, 50); 22261 ctx.lineWidth = 5; 22262 ctx.strokeStyle = '#f00'; 22263 ctx.beginPath(); 22264 ctx.ellipse(50, 25, 50, 25, Math.PI/4, 0, 2 * Math.PI, false); 22265 ctx.stroke(); 22266 ctx.beginPath(); 22267 ctx.ellipse(50, 25, 50, 25, -Math.PI/4, 0, 2 * Math.PI, false); 22268 ctx.stroke(); 22269 isPixel(ctx, 50, 25, 0,255,0,255, 0); 22270 isPixel(ctx, 48,1, 0,255,0,255, 0); 22271 isPixel(ctx, 98,24, 0,255,0,255, 0); 22272 isPixel(ctx, 48,48, 0,255,0,255, 0); 22273 isPixel(ctx, 24,48, 0,255,0,255, 0); 22274 } 22275 </script> 22276 22277 <script> 22278 22279 function asyncTestsDone() { 22280 if (isDone_test_2d_drawImage_animated_apng && 22281 isDone_test_2d_pattern_animated_gif && 22282 isDone_test_2d_drawImage_animated_gif) { 22283 SimpleTest.finish(); 22284 } else { 22285 setTimeout(asyncTestsDone, 500); 22286 } 22287 } 22288 22289 // eslint-disable-next-line complexity 22290 function runTests() { 22291 /** 22292 * xor and lighter aren't well handled by cairo; they mostly work, but we don't want 22293 * to test that 22294 */ 22295 //test_2d_composite_solid_lighter(); 22296 //test_2d_composite_transparent_xor(); 22297 //test_2d_composite_solid_xor(); 22298 //test_2d_composite_transparent_lighter(); 22299 //test_2d_composite_image_xor(); 22300 //test_2d_composite_image_lighter(); 22301 //test_2d_composite_canvas_xor(); 22302 //test_2d_composite_canvas_lighter(); 22303 //test_2d_composite_clip_xor(); 22304 //test_2d_composite_clip_lighter(); 22305 22306 /** 22307 * Temporarily disabled tests; unbounded operators changed behaviour, need to reevaluate tests 22308 */ 22309 //test_2d_composite_canvas_destination_atop(); 22310 //test_2d_composite_canvas_destination_in(); 22311 //test_2d_composite_canvas_source_in(); 22312 //test_2d_composite_canvas_source_out(); 22313 //test_2d_composite_image_destination_atop(); 22314 //test_2d_composite_image_destination_in(); 22315 //test_2d_composite_image_source_in(); 22316 //test_2d_composite_image_source_out(); 22317 22318 /** 22319 * These tests only pass on Mac OS X >= 10.5; see bug 450114 22320 */ 22321 //test_2d_gradient_radial_equal(); 22322 //test_2d_gradient_radial_touch1(); 22323 //test_2d_gradient_radial_touch2(); 22324 //test_2d_gradient_radial_touch3(); 22325 22326 /** 22327 * These 19 tests receive special makefile treatment 22328 */ 22329 //test_2d_composite_uncovered_image_destination_atop(); 22330 //test_2d_composite_uncovered_image_destination_in(); 22331 //test_2d_composite_uncovered_image_source_in(); 22332 //test_2d_composite_uncovered_image_source_out(); 22333 //test_2d_gradient_radial_cone_behind(); 22334 //test_2d_gradient_radial_cone_beside(); 22335 //test_2d_gradient_radial_cone_front(); 22336 //test_2d_gradient_radial_cone_shape2(); 22337 //test_2d_gradient_radial_cone_top(); 22338 //test_2d_gradient_radial_inside2(); 22339 //test_2d_gradient_radial_inside3(); 22340 //test_2d_gradient_radial_outside1(); 22341 //test_2d_gradient_radial_outside2(); 22342 //test_2d_gradient_radial_outside3(); 22343 //test_2d_line_cap_closed(); 22344 //test_2d_line_join_parallel(); 22345 //test_2d_path_arc_shape_3(); 22346 //test_2d_path_rect_selfintersect(); 22347 //test_2d_strokeRect_zero_5(); 22348 22349 /** 22350 * Other tests not being run 22351 */ 22352 //test_2d_composite_uncovered_fill_destination_atop(); 22353 //test_2d_composite_uncovered_fill_destination_in(); 22354 //test_2d_composite_uncovered_fill_source_in(); 22355 //test_2d_composite_uncovered_fill_source_out(); 22356 //test_2d_composite_uncovered_pattern_destination_atop(); 22357 //test_2d_composite_uncovered_pattern_destination_in(); 22358 //test_2d_composite_uncovered_pattern_source_in(); 22359 //test_2d_composite_uncovered_pattern_source_out(); 22360 22361 //test_2d_path_rect_zero_6(); // This test is bogus according to the spec; see bug 407107 22362 22363 // These tests are bogus according to the spec: shadows should not be 22364 // drawn if shadowBlur, shadowOffsetX, and shadowOffsetY are all zero, whic 22365 // they are in these tests 22366 //test_2d_shadow_composite_3(); 22367 //test_2d_shadow_composite_4(); 22368 try { 22369 test_2d_canvas_readonly(); 22370 } catch (e) { 22371 ok(false, "unexpected exception thrown in: test_2d_canvas_readonly"); 22372 } 22373 try { 22374 test_2d_canvas_reference(); 22375 } catch (e) { 22376 ok(false, "unexpected exception thrown in: test_2d_canvas_reference"); 22377 } 22378 try { 22379 test_2d_clearRect_basic(); 22380 } catch (e) { 22381 ok(false, "unexpected exception thrown in: test_2d_clearRect_basic"); 22382 } 22383 try { 22384 test_2d_clearRect_clip(); 22385 } catch (e) { 22386 ok(false, "unexpected exception thrown in: test_2d_clearRect_clip"); 22387 } 22388 try { 22389 test_2d_clearRect_globalalpha(); 22390 } catch (e) { 22391 ok(false, "unexpected exception thrown in: test_2d_clearRect_globalalpha"); 22392 } 22393 try { 22394 test_2d_clearRect_globalcomposite(); 22395 } catch (e) { 22396 ok(false, "unexpected exception thrown in: test_2d_clearRect_globalcomposite"); 22397 } 22398 try { 22399 test_2d_clearRect_negative(); 22400 } catch (e) { 22401 ok(false, "unexpected exception thrown in: test_2d_clearRect_negative"); 22402 } 22403 try { 22404 test_2d_clearRect_nonfinite(); 22405 } catch (e) { 22406 ok(false, "unexpected exception thrown in: test_2d_clearRect_nonfinite"); 22407 } 22408 try { 22409 test_2d_clearRect_path(); 22410 } catch (e) { 22411 ok(false, "unexpected exception thrown in: test_2d_clearRect_path"); 22412 } 22413 try { 22414 test_2d_clearRect_shadow(); 22415 } catch (e) { 22416 ok(false, "unexpected exception thrown in: test_2d_clearRect_shadow"); 22417 } 22418 try { 22419 test_2d_clearRect_transform(); 22420 } catch (e) { 22421 ok(false, "unexpected exception thrown in: test_2d_clearRect_transform"); 22422 } 22423 try { 22424 test_2d_clearRect_zero(); 22425 } catch (e) { 22426 ok(false, "unexpected exception thrown in: test_2d_clearRect_zero"); 22427 } 22428 try { 22429 test_2d_composite_canvas_copy(); 22430 } catch (e) { 22431 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_copy"); 22432 } 22433 try { 22434 test_2d_composite_canvas_destination_out(); 22435 } catch (e) { 22436 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_destination_out"); 22437 } 22438 try { 22439 test_2d_composite_canvas_destination_over(); 22440 } catch (e) { 22441 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_destination_over"); 22442 } 22443 try { 22444 test_2d_composite_canvas_source_atop(); 22445 } catch (e) { 22446 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_source_atop"); 22447 } 22448 try { 22449 test_2d_composite_canvas_source_over(); 22450 } catch (e) { 22451 ok(false, "unexpected exception thrown in: test_2d_composite_canvas_source_over"); 22452 } 22453 try { 22454 test_2d_composite_clip_copy(); 22455 } catch (e) { 22456 ok(false, "unexpected exception thrown in: test_2d_composite_clip_copy"); 22457 } 22458 try { 22459 test_2d_composite_clip_destination_atop(); 22460 } catch (e) { 22461 ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_atop"); 22462 } 22463 try { 22464 test_2d_composite_clip_destination_in(); 22465 } catch (e) { 22466 ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_in"); 22467 } 22468 try { 22469 test_2d_composite_clip_destination_out(); 22470 } catch (e) { 22471 ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_out"); 22472 } 22473 try { 22474 test_2d_composite_clip_destination_over(); 22475 } catch (e) { 22476 ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_over"); 22477 } 22478 try { 22479 test_2d_composite_clip_source_atop(); 22480 } catch (e) { 22481 ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_atop"); 22482 } 22483 try { 22484 test_2d_composite_clip_source_in(); 22485 } catch (e) { 22486 ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_in"); 22487 } 22488 try { 22489 test_2d_composite_clip_source_out(); 22490 } catch (e) { 22491 ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_out"); 22492 } 22493 try { 22494 test_2d_composite_clip_source_over(); 22495 } catch (e) { 22496 ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_over"); 22497 } 22498 try { 22499 test_2d_composite_globalAlpha_canvas(); 22500 } catch (e) { 22501 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_canvas"); 22502 } 22503 try { 22504 test_2d_composite_globalAlpha_canvaspattern(); 22505 } catch (e) { 22506 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_canvaspattern"); 22507 } 22508 try { 22509 test_2d_composite_globalAlpha_default(); 22510 } catch (e) { 22511 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_default"); 22512 } 22513 try { 22514 test_2d_composite_globalAlpha_fill(); 22515 } catch (e) { 22516 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_fill"); 22517 } 22518 try { 22519 test_2d_composite_globalAlpha_image(); 22520 } catch (e) { 22521 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_image"); 22522 } 22523 try { 22524 test_2d_composite_globalAlpha_imagepattern(); 22525 } catch (e) { 22526 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_imagepattern"); 22527 } 22528 try { 22529 test_2d_composite_globalAlpha_invalid(); 22530 } catch (e) { 22531 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_invalid"); 22532 } 22533 try { 22534 test_2d_composite_globalAlpha_range(); 22535 } catch (e) { 22536 ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_range"); 22537 } 22538 try { 22539 test_2d_composite_image_copy(); 22540 } catch (e) { 22541 ok(false, "unexpected exception thrown in: test_2d_composite_image_copy"); 22542 } 22543 try { 22544 test_2d_composite_image_destination_out(); 22545 } catch (e) { 22546 ok(false, "unexpected exception thrown in: test_2d_composite_image_destination_out"); 22547 } 22548 try { 22549 test_2d_composite_image_destination_over(); 22550 } catch (e) { 22551 ok(false, "unexpected exception thrown in: test_2d_composite_image_destination_over"); 22552 } 22553 try { 22554 test_2d_composite_image_source_atop(); 22555 } catch (e) { 22556 ok(false, "unexpected exception thrown in: test_2d_composite_image_source_atop"); 22557 } 22558 try { 22559 test_2d_composite_image_source_over(); 22560 } catch (e) { 22561 ok(false, "unexpected exception thrown in: test_2d_composite_image_source_over"); 22562 } 22563 try { 22564 test_2d_composite_operation_casesensitive(); 22565 } catch (e) { 22566 ok(false, "unexpected exception thrown in: test_2d_composite_operation_casesensitive"); 22567 } 22568 try { 22569 test_2d_composite_operation_darker(); 22570 } catch (e) { 22571 ok(false, "unexpected exception thrown in: test_2d_composite_operation_darker"); 22572 } 22573 try { 22574 test_2d_composite_operation_default(); 22575 } catch (e) { 22576 ok(false, "unexpected exception thrown in: test_2d_composite_operation_default"); 22577 } 22578 try { 22579 test_2d_composite_operation_get(); 22580 } catch (e) { 22581 ok(false, "unexpected exception thrown in: test_2d_composite_operation_get"); 22582 } 22583 try { 22584 test_2d_composite_operation_highlight(); 22585 } catch (e) { 22586 ok(false, "unexpected exception thrown in: test_2d_composite_operation_highlight"); 22587 } 22588 try { 22589 test_2d_composite_operation_nullsuffix(); 22590 } catch (e) { 22591 ok(false, "unexpected exception thrown in: test_2d_composite_operation_nullsuffix"); 22592 } 22593 try { 22594 test_2d_composite_operation_over(); 22595 } catch (e) { 22596 ok(false, "unexpected exception thrown in: test_2d_composite_operation_over"); 22597 } 22598 try { 22599 test_2d_composite_operation_unrecognised(); 22600 } catch (e) { 22601 ok(false, "unexpected exception thrown in: test_2d_composite_operation_unrecognised"); 22602 } 22603 try { 22604 test_2d_composite_solid_copy(); 22605 } catch (e) { 22606 ok(false, "unexpected exception thrown in: test_2d_composite_solid_copy"); 22607 } 22608 try { 22609 test_2d_composite_solid_destination_atop(); 22610 } catch (e) { 22611 ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_atop"); 22612 } 22613 try { 22614 test_2d_composite_solid_destination_in(); 22615 } catch (e) { 22616 ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_in"); 22617 } 22618 try { 22619 test_2d_composite_solid_destination_out(); 22620 } catch (e) { 22621 ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_out"); 22622 } 22623 try { 22624 test_2d_composite_solid_destination_over(); 22625 } catch (e) { 22626 ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_over"); 22627 } 22628 try { 22629 test_2d_composite_solid_source_atop(); 22630 } catch (e) { 22631 ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_atop"); 22632 } 22633 try { 22634 test_2d_composite_solid_source_in(); 22635 } catch (e) { 22636 ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_in"); 22637 } 22638 try { 22639 test_2d_composite_solid_source_out(); 22640 } catch (e) { 22641 ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_out"); 22642 } 22643 try { 22644 test_2d_composite_solid_source_over(); 22645 } catch (e) { 22646 ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_over"); 22647 } 22648 try { 22649 test_2d_composite_transparent_copy(); 22650 } catch (e) { 22651 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_copy"); 22652 } 22653 try { 22654 test_2d_composite_transparent_destination_atop(); 22655 } catch (e) { 22656 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_atop"); 22657 } 22658 try { 22659 test_2d_composite_transparent_destination_in(); 22660 } catch (e) { 22661 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_in"); 22662 } 22663 try { 22664 test_2d_composite_transparent_destination_out(); 22665 } catch (e) { 22666 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_out"); 22667 } 22668 try { 22669 test_2d_composite_transparent_destination_over(); 22670 } catch (e) { 22671 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_over"); 22672 } 22673 try { 22674 test_2d_composite_transparent_source_atop(); 22675 } catch (e) { 22676 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_atop"); 22677 } 22678 try { 22679 test_2d_composite_transparent_source_in(); 22680 } catch (e) { 22681 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_in"); 22682 } 22683 try { 22684 test_2d_composite_transparent_source_out(); 22685 } catch (e) { 22686 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_out"); 22687 } 22688 try { 22689 test_2d_composite_transparent_source_over(); 22690 } catch (e) { 22691 ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_over"); 22692 } 22693 try { 22694 test_2d_composite_uncovered_fill_copy(); 22695 } catch (e) { 22696 ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_fill_copy"); 22697 } 22698 try { 22699 test_2d_composite_uncovered_image_copy(); 22700 } catch (e) { 22701 ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_image_copy"); 22702 } 22703 try { 22704 test_2d_composite_uncovered_pattern_copy(); 22705 } catch (e) { 22706 ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_pattern_copy"); 22707 } 22708 try { 22709 test_2d_drawImage_3arg(); 22710 } catch (e) { 22711 ok(false, "unexpected exception thrown in: test_2d_drawImage_3arg"); 22712 } 22713 try { 22714 test_2d_drawImage_5arg(); 22715 } catch (e) { 22716 ok(false, "unexpected exception thrown in: test_2d_drawImage_5arg"); 22717 } 22718 try { 22719 test_2d_drawImage_9arg_basic(); 22720 } catch (e) { 22721 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_basic"); 22722 } 22723 try { 22724 test_2d_drawImage_9arg_destpos(); 22725 } catch (e) { 22726 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_destpos"); 22727 } 22728 try { 22729 test_2d_drawImage_9arg_destsize(); 22730 } catch (e) { 22731 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_destsize"); 22732 } 22733 try { 22734 test_2d_drawImage_9arg_sourcepos(); 22735 } catch (e) { 22736 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_sourcepos"); 22737 } 22738 try { 22739 test_2d_drawImage_9arg_sourcesize(); 22740 } catch (e) { 22741 ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_sourcesize"); 22742 } 22743 try { 22744 test_2d_drawImage_alpha(); 22745 } catch (e) { 22746 ok(false, "unexpected exception thrown in: test_2d_drawImage_alpha"); 22747 } 22748 try { 22749 test_2d_drawImage_animated_poster(); 22750 } catch (e) { 22751 ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_poster"); 22752 } 22753 try { 22754 test_2d_drawImage_broken(); 22755 } catch (e) { 22756 ok(false, "unexpected exception thrown in: test_2d_drawImage_broken"); 22757 } 22758 try { 22759 test_2d_drawImage_canvas(); 22760 } catch (e) { 22761 ok(false, "unexpected exception thrown in: test_2d_drawImage_canvas"); 22762 } 22763 try { 22764 test_2d_drawImage_clip(); 22765 } catch (e) { 22766 ok(false, "unexpected exception thrown in: test_2d_drawImage_clip"); 22767 } 22768 try { 22769 test_2d_drawImage_composite(); 22770 } catch (e) { 22771 ok(false, "unexpected exception thrown in: test_2d_drawImage_composite"); 22772 } 22773 try { 22774 test_2d_drawImage_floatsource(); 22775 } catch (e) { 22776 ok(false, "unexpected exception thrown in: test_2d_drawImage_floatsource"); 22777 } 22778 try { 22779 test_2d_drawImage_incomplete(); 22780 } catch (e) { 22781 ok(false, "unexpected exception thrown in: test_2d_drawImage_incomplete"); 22782 } 22783 try { 22784 test_2d_drawImage_negativedest(); 22785 } catch (e) { 22786 ok(false, "unexpected exception thrown in: test_2d_drawImage_negativedest"); 22787 } 22788 try { 22789 test_2d_drawImage_negativesource(); 22790 } catch (e) { 22791 ok(false, "unexpected exception thrown in: test_2d_drawImage_negativesource"); 22792 } 22793 try { 22794 test_2d_drawImage_nonfinite(); 22795 } catch (e) { 22796 ok(false, "unexpected exception thrown in: test_2d_drawImage_nonfinite"); 22797 } 22798 try { 22799 test_2d_drawImage_nowrap(); 22800 } catch (e) { 22801 ok(false, "unexpected exception thrown in: test_2d_drawImage_nowrap"); 22802 } 22803 try { 22804 test_2d_drawImage_null(); 22805 } catch (e) { 22806 ok(false, "unexpected exception thrown in: test_2d_drawImage_null"); 22807 } 22808 try { 22809 test_2d_drawImage_path(); 22810 } catch (e) { 22811 ok(false, "unexpected exception thrown in: test_2d_drawImage_path"); 22812 } 22813 try { 22814 test_2d_drawImage_self_1(); 22815 } catch (e) { 22816 ok(false, "unexpected exception thrown in: test_2d_drawImage_self_1"); 22817 } 22818 try { 22819 test_2d_drawImage_self_2(); 22820 } catch (e) { 22821 ok(false, "unexpected exception thrown in: test_2d_drawImage_self_2"); 22822 } 22823 try { 22824 test_2d_drawImage_transform(); 22825 } catch (e) { 22826 ok(false, "unexpected exception thrown in: test_2d_drawImage_transform"); 22827 } 22828 try { 22829 test_2d_drawImage_wrongtype(); 22830 } catch (e) { 22831 ok(false, "unexpected exception thrown in: test_2d_drawImage_wrongtype"); 22832 } 22833 try { 22834 test_2d_drawImage_zerosource(); 22835 } catch (e) { 22836 ok(false, "unexpected exception thrown in: test_2d_drawImage_zerosource"); 22837 } 22838 try { 22839 test_2d_fillRect_basic(); 22840 } catch (e) { 22841 ok(false, "unexpected exception thrown in: test_2d_fillRect_basic"); 22842 } 22843 try { 22844 test_2d_fillRect_clip(); 22845 } catch (e) { 22846 ok(false, "unexpected exception thrown in: test_2d_fillRect_clip"); 22847 } 22848 try { 22849 test_2d_fillRect_negative(); 22850 } catch (e) { 22851 ok(false, "unexpected exception thrown in: test_2d_fillRect_negative"); 22852 } 22853 try { 22854 test_2d_fillRect_nonfinite(); 22855 } catch (e) { 22856 ok(false, "unexpected exception thrown in: test_2d_fillRect_nonfinite"); 22857 } 22858 try { 22859 test_2d_fillRect_path(); 22860 } catch (e) { 22861 ok(false, "unexpected exception thrown in: test_2d_fillRect_path"); 22862 } 22863 try { 22864 test_2d_fillRect_shadow(); 22865 } catch (e) { 22866 ok(false, "unexpected exception thrown in: test_2d_fillRect_shadow"); 22867 } 22868 try { 22869 test_2d_fillRect_transform(); 22870 } catch (e) { 22871 ok(false, "unexpected exception thrown in: test_2d_fillRect_transform"); 22872 } 22873 try { 22874 test_2d_fillRect_zero(); 22875 } catch (e) { 22876 ok(false, "unexpected exception thrown in: test_2d_fillRect_zero"); 22877 } 22878 try { 22879 test_2d_fillStyle_default(); 22880 } catch (e) { 22881 ok(false, "unexpected exception thrown in: test_2d_fillStyle_default"); 22882 } 22883 try { 22884 test_2d_fillStyle_get_semitransparent(); 22885 } catch (e) { 22886 ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_semitransparent"); 22887 } 22888 try { 22889 test_2d_fillStyle_get_solid(); 22890 } catch (e) { 22891 ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_solid"); 22892 } 22893 try { 22894 test_2d_fillStyle_get_transparent(); 22895 } catch (e) { 22896 ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_transparent"); 22897 } 22898 try { 22899 test_2d_fillStyle_invalidstring(); 22900 } catch (e) { 22901 ok(false, "unexpected exception thrown in: test_2d_fillStyle_invalidstring"); 22902 } 22903 try { 22904 test_2d_fillStyle_invalidtype(); 22905 } catch (e) { 22906 ok(false, "unexpected exception thrown in: test_2d_fillStyle_invalidtype"); 22907 } 22908 try { 22909 test_2d_fillStyle_parse_current_basic(); 22910 } catch (e) { 22911 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_basic"); 22912 } 22913 try { 22914 test_2d_fillStyle_parse_current_changed(); 22915 } catch (e) { 22916 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_changed"); 22917 } 22918 try { 22919 test_2d_fillStyle_parse_current_removed(); 22920 } catch (e) { 22921 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_removed"); 22922 } 22923 try { 22924 test_2d_fillStyle_parse_hex3(); 22925 } catch (e) { 22926 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hex3"); 22927 } 22928 try { 22929 test_2d_fillStyle_parse_hex6(); 22930 } catch (e) { 22931 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hex6"); 22932 } 22933 try { 22934 test_2d_fillStyle_parse_hsl_1(); 22935 } catch (e) { 22936 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_1"); 22937 } 22938 try { 22939 test_2d_fillStyle_parse_hsl_2(); 22940 } catch (e) { 22941 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_2"); 22942 } 22943 try { 22944 test_2d_fillStyle_parse_hsl_3(); 22945 } catch (e) { 22946 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_3"); 22947 } 22948 try { 22949 test_2d_fillStyle_parse_hsl_4(); 22950 } catch (e) { 22951 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_4"); 22952 } 22953 try { 22954 test_2d_fillStyle_parse_hsl_5(); 22955 } catch (e) { 22956 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_5"); 22957 } 22958 try { 22959 test_2d_fillStyle_parse_hsl_clamp_1(); 22960 } catch (e) { 22961 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_1"); 22962 } 22963 try { 22964 test_2d_fillStyle_parse_hsl_clamp_2(); 22965 } catch (e) { 22966 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_2"); 22967 } 22968 try { 22969 test_2d_fillStyle_parse_hsl_clamp_3(); 22970 } catch (e) { 22971 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_3"); 22972 } 22973 try { 22974 test_2d_fillStyle_parse_hsl_clamp_4(); 22975 } catch (e) { 22976 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_4"); 22977 } 22978 try { 22979 test_2d_fillStyle_parse_hsla_1(); 22980 } catch (e) { 22981 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_1"); 22982 } 22983 try { 22984 test_2d_fillStyle_parse_hsla_2(); 22985 } catch (e) { 22986 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_2"); 22987 } 22988 try { 22989 test_2d_fillStyle_parse_hsla_clamp_1(); 22990 } catch (e) { 22991 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_1"); 22992 } 22993 try { 22994 test_2d_fillStyle_parse_hsla_clamp_2(); 22995 } catch (e) { 22996 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_2"); 22997 } 22998 try { 22999 test_2d_fillStyle_parse_hsla_clamp_3(); 23000 } catch (e) { 23001 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_3"); 23002 } 23003 try { 23004 test_2d_fillStyle_parse_hsla_clamp_4(); 23005 } catch (e) { 23006 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_4"); 23007 } 23008 try { 23009 test_2d_fillStyle_parse_hsla_clamp_5(); 23010 } catch (e) { 23011 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_5"); 23012 } 23013 try { 23014 test_2d_fillStyle_parse_hsla_clamp_6(); 23015 } catch (e) { 23016 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_6"); 23017 } 23018 try { 23019 test_2d_fillStyle_parse_html4(); 23020 } catch (e) { 23021 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_html4"); 23022 } 23023 try { 23024 test_2d_fillStyle_parse_invalid_hex3(); 23025 } catch (e) { 23026 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hex3"); 23027 } 23028 try { 23029 test_2d_fillStyle_parse_invalid_hex6(); 23030 } catch (e) { 23031 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hex6"); 23032 } 23033 try { 23034 test_2d_fillStyle_parse_invalid_hsl_1(); 23035 } catch (e) { 23036 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_1"); 23037 } 23038 try { 23039 test_2d_fillStyle_parse_invalid_hsl_2(); 23040 } catch (e) { 23041 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_2"); 23042 } 23043 try { 23044 test_2d_fillStyle_parse_invalid_hsl_3(); 23045 } catch (e) { 23046 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_3"); 23047 } 23048 try { 23049 test_2d_fillStyle_parse_invalid_hsl_4(); 23050 } catch (e) { 23051 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_4"); 23052 } 23053 try { 23054 test_2d_fillStyle_parse_invalid_hsl_5(); 23055 } catch (e) { 23056 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_5"); 23057 } 23058 try { 23059 test_2d_fillStyle_parse_invalid_hsla_1(); 23060 } catch (e) { 23061 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsla_1"); 23062 } 23063 try { 23064 test_2d_fillStyle_parse_invalid_hsla_2(); 23065 } catch (e) { 23066 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsla_2"); 23067 } 23068 try { 23069 test_2d_fillStyle_parse_invalid_name_1() 23070 } catch (e) { 23071 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_1"); 23072 } 23073 try { 23074 test_2d_fillStyle_parse_invalid_name_2() 23075 } catch (e) { 23076 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_2"); 23077 } 23078 try { 23079 test_2d_fillStyle_parse_invalid_name_3() 23080 } catch (e) { 23081 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_3"); 23082 } 23083 try { 23084 test_2d_fillStyle_parse_invalid_rgb_1(); 23085 } catch (e) { 23086 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_1"); 23087 } 23088 try { 23089 test_2d_fillStyle_parse_invalid_rgb_2(); 23090 } catch (e) { 23091 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_2"); 23092 } 23093 try { 23094 test_2d_fillStyle_parse_invalid_rgb_3(); 23095 } catch (e) { 23096 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_3"); 23097 } 23098 try { 23099 test_2d_fillStyle_parse_invalid_rgb_4(); 23100 } catch (e) { 23101 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_4"); 23102 } 23103 try { 23104 test_2d_fillStyle_parse_invalid_rgb_5(); 23105 } catch (e) { 23106 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_5"); 23107 } 23108 try { 23109 test_2d_fillStyle_parse_invalid_rgb_6(); 23110 } catch (e) { 23111 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_6"); 23112 } 23113 try { 23114 test_2d_fillStyle_parse_invalid_rgb_7(); 23115 } catch (e) { 23116 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_7"); 23117 } 23118 try { 23119 test_2d_fillStyle_parse_invalid_rgba_1(); 23120 } catch (e) { 23121 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_1"); 23122 } 23123 try { 23124 test_2d_fillStyle_parse_invalid_rgba_2(); 23125 } catch (e) { 23126 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_2"); 23127 } 23128 try { 23129 test_2d_fillStyle_parse_invalid_rgba_3(); 23130 } catch (e) { 23131 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_3"); 23132 } 23133 try { 23134 test_2d_fillStyle_parse_invalid_rgba_4(); 23135 } catch (e) { 23136 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_4"); 23137 } 23138 try { 23139 test_2d_fillStyle_parse_invalid_rgba_5(); 23140 } catch (e) { 23141 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_5"); 23142 } 23143 try { 23144 test_2d_fillStyle_parse_rgb_clamp_1(); 23145 } catch (e) { 23146 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_1"); 23147 } 23148 try { 23149 test_2d_fillStyle_parse_rgb_clamp_2(); 23150 } catch (e) { 23151 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_2"); 23152 } 23153 try { 23154 test_2d_fillStyle_parse_rgb_clamp_3(); 23155 } catch (e) { 23156 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_3"); 23157 } 23158 try { 23159 test_2d_fillStyle_parse_rgb_clamp_4(); 23160 } catch (e) { 23161 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_4"); 23162 } 23163 try { 23164 test_2d_fillStyle_parse_rgb_clamp_5(); 23165 } catch (e) { 23166 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_5"); 23167 } 23168 try { 23169 test_2d_fillStyle_parse_rgb_num(); 23170 } catch (e) { 23171 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_num"); 23172 } 23173 try { 23174 test_2d_fillStyle_parse_rgb_percent(); 23175 } catch (e) { 23176 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_percent"); 23177 } 23178 try { 23179 test_2d_fillStyle_parse_rgba_clamp_1(); 23180 } catch (e) { 23181 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_clamp_1"); 23182 } 23183 try { 23184 test_2d_fillStyle_parse_rgba_clamp_2(); 23185 } catch (e) { 23186 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_clamp_2"); 23187 } 23188 try { 23189 test_2d_fillStyle_parse_rgba_num_1(); 23190 } catch (e) { 23191 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_num_1"); 23192 } 23193 try { 23194 test_2d_fillStyle_parse_rgba_num_2(); 23195 } catch (e) { 23196 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_num_2"); 23197 } 23198 try { 23199 test_2d_fillStyle_parse_rgba_percent(); 23200 } catch (e) { 23201 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_percent"); 23202 } 23203 try { 23204 test_2d_fillStyle_parse_rgba_solid_1(); 23205 } catch (e) { 23206 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_solid_1"); 23207 } 23208 try { 23209 test_2d_fillStyle_parse_rgba_solid_2(); 23210 } catch (e) { 23211 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_solid_2"); 23212 } 23213 try { 23214 test_2d_fillStyle_parse_svg_1(); 23215 } catch (e) { 23216 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_svg_1"); 23217 } 23218 try { 23219 test_2d_fillStyle_parse_svg_2(); 23220 } catch (e) { 23221 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_svg_2"); 23222 } 23223 try { 23224 test_2d_fillStyle_parse_system(); 23225 } catch (e) { 23226 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_system"); 23227 } 23228 try { 23229 test_2d_fillStyle_parse_transparent_1(); 23230 } catch (e) { 23231 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_transparent_1"); 23232 } 23233 try { 23234 test_2d_fillStyle_parse_transparent_2(); 23235 } catch (e) { 23236 ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_transparent_2"); 23237 } 23238 try { 23239 test_2d_getcontext_exists(); 23240 } catch (e) { 23241 ok(false, "unexpected exception thrown in: test_2d_getcontext_exists"); 23242 } 23243 try { 23244 test_2d_getcontext_shared(); 23245 } catch (e) { 23246 ok(false, "unexpected exception thrown in: test_2d_getcontext_shared"); 23247 } 23248 try { 23249 test_2d_getcontext_unique(); 23250 } catch (e) { 23251 ok(false, "unexpected exception thrown in: test_2d_getcontext_unique"); 23252 } 23253 try { 23254 test_2d_gradient_empty(); 23255 } catch (e) { 23256 ok(false, "unexpected exception thrown in: test_2d_gradient_empty"); 23257 } 23258 try { 23259 test_2d_gradient_interpolate_alpha(); 23260 } catch (e) { 23261 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_alpha"); 23262 } 23263 try { 23264 test_2d_gradient_interpolate_colour(); 23265 } catch (e) { 23266 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_colour"); 23267 } 23268 try { 23269 test_2d_gradient_interpolate_colouralpha(); 23270 } catch (e) { 23271 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_colouralpha"); 23272 } 23273 try { 23274 test_2d_gradient_interpolate_multiple(); 23275 } catch (e) { 23276 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_multiple"); 23277 } 23278 try { 23279 test_2d_gradient_interpolate_outside(); 23280 } catch (e) { 23281 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_outside"); 23282 } 23283 try { 23284 test_2d_gradient_interpolate_overlap(); 23285 } catch (e) { 23286 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_overlap"); 23287 } 23288 try { 23289 test_2d_gradient_interpolate_overlap2(); 23290 } catch (e) { 23291 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_overlap2"); 23292 } 23293 try { 23294 test_2d_gradient_interpolate_solid(); 23295 } catch (e) { 23296 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_solid"); 23297 } 23298 try { 23299 test_2d_gradient_interpolate_vertical(); 23300 } catch (e) { 23301 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_vertical"); 23302 } 23303 try { 23304 test_2d_gradient_interpolate_zerosize(); 23305 } catch (e) { 23306 ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_zerosize"); 23307 } 23308 try { 23309 test_2d_gradient_linear_nonfinite(); 23310 } catch (e) { 23311 ok(false, "unexpected exception thrown in: test_2d_gradient_linear_nonfinite"); 23312 } 23313 try { 23314 test_2d_gradient_linear_transform_1(); 23315 } catch (e) { 23316 ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_1"); 23317 } 23318 try { 23319 test_2d_gradient_linear_transform_2(); 23320 } catch (e) { 23321 ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_2"); 23322 } 23323 try { 23324 test_2d_gradient_linear_transform_3(); 23325 } catch (e) { 23326 ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_3"); 23327 } 23328 try { 23329 test_2d_gradient_object_compare(); 23330 } catch (e) { 23331 ok(false, "unexpected exception thrown in: test_2d_gradient_object_compare"); 23332 } 23333 try { 23334 test_2d_gradient_object_crosscanvas(); 23335 } catch (e) { 23336 ok(false, "unexpected exception thrown in: test_2d_gradient_object_crosscanvas"); 23337 } 23338 try { 23339 test_2d_gradient_object_invalidcolour(); 23340 } catch (e) { 23341 ok(false, "unexpected exception thrown in: test_2d_gradient_object_invalidcolour"); 23342 } 23343 try { 23344 test_2d_gradient_object_invalidoffset(); 23345 } catch (e) { 23346 ok(false, "unexpected exception thrown in: test_2d_gradient_object_invalidoffset"); 23347 } 23348 try { 23349 test_2d_gradient_object_return(); 23350 } catch (e) { 23351 ok(false, "unexpected exception thrown in: test_2d_gradient_object_return"); 23352 } 23353 try { 23354 test_2d_gradient_object_type(); 23355 } catch (e) { 23356 ok(false, "unexpected exception thrown in: test_2d_gradient_object_type"); 23357 } 23358 try { 23359 test_2d_gradient_object_update(); 23360 } catch (e) { 23361 ok(false, "unexpected exception thrown in: test_2d_gradient_object_update"); 23362 } 23363 try { 23364 test_2d_gradient_radial_cone_bottom(); 23365 } catch (e) { 23366 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_bottom"); 23367 } 23368 try { 23369 test_2d_gradient_radial_cone_cylinder(); 23370 } catch (e) { 23371 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_cylinder"); 23372 } 23373 try { 23374 test_2d_gradient_radial_cone_shape1(); 23375 } catch (e) { 23376 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_shape1"); 23377 } 23378 try { 23379 test_2d_gradient_radial_inside1(); 23380 } catch (e) { 23381 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_inside1"); 23382 } 23383 try { 23384 test_2d_gradient_radial_negative(); 23385 } catch (e) { 23386 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_negative"); 23387 } 23388 try { 23389 test_2d_gradient_radial_nonfinite(); 23390 } catch (e) { 23391 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_nonfinite"); 23392 } 23393 try { 23394 test_2d_gradient_radial_transform_1(); 23395 } catch (e) { 23396 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_1"); 23397 } 23398 try { 23399 test_2d_gradient_radial_transform_2(); 23400 } catch (e) { 23401 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_2"); 23402 } 23403 try { 23404 test_2d_gradient_radial_transform_3(); 23405 } catch (e) { 23406 ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_3"); 23407 } 23408 try { 23409 test_2d_imageData_create_basic(); 23410 } catch (e) { 23411 ok(false, "unexpected exception thrown in: test_2d_imageData_create_basic"); 23412 } 23413 try { 23414 test_2d_imageData_create1_basic(); 23415 } catch (e) { 23416 ok(false, "unexpected exception thrown in: test_2d_imageData_create1_basic"); 23417 } 23418 try { 23419 test_2d_imageData_create_initial(); 23420 } catch (e) { 23421 ok(false, "unexpected exception thrown in: test_2d_imageData_create_initial"); 23422 } 23423 try { 23424 test_2d_imageData_create1_initial(); 23425 } catch (e) { 23426 ok(false, "unexpected exception thrown in: test_2d_imageData_create1_initial"); 23427 } 23428 try { 23429 test_2d_imageData_create_large(); 23430 } catch (e) { 23431 ok(false, "unexpected exception thrown in: test_2d_imageData_create_large"); 23432 } 23433 try { 23434 test_2d_imageData_create_negative(); 23435 } catch (e) { 23436 ok(false, "unexpected exception thrown in: test_2d_imageData_create_negative"); 23437 } 23438 try { 23439 test_2d_imageData_create_nonfinite(); 23440 } catch (e) { 23441 ok(false, "unexpected exception thrown in: test_2d_imageData_create_nonfinite"); 23442 } 23443 try { 23444 test_2d_imageData_create_round(); 23445 } catch (e) { 23446 ok(false, "unexpected exception thrown in: test_2d_imageData_create_round"); 23447 } 23448 try { 23449 test_2d_imageData_create_tiny(); 23450 } catch (e) { 23451 ok(false, "unexpected exception thrown in: test_2d_imageData_create_tiny"); 23452 } 23453 try { 23454 test_2d_imageData_create_type(); 23455 } catch (e) { 23456 ok(false, "unexpected exception thrown in: test_2d_imageData_create_type"); 23457 } 23458 try { 23459 test_2d_imageData_create1_type(); 23460 } catch (e) { 23461 ok(false, "unexpected exception thrown in: test_2d_imageData_create1_type"); 23462 } 23463 try { 23464 test_2d_imageData_create_zero(); 23465 } catch (e) { 23466 ok(false, "unexpected exception thrown in: test_2d_imageData_create_zero"); 23467 } 23468 try { 23469 test_2d_imageData_create1_zero(); 23470 } catch (e) { 23471 ok(false, "unexpected exception thrown in: test_2d_imageData_create1_zero"); 23472 } 23473 try { 23474 test_2d_imageData_get_basic(); 23475 } catch (e) { 23476 ok(false, "unexpected exception thrown in: test_2d_imageData_get_basic"); 23477 } 23478 try { 23479 test_2d_imageData_get_clamp(); 23480 } catch (e) { 23481 ok(false, "unexpected exception thrown in: test_2d_imageData_get_clamp"); 23482 } 23483 try { 23484 test_2d_imageData_get_nonfinite(); 23485 } catch (e) { 23486 ok(false, "unexpected exception thrown in: test_2d_imageData_get_nonfinite"); 23487 } 23488 try { 23489 test_2d_imageData_get_nonpremul(); 23490 } catch (e) { 23491 ok(false, "unexpected exception thrown in: test_2d_imageData_get_nonpremul"); 23492 } 23493 try { 23494 test_2d_imageData_get_order_alpha(); 23495 } catch (e) { 23496 ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_alpha"); 23497 } 23498 try { 23499 test_2d_imageData_get_order_cols(); 23500 } catch (e) { 23501 ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_cols"); 23502 } 23503 try { 23504 test_2d_imageData_get_order_rgb(); 23505 } catch (e) { 23506 ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_rgb"); 23507 } 23508 try { 23509 test_2d_imageData_get_order_rows(); 23510 } catch (e) { 23511 ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_rows"); 23512 } 23513 try { 23514 test_2d_imageData_get_range(); 23515 } catch (e) { 23516 ok(false, "unexpected exception thrown in: test_2d_imageData_get_range"); 23517 } 23518 try { 23519 test_2d_imageData_get_source_negative(); 23520 } catch (e) { 23521 ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_negative"); 23522 } 23523 try { 23524 test_2d_imageData_get_source_outside(); 23525 } catch (e) { 23526 ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_outside"); 23527 } 23528 try { 23529 test_2d_imageData_get_source_size(); 23530 } catch (e) { 23531 ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_size"); 23532 } 23533 try { 23534 test_2d_imageData_get_tiny(); 23535 } catch (e) { 23536 ok(false, "unexpected exception thrown in: test_2d_imageData_get_tiny"); 23537 } 23538 try { 23539 test_2d_imageData_get_type(); 23540 } catch (e) { 23541 ok(false, "unexpected exception thrown in: test_2d_imageData_get_type"); 23542 } 23543 try { 23544 test_2d_imageData_get_unaffected(); 23545 } catch (e) { 23546 ok(false, "unexpected exception thrown in: test_2d_imageData_get_unaffected"); 23547 } 23548 try { 23549 test_2d_imageData_get_zero(); 23550 } catch (e) { 23551 ok(false, "unexpected exception thrown in: test_2d_imageData_get_zero"); 23552 } 23553 try { 23554 test_2d_imageData_object_clamp(); 23555 } catch (e) { 23556 ok(false, "unexpected exception thrown in: test_2d_imageData_object_clamp"); 23557 } 23558 try { 23559 test_2d_imageData_object_ctor(); 23560 } catch (e) { 23561 ok(false, "unexpected exception thrown in: test_2d_imageData_object_ctor"); 23562 } 23563 try { 23564 test_2d_imageData_object_nan(); 23565 } catch (e) { 23566 ok(false, "unexpected exception thrown in: test_2d_imageData_object_nan"); 23567 } 23568 try { 23569 test_2d_imageData_object_properties(); 23570 } catch (e) { 23571 ok(false, "unexpected exception thrown in: test_2d_imageData_object_properties"); 23572 } 23573 try { 23574 test_2d_imageData_object_readonly(); 23575 } catch (e) { 23576 ok(false, "unexpected exception thrown in: test_2d_imageData_object_readonly"); 23577 } 23578 try { 23579 test_2d_imageData_object_round(); 23580 } catch (e) { 23581 ok(false, "unexpected exception thrown in: test_2d_imageData_object_round"); 23582 } 23583 try { 23584 test_2d_imageData_object_set(); 23585 } catch (e) { 23586 ok(false, "unexpected exception thrown in: test_2d_imageData_object_set"); 23587 } 23588 try { 23589 test_2d_imageData_object_string(); 23590 } catch (e) { 23591 ok(false, "unexpected exception thrown in: test_2d_imageData_object_string"); 23592 } 23593 try { 23594 test_2d_imageData_object_undefined(); 23595 } catch (e) { 23596 ok(false, "unexpected exception thrown in: test_2d_imageData_object_undefined"); 23597 } 23598 try { 23599 test_2d_imageData_put_alpha(); 23600 } catch (e) { 23601 ok(false, "unexpected exception thrown in: test_2d_imageData_put_alpha"); 23602 } 23603 try { 23604 test_2d_imageData_put_basic(); 23605 } catch (e) { 23606 ok(false, "unexpected exception thrown in: test_2d_imageData_put_basic"); 23607 } 23608 try { 23609 test_2d_imageData_put_clip(); 23610 } catch (e) { 23611 ok(false, "unexpected exception thrown in: test_2d_imageData_put_clip"); 23612 } 23613 try { 23614 test_2d_imageData_put_created(); 23615 } catch (e) { 23616 ok(false, "unexpected exception thrown in: test_2d_imageData_put_created"); 23617 } 23618 try { 23619 test_2d_imageData_put_cross(); 23620 } catch (e) { 23621 ok(false, "unexpected exception thrown in: test_2d_imageData_put_cross"); 23622 } 23623 try { 23624 test_2d_imageData_put_dirty_negative(); 23625 } catch (e) { 23626 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_negative"); 23627 } 23628 try { 23629 test_2d_imageData_put_dirty_outside(); 23630 } catch (e) { 23631 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_outside"); 23632 } 23633 try { 23634 test_2d_imageData_put_dirty_rect1(); 23635 } catch (e) { 23636 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_rect1"); 23637 } 23638 try { 23639 test_2d_imageData_put_dirty_rect2(); 23640 } catch (e) { 23641 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_rect2"); 23642 } 23643 try { 23644 test_2d_imageData_put_dirty_zero(); 23645 } catch (e) { 23646 ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_zero"); 23647 } 23648 try { 23649 test_2d_imageData_put_modified(); 23650 } catch (e) { 23651 ok(false, "unexpected exception thrown in: test_2d_imageData_put_modified"); 23652 } 23653 try { 23654 test_2d_imageData_put_nonfinite(); 23655 } catch (e) { 23656 ok(false, "unexpected exception thrown in: test_2d_imageData_put_nonfinite"); 23657 } 23658 try { 23659 test_2d_imageData_put_null(); 23660 } catch (e) { 23661 ok(false, "unexpected exception thrown in: test_2d_imageData_put_null"); 23662 } 23663 try { 23664 test_2d_imageData_put_path(); 23665 } catch (e) { 23666 ok(false, "unexpected exception thrown in: test_2d_imageData_put_path"); 23667 } 23668 try { 23669 test_2d_imageData_put_unaffected(); 23670 } catch (e) { 23671 ok(false, "unexpected exception thrown in: test_2d_imageData_put_unaffected"); 23672 } 23673 try { 23674 test_2d_imageData_put_unchanged(); 23675 } catch (e) { 23676 ok(false, "unexpected exception thrown in: test_2d_imageData_put_unchanged"); 23677 } 23678 try { 23679 test_2d_imageData_put_wrongtype(); 23680 } catch (e) { 23681 ok(false, "unexpected exception thrown in: test_2d_imageData_put_wrongtype"); 23682 } 23683 try { 23684 test_2d_line_cap_butt(); 23685 } catch (e) { 23686 ok(false, "unexpected exception thrown in: test_2d_line_cap_butt"); 23687 } 23688 try { 23689 test_2d_line_cap_invalid(); 23690 } catch (e) { 23691 ok(false, "unexpected exception thrown in: test_2d_line_cap_invalid"); 23692 } 23693 try { 23694 test_2d_line_cap_open(); 23695 } catch (e) { 23696 ok(false, "unexpected exception thrown in: test_2d_line_cap_open"); 23697 } 23698 try { 23699 test_2d_line_cap_round(); 23700 } catch (e) { 23701 ok(false, "unexpected exception thrown in: test_2d_line_cap_round"); 23702 } 23703 try { 23704 test_2d_line_cap_square(); 23705 } catch (e) { 23706 ok(false, "unexpected exception thrown in: test_2d_line_cap_square"); 23707 } 23708 try { 23709 test_2d_line_cross(); 23710 } catch (e) { 23711 ok(false, "unexpected exception thrown in: test_2d_line_cross"); 23712 } 23713 try { 23714 test_2d_line_defaults(); 23715 } catch (e) { 23716 ok(false, "unexpected exception thrown in: test_2d_line_defaults"); 23717 } 23718 try { 23719 test_2d_line_join_bevel(); 23720 } catch (e) { 23721 ok(false, "unexpected exception thrown in: test_2d_line_join_bevel"); 23722 } 23723 try { 23724 test_2d_line_join_closed(); 23725 } catch (e) { 23726 ok(false, "unexpected exception thrown in: test_2d_line_join_closed"); 23727 } 23728 try { 23729 test_2d_line_join_invalid(); 23730 } catch (e) { 23731 ok(false, "unexpected exception thrown in: test_2d_line_join_invalid"); 23732 } 23733 try { 23734 test_2d_line_join_miter(); 23735 } catch (e) { 23736 ok(false, "unexpected exception thrown in: test_2d_line_join_miter"); 23737 } 23738 try { 23739 test_2d_line_join_open(); 23740 } catch (e) { 23741 ok(false, "unexpected exception thrown in: test_2d_line_join_open"); 23742 } 23743 try { 23744 test_2d_line_join_round(); 23745 } catch (e) { 23746 ok(false, "unexpected exception thrown in: test_2d_line_join_round"); 23747 } 23748 try { 23749 test_2d_line_miter_acute(); 23750 } catch (e) { 23751 ok(false, "unexpected exception thrown in: test_2d_line_miter_acute"); 23752 } 23753 try { 23754 test_2d_line_miter_exceeded(); 23755 } catch (e) { 23756 ok(false, "unexpected exception thrown in: test_2d_line_miter_exceeded"); 23757 } 23758 try { 23759 test_2d_line_miter_invalid(); 23760 } catch (e) { 23761 ok(false, "unexpected exception thrown in: test_2d_line_miter_invalid"); 23762 } 23763 try { 23764 test_2d_line_miter_lineedge(); 23765 } catch (e) { 23766 ok(false, "unexpected exception thrown in: test_2d_line_miter_lineedge"); 23767 } 23768 try { 23769 test_2d_line_miter_obtuse(); 23770 } catch (e) { 23771 ok(false, "unexpected exception thrown in: test_2d_line_miter_obtuse"); 23772 } 23773 try { 23774 test_2d_line_miter_rightangle(); 23775 } catch (e) { 23776 ok(false, "unexpected exception thrown in: test_2d_line_miter_rightangle"); 23777 } 23778 try { 23779 test_2d_line_miter_within(); 23780 } catch (e) { 23781 ok(false, "unexpected exception thrown in: test_2d_line_miter_within"); 23782 } 23783 try { 23784 test_2d_line_union(); 23785 } catch (e) { 23786 ok(false, "unexpected exception thrown in: test_2d_line_union"); 23787 } 23788 try { 23789 test_2d_line_width_basic(); 23790 } catch (e) { 23791 ok(false, "unexpected exception thrown in: test_2d_line_width_basic"); 23792 } 23793 try { 23794 test_2d_line_width_invalid(); 23795 } catch (e) { 23796 ok(false, "unexpected exception thrown in: test_2d_line_width_invalid"); 23797 } 23798 try { 23799 test_2d_line_width_transformed(); 23800 } catch (e) { 23801 ok(false, "unexpected exception thrown in: test_2d_line_width_transformed"); 23802 } 23803 try { 23804 test_2d_missingargs(); 23805 } catch (e) { 23806 ok(false, "unexpected exception thrown in: test_2d_missingargs"); 23807 } 23808 try { 23809 test_2d_path_arc_angle_1(); 23810 } catch (e) { 23811 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_1"); 23812 } 23813 try { 23814 test_2d_path_arc_angle_2(); 23815 } catch (e) { 23816 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_2"); 23817 } 23818 try { 23819 test_2d_path_arc_angle_3(); 23820 } catch (e) { 23821 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_3"); 23822 } 23823 try { 23824 test_2d_path_arc_angle_4(); 23825 } catch (e) { 23826 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_4"); 23827 } 23828 try { 23829 test_2d_path_arc_angle_5(); 23830 } catch (e) { 23831 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_5"); 23832 } 23833 try { 23834 test_2d_path_arc_angle_6(); 23835 } catch (e) { 23836 ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_6"); 23837 } 23838 try { 23839 test_2d_path_arc_empty(); 23840 } catch (e) { 23841 ok(false, "unexpected exception thrown in: test_2d_path_arc_empty"); 23842 } 23843 try { 23844 test_2d_path_arc_end(); 23845 } catch (e) { 23846 ok(false, "unexpected exception thrown in: test_2d_path_arc_end"); 23847 } 23848 try { 23849 test_2d_path_arc_negative(); 23850 } catch (e) { 23851 ok(false, "unexpected exception thrown in: test_2d_path_arc_negative"); 23852 } 23853 try { 23854 test_2d_path_arc_nonempty(); 23855 } catch (e) { 23856 ok(false, "unexpected exception thrown in: test_2d_path_arc_nonempty"); 23857 } 23858 try { 23859 test_2d_path_arc_nonfinite(); 23860 } catch (e) { 23861 ok(false, "unexpected exception thrown in: test_2d_path_arc_nonfinite"); 23862 } 23863 try { 23864 test_2d_path_arc_scale_1(); 23865 } catch (e) { 23866 ok(false, "unexpected exception thrown in: test_2d_path_arc_scale_1"); 23867 } 23868 try { 23869 test_2d_path_arc_scale_2(); 23870 } catch (e) { 23871 ok(false, "unexpected exception thrown in: test_2d_path_arc_scale_2"); 23872 } 23873 try { 23874 test_2d_path_arc_selfintersect_1(); 23875 } catch (e) { 23876 ok(false, "unexpected exception thrown in: test_2d_path_arc_selfintersect_1"); 23877 } 23878 try { 23879 test_2d_path_arc_selfintersect_2(); 23880 } catch (e) { 23881 ok(false, "unexpected exception thrown in: test_2d_path_arc_selfintersect_2"); 23882 } 23883 try { 23884 test_2d_path_arc_shape_1(); 23885 } catch (e) { 23886 ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_1"); 23887 } 23888 try { 23889 test_2d_path_arc_shape_2(); 23890 } catch (e) { 23891 ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_2"); 23892 } 23893 try { 23894 test_2d_path_arc_shape_4(); 23895 } catch (e) { 23896 ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_4"); 23897 } 23898 try { 23899 test_2d_path_arc_shape_5(); 23900 } catch (e) { 23901 ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_5"); 23902 } 23903 try { 23904 test_2d_path_arc_twopie_1(); 23905 } catch (e) { 23906 ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_1"); 23907 } 23908 try { 23909 test_2d_path_arc_twopie_2(); 23910 } catch (e) { 23911 ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_2"); 23912 } 23913 try { 23914 test_2d_path_arc_twopie_3(); 23915 } catch (e) { 23916 ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_3"); 23917 } 23918 try { 23919 test_2d_path_arc_twopie_4(); 23920 } catch (e) { 23921 ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_4"); 23922 } 23923 try { 23924 test_2d_path_arc_zero_1(); 23925 } catch (e) { 23926 ok(false, "unexpected exception thrown in: test_2d_path_arc_zero_1"); 23927 } 23928 try { 23929 test_2d_path_arc_zero_2(); 23930 } catch (e) { 23931 ok(false, "unexpected exception thrown in: test_2d_path_arc_zero_2"); 23932 } 23933 try { 23934 test_2d_path_arc_zeroradius(); 23935 } catch (e) { 23936 ok(false, "unexpected exception thrown in: test_2d_path_arc_zeroradius"); 23937 } 23938 try { 23939 test_2d_path_arcTo_coincide_1(); 23940 } catch (e) { 23941 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_coincide_1"); 23942 } 23943 try { 23944 test_2d_path_arcTo_coincide_2(); 23945 } catch (e) { 23946 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_coincide_2"); 23947 } 23948 try { 23949 test_2d_path_arcTo_collinear_1(); 23950 } catch (e) { 23951 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_1"); 23952 } 23953 try { 23954 test_2d_path_arcTo_collinear_2(); 23955 } catch (e) { 23956 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_2"); 23957 } 23958 try { 23959 test_2d_path_arcTo_collinear_3(); 23960 } catch (e) { 23961 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_3"); 23962 } 23963 try { 23964 test_2d_path_arcTo_emptysubpath(); 23965 } catch (e) { 23966 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_emptysubpath"); 23967 } 23968 try { 23969 test_2d_path_arcTo_negative(); 23970 } catch (e) { 23971 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_negative"); 23972 } 23973 try { 23974 test_2d_path_arcTo_nonfinite(); 23975 } catch (e) { 23976 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_nonfinite"); 23977 } 23978 try { 23979 test_2d_path_arcTo_scale(); 23980 } catch (e) { 23981 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_scale"); 23982 } 23983 try { 23984 test_2d_path_arcTo_shape_curve1(); 23985 } catch (e) { 23986 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_curve1"); 23987 } 23988 try { 23989 test_2d_path_arcTo_shape_curve2(); 23990 } catch (e) { 23991 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_curve2"); 23992 } 23993 try { 23994 test_2d_path_arcTo_shape_end(); 23995 } catch (e) { 23996 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_end"); 23997 } 23998 try { 23999 test_2d_path_arcTo_shape_start(); 24000 } catch (e) { 24001 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_start"); 24002 } 24003 try { 24004 test_2d_path_arcTo_transformation(); 24005 } catch (e) { 24006 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_transformation"); 24007 } 24008 try { 24009 test_2d_path_arcTo_zero_1(); 24010 } catch (e) { 24011 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_zero_1"); 24012 } 24013 try { 24014 test_2d_path_arcTo_zero_2(); 24015 } catch (e) { 24016 ok(false, "unexpected exception thrown in: test_2d_path_arcTo_zero_2"); 24017 } 24018 try { 24019 test_2d_path_beginPath(); 24020 } catch (e) { 24021 ok(false, "unexpected exception thrown in: test_2d_path_beginPath"); 24022 } 24023 try { 24024 test_2d_path_bezierCurveTo_basic(); 24025 } catch (e) { 24026 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_basic"); 24027 } 24028 try { 24029 test_2d_path_bezierCurveTo_emptysubpath(); 24030 } catch (e) { 24031 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_emptysubpath"); 24032 } 24033 try { 24034 test_2d_path_bezierCurveTo_nonfinite(); 24035 } catch (e) { 24036 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_nonfinite"); 24037 } 24038 try { 24039 test_2d_path_bezierCurveTo_scaled(); 24040 } catch (e) { 24041 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_scaled"); 24042 } 24043 try { 24044 test_2d_path_bezierCurveTo_shape(); 24045 } catch (e) { 24046 ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_shape"); 24047 } 24048 try { 24049 test_2d_path_clip_basic_1(); 24050 } catch (e) { 24051 ok(false, "unexpected exception thrown in: test_2d_path_clip_basic_1"); 24052 } 24053 try { 24054 test_2d_path_clip_basic_2(); 24055 } catch (e) { 24056 ok(false, "unexpected exception thrown in: test_2d_path_clip_basic_2"); 24057 } 24058 try { 24059 test_2d_path_clip_empty(); 24060 } catch (e) { 24061 ok(false, "unexpected exception thrown in: test_2d_path_clip_empty"); 24062 } 24063 try { 24064 test_2d_path_clip_intersect(); 24065 } catch (e) { 24066 ok(false, "unexpected exception thrown in: test_2d_path_clip_intersect"); 24067 } 24068 try { 24069 test_2d_path_clip_unaffected(); 24070 } catch (e) { 24071 ok(false, "unexpected exception thrown in: test_2d_path_clip_unaffected"); 24072 } 24073 try { 24074 test_2d_path_clip_winding_1(); 24075 } catch (e) { 24076 ok(false, "unexpected exception thrown in: test_2d_path_clip_winding_1"); 24077 } 24078 try { 24079 test_2d_path_clip_winding_2(); 24080 } catch (e) { 24081 ok(false, "unexpected exception thrown in: test_2d_path_clip_winding_2"); 24082 } 24083 try { 24084 test_2d_path_closePath_empty(); 24085 } catch (e) { 24086 ok(false, "unexpected exception thrown in: test_2d_path_closePath_empty"); 24087 } 24088 try { 24089 test_2d_path_closePath_newline(); 24090 } catch (e) { 24091 ok(false, "unexpected exception thrown in: test_2d_path_closePath_newline"); 24092 } 24093 try { 24094 test_2d_path_closePath_nextpoint(); 24095 } catch (e) { 24096 ok(false, "unexpected exception thrown in: test_2d_path_closePath_nextpoint"); 24097 } 24098 try { 24099 test_2d_path_fill_closed_basic(); 24100 } catch (e) { 24101 ok(false, "unexpected exception thrown in: test_2d_path_fill_closed_basic"); 24102 } 24103 try { 24104 test_2d_path_fill_closed_unaffected(); 24105 } catch (e) { 24106 ok(false, "unexpected exception thrown in: test_2d_path_fill_closed_unaffected"); 24107 } 24108 try { 24109 test_2d_path_fill_overlap(); 24110 } catch (e) { 24111 ok(false, "unexpected exception thrown in: test_2d_path_fill_overlap"); 24112 } 24113 try { 24114 test_2d_path_fill_winding_add(); 24115 } catch (e) { 24116 ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_add"); 24117 } 24118 try { 24119 test_2d_path_fill_winding_subtract_1(); 24120 } catch (e) { 24121 ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_1"); 24122 } 24123 try { 24124 test_2d_path_fill_winding_subtract_2(); 24125 } catch (e) { 24126 ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_2"); 24127 } 24128 try { 24129 test_2d_path_fill_winding_subtract_3(); 24130 } catch (e) { 24131 ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_3"); 24132 } 24133 try { 24134 test_2d_path_initial(); 24135 } catch (e) { 24136 ok(false, "unexpected exception thrown in: test_2d_path_initial"); 24137 } 24138 try { 24139 test_2d_path_isPointInPath_arc(); 24140 } catch (e) { 24141 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_arc"); 24142 } 24143 try { 24144 test_2d_path_isPointInPath_basic_1(); 24145 } catch (e) { 24146 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_basic_1"); 24147 } 24148 try { 24149 test_2d_path_isPointInPath_basic_2(); 24150 } catch (e) { 24151 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_basic_2"); 24152 } 24153 try { 24154 test_2d_path_isPointInPath_bezier(); 24155 } catch (e) { 24156 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_bezier"); 24157 } 24158 try { 24159 test_2d_path_isPointInPath_bigarc(); 24160 } catch (e) { 24161 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_bigarc"); 24162 } 24163 try { 24164 test_2d_path_isPointInPath_edge(); 24165 } catch (e) { 24166 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_edge"); 24167 } 24168 try { 24169 test_2d_path_isPointInPath_empty(); 24170 } catch (e) { 24171 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_empty"); 24172 } 24173 try { 24174 test_2d_path_isPointInPath_nonfinite(); 24175 } catch (e) { 24176 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_nonfinite"); 24177 } 24178 try { 24179 test_2d_path_isPointInPath_outside(); 24180 } catch (e) { 24181 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_outside"); 24182 } 24183 try { 24184 test_2d_path_isPointInPath_subpath(); 24185 } catch (e) { 24186 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_subpath"); 24187 } 24188 try { 24189 test_2d_path_isPointInPath_transform_1(); 24190 } catch (e) { 24191 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_1"); 24192 } 24193 try { 24194 test_2d_path_isPointInPath_transform_2(); 24195 } catch (e) { 24196 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_2"); 24197 } 24198 try { 24199 test_2d_path_isPointInPath_transform_3(); 24200 } catch (e) { 24201 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_3"); 24202 } 24203 try { 24204 test_2d_path_isPointInPath_unclosed(); 24205 } catch (e) { 24206 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_unclosed"); 24207 } 24208 try { 24209 test_2d_path_isPointInPath_winding(); 24210 } catch (e) { 24211 ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_winding"); 24212 } 24213 try { 24214 test_2d_path_lineTo_basic(); 24215 } catch (e) { 24216 ok(false, "unexpected exception thrown in: test_2d_path_lineTo_basic"); 24217 } 24218 try { 24219 test_2d_path_lineTo_emptysubpath(); 24220 } catch (e) { 24221 ok(false, "unexpected exception thrown in: test_2d_path_lineTo_emptysubpath"); 24222 } 24223 try { 24224 test_2d_path_lineTo_nextpoint(); 24225 } catch (e) { 24226 ok(false, "unexpected exception thrown in: test_2d_path_lineTo_nextpoint"); 24227 } 24228 try { 24229 test_2d_path_lineTo_nonfinite(); 24230 } catch (e) { 24231 ok(false, "unexpected exception thrown in: test_2d_path_lineTo_nonfinite"); 24232 } 24233 try { 24234 test_2d_path_moveTo_basic(); 24235 } catch (e) { 24236 ok(false, "unexpected exception thrown in: test_2d_path_moveTo_basic"); 24237 } 24238 try { 24239 test_2d_path_moveTo_multiple(); 24240 } catch (e) { 24241 ok(false, "unexpected exception thrown in: test_2d_path_moveTo_multiple"); 24242 } 24243 try { 24244 test_2d_path_moveTo_newsubpath(); 24245 } catch (e) { 24246 ok(false, "unexpected exception thrown in: test_2d_path_moveTo_newsubpath"); 24247 } 24248 try { 24249 test_2d_path_moveTo_nonfinite(); 24250 } catch (e) { 24251 ok(false, "unexpected exception thrown in: test_2d_path_moveTo_nonfinite"); 24252 } 24253 try { 24254 test_2d_path_quadraticCurveTo_basic(); 24255 } catch (e) { 24256 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_basic"); 24257 } 24258 try { 24259 test_2d_path_quadraticCurveTo_emptysubpath(); 24260 } catch (e) { 24261 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_emptysubpath"); 24262 } 24263 try { 24264 test_2d_path_quadraticCurveTo_nonfinite(); 24265 } catch (e) { 24266 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_nonfinite"); 24267 } 24268 try { 24269 test_2d_path_quadraticCurveTo_scaled(); 24270 } catch (e) { 24271 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_scaled"); 24272 } 24273 try { 24274 test_2d_path_quadraticCurveTo_shape(); 24275 } catch (e) { 24276 ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_shape"); 24277 } 24278 try { 24279 test_2d_path_rect_basic(); 24280 } catch (e) { 24281 ok(false, "unexpected exception thrown in: test_2d_path_rect_basic"); 24282 } 24283 try { 24284 test_2d_path_rect_closed(); 24285 } catch (e) { 24286 ok(false, "unexpected exception thrown in: test_2d_path_rect_closed"); 24287 } 24288 try { 24289 test_2d_path_rect_end_1(); 24290 } catch (e) { 24291 ok(false, "unexpected exception thrown in: test_2d_path_rect_end_1"); 24292 } 24293 try { 24294 test_2d_path_rect_end_2(); 24295 } catch (e) { 24296 ok(false, "unexpected exception thrown in: test_2d_path_rect_end_2"); 24297 } 24298 try { 24299 test_2d_path_rect_negative(); 24300 } catch (e) { 24301 ok(false, "unexpected exception thrown in: test_2d_path_rect_negative"); 24302 } 24303 try { 24304 test_2d_path_rect_newsubpath(); 24305 } catch (e) { 24306 ok(false, "unexpected exception thrown in: test_2d_path_rect_newsubpath"); 24307 } 24308 try { 24309 test_2d_path_rect_nonfinite(); 24310 } catch (e) { 24311 ok(false, "unexpected exception thrown in: test_2d_path_rect_nonfinite"); 24312 } 24313 try { 24314 test_2d_path_rect_winding(); 24315 } catch (e) { 24316 ok(false, "unexpected exception thrown in: test_2d_path_rect_winding"); 24317 } 24318 try { 24319 test_2d_path_rect_zero_1(); 24320 } catch (e) { 24321 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_1"); 24322 } 24323 try { 24324 test_2d_path_rect_zero_2(); 24325 } catch (e) { 24326 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_2"); 24327 } 24328 try { 24329 test_2d_path_rect_zero_3(); 24330 } catch (e) { 24331 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_3"); 24332 } 24333 try { 24334 test_2d_path_rect_zero_4(); 24335 } catch (e) { 24336 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_4"); 24337 } 24338 try { 24339 test_2d_path_rect_zero_5(); 24340 } catch (e) { 24341 ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_5"); 24342 } 24343 try { 24344 test_2d_path_stroke_empty(); 24345 } catch (e) { 24346 ok(false, "unexpected exception thrown in: test_2d_path_stroke_empty"); 24347 } 24348 try { 24349 test_2d_path_stroke_overlap(); 24350 } catch (e) { 24351 ok(false, "unexpected exception thrown in: test_2d_path_stroke_overlap"); 24352 } 24353 try { 24354 test_2d_path_stroke_prune_arc(); 24355 } catch (e) { 24356 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_arc"); 24357 } 24358 try { 24359 test_2d_path_stroke_prune_closed(); 24360 } catch (e) { 24361 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_closed"); 24362 } 24363 try { 24364 test_2d_path_stroke_prune_corner(); 24365 } catch (e) { 24366 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_corner"); 24367 } 24368 try { 24369 test_2d_path_stroke_prune_curve(); 24370 } catch (e) { 24371 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_curve"); 24372 } 24373 try { 24374 test_2d_path_stroke_prune_line(); 24375 } catch (e) { 24376 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_line"); 24377 } 24378 try { 24379 test_2d_path_stroke_prune_rect(); 24380 } catch (e) { 24381 ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_rect"); 24382 } 24383 try { 24384 test_2d_path_stroke_scale1(); 24385 } catch (e) { 24386 ok(false, "unexpected exception thrown in: test_2d_path_stroke_scale1"); 24387 } 24388 try { 24389 test_2d_path_stroke_scale2(); 24390 } catch (e) { 24391 ok(false, "unexpected exception thrown in: test_2d_path_stroke_scale2"); 24392 } 24393 try { 24394 test_2d_path_stroke_skew(); 24395 } catch (e) { 24396 ok(false, "unexpected exception thrown in: test_2d_path_stroke_skew"); 24397 } 24398 try { 24399 test_2d_path_stroke_unaffected(); 24400 } catch (e) { 24401 ok(false, "unexpected exception thrown in: test_2d_path_stroke_unaffected"); 24402 } 24403 try { 24404 test_2d_path_stroke_union(); 24405 } catch (e) { 24406 ok(false, "unexpected exception thrown in: test_2d_path_stroke_union"); 24407 } 24408 try { 24409 test_2d_path_transformation_basic(); 24410 } catch (e) { 24411 ok(false, "unexpected exception thrown in: test_2d_path_transformation_basic"); 24412 } 24413 try { 24414 test_2d_path_transformation_changing(); 24415 } catch (e) { 24416 ok(false, "unexpected exception thrown in: test_2d_path_transformation_changing"); 24417 } 24418 try { 24419 test_2d_path_transformation_multiple(); 24420 } catch (e) { 24421 ok(false, "unexpected exception thrown in: test_2d_path_transformation_multiple"); 24422 } 24423 try { 24424 test_2d_pattern_animated_gif(); 24425 } catch (e) { 24426 ok(false, "unexpected exception thrown in: test_2d_pattern_animated_gif"); 24427 } 24428 try { 24429 test_2d_pattern_basic_canvas(); 24430 } catch (e) { 24431 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_canvas"); 24432 } 24433 try { 24434 test_2d_pattern_basic_image(); 24435 } catch (e) { 24436 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_image"); 24437 } 24438 try { 24439 test_2d_pattern_basic_nocontext(); 24440 } catch (e) { 24441 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_nocontext"); 24442 } 24443 try { 24444 test_2d_pattern_basic_type(); 24445 } catch (e) { 24446 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_type"); 24447 } 24448 try { 24449 test_2d_pattern_basic_zerocanvas(); 24450 } catch (e) { 24451 ok(false, "unexpected exception thrown in: test_2d_pattern_basic_zerocanvas"); 24452 } 24453 try { 24454 test_2d_pattern_crosscanvas(); 24455 } catch (e) { 24456 ok(false, "unexpected exception thrown in: test_2d_pattern_crosscanvas"); 24457 } 24458 try { 24459 test_2d_pattern_image_null(); 24460 } catch (e) { 24461 ok(false, "unexpected exception thrown in: test_2d_pattern_image_null"); 24462 } 24463 try { 24464 test_2d_pattern_image_string(); 24465 } catch (e) { 24466 ok(false, "unexpected exception thrown in: test_2d_pattern_image_string"); 24467 } 24468 try { 24469 test_2d_pattern_image_undefined(); 24470 } catch (e) { 24471 ok(false, "unexpected exception thrown in: test_2d_pattern_image_undefined"); 24472 } 24473 try { 24474 test_2d_pattern_modify_canvas1(); 24475 } catch (e) { 24476 ok(false, "unexpected exception thrown in: test_2d_pattern_modify_canvas1"); 24477 } 24478 try { 24479 test_2d_pattern_modify_canvas2(); 24480 } catch (e) { 24481 ok(false, "unexpected exception thrown in: test_2d_pattern_modify_canvas2"); 24482 } 24483 try { 24484 test_2d_pattern_modify_image1(); 24485 } catch (e) { 24486 ok(false, "unexpected exception thrown in: test_2d_pattern_modify_image1"); 24487 } 24488 try { 24489 test_2d_pattern_modify_image2(); 24490 } catch (e) { 24491 ok(false, "unexpected exception thrown in: test_2d_pattern_modify_image2"); 24492 } 24493 try { 24494 test_2d_pattern_paint_norepeat_basic(); 24495 } catch (e) { 24496 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_basic"); 24497 } 24498 try { 24499 test_2d_pattern_paint_norepeat_coord1(); 24500 } catch (e) { 24501 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord1"); 24502 } 24503 try { 24504 test_2d_pattern_paint_norepeat_coord2(); 24505 } catch (e) { 24506 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord2"); 24507 } 24508 try { 24509 test_2d_pattern_paint_norepeat_coord3(); 24510 } catch (e) { 24511 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord3"); 24512 } 24513 try { 24514 test_2d_pattern_paint_norepeat_outside(); 24515 } catch (e) { 24516 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_outside"); 24517 } 24518 try { 24519 test_2d_pattern_paint_orientation_canvas(); 24520 } catch (e) { 24521 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_orientation_canvas"); 24522 } 24523 try { 24524 test_2d_pattern_paint_orientation_image(); 24525 } catch (e) { 24526 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_orientation_image"); 24527 } 24528 try { 24529 test_2d_pattern_paint_repeat_basic(); 24530 } catch (e) { 24531 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_basic"); 24532 } 24533 try { 24534 test_2d_pattern_paint_repeat_coord1(); 24535 } catch (e) { 24536 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord1"); 24537 } 24538 try { 24539 test_2d_pattern_paint_repeat_coord2(); 24540 } catch (e) { 24541 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord2"); 24542 } 24543 try { 24544 test_2d_pattern_paint_repeat_coord3(); 24545 } catch (e) { 24546 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord3"); 24547 } 24548 try { 24549 test_2d_pattern_paint_repeat_outside(); 24550 } catch (e) { 24551 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_outside"); 24552 } 24553 try { 24554 test_2d_pattern_paint_repeatx_basic(); 24555 } catch (e) { 24556 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_basic"); 24557 } 24558 try { 24559 test_2d_pattern_paint_repeatx_coord1(); 24560 } catch (e) { 24561 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_coord1"); 24562 } 24563 try { 24564 test_2d_pattern_paint_repeatx_outside(); 24565 } catch (e) { 24566 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_outside"); 24567 } 24568 try { 24569 test_2d_pattern_paint_repeaty_basic(); 24570 } catch (e) { 24571 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_basic"); 24572 } 24573 try { 24574 test_2d_pattern_paint_repeaty_coord1(); 24575 } catch (e) { 24576 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_coord1"); 24577 } 24578 try { 24579 test_2d_pattern_paint_repeaty_outside(); 24580 } catch (e) { 24581 ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_outside"); 24582 } 24583 try { 24584 test_2d_pattern_repeat_case(); 24585 } catch (e) { 24586 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_case"); 24587 } 24588 try { 24589 test_2d_pattern_repeat_empty(); 24590 } catch (e) { 24591 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_empty"); 24592 } 24593 try { 24594 test_2d_pattern_repeat_null(); 24595 } catch (e) { 24596 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_null"); 24597 } 24598 try { 24599 test_2d_pattern_repeat_nullsuffix(); 24600 } catch (e) { 24601 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_nullsuffix"); 24602 } 24603 try { 24604 test_2d_pattern_repeat_undefined(); 24605 } catch (e) { 24606 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_undefined"); 24607 } 24608 try { 24609 test_2d_pattern_repeat_unrecognised(); 24610 } catch (e) { 24611 ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_unrecognised"); 24612 } 24613 try { 24614 test_2d_scaled(); 24615 } catch (e) { 24616 ok(false, "unexpected exception thrown in: test_2d_scaled"); 24617 } 24618 try { 24619 test_2d_shadow_alpha_1(); 24620 } catch (e) { 24621 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_1"); 24622 } 24623 try { 24624 test_2d_shadow_alpha_2(); 24625 } catch (e) { 24626 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_2"); 24627 } 24628 try { 24629 test_2d_shadow_alpha_3(); 24630 } catch (e) { 24631 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_3"); 24632 } 24633 try { 24634 test_2d_shadow_alpha_4(); 24635 } catch (e) { 24636 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_4"); 24637 } 24638 try { 24639 test_2d_shadow_alpha_5(); 24640 } catch (e) { 24641 ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_5"); 24642 } 24643 try { 24644 test_2d_shadow_attributes_shadowBlur_1(); 24645 } catch (e) { 24646 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowBlur_1"); 24647 } 24648 try { 24649 test_2d_shadow_attributes_shadowBlur_2(); 24650 } catch (e) { 24651 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowBlur_2"); 24652 } 24653 try { 24654 test_2d_shadow_attributes_shadowColor_1(); 24655 } catch (e) { 24656 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowColor_1"); 24657 } 24658 try { 24659 test_2d_shadow_attributes_shadowColor_2(); 24660 } catch (e) { 24661 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowColor_2"); 24662 } 24663 try { 24664 test_2d_shadow_attributes_shadowOffset_1(); 24665 } catch (e) { 24666 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowOffset_1"); 24667 } 24668 try { 24669 test_2d_shadow_attributes_shadowOffset_2(); 24670 } catch (e) { 24671 ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowOffset_2"); 24672 } 24673 try { 24674 test_2d_shadow_basic_1(); 24675 } catch (e) { 24676 ok(false, "unexpected exception thrown in: test_2d_shadow_basic_1"); 24677 } 24678 try { 24679 test_2d_shadow_basic_2(); 24680 } catch (e) { 24681 ok(false, "unexpected exception thrown in: test_2d_shadow_basic_2"); 24682 } 24683 try { 24684 test_2d_shadow_blur_high(); 24685 } catch (e) { 24686 ok(false, "unexpected exception thrown in: test_2d_shadow_blur_high"); 24687 } 24688 try { 24689 test_2d_shadow_blur_low(); 24690 } catch (e) { 24691 ok(false, "unexpected exception thrown in: test_2d_shadow_blur_low"); 24692 } 24693 try { 24694 test_2d_shadow_canvas_alpha(); 24695 } catch (e) { 24696 ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_alpha"); 24697 } 24698 try { 24699 test_2d_shadow_canvas_basic(); 24700 } catch (e) { 24701 ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_basic"); 24702 } 24703 try { 24704 test_2d_shadow_canvas_transparent_1(); 24705 } catch (e) { 24706 ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_transparent_1"); 24707 } 24708 try { 24709 test_2d_shadow_canvas_transparent_2(); 24710 } catch (e) { 24711 ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_transparent_2"); 24712 } 24713 try { 24714 test_2d_shadow_clip_1(); 24715 } catch (e) { 24716 ok(false, "unexpected exception thrown in: test_2d_shadow_clip_1"); 24717 } 24718 try { 24719 test_2d_shadow_clip_2(); 24720 } catch (e) { 24721 ok(false, "unexpected exception thrown in: test_2d_shadow_clip_2"); 24722 } 24723 try { 24724 test_2d_shadow_clip_3(); 24725 } catch (e) { 24726 ok(false, "unexpected exception thrown in: test_2d_shadow_clip_3"); 24727 } 24728 try { 24729 test_2d_shadow_composite_1(); 24730 } catch (e) { 24731 ok(false, "unexpected exception thrown in: test_2d_shadow_composite_1"); 24732 } 24733 try { 24734 test_2d_shadow_composite_2(); 24735 } catch (e) { 24736 ok(false, "unexpected exception thrown in: test_2d_shadow_composite_2"); 24737 } 24738 try { 24739 test_2d_shadow_gradient_alpha(); 24740 } catch (e) { 24741 ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_alpha"); 24742 } 24743 try { 24744 test_2d_shadow_gradient_basic(); 24745 } catch (e) { 24746 ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_basic"); 24747 } 24748 try { 24749 test_2d_shadow_gradient_transparent_1(); 24750 } catch (e) { 24751 ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_transparent_1"); 24752 } 24753 try { 24754 test_2d_shadow_gradient_transparent_2(); 24755 } catch (e) { 24756 ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_transparent_2"); 24757 } 24758 try { 24759 test_2d_shadow_image_alpha(); 24760 } catch (e) { 24761 ok(false, "unexpected exception thrown in: test_2d_shadow_image_alpha"); 24762 } 24763 try { 24764 test_2d_shadow_image_basic(); 24765 } catch (e) { 24766 ok(false, "unexpected exception thrown in: test_2d_shadow_image_basic"); 24767 } 24768 try { 24769 test_2d_shadow_image_scale(); 24770 } catch (e) { 24771 ok(false, "unexpected exception thrown in: test_2d_shadow_image_scale"); 24772 } 24773 try { 24774 test_2d_shadow_image_section(); 24775 } catch (e) { 24776 ok(false, "unexpected exception thrown in: test_2d_shadow_image_section"); 24777 } 24778 try { 24779 test_2d_shadow_image_transparent_1(); 24780 } catch (e) { 24781 ok(false, "unexpected exception thrown in: test_2d_shadow_image_transparent_1"); 24782 } 24783 try { 24784 test_2d_shadow_image_transparent_2(); 24785 } catch (e) { 24786 ok(false, "unexpected exception thrown in: test_2d_shadow_image_transparent_2"); 24787 } 24788 try { 24789 test_2d_shadow_offset_negativeX(); 24790 } catch (e) { 24791 ok(false, "unexpected exception thrown in: test_2d_shadow_offset_negativeX"); 24792 } 24793 try { 24794 test_2d_shadow_offset_negativeY(); 24795 } catch (e) { 24796 ok(false, "unexpected exception thrown in: test_2d_shadow_offset_negativeY"); 24797 } 24798 try { 24799 test_2d_shadow_offset_positiveX(); 24800 } catch (e) { 24801 ok(false, "unexpected exception thrown in: test_2d_shadow_offset_positiveX"); 24802 } 24803 try { 24804 test_2d_shadow_offset_positiveY(); 24805 } catch (e) { 24806 ok(false, "unexpected exception thrown in: test_2d_shadow_offset_positiveY"); 24807 } 24808 try { 24809 test_2d_shadow_outside(); 24810 } catch (e) { 24811 ok(false, "unexpected exception thrown in: test_2d_shadow_outside"); 24812 } 24813 try { 24814 test_2d_shadow_pattern_alpha(); 24815 } catch (e) { 24816 ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_alpha"); 24817 } 24818 try { 24819 test_2d_shadow_pattern_basic(); 24820 } catch (e) { 24821 ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_basic"); 24822 } 24823 try { 24824 test_2d_shadow_pattern_transparent_1(); 24825 } catch (e) { 24826 ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_transparent_1"); 24827 } 24828 try { 24829 test_2d_shadow_pattern_transparent_2(); 24830 } catch (e) { 24831 ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_transparent_2"); 24832 } 24833 try { 24834 test_2d_shadow_stroke_basic(); 24835 } catch (e) { 24836 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_basic"); 24837 } 24838 try { 24839 test_2d_shadow_stroke_cap_1(); 24840 } catch (e) { 24841 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_cap_1"); 24842 } 24843 try { 24844 test_2d_shadow_stroke_cap_2(); 24845 } catch (e) { 24846 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_cap_2"); 24847 } 24848 try { 24849 test_2d_shadow_stroke_join_1(); 24850 } catch (e) { 24851 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_1"); 24852 } 24853 try { 24854 test_2d_shadow_stroke_join_2(); 24855 } catch (e) { 24856 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_2"); 24857 } 24858 try { 24859 test_2d_shadow_stroke_join_3(); 24860 } catch (e) { 24861 ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_3"); 24862 } 24863 try { 24864 test_2d_shadow_transform_1(); 24865 } catch (e) { 24866 ok(false, "unexpected exception thrown in: test_2d_shadow_transform_1"); 24867 } 24868 try { 24869 test_2d_shadow_transform_2(); 24870 } catch (e) { 24871 ok(false, "unexpected exception thrown in: test_2d_shadow_transform_2"); 24872 } 24873 try { 24874 test_2d_state_saverestore_bitmap(); 24875 } catch (e) { 24876 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_bitmap"); 24877 } 24878 try { 24879 test_2d_state_saverestore_clip(); 24880 } catch (e) { 24881 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_clip"); 24882 } 24883 try { 24884 test_2d_state_saverestore_fillStyle(); 24885 } catch (e) { 24886 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_fillStyle"); 24887 } 24888 try { 24889 test_2d_state_saverestore_globalAlpha(); 24890 } catch (e) { 24891 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_globalAlpha"); 24892 } 24893 try { 24894 test_2d_state_saverestore_globalCompositeOperation(); 24895 } catch (e) { 24896 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_globalCompositeOperation"); 24897 } 24898 try { 24899 test_2d_state_saverestore_lineCap(); 24900 } catch (e) { 24901 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineCap"); 24902 } 24903 try { 24904 test_2d_state_saverestore_lineJoin(); 24905 } catch (e) { 24906 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineJoin"); 24907 } 24908 try { 24909 test_2d_state_saverestore_lineWidth(); 24910 } catch (e) { 24911 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineWidth"); 24912 } 24913 try { 24914 test_2d_state_saverestore_miterLimit(); 24915 } catch (e) { 24916 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_miterLimit"); 24917 } 24918 try { 24919 test_2d_state_saverestore_path(); 24920 } catch (e) { 24921 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_path"); 24922 } 24923 try { 24924 test_2d_state_saverestore_shadowBlur(); 24925 } catch (e) { 24926 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowBlur"); 24927 } 24928 try { 24929 test_2d_state_saverestore_shadowColor(); 24930 } catch (e) { 24931 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowColor"); 24932 } 24933 try { 24934 test_2d_state_saverestore_shadowOffsetX(); 24935 } catch (e) { 24936 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowOffsetX"); 24937 } 24938 try { 24939 test_2d_state_saverestore_shadowOffsetY(); 24940 } catch (e) { 24941 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowOffsetY"); 24942 } 24943 try { 24944 test_2d_state_saverestore_stack(); 24945 } catch (e) { 24946 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_stack"); 24947 } 24948 try { 24949 test_2d_state_saverestore_stackdepth(); 24950 } catch (e) { 24951 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_stackdepth"); 24952 } 24953 try { 24954 test_2d_state_saverestore_strokeStyle(); 24955 } catch (e) { 24956 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_strokeStyle"); 24957 } 24958 try { 24959 test_2d_state_saverestore_transformation(); 24960 } catch (e) { 24961 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_transformation"); 24962 } 24963 try { 24964 test_2d_state_saverestore_underflow(); 24965 } catch (e) { 24966 ok(false, "unexpected exception thrown in: test_2d_state_saverestore_underflow"); 24967 } 24968 try { 24969 test_2d_strokeRect_basic(); 24970 } catch (e) { 24971 ok(false, "unexpected exception thrown in: test_2d_strokeRect_basic"); 24972 } 24973 try { 24974 test_2d_strokeRect_clip(); 24975 } catch (e) { 24976 ok(false, "unexpected exception thrown in: test_2d_strokeRect_clip"); 24977 } 24978 try { 24979 test_2d_strokeRect_globalalpha(); 24980 } catch (e) { 24981 ok(false, "unexpected exception thrown in: test_2d_strokeRect_globalalpha"); 24982 } 24983 try { 24984 test_2d_strokeRect_globalcomposite(); 24985 } catch (e) { 24986 ok(false, "unexpected exception thrown in: test_2d_strokeRect_globalcomposite"); 24987 } 24988 try { 24989 test_2d_strokeRect_negative(); 24990 } catch (e) { 24991 ok(false, "unexpected exception thrown in: test_2d_strokeRect_negative"); 24992 } 24993 try { 24994 test_2d_strokeRect_nonfinite(); 24995 } catch (e) { 24996 ok(false, "unexpected exception thrown in: test_2d_strokeRect_nonfinite"); 24997 } 24998 try { 24999 test_2d_strokeRect_path(); 25000 } catch (e) { 25001 ok(false, "unexpected exception thrown in: test_2d_strokeRect_path"); 25002 } 25003 try { 25004 test_2d_strokeRect_shadow(); 25005 } catch (e) { 25006 ok(false, "unexpected exception thrown in: test_2d_strokeRect_shadow"); 25007 } 25008 try { 25009 test_2d_strokeRect_transform(); 25010 } catch (e) { 25011 ok(false, "unexpected exception thrown in: test_2d_strokeRect_transform"); 25012 } 25013 try { 25014 test_2d_strokeRect_zero_1(); 25015 } catch (e) { 25016 ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_1"); 25017 } 25018 try { 25019 test_2d_strokeRect_zero_2(); 25020 } catch (e) { 25021 ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_2"); 25022 } 25023 try { 25024 test_2d_strokeRect_zero_3(); 25025 } catch (e) { 25026 ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_3"); 25027 } 25028 try { 25029 test_2d_strokeRect_zero_4(); 25030 } catch (e) { 25031 ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_4"); 25032 } 25033 try { 25034 test_2d_strokeStyle_default(); 25035 } catch (e) { 25036 ok(false, "unexpected exception thrown in: test_2d_strokeStyle_default"); 25037 } 25038 try { 25039 test_2d_text_align_default(); 25040 } catch (e) { 25041 ok(false, "unexpected exception thrown in: test_2d_text_align_default"); 25042 } 25043 try { 25044 test_2d_text_align_invalid(); 25045 } catch (e) { 25046 ok(false, "unexpected exception thrown in: test_2d_text_align_invalid"); 25047 } 25048 try { 25049 test_2d_text_baseline_default(); 25050 } catch (e) { 25051 ok(false, "unexpected exception thrown in: test_2d_text_baseline_default"); 25052 } 25053 try { 25054 test_2d_text_baseline_invalid(); 25055 } catch (e) { 25056 ok(false, "unexpected exception thrown in: test_2d_text_baseline_invalid"); 25057 } 25058 try { 25059 test_2d_transformation_order(); 25060 } catch (e) { 25061 ok(false, "unexpected exception thrown in: test_2d_transformation_order"); 25062 } 25063 try { 25064 test_2d_transformation_rotate_direction(); 25065 } catch (e) { 25066 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_direction"); 25067 } 25068 try { 25069 test_2d_transformation_rotate_nonfinite(); 25070 } catch (e) { 25071 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_nonfinite"); 25072 } 25073 try { 25074 test_2d_transformation_rotate_radians(); 25075 } catch (e) { 25076 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_radians"); 25077 } 25078 try { 25079 test_2d_transformation_rotate_wrap(); 25080 } catch (e) { 25081 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_wrap"); 25082 } 25083 try { 25084 test_2d_transformation_rotate_wrapnegative(); 25085 } catch (e) { 25086 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_wrapnegative"); 25087 } 25088 try { 25089 test_2d_transformation_rotate_zero(); 25090 } catch (e) { 25091 ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_zero"); 25092 } 25093 try { 25094 test_2d_transformation_scale_basic(); 25095 } catch (e) { 25096 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_basic"); 25097 } 25098 try { 25099 test_2d_transformation_scale_large(); 25100 } catch (e) { 25101 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_large"); 25102 } 25103 try { 25104 test_2d_transformation_scale_multiple(); 25105 } catch (e) { 25106 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_multiple"); 25107 } 25108 try { 25109 test_2d_transformation_scale_negative(); 25110 } catch (e) { 25111 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_negative"); 25112 } 25113 try { 25114 test_2d_transformation_scale_nonfinite(); 25115 } catch (e) { 25116 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_nonfinite"); 25117 } 25118 try { 25119 test_2d_transformation_scale_zero(); 25120 } catch (e) { 25121 ok(false, "unexpected exception thrown in: test_2d_transformation_scale_zero"); 25122 } 25123 try { 25124 test_2d_transformation_setTransform_multiple(); 25125 } catch (e) { 25126 ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_multiple"); 25127 } 25128 try { 25129 test_2d_transformation_setTransform_nonfinite(); 25130 } catch (e) { 25131 ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_nonfinite"); 25132 } 25133 try { 25134 test_2d_transformation_setTransform_skewed(); 25135 } catch (e) { 25136 ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_skewed"); 25137 } 25138 try { 25139 test_2d_transformation_transform_identity(); 25140 } catch (e) { 25141 ok(false, "unexpected exception thrown in: test_2d_transformation_transform_identity"); 25142 } 25143 try { 25144 test_2d_transformation_transform_multiply(); 25145 } catch (e) { 25146 ok(false, "unexpected exception thrown in: test_2d_transformation_transform_multiply"); 25147 } 25148 try { 25149 test_2d_transformation_transform_nonfinite(); 25150 } catch (e) { 25151 ok(false, "unexpected exception thrown in: test_2d_transformation_transform_nonfinite"); 25152 } 25153 try { 25154 test_2d_transformation_transform_skewed(); 25155 } catch (e) { 25156 ok(false, "unexpected exception thrown in: test_2d_transformation_transform_skewed"); 25157 } 25158 try { 25159 test_2d_transformation_translate_basic(); 25160 } catch (e) { 25161 ok(false, "unexpected exception thrown in: test_2d_transformation_translate_basic"); 25162 } 25163 try { 25164 test_2d_transformation_translate_nonfinite(); 25165 } catch (e) { 25166 ok(false, "unexpected exception thrown in: test_2d_transformation_translate_nonfinite"); 25167 } 25168 try { 25169 test_2d_type_exists(); 25170 } catch (e) { 25171 ok(false, "unexpected exception thrown in: test_2d_type_exists"); 25172 } 25173 try { 25174 test_2d_type_extend(); 25175 } catch (e) { 25176 ok(false, "unexpected exception thrown in: test_2d_type_extend"); 25177 } 25178 try { 25179 test_2d_type_prototype(); 25180 } catch (e) { 25181 ok(false, "unexpected exception thrown in: test_2d_type_prototype"); 25182 } 25183 try { 25184 test_2d_type_replace(); 25185 } catch (e) { 25186 ok(false, "unexpected exception thrown in: test_2d_type_replace"); 25187 } 25188 try { 25189 test_2d_voidreturn(); 25190 } catch (e) { 25191 ok(false, "unexpected exception thrown in: test_2d_voidreturn"); 25192 } 25193 try { 25194 test_bug397524(); 25195 } catch (e) { 25196 ok(false, "unexpected exception thrown in: test_bug397524"); 25197 } 25198 try { 25199 test_bug405982(); 25200 } catch (e) { 25201 ok(false, "unexpected exception thrown in: test_bug405982"); 25202 } 25203 try { 25204 test_context_arguments_extra(); 25205 } catch (e) { 25206 ok(false, "unexpected exception thrown in: test_context_arguments_extra"); 25207 } 25208 try { 25209 test_context_arguments_missing(); 25210 } catch (e) { 25211 ok(false, "unexpected exception thrown in: test_context_arguments_missing"); 25212 } 25213 try { 25214 test_context_casesensitive(); 25215 } catch (e) { 25216 ok(false, "unexpected exception thrown in: test_context_casesensitive"); 25217 } 25218 try { 25219 test_context_emptystring(); 25220 } catch (e) { 25221 ok(false, "unexpected exception thrown in: test_context_emptystring"); 25222 } 25223 try { 25224 test_context_unrecognised_badname(); 25225 } catch (e) { 25226 ok(false, "unexpected exception thrown in: test_context_unrecognised_badname"); 25227 } 25228 try { 25229 test_context_unrecognised_badsuffix(); 25230 } catch (e) { 25231 ok(false, "unexpected exception thrown in: test_context_unrecognised_badsuffix"); 25232 } 25233 try { 25234 test_context_unrecognised_nullsuffix(); 25235 } catch (e) { 25236 ok(false, "unexpected exception thrown in: test_context_unrecognised_nullsuffix"); 25237 } 25238 try { 25239 test_context_unrecognised_unicode(); 25240 } catch (e) { 25241 ok(false, "unexpected exception thrown in: test_context_unrecognised_unicode"); 25242 } 25243 try { 25244 test_fallback_basic(); 25245 } catch (e) { 25246 ok(false, "unexpected exception thrown in: test_fallback_basic"); 25247 } 25248 try { 25249 test_fallback_multiple(); 25250 } catch (e) { 25251 ok(false, "unexpected exception thrown in: test_fallback_multiple"); 25252 } 25253 try { 25254 test_fallback_nested(); 25255 } catch (e) { 25256 ok(false, "unexpected exception thrown in: test_fallback_nested"); 25257 } 25258 try { 25259 test_initial_colour(); 25260 } catch (e) { 25261 ok(false, "unexpected exception thrown in: test_initial_colour"); 25262 } 25263 try { 25264 test_initial_reset_2dstate(); 25265 } catch (e) { 25266 ok(false, "unexpected exception thrown in: test_initial_reset_2dstate"); 25267 } 25268 try { 25269 test_initial_reset_clip(); 25270 } catch (e) { 25271 ok(false, "unexpected exception thrown in: test_initial_reset_clip"); 25272 } 25273 try { 25274 test_initial_reset_different(); 25275 } catch (e) { 25276 ok(false, "unexpected exception thrown in: test_initial_reset_different"); 25277 } 25278 try { 25279 test_initial_reset_gradient(); 25280 } catch (e) { 25281 ok(false, "unexpected exception thrown in: test_initial_reset_gradient"); 25282 } 25283 try { 25284 test_initial_reset_path(); 25285 } catch (e) { 25286 ok(false, "unexpected exception thrown in: test_initial_reset_path"); 25287 } 25288 try { 25289 test_initial_reset_pattern(); 25290 } catch (e) { 25291 ok(false, "unexpected exception thrown in: test_initial_reset_pattern"); 25292 } 25293 try { 25294 test_initial_reset_same(); 25295 } catch (e) { 25296 ok(false, "unexpected exception thrown in: test_initial_reset_same"); 25297 } 25298 try { 25299 test_initial_reset_transform(); 25300 } catch (e) { 25301 ok(false, "unexpected exception thrown in: test_initial_reset_transform"); 25302 } 25303 try { 25304 test_size_attributes_default(); 25305 } catch (e) { 25306 ok(false, "unexpected exception thrown in: test_size_attributes_default"); 25307 } 25308 try { 25309 test_size_attributes(); 25310 } catch (e) { 25311 ok(false, "unexpected exception thrown in: test_size_attributes"); 25312 } 25313 try { 25314 test_size_attributes_parse_badsuffix(); 25315 } catch (e) { 25316 ok(false, "unexpected exception thrown in: test_size_attributes_parse_badsuffix"); 25317 } 25318 try { 25319 test_size_attributes_parse_floatsuffix(); 25320 } catch (e) { 25321 ok(false, "unexpected exception thrown in: test_size_attributes_parse_floatsuffix"); 25322 } 25323 try { 25324 test_size_attributes_parse_negative(); 25325 } catch (e) { 25326 ok(false, "unexpected exception thrown in: test_size_attributes_parse_negative"); 25327 } 25328 try { 25329 test_size_attributes_parse_nonnumber(); 25330 } catch (e) { 25331 ok(false, "unexpected exception thrown in: test_size_attributes_parse_nonnumber"); 25332 } 25333 try { 25334 test_size_attributes_parse_percentsuffix(); 25335 } catch (e) { 25336 ok(false, "unexpected exception thrown in: test_size_attributes_parse_percentsuffix"); 25337 } 25338 try { 25339 test_size_attributes_parse_whitespace(); 25340 } catch (e) { 25341 ok(false, "unexpected exception thrown in: test_size_attributes_parse_whitespace"); 25342 } 25343 try { 25344 test_size_attributes_parse_zero(); 25345 } catch (e) { 25346 ok(false, "unexpected exception thrown in: test_size_attributes_parse_zero"); 25347 } 25348 try { 25349 test_size_attributes_parse_zerosuffix(); 25350 } catch (e) { 25351 ok(false, "unexpected exception thrown in: test_size_attributes_parse_zerosuffix"); 25352 } 25353 try { 25354 test_size_attributes_reflect_1(); 25355 } catch (e) { 25356 ok(false, "unexpected exception thrown in: test_size_attributes_reflect_1"); 25357 } 25358 try { 25359 test_size_attributes_reflect_2(); 25360 } catch (e) { 25361 ok(false, "unexpected exception thrown in: test_size_attributes_reflect_2"); 25362 } 25363 try { 25364 test_size_attributes_removed(); 25365 } catch (e) { 25366 ok(false, "unexpected exception thrown in: test_size_attributes_removed"); 25367 } 25368 try { 25369 test_size_attributes_setAttribute_badsuffix(); 25370 } catch (e) { 25371 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_badsuffix"); 25372 } 25373 try { 25374 test_size_attributes_setAttribute_floatsuffix(); 25375 } catch (e) { 25376 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_floatsuffix"); 25377 } 25378 try { 25379 test_size_attributes_setAttribute_negative(); 25380 } catch (e) { 25381 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_negative"); 25382 } 25383 try { 25384 test_size_attributes_setAttribute_nonnumber(); 25385 } catch (e) { 25386 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_nonnumber"); 25387 } 25388 try { 25389 test_size_attributes_setAttribute_percentsuffix(); 25390 } catch (e) { 25391 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_percentsuffix"); 25392 } 25393 try { 25394 test_size_attributes_setAttribute_whitespace(); 25395 } catch (e) { 25396 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_whitespace"); 25397 } 25398 try { 25399 test_size_attributes_setAttribute_zero(); 25400 } catch (e) { 25401 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_zero"); 25402 } 25403 try { 25404 test_size_attributes_setAttribute_zerosuffix(); 25405 } catch (e) { 25406 ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_zerosuffix"); 25407 } 25408 try { 25409 test_size_attributes_style(); 25410 } catch (e) { 25411 ok(false, "unexpected exception thrown in: test_size_attributes_style"); 25412 } 25413 try { 25414 test_size_attributes_type_get(); 25415 } catch (e) { 25416 ok(false, "unexpected exception thrown in: test_size_attributes_type_get"); 25417 } 25418 try { 25419 test_size_attributes_type_set(); 25420 } catch (e) { 25421 ok(false, "unexpected exception thrown in: test_size_attributes_type_set"); 25422 } 25423 try { 25424 test_text_font(); 25425 } catch (e) { 25426 ok(false, "unexpected exception thrown in: test_text_font"); 25427 } 25428 try { 25429 test_text_measure(); 25430 } catch (e) { 25431 ok(false, "unexpected exception thrown in: test_text_measure"); 25432 } 25433 try { 25434 test_text_space_replace(); 25435 } catch (e) { 25436 ok(false, "unexpected exception thrown in: test_text_space_replace"); 25437 } 25438 try { 25439 test_text_textAlign(); 25440 } catch (e) { 25441 ok(false, "unexpected exception thrown in: test_text_textAlign"); 25442 } 25443 try { 25444 test_text_textBaseline(); 25445 } catch (e) { 25446 ok(false, "unexpected exception thrown in: test_text_textBaseline"); 25447 } 25448 try { 25449 test_toDataURL_arguments_1(); 25450 } catch (e) { 25451 ok(false, "unexpected exception thrown in: test_toDataURL_arguments_1"); 25452 } 25453 try { 25454 test_toDataURL_arguments_2(); 25455 } catch (e) { 25456 ok(false, "unexpected exception thrown in: test_toDataURL_arguments_2"); 25457 } 25458 try { 25459 test_toDataURL_arguments_3(); 25460 } catch (e) { 25461 ok(false, "unexpected exception thrown in: test_toDataURL_arguments_3"); 25462 } 25463 try { 25464 test_toDataURL_complexcolours(); 25465 } catch (e) { 25466 ok(false, "unexpected exception thrown in: test_toDataURL_complexcolours"); 25467 } 25468 try { 25469 test_toDataURL_default(); 25470 } catch (e) { 25471 ok(false, "unexpected exception thrown in: test_toDataURL_default"); 25472 } 25473 try { 25474 test_toDataURL_lowercase(); 25475 } catch (e) { 25476 ok(false, "unexpected exception thrown in: test_toDataURL_lowercase"); 25477 } 25478 try { 25479 test_toDataURL_nocontext(); 25480 } catch (e) { 25481 ok(false, "unexpected exception thrown in: test_toDataURL_nocontext"); 25482 } 25483 try { 25484 test_toDataURL_png(); 25485 } catch (e) { 25486 ok(false, "unexpected exception thrown in: test_toDataURL_png"); 25487 } 25488 try { 25489 test_toDataURL_primarycolours(); 25490 } catch (e) { 25491 ok(false, "unexpected exception thrown in: test_toDataURL_primarycolours"); 25492 } 25493 try { 25494 test_toDataURL_unrecognised(); 25495 } catch (e) { 25496 ok(false, "unexpected exception thrown in: test_toDataURL_unrecognised"); 25497 } 25498 try { 25499 test_toDataURL_zerosize(); 25500 } catch (e) { 25501 ok(false, "unexpected exception thrown in: test_toDataURL_zerosize"); 25502 } 25503 try { 25504 test_type_exists(); 25505 } catch (e) { 25506 ok(false, "unexpected exception thrown in: test_type_exists"); 25507 } 25508 try { 25509 test_type_extend(); 25510 } catch (e) { 25511 ok(false, "unexpected exception thrown in: test_type_extend"); 25512 } 25513 try { 25514 test_type_name(); 25515 } catch (e) { 25516 ok(false, "unexpected exception thrown in: test_type_name"); 25517 } 25518 try { 25519 test_type_prototype(); 25520 } catch (e) { 25521 ok(false, "unexpected exception thrown in: test_type_prototype"); 25522 } 25523 try { 25524 test_2d_imagedata_coercion(); 25525 } catch (e) { 25526 ok(false, "unexpected exception thrown in: test_2d_imagedata_coercion"); 25527 } 25528 try { 25529 test_2d_imageSmoothing(); 25530 } catch (e) { 25531 ok(false, "unexpected exception thrown in: test_2d_imageSmoothing"); 25532 } 25533 try { 25534 test_zero_dimensions(); 25535 } catch (e) { 25536 ok(false, "unexpected exception thrown in: test_zero_dimensions"); 25537 } 25538 try { 25539 test_zero_dimensions_imagedata(); 25540 } catch(e) { 25541 ok(false, "unexpected exception thrown in: test_zero_dimensions_imagedata"); 25542 } 25543 try { 25544 test_getImageData_after_zero_canvas(); 25545 } catch(e) { 25546 ok(false, "unexpected exception thrown in: test_getImageData_after_zero_canvas"); 25547 throw e; 25548 } 25549 try { 25550 test_opaque(); 25551 } catch(e) { 25552 ok(false, "unexpected exception thrown in: test_opaque"); 25553 throw e; 25554 } 25555 try { 25556 test_2d_transformation_reset_transform(); 25557 } catch (e) { 25558 ok(false, "unexpected exception thrown in: test_2d_transformation_reset_transform"); 25559 } 25560 try { 25561 test_2d_path_ellipse_angle_1(); 25562 } catch (e) { 25563 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_1"); 25564 } 25565 try { 25566 test_2d_path_ellipse_angle_2(); 25567 } catch (e) { 25568 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_2"); 25569 } 25570 try { 25571 test_2d_path_ellipse_angle_3(); 25572 } catch (e) { 25573 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_3"); 25574 } 25575 try { 25576 test_2d_path_ellipse_angle_4(); 25577 } catch (e) { 25578 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_4"); 25579 } 25580 try { 25581 test_2d_path_ellipse_angle_5(); 25582 } catch (e) { 25583 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_5"); 25584 } 25585 try { 25586 test_2d_path_ellipse_angle_6(); 25587 } catch (e) { 25588 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_6"); 25589 } 25590 try { 25591 test_2d_path_ellipse_empty(); 25592 } catch (e) { 25593 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_empty"); 25594 } 25595 try { 25596 test_2d_path_ellipse_end(); 25597 } catch (e) { 25598 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_end"); 25599 } 25600 try { 25601 test_2d_path_ellipse_negative(); 25602 } catch (e) { 25603 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_negative"); 25604 } 25605 try { 25606 test_2d_path_ellipse_nonempty(); 25607 } catch (e) { 25608 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_nonempty"); 25609 } 25610 try { 25611 test_2d_path_ellipse_nonfinite(); 25612 } catch (e) { 25613 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_nonfinite"); 25614 } 25615 try { 25616 test_2d_path_ellipse_scale_1(); 25617 } catch (e) { 25618 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_scale_1"); 25619 } 25620 try { 25621 test_2d_path_ellipse_scale_2(); 25622 } catch (e) { 25623 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_scale_2"); 25624 } 25625 try { 25626 test_2d_path_ellipse_selfintersect_1(); 25627 } catch (e) { 25628 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_selfintersect_1"); 25629 } 25630 try { 25631 test_2d_path_ellipse_selfintersect_2(); 25632 } catch (e) { 25633 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_selfintersect_2"); 25634 } 25635 try { 25636 test_2d_path_ellipse_shape_1(); 25637 } catch (e) { 25638 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_1"); 25639 } 25640 try { 25641 test_2d_path_ellipse_shape_2(); 25642 } catch (e) { 25643 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_2"); 25644 } 25645 try { 25646 test_2d_path_ellipse_shape_3(); 25647 } catch (e) { 25648 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_3"); 25649 } 25650 try { 25651 test_2d_path_ellipse_shape_4(); 25652 } catch (e) { 25653 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_4"); 25654 } 25655 try { 25656 test_2d_path_ellipse_twopie_1(); 25657 } catch (e) { 25658 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_1"); 25659 } 25660 try { 25661 test_2d_path_ellipse_twopie_2(); 25662 } catch (e) { 25663 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_2"); 25664 } 25665 try { 25666 test_2d_path_ellipse_twopie_3(); 25667 } catch (e) { 25668 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_3"); 25669 } 25670 try { 25671 test_2d_path_ellipse_twopie_4(); 25672 } catch (e) { 25673 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_4"); 25674 } 25675 try { 25676 test_2d_path_ellipse_zero_1(); 25677 } catch (e) { 25678 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_zero_1"); 25679 } 25680 try { 25681 test_2d_path_ellipse_zero_2(); 25682 } catch (e) { 25683 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_zero_2"); 25684 } 25685 try { 25686 test_2d_path_ellipse_zeroradius(); 25687 } catch (e) { 25688 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_zeroradius"); 25689 } 25690 try { 25691 test_2d_path_ellipse_rotate(); 25692 } catch (e) { 25693 ok(false, "unexpected exception thrown in: test_2d_path_ellipse_rotate"); 25694 } 25695 try { 25696 // run this test last since it replaces the getContext method 25697 test_type_replace(); 25698 } catch (e) { 25699 ok(false, "unexpected exception thrown in: test_type_replace"); 25700 } 25701 try { 25702 test_2d_clearRect_testdoubleprecision(); 25703 } catch(e) { 25704 ok(false, "unexpected exception thrown in: test_2d_clearRect_testdoubleprecision"); 25705 throw e; 25706 } 25707 25708 //run the asynchronous tests 25709 try { 25710 test_2d_drawImage_animated_apng(); 25711 } catch (e) { 25712 ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_apng"); 25713 } 25714 try { 25715 test_2d_drawImage_animated_gif(); 25716 } catch (e) { 25717 ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_gif"); 25718 } 25719 25720 setTimeout(asyncTestsDone, 500); 25721 } 25722 25723 addLoadEvent(runTests); 25724 25725 </script>