dom/canvas/test/test_canvas.html

   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 IsD2DEnabled() {
  14     var enabled = false;
  15
  16     try {
  17         enabled = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).D2DEnabled;
  18     } catch(e) {}
  19
  20     return enabled;
  21 }
  22
  23 function IsLinux() {
  24     var os = "";
  25
  26     try {
  27         os = Cc["@mozilla.org/xre/app-info;1"]
  28           .getService(SpecialPowers.Ci.nsIXULRuntime).OS;
  29     } catch (e) {}
  30
  31     return os.indexOf("Linux") == 0 &&
  32            !navigator.appVersion.includes("Android");
  33 }
  34
  35 function IsWindows() {
  36     var os = "";
  37
  38     try {
  39         os = Cc["@mozilla.org/xre/app-info;1"]
  40           .getService(SpecialPowers.Ci.nsIXULRuntime).OS;
  41     } catch (e) {}
  42
  43     return os.indexOf("WINNT") == 0;
  44 }
  45
  46 function IsAzureSkia() {
  47   var enabled = false;
  48
  49   try {
  50     var backend = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).AzureCanvasBackend;
  51     enabled = (backend == "skia");
  52   } catch (e) { }
  53
  54   return enabled;
  55 }
  56
  57 function IsAzureCairo() {
  58   var enabled = false;
  59
  60   try {
  61     var backend = Cc["@mozilla.org/gfx/info;1"].getService(SpecialPowers.Ci.nsIGfxInfo).AzureCanvasBackend;
  62     enabled = (backend == "cairo");
  63   } catch (e) { }
  64
  65   return enabled;
  66 }
  67
  68 </script>
  69 <!-- Includes all the tests in the dom/canvas/tests except for test_bug397524.html -->
  70
  71 <!-- [[[ test_2d.canvas.readonly.html ]]] -->
  72
  73 <p>Canvas test: 2d.canvas.readonly</p>
  74 <!-- Testing: CanvasRenderingContext2D.canvas is readonly -->
  75 <canvas id="c1" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
  76 <script>
  77
  78 function test_2d_canvas_readonly() {
  79
  80 var canvas = document.getElementById('c1');
  81 var ctx = canvas.getContext('2d');
  82
  83 var c = document.createElement('canvas');
  84 var d = ctx.canvas;
  85 ok(c !== d, "c !== d");
  86 try { ctx.canvas = c; } catch (e) {} // not sure whether this should throw or not...
  87 ok(ctx.canvas === d, "ctx.canvas === d");
  88
  89
  90 }
  91 </script>
  92
  93 <!-- [[[ test_2d.canvas.reference.html ]]] -->
  94
  95 <p>Canvas test: 2d.canvas.reference</p>
  96 <!-- Testing: CanvasRenderingContext2D.canvas refers back to its canvas -->
  97 <canvas id="c2" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
  98 <script>
  99
 100 function test_2d_canvas_reference() {
 101
 102 var canvas = document.getElementById('c2');
 103 var ctx = canvas.getContext('2d');
 104
 105 ok(ctx.canvas === canvas, "ctx.canvas === canvas");
 106
 107
 108 }
 109 </script>
 110
 111 <!-- [[[ test_2d.clearRect.basic.html ]]] -->
 112
 113 <p>Canvas test: 2d.clearRect.basic</p>
 114 <canvas id="c3" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
 115 <script>
 116 function isPixel(ctx, x,y, r,g,b,a, d) {
 117         var pos = x + "," + y;
 118         var colour = r + "," + g + "," + b + "," + a;
 119     var pixel = ctx.getImageData(x, y, 1, 1);
 120     var pr = pixel.data[0],
 121         pg = pixel.data[1],
 122         pb = pixel.data[2],
 123         pa = pixel.data[3];
 124     ok(r-d <= pr && pr <= r+d &&
 125        g-d <= pg && pg <= g+d &&
 126        b-d <= pb && pb <= b+d &&
 127        a-d <= pa && pa <= a+d,
 128        "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+"; expected "+colour+" +/- "+d);
 129 }
 130
 131 function test_2d_clearRect_basic() {
 132
 133 var canvas = document.getElementById('c3');
 134 var ctx = canvas.getContext('2d');
 135
 136 ctx.fillStyle = '#f00';
 137 ctx.fillRect(0, 0, 100, 50);
 138 ctx.clearRect(0, 0, 100, 50);
 139 isPixel(ctx, 50,25, 0,0,0,0, 0);
 140
 141
 142 }
 143 </script>
 144
 145 <!-- [[[ test_2d.clearRect.clip.html ]]] -->
 146
 147 <p>Canvas test: 2d.clearRect.clip</p>
 148 <canvas id="c4" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
 149 <script>
 150
 151
 152 function test_2d_clearRect_clip() {
 153
 154 var canvas = document.getElementById('c4');
 155 var ctx = canvas.getContext('2d');
 156
 157 ctx.fillStyle = '#0f0';
 158 ctx.fillRect(0, 0, 100, 50);
 159
 160 ctx.beginPath();
 161 ctx.rect(0, 0, 16, 16);
 162 ctx.clip();
 163
 164 ctx.clearRect(0, 0, 100, 50);
 165
 166 ctx.fillStyle = '#0f0';
 167 ctx.fillRect(0, 0, 16, 16);
 168
 169 isPixel(ctx, 50,25, 0,255,0,255, 0);
 170
 171
 172 }
 173 </script>
 174
 175 <!-- [[[ test_2d.clearRect.globalalpha.html ]]] -->
 176
 177 <p>Canvas test: 2d.clearRect.globalalpha</p>
 178 <canvas id="c5" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
 179 <script>
 180
 181
 182 function test_2d_clearRect_globalalpha() {
 183
 184 var canvas = document.getElementById('c5');
 185 var ctx = canvas.getContext('2d');
 186
 187 ctx.fillStyle = '#f00';
 188 ctx.fillRect(0, 0, 100, 50);
 189 ctx.globalAlpha = 0.1;
 190 ctx.clearRect(0, 0, 100, 50);
 191 isPixel(ctx, 50,25, 0,0,0,0, 0);
 192
 193
 194 }
 195 </script>
 196
 197 <!-- [[[ test_2d.clearRect.globalcomposite.html ]]] -->
 198
 199 <p>Canvas test: 2d.clearRect.globalcomposite</p>
 200 <canvas id="c6" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
 201 <script>
 202
 203
 204 function test_2d_clearRect_globalcomposite() {
 205
 206 var canvas = document.getElementById('c6');
 207 var ctx = canvas.getContext('2d');
 208
 209 ctx.fillStyle = '#f00';
 210 ctx.fillRect(0, 0, 100, 50);
 211 ctx.globalCompositeOperation = 'destination-atop';
 212 ctx.clearRect(0, 0, 100, 50);
 213 isPixel(ctx, 50,25, 0,0,0,0, 0);
 214
 215
 216 }
 217 </script>
 218
 219 <!-- [[[ test_2d.clearRect.negative.html ]]] -->
 220
 221 <p>Canvas test: 2d.clearRect.negative</p>
 222 <canvas id="c7" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
 223 <script>
 224
 225
 226 function test_2d_clearRect_negative() {
 227
 228 var canvas = document.getElementById('c7');
 229 var ctx = canvas.getContext('2d');
 230
 231 ctx.fillStyle = '#f00';
 232 ctx.fillRect(0, 0, 100, 50);
 233 ctx.clearRect(0, 0, 50, 25);
 234 ctx.clearRect(100, 0, -50, 25);
 235 ctx.clearRect(0, 50, 50, -25);
 236 ctx.clearRect(100, 50, -50, -25);
 237 isPixel(ctx, 25,12, 0,0,0,0, 0);
 238 isPixel(ctx, 75,12, 0,0,0,0, 0);
 239 isPixel(ctx, 25,37, 0,0,0,0, 0);
 240 isPixel(ctx, 75,37, 0,0,0,0, 0);
 241
 242
 243 }
 244 </script>
 245
 246 <!-- [[[ test_2d.clearRect.nonfinite.html ]]] -->
 247
 248 <p>Canvas test: 2d.clearRect.nonfinite</p>
 249 <!-- Testing: clearRect() with Infinity/NaN is ignored -->
 250 <canvas id="c8" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 251 <script>
 252
 253
 254 function test_2d_clearRect_nonfinite() {
 255
 256 var canvas = document.getElementById('c8');
 257 var ctx = canvas.getContext('2d');
 258
 259 var _thrown_outer = false;
 260 try {
 261
 262 ctx.fillStyle = '#0f0';
 263 ctx.fillRect(0, 0, 100, 50);
 264
 265 ctx.clearRect(Infinity, 0, 100, 50);
 266 ctx.clearRect(-Infinity, 0, 100, 50);
 267 ctx.clearRect(NaN, 0, 100, 50);
 268 ctx.clearRect(0, Infinity, 100, 50);
 269 ctx.clearRect(0, -Infinity, 100, 50);
 270 ctx.clearRect(0, NaN, 100, 50);
 271 ctx.clearRect(0, 0, Infinity, 50);
 272 ctx.clearRect(0, 0, -Infinity, 50);
 273 ctx.clearRect(0, 0, NaN, 50);
 274 ctx.clearRect(0, 0, 100, Infinity);
 275 ctx.clearRect(0, 0, 100, -Infinity);
 276 ctx.clearRect(0, 0, 100, NaN);
 277 ctx.clearRect(Infinity, Infinity, 100, 50);
 278 ctx.clearRect(Infinity, Infinity, Infinity, 50);
 279 ctx.clearRect(Infinity, Infinity, Infinity, Infinity);
 280 ctx.clearRect(Infinity, Infinity, 100, Infinity);
 281 ctx.clearRect(Infinity, 0, Infinity, 50);
 282 ctx.clearRect(Infinity, 0, Infinity, Infinity);
 283 ctx.clearRect(Infinity, 0, 100, Infinity);
 284 ctx.clearRect(0, Infinity, Infinity, 50);
 285 ctx.clearRect(0, Infinity, Infinity, Infinity);
 286 ctx.clearRect(0, Infinity, 100, Infinity);
 287 ctx.clearRect(0, 0, Infinity, Infinity);
 288
 289 isPixel(ctx, 50,25, 0,255,0,255, 0);
 290
 291 } catch (e) {
 292     _thrown_outer = true;
 293 }
 294 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
 295
 296
 297 }
 298 </script>
 299
 300 <!-- [[[ test_2d.clearRect.path.html ]]] -->
 301
 302 <p>Canvas test: 2d.clearRect.path</p>
 303 <canvas id="c9" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
 304 <script>
 305
 306
 307 function test_2d_clearRect_path() {
 308
 309 var canvas = document.getElementById('c9');
 310 var ctx = canvas.getContext('2d');
 311
 312 ctx.fillStyle = '#0f0';
 313 ctx.beginPath();
 314 ctx.rect(0, 0, 100, 50);
 315 ctx.clearRect(0, 0, 16, 16);
 316 ctx.fill();
 317 isPixel(ctx, 50,25, 0,255,0,255, 0);
 318
 319
 320 }
 321 </script>
 322
 323 <!-- [[[ test_2d.clearRect.shadow.html ]]] -->
 324
 325 <p>Canvas test: 2d.clearRect.shadow</p>
 326 <canvas id="c10" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
 327 <script>
 328
 329
 330 function test_2d_clearRect_shadow() {
 331
 332 var canvas = document.getElementById('c10');
 333 var ctx = canvas.getContext('2d');
 334
 335 ctx.fillStyle = '#0f0';
 336 ctx.fillRect(0, 0, 100, 50);
 337 ctx.shadowColor = '#f00';
 338 ctx.shadowBlur = 0;
 339 ctx.shadowOffsetX = 0;
 340 ctx.shadowOffsetY = 50;
 341 ctx.clearRect(0, -50, 100, 50);
 342 isPixel(ctx, 50,25, 0,255,0,255, 0);
 343
 344
 345 }
 346 </script>
 347
 348 <!-- [[[ test_2d.clearRect.transform.html ]]] -->
 349
 350 <p>Canvas test: 2d.clearRect.transform</p>
 351 <canvas id="c11" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
 352 <script>
 353
 354
 355 function test_2d_clearRect_transform() {
 356
 357 var canvas = document.getElementById('c11');
 358 var ctx = canvas.getContext('2d');
 359
 360 ctx.fillStyle = '#f00';
 361 ctx.fillRect(0, 0, 100, 50);
 362 ctx.scale(10, 10);
 363 ctx.translate(0, 5);
 364 ctx.clearRect(0, -5, 10, 5);
 365 isPixel(ctx, 50,25, 0,0,0,0, 0);
 366
 367
 368 }
 369 </script>
 370
 371 <!-- [[[ test_2d.clearRect.zero.html ]]] -->
 372
 373 <p>Canvas test: 2d.clearRect.zero</p>
 374 <canvas id="c12" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
 375 <script>
 376
 377
 378 function test_2d_clearRect_zero() {
 379
 380 var canvas = document.getElementById('c12');
 381 var ctx = canvas.getContext('2d');
 382
 383 ctx.fillStyle = '#0f0';
 384 ctx.fillRect(0, 0, 100, 50);
 385 ctx.clearRect(0, 0, 100, 0);
 386 ctx.clearRect(0, 0, 0, 50);
 387 ctx.clearRect(0, 0, 0, 0);
 388 isPixel(ctx, 50,25, 0,255,0,255, 0);
 389
 390
 391 }
 392 </script>
 393
 394 <!-- [[[ test_2d.composite.canvas.copy.html ]]] -->
 395
 396 <p>Canvas test: 2d.composite.canvas.copy</p>
 397 <canvas id="c13" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 398 <script>
 399
 400
 401 function test_2d_composite_canvas_copy() {
 402
 403 var canvas = document.getElementById('c13');
 404 var ctx = canvas.getContext('2d');
 405
 406
 407 var canvas2 = document.createElement('canvas');
 408 canvas2.width = canvas.width;
 409 canvas2.height = canvas.height;
 410 var ctx2 = canvas2.getContext('2d');
 411 ctx2.drawImage(document.getElementById('yellow75_1.png'), 0, 0);
 412 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 413 ctx.fillRect(0, 0, 100, 50);
 414 ctx.globalCompositeOperation = 'copy';
 415 ctx.drawImage(canvas2, 0, 0);
 416 isPixel(ctx, 50,25, 255,255,0,191, 5);
 417
 418
 419 }
 420 </script>
 421 <img src="image_yellow75.png" id="yellow75_1.png" class="resource">
 422
 423 <!-- [[[ test_2d.composite.canvas.destination-atop.html ]]] -->
 424
 425 <p>Canvas test: 2d.composite.canvas.destination-atop</p>
 426 <canvas id="c14" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 427 <script>
 428
 429
 430 function test_2d_composite_canvas_destination_atop() {
 431
 432 var canvas = document.getElementById('c14');
 433 var ctx = canvas.getContext('2d');
 434
 435
 436 var canvas2 = document.createElement('canvas');
 437 canvas2.width = canvas.width;
 438 canvas2.height = canvas.height;
 439 var ctx2 = canvas2.getContext('2d');
 440 ctx2.drawImage(document.getElementById('yellow75_2.png'), 0, 0);
 441 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 442 ctx.fillRect(0, 0, 100, 50);
 443 ctx.globalCompositeOperation = 'destination-atop';
 444 ctx.drawImage(canvas2, 0, 0);
 445 isPixel(ctx, 50,25, 127,255,127,191, 5);
 446
 447
 448 }
 449 </script>
 450 <img src="image_yellow75.png" id="yellow75_2.png" class="resource">
 451
 452 <!-- [[[ test_2d.composite.canvas.destination-in.html ]]] -->
 453
 454 <p>Canvas test: 2d.composite.canvas.destination-in</p>
 455 <canvas id="c15" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 456 <script>
 457
 458
 459 function test_2d_composite_canvas_destination_in() {
 460
 461 var canvas = document.getElementById('c15');
 462 var ctx = canvas.getContext('2d');
 463
 464
 465 var canvas2 = document.createElement('canvas');
 466 canvas2.width = canvas.width;
 467 canvas2.height = canvas.height;
 468 var ctx2 = canvas2.getContext('2d');
 469 ctx2.drawImage(document.getElementById('yellow75_3.png'), 0, 0);
 470 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 471 ctx.fillRect(0, 0, 100, 50);
 472 ctx.globalCompositeOperation = 'destination-in';
 473 ctx.drawImage(canvas2, 0, 0);
 474 isPixel(ctx, 50,25, 0,255,255,95, 5);
 475
 476
 477 }
 478 </script>
 479 <img src="image_yellow75.png" id="yellow75_3.png" class="resource">
 480
 481 <!-- [[[ test_2d.composite.canvas.destination-out.html ]]] -->
 482
 483 <p>Canvas test: 2d.composite.canvas.destination-out</p>
 484 <canvas id="c16" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 485 <script>
 486
 487
 488 function test_2d_composite_canvas_destination_out() {
 489
 490 var canvas = document.getElementById('c16');
 491 var ctx = canvas.getContext('2d');
 492
 493
 494 var canvas2 = document.createElement('canvas');
 495 canvas2.width = canvas.width;
 496 canvas2.height = canvas.height;
 497 var ctx2 = canvas2.getContext('2d');
 498 ctx2.drawImage(document.getElementById('yellow75_4.png'), 0, 0);
 499 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 500 ctx.fillRect(0, 0, 100, 50);
 501 ctx.globalCompositeOperation = 'destination-out';
 502 ctx.drawImage(canvas2, 0, 0);
 503 isPixel(ctx, 50,25, 0,255,255,31, 5);
 504
 505
 506 }
 507 </script>
 508 <img src="image_yellow75.png" id="yellow75_4.png" class="resource">
 509
 510 <!-- [[[ test_2d.composite.canvas.destination-over.html ]]] -->
 511
 512 <p>Canvas test: 2d.composite.canvas.destination-over</p>
 513 <canvas id="c17" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 514 <script>
 515
 516
 517 function test_2d_composite_canvas_destination_over() {
 518
 519 var canvas = document.getElementById('c17');
 520 var ctx = canvas.getContext('2d');
 521
 522
 523 var canvas2 = document.createElement('canvas');
 524 canvas2.width = canvas.width;
 525 canvas2.height = canvas.height;
 526 var ctx2 = canvas2.getContext('2d');
 527 ctx2.drawImage(document.getElementById('yellow75_5.png'), 0, 0);
 528 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 529 ctx.fillRect(0, 0, 100, 50);
 530 ctx.globalCompositeOperation = 'destination-over';
 531 ctx.drawImage(canvas2, 0, 0);
 532 isPixel(ctx, 50,25, 109,255,145,223, 5);
 533
 534
 535 }
 536 </script>
 537 <img src="image_yellow75.png" id="yellow75_5.png" class="resource">
 538
 539 <!-- [[[ test_2d.composite.canvas.lighter.html ]]] -->
 540
 541 <p>Canvas test: 2d.composite.canvas.lighter</p>
 542 <canvas id="c18" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 543 <script>
 544
 545
 546 function test_2d_composite_canvas_lighter() {
 547
 548 var canvas = document.getElementById('c18');
 549 var ctx = canvas.getContext('2d');
 550
 551
 552 var canvas2 = document.createElement('canvas');
 553 canvas2.width = canvas.width;
 554 canvas2.height = canvas.height;
 555 var ctx2 = canvas2.getContext('2d');
 556 ctx2.drawImage(document.getElementById('yellow75_6.png'), 0, 0);
 557 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 558 ctx.fillRect(0, 0, 100, 50);
 559 ctx.globalCompositeOperation = 'lighter';
 560 ctx.drawImage(canvas2, 0, 0);
 561 isPixel(ctx, 50,25, 191,255,127,255, 5);
 562
 563
 564 }
 565 </script>
 566 <img src="image_yellow75.png" id="yellow75_6.png" class="resource">
 567
 568 <!-- [[[ test_2d.composite.canvas.source-atop.html ]]] -->
 569
 570 <p>Canvas test: 2d.composite.canvas.source-atop</p>
 571 <canvas id="c19" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 572 <script>
 573
 574
 575 function test_2d_composite_canvas_source_atop() {
 576
 577 var canvas = document.getElementById('c19');
 578 var ctx = canvas.getContext('2d');
 579
 580
 581 var canvas2 = document.createElement('canvas');
 582 canvas2.width = canvas.width;
 583 canvas2.height = canvas.height;
 584 var ctx2 = canvas2.getContext('2d');
 585 ctx2.drawImage(document.getElementById('yellow75_7.png'), 0, 0);
 586 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 587 ctx.fillRect(0, 0, 100, 50);
 588 ctx.globalCompositeOperation = 'source-atop';
 589 ctx.drawImage(canvas2, 0, 0);
 590 isPixel(ctx, 50,25, 191,255,63,127, 5);
 591
 592
 593 }
 594 </script>
 595 <img src="image_yellow75.png" id="yellow75_7.png" class="resource">
 596
 597 <!-- [[[ test_2d.composite.canvas.source-in.html ]]] -->
 598
 599 <p>Canvas test: 2d.composite.canvas.source-in</p>
 600 <canvas id="c20" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 601 <script>
 602
 603
 604 function test_2d_composite_canvas_source_in() {
 605
 606 var canvas = document.getElementById('c20');
 607 var ctx = canvas.getContext('2d');
 608
 609
 610 var canvas2 = document.createElement('canvas');
 611 canvas2.width = canvas.width;
 612 canvas2.height = canvas.height;
 613 var ctx2 = canvas2.getContext('2d');
 614 ctx2.drawImage(document.getElementById('yellow75_8.png'), 0, 0);
 615 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 616 ctx.fillRect(0, 0, 100, 50);
 617 ctx.globalCompositeOperation = 'source-in';
 618 ctx.drawImage(canvas2, 0, 0);
 619 isPixel(ctx, 50,25, 255,255,0,95, 5);
 620
 621
 622 }
 623 </script>
 624 <img src="image_yellow75.png" id="yellow75_8.png" class="resource">
 625
 626 <!-- [[[ test_2d.composite.canvas.source-out.html ]]] -->
 627
 628 <p>Canvas test: 2d.composite.canvas.source-out</p>
 629 <canvas id="c21" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 630 <script>
 631
 632
 633 function test_2d_composite_canvas_source_out() {
 634
 635 var canvas = document.getElementById('c21');
 636 var ctx = canvas.getContext('2d');
 637
 638
 639 var canvas2 = document.createElement('canvas');
 640 canvas2.width = canvas.width;
 641 canvas2.height = canvas.height;
 642 var ctx2 = canvas2.getContext('2d');
 643 ctx2.drawImage(document.getElementById('yellow75_9.png'), 0, 0);
 644 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 645 ctx.fillRect(0, 0, 100, 50);
 646 ctx.globalCompositeOperation = 'source-out';
 647 ctx.drawImage(canvas2, 0, 0);
 648 isPixel(ctx, 50,25, 255,255,0,95, 5);
 649
 650
 651 }
 652 </script>
 653 <img src="image_yellow75.png" id="yellow75_9.png" class="resource">
 654
 655 <!-- [[[ test_2d.composite.canvas.source-over.html ]]] -->
 656
 657 <p>Canvas test: 2d.composite.canvas.source-over</p>
 658 <canvas id="c22" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 659 <script>
 660
 661
 662 function test_2d_composite_canvas_source_over() {
 663
 664 var canvas = document.getElementById('c22');
 665 var ctx = canvas.getContext('2d');
 666
 667
 668 var canvas2 = document.createElement('canvas');
 669 canvas2.width = canvas.width;
 670 canvas2.height = canvas.height;
 671 var ctx2 = canvas2.getContext('2d');
 672 ctx2.drawImage(document.getElementById('yellow75_10.png'), 0, 0);
 673 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 674 ctx.fillRect(0, 0, 100, 50);
 675 ctx.globalCompositeOperation = 'source-over';
 676 ctx.drawImage(canvas2, 0, 0);
 677 isPixel(ctx, 50,25, 218,255,36,223, 5);
 678
 679
 680 }
 681 </script>
 682 <img src="image_yellow75.png" id="yellow75_10.png" class="resource">
 683
 684 <!-- [[[ test_2d.composite.canvas.xor.html ]]] -->
 685
 686 <p>Canvas test: 2d.composite.canvas.xor</p>
 687 <canvas id="c23" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 688 <script>
 689
 690
 691 function test_2d_composite_canvas_xor() {
 692
 693 var canvas = document.getElementById('c23');
 694 var ctx = canvas.getContext('2d');
 695
 696
 697 var canvas2 = document.createElement('canvas');
 698 canvas2.width = canvas.width;
 699 canvas2.height = canvas.height;
 700 var ctx2 = canvas2.getContext('2d');
 701 ctx2.drawImage(document.getElementById('yellow75_11.png'), 0, 0);
 702 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
 703 ctx.fillRect(0, 0, 100, 50);
 704 ctx.globalCompositeOperation = 'xor';
 705 ctx.drawImage(canvas2, 0, 0);
 706 isPixel(ctx, 50,25, 191,255,63,127, 5);
 707
 708
 709 }
 710 </script>
 711 <img src="image_yellow75.png" id="yellow75_11.png" class="resource">
 712
 713 <!-- [[[ test_2d.composite.clip.copy.html ]]] -->
 714
 715 <p>Canvas test: 2d.composite.clip.copy</p>
 716 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 717 <canvas id="c24" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 718 <script>
 719
 720
 721 function test_2d_composite_clip_copy() {
 722
 723 var canvas = document.getElementById('c24');
 724 var ctx = canvas.getContext('2d');
 725
 726
 727 ctx.fillStyle = '#0f0';
 728 ctx.fillRect(0, 0, 100, 50);
 729 ctx.globalCompositeOperation = 'copy';
 730 ctx.rect(-20, -20, 10, 10);
 731 ctx.clip();
 732 ctx.fillStyle = '#f00';
 733 ctx.fillRect(0, 0, 50, 50);
 734 isPixel(ctx, 25,25, 0,255,0,255, 0);
 735 isPixel(ctx, 75,25, 0,255,0,255, 0);
 736
 737
 738 }
 739 </script>
 740
 741 <!-- [[[ test_2d.composite.clip.destination-atop.html ]]] -->
 742
 743 <p>Canvas test: 2d.composite.clip.destination-atop</p>
 744 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 745 <canvas id="c25" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 746 <script>
 747
 748
 749 function test_2d_composite_clip_destination_atop() {
 750
 751 var canvas = document.getElementById('c25');
 752 var ctx = canvas.getContext('2d');
 753
 754
 755 ctx.fillStyle = '#0f0';
 756 ctx.fillRect(0, 0, 100, 50);
 757 ctx.globalCompositeOperation = 'destination-atop';
 758 ctx.rect(-20, -20, 10, 10);
 759 ctx.clip();
 760 ctx.fillStyle = '#f00';
 761 ctx.fillRect(0, 0, 50, 50);
 762 isPixel(ctx, 25,25, 0,255,0,255, 0);
 763 isPixel(ctx, 75,25, 0,255,0,255, 0);
 764
 765
 766 }
 767 </script>
 768
 769 <!-- [[[ test_2d.composite.clip.destination-in.html ]]] -->
 770
 771 <p>Canvas test: 2d.composite.clip.destination-in</p>
 772 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 773 <canvas id="c26" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 774 <script>
 775
 776
 777 function test_2d_composite_clip_destination_in() {
 778
 779 var canvas = document.getElementById('c26');
 780 var ctx = canvas.getContext('2d');
 781
 782
 783 ctx.fillStyle = '#0f0';
 784 ctx.fillRect(0, 0, 100, 50);
 785 ctx.globalCompositeOperation = 'destination-in';
 786 ctx.rect(-20, -20, 10, 10);
 787 ctx.clip();
 788 ctx.fillStyle = '#f00';
 789 ctx.fillRect(0, 0, 50, 50);
 790 isPixel(ctx, 25,25, 0,255,0,255, 0);
 791 isPixel(ctx, 75,25, 0,255,0,255, 0);
 792
 793
 794 }
 795 </script>
 796
 797 <!-- [[[ test_2d.composite.clip.destination-out.html ]]] -->
 798
 799 <p>Canvas test: 2d.composite.clip.destination-out</p>
 800 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 801 <canvas id="c27" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 802 <script>
 803
 804
 805 function test_2d_composite_clip_destination_out() {
 806
 807 var canvas = document.getElementById('c27');
 808 var ctx = canvas.getContext('2d');
 809
 810
 811 ctx.fillStyle = '#0f0';
 812 ctx.fillRect(0, 0, 100, 50);
 813 ctx.globalCompositeOperation = 'destination-out';
 814 ctx.rect(-20, -20, 10, 10);
 815 ctx.clip();
 816 ctx.fillStyle = '#f00';
 817 ctx.fillRect(0, 0, 50, 50);
 818 isPixel(ctx, 25,25, 0,255,0,255, 0);
 819 isPixel(ctx, 75,25, 0,255,0,255, 0);
 820
 821
 822 }
 823 </script>
 824
 825 <!-- [[[ test_2d.composite.clip.destination-over.html ]]] -->
 826
 827 <p>Canvas test: 2d.composite.clip.destination-over</p>
 828 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 829 <canvas id="c28" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 830 <script>
 831
 832
 833 function test_2d_composite_clip_destination_over() {
 834
 835 var canvas = document.getElementById('c28');
 836 var ctx = canvas.getContext('2d');
 837
 838
 839 ctx.fillStyle = '#0f0';
 840 ctx.fillRect(0, 0, 100, 50);
 841 ctx.globalCompositeOperation = 'destination-over';
 842 ctx.rect(-20, -20, 10, 10);
 843 ctx.clip();
 844 ctx.fillStyle = '#f00';
 845 ctx.fillRect(0, 0, 50, 50);
 846 isPixel(ctx, 25,25, 0,255,0,255, 0);
 847 isPixel(ctx, 75,25, 0,255,0,255, 0);
 848
 849
 850 }
 851 </script>
 852
 853 <!-- [[[ test_2d.composite.clip.lighter.html ]]] -->
 854
 855 <p>Canvas test: 2d.composite.clip.lighter</p>
 856 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 857 <canvas id="c29" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 858 <script>
 859
 860
 861 function test_2d_composite_clip_lighter() {
 862
 863 var canvas = document.getElementById('c29');
 864 var ctx = canvas.getContext('2d');
 865
 866
 867 ctx.fillStyle = '#0f0';
 868 ctx.fillRect(0, 0, 100, 50);
 869 ctx.globalCompositeOperation = 'lighter';
 870 ctx.rect(-20, -20, 10, 10);
 871 ctx.clip();
 872 ctx.fillStyle = '#f00';
 873 ctx.fillRect(0, 0, 50, 50);
 874 isPixel(ctx, 25,25, 0,255,0,255, 0);
 875 isPixel(ctx, 75,25, 0,255,0,255, 0);
 876
 877
 878 }
 879 </script>
 880
 881 <!-- [[[ test_2d.composite.clip.source-atop.html ]]] -->
 882
 883 <p>Canvas test: 2d.composite.clip.source-atop</p>
 884 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 885 <canvas id="c30" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 886 <script>
 887
 888
 889 function test_2d_composite_clip_source_atop() {
 890
 891 var canvas = document.getElementById('c30');
 892 var ctx = canvas.getContext('2d');
 893
 894
 895 ctx.fillStyle = '#0f0';
 896 ctx.fillRect(0, 0, 100, 50);
 897 ctx.globalCompositeOperation = 'source-atop';
 898 ctx.rect(-20, -20, 10, 10);
 899 ctx.clip();
 900 ctx.fillStyle = '#f00';
 901 ctx.fillRect(0, 0, 50, 50);
 902 isPixel(ctx, 25,25, 0,255,0,255, 0);
 903 isPixel(ctx, 75,25, 0,255,0,255, 0);
 904
 905
 906 }
 907 </script>
 908
 909 <!-- [[[ test_2d.composite.clip.source-in.html ]]] -->
 910
 911 <p>Canvas test: 2d.composite.clip.source-in</p>
 912 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 913 <canvas id="c31" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 914 <script>
 915
 916
 917 function test_2d_composite_clip_source_in() {
 918
 919 var canvas = document.getElementById('c31');
 920 var ctx = canvas.getContext('2d');
 921
 922
 923 ctx.fillStyle = '#0f0';
 924 ctx.fillRect(0, 0, 100, 50);
 925 ctx.globalCompositeOperation = 'source-in';
 926 ctx.rect(-20, -20, 10, 10);
 927 ctx.clip();
 928 ctx.fillStyle = '#f00';
 929 ctx.fillRect(0, 0, 50, 50);
 930 isPixel(ctx, 25,25, 0,255,0,255, 0);
 931 isPixel(ctx, 75,25, 0,255,0,255, 0);
 932
 933
 934 }
 935 </script>
 936
 937 <!-- [[[ test_2d.composite.clip.source-out.html ]]] -->
 938
 939 <p>Canvas test: 2d.composite.clip.source-out</p>
 940 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 941 <canvas id="c32" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 942 <script>
 943
 944
 945 function test_2d_composite_clip_source_out() {
 946
 947 var canvas = document.getElementById('c32');
 948 var ctx = canvas.getContext('2d');
 949
 950
 951 ctx.fillStyle = '#0f0';
 952 ctx.fillRect(0, 0, 100, 50);
 953 ctx.globalCompositeOperation = 'source-out';
 954 ctx.rect(-20, -20, 10, 10);
 955 ctx.clip();
 956 ctx.fillStyle = '#f00';
 957 ctx.fillRect(0, 0, 50, 50);
 958 isPixel(ctx, 25,25, 0,255,0,255, 0);
 959 isPixel(ctx, 75,25, 0,255,0,255, 0);
 960
 961
 962 }
 963 </script>
 964
 965 <!-- [[[ test_2d.composite.clip.source-over.html ]]] -->
 966
 967 <p>Canvas test: 2d.composite.clip.source-over</p>
 968 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 969 <canvas id="c33" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 970 <script>
 971
 972
 973 function test_2d_composite_clip_source_over() {
 974
 975 var canvas = document.getElementById('c33');
 976 var ctx = canvas.getContext('2d');
 977
 978
 979 ctx.fillStyle = '#0f0';
 980 ctx.fillRect(0, 0, 100, 50);
 981 ctx.globalCompositeOperation = 'source-over';
 982 ctx.rect(-20, -20, 10, 10);
 983 ctx.clip();
 984 ctx.fillStyle = '#f00';
 985 ctx.fillRect(0, 0, 50, 50);
 986 isPixel(ctx, 25,25, 0,255,0,255, 0);
 987 isPixel(ctx, 75,25, 0,255,0,255, 0);
 988
 989
 990 }
 991 </script>
 992
 993 <!-- [[[ test_2d.composite.clip.xor.html ]]] -->
 994
 995 <p>Canvas test: 2d.composite.clip.xor</p>
 996 <!-- Testing: fill() does not affect pixels outside the clip region. -->
 997 <canvas id="c34" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
 998 <script>
 999
1000
1001 function test_2d_composite_clip_xor() {
1002
1003 var canvas = document.getElementById('c34');
1004 var ctx = canvas.getContext('2d');
1005
1006
1007 ctx.fillStyle = '#0f0';
1008 ctx.fillRect(0, 0, 100, 50);
1009 ctx.globalCompositeOperation = 'xor';
1010 ctx.rect(-20, -20, 10, 10);
1011 ctx.clip();
1012 ctx.fillStyle = '#f00';
1013 ctx.fillRect(0, 0, 50, 50);
1014 isPixel(ctx, 25,25, 0,255,0,255, 0);
1015 isPixel(ctx, 75,25, 0,255,0,255, 0);
1016
1017
1018 }
1019 </script>
1020
1021 <!-- [[[ test_2d.composite.globalAlpha.canvas.html ]]] -->
1022
1023 <p>Canvas test: 2d.composite.globalAlpha.canvas</p>
1024 <canvas id="c35" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1025 <script>
1026
1027
1028 function test_2d_composite_globalAlpha_canvas() {
1029
1030 var canvas = document.getElementById('c35');
1031 var ctx = canvas.getContext('2d');
1032
1033 var canvas2 = document.createElement('canvas');
1034 canvas2.width = 100;
1035 canvas2.height = 50;
1036 var ctx2 = canvas2.getContext('2d');
1037 ctx2.fillStyle = '#f00';
1038 ctx2.fillRect(0, 0, 100, 50);
1039
1040 ctx.fillStyle = '#0f0';
1041 ctx.fillRect(0, 0, 100, 50);
1042 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1043 ctx.drawImage(canvas2, 0, 0);
1044 isPixel(ctx, 50,25, 2,253,0,255, 2);
1045
1046
1047 }
1048 </script>
1049
1050 <!-- [[[ test_2d.composite.globalAlpha.canvaspattern.html ]]] -->
1051
1052 <p>Canvas test: 2d.composite.globalAlpha.canvaspattern - bug 401790</p>
1053 <canvas id="c36" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1054 <script>
1055
1056 function todo_isPixel(ctx, x,y, r,g,b,a, d) {
1057         var pos = x + "," + y;
1058         var colour = r + "," + g + "," + b + "," + a;
1059     var pixel = ctx.getImageData(x, y, 1, 1);
1060     var pr = pixel.data[0],
1061         pg = pixel.data[1],
1062         pb = pixel.data[2],
1063         pa = pixel.data[3];
1064     todo(r-d <= pr && pr <= r+d &&
1065        g-d <= pg && pg <= g+d &&
1066        b-d <= pb && pb <= b+d &&
1067        a-d <= pa && pa <= a+d,
1068        "pixel "+pos+" of "+ctx.canvas.id+" is "+pr+","+pg+","+pb+","+pa+" (marked todo); expected "+colour+" +/- " + d);
1069 }
1070
1071 function test_2d_composite_globalAlpha_canvaspattern() {
1072
1073 var canvas = document.getElementById('c36');
1074 var ctx = canvas.getContext('2d');
1075
1076 var canvas2 = document.createElement('canvas');
1077 canvas2.width = 100;
1078 canvas2.height = 50;
1079 var ctx2 = canvas2.getContext('2d');
1080 ctx2.fillStyle = '#f00';
1081 ctx2.fillRect(0, 0, 100, 50);
1082
1083 ctx.fillStyle = '#0f0';
1084 ctx.fillRect(0, 0, 100, 50);
1085 ctx.fillStyle = ctx.createPattern(canvas2, 'no-repeat');
1086 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1087 ctx.fillRect(0, 0, 100, 50);
1088 isPixel(ctx, 50,25, 2,253,0,255, 2);
1089
1090
1091 }
1092 </script>
1093
1094 <!-- [[[ test_2d.composite.globalAlpha.default.html ]]] -->
1095
1096 <p>Canvas test: 2d.composite.globalAlpha.default</p>
1097 <canvas id="c37" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1098 <script>
1099
1100 function test_2d_composite_globalAlpha_default() {
1101
1102 var canvas = document.getElementById('c37');
1103 var ctx = canvas.getContext('2d');
1104
1105 ok(ctx.globalAlpha === 1.0, "ctx.globalAlpha === 1.0");
1106
1107
1108 }
1109 </script>
1110
1111 <!-- [[[ test_2d.composite.globalAlpha.fill.html ]]] -->
1112
1113 <p>Canvas test: 2d.composite.globalAlpha.fill</p>
1114 <canvas id="c38" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1115 <script>
1116
1117
1118 function test_2d_composite_globalAlpha_fill() {
1119
1120 var canvas = document.getElementById('c38');
1121 var ctx = canvas.getContext('2d');
1122
1123 ctx.fillStyle = '#0f0';
1124 ctx.fillRect(0, 0, 100, 50);
1125 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1126 ctx.fillStyle = '#f00';
1127 ctx.fillRect(0, 0, 100, 50);
1128 isPixel(ctx, 50,25, 2,253,0,255, 2);
1129
1130
1131 }
1132 </script>
1133
1134 <!-- [[[ test_2d.composite.globalAlpha.image.html ]]] -->
1135
1136 <p>Canvas test: 2d.composite.globalAlpha.image</p>
1137 <canvas id="c39" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1138 <script>
1139
1140
1141 function test_2d_composite_globalAlpha_image() {
1142
1143 var canvas = document.getElementById('c39');
1144 var ctx = canvas.getContext('2d');
1145
1146 ctx.fillStyle = '#0f0';
1147 ctx.fillRect(0, 0, 100, 50);
1148 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1149 ctx.drawImage(document.getElementById('red_1.png'), 0, 0);
1150 isPixel(ctx, 50,25, 2,253,0,255, 2);
1151
1152
1153 }
1154 </script>
1155 <img src="image_red.png" id="red_1.png" class="resource">
1156
1157 <!-- [[[ test_2d.composite.globalAlpha.imagepattern.html ]]] -->
1158
1159 <p>Canvas test: 2d.composite.globalAlpha.imagepattern - bug 401790</p>
1160 <canvas id="c40" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1161 <script>
1162
1163
1164
1165 function test_2d_composite_globalAlpha_imagepattern() {
1166
1167 var canvas = document.getElementById('c40');
1168 var ctx = canvas.getContext('2d');
1169
1170 ctx.fillStyle = '#0f0';
1171 ctx.fillRect(0, 0, 100, 50);
1172 ctx.fillStyle = ctx.createPattern(document.getElementById('red_2.png'), 'no-repeat');
1173 ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimisations
1174 ctx.fillRect(0, 0, 100, 50);
1175 isPixel(ctx, 50,25, 2,253,0,255, 2);
1176
1177
1178 }
1179 </script>
1180 <img src="image_red.png" id="red_2.png" class="resource">
1181
1182 <!-- [[[ test_2d.composite.globalAlpha.invalid.html ]]] -->
1183
1184 <p>Canvas test: 2d.composite.globalAlpha.invalid</p>
1185 <canvas id="c41" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1186 <script>
1187
1188 function test_2d_composite_globalAlpha_invalid() {
1189
1190 var canvas = document.getElementById('c41');
1191 var ctx = canvas.getContext('2d');
1192
1193 ctx.globalAlpha = 0.5;
1194 var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
1195 ctx.globalAlpha = Infinity;
1196 ok(ctx.globalAlpha === a, "ctx.globalAlpha === a");
1197 ctx.globalAlpha = -Infinity;
1198 ok(ctx.globalAlpha === a, "ctx.globalAlpha === a");
1199 ctx.globalAlpha = NaN;
1200 ok(ctx.globalAlpha === a, "ctx.globalAlpha === a");
1201
1202 }
1203 </script>
1204
1205 <!-- [[[ test_2d.composite.globalAlpha.range.html ]]] -->
1206
1207 <p>Canvas test: 2d.composite.globalAlpha.range</p>
1208 <canvas id="c42" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1209 <script>
1210
1211 function test_2d_composite_globalAlpha_range() {
1212
1213 var canvas = document.getElementById('c42');
1214 var ctx = canvas.getContext('2d');
1215
1216 ctx.globalAlpha = 0.5;
1217 var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
1218 ctx.globalAlpha = 1.1;
1219 ok(ctx.globalAlpha == a, "ctx.globalAlpha == a");
1220 ctx.globalAlpha = -0.1;
1221 ok(ctx.globalAlpha == a, "ctx.globalAlpha == a");
1222 ctx.globalAlpha = 0;
1223 ok(ctx.globalAlpha == 0, "ctx.globalAlpha == 0");
1224 ctx.globalAlpha = 1;
1225 ok(ctx.globalAlpha == 1, "ctx.globalAlpha == 1");
1226
1227
1228 }
1229 </script>
1230
1231 <!-- [[[ test_2d.composite.image.copy.html ]]] -->
1232
1233 <p>Canvas test: 2d.composite.image.copy</p>
1234 <canvas id="c43" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1235 <script>
1236
1237
1238 function test_2d_composite_image_copy() {
1239
1240 var canvas = document.getElementById('c43');
1241 var ctx = canvas.getContext('2d');
1242
1243
1244 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1245 ctx.fillRect(0, 0, 100, 50);
1246 ctx.globalCompositeOperation = 'copy';
1247 ctx.drawImage(document.getElementById('yellow75_12.png'), 0, 0);
1248 isPixel(ctx, 50,25, 255,255,0,191, 5);
1249
1250
1251 }
1252 </script>
1253 <img src="image_yellow75.png" id="yellow75_12.png" class="resource">
1254
1255 <!-- [[[ test_2d.composite.image.destination-atop.html ]]] -->
1256
1257 <p>Canvas test: 2d.composite.image.destination-atop</p>
1258 <canvas id="c44" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1259 <script>
1260
1261
1262 function test_2d_composite_image_destination_atop() {
1263
1264 var canvas = document.getElementById('c44');
1265 var ctx = canvas.getContext('2d');
1266
1267
1268 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1269 ctx.fillRect(0, 0, 100, 50);
1270 ctx.globalCompositeOperation = 'destination-atop';
1271 ctx.drawImage(document.getElementById('yellow75_13.png'), 0, 0);
1272 isPixel(ctx, 50,25, 127,255,127,191, 5);
1273
1274
1275 }
1276 </script>
1277 <img src="image_yellow75.png" id="yellow75_13.png" class="resource">
1278
1279 <!-- [[[ test_2d.composite.image.destination-in.html ]]] -->
1280
1281 <p>Canvas test: 2d.composite.image.destination-in</p>
1282 <canvas id="c45" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1283 <script>
1284
1285
1286 function test_2d_composite_image_destination_in() {
1287
1288 var canvas = document.getElementById('c45');
1289 var ctx = canvas.getContext('2d');
1290
1291
1292 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1293 ctx.fillRect(0, 0, 100, 50);
1294 ctx.globalCompositeOperation = 'destination-in';
1295 ctx.drawImage(document.getElementById('yellow75_14.png'), 0, 0);
1296 isPixel(ctx, 50,25, 0,255,255,95, 5);
1297
1298
1299 }
1300 </script>
1301 <img src="image_yellow75.png" id="yellow75_14.png" class="resource">
1302
1303 <!-- [[[ test_2d.composite.image.destination-out.html ]]] -->
1304
1305 <p>Canvas test: 2d.composite.image.destination-out</p>
1306 <canvas id="c46" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1307 <script>
1308
1309
1310 function test_2d_composite_image_destination_out() {
1311
1312 var canvas = document.getElementById('c46');
1313 var ctx = canvas.getContext('2d');
1314
1315
1316 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1317 ctx.fillRect(0, 0, 100, 50);
1318 ctx.globalCompositeOperation = 'destination-out';
1319 ctx.drawImage(document.getElementById('yellow75_15.png'), 0, 0);
1320 isPixel(ctx, 50,25, 0,255,255,31, 5);
1321
1322
1323 }
1324 </script>
1325 <img src="image_yellow75.png" id="yellow75_15.png" class="resource">
1326
1327 <!-- [[[ test_2d.composite.image.destination-over.html ]]] -->
1328
1329 <p>Canvas test: 2d.composite.image.destination-over</p>
1330 <canvas id="c47" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1331 <script>
1332
1333
1334 function test_2d_composite_image_destination_over() {
1335
1336 var canvas = document.getElementById('c47');
1337 var ctx = canvas.getContext('2d');
1338
1339
1340 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1341 ctx.fillRect(0, 0, 100, 50);
1342 ctx.globalCompositeOperation = 'destination-over';
1343 ctx.drawImage(document.getElementById('yellow75_16.png'), 0, 0);
1344 isPixel(ctx, 50,25, 109,255,145,223, 5);
1345
1346
1347 }
1348 </script>
1349 <img src="image_yellow75.png" id="yellow75_16.png" class="resource">
1350
1351 <!-- [[[ test_2d.composite.image.lighter.html ]]] -->
1352
1353 <p>Canvas test: 2d.composite.image.lighter</p>
1354 <canvas id="c48" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1355 <script>
1356
1357
1358 function test_2d_composite_image_lighter() {
1359
1360 var canvas = document.getElementById('c48');
1361 var ctx = canvas.getContext('2d');
1362
1363
1364 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1365 ctx.fillRect(0, 0, 100, 50);
1366 ctx.globalCompositeOperation = 'lighter';
1367 ctx.drawImage(document.getElementById('yellow75_17.png'), 0, 0);
1368 isPixel(ctx, 50,25, 191,255,127,255, 5);
1369
1370
1371 }
1372 </script>
1373 <img src="image_yellow75.png" id="yellow75_17.png" class="resource">
1374
1375 <!-- [[[ test_2d.composite.image.source-atop.html ]]] -->
1376
1377 <p>Canvas test: 2d.composite.image.source-atop</p>
1378 <canvas id="c49" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1379 <script>
1380
1381
1382 function test_2d_composite_image_source_atop() {
1383
1384 var canvas = document.getElementById('c49');
1385 var ctx = canvas.getContext('2d');
1386
1387
1388 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1389 ctx.fillRect(0, 0, 100, 50);
1390 ctx.globalCompositeOperation = 'source-atop';
1391 ctx.drawImage(document.getElementById('yellow75_18.png'), 0, 0);
1392 isPixel(ctx, 50,25, 191,255,63,127, 5);
1393
1394
1395 }
1396 </script>
1397 <img src="image_yellow75.png" id="yellow75_18.png" class="resource">
1398
1399 <!-- [[[ test_2d.composite.image.source-in.html ]]] -->
1400
1401 <p>Canvas test: 2d.composite.image.source-in</p>
1402 <canvas id="c50" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1403 <script>
1404
1405
1406 function test_2d_composite_image_source_in() {
1407
1408 var canvas = document.getElementById('c50');
1409 var ctx = canvas.getContext('2d');
1410
1411
1412 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1413 ctx.fillRect(0, 0, 100, 50);
1414 ctx.globalCompositeOperation = 'source-in';
1415 ctx.drawImage(document.getElementById('yellow75_19.png'), 0, 0);
1416 isPixel(ctx, 50,25, 255,255,0,95, 5);
1417
1418
1419 }
1420 </script>
1421 <img src="image_yellow75.png" id="yellow75_19.png" class="resource">
1422
1423 <!-- [[[ test_2d.composite.image.source-out.html ]]] -->
1424
1425 <p>Canvas test: 2d.composite.image.source-out</p>
1426 <canvas id="c51" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1427 <script>
1428
1429
1430 function test_2d_composite_image_source_out() {
1431
1432 var canvas = document.getElementById('c51');
1433 var ctx = canvas.getContext('2d');
1434
1435
1436 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1437 ctx.fillRect(0, 0, 100, 50);
1438 ctx.globalCompositeOperation = 'source-out';
1439 ctx.drawImage(document.getElementById('yellow75_20.png'), 0, 0);
1440 isPixel(ctx, 50,25, 255,255,0,95, 5);
1441
1442
1443 }
1444 </script>
1445 <img src="image_yellow75.png" id="yellow75_20.png" class="resource">
1446
1447 <!-- [[[ test_2d.composite.image.source-over.html ]]] -->
1448
1449 <p>Canvas test: 2d.composite.image.source-over</p>
1450 <canvas id="c52" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1451 <script>
1452
1453
1454 function test_2d_composite_image_source_over() {
1455
1456 var canvas = document.getElementById('c52');
1457 var ctx = canvas.getContext('2d');
1458
1459
1460 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1461 ctx.fillRect(0, 0, 100, 50);
1462 ctx.globalCompositeOperation = 'source-over';
1463 ctx.drawImage(document.getElementById('yellow75_21.png'), 0, 0);
1464 isPixel(ctx, 50,25, 218,255,36,223, 5);
1465
1466
1467 }
1468 </script>
1469 <img src="image_yellow75.png" id="yellow75_21.png" class="resource">
1470
1471 <!-- [[[ test_2d.composite.image.xor.html ]]] -->
1472
1473 <p>Canvas test: 2d.composite.image.xor</p>
1474 <canvas id="c53" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1475 <script>
1476
1477
1478 function test_2d_composite_image_xor() {
1479
1480 var canvas = document.getElementById('c53');
1481 var ctx = canvas.getContext('2d');
1482
1483
1484 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
1485 ctx.fillRect(0, 0, 100, 50);
1486 ctx.globalCompositeOperation = 'xor';
1487 ctx.drawImage(document.getElementById('yellow75_22.png'), 0, 0);
1488 isPixel(ctx, 50,25, 191,255,63,127, 5);
1489
1490
1491 }
1492 </script>
1493 <img src="image_yellow75.png" id="yellow75_22.png" class="resource">
1494
1495 <!-- [[[ test_2d.composite.operation.casesensitive.html ]]] -->
1496
1497 <p>Canvas test: 2d.composite.operation.casesensitive - bug 401788</p>
1498 <canvas id="c54" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1499 <script>
1500
1501 function test_2d_composite_operation_casesensitive() {
1502
1503 var canvas = document.getElementById('c54');
1504 var ctx = canvas.getContext('2d');
1505
1506 var _thrown_outer = false;
1507 try {
1508
1509 ctx.globalCompositeOperation = 'xor';
1510 ctx.globalCompositeOperation = 'Source-over';
1511 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1512
1513 } catch (e) {
1514     _thrown_outer = true;
1515 }
1516 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
1517
1518
1519 }
1520 </script>
1521
1522 <!-- [[[ test_2d.composite.operation.darker.html ]]] -->
1523
1524 <p>Canvas test: 2d.composite.operation.darker</p>
1525 <canvas id="c56" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1526 <script>
1527
1528 function test_2d_composite_operation_darker() {
1529
1530 var canvas = document.getElementById('c56');
1531 var ctx = canvas.getContext('2d');
1532
1533 ctx.globalCompositeOperation = 'xor';
1534 ctx.globalCompositeOperation = 'darker';
1535 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1536
1537
1538 }
1539 </script>
1540
1541 <!-- [[[ test_2d.composite.operation.default.html ]]] -->
1542
1543 <p>Canvas test: 2d.composite.operation.default</p>
1544 <canvas id="c57" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1545 <script>
1546
1547 function test_2d_composite_operation_default() {
1548
1549 var canvas = document.getElementById('c57');
1550 var ctx = canvas.getContext('2d');
1551
1552 ok(ctx.globalCompositeOperation == 'source-over', "ctx.globalCompositeOperation == 'source-over'");
1553
1554
1555 }
1556 </script>
1557
1558 <!-- [[[ test_2d.composite.operation.get.html ]]] -->
1559
1560 <p>Canvas test: 2d.composite.operation.get</p>
1561 <canvas id="c58" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1562 <script>
1563
1564 function test_2d_composite_operation_get() {
1565
1566 var canvas = document.getElementById('c58');
1567 var ctx = canvas.getContext('2d');
1568
1569 var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
1570     'destination-atop', 'destination-in', 'destination-out', 'destination-over',
1571     'lighter', 'copy', 'xor'];
1572 for (var i = 0; i < modes.length; ++i)
1573 {
1574     ctx.globalCompositeOperation = modes[i];
1575     ok(ctx.globalCompositeOperation == modes[i], "ctx.globalCompositeOperation == modes[\""+(i)+"\"]");
1576 }
1577
1578
1579 }
1580 </script>
1581
1582 <!-- [[[ test_2d.composite.operation.highlight.html ]]] -->
1583
1584 <p>Canvas test: 2d.composite.operation.highlight - bug 401788</p>
1585 <canvas id="c59" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1586 <script>
1587
1588 function test_2d_composite_operation_highlight() {
1589
1590 var canvas = document.getElementById('c59');
1591 var ctx = canvas.getContext('2d');
1592
1593 var _thrown_outer = false;
1594 try {
1595
1596 ctx.globalCompositeOperation = 'xor';
1597 ctx.globalCompositeOperation = 'highlight';
1598 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1599
1600 } catch (e) {
1601     _thrown_outer = true;
1602 }
1603 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
1604
1605
1606 }
1607 </script>
1608
1609 <!-- [[[ test_2d.composite.operation.nullsuffix.html ]]] -->
1610
1611 <p>Canvas test: 2d.composite.operation.nullsuffix - bug 401788</p>
1612 <canvas id="c60" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1613 <script>
1614
1615 function test_2d_composite_operation_nullsuffix() {
1616
1617 var canvas = document.getElementById('c60');
1618 var ctx = canvas.getContext('2d');
1619
1620 var _thrown_outer = false;
1621 try {
1622
1623 ctx.globalCompositeOperation = 'xor';
1624 ctx.globalCompositeOperation = 'source-over\0';
1625 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1626
1627 } catch (e) {
1628     _thrown_outer = true;
1629 }
1630 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
1631
1632
1633 }
1634 </script>
1635
1636 <!-- [[[ test_2d.composite.operation.over.html ]]] -->
1637
1638 <p>Canvas test: 2d.composite.operation.over</p>
1639 <canvas id="c61" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1640 <script>
1641
1642 function test_2d_composite_operation_over() {
1643
1644 var canvas = document.getElementById('c61');
1645 var ctx = canvas.getContext('2d');
1646
1647 ctx.globalCompositeOperation = 'xor';
1648 ctx.globalCompositeOperation = 'over';
1649 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1650
1651
1652 }
1653 </script>
1654
1655 <!-- [[[ test_2d.composite.operation.unrecognised.html ]]] -->
1656
1657 <p>Canvas test: 2d.composite.operation.unrecognised - bug 401788</p>
1658 <canvas id="c62" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1659 <script>
1660
1661 function test_2d_composite_operation_unrecognised() {
1662
1663 var canvas = document.getElementById('c62');
1664 var ctx = canvas.getContext('2d');
1665
1666 var _thrown_outer = false;
1667 try {
1668
1669 ctx.globalCompositeOperation = 'xor';
1670 ctx.globalCompositeOperation = 'nonexistent';
1671 ok(ctx.globalCompositeOperation == 'xor', "ctx.globalCompositeOperation == 'xor'");
1672
1673 } catch (e) {
1674     _thrown_outer = true;
1675 }
1676 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
1677
1678
1679 }
1680 </script>
1681
1682 <!-- [[[ test_2d.composite.solid.copy.html ]]] -->
1683
1684 <p>Canvas test: 2d.composite.solid.copy</p>
1685 <canvas id="c63" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1686 <script>
1687
1688
1689 function test_2d_composite_solid_copy() {
1690
1691 var canvas = document.getElementById('c63');
1692 var ctx = canvas.getContext('2d');
1693
1694
1695 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1696 ctx.fillRect(0, 0, 100, 50);
1697 ctx.globalCompositeOperation = 'copy';
1698 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1699 ctx.fillRect(0, 0, 100, 50);
1700 isPixel(ctx, 50,25, 255,255,0,255, 5);
1701
1702
1703 }
1704 </script>
1705
1706 <!-- [[[ test_2d.composite.solid.destination-atop.html ]]] -->
1707
1708 <p>Canvas test: 2d.composite.solid.destination-atop</p>
1709 <canvas id="c64" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1710 <script>
1711
1712
1713 function test_2d_composite_solid_destination_atop() {
1714
1715 var canvas = document.getElementById('c64');
1716 var ctx = canvas.getContext('2d');
1717
1718
1719 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1720 ctx.fillRect(0, 0, 100, 50);
1721 ctx.globalCompositeOperation = 'destination-atop';
1722 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1723 ctx.fillRect(0, 0, 100, 50);
1724 isPixel(ctx, 50,25, 0,255,255,255, 5);
1725
1726
1727 }
1728 </script>
1729
1730 <!-- [[[ test_2d.composite.solid.destination-in.html ]]] -->
1731
1732 <p>Canvas test: 2d.composite.solid.destination-in</p>
1733 <canvas id="c65" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1734 <script>
1735
1736
1737 function test_2d_composite_solid_destination_in() {
1738
1739 var canvas = document.getElementById('c65');
1740 var ctx = canvas.getContext('2d');
1741
1742
1743 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1744 ctx.fillRect(0, 0, 100, 50);
1745 ctx.globalCompositeOperation = 'destination-in';
1746 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1747 ctx.fillRect(0, 0, 100, 50);
1748 isPixel(ctx, 50,25, 0,255,255,255, 5);
1749
1750
1751 }
1752 </script>
1753
1754 <!-- [[[ test_2d.composite.solid.destination-out.html ]]] -->
1755
1756 <p>Canvas test: 2d.composite.solid.destination-out</p>
1757 <canvas id="c66" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1758 <script>
1759
1760
1761 function test_2d_composite_solid_destination_out() {
1762
1763 var canvas = document.getElementById('c66');
1764 var ctx = canvas.getContext('2d');
1765
1766
1767 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1768 ctx.fillRect(0, 0, 100, 50);
1769 ctx.globalCompositeOperation = 'destination-out';
1770 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1771 ctx.fillRect(0, 0, 100, 50);
1772 isPixel(ctx, 50,25, 0,0,0,0, 5);
1773
1774
1775 }
1776 </script>
1777
1778 <!-- [[[ test_2d.composite.solid.destination-over.html ]]] -->
1779
1780 <p>Canvas test: 2d.composite.solid.destination-over</p>
1781 <canvas id="c67" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1782 <script>
1783
1784
1785 function test_2d_composite_solid_destination_over() {
1786
1787 var canvas = document.getElementById('c67');
1788 var ctx = canvas.getContext('2d');
1789
1790
1791 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1792 ctx.fillRect(0, 0, 100, 50);
1793 ctx.globalCompositeOperation = 'destination-over';
1794 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1795 ctx.fillRect(0, 0, 100, 50);
1796 isPixel(ctx, 50,25, 0,255,255,255, 5);
1797
1798
1799 }
1800 </script>
1801
1802 <!-- [[[ test_2d.composite.solid.lighter.html ]]] -->
1803
1804 <p>Canvas test: 2d.composite.solid.lighter</p>
1805 <canvas id="c68" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1806 <script>
1807
1808
1809 function test_2d_composite_solid_lighter() {
1810
1811 var canvas = document.getElementById('c68');
1812 var ctx = canvas.getContext('2d');
1813
1814
1815 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1816 ctx.fillRect(0, 0, 100, 50);
1817 ctx.globalCompositeOperation = 'lighter';
1818 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1819 ctx.fillRect(0, 0, 100, 50);
1820 isPixel(ctx, 50,25, 255,255,255,255, 5);
1821
1822
1823 }
1824 </script>
1825
1826 <!-- [[[ test_2d.composite.solid.source-atop.html ]]] -->
1827
1828 <p>Canvas test: 2d.composite.solid.source-atop</p>
1829 <canvas id="c69" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1830 <script>
1831
1832
1833 function test_2d_composite_solid_source_atop() {
1834
1835 var canvas = document.getElementById('c69');
1836 var ctx = canvas.getContext('2d');
1837
1838
1839 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1840 ctx.fillRect(0, 0, 100, 50);
1841 ctx.globalCompositeOperation = 'source-atop';
1842 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1843 ctx.fillRect(0, 0, 100, 50);
1844 isPixel(ctx, 50,25, 255,255,0,255, 5);
1845
1846
1847 }
1848 </script>
1849
1850 <!-- [[[ test_2d.composite.solid.source-in.html ]]] -->
1851
1852 <p>Canvas test: 2d.composite.solid.source-in</p>
1853 <canvas id="c70" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1854 <script>
1855
1856
1857 function test_2d_composite_solid_source_in() {
1858
1859 var canvas = document.getElementById('c70');
1860 var ctx = canvas.getContext('2d');
1861
1862
1863 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1864 ctx.fillRect(0, 0, 100, 50);
1865 ctx.globalCompositeOperation = 'source-in';
1866 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1867 ctx.fillRect(0, 0, 100, 50);
1868 isPixel(ctx, 50,25, 255,255,0,255, 5);
1869
1870
1871 }
1872 </script>
1873
1874 <!-- [[[ test_2d.composite.solid.source-out.html ]]] -->
1875
1876 <p>Canvas test: 2d.composite.solid.source-out</p>
1877 <canvas id="c71" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1878 <script>
1879
1880
1881 function test_2d_composite_solid_source_out() {
1882
1883 var canvas = document.getElementById('c71');
1884 var ctx = canvas.getContext('2d');
1885
1886
1887 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1888 ctx.fillRect(0, 0, 100, 50);
1889 ctx.globalCompositeOperation = 'source-out';
1890 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1891 ctx.fillRect(0, 0, 100, 50);
1892 isPixel(ctx, 50,25, 0,0,0,0, 5);
1893
1894
1895 }
1896 </script>
1897
1898 <!-- [[[ test_2d.composite.solid.source-over.html ]]] -->
1899
1900 <p>Canvas test: 2d.composite.solid.source-over</p>
1901 <canvas id="c72" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1902 <script>
1903
1904
1905 function test_2d_composite_solid_source_over() {
1906
1907 var canvas = document.getElementById('c72');
1908 var ctx = canvas.getContext('2d');
1909
1910
1911 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1912 ctx.fillRect(0, 0, 100, 50);
1913 ctx.globalCompositeOperation = 'source-over';
1914 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1915 ctx.fillRect(0, 0, 100, 50);
1916 isPixel(ctx, 50,25, 255,255,0,255, 5);
1917
1918
1919 }
1920 </script>
1921
1922 <!-- [[[ test_2d.composite.solid.xor.html ]]] -->
1923
1924 <p>Canvas test: 2d.composite.solid.xor</p>
1925 <canvas id="c73" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1926 <script>
1927
1928
1929 function test_2d_composite_solid_xor() {
1930
1931 var canvas = document.getElementById('c73');
1932 var ctx = canvas.getContext('2d');
1933
1934
1935 ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
1936 ctx.fillRect(0, 0, 100, 50);
1937 ctx.globalCompositeOperation = 'xor';
1938 ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
1939 ctx.fillRect(0, 0, 100, 50);
1940 isPixel(ctx, 50,25, 0,0,0,0, 5);
1941
1942
1943 }
1944 </script>
1945
1946 <!-- [[[ test_2d.composite.transparent.copy.html ]]] -->
1947
1948 <p>Canvas test: 2d.composite.transparent.copy</p>
1949 <canvas id="c74" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1950 <script>
1951
1952
1953 function test_2d_composite_transparent_copy() {
1954
1955 var canvas = document.getElementById('c74');
1956 var ctx = canvas.getContext('2d');
1957
1958
1959 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
1960 ctx.fillRect(0, 0, 100, 50);
1961 ctx.globalCompositeOperation = 'copy';
1962 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
1963 ctx.fillRect(0, 0, 100, 50);
1964 isPixel(ctx, 50,25, 0,0,255,191, 5);
1965
1966
1967 }
1968 </script>
1969
1970 <!-- [[[ test_2d.composite.transparent.destination-atop.html ]]] -->
1971
1972 <p>Canvas test: 2d.composite.transparent.destination-atop</p>
1973 <canvas id="c75" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1974 <script>
1975
1976
1977 function test_2d_composite_transparent_destination_atop() {
1978
1979 var canvas = document.getElementById('c75');
1980 var ctx = canvas.getContext('2d');
1981
1982
1983 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
1984 ctx.fillRect(0, 0, 100, 50);
1985 ctx.globalCompositeOperation = 'destination-atop';
1986 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
1987 ctx.fillRect(0, 0, 100, 50);
1988 isPixel(ctx, 50,25, 0,127,127,191, 5);
1989
1990
1991 }
1992 </script>
1993
1994 <!-- [[[ test_2d.composite.transparent.destination-in.html ]]] -->
1995
1996 <p>Canvas test: 2d.composite.transparent.destination-in</p>
1997 <canvas id="c76" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
1998 <script>
1999
2000
2001 function test_2d_composite_transparent_destination_in() {
2002
2003 var canvas = document.getElementById('c76');
2004 var ctx = canvas.getContext('2d');
2005
2006
2007 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2008 ctx.fillRect(0, 0, 100, 50);
2009 ctx.globalCompositeOperation = 'destination-in';
2010 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2011 ctx.fillRect(0, 0, 100, 50);
2012 isPixel(ctx, 50,25, 0,255,0,95, 5);
2013
2014
2015 }
2016 </script>
2017
2018 <!-- [[[ test_2d.composite.transparent.destination-out.html ]]] -->
2019
2020 <p>Canvas test: 2d.composite.transparent.destination-out</p>
2021 <canvas id="c77" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2022 <script>
2023
2024
2025 function test_2d_composite_transparent_destination_out() {
2026
2027 var canvas = document.getElementById('c77');
2028 var ctx = canvas.getContext('2d');
2029
2030
2031 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2032 ctx.fillRect(0, 0, 100, 50);
2033 ctx.globalCompositeOperation = 'destination-out';
2034 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2035 ctx.fillRect(0, 0, 100, 50);
2036 isPixel(ctx, 50,25, 0,255,0,31, 5);
2037
2038
2039 }
2040 </script>
2041
2042 <!-- [[[ test_2d.composite.transparent.destination-over.html ]]] -->
2043
2044 <p>Canvas test: 2d.composite.transparent.destination-over</p>
2045 <canvas id="c78" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2046 <script>
2047
2048
2049 function test_2d_composite_transparent_destination_over() {
2050
2051 var canvas = document.getElementById('c78');
2052 var ctx = canvas.getContext('2d');
2053
2054
2055 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2056 ctx.fillRect(0, 0, 100, 50);
2057 ctx.globalCompositeOperation = 'destination-over';
2058 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2059 ctx.fillRect(0, 0, 100, 50);
2060 isPixel(ctx, 50,25, 0,145,109,223, 5);
2061
2062
2063 }
2064 </script>
2065
2066 <!-- [[[ test_2d.composite.transparent.lighter.html ]]] -->
2067
2068 <p>Canvas test: 2d.composite.transparent.lighter</p>
2069 <canvas id="c79" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2070 <script>
2071
2072
2073 function test_2d_composite_transparent_lighter() {
2074
2075 var canvas = document.getElementById('c79');
2076 var ctx = canvas.getContext('2d');
2077
2078
2079 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2080 ctx.fillRect(0, 0, 100, 50);
2081 ctx.globalCompositeOperation = 'lighter';
2082 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2083 ctx.fillRect(0, 0, 100, 50);
2084 isPixel(ctx, 50,25, 0,127,191,255, 5);
2085
2086
2087 }
2088 </script>
2089
2090 <!-- [[[ test_2d.composite.transparent.source-atop.html ]]] -->
2091
2092 <p>Canvas test: 2d.composite.transparent.source-atop</p>
2093 <canvas id="c80" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2094 <script>
2095
2096
2097 function test_2d_composite_transparent_source_atop() {
2098
2099 var canvas = document.getElementById('c80');
2100 var ctx = canvas.getContext('2d');
2101
2102
2103 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2104 ctx.fillRect(0, 0, 100, 50);
2105 ctx.globalCompositeOperation = 'source-atop';
2106 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2107 ctx.fillRect(0, 0, 100, 50);
2108 isPixel(ctx, 50,25, 0,63,191,127, 5);
2109
2110
2111 }
2112 </script>
2113
2114 <!-- [[[ test_2d.composite.transparent.source-in.html ]]] -->
2115
2116 <p>Canvas test: 2d.composite.transparent.source-in</p>
2117 <canvas id="c81" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2118 <script>
2119
2120
2121 function test_2d_composite_transparent_source_in() {
2122
2123 var canvas = document.getElementById('c81');
2124 var ctx = canvas.getContext('2d');
2125
2126
2127 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2128 ctx.fillRect(0, 0, 100, 50);
2129 ctx.globalCompositeOperation = 'source-in';
2130 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2131 ctx.fillRect(0, 0, 100, 50);
2132 isPixel(ctx, 50,25, 0,0,255,95, 5);
2133
2134
2135 }
2136 </script>
2137
2138 <!-- [[[ test_2d.composite.transparent.source-out.html ]]] -->
2139
2140 <p>Canvas test: 2d.composite.transparent.source-out</p>
2141 <canvas id="c82" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2142 <script>
2143
2144
2145 function test_2d_composite_transparent_source_out() {
2146
2147 var canvas = document.getElementById('c82');
2148 var ctx = canvas.getContext('2d');
2149
2150
2151 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2152 ctx.fillRect(0, 0, 100, 50);
2153 ctx.globalCompositeOperation = 'source-out';
2154 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2155 ctx.fillRect(0, 0, 100, 50);
2156 isPixel(ctx, 50,25, 0,0,255,95, 5);
2157
2158
2159 }
2160 </script>
2161
2162 <!-- [[[ test_2d.composite.transparent.source-over.html ]]] -->
2163
2164 <p>Canvas test: 2d.composite.transparent.source-over</p>
2165 <canvas id="c83" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2166 <script>
2167
2168
2169 function test_2d_composite_transparent_source_over() {
2170
2171 var canvas = document.getElementById('c83');
2172 var ctx = canvas.getContext('2d');
2173
2174
2175 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2176 ctx.fillRect(0, 0, 100, 50);
2177 ctx.globalCompositeOperation = 'source-over';
2178 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2179 ctx.fillRect(0, 0, 100, 50);
2180 isPixel(ctx, 50,25, 0,36,218,223, 5);
2181
2182
2183 }
2184 </script>
2185
2186 <!-- [[[ test_2d.composite.transparent.xor.html ]]] -->
2187
2188 <p>Canvas test: 2d.composite.transparent.xor</p>
2189 <canvas id="c84" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2190 <script>
2191
2192
2193 function test_2d_composite_transparent_xor() {
2194
2195 var canvas = document.getElementById('c84');
2196 var ctx = canvas.getContext('2d');
2197
2198
2199 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2200 ctx.fillRect(0, 0, 100, 50);
2201 ctx.globalCompositeOperation = 'xor';
2202 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2203 ctx.fillRect(0, 0, 100, 50);
2204 isPixel(ctx, 50,25, 0,63,191,127, 5);
2205
2206
2207 }
2208 </script>
2209
2210 <!-- [[[ test_2d.composite.uncovered.fill.copy.html ]]] -->
2211
2212 <p>Canvas test: 2d.composite.uncovered.fill.copy</p>
2213 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2214 <canvas id="c85" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2215 <script>
2216
2217
2218
2219 function test_2d_composite_uncovered_fill_copy() {
2220
2221 var canvas = document.getElementById('c85');
2222 var ctx = canvas.getContext('2d');
2223
2224
2225 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2226 ctx.fillRect(0, 0, 100, 50);
2227 ctx.globalCompositeOperation = 'copy';
2228 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2229 ctx.translate(0, 25);
2230 ctx.fillRect(0, 50, 100, 50);
2231 isPixel(ctx, 50,25, 0,0,0,0, 5);
2232
2233
2234 }
2235 </script>
2236
2237 <!-- [[[ test_2d.composite.uncovered.fill.destination-atop.html ]]] -->
2238
2239 <p>Canvas test: 2d.composite.uncovered.fill.destination-atop</p>
2240 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2241 <canvas id="c86" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2242 <script>
2243
2244
2245
2246 function test_2d_composite_uncovered_fill_destination_atop() {
2247
2248 var canvas = document.getElementById('c86');
2249 var ctx = canvas.getContext('2d');
2250
2251
2252 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2253 ctx.fillRect(0, 0, 100, 50);
2254 ctx.globalCompositeOperation = 'destination-atop';
2255 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2256 ctx.translate(0, 25);
2257 ctx.fillRect(0, 50, 100, 50);
2258 isPixel(ctx, 50,25, 0,0,0,0, 5);
2259
2260
2261 }
2262 </script>
2263
2264 <!-- [[[ test_2d.composite.uncovered.fill.destination-in.html ]]] -->
2265
2266 <p>Canvas test: 2d.composite.uncovered.fill.destination-in</p>
2267 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2268 <canvas id="c87" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2269 <script>
2270
2271
2272
2273 function test_2d_composite_uncovered_fill_destination_in() {
2274
2275 var canvas = document.getElementById('c87');
2276 var ctx = canvas.getContext('2d');
2277
2278
2279 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2280 ctx.fillRect(0, 0, 100, 50);
2281 ctx.globalCompositeOperation = 'destination-in';
2282 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2283 ctx.translate(0, 25);
2284 ctx.fillRect(0, 50, 100, 50);
2285 isPixel(ctx, 50,25, 0,0,0,0, 5);
2286
2287
2288 }
2289 </script>
2290
2291 <!-- [[[ test_2d.composite.uncovered.fill.source-in.html ]]] -->
2292
2293 <p>Canvas test: 2d.composite.uncovered.fill.source-in</p>
2294 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2295 <canvas id="c88" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2296 <script>
2297
2298
2299
2300 function test_2d_composite_uncovered_fill_source_in() {
2301
2302 var canvas = document.getElementById('c88');
2303 var ctx = canvas.getContext('2d');
2304
2305
2306 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2307 ctx.fillRect(0, 0, 100, 50);
2308 ctx.globalCompositeOperation = 'source-in';
2309 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2310 ctx.translate(0, 25);
2311 ctx.fillRect(0, 50, 100, 50);
2312 isPixel(ctx, 50,25, 0,0,0,0, 5);
2313
2314
2315 }
2316 </script>
2317
2318 <!-- [[[ test_2d.composite.uncovered.fill.source-out.html ]]] -->
2319
2320 <p>Canvas test: 2d.composite.uncovered.fill.source-out</p>
2321 <!-- Testing: fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2322 <canvas id="c89" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2323 <script>
2324
2325
2326
2327 function test_2d_composite_uncovered_fill_source_out() {
2328
2329 var canvas = document.getElementById('c89');
2330 var ctx = canvas.getContext('2d');
2331
2332
2333 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
2334 ctx.fillRect(0, 0, 100, 50);
2335 ctx.globalCompositeOperation = 'source-out';
2336 ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
2337 ctx.translate(0, 25);
2338 ctx.fillRect(0, 50, 100, 50);
2339 isPixel(ctx, 50,25, 0,0,0,0, 5);
2340
2341
2342 }
2343 </script>
2344
2345 <!-- [[[ test_2d.composite.uncovered.image.copy.html ]]] -->
2346
2347 <p>Canvas test: 2d.composite.uncovered.image.copy</p>
2348 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2349 <canvas id="c90" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2350 <script>
2351
2352
2353
2354 function test_2d_composite_uncovered_image_copy() {
2355
2356 var canvas = document.getElementById('c90');
2357 var ctx = canvas.getContext('2d');
2358
2359
2360 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2361 ctx.fillRect(0, 0, 100, 50);
2362 ctx.globalCompositeOperation = 'copy';
2363 ctx.drawImage(document.getElementById('yellow_1.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2364 isPixel(ctx, 15,15, 0,0,0,0, 5);
2365 isPixel(ctx, 50,25, 0,0,0,0, 5);
2366
2367
2368 }
2369 </script>
2370 <img src="image_yellow.png" id="yellow_1.png" class="resource">
2371
2372 <!-- [[[ test_2d.composite.uncovered.image.destination-atop.html ]]] -->
2373
2374 <p>Canvas test: 2d.composite.uncovered.image.destination-atop</p>
2375 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2376 <canvas id="c91" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2377 <script>
2378
2379
2380
2381 function test_2d_composite_uncovered_image_destination_atop() {
2382
2383 var canvas = document.getElementById('c91');
2384 var ctx = canvas.getContext('2d');
2385
2386
2387 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2388 ctx.fillRect(0, 0, 100, 50);
2389 ctx.globalCompositeOperation = 'destination-atop';
2390 ctx.drawImage(document.getElementById('yellow_2.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2391 isPixel(ctx, 15,15, 0,0,0,0, 5);
2392 isPixel(ctx, 50,25, 0,0,0,0, 5);
2393
2394
2395 }
2396 </script>
2397 <img src="image_yellow.png" id="yellow_2.png" class="resource">
2398
2399 <!-- [[[ test_2d.composite.uncovered.image.destination-in.html ]]] -->
2400
2401 <p>Canvas test: 2d.composite.uncovered.image.destination-in</p>
2402 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2403 <canvas id="c92" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2404 <script>
2405
2406
2407
2408 function test_2d_composite_uncovered_image_destination_in() {
2409
2410 var canvas = document.getElementById('c92');
2411 var ctx = canvas.getContext('2d');
2412
2413
2414 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2415 ctx.fillRect(0, 0, 100, 50);
2416 ctx.globalCompositeOperation = 'destination-in';
2417 ctx.drawImage(document.getElementById('yellow_3.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2418 isPixel(ctx, 15,15, 0,0,0,0, 5);
2419 isPixel(ctx, 50,25, 0,0,0,0, 5);
2420
2421
2422 }
2423 </script>
2424 <img src="image_yellow.png" id="yellow_3.png" class="resource">
2425
2426 <!-- [[[ test_2d.composite.uncovered.image.source-in.html ]]] -->
2427
2428 <p>Canvas test: 2d.composite.uncovered.image.source-in</p>
2429 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2430 <canvas id="c93" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2431 <script>
2432
2433
2434
2435 function test_2d_composite_uncovered_image_source_in() {
2436
2437 var canvas = document.getElementById('c93');
2438 var ctx = canvas.getContext('2d');
2439
2440
2441 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2442 ctx.fillRect(0, 0, 100, 50);
2443 ctx.globalCompositeOperation = 'source-in';
2444 ctx.drawImage(document.getElementById('yellow_4.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2445 isPixel(ctx, 15,15, 0,0,0,0, 5);
2446 isPixel(ctx, 50,25, 0,0,0,0, 5);
2447
2448
2449 }
2450 </script>
2451 <img src="image_yellow.png" id="yellow_4.png" class="resource">
2452
2453 <!-- [[[ test_2d.composite.uncovered.image.source-out.html ]]] -->
2454
2455 <p>Canvas test: 2d.composite.uncovered.image.source-out</p>
2456 <!-- Testing: drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2457 <canvas id="c94" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2458 <script>
2459
2460
2461
2462 function test_2d_composite_uncovered_image_source_out() {
2463
2464 var canvas = document.getElementById('c94');
2465 var ctx = canvas.getContext('2d');
2466
2467
2468 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2469 ctx.fillRect(0, 0, 100, 50);
2470 ctx.globalCompositeOperation = 'source-out';
2471 ctx.drawImage(document.getElementById('yellow_5.png'), 40, 40, 10, 10, 40, 50, 10, 10);
2472 isPixel(ctx, 15,15, 0,0,0,0, 5);
2473 isPixel(ctx, 50,25, 0,0,0,0, 5);
2474
2475
2476 }
2477 </script>
2478 <img src="image_yellow.png" id="yellow_5.png" class="resource">
2479
2480 <!-- [[[ test_2d.composite.uncovered.pattern.copy.html ]]] -->
2481
2482 <p>Canvas test: 2d.composite.uncovered.pattern.copy</p>
2483 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2484 <canvas id="c95" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2485 <script>
2486
2487
2488
2489 function test_2d_composite_uncovered_pattern_copy() {
2490
2491 var canvas = document.getElementById('c95');
2492 var ctx = canvas.getContext('2d');
2493
2494
2495 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2496 ctx.fillRect(0, 0, 100, 50);
2497 ctx.globalCompositeOperation = 'copy';
2498 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_6.png'), 'no-repeat');
2499 ctx.fillRect(0, 50, 100, 50);
2500 isPixel(ctx, 50,25, 0,0,0,0, 5);
2501
2502
2503 }
2504 </script>
2505 <img src="image_yellow.png" id="yellow_6.png" class="resource">
2506
2507 <!-- [[[ test_2d.composite.uncovered.pattern.destination-atop.html ]]] -->
2508
2509 <p>Canvas test: 2d.composite.uncovered.pattern.destination-atop</p>
2510 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2511 <canvas id="c96" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2512 <script>
2513
2514
2515
2516 function test_2d_composite_uncovered_pattern_destination_atop() {
2517
2518 var canvas = document.getElementById('c96');
2519 var ctx = canvas.getContext('2d');
2520
2521
2522 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2523 ctx.fillRect(0, 0, 100, 50);
2524 ctx.globalCompositeOperation = 'destination-atop';
2525 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_7.png'), 'no-repeat');
2526 ctx.fillRect(0, 50, 100, 50);
2527 isPixel(ctx, 50,25, 0,0,0,0, 5);
2528
2529
2530 }
2531 </script>
2532 <img src="image_yellow.png" id="yellow_7.png" class="resource">
2533
2534 <!-- [[[ test_2d.composite.uncovered.pattern.destination-in.html ]]] -->
2535
2536 <p>Canvas test: 2d.composite.uncovered.pattern.destination-in</p>
2537 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2538 <canvas id="c97" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2539 <script>
2540
2541
2542
2543 function test_2d_composite_uncovered_pattern_destination_in() {
2544
2545 var canvas = document.getElementById('c97');
2546 var ctx = canvas.getContext('2d');
2547
2548
2549 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2550 ctx.fillRect(0, 0, 100, 50);
2551 ctx.globalCompositeOperation = 'destination-in';
2552 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_8.png'), 'no-repeat');
2553 ctx.fillRect(0, 50, 100, 50);
2554 isPixel(ctx, 50,25, 0,0,0,0, 5);
2555
2556
2557 }
2558 </script>
2559 <img src="image_yellow.png" id="yellow_8.png" class="resource">
2560
2561 <!-- [[[ test_2d.composite.uncovered.pattern.source-in.html ]]] -->
2562
2563 <p>Canvas test: 2d.composite.uncovered.pattern.source-in</p>
2564 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2565 <canvas id="c98" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2566 <script>
2567
2568
2569
2570 function test_2d_composite_uncovered_pattern_source_in() {
2571
2572 var canvas = document.getElementById('c98');
2573 var ctx = canvas.getContext('2d');
2574
2575
2576 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2577 ctx.fillRect(0, 0, 100, 50);
2578 ctx.globalCompositeOperation = 'source-in';
2579 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_9.png'), 'no-repeat');
2580 ctx.fillRect(0, 50, 100, 50);
2581 isPixel(ctx, 50,25, 0,0,0,0, 5);
2582
2583
2584 }
2585 </script>
2586 <img src="image_yellow.png" id="yellow_9.png" class="resource">
2587
2588 <!-- [[[ test_2d.composite.uncovered.pattern.source-out.html ]]] -->
2589
2590 <p>Canvas test: 2d.composite.uncovered.pattern.source-out</p>
2591 <!-- Testing: Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged. -->
2592 <canvas id="c99" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2593 <script>
2594
2595
2596
2597 function test_2d_composite_uncovered_pattern_source_out() {
2598
2599 var canvas = document.getElementById('c99');
2600 var ctx = canvas.getContext('2d');
2601
2602
2603 ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
2604 ctx.fillRect(0, 0, 100, 50);
2605 ctx.globalCompositeOperation = 'source-out';
2606 ctx.fillStyle = ctx.createPattern(document.getElementById('yellow_10.png'), 'no-repeat');
2607 ctx.fillRect(0, 50, 100, 50);
2608 isPixel(ctx, 50,25, 0,0,0,0, 5);
2609
2610
2611 }
2612 </script>
2613 <img src="image_yellow.png" id="yellow_10.png" class="resource">
2614
2615 <!-- [[[ test_2d.drawImage.3arg.html ]]] -->
2616
2617 <p>Canvas test: 2d.drawImage.3arg</p>
2618 <canvas id="c100" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2619 <script>
2620
2621
2622 function test_2d_drawImage_3arg() {
2623
2624 var canvas = document.getElementById('c100');
2625 var ctx = canvas.getContext('2d');
2626
2627 ctx.drawImage(document.getElementById('green_1.png'), 0, 0);
2628 ctx.drawImage(document.getElementById('red_3.png'), -100, 0);
2629 ctx.drawImage(document.getElementById('red_3.png'), 100, 0);
2630 ctx.drawImage(document.getElementById('red_3.png'), 0, -50);
2631 ctx.drawImage(document.getElementById('red_3.png'), 0, 50);
2632
2633 isPixel(ctx, 0,0, 0,255,0,255, 2);
2634 isPixel(ctx, 99,0, 0,255,0,255, 2);
2635 isPixel(ctx, 0,49, 0,255,0,255, 2);
2636 isPixel(ctx, 99,49, 0,255,0,255, 2);
2637
2638
2639 }
2640 </script>
2641 <img src="image_red.png" id="red_3.png" class="resource">
2642 <img src="image_green.png" id="green_1.png" class="resource">
2643
2644 <!-- [[[ test_2d.drawImage.5arg.html ]]] -->
2645
2646 <p>Canvas test: 2d.drawImage.5arg</p>
2647 <canvas id="c101" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2648 <script>
2649
2650
2651 function test_2d_drawImage_5arg() {
2652
2653 var canvas = document.getElementById('c101');
2654 var ctx = canvas.getContext('2d');
2655
2656 ctx.fillStyle = '#f00';
2657 ctx.fillRect(0, 0, 100, 50);
2658 ctx.drawImage(document.getElementById('green_2.png'), 50, 0, 50, 50);
2659 ctx.drawImage(document.getElementById('red_4.png'), 0, 0, 50, 50);
2660 ctx.fillStyle = '#0f0';
2661 ctx.fillRect(0, 0, 50, 50);
2662
2663 isPixel(ctx, 0,0, 0,255,0,255, 2);
2664 isPixel(ctx, 99,0, 0,255,0,255, 2);
2665 isPixel(ctx, 0,49, 0,255,0,255, 2);
2666 isPixel(ctx, 99,49, 0,255,0,255, 2);
2667
2668
2669 }
2670 </script>
2671 <img src="image_red.png" id="red_4.png" class="resource">
2672 <img src="image_green.png" id="green_2.png" class="resource">
2673
2674 <!-- [[[ test_2d.drawImage.9arg.basic.html ]]] -->
2675
2676 <p>Canvas test: 2d.drawImage.9arg.basic</p>
2677 <canvas id="c102" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2678 <script>
2679
2680
2681 function test_2d_drawImage_9arg_basic() {
2682
2683 var canvas = document.getElementById('c102');
2684 var ctx = canvas.getContext('2d');
2685
2686 ctx.fillStyle = '#f00';
2687 ctx.fillRect(0, 0, 100, 50);
2688 ctx.drawImage(document.getElementById('green_3.png'), 0, 0, 100, 50, 0, 0, 100, 50);
2689 isPixel(ctx, 0,0, 0,255,0,255, 2);
2690 isPixel(ctx, 99,0, 0,255,0,255, 2);
2691 isPixel(ctx, 0,49, 0,255,0,255, 2);
2692 isPixel(ctx, 99,49, 0,255,0,255, 2);
2693
2694
2695 }
2696 </script>
2697 <img src="image_green.png" id="green_3.png" class="resource">
2698
2699 <!-- [[[ test_2d.drawImage.9arg.destpos.html ]]] -->
2700
2701 <p>Canvas test: 2d.drawImage.9arg.destpos</p>
2702 <canvas id="c103" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2703 <script>
2704
2705
2706 function test_2d_drawImage_9arg_destpos() {
2707
2708 var canvas = document.getElementById('c103');
2709 var ctx = canvas.getContext('2d');
2710
2711 ctx.fillStyle = '#f00';
2712 ctx.fillRect(0, 0, 100, 50);
2713 ctx.drawImage(document.getElementById('green_4.png'), 0, 0, 100, 50, 0, 0, 100, 50);
2714 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, -100, 0, 100, 50);
2715 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 100, 0, 100, 50);
2716 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 0, -50, 100, 50);
2717 ctx.drawImage(document.getElementById('red_5.png'), 0, 0, 100, 50, 0, 50, 100, 50);
2718 isPixel(ctx, 0,0, 0,255,0,255, 2);
2719 isPixel(ctx, 99,0, 0,255,0,255, 2);
2720 isPixel(ctx, 0,49, 0,255,0,255, 2);
2721 isPixel(ctx, 99,49, 0,255,0,255, 2);
2722
2723
2724 }
2725 </script>
2726 <img src="image_red.png" id="red_5.png" class="resource">
2727 <img src="image_green.png" id="green_4.png" class="resource">
2728
2729 <!-- [[[ test_2d.drawImage.9arg.destsize.html ]]] -->
2730
2731 <p>Canvas test: 2d.drawImage.9arg.destsize</p>
2732 <canvas id="c104" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2733 <script>
2734
2735
2736 function test_2d_drawImage_9arg_destsize() {
2737
2738 var canvas = document.getElementById('c104');
2739 var ctx = canvas.getContext('2d');
2740
2741 ctx.fillStyle = '#f00';
2742 ctx.fillRect(0, 0, 100, 50);
2743 ctx.drawImage(document.getElementById('green_5.png'), 1, 1, 1, 1, 0, 0, 100, 50);
2744 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, -50, 0, 50, 50);
2745 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 100, 0, 50, 50);
2746 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 0, -25, 100, 25);
2747 ctx.drawImage(document.getElementById('red_6.png'), 0, 0, 100, 50, 0, 50, 100, 25);
2748 isPixel(ctx, 0,0, 0,255,0,255, 2);
2749 isPixel(ctx, 99,0, 0,255,0,255, 2);
2750 isPixel(ctx, 0,49, 0,255,0,255, 2);
2751 isPixel(ctx, 99,49, 0,255,0,255, 2);
2752
2753
2754 }
2755 </script>
2756 <img src="image_red.png" id="red_6.png" class="resource">
2757 <img src="image_green.png" id="green_5.png" class="resource">
2758
2759 <!-- [[[ test_2d.drawImage.9arg.sourcepos.html ]]] -->
2760
2761 <p>Canvas test: 2d.drawImage.9arg.sourcepos</p>
2762 <canvas id="c105" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2763 <script>
2764
2765
2766 function test_2d_drawImage_9arg_sourcepos() {
2767
2768 var canvas = document.getElementById('c105');
2769 var ctx = canvas.getContext('2d');
2770
2771 ctx.fillStyle = '#f00';
2772 ctx.fillRect(0, 0, 100, 50);
2773 ctx.drawImage(document.getElementById('rgrg-256x256_1.png'), 140, 20, 100, 50, 0, 0, 100, 50);
2774 isPixel(ctx, 0,0, 0,255,0,255, 2);
2775 isPixel(ctx, 99,0, 0,255,0,255, 2);
2776 isPixel(ctx, 0,49, 0,255,0,255, 2);
2777 isPixel(ctx, 99,49, 0,255,0,255, 2);
2778
2779
2780 }
2781 </script>
2782 <img src="image_rgrg-256x256.png" id="rgrg-256x256_1.png" class="resource">
2783
2784 <!-- [[[ test_2d.drawImage.9arg.sourcesize.html ]]] -->
2785
2786 <p>Canvas test: 2d.drawImage.9arg.sourcesize</p>
2787 <canvas id="c106" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2788 <script>
2789
2790
2791 function test_2d_drawImage_9arg_sourcesize() {
2792
2793 var canvas = document.getElementById('c106');
2794 var ctx = canvas.getContext('2d');
2795
2796 ctx.fillStyle = '#f00';
2797 ctx.fillRect(0, 0, 100, 50);
2798 ctx.drawImage(document.getElementById('rgrg-256x256_2.png'), 0, 0, 256, 256, 0, 0, 100, 50);
2799 ctx.fillStyle = '#0f0';
2800 ctx.fillRect(0, 0, 51, 26);
2801 ctx.fillRect(49, 24, 51, 26);
2802 isPixel(ctx, 0,0, 0,255,0,255, 3);
2803 isPixel(ctx, 99,0, 0,255,0,255, 3);
2804 isPixel(ctx, 0,49, 0,255,0,255, 3);
2805 isPixel(ctx, 99,49, 0,255,0,255, 3);
2806 isPixel(ctx, 20,20, 0,255,0,255, 3);
2807 isPixel(ctx, 80,20, 0,255,0,255, 3);
2808 isPixel(ctx, 20,30, 0,255,0,255, 3);
2809 isPixel(ctx, 80,30, 0,255,0,255, 3);
2810
2811
2812 }
2813 </script>
2814 <img src="image_rgrg-256x256.png" id="rgrg-256x256_2.png" class="resource">
2815
2816 <!-- [[[ test_2d.drawImage.alpha.html ]]] -->
2817
2818 <p>Canvas test: 2d.drawImage.alpha</p>
2819 <canvas id="c107" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2820 <script>
2821
2822
2823 function test_2d_drawImage_alpha() {
2824
2825 var canvas = document.getElementById('c107');
2826 var ctx = canvas.getContext('2d');
2827
2828 ctx.fillStyle = '#0f0';
2829 ctx.fillRect(0, 0, 100, 50);
2830 ctx.globalAlpha = 0;
2831 ctx.drawImage(document.getElementById('red_7.png'), 0, 0);
2832 isPixel(ctx, 50,25, 0,255,0,255, 2);
2833
2834
2835 }
2836 </script>
2837 <img src="image_red.png" id="red_7.png" class="resource">
2838
2839 <!-- [[[ test_2d.drawImage.animated.apng.html ]]] -->
2840
2841 <p>Canvas test: 2d.drawImage.animated.apng</p>
2842 <!-- Testing: drawImage() of an APNG with no poster frame draws the first frame -->
2843 <canvas id="c108" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2844 <script>
2845
2846
2847 function deferTest() {
2848     _deferred = true;
2849 }
2850 function wrapFunction(f) {
2851     return function () {
2852         f.apply(null, arguments);
2853     };
2854 }
2855
2856 var canvas108 = document.getElementById('c108');
2857 var ctx108 = canvas108.getContext('2d');
2858 var isDone_test_2d_drawImage_animated_apng = false;
2859
2860 function test_2d_drawImage_animated_apng() {
2861
2862 deferTest();
2863 setTimeout(wrapFunction(function () {
2864     ctx108.drawImage(document.getElementById('anim-gr_1.png'), 0, 0);
2865     isPixel(ctx108, 50,25, 0,255,0,255, 2);
2866         isDone_test_2d_drawImage_animated_apng = true;
2867 }), 5000);
2868
2869
2870 }
2871 </script>
2872 <img src="image_anim-gr.png" id="anim-gr_1.png" class="resource">
2873
2874 <!-- [[[ test_2d.drawImage.animated.gif.html ]]] -->
2875
2876 <p>Canvas test: 2d.drawImage.animated.gif</p>
2877 <!-- Testing: drawImage() of an animated GIF draws the first frame -->
2878 <canvas id="c109" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2879 <script>
2880
2881 var canvas109 = document.getElementById('c109');
2882 var ctx109 = canvas109.getContext('2d');
2883 var isDone_test_2d_drawImage_animated_gif = false;
2884
2885 function test_2d_drawImage_animated_gif() {
2886
2887 deferTest();
2888 setTimeout(wrapFunction(function () {
2889     ctx109.drawImage(document.getElementById('anim-gr_1.gif'), 0, 0);
2890     isPixel(ctx109, 50,25, 0,255,0,255, 2);
2891         isDone_test_2d_drawImage_animated_gif = true;
2892 }), 5000);
2893
2894
2895 }
2896 </script>
2897 <img src="image_anim-gr.gif" id="anim-gr_1.gif" class="resource">
2898
2899 <!-- [[[ test_2d.drawImage.animated.poster.html ]]] -->
2900
2901 <p>Canvas test: 2d.drawImage.animated.poster</p>
2902 <!-- Testing: drawImage() of an APNG draws the poster frame -->
2903 <canvas id="c110" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2904 <script>
2905
2906 var canvas110 = document.getElementById('c110');
2907 var ctx110 = canvas110.getContext('2d');
2908
2909
2910 function test_2d_drawImage_animated_poster() {
2911
2912 ctx110.drawImage(document.getElementById('anim-poster-gr_1.png'), 0, 0);
2913 todo_isPixel(ctx110, 50,25, 0,255,0,255, 2);
2914
2915
2916 }
2917 </script>
2918 <img src="image_anim-poster-gr.png" id="anim-poster-gr_1.png" class="resource">
2919
2920 <!-- [[[ test_2d.drawImage.broken.html ]]] -->
2921
2922 <p>Canvas test: 2d.drawImage.broken</p>
2923 <canvas id="c111" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2924 <script>
2925
2926 function test_2d_drawImage_broken() {
2927
2928 var canvas = document.getElementById('c111');
2929 var ctx = canvas.getContext('2d');
2930
2931 var img = document.getElementById('broken_1.png');
2932 todo(img.complete === false, "img.complete === false");
2933 var _thrown = undefined; try {
2934   ctx.drawImage(img, 0, 0);
2935 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
2936
2937
2938 }
2939 </script>
2940 <img src="image_broken.png" id="broken_1.png" class="resource">
2941
2942 <!-- [[[ test_2d.drawImage.canvas.html ]]] -->
2943
2944 <p>Canvas test: 2d.drawImage.canvas</p>
2945 <canvas id="c112" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2946 <script>
2947
2948
2949 function test_2d_drawImage_canvas() {
2950
2951 var canvas = document.getElementById('c112');
2952 var ctx = canvas.getContext('2d');
2953
2954 var canvas2 = document.createElement('canvas');
2955 canvas2.width = 100;
2956 canvas2.height = 50;
2957 var ctx2 = canvas2.getContext('2d');
2958 ctx2.fillStyle = '#0f0';
2959 ctx2.fillRect(0, 0, 100, 50);
2960
2961 ctx.fillStyle = '#f00';
2962 ctx.drawImage(canvas2, 0, 0);
2963
2964 isPixel(ctx, 0,0, 0,255,0,255, 2);
2965 isPixel(ctx, 99,0, 0,255,0,255, 2);
2966 isPixel(ctx, 0,49, 0,255,0,255, 2);
2967 isPixel(ctx, 99,49, 0,255,0,255, 2);
2968
2969
2970 }
2971 </script>
2972
2973 <!-- [[[ test_2d.drawImage.clip.html ]]] -->
2974
2975 <p>Canvas test: 2d.drawImage.clip</p>
2976 <canvas id="c113" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
2977 <script>
2978
2979
2980 function test_2d_drawImage_clip() {
2981
2982 var canvas = document.getElementById('c113');
2983 var ctx = canvas.getContext('2d');
2984
2985 ctx.fillStyle = '#0f0';
2986 ctx.fillRect(0, 0, 100, 50);
2987 ctx.rect(-10, -10, 1, 1);
2988 ctx.clip();
2989 ctx.drawImage(document.getElementById('red_8.png'), 0, 0);
2990 isPixel(ctx, 50,25, 0,255,0,255, 2);
2991
2992
2993 }
2994 </script>
2995 <img src="image_red.png" id="red_8.png" class="resource">
2996
2997 <!-- [[[ test_2d.drawImage.composite.html ]]] -->
2998
2999 <p>Canvas test: 2d.drawImage.composite</p>
3000 <canvas id="c114" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3001 <script>
3002
3003
3004 function test_2d_drawImage_composite() {
3005
3006 var canvas = document.getElementById('c114');
3007 var ctx = canvas.getContext('2d');
3008
3009 ctx.fillStyle = '#0f0';
3010 ctx.fillRect(0, 0, 100, 50);
3011 ctx.globalCompositeOperation = 'destination-over';
3012 ctx.drawImage(document.getElementById('red_9.png'), 0, 0);
3013 isPixel(ctx, 50,25, 0,255,0,255, 2);
3014
3015
3016 }
3017 </script>
3018 <img src="image_red.png" id="red_9.png" class="resource">
3019
3020 <!-- [[[ test_2d.drawImage.floatsource.html ]]] -->
3021
3022 <p>Canvas test: 2d.drawImage.floatsource</p>
3023 <canvas id="c115" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3024 <script>
3025
3026
3027 function test_2d_drawImage_floatsource() {
3028
3029 var canvas = document.getElementById('c115');
3030 var ctx = canvas.getContext('2d');
3031
3032 ctx.drawImage(document.getElementById('green_6.png'), 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50);
3033 isPixel(ctx, 50,25, 0,255,0,255, 2);
3034
3035
3036 }
3037 </script>
3038 <img src="image_green.png" id="green_6.png" class="resource">
3039
3040 <!-- [[[ test_2d.drawImage.incomplete.html ]]] -->
3041
3042 <p>Canvas test: 2d.drawImage.incomplete</p>
3043 <canvas id="c116" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3044 <script>
3045
3046 function test_2d_drawImage_incomplete() {
3047
3048 var canvas = document.getElementById('c116');
3049 var ctx = canvas.getContext('2d');
3050
3051 var img = new Image();
3052 todo(img.complete === false, "img.complete === false");
3053 var _thrown = undefined; try {
3054   ctx.drawImage(img, 0, 0);
3055 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
3056
3057
3058 }
3059 </script>
3060
3061 <!-- [[[ test_2d.drawImage.negativedest.html ]]] -->
3062
3063 <p>Canvas test: 2d.drawImage.negativedest</p>
3064 <canvas id="c117" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3065 <script>
3066
3067
3068 function test_2d_drawImage_negativedest() {
3069
3070 var canvas = document.getElementById('c117');
3071 var ctx = canvas.getContext('2d');
3072
3073 var _thrown_outer = false;
3074 try {
3075
3076 ctx.fillStyle = '#f00';
3077 ctx.fillRect(0, 0, 100, 50);
3078 ctx.drawImage(document.getElementById('ggrr-256x256_1.png'), 100, 78, 50, 50, 0, 50, 50, -50);
3079 ctx.drawImage(document.getElementById('ggrr-256x256_1.png'), 100, 128, 50, -50, 100, 50, -50, -50);
3080 isPixel(ctx, 1,1, 0,255,0,255, 2);
3081 isPixel(ctx, 1,48, 0,255,0,255, 2);
3082 isPixel(ctx, 98,1, 0,255,0,255, 2);
3083 isPixel(ctx, 98,48, 0,255,0,255, 2);
3084 isPixel(ctx, 48,1, 0,255,0,255, 2);
3085 isPixel(ctx, 48,48, 0,255,0,255, 2);
3086 isPixel(ctx, 51,1, 0,255,0,255, 2);
3087 isPixel(ctx, 51,48, 0,255,0,255, 2);
3088 isPixel(ctx, 25,25, 0,255,0,255, 2);
3089 isPixel(ctx, 75,25, 0,255,0,255, 2);
3090
3091 } catch (e) {
3092     _thrown_outer = true;
3093 }
3094 ok(!_thrown_outer, 'should not throw exception');
3095
3096
3097 }
3098 </script>
3099 <img src="image_ggrr-256x256.png" id="ggrr-256x256_1.png" class="resource">
3100
3101 <!-- [[[ test_2d.drawImage.negativesource.html ]]] -->
3102
3103 <p>Canvas test: 2d.drawImage.negativesource</p>
3104 <canvas id="c118" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3105 <script>
3106
3107
3108 function test_2d_drawImage_negativesource() {
3109
3110 var canvas = document.getElementById('c118');
3111 var ctx = canvas.getContext('2d');
3112
3113 var _thrown_outer = false;
3114 try {
3115
3116 ctx.fillStyle = '#f00';
3117 ctx.fillRect(0, 0, 100, 50);
3118 ctx.drawImage(document.getElementById('ggrr-256x256_2.png'), 100, 78, -100, 50, 0, 0, 50, 50);
3119 ctx.drawImage(document.getElementById('ggrr-256x256_2.png'), 100, 128, -100, -50, 50, 0, 50, 50);
3120 isPixel(ctx, 1,1, 0,255,0,255, 2);
3121 isPixel(ctx, 1,48, 0,255,0,255, 2);
3122 isPixel(ctx, 98,1, 0,255,0,255, 2);
3123 isPixel(ctx, 98,48, 0,255,0,255, 2);
3124 isPixel(ctx, 48,1, 0,255,0,255, 2);
3125 isPixel(ctx, 48,48, 0,255,0,255, 2);
3126 isPixel(ctx, 51,1, 0,255,0,255, 2);
3127 isPixel(ctx, 51,48, 0,255,0,255, 2);
3128 isPixel(ctx, 25,25, 0,255,0,255, 2);
3129 isPixel(ctx, 75,25, 0,255,0,255, 2);
3130
3131 } catch (e) {
3132     _thrown_outer = true;
3133 }
3134 ok(!_thrown_outer, 'should not throw exception');
3135
3136
3137 }
3138 </script>
3139 <img src="image_ggrr-256x256.png" id="ggrr-256x256_2.png" class="resource">
3140
3141 <!-- [[[ test_2d.drawImage.nonfinite.html ]]] -->
3142
3143 <p>Canvas test: 2d.drawImage.nonfinite</p>
3144 <!-- Testing: drawImage() with Infinity/NaN is ignored -->
3145 <canvas id="c119" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3146 <script>
3147
3148
3149 function test_2d_drawImage_nonfinite() {
3150
3151 var canvas = document.getElementById('c119');
3152 var ctx = canvas.getContext('2d');
3153
3154 var _thrown_outer = false;
3155
3156 try {
3157
3158 ctx.fillStyle = '#0f0';
3159 ctx.fillRect(0, 0, 100, 50);
3160 var red = document.getElementById('red_10.png');
3161 ctx.drawImage(red, Infinity, 0);
3162 ctx.drawImage(red, -Infinity, 0);
3163 ctx.drawImage(red, NaN, 0);
3164 ctx.drawImage(red, 0, Infinity);
3165 ctx.drawImage(red, 0, -Infinity);
3166 ctx.drawImage(red, 0, NaN);
3167 ctx.drawImage(red, Infinity, Infinity);
3168 ctx.drawImage(red, Infinity, 0, 100, 50);
3169 ctx.drawImage(red, -Infinity, 0, 100, 50);
3170 ctx.drawImage(red, NaN, 0, 100, 50);
3171 ctx.drawImage(red, 0, Infinity, 100, 50);
3172 ctx.drawImage(red, 0, -Infinity, 100, 50);
3173 ctx.drawImage(red, 0, NaN, 100, 50);
3174 ctx.drawImage(red, 0, 0, Infinity, 50);
3175 ctx.drawImage(red, 0, 0, -Infinity, 50);
3176 ctx.drawImage(red, 0, 0, NaN, 50);
3177 ctx.drawImage(red, 0, 0, 100, Infinity);
3178 ctx.drawImage(red, 0, 0, 100, -Infinity);
3179 ctx.drawImage(red, 0, 0, 100, NaN);
3180 ctx.drawImage(red, Infinity, Infinity, 100, 50);
3181 ctx.drawImage(red, Infinity, Infinity, Infinity, 50);
3182 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity);
3183 ctx.drawImage(red, Infinity, Infinity, 100, Infinity);
3184 ctx.drawImage(red, Infinity, 0, Infinity, 50);
3185 ctx.drawImage(red, Infinity, 0, Infinity, Infinity);
3186 ctx.drawImage(red, Infinity, 0, 100, Infinity);
3187 ctx.drawImage(red, 0, Infinity, Infinity, 50);
3188 ctx.drawImage(red, 0, Infinity, Infinity, Infinity);
3189 ctx.drawImage(red, 0, Infinity, 100, Infinity);
3190 ctx.drawImage(red, 0, 0, Infinity, Infinity);
3191 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, 100, 50);
3192 ctx.drawImage(red, -Infinity, 0, 100, 50, 0, 0, 100, 50);
3193 ctx.drawImage(red, NaN, 0, 100, 50, 0, 0, 100, 50);
3194 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, 100, 50);
3195 ctx.drawImage(red, 0, -Infinity, 100, 50, 0, 0, 100, 50);
3196 ctx.drawImage(red, 0, NaN, 100, 50, 0, 0, 100, 50);
3197 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, 100, 50);
3198 ctx.drawImage(red, 0, 0, -Infinity, 50, 0, 0, 100, 50);
3199 ctx.drawImage(red, 0, 0, NaN, 50, 0, 0, 100, 50);
3200 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, 100, 50);
3201 ctx.drawImage(red, 0, 0, 100, -Infinity, 0, 0, 100, 50);
3202 ctx.drawImage(red, 0, 0, 100, NaN, 0, 0, 100, 50);
3203 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, 100, 50);
3204 ctx.drawImage(red, 0, 0, 100, 50, -Infinity, 0, 100, 50);
3205 ctx.drawImage(red, 0, 0, 100, 50, NaN, 0, 100, 50);
3206 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, 100, 50);
3207 ctx.drawImage(red, 0, 0, 100, 50, 0, -Infinity, 100, 50);
3208 ctx.drawImage(red, 0, 0, 100, 50, 0, NaN, 100, 50);
3209 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, Infinity, 50);
3210 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, -Infinity, 50);
3211 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, NaN, 50);
3212 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, Infinity);
3213 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, -Infinity);
3214 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, 100, NaN);
3215 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, 100, 50);
3216 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, 100, 50);
3217 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, 50);
3218 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, 50);
3219 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50);
3220 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
3221 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
3222 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
3223 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50);
3224 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
3225 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity);
3226 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, 50);
3227 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50);
3228 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
3229 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity);
3230 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, 50);
3231 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity);
3232 ctx.drawImage(red, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, Infinity);
3233 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, 50);
3234 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, 50);
3235 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50);
3236 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
3237 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity);
3238 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, 50);
3239 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity);
3240 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, Infinity);
3241 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, 50);
3242 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, 50);
3243 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity);
3244 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, Infinity);
3245 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, 50);
3246 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, Infinity);
3247 ctx.drawImage(red, Infinity, Infinity, Infinity, 50, 0, 0, 100, Infinity);
3248 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, 100, 50);
3249 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, 50);
3250 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, 50);
3251 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50);
3252 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
3253 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity);
3254 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, 50);
3255 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity);
3256 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, Infinity);
3257 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, 50);
3258 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, 50);
3259 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity);
3260 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, Infinity);
3261 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, 50);
3262 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, Infinity);
3263 ctx.drawImage(red, Infinity, Infinity, 100, Infinity, 0, 0, 100, Infinity);
3264 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, 100, 50);
3265 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, 50);
3266 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, 50);
3267 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity);
3268 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, Infinity);
3269 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, 50);
3270 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, Infinity);
3271 ctx.drawImage(red, Infinity, Infinity, 100, 50, Infinity, 0, 100, Infinity);
3272 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, 100, 50);
3273 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, 50);
3274 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, Infinity);
3275 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, Infinity, 100, Infinity);
3276 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, Infinity, 50);
3277 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, Infinity, Infinity);
3278 ctx.drawImage(red, Infinity, Infinity, 100, 50, 0, 0, 100, Infinity);
3279 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, 100, 50);
3280 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, 100, 50);
3281 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, 50);
3282 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, 50);
3283 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
3284 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
3285 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
3286 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, 50);
3287 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
3288 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, Infinity);
3289 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, 50);
3290 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, 50);
3291 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
3292 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, Infinity);
3293 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, 50);
3294 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, Infinity);
3295 ctx.drawImage(red, Infinity, 0, Infinity, Infinity, 0, 0, 100, Infinity);
3296 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, 100, 50);
3297 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, 50);
3298 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, 50);
3299 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
3300 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, Infinity);
3301 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, 50);
3302 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, Infinity);
3303 ctx.drawImage(red, Infinity, 0, Infinity, 50, Infinity, 0, 100, Infinity);
3304 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, 100, 50);
3305 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, 50);
3306 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, Infinity);
3307 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, Infinity, 100, Infinity);
3308 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, Infinity, 50);
3309 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, Infinity, Infinity);
3310 ctx.drawImage(red, Infinity, 0, Infinity, 50, 0, 0, 100, Infinity);
3311 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, 100, 50);
3312 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, 100, 50);
3313 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, 50);
3314 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, 50);
3315 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
3316 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, Infinity);
3317 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, 50);
3318 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, Infinity);
3319 ctx.drawImage(red, Infinity, 0, 100, Infinity, Infinity, 0, 100, Infinity);
3320 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, 100, 50);
3321 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, 50);
3322 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, Infinity);
3323 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, Infinity, 100, Infinity);
3324 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, Infinity, 50);
3325 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, Infinity, Infinity);
3326 ctx.drawImage(red, Infinity, 0, 100, Infinity, 0, 0, 100, Infinity);
3327 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, 100, 50);
3328 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, 100, 50);
3329 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, 50);
3330 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, Infinity);
3331 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, Infinity, 100, Infinity);
3332 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, Infinity, 50);
3333 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, Infinity, Infinity);
3334 ctx.drawImage(red, Infinity, 0, 100, 50, Infinity, 0, 100, Infinity);
3335 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, 100, 50);
3336 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, Infinity, 50);
3337 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, Infinity, Infinity);
3338 ctx.drawImage(red, Infinity, 0, 100, 50, 0, Infinity, 100, Infinity);
3339 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, Infinity, 50);
3340 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, Infinity, Infinity);
3341 ctx.drawImage(red, Infinity, 0, 100, 50, 0, 0, 100, Infinity);
3342 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, 100, 50);
3343 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, 100, 50);
3344 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, 50);
3345 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50);
3346 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
3347 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
3348 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
3349 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50);
3350 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
3351 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity);
3352 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, 50);
3353 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50);
3354 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
3355 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity);
3356 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, 50);
3357 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity);
3358 ctx.drawImage(red, 0, Infinity, Infinity, Infinity, 0, 0, 100, Infinity);
3359 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, 100, 50);
3360 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, 50);
3361 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50);
3362 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
3363 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity);
3364 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, 50);
3365 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity);
3366 ctx.drawImage(red, 0, Infinity, Infinity, 50, Infinity, 0, 100, Infinity);
3367 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, 100, 50);
3368 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, 50);
3369 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity);
3370 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, Infinity, 100, Infinity);
3371 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, Infinity, 50);
3372 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, Infinity, Infinity);
3373 ctx.drawImage(red, 0, Infinity, Infinity, 50, 0, 0, 100, Infinity);
3374 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, 100, 50);
3375 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, 100, 50);
3376 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, 50);
3377 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50);
3378 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
3379 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity);
3380 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, 50);
3381 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity);
3382 ctx.drawImage(red, 0, Infinity, 100, Infinity, Infinity, 0, 100, Infinity);
3383 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, 100, 50);
3384 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, 50);
3385 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity);
3386 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, Infinity, 100, Infinity);
3387 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, Infinity, 50);
3388 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, Infinity, Infinity);
3389 ctx.drawImage(red, 0, Infinity, 100, Infinity, 0, 0, 100, Infinity);
3390 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, 100, 50);
3391 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, 100, 50);
3392 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, 50);
3393 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity);
3394 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, Infinity, 100, Infinity);
3395 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, Infinity, 50);
3396 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, Infinity, Infinity);
3397 ctx.drawImage(red, 0, Infinity, 100, 50, Infinity, 0, 100, Infinity);
3398 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, 100, 50);
3399 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, Infinity, 50);
3400 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, Infinity, Infinity);
3401 ctx.drawImage(red, 0, Infinity, 100, 50, 0, Infinity, 100, Infinity);
3402 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, Infinity, 50);
3403 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, Infinity, Infinity);
3404 ctx.drawImage(red, 0, Infinity, 100, 50, 0, 0, 100, Infinity);
3405 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, 100, 50);
3406 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, 100, 50);
3407 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, 50);
3408 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
3409 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
3410 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
3411 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, 50);
3412 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
3413 ctx.drawImage(red, 0, 0, Infinity, Infinity, Infinity, 0, 100, Infinity);
3414 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, 100, 50);
3415 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, 50);
3416 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
3417 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, Infinity, 100, Infinity);
3418 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, Infinity, 50);
3419 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, Infinity, Infinity);
3420 ctx.drawImage(red, 0, 0, Infinity, Infinity, 0, 0, 100, Infinity);
3421 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, 100, 50);
3422 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, 100, 50);
3423 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, 50);
3424 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
3425 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, Infinity, 100, Infinity);
3426 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, Infinity, 50);
3427 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, Infinity, Infinity);
3428 ctx.drawImage(red, 0, 0, Infinity, 50, Infinity, 0, 100, Infinity);
3429 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, 100, 50);
3430 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, Infinity, 50);
3431 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, Infinity, Infinity);
3432 ctx.drawImage(red, 0, 0, Infinity, 50, 0, Infinity, 100, Infinity);
3433 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, Infinity, 50);
3434 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, Infinity, Infinity);
3435 ctx.drawImage(red, 0, 0, Infinity, 50, 0, 0, 100, Infinity);
3436 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, 100, 50);
3437 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, 100, 50);
3438 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, 50);
3439 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
3440 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, Infinity, 100, Infinity);
3441 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, Infinity, 50);
3442 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, Infinity, Infinity);
3443 ctx.drawImage(red, 0, 0, 100, Infinity, Infinity, 0, 100, Infinity);
3444 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, 100, 50);
3445 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, Infinity, 50);
3446 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, Infinity, Infinity);
3447 ctx.drawImage(red, 0, 0, 100, Infinity, 0, Infinity, 100, Infinity);
3448 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, Infinity, 50);
3449 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, Infinity, Infinity);
3450 ctx.drawImage(red, 0, 0, 100, Infinity, 0, 0, 100, Infinity);
3451 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, 100, 50);
3452 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, Infinity, 50);
3453 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, Infinity, Infinity);
3454 ctx.drawImage(red, 0, 0, 100, 50, Infinity, Infinity, 100, Infinity);
3455 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, Infinity, 50);
3456 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, Infinity, Infinity);
3457 ctx.drawImage(red, 0, 0, 100, 50, Infinity, 0, 100, Infinity);
3458 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, Infinity, 50);
3459 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, Infinity, Infinity);
3460 ctx.drawImage(red, 0, 0, 100, 50, 0, Infinity, 100, Infinity);
3461 ctx.drawImage(red, 0, 0, 100, 50, 0, 0, Infinity, Infinity);
3462 isPixel(ctx, 50,25, 0,255,0,255, 0);
3463
3464 } catch (e) {
3465     _thrown_outer = true;
3466 }
3467 ok(!_thrown_outer, 'should not throw exception');
3468
3469
3470 }
3471 </script>
3472 <img src="image_red.png" id="red_10.png" class="resource">
3473
3474 <!-- [[[ test_2d.drawImage.nowrap.html ]]] -->
3475
3476 <p>Canvas test: 2d.drawImage.nowrap</p>
3477 <!-- Testing: Stretched images do not get pixels wrapping around the edges -->
3478 <canvas id="c120" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3479 <script>
3480
3481
3482 function test_2d_drawImage_nowrap() {
3483
3484 var canvas = document.getElementById('c120');
3485 var ctx = canvas.getContext('2d');
3486
3487 ctx.fillStyle = '#0f0';
3488 ctx.fillRect(0, 0, 100, 50);
3489 ctx.drawImage(document.getElementById('redtransparent_1.png'), -1950, 0, 2000, 50);
3490 isPixel(ctx, 45,25, 0,255,0,255, 2);
3491 isPixel(ctx, 50,25, 0,255,0,255, 2);
3492 isPixel(ctx, 55,25, 0,255,0,255, 2);
3493
3494
3495 }
3496 </script>
3497 <img src="image_redtransparent.png" id="redtransparent_1.png" class="resource">
3498
3499 <!-- [[[ test_2d.drawImage.null.html ]]] -->
3500
3501 <p>Canvas test: 2d.drawImage.null</p>
3502 <canvas id="c121" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3503 <script>
3504
3505 function test_2d_drawImage_null() {
3506
3507 var canvas = document.getElementById('c121');
3508 var ctx = canvas.getContext('2d');
3509
3510 var _thrown = undefined; try {
3511   ctx.drawImage(null, 0, 0);
3512 } catch (e) { _thrown = e };
3513
3514 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
3515
3516 }
3517 </script>
3518
3519 <!-- [[[ test_2d.drawImage.path.html ]]] -->
3520
3521 <p>Canvas test: 2d.drawImage.path</p>
3522 <canvas id="c123" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3523 <script>
3524
3525
3526 function test_2d_drawImage_path() {
3527
3528 var canvas = document.getElementById('c123');
3529 var ctx = canvas.getContext('2d');
3530
3531 ctx.fillStyle = '#0f0';
3532 ctx.rect(0, 0, 100, 50);
3533 ctx.drawImage(document.getElementById('red_12.png'), 0, 0);
3534 ctx.fill();
3535 isPixel(ctx, 50,25, 0,255,0,255, 2);
3536
3537
3538 }
3539 </script>
3540 <img src="image_red.png" id="red_12.png" class="resource">
3541
3542 <!-- [[[ test_2d.drawImage.self.1.html ]]] -->
3543
3544 <p>Canvas test: 2d.drawImage.self.1 - bug 433235</p>
3545 <canvas id="c124" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3546 <script>
3547
3548
3549 function test_2d_drawImage_self_1() {
3550
3551 var canvas = document.getElementById('c124');
3552 var ctx = canvas.getContext('2d');
3553
3554 ctx.fillStyle = '#0f0';
3555 ctx.fillRect(0, 0, 50, 50);
3556 ctx.fillStyle = '#f00';
3557 ctx.fillRect(50, 0, 50, 50);
3558 ctx.drawImage(canvas, 50, 0);
3559
3560 isPixel(ctx, 0,0, 0,255,0,255, 2);
3561 isPixel(ctx, 99,0, 0,255,0,255, 2);
3562 isPixel(ctx, 0,49, 0,255,0,255, 2);
3563 isPixel(ctx, 99,49, 0,255,0,255, 2);
3564
3565
3566 }
3567 </script>
3568
3569 <!-- [[[ test_2d.drawImage.self.2.html ]]] -->
3570
3571 <p>Canvas test: 2d.drawImage.self.2 - bug 433235</p>
3572 <canvas id="c125" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3573 <script>
3574
3575
3576 function test_2d_drawImage_self_2() {
3577
3578 var canvas = document.getElementById('c125');
3579 var ctx = canvas.getContext('2d');
3580
3581 ctx.fillStyle = '#0f0';
3582 ctx.fillRect(0, 1, 100, 49);
3583 ctx.fillStyle = '#f00';
3584 ctx.fillRect(0, 0, 100, 1);
3585 ctx.drawImage(canvas, 0, 1);
3586 ctx.fillStyle = '#0f0';
3587 ctx.fillRect(0, 0, 100, 2);
3588
3589 isPixel(ctx, 0,0, 0,255,0,255, 2);
3590 isPixel(ctx, 99,0, 0,255,0,255, 2);
3591 isPixel(ctx, 0,49, 0,255,0,255, 2);
3592 isPixel(ctx, 99,49, 0,255,0,255, 2);
3593
3594
3595 }
3596 </script>
3597
3598 <!-- [[[ test_2d.drawImage.transform.html ]]] -->
3599
3600 <p>Canvas test: 2d.drawImage.transform</p>
3601 <canvas id="c126" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3602 <script>
3603
3604
3605 function test_2d_drawImage_transform() {
3606
3607 var canvas = document.getElementById('c126');
3608 var ctx = canvas.getContext('2d');
3609
3610 ctx.fillStyle = '#0f0';
3611 ctx.fillRect(0, 0, 100, 50);
3612 ctx.translate(100, 0);
3613 ctx.drawImage(document.getElementById('red_13.png'), 0, 0);
3614 isPixel(ctx, 50,25, 0,255,0,255, 2);
3615
3616
3617 }
3618 </script>
3619 <img src="image_red.png" id="red_13.png" class="resource">
3620
3621 <!-- [[[ test_2d.drawImage.wrongtype.html ]]] -->
3622
3623 <p>Canvas test: 2d.drawImage.wrongtype</p>
3624 <canvas id="c127" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3625 <script>
3626
3627 function test_2d_drawImage_wrongtype() {
3628
3629 var canvas = document.getElementById('c127');
3630 var ctx = canvas.getContext('2d');
3631
3632 var _thrown = undefined; try {
3633   ctx.drawImage(undefined, 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(0, 0, 0);
3639 } catch (e) { _thrown = e };
3640 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
3641
3642 var _thrown = undefined; try {
3643   ctx.drawImage("", 0, 0);
3644 } catch (e) { _thrown = e };
3645 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
3646
3647 var _thrown = undefined; try {
3648   ctx.drawImage(document.createElement('p'), 0, 0);
3649 } catch (e) { _thrown = e };
3650 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
3651
3652 }
3653 </script>
3654
3655 <!-- [[[ test_2d.drawImage.zerosource.html ]]] -->
3656
3657 <p>Canvas test: 2d.drawImage.zerosource</p>
3658 <!-- Testing: drawImage with zero-sized source rectangle does nothing -->
3659 <canvas id="c128" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3660 <script>
3661
3662
3663 function test_2d_drawImage_zerosource() {
3664
3665 var canvas = document.getElementById('c128');
3666 var ctx = canvas.getContext('2d');
3667
3668 ctx.fillStyle = '#0f0';
3669 ctx.fillRect(0, 0, 100, 50);
3670 ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 1, 0, 0, 100, 50);
3671 ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 1, 0, 0, 0, 100, 50);
3672 ctx.drawImage(document.getElementById('red_14.png'), 10, 10, 0, 0, 0, 0, 100, 50);
3673 isPixel(ctx, 50,25, 0,255,0,255, 2);
3674
3675
3676 }
3677 </script>
3678 <img src="image_red.png" id="red_14.png" class="resource">
3679
3680 <!-- [[[ test_2d.fillRect.basic.html ]]] -->
3681
3682 <p>Canvas test: 2d.fillRect.basic</p>
3683 <canvas id="c129" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
3684 <script>
3685
3686
3687 function test_2d_fillRect_basic() {
3688
3689 var canvas = document.getElementById('c129');
3690 var ctx = canvas.getContext('2d');
3691
3692 ctx.fillStyle = '#0f0';
3693 ctx.fillRect(0, 0, 100, 50);
3694 isPixel(ctx, 50,25, 0,255,0,255, 0);
3695
3696
3697 }
3698 </script>
3699
3700 <!-- [[[ test_2d.fillRect.clip.html ]]] -->
3701
3702 <p>Canvas test: 2d.fillRect.clip</p>
3703 <canvas id="c130" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3704 <script>
3705
3706
3707 function test_2d_fillRect_clip() {
3708
3709 var canvas = document.getElementById('c130');
3710 var ctx = canvas.getContext('2d');
3711
3712 ctx.fillStyle = '#0f0';
3713 ctx.fillRect(0, 0, 100, 50);
3714
3715 ctx.beginPath();
3716 ctx.rect(0, 0, 16, 16);
3717 ctx.clip();
3718
3719 ctx.fillStyle = '#f00';
3720 ctx.fillRect(0, 0, 100, 50);
3721
3722 ctx.fillStyle = '#0f0';
3723 ctx.fillRect(0, 0, 16, 16);
3724
3725 isPixel(ctx, 50,25, 0,255,0,255, 0);
3726
3727
3728 }
3729 </script>
3730
3731 <!-- [[[ test_2d.fillRect.negative.html ]]] -->
3732
3733 <p>Canvas test: 2d.fillRect.negative</p>
3734 <canvas id="c131" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3735 <script>
3736
3737
3738 function test_2d_fillRect_negative() {
3739
3740 var canvas = document.getElementById('c131');
3741 var ctx = canvas.getContext('2d');
3742
3743 ctx.fillStyle = '#f00';
3744 ctx.fillRect(0, 0, 100, 50);
3745 ctx.fillStyle = '#0f0';
3746 ctx.fillRect(0, 0, 50, 25);
3747 ctx.fillRect(100, 0, -50, 25);
3748 ctx.fillRect(0, 50, 50, -25);
3749 ctx.fillRect(100, 50, -50, -25);
3750 isPixel(ctx, 25,12, 0,255,0,255, 0);
3751 isPixel(ctx, 75,12, 0,255,0,255, 0);
3752 isPixel(ctx, 25,37, 0,255,0,255, 0);
3753 isPixel(ctx, 75,37, 0,255,0,255, 0);
3754
3755
3756 }
3757 </script>
3758
3759 <!-- [[[ test_2d.fillRect.nonfinite.html ]]] -->
3760
3761 <p>Canvas test: 2d.fillRect.nonfinite</p>
3762 <!-- Testing: fillRect() with Infinity/NaN is ignored -->
3763 <canvas id="c132" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3764 <script>
3765
3766
3767 function test_2d_fillRect_nonfinite() {
3768
3769 var canvas = document.getElementById('c132');
3770 var ctx = canvas.getContext('2d');
3771
3772 var _thrown_outer = false;
3773 try {
3774
3775 ctx.fillStyle = '#0f0';
3776 ctx.fillRect(0, 0, 100, 50);
3777
3778 ctx.fillStyle = '#f00';
3779 ctx.fillRect(Infinity, 0, 100, 50);
3780 ctx.fillRect(-Infinity, 0, 100, 50);
3781 ctx.fillRect(NaN, 0, 100, 50);
3782 ctx.fillRect(0, Infinity, 100, 50);
3783 ctx.fillRect(0, -Infinity, 100, 50);
3784 ctx.fillRect(0, NaN, 100, 50);
3785 ctx.fillRect(0, 0, Infinity, 50);
3786 ctx.fillRect(0, 0, -Infinity, 50);
3787 ctx.fillRect(0, 0, NaN, 50);
3788 ctx.fillRect(0, 0, 100, Infinity);
3789 ctx.fillRect(0, 0, 100, -Infinity);
3790 ctx.fillRect(0, 0, 100, NaN);
3791 ctx.fillRect(Infinity, Infinity, 100, 50);
3792 ctx.fillRect(Infinity, Infinity, Infinity, 50);
3793 ctx.fillRect(Infinity, Infinity, Infinity, Infinity);
3794 ctx.fillRect(Infinity, Infinity, 100, Infinity);
3795 ctx.fillRect(Infinity, 0, Infinity, 50);
3796 ctx.fillRect(Infinity, 0, Infinity, Infinity);
3797 ctx.fillRect(Infinity, 0, 100, Infinity);
3798 ctx.fillRect(0, Infinity, Infinity, 50);
3799 ctx.fillRect(0, Infinity, Infinity, Infinity);
3800 ctx.fillRect(0, Infinity, 100, Infinity);
3801 ctx.fillRect(0, 0, Infinity, Infinity);
3802
3803 isPixel(ctx, 50,25, 0,255,0,255, 0);
3804
3805 } catch (e) {
3806     _thrown_outer = true;
3807 }
3808 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
3809
3810
3811 }
3812 </script>
3813
3814 <!-- [[[ test_2d.fillRect.path.html ]]] -->
3815
3816 <p>Canvas test: 2d.fillRect.path</p>
3817 <canvas id="c133" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
3818 <script>
3819
3820
3821 function test_2d_fillRect_path() {
3822
3823 var canvas = document.getElementById('c133');
3824 var ctx = canvas.getContext('2d');
3825
3826 ctx.beginPath();
3827 ctx.rect(0, 0, 100, 50);
3828 ctx.fillStyle = '#f00';
3829 ctx.fillRect(0, 0, 16, 16);
3830 ctx.fillStyle = '#0f0';
3831 ctx.fill();
3832 isPixel(ctx, 50,25, 0,255,0,255, 0);
3833
3834
3835 }
3836 </script>
3837
3838 <!-- [[[ test_2d.fillRect.shadow.html ]]] -->
3839
3840 <p>Canvas test: 2d.fillRect.shadow</p>
3841 <canvas id="c134" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3842 <script>
3843
3844
3845 function test_2d_fillRect_shadow() {
3846
3847 var canvas = document.getElementById('c134');
3848 var ctx = canvas.getContext('2d');
3849
3850 ctx.fillStyle = '#0f0';
3851 ctx.fillRect(0, 0, 100, 50);
3852
3853 ctx.fillStyle = '#f00';
3854 ctx.shadowBlur = 0;
3855 ctx.shadowOffsetX = 0;
3856 ctx.shadowOffsetY = 50;
3857
3858 // Shadows are optional, so just test that if they apply to fill() then they apply to fillRect() too
3859 ctx.beginPath();
3860 ctx.rect(0, -50, 100, 50);
3861 ctx.shadowColor = '#f00';
3862 ctx.fill();
3863
3864 ctx.shadowColor = '#0f0';
3865 ctx.fillRect(0, -50, 100, 50);
3866
3867 isPixel(ctx, 50,25, 0,255,0,255, 0);
3868
3869
3870 }
3871 </script>
3872
3873 <!-- [[[ test_2d.fillRect.transform.html ]]] -->
3874
3875 <p>Canvas test: 2d.fillRect.transform</p>
3876 <canvas id="c135" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
3877 <script>
3878
3879
3880 function test_2d_fillRect_transform() {
3881
3882 var canvas = document.getElementById('c135');
3883 var ctx = canvas.getContext('2d');
3884
3885 ctx.scale(10, 10);
3886 ctx.translate(0, 5);
3887 ctx.fillStyle = '#0f0';
3888 ctx.fillRect(0, -5, 10, 5);
3889 isPixel(ctx, 50,25, 0,255,0,255, 0);
3890
3891
3892 }
3893 </script>
3894
3895 <!-- [[[ test_2d.fillRect.zero.html ]]] -->
3896
3897 <p>Canvas test: 2d.fillRect.zero</p>
3898 <canvas id="c136" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3899 <script>
3900
3901
3902 function test_2d_fillRect_zero() {
3903
3904 var canvas = document.getElementById('c136');
3905 var ctx = canvas.getContext('2d');
3906
3907 ctx.fillStyle = '#0f0';
3908 ctx.fillRect(0, 0, 100, 50);
3909 ctx.fillStyle = '#f00';
3910 ctx.fillRect(0, 0, 100, 0);
3911 ctx.fillRect(0, 0, 0, 50);
3912 ctx.fillRect(0, 0, 0, 0);
3913 isPixel(ctx, 50,25, 0,255,0,255, 0);
3914
3915
3916 }
3917 </script>
3918
3919 <!-- [[[ test_2d.fillStyle.default.html ]]] -->
3920
3921 <p>Canvas test: 2d.fillStyle.default</p>
3922 <canvas id="c137" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3923 <script>
3924
3925 function test_2d_fillStyle_default() {
3926
3927 var canvas = document.getElementById('c137');
3928 var ctx = canvas.getContext('2d');
3929
3930 ok(ctx.fillStyle == '#000000', "ctx.fillStyle == '#000000'");
3931
3932
3933 }
3934 </script>
3935
3936 <!-- [[[ test_2d.fillStyle.get.semitransparent.html ]]] -->
3937
3938 <p>Canvas test: 2d.fillStyle.get.semitransparent</p>
3939 <canvas id="c138" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3940 <script>
3941
3942 function test_2d_fillStyle_get_semitransparent() {
3943
3944 var canvas = document.getElementById('c138');
3945 var ctx = canvas.getContext('2d');
3946
3947 ctx.fillStyle = 'rgba(255,255,255,0.45)';
3948 ok(/^rgba\(255, 255, 255, 0\.4\d+\)$/.test(ctx.fillStyle), "ctx.fillStyle =~ /^rgba\\(255, 255, 255, 0\\.4\\d+\\)$/");
3949
3950
3951 }
3952 </script>
3953
3954 <!-- [[[ test_2d.fillStyle.get.solid.html ]]] -->
3955
3956 <p>Canvas test: 2d.fillStyle.get.solid</p>
3957 <canvas id="c139" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3958 <script>
3959
3960 function test_2d_fillStyle_get_solid() {
3961
3962 var canvas = document.getElementById('c139');
3963 var ctx = canvas.getContext('2d');
3964
3965 ctx.fillStyle = '#fa0';
3966 ok(ctx.fillStyle === '#ffaa00', "ctx.fillStyle === '#ffaa00'");
3967
3968
3969 }
3970 </script>
3971
3972 <!-- [[[ test_2d.fillStyle.get.transparent.html ]]] -->
3973
3974 <p>Canvas test: 2d.fillStyle.get.transparent</p>
3975 <canvas id="c140" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3976 <script>
3977
3978 function test_2d_fillStyle_get_transparent() {
3979
3980 var canvas = document.getElementById('c140');
3981 var ctx = canvas.getContext('2d');
3982
3983 ctx.fillStyle = 'rgba(0,0,0,0)';
3984 is(ctx.fillStyle, 'rgba(0, 0, 0, 0)', "ctx.fillStyle should be what we set it to");
3985
3986
3987 }
3988 </script>
3989
3990 <!-- [[[ test_2d.fillStyle.invalidstring.html ]]] -->
3991
3992 <p>Canvas test: 2d.fillStyle.invalidstring</p>
3993 <canvas id="c141" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
3994 <script>
3995
3996
3997 function test_2d_fillStyle_invalidstring() {
3998
3999 var canvas = document.getElementById('c141');
4000 var ctx = canvas.getContext('2d');
4001
4002 ctx.fillStyle = '#f00';
4003 ctx.fillRect(0, 0, 100, 50);
4004 ctx.fillStyle = '#0f0';
4005 ctx.fillStyle = 'invalid';
4006 ctx.fillRect(0, 0, 100, 50);
4007 isPixel(ctx, 50,25, 0,255,0,255, 0);
4008
4009
4010 }
4011 </script>
4012
4013 <!-- [[[ test_2d.fillStyle.invalidtype.html ]]] -->
4014
4015 <p>Canvas test: 2d.fillStyle.invalidtype</p>
4016 <canvas id="c142" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4017 <script>
4018
4019
4020 function test_2d_fillStyle_invalidtype() {
4021
4022 var canvas = document.getElementById('c142');
4023 var ctx = canvas.getContext('2d');
4024
4025 ctx.fillStyle = '#f00';
4026 ctx.fillRect(0, 0, 100, 50);
4027 ctx.fillStyle = '#0f0';
4028 ctx.fillStyle = null;
4029 ctx.fillRect(0, 0, 100, 50);
4030 isPixel(ctx, 50,25, 0,255,0,255, 0);
4031
4032
4033 }
4034 </script>
4035
4036 <!-- [[[ test_2d.fillStyle.parse.current.basic.html ]]] -->
4037
4038 <p>Canvas test: 2d.fillStyle.parse.current.basic</p>
4039 <!-- Testing: currentColor is computed from the canvas element -->
4040 <canvas id="c143" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4041 <script>
4042
4043
4044
4045 function test_2d_fillStyle_parse_current_basic() {
4046
4047 var canvas = document.getElementById('c143');
4048 var ctx = canvas.getContext('2d');
4049
4050 canvas.setAttribute('style', 'color: #0f0');
4051 ctx.fillStyle = '#f00';
4052 ctx.fillStyle = 'currentColor';
4053 ctx.fillRect(0, 0, 100, 50);
4054 isPixel(ctx, 50,25, 0,255,0,255, 0);
4055
4056
4057 }
4058 </script>
4059
4060 <!-- [[[ test_2d.fillStyle.parse.current.changed.html ]]] -->
4061
4062 <p>Canvas test: 2d.fillStyle.parse.current.changed</p>
4063 <!-- Testing: currentColor is computed when the attribute is set, not when it is painted -->
4064 <canvas id="c144" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4065 <script>
4066
4067
4068
4069 function test_2d_fillStyle_parse_current_changed() {
4070
4071 var canvas = document.getElementById('c144');
4072 var ctx = canvas.getContext('2d');
4073
4074 canvas.setAttribute('style', 'color: #0f0');
4075 ctx.fillStyle = '#f00';
4076 ctx.fillStyle = 'currentColor';
4077 canvas.setAttribute('style', 'color: #f00');
4078 ctx.fillRect(0, 0, 100, 50);
4079 isPixel(ctx, 50,25, 0,255,0,255, 0);
4080
4081
4082 }
4083 </script>
4084
4085 <!-- [[[ test_2d.fillStyle.parse.current.removed.html ]]] -->
4086
4087 <p>Canvas test: 2d.fillStyle.parse.current.removed</p>
4088 <!-- Testing: currentColor is solid black when the canvas element is not in a document -->
4089 <canvas id="c145" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4090 <script>
4091
4092
4093
4094 function test_2d_fillStyle_parse_current_removed() {
4095
4096 var canvas = document.getElementById('c145');
4097 var ctx = canvas.getContext('2d');
4098
4099 // Try not to let it undetectably incorrectly pick up opaque-black
4100 // from other parts of the document:
4101 document.body.parentNode.setAttribute('style', 'color: #f00');
4102 document.body.setAttribute('style', 'color: #f00');
4103 canvas.setAttribute('style', 'color: #f00');
4104
4105 var canvas2 = document.createElement('canvas');
4106 var ctx2 = canvas2.getContext('2d');
4107 ctx2.fillStyle = '#f00';
4108 ctx2.fillStyle = 'currentColor';
4109 ctx2.fillRect(0, 0, 100, 50);
4110 ctx.drawImage(canvas2, 0, 0);
4111
4112 document.body.parentNode.removeAttribute('style');
4113 document.body.removeAttribute('style');
4114
4115 isPixel(ctx, 50,25, 0,0,0,255, 0);
4116
4117
4118 }
4119 </script>
4120
4121 <!-- [[[ test_2d.fillStyle.parse.hex3.html ]]] -->
4122
4123 <p>Canvas test: 2d.fillStyle.parse.hex3</p>
4124 <canvas id="c146" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4125 <script>
4126
4127
4128 function test_2d_fillStyle_parse_hex3() {
4129
4130 var canvas = document.getElementById('c146');
4131 var ctx = canvas.getContext('2d');
4132
4133
4134 ctx.fillStyle = '#f00';
4135 ctx.fillStyle = '#0f0';
4136 ctx.fillRect(0, 0, 100, 50);
4137 isPixel(ctx, 50,25, 0,255,0,255, 0);
4138
4139
4140 }
4141 </script>
4142
4143 <!-- [[[ test_2d.fillStyle.parse.hex6.html ]]] -->
4144
4145 <p>Canvas test: 2d.fillStyle.parse.hex6</p>
4146 <canvas id="c147" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4147 <script>
4148
4149
4150 function test_2d_fillStyle_parse_hex6() {
4151
4152 var canvas = document.getElementById('c147');
4153 var ctx = canvas.getContext('2d');
4154
4155
4156 ctx.fillStyle = '#f00';
4157 ctx.fillStyle = '#00fF00';
4158 ctx.fillRect(0, 0, 100, 50);
4159 isPixel(ctx, 50,25, 0,255,0,255, 0);
4160
4161
4162 }
4163 </script>
4164
4165 <!-- [[[ test_2d.fillStyle.parse.hsl-1.html ]]] -->
4166
4167 <p>Canvas test: 2d.fillStyle.parse.hsl-1</p>
4168 <canvas id="c148" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4169 <script>
4170
4171
4172 function test_2d_fillStyle_parse_hsl_1() {
4173
4174 var canvas = document.getElementById('c148');
4175 var ctx = canvas.getContext('2d');
4176
4177
4178 ctx.fillStyle = '#f00';
4179 ctx.fillStyle = 'hsl(120, 100%, 50%)';
4180 ctx.fillRect(0, 0, 100, 50);
4181 isPixel(ctx, 50,25, 0,255,0,255, 0);
4182
4183
4184 }
4185 </script>
4186
4187 <!-- [[[ test_2d.fillStyle.parse.hsl-2.html ]]] -->
4188
4189 <p>Canvas test: 2d.fillStyle.parse.hsl-2</p>
4190 <canvas id="c149" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4191 <script>
4192
4193
4194 function test_2d_fillStyle_parse_hsl_2() {
4195
4196 var canvas = document.getElementById('c149');
4197 var ctx = canvas.getContext('2d');
4198
4199
4200 ctx.fillStyle = '#f00';
4201 ctx.fillStyle = 'hsl( -240 , 100% , 50% )';
4202 ctx.fillRect(0, 0, 100, 50);
4203 isPixel(ctx, 50,25, 0,255,0,255, 0);
4204
4205
4206 }
4207 </script>
4208
4209 <!-- [[[ test_2d.fillStyle.parse.hsl-3.html ]]] -->
4210
4211 <p>Canvas test: 2d.fillStyle.parse.hsl-3</p>
4212 <canvas id="c150" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4213 <script>
4214
4215
4216 function test_2d_fillStyle_parse_hsl_3() {
4217
4218 var canvas = document.getElementById('c150');
4219 var ctx = canvas.getContext('2d');
4220
4221
4222 ctx.fillStyle = '#f00';
4223 ctx.fillStyle = 'hsl(360120, 100%, 50%)';
4224 ctx.fillRect(0, 0, 100, 50);
4225 isPixel(ctx, 50,25, 0,255,0,255, 0);
4226
4227
4228 }
4229 </script>
4230
4231 <!-- [[[ test_2d.fillStyle.parse.hsl-4.html ]]] -->
4232
4233 <p>Canvas test: 2d.fillStyle.parse.hsl-4</p>
4234 <canvas id="c151" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4235 <script>
4236
4237
4238 function test_2d_fillStyle_parse_hsl_4() {
4239
4240 var canvas = document.getElementById('c151');
4241 var ctx = canvas.getContext('2d');
4242
4243
4244 ctx.fillStyle = '#f00';
4245 ctx.fillStyle = 'hsl(-360240, 100%, 50%)';
4246 ctx.fillRect(0, 0, 100, 50);
4247 isPixel(ctx, 50,25, 0,255,0,255, 0);
4248
4249
4250 }
4251 </script>
4252
4253 <!-- [[[ test_2d.fillStyle.parse.hsl-5.html ]]] -->
4254
4255 <p>Canvas test: 2d.fillStyle.parse.hsl-5</p>
4256 <canvas id="c152" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4257 <script>
4258
4259
4260 function test_2d_fillStyle_parse_hsl_5() {
4261
4262 var canvas = document.getElementById('c152');
4263 var ctx = canvas.getContext('2d');
4264
4265
4266 ctx.fillStyle = '#f00';
4267 ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%)';
4268 ctx.fillRect(0, 0, 100, 50);
4269 isPixel(ctx, 50,25, 0,255,0,255, 0);
4270
4271
4272 }
4273 </script>
4274
4275 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-1.html ]]] -->
4276
4277 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-1</p>
4278 <canvas id="c153" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4279 <script>
4280
4281
4282 function test_2d_fillStyle_parse_hsl_clamp_1() {
4283
4284 var canvas = document.getElementById('c153');
4285 var ctx = canvas.getContext('2d');
4286
4287
4288 ctx.fillStyle = '#f00';
4289 ctx.fillStyle = 'hsl(120, 200%, 50%)';
4290 ctx.fillRect(0, 0, 100, 50);
4291 isPixel(ctx, 50,25, 0,255,0,255, 0);
4292
4293
4294 }
4295 </script>
4296
4297 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-2.html ]]] -->
4298
4299 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-2</p>
4300 <canvas id="c154" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4301 <script>
4302
4303
4304 function test_2d_fillStyle_parse_hsl_clamp_2() {
4305
4306 var canvas = document.getElementById('c154');
4307 var ctx = canvas.getContext('2d');
4308
4309
4310 ctx.fillStyle = '#f00';
4311 ctx.fillStyle = 'hsl(120, -200%, 49.9%)';
4312 ctx.fillRect(0, 0, 100, 50);
4313 isPixel(ctx, 50,25, 127,127,127,255, 0);
4314
4315
4316 }
4317 </script>
4318
4319 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-3.html ]]] -->
4320
4321 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-3</p>
4322 <canvas id="c155" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4323 <script>
4324
4325
4326 function test_2d_fillStyle_parse_hsl_clamp_3() {
4327
4328 var canvas = document.getElementById('c155');
4329 var ctx = canvas.getContext('2d');
4330
4331
4332 ctx.fillStyle = '#f00';
4333 ctx.fillStyle = 'hsl(120, 100%, 200%)';
4334 ctx.fillRect(0, 0, 100, 50);
4335 isPixel(ctx, 50,25, 255,255,255,255, 0);
4336
4337
4338 }
4339 </script>
4340
4341 <!-- [[[ test_2d.fillStyle.parse.hsl-clamp-4.html ]]] -->
4342
4343 <p>Canvas test: 2d.fillStyle.parse.hsl-clamp-4</p>
4344 <canvas id="c156" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4345 <script>
4346
4347
4348 function test_2d_fillStyle_parse_hsl_clamp_4() {
4349
4350 var canvas = document.getElementById('c156');
4351 var ctx = canvas.getContext('2d');
4352
4353
4354 ctx.fillStyle = '#f00';
4355 ctx.fillStyle = 'hsl(120, 100%, -200%)';
4356 ctx.fillRect(0, 0, 100, 50);
4357 isPixel(ctx, 50,25, 0,0,0,255, 0);
4358
4359
4360 }
4361 </script>
4362
4363 <!-- [[[ test_2d.fillStyle.parse.hsla-1.html ]]] -->
4364
4365 <p>Canvas test: 2d.fillStyle.parse.hsla-1</p>
4366 <canvas id="c157" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4367 <script>
4368
4369
4370 function test_2d_fillStyle_parse_hsla_1() {
4371
4372 var canvas = document.getElementById('c157');
4373 var ctx = canvas.getContext('2d');
4374
4375
4376 ctx.fillStyle = '#f00';
4377 ctx.fillStyle = 'hsla(120, 100%, 50%, 0.499)';
4378 ctx.fillRect(0, 0, 100, 50);
4379 isPixel(ctx, 50,25, 0,255,0,127, 0);
4380
4381
4382 }
4383 </script>
4384
4385 <!-- [[[ test_2d.fillStyle.parse.hsla-2.html ]]] -->
4386
4387 <p>Canvas test: 2d.fillStyle.parse.hsla-2</p>
4388 <canvas id="c158" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4389 <script>
4390
4391
4392 function test_2d_fillStyle_parse_hsla_2() {
4393
4394 var canvas = document.getElementById('c158');
4395 var ctx = canvas.getContext('2d');
4396
4397
4398 ctx.fillStyle = '#f00';
4399 ctx.fillStyle = 'hsla( 120.0 , 100.0% , 50.0% , 1 )';
4400 ctx.fillRect(0, 0, 100, 50);
4401 isPixel(ctx, 50,25, 0,255,0,255, 0);
4402
4403
4404 }
4405 </script>
4406
4407 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-1.html ]]] -->
4408
4409 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-1</p>
4410 <canvas id="c159" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4411 <script>
4412
4413
4414 function test_2d_fillStyle_parse_hsla_clamp_1() {
4415
4416 var canvas = document.getElementById('c159');
4417 var ctx = canvas.getContext('2d');
4418
4419
4420 ctx.fillStyle = '#f00';
4421 ctx.fillStyle = 'hsla(120, 200%, 50%, 1)';
4422 ctx.fillRect(0, 0, 100, 50);
4423 isPixel(ctx, 50,25, 0,255,0,255, 0);
4424
4425
4426 }
4427 </script>
4428
4429 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-2.html ]]] -->
4430
4431 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-2</p>
4432 <canvas id="c160" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4433 <script>
4434
4435
4436 function test_2d_fillStyle_parse_hsla_clamp_2() {
4437
4438 var canvas = document.getElementById('c160');
4439 var ctx = canvas.getContext('2d');
4440
4441
4442 ctx.fillStyle = '#f00';
4443 ctx.fillStyle = 'hsla(120, -200%, 49.9%, 1)';
4444 ctx.fillRect(0, 0, 100, 50);
4445 isPixel(ctx, 50,25, 127,127,127,255, 0);
4446
4447
4448 }
4449 </script>
4450
4451 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-3.html ]]] -->
4452
4453 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-3</p>
4454 <canvas id="c161" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4455 <script>
4456
4457
4458 function test_2d_fillStyle_parse_hsla_clamp_3() {
4459
4460 var canvas = document.getElementById('c161');
4461 var ctx = canvas.getContext('2d');
4462
4463
4464 ctx.fillStyle = '#f00';
4465 ctx.fillStyle = 'hsla(120, 100%, 200%, 1)';
4466 ctx.fillRect(0, 0, 100, 50);
4467 isPixel(ctx, 50,25, 255,255,255,255, 0);
4468
4469
4470 }
4471 </script>
4472
4473 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-4.html ]]] -->
4474
4475 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-4</p>
4476 <canvas id="c162" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4477 <script>
4478
4479
4480 function test_2d_fillStyle_parse_hsla_clamp_4() {
4481
4482 var canvas = document.getElementById('c162');
4483 var ctx = canvas.getContext('2d');
4484
4485
4486 ctx.fillStyle = '#f00';
4487 ctx.fillStyle = 'hsla(120, 100%, -200%, 1)';
4488 ctx.fillRect(0, 0, 100, 50);
4489 isPixel(ctx, 50,25, 0,0,0,255, 0);
4490
4491
4492 }
4493 </script>
4494
4495 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-5.html ]]] -->
4496
4497 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-5</p>
4498 <canvas id="c163" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4499 <script>
4500
4501
4502 function test_2d_fillStyle_parse_hsla_clamp_5() {
4503
4504 var canvas = document.getElementById('c163');
4505 var ctx = canvas.getContext('2d');
4506
4507
4508 ctx.fillStyle = '#f00';
4509 ctx.fillStyle = 'hsla(120, 100%, 50%, 2)';
4510 ctx.fillRect(0, 0, 100, 50);
4511 isPixel(ctx, 50,25, 0,255,0,255, 0);
4512
4513
4514 }
4515 </script>
4516
4517 <!-- [[[ test_2d.fillStyle.parse.hsla-clamp-6.html ]]] -->
4518
4519 <p>Canvas test: 2d.fillStyle.parse.hsla-clamp-6</p>
4520 <canvas id="c164" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4521 <script>
4522
4523
4524 function test_2d_fillStyle_parse_hsla_clamp_6() {
4525
4526 var canvas = document.getElementById('c164');
4527 var ctx = canvas.getContext('2d');
4528
4529
4530 ctx.fillStyle = '#f00';
4531 ctx.fillStyle = 'hsla(120, 100%, 0%, -2)';
4532 ctx.fillRect(0, 0, 100, 50);
4533 isPixel(ctx, 50,25, 0,0,0,0, 0);
4534
4535
4536 }
4537 </script>
4538
4539 <!-- [[[ test_2d.fillStyle.parse.html4.html ]]] -->
4540
4541 <p>Canvas test: 2d.fillStyle.parse.html4</p>
4542 <canvas id="c165" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4543 <script>
4544
4545
4546 function test_2d_fillStyle_parse_html4() {
4547
4548 var canvas = document.getElementById('c165');
4549 var ctx = canvas.getContext('2d');
4550
4551
4552 ctx.fillStyle = '#f00';
4553 ctx.fillStyle = 'limE';
4554 ctx.fillRect(0, 0, 100, 50);
4555 isPixel(ctx, 50,25, 0,255,0,255, 0);
4556
4557
4558 }
4559 </script>
4560
4561 <!-- [[[ test_2d.fillStyle.parse.invalid.hex3.html ]]] -->
4562
4563 <p>Canvas test: 2d.fillStyle.parse.invalid.hex3</p>
4564 <canvas id="c166" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4565 <script>
4566
4567
4568 function test_2d_fillStyle_parse_invalid_hex3() {
4569
4570 var canvas = document.getElementById('c166');
4571 var ctx = canvas.getContext('2d');
4572
4573
4574 ctx.fillStyle = '#0f0';
4575 try { ctx.fillStyle = '#g00'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4576 ctx.fillRect(0, 0, 100, 50);
4577 isPixel(ctx, 50,25, 0,255,0,255, 0);
4578
4579
4580 }
4581 </script>
4582
4583 <!-- [[[ test_2d.fillStyle.parse.invalid.hex6.html ]]] -->
4584
4585 <p>Canvas test: 2d.fillStyle.parse.invalid.hex6</p>
4586 <canvas id="c167" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4587 <script>
4588
4589
4590 function test_2d_fillStyle_parse_invalid_hex6() {
4591
4592 var canvas = document.getElementById('c167');
4593 var ctx = canvas.getContext('2d');
4594
4595
4596 ctx.fillStyle = '#0f0';
4597 try { ctx.fillStyle = '#fg0000'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4598 ctx.fillRect(0, 0, 100, 50);
4599 isPixel(ctx, 50,25, 0,255,0,255, 0);
4600
4601
4602 }
4603 </script>
4604
4605 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-1.html ]]] -->
4606
4607 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-1</p>
4608 <canvas id="c168" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4609 <script>
4610
4611
4612 function test_2d_fillStyle_parse_invalid_hsl_1() {
4613
4614 var canvas = document.getElementById('c168');
4615 var ctx = canvas.getContext('2d');
4616
4617
4618 ctx.fillStyle = '#0f0';
4619 try { ctx.fillStyle = 'hsl(0%, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4620 ctx.fillRect(0, 0, 100, 50);
4621 isPixel(ctx, 50,25, 0,255,0,255, 0);
4622
4623
4624 }
4625 </script>
4626
4627 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-2.html ]]] -->
4628
4629 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-2</p>
4630 <canvas id="c169" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4631 <script>
4632
4633
4634 function test_2d_fillStyle_parse_invalid_hsl_2() {
4635
4636 var canvas = document.getElementById('c169');
4637 var ctx = canvas.getContext('2d');
4638
4639
4640 ctx.fillStyle = '#0f0';
4641 try { ctx.fillStyle = 'hsl(z, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4642 ctx.fillRect(0, 0, 100, 50);
4643 isPixel(ctx, 50,25, 0,255,0,255, 0);
4644
4645
4646 }
4647 </script>
4648
4649 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-3.html ]]] -->
4650
4651 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-3</p>
4652 <canvas id="c170" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4653 <script>
4654
4655
4656 function test_2d_fillStyle_parse_invalid_hsl_3() {
4657
4658 var canvas = document.getElementById('c170');
4659 var ctx = canvas.getContext('2d');
4660
4661
4662 ctx.fillStyle = '#0f0';
4663 try { ctx.fillStyle = 'hsl(0, 0, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4664 ctx.fillRect(0, 0, 100, 50);
4665 isPixel(ctx, 50,25, 0,255,0,255, 0);
4666
4667
4668 }
4669 </script>
4670
4671 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-4.html ]]] -->
4672
4673 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-4</p>
4674 <canvas id="c171" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4675 <script>
4676
4677
4678 function test_2d_fillStyle_parse_invalid_hsl_4() {
4679
4680 var canvas = document.getElementById('c171');
4681 var ctx = canvas.getContext('2d');
4682
4683
4684 ctx.fillStyle = '#0f0';
4685 try { ctx.fillStyle = 'hsl(0, 100%, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4686 ctx.fillRect(0, 0, 100, 50);
4687 isPixel(ctx, 50,25, 0,255,0,255, 0);
4688
4689
4690 }
4691 </script>
4692
4693 <!-- [[[ test_2d.fillStyle.parse.invalid.hsl-5.html ]]] -->
4694
4695 <p>Canvas test: 2d.fillStyle.parse.invalid.hsl-5</p>
4696 <canvas id="c172" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4697 <script>
4698
4699
4700 function test_2d_fillStyle_parse_invalid_hsl_5() {
4701
4702 var canvas = document.getElementById('c172');
4703 var ctx = canvas.getContext('2d');
4704
4705
4706 ctx.fillStyle = '#0f0';
4707 try { ctx.fillStyle = 'hsl(0, 100%, 100%,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4708 ctx.fillRect(0, 0, 100, 50);
4709 isPixel(ctx, 50,25, 0,255,0,255, 0);
4710
4711
4712 }
4713 </script>
4714
4715 <!-- [[[ test_2d.fillStyle.parse.invalid.hsla-1.html ]]] -->
4716
4717 <p>Canvas test: 2d.fillStyle.parse.invalid.hsla-1</p>
4718 <canvas id="c173" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4719 <script>
4720
4721
4722 function test_2d_fillStyle_parse_invalid_hsla_1() {
4723
4724 var canvas = document.getElementById('c173');
4725 var ctx = canvas.getContext('2d');
4726
4727
4728 ctx.fillStyle = '#0f0';
4729 try { ctx.fillStyle = 'hsla(0%, 100%, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4730 ctx.fillRect(0, 0, 100, 50);
4731 isPixel(ctx, 50,25, 0,255,0,255, 0);
4732
4733
4734 }
4735 </script>
4736
4737 <!-- [[[ test_2d.fillStyle.parse.invalid.hsla-2.html ]]] -->
4738
4739 <p>Canvas test: 2d.fillStyle.parse.invalid.hsla-2</p>
4740 <canvas id="c174" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4741 <script>
4742
4743
4744 function test_2d_fillStyle_parse_invalid_hsla_2() {
4745
4746 var canvas = document.getElementById('c174');
4747 var ctx = canvas.getContext('2d');
4748
4749
4750 ctx.fillStyle = '#0f0';
4751 try { ctx.fillStyle = 'hsla(0, 0, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4752 ctx.fillRect(0, 0, 100, 50);
4753 isPixel(ctx, 50,25, 0,255,0,255, 0);
4754
4755
4756 }
4757 </script>
4758
4759 <!-- [[[ test_2d.fillStyle.parse.invalid.name-1.html ]]] -->
4760
4761 <p>Canvas test: 2d.fillStyle.parse.invalid.name-1</p>
4762 <canvas id="c174a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4763 <script>
4764
4765
4766 function test_2d_fillStyle_parse_invalid_name_1() {
4767
4768 var canvas = document.getElementById('c174a');
4769 var ctx = canvas.getContext('2d');
4770
4771 ctx.fillStyle = '#0f0';
4772 try { ctx.fillStyle = 'darkbrown'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4773 ctx.fillRect(0, 0, 100, 50);
4774 isPixel(ctx, 50,25, 0,255,0,255, 0);
4775
4776
4777 }
4778 </script>
4779
4780 <!-- [[[ test_2d.fillStyle.parse.invalid.name-2.html ]]] -->
4781
4782 <p>Canvas test: 2d.fillStyle.parse.invalid.name-2</p>
4783 <canvas id="c174b" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4784 <script>
4785
4786
4787 function test_2d_fillStyle_parse_invalid_name_2() {
4788
4789 var canvas = document.getElementById('c174b');
4790 var ctx = canvas.getContext('2d');
4791
4792 ctx.fillStyle = '#0f0';
4793 try { ctx.fillStyle = 'firebrick1'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4794 ctx.fillRect(0, 0, 100, 50);
4795 isPixel(ctx, 50,25, 0,255,0,255, 0);
4796
4797
4798 }
4799 </script>
4800
4801 <!-- [[[ test_2d.fillStyle.parse.invalid.name-3.html ]]] -->
4802
4803 <p>Canvas test: 2d.fillStyle.parse.invalid.name-3</p>
4804 <canvas id="c174c" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4805 <script>
4806
4807
4808 function test_2d_fillStyle_parse_invalid_name_3() {
4809
4810 var canvas = document.getElementById('c174c');
4811 var ctx = canvas.getContext('2d');
4812
4813 ctx.fillStyle = '#0f0';
4814 try { ctx.fillStyle = 'red blue'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4815 ctx.fillRect(0, 0, 100, 50);
4816 isPixel(ctx, 50,25, 0,255,0,255, 0);
4817
4818
4819 }
4820 </script>
4821
4822 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-1.html ]]] -->
4823
4824 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-1</p>
4825 <canvas id="c175" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4826 <script>
4827
4828
4829 function test_2d_fillStyle_parse_invalid_rgb_1() {
4830
4831 var canvas = document.getElementById('c175');
4832 var ctx = canvas.getContext('2d');
4833
4834
4835 ctx.fillStyle = '#0f0';
4836 try { ctx.fillStyle = 'rgb(255.0, 0%, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4837 ctx.fillRect(0, 0, 100, 50);
4838 isPixel(ctx, 50,25, 0,255,0,255, 0);
4839
4840
4841 }
4842 </script>
4843
4844 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-2.html ]]] -->
4845
4846 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-2</p>
4847 <canvas id="c176" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4848 <script>
4849
4850
4851 function test_2d_fillStyle_parse_invalid_rgb_2() {
4852
4853 var canvas = document.getElementById('c176');
4854 var ctx = canvas.getContext('2d');
4855
4856
4857 ctx.fillStyle = '#0f0';
4858 try { ctx.fillStyle = 'rgb(255%, 0.0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4859 ctx.fillRect(0, 0, 100, 50);
4860 isPixel(ctx, 50,25, 0,255,0,255, 0);
4861
4862
4863 }
4864 </script>
4865
4866 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-3.html ]]] -->
4867
4868 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-3</p>
4869 <canvas id="c177" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4870 <script>
4871
4872
4873 function test_2d_fillStyle_parse_invalid_rgb_3() {
4874
4875 var canvas = document.getElementById('c177');
4876 var ctx = canvas.getContext('2d');
4877
4878
4879 ctx.fillStyle = '#0f0';
4880 try { ctx.fillStyle = 'rgb(255.0, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4881 ctx.fillRect(0, 0, 100, 50);
4882 isPixel(ctx, 50,25, 0,255,0,255, 0);
4883
4884
4885 }
4886 </script>
4887
4888 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-4.html ]]] -->
4889
4890 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-4</p>
4891 <canvas id="c178" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4892 <script>
4893
4894
4895 function test_2d_fillStyle_parse_invalid_rgb_4() {
4896
4897 var canvas = document.getElementById('c178');
4898 var ctx = canvas.getContext('2d');
4899
4900
4901 ctx.fillStyle = '#0f0';
4902 try { ctx.fillStyle = 'rgb(100%, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4903 ctx.fillRect(0, 0, 100, 50);
4904 isPixel(ctx, 50,25, 0,255,0,255, 0);
4905
4906
4907 }
4908 </script>
4909
4910 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-5.html ]]] -->
4911
4912 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-5</p>
4913 <canvas id="c179" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4914 <script>
4915
4916
4917 function test_2d_fillStyle_parse_invalid_rgb_5() {
4918
4919 var canvas = document.getElementById('c179');
4920 var ctx = canvas.getContext('2d');
4921
4922
4923 ctx.fillStyle = '#0f0';
4924 try { ctx.fillStyle = 'rgb(255, 0 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4925 ctx.fillRect(0, 0, 100, 50);
4926 isPixel(ctx, 50,25, 0,255,0,255, 0);
4927
4928
4929 }
4930 </script>
4931
4932 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-6.html ]]] -->
4933
4934 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-6</p>
4935 <canvas id="c180" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4936 <script>
4937
4938
4939 function test_2d_fillStyle_parse_invalid_rgb_6() {
4940
4941 var canvas = document.getElementById('c180');
4942 var ctx = canvas.getContext('2d');
4943
4944
4945 ctx.fillStyle = '#0f0';
4946 try { ctx.fillStyle = 'rgb(255, - 1, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4947 ctx.fillRect(0, 0, 100, 50);
4948 isPixel(ctx, 50,25, 0,255,0,255, 0);
4949
4950
4951 }
4952 </script>
4953
4954 <!-- [[[ test_2d.fillStyle.parse.invalid.rgb-7.html ]]] -->
4955
4956 <p>Canvas test: 2d.fillStyle.parse.invalid.rgb-7</p>
4957 <canvas id="c181" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4958 <script>
4959
4960
4961 function test_2d_fillStyle_parse_invalid_rgb_7() {
4962
4963 var canvas = document.getElementById('c181');
4964 var ctx = canvas.getContext('2d');
4965
4966
4967 ctx.fillStyle = '#0f0';
4968 try { ctx.fillStyle = 'rgb(255, 0, 0, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4969 ctx.fillRect(0, 0, 100, 50);
4970 isPixel(ctx, 50,25, 0,255,0,255, 0);
4971
4972
4973 }
4974 </script>
4975
4976 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-1.html ]]] -->
4977
4978 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-1</p>
4979 <canvas id="c182" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
4980 <script>
4981
4982
4983 function test_2d_fillStyle_parse_invalid_rgba_1() {
4984
4985 var canvas = document.getElementById('c182');
4986 var ctx = canvas.getContext('2d');
4987
4988
4989 ctx.fillStyle = '#0f0';
4990 try { ctx.fillStyle = 'rgba(255, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
4991 ctx.fillRect(0, 0, 100, 50);
4992 isPixel(ctx, 50,25, 0,255,0,255, 0);
4993
4994
4995 }
4996 </script>
4997
4998 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-2.html ]]] -->
4999
5000 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-2</p>
5001 <canvas id="c183" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5002 <script>
5003
5004
5005 function test_2d_fillStyle_parse_invalid_rgba_2() {
5006
5007 var canvas = document.getElementById('c183');
5008 var ctx = canvas.getContext('2d');
5009
5010
5011 ctx.fillStyle = '#0f0';
5012 try { ctx.fillStyle = 'rgba(255.0, 0, 0, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5013 ctx.fillRect(0, 0, 100, 50);
5014 isPixel(ctx, 50,25, 0,255,0,255, 0);
5015
5016
5017 }
5018 </script>
5019
5020 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-3.html ]]] -->
5021
5022 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-3</p>
5023 <canvas id="c184" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5024 <script>
5025
5026
5027 function test_2d_fillStyle_parse_invalid_rgba_3() {
5028
5029 var canvas = document.getElementById('c184');
5030 var ctx = canvas.getContext('2d');
5031
5032
5033 ctx.fillStyle = '#0f0';
5034 try { ctx.fillStyle = 'rgba(100%, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5035 ctx.fillRect(0, 0, 100, 50);
5036 isPixel(ctx, 50,25, 0,255,0,255, 0);
5037
5038
5039 }
5040 </script>
5041
5042 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-4.html ]]] -->
5043
5044 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-4</p>
5045 <canvas id="c185" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5046 <script>
5047
5048
5049 function test_2d_fillStyle_parse_invalid_rgba_4() {
5050
5051 var canvas = document.getElementById('c185');
5052 var ctx = canvas.getContext('2d');
5053
5054
5055 ctx.fillStyle = '#0f0';
5056 try { ctx.fillStyle = 'rgba(255, 0, 0, 100.%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5057 ctx.fillRect(0, 0, 100, 50);
5058 isPixel(ctx, 50,25, 0,255,0,255, 0);
5059
5060
5061 }
5062 </script>
5063
5064 <!-- [[[ test_2d.fillStyle.parse.invalid.rgba-5.html ]]] -->
5065
5066 <p>Canvas test: 2d.fillStyle.parse.invalid.rgba-5</p>
5067 <canvas id="c186" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5068 <script>
5069
5070
5071 function test_2d_fillStyle_parse_invalid_rgba_5() {
5072
5073 var canvas = document.getElementById('c186');
5074 var ctx = canvas.getContext('2d');
5075
5076
5077 ctx.fillStyle = '#0f0';
5078 try { ctx.fillStyle = 'rgba(255, 0, 0, 1. 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
5079 ctx.fillRect(0, 0, 100, 50);
5080 isPixel(ctx, 50,25, 0,255,0,255, 0);
5081
5082
5083 }
5084 </script>
5085
5086 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-1.html ]]] -->
5087
5088 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-1</p>
5089 <canvas id="c187" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5090 <script>
5091
5092
5093 function test_2d_fillStyle_parse_rgb_clamp_1() {
5094
5095 var canvas = document.getElementById('c187');
5096 var ctx = canvas.getContext('2d');
5097
5098
5099 ctx.fillStyle = '#f00';
5100 ctx.fillStyle = 'rgb(-1000, 1000, -1000)';
5101 ctx.fillRect(0, 0, 100, 50);
5102 isPixel(ctx, 50,25, 0,255,0,255, 0);
5103
5104
5105 }
5106 </script>
5107
5108 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-2.html ]]] -->
5109
5110 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-2</p>
5111 <canvas id="c188" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5112 <script>
5113
5114
5115 function test_2d_fillStyle_parse_rgb_clamp_2() {
5116
5117 var canvas = document.getElementById('c188');
5118 var ctx = canvas.getContext('2d');
5119
5120
5121 ctx.fillStyle = '#f00';
5122 ctx.fillStyle = 'rgb(-200%, 200%, -200%)';
5123 ctx.fillRect(0, 0, 100, 50);
5124 isPixel(ctx, 50,25, 0,255,0,255, 0);
5125
5126
5127 }
5128 </script>
5129
5130 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-3.html ]]] -->
5131
5132 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-3</p>
5133 <canvas id="c189" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5134 <script>
5135
5136
5137 function test_2d_fillStyle_parse_rgb_clamp_3() {
5138
5139 var canvas = document.getElementById('c189');
5140 var ctx = canvas.getContext('2d');
5141
5142
5143 ctx.fillStyle = '#f00';
5144 ctx.fillStyle = 'rgb(-2147483649, 4294967298, -18446744073709551619)';
5145 ctx.fillRect(0, 0, 100, 50);
5146 isPixel(ctx, 50,25, 0,255,0,255, 0);
5147
5148
5149 }
5150 </script>
5151
5152 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-4.html ]]] -->
5153
5154 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-4</p>
5155 <canvas id="c190" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5156 <script>
5157
5158
5159 function test_2d_fillStyle_parse_rgb_clamp_4() {
5160
5161 var canvas = document.getElementById('c190');
5162 var ctx = canvas.getContext('2d');
5163
5164
5165 ctx.fillStyle = '#f00';
5166 ctx.fillStyle = 'rgb(-1000000000000000000000000000000000000000, 1000000000000000000000000000000000000000, -1000000000000000000000000000000000000000)';
5167 ctx.fillRect(0, 0, 100, 50);
5168 isPixel(ctx, 50,25, 0,255,0,255, 0);
5169
5170
5171 }
5172 </script>
5173
5174 <!-- [[[ test_2d.fillStyle.parse.rgb-clamp-5.html ]]] -->
5175
5176 <p>Canvas test: 2d.fillStyle.parse.rgb-clamp-5</p>
5177 <canvas id="c191" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5178 <script>
5179
5180
5181 function test_2d_fillStyle_parse_rgb_clamp_5() {
5182
5183 var canvas = document.getElementById('c191');
5184 var ctx = canvas.getContext('2d');
5185
5186
5187 ctx.fillStyle = '#f00';
5188 ctx.fillStyle = 'rgb(-10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, -10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000)';
5189 ctx.fillRect(0, 0, 100, 50);
5190 isPixel(ctx, 50,25, 0,255,0,255, 0);
5191
5192
5193 }
5194 </script>
5195
5196 <!-- [[[ test_2d.fillStyle.parse.rgb-num.html ]]] -->
5197
5198 <p>Canvas test: 2d.fillStyle.parse.rgb-num</p>
5199 <canvas id="c192" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5200 <script>
5201
5202
5203 function test_2d_fillStyle_parse_rgb_num() {
5204
5205 var canvas = document.getElementById('c192');
5206 var ctx = canvas.getContext('2d');
5207
5208
5209 ctx.fillStyle = '#f00';
5210 ctx.fillStyle = 'rgb(0,255,0)';
5211 ctx.fillRect(0, 0, 100, 50);
5212 isPixel(ctx, 50,25, 0,255,0,255, 0);
5213
5214
5215 }
5216 </script>
5217
5218 <!-- [[[ test_2d.fillStyle.parse.rgb-percent.html ]]] -->
5219
5220 <p>Canvas test: 2d.fillStyle.parse.rgb-percent</p>
5221 <canvas id="c193" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5222 <script>
5223
5224
5225 function test_2d_fillStyle_parse_rgb_percent() {
5226
5227 var canvas = document.getElementById('c193');
5228 var ctx = canvas.getContext('2d');
5229
5230
5231 ctx.fillStyle = '#f00';
5232 ctx.fillStyle = 'rgb(0% ,100% ,0%)';
5233 ctx.fillRect(0, 0, 100, 50);
5234 isPixel(ctx, 50,25, 0,255,0,255, 0);
5235
5236
5237 }
5238 </script>
5239
5240 <!-- [[[ test_2d.fillStyle.parse.rgba-clamp-1.html ]]] -->
5241
5242 <p>Canvas test: 2d.fillStyle.parse.rgba-clamp-1</p>
5243 <canvas id="c194" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5244 <script>
5245
5246
5247 function test_2d_fillStyle_parse_rgba_clamp_1() {
5248
5249 var canvas = document.getElementById('c194');
5250 var ctx = canvas.getContext('2d');
5251
5252
5253 ctx.fillStyle = '#f00';
5254 ctx.fillStyle = 'rgba(0, 255, 0, -2)';
5255 ctx.fillRect(0, 0, 100, 50);
5256 isPixel(ctx, 50,25, 0,0,0,0, 0);
5257
5258
5259 }
5260 </script>
5261
5262 <!-- [[[ test_2d.fillStyle.parse.rgba-clamp-2.html ]]] -->
5263
5264 <p>Canvas test: 2d.fillStyle.parse.rgba-clamp-2</p>
5265 <canvas id="c195" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5266 <script>
5267
5268
5269 function test_2d_fillStyle_parse_rgba_clamp_2() {
5270
5271 var canvas = document.getElementById('c195');
5272 var ctx = canvas.getContext('2d');
5273
5274
5275 ctx.fillStyle = '#f00';
5276 ctx.fillStyle = 'rgba(0, 255, 0, 2)';
5277 ctx.fillRect(0, 0, 100, 50);
5278 isPixel(ctx, 50,25, 0,255,0,255, 0);
5279
5280
5281 }
5282 </script>
5283
5284 <!-- [[[ test_2d.fillStyle.parse.rgba-num-1.html ]]] -->
5285
5286 <p>Canvas test: 2d.fillStyle.parse.rgba-num-1</p>
5287 <canvas id="c196" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5288 <script>
5289
5290
5291 function test_2d_fillStyle_parse_rgba_num_1() {
5292
5293 var canvas = document.getElementById('c196');
5294 var ctx = canvas.getContext('2d');
5295
5296
5297 ctx.fillStyle = '#f00';
5298 ctx.fillStyle = 'rgba(  0  ,  255  ,  0  ,  .499  )';
5299 ctx.fillRect(0, 0, 100, 50);
5300 isPixel(ctx, 50,25, 0,255,0,127, 0);
5301
5302
5303 }
5304 </script>
5305
5306 <!-- [[[ test_2d.fillStyle.parse.rgba-num-2.html ]]] -->
5307
5308 <p>Canvas test: 2d.fillStyle.parse.rgba-num-2</p>
5309 <canvas id="c197" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5310 <script>
5311
5312
5313 function test_2d_fillStyle_parse_rgba_num_2() {
5314
5315 var canvas = document.getElementById('c197');
5316 var ctx = canvas.getContext('2d');
5317
5318
5319 ctx.fillStyle = '#f00';
5320 ctx.fillStyle = 'rgba(  0  ,  255  ,  0  ,  0.499  )';
5321 ctx.fillRect(0, 0, 100, 50);
5322 isPixel(ctx, 50,25, 0,255,0,127, 0);
5323
5324
5325 }
5326 </script>
5327
5328 <!-- [[[ test_2d.fillStyle.parse.rgba-percent.html ]]] -->
5329
5330 <p>Canvas test: 2d.fillStyle.parse.rgba-percent</p>
5331 <canvas id="c198" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5332 <script>
5333
5334
5335 function test_2d_fillStyle_parse_rgba_percent() {
5336
5337 var canvas = document.getElementById('c198');
5338 var ctx = canvas.getContext('2d');
5339
5340
5341 ctx.fillStyle = '#f00';
5342 ctx.fillStyle = 'rgba(0%,100%,0%,0.499)';
5343 ctx.fillRect(0, 0, 100, 50);
5344 isPixel(ctx, 50,25, 0,255,0,127, 0);
5345
5346
5347 }
5348 </script>
5349
5350 <!-- [[[ test_2d.fillStyle.parse.rgba-solid-1.html ]]] -->
5351
5352 <p>Canvas test: 2d.fillStyle.parse.rgba-solid-1</p>
5353 <canvas id="c199" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5354 <script>
5355
5356
5357 function test_2d_fillStyle_parse_rgba_solid_1() {
5358
5359 var canvas = document.getElementById('c199');
5360 var ctx = canvas.getContext('2d');
5361
5362
5363 ctx.fillStyle = '#f00';
5364 ctx.fillStyle = 'rgba(  0  ,  255  ,  0  ,  1  )';
5365 ctx.fillRect(0, 0, 100, 50);
5366 isPixel(ctx, 50,25, 0,255,0,255, 0);
5367
5368
5369 }
5370 </script>
5371
5372 <!-- [[[ test_2d.fillStyle.parse.rgba-solid-2.html ]]] -->
5373
5374 <p>Canvas test: 2d.fillStyle.parse.rgba-solid-2</p>
5375 <canvas id="c200" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5376 <script>
5377
5378
5379 function test_2d_fillStyle_parse_rgba_solid_2() {
5380
5381 var canvas = document.getElementById('c200');
5382 var ctx = canvas.getContext('2d');
5383
5384
5385 ctx.fillStyle = '#f00';
5386 ctx.fillStyle = 'rgba(  0  ,  255  ,  0  ,  1.0  )';
5387 ctx.fillRect(0, 0, 100, 50);
5388 isPixel(ctx, 50,25, 0,255,0,255, 0);
5389
5390
5391 }
5392 </script>
5393
5394 <!-- [[[ test_2d.fillStyle.parse.svg-1.html ]]] -->
5395
5396 <p>Canvas test: 2d.fillStyle.parse.svg-1</p>
5397 <canvas id="c201" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5398 <script>
5399
5400
5401 function test_2d_fillStyle_parse_svg_1() {
5402
5403 var canvas = document.getElementById('c201');
5404 var ctx = canvas.getContext('2d');
5405
5406
5407 ctx.fillStyle = '#f00';
5408 ctx.fillStyle = 'gray';
5409 ctx.fillRect(0, 0, 100, 50);
5410 isPixel(ctx, 50,25, 128,128,128,255, 0);
5411
5412
5413 }
5414 </script>
5415
5416 <!-- [[[ test_2d.fillStyle.parse.svg-2.html ]]] -->
5417
5418 <p>Canvas test: 2d.fillStyle.parse.svg-2</p>
5419 <canvas id="c202" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5420 <script>
5421
5422
5423 function test_2d_fillStyle_parse_svg_2() {
5424
5425 var canvas = document.getElementById('c202');
5426 var ctx = canvas.getContext('2d');
5427
5428
5429 ctx.fillStyle = '#f00';
5430 ctx.fillStyle = 'grey';
5431 ctx.fillRect(0, 0, 100, 50);
5432 isPixel(ctx, 50,25, 128,128,128,255, 0);
5433
5434
5435 }
5436 </script>
5437
5438 <!-- [[[ test_2d.fillStyle.parse.system.html ]]] -->
5439
5440 <p>Canvas test: 2d.fillStyle.parse.system</p>
5441 <canvas id="c203" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5442 <script>
5443
5444 function test_2d_fillStyle_parse_system() {
5445
5446 var canvas = document.getElementById('c203');
5447 var ctx = canvas.getContext('2d');
5448
5449
5450 ctx.fillStyle = '#f00';
5451 ctx.fillStyle = 'ThreeDDarkShadow';
5452 ok(/^#(?!(FF0000|ff0000|f00)$)/.test(ctx.fillStyle), "ctx.fillStyle =~ /^#(?!(FF0000|ff0000|f00)$)/"); // test that it's not red
5453
5454
5455 }
5456 </script>
5457
5458 <!-- [[[ test_2d.fillStyle.parse.transparent-1.html ]]] -->
5459
5460 <p>Canvas test: 2d.fillStyle.parse.transparent-1</p>
5461 <canvas id="c204" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5462 <script>
5463
5464
5465 function test_2d_fillStyle_parse_transparent_1() {
5466
5467 var canvas = document.getElementById('c204');
5468 var ctx = canvas.getContext('2d');
5469
5470
5471 ctx.fillStyle = '#f00';
5472 ctx.fillStyle = 'transparent';
5473 ctx.fillRect(0, 0, 100, 50);
5474 isPixel(ctx, 50,25, 0,0,0,0, 0);
5475
5476
5477 }
5478 </script>
5479
5480 <!-- [[[ test_2d.fillStyle.parse.transparent-2.html ]]] -->
5481
5482 <p>Canvas test: 2d.fillStyle.parse.transparent-2</p>
5483 <canvas id="c205" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5484 <script>
5485
5486
5487 function test_2d_fillStyle_parse_transparent_2() {
5488
5489 var canvas = document.getElementById('c205');
5490 var ctx = canvas.getContext('2d');
5491
5492
5493 ctx.fillStyle = '#f00';
5494 ctx.fillStyle = 'TrAnSpArEnT';
5495 ctx.fillRect(0, 0, 100, 50);
5496 isPixel(ctx, 50,25, 0,0,0,0, 0);
5497
5498
5499 }
5500 </script>
5501
5502 <!-- [[[ test_2d.getcontext.exists.html ]]] -->
5503
5504 <p>Canvas test: 2d.getcontext.exists</p>
5505 <!-- Testing: The 2D context is implemented -->
5506 <canvas id="c206" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5507 <script>
5508
5509 function test_2d_getcontext_exists() {
5510
5511 var canvas = document.getElementById('c206');
5512 var ctx = canvas.getContext('2d');
5513
5514 ok(canvas.getContext('2d') !== null, "canvas.getContext('2d') !== null");
5515
5516
5517 }
5518 </script>
5519
5520 <!-- [[[ test_2d.getcontext.shared.html ]]] -->
5521
5522 <p>Canvas test: 2d.getcontext.shared</p>
5523 <!-- Testing: getContext('2d') returns objects which share canvas state -->
5524 <canvas id="c207" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5525 <script>
5526
5527
5528 function test_2d_getcontext_shared() {
5529
5530 var canvas = document.getElementById('c207');
5531 var ctx = canvas.getContext('2d');
5532
5533 var ctx2 = canvas.getContext('2d');
5534 ctx.fillStyle = '#f00';
5535 ctx2.fillStyle = '#0f0';
5536 ctx.fillRect(0, 0, 100, 50);
5537 isPixel(ctx, 50,25, 0,255,0,255, 0);
5538
5539
5540 }
5541 </script>
5542
5543 <!-- [[[ test_2d.getcontext.unique.html ]]] -->
5544
5545 <p>Canvas test: 2d.getcontext.unique</p>
5546 <!-- Testing: getContext('2d') returns the same object -->
5547 <canvas id="c208" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5548 <script>
5549
5550 function test_2d_getcontext_unique() {
5551
5552 var canvas = document.getElementById('c208');
5553 var ctx = canvas.getContext('2d');
5554
5555 // eslint-disable-next-line no-self-compare
5556 ok(canvas.getContext('2d') === canvas.getContext('2d'), "canvas.getContext('2d') === canvas.getContext('2d')");
5557
5558
5559 }
5560 </script>
5561
5562 <!-- [[[ test_2d.gradient.empty.html ]]] -->
5563
5564 <p>Canvas test: 2d.gradient.empty</p>
5565 <canvas id="c209" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5566 <script>
5567
5568
5569 function test_2d_gradient_empty() {
5570
5571 var canvas = document.getElementById('c209');
5572 var ctx = canvas.getContext('2d');
5573
5574 ctx.fillStyle = '#0f0';
5575 ctx.fillRect(0, 0, 100, 50);
5576 var g = ctx.createLinearGradient(0, 0, 0, 50);
5577 ctx.fillStyle = g;
5578 ctx.fillRect(0, 0, 100, 50);
5579 isPixel(ctx, 50,25, 0,255,0,255, 2);
5580
5581
5582 }
5583 </script>
5584
5585 <!-- [[[ test_2d.gradient.interpolate.alpha.html ]]] -->
5586
5587 <p>Canvas test: 2d.gradient.interpolate.alpha</p>
5588 <canvas id="c210" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5589 <script>
5590
5591
5592 function test_2d_gradient_interpolate_alpha() {
5593
5594 var canvas = document.getElementById('c210');
5595 var ctx = canvas.getContext('2d');
5596
5597 ctx.fillStyle = '#ff0';
5598 ctx.fillRect(0, 0, 100, 50);
5599 var g = ctx.createLinearGradient(0, 0, 100, 0);
5600 g.addColorStop(0, 'rgba(0,0,255, 0)');
5601 g.addColorStop(1, 'rgba(0,0,255, 1)');
5602 ctx.fillStyle = g;
5603 ctx.fillRect(0, 0, 100, 50);
5604 isPixel(ctx, 25,25, 191,191,63,255, 3);
5605 isPixel(ctx, 50,25, 127,127,127,255, 3);
5606 isPixel(ctx, 75,25, 63,63,191,255, 3);
5607
5608
5609 }
5610 </script>
5611
5612 <!-- [[[ test_2d.gradient.interpolate.colour.html ]]] -->
5613
5614 <p>Canvas test: 2d.gradient.interpolate.colour</p>
5615 <canvas id="c211" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5616 <script>
5617
5618
5619 function test_2d_gradient_interpolate_colour() {
5620
5621 var canvas = document.getElementById('c211');
5622 var ctx = canvas.getContext('2d');
5623
5624 var g = ctx.createLinearGradient(0, 0, 100, 0);
5625 g.addColorStop(0, '#ff0');
5626 g.addColorStop(1, '#00f');
5627 ctx.fillStyle = g;
5628 ctx.fillRect(0, 0, 100, 50);
5629 isPixel(ctx, 25,25, 191,191,63,255, 3);
5630 isPixel(ctx, 50,25, 127,127,127,255, 3);
5631 isPixel(ctx, 75,25, 63,63,191,255, 3);
5632
5633
5634 }
5635 </script>
5636
5637 <!-- [[[ test_2d.gradient.interpolate.colouralpha.html ]]] -->
5638
5639 <p>Canvas test: 2d.gradient.interpolate.colouralpha</p>
5640 <canvas id="c212" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5641 <script>
5642
5643
5644 function test_2d_gradient_interpolate_colouralpha() {
5645
5646 var canvas = document.getElementById('c212');
5647 var ctx = canvas.getContext('2d');
5648
5649 var g = ctx.createLinearGradient(0, 0, 100, 0);
5650 g.addColorStop(0, 'rgba(255,255,0, 0)');
5651 g.addColorStop(1, 'rgba(0,0,255, 1)');
5652 ctx.fillStyle = g;
5653 ctx.fillRect(0, 0, 100, 50);
5654 // Following tests fail on Windows hardware (datacenter and local laptops), see bug 1657707
5655 if (!IsWindows()) isPixel(ctx, 25,25, 191,191,63,63, 3);
5656 if (!IsWindows()) isPixel(ctx, 50,25, 127,127,127,127, 3);
5657 if (!IsWindows()) isPixel(ctx, 75,25, 63,63,191,191, 3);
5658
5659
5660 }
5661 </script>
5662
5663 <!-- [[[ test_2d.gradient.interpolate.multiple.html ]]] -->
5664
5665 <p>Canvas test: 2d.gradient.interpolate.multiple</p>
5666 <canvas id="c213" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5667 <script>
5668
5669
5670 function test_2d_gradient_interpolate_multiple() {
5671
5672 var canvas = document.getElementById('c213');
5673 var ctx = canvas.getContext('2d');
5674
5675 canvas.width = 200;
5676 var g = ctx.createLinearGradient(0, 0, 200, 0);
5677 g.addColorStop(0, '#ff0');
5678 g.addColorStop(0.5, '#0ff');
5679 g.addColorStop(1, '#f0f');
5680 ctx.fillStyle = g;
5681 ctx.fillRect(0, 0, 200, 50);
5682 isPixel(ctx, 50,25, 127,255,127,255, 3);
5683 isPixel(ctx, 100,25, 0,255,255,255, 3);
5684 isPixel(ctx, 150,25, 127,127,255,255, 3);
5685
5686
5687 }
5688 </script>
5689
5690 <!-- [[[ test_2d.gradient.interpolate.outside.html ]]] -->
5691
5692 <p>Canvas test: 2d.gradient.interpolate.outside</p>
5693 <canvas id="c214" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5694 <script>
5695
5696
5697 function test_2d_gradient_interpolate_outside() {
5698
5699 var canvas = document.getElementById('c214');
5700 var ctx = canvas.getContext('2d');
5701
5702 ctx.fillStyle = '#f00';
5703 ctx.fillRect(0, 0, 100, 50);
5704
5705 var g = ctx.createLinearGradient(25, 0, 75, 0);
5706 g.addColorStop(0.4, '#0f0');
5707 g.addColorStop(0.6, '#0f0');
5708
5709 ctx.fillStyle = g;
5710 ctx.fillRect(0, 0, 100, 50);
5711 isPixel(ctx, 20,25, 0,255,0,255, 2);
5712 isPixel(ctx, 50,25, 0,255,0,255, 2);
5713 isPixel(ctx, 80,25, 0,255,0,255, 2);
5714
5715
5716 }
5717 </script>
5718
5719 <!-- [[[ test_2d.gradient.interpolate.overlap.html ]]] -->
5720
5721 <p>Canvas test: 2d.gradient.interpolate.overlap</p>
5722 <canvas id="c215" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5723 <script>
5724
5725
5726 function test_2d_gradient_interpolate_overlap() {
5727
5728 var canvas = document.getElementById('c215');
5729 var ctx = canvas.getContext('2d');
5730
5731 if (!IsD2DEnabled()) {
5732     // On D2D the different nature of how gradients
5733     // are drawn makes it so we cannot guarantee these stops are completely
5734     // hard.
5735
5736     // On OS X 10.5 quartz is confused by the overlapping stops: Bug #715235
5737     canvas.width = 200;
5738     var g = ctx.createLinearGradient(0, 0, 200, 0);
5739     g.addColorStop(0, '#f00');
5740     g.addColorStop(0, '#ff0');
5741     g.addColorStop(0.25, '#00f');
5742     g.addColorStop(0.25, '#0f0');
5743     g.addColorStop(0.25, '#0f0');
5744     g.addColorStop(0.25, '#0f0');
5745     g.addColorStop(0.25, '#ff0');
5746     g.addColorStop(0.5, '#00f');
5747     g.addColorStop(0.5, '#0f0');
5748     g.addColorStop(0.75, '#00f');
5749     g.addColorStop(0.75, '#f00');
5750     g.addColorStop(0.75, '#ff0');
5751     g.addColorStop(0.5, '#0f0');
5752     g.addColorStop(0.5, '#0f0');
5753     g.addColorStop(0.5, '#ff0');
5754     g.addColorStop(1, '#00f');
5755     ctx.fillStyle = g;
5756     ctx.fillRect(0, 0, 200, 50);
5757     isPixel(ctx, 49,25, 0,0,255,255, 16);
5758     isPixel(ctx, 51,25, 255,255,0,255, 16);
5759     isPixel(ctx, 99,25, 0,0,255,255, 16);
5760     isPixel(ctx, 101,25, 255,255,0,255, 16);
5761     isPixel(ctx, 149,25, 0,0,255,255, 16);
5762     isPixel(ctx, 151,25, 255,255,0,255, 16);
5763 }
5764 }
5765 </script>
5766
5767 <!-- [[[ test_2d.gradient.interpolate.overlap2.html ]]] -->
5768
5769 <p>Canvas test: 2d.gradient.interpolate.overlap2</p>
5770 <canvas id="c216" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5771 <script>
5772
5773
5774 function test_2d_gradient_interpolate_overlap2() {
5775
5776 var canvas = document.getElementById('c216');
5777 var ctx = canvas.getContext('2d');
5778
5779 var g = ctx.createLinearGradient(0, 0, 100, 0);
5780 var ps = [ 0, 1/10, 1/4, 1/3, 1/2, 3/4, 1 ];
5781 for (var p = 0; p < ps.length; ++p)
5782 {
5783         g.addColorStop(ps[p], '#0f0');
5784         for (var i = 0; i < 15; ++i)
5785                 g.addColorStop(ps[p], '#f00');
5786         g.addColorStop(ps[p], '#0f0');
5787 }
5788 ctx.fillStyle = g;
5789 ctx.fillRect(0, 0, 100, 50);
5790
5791 isPixel(ctx, 1,25, 0,255,0,255, 0);
5792 isPixel(ctx, 30,25, 0,255,0,255, 0);
5793 isPixel(ctx, 40,25, 0,255,0,255, 0);
5794 isPixel(ctx, 60,25, 0,255,0,255, 0);
5795 isPixel(ctx, 80,25, 0,255,0,255, 0);
5796
5797 }
5798 </script>
5799
5800 <!-- [[[ test_2d.gradient.interpolate.solid.html ]]] -->
5801
5802 <p>Canvas test: 2d.gradient.interpolate.solid</p>
5803 <canvas id="c217" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5804 <script>
5805
5806
5807 function test_2d_gradient_interpolate_solid() {
5808
5809 var canvas = document.getElementById('c217');
5810 var ctx = canvas.getContext('2d');
5811
5812 var g = ctx.createLinearGradient(0, 0, 100, 0);
5813 g.addColorStop(0, '#0f0');
5814 g.addColorStop(1, '#0f0');
5815 ctx.fillStyle = g;
5816 ctx.fillRect(0, 0, 100, 50);
5817 isPixel(ctx, 50,25, 0,255,0,255, 0);
5818
5819
5820 }
5821 </script>
5822
5823 <!-- [[[ test_2d.gradient.interpolate.vertical.html ]]] -->
5824
5825 <p>Canvas test: 2d.gradient.interpolate.vertical</p>
5826 <canvas id="c218" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5827 <script>
5828
5829
5830 function test_2d_gradient_interpolate_vertical() {
5831
5832 var canvas = document.getElementById('c218');
5833 var ctx = canvas.getContext('2d');
5834
5835 var g = ctx.createLinearGradient(0, 0, 0, 50);
5836 g.addColorStop(0, '#ff0');
5837 g.addColorStop(1, '#00f');
5838 ctx.fillStyle = g;
5839 ctx.fillRect(0, 0, 100, 50);
5840 isPixel(ctx, 50,12, 191,191,63,255, 10);
5841 isPixel(ctx, 50,25, 127,127,127,255, 5);
5842 isPixel(ctx, 50,37, 63,63,191,255, 10);
5843
5844
5845 }
5846 </script>
5847
5848 <!-- [[[ test_2d.gradient.interpolate.zerosize.html ]]] -->
5849
5850 <p>Canvas test: 2d.gradient.interpolate.zerosize</p>
5851 <canvas id="c219" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5852 <script>
5853
5854
5855
5856 function test_2d_gradient_interpolate_zerosize() {
5857
5858 var canvas = document.getElementById('c219');
5859 var ctx = canvas.getContext('2d');
5860
5861 ctx.fillStyle = '#0f0';
5862 ctx.fillRect(0, 0, 100, 50);
5863
5864 var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
5865 g.addColorStop(0, '#f00');
5866 g.addColorStop(1, '#f00');
5867 ctx.fillStyle = g;
5868 ctx.fillRect(0, 0, 100, 50);
5869
5870 isPixel(ctx, 40,20, 0,255,0,255, 2);
5871
5872 }
5873 </script>
5874
5875 <!-- [[[ test_2d.gradient.linear.nonfinite.html ]]] -->
5876
5877 <p>Canvas test: 2d.gradient.linear.nonfinite</p>
5878 <!-- Testing: createLinearGradient() throws NOT_SUPPORTED_ERR if arguments are not finite -->
5879 <canvas id="c220" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5880 <script>
5881
5882 // eslint-disable-next-line complexity
5883 function test_2d_gradient_linear_nonfinite() {
5884
5885 var canvas = document.getElementById('c220');
5886 var ctx = canvas.getContext('2d');
5887
5888 var _thrown = undefined; try {
5889   ctx.createLinearGradient(Infinity, 0, 1, 0);
5890 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5891 var _thrown = undefined; try {
5892   ctx.createLinearGradient(-Infinity, 0, 1, 0);
5893 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5894 var _thrown = undefined; try {
5895   ctx.createLinearGradient(NaN, 0, 1, 0);
5896 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5897 var _thrown = undefined; try {
5898   ctx.createLinearGradient(0, Infinity, 1, 0);
5899 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5900 var _thrown = undefined; try {
5901   ctx.createLinearGradient(0, -Infinity, 1, 0);
5902 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5903 var _thrown = undefined; try {
5904   ctx.createLinearGradient(0, NaN, 1, 0);
5905 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5906 var _thrown = undefined; try {
5907   ctx.createLinearGradient(0, 0, Infinity, 0);
5908 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5909 var _thrown = undefined; try {
5910   ctx.createLinearGradient(0, 0, -Infinity, 0);
5911 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5912 var _thrown = undefined; try {
5913   ctx.createLinearGradient(0, 0, NaN, 0);
5914 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5915 var _thrown = undefined; try {
5916   ctx.createLinearGradient(0, 0, 1, Infinity);
5917 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5918 var _thrown = undefined; try {
5919   ctx.createLinearGradient(0, 0, 1, -Infinity);
5920 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5921 var _thrown = undefined; try {
5922   ctx.createLinearGradient(0, 0, 1, NaN);
5923 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5924 var _thrown = undefined; try {
5925   ctx.createLinearGradient(Infinity, Infinity, 1, 0);
5926 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5927 var _thrown = undefined; try {
5928   ctx.createLinearGradient(Infinity, Infinity, Infinity, 0);
5929 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5930 var _thrown = undefined; try {
5931   ctx.createLinearGradient(Infinity, Infinity, Infinity, Infinity);
5932 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5933 var _thrown = undefined; try {
5934   ctx.createLinearGradient(Infinity, Infinity, 1, Infinity);
5935 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5936 var _thrown = undefined; try {
5937   ctx.createLinearGradient(Infinity, 0, Infinity, 0);
5938 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5939 var _thrown = undefined; try {
5940   ctx.createLinearGradient(Infinity, 0, Infinity, Infinity);
5941 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5942 var _thrown = undefined; try {
5943   ctx.createLinearGradient(Infinity, 0, 1, Infinity);
5944 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5945 var _thrown = undefined; try {
5946   ctx.createLinearGradient(0, Infinity, Infinity, 0);
5947 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5948 var _thrown = undefined; try {
5949   ctx.createLinearGradient(0, Infinity, Infinity, Infinity);
5950 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5951 var _thrown = undefined; try {
5952   ctx.createLinearGradient(0, Infinity, 1, Infinity);
5953 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5954 var _thrown = undefined; try {
5955   ctx.createLinearGradient(0, 0, Infinity, Infinity);
5956 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
5957
5958
5959 }
5960 </script>
5961
5962 <!-- [[[ test_2d.gradient.linear.transform.1.html ]]] -->
5963
5964 <p>Canvas test: 2d.gradient.linear.transform.1</p>
5965 <!-- Testing: Linear gradient coordinates are relative to the coordinate space at the time of filling -->
5966 <canvas id="c221" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5967 <script>
5968
5969
5970 function test_2d_gradient_linear_transform_1() {
5971
5972 var canvas = document.getElementById('c221');
5973 var ctx = canvas.getContext('2d');
5974
5975 var g = ctx.createLinearGradient(0, 0, 200, 0);
5976 g.addColorStop(0, '#f00');
5977 g.addColorStop(0.25, '#0f0');
5978 g.addColorStop(0.75, '#0f0');
5979 g.addColorStop(1, '#f00');
5980 ctx.fillStyle = g;
5981 ctx.translate(-50, 0);
5982 ctx.fillRect(50, 0, 100, 50);
5983 isPixel(ctx, 25,25, 0,255,0,255, 0);
5984 isPixel(ctx, 50,25, 0,255,0,255, 0);
5985 isPixel(ctx, 75,25, 0,255,0,255, 0);
5986
5987
5988 }
5989 </script>
5990
5991 <!-- [[[ test_2d.gradient.linear.transform.2.html ]]] -->
5992
5993 <p>Canvas test: 2d.gradient.linear.transform.2</p>
5994 <!-- Testing: Linear gradient coordinates are relative to the coordinate space at the time of filling -->
5995 <canvas id="c222" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
5996 <script>
5997
5998
5999 function test_2d_gradient_linear_transform_2() {
6000
6001 var canvas = document.getElementById('c222');
6002 var ctx = canvas.getContext('2d');
6003
6004 ctx.translate(100, 0);
6005 var g = ctx.createLinearGradient(0, 0, 200, 0);
6006 g.addColorStop(0, '#f00');
6007 g.addColorStop(0.25, '#0f0');
6008 g.addColorStop(0.75, '#0f0');
6009 g.addColorStop(1, '#f00');
6010 ctx.fillStyle = g;
6011 ctx.translate(-150, 0);
6012 ctx.fillRect(50, 0, 100, 50);
6013 isPixel(ctx, 25,25, 0,255,0,255, 0);
6014 isPixel(ctx, 50,25, 0,255,0,255, 0);
6015 isPixel(ctx, 75,25, 0,255,0,255, 0);
6016
6017
6018 }
6019 </script>
6020
6021 <!-- [[[ test_2d.gradient.linear.transform.3.html ]]] -->
6022
6023 <p>Canvas test: 2d.gradient.linear.transform.3</p>
6024 <!-- Testing: Linear gradient transforms do not experience broken caching effects -->
6025 <canvas id="c223" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6026 <script>
6027
6028
6029
6030 function test_2d_gradient_linear_transform_3() {
6031
6032 var canvas = document.getElementById('c223');
6033 var ctx = canvas.getContext('2d');
6034
6035 var g = ctx.createLinearGradient(0, 0, 200, 0);
6036 g.addColorStop(0, '#f00');
6037 g.addColorStop(0.25, '#0f0');
6038 g.addColorStop(0.75, '#0f0');
6039 g.addColorStop(1, '#f00');
6040 ctx.fillStyle = g;
6041 ctx.fillRect(0, 0, 100, 50);
6042 ctx.translate(-50, 0);
6043 ctx.fillRect(50, 0, 100, 50);
6044
6045 isPixel(ctx, 25,25, 0,255,0,255, 0);
6046 isPixel(ctx, 50,25, 0,255,0,255, 0);
6047 isPixel(ctx, 75,25, 0,255,0,255, 0);
6048 }
6049 </script>
6050
6051 <!-- [[[ test_2d.gradient.object.compare.html ]]] -->
6052
6053 <p>Canvas test: 2d.gradient.object.compare</p>
6054 <canvas id="c224" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6055 <script>
6056
6057 function test_2d_gradient_object_compare() {
6058
6059 var canvas = document.getElementById('c224');
6060 var ctx = canvas.getContext('2d');
6061
6062 var g1 = ctx.createLinearGradient(0, 0, 100, 0);
6063 var g2 = ctx.createLinearGradient(0, 0, 100, 0);
6064 ok(g1 !== g2, "g1 !== g2");
6065 ctx.fillStyle = g1;
6066 ok(ctx.fillStyle === g1, "ctx.fillStyle === g1");
6067
6068
6069 }
6070 </script>
6071
6072 <!-- [[[ test_2d.gradient.object.crosscanvas.html ]]] -->
6073
6074 <p>Canvas test: 2d.gradient.object.crosscanvas</p>
6075 <canvas id="c225" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6076 <script>
6077
6078
6079 function test_2d_gradient_object_crosscanvas() {
6080
6081 var canvas = document.getElementById('c225');
6082 var ctx = canvas.getContext('2d');
6083
6084 ctx.fillStyle = '#f00';
6085 ctx.fillRect(0, 0, 100, 50);
6086 var g = document.createElement('canvas').getContext('2d').createLinearGradient(0, 0, 100, 0);
6087 g.addColorStop(0, '#0f0');
6088 g.addColorStop(1, '#0f0');
6089 ctx.fillStyle = g;
6090 ctx.fillRect(0, 0, 100, 50);
6091 isPixel(ctx, 50,25, 0,255,0,255, 2);
6092
6093
6094 }
6095 </script>
6096
6097 <!-- [[[ test_2d.gradient.object.invalidcolour.html ]]] -->
6098
6099 <p>Canvas test: 2d.gradient.object.invalidcolour</p>
6100 <canvas id="c226" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6101 <script>
6102
6103 function test_2d_gradient_object_invalidcolour() {
6104
6105 var canvas = document.getElementById('c226');
6106 var ctx = canvas.getContext('2d');
6107
6108 var g = ctx.createLinearGradient(0, 0, 100, 0);
6109 var _thrown = undefined; try {
6110   g.addColorStop(0, "");
6111 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
6112 var _thrown = undefined; try {
6113   g.addColorStop(0, 'undefined');
6114 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
6115
6116
6117 }
6118 </script>
6119
6120 <!-- [[[ test_2d.gradient.object.invalidoffset.html ]]] -->
6121
6122 <p>Canvas test: 2d.gradient.object.invalidoffset</p>
6123 <canvas id="c227" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6124 <script>
6125
6126 function test_2d_gradient_object_invalidoffset() {
6127
6128 var canvas = document.getElementById('c227');
6129 var ctx = canvas.getContext('2d');
6130
6131 var g = ctx.createLinearGradient(0, 0, 100, 0);
6132 var _thrown = undefined; try {
6133   g.addColorStop(-1, '#000');
6134 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6135 var _thrown = undefined; try {
6136   g.addColorStop(2, '#000');
6137 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6138 var _thrown = undefined; try {
6139   g.addColorStop(Infinity, '#000');
6140 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
6141 var _thrown = undefined; try {
6142   g.addColorStop(-Infinity, '#000');
6143 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
6144 var _thrown = undefined; try {
6145   g.addColorStop(NaN, '#000');
6146 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
6147
6148
6149 }
6150 </script>
6151
6152 <!-- [[[ test_2d.gradient.object.return.html ]]] -->
6153
6154 <p>Canvas test: 2d.gradient.object.return</p>
6155 <!-- Testing: createLinearGradient() and createRadialGradient() returns objects implementing CanvasGradient -->
6156 <canvas id="c228" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6157 <script>
6158
6159 function test_2d_gradient_object_return() {
6160
6161 var canvas = document.getElementById('c228');
6162 var ctx = canvas.getContext('2d');
6163
6164 window.CanvasGradient.prototype.thisImplementsCanvasGradient = true;
6165
6166 var g1 = ctx.createLinearGradient(0, 0, 100, 0);
6167 ok(g1.addColorStop !== undefined, "g1.addColorStop !== undefined");
6168 ok(g1.thisImplementsCanvasGradient === true, "g1.thisImplementsCanvasGradient === true");
6169
6170 var g2 = ctx.createRadialGradient(0, 0, 10, 0, 0, 20);
6171 ok(g2.addColorStop !== undefined, "g2.addColorStop !== undefined");
6172 ok(g2.thisImplementsCanvasGradient === true, "g2.thisImplementsCanvasGradient === true");
6173
6174
6175 }
6176 </script>
6177
6178 <!-- [[[ test_2d.gradient.object.type.html ]]] -->
6179
6180 <p>Canvas test: 2d.gradient.object.type</p>
6181 <!-- Testing: window.CanvasGradient exists and has the right properties -->
6182 <canvas id="c229" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6183 <script>
6184
6185 function test_2d_gradient_object_type() {
6186
6187 var canvas = document.getElementById('c229');
6188 var ctx = canvas.getContext('2d');
6189
6190 ok(window.CanvasGradient !== undefined, "window.CanvasGradient !== undefined");
6191 ok(window.CanvasGradient.prototype.addColorStop !== undefined, "window.CanvasGradient.prototype.addColorStop !== undefined");
6192
6193
6194 }
6195 </script>
6196
6197 <!-- [[[ test_2d.gradient.object.update.html ]]] -->
6198
6199 <p>Canvas test: 2d.gradient.object.update</p>
6200 <canvas id="c230" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6201 <script>
6202
6203
6204 function test_2d_gradient_object_update() {
6205
6206 var canvas = document.getElementById('c230');
6207 var ctx = canvas.getContext('2d');
6208
6209 var g = ctx.createLinearGradient(-100, 0, 200, 0);
6210 g.addColorStop(0, '#f00');
6211 g.addColorStop(1, '#f00');
6212 ctx.fillStyle = g;
6213 g.addColorStop(0.1, '#0f0');
6214 g.addColorStop(0.9, '#0f0');
6215 ctx.fillRect(0, 0, 100, 50);
6216 isPixel(ctx, 50,25, 0,255,0,255, 2);
6217
6218
6219 }
6220 </script>
6221
6222 <!-- [[[ test_2d.gradient.radial.cone.behind.html ]]] -->
6223
6224 <p>Canvas test: 2d.gradient.radial.cone.behind</p>
6225 <canvas id="c231" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6226 <script>
6227
6228
6229
6230 function test_2d_gradient_radial_cone_behind() {
6231
6232 var canvas = document.getElementById('c231');
6233 var ctx = canvas.getContext('2d');
6234
6235 ctx.fillStyle = '#0f0';
6236 ctx.fillRect(0, 0, 100, 50);
6237
6238 var g = ctx.createRadialGradient(120, 25, 10, 211, 25, 100);
6239 g.addColorStop(0, '#f00');
6240 g.addColorStop(1, '#f00');
6241 ctx.fillStyle = g;
6242 ctx.fillRect(0, 0, 100, 50);
6243
6244 isPixel(ctx, 1,1, 0,255,0,255, 0);
6245 isPixel(ctx, 50,1, 0,255,0,255, 0);
6246 isPixel(ctx, 98,1, 0,255,0,255, 0);
6247 isPixel(ctx, 1,25, 0,255,0,255, 0);
6248 isPixel(ctx, 50,25, 0,255,0,255, 0);
6249 isPixel(ctx, 98,25, 0,255,0,255, 0);
6250 isPixel(ctx, 1,48, 0,255,0,255, 0);
6251 isPixel(ctx, 50,48, 0,255,0,255, 0);
6252 isPixel(ctx, 98,48, 0,255,0,255, 0);
6253
6254
6255 }
6256 </script>
6257
6258 <!-- [[[ test_2d.gradient.radial.cone.beside.html ]]] -->
6259
6260 <p>Canvas test: 2d.gradient.radial.cone.beside</p>
6261 <canvas id="c232" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6262 <script>
6263
6264
6265
6266 function test_2d_gradient_radial_cone_beside() {
6267
6268 var canvas = document.getElementById('c232');
6269 var ctx = canvas.getContext('2d');
6270
6271 ctx.fillStyle = '#0f0';
6272 ctx.fillRect(0, 0, 100, 50);
6273
6274 var g = ctx.createRadialGradient(0, 100, 40, 100, 100, 50);
6275 g.addColorStop(0, '#f00');
6276 g.addColorStop(1, '#f00');
6277 ctx.fillStyle = g;
6278 ctx.fillRect(0, 0, 100, 50);
6279
6280 isPixel(ctx, 1,1, 0,255,0,255, 0);
6281 isPixel(ctx, 50,1, 0,255,0,255, 0);
6282 isPixel(ctx, 98,1, 0,255,0,255, 0);
6283 isPixel(ctx, 1,25, 0,255,0,255, 0);
6284 isPixel(ctx, 50,25, 0,255,0,255, 0);
6285 isPixel(ctx, 98,25, 0,255,0,255, 0);
6286 isPixel(ctx, 1,48, 0,255,0,255, 0);
6287 isPixel(ctx, 50,48, 0,255,0,255, 0);
6288 isPixel(ctx, 98,48, 0,255,0,255, 0);
6289
6290
6291 }
6292 </script>
6293
6294 <!-- [[[ test_2d.gradient.radial.cone.bottom.html ]]] -->
6295
6296 <p>Canvas test: 2d.gradient.radial.cone.bottom</p>
6297 <canvas id="c233" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6298 <script>
6299
6300
6301 function test_2d_gradient_radial_cone_bottom() {
6302
6303 var canvas = document.getElementById('c233');
6304 var ctx = canvas.getContext('2d');
6305
6306 ctx.fillStyle = '#f00';
6307 ctx.fillRect(0, 0, 100, 50);
6308
6309 var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 101);
6310 g.addColorStop(0, '#0f0');
6311 g.addColorStop(1, '#f00');
6312 ctx.fillStyle = g;
6313 ctx.fillRect(0, 0, 100, 50);
6314
6315 isPixel(ctx, 1,1, 0,255,0,255, 0);
6316 isPixel(ctx, 50,1, 0,255,0,255, 0);
6317 isPixel(ctx, 98,1, 0,255,0,255, 0);
6318 isPixel(ctx, 1,25, 0,255,0,255, 0);
6319 isPixel(ctx, 50,25, 0,255,0,255, 0);
6320 isPixel(ctx, 98,25, 0,255,0,255, 0);
6321 isPixel(ctx, 1,48, 0,255,0,255, 0);
6322 isPixel(ctx, 50,48, 0,255,0,255, 0);
6323 isPixel(ctx, 98,48, 0,255,0,255, 0);
6324
6325
6326 }
6327 </script>
6328
6329 <!-- [[[ test_2d.gradient.radial.cone.cylinder.html ]]] -->
6330
6331 <p>Canvas test: 2d.gradient.radial.cone.cylinder</p>
6332 <canvas id="c234" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6333 <script>
6334
6335
6336 function test_2d_gradient_radial_cone_cylinder() {
6337
6338 var canvas = document.getElementById('c234');
6339 var ctx = canvas.getContext('2d');
6340
6341 ctx.fillStyle = '#f00';
6342 ctx.fillRect(0, 0, 100, 50);
6343
6344 var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 100);
6345 g.addColorStop(0, '#0f0');
6346 g.addColorStop(1, '#f00');
6347 ctx.fillStyle = g;
6348 ctx.fillRect(0, 0, 100, 50);
6349
6350 isPixel(ctx, 1, 1, 0, 255, 0, 255, 0);
6351 isPixel(ctx, 50, 1, 0, 255, 0, 255, 0);
6352 isPixel(ctx, 98, 1, 0, 255, 0, 255, 0);
6353 isPixel(ctx, 1, 25, 0, 255, 0, 255, 0);
6354 isPixel(ctx, 50, 25, 0, 255, 0, 255, 0);
6355 isPixel(ctx, 98, 25, 0, 255, 0, 255, 0);
6356 isPixel(ctx, 1, 48, 0, 255, 0, 255, 0);
6357 isPixel(ctx, 50, 48, 0, 255, 0, 255, 0);
6358 isPixel(ctx, 98, 48, 0, 255, 0, 255, 0);
6359
6360 }
6361 </script>
6362
6363 <!-- [[[ test_2d.gradient.radial.cone.front.html ]]] -->
6364
6365 <p>Canvas test: 2d.gradient.radial.cone.front</p>
6366 <canvas id="c235" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6367 <script>
6368
6369
6370 function test_2d_gradient_radial_cone_front() {
6371
6372 var canvas = document.getElementById('c235');
6373 var ctx = canvas.getContext('2d');
6374
6375 ctx.fillStyle = '#f00';
6376 ctx.fillRect(0, 0, 100, 50);
6377
6378 var g = ctx.createRadialGradient(311, 25, 10, 210, 25, 100);
6379 g.addColorStop(0, '#f00');
6380 g.addColorStop(1, '#0f0');
6381 ctx.fillStyle = g;
6382 ctx.fillRect(0, 0, 100, 50);
6383
6384 isPixel(ctx, 1,1, 0,255,0,255, 0);
6385 isPixel(ctx, 50,1, 0,255,0,255, 0);
6386 isPixel(ctx, 98,1, 0,255,0,255, 0);
6387 isPixel(ctx, 1,25, 0,255,0,255, 0);
6388 isPixel(ctx, 50,25, 0,255,0,255, 0);
6389 isPixel(ctx, 98,25, 0,255,0,255, 0);
6390 isPixel(ctx, 1,48, 0,255,0,255, 0);
6391 isPixel(ctx, 50,48, 0,255,0,255, 0);
6392 isPixel(ctx, 98,48, 0,255,0,255, 0);
6393
6394
6395 }
6396 </script>
6397
6398 <!-- [[[ test_2d.gradient.radial.cone.shape1.html ]]] -->
6399
6400 <p>Canvas test: 2d.gradient.radial.cone.shape1</p>
6401 <canvas id="c236" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6402 <script>
6403
6404
6405 function test_2d_gradient_radial_cone_shape1() {
6406
6407 var canvas = document.getElementById('c236');
6408 var ctx = canvas.getContext('2d');
6409
6410 var tol = 1; // tolerance to avoid antialiasing artifacts
6411
6412 ctx.fillStyle = '#0f0';
6413 ctx.fillRect(0, 0, 100, 50);
6414
6415 ctx.fillStyle = '#f00';
6416 ctx.beginPath();
6417 ctx.moveTo(30+tol, 40);
6418 ctx.lineTo(110, -20+tol);
6419 ctx.lineTo(110, 100-tol);
6420 ctx.fill();
6421
6422 var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
6423 g.addColorStop(0, '#0f0');
6424 g.addColorStop(1, '#0f0');
6425 ctx.fillStyle = g;
6426 ctx.fillRect(0, 0, 100, 50);
6427
6428 isPixel(ctx, 1,1, 0,255,0,255, 0);
6429 isPixel(ctx, 50,1, 0,255,0,255, 0);
6430 isPixel(ctx, 98,1, 0,255,0,255, 0);
6431 isPixel(ctx, 1,25, 0,255,0,255, 0);
6432 isPixel(ctx, 50,25, 0,255,0,255, 0);
6433 isPixel(ctx, 98,25, 0,255,0,255, 0);
6434 isPixel(ctx, 1,48, 0,255,0,255, 0);
6435 isPixel(ctx, 50,48, 0,255,0,255, 0);
6436 isPixel(ctx, 98,48, 0,255,0,255, 0);
6437
6438
6439 }
6440 </script>
6441
6442 <!-- [[[ test_2d.gradient.radial.cone.shape2.html ]]] -->
6443
6444 <p>Canvas test: 2d.gradient.radial.cone.shape2</p>
6445 <canvas id="c237" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6446 <script>
6447
6448
6449
6450 function test_2d_gradient_radial_cone_shape2() {
6451
6452 var canvas = document.getElementById('c237');
6453 var ctx = canvas.getContext('2d');
6454
6455 var tol = 1; // tolerance to avoid antialiasing artifacts
6456
6457 ctx.fillStyle = '#0f0';
6458 ctx.fillRect(0, 0, 100, 50);
6459
6460 var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
6461 g.addColorStop(0, '#f00');
6462 g.addColorStop(1, '#f00');
6463 ctx.fillStyle = g;
6464 ctx.fillRect(0, 0, 100, 50);
6465
6466 ctx.fillStyle = '#0f0';
6467 ctx.beginPath();
6468 ctx.moveTo(30-tol, 40);
6469 ctx.lineTo(110, -20-tol);
6470 ctx.lineTo(110, 100+tol);
6471 ctx.fill();
6472
6473 isPixel(ctx, 1,1, 0,255,0,255, 0);
6474 isPixel(ctx, 50,1, 0,255,0,255, 0);
6475 isPixel(ctx, 98,1, 0,255,0,255, 0);
6476 isPixel(ctx, 1,25, 0,255,0,255, 0);
6477 isPixel(ctx, 50,25, 0,255,0,255, 0);
6478 isPixel(ctx, 98,25, 0,255,0,255, 0);
6479 isPixel(ctx, 1,48, 0,255,0,255, 0);
6480 isPixel(ctx, 50,48, 0,255,0,255, 0);
6481 isPixel(ctx, 98,48, 0,255,0,255, 0);
6482
6483
6484 }
6485 </script>
6486
6487 <!-- [[[ test_2d.gradient.radial.cone.top.html ]]] -->
6488
6489 <p>Canvas test: 2d.gradient.radial.cone.top</p>
6490 <canvas id="c238" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6491 <script>
6492
6493
6494 function test_2d_gradient_radial_cone_top() {
6495
6496 var canvas = document.getElementById('c238');
6497 var ctx = canvas.getContext('2d');
6498
6499 ctx.fillStyle = '#f00';
6500 ctx.fillRect(0, 0, 100, 50);
6501
6502 var g = ctx.createRadialGradient(230, 25, 100, 100, 25, 101);
6503 g.addColorStop(0, '#f00');
6504 g.addColorStop(1, '#0f0');
6505 ctx.fillStyle = g;
6506 ctx.fillRect(0, 0, 100, 50);
6507
6508 isPixel(ctx, 1, 1, 0, 255, 0, 255, 0);
6509 isPixel(ctx, 50, 1, 0, 255, 0, 255, 0);
6510 isPixel(ctx, 98, 1, 0, 255, 0, 255, 0);
6511 isPixel(ctx, 1, 25, 0, 255, 0, 255, 0);
6512 isPixel(ctx, 50, 25, 0, 255, 0, 255, 0);
6513 isPixel(ctx, 98, 25, 0, 255, 0, 255, 0);
6514 isPixel(ctx, 1, 48, 0, 255, 0, 255, 0);
6515 isPixel(ctx, 50, 48, 0, 255, 0, 255, 0);
6516 isPixel(ctx, 98, 48, 0, 255, 0, 255, 0);
6517
6518 }
6519 </script>
6520
6521 <!-- [[[ test_2d.gradient.radial.equal.html ]]] -->
6522
6523 <p>Canvas test: 2d.gradient.radial.equal</p>
6524 <canvas id="c239" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6525 <script>
6526
6527
6528
6529 function test_2d_gradient_radial_equal() {
6530
6531 var canvas = document.getElementById('c239');
6532 var ctx = canvas.getContext('2d');
6533
6534 ctx.fillStyle = '#0f0';
6535 ctx.fillRect(0, 0, 100, 50);
6536
6537 var g = ctx.createRadialGradient(50, 25, 20, 50, 25, 20);
6538 g.addColorStop(0, '#f00');
6539 g.addColorStop(1, '#f00');
6540 ctx.fillStyle = g;
6541 ctx.fillRect(0, 0, 100, 50);
6542
6543 isPixel(ctx, 1,1, 0,255,0,255, 0);
6544 isPixel(ctx, 50,1, 0,255,0,255, 0);
6545 isPixel(ctx, 98,1, 0,255,0,255, 0);
6546 isPixel(ctx, 1,25, 0,255,0,255, 0);
6547 isPixel(ctx, 50,25, 0,255,0,255, 0);
6548 isPixel(ctx, 98,25, 0,255,0,255, 0);
6549 isPixel(ctx, 1,48, 0,255,0,255, 0);
6550 isPixel(ctx, 50,48, 0,255,0,255, 0);
6551 isPixel(ctx, 98,48, 0,255,0,255, 0);
6552
6553
6554 }
6555 </script>
6556
6557 <!-- [[[ test_2d.gradient.radial.inside1.html ]]] -->
6558
6559 <p>Canvas test: 2d.gradient.radial.inside1</p>
6560 <canvas id="c240" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6561 <script>
6562
6563
6564 function test_2d_gradient_radial_inside1() {
6565
6566 var canvas = document.getElementById('c240');
6567 var ctx = canvas.getContext('2d');
6568
6569 ctx.fillStyle = '#f00';
6570 ctx.fillRect(0, 0, 100, 50);
6571
6572 var g = ctx.createRadialGradient(50, 25, 100, 50, 25, 200);
6573 g.addColorStop(0, '#0f0');
6574 g.addColorStop(1, '#f00');
6575 ctx.fillStyle = g;
6576 ctx.fillRect(0, 0, 100, 50);
6577
6578 isPixel(ctx, 1,1, 0,255,0,255, 0);
6579 isPixel(ctx, 50,1, 0,255,0,255, 0);
6580 isPixel(ctx, 98,1, 0,255,0,255, 0);
6581 isPixel(ctx, 1,25, 0,255,0,255, 0);
6582 isPixel(ctx, 50,25, 0,255,0,255, 0);
6583 isPixel(ctx, 98,25, 0,255,0,255, 0);
6584 isPixel(ctx, 1,48, 0,255,0,255, 0);
6585 isPixel(ctx, 50,48, 0,255,0,255, 0);
6586 isPixel(ctx, 98,48, 0,255,0,255, 0);
6587
6588
6589 }
6590 </script>
6591
6592 <!-- [[[ test_2d.gradient.radial.inside2.html ]]] -->
6593
6594 <p>Canvas test: 2d.gradient.radial.inside2</p>
6595 <canvas id="c241" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6596 <script>
6597
6598
6599 function test_2d_gradient_radial_inside2() {
6600
6601 var canvas = document.getElementById('c241');
6602 var ctx = canvas.getContext('2d');
6603
6604 ctx.fillStyle = '#f00';
6605 ctx.fillRect(0, 0, 100, 50);
6606
6607 var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
6608 g.addColorStop(0, '#f00');
6609 g.addColorStop(1, '#0f0');
6610 ctx.fillStyle = g;
6611 ctx.fillRect(0, 0, 100, 50);
6612
6613 isPixel(ctx, 1,1, 0,255,0,255, 0);
6614 isPixel(ctx, 50,1, 0,255,0,255, 0);
6615 isPixel(ctx, 98,1, 0,255,0,255, 0);
6616 isPixel(ctx, 1,25, 0,255,0,255, 0);
6617 isPixel(ctx, 50,25, 0,255,0,255, 0);
6618 isPixel(ctx, 98,25, 0,255,0,255, 0);
6619 isPixel(ctx, 1,48, 0,255,0,255, 0);
6620 isPixel(ctx, 50,48, 0,255,0,255, 0);
6621 isPixel(ctx, 98,48, 0,255,0,255, 0);
6622
6623
6624 }
6625 </script>
6626
6627 <!-- [[[ test_2d.gradient.radial.inside3.html ]]] -->
6628
6629 <p>Canvas test: 2d.gradient.radial.inside3</p>
6630 <canvas id="c242" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6631 <script>
6632
6633
6634 function test_2d_gradient_radial_inside3() {
6635
6636 var canvas = document.getElementById('c242');
6637 var ctx = canvas.getContext('2d');
6638
6639 ctx.fillStyle = '#f00';
6640 ctx.fillRect(0, 0, 100, 50);
6641
6642 var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
6643 g.addColorStop(0, '#f00');
6644 g.addColorStop(0.993, '#f00');
6645 g.addColorStop(1, '#0f0');
6646 ctx.fillStyle = g;
6647 ctx.fillRect(0, 0, 100, 50);
6648
6649 isPixel(ctx, 1,1, 0,255,0,255, 0);
6650 isPixel(ctx, 50,1, 0,255,0,255, 0);
6651 isPixel(ctx, 98,1, 0,255,0,255, 0);
6652 isPixel(ctx, 1,25, 0,255,0,255, 0);
6653 isPixel(ctx, 50,25, 0,255,0,255, 0);
6654 isPixel(ctx, 98,25, 0,255,0,255, 0);
6655 isPixel(ctx, 1,48, 0,255,0,255, 0);
6656 isPixel(ctx, 50,48, 0,255,0,255, 0);
6657 isPixel(ctx, 98,48, 0,255,0,255, 0);
6658
6659
6660 }
6661 </script>
6662
6663 <!-- [[[ test_2d.gradient.radial.negative.html ]]] -->
6664
6665 <p>Canvas test: 2d.gradient.radial.negative</p>
6666 <!-- Testing: createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative -->
6667 <canvas id="c243" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6668 <script>
6669
6670 function test_2d_gradient_radial_negative() {
6671
6672 var canvas = document.getElementById('c243');
6673 var ctx = canvas.getContext('2d');
6674
6675 var _thrown = undefined; try {
6676   ctx.createRadialGradient(0, 0, -0.1, 0, 0, 1);
6677 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6678 var _thrown = undefined; try {
6679   ctx.createRadialGradient(0, 0, 1, 0, 0, -0.1);
6680 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6681 var _thrown = undefined; try {
6682   ctx.createRadialGradient(0, 0, -0.1, 0, 0, -0.1);
6683 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
6684
6685
6686 }
6687 </script>
6688
6689 <!-- [[[ test_2d.gradient.radial.nonfinite.html ]]] -->
6690
6691 <p>Canvas test: 2d.gradient.radial.nonfinite</p>
6692 <!-- Testing: createRadialGradient() throws NOT_SUPPORTED_ERR if arguments are not finite -->
6693 <canvas id="c244" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6694 <script>
6695
6696 // eslint-disable-next-line complexity
6697 function test_2d_gradient_radial_nonfinite() {
6698
6699 var canvas = document.getElementById('c244');
6700 var ctx = canvas.getContext('2d');
6701
6702 var _thrown = undefined; try {
6703   ctx.createRadialGradient(Infinity, 0, 1, 0, 0, 1);
6704 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6705 var _thrown = undefined; try {
6706   ctx.createRadialGradient(-Infinity, 0, 1, 0, 0, 1);
6707 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6708 var _thrown = undefined; try {
6709   ctx.createRadialGradient(NaN, 0, 1, 0, 0, 1);
6710 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6711 var _thrown = undefined; try {
6712   ctx.createRadialGradient(0, Infinity, 1, 0, 0, 1);
6713 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6714 var _thrown = undefined; try {
6715   ctx.createRadialGradient(0, -Infinity, 1, 0, 0, 1);
6716 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6717 var _thrown = undefined; try {
6718   ctx.createRadialGradient(0, NaN, 1, 0, 0, 1);
6719 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6720 var _thrown = undefined; try {
6721   ctx.createRadialGradient(0, 0, Infinity, 0, 0, 1);
6722 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6723 var _thrown = undefined; try {
6724   ctx.createRadialGradient(0, 0, -Infinity, 0, 0, 1);
6725 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6726 var _thrown = undefined; try {
6727   ctx.createRadialGradient(0, 0, NaN, 0, 0, 1);
6728 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6729 var _thrown = undefined; try {
6730   ctx.createRadialGradient(0, 0, 1, Infinity, 0, 1);
6731 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6732 var _thrown = undefined; try {
6733   ctx.createRadialGradient(0, 0, 1, -Infinity, 0, 1);
6734 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6735 var _thrown = undefined; try {
6736   ctx.createRadialGradient(0, 0, 1, NaN, 0, 1);
6737 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6738 var _thrown = undefined; try {
6739   ctx.createRadialGradient(0, 0, 1, 0, Infinity, 1);
6740 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6741 var _thrown = undefined; try {
6742   ctx.createRadialGradient(0, 0, 1, 0, -Infinity, 1);
6743 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6744 var _thrown = undefined; try {
6745   ctx.createRadialGradient(0, 0, 1, 0, NaN, 1);
6746 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6747 var _thrown = undefined; try {
6748   ctx.createRadialGradient(0, 0, 1, 0, 0, Infinity);
6749 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6750 var _thrown = undefined; try {
6751   ctx.createRadialGradient(0, 0, 1, 0, 0, -Infinity);
6752 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6753 var _thrown = undefined; try {
6754   ctx.createRadialGradient(0, 0, 1, 0, 0, NaN);
6755 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6756 var _thrown = undefined; try {
6757   ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, 1);
6758 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6759 var _thrown = undefined; try {
6760   ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, 1);
6761 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6762 var _thrown = undefined; try {
6763   ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, 1);
6764 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6765 var _thrown = undefined; try {
6766   ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, 1);
6767 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6768 var _thrown = undefined; try {
6769   ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
6770 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6771 var _thrown = undefined; try {
6772   ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
6773 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6774 var _thrown = undefined; try {
6775   ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, 1);
6776 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6777 var _thrown = undefined; try {
6778   ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
6779 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6780 var _thrown = undefined; try {
6781   ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, Infinity);
6782 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6783 var _thrown = undefined; try {
6784   ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, 1);
6785 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6786 var _thrown = undefined; try {
6787   ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, 1);
6788 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6789 var _thrown = undefined; try {
6790   ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, Infinity);
6791 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6792 var _thrown = undefined; try {
6793   ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, Infinity);
6794 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6795 var _thrown = undefined; try {
6796   ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, 1);
6797 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6798 var _thrown = undefined; try {
6799   ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, Infinity);
6800 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6801 var _thrown = undefined; try {
6802   ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, Infinity);
6803 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6804 var _thrown = undefined; try {
6805   ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, 1);
6806 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6807 var _thrown = undefined; try {
6808   ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, 1);
6809 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6810 var _thrown = undefined; try {
6811   ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, 1);
6812 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6813 var _thrown = undefined; try {
6814   ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
6815 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6816 var _thrown = undefined; try {
6817   ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, Infinity);
6818 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6819 var _thrown = undefined; try {
6820   ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, 1);
6821 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6822 var _thrown = undefined; try {
6823   ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, Infinity);
6824 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6825 var _thrown = undefined; try {
6826   ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, Infinity);
6827 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6828 var _thrown = undefined; try {
6829   ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, 1);
6830 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6831 var _thrown = undefined; try {
6832   ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, 1);
6833 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6834 var _thrown = undefined; try {
6835   ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, Infinity);
6836 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6837 var _thrown = undefined; try {
6838   ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, Infinity);
6839 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6840 var _thrown = undefined; try {
6841   ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, 1);
6842 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6843 var _thrown = undefined; try {
6844   ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, Infinity);
6845 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6846 var _thrown = undefined; try {
6847   ctx.createRadialGradient(Infinity, 0, 1, 0, 0, Infinity);
6848 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6849 var _thrown = undefined; try {
6850   ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, 1);
6851 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6852 var _thrown = undefined; try {
6853   ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, 1);
6854 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6855 var _thrown = undefined; try {
6856   ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, 1);
6857 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6858 var _thrown = undefined; try {
6859   ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, Infinity);
6860 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6861 var _thrown = undefined; try {
6862   ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, Infinity);
6863 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6864 var _thrown = undefined; try {
6865   ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, 1);
6866 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6867 var _thrown = undefined; try {
6868   ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, Infinity);
6869 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6870 var _thrown = undefined; try {
6871   ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, Infinity);
6872 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6873 var _thrown = undefined; try {
6874   ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, 1);
6875 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6876 var _thrown = undefined; try {
6877   ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, 1);
6878 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6879 var _thrown = undefined; try {
6880   ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, Infinity);
6881 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6882 var _thrown = undefined; try {
6883   ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, Infinity);
6884 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6885 var _thrown = undefined; try {
6886   ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, 1);
6887 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6888 var _thrown = undefined; try {
6889   ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, Infinity);
6890 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6891 var _thrown = undefined; try {
6892   ctx.createRadialGradient(0, Infinity, 1, 0, 0, Infinity);
6893 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6894 var _thrown = undefined; try {
6895   ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, 1);
6896 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6897 var _thrown = undefined; try {
6898   ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, 1);
6899 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6900 var _thrown = undefined; try {
6901   ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, Infinity);
6902 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6903 var _thrown = undefined; try {
6904   ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, Infinity);
6905 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6906 var _thrown = undefined; try {
6907   ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, 1);
6908 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6909 var _thrown = undefined; try {
6910   ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, Infinity);
6911 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6912 var _thrown = undefined; try {
6913   ctx.createRadialGradient(0, 0, Infinity, 0, 0, Infinity);
6914 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6915 var _thrown = undefined; try {
6916   ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, 1);
6917 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6918 var _thrown = undefined; try {
6919   ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, Infinity);
6920 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6921 var _thrown = undefined; try {
6922   ctx.createRadialGradient(0, 0, 1, Infinity, 0, Infinity);
6923 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6924 var _thrown = undefined; try {
6925   ctx.createRadialGradient(0, 0, 1, 0, Infinity, Infinity);
6926 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
6927
6928
6929 }
6930 </script>
6931
6932 <!-- [[[ test_2d.gradient.radial.outside1.html ]]] -->
6933
6934 <p>Canvas test: 2d.gradient.radial.outside1</p>
6935 <canvas id="c245" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6936 <script>
6937
6938
6939 function test_2d_gradient_radial_outside1() {
6940
6941 var canvas = document.getElementById('c245');
6942 var ctx = canvas.getContext('2d');
6943
6944 ctx.fillStyle = '#f00';
6945 ctx.fillRect(0, 0, 100, 50);
6946
6947 var g = ctx.createRadialGradient(200, 25, 10, 200, 25, 20);
6948 g.addColorStop(0, '#f00');
6949 g.addColorStop(1, '#0f0');
6950 ctx.fillStyle = g;
6951 ctx.fillRect(0, 0, 100, 50);
6952
6953 isPixel(ctx, 1,1, 0,255,0,255, 0);
6954 isPixel(ctx, 50,1, 0,255,0,255, 0);
6955 isPixel(ctx, 98,1, 0,255,0,255, 0);
6956 isPixel(ctx, 1,25, 0,255,0,255, 0);
6957 isPixel(ctx, 50,25, 0,255,0,255, 0);
6958 isPixel(ctx, 98,25, 0,255,0,255, 0);
6959 isPixel(ctx, 1,48, 0,255,0,255, 0);
6960 isPixel(ctx, 50,48, 0,255,0,255, 0);
6961 isPixel(ctx, 98,48, 0,255,0,255, 0);
6962
6963
6964 }
6965 </script>
6966
6967 <!-- [[[ test_2d.gradient.radial.outside2.html ]]] -->
6968
6969 <p>Canvas test: 2d.gradient.radial.outside2</p>
6970 <canvas id="c246" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
6971 <script>
6972
6973
6974
6975 function test_2d_gradient_radial_outside2() {
6976
6977 var canvas = document.getElementById('c246');
6978 var ctx = canvas.getContext('2d');
6979
6980 ctx.fillStyle = '#f00';
6981 ctx.fillRect(0, 0, 100, 50);
6982
6983 var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
6984 g.addColorStop(0, '#0f0');
6985 g.addColorStop(1, '#f00');
6986 ctx.fillStyle = g;
6987 ctx.fillRect(0, 0, 100, 50);
6988
6989 isPixel(ctx, 1,1, 0,255,0,255, 0);
6990 isPixel(ctx, 50,1, 0,255,0,255, 0);
6991 isPixel(ctx, 98,1, 0,255,0,255, 0);
6992 isPixel(ctx, 1,25, 0,255,0,255, 0);
6993 isPixel(ctx, 50,25, 0,255,0,255, 0);
6994 isPixel(ctx, 98,25, 0,255,0,255, 0);
6995 isPixel(ctx, 1,48, 0,255,0,255, 0);
6996 isPixel(ctx, 50,48, 0,255,0,255, 0);
6997 isPixel(ctx, 98,48, 0,255,0,255, 0);
6998
6999
7000 }
7001 </script>
7002
7003 <!-- [[[ test_2d.gradient.radial.outside3.html ]]] -->
7004
7005 <p>Canvas test: 2d.gradient.radial.outside3</p>
7006 <canvas id="c247" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7007 <script>
7008
7009
7010
7011 function test_2d_gradient_radial_outside3() {
7012
7013 var canvas = document.getElementById('c247');
7014 var ctx = canvas.getContext('2d');
7015
7016 ctx.fillStyle = '#f00';
7017 ctx.fillRect(0, 0, 100, 50);
7018
7019 var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
7020 g.addColorStop(0, '#0f0');
7021 g.addColorStop(0.001, '#f00');
7022 g.addColorStop(1, '#f00');
7023 ctx.fillStyle = g;
7024 ctx.fillRect(0, 0, 100, 50);
7025
7026 isPixel(ctx, 1,1, 0,255,0,255, 0);
7027 isPixel(ctx, 50,1, 0,255,0,255, 0);
7028 isPixel(ctx, 98,1, 0,255,0,255, 0);
7029 isPixel(ctx, 1,25, 0,255,0,255, 0);
7030 isPixel(ctx, 50,25, 0,255,0,255, 0);
7031 isPixel(ctx, 98,25, 0,255,0,255, 0);
7032 isPixel(ctx, 1,48, 0,255,0,255, 0);
7033 isPixel(ctx, 50,48, 0,255,0,255, 0);
7034 isPixel(ctx, 98,48, 0,255,0,255, 0);
7035
7036
7037 }
7038 </script>
7039
7040 <!-- [[[ test_2d.gradient.radial.touch1.html ]]] -->
7041
7042 <p>Canvas test: 2d.gradient.radial.touch1</p>
7043 <canvas id="c248" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7044 <script>
7045
7046
7047
7048 function test_2d_gradient_radial_touch1() {
7049
7050 var canvas = document.getElementById('c248');
7051 var ctx = canvas.getContext('2d');
7052
7053 ctx.fillStyle = '#0f0';
7054 ctx.fillRect(0, 0, 100, 50);
7055
7056 var g = ctx.createRadialGradient(150, 25, 50, 200, 25, 100);
7057 g.addColorStop(0, '#f00');
7058 g.addColorStop(1, '#f00');
7059 ctx.fillStyle = g;
7060 ctx.fillRect(0, 0, 100, 50);
7061
7062 isPixel(ctx, 1,1, 0,255,0,255, 0);
7063 isPixel(ctx, 50,1, 0,255,0,255, 0);
7064 isPixel(ctx, 98,1, 0,255,0,255, 0);
7065 isPixel(ctx, 1,25, 0,255,0,255, 0);
7066 isPixel(ctx, 50,25, 0,255,0,255, 0);
7067 isPixel(ctx, 98,25, 0,255,0,255, 0);
7068 isPixel(ctx, 1,48, 0,255,0,255, 0);
7069 isPixel(ctx, 50,48, 0,255,0,255, 0);
7070 isPixel(ctx, 98,48, 0,255,0,255, 0);
7071
7072
7073 }
7074 </script>
7075
7076 <!-- [[[ test_2d.gradient.radial.touch2.html ]]] -->
7077
7078 <p>Canvas test: 2d.gradient.radial.touch2</p>
7079 <canvas id="c249" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7080 <script>
7081
7082
7083
7084 function test_2d_gradient_radial_touch2() {
7085
7086 var canvas = document.getElementById('c249');
7087 var ctx = canvas.getContext('2d');
7088
7089 ctx.fillStyle = '#f00';
7090 ctx.fillRect(0, 0, 100, 50);
7091
7092 var g = ctx.createRadialGradient(-80, 25, 70, 0, 25, 150);
7093 g.addColorStop(0, '#f00');
7094 g.addColorStop(0.01, '#0f0');
7095 g.addColorStop(0.99, '#0f0');
7096 g.addColorStop(1, '#f00');
7097 ctx.fillStyle = g;
7098 ctx.fillRect(0, 0, 100, 50);
7099
7100 isPixel(ctx, 1,1, 0,255,0,255, 0);
7101 isPixel(ctx, 50,1, 0,255,0,255, 0);
7102 isPixel(ctx, 98,1, 0,255,0,255, 0);
7103 isPixel(ctx, 1,25, 0,255,0,255, 0);
7104 isPixel(ctx, 50,25, 0,255,0,255, 0);
7105 isPixel(ctx, 98,25, 0,255,0,255, 0);
7106 isPixel(ctx, 1,48, 0,255,0,255, 0);
7107 isPixel(ctx, 50,48, 0,255,0,255, 0);
7108 isPixel(ctx, 98,48, 0,255,0,255, 0);
7109
7110
7111 }
7112 </script>
7113
7114 <!-- [[[ test_2d.gradient.radial.touch3.html ]]] -->
7115
7116 <p>Canvas test: 2d.gradient.radial.touch3</p>
7117 <canvas id="c250" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7118 <script>
7119
7120
7121
7122 function test_2d_gradient_radial_touch3() {
7123
7124 var canvas = document.getElementById('c250');
7125 var ctx = canvas.getContext('2d');
7126
7127 ctx.fillStyle = '#0f0';
7128 ctx.fillRect(0, 0, 100, 50);
7129
7130 var g = ctx.createRadialGradient(120, -15, 25, 140, -30, 50);
7131 g.addColorStop(0, '#f00');
7132 g.addColorStop(1, '#f00');
7133 ctx.fillStyle = g;
7134 ctx.fillRect(0, 0, 100, 50);
7135
7136 isPixel(ctx, 1,1, 0,255,0,255, 0);
7137 isPixel(ctx, 50,1, 0,255,0,255, 0);
7138 isPixel(ctx, 98,1, 0,255,0,255, 0);
7139 isPixel(ctx, 1,25, 0,255,0,255, 0);
7140 isPixel(ctx, 50,25, 0,255,0,255, 0);
7141 isPixel(ctx, 98,25, 0,255,0,255, 0);
7142 isPixel(ctx, 1,48, 0,255,0,255, 0);
7143 isPixel(ctx, 50,48, 0,255,0,255, 0);
7144 isPixel(ctx, 98,48, 0,255,0,255, 0);
7145
7146
7147 }
7148 </script>
7149
7150 <!-- [[[ test_2d.gradient.radial.transform.1.html ]]] -->
7151
7152 <p>Canvas test: 2d.gradient.radial.transform.1</p>
7153 <!-- Testing: Radial gradient coordinates are relative to the coordinate space at the time of filling -->
7154 <canvas id="c251" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7155 <script>
7156
7157
7158 function test_2d_gradient_radial_transform_1() {
7159
7160 var canvas = document.getElementById('c251');
7161 var ctx = canvas.getContext('2d');
7162
7163 var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
7164 g.addColorStop(0, '#0f0');
7165 g.addColorStop(0.5, '#0f0');
7166 g.addColorStop(0.51, '#f00');
7167 g.addColorStop(1, '#f00');
7168 ctx.fillStyle = g;
7169 ctx.translate(50, 25);
7170 ctx.scale(10, 10);
7171 ctx.fillRect(-5, -2.5, 10, 5);
7172 isPixel(ctx, 25,25, 0,255,0,255, 0);
7173 isPixel(ctx, 50,25, 0,255,0,255, 0);
7174 isPixel(ctx, 75,25, 0,255,0,255, 0);
7175
7176
7177 }
7178 </script>
7179
7180 <!-- [[[ test_2d.gradient.radial.transform.2.html ]]] -->
7181
7182 <p>Canvas test: 2d.gradient.radial.transform.2</p>
7183 <!-- Testing: Radial gradient coordinates are relative to the coordinate space at the time of filling -->
7184 <canvas id="c252" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7185 <script>
7186
7187
7188 function test_2d_gradient_radial_transform_2() {
7189
7190 var canvas = document.getElementById('c252');
7191 var ctx = canvas.getContext('2d');
7192
7193 ctx.translate(100, 0);
7194 var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
7195 g.addColorStop(0, '#0f0');
7196 g.addColorStop(0.5, '#0f0');
7197 g.addColorStop(0.51, '#f00');
7198 g.addColorStop(1, '#f00');
7199 ctx.fillStyle = g;
7200 ctx.translate(-50, 25);
7201 ctx.scale(10, 10);
7202 ctx.fillRect(-5, -2.5, 10, 5);
7203 isPixel(ctx, 25,25, 0,255,0,255, 0);
7204 isPixel(ctx, 50,25, 0,255,0,255, 0);
7205 isPixel(ctx, 75,25, 0,255,0,255, 0);
7206
7207
7208 }
7209 </script>
7210
7211 <!-- [[[ test_2d.gradient.radial.transform.3.html ]]] -->
7212
7213 <p>Canvas test: 2d.gradient.radial.transform.3</p>
7214 <!-- Testing: Radial gradient transforms do not experience broken caching effects -->
7215 <canvas id="c253" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7216 <script>
7217
7218
7219
7220 function test_2d_gradient_radial_transform_3() {
7221
7222 var canvas = document.getElementById('c253');
7223 var ctx = canvas.getContext('2d');
7224
7225 var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
7226 g.addColorStop(0, '#0f0');
7227 g.addColorStop(0.5, '#0f0');
7228 g.addColorStop(0.51, '#f00');
7229 g.addColorStop(1, '#f00');
7230 ctx.fillStyle = g;
7231 ctx.fillRect(0, 0, 100, 50);
7232 ctx.translate(50, 25);
7233 ctx.scale(10, 10);
7234 ctx.fillRect(-5, -2.5, 10, 5);
7235
7236 isPixel(ctx, 25,25, 0,255,0,255, 0);
7237 isPixel(ctx, 50,25, 0,255,0,255, 0);
7238 isPixel(ctx, 75,25, 0,255,0,255, 0);
7239
7240 }
7241 </script>
7242
7243 <!-- [[[ test_2d.imageData.create.basic.html ]]] -->
7244
7245 <p>Canvas test: 2d.imageData.create.basic - bug 433004</p>
7246 <!-- Testing: createImageData() exists and returns something -->
7247 <canvas id="c254" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7248 <script>
7249
7250 function test_2d_imageData_create_basic() {
7251
7252 var canvas = document.getElementById('c254');
7253 var ctx = canvas.getContext('2d');
7254
7255 ok(ctx.createImageData(1, 1) !== null, "ctx.createImageData(1, 1) !== null");
7256
7257
7258 }
7259 </script>
7260
7261 <!-- [[[ test_2d.imageData.create1.basic.html ]]] -->
7262
7263 <p>Canvas test: 2d.imageData.create1.basic - bug 630040</p>
7264 <!-- Testing: createImageData(imgdata) exists and returns something -->
7265 <canvas id="c254a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7266 <script>
7267
7268 function test_2d_imageData_create1_basic() {
7269
7270 var canvas = document.getElementById('c254a');
7271 var ctx = canvas.getContext('2d');
7272
7273 ok(ctx.createImageData(ctx.createImageData(1, 1)) != null, "ctx.createImageData(ctx.createImageData(1, 1)) != null");
7274
7275
7276 }
7277 </script>
7278
7279 <!-- [[[ test_2d.imageData.create.initial.html ]]] -->
7280
7281 <p>Canvas test: 2d.imageData.create.initial - bug 433004</p>
7282 <!-- Testing: createImageData() returns transparent black data of the right size -->
7283 <canvas id="c255" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7284 <script>
7285
7286 function test_2d_imageData_create_initial() {
7287
7288 var canvas = document.getElementById('c255');
7289 var ctx = canvas.getContext('2d');
7290
7291 var imgdata = ctx.createImageData(10, 20);
7292 ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4");
7293 ok(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");
7294 ok(imgdata.width > 0, "imgdata.width > 0");
7295 var isTransparentBlack = true;
7296 for (var i = 0; i < imgdata.data.length; ++i)
7297     if (imgdata.data[i] !== 0)
7298         isTransparentBlack = false;
7299 ok(isTransparentBlack, "isTransparentBlack");
7300
7301
7302 }
7303 </script>
7304
7305 <!-- [[[ test_2d.imageData.create1.initial.html ]]] -->
7306
7307 <p>Canvas test: 2d.imageData.create1.initial - bug 630040</p>
7308 <!-- Testing: createImageData(imgdata) returns transparent black data of the right size -->
7309 <canvas id="c255a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7310 <script>
7311
7312 function test_2d_imageData_create1_initial() {
7313
7314 var canvas = document.getElementById('c255a');
7315 var ctx = canvas.getContext('2d');
7316
7317 ctx.fillStyle = '#0f0';
7318 ctx.fillRect(0, 0, 100, 50);
7319 var imgdata1 = ctx.getImageData(0, 0, 10, 20);
7320 var imgdata2 = ctx.createImageData(imgdata1);
7321 ok(imgdata2.data.length == imgdata1.data.length, "imgdata2.data.length == imgdata1.data.length");
7322 ok(imgdata2.width == imgdata1.width, "imgdata2.width == imgdata1.width");
7323 ok(imgdata2.height == imgdata1.height, "imgdata2.height == imgdata1.height");
7324 var isTransparentBlack = true;
7325 for (var i = 0; i < imgdata2.data.length; ++i)
7326     if (imgdata2.data[i] !== 0)
7327         isTransparentBlack = false;
7328 ok(isTransparentBlack, "isTransparentBlack");
7329
7330
7331 }
7332 </script>
7333
7334 <!-- [[[ test_2d.imageData.create.large.html ]]] -->
7335
7336 <p>Canvas test: 2d.imageData.create.large - bug 433004</p>
7337 <!-- Testing: createImageData() works for sizes much larger than the canvas -->
7338 <canvas id="c256" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7339 <script>
7340
7341 function test_2d_imageData_create_large() {
7342
7343 var canvas = document.getElementById('c256');
7344 var ctx = canvas.getContext('2d');
7345
7346 var _thrown_outer = false;
7347
7348 var imgdata = ctx.createImageData(1000, 2000);
7349 ok(imgdata.data.length == imgdata.width*imgdata.height*4, "imgdata.data.length == imgdata.width*imgdata.height*4");
7350 ok(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");
7351 ok(imgdata.width > 0, "imgdata.width > 0");
7352 var isTransparentBlack = true;
7353 for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling)
7354     if (imgdata.data[i] !== 0)
7355         isTransparentBlack = false;
7356 ok(isTransparentBlack, "isTransparentBlack");
7357
7358
7359 }
7360 </script>
7361
7362 <!-- [[[ test_2d.imageData.create.negative.html ]]] -->
7363
7364 <p>Canvas test: 2d.imageData.create.negative - bug 433004</p>
7365 <!-- Testing: createImageData() takes the absolute magnitude of the size arguments -->
7366 <canvas id="c257" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7367 <script>
7368
7369 function test_2d_imageData_create_negative() {
7370
7371 var canvas = document.getElementById('c257');
7372 var ctx = canvas.getContext('2d');
7373
7374 var _thrown_outer = false;
7375 try {
7376
7377 var imgdata1 = ctx.createImageData(10, 20);
7378 var imgdata2 = ctx.createImageData(-10, 20);
7379 var imgdata3 = ctx.createImageData(10, -20);
7380 var imgdata4 = ctx.createImageData(-10, -20);
7381 ok(imgdata1.data.length == imgdata2.data.length, "imgdata1.data.length == imgdata2.data.length");
7382 ok(imgdata2.data.length == imgdata3.data.length, "imgdata2.data.length == imgdata3.data.length");
7383 ok(imgdata3.data.length == imgdata4.data.length, "imgdata3.data.length == imgdata4.data.length");
7384
7385 } catch (e) {
7386     _thrown_outer = true;
7387 }
7388 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
7389
7390
7391 }
7392 </script>
7393
7394 <!-- [[[ test_2d.imageData.create.nonfinite.html ]]] -->
7395
7396 <p>Canvas test: 2d.imageData.create.nonfinite - bug 433004</p>
7397 <!-- Testing: createImageData() throws NOT_SUPPORTED_ERR if arguments are not finite -->
7398 <canvas id="c258" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7399 <script>
7400
7401 function test_2d_imageData_create_nonfinite() {
7402
7403 var canvas = document.getElementById('c258');
7404 var ctx = canvas.getContext('2d');
7405
7406 var _thrown = undefined; try {
7407   ctx.createImageData(Infinity, 10);
7408 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7409 var _thrown = undefined; try {
7410   ctx.createImageData(-Infinity, 10);
7411 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7412 var _thrown = undefined; try {
7413   ctx.createImageData(NaN, 10);
7414 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7415 var _thrown = undefined; try {
7416   ctx.createImageData(10, Infinity);
7417 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7418 var _thrown = undefined; try {
7419   ctx.createImageData(10, -Infinity);
7420 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7421 var _thrown = undefined; try {
7422   ctx.createImageData(10, NaN);
7423 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7424 var _thrown = undefined; try {
7425   ctx.createImageData(Infinity, Infinity);
7426 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7427 var _thrown = undefined; try {
7428   ctx.createImageData({valueOf:() => Infinity}, 10);
7429 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7430 var _thrown = undefined; try {
7431   ctx.createImageData({valueOf:() => -Infinity}, 10);
7432 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7433 var _thrown = undefined; try {
7434   ctx.createImageData({valueOf:() => NaN}, 10);
7435 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7436 var _thrown = undefined; try {
7437   ctx.createImageData(10, {valueOf:() => Infinity});
7438 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7439 var _thrown = undefined; try {
7440   ctx.createImageData(10, {valueOf:() => -Infinity});
7441 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7442 var _thrown = undefined; try {
7443   ctx.createImageData(10, {valueOf:() => NaN});
7444 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7445 var _thrown = undefined; try {
7446   ctx.createImageData({valueOf:() => Infinity}, {valueOf:() => Infinity});
7447 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7448
7449
7450 }
7451 </script>
7452
7453 <!-- [[[ test_2d.imageData.create.round.html ]]] -->
7454
7455 <p>Canvas test: 2d.imageData.create.round - bug 433004</p>
7456 <!-- Testing: createImageData(w, h) is rounded the same as getImageData(0, 0, w, h) -->
7457 <canvas id="c259" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7458 <script>
7459
7460 function test_2d_imageData_create_round() {
7461
7462 var canvas = document.getElementById('c259');
7463 var ctx = canvas.getContext('2d');
7464
7465 var _thrown_outer = false;
7466
7467 var imgdata1 = ctx.createImageData(10.01, 10.99);
7468 var imgdata2 = ctx.getImageData(0, 0, 10.01, 10.99);
7469 is(imgdata1.width, imgdata2.width, "imgdata1.width == imgdata2.width");
7470 is(imgdata1.height, imgdata2.height, "imgdata1.height == imgdata2.height");
7471
7472
7473 }
7474 </script>
7475
7476 <!-- [[[ test_2d.imageData.create.tiny.html ]]] -->
7477
7478 <p>Canvas test: 2d.imageData.create.tiny - bug 433004</p>
7479 <!-- Testing: createImageData() works for sizes smaller than one pixel -->
7480 <canvas id="c260" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7481 <script>
7482
7483 function test_2d_imageData_create_tiny() {
7484
7485 var canvas = document.getElementById('c260');
7486 var ctx = canvas.getContext('2d');
7487
7488 var _thrown_outer = false;
7489 try {
7490     var imgdata = ctx.createImageData(0.0001, 0.0001);
7491 } catch (e) {
7492     _thrown_outer = true;
7493 }
7494 ok(_thrown_outer, ctx.canvas.id + ' should throw exception');
7495 }
7496 </script>
7497
7498 <!-- [[[ test_2d.imageData.create.type.html ]]] -->
7499
7500 <p>Canvas test: 2d.imageData.create.type - bug 433004</p>
7501 <!-- Testing: createImageData() returns an ImageData object containing a Uint8ClampedArray object -->
7502 <canvas id="c261" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7503 <script>
7504
7505 function test_2d_imageData_create_type() {
7506
7507 var canvas = document.getElementById('c261');
7508 var ctx = canvas.getContext('2d');
7509
7510 ok(window.ImageData !== undefined, "window.ImageData !== undefined");
7511 ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined");
7512 window.ImageData.prototype.thisImplementsImageData = true;
7513 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
7514 var imgdata = ctx.createImageData(1, 1);
7515 ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
7516 ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
7517
7518
7519 }
7520 </script>
7521
7522 <!-- [[[ test_2d.imageData.create1.type.html ]]] -->
7523
7524 <p>Canvas test: 2d.imageData.create1.type - bug 630040</p>
7525 <!-- Testing: createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray object -->
7526 <canvas id="c261a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7527 <script>
7528
7529 function test_2d_imageData_create1_type() {
7530
7531 var canvas = document.getElementById('c261a');
7532 var ctx = canvas.getContext('2d');
7533
7534 ok(window.ImageData !== undefined, "window.ImageData !== undefined");
7535 ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined");
7536 window.ImageData.prototype.thisImplementsImageData = true;
7537 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
7538 var imgdata = ctx.createImageData(ctx.createImageData(1, 1));
7539 ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
7540 ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
7541
7542
7543 }
7544 </script>
7545
7546 <!-- [[[ test_2d.imageData.create.zero.html ]]] -->
7547
7548 <p>Canvas test: 2d.imageData.create.zero - bug 433004</p>
7549 <!-- Testing: createImageData() throws INDEX_SIZE_ERR if size is zero -->
7550 <canvas id="c262" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7551 <script>
7552
7553 function test_2d_imageData_create_zero() {
7554
7555 var canvas = document.getElementById('c262');
7556 var ctx = canvas.getContext('2d');
7557
7558 var _thrown = undefined; try {
7559   ctx.createImageData(10, 0);
7560 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
7561 var _thrown = undefined; try {
7562   ctx.createImageData(0, 10);
7563 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
7564 var _thrown = undefined; try {
7565   ctx.createImageData(0, 0);
7566 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
7567
7568
7569 }
7570 </script>
7571
7572 <!-- [[[ test_2d.imageData.create1.zero.html ]]] -->
7573
7574 <p>Canvas test: 2d.imageData.create1.zero - bug 630040</p>
7575 <!-- Testing: createImageData(null) throws TypeError -->
7576 <canvas id="c262a" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7577 <script>
7578
7579 function test_2d_imageData_create1_zero() {
7580
7581 var canvas = document.getElementById('c262a');
7582 var ctx = canvas.getContext('2d');
7583
7584 var _thrown = undefined; try {
7585   ctx.createImageData(null);
7586 } catch (e) { _thrown = e };
7587 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
7588
7589
7590 }
7591 </script>
7592
7593 <!-- [[[ test_2d.imageData.get.basic.html ]]] -->
7594
7595 <p>Canvas test: 2d.imageData.get.basic</p>
7596 <!-- Testing: getImageData() exists and returns something -->
7597 <canvas id="c263" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7598 <script>
7599
7600 function test_2d_imageData_get_basic() {
7601
7602 var canvas = document.getElementById('c263');
7603 var ctx = canvas.getContext('2d');
7604
7605 ok(ctx.getImageData(0, 0, 100, 50) !== null, "ctx.getImageData(0, 0, 100, 50) !== null");
7606
7607
7608 }
7609 </script>
7610
7611 <!-- [[[ test_2d.imageData.get.clamp.html ]]] -->
7612
7613 <p>Canvas test: 2d.imageData.get.clamp</p>
7614 <!-- Testing: getImageData() clamps colours to the range [0, 255] -->
7615 <canvas id="c264" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7616 <script>
7617
7618 function test_2d_imageData_get_clamp() {
7619
7620 var canvas = document.getElementById('c264');
7621 var ctx = canvas.getContext('2d');
7622
7623 ctx.fillStyle = 'rgb(-100, -200, -300)';
7624 ctx.fillRect(0, 0, 100, 50);
7625 ctx.fillStyle = 'rgb(256, 300, 400)';
7626 ctx.fillRect(20, 10, 60, 10);
7627 var imgdata1 = ctx.getImageData(10, 5, 1, 1);
7628 ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0");
7629 ok(imgdata1.data[1] === 0, "imgdata1.data[\""+(1)+"\"] === 0");
7630 ok(imgdata1.data[2] === 0, "imgdata1.data[\""+(2)+"\"] === 0");
7631 var imgdata2 = ctx.getImageData(30, 15, 1, 1);
7632 ok(imgdata2.data[0] === 255, "imgdata2.data[\""+(0)+"\"] === 255");
7633 ok(imgdata2.data[1] === 255, "imgdata2.data[\""+(1)+"\"] === 255");
7634 ok(imgdata2.data[2] === 255, "imgdata2.data[\""+(2)+"\"] === 255");
7635
7636
7637 }
7638 </script>
7639
7640 <!-- [[[ test_2d.imageData.get.nonfinite.html ]]] -->
7641
7642 <p>Canvas test: 2d.imageData.get.nonfinite</p>
7643 <!-- Testing: getImageData() throws NOT_SUPPORTED_ERR if arguments are not finite -->
7644 <canvas id="c265" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7645 <script>
7646
7647 // eslint-disable-next-line complexity
7648 function test_2d_imageData_get_nonfinite() {
7649
7650 var canvas = document.getElementById('c265');
7651 var ctx = canvas.getContext('2d');
7652
7653 var _thrown = undefined; try {
7654   ctx.getImageData(Infinity, 10, 10, 10);
7655 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7656 var _thrown = undefined; try {
7657   ctx.getImageData(-Infinity, 10, 10, 10);
7658 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7659 var _thrown = undefined; try {
7660   ctx.getImageData(NaN, 10, 10, 10);
7661 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7662 var _thrown = undefined; try {
7663   ctx.getImageData(10, Infinity, 10, 10);
7664 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7665 var _thrown = undefined; try {
7666   ctx.getImageData(10, -Infinity, 10, 10);
7667 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7668 var _thrown = undefined; try {
7669   ctx.getImageData(10, NaN, 10, 10);
7670 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7671 var _thrown = undefined; try {
7672   ctx.getImageData(10, 10, Infinity, 10);
7673 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7674 var _thrown = undefined; try {
7675   ctx.getImageData(10, 10, -Infinity, 10);
7676 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7677 var _thrown = undefined; try {
7678   ctx.getImageData(10, 10, NaN, 10);
7679 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7680 var _thrown = undefined; try {
7681   ctx.getImageData(10, 10, 10, Infinity);
7682 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7683 var _thrown = undefined; try {
7684   ctx.getImageData(10, 10, 10, -Infinity);
7685 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7686 var _thrown = undefined; try {
7687   ctx.getImageData(10, 10, 10, NaN);
7688 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7689 var _thrown = undefined; try {
7690   ctx.getImageData(Infinity, Infinity, 10, 10);
7691 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7692 var _thrown = undefined; try {
7693   ctx.getImageData(Infinity, Infinity, Infinity, 10);
7694 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7695 var _thrown = undefined; try {
7696   ctx.getImageData(Infinity, Infinity, Infinity, Infinity);
7697 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7698 var _thrown = undefined; try {
7699   ctx.getImageData(Infinity, Infinity, 10, Infinity);
7700 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7701 var _thrown = undefined; try {
7702   ctx.getImageData(Infinity, 10, Infinity, 10);
7703 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7704 var _thrown = undefined; try {
7705   ctx.getImageData(Infinity, 10, Infinity, Infinity);
7706 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7707 var _thrown = undefined; try {
7708   ctx.getImageData(Infinity, 10, 10, Infinity);
7709 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7710 var _thrown = undefined; try {
7711   ctx.getImageData(10, Infinity, Infinity, 10);
7712 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7713 var _thrown = undefined; try {
7714   ctx.getImageData(10, Infinity, Infinity, Infinity);
7715 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7716 var _thrown = undefined; try {
7717   ctx.getImageData(10, Infinity, 10, Infinity);
7718 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7719 var _thrown = undefined; try {
7720   ctx.getImageData(10, 10, Infinity, Infinity);
7721 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7722 var _thrown = undefined; try {
7723   ctx.getImageData({valueOf:() => Infinity}, 10, 10, 10);
7724 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7725 var _thrown = undefined; try {
7726   ctx.getImageData({valueOf:() => -Infinity}, 10, 10, 10);
7727 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7728 var _thrown = undefined; try {
7729   ctx.getImageData({valueOf:() => NaN}, 10, 10, 10);
7730 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7731 var _thrown = undefined; try {
7732   ctx.getImageData(10, {valueOf:() => Infinity}, 10, 10);
7733 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7734 var _thrown = undefined; try {
7735   ctx.getImageData(10, {valueOf:() => -Infinity}, 10, 10);
7736 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7737 var _thrown = undefined; try {
7738   ctx.getImageData(10, {valueOf:() => NaN}, 10, 10);
7739 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7740 var _thrown = undefined; try {
7741   ctx.getImageData(10, 10, {valueOf:() => Infinity}, 10);
7742 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7743 var _thrown = undefined; try {
7744   ctx.getImageData(10, 10, {valueOf:() => -Infinity}, 10);
7745 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7746 var _thrown = undefined; try {
7747   ctx.getImageData(10, 10, {valueOf:() => NaN}, 10);
7748 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7749 var _thrown = undefined; try {
7750   ctx.getImageData(10, 10, 10, {valueOf:() => Infinity});
7751 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7752 var _thrown = undefined; try {
7753   ctx.getImageData(10, 10, 10, {valueOf:() => -Infinity});
7754 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7755 var _thrown = undefined; try {
7756   ctx.getImageData(10, 10, 10, {valueOf:() => NaN});
7757 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7758 var _thrown = undefined; try {
7759   ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, 10, 10);
7760 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7761 var _thrown = undefined; try {
7762   ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity}, 10);
7763 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7764 var _thrown = undefined; try {
7765   ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity});
7766 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7767 var _thrown = undefined; try {
7768   ctx.getImageData({valueOf:() => Infinity}, {valueOf:() => Infinity}, 10, {valueOf:() => Infinity});
7769 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7770 var _thrown = undefined; try {
7771   ctx.getImageData({valueOf:() => Infinity}, 10, {valueOf:() => Infinity}, 10);
7772 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7773 var _thrown = undefined; try {
7774   ctx.getImageData({valueOf:() => Infinity}, 10, {valueOf:() => Infinity}, {valueOf:() => Infinity});
7775 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7776 var _thrown = undefined; try {
7777   ctx.getImageData({valueOf:() => Infinity}, 10, 10, {valueOf:() => Infinity});
7778 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7779 var _thrown = undefined; try {
7780   ctx.getImageData(10, {valueOf:() => Infinity}, {valueOf:() => Infinity}, 10);
7781 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7782 var _thrown = undefined; try {
7783   ctx.getImageData(10, {valueOf:() => Infinity}, {valueOf:() => Infinity}, {valueOf:() => Infinity});
7784 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7785 var _thrown = undefined; try {
7786   ctx.getImageData(10, {valueOf:() => Infinity}, 10, {valueOf:() => Infinity});
7787 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7788 var _thrown = undefined; try {
7789   ctx.getImageData(10, 10, {valueOf:() => Infinity}, {valueOf:() => Infinity});
7790 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
7791
7792
7793 }
7794 </script>
7795
7796 <!-- [[[ test_2d.imageData.get.nonpremul.html ]]] -->
7797
7798 <p>Canvas test: 2d.imageData.get.nonpremul</p>
7799 <!-- Testing: getImageData() returns non-premultiplied colours -->
7800 <canvas id="c266" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7801 <script>
7802
7803 function test_2d_imageData_get_nonpremul() {
7804
7805 var canvas = document.getElementById('c266');
7806 var ctx = canvas.getContext('2d');
7807
7808 ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
7809 ctx.fillRect(0, 0, 100, 50);
7810 var imgdata = ctx.getImageData(10, 10, 10, 10);
7811 ok(imgdata.data[0] > 200, "imgdata.data[\""+(0)+"\"] > 200");
7812 ok(imgdata.data[1] > 200, "imgdata.data[\""+(1)+"\"] > 200");
7813 ok(imgdata.data[2] > 200, "imgdata.data[\""+(2)+"\"] > 200");
7814 ok(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");
7815 ok(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");
7816
7817
7818 }
7819 </script>
7820
7821 <!-- [[[ test_2d.imageData.get.order.alpha.html ]]] -->
7822
7823 <p>Canvas test: 2d.imageData.get.order.alpha</p>
7824 <!-- Testing: getImageData() returns A in the fourth component -->
7825 <canvas id="c267" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7826 <script>
7827
7828 function test_2d_imageData_get_order_alpha() {
7829
7830 var canvas = document.getElementById('c267');
7831 var ctx = canvas.getContext('2d');
7832
7833 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
7834 ctx.fillRect(0, 0, 100, 50);
7835 var imgdata = ctx.getImageData(0, 0, 10, 10);
7836 ok(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");
7837 ok(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");
7838
7839
7840 }
7841 </script>
7842
7843 <!-- [[[ test_2d.imageData.get.order.cols.html ]]] -->
7844
7845 <p>Canvas test: 2d.imageData.get.order.cols</p>
7846 <!-- Testing: getImageData() returns leftmost columns first -->
7847 <canvas id="c268" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7848 <script>
7849
7850 function test_2d_imageData_get_order_cols() {
7851
7852 var canvas = document.getElementById('c268');
7853 var ctx = canvas.getContext('2d');
7854
7855 ctx.fillStyle = '#fff';
7856 ctx.fillRect(0, 0, 100, 50);
7857 ctx.fillStyle = '#000';
7858 ctx.fillRect(0, 0, 2, 50);
7859 var imgdata = ctx.getImageData(0, 0, 10, 10);
7860 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
7861 ok(imgdata.data[Math.round(imgdata.width/2*4)] === 255, "imgdata.data[Math.round(imgdata.width/2*4)] === 255");
7862 ok(imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0, "imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)] === 0");
7863
7864
7865 }
7866 </script>
7867
7868 <!-- [[[ test_2d.imageData.get.order.rgb.html ]]] -->
7869
7870 <p>Canvas test: 2d.imageData.get.order.rgb</p>
7871 <!-- Testing: getImageData() returns R then G then B -->
7872 <canvas id="c269" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7873 <script>
7874
7875 function test_2d_imageData_get_order_rgb() {
7876
7877 var canvas = document.getElementById('c269');
7878 var ctx = canvas.getContext('2d');
7879
7880 ctx.fillStyle = '#48c';
7881 ctx.fillRect(0, 0, 100, 50);
7882 var imgdata = ctx.getImageData(0, 0, 10, 10);
7883 ok(imgdata.data[0] === 0x44, "imgdata.data[\""+(0)+"\"] === 0x44");
7884 ok(imgdata.data[1] === 0x88, "imgdata.data[\""+(1)+"\"] === 0x88");
7885 ok(imgdata.data[2] === 0xCC, "imgdata.data[\""+(2)+"\"] === 0xCC");
7886 ok(imgdata.data[3] === 255, "imgdata.data[\""+(3)+"\"] === 255");
7887
7888
7889 }
7890 </script>
7891
7892 <!-- [[[ test_2d.imageData.get.order.rows.html ]]] -->
7893
7894 <p>Canvas test: 2d.imageData.get.order.rows</p>
7895 <!-- Testing: getImageData() returns topmost rows first -->
7896 <canvas id="c270" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7897 <script>
7898
7899 function test_2d_imageData_get_order_rows() {
7900
7901 var canvas = document.getElementById('c270');
7902 var ctx = canvas.getContext('2d');
7903
7904 ctx.fillStyle = '#fff';
7905 ctx.fillRect(0, 0, 100, 50);
7906 ctx.fillStyle = '#000';
7907 ctx.fillRect(0, 0, 100, 2);
7908 var imgdata = ctx.getImageData(0, 0, 10, 10);
7909 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
7910 ok(imgdata.data[Math.floor(imgdata.width/2*4)] === 0, "imgdata.data[Math.floor(imgdata.width/2*4)] === 0");
7911 ok(imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255, "imgdata.data[(imgdata.height/2)*imgdata.width*4] === 255");
7912
7913
7914 }
7915 </script>
7916
7917 <!-- [[[ test_2d.imageData.get.range.html ]]] -->
7918
7919 <p>Canvas test: 2d.imageData.get.range</p>
7920 <!-- Testing: getImageData() returns values in the range [0, 255] -->
7921 <canvas id="c271" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7922 <script>
7923
7924 function test_2d_imageData_get_range() {
7925
7926 var canvas = document.getElementById('c271');
7927 var ctx = canvas.getContext('2d');
7928
7929 ctx.fillStyle = '#000';
7930 ctx.fillRect(0, 0, 100, 50);
7931 ctx.fillStyle = '#fff';
7932 ctx.fillRect(20, 10, 60, 10);
7933 var imgdata1 = ctx.getImageData(10, 5, 1, 1);
7934 ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0");
7935 var imgdata2 = ctx.getImageData(30, 15, 1, 1);
7936 ok(imgdata2.data[0] === 255, "imgdata2.data[\""+(0)+"\"] === 255");
7937
7938
7939 }
7940 </script>
7941
7942 <!-- [[[ test_2d.imageData.get.source.negative.html ]]] -->
7943
7944 <p>Canvas test: 2d.imageData.get.source.negative</p>
7945 <!-- Testing: getImageData() works with negative width and height -->
7946 <canvas id="c272" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7947 <script>
7948
7949 function test_2d_imageData_get_source_negative() {
7950
7951 var canvas = document.getElementById('c272');
7952 var ctx = canvas.getContext('2d');
7953
7954 ctx.fillStyle = '#000';
7955 ctx.fillRect(0, 0, 100, 50);
7956 ctx.fillStyle = '#fff';
7957 ctx.fillRect(20, 10, 60, 10);
7958
7959 var imgdata1 = ctx.getImageData(85, 25, -10, -10);
7960 ok(imgdata1.data[0] === 255, "imgdata1.data[\""+(0)+"\"] === 255");
7961 ok(imgdata1.data[1] === 255, "imgdata1.data[\""+(1)+"\"] === 255");
7962 ok(imgdata1.data[2] === 255, "imgdata1.data[\""+(2)+"\"] === 255");
7963 ok(imgdata1.data[3] === 255, "imgdata1.data[\""+(3)+"\"] === 255");
7964 ok(imgdata1.data[imgdata1.data.length-4+0] === 0, "imgdata1.data[imgdata1.data.length-4+0] === 0");
7965 ok(imgdata1.data[imgdata1.data.length-4+1] === 0, "imgdata1.data[imgdata1.data.length-4+1] === 0");
7966 ok(imgdata1.data[imgdata1.data.length-4+2] === 0, "imgdata1.data[imgdata1.data.length-4+2] === 0");
7967 ok(imgdata1.data[imgdata1.data.length-4+3] === 255, "imgdata1.data[imgdata1.data.length-4+3] === 255");
7968
7969 var imgdata2 = ctx.getImageData(0, 0, -1, -1);
7970 ok(imgdata2.data[0] === 0, "imgdata2.data[\""+(0)+"\"] === 0");
7971 ok(imgdata2.data[1] === 0, "imgdata2.data[\""+(1)+"\"] === 0");
7972 ok(imgdata2.data[2] === 0, "imgdata2.data[\""+(2)+"\"] === 0");
7973 ok(imgdata2.data[3] === 0, "imgdata2.data[\""+(3)+"\"] === 0");
7974
7975
7976 }
7977 </script>
7978
7979 <!-- [[[ test_2d.imageData.get.source.outside.html ]]] -->
7980
7981 <p>Canvas test: 2d.imageData.get.source.outside</p>
7982 <!-- Testing: getImageData() returns transparent black outside the canvas -->
7983 <canvas id="c273" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
7984 <script>
7985
7986 function test_2d_imageData_get_source_outside() {
7987
7988 var canvas = document.getElementById('c273');
7989 var ctx = canvas.getContext('2d');
7990
7991 var _thrown_outer = false;
7992 try {
7993
7994 ctx.fillStyle = '#08f';
7995 ctx.fillRect(0, 0, 100, 50);
7996
7997 var imgdata1 = ctx.getImageData(-10, 5, 1, 1);
7998 ok(imgdata1.data[0] === 0, "imgdata1.data[\""+(0)+"\"] === 0");
7999 ok(imgdata1.data[1] === 0, "imgdata1.data[\""+(1)+"\"] === 0");
8000 ok(imgdata1.data[2] === 0, "imgdata1.data[\""+(2)+"\"] === 0");
8001 ok(imgdata1.data[3] === 0, "imgdata1.data[\""+(3)+"\"] === 0");
8002
8003 var imgdata2 = ctx.getImageData(10, -5, 1, 1);
8004 ok(imgdata2.data[0] === 0, "imgdata2.data[\""+(0)+"\"] === 0");
8005 ok(imgdata2.data[1] === 0, "imgdata2.data[\""+(1)+"\"] === 0");
8006 ok(imgdata2.data[2] === 0, "imgdata2.data[\""+(2)+"\"] === 0");
8007 ok(imgdata2.data[3] === 0, "imgdata2.data[\""+(3)+"\"] === 0");
8008
8009 var imgdata3 = ctx.getImageData(200, 5, 1, 1);
8010 ok(imgdata3.data[0] === 0, "imgdata3.data[\""+(0)+"\"] === 0");
8011 ok(imgdata3.data[1] === 0, "imgdata3.data[\""+(1)+"\"] === 0");
8012 ok(imgdata3.data[2] === 0, "imgdata3.data[\""+(2)+"\"] === 0");
8013 ok(imgdata3.data[3] === 0, "imgdata3.data[\""+(3)+"\"] === 0");
8014
8015 var imgdata4 = ctx.getImageData(10, 60, 1, 1);
8016 ok(imgdata4.data[0] === 0, "imgdata4.data[\""+(0)+"\"] === 0");
8017 ok(imgdata4.data[1] === 0, "imgdata4.data[\""+(1)+"\"] === 0");
8018 ok(imgdata4.data[2] === 0, "imgdata4.data[\""+(2)+"\"] === 0");
8019 ok(imgdata4.data[3] === 0, "imgdata4.data[\""+(3)+"\"] === 0");
8020
8021 var imgdata5 = ctx.getImageData(100, 10, 1, 1);
8022 ok(imgdata5.data[0] === 0, "imgdata5.data[\""+(0)+"\"] === 0");
8023 ok(imgdata5.data[1] === 0, "imgdata5.data[\""+(1)+"\"] === 0");
8024 ok(imgdata5.data[2] === 0, "imgdata5.data[\""+(2)+"\"] === 0");
8025 ok(imgdata5.data[3] === 0, "imgdata5.data[\""+(3)+"\"] === 0");
8026
8027 var imgdata6 = ctx.getImageData(0, 10, 1, 1);
8028 ok(imgdata6.data[0] === 0, "imgdata6.data[\""+(0)+"\"] === 0");
8029 ok(imgdata6.data[1] === 136, "imgdata6.data[\""+(1)+"\"] === 136");
8030 ok(imgdata6.data[2] === 255, "imgdata6.data[\""+(2)+"\"] === 255");
8031 ok(imgdata6.data[3] === 255, "imgdata6.data[\""+(3)+"\"] === 255");
8032
8033 var imgdata7 = ctx.getImageData(-10, 10, 20, 20);
8034 ok(imgdata7.data[ 0*4+0] === 0, "imgdata7.data[ 0*4+0] === 0");
8035 ok(imgdata7.data[ 0*4+1] === 0, "imgdata7.data[ 0*4+1] === 0");
8036 ok(imgdata7.data[ 0*4+2] === 0, "imgdata7.data[ 0*4+2] === 0");
8037 ok(imgdata7.data[ 0*4+3] === 0, "imgdata7.data[ 0*4+3] === 0");
8038 ok(imgdata7.data[ 9*4+0] === 0, "imgdata7.data[ 9*4+0] === 0");
8039 ok(imgdata7.data[ 9*4+1] === 0, "imgdata7.data[ 9*4+1] === 0");
8040 ok(imgdata7.data[ 9*4+2] === 0, "imgdata7.data[ 9*4+2] === 0");
8041 ok(imgdata7.data[ 9*4+3] === 0, "imgdata7.data[ 9*4+3] === 0");
8042 ok(imgdata7.data[10*4+0] === 0, "imgdata7.data[10*4+0] === 0");
8043 ok(imgdata7.data[10*4+1] === 136, "imgdata7.data[10*4+1] === 136");
8044 ok(imgdata7.data[10*4+2] === 255, "imgdata7.data[10*4+2] === 255");
8045 ok(imgdata7.data[10*4+3] === 255, "imgdata7.data[10*4+3] === 255");
8046 ok(imgdata7.data[19*4+0] === 0, "imgdata7.data[19*4+0] === 0");
8047 ok(imgdata7.data[19*4+1] === 136, "imgdata7.data[19*4+1] === 136");
8048 ok(imgdata7.data[19*4+2] === 255, "imgdata7.data[19*4+2] === 255");
8049 ok(imgdata7.data[19*4+3] === 255, "imgdata7.data[19*4+3] === 255");
8050 ok(imgdata7.data[20*4+0] === 0, "imgdata7.data[20*4+0] === 0");
8051 ok(imgdata7.data[20*4+1] === 0, "imgdata7.data[20*4+1] === 0");
8052 ok(imgdata7.data[20*4+2] === 0, "imgdata7.data[20*4+2] === 0");
8053 ok(imgdata7.data[20*4+3] === 0, "imgdata7.data[20*4+3] === 0");
8054
8055 } catch (e) {
8056     _thrown_outer = true;
8057 }
8058 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8059
8060
8061 }
8062 </script>
8063
8064 <!-- [[[ test_2d.imageData.get.source.size.html ]]] -->
8065
8066 <p>Canvas test: 2d.imageData.get.source.size</p>
8067 <!-- Testing: getImageData() returns bigger ImageData for bigger source rectangle -->
8068 <canvas id="c274" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8069 <script>
8070
8071 function test_2d_imageData_get_source_size() {
8072
8073 var canvas = document.getElementById('c274');
8074 var ctx = canvas.getContext('2d');
8075
8076 var imgdata1 = ctx.getImageData(0, 0, 10, 10);
8077 var imgdata2 = ctx.getImageData(0, 0, 20, 20);
8078 ok(imgdata2.width > imgdata1.width, "imgdata2.width > imgdata1.width");
8079 ok(imgdata2.height > imgdata1.height, "imgdata2.height > imgdata1.height");
8080
8081
8082 }
8083 </script>
8084
8085 <!-- [[[ test_2d.imageData.get.tiny.html ]]] -->
8086
8087 <p>Canvas test: 2d.imageData.get.tiny</p>
8088 <canvas id="c275" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8089 <script>
8090
8091 function test_2d_imageData_get_tiny() {
8092
8093 var canvas = document.getElementById('c275');
8094 var ctx = canvas.getContext('2d');
8095
8096 var _thrown_outer = false;
8097 try {
8098     var imgdata = ctx.getImageData(0, 0, 0.0001, 0.0001);
8099 } catch (e) {
8100     _thrown_outer = true;
8101 }
8102 ok(_thrown_outer, ctx.canvas.id + ' should throw');
8103
8104
8105 }
8106 </script>
8107
8108 <!-- [[[ test_2d.imageData.get.type.html ]]] -->
8109
8110 <p>Canvas test: 2d.imageData.get.type</p>
8111 <!-- Testing: getImageData() returns an ImageData object containing a Uint8ClampedArray object -->
8112 <canvas id="c276" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8113 <script>
8114
8115 function test_2d_imageData_get_type() {
8116
8117 var canvas = document.getElementById('c276');
8118 var ctx = canvas.getContext('2d');
8119
8120 ok(window.ImageData !== undefined, "window.ImageData !== undefined");
8121 ok(window.Uint8ClampedArray !== undefined, "window.Uint8ClampedArray !== undefined");
8122 window.ImageData.prototype.thisImplementsImageData = true;
8123 window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
8124 var imgdata = ctx.getImageData(0, 0, 1, 1);
8125 ok(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
8126 ok(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
8127
8128
8129 }
8130 </script>
8131
8132 <!-- [[[ test_2d.imageData.get.unaffected.html ]]] -->
8133
8134 <p>Canvas test: 2d.imageData.get.unaffected</p>
8135 <!-- Testing: getImageData() is not affected by context state -->
8136 <canvas id="c277" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8137 <script>
8138
8139
8140 function test_2d_imageData_get_unaffected() {
8141
8142 var canvas = document.getElementById('c277');
8143 var ctx = canvas.getContext('2d');
8144
8145 ctx.fillStyle = '#0f0';
8146 ctx.fillRect(0, 0, 50, 50)
8147 ctx.fillStyle = '#f00';
8148 ctx.fillRect(50, 0, 50, 50)
8149 ctx.save();
8150 ctx.translate(50, 0);
8151 ctx.globalAlpha = 0.1;
8152 ctx.globalCompositeOperation = 'destination-atop';
8153 ctx.shadowColor = '#f00';
8154 ctx.rect(0, 0, 5, 5);
8155 ctx.clip();
8156 var imgdata = ctx.getImageData(0, 0, 50, 50);
8157 ctx.restore();
8158 ctx.putImageData(imgdata, 50, 0);
8159 isPixel(ctx, 25,25, 0,255,0,255, 2);
8160 isPixel(ctx, 75,25, 0,255,0,255, 2);
8161
8162
8163 }
8164 </script>
8165
8166 <!-- [[[ test_2d.imageData.get.zero.html ]]] -->
8167
8168 <p>Canvas test: 2d.imageData.get.zero</p>
8169 <!-- Testing: getImageData() throws INDEX_SIZE_ERR if size is zero -->
8170 <canvas id="c278" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8171 <script>
8172
8173 function test_2d_imageData_get_zero() {
8174
8175 var canvas = document.getElementById('c278');
8176 var ctx = canvas.getContext('2d');
8177
8178 var _thrown = undefined; try {
8179   ctx.getImageData(1, 1, 10, 0);
8180 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
8181 var _thrown = undefined; try {
8182   ctx.getImageData(1, 1, 0, 10);
8183 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
8184 var _thrown = undefined; try {
8185   ctx.getImageData(1, 1, 0, 0);
8186 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
8187
8188
8189 }
8190 </script>
8191
8192 <!-- [[[ test_2d.imageData.object.clamp.html ]]] -->
8193
8194 <p>Canvas test: 2d.imageData.object.clamp</p>
8195 <!-- Testing: ImageData.data clamps numbers to [0, 255] -->
8196 <canvas id="c279" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8197 <script>
8198
8199 function test_2d_imageData_object_clamp() {
8200
8201 var canvas = document.getElementById('c279');
8202 var ctx = canvas.getContext('2d');
8203
8204 var imgdata = ctx.getImageData(0, 0, 10, 10);
8205
8206 imgdata.data[0] = 100;
8207 imgdata.data[0] = 300;
8208 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
8209 imgdata.data[0] = 100;
8210 imgdata.data[0] = -100;
8211 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8212
8213 imgdata.data[0] = 100;
8214 imgdata.data[0] = 200+Math.pow(2, 32);
8215 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
8216 imgdata.data[0] = 100;
8217 imgdata.data[0] = -200-Math.pow(2, 32);
8218 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8219
8220 imgdata.data[0] = 100;
8221 imgdata.data[0] = Math.pow(10, 39);
8222 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
8223 imgdata.data[0] = 100;
8224 imgdata.data[0] = -Math.pow(10, 39);
8225 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8226
8227 imgdata.data[0] = 100;
8228 imgdata.data[0] = -Infinity;
8229 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8230 imgdata.data[0] = 100;
8231 imgdata.data[0] = Infinity;
8232 ok(imgdata.data[0] === 255, "imgdata.data[\""+(0)+"\"] === 255");
8233
8234
8235 }
8236 </script>
8237
8238 <!-- [[[ test_2d.imageData.object.ctor.html ]]] -->
8239
8240 <p>Canvas test: 2d.imageData.object.ctor</p>
8241 <!-- Testing: ImageData does not have a usable constructor -->
8242 <canvas id="c280" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8243 <script>
8244
8245 function test_2d_imageData_object_ctor() {
8246
8247 var canvas = document.getElementById('c280');
8248 var ctx = canvas.getContext('2d');
8249
8250 ok(window.ImageData !== undefined, "window.ImageData !== undefined");
8251
8252 var _thrown_outer = false;
8253 try {
8254
8255 new window.ImageData(1,1);
8256
8257 } catch (e) {
8258     _thrown_outer = true;
8259 }
8260 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8261
8262
8263 }
8264 </script>
8265
8266 <!-- [[[ test_2d.imageData.object.nan.html ]]] -->
8267
8268 <p>Canvas test: 2d.imageData.object.nan</p>
8269 <!-- Testing: ImageData.data converts NaN to 0 -->
8270 <canvas id="c281" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8271 <script>
8272
8273 function test_2d_imageData_object_nan() {
8274
8275 var canvas = document.getElementById('c281');
8276 var ctx = canvas.getContext('2d');
8277
8278 var imgdata = ctx.getImageData(0, 0, 10, 10);
8279 imgdata.data[0] = 100;
8280 imgdata.data[0] = NaN;
8281 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8282 imgdata.data[0] = 100;
8283 imgdata.data[0] = "cheese";
8284 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8285
8286
8287 }
8288 </script>
8289
8290 <!-- [[[ test_2d.imageData.object.properties.html ]]] -->
8291
8292 <p>Canvas test: 2d.imageData.object.properties</p>
8293 <!-- Testing: ImageData objects have the right properties -->
8294 <canvas id="c282" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8295 <script>
8296
8297 function test_2d_imageData_object_properties() {
8298
8299 var canvas = document.getElementById('c282');
8300 var ctx = canvas.getContext('2d');
8301
8302 var imgdata = ctx.getImageData(0, 0, 10, 10);
8303 ok(typeof(imgdata.width) == 'number', "typeof(imgdata.width) == 'number'");
8304 ok(typeof(imgdata.height) == 'number', "typeof(imgdata.height) == 'number'");
8305 ok(typeof(imgdata.data) == 'object', "typeof(imgdata.data) == 'object'");
8306
8307
8308 }
8309 </script>
8310
8311 <!-- [[[ test_2d.imageData.object.readonly.html ]]] -->
8312
8313 <p>Canvas test: 2d.imageData.object.readonly</p>
8314 <!-- Testing: ImageData objects properties are read-only -->
8315 <canvas id="c283" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8316 <script>
8317
8318 function test_2d_imageData_object_readonly() {
8319
8320 var canvas = document.getElementById('c283');
8321 var ctx = canvas.getContext('2d');
8322
8323 var imgdata = ctx.getImageData(0, 0, 10, 10);
8324 var w = imgdata.width;
8325 var h = imgdata.height;
8326 var d = imgdata.data;
8327 imgdata.width = 123;
8328 imgdata.height = 123;
8329 imgdata.data = [100,100,100,100];
8330 ok(imgdata.width === w, "imgdata.width === w");
8331 ok(imgdata.height === h, "imgdata.height === h");
8332 ok(imgdata.data === d, "imgdata.data === d");
8333 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8334 ok(imgdata.data[1] === 0, "imgdata.data[\""+(1)+"\"] === 0");
8335 ok(imgdata.data[2] === 0, "imgdata.data[\""+(2)+"\"] === 0");
8336 ok(imgdata.data[3] === 0, "imgdata.data[\""+(3)+"\"] === 0");
8337
8338
8339 }
8340 </script>
8341
8342 <!-- [[[ test_2d.imageData.object.round.html ]]] -->
8343
8344 <p>Canvas test: 2d.imageData.object.round</p>
8345 <!-- Testing: ImageData.data rounds numbers with convertToIntegerTiesToEven -->
8346 <canvas id="c284" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8347 <script>
8348
8349 function test_2d_imageData_object_round() {
8350
8351 var canvas = document.getElementById('c284');
8352 var ctx = canvas.getContext('2d');
8353
8354 var imgdata = ctx.getImageData(0, 0, 10, 10);
8355 imgdata.data[0] = 0.499;
8356 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8357 imgdata.data[0] = 0.5;
8358 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8359 imgdata.data[0] = 0.501;
8360 ok(imgdata.data[0] === 1, "imgdata.data[\""+(0)+"\"] === 1");
8361 imgdata.data[0] = 1.499;
8362 ok(imgdata.data[0] === 1, "imgdata.data[\""+(0)+"\"] === 1");
8363 imgdata.data[0] = 1.5;
8364 ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2");
8365 imgdata.data[0] = 1.501;
8366 ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2");
8367 imgdata.data[0] = 2.5;
8368 ok(imgdata.data[0] === 2, "imgdata.data[\""+(0)+"\"] === 2");
8369 imgdata.data[0] = 3.5;
8370 ok(imgdata.data[0] === 4, "imgdata.data[\""+(0)+"\"] === 4");
8371 imgdata.data[0] = 252.5;
8372 ok(imgdata.data[0] === 252, "imgdata.data[\""+(0)+"\"] === 252");
8373 imgdata.data[0] = 253.5;
8374 ok(imgdata.data[0] === 254, "imgdata.data[\""+(0)+"\"] === 254");
8375 imgdata.data[0] = 254.5;
8376 ok(imgdata.data[0] === 254, "imgdata.data[\""+(0)+"\"] === 254");
8377
8378
8379 }
8380 </script>
8381
8382 <!-- [[[ test_2d.imageData.object.set.html ]]] -->
8383
8384 <p>Canvas test: 2d.imageData.object.set</p>
8385 <!-- Testing: ImageData.data can be modified -->
8386 <canvas id="c285" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8387 <script>
8388
8389 function test_2d_imageData_object_set() {
8390
8391 var canvas = document.getElementById('c285');
8392 var ctx = canvas.getContext('2d');
8393
8394 var imgdata = ctx.getImageData(0, 0, 10, 10);
8395 imgdata.data[0] = 100;
8396 ok(imgdata.data[0] === 100, "imgdata.data[\""+(0)+"\"] === 100");
8397 imgdata.data[0] = 200;
8398 ok(imgdata.data[0] === 200, "imgdata.data[\""+(0)+"\"] === 200");
8399
8400
8401 }
8402 </script>
8403
8404 <!-- [[[ test_2d.imageData.object.string.html ]]] -->
8405
8406 <p>Canvas test: 2d.imageData.object.string</p>
8407 <!-- Testing: ImageData.data converts strings to numbers with ToNumber -->
8408 <canvas id="c286" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8409 <script>
8410
8411 function test_2d_imageData_object_string() {
8412
8413 var canvas = document.getElementById('c286');
8414 var ctx = canvas.getContext('2d');
8415
8416 var imgdata = ctx.getImageData(0, 0, 10, 10);
8417 imgdata.data[0] = 100;
8418 imgdata.data[0] = "110";
8419 ok(imgdata.data[0] === 110, "imgdata.data[\""+(0)+"\"] === 110");
8420 imgdata.data[0] = 100;
8421 imgdata.data[0] = "0x78";
8422 ok(imgdata.data[0] === 120, "imgdata.data[\""+(0)+"\"] === 120");
8423 imgdata.data[0] = 100;
8424 imgdata.data[0] = " +130e0 ";
8425 ok(imgdata.data[0] === 130, "imgdata.data[\""+(0)+"\"] === 130");
8426
8427
8428 }
8429 </script>
8430
8431 <!-- [[[ test_2d.imageData.object.undefined.html ]]] -->
8432
8433 <p>Canvas test: 2d.imageData.object.undefined</p>
8434 <!-- Testing: ImageData.data converts undefined to 0 -->
8435 <canvas id="c287" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8436 <script>
8437
8438 function test_2d_imageData_object_undefined() {
8439
8440 var canvas = document.getElementById('c287');
8441 var ctx = canvas.getContext('2d');
8442
8443 var imgdata = ctx.getImageData(0, 0, 10, 10);
8444 imgdata.data[0] = 100;
8445 imgdata.data[0] = undefined;
8446 ok(imgdata.data[0] === 0, "imgdata.data[\""+(0)+"\"] === 0");
8447
8448
8449 }
8450 </script>
8451
8452 <!-- [[[ test_2d.imageData.put.alpha.html ]]] -->
8453
8454 <p>Canvas test: 2d.imageData.put.alpha</p>
8455 <!-- Testing: putImageData() puts non-solid image data correctly -->
8456 <canvas id="c288" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8457 <script>
8458
8459
8460 function test_2d_imageData_put_alpha() {
8461
8462 var canvas = document.getElementById('c288');
8463 var ctx = canvas.getContext('2d');
8464
8465 ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
8466 ctx.fillRect(0, 0, 100, 50)
8467 var imgdata = ctx.getImageData(0, 0, 100, 50);
8468 ctx.fillStyle = '#f00';
8469 ctx.fillRect(0, 0, 100, 50)
8470 ctx.putImageData(imgdata, 0, 0);
8471 isPixel(ctx, 50,25, 0,255,0,64, 2);
8472
8473
8474 }
8475 </script>
8476
8477 <!-- [[[ test_2d.imageData.put.basic.html ]]] -->
8478
8479 <p>Canvas test: 2d.imageData.put.basic</p>
8480 <!-- Testing: putImageData() puts image data from getImageData() onto the canvas -->
8481 <canvas id="c289" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8482 <script>
8483
8484
8485 function test_2d_imageData_put_basic() {
8486
8487 var canvas = document.getElementById('c289');
8488 var ctx = canvas.getContext('2d');
8489
8490 ctx.fillStyle = '#0f0';
8491 ctx.fillRect(0, 0, 100, 50)
8492 var imgdata = ctx.getImageData(0, 0, 100, 50);
8493 ctx.fillStyle = '#f00';
8494 ctx.fillRect(0, 0, 100, 50)
8495 ctx.putImageData(imgdata, 0, 0);
8496 isPixel(ctx, 50,25, 0,255,0,255, 2);
8497
8498
8499 }
8500 </script>
8501
8502 <!-- [[[ test_2d.imageData.put.clip.html ]]] -->
8503
8504 <p>Canvas test: 2d.imageData.put.clip - bug 433397</p>
8505 <!-- Testing: putImageData() is not affected by clipping regions -->
8506 <canvas id="c290" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8507 <script>
8508
8509
8510
8511 function test_2d_imageData_put_clip() {
8512
8513 var canvas = document.getElementById('c290');
8514 var ctx = canvas.getContext('2d');
8515
8516 ctx.fillStyle = '#0f0';
8517 ctx.fillRect(0, 0, 100, 50)
8518 var imgdata = ctx.getImageData(0, 0, 100, 50);
8519 ctx.fillStyle = '#f00';
8520 ctx.fillRect(0, 0, 100, 50)
8521 ctx.beginPath();
8522 ctx.rect(0, 0, 50, 50);
8523 ctx.clip();
8524 ctx.putImageData(imgdata, 0, 0);
8525 isPixel(ctx, 25,25, 0,255,0,255, 2);
8526 isPixel(ctx, 75,25, 0,255,0,255, 2);
8527
8528
8529 }
8530 </script>
8531
8532 <!-- [[[ test_2d.imageData.put.created.html ]]] -->
8533
8534 <p>Canvas test: 2d.imageData.put.created - bug 433004</p>
8535 <!-- Testing: putImageData() puts image data from createImageData() onto the canvas -->
8536 <canvas id="c291" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8537 <script>
8538
8539
8540 // eslint-disable-next-line complexity
8541 function test_2d_imageData_put_created() {
8542
8543 var canvas = document.getElementById('c291');
8544 var ctx = canvas.getContext('2d');
8545
8546 var imgdata = ctx.createImageData(100, 50);
8547 for (var i = 0; i < imgdata.data.length; i += 4) {
8548     imgdata.data[i] = 0;
8549     imgdata.data[i+1] = 255;
8550     imgdata.data[i+2] = 0;
8551     imgdata.data[i+3] = 255;
8552 }
8553 ctx.fillStyle = '#f00';
8554 ctx.fillRect(0, 0, 100, 50)
8555 ctx.putImageData(imgdata, 0, 0);
8556 isPixel(ctx, 50,25, 0,255,0,255, 2);
8557
8558
8559 }
8560 </script>
8561
8562 <!-- [[[ test_2d.imageData.put.cross.html ]]] -->
8563
8564 <p>Canvas test: 2d.imageData.put.cross</p>
8565 <!-- Testing: putImageData() accepts image data got from a different canvas -->
8566 <canvas id="c292" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8567 <script>
8568
8569
8570 function test_2d_imageData_put_cross() {
8571
8572 var canvas = document.getElementById('c292');
8573 var ctx = canvas.getContext('2d');
8574
8575 var canvas2 = document.createElement('canvas');
8576 var ctx2 = canvas2.getContext('2d');
8577 ctx2.fillStyle = '#0f0';
8578 ctx2.fillRect(0, 0, 100, 50)
8579 var imgdata = ctx2.getImageData(0, 0, 100, 50);
8580 ctx.fillStyle = '#f00';
8581 ctx.fillRect(0, 0, 100, 50)
8582 ctx.putImageData(imgdata, 0, 0);
8583 isPixel(ctx, 50,25, 0,255,0,255, 2);
8584
8585
8586 }
8587 </script>
8588
8589 <!-- [[[ test_2d.imageData.put.dirty.negative.html ]]] -->
8590
8591 <p>Canvas test: 2d.imageData.put.dirty.negative</p>
8592 <!-- Testing: putImageData() handles negative-sized dirty rectangles correctly -->
8593 <canvas id="c293" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8594 <script>
8595
8596
8597 function test_2d_imageData_put_dirty_negative() {
8598
8599 var canvas = document.getElementById('c293');
8600 var ctx = canvas.getContext('2d');
8601
8602 var _thrown_outer = false;
8603 try {
8604
8605 ctx.fillStyle = '#f00';
8606 ctx.fillRect(0, 0, 100, 50)
8607 ctx.fillStyle = '#0f0';
8608 ctx.fillRect(0, 0, 20, 20)
8609
8610 var imgdata = ctx.getImageData(0, 0, 100, 50);
8611
8612 ctx.fillStyle = '#0f0';
8613 ctx.fillRect(0, 0, 100, 50)
8614 ctx.fillStyle = '#f00';
8615 ctx.fillRect(40, 20, 20, 20)
8616 ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20);
8617
8618 isPixel(ctx, 50,25, 0,255,0,255, 2);
8619 isPixel(ctx, 35,25, 0,255,0,255, 2);
8620 isPixel(ctx, 65,25, 0,255,0,255, 2);
8621 isPixel(ctx, 50,15, 0,255,0,255, 2);
8622 isPixel(ctx, 50,45, 0,255,0,255, 2);
8623
8624 } catch (e) {
8625     _thrown_outer = true;
8626 }
8627 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8628
8629
8630 }
8631 </script>
8632
8633 <!-- [[[ test_2d.imageData.put.dirty.outside.html ]]] -->
8634
8635 <p>Canvas test: 2d.imageData.put.dirty.outside</p>
8636 <!-- Testing: putImageData() handles dirty rectangles outside the canvas correctly -->
8637 <canvas id="c294" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8638 <script>
8639
8640
8641 function test_2d_imageData_put_dirty_outside() {
8642
8643 var canvas = document.getElementById('c294');
8644 var ctx = canvas.getContext('2d');
8645
8646 var _thrown_outer = false;
8647 try {
8648
8649 ctx.fillStyle = '#f00';
8650 ctx.fillRect(0, 0, 100, 50)
8651
8652 var imgdata = ctx.getImageData(0, 0, 100, 50);
8653
8654 ctx.fillStyle = '#0f0';
8655 ctx.fillRect(0, 0, 100, 50)
8656
8657 ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20);
8658 ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50);
8659 ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20);
8660 ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20);
8661
8662 isPixel(ctx, 50,25, 0,255,0,255, 2);
8663 isPixel(ctx, 98,15, 0,255,0,255, 2);
8664 isPixel(ctx, 98,25, 0,255,0,255, 2);
8665 isPixel(ctx, 98,45, 0,255,0,255, 2);
8666 isPixel(ctx, 1,5, 0,255,0,255, 2);
8667 isPixel(ctx, 1,25, 0,255,0,255, 2);
8668 isPixel(ctx, 1,45, 0,255,0,255, 2);
8669
8670 } catch (e) {
8671     _thrown_outer = true;
8672 }
8673 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8674
8675
8676 }
8677 </script>
8678
8679 <!-- [[[ test_2d.imageData.put.dirty.rect1.html ]]] -->
8680
8681 <p>Canvas test: 2d.imageData.put.dirty.rect1</p>
8682 <!-- Testing: putImageData() only modifies areas inside the dirty rectangle, using width and height -->
8683 <canvas id="c295" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8684 <script>
8685
8686
8687 function test_2d_imageData_put_dirty_rect1() {
8688
8689 var canvas = document.getElementById('c295');
8690 var ctx = canvas.getContext('2d');
8691
8692 var _thrown_outer = false;
8693 try {
8694
8695 ctx.fillStyle = '#f00';
8696 ctx.fillRect(0, 0, 100, 50)
8697 ctx.fillStyle = '#0f0';
8698 ctx.fillRect(0, 0, 20, 20)
8699
8700 var imgdata = ctx.getImageData(0, 0, 100, 50);
8701
8702 ctx.fillStyle = '#0f0';
8703 ctx.fillRect(0, 0, 100, 50)
8704 ctx.fillStyle = '#f00';
8705 ctx.fillRect(40, 20, 20, 20)
8706 ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20);
8707
8708 isPixel(ctx, 50,25, 0,255,0,255, 2);
8709 isPixel(ctx, 35,25, 0,255,0,255, 2);
8710 isPixel(ctx, 65,25, 0,255,0,255, 2);
8711 isPixel(ctx, 50,15, 0,255,0,255, 2);
8712 isPixel(ctx, 50,45, 0,255,0,255, 2);
8713
8714 } catch (e) {
8715     _thrown_outer = true;
8716 }
8717 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8718
8719
8720 }
8721 </script>
8722
8723 <!-- [[[ test_2d.imageData.put.dirty.rect2.html ]]] -->
8724
8725 <p>Canvas test: 2d.imageData.put.dirty.rect2</p>
8726 <!-- Testing: putImageData() only modifies areas inside the dirty rectangle, using x and y -->
8727 <canvas id="c296" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8728 <script>
8729
8730
8731 function test_2d_imageData_put_dirty_rect2() {
8732
8733 var canvas = document.getElementById('c296');
8734 var ctx = canvas.getContext('2d');
8735
8736 var _thrown_outer = false;
8737 try {
8738
8739 ctx.fillStyle = '#f00';
8740 ctx.fillRect(0, 0, 100, 50)
8741 ctx.fillStyle = '#0f0';
8742 ctx.fillRect(60, 30, 20, 20)
8743
8744 var imgdata = ctx.getImageData(0, 0, 100, 50);
8745
8746 ctx.fillStyle = '#0f0';
8747 ctx.fillRect(0, 0, 100, 50)
8748 ctx.fillStyle = '#f00';
8749 ctx.fillRect(40, 20, 20, 20)
8750 ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20);
8751
8752 isPixel(ctx, 50,25, 0,255,0,255, 2);
8753 isPixel(ctx, 35,25, 0,255,0,255, 2);
8754 isPixel(ctx, 65,25, 0,255,0,255, 2);
8755 isPixel(ctx, 50,15, 0,255,0,255, 2);
8756 isPixel(ctx, 50,45, 0,255,0,255, 2);
8757
8758 } catch (e) {
8759     _thrown_outer = true;
8760 }
8761 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
8762
8763
8764 }
8765 </script>
8766
8767 <!-- [[[ test_2d.imageData.put.dirty.zero.html ]]] -->
8768
8769 <p>Canvas test: 2d.imageData.put.dirty.zero</p>
8770 <!-- Testing: putImageData() with zero-sized dirty rectangle puts nothing -->
8771 <canvas id="c297" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8772 <script>
8773
8774
8775
8776 function test_2d_imageData_put_dirty_zero() {
8777
8778 var canvas = document.getElementById('c297');
8779 var ctx = canvas.getContext('2d');
8780
8781 ctx.fillStyle = '#f00';
8782 ctx.fillRect(0, 0, 100, 50)
8783 var imgdata = ctx.getImageData(0, 0, 100, 50);
8784 ctx.fillStyle = '#0f0';
8785 ctx.fillRect(0, 0, 100, 50)
8786 ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0);
8787 isPixel(ctx, 50,25, 0,255,0,255, 2);
8788
8789
8790 }
8791 </script>
8792
8793 <!-- [[[ test_2d.imageData.put.modified.html ]]] -->
8794
8795 <p>Canvas test: 2d.imageData.put.modified</p>
8796 <!-- Testing: putImageData() puts modified image data correctly -->
8797 <canvas id="c298" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8798 <script>
8799
8800
8801 function test_2d_imageData_put_modified() {
8802
8803 var canvas = document.getElementById('c298');
8804 var ctx = canvas.getContext('2d');
8805
8806 ctx.fillStyle = '#0f0';
8807 ctx.fillRect(0, 0, 100, 50)
8808 ctx.fillStyle = '#f00';
8809 ctx.fillRect(45, 20, 10, 10)
8810 var imgdata = ctx.getImageData(45, 20, 10, 10);
8811 for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4)
8812 {
8813     imgdata.data[i] = 0;
8814     imgdata.data[i+1] = 255;
8815 }
8816 ctx.putImageData(imgdata, 45, 20);
8817 isPixel(ctx, 50,25, 0,255,0,255, 2);
8818
8819
8820 }
8821 </script>
8822
8823 <!-- [[[ test_2d.imageData.put.nonfinite.html ]]] -->
8824
8825 <p>Canvas test: 2d.imageData.put.nonfinite</p>
8826 <!-- Testing: putImageData() throws NOT_SUPPORTED_ERR if arguments are not finite -->
8827 <canvas id="c299" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
8828 <script>
8829
8830 // eslint-disable-next-line complexity
8831 function test_2d_imageData_put_nonfinite() {
8832
8833 var canvas = document.getElementById('c299');
8834 var ctx = canvas.getContext('2d');
8835
8836 var imgdata = ctx.getImageData(0, 0, 10, 10);
8837 var _thrown = undefined; try {
8838   ctx.putImageData(imgdata, Infinity, 10);
8839 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8840 var _thrown = undefined; try {
8841   ctx.putImageData(imgdata, -Infinity, 10);
8842 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8843 var _thrown = undefined; try {
8844   ctx.putImageData(imgdata, NaN, 10);
8845 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8846 var _thrown = undefined; try {
8847   ctx.putImageData(imgdata, 10, Infinity);
8848 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8849 var _thrown = undefined; try {
8850   ctx.putImageData(imgdata, 10, -Infinity);
8851 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8852 var _thrown = undefined; try {
8853   ctx.putImageData(imgdata, 10, NaN);
8854 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8855 var _thrown = undefined; try {
8856   ctx.putImageData(imgdata, Infinity, Infinity);
8857 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8858 var _thrown = undefined; try {
8859   ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, 10);
8860 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8861 var _thrown = undefined; try {
8862   ctx.putImageData(imgdata, -Infinity, 10, 10, 10, 10, 10);
8863 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8864 var _thrown = undefined; try {
8865   ctx.putImageData(imgdata, NaN, 10, 10, 10, 10, 10);
8866 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8867 var _thrown = undefined; try {
8868   ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, 10);
8869 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8870 var _thrown = undefined; try {
8871   ctx.putImageData(imgdata, 10, -Infinity, 10, 10, 10, 10);
8872 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8873 var _thrown = undefined; try {
8874   ctx.putImageData(imgdata, 10, NaN, 10, 10, 10, 10);
8875 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8876 var _thrown = undefined; try {
8877   ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, 10);
8878 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8879 var _thrown = undefined; try {
8880   ctx.putImageData(imgdata, 10, 10, -Infinity, 10, 10, 10);
8881 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8882 var _thrown = undefined; try {
8883   ctx.putImageData(imgdata, 10, 10, NaN, 10, 10, 10);
8884 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8885 var _thrown = undefined; try {
8886   ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, 10);
8887 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8888 var _thrown = undefined; try {
8889   ctx.putImageData(imgdata, 10, 10, 10, -Infinity, 10, 10);
8890 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8891 var _thrown = undefined; try {
8892   ctx.putImageData(imgdata, 10, 10, 10, NaN, 10, 10);
8893 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8894 var _thrown = undefined; try {
8895   ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, 10);
8896 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8897 var _thrown = undefined; try {
8898   ctx.putImageData(imgdata, 10, 10, 10, 10, -Infinity, 10);
8899 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8900 var _thrown = undefined; try {
8901   ctx.putImageData(imgdata, 10, 10, 10, 10, NaN, 10);
8902 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8903 var _thrown = undefined; try {
8904   ctx.putImageData(imgdata, 10, 10, 10, 10, 10, Infinity);
8905 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8906 var _thrown = undefined; try {
8907   ctx.putImageData(imgdata, 10, 10, 10, 10, 10, -Infinity);
8908 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8909 var _thrown = undefined; try {
8910   ctx.putImageData(imgdata, 10, 10, 10, 10, 10, NaN);
8911 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8912 var _thrown = undefined; try {
8913   ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, 10);
8914 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8915 var _thrown = undefined; try {
8916   ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, 10);
8917 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8918 var _thrown = undefined; try {
8919   ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, 10);
8920 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8921 var _thrown = undefined; try {
8922   ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, 10);
8923 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8924 var _thrown = undefined; try {
8925   ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
8926 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8927 var _thrown = undefined; try {
8928   ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, Infinity);
8929 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8930 var _thrown = undefined; try {
8931   ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, 10);
8932 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8933 var _thrown = undefined; try {
8934   ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, Infinity);
8935 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8936 var _thrown = undefined; try {
8937   ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, Infinity);
8938 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8939 var _thrown = undefined; try {
8940   ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, 10);
8941 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8942 var _thrown = undefined; try {
8943   ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, 10);
8944 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8945 var _thrown = undefined; try {
8946   ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, Infinity);
8947 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8948 var _thrown = undefined; try {
8949   ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, Infinity);
8950 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8951 var _thrown = undefined; try {
8952   ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, 10);
8953 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8954 var _thrown = undefined; try {
8955   ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, Infinity);
8956 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8957 var _thrown = undefined; try {
8958   ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, Infinity);
8959 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8960 var _thrown = undefined; try {
8961   ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, 10);
8962 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8963 var _thrown = undefined; try {
8964   ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, 10);
8965 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8966 var _thrown = undefined; try {
8967   ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, 10);
8968 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8969 var _thrown = undefined; try {
8970   ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, Infinity);
8971 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8972 var _thrown = undefined; try {
8973   ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, Infinity);
8974 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8975 var _thrown = undefined; try {
8976   ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, 10);
8977 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8978 var _thrown = undefined; try {
8979   ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, Infinity);
8980 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8981 var _thrown = undefined; try {
8982   ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, Infinity);
8983 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8984 var _thrown = undefined; try {
8985   ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, 10);
8986 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8987 var _thrown = undefined; try {
8988   ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, 10);
8989 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8990 var _thrown = undefined; try {
8991   ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, Infinity);
8992 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8993 var _thrown = undefined; try {
8994   ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, Infinity);
8995 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8996 var _thrown = undefined; try {
8997   ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, 10);
8998 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
8999 var _thrown = undefined; try {
9000   ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, Infinity);
9001 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9002 var _thrown = undefined; try {
9003   ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, Infinity);
9004 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9005 var _thrown = undefined; try {
9006   ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, 10);
9007 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9008 var _thrown = undefined; try {
9009   ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, 10);
9010 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9011 var _thrown = undefined; try {
9012   ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, 10);
9013 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9014 var _thrown = undefined; try {
9015   ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, Infinity);
9016 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9017 var _thrown = undefined; try {
9018   ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, Infinity);
9019 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9020 var _thrown = undefined; try {
9021   ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, 10);
9022 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9023 var _thrown = undefined; try {
9024   ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, Infinity);
9025 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9026 var _thrown = undefined; try {
9027   ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, Infinity);
9028 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9029 var _thrown = undefined; try {
9030   ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, 10);
9031 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9032 var _thrown = undefined; try {
9033   ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, 10);
9034 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9035 var _thrown = undefined; try {
9036   ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, Infinity);
9037 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9038 var _thrown = undefined; try {
9039   ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, Infinity);
9040 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9041 var _thrown = undefined; try {
9042   ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, 10);
9043 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9044 var _thrown = undefined; try {
9045   ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, Infinity);
9046 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9047 var _thrown = undefined; try {
9048   ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, Infinity);
9049 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9050 var _thrown = undefined; try {
9051   ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, 10);
9052 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9053 var _thrown = undefined; try {
9054   ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, 10);
9055 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9056 var _thrown = undefined; try {
9057   ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, Infinity);
9058 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9059 var _thrown = undefined; try {
9060   ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, Infinity);
9061 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9062 var _thrown = undefined; try {
9063   ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, 10);
9064 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9065 var _thrown = undefined; try {
9066   ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, Infinity);
9067 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9068 var _thrown = undefined; try {
9069   ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, Infinity);
9070 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9071 var _thrown = undefined; try {
9072   ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, 10);
9073 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9074 var _thrown = undefined; try {
9075   ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, Infinity);
9076 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9077 var _thrown = undefined; try {
9078   ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, Infinity);
9079 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9080 var _thrown = undefined; try {
9081   ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, Infinity);
9082 } catch (e) { _thrown = e }; ok(_thrown && _thrown instanceof TypeError, "should throw TypeError");
9083
9084
9085 }
9086 </script>
9087
9088 <!-- [[[ test_2d.imageData.put.null.html ]]] -->
9089
9090 <p>Canvas test: 2d.imageData.put.null - bug 421715</p>
9091 <!-- Testing: putImageData() with null imagedata throws TYPE_MISMATCH_ERR -->
9092 <canvas id="c300" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9093 <script>
9094
9095 function test_2d_imageData_put_null() {
9096
9097 var canvas = document.getElementById('c300');
9098 var ctx = canvas.getContext('2d');
9099
9100 var _thrown = undefined; try {
9101   ctx.putImageData(null, 0, 0);
9102 } catch (e) { _thrown = e };
9103 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
9104
9105 }
9106 </script>
9107
9108 <!-- [[[ test_2d.imageData.put.path.html ]]] -->
9109
9110 <p>Canvas test: 2d.imageData.put.path</p>
9111 <!-- Testing: putImageData() does not affect the current path -->
9112 <canvas id="c301" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9113 <script>
9114
9115
9116 function test_2d_imageData_put_path() {
9117
9118 var canvas = document.getElementById('c301');
9119 var ctx = canvas.getContext('2d');
9120
9121 ctx.fillStyle = '#f00';
9122 ctx.fillRect(0, 0, 100, 50)
9123 ctx.rect(0, 0, 100, 50);
9124 var imgdata = ctx.getImageData(0, 0, 100, 50);
9125 ctx.putImageData(imgdata, 0, 0);
9126 ctx.fillStyle = '#0f0';
9127 ctx.fill();
9128 isPixel(ctx, 50,25, 0,255,0,255, 2);
9129
9130
9131 }
9132 </script>
9133
9134 <!-- [[[ test_2d.imageData.put.unaffected.html ]]] -->
9135
9136 <p>Canvas test: 2d.imageData.put.unaffected</p>
9137 <!-- Testing: putImageData() is not affected by context state -->
9138 <canvas id="c302" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9139 <script>
9140
9141
9142 function test_2d_imageData_put_unaffected() {
9143
9144 var canvas = document.getElementById('c302');
9145 var ctx = canvas.getContext('2d');
9146
9147 ctx.fillStyle = '#0f0';
9148 ctx.fillRect(0, 0, 100, 50)
9149 var imgdata = ctx.getImageData(0, 0, 100, 50);
9150 ctx.fillStyle = '#f00';
9151 ctx.fillRect(0, 0, 100, 50)
9152 ctx.globalAlpha = 0.1;
9153 ctx.globalCompositeOperation = 'destination-atop';
9154 ctx.shadowColor = '#f00';
9155 ctx.translate(100, 50);
9156 ctx.scale(0.1, 0.1);
9157 ctx.putImageData(imgdata, 0, 0);
9158 isPixel(ctx, 50,25, 0,255,0,255, 2);
9159
9160
9161 }
9162 </script>
9163
9164 <!-- [[[ test_2d.imageData.put.unchanged.html ]]] -->
9165
9166 <p>Canvas test: 2d.imageData.put.unchanged</p>
9167 <!-- Testing: putImageData(getImageData(...), ...) has no effect -->
9168 <canvas id="c303" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9169 <script>
9170
9171 function test_2d_imageData_put_unchanged() {
9172
9173 var canvas = document.getElementById('c303');
9174 var ctx = canvas.getContext('2d');
9175
9176 var i = 0;
9177 for (var y = 0; y < 16; ++y) {
9178     for (var x = 0; x < 16; ++x, ++i) {
9179         ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')';
9180         ctx.fillRect(x, y, 1, 1);
9181     }
9182 }
9183 var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
9184 var olddata = [];
9185 for (var i = 0; i < imgdata1.data.length; ++i)
9186     olddata[i] = imgdata1.data[i];
9187
9188 ctx.putImageData(imgdata1, 0.1, 0.2);
9189
9190 var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
9191 for (var i = 0; i < imgdata2.data.length; ++i) {
9192     ok(olddata[i] === imgdata2.data[i], "olddata[\""+(i)+"\"] === imgdata2.data[\""+(i)+"\"]");
9193 }
9194
9195
9196 }
9197 </script>
9198
9199 <!-- [[[ test_2d.imageData.put.wrongtype.html ]]] -->
9200
9201 <p>Canvas test: 2d.imageData.put.wrongtype</p>
9202 <!-- Testing: putImageData() does not accept non-ImageData objects -->
9203 <canvas id="c304" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9204 <script>
9205
9206 function test_2d_imageData_put_wrongtype() {
9207
9208 var canvas = document.getElementById('c304');
9209 var ctx = canvas.getContext('2d');
9210
9211 var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] };
9212 var _thrown = undefined; try {
9213   ctx.putImageData(imgdata, 0, 0);
9214 } catch (e) { _thrown = e };
9215 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
9216
9217 var _thrown = undefined; try {
9218   ctx.putImageData("cheese", 0, 0);
9219 } catch (e) { _thrown = e };
9220 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
9221
9222 var _thrown = undefined; try {
9223   ctx.putImageData(42, 0, 0);
9224 } catch (e) { _thrown = e };
9225 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
9226 }
9227 </script>
9228
9229 <!-- [[[ test_2d.line.cap.butt.html ]]] -->
9230
9231 <p>Canvas test: 2d.line.cap.butt</p>
9232 <!-- Testing: lineCap 'butt' is rendered correctly -->
9233 <canvas id="c305" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9234 <script>
9235
9236
9237 function test_2d_line_cap_butt() {
9238
9239 var canvas = document.getElementById('c305');
9240 var ctx = canvas.getContext('2d');
9241
9242 ctx.fillStyle = '#0f0';
9243 ctx.fillRect(0, 0, 100, 50);
9244
9245 ctx.lineCap = 'butt';
9246 ctx.lineWidth = 20;
9247
9248 ctx.fillStyle = '#f00';
9249 ctx.strokeStyle = '#0f0';
9250 ctx.fillRect(15, 15, 20, 20);
9251 ctx.beginPath();
9252 ctx.moveTo(25, 15);
9253 ctx.lineTo(25, 35);
9254 ctx.stroke();
9255
9256 ctx.fillStyle = '#0f0';
9257 ctx.strokeStyle = '#f00';
9258 ctx.beginPath();
9259 ctx.moveTo(75, 15);
9260 ctx.lineTo(75, 35);
9261 ctx.stroke();
9262 ctx.fillRect(65, 15, 20, 20);
9263
9264 isPixel(ctx, 25,14, 0,255,0,255, 0);
9265 isPixel(ctx, 25,15, 0,255,0,255, 0);
9266 isPixel(ctx, 25,16, 0,255,0,255, 0);
9267 isPixel(ctx, 25,34, 0,255,0,255, 0);
9268 isPixel(ctx, 25,35, 0,255,0,255, 0);
9269 isPixel(ctx, 25,36, 0,255,0,255, 0);
9270
9271 isPixel(ctx, 75,14, 0,255,0,255, 0);
9272 isPixel(ctx, 75,15, 0,255,0,255, 0);
9273 isPixel(ctx, 75,16, 0,255,0,255, 0);
9274 isPixel(ctx, 75,34, 0,255,0,255, 0);
9275 isPixel(ctx, 75,35, 0,255,0,255, 0);
9276 isPixel(ctx, 75,36, 0,255,0,255, 0);
9277
9278
9279 }
9280 </script>
9281
9282 <!-- [[[ test_2d.line.cap.closed.html ]]] -->
9283
9284 <p>Canvas test: 2d.line.cap.closed</p>
9285 <!-- Testing: Line caps are not drawn at the corners of an unclosed rectangle -->
9286 <canvas id="c306" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9287 <script>
9288
9289
9290 function test_2d_line_cap_closed() {
9291
9292 var canvas = document.getElementById('c306');
9293 var ctx = canvas.getContext('2d');
9294
9295 ctx.fillStyle = '#0f0';
9296 ctx.strokeStyle = '#f00';
9297 ctx.fillRect(0, 0, 100, 50);
9298
9299 ctx.lineJoin = 'bevel';
9300 ctx.lineCap = 'square';
9301 ctx.lineWidth = 400;
9302
9303 ctx.beginPath();
9304 ctx.moveTo(200, 200);
9305 ctx.lineTo(200, 1000);
9306 ctx.lineTo(1000, 1000);
9307 ctx.lineTo(1000, 200);
9308 ctx.closePath();
9309 ctx.stroke();
9310
9311 isPixel(ctx, 1,1, 0,255,0,255, 0);
9312 isPixel(ctx, 48,1, 0,255,0,255, 0);
9313 isPixel(ctx, 48,48, 0,255,0,255, 0);
9314 isPixel(ctx, 1,48, 0,255,0,255, 0);
9315
9316
9317 }
9318 </script>
9319
9320 <!-- [[[ test_2d.line.cap.invalid.html ]]] -->
9321
9322 <p>Canvas test: 2d.line.cap.invalid - bug 401788</p>
9323 <!-- Testing: Setting lineCap to invalid values is ignored -->
9324 <canvas id="c307" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9325 <script>
9326
9327 function test_2d_line_cap_invalid() {
9328
9329 var canvas = document.getElementById('c307');
9330 var ctx = canvas.getContext('2d');
9331
9332 var _thrown_outer = false;
9333 try {
9334
9335 ctx.lineCap = 'butt'
9336 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9337
9338 ctx.lineCap = 'butt';
9339 ctx.lineCap = 'invalid';
9340 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9341
9342 ctx.lineCap = 'butt';
9343 ctx.lineCap = 'ROUND';
9344 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9345
9346 ctx.lineCap = 'butt';
9347 ctx.lineCap = 'round\0';
9348 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9349
9350 ctx.lineCap = 'butt';
9351 ctx.lineCap = 'round ';
9352 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9353
9354 ctx.lineCap = 'butt';
9355 ctx.lineCap = "";
9356 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9357
9358 ctx.lineCap = 'butt';
9359 ctx.lineCap = 'bevel';
9360 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9361
9362 } catch (e) {
9363     _thrown_outer = true;
9364 }
9365 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
9366
9367
9368 }
9369 </script>
9370
9371 <!-- [[[ test_2d.line.cap.open.html ]]] -->
9372
9373 <p>Canvas test: 2d.line.cap.open</p>
9374 <!-- Testing: Line caps are drawn at the corners of an unclosed rectangle -->
9375 <canvas id="c308" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9376 <script>
9377
9378
9379 function test_2d_line_cap_open() {
9380
9381 var canvas = document.getElementById('c308');
9382 var ctx = canvas.getContext('2d');
9383
9384 ctx.fillStyle = '#f00';
9385 ctx.strokeStyle = '#0f0';
9386 ctx.fillRect(0, 0, 100, 50);
9387
9388 ctx.lineJoin = 'bevel';
9389 ctx.lineCap = 'square';
9390 ctx.lineWidth = 400;
9391
9392 ctx.beginPath();
9393 ctx.moveTo(200, 200);
9394 ctx.lineTo(200, 1000);
9395 ctx.lineTo(1000, 1000);
9396 ctx.lineTo(1000, 200);
9397 ctx.lineTo(200, 200);
9398 ctx.stroke();
9399
9400 isPixel(ctx, 1,1, 0,255,0,255, 0);
9401 isPixel(ctx, 48,1, 0,255,0,255, 0);
9402 isPixel(ctx, 48,48, 0,255,0,255, 0);
9403 isPixel(ctx, 1,48, 0,255,0,255, 0);
9404
9405
9406 }
9407 </script>
9408
9409 <!-- [[[ test_2d.line.cap.round.html ]]] -->
9410
9411 <p>Canvas test: 2d.line.cap.round</p>
9412 <!-- Testing: lineCap 'round' is rendered correctly -->
9413 <canvas id="c309" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9414 <script>
9415
9416
9417 function test_2d_line_cap_round() {
9418
9419 var canvas = document.getElementById('c309');
9420 var ctx = canvas.getContext('2d');
9421
9422 ctx.fillStyle = '#0f0';
9423 ctx.fillRect(0, 0, 100, 50);
9424
9425 var tol = 1; // tolerance to avoid antialiasing artifacts
9426
9427 ctx.lineCap = 'round';
9428 ctx.lineWidth = 20;
9429
9430
9431 ctx.fillStyle = '#f00';
9432 ctx.strokeStyle = '#0f0';
9433
9434 ctx.beginPath();
9435 ctx.moveTo(35-tol, 15);
9436 ctx.arc(25, 15, 10-tol, 0, Math.PI, true);
9437 ctx.arc(25, 35, 10-tol, Math.PI, 0, true);
9438 ctx.fill();
9439
9440 ctx.beginPath();
9441 ctx.moveTo(25, 15);
9442 ctx.lineTo(25, 35);
9443 ctx.stroke();
9444
9445
9446 ctx.fillStyle = '#0f0';
9447 ctx.strokeStyle = '#f00';
9448
9449 ctx.beginPath();
9450 ctx.moveTo(75, 15);
9451 ctx.lineTo(75, 35);
9452 ctx.stroke();
9453
9454 ctx.beginPath();
9455 ctx.moveTo(85+tol, 15);
9456 ctx.arc(75, 15, 10+tol, 0, Math.PI, true);
9457 ctx.arc(75, 35, 10+tol, Math.PI, 0, true);
9458 ctx.fill();
9459
9460 isPixel(ctx, 17,6, 0,255,0,255, 0);
9461 isPixel(ctx, 25,6, 0,255,0,255, 0);
9462 isPixel(ctx, 32,6, 0,255,0,255, 0);
9463 isPixel(ctx, 17,43, 0,255,0,255, 0);
9464 isPixel(ctx, 25,43, 0,255,0,255, 0);
9465 isPixel(ctx, 32,43, 0,255,0,255, 0);
9466
9467 isPixel(ctx, 67,6, 0,255,0,255, 0);
9468 isPixel(ctx, 75,6, 0,255,0,255, 0);
9469 isPixel(ctx, 82,6, 0,255,0,255, 0);
9470 isPixel(ctx, 67,43, 0,255,0,255, 0);
9471 isPixel(ctx, 75,43, 0,255,0,255, 0);
9472 isPixel(ctx, 82,43, 0,255,0,255, 0);
9473
9474
9475 }
9476 </script>
9477
9478 <!-- [[[ test_2d.line.cap.square.html ]]] -->
9479
9480 <p>Canvas test: 2d.line.cap.square</p>
9481 <!-- Testing: lineCap 'square' is rendered correctly -->
9482 <canvas id="c310" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9483 <script>
9484
9485
9486 function test_2d_line_cap_square() {
9487
9488 var canvas = document.getElementById('c310');
9489 var ctx = canvas.getContext('2d');
9490
9491 ctx.fillStyle = '#0f0';
9492 ctx.fillRect(0, 0, 100, 50);
9493
9494 ctx.lineCap = 'square';
9495 ctx.lineWidth = 20;
9496
9497 ctx.fillStyle = '#f00';
9498 ctx.strokeStyle = '#0f0';
9499 ctx.fillRect(15, 5, 20, 40);
9500 ctx.beginPath();
9501 ctx.moveTo(25, 15);
9502 ctx.lineTo(25, 35);
9503 ctx.stroke();
9504
9505 ctx.fillStyle = '#0f0';
9506 ctx.strokeStyle = '#f00';
9507 ctx.beginPath();
9508 ctx.moveTo(75, 15);
9509 ctx.lineTo(75, 35);
9510 ctx.stroke();
9511 ctx.fillRect(65, 5, 20, 40);
9512
9513 isPixel(ctx, 25,4, 0,255,0,255, 0);
9514 isPixel(ctx, 25,5, 0,255,0,255, 0);
9515 isPixel(ctx, 25,6, 0,255,0,255, 0);
9516 isPixel(ctx, 25,44, 0,255,0,255, 0);
9517 isPixel(ctx, 25,45, 0,255,0,255, 0);
9518 isPixel(ctx, 25,46, 0,255,0,255, 0);
9519
9520 isPixel(ctx, 75,4, 0,255,0,255, 0);
9521 isPixel(ctx, 75,5, 0,255,0,255, 0);
9522 isPixel(ctx, 75,6, 0,255,0,255, 0);
9523 isPixel(ctx, 75,44, 0,255,0,255, 0);
9524 isPixel(ctx, 75,45, 0,255,0,255, 0);
9525 isPixel(ctx, 75,46, 0,255,0,255, 0);
9526
9527
9528 }
9529 </script>
9530
9531 <!-- [[[ test_2d.line.cross.html ]]] -->
9532
9533 <p>Canvas test: 2d.line.cross</p>
9534 <canvas id="c311" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9535 <script>
9536
9537
9538 function test_2d_line_cross() {
9539
9540 var canvas = document.getElementById('c311');
9541 var ctx = canvas.getContext('2d');
9542
9543 ctx.fillStyle = '#0f0';
9544 ctx.fillRect(0, 0, 100, 50);
9545
9546 ctx.lineWidth = 200;
9547 ctx.lineJoin = 'bevel';
9548
9549 ctx.strokeStyle = '#f00';
9550 ctx.beginPath();
9551 ctx.moveTo(110, 50);
9552 ctx.lineTo(110, 60);
9553 ctx.lineTo(100, 60);
9554 ctx.stroke();
9555
9556 isPixel(ctx, 1,1, 0,255,0,255, 0);
9557 isPixel(ctx, 48,1, 0,255,0,255, 0);
9558 isPixel(ctx, 48,48, 0,255,0,255, 0);
9559 isPixel(ctx, 1,48, 0,255,0,255, 0);
9560
9561
9562 }
9563 </script>
9564
9565 <!-- [[[ test_2d.line.defaults.html ]]] -->
9566
9567 <p>Canvas test: 2d.line.defaults</p>
9568 <canvas id="c312" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9569 <script>
9570
9571 function test_2d_line_defaults() {
9572
9573 var canvas = document.getElementById('c312');
9574 var ctx = canvas.getContext('2d');
9575
9576 ok(ctx.lineWidth === 1, "ctx.lineWidth === 1");
9577 ok(ctx.lineCap === 'butt', "ctx.lineCap === 'butt'");
9578 ok(ctx.lineJoin === 'miter', "ctx.lineJoin === 'miter'");
9579 ok(ctx.miterLimit === 10, "ctx.miterLimit === 10");
9580
9581
9582 }
9583 </script>
9584
9585 <!-- [[[ test_2d.line.join.bevel.html ]]] -->
9586
9587 <p>Canvas test: 2d.line.join.bevel</p>
9588 <!-- Testing: lineJoin 'bevel' is rendered correctly -->
9589 <canvas id="c313" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9590 <script>
9591
9592
9593 function test_2d_line_join_bevel() {
9594
9595 var canvas = document.getElementById('c313');
9596 var ctx = canvas.getContext('2d');
9597
9598 ctx.fillStyle = '#0f0';
9599 ctx.fillRect(0, 0, 100, 50);
9600
9601 var tol = 1; // tolerance to avoid antialiasing artifacts
9602
9603 ctx.lineJoin = 'bevel';
9604 ctx.lineWidth = 20;
9605
9606 ctx.fillStyle = '#f00';
9607 ctx.strokeStyle = '#0f0';
9608
9609 ctx.fillRect(10, 10, 20, 20);
9610 ctx.fillRect(20, 20, 20, 20);
9611 ctx.beginPath();
9612 ctx.moveTo(30, 20);
9613 ctx.lineTo(40-tol, 20);
9614 ctx.lineTo(30, 10+tol);
9615 ctx.fill();
9616
9617 ctx.beginPath();
9618 ctx.moveTo(10, 20);
9619 ctx.lineTo(30, 20);
9620 ctx.lineTo(30, 40);
9621 ctx.stroke();
9622
9623
9624 ctx.fillStyle = '#0f0';
9625 ctx.strokeStyle = '#f00';
9626
9627 ctx.beginPath();
9628 ctx.moveTo(60, 20);
9629 ctx.lineTo(80, 20);
9630 ctx.lineTo(80, 40);
9631 ctx.stroke();
9632
9633 ctx.fillRect(60, 10, 20, 20);
9634 ctx.fillRect(70, 20, 20, 20);
9635 ctx.beginPath();
9636 ctx.moveTo(80, 20);
9637 ctx.lineTo(90+tol, 20);
9638 ctx.lineTo(80, 10-tol);
9639 ctx.fill();
9640
9641 isPixel(ctx, 34,16, 0,255,0,255, 0);
9642 isPixel(ctx, 34,15, 0,255,0,255, 0);
9643 isPixel(ctx, 35,15, 0,255,0,255, 0);
9644 isPixel(ctx, 36,15, 0,255,0,255, 0);
9645 isPixel(ctx, 36,14, 0,255,0,255, 0);
9646
9647 isPixel(ctx, 84,16, 0,255,0,255, 0);
9648 isPixel(ctx, 84,15, 0,255,0,255, 0);
9649 isPixel(ctx, 85,15, 0,255,0,255, 0);
9650 isPixel(ctx, 86,15, 0,255,0,255, 0);
9651 isPixel(ctx, 86,14, 0,255,0,255, 0);
9652
9653
9654 }
9655 </script>
9656
9657 <!-- [[[ test_2d.line.join.closed.html ]]] -->
9658
9659 <p>Canvas test: 2d.line.join.closed</p>
9660 <!-- Testing: Line joins are drawn at the corner of a closed rectangle -->
9661 <canvas id="c314" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9662 <script>
9663
9664
9665 function test_2d_line_join_closed() {
9666
9667 var canvas = document.getElementById('c314');
9668 var ctx = canvas.getContext('2d');
9669
9670 ctx.fillStyle = '#f00';
9671 ctx.strokeStyle = '#0f0';
9672 ctx.fillRect(0, 0, 100, 50);
9673
9674 ctx.lineJoin = 'miter';
9675 ctx.lineWidth = 200;
9676
9677 ctx.beginPath();
9678 ctx.moveTo(100, 50);
9679 ctx.lineTo(100, 1000);
9680 ctx.lineTo(1000, 1000);
9681 ctx.lineTo(1000, 50);
9682 ctx.closePath();
9683 ctx.stroke();
9684
9685 isPixel(ctx, 1,1, 0,255,0,255, 0);
9686 isPixel(ctx, 48,1, 0,255,0,255, 0);
9687 isPixel(ctx, 48,48, 0,255,0,255, 0);
9688 isPixel(ctx, 1,48, 0,255,0,255, 0);
9689
9690
9691 }
9692 </script>
9693
9694 <!-- [[[ test_2d.line.join.invalid.html ]]] -->
9695
9696 <p>Canvas test: 2d.line.join.invalid - bug 401788</p>
9697 <!-- Testing: Setting lineJoin to invalid values is ignored -->
9698 <canvas id="c315" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9699 <script>
9700
9701 function test_2d_line_join_invalid() {
9702
9703 var canvas = document.getElementById('c315');
9704 var ctx = canvas.getContext('2d');
9705
9706 var _thrown_outer = false;
9707 try {
9708
9709 ctx.lineJoin = 'bevel'
9710 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9711
9712 ctx.lineJoin = 'bevel';
9713 ctx.lineJoin = 'invalid';
9714 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9715
9716 ctx.lineJoin = 'bevel';
9717 ctx.lineJoin = 'ROUND';
9718 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9719
9720 ctx.lineJoin = 'bevel';
9721 ctx.lineJoin = 'round\0';
9722 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9723
9724 ctx.lineJoin = 'bevel';
9725 ctx.lineJoin = 'round ';
9726 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9727
9728 ctx.lineJoin = 'bevel';
9729 ctx.lineJoin = "";
9730 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9731
9732 ctx.lineJoin = 'bevel';
9733 ctx.lineJoin = 'butt';
9734 ok(ctx.lineJoin === 'bevel', "ctx.lineJoin === 'bevel'");
9735
9736 } catch (e) {
9737     _thrown_outer = true;
9738 }
9739 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
9740
9741
9742 }
9743 </script>
9744
9745 <!-- [[[ test_2d.line.join.miter.html ]]] -->
9746
9747 <p>Canvas test: 2d.line.join.miter</p>
9748 <!-- Testing: lineJoin 'miter' is rendered correctly -->
9749 <canvas id="c316" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9750 <script>
9751
9752
9753 function test_2d_line_join_miter() {
9754
9755 var canvas = document.getElementById('c316');
9756 var ctx = canvas.getContext('2d');
9757
9758 ctx.fillStyle = '#0f0';
9759 ctx.fillRect(0, 0, 100, 50);
9760
9761 ctx.lineJoin = 'miter';
9762 ctx.lineWidth = 20;
9763
9764 ctx.fillStyle = '#f00';
9765 ctx.strokeStyle = '#0f0';
9766
9767 ctx.fillStyle = '#f00';
9768 ctx.strokeStyle = '#0f0';
9769
9770 ctx.fillRect(10, 10, 30, 20);
9771 ctx.fillRect(20, 10, 20, 30);
9772
9773 ctx.beginPath();
9774 ctx.moveTo(10, 20);
9775 ctx.lineTo(30, 20);
9776 ctx.lineTo(30, 40);
9777 ctx.stroke();
9778
9779
9780 ctx.fillStyle = '#0f0';
9781 ctx.strokeStyle = '#f00';
9782
9783 ctx.beginPath();
9784 ctx.moveTo(60, 20);
9785 ctx.lineTo(80, 20);
9786 ctx.lineTo(80, 40);
9787 ctx.stroke();
9788
9789 ctx.fillRect(60, 10, 30, 20);
9790 ctx.fillRect(70, 10, 20, 30);
9791
9792 isPixel(ctx, 38,12, 0,255,0,255, 0);
9793 isPixel(ctx, 39,11, 0,255,0,255, 0);
9794 isPixel(ctx, 40,10, 0,255,0,255, 0);
9795 isPixel(ctx, 41,9, 0,255,0,255, 0);
9796 isPixel(ctx, 42,8, 0,255,0,255, 0);
9797
9798 isPixel(ctx, 88,12, 0,255,0,255, 0);
9799 isPixel(ctx, 89,11, 0,255,0,255, 0);
9800 isPixel(ctx, 90,10, 0,255,0,255, 0);
9801 isPixel(ctx, 91,9, 0,255,0,255, 0);
9802 isPixel(ctx, 92,8, 0,255,0,255, 0);
9803
9804
9805 }
9806 </script>
9807
9808 <!-- [[[ test_2d.line.join.open.html ]]] -->
9809
9810 <p>Canvas test: 2d.line.join.open</p>
9811 <!-- Testing: Line joins are not drawn at the corner of an unclosed rectangle -->
9812 <canvas id="c317" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9813 <script>
9814
9815
9816 function test_2d_line_join_open() {
9817
9818 var canvas = document.getElementById('c317');
9819 var ctx = canvas.getContext('2d');
9820
9821 ctx.fillStyle = '#0f0';
9822 ctx.strokeStyle = '#f00';
9823 ctx.fillRect(0, 0, 100, 50);
9824
9825 ctx.lineJoin = 'miter';
9826 ctx.lineWidth = 200;
9827
9828 ctx.beginPath();
9829 ctx.moveTo(100, 50);
9830 ctx.lineTo(100, 1000);
9831 ctx.lineTo(1000, 1000);
9832 ctx.lineTo(1000, 50);
9833 ctx.lineTo(100, 50);
9834 ctx.stroke();
9835
9836 isPixel(ctx, 1,1, 0,255,0,255, 0);
9837 isPixel(ctx, 48,1, 0,255,0,255, 0);
9838 isPixel(ctx, 48,48, 0,255,0,255, 0);
9839 isPixel(ctx, 1,48, 0,255,0,255, 0);
9840
9841
9842 }
9843 </script>
9844
9845 <!-- [[[ test_2d.line.join.parallel.html ]]] -->
9846
9847 <p>Canvas test: 2d.line.join.parallel</p>
9848 <!-- Testing: Line joins are drawn at 180-degree joins -->
9849 <canvas id="c318" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9850 <script>
9851
9852
9853 function test_2d_line_join_parallel() {
9854
9855 var canvas = document.getElementById('c318');
9856 var ctx = canvas.getContext('2d');
9857
9858 ctx.fillStyle = '#f00';
9859 ctx.fillRect(0, 0, 100, 50);
9860
9861 ctx.strokeStyle = '#0f0';
9862 ctx.lineWidth = 300;
9863 ctx.lineJoin = 'round';
9864 ctx.beginPath();
9865 ctx.moveTo(-100, 25);
9866 ctx.lineTo(0, 25);
9867 ctx.lineTo(-100, 25);
9868 ctx.stroke();
9869
9870 isPixel(ctx, 1,1, 0,255,0,255, 0);
9871 isPixel(ctx, 48,1, 0,255,0,255, 0);
9872 isPixel(ctx, 48,48, 0,255,0,255, 0);
9873 isPixel(ctx, 1,48, 0,255,0,255, 0);
9874
9875
9876 }
9877 </script>
9878
9879 <!-- [[[ test_2d.line.join.round.html ]]] -->
9880
9881 <p>Canvas test: 2d.line.join.round</p>
9882 <!-- Testing: lineJoin 'round' is rendered correctly -->
9883 <canvas id="c319" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9884 <script>
9885
9886
9887 function test_2d_line_join_round() {
9888
9889 var canvas = document.getElementById('c319');
9890 var ctx = canvas.getContext('2d');
9891
9892 ctx.fillStyle = '#0f0';
9893 ctx.fillRect(0, 0, 100, 50);
9894
9895 var tol = 1; // tolerance to avoid antialiasing artifacts
9896
9897 ctx.lineJoin = 'round';
9898 ctx.lineWidth = 20;
9899
9900 ctx.fillStyle = '#f00';
9901 ctx.strokeStyle = '#0f0';
9902
9903 ctx.fillRect(10, 10, 20, 20);
9904 ctx.fillRect(20, 20, 20, 20);
9905 ctx.beginPath();
9906 ctx.moveTo(30, 20);
9907 ctx.arc(30, 20, 10-tol, 0, 2*Math.PI, true);
9908 ctx.fill();
9909
9910 ctx.beginPath();
9911 ctx.moveTo(10, 20);
9912 ctx.lineTo(30, 20);
9913 ctx.lineTo(30, 40);
9914 ctx.stroke();
9915
9916
9917 ctx.fillStyle = '#0f0';
9918 ctx.strokeStyle = '#f00';
9919
9920 ctx.beginPath();
9921 ctx.moveTo(60, 20);
9922 ctx.lineTo(80, 20);
9923 ctx.lineTo(80, 40);
9924 ctx.stroke();
9925
9926 ctx.fillRect(60, 10, 20, 20);
9927 ctx.fillRect(70, 20, 20, 20);
9928 ctx.beginPath();
9929 ctx.moveTo(80, 20);
9930 ctx.arc(80, 20, 10+tol, 0, 2*Math.PI, true);
9931 ctx.fill();
9932
9933 isPixel(ctx, 36,14, 0,255,0,255, 0);
9934 isPixel(ctx, 36,13, 0,255,0,255, 0);
9935 isPixel(ctx, 37,13, 0,255,0,255, 0);
9936 isPixel(ctx, 38,13, 0,255,0,255, 0);
9937 isPixel(ctx, 38,12, 0,255,0,255, 0);
9938
9939 isPixel(ctx, 86,14, 0,255,0,255, 0);
9940 isPixel(ctx, 86,13, 0,255,0,255, 0);
9941 isPixel(ctx, 87,13, 0,255,0,255, 0);
9942 isPixel(ctx, 88,13, 0,255,0,255, 0);
9943 isPixel(ctx, 88,12, 0,255,0,255, 0);
9944
9945
9946 }
9947 </script>
9948
9949 <!-- [[[ test_2d.line.miter.acute.html ]]] -->
9950
9951 <p>Canvas test: 2d.line.miter.acute</p>
9952 <!-- Testing: Miter joins are drawn correctly with acute angles -->
9953 <canvas id="c320" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9954 <script>
9955
9956
9957 function test_2d_line_miter_acute() {
9958
9959 var canvas = document.getElementById('c320');
9960 var ctx = canvas.getContext('2d');
9961
9962 ctx.fillStyle = '#f00';
9963 ctx.fillRect(0, 0, 100, 50);
9964
9965 ctx.lineWidth = 200;
9966 ctx.lineJoin = 'miter';
9967
9968 ctx.strokeStyle = '#0f0';
9969 ctx.miterLimit = 2.614;
9970 ctx.beginPath();
9971 ctx.moveTo(100, 1000);
9972 ctx.lineTo(100, 100);
9973 ctx.lineTo(1000, 1000);
9974 ctx.stroke();
9975
9976 ctx.strokeStyle = '#f00';
9977 ctx.miterLimit = 2.613;
9978 ctx.beginPath();
9979 ctx.moveTo(100, 1000);
9980 ctx.lineTo(100, 100);
9981 ctx.lineTo(1000, 1000);
9982 ctx.stroke();
9983
9984 isPixel(ctx, 1,1, 0,255,0,255, 0);
9985 isPixel(ctx, 48,1, 0,255,0,255, 0);
9986 isPixel(ctx, 48,48, 0,255,0,255, 0);
9987 isPixel(ctx, 1,48, 0,255,0,255, 0);
9988
9989
9990 }
9991 </script>
9992
9993 <!-- [[[ test_2d.line.miter.exceeded.html ]]] -->
9994
9995 <p>Canvas test: 2d.line.miter.exceeded</p>
9996 <!-- Testing: Miter joins are not drawn when the miter limit is exceeded -->
9997 <canvas id="c321" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
9998 <script>
9999
10000
10001 function test_2d_line_miter_exceeded() {
10002
10003 var canvas = document.getElementById('c321');
10004 var ctx = canvas.getContext('2d');
10005
10006 ctx.fillStyle = '#0f0';
10007 ctx.fillRect(0, 0, 100, 50);
10008
10009 ctx.lineWidth = 400;
10010 ctx.lineJoin = 'miter';
10011
10012 ctx.strokeStyle = '#f00';
10013 ctx.miterLimit = 1.414;
10014 ctx.beginPath();
10015 ctx.moveTo(200, 1000);
10016 ctx.lineTo(200, 200);
10017 ctx.lineTo(1000, 201); // slightly non-right-angle to avoid being a special case
10018 ctx.stroke();
10019
10020 isPixel(ctx, 1,1, 0,255,0,255, 0);
10021 isPixel(ctx, 48,1, 0,255,0,255, 0);
10022 isPixel(ctx, 48,48, 0,255,0,255, 0);
10023 isPixel(ctx, 1,48, 0,255,0,255, 0);
10024
10025
10026 }
10027 </script>
10028
10029 <!-- [[[ test_2d.line.miter.invalid.html ]]] -->
10030
10031 <p>Canvas test: 2d.line.miter.invalid</p>
10032 <!-- Testing: Setting miterLimit to invalid values is ignored -->
10033 <canvas id="c322" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10034 <script>
10035
10036 function test_2d_line_miter_invalid() {
10037
10038 var canvas = document.getElementById('c322');
10039 var ctx = canvas.getContext('2d');
10040
10041 var _thrown_outer = false;
10042 try {
10043
10044 ctx.miterLimit = 1.5;
10045 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10046
10047 ctx.miterLimit = 1.5;
10048 ctx.miterLimit = 0;
10049 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10050
10051 ctx.miterLimit = 1.5;
10052 ctx.miterLimit = -1;
10053 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10054
10055 ctx.miterLimit = 1.5;
10056 ctx.miterLimit = Infinity;
10057 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10058
10059 ctx.miterLimit = 1.5;
10060 ctx.miterLimit = -Infinity;
10061 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10062
10063 ctx.miterLimit = 1.5;
10064 ctx.miterLimit = NaN;
10065 ok(ctx.miterLimit === 1.5, "ctx.miterLimit === 1.5");
10066
10067 } catch (e) {
10068     _thrown_outer = true;
10069 }
10070 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
10071
10072
10073 }
10074 </script>
10075
10076 <!-- [[[ test_2d.line.miter.lineedge.html ]]] -->
10077
10078 <p>Canvas test: 2d.line.miter.lineedge - bug 401791</p>
10079 <!-- Testing: Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle -->
10080 <canvas id="c323" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10081 <script>
10082
10083
10084 function test_2d_line_miter_lineedge() {
10085
10086 var canvas = document.getElementById('c323');
10087 var ctx = canvas.getContext('2d');
10088
10089 ctx.fillStyle = '#0f0';
10090 ctx.fillRect(0, 0, 100, 50);
10091
10092 ctx.lineWidth = 200;
10093 ctx.lineJoin = 'miter';
10094
10095 ctx.strokeStyle = '#f00';
10096 ctx.miterLimit = 1.414;
10097 ctx.beginPath();
10098 ctx.strokeRect(100, 25, 200, 0);
10099
10100 isPixel(ctx, 1,1, 0,255,0,255, 0);
10101 isPixel(ctx, 48,1, 0,255,0,255, 0);
10102 isPixel(ctx, 48,48, 0,255,0,255, 0);
10103 isPixel(ctx, 1,48, 0,255,0,255, 0);
10104
10105
10106 }
10107 </script>
10108
10109 <!-- [[[ test_2d.line.miter.obtuse.html ]]] -->
10110
10111 <p>Canvas test: 2d.line.miter.obtuse</p>
10112 <!-- Testing: Miter joins are drawn correctly with obtuse angles -->
10113 <canvas id="c324" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10114 <script>
10115
10116
10117 function test_2d_line_miter_obtuse() {
10118
10119 var canvas = document.getElementById('c324');
10120 var ctx = canvas.getContext('2d');
10121
10122 ctx.fillStyle = '#f00';
10123 ctx.fillRect(0, 0, 100, 50);
10124
10125 var x=800;
10126 var y=300;
10127 ctx.lineWidth = 1600;
10128 ctx.lineJoin = 'miter';
10129
10130 ctx.strokeStyle = '#0f0';
10131 ctx.miterLimit = 1.083;
10132 ctx.beginPath();
10133 ctx.moveTo(800, 10000);
10134 ctx.lineTo(800, 300);
10135 ctx.lineTo(10000, -8900);
10136 ctx.stroke();
10137
10138 ctx.strokeStyle = '#f00';
10139 ctx.miterLimit = 1.082;
10140 ctx.beginPath();
10141 ctx.moveTo(800, 10000);
10142 ctx.lineTo(800, 300);
10143 ctx.lineTo(10000, -8900);
10144 ctx.stroke();
10145
10146 isPixel(ctx, 1,1, 0,255,0,255, 0);
10147 isPixel(ctx, 48,1, 0,255,0,255, 0);
10148 isPixel(ctx, 48,48, 0,255,0,255, 0);
10149 isPixel(ctx, 1,48, 0,255,0,255, 0);
10150
10151
10152 }
10153 </script>
10154
10155 <!-- [[[ test_2d.line.miter.rightangle.html ]]] -->
10156
10157 <p>Canvas test: 2d.line.miter.rightangle - bug 401791</p>
10158 <!-- Testing: Miter joins are not drawn when the miter limit is exceeded, on exact right angles -->
10159 <canvas id="c325" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10160 <script>
10161
10162
10163 function test_2d_line_miter_rightangle() {
10164
10165 var canvas = document.getElementById('c325');
10166 var ctx = canvas.getContext('2d');
10167
10168 ctx.fillStyle = '#0f0';
10169 ctx.fillRect(0, 0, 100, 50);
10170
10171 ctx.lineWidth = 400;
10172 ctx.lineJoin = 'miter';
10173
10174 ctx.strokeStyle = '#f00';
10175 ctx.miterLimit = 1.414;
10176 ctx.beginPath();
10177 ctx.moveTo(200, 1000);
10178 ctx.lineTo(200, 200);
10179 ctx.lineTo(1000, 200);
10180 ctx.stroke();
10181
10182 isPixel(ctx, 1,1, 0,255,0,255, 0);
10183 isPixel(ctx, 48,1, 0,255,0,255, 0);
10184 isPixel(ctx, 48,48, 0,255,0,255, 0);
10185 isPixel(ctx, 1,48, 0,255,0,255, 0);
10186
10187
10188 }
10189 </script>
10190
10191 <!-- [[[ test_2d.line.miter.within.html ]]] -->
10192
10193 <p>Canvas test: 2d.line.miter.within</p>
10194 <!-- Testing: Miter joins are drawn when the miter limit is not quite exceeded -->
10195 <canvas id="c326" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10196 <script>
10197
10198
10199 function test_2d_line_miter_within() {
10200
10201 var canvas = document.getElementById('c326');
10202 var ctx = canvas.getContext('2d');
10203
10204 ctx.fillStyle = '#f00';
10205 ctx.fillRect(0, 0, 100, 50);
10206
10207 ctx.lineWidth = 400;
10208 ctx.lineJoin = 'miter';
10209
10210 ctx.strokeStyle = '#0f0';
10211 ctx.miterLimit = 1.416;
10212 ctx.beginPath();
10213 ctx.moveTo(200, 1000);
10214 ctx.lineTo(200, 200);
10215 ctx.lineTo(1000, 201);
10216 ctx.stroke();
10217
10218 isPixel(ctx, 1,1, 0,255,0,255, 0);
10219 isPixel(ctx, 48,1, 0,255,0,255, 0);
10220 isPixel(ctx, 48,48, 0,255,0,255, 0);
10221 isPixel(ctx, 1,48, 0,255,0,255, 0);
10222
10223
10224 }
10225 </script>
10226
10227 <!-- [[[ test_2d.line.union.html ]]] -->
10228
10229 <p>Canvas test: 2d.line.union</p>
10230 <canvas id="c327" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10231 <script>
10232
10233
10234 function test_2d_line_union() {
10235
10236 var canvas = document.getElementById('c327');
10237 var ctx = canvas.getContext('2d');
10238
10239 ctx.fillStyle = '#f00';
10240 ctx.fillRect(0, 0, 100, 50);
10241
10242 ctx.lineWidth = 100;
10243 ctx.lineCap = 'round';
10244
10245 ctx.strokeStyle = '#0f0';
10246 ctx.beginPath();
10247 ctx.moveTo(0, 24);
10248 ctx.lineTo(100, 25);
10249 ctx.lineTo(0, 26);
10250 ctx.closePath();
10251 ctx.stroke();
10252
10253 isPixel(ctx, 1,1, 0,255,0,255, 0);
10254 isPixel(ctx, 25,1, 0,255,0,255, 0);
10255 isPixel(ctx, 48,1, 0,255,0,255, 0);
10256 isPixel(ctx, 1,48, 0,255,0,255, 0);
10257 isPixel(ctx, 25,1, 0,255,0,255, 0);
10258 isPixel(ctx, 48,48, 0,255,0,255, 0);
10259
10260
10261 }
10262 </script>
10263
10264 <!-- [[[ test_2d.line.width.basic.html ]]] -->
10265
10266 <p>Canvas test: 2d.line.width.basic</p>
10267 <!-- Testing: lineWidth determines the width of line strokes -->
10268 <canvas id="c328" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10269 <script>
10270
10271
10272 function test_2d_line_width_basic() {
10273
10274 var canvas = document.getElementById('c328');
10275 var ctx = canvas.getContext('2d');
10276
10277 ctx.fillStyle = '#0f0';
10278 ctx.fillRect(0, 0, 100, 50);
10279
10280 ctx.lineWidth = 20;
10281 // Draw a green line over a red box, to check the line is not too small
10282 ctx.fillStyle = '#f00';
10283 ctx.strokeStyle = '#0f0';
10284 ctx.fillRect(15, 15, 20, 20);
10285 ctx.beginPath();
10286 ctx.moveTo(25, 15);
10287 ctx.lineTo(25, 35);
10288 ctx.stroke();
10289
10290 // Draw a green box over a red line, to check the line is not too large
10291 ctx.fillStyle = '#0f0';
10292 ctx.strokeStyle = '#f00';
10293 ctx.beginPath();
10294 ctx.moveTo(75, 15);
10295 ctx.lineTo(75, 35);
10296 ctx.stroke();
10297 ctx.fillRect(65, 15, 20, 20);
10298
10299 isPixel(ctx, 14,25, 0,255,0,255, 0);
10300 isPixel(ctx, 15,25, 0,255,0,255, 0);
10301 isPixel(ctx, 16,25, 0,255,0,255, 0);
10302 isPixel(ctx, 25,25, 0,255,0,255, 0);
10303 isPixel(ctx, 34,25, 0,255,0,255, 0);
10304 isPixel(ctx, 35,25, 0,255,0,255, 0);
10305 isPixel(ctx, 36,25, 0,255,0,255, 0);
10306
10307 isPixel(ctx, 64,25, 0,255,0,255, 0);
10308 isPixel(ctx, 65,25, 0,255,0,255, 0);
10309 isPixel(ctx, 66,25, 0,255,0,255, 0);
10310 isPixel(ctx, 75,25, 0,255,0,255, 0);
10311 isPixel(ctx, 84,25, 0,255,0,255, 0);
10312 isPixel(ctx, 85,25, 0,255,0,255, 0);
10313 isPixel(ctx, 86,25, 0,255,0,255, 0);
10314
10315
10316 }
10317 </script>
10318
10319 <!-- [[[ test_2d.line.width.invalid.html ]]] -->
10320
10321 <p>Canvas test: 2d.line.width.invalid</p>
10322 <!-- Testing: Setting lineWidth to invalid values is ignored -->
10323 <canvas id="c329" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10324 <script>
10325
10326 function test_2d_line_width_invalid() {
10327
10328 var canvas = document.getElementById('c329');
10329 var ctx = canvas.getContext('2d');
10330
10331 var _thrown_outer = false;
10332 try {
10333
10334 ctx.lineWidth = 1.5;
10335 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10336
10337 ctx.lineWidth = 1.5;
10338 ctx.lineWidth = 0;
10339 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10340
10341 ctx.lineWidth = 1.5;
10342 ctx.lineWidth = -1;
10343 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10344
10345 ctx.lineWidth = 1.5;
10346 ctx.lineWidth = Infinity;
10347 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10348
10349 ctx.lineWidth = 1.5;
10350 ctx.lineWidth = -Infinity;
10351 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10352
10353 ctx.lineWidth = 1.5;
10354 ctx.lineWidth = NaN;
10355 ok(ctx.lineWidth === 1.5, "ctx.lineWidth === 1.5");
10356
10357 } catch (e) {
10358     _thrown_outer = true;
10359 }
10360 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
10361
10362
10363 }
10364 </script>
10365
10366 <!-- [[[ test_2d.line.width.transformed.html ]]] -->
10367
10368 <p>Canvas test: 2d.line.width.transformed</p>
10369 <!-- Testing: Line stroke widths are affected by scale transformations -->
10370 <canvas id="c330" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10371 <script>
10372
10373
10374 function test_2d_line_width_transformed() {
10375
10376 var canvas = document.getElementById('c330');
10377 var ctx = canvas.getContext('2d');
10378
10379 ctx.fillStyle = '#0f0';
10380 ctx.fillRect(0, 0, 100, 50);
10381
10382 ctx.lineWidth = 4;
10383 // Draw a green line over a red box, to check the line is not too small
10384 ctx.fillStyle = '#f00';
10385 ctx.strokeStyle = '#0f0';
10386 ctx.fillRect(15, 15, 20, 20);
10387 ctx.save();
10388  ctx.scale(5, 1);
10389  ctx.beginPath();
10390  ctx.moveTo(5, 15);
10391  ctx.lineTo(5, 35);
10392  ctx.stroke();
10393 ctx.restore();
10394
10395 // Draw a green box over a red line, to check the line is not too large
10396 ctx.fillStyle = '#0f0';
10397 ctx.strokeStyle = '#f00';
10398 ctx.save();
10399  ctx.scale(-5, 1);
10400  ctx.beginPath();
10401  ctx.moveTo(-15, 15);
10402  ctx.lineTo(-15, 35);
10403  ctx.stroke();
10404 ctx.restore();
10405 ctx.fillRect(65, 15, 20, 20);
10406
10407 isPixel(ctx, 14,25, 0,255,0,255, 0);
10408 isPixel(ctx, 15,25, 0,255,0,255, 0);
10409 isPixel(ctx, 16,25, 0,255,0,255, 0);
10410 isPixel(ctx, 25,25, 0,255,0,255, 0);
10411 isPixel(ctx, 34,25, 0,255,0,255, 0);
10412 isPixel(ctx, 35,25, 0,255,0,255, 0);
10413 isPixel(ctx, 36,25, 0,255,0,255, 0);
10414
10415 isPixel(ctx, 64,25, 0,255,0,255, 0);
10416 isPixel(ctx, 65,25, 0,255,0,255, 0);
10417 isPixel(ctx, 66,25, 0,255,0,255, 0);
10418 isPixel(ctx, 75,25, 0,255,0,255, 0);
10419 isPixel(ctx, 84,25, 0,255,0,255, 0);
10420 isPixel(ctx, 85,25, 0,255,0,255, 0);
10421 isPixel(ctx, 86,25, 0,255,0,255, 0);
10422
10423
10424 }
10425 </script>
10426
10427 <!-- [[[ test_2d.missingargs.html ]]] -->
10428
10429 <p>Canvas test: 2d.missingargs</p>
10430 <!-- Testing: Missing arguments cause NOT_SUPPORTED_ERR -->
10431 <canvas id="c331" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10432 <script>
10433
10434 // eslint-disable-next-line complexity
10435 function test_2d_missingargs() {
10436
10437 var canvas = document.getElementById('c331');
10438 var ctx = canvas.getContext('2d');
10439
10440 var _thrown = undefined; try {
10441   ctx.scale();
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.scale(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.rotate();
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.translate();
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.translate(0);
10454 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10455 if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
10456     var _thrown = undefined; try {
10457   ctx.transform();
10458 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10459     var _thrown = undefined; try {
10460   ctx.transform(1);
10461 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10462     var _thrown = undefined; try {
10463   ctx.transform(1, 0);
10464 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10465     var _thrown = undefined; try {
10466   ctx.transform(1, 0, 0);
10467 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10468     var _thrown = undefined; try {
10469   ctx.transform(1, 0, 0, 1);
10470 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10471     var _thrown = undefined; try {
10472   ctx.transform(1, 0, 0, 1, 0);
10473 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10474 }
10475 if (ctx.setTransform) {
10476     var _thrown = undefined; try {
10477   ctx.setTransform();
10478 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10479     var _thrown = undefined; try {
10480   ctx.setTransform(1);
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.setTransform(1, 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.setTransform(1, 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.setTransform(1, 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.setTransform(1, 0, 0, 1, 0);
10493 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10494 }
10495 var _thrown = undefined; try {
10496   ctx.createLinearGradient();
10497 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10498 var _thrown = undefined; try {
10499   ctx.createLinearGradient(0);
10500 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10501 var _thrown = undefined; try {
10502   ctx.createLinearGradient(0, 0);
10503 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10504 var _thrown = undefined; try {
10505   ctx.createLinearGradient(0, 0, 1);
10506 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10507 var _thrown = undefined; try {
10508   ctx.createRadialGradient();
10509 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10510 var _thrown = undefined; try {
10511   ctx.createRadialGradient(0);
10512 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10513 var _thrown = undefined; try {
10514   ctx.createRadialGradient(0, 0);
10515 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10516 var _thrown = undefined; try {
10517   ctx.createRadialGradient(0, 0, 1);
10518 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10519 var _thrown = undefined; try {
10520   ctx.createRadialGradient(0, 0, 1, 0);
10521 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10522 var _thrown = undefined; try {
10523   ctx.createRadialGradient(0, 0, 1, 0, 0);
10524 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10525 var _thrown = undefined; try {
10526   ctx.createPattern(canvas);
10527 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10528 var _thrown = undefined; try {
10529   ctx.clearRect();
10530 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10531 var _thrown = undefined; try {
10532   ctx.clearRect(0);
10533 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10534 var _thrown = undefined; try {
10535   ctx.clearRect(0, 0);
10536 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10537 var _thrown = undefined; try {
10538   ctx.clearRect(0, 0, 0);
10539 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10540 var _thrown = undefined; try {
10541   ctx.fillRect();
10542 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10543 var _thrown = undefined; try {
10544   ctx.fillRect(0);
10545 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10546 var _thrown = undefined; try {
10547   ctx.fillRect(0, 0);
10548 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10549 var _thrown = undefined; try {
10550   ctx.fillRect(0, 0, 0);
10551 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10552 var _thrown = undefined; try {
10553   ctx.strokeRect();
10554 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10555 var _thrown = undefined; try {
10556   ctx.strokeRect(0);
10557 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10558 var _thrown = undefined; try {
10559   ctx.strokeRect(0, 0);
10560 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10561 var _thrown = undefined; try {
10562   ctx.strokeRect(0, 0, 0);
10563 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10564 var _thrown = undefined; try {
10565   ctx.moveTo();
10566 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10567 var _thrown = undefined; try {
10568   ctx.moveTo(0);
10569 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10570 var _thrown = undefined; try {
10571   ctx.lineTo();
10572 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10573 var _thrown = undefined; try {
10574   ctx.lineTo(0);
10575 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10576 var _thrown = undefined; try {
10577   ctx.quadraticCurveTo();
10578 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10579 var _thrown = undefined; try {
10580   ctx.quadraticCurveTo(0);
10581 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10582 var _thrown = undefined; try {
10583   ctx.quadraticCurveTo(0, 0);
10584 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10585 var _thrown = undefined; try {
10586   ctx.quadraticCurveTo(0, 0, 0);
10587 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10588 var _thrown = undefined; try {
10589   ctx.bezierCurveTo();
10590 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10591 var _thrown = undefined; try {
10592   ctx.bezierCurveTo(0);
10593 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10594 var _thrown = undefined; try {
10595   ctx.bezierCurveTo(0, 0);
10596 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10597 var _thrown = undefined; try {
10598   ctx.bezierCurveTo(0, 0, 0);
10599 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10600 var _thrown = undefined; try {
10601   ctx.bezierCurveTo(0, 0, 0, 0);
10602 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10603 var _thrown = undefined; try {
10604   ctx.bezierCurveTo(0, 0, 0, 0, 0);
10605 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10606 var _thrown = undefined; try {
10607   ctx.arcTo();
10608 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10609 var _thrown = undefined; try {
10610   ctx.arcTo(0);
10611 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10612 var _thrown = undefined; try {
10613   ctx.arcTo(0, 0);
10614 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10615 var _thrown = undefined; try {
10616   ctx.arcTo(0, 0, 0);
10617 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10618 var _thrown = undefined; try {
10619   ctx.arcTo(0, 0, 0, 0);
10620 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10621 var _thrown = undefined; try {
10622   ctx.rect();
10623 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10624 var _thrown = undefined; try {
10625   ctx.rect(0);
10626 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10627 var _thrown = undefined; try {
10628   ctx.rect(0, 0);
10629 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10630 var _thrown = undefined; try {
10631   ctx.rect(0, 0, 0);
10632 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10633 var _thrown = undefined; try {
10634   ctx.arc();
10635 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10636 var _thrown = undefined; try {
10637   ctx.arc(0);
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.arc(0, 0);
10641 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10642 var _thrown = undefined; try {
10643   ctx.arc(0, 0, 1);
10644 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10645 var _thrown = undefined; try {
10646   ctx.arc(0, 0, 1, 0);
10647 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10648 var _thrown = undefined; try {
10649   ctx.arc(0, 0, 1, 0, 0);
10650 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10651 if (ctx.isPointInPath) {
10652     var _thrown = undefined; try {
10653   ctx.isPointInPath();
10654 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10655     var _thrown = undefined; try {
10656   ctx.isPointInPath(0);
10657 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10658 }
10659 var _thrown = undefined; try {
10660   ctx.drawImage();
10661 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10662 var _thrown = undefined; try {
10663   ctx.drawImage(canvas);
10664 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10665 var _thrown = undefined; try {
10666   ctx.drawImage(canvas, 0);
10667 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10668 // TODO: n >= 3 args on drawImage could be either a valid overload,
10669 // or too few for another overload, or too many for another
10670 // overload - what should happen?
10671 if (ctx.createImageData) {
10672     var _thrown = undefined; try {
10673   ctx.createImageData();
10674 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10675     var _thrown = undefined; try {
10676   ctx.createImageData(1);
10677 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10678 }
10679 if (ctx.getImageData) {
10680     var _thrown = undefined; try {
10681   ctx.getImageData();
10682 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10683     var _thrown = undefined; try {
10684   ctx.getImageData(0);
10685 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10686     var _thrown = undefined; try {
10687   ctx.getImageData(0, 0);
10688 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10689     var _thrown = undefined; try {
10690   ctx.getImageData(0, 0, 1);
10691 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10692 }
10693 if (ctx.putImageData) {
10694     var imgdata = ctx.getImageData(0, 0, 1, 1);
10695     var _thrown = undefined; try {
10696   ctx.putImageData();
10697 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10698     var _thrown = undefined; try {
10699   ctx.putImageData(imgdata);
10700 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10701     var _thrown = undefined; try {
10702   ctx.putImageData(imgdata, 0);
10703 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10704 }
10705 var g = ctx.createLinearGradient(0, 0, 0, 0);
10706 var _thrown = undefined; try {
10707   g.addColorStop();
10708 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10709 var _thrown = undefined; try {
10710   g.addColorStop(0);
10711 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
10712
10713
10714 }
10715 </script>
10716
10717 <!-- [[[ test_2d.path.arc.angle.1.html ]]] -->
10718
10719 <p>Canvas test: 2d.path.arc.angle.1</p>
10720 <!-- Testing: arc() draws pi/2 .. -pi anticlockwise correctly -->
10721 <canvas id="c332" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10722 <script>
10723
10724
10725 function test_2d_path_arc_angle_1() {
10726
10727 var canvas = document.getElementById('c332');
10728 var ctx = canvas.getContext('2d');
10729
10730 ctx.fillStyle = '#0f0';
10731 ctx.fillRect(0, 0, 100, 50);
10732 ctx.fillStyle = '#f00';
10733 ctx.beginPath();
10734 ctx.moveTo(100, 0);
10735 ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true);
10736 ctx.fill();
10737 isPixel(ctx, 50,25, 0,255,0,255, 0);
10738
10739
10740 }
10741 </script>
10742
10743 <!-- [[[ test_2d.path.arc.angle.2.html ]]] -->
10744
10745 <p>Canvas test: 2d.path.arc.angle.2</p>
10746 <!-- Testing: arc() draws -3pi/2 .. -pi anticlockwise correctly -->
10747 <canvas id="c333" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10748 <script>
10749
10750
10751 function test_2d_path_arc_angle_2() {
10752
10753 var canvas = document.getElementById('c333');
10754 var ctx = canvas.getContext('2d');
10755
10756 ctx.fillStyle = '#0f0';
10757 ctx.fillRect(0, 0, 100, 50);
10758 ctx.fillStyle = '#f00';
10759 ctx.beginPath();
10760 ctx.moveTo(100, 0);
10761 ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true);
10762 ctx.fill();
10763 isPixel(ctx, 50,25, 0,255,0,255, 0);
10764
10765
10766 }
10767 </script>
10768
10769 <!-- [[[ test_2d.path.arc.angle.3.html ]]] -->
10770
10771 <p>Canvas test: 2d.path.arc.angle.3</p>
10772 <!-- Testing: arc() wraps angles mod 2pi when anticlockwise and end > start+2pi -->
10773 <canvas id="c334" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10774 <script>
10775
10776
10777 function test_2d_path_arc_angle_3() {
10778
10779 var canvas = document.getElementById('c334');
10780 var ctx = canvas.getContext('2d');
10781
10782 ctx.fillStyle = '#0f0';
10783 ctx.fillRect(0, 0, 100, 50);
10784 ctx.fillStyle = '#f00';
10785 ctx.beginPath();
10786 ctx.moveTo(100, 0);
10787 ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
10788 ctx.fill();
10789 isPixel(ctx, 50,25, 0,255,0,255, 0);
10790
10791
10792 }
10793 </script>
10794
10795 <!-- [[[ test_2d.path.arc.angle.4.html ]]] -->
10796
10797 <p>Canvas test: 2d.path.arc.angle.4</p>
10798 <!-- Testing: arc() draws a full circle when clockwise and end > start+2pi -->
10799 <canvas id="c335" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10800 <script>
10801
10802
10803 function test_2d_path_arc_angle_4() {
10804
10805 var canvas = document.getElementById('c335');
10806 var ctx = canvas.getContext('2d');
10807
10808 ctx.fillStyle = '#f00';
10809 ctx.fillRect(0, 0, 100, 50);
10810 ctx.fillStyle = '#0f0';
10811 ctx.beginPath();
10812 ctx.moveTo(50, 25);
10813 ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
10814 ctx.fill();
10815 isPixel(ctx, 1,1, 0,255,0,255, 0);
10816 isPixel(ctx, 98,1, 0,255,0,255, 0);
10817 isPixel(ctx, 1,48, 0,255,0,255, 0);
10818 isPixel(ctx, 98,48, 0,255,0,255, 0);
10819
10820
10821 }
10822 </script>
10823
10824 <!-- [[[ test_2d.path.arc.angle.5.html ]]] -->
10825
10826 <p>Canvas test: 2d.path.arc.angle.5</p>
10827 <!-- Testing: arc() wraps angles mod 2pi when clockwise and start > end+2pi -->
10828 <canvas id="c336" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10829 <script>
10830
10831
10832 function test_2d_path_arc_angle_5() {
10833
10834 var canvas = document.getElementById('c336');
10835 var ctx = canvas.getContext('2d');
10836
10837 ctx.fillStyle = '#0f0';
10838 ctx.fillRect(0, 0, 100, 50);
10839 ctx.fillStyle = '#f00';
10840 ctx.beginPath();
10841 ctx.moveTo(100, 0);
10842 ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
10843 ctx.fill();
10844 isPixel(ctx, 50,25, 0,255,0,255, 0);
10845
10846
10847 }
10848 </script>
10849
10850 <!-- [[[ test_2d.path.arc.angle.6.html ]]] -->
10851
10852 <p>Canvas test: 2d.path.arc.angle.6</p>
10853 <!-- Testing: arc() draws a full circle when anticlockwise and start > end+2pi -->
10854 <canvas id="c337" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10855 <script>
10856
10857
10858 function test_2d_path_arc_angle_6() {
10859
10860 var canvas = document.getElementById('c337');
10861 var ctx = canvas.getContext('2d');
10862
10863 ctx.fillStyle = '#f00';
10864 ctx.fillRect(0, 0, 100, 50);
10865 ctx.fillStyle = '#0f0';
10866 ctx.beginPath();
10867 ctx.moveTo(50, 25);
10868 ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
10869 ctx.fill();
10870 isPixel(ctx, 1,1, 0,255,0,255, 0);
10871 isPixel(ctx, 98,1, 0,255,0,255, 0);
10872 isPixel(ctx, 1,48, 0,255,0,255, 0);
10873 isPixel(ctx, 98,48, 0,255,0,255, 0);
10874
10875
10876 }
10877 </script>
10878
10879 <!-- [[[ test_2d.path.arc.empty.html ]]] -->
10880
10881 <p>Canvas test: 2d.path.arc.empty</p>
10882 <!-- Testing: arc() with an empty path does not draw a straight line to the start point -->
10883 <canvas id="c338" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10884 <script>
10885
10886
10887 function test_2d_path_arc_empty() {
10888
10889 var canvas = document.getElementById('c338');
10890 var ctx = canvas.getContext('2d');
10891
10892 ctx.fillStyle = '#0f0';
10893 ctx.fillRect(0, 0, 100, 50);
10894 ctx.lineWidth = 50;
10895 ctx.strokeStyle = '#f00';
10896 ctx.beginPath();
10897 ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
10898 ctx.stroke();
10899 isPixel(ctx, 50,25, 0,255,0,255, 0);
10900
10901
10902 }
10903 </script>
10904
10905 <!-- [[[ test_2d.path.arc.end.html ]]] -->
10906
10907 <p>Canvas test: 2d.path.arc.end</p>
10908 <!-- Testing: arc() adds the end point of the arc to the subpath -->
10909 <canvas id="c339" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10910 <script>
10911
10912
10913 function test_2d_path_arc_end() {
10914
10915 var canvas = document.getElementById('c339');
10916 var ctx = canvas.getContext('2d');
10917
10918 ctx.fillStyle = '#f00';
10919 ctx.fillRect(0, 0, 100, 50);
10920 ctx.lineWidth = 50;
10921 ctx.strokeStyle = '#0f0';
10922 ctx.beginPath();
10923 ctx.moveTo(-100, 0);
10924 ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true);
10925 ctx.lineTo(100, 25);
10926 ctx.stroke();
10927 isPixel(ctx, 50,25, 0,255,0,255, 0);
10928
10929
10930 }
10931 </script>
10932
10933 <!-- [[[ test_2d.path.arc.negative.html ]]] -->
10934
10935 <p>Canvas test: 2d.path.arc.negative</p>
10936 <!-- Testing: arc() with negative radius throws INDEX_SIZE_ERR -->
10937 <canvas id="c340" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10938 <script>
10939
10940 function test_2d_path_arc_negative() {
10941
10942 var canvas = document.getElementById('c340');
10943 var ctx = canvas.getContext('2d');
10944
10945 var _thrown = undefined; try {
10946   ctx.arc(0, 0, -1, 0, 0, true);
10947 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
10948
10949
10950 }
10951 </script>
10952
10953 <!-- [[[ test_2d.path.arc.nonempty.html ]]] -->
10954
10955 <p>Canvas test: 2d.path.arc.nonempty</p>
10956 <!-- Testing: arc() with a non-empty path does draw a straight line to the start point -->
10957 <canvas id="c341" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10958 <script>
10959
10960
10961 function test_2d_path_arc_nonempty() {
10962
10963 var canvas = document.getElementById('c341');
10964 var ctx = canvas.getContext('2d');
10965
10966 ctx.fillStyle = '#f00';
10967 ctx.fillRect(0, 0, 100, 50);
10968 ctx.lineWidth = 50;
10969 ctx.strokeStyle = '#0f0';
10970 ctx.beginPath();
10971 ctx.moveTo(0, 25);
10972 ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
10973 ctx.stroke();
10974 isPixel(ctx, 50,25, 0,255,0,255, 0);
10975
10976
10977 }
10978 </script>
10979
10980 <!-- [[[ test_2d.path.arc.nonfinite.html ]]] -->
10981
10982 <p>Canvas test: 2d.path.arc.nonfinite</p>
10983 <!-- Testing: arc() with Infinity/NaN is ignored -->
10984 <canvas id="c342" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
10985 <script>
10986
10987
10988 function test_2d_path_arc_nonfinite() {
10989
10990 var canvas = document.getElementById('c342');
10991 var ctx = canvas.getContext('2d');
10992
10993 var _thrown_outer = false;
10994 try {
10995
10996 ctx.fillStyle = '#f00';
10997 ctx.fillRect(0, 0, 100, 50);
10998 ctx.moveTo(0, 0);
10999 ctx.lineTo(100, 0);
11000 ctx.arc(Infinity, 50, 0, 2*Math.PI, true);
11001 ctx.arc(-Infinity, 50, 0, 2*Math.PI, true);
11002 ctx.arc(NaN, 50, 0, 2*Math.PI, true);
11003 ctx.arc(0, Infinity, 0, 2*Math.PI, true);
11004 ctx.arc(0, -Infinity, 0, 2*Math.PI, true);
11005 ctx.arc(0, NaN, 0, 2*Math.PI, true);
11006 ctx.arc(0, 50, Infinity, 2*Math.PI, true);
11007 ctx.arc(0, 50, -Infinity, 2*Math.PI, true);
11008 ctx.arc(0, 50, NaN, 2*Math.PI, true);
11009 ctx.arc(0, 50, 0, Infinity, true);
11010 ctx.arc(0, 50, 0, -Infinity, true);
11011 ctx.arc(0, 50, 0, NaN, true);
11012 ctx.arc(Infinity, Infinity, 0, 2*Math.PI, true);
11013 ctx.arc(Infinity, Infinity, Infinity, 2*Math.PI, true);
11014 ctx.arc(Infinity, Infinity, Infinity, Infinity, true);
11015 ctx.arc(Infinity, Infinity, 0, Infinity, true);
11016 ctx.arc(Infinity, 50, Infinity, 2*Math.PI, true);
11017 ctx.arc(Infinity, 50, Infinity, Infinity, true);
11018 ctx.arc(Infinity, 50, 0, Infinity, true);
11019 ctx.arc(0, Infinity, Infinity, 2*Math.PI, true);
11020 ctx.arc(0, Infinity, Infinity, Infinity, true);
11021 ctx.arc(0, Infinity, 0, Infinity, true);
11022 ctx.arc(0, 50, Infinity, Infinity, true);
11023 ctx.lineTo(100, 50);
11024 ctx.lineTo(0, 50);
11025 ctx.fillStyle = '#0f0';
11026 ctx.fill();
11027 isPixel(ctx, 50,25, 0,255,0,255, 0);
11028 isPixel(ctx, 90,45, 0,255,0,255, 0);
11029
11030 } catch (e) {
11031     _thrown_outer = true;
11032 }
11033 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
11034
11035
11036 }
11037 </script>
11038
11039 <!-- [[[ test_2d.path.arc.scale.1.html ]]] -->
11040
11041 <p>Canvas test: 2d.path.arc.scale.1</p>
11042 <!-- Testing: Non-uniformly scaled arcs are the right shape -->
11043 <canvas id="c343" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11044 <script>
11045
11046
11047 function test_2d_path_arc_scale_1() {
11048
11049 var canvas = document.getElementById('c343');
11050 var ctx = canvas.getContext('2d');
11051
11052 ctx.fillStyle = '#f00';
11053 ctx.fillRect(0, 0, 100, 50);
11054 ctx.scale(2, 0.5);
11055 ctx.fillStyle = '#0f0';
11056 ctx.beginPath();
11057 var hypothenuse = Math.sqrt(50 * 50 + 25 * 25);
11058 var tolerance = 0.5;
11059 var radius = hypothenuse + tolerance;
11060 ctx.arc(25, 50, radius, 0, 2*Math.PI, false);
11061 ctx.fill();
11062 ctx.fillStyle = '#f00';
11063 ctx.beginPath();
11064 ctx.moveTo(-25, 50);
11065 ctx.arc(-25, 50, 24, 0, 2*Math.PI, false);
11066 ctx.moveTo(75, 50);
11067 ctx.arc(75, 50, 24, 0, 2*Math.PI, false);
11068 ctx.moveTo(25, -25);
11069 ctx.arc(25, -25, 24, 0, 2*Math.PI, false);
11070 ctx.moveTo(25, 125);
11071 ctx.arc(25, 125, 24, 0, 2*Math.PI, false);
11072 ctx.fill();
11073
11074 isPixel(ctx, 0,0, 0,255,0,255, 0);
11075 isPixel(ctx, 50,0, 0,255,0,255, 0);
11076 isPixel(ctx, 99,0, 0,255,0,255, 0);
11077 isPixel(ctx, 0,25, 0,255,0,255, 0);
11078 isPixel(ctx, 50,25, 0,255,0,255, 0);
11079 isPixel(ctx, 99,25, 0,255,0,255, 0);
11080 isPixel(ctx, 0,49, 0,255,0,255, 0);
11081 isPixel(ctx, 50,49, 0,255,0,255, 0);
11082 isPixel(ctx, 99,49, 0,255,0,255, 0);
11083
11084
11085 }
11086 </script>
11087
11088 <!-- [[[ test_2d.path.arc.scale.2.html ]]] -->
11089
11090 <p>Canvas test: 2d.path.arc.scale.2</p>
11091 <!-- Testing: Highly scaled arcs are the right shape -->
11092 <canvas id="c344" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11093 <script>
11094
11095
11096 function test_2d_path_arc_scale_2() {
11097
11098 var canvas = document.getElementById('c344');
11099 var ctx = canvas.getContext('2d');
11100
11101 ctx.fillStyle = '#f00';
11102 ctx.fillRect(0, 0, 100, 50);
11103 ctx.scale(100, 100);
11104 ctx.strokeStyle = '#0f0';
11105 ctx.lineWidth = 1.2;
11106 ctx.beginPath();
11107 ctx.arc(0, 0, 0.6, 0, Math.PI/2, false);
11108 ctx.stroke();
11109
11110 isPixel(ctx, 1,1, 0,255,0,255, 0);
11111 isPixel(ctx, 50,1, 0,255,0,255, 0);
11112 isPixel(ctx, 98,1, 0,255,0,255, 0);
11113 isPixel(ctx, 1,25, 0,255,0,255, 0);
11114 isPixel(ctx, 50,25, 0,255,0,255, 0);
11115 isPixel(ctx, 98,25, 0,255,0,255, 0);
11116 isPixel(ctx, 1,48, 0,255,0,255, 0);
11117 isPixel(ctx, 50,48, 0,255,0,255, 0);
11118 isPixel(ctx, 98,48, 0,255,0,255, 0);
11119
11120
11121 }
11122 </script>
11123
11124 <!-- [[[ test_2d.path.arc.selfintersect.1.html ]]] -->
11125
11126 <p>Canvas test: 2d.path.arc.selfintersect.1</p>
11127 <!-- Testing: arc() with lineWidth > 2*radius is drawn sensibly -->
11128 <canvas id="c345" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11129 <script>
11130
11131
11132 function test_2d_path_arc_selfintersect_1() {
11133
11134 var canvas = document.getElementById('c345');
11135 var ctx = canvas.getContext('2d');
11136
11137 ctx.fillStyle = '#0f0';
11138 ctx.fillRect(0, 0, 100, 50);
11139 ctx.lineWidth = 200;
11140 ctx.strokeStyle = '#f00';
11141 ctx.beginPath();
11142 ctx.arc(100, 50, 25, 0, -Math.PI/2, true);
11143 ctx.stroke();
11144 ctx.beginPath();
11145 ctx.arc(0, 0, 25, 0, -Math.PI/2, true);
11146 ctx.stroke();
11147 isPixel(ctx, 50,25, 0,255,0,255, 0);
11148
11149
11150 }
11151 </script>
11152
11153 <!-- [[[ test_2d.path.arc.selfintersect.2.html ]]] -->
11154
11155 <p>Canvas test: 2d.path.arc.selfintersect.2</p>
11156 <!-- Testing: arc() with lineWidth > 2*radius is drawn sensibly -->
11157 <canvas id="c346" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11158 <script>
11159
11160
11161 function test_2d_path_arc_selfintersect_2() {
11162
11163 var canvas = document.getElementById('c346');
11164 var ctx = canvas.getContext('2d');
11165
11166 ctx.fillStyle = '#f00';
11167 ctx.fillRect(0, 0, 100, 50);
11168 ctx.lineWidth = 180;
11169 ctx.strokeStyle = '#0f0';
11170 ctx.beginPath();
11171 ctx.arc(-50, 50, 25, 0, -Math.PI/2, true);
11172 ctx.stroke();
11173 ctx.beginPath();
11174 ctx.arc(100, 0, 25, 0, -Math.PI/2, true);
11175 ctx.stroke();
11176 isPixel(ctx, 50,25, 0,255,0,255, 0);
11177 isPixel(ctx, 90,10, 0,255,0,255, 0);
11178 isPixel(ctx, 97,1, 0,255,0,255, 0);
11179 isPixel(ctx, 97,2, 0,255,0,255, 0);
11180 isPixel(ctx, 97,3, 0,255,0,255, 0);
11181 isPixel(ctx, 2,48, 0,255,0,255, 0);
11182
11183
11184 }
11185 </script>
11186
11187 <!-- [[[ test_2d.path.arc.shape.1.html ]]] -->
11188
11189 <p>Canvas test: 2d.path.arc.shape.1</p>
11190 <!-- Testing: arc() from 0 to pi does not draw anything in the wrong half -->
11191 <canvas id="c347" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11192 <script>
11193
11194
11195 function test_2d_path_arc_shape_1() {
11196
11197 var canvas = document.getElementById('c347');
11198 var ctx = canvas.getContext('2d');
11199
11200 ctx.fillStyle = '#0f0';
11201 ctx.fillRect(0, 0, 100, 50);
11202 ctx.lineWidth = 50;
11203 ctx.strokeStyle = '#f00';
11204 ctx.beginPath();
11205 ctx.arc(50, 50, 50, 0, Math.PI, false);
11206 ctx.stroke();
11207 isPixel(ctx, 50,25, 0,255,0,255, 0);
11208 isPixel(ctx, 1,1, 0,255,0,255, 0);
11209 isPixel(ctx, 98,1, 0,255,0,255, 0);
11210 isPixel(ctx, 1,48, 0,255,0,255, 0);
11211 isPixel(ctx, 20,48, 0,255,0,255, 0);
11212 isPixel(ctx, 98,48, 0,255,0,255, 0);
11213
11214 }
11215 </script>
11216
11217 <!-- [[[ test_2d.path.arc.shape.2.html ]]] -->
11218
11219 <p>Canvas test: 2d.path.arc.shape.2</p>
11220 <!-- Testing: arc() from 0 to pi draws stuff in the right half -->
11221 <canvas id="c348" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11222 <script>
11223
11224
11225 function test_2d_path_arc_shape_2() {
11226
11227 var canvas = document.getElementById('c348');
11228 var ctx = canvas.getContext('2d');
11229
11230 ctx.fillStyle = '#f00';
11231 ctx.fillRect(0, 0, 100, 50);
11232 ctx.lineWidth = 100;
11233 ctx.strokeStyle = '#0f0';
11234 ctx.beginPath();
11235 ctx.arc(50, 50, 50, 0, Math.PI, true);
11236 ctx.stroke();
11237 isPixel(ctx, 50,25, 0,255,0,255, 0);
11238 isPixel(ctx, 1,1, 0,255,0,255, 0);
11239 isPixel(ctx, 98,1, 0,255,0,255, 0);
11240 isPixel(ctx, 1,48, 0,255,0,255, 0);
11241 isPixel(ctx, 20,48, 0,255,0,255, 0);
11242 isPixel(ctx, 98,48, 0,255,0,255, 0);
11243
11244
11245 }
11246 </script>
11247
11248 <!-- [[[ test_2d.path.arc.shape.3.html ]]] -->
11249
11250 <p>Canvas test: 2d.path.arc.shape.3</p>
11251 <!-- Testing: arc() from 0 to -pi/2 does not draw anything in the wrong quadrant -->
11252 <canvas id="c349" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11253 <script>
11254
11255
11256
11257 function test_2d_path_arc_shape_3() {
11258
11259 var canvas = document.getElementById('c349');
11260 var ctx = canvas.getContext('2d');
11261
11262 ctx.fillStyle = '#0f0';
11263 ctx.fillRect(0, 0, 100, 50);
11264 ctx.lineWidth = 100;
11265 ctx.strokeStyle = '#f00';
11266 ctx.beginPath();
11267 ctx.arc(0, 50, 50, 0, -Math.PI/2, false);
11268 ctx.stroke();
11269 isPixel(ctx, 50,25, 0,255,0,255, 0);
11270 isPixel(ctx, 1,1, 0,255,0,255, 0);
11271 isPixel(ctx, 98,1, 0,255,0,255, 0);
11272 isPixel(ctx, 1,48, 0,255,0,255, 0);
11273 isPixel(ctx, 98,48, 0,255,0,255, 0);
11274
11275
11276 }
11277 </script>
11278
11279 <!-- [[[ test_2d.path.arc.shape.4.html ]]] -->
11280
11281 <p>Canvas test: 2d.path.arc.shape.4</p>
11282 <!-- Testing: arc() from 0 to -pi/2 draws stuff in the right quadrant -->
11283 <canvas id="c350" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11284 <script>
11285
11286
11287 function test_2d_path_arc_shape_4() {
11288
11289 var canvas = document.getElementById('c350');
11290 var ctx = canvas.getContext('2d');
11291
11292 ctx.fillStyle = '#f00';
11293 ctx.fillRect(0, 0, 100, 50);
11294 ctx.lineWidth = 150;
11295 ctx.strokeStyle = '#0f0';
11296 ctx.beginPath();
11297 ctx.arc(-50, 50, 100, 0, -Math.PI/2, true);
11298 ctx.stroke();
11299 isPixel(ctx, 50,25, 0,255,0,255, 0);
11300 isPixel(ctx, 1,1, 0,255,0,255, 0);
11301 isPixel(ctx, 98,1, 0,255,0,255, 0);
11302 isPixel(ctx, 1,48, 0,255,0,255, 0);
11303 isPixel(ctx, 98,48, 0,255,0,255, 0);
11304
11305
11306 }
11307 </script>
11308
11309 <!-- [[[ test_2d.path.arc.shape.5.html ]]] -->
11310
11311 <p>Canvas test: 2d.path.arc.shape.5</p>
11312 <!-- Testing: arc() from 0 to 5pi does not draw strange things -->
11313 <canvas id="c351" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11314 <script>
11315
11316
11317 function test_2d_path_arc_shape_5() {
11318
11319 var canvas = document.getElementById('c351');
11320 var ctx = canvas.getContext('2d');
11321
11322 ctx.fillStyle = '#0f0';
11323 ctx.fillRect(0, 0, 100, 50);
11324 ctx.lineWidth = 200;
11325 ctx.strokeStyle = '#f00';
11326 ctx.beginPath();
11327 ctx.arc(300, 0, 100, 0, 5*Math.PI, false);
11328 ctx.stroke();
11329 isPixel(ctx, 50,25, 0,255,0,255, 0);
11330 isPixel(ctx, 1,1, 0,255,0,255, 0);
11331 isPixel(ctx, 98,1, 0,255,0,255, 0);
11332 isPixel(ctx, 1,48, 0,255,0,255, 0);
11333 isPixel(ctx, 98,48, 0,255,0,255, 0);
11334
11335
11336 }
11337 </script>
11338
11339 <!-- [[[ test_2d.path.arc.twopie.1.html ]]] -->
11340
11341 <p>Canvas test: 2d.path.arc.twopie.1</p>
11342 <!-- Testing: arc() draws nothing when end = start + 2pi-e and anticlockwise -->
11343 <canvas id="c352" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11344 <script>
11345
11346
11347 function test_2d_path_arc_twopie_1() {
11348
11349 var canvas = document.getElementById('c352');
11350 var ctx = canvas.getContext('2d');
11351
11352 ctx.fillStyle = '#0f0';
11353 ctx.fillRect(0, 0, 100, 50);
11354 ctx.strokeStyle = '#f00';
11355 ctx.lineWidth = 100;
11356 ctx.beginPath();
11357 ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true);
11358 ctx.stroke();
11359 isPixel(ctx, 50,20, 0,255,0,255, 0);
11360
11361
11362 }
11363 </script>
11364
11365 <!-- [[[ test_2d.path.arc.twopie.2.html ]]] -->
11366
11367 <p>Canvas test: 2d.path.arc.twopie.2</p>
11368 <!-- Testing: arc() draws a full circle when end = start + 2pi-e and clockwise -->
11369 <canvas id="c353" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11370 <script>
11371
11372
11373 function test_2d_path_arc_twopie_2() {
11374
11375 var canvas = document.getElementById('c353');
11376 var ctx = canvas.getContext('2d');
11377
11378 ctx.fillStyle = '#f00';
11379 ctx.fillRect(0, 0, 100, 50);
11380 ctx.strokeStyle = '#0f0';
11381 ctx.lineWidth = 100;
11382 ctx.beginPath();
11383 ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false);
11384 ctx.stroke();
11385 isPixel(ctx, 50,20, 0,255,0,255, 0);
11386
11387
11388 }
11389 </script>
11390
11391 <!-- [[[ test_2d.path.arc.twopie.3.html ]]] -->
11392
11393 <p>Canvas test: 2d.path.arc.twopie.3</p>
11394 <!-- Testing: arc() draws a full circle when end = start + 2pi+e and anticlockwise -->
11395 <canvas id="c354" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11396 <script>
11397
11398
11399 function test_2d_path_arc_twopie_3() {
11400
11401 var canvas = document.getElementById('c354');
11402 var ctx = canvas.getContext('2d');
11403
11404 ctx.fillStyle = '#f00';
11405 ctx.fillRect(0, 0, 100, 50);
11406 ctx.strokeStyle = '#0f0';
11407 ctx.lineWidth = 100;
11408 ctx.beginPath();
11409 ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true);
11410 ctx.stroke();
11411 isPixel(ctx, 50,20, 0,255,0,255, 0);
11412
11413
11414 }
11415 </script>
11416
11417 <!-- [[[ test_2d.path.arc.twopie.4.html ]]] -->
11418
11419 <p>Canvas test: 2d.path.arc.twopie.4</p>
11420 <!-- Testing: arc() draws nothing when end = start + 2pi+e and clockwise -->
11421 <canvas id="c355" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11422 <script>
11423
11424
11425 function test_2d_path_arc_twopie_4() {
11426
11427 var canvas = document.getElementById('c355');
11428 var ctx = canvas.getContext('2d');
11429
11430 ctx.fillStyle = '#f00';
11431 ctx.fillRect(0, 0, 100, 50);
11432 ctx.strokeStyle = '#0f0';
11433 ctx.lineWidth = 100;
11434 ctx.beginPath();
11435 ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false);
11436 ctx.stroke();
11437 isPixel(ctx, 50,20, 0,255,0,255, 0);
11438
11439
11440 }
11441 </script>
11442
11443 <!-- [[[ test_2d.path.arc.zero.1.html ]]] -->
11444
11445 <p>Canvas test: 2d.path.arc.zero.1</p>
11446 <!-- Testing: arc() draws nothing when startAngle = endAngle and anticlockwise -->
11447 <canvas id="c356" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11448 <script>
11449
11450
11451 function test_2d_path_arc_zero_1() {
11452
11453 var canvas = document.getElementById('c356');
11454 var ctx = canvas.getContext('2d');
11455
11456 ctx.fillStyle = '#0f0';
11457 ctx.fillRect(0, 0, 100, 50);
11458 ctx.strokeStyle = '#f00';
11459 ctx.lineWidth = 100;
11460 ctx.beginPath();
11461 ctx.arc(50, 25, 50, 0, 0, true);
11462 ctx.stroke();
11463 isPixel(ctx, 50,20, 0,255,0,255, 0);
11464
11465
11466 }
11467 </script>
11468
11469 <!-- [[[ test_2d.path.arc.zero.2.html ]]] -->
11470
11471 <p>Canvas test: 2d.path.arc.zero.2</p>
11472 <!-- Testing: arc() draws nothing when startAngle = endAngle and clockwise -->
11473 <canvas id="c357" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11474 <script>
11475
11476
11477 function test_2d_path_arc_zero_2() {
11478
11479 var canvas = document.getElementById('c357');
11480 var ctx = canvas.getContext('2d');
11481
11482 ctx.fillStyle = '#0f0';
11483 ctx.fillRect(0, 0, 100, 50);
11484 ctx.strokeStyle = '#f00';
11485 ctx.lineWidth = 100;
11486 ctx.beginPath();
11487 ctx.arc(50, 25, 50, 0, 0, false);
11488 ctx.stroke();
11489 isPixel(ctx, 50,20, 0,255,0,255, 0);
11490
11491
11492 }
11493 </script>
11494
11495 <!-- [[[ test_2d.path.arc.zeroradius.html ]]] -->
11496
11497 <p>Canvas test: 2d.path.arc.zeroradius</p>
11498 <!-- Testing: arc() with zero radius draws a line to the start point -->
11499 <canvas id="c358" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11500 <script>
11501
11502
11503
11504 function test_2d_path_arc_zeroradius() {
11505
11506 var canvas = document.getElementById('c358');
11507 var ctx = canvas.getContext('2d');
11508
11509 ctx.fillStyle = '#f00'
11510 ctx.fillRect(0, 0, 100, 50);
11511 ctx.lineWidth = 50;
11512 ctx.strokeStyle = '#0f0';
11513 ctx.beginPath();
11514 ctx.moveTo(0, 25);
11515 ctx.arc(200, 25, 0, 0, Math.PI, true);
11516 ctx.stroke();
11517
11518 isPixel(ctx, 50,25, 0,255,0,255, 0);
11519 }
11520 </script>
11521
11522 <!-- [[[ test_2d.path.arcTo.coincide.1.html ]]] -->
11523
11524 <p>Canvas test: 2d.path.arcTo.coincide.1</p>
11525 <!-- Testing: arcTo() has no effect if P0 = P1 -->
11526 <canvas id="c359" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11527 <script>
11528
11529
11530
11531 function test_2d_path_arcTo_coincide_1() {
11532
11533 var canvas = document.getElementById('c359');
11534 var ctx = canvas.getContext('2d');
11535
11536 ctx.fillStyle = '#f00';
11537 ctx.fillRect(0, 0, 100, 50);
11538 ctx.lineWidth = 50;
11539
11540 ctx.strokeStyle = '#0f0';
11541 ctx.beginPath();
11542 ctx.moveTo(0, 25);
11543 ctx.arcTo(0, 25, 50, 1000, 1);
11544 ctx.lineTo(100, 25);
11545 ctx.stroke();
11546
11547 ctx.strokeStyle = '#f00';
11548 ctx.beginPath();
11549 ctx.moveTo(50, 25);
11550 ctx.arcTo(50, 25, 100, 25, 1);
11551 ctx.stroke();
11552
11553 isPixel(ctx, 50,1, 0,255,0,255, 0);
11554 isPixel(ctx, 50,25, 0,255,0,255, 0);
11555 isPixel(ctx, 50,48, 0,255,0,255, 0);
11556
11557
11558 }
11559 </script>
11560
11561 <!-- [[[ test_2d.path.arcTo.coincide.2.html ]]] -->
11562
11563 <p>Canvas test: 2d.path.arcTo.coincide.2</p>
11564 <!-- Testing: arcTo() draws a straight line to P1 if P1 = P2 -->
11565 <canvas id="c360" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11566 <script>
11567
11568
11569 function test_2d_path_arcTo_coincide_2() {
11570
11571 var canvas = document.getElementById('c360');
11572 var ctx = canvas.getContext('2d');
11573
11574 ctx.fillStyle = '#f00';
11575 ctx.fillRect(0, 0, 100, 50);
11576 ctx.lineWidth = 50;
11577 ctx.strokeStyle = '#0f0';
11578 ctx.beginPath();
11579 ctx.moveTo(0, 25);
11580 ctx.arcTo(100, 25, 100, 25, 1);
11581 ctx.stroke();
11582
11583 isPixel(ctx, 50,25, 0,255,0,255, 0);
11584
11585
11586 }
11587 </script>
11588
11589 <!-- [[[ test_2d.path.arcTo.collinear.1.html ]]] -->
11590
11591 <p>Canvas test: 2d.path.arcTo.collinear.1</p>
11592 <!-- Testing: arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1 -->
11593 <canvas id="c361" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11594 <script>
11595
11596
11597
11598 function test_2d_path_arcTo_collinear_1() {
11599
11600 var canvas = document.getElementById('c361');
11601 var ctx = canvas.getContext('2d');
11602
11603 ctx.fillStyle = '#f00';
11604 ctx.fillRect(0, 0, 100, 50);
11605 ctx.lineWidth = 50;
11606
11607 ctx.strokeStyle = '#0f0';
11608 ctx.beginPath();
11609 ctx.moveTo(0, 25);
11610 ctx.arcTo(100, 25, 200, 25, 1);
11611 ctx.stroke();
11612
11613 ctx.strokeStyle = '#f00';
11614 ctx.beginPath();
11615 ctx.moveTo(-100, 25);
11616 ctx.arcTo(0, 25, 100, 25, 1);
11617 ctx.stroke();
11618
11619 isPixel(ctx, 50,25, 0,255,0,255, 0);
11620
11621
11622 }
11623 </script>
11624
11625 <!-- [[[ test_2d.path.arcTo.collinear.2.html ]]] -->
11626
11627 <p>Canvas test: 2d.path.arcTo.collinear.2</p>
11628 <!-- Testing: arcTo() with all points on a line, and P2 between P0/P1, draws an infinite line along P1..P2 -->
11629 <canvas id="c362" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11630 <script>
11631
11632
11633
11634 function test_2d_path_arcTo_collinear_2() {
11635
11636 var canvas = document.getElementById('c362');
11637 var ctx = canvas.getContext('2d');
11638
11639 ctx.fillStyle = '#f00';
11640 ctx.fillRect(0, 0, 100, 50);
11641 ctx.lineWidth = 50;
11642
11643 ctx.strokeStyle = '#0f0';
11644 ctx.beginPath();
11645 ctx.moveTo(1000, 25);
11646 ctx.arcTo(1100, 25, 1050, 25, 1);
11647 ctx.stroke();
11648
11649 ctx.strokeStyle = '#f00';
11650 ctx.beginPath();
11651 ctx.moveTo(0, 25);
11652 ctx.arcTo(100, 25, -50, 25, 1);
11653 ctx.stroke();
11654
11655 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
11656
11657
11658 }
11659 </script>
11660
11661 <!-- [[[ test_2d.path.arcTo.collinear.3.html ]]] -->
11662
11663 <p>Canvas test: 2d.path.arcTo.collinear.3</p>
11664 <!-- Testing: arcTo() with all points on a line, and P0 between P1/P2, draws an infinite line along P1..P2 -->
11665 <canvas id="c363" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11666 <script>
11667
11668
11669
11670 function test_2d_path_arcTo_collinear_3() {
11671
11672 var canvas = document.getElementById('c363');
11673 var ctx = canvas.getContext('2d');
11674
11675 ctx.fillStyle = '#f00';
11676 ctx.fillRect(0, 0, 100, 50);
11677 ctx.lineWidth = 50;
11678
11679 ctx.strokeStyle = '#0f0';
11680 ctx.beginPath();
11681 ctx.moveTo(150, 25);
11682 ctx.arcTo(200, 25, 100, 25, 1);
11683 ctx.stroke();
11684
11685 ctx.strokeStyle = '#f00';
11686 ctx.beginPath();
11687 ctx.moveTo(0, 25);
11688 ctx.arcTo(100, 25, 50, 25, 1);
11689 ctx.stroke();
11690
11691 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
11692
11693
11694 }
11695 </script>
11696
11697 <!-- [[[ test_2d.path.arcTo.emptysubpath.html ]]] -->
11698
11699 <p>Canvas test: 2d.path.arcTo.emptysubpath</p>
11700 <!-- Testing: arcTo() does nothing if there are no subpaths -->
11701 <canvas id="c364" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11702 <script>
11703
11704
11705
11706 function test_2d_path_arcTo_emptysubpath() {
11707
11708 var canvas = document.getElementById('c364');
11709 var ctx = canvas.getContext('2d');
11710
11711 ctx.fillStyle = '#0f0';
11712 ctx.fillRect(0, 0, 100, 50);
11713 ctx.lineWidth = 50;
11714 ctx.strokeStyle = '#f00';
11715 ctx.beginPath();
11716 ctx.arcTo(0, 25, 0, 25, 0.1);
11717 ctx.arcTo(100, 25, 100, 25, 0.1);
11718 ctx.stroke();
11719 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
11720
11721
11722 }
11723 </script>
11724
11725 <!-- [[[ test_2d.path.arcTo.negative.html ]]] -->
11726
11727 <p>Canvas test: 2d.path.arcTo.negative</p>
11728 <!-- Testing: arcTo() with negative radius throws an exception -->
11729 <canvas id="c365" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11730 <script>
11731
11732 function test_2d_path_arcTo_negative() {
11733
11734 var canvas = document.getElementById('c365');
11735 var ctx = canvas.getContext('2d');
11736
11737 var _thrown = undefined; try {
11738   ctx.arcTo(0, 0, 0, 0, -1);
11739 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
11740
11741
11742 }
11743 </script>
11744
11745 <!-- [[[ test_2d.path.arcTo.nonfinite.html ]]] -->
11746
11747 <p>Canvas test: 2d.path.arcTo.nonfinite</p>
11748 <!-- Testing: arcTo() with Infinity/NaN is ignored -->
11749 <canvas id="c366" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11750 <script>
11751
11752
11753 function test_2d_path_arcTo_nonfinite() {
11754
11755 var canvas = document.getElementById('c366');
11756 var ctx = canvas.getContext('2d');
11757
11758 var _thrown_outer = false;
11759 try {
11760
11761 ctx.moveTo(0, 0);
11762 ctx.lineTo(100, 0);
11763 ctx.arcTo(Infinity, 50, 0, 50, 0);
11764 ctx.arcTo(-Infinity, 50, 0, 50, 0);
11765 ctx.arcTo(NaN, 50, 0, 50, 0);
11766 ctx.arcTo(0, Infinity, 0, 50, 0);
11767 ctx.arcTo(0, -Infinity, 0, 50, 0);
11768 ctx.arcTo(0, NaN, 0, 50, 0);
11769 ctx.arcTo(0, 50, Infinity, 50, 0);
11770 ctx.arcTo(0, 50, -Infinity, 50, 0);
11771 ctx.arcTo(0, 50, NaN, 50, 0);
11772 ctx.arcTo(0, 50, 0, Infinity, 0);
11773 ctx.arcTo(0, 50, 0, -Infinity, 0);
11774 ctx.arcTo(0, 50, 0, NaN, 0);
11775 ctx.arcTo(0, 50, 0, 50, Infinity);
11776 ctx.arcTo(0, 50, 0, 50, -Infinity);
11777 ctx.arcTo(0, 50, 0, 50, NaN);
11778 ctx.arcTo(Infinity, Infinity, 0, 50, 0);
11779 ctx.arcTo(Infinity, Infinity, Infinity, 50, 0);
11780 ctx.arcTo(Infinity, Infinity, Infinity, Infinity, 0);
11781 ctx.arcTo(Infinity, Infinity, Infinity, Infinity, Infinity);
11782 ctx.arcTo(Infinity, Infinity, Infinity, 50, Infinity);
11783 ctx.arcTo(Infinity, Infinity, 0, Infinity, 0);
11784 ctx.arcTo(Infinity, Infinity, 0, Infinity, Infinity);
11785 ctx.arcTo(Infinity, Infinity, 0, 50, Infinity);
11786 ctx.arcTo(Infinity, 50, Infinity, 50, 0);
11787 ctx.arcTo(Infinity, 50, Infinity, Infinity, 0);
11788 ctx.arcTo(Infinity, 50, Infinity, Infinity, Infinity);
11789 ctx.arcTo(Infinity, 50, Infinity, 50, Infinity);
11790 ctx.arcTo(Infinity, 50, 0, Infinity, 0);
11791 ctx.arcTo(Infinity, 50, 0, Infinity, Infinity);
11792 ctx.arcTo(Infinity, 50, 0, 50, Infinity);
11793 ctx.arcTo(0, Infinity, Infinity, 50, 0);
11794 ctx.arcTo(0, Infinity, Infinity, Infinity, 0);
11795 ctx.arcTo(0, Infinity, Infinity, Infinity, Infinity);
11796 ctx.arcTo(0, Infinity, Infinity, 50, Infinity);
11797 ctx.arcTo(0, Infinity, 0, Infinity, 0);
11798 ctx.arcTo(0, Infinity, 0, Infinity, Infinity);
11799 ctx.arcTo(0, Infinity, 0, 50, Infinity);
11800 ctx.arcTo(0, 50, Infinity, Infinity, 0);
11801 ctx.arcTo(0, 50, Infinity, Infinity, Infinity);
11802 ctx.arcTo(0, 50, Infinity, 50, Infinity);
11803 ctx.arcTo(0, 50, 0, Infinity, Infinity);
11804 ctx.lineTo(100, 50);
11805 ctx.lineTo(0, 50);
11806 ctx.fillStyle = '#0f0';
11807 ctx.fill();
11808 isPixel(ctx, 50,25, 0,255,0,255, 0);
11809 isPixel(ctx, 90,45, 0,255,0,255, 0);
11810
11811 } catch (e) {
11812     _thrown_outer = true;
11813 }
11814 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
11815
11816
11817 }
11818 </script>
11819
11820 <!-- [[[ test_2d.path.arcTo.scale.html ]]] -->
11821
11822 <p>Canvas test: 2d.path.arcTo.scale</p>
11823 <!-- Testing: arcTo scales the curve, not just the control points -->
11824 <canvas id="c367" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11825 <script>
11826
11827
11828 function test_2d_path_arcTo_scale() {
11829
11830 var canvas = document.getElementById('c367');
11831 var ctx = canvas.getContext('2d');
11832
11833 ctx.fillStyle = '#f00';
11834 ctx.fillRect(0, 0, 100, 50);
11835
11836 ctx.fillStyle = '#0f0';
11837 ctx.beginPath();
11838 ctx.moveTo(0, 50);
11839 ctx.translate(100, 0);
11840 ctx.scale(0.1, 1);
11841 ctx.arcTo(50, 50, 50, 0, 50);
11842 ctx.lineTo(-1000, 0);
11843 ctx.fill();
11844
11845 isPixel(ctx, 0,0, 0,255,0,255, 0);
11846 isPixel(ctx, 50,0, 0,255,0,255, 0);
11847 isPixel(ctx, 99,0, 0,255,0,255, 0);
11848 isPixel(ctx, 0,25, 0,255,0,255, 0);
11849 isPixel(ctx, 50,25, 0,255,0,255, 0);
11850 isPixel(ctx, 99,25, 0,255,0,255, 0);
11851 isPixel(ctx, 0,49, 0,255,0,255, 0);
11852 isPixel(ctx, 50,49, 0,255,0,255, 0);
11853 isPixel(ctx, 99,49, 0,255,0,255, 0);
11854
11855
11856 }
11857 </script>
11858
11859 <!-- [[[ test_2d.path.arcTo.shape.curve1.html ]]] -->
11860
11861 <p>Canvas test: 2d.path.arcTo.shape.curve1</p>
11862 <!-- Testing: arcTo() curves in the right kind of shape -->
11863 <canvas id="c368" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11864 <script>
11865
11866
11867
11868 function test_2d_path_arcTo_shape_curve1() {
11869
11870 var canvas = document.getElementById('c368');
11871 var ctx = canvas.getContext('2d');
11872
11873 var tol = 1.5; // tolerance to avoid antialiasing artifacts
11874
11875 ctx.fillStyle = '#0f0';
11876 ctx.fillRect(0, 0, 100, 50);
11877
11878 ctx.strokeStyle = '#f00';
11879 ctx.lineWidth = 10;
11880 ctx.beginPath();
11881 ctx.moveTo(10, 25);
11882 ctx.arcTo(75, 25, 75, 60, 20);
11883 ctx.stroke();
11884
11885 ctx.fillStyle = '#0f0';
11886 ctx.beginPath();
11887 ctx.rect(10, 20, 45, 10);
11888 ctx.moveTo(80, 45);
11889 ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true);
11890 ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false);
11891 ctx.fill();
11892
11893 isPixel(ctx, 50,25, 0,255,0,255, 0);
11894 isPixel(ctx, 55,19, 0,255,0,255, 0);
11895 isPixel(ctx, 55,20, 0,255,0,255, 0);
11896 isPixel(ctx, 55,21, 0,255,0,255, 0);
11897 isPixel(ctx, 64,22, 0,255,0,255, 0);
11898 isPixel(ctx, 65,21, 0,255,0,255, 0);
11899 isPixel(ctx, 72,28, 0,255,0,255, 0);
11900 isPixel(ctx, 73,27, 0,255,0,255, 0);
11901 isPixel(ctx, 78,36, 0,255,0,255, 0);
11902 isPixel(ctx, 79,35, 0,255,0,255, IsAzureSkia() ? 1 : 0);
11903 isPixel(ctx, 80,44, 0,255,0,255, 0);
11904 isPixel(ctx, 80,45, 0,255,0,255, 0);
11905 isPixel(ctx, 80,46, 0,255,0,255, 0);
11906
11907
11908 }
11909 </script>
11910
11911 <!-- [[[ test_2d.path.arcTo.shape.curve2.html ]]] -->
11912
11913 <p>Canvas test: 2d.path.arcTo.shape.curve2</p>
11914 <!-- Testing: arcTo() curves in the right kind of shape -->
11915 <canvas id="c369" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11916 <script>
11917
11918
11919
11920 function test_2d_path_arcTo_shape_curve2() {
11921
11922 var canvas = document.getElementById('c369');
11923 var ctx = canvas.getContext('2d');
11924
11925 var tol = 1.5; // tolerance to avoid antialiasing artifacts
11926
11927 ctx.fillStyle = '#0f0';
11928 ctx.fillRect(0, 0, 100, 50);
11929
11930 ctx.fillStyle = '#f00';
11931 ctx.beginPath();
11932 ctx.rect(10, 20, 45, 10);
11933 ctx.moveTo(80, 45);
11934 ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true);
11935 ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false);
11936 ctx.fill();
11937
11938 ctx.strokeStyle = '#0f0';
11939 ctx.lineWidth = 10;
11940 ctx.beginPath();
11941 ctx.moveTo(10, 25);
11942 ctx.arcTo(75, 25, 75, 60, 20);
11943 ctx.stroke();
11944
11945 isPixel(ctx, 50,25, 0,255,0,255, 0);
11946 isPixel(ctx, 55,19, 0,255,0,255, 0);
11947 isPixel(ctx, 55,20, 0,255,0,255, 0);
11948 isPixel(ctx, 55,21, 0,255,0,255, 0);
11949 isPixel(ctx, 64,22, 0,255,0,255, IsAzureSkia() ? 1 : 0);
11950 isPixel(ctx, 65,21, 0,255,0,255, 0);
11951 isPixel(ctx, 72,28, 0,255,0,255, 0);
11952 isPixel(ctx, 73,27, 0,255,0,255, IsAzureSkia() ? 1 : 0);
11953 isPixel(ctx, 78,36, 0,255,0,255, IsAzureSkia() ? 1 : 0);
11954 isPixel(ctx, 79,35, 0,255,0,255, 0);
11955 isPixel(ctx, 80,44, 0,255,0,255, 0);
11956 isPixel(ctx, 80,45, 0,255,0,255, 0);
11957 isPixel(ctx, 80,46, 0,255,0,255, 0);
11958
11959
11960 }
11961 </script>
11962
11963 <!-- [[[ test_2d.path.arcTo.shape.end.html ]]] -->
11964
11965 <p>Canvas test: 2d.path.arcTo.shape.end</p>
11966 <!-- Testing: arcTo() does not draw anything from P1 to P2 -->
11967 <canvas id="c370" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
11968 <script>
11969
11970
11971
11972 function test_2d_path_arcTo_shape_end() {
11973
11974 var canvas = document.getElementById('c370');
11975 var ctx = canvas.getContext('2d');
11976
11977 ctx.fillStyle = '#0f0';
11978 ctx.fillRect(0, 0, 100, 50);
11979 ctx.strokeStyle = '#f00';
11980 ctx.lineWidth = 50;
11981 ctx.beginPath();
11982 ctx.moveTo(-100, -100);
11983 ctx.arcTo(-100, 25, 200, 25, 10);
11984 ctx.stroke();
11985
11986 isPixel(ctx, 1,1, 0,255,0,255, 0);
11987 isPixel(ctx, 1,48, 0,255,0,255, 0);
11988 isPixel(ctx, 50,25, 0,255,0,255, 0);
11989 isPixel(ctx, 98,1, 0,255,0,255, 0);
11990 isPixel(ctx, 98,48, 0,255,0,255, 0);
11991
11992
11993 }
11994 </script>
11995
11996 <!-- [[[ test_2d.path.arcTo.shape.start.html ]]] -->
11997
11998 <p>Canvas test: 2d.path.arcTo.shape.start</p>
11999 <!-- Testing: arcTo() draws a straight line from P0 to P1 -->
12000 <canvas id="c371" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12001 <script>
12002
12003
12004
12005 function test_2d_path_arcTo_shape_start() {
12006
12007 var canvas = document.getElementById('c371');
12008 var ctx = canvas.getContext('2d');
12009
12010 ctx.fillStyle = '#f00';
12011 ctx.fillRect(0, 0, 100, 50);
12012 ctx.strokeStyle = '#0f0';
12013 ctx.lineWidth = 50;
12014 ctx.beginPath();
12015 ctx.moveTo(0, 25);
12016 ctx.arcTo(200, 25, 200, 50, 10);
12017 ctx.stroke();
12018
12019 isPixel(ctx, 1,1, 0,255,0,255, 0);
12020 isPixel(ctx, 1,48, 0,255,0,255, 0);
12021 isPixel(ctx, 50,25, 0,255,0,255, 0);
12022 isPixel(ctx, 98,1, 0,255,0,255, 0);
12023 isPixel(ctx, 98,48, 0,255,0,255, 0);
12024
12025
12026 }
12027 </script>
12028
12029 <!-- [[[ test_2d.path.arcTo.transformation.html ]]] -->
12030
12031 <p>Canvas test: 2d.path.arcTo.transformation</p>
12032 <!-- Testing: arcTo joins up to the last subpath point correctly -->
12033 <canvas id="c372" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12034 <script>
12035
12036
12037 function test_2d_path_arcTo_transformation() {
12038
12039 var canvas = document.getElementById('c372');
12040 var ctx = canvas.getContext('2d');
12041
12042 ctx.fillStyle = '#f00';
12043 ctx.fillRect(0, 0, 100, 50);
12044
12045 ctx.fillStyle = '#0f0';
12046 ctx.beginPath();
12047 ctx.moveTo(0, 50);
12048 ctx.translate(100, 0);
12049 ctx.arcTo(50, 50, 50, 0, 50);
12050 ctx.lineTo(-100, 0);
12051 ctx.fill();
12052
12053 isPixel(ctx, 0,0, 0,255,0,255, 0);
12054 isPixel(ctx, 50,0, 0,255,0,255, 0);
12055 isPixel(ctx, 99,0, 0,255,0,255, 0);
12056 isPixel(ctx, 0,25, 0,255,0,255, 0);
12057 isPixel(ctx, 50,25, 0,255,0,255, 0);
12058 isPixel(ctx, 99,25, 0,255,0,255, 0);
12059 isPixel(ctx, 0,49, 0,255,0,255, 0);
12060 isPixel(ctx, 50,49, 0,255,0,255, 0);
12061 isPixel(ctx, 99,49, 0,255,0,255, 0);
12062
12063
12064 }
12065 </script>
12066
12067 <!-- [[[ test_2d.path.arcTo.zero.1.html ]]] -->
12068
12069 <p>Canvas test: 2d.path.arcTo.zero.1</p>
12070 <!-- Testing: arcTo() with zero radius draws a straight line from P0 to P1 -->
12071 <canvas id="c373" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12072 <script>
12073
12074
12075 function test_2d_path_arcTo_zero_1() {
12076
12077 var canvas = document.getElementById('c373');
12078 var ctx = canvas.getContext('2d');
12079
12080 var _thrown_outer = false;
12081 try {
12082
12083 ctx.fillStyle = '#f00';
12084 ctx.fillRect(0, 0, 100, 50);
12085 ctx.lineWidth = 50;
12086
12087 ctx.strokeStyle = '#0f0';
12088 ctx.beginPath();
12089 ctx.moveTo(0, 25);
12090 ctx.arcTo(100, 25, 100, 100, 0);
12091 ctx.stroke();
12092
12093 ctx.strokeStyle = '#f00';
12094 ctx.beginPath();
12095 ctx.moveTo(0, -25);
12096 ctx.arcTo(50, -25, 50, 50, 0);
12097 ctx.stroke();
12098
12099 isPixel(ctx, 50,25, 0,255,0,255, 0);
12100
12101 } catch (e) {
12102     _thrown_outer = true;
12103 }
12104 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
12105
12106
12107 }
12108 </script>
12109
12110 <!-- [[[ test_2d.path.arcTo.zero.2.html ]]] -->
12111
12112 <p>Canvas test: 2d.path.arcTo.zero.2</p>
12113 <!-- Testing: arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear -->
12114 <canvas id="c374" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12115 <script>
12116
12117
12118 function test_2d_path_arcTo_zero_2() {
12119
12120 var canvas = document.getElementById('c374');
12121 var ctx = canvas.getContext('2d');
12122
12123 var _thrown_outer = false;
12124 try {
12125
12126 ctx.fillStyle = '#f00';
12127 ctx.fillRect(0, 0, 100, 50);
12128 ctx.lineWidth = 50;
12129
12130 ctx.strokeStyle = '#0f0';
12131 ctx.beginPath();
12132 ctx.moveTo(0, 25);
12133 ctx.arcTo(100, 25, -100, 25, 0);
12134 ctx.stroke();
12135
12136 ctx.strokeStyle = '#f00';
12137 ctx.beginPath();
12138 ctx.moveTo(100, 25);
12139 ctx.arcTo(200, 25, 50, 25, 0);
12140 ctx.stroke();
12141
12142 isPixel(ctx, 50,25, 0,255,0,255, 0);
12143
12144 } catch (e) {
12145     _thrown_outer = true;
12146 }
12147 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
12148
12149
12150 }
12151 </script>
12152
12153 <!-- [[[ test_2d.path.beginPath.html ]]] -->
12154
12155 <p>Canvas test: 2d.path.beginPath</p>
12156 <canvas id="c375" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
12157 <script>
12158
12159
12160 function test_2d_path_beginPath() {
12161
12162 var canvas = document.getElementById('c375');
12163 var ctx = canvas.getContext('2d');
12164
12165 ctx.rect(0, 0, 100, 50);
12166 ctx.beginPath();
12167 ctx.fillStyle = '#f00';
12168 ctx.fill();
12169 isPixel(ctx, 50,25, 0,0,0,0, 0);
12170
12171
12172 }
12173 </script>
12174
12175 <!-- [[[ test_2d.path.bezierCurveTo.basic.html ]]] -->
12176
12177 <p>Canvas test: 2d.path.bezierCurveTo.basic</p>
12178 <canvas id="c376" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12179 <script>
12180
12181
12182 function test_2d_path_bezierCurveTo_basic() {
12183
12184 var canvas = document.getElementById('c376');
12185 var ctx = canvas.getContext('2d');
12186
12187 ctx.strokeStyle = '#0f0';
12188 ctx.lineWidth = 50;
12189 ctx.beginPath();
12190 ctx.moveTo(0, 25);
12191 ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
12192 ctx.stroke();
12193 isPixel(ctx, 50,25, 0,255,0,255, 0);
12194
12195
12196 }
12197 </script>
12198
12199 <!-- [[[ test_2d.path.bezierCurveTo.emptysubpath.html ]]] -->
12200
12201 <p>Canvas test: 2d.path.bezierCurveTo.emptysubpath</p>
12202 <canvas id="c377" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
12203 <script>
12204
12205
12206
12207 function test_2d_path_bezierCurveTo_emptysubpath() {
12208
12209 var canvas = document.getElementById('c377');
12210 var ctx = canvas.getContext('2d');
12211
12212 ctx.strokeStyle = '#f00';
12213 ctx.lineWidth = 50;
12214 ctx.beginPath();
12215 ctx.bezierCurveTo(0, 25, 0, 25, 0, 25);
12216 ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
12217 ctx.stroke();
12218 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
12219
12220
12221 }
12222 </script>
12223
12224 <!-- [[[ test_2d.path.bezierCurveTo.nonfinite.html ]]] -->
12225
12226 <p>Canvas test: 2d.path.bezierCurveTo.nonfinite</p>
12227 <!-- Testing: bezierCurveTo() with Infinity/NaN is ignored -->
12228 <canvas id="c378" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12229 <script>
12230
12231
12232 function test_2d_path_bezierCurveTo_nonfinite() {
12233
12234 var canvas = document.getElementById('c378');
12235 var ctx = canvas.getContext('2d');
12236
12237 var _thrown_outer = false;
12238 try {
12239
12240 ctx.moveTo(0, 0);
12241 ctx.lineTo(100, 0);
12242 ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, 50);
12243 ctx.bezierCurveTo(-Infinity, 50, 0, 50, 0, 50);
12244 ctx.bezierCurveTo(NaN, 50, 0, 50, 0, 50);
12245 ctx.bezierCurveTo(0, Infinity, 0, 50, 0, 50);
12246 ctx.bezierCurveTo(0, -Infinity, 0, 50, 0, 50);
12247 ctx.bezierCurveTo(0, NaN, 0, 50, 0, 50);
12248 ctx.bezierCurveTo(0, 50, Infinity, 50, 0, 50);
12249 ctx.bezierCurveTo(0, 50, -Infinity, 50, 0, 50);
12250 ctx.bezierCurveTo(0, 50, NaN, 50, 0, 50);
12251 ctx.bezierCurveTo(0, 50, 0, Infinity, 0, 50);
12252 ctx.bezierCurveTo(0, 50, 0, -Infinity, 0, 50);
12253 ctx.bezierCurveTo(0, 50, 0, NaN, 0, 50);
12254 ctx.bezierCurveTo(0, 50, 0, 50, Infinity, 50);
12255 ctx.bezierCurveTo(0, 50, 0, 50, -Infinity, 50);
12256 ctx.bezierCurveTo(0, 50, 0, 50, NaN, 50);
12257 ctx.bezierCurveTo(0, 50, 0, 50, 0, Infinity);
12258 ctx.bezierCurveTo(0, 50, 0, 50, 0, -Infinity);
12259 ctx.bezierCurveTo(0, 50, 0, 50, 0, NaN);
12260 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, 50);
12261 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, 50);
12262 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, 50);
12263 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, 50);
12264 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
12265 ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
12266 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, 50);
12267 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, Infinity);
12268 ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, Infinity);
12269 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, 50);
12270 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, 50);
12271 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
12272 ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, Infinity);
12273 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, 50);
12274 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, Infinity);
12275 ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, Infinity);
12276 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, 50);
12277 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, 50);
12278 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, 50);
12279 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, Infinity);
12280 ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, Infinity);
12281 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, 50);
12282 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, Infinity);
12283 ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, Infinity);
12284 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, 50);
12285 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, 50);
12286 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, Infinity);
12287 ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, Infinity);
12288 ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, 50);
12289 ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, Infinity);
12290 ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, Infinity);
12291 ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, 50);
12292 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, 50);
12293 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, 50);
12294 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, Infinity);
12295 ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, Infinity);
12296 ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, 50);
12297 ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, Infinity);
12298 ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, Infinity);
12299 ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, 50);
12300 ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, 50);
12301 ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, Infinity);
12302 ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, Infinity);
12303 ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, 50);
12304 ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, Infinity);
12305 ctx.bezierCurveTo(0, Infinity, 0, 50, 0, Infinity);
12306 ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, 50);
12307 ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, 50);
12308 ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, Infinity);
12309 ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, Infinity);
12310 ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, 50);
12311 ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, Infinity);
12312 ctx.bezierCurveTo(0, 50, Infinity, 50, 0, Infinity);
12313 ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, 50);
12314 ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, Infinity);
12315 ctx.bezierCurveTo(0, 50, 0, Infinity, 0, Infinity);
12316 ctx.bezierCurveTo(0, 50, 0, 50, Infinity, Infinity);
12317 ctx.lineTo(100, 50);
12318 ctx.lineTo(0, 50);
12319 ctx.fillStyle = '#0f0';
12320 ctx.fill();
12321 isPixel(ctx, 50,25, 0,255,0,255, 0);
12322 isPixel(ctx, 90,45, 0,255,0,255, 0);
12323
12324 } catch (e) {
12325     _thrown_outer = true;
12326 }
12327 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
12328
12329
12330 }
12331 </script>
12332
12333 <!-- [[[ test_2d.path.bezierCurveTo.scaled.html ]]] -->
12334
12335 <p>Canvas test: 2d.path.bezierCurveTo.scaled</p>
12336 <canvas id="c379" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12337 <script>
12338
12339
12340 function test_2d_path_bezierCurveTo_scaled() {
12341
12342 var canvas = document.getElementById('c379');
12343 var ctx = canvas.getContext('2d');
12344
12345 ctx.scale(1000, 1000);
12346 ctx.strokeStyle = '#0f0';
12347 ctx.lineWidth = 0.055;
12348 ctx.beginPath();
12349 ctx.moveTo(-2, 3.1);
12350 ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1);
12351 ctx.stroke();
12352 isPixel(ctx, 50,25, 0,255,0,255, 0);
12353 isPixel(ctx, 1,1, 0,255,0,255, 0);
12354 isPixel(ctx, 98,1, 0,255,0,255, 0);
12355 isPixel(ctx, 1,48, 0,255,0,255, 0);
12356 isPixel(ctx, 98,48, 0,255,0,255, 0);
12357
12358
12359 }
12360 </script>
12361
12362 <!-- [[[ test_2d.path.bezierCurveTo.shape.html ]]] -->
12363
12364 <p>Canvas test: 2d.path.bezierCurveTo.shape</p>
12365 <canvas id="c380" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12366 <script>
12367
12368
12369 function test_2d_path_bezierCurveTo_shape() {
12370
12371 var canvas = document.getElementById('c380');
12372 var ctx = canvas.getContext('2d');
12373
12374 ctx.strokeStyle = '#0f0';
12375 ctx.lineWidth = 55;
12376 ctx.beginPath();
12377 ctx.moveTo(-2000, 3100);
12378 ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100);
12379 ctx.stroke();
12380 isPixel(ctx, 50,25, 0,255,0,255, 0);
12381 isPixel(ctx, 1,1, 0,255,0,255, 0);
12382 isPixel(ctx, 98,1, 0,255,0,255, 0);
12383 isPixel(ctx, 1,48, 0,255,0,255, 0);
12384 isPixel(ctx, 98,48, 0,255,0,255, 0);
12385
12386
12387 }
12388 </script>
12389
12390 <!-- [[[ test_2d.path.clip.basic.1.html ]]] -->
12391
12392 <p>Canvas test: 2d.path.clip.basic.1</p>
12393 <canvas id="c381" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12394 <script>
12395
12396
12397 function test_2d_path_clip_basic_1() {
12398
12399 var canvas = document.getElementById('c381');
12400 var ctx = canvas.getContext('2d');
12401
12402 ctx.fillStyle = '#f00';
12403 ctx.fillRect(0, 0, 100, 50);
12404
12405 ctx.beginPath();
12406 ctx.rect(0, 0, 100, 50);
12407 ctx.clip();
12408
12409 ctx.fillStyle = '#0f0';
12410 ctx.fillRect(0, 0, 100, 50);
12411
12412 isPixel(ctx, 50,25, 0,255,0,255, 0);
12413
12414
12415 }
12416 </script>
12417
12418 <!-- [[[ test_2d.path.clip.basic.2.html ]]] -->
12419
12420 <p>Canvas test: 2d.path.clip.basic.2</p>
12421 <canvas id="c382" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12422 <script>
12423
12424
12425 function test_2d_path_clip_basic_2() {
12426
12427 var canvas = document.getElementById('c382');
12428 var ctx = canvas.getContext('2d');
12429
12430 ctx.fillStyle = '#0f0';
12431 ctx.fillRect(0, 0, 100, 50);
12432
12433 ctx.beginPath();
12434 ctx.rect(-100, 0, 100, 50);
12435 ctx.clip();
12436
12437 ctx.fillStyle = '#f00';
12438 ctx.fillRect(0, 0, 100, 50);
12439
12440 isPixel(ctx, 50,25, 0,255,0,255, 0);
12441
12442
12443 }
12444 </script>
12445
12446 <!-- [[[ test_2d.path.clip.empty.html ]]] -->
12447
12448 <p>Canvas test: 2d.path.clip.empty</p>
12449 <canvas id="c383" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12450 <script>
12451
12452
12453 function test_2d_path_clip_empty() {
12454
12455 var canvas = document.getElementById('c383');
12456 var ctx = canvas.getContext('2d');
12457
12458 ctx.fillStyle = '#0f0';
12459 ctx.fillRect(0, 0, 100, 50);
12460
12461 ctx.beginPath();
12462 ctx.clip();
12463
12464 ctx.fillStyle = '#f00';
12465 ctx.fillRect(0, 0, 100, 50);
12466
12467 isPixel(ctx, 50,25, 0,255,0,255, 0);
12468
12469
12470 }
12471 </script>
12472
12473 <!-- [[[ test_2d.path.clip.intersect.html ]]] -->
12474
12475 <p>Canvas test: 2d.path.clip.intersect</p>
12476 <canvas id="c384" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12477 <script>
12478
12479
12480 function test_2d_path_clip_intersect() {
12481
12482 var canvas = document.getElementById('c384');
12483 var ctx = canvas.getContext('2d');
12484
12485 ctx.fillStyle = '#0f0';
12486 ctx.fillRect(0, 0, 100, 50);
12487
12488 ctx.beginPath();
12489 ctx.rect(0, 0, 50, 50);
12490 ctx.clip();
12491 ctx.beginPath();
12492 ctx.rect(50, 0, 50, 50)
12493 ctx.clip();
12494
12495 ctx.fillStyle = '#f00';
12496 ctx.fillRect(0, 0, 100, 50);
12497
12498 isPixel(ctx, 50,25, 0,255,0,255, 0);
12499
12500
12501 }
12502 </script>
12503
12504 <!-- [[[ test_2d.path.clip.unaffected.html ]]] -->
12505
12506 <p>Canvas test: 2d.path.clip.unaffected</p>
12507 <canvas id="c385" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12508 <script>
12509
12510
12511 function test_2d_path_clip_unaffected() {
12512
12513 var canvas = document.getElementById('c385');
12514 var ctx = canvas.getContext('2d');
12515
12516 ctx.fillStyle = '#f00';
12517 ctx.fillRect(0, 0, 100, 50);
12518
12519 ctx.fillStyle = '#0f0';
12520
12521 ctx.beginPath();
12522 ctx.lineTo(0, 0);
12523 ctx.lineTo(0, 50);
12524 ctx.lineTo(100, 50);
12525 ctx.lineTo(100, 0);
12526 ctx.clip();
12527
12528 ctx.lineTo(0, 0);
12529 ctx.fill();
12530
12531 isPixel(ctx, 50,25, 0,255,0,255, 0);
12532
12533
12534 }
12535 </script>
12536
12537 <!-- [[[ test_2d.path.clip.winding.1.html ]]] -->
12538
12539 <p>Canvas test: 2d.path.clip.winding.1</p>
12540 <canvas id="c386" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12541 <script>
12542
12543
12544 function test_2d_path_clip_winding_1() {
12545
12546 var canvas = document.getElementById('c386');
12547 var ctx = canvas.getContext('2d');
12548
12549 ctx.fillStyle = '#0f0';
12550 ctx.fillRect(0, 0, 100, 50);
12551
12552 ctx.beginPath();
12553 ctx.moveTo(-10, -10);
12554 ctx.lineTo(110, -10);
12555 ctx.lineTo(110, 60);
12556 ctx.lineTo(-10, 60);
12557 ctx.lineTo(-10, -10);
12558 ctx.lineTo(0, 0);
12559 ctx.lineTo(0, 50);
12560 ctx.lineTo(100, 50);
12561 ctx.lineTo(100, 0);
12562 ctx.clip();
12563
12564 ctx.fillStyle = '#f00';
12565 ctx.fillRect(0, 0, 100, 50);
12566
12567 isPixel(ctx, 50,25, 0,255,0,255, 0);
12568
12569
12570 }
12571 </script>
12572
12573 <!-- [[[ test_2d.path.clip.winding.2.html ]]] -->
12574
12575 <p>Canvas test: 2d.path.clip.winding.2</p>
12576 <canvas id="c387" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12577 <script>
12578
12579
12580 function test_2d_path_clip_winding_2() {
12581
12582 var canvas = document.getElementById('c387');
12583 var ctx = canvas.getContext('2d');
12584
12585 ctx.fillStyle = '#f00';
12586 ctx.fillRect(0, 0, 100, 50);
12587
12588 ctx.beginPath();
12589 ctx.moveTo(-10, -10);
12590 ctx.lineTo(110, -10);
12591 ctx.lineTo(110, 60);
12592 ctx.lineTo(-10, 60);
12593 ctx.lineTo(-10, -10);
12594 ctx.clip();
12595
12596 ctx.beginPath();
12597 ctx.lineTo(0, 0);
12598 ctx.lineTo(0, 50);
12599 ctx.lineTo(100, 50);
12600 ctx.lineTo(100, 0);
12601 ctx.lineTo(0, 0);
12602 ctx.clip();
12603
12604 ctx.fillStyle = '#0f0';
12605 ctx.fillRect(0, 0, 100, 50);
12606
12607 isPixel(ctx, 50,25, 0,255,0,255, 0);
12608
12609
12610 }
12611 </script>
12612
12613 <!-- [[[ test_2d.path.closePath.empty.html ]]] -->
12614
12615 <p>Canvas test: 2d.path.closePath.empty</p>
12616 <canvas id="c388" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
12617 <script>
12618
12619
12620 function test_2d_path_closePath_empty() {
12621
12622 var canvas = document.getElementById('c388');
12623 var ctx = canvas.getContext('2d');
12624
12625 ctx.closePath();
12626 ctx.fillStyle = '#f00';
12627 ctx.fill();
12628 isPixel(ctx, 50,25, 0,0,0,0, 0);
12629
12630
12631 }
12632 </script>
12633
12634 <!-- [[[ test_2d.path.closePath.newline.html ]]] -->
12635
12636 <p>Canvas test: 2d.path.closePath.newline</p>
12637 <canvas id="c389" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12638 <script>
12639
12640
12641 function test_2d_path_closePath_newline() {
12642
12643 var canvas = document.getElementById('c389');
12644 var ctx = canvas.getContext('2d');
12645
12646 ctx.strokeStyle = '#0f0';
12647 ctx.lineWidth = 50;
12648 ctx.moveTo(-100, 25);
12649 ctx.lineTo(-100, -100);
12650 ctx.lineTo(200, -100);
12651 ctx.lineTo(200, 25);
12652 ctx.closePath();
12653 ctx.stroke();
12654 isPixel(ctx, 50,25, 0,255,0,255, 0);
12655
12656
12657 }
12658 </script>
12659
12660 <!-- [[[ test_2d.path.closePath.nextpoint.html ]]] -->
12661
12662 <p>Canvas test: 2d.path.closePath.nextpoint</p>
12663 <canvas id="c390" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
12664 <script>
12665
12666
12667 function test_2d_path_closePath_nextpoint() {
12668
12669 var canvas = document.getElementById('c390');
12670 var ctx = canvas.getContext('2d');
12671
12672 ctx.strokeStyle = '#0f0';
12673 ctx.lineWidth = 50;
12674 ctx.moveTo(-100, 25);
12675 ctx.lineTo(-100, -1000);
12676 ctx.closePath();
12677 ctx.lineTo(1000, 25);
12678 ctx.stroke();
12679 isPixel(ctx, 50,25, 0,255,0,255, 0);
12680
12681
12682 }
12683 </script>
12684
12685 <!-- [[[ test_2d.path.fill.closed.basic.html ]]] -->
12686
12687 <p>Canvas test: 2d.path.fill.closed.basic</p>
12688 <canvas id="c391" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12689 <script>
12690
12691
12692 function test_2d_path_fill_closed_basic() {
12693
12694 var canvas = document.getElementById('c391');
12695 var ctx = canvas.getContext('2d');
12696
12697 ctx.fillStyle = '#f00';
12698 ctx.fillRect(0, 0, 100, 50);
12699
12700 ctx.fillStyle = '#0f0';
12701 ctx.moveTo(0, 0);
12702 ctx.lineTo(100, 0);
12703 ctx.lineTo(100, 50);
12704 ctx.lineTo(0, 50);
12705 ctx.fill();
12706
12707 isPixel(ctx, 50,25, 0,255,0,255, 0);
12708
12709
12710 }
12711 </script>
12712
12713 <!-- [[[ test_2d.path.fill.closed.unaffected.html ]]] -->
12714
12715 <p>Canvas test: 2d.path.fill.closed.unaffected</p>
12716 <canvas id="c392" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12717 <script>
12718
12719
12720 function test_2d_path_fill_closed_unaffected() {
12721
12722 var canvas = document.getElementById('c392');
12723 var ctx = canvas.getContext('2d');
12724
12725 ctx.fillStyle = '#00f';
12726 ctx.fillRect(0, 0, 100, 50);
12727
12728 ctx.moveTo(0, 0);
12729 ctx.lineTo(100, 0);
12730 ctx.lineTo(100, 50);
12731 ctx.fillStyle = '#f00';
12732 ctx.fill();
12733 ctx.lineTo(0, 50);
12734 ctx.fillStyle = '#0f0';
12735 ctx.fill();
12736
12737 isPixel(ctx, 90,10, 0,255,0,255, 0);
12738 isPixel(ctx, 10,40, 0,255,0,255, 0);
12739
12740
12741 }
12742 </script>
12743
12744 <!-- [[[ test_2d.path.fill.overlap.html ]]] -->
12745
12746 <p>Canvas test: 2d.path.fill.overlap</p>
12747 <canvas id="c393" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12748 <script>
12749
12750
12751 function test_2d_path_fill_overlap() {
12752
12753 var canvas = document.getElementById('c393');
12754 var ctx = canvas.getContext('2d');
12755
12756 ctx.fillStyle = '#000';
12757 ctx.fillRect(0, 0, 100, 50);
12758
12759 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
12760 ctx.rect(0, 0, 100, 50);
12761 ctx.closePath();
12762 ctx.rect(10, 10, 80, 30);
12763 ctx.fill();
12764
12765 isPixel(ctx, 50,25, 0,127,0,255, 1);
12766
12767
12768 }
12769 </script>
12770
12771 <!-- [[[ test_2d.path.fill.winding.add.html ]]] -->
12772
12773 <p>Canvas test: 2d.path.fill.winding.add</p>
12774 <canvas id="c394" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12775 <script>
12776
12777
12778 function test_2d_path_fill_winding_add() {
12779
12780 var canvas = document.getElementById('c394');
12781 var ctx = canvas.getContext('2d');
12782
12783 ctx.fillStyle = '#f00';
12784 ctx.fillRect(0, 0, 100, 50);
12785
12786 ctx.fillStyle = '#0f0';
12787 ctx.moveTo(-10, -10);
12788 ctx.lineTo(110, -10);
12789 ctx.lineTo(110, 60);
12790 ctx.lineTo(-10, 60);
12791 ctx.lineTo(-10, -10);
12792 ctx.lineTo(0, 0);
12793 ctx.lineTo(100, 0);
12794 ctx.lineTo(100, 50);
12795 ctx.lineTo(0, 50);
12796 ctx.fill();
12797
12798 isPixel(ctx, 50,25, 0,255,0,255, 0);
12799
12800
12801 }
12802 </script>
12803
12804 <!-- [[[ test_2d.path.fill.winding.subtract.1.html ]]] -->
12805
12806 <p>Canvas test: 2d.path.fill.winding.subtract.1</p>
12807 <canvas id="c395" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12808 <script>
12809
12810
12811 function test_2d_path_fill_winding_subtract_1() {
12812
12813 var canvas = document.getElementById('c395');
12814 var ctx = canvas.getContext('2d');
12815
12816 ctx.fillStyle = '#0f0';
12817 ctx.fillRect(0, 0, 100, 50);
12818
12819 ctx.fillStyle = '#f00';
12820 ctx.moveTo(-10, -10);
12821 ctx.lineTo(110, -10);
12822 ctx.lineTo(110, 60);
12823 ctx.lineTo(-10, 60);
12824 ctx.lineTo(-10, -10);
12825 ctx.lineTo(0, 0);
12826 ctx.lineTo(0, 50);
12827 ctx.lineTo(100, 50);
12828 ctx.lineTo(100, 0);
12829 ctx.fill();
12830
12831 isPixel(ctx, 50,25, 0,255,0,255, 0);
12832
12833
12834 }
12835 </script>
12836
12837 <!-- [[[ test_2d.path.fill.winding.subtract.2.html ]]] -->
12838
12839 <p>Canvas test: 2d.path.fill.winding.subtract.2</p>
12840 <canvas id="c396" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12841 <script>
12842
12843
12844 function test_2d_path_fill_winding_subtract_2() {
12845
12846 var canvas = document.getElementById('c396');
12847 var ctx = canvas.getContext('2d');
12848
12849 ctx.fillStyle = '#0f0';
12850 ctx.fillRect(0, 0, 100, 50);
12851
12852 ctx.fillStyle = '#f00';
12853 ctx.moveTo(-10, -10);
12854 ctx.lineTo(110, -10);
12855 ctx.lineTo(110, 60);
12856 ctx.lineTo(-10, 60);
12857 ctx.moveTo(0, 0);
12858 ctx.lineTo(0, 50);
12859 ctx.lineTo(100, 50);
12860 ctx.lineTo(100, 0);
12861 ctx.fill();
12862
12863 isPixel(ctx, 50,25, 0,255,0,255, 0);
12864
12865
12866 }
12867 </script>
12868
12869 <!-- [[[ test_2d.path.fill.winding.subtract.3.html ]]] -->
12870
12871 <p>Canvas test: 2d.path.fill.winding.subtract.3</p>
12872 <canvas id="c397" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12873 <script>
12874
12875
12876 function test_2d_path_fill_winding_subtract_3() {
12877
12878 var canvas = document.getElementById('c397');
12879 var ctx = canvas.getContext('2d');
12880
12881 ctx.fillStyle = '#f00';
12882 ctx.fillRect(0, 0, 100, 50);
12883
12884 ctx.fillStyle = '#0f0';
12885 ctx.moveTo(-10, -10);
12886 ctx.lineTo(110, -10);
12887 ctx.lineTo(110, 60);
12888 ctx.lineTo(-10, 60);
12889 ctx.lineTo(-10, -10);
12890 ctx.lineTo(-20, -20);
12891 ctx.lineTo(120, -20);
12892 ctx.lineTo(120, 70);
12893 ctx.lineTo(-20, 70);
12894 ctx.lineTo(-20, -20);
12895 ctx.lineTo(0, 0);
12896 ctx.lineTo(0, 50);
12897 ctx.lineTo(100, 50);
12898 ctx.lineTo(100, 0);
12899 ctx.fill();
12900
12901 isPixel(ctx, 50,25, 0,255,0,255, 0);
12902
12903
12904 }
12905 </script>
12906
12907 <!-- [[[ test_2d.path.initial.html ]]] -->
12908
12909 <p>Canvas test: 2d.path.initial</p>
12910 <canvas id="c398" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
12911 <script>
12912
12913
12914
12915 function test_2d_path_initial() {
12916
12917 var canvas = document.getElementById('c398');
12918 var ctx = canvas.getContext('2d');
12919
12920 ctx.lineTo(0, 0);
12921 ctx.lineTo(100, 0);
12922 ctx.lineTo(100, 50);
12923 ctx.lineTo(0, 50);
12924 ctx.closePath();
12925 ctx.fillStyle = '#f00';
12926 ctx.fill();
12927 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
12928
12929
12930 }
12931 </script>
12932
12933 <!-- [[[ test_2d.path.isPointInPath.arc.html ]]] -->
12934
12935 <p>Canvas test: 2d.path.isPointInPath.arc</p>
12936 <!-- Testing: isPointInPath() works on arcs -->
12937 <canvas id="c399" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12938 <script>
12939
12940 function test_2d_path_isPointInPath_arc() {
12941
12942 var canvas = document.getElementById('c399');
12943 var ctx = canvas.getContext('2d');
12944
12945 ctx.arc(50, 25, 10, 0, Math.PI, false);
12946 ok(ctx.isPointInPath(50, 10) === false, "ctx.isPointInPath(50, 10) === false");
12947 ok(ctx.isPointInPath(50, 20) === false, "ctx.isPointInPath(50, 20) === false");
12948 ok(ctx.isPointInPath(50, 30) === true, "ctx.isPointInPath(50, 30) === true");
12949 ok(ctx.isPointInPath(50, 40) === false, "ctx.isPointInPath(50, 40) === false");
12950 ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false");
12951 ok(ctx.isPointInPath(70, 20) === false, "ctx.isPointInPath(70, 20) === false");
12952 ok(ctx.isPointInPath(30, 30) === false, "ctx.isPointInPath(30, 30) === false");
12953 ok(ctx.isPointInPath(70, 30) === false, "ctx.isPointInPath(70, 30) === false");
12954
12955
12956 }
12957 </script>
12958
12959 <!-- [[[ test_2d.path.isPointInPath.basic.1.html ]]] -->
12960
12961 <p>Canvas test: 2d.path.isPointInPath.basic.1</p>
12962 <!-- Testing: isPointInPath() detects whether the point is inside the path -->
12963 <canvas id="c400" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12964 <script>
12965
12966 function test_2d_path_isPointInPath_basic_1() {
12967
12968 var canvas = document.getElementById('c400');
12969 var ctx = canvas.getContext('2d');
12970
12971 ctx.rect(0, 0, 20, 20);
12972 ok(ctx.isPointInPath(10, 10) === true, "ctx.isPointInPath(10, 10) === true");
12973 ok(ctx.isPointInPath(30, 10) === false, "ctx.isPointInPath(30, 10) === false");
12974
12975
12976 }
12977 </script>
12978
12979 <!-- [[[ test_2d.path.isPointInPath.basic.2.html ]]] -->
12980
12981 <p>Canvas test: 2d.path.isPointInPath.basic.2</p>
12982 <!-- Testing: isPointInPath() detects whether the point is inside the path -->
12983 <canvas id="c401" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
12984 <script>
12985
12986 function test_2d_path_isPointInPath_basic_2() {
12987
12988 var canvas = document.getElementById('c401');
12989 var ctx = canvas.getContext('2d');
12990
12991 ctx.rect(20, 0, 20, 20);
12992 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
12993 ok(ctx.isPointInPath(30, 10) === true, "ctx.isPointInPath(30, 10) === true");
12994
12995
12996 }
12997 </script>
12998
12999 <!-- [[[ test_2d.path.isPointInPath.bezier.html ]]] -->
13000
13001 <p>Canvas test: 2d.path.isPointInPath.bezier</p>
13002 <!-- Testing: isPointInPath() works on Bezier curves -->
13003 <canvas id="c402" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13004 <script>
13005
13006 function test_2d_path_isPointInPath_bezier() {
13007
13008 var canvas = document.getElementById('c402');
13009 var ctx = canvas.getContext('2d');
13010
13011 ctx.moveTo(25, 25);
13012 ctx.bezierCurveTo(50, -50, 50, 100, 75, 25);
13013 ok(ctx.isPointInPath(25, 20) == false, "ctx.isPointInPath(25, 20) == false");
13014 ok(ctx.isPointInPath(25, 30) == false, "ctx.isPointInPath(25, 30) == false");
13015 ok(ctx.isPointInPath(30, 20) == true, "ctx.isPointInPath(30, 20) == true");
13016 ok(ctx.isPointInPath(30, 30) == false, "ctx.isPointInPath(30, 30) == false");
13017 ok(ctx.isPointInPath(40, 2) == false, "ctx.isPointInPath(40, 2) == false");
13018 ok(ctx.isPointInPath(40, 20) == true, "ctx.isPointInPath(40, 20) == true");
13019 ok(ctx.isPointInPath(40, 30) == false, "ctx.isPointInPath(40, 30) == false");
13020 ok(ctx.isPointInPath(40, 47) == false, "ctx.isPointInPath(40, 47) == false");
13021 ok(ctx.isPointInPath(45, 20) == true, "ctx.isPointInPath(45, 20) == true");
13022 ok(ctx.isPointInPath(45, 30) == false, "ctx.isPointInPath(45, 30) == false");
13023 ok(ctx.isPointInPath(55, 20) == false, "ctx.isPointInPath(55, 20) == false");
13024 ok(ctx.isPointInPath(55, 30) == true, "ctx.isPointInPath(55, 30) == true");
13025 ok(ctx.isPointInPath(60, 2) == false, "ctx.isPointInPath(60, 2) == false");
13026 ok(ctx.isPointInPath(60, 20) == false, "ctx.isPointInPath(60, 20) == false");
13027 ok(ctx.isPointInPath(60, 30) == true, "ctx.isPointInPath(60, 30) == true");
13028 ok(ctx.isPointInPath(60, 47) == false, "ctx.isPointInPath(60, 47) == false");
13029 ok(ctx.isPointInPath(70, 20) == false, "ctx.isPointInPath(70, 20) == false");
13030 ok(ctx.isPointInPath(70, 30) == true, "ctx.isPointInPath(70, 30) == true");
13031 ok(ctx.isPointInPath(75, 20) == false, "ctx.isPointInPath(75, 20) == false");
13032 ok(ctx.isPointInPath(75, 30) == false, "ctx.isPointInPath(75, 30) == false");
13033
13034
13035 }
13036 </script>
13037
13038 <!-- [[[ test_2d.path.isPointInPath.bigarc.html ]]] -->
13039
13040 <p>Canvas test: 2d.path.isPointInPath.bigarc</p>
13041 <!-- Testing: isPointInPath() works on unclosed arcs larger than 2pi -->
13042 <canvas id="c403" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13043 <script>
13044
13045 function test_2d_path_isPointInPath_bigarc() {
13046
13047 var canvas = document.getElementById('c403');
13048 var ctx = canvas.getContext('2d');
13049
13050 ctx.arc(50, 25, 10, 0, 7, false);
13051 ok(ctx.isPointInPath(50, 10) === false, "ctx.isPointInPath(50, 10) === false");
13052 ok(ctx.isPointInPath(50, 20) === true, "ctx.isPointInPath(50, 20) === true");
13053 ok(ctx.isPointInPath(50, 30) === true, "ctx.isPointInPath(50, 30) === true");
13054 ok(ctx.isPointInPath(50, 40) === false, "ctx.isPointInPath(50, 40) === false");
13055 ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false");
13056 ok(ctx.isPointInPath(70, 20) === false, "ctx.isPointInPath(70, 20) === false");
13057 ok(ctx.isPointInPath(30, 30) === false, "ctx.isPointInPath(30, 30) === false");
13058 ok(ctx.isPointInPath(70, 30) === false, "ctx.isPointInPath(70, 30) === false");
13059
13060
13061 }
13062 </script>
13063
13064 <!-- [[[ test_2d.path.isPointInPath.edge.html ]]] -->
13065
13066 <p>Canvas test: 2d.path.isPointInPath.edge</p>
13067 <!-- Testing: isPointInPath() counts points on the path as being inside -->
13068 <canvas id="c404" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13069 <script>
13070
13071 function test_2d_path_isPointInPath_edge() {
13072
13073 var canvas = document.getElementById('c404');
13074 var ctx = canvas.getContext('2d');
13075
13076 ctx.rect(0, 0, 20, 20);
13077
13078 ok(ctx.isPointInPath(0, 0) === true, "ctx.isPointInPath(0, 0) === true");
13079 ok(ctx.isPointInPath(10, 0) === true, "ctx.isPointInPath(10, 0) === true");
13080 ok(ctx.isPointInPath(20, 0) === true, "ctx.isPointInPath(20, 0) === true");
13081 ok(ctx.isPointInPath(20, 10) === true, "ctx.isPointInPath(20, 10) === true");
13082 ok(ctx.isPointInPath(20, 20) === true, "ctx.isPointInPath(20, 20) === true");
13083 ok(ctx.isPointInPath(10, 20) === true, "ctx.isPointInPath(10, 20) === true");
13084 ok(ctx.isPointInPath(0, 20) === true, "ctx.isPointInPath(0, 20) === true");
13085 ok(ctx.isPointInPath(0, 10) === true, "ctx.isPointInPath(0, 10) === true");
13086 ok(ctx.isPointInPath(10, -0.01) === false, "ctx.isPointInPath(10, -0.01) === false");
13087 ok(ctx.isPointInPath(10, 20.01) === false, "ctx.isPointInPath(10, 20.01) === false");
13088 ok(ctx.isPointInPath(-0.01, 10) === false, "ctx.isPointInPath(-0.01, 10) === false");
13089 ok(ctx.isPointInPath(20.01, 10) === false, "ctx.isPointInPath(20.01, 10) === false");
13090
13091 }
13092 </script>
13093
13094 <!-- [[[ test_2d.path.isPointInPath.empty.html ]]] -->
13095
13096 <p>Canvas test: 2d.path.isPointInPath.empty</p>
13097 <!-- Testing: isPointInPath() works when there is no path -->
13098 <canvas id="c405" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13099 <script>
13100
13101 function test_2d_path_isPointInPath_empty() {
13102
13103 var canvas = document.getElementById('c405');
13104 var ctx = canvas.getContext('2d');
13105
13106 ok(ctx.isPointInPath(0, 0) === false, "ctx.isPointInPath(0, 0) === false");
13107
13108
13109 }
13110 </script>
13111
13112 <!-- [[[ test_2d.path.isPointInPath.nonfinite.html ]]] -->
13113
13114 <p>Canvas test: 2d.path.isPointInPath.nonfinite</p>
13115 <!-- Testing: isPointInPath() returns false for non-finite arguments -->
13116 <canvas id="c406" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13117 <script>
13118
13119 function test_2d_path_isPointInPath_nonfinite() {
13120
13121 var canvas = document.getElementById('c406');
13122 var ctx = canvas.getContext('2d');
13123
13124 var _thrown_outer = false;
13125 try {
13126
13127 ctx.rect(-100, -50, 200, 100);
13128 ok(ctx.isPointInPath(Infinity, 0) === false, "ctx.isPointInPath(Infinity, 0) === false");
13129 ok(ctx.isPointInPath(-Infinity, 0) === false, "ctx.isPointInPath(-Infinity, 0) === false");
13130 ok(ctx.isPointInPath(NaN, 0) === false, "ctx.isPointInPath(NaN, 0) === false");
13131 ok(ctx.isPointInPath(0, Infinity) === false, "ctx.isPointInPath(0, Infinity) === false");
13132 ok(ctx.isPointInPath(0, -Infinity) === false, "ctx.isPointInPath(0, -Infinity) === false");
13133 ok(ctx.isPointInPath(0, NaN) === false, "ctx.isPointInPath(0, NaN) === false");
13134 ok(ctx.isPointInPath(NaN, NaN) === false, "ctx.isPointInPath(NaN, NaN) === false");
13135
13136 } catch (e) {
13137     _thrown_outer = true;
13138 }
13139 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
13140
13141
13142 }
13143 </script>
13144
13145 <!-- [[[ test_2d.path.isPointInPath.outside.html ]]] -->
13146
13147 <p>Canvas test: 2d.path.isPointInPath.outside</p>
13148 <!-- Testing: isPointInPath() works on paths outside the canvas -->
13149 <canvas id="c407" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13150 <script>
13151
13152 function test_2d_path_isPointInPath_outside() {
13153
13154 var canvas = document.getElementById('c407');
13155 var ctx = canvas.getContext('2d');
13156
13157 ctx.rect(0, -100, 20, 20);
13158 ctx.rect(20, -10, 20, 20);
13159 ok(ctx.isPointInPath(10, -110) === false, "ctx.isPointInPath(10, -110) === false");
13160 ok(ctx.isPointInPath(10, -90) === true, "ctx.isPointInPath(10, -90) === true");
13161 ok(ctx.isPointInPath(10, -70) === false, "ctx.isPointInPath(10, -70) === false");
13162 ok(ctx.isPointInPath(30, -20) === false, "ctx.isPointInPath(30, -20) === false");
13163 ok(ctx.isPointInPath(30, 0) === true, "ctx.isPointInPath(30, 0) === true");
13164 ok(ctx.isPointInPath(30, 20) === false, "ctx.isPointInPath(30, 20) === false");
13165
13166
13167 }
13168 </script>
13169
13170 <!-- [[[ test_2d.path.isPointInPath.subpath.html ]]] -->
13171
13172 <p>Canvas test: 2d.path.isPointInPath.subpath</p>
13173 <!-- Testing: isPointInPath() uses the current path, not just the subpath -->
13174 <canvas id="c408" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13175 <script>
13176
13177 function test_2d_path_isPointInPath_subpath() {
13178
13179 var canvas = document.getElementById('c408');
13180 var ctx = canvas.getContext('2d');
13181
13182 ctx.rect(0, 0, 20, 20);
13183 ctx.beginPath();
13184 ctx.rect(20, 0, 20, 20);
13185 ctx.closePath();
13186 ctx.rect(40, 0, 20, 20);
13187 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
13188 ok(ctx.isPointInPath(30, 10) === true, "ctx.isPointInPath(30, 10) === true");
13189 ok(ctx.isPointInPath(50, 10) === true, "ctx.isPointInPath(50, 10) === true");
13190
13191
13192 }
13193 </script>
13194
13195 <!-- [[[ test_2d.path.isPointInPath.transform.1.html ]]] -->
13196
13197 <p>Canvas test: 2d.path.isPointInPath.transform.1 - bug 405300</p>
13198 <!-- Testing: isPointInPath() handles transformations correctly -->
13199 <canvas id="c409" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13200 <script>
13201
13202 function test_2d_path_isPointInPath_transform_1() {
13203
13204 var canvas = document.getElementById('c409');
13205 var ctx = canvas.getContext('2d');
13206
13207 ctx.translate(50, 0);
13208 ctx.rect(0, 0, 20, 20);
13209 ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false");
13210 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
13211 ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false");
13212 ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true");
13213 ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true");
13214 ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false");
13215
13216
13217 }
13218 </script>
13219
13220 <!-- [[[ test_2d.path.isPointInPath.transform.2.html ]]] -->
13221
13222 <p>Canvas test: 2d.path.isPointInPath.transform.2 - bug 405300</p>
13223 <!-- Testing: isPointInPath() handles transformations correctly -->
13224 <canvas id="c410" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13225 <script>
13226
13227 function test_2d_path_isPointInPath_transform_2() {
13228
13229 var canvas = document.getElementById('c410');
13230 var ctx = canvas.getContext('2d');
13231
13232 ctx.rect(50, 0, 20, 20);
13233 ctx.translate(50, 0);
13234 ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false");
13235 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
13236 ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false");
13237 ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true");
13238 ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true");
13239 ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false");
13240
13241
13242 }
13243 </script>
13244
13245 <!-- [[[ test_2d.path.isPointInPath.transform.3.html ]]] -->
13246
13247 <p>Canvas test: 2d.path.isPointInPath.transform.3 - bug 405300</p>
13248 <!-- Testing: isPointInPath() handles transformations correctly -->
13249 <canvas id="c411" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13250 <script>
13251
13252 function test_2d_path_isPointInPath_transform_3() {
13253
13254 var canvas = document.getElementById('c411');
13255 var ctx = canvas.getContext('2d');
13256
13257 ctx.scale(-1, 1);
13258 ctx.rect(-70, 0, 20, 20);
13259 ok(ctx.isPointInPath(-40, 10) === false, "ctx.isPointInPath(-40, 10) === false");
13260 ok(ctx.isPointInPath(10, 10) === false, "ctx.isPointInPath(10, 10) === false");
13261 ok(ctx.isPointInPath(49, 10) === false, "ctx.isPointInPath(49, 10) === false");
13262 ok(ctx.isPointInPath(51, 10) === true, "ctx.isPointInPath(51, 10) === true");
13263 ok(ctx.isPointInPath(69, 10) === true, "ctx.isPointInPath(69, 10) === true");
13264 ok(ctx.isPointInPath(71, 10) === false, "ctx.isPointInPath(71, 10) === false");
13265
13266
13267 }
13268 </script>
13269
13270 <!-- [[[ test_2d.path.isPointInPath.unclosed.html ]]] -->
13271
13272 <p>Canvas test: 2d.path.isPointInPath.unclosed</p>
13273 <!-- Testing: isPointInPath() works on unclosed subpaths -->
13274 <canvas id="c412" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13275 <script>
13276
13277 function test_2d_path_isPointInPath_unclosed() {
13278
13279 var canvas = document.getElementById('c412');
13280 var ctx = canvas.getContext('2d');
13281
13282 ctx.moveTo(0, 0);
13283 ctx.lineTo(20, 0);
13284 ctx.lineTo(20, 20);
13285 ctx.lineTo(0, 20);
13286 ok(ctx.isPointInPath(10, 10) === true, "ctx.isPointInPath(10, 10) === true");
13287 ok(ctx.isPointInPath(30, 10) === false, "ctx.isPointInPath(30, 10) === false");
13288
13289
13290 }
13291 </script>
13292
13293 <!-- [[[ test_2d.path.isPointInPath.winding.html ]]] -->
13294
13295 <p>Canvas test: 2d.path.isPointInPath.winding</p>
13296 <!-- Testing: isPointInPath() uses the non-zero winding number rule -->
13297 <canvas id="c413" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13298 <script>
13299
13300 function test_2d_path_isPointInPath_winding() {
13301
13302 var canvas = document.getElementById('c413');
13303 var ctx = canvas.getContext('2d');
13304
13305 // Create a square ring, using opposite windings to make a hole in the centre
13306 ctx.moveTo(0, 0);
13307 ctx.lineTo(50, 0);
13308 ctx.lineTo(50, 50);
13309 ctx.lineTo(0, 50);
13310 ctx.lineTo(0, 0);
13311 ctx.lineTo(10, 10);
13312 ctx.lineTo(10, 40);
13313 ctx.lineTo(40, 40);
13314 ctx.lineTo(40, 10);
13315 ctx.lineTo(10, 10);
13316
13317 ok(ctx.isPointInPath(5, 5) === true, "ctx.isPointInPath(5, 5) === true");
13318 ok(ctx.isPointInPath(25, 5) === true, "ctx.isPointInPath(25, 5) === true");
13319 ok(ctx.isPointInPath(45, 5) === true, "ctx.isPointInPath(45, 5) === true");
13320 ok(ctx.isPointInPath(5, 25) === true, "ctx.isPointInPath(5, 25) === true");
13321 ok(ctx.isPointInPath(25, 25) === false, "ctx.isPointInPath(25, 25) === false");
13322 ok(ctx.isPointInPath(45, 25) === true, "ctx.isPointInPath(45, 25) === true");
13323 ok(ctx.isPointInPath(5, 45) === true, "ctx.isPointInPath(5, 45) === true");
13324 ok(ctx.isPointInPath(25, 45) === true, "ctx.isPointInPath(25, 45) === true");
13325 ok(ctx.isPointInPath(45, 45) === true, "ctx.isPointInPath(45, 45) === true");
13326
13327
13328 }
13329 </script>
13330
13331 <!-- [[[ test_2d.path.lineTo.basic.html ]]] -->
13332
13333 <p>Canvas test: 2d.path.lineTo.basic</p>
13334 <canvas id="c414" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13335 <script>
13336
13337
13338 function test_2d_path_lineTo_basic() {
13339
13340 var canvas = document.getElementById('c414');
13341 var ctx = canvas.getContext('2d');
13342
13343 ctx.strokeStyle = '#0f0';
13344 ctx.lineWidth = 50;
13345 ctx.beginPath();
13346 ctx.moveTo(0, 25);
13347 ctx.lineTo(100, 25);
13348 ctx.stroke();
13349 isPixel(ctx, 50,25, 0,255,0,255, 0);
13350
13351
13352 }
13353 </script>
13354
13355 <!-- [[[ test_2d.path.lineTo.emptysubpath.html ]]] -->
13356
13357 <p>Canvas test: 2d.path.lineTo.emptysubpath</p>
13358 <canvas id="c415" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
13359 <script>
13360
13361
13362
13363 function test_2d_path_lineTo_emptysubpath() {
13364
13365 var canvas = document.getElementById('c415');
13366 var ctx = canvas.getContext('2d');
13367
13368 ctx.strokeStyle = '#f00';
13369 ctx.lineWidth = 50;
13370 ctx.beginPath();
13371 ctx.lineTo(0, 25);
13372 ctx.lineTo(100, 25);
13373 ctx.stroke();
13374 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
13375
13376
13377 }
13378 </script>
13379
13380 <!-- [[[ test_2d.path.lineTo.nextpoint.html ]]] -->
13381
13382 <p>Canvas test: 2d.path.lineTo.nextpoint</p>
13383 <canvas id="c416" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13384 <script>
13385
13386
13387 function test_2d_path_lineTo_nextpoint() {
13388
13389 var canvas = document.getElementById('c416');
13390 var ctx = canvas.getContext('2d');
13391
13392 ctx.strokeStyle = '#0f0';
13393 ctx.lineWidth = 50;
13394 ctx.beginPath();
13395 ctx.moveTo(-100, -100);
13396 ctx.lineTo(0, 25);
13397 ctx.lineTo(100, 25);
13398 ctx.stroke();
13399 isPixel(ctx, 50,25, 0,255,0,255, 0);
13400
13401
13402 }
13403 </script>
13404
13405 <!-- [[[ test_2d.path.lineTo.nonfinite.html ]]] -->
13406
13407 <p>Canvas test: 2d.path.lineTo.nonfinite</p>
13408 <!-- Testing: lineTo() with Infinity/NaN is ignored -->
13409 <canvas id="c417" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13410 <script>
13411
13412
13413 function test_2d_path_lineTo_nonfinite() {
13414
13415 var canvas = document.getElementById('c417');
13416 var ctx = canvas.getContext('2d');
13417
13418 var _thrown_outer = false;
13419 try {
13420
13421 ctx.moveTo(0, 0);
13422 ctx.lineTo(100, 0);
13423 ctx.lineTo(Infinity, 50);
13424 ctx.lineTo(-Infinity, 50);
13425 ctx.lineTo(NaN, 50);
13426 ctx.lineTo(0, Infinity);
13427 ctx.lineTo(0, -Infinity);
13428 ctx.lineTo(0, NaN);
13429 ctx.lineTo(Infinity, Infinity);
13430 ctx.lineTo(100, 50);
13431 ctx.lineTo(0, 50);
13432 ctx.fillStyle = '#0f0';
13433 ctx.fill();
13434 isPixel(ctx, 50,25, 0,255,0,255, 0);
13435 isPixel(ctx, 90,45, 0,255,0,255, 0);
13436
13437 } catch (e) {
13438     _thrown_outer = true;
13439 }
13440 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
13441
13442
13443 }
13444 </script>
13445
13446 <!-- [[[ test_2d.path.moveTo.basic.html ]]] -->
13447
13448 <p>Canvas test: 2d.path.moveTo.basic</p>
13449 <canvas id="c418" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13450 <script>
13451
13452
13453 function test_2d_path_moveTo_basic() {
13454
13455 var canvas = document.getElementById('c418');
13456 var ctx = canvas.getContext('2d');
13457
13458 ctx.rect(0, 0, 10, 50);
13459 ctx.moveTo(100, 0);
13460 ctx.lineTo(10, 0);
13461 ctx.lineTo(10, 50);
13462 ctx.lineTo(100, 50);
13463 ctx.fillStyle = '#0f0';
13464 ctx.fill();
13465 isPixel(ctx, 90,25, 0,255,0,255, 0);
13466
13467
13468 }
13469 </script>
13470
13471 <!-- [[[ test_2d.path.moveTo.multiple.html ]]] -->
13472
13473 <p>Canvas test: 2d.path.moveTo.multiple</p>
13474 <canvas id="c419" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13475 <script>
13476
13477
13478 function test_2d_path_moveTo_multiple() {
13479
13480 var canvas = document.getElementById('c419');
13481 var ctx = canvas.getContext('2d');
13482
13483 ctx.moveTo(0, 25);
13484 ctx.moveTo(100, 25);
13485 ctx.moveTo(0, 25);
13486 ctx.lineTo(100, 25);
13487 ctx.strokeStyle = '#0f0';
13488 ctx.lineWidth = 50;
13489 ctx.stroke();
13490 isPixel(ctx, 50,25, 0,255,0,255, 0);
13491
13492
13493 }
13494 </script>
13495
13496 <!-- [[[ test_2d.path.moveTo.newsubpath.html ]]] -->
13497
13498 <p>Canvas test: 2d.path.moveTo.newsubpath</p>
13499 <canvas id="c420" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
13500 <script>
13501
13502
13503 function test_2d_path_moveTo_newsubpath() {
13504
13505 var canvas = document.getElementById('c420');
13506 var ctx = canvas.getContext('2d');
13507
13508 ctx.beginPath();
13509 ctx.moveTo(0, 0);
13510 ctx.moveTo(100, 0);
13511 ctx.moveTo(100, 50);
13512 ctx.moveTo(0, 50);
13513 ctx.fillStyle = '#f00';
13514 ctx.fill();
13515 isPixel(ctx, 50,25, 0,0,0,0, 0);
13516
13517
13518 }
13519 </script>
13520
13521 <!-- [[[ test_2d.path.moveTo.nonfinite.html ]]] -->
13522
13523 <p>Canvas test: 2d.path.moveTo.nonfinite</p>
13524 <!-- Testing: moveTo() with Infinity/NaN is ignored -->
13525 <canvas id="c421" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13526 <script>
13527
13528
13529 function test_2d_path_moveTo_nonfinite() {
13530
13531 var canvas = document.getElementById('c421');
13532 var ctx = canvas.getContext('2d');
13533
13534 var _thrown_outer = false;
13535 try {
13536
13537 ctx.moveTo(0, 0);
13538 ctx.lineTo(100, 0);
13539 ctx.moveTo(Infinity, 50);
13540 ctx.moveTo(-Infinity, 50);
13541 ctx.moveTo(NaN, 50);
13542 ctx.moveTo(0, Infinity);
13543 ctx.moveTo(0, -Infinity);
13544 ctx.moveTo(0, NaN);
13545 ctx.moveTo(Infinity, Infinity);
13546 ctx.lineTo(100, 50);
13547 ctx.lineTo(0, 50);
13548 ctx.fillStyle = '#0f0';
13549 ctx.fill();
13550 isPixel(ctx, 50,25, 0,255,0,255, 0);
13551
13552 } catch (e) {
13553     _thrown_outer = true;
13554 }
13555 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
13556
13557
13558 }
13559 </script>
13560
13561 <!-- [[[ test_2d.path.quadraticCurveTo.basic.html ]]] -->
13562
13563 <p>Canvas test: 2d.path.quadraticCurveTo.basic</p>
13564 <canvas id="c422" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13565 <script>
13566
13567
13568 function test_2d_path_quadraticCurveTo_basic() {
13569
13570 var canvas = document.getElementById('c422');
13571 var ctx = canvas.getContext('2d');
13572
13573 ctx.strokeStyle = '#0f0';
13574 ctx.lineWidth = 50;
13575 ctx.beginPath();
13576 ctx.moveTo(0, 25);
13577 ctx.quadraticCurveTo(100, 25, 100, 25);
13578 ctx.stroke();
13579 isPixel(ctx, 50,25, 0,255,0,255, 0);
13580
13581
13582 }
13583 </script>
13584
13585 <!-- [[[ test_2d.path.quadraticCurveTo.emptysubpath.html ]]] -->
13586
13587 <p>Canvas test: 2d.path.quadraticCurveTo.emptysubpath</p>
13588 <canvas id="c423" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
13589 <script>
13590
13591
13592
13593 function test_2d_path_quadraticCurveTo_emptysubpath() {
13594
13595 var canvas = document.getElementById('c423');
13596 var ctx = canvas.getContext('2d');
13597
13598 ctx.strokeStyle = '#f00';
13599 ctx.lineWidth = 50;
13600 ctx.beginPath();
13601 ctx.quadraticCurveTo(0, 25, 0, 25);
13602 ctx.quadraticCurveTo(100, 25, 100, 25);
13603 ctx.stroke();
13604 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
13605
13606
13607 }
13608 </script>
13609
13610 <!-- [[[ test_2d.path.quadraticCurveTo.nonfinite.html ]]] -->
13611
13612 <p>Canvas test: 2d.path.quadraticCurveTo.nonfinite</p>
13613 <!-- Testing: quadraticCurveTo() with Infinity/NaN is ignored -->
13614 <canvas id="c424" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13615 <script>
13616
13617
13618 function test_2d_path_quadraticCurveTo_nonfinite() {
13619
13620 var canvas = document.getElementById('c424');
13621 var ctx = canvas.getContext('2d');
13622
13623 var _thrown_outer = false;
13624 try {
13625
13626 ctx.moveTo(0, 0);
13627 ctx.lineTo(100, 0);
13628 ctx.quadraticCurveTo(Infinity, 50, 0, 50);
13629 ctx.quadraticCurveTo(-Infinity, 50, 0, 50);
13630 ctx.quadraticCurveTo(NaN, 50, 0, 50);
13631 ctx.quadraticCurveTo(0, Infinity, 0, 50);
13632 ctx.quadraticCurveTo(0, -Infinity, 0, 50);
13633 ctx.quadraticCurveTo(0, NaN, 0, 50);
13634 ctx.quadraticCurveTo(0, 50, Infinity, 50);
13635 ctx.quadraticCurveTo(0, 50, -Infinity, 50);
13636 ctx.quadraticCurveTo(0, 50, NaN, 50);
13637 ctx.quadraticCurveTo(0, 50, 0, Infinity);
13638 ctx.quadraticCurveTo(0, 50, 0, -Infinity);
13639 ctx.quadraticCurveTo(0, 50, 0, NaN);
13640 ctx.quadraticCurveTo(Infinity, Infinity, 0, 50);
13641 ctx.quadraticCurveTo(Infinity, Infinity, Infinity, 50);
13642 ctx.quadraticCurveTo(Infinity, Infinity, Infinity, Infinity);
13643 ctx.quadraticCurveTo(Infinity, Infinity, 0, Infinity);
13644 ctx.quadraticCurveTo(Infinity, 50, Infinity, 50);
13645 ctx.quadraticCurveTo(Infinity, 50, Infinity, Infinity);
13646 ctx.quadraticCurveTo(Infinity, 50, 0, Infinity);
13647 ctx.quadraticCurveTo(0, Infinity, Infinity, 50);
13648 ctx.quadraticCurveTo(0, Infinity, Infinity, Infinity);
13649 ctx.quadraticCurveTo(0, Infinity, 0, Infinity);
13650 ctx.quadraticCurveTo(0, 50, Infinity, Infinity);
13651 ctx.lineTo(100, 50);
13652 ctx.lineTo(0, 50);
13653 ctx.fillStyle = '#0f0';
13654 ctx.fill();
13655 isPixel(ctx, 50,25, 0,255,0,255, 0);
13656 isPixel(ctx, 90,45, 0,255,0,255, 0);
13657
13658 } catch (e) {
13659     _thrown_outer = true;
13660 }
13661 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
13662
13663
13664 }
13665 </script>
13666
13667 <!-- [[[ test_2d.path.quadraticCurveTo.scaled.html ]]] -->
13668
13669 <p>Canvas test: 2d.path.quadraticCurveTo.scaled</p>
13670 <canvas id="c425" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13671 <script>
13672
13673
13674 function test_2d_path_quadraticCurveTo_scaled() {
13675
13676 var canvas = document.getElementById('c425');
13677 var ctx = canvas.getContext('2d');
13678
13679 ctx.scale(1000, 1000);
13680 ctx.strokeStyle = '#0f0';
13681 ctx.lineWidth = 0.055;
13682 ctx.beginPath();
13683 ctx.moveTo(-1, 1.05);
13684 ctx.quadraticCurveTo(0, -1, 1.2, 1.05);
13685 ctx.stroke();
13686 isPixel(ctx, 50,25, 0,255,0,255, 0);
13687 isPixel(ctx, 1,1, 0,255,0,255, 0);
13688 isPixel(ctx, 98,1, 0,255,0,255, 0);
13689 isPixel(ctx, 1,48, 0,255,0,255, 0);
13690 isPixel(ctx, 98,48, 0,255,0,255, 0);
13691
13692
13693 }
13694 </script>
13695
13696 <!-- [[[ test_2d.path.quadraticCurveTo.shape.html ]]] -->
13697
13698 <p>Canvas test: 2d.path.quadraticCurveTo.shape</p>
13699 <canvas id="c426" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13700 <script>
13701
13702
13703 function test_2d_path_quadraticCurveTo_shape() {
13704
13705 var canvas = document.getElementById('c426');
13706 var ctx = canvas.getContext('2d');
13707
13708 ctx.strokeStyle = '#0f0';
13709 ctx.lineWidth = 55;
13710 ctx.beginPath();
13711 ctx.moveTo(-1000, 1050);
13712 ctx.quadraticCurveTo(0, -1000, 1200, 1050);
13713 ctx.stroke();
13714 isPixel(ctx, 50,25, 0,255,0,255, 0);
13715 isPixel(ctx, 1,1, 0,255,0,255, 0);
13716 isPixel(ctx, 98,1, 0,255,0,255, 0);
13717 isPixel(ctx, 1,48, 0,255,0,255, 0);
13718 isPixel(ctx, 98,48, 0,255,0,255, 0);
13719
13720
13721 }
13722 </script>
13723
13724 <!-- [[[ test_2d.path.rect.basic.html ]]] -->
13725
13726 <p>Canvas test: 2d.path.rect.basic</p>
13727 <canvas id="c427" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13728 <script>
13729
13730
13731 function test_2d_path_rect_basic() {
13732
13733 var canvas = document.getElementById('c427');
13734 var ctx = canvas.getContext('2d');
13735
13736 ctx.fillStyle = '#0f0';
13737 ctx.rect(0, 0, 100, 50);
13738 ctx.fill();
13739 isPixel(ctx, 50,25, 0,255,0,255, 0);
13740
13741
13742 }
13743 </script>
13744
13745 <!-- [[[ test_2d.path.rect.closed.html ]]] -->
13746
13747 <p>Canvas test: 2d.path.rect.closed</p>
13748 <canvas id="c428" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13749 <script>
13750
13751
13752 function test_2d_path_rect_closed() {
13753
13754 var canvas = document.getElementById('c428');
13755 var ctx = canvas.getContext('2d');
13756
13757 ctx.strokeStyle = '#0f0';
13758 ctx.lineWidth = 200;
13759 ctx.lineJoin = 'miter';
13760 ctx.rect(100, 50, 100, 100);
13761 ctx.stroke();
13762 isPixel(ctx, 50,25, 0,255,0,255, 0);
13763
13764
13765 }
13766 </script>
13767
13768 <!-- [[[ test_2d.path.rect.end.1.html ]]] -->
13769
13770 <p>Canvas test: 2d.path.rect.end.1</p>
13771 <canvas id="c429" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13772 <script>
13773
13774
13775 function test_2d_path_rect_end_1() {
13776
13777 var canvas = document.getElementById('c429');
13778 var ctx = canvas.getContext('2d');
13779
13780 ctx.strokeStyle = '#0f0';
13781 ctx.lineWidth = 100;
13782 ctx.rect(200, 100, 400, 1000);
13783 ctx.lineTo(-2000, -1000);
13784 ctx.stroke();
13785 isPixel(ctx, 50,25, 0,255,0,255, 0);
13786
13787
13788 }
13789 </script>
13790
13791 <!-- [[[ test_2d.path.rect.end.2.html ]]] -->
13792
13793 <p>Canvas test: 2d.path.rect.end.2</p>
13794 <canvas id="c430" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13795 <script>
13796
13797
13798 function test_2d_path_rect_end_2() {
13799
13800 var canvas = document.getElementById('c430');
13801 var ctx = canvas.getContext('2d');
13802
13803 ctx.strokeStyle = '#0f0';
13804 ctx.lineWidth = 450;
13805 ctx.lineCap = 'round';
13806 ctx.lineJoin = 'bevel';
13807 ctx.rect(150, 150, 2000, 2000);
13808 ctx.lineTo(160, 160);
13809 ctx.stroke();
13810 isPixel(ctx, 1,1, 0,255,0,255, 0);
13811 isPixel(ctx, 98,1, 0,255,0,255, 0);
13812 isPixel(ctx, 1,48, 0,255,0,255, 0);
13813 isPixel(ctx, 98,48, 0,255,0,255, 0);
13814
13815
13816 }
13817 </script>
13818
13819 <!-- [[[ test_2d.path.rect.negative.html ]]] -->
13820
13821 <p>Canvas test: 2d.path.rect.negative</p>
13822 <canvas id="c431" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13823 <script>
13824
13825
13826 function test_2d_path_rect_negative() {
13827
13828 var canvas = document.getElementById('c431');
13829 var ctx = canvas.getContext('2d');
13830
13831 ctx.fillStyle = '#f00';
13832 ctx.fillRect(0, 0, 100, 50);
13833 ctx.beginPath();
13834 ctx.fillStyle = '#0f0';
13835 ctx.rect(0, 0, 50, 25);
13836 ctx.rect(100, 0, -50, 25);
13837 ctx.rect(0, 50, 50, -25);
13838 ctx.rect(100, 50, -50, -25);
13839 ctx.fill();
13840 isPixel(ctx, 25,12, 0,255,0,255, 0);
13841 isPixel(ctx, 75,12, 0,255,0,255, 0);
13842 isPixel(ctx, 25,37, 0,255,0,255, 0);
13843 isPixel(ctx, 75,37, 0,255,0,255, 0);
13844
13845
13846 }
13847 </script>
13848
13849 <!-- [[[ test_2d.path.rect.newsubpath.html ]]] -->
13850
13851 <p>Canvas test: 2d.path.rect.newsubpath</p>
13852 <canvas id="c432" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
13853 <script>
13854
13855
13856 function test_2d_path_rect_newsubpath() {
13857
13858 var canvas = document.getElementById('c432');
13859 var ctx = canvas.getContext('2d');
13860
13861 ctx.beginPath();
13862 ctx.strokeStyle = '#f00';
13863 ctx.lineWidth = 50;
13864 ctx.moveTo(-100, 25);
13865 ctx.lineTo(-50, 25);
13866 ctx.rect(200, 25, 1, 1);
13867 ctx.stroke();
13868 isPixel(ctx, 50,25, 0,0,0,0, 0);
13869
13870
13871 }
13872 </script>
13873
13874 <!-- [[[ test_2d.path.rect.nonfinite.html ]]] -->
13875
13876 <p>Canvas test: 2d.path.rect.nonfinite</p>
13877 <!-- Testing: rect() with Infinity/NaN is ignored -->
13878 <canvas id="c433" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13879 <script>
13880
13881
13882 function test_2d_path_rect_nonfinite() {
13883
13884 var canvas = document.getElementById('c433');
13885 var ctx = canvas.getContext('2d');
13886
13887 var _thrown_outer = false;
13888 try {
13889
13890 ctx.moveTo(0, 0);
13891 ctx.lineTo(100, 0);
13892 ctx.rect(Infinity, 50, 1, 1);
13893 ctx.rect(-Infinity, 50, 1, 1);
13894 ctx.rect(NaN, 50, 1, 1);
13895 ctx.rect(0, Infinity, 1, 1);
13896 ctx.rect(0, -Infinity, 1, 1);
13897 ctx.rect(0, NaN, 1, 1);
13898 ctx.rect(0, 50, Infinity, 1);
13899 ctx.rect(0, 50, -Infinity, 1);
13900 ctx.rect(0, 50, NaN, 1);
13901 ctx.rect(0, 50, 1, Infinity);
13902 ctx.rect(0, 50, 1, -Infinity);
13903 ctx.rect(0, 50, 1, NaN);
13904 ctx.rect(Infinity, Infinity, 1, 1);
13905 ctx.rect(Infinity, Infinity, Infinity, 1);
13906 ctx.rect(Infinity, Infinity, Infinity, Infinity);
13907 ctx.rect(Infinity, Infinity, 1, Infinity);
13908 ctx.rect(Infinity, 50, Infinity, 1);
13909 ctx.rect(Infinity, 50, Infinity, Infinity);
13910 ctx.rect(Infinity, 50, 1, Infinity);
13911 ctx.rect(0, Infinity, Infinity, 1);
13912 ctx.rect(0, Infinity, Infinity, Infinity);
13913 ctx.rect(0, Infinity, 1, Infinity);
13914 ctx.rect(0, 50, Infinity, Infinity);
13915 ctx.lineTo(100, 50);
13916 ctx.lineTo(0, 50);
13917 ctx.fillStyle = '#0f0';
13918 ctx.fill();
13919 isPixel(ctx, 50,25, 0,255,0,255, 0);
13920 isPixel(ctx, 90,45, 0,255,0,255, 0);
13921
13922 } catch (e) {
13923     _thrown_outer = true;
13924 }
13925 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
13926
13927
13928 }
13929 </script>
13930
13931 <!-- [[[ test_2d.path.rect.selfintersect.html ]]] -->
13932
13933 <p>Canvas test: 2d.path.rect.selfintersect</p>
13934 <canvas id="c434" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13935 <script>
13936
13937
13938
13939 function test_2d_path_rect_selfintersect() {
13940
13941 var canvas = document.getElementById('c434');
13942 var ctx = canvas.getContext('2d');
13943
13944 ctx.strokeStyle = '#0f0';
13945 ctx.lineWidth = 90;
13946 ctx.beginPath();
13947 ctx.rect(45, 20, 10, 10);
13948 ctx.stroke();
13949 isPixel(ctx, 50,25, 0,255,0,255, 0);
13950
13951
13952 }
13953 </script>
13954
13955 <!-- [[[ test_2d.path.rect.winding.html ]]] -->
13956
13957 <p>Canvas test: 2d.path.rect.winding</p>
13958 <canvas id="c435" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
13959 <script>
13960
13961
13962 function test_2d_path_rect_winding() {
13963
13964 var canvas = document.getElementById('c435');
13965 var ctx = canvas.getContext('2d');
13966
13967 ctx.fillStyle = '#0f0';
13968 ctx.fillRect(0, 0, 100, 50);
13969 ctx.beginPath();
13970 ctx.fillStyle = '#f00';
13971 ctx.rect(0, 0, 50, 50);
13972 ctx.rect(100, 50, -50, -50);
13973 ctx.rect(0, 25, 100, -25);
13974 ctx.rect(100, 25, -100, 25);
13975 ctx.fill();
13976 isPixel(ctx, 25,12, 0,255,0,255, 0);
13977 isPixel(ctx, 75,12, 0,255,0,255, 0);
13978 isPixel(ctx, 25,37, 0,255,0,255, 0);
13979 isPixel(ctx, 75,37, 0,255,0,255, 0);
13980
13981
13982 }
13983 </script>
13984
13985 <!-- [[[ test_2d.path.rect.zero.1.html ]]] -->
13986
13987 <p>Canvas test: 2d.path.rect.zero.1</p>
13988 <canvas id="c436" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
13989 <script>
13990
13991
13992 function test_2d_path_rect_zero_1() {
13993
13994 var canvas = document.getElementById('c436');
13995 var ctx = canvas.getContext('2d');
13996
13997 ctx.strokeStyle = '#0f0';
13998 ctx.lineWidth = 100;
13999 ctx.beginPath();
14000 ctx.rect(0, 50, 100, 0);
14001 ctx.stroke();
14002 isPixel(ctx, 50,25, 0,255,0,255, 0);
14003
14004
14005 }
14006 </script>
14007
14008 <!-- [[[ test_2d.path.rect.zero.2.html ]]] -->
14009
14010 <p>Canvas test: 2d.path.rect.zero.2</p>
14011 <canvas id="c437" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
14012 <script>
14013
14014
14015 function test_2d_path_rect_zero_2() {
14016
14017 var canvas = document.getElementById('c437');
14018 var ctx = canvas.getContext('2d');
14019
14020 ctx.strokeStyle = '#0f0';
14021 ctx.lineWidth = 100;
14022 ctx.beginPath();
14023 ctx.rect(50, -100, 0, 250);
14024 ctx.stroke();
14025 isPixel(ctx, 50,25, 0,255,0,255, 0);
14026
14027
14028 }
14029 </script>
14030
14031 <!-- [[[ test_2d.path.rect.zero.3.html ]]] -->
14032
14033 <p>Canvas test: 2d.path.rect.zero.3</p>
14034 <canvas id="c438" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
14035 <script>
14036
14037
14038 function test_2d_path_rect_zero_3() {
14039
14040 var canvas = document.getElementById('c438');
14041 var ctx = canvas.getContext('2d');
14042
14043 if (!IsD2DEnabled()) {
14044     // Disabled for D2D until we can figure out Bug 587554.
14045     ctx.strokeStyle = '#f00';
14046     ctx.lineWidth = 100;
14047     ctx.beginPath();
14048     ctx.rect(50, 25, 0, 0);
14049     ctx.stroke();
14050     isPixel(ctx, 50,25, 0,0,0,0, 0);
14051 }
14052
14053 }
14054 </script>
14055
14056 <!-- [[[ test_2d.path.rect.zero.4.html ]]] -->
14057
14058 <p>Canvas test: 2d.path.rect.zero.4</p>
14059 <canvas id="c439" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
14060 <script>
14061
14062
14063 function test_2d_path_rect_zero_4() {
14064
14065 var canvas = document.getElementById('c439');
14066 var ctx = canvas.getContext('2d');
14067
14068 ctx.strokeStyle = '#0f0';
14069 ctx.lineWidth = 50;
14070 ctx.rect(100, 25, 0, 0);
14071 ctx.lineTo(0, 25);
14072 ctx.stroke();
14073 isPixel(ctx, 50,25, 0,255,0,255, 0);
14074
14075
14076 }
14077 </script>
14078
14079 <!-- [[[ test_2d.path.rect.zero.5.html ]]] -->
14080
14081 <p>Canvas test: 2d.path.rect.zero.5</p>
14082 <canvas id="c440" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
14083 <script>
14084
14085
14086 function test_2d_path_rect_zero_5() {
14087
14088 var canvas = document.getElementById('c440');
14089 var ctx = canvas.getContext('2d');
14090
14091 ctx.strokeStyle = '#f00';
14092 ctx.lineWidth = 50;
14093 ctx.moveTo(0, 0);
14094 ctx.rect(100, 25, 0, 0);
14095 ctx.stroke();
14096 isPixel(ctx, 50,25, 0,0,0,0, 0);
14097
14098
14099 }
14100 </script>
14101
14102 <!-- [[[ test_2d.path.rect.zero.6.html ]]] -->
14103
14104 <p>Canvas test: 2d.path.rect.zero.6</p>
14105 <canvas id="c441" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
14106 <script>
14107
14108
14109
14110 function test_2d_path_rect_zero_6() {
14111
14112 var canvas = document.getElementById('c441');
14113 var ctx = canvas.getContext('2d');
14114
14115 ctx.strokeStyle = '#f00';
14116 ctx.lineJoin = 'miter';
14117 ctx.miterLimit = 1.5;
14118 ctx.lineWidth = 200;
14119 ctx.beginPath();
14120 ctx.rect(100, 25, 1000, 0);
14121 ctx.stroke();
14122 todo_isPixel(ctx, 50,25, 0,0,0,0, 0);
14123
14124
14125 }
14126 </script>
14127
14128 <!-- [[[ test_2d.path.stroke.empty.html ]]] -->
14129
14130 <p>Canvas test: 2d.path.stroke.empty</p>
14131 <!-- Testing: Empty subpaths are not stroked -->
14132 <canvas id="c442" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14133 <script>
14134
14135
14136 function test_2d_path_stroke_empty() {
14137
14138 var canvas = document.getElementById('c442');
14139 var ctx = canvas.getContext('2d');
14140
14141 ctx.fillStyle = '#0f0';
14142 ctx.fillRect(0, 0, 100, 50);
14143
14144 ctx.strokeStyle = '#f00';
14145 ctx.lineWidth = 100;
14146 ctx.lineCap = 'round';
14147 ctx.lineJoin = 'round';
14148
14149 ctx.beginPath();
14150 ctx.moveTo(40, 25);
14151 ctx.moveTo(60, 25);
14152 ctx.stroke();
14153
14154 isPixel(ctx, 50,25, 0,255,0,255, 0);
14155
14156
14157 }
14158 </script>
14159
14160 <!-- [[[ test_2d.path.stroke.overlap.html ]]] -->
14161
14162 <p>Canvas test: 2d.path.stroke.overlap</p>
14163 <!-- Testing: Stroked subpaths are combined before being drawn -->
14164 <canvas id="c443" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14165 <script>
14166
14167
14168 function test_2d_path_stroke_overlap() {
14169
14170 var canvas = document.getElementById('c443');
14171 var ctx = canvas.getContext('2d');
14172
14173 ctx.fillStyle = '#000';
14174 ctx.fillRect(0, 0, 100, 50);
14175
14176 ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
14177 ctx.lineWidth = 50;
14178 ctx.moveTo(0, 20);
14179 ctx.lineTo(100, 20);
14180 ctx.moveTo(0, 30);
14181 ctx.lineTo(100, 30);
14182 ctx.stroke();
14183
14184 isPixel(ctx, 50,25, 0,127,0,255, 1);
14185
14186
14187 }
14188 </script>
14189
14190 <!-- [[[ test_2d.path.stroke.prune.arc.html ]]] -->
14191
14192 <p>Canvas test: 2d.path.stroke.prune.arc</p>
14193 <!-- Testing: Zero-length line segments from arcTo and arc are removed before stroking -->
14194 <canvas id="c444" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14195 <script>
14196
14197
14198
14199 function test_2d_path_stroke_prune_arc() {
14200
14201 var canvas = document.getElementById('c444');
14202 var ctx = canvas.getContext('2d');
14203
14204 ctx.fillStyle = '#0f0';
14205 ctx.fillRect(0, 0, 100, 50);
14206
14207 ctx.strokeStyle = '#f00';
14208 ctx.lineWidth = 100;
14209 ctx.lineCap = 'round';
14210 ctx.lineJoin = 'round';
14211
14212 ctx.beginPath();
14213 ctx.moveTo(50, 25);
14214 ctx.arcTo(50, 25, 150, 25, 10);
14215 ctx.stroke();
14216
14217 ctx.beginPath();
14218 ctx.moveTo(50, 25);
14219 ctx.arc(50, 25, 10, 0, 0, false);
14220 ctx.stroke();
14221
14222 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
14223
14224
14225 }
14226 </script>
14227
14228 <!-- [[[ test_2d.path.stroke.prune.closed.html ]]] -->
14229
14230 <p>Canvas test: 2d.path.stroke.prune.closed</p>
14231 <!-- Testing: Zero-length line segments from closed paths are removed before stroking -->
14232 <canvas id="c445" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14233 <script>
14234
14235
14236
14237 function test_2d_path_stroke_prune_closed() {
14238
14239 var canvas = document.getElementById('c445');
14240 var ctx = canvas.getContext('2d');
14241
14242 ctx.fillStyle = '#0f0';
14243 ctx.fillRect(0, 0, 100, 50);
14244
14245 ctx.strokeStyle = '#f00';
14246 ctx.lineWidth = 100;
14247 ctx.lineCap = 'round';
14248 ctx.lineJoin = 'round';
14249
14250 ctx.beginPath();
14251 ctx.moveTo(50, 25);
14252 ctx.lineTo(50, 25);
14253 ctx.closePath();
14254 ctx.stroke();
14255
14256 isPixel(ctx, 50,25, 0,255,0,255, 0);
14257
14258 }
14259 </script>
14260
14261 <!-- [[[ test_2d.path.stroke.prune.corner.html ]]] -->
14262
14263 <p>Canvas test: 2d.path.stroke.prune.corner</p>
14264 <!-- Testing: Zero-length line segments are removed before stroking with miters -->
14265 <canvas id="c446" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14266 <script>
14267
14268
14269 function test_2d_path_stroke_prune_corner() {
14270
14271 var canvas = document.getElementById('c446');
14272 var ctx = canvas.getContext('2d');
14273
14274 ctx.fillStyle = '#0f0';
14275 ctx.fillRect(0, 0, 100, 50);
14276
14277 ctx.strokeStyle = '#f00';
14278 ctx.lineWidth = 400;
14279 ctx.lineJoin = 'miter';
14280 ctx.miterLimit = 1.4;
14281
14282 ctx.beginPath();
14283 ctx.moveTo(-1000, 200, 0, 0);
14284 ctx.lineTo(-100, 200);
14285 ctx.lineTo(-100, 200);
14286 ctx.lineTo(-100, 200);
14287 ctx.lineTo(-100, 1000);
14288 ctx.stroke();
14289
14290 isPixel(ctx, 50,25, 0,255,0,255, 0);
14291
14292
14293 }
14294 </script>
14295
14296 <!-- [[[ test_2d.path.stroke.prune.curve.html ]]] -->
14297
14298 <p>Canvas test: 2d.path.stroke.prune.curve</p>
14299 <!-- Testing: Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking -->
14300 <canvas id="c447" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14301 <script>
14302
14303
14304
14305 function test_2d_path_stroke_prune_curve() {
14306
14307 var canvas = document.getElementById('c447');
14308 var ctx = canvas.getContext('2d');
14309
14310 ctx.fillStyle = '#0f0';
14311 ctx.fillRect(0, 0, 100, 50);
14312
14313 ctx.strokeStyle = '#f00';
14314 ctx.lineWidth = 100;
14315 ctx.lineCap = 'round';
14316 ctx.lineJoin = 'round';
14317
14318 ctx.beginPath();
14319 ctx.moveTo(50, 25);
14320 ctx.quadraticCurveTo(50, 25, 50, 25);
14321 ctx.stroke();
14322
14323 ctx.beginPath();
14324 ctx.moveTo(50, 25);
14325 ctx.bezierCurveTo(50, 25, 50, 25, 50, 25);
14326 ctx.stroke();
14327
14328 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
14329
14330 }
14331 </script>
14332
14333 <!-- [[[ test_2d.path.stroke.prune.line.html ]]] -->
14334
14335 <p>Canvas test: 2d.path.stroke.prune.line</p>
14336 <!-- Testing: Zero-length line segments from lineTo are removed before stroking -->
14337 <canvas id="c448" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14338 <script>
14339
14340
14341
14342 function test_2d_path_stroke_prune_line() {
14343
14344 var canvas = document.getElementById('c448');
14345 var ctx = canvas.getContext('2d');
14346
14347 ctx.fillStyle = '#0f0';
14348 ctx.fillRect(0, 0, 100, 50);
14349
14350 ctx.strokeStyle = '#f00';
14351 ctx.lineWidth = 100;
14352 ctx.lineCap = 'round';
14353 ctx.lineJoin = 'round';
14354
14355 ctx.beginPath();
14356 ctx.moveTo(50, 25);
14357 ctx.lineTo(50, 25);
14358 ctx.stroke();
14359
14360 todo_isPixel(ctx, 50,25, 0,255,0,255, 0);
14361
14362 }
14363 </script>
14364
14365 <!-- [[[ test_2d.path.stroke.prune.rect.html ]]] -->
14366
14367 <p>Canvas test: 2d.path.stroke.prune.rect</p>
14368 <!-- Testing: Zero-length line segments from rect and strokeRect are removed before stroking -->
14369 <canvas id="c449" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14370 <script>
14371
14372
14373
14374 function test_2d_path_stroke_prune_rect() {
14375
14376 var canvas = document.getElementById('c449');
14377 var ctx = canvas.getContext('2d');
14378
14379 ctx.fillStyle = '#0f0';
14380 ctx.fillRect(0, 0, 100, 50);
14381
14382 ctx.strokeStyle = '#f00';
14383 ctx.lineWidth = 100;
14384 ctx.lineCap = 'round';
14385 ctx.lineJoin = 'round';
14386
14387 ctx.beginPath();
14388 ctx.rect(50, 25, 0, 0);
14389 ctx.stroke();
14390
14391 ctx.strokeRect(50, 25, 0, 0);
14392
14393 isPixel(ctx, 50,25, 0,255,0,255, 0);
14394
14395 }
14396 </script>
14397
14398 <!-- [[[ test_2d.path.stroke.scale1.html ]]] -->
14399
14400 <p>Canvas test: 2d.path.stroke.scale1</p>
14401 <!-- Testing: Stroke line widths are scaled by the current transformation matrix -->
14402 <canvas id="c450" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14403 <script>
14404
14405
14406 function test_2d_path_stroke_scale1() {
14407
14408 var canvas = document.getElementById('c450');
14409 var ctx = canvas.getContext('2d');
14410
14411 ctx.fillStyle = '#f00';
14412 ctx.fillRect(0, 0, 100, 50);
14413
14414 ctx.beginPath();
14415 ctx.rect(25, 12.5, 50, 25);
14416 ctx.save();
14417 ctx.scale(50, 25);
14418 ctx.strokeStyle = '#0f0';
14419 ctx.stroke();
14420 ctx.restore();
14421
14422 ctx.beginPath();
14423 ctx.rect(-25, -12.5, 150, 75);
14424 ctx.save();
14425 ctx.scale(50, 25);
14426 ctx.strokeStyle = '#f00';
14427 ctx.stroke();
14428 ctx.restore();
14429
14430 isPixel(ctx, 0,0, 0,255,0,255, 0);
14431 isPixel(ctx, 50,0, 0,255,0,255, 0);
14432 isPixel(ctx, 99,0, 0,255,0,255, 0);
14433 isPixel(ctx, 0,25, 0,255,0,255, 0);
14434 isPixel(ctx, 50,25, 0,255,0,255, 0);
14435 isPixel(ctx, 99,25, 0,255,0,255, 0);
14436 isPixel(ctx, 0,49, 0,255,0,255, 0);
14437 isPixel(ctx, 50,49, 0,255,0,255, 0);
14438 isPixel(ctx, 99,49, 0,255,0,255, 0);
14439
14440
14441 }
14442 </script>
14443
14444 <!-- [[[ test_2d.path.stroke.scale2.html ]]] -->
14445
14446 <p>Canvas test: 2d.path.stroke.scale2</p>
14447 <!-- Testing: Stroke line widths are scaled by the current transformation matrix -->
14448 <canvas id="c451" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14449 <script>
14450
14451
14452 function test_2d_path_stroke_scale2() {
14453
14454 var canvas = document.getElementById('c451');
14455 var ctx = canvas.getContext('2d');
14456
14457 if (!IsD2DEnabled()) {
14458     // On D2D a rasterization bug causes a small discrepancy here. See bug 587316
14459     ctx.fillStyle = '#f00';
14460     ctx.fillRect(0, 0, 100, 50);
14461
14462     ctx.beginPath();
14463     ctx.rect(25, 12.5, 50, 25);
14464     ctx.save();
14465     ctx.rotate(Math.PI/2);
14466     ctx.scale(25, 50);
14467     ctx.strokeStyle = '#0f0';
14468     ctx.stroke();
14469     ctx.restore();
14470
14471     ctx.beginPath();
14472     ctx.rect(-25, -12.5, 150, 75);
14473     ctx.save();
14474     ctx.rotate(Math.PI/2);
14475     ctx.scale(25, 50);
14476     ctx.strokeStyle = '#f00';
14477     ctx.stroke();
14478     ctx.restore();
14479
14480     isPixel(ctx, 0,0, 0,255,0,255, 0);
14481     isPixel(ctx, 50,0, 0,255,0,255, 0);
14482     isPixel(ctx, 99,0, 0,255,0,255, 0);
14483     isPixel(ctx, 0,25, 0,255,0,255, 0);
14484     isPixel(ctx, 50,25, 0,255,0,255, 0);
14485     isPixel(ctx, 99,25, 0,255,0,255, 0);
14486     isPixel(ctx, 0,49, 0,255,0,255, 0);
14487     isPixel(ctx, 50,49, 0,255,0,255, 0);
14488     isPixel(ctx, 99,49, 0,255,0,255, 0);
14489 }
14490
14491 }
14492 </script>
14493
14494 <!-- [[[ test_2d.path.stroke.skew.html ]]] -->
14495
14496 <p>Canvas test: 2d.path.stroke.skew</p>
14497 <!-- Testing: Strokes lines are skewed by the current transformation matrix -->
14498 <canvas id="c452" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14499 <script>
14500
14501
14502 function test_2d_path_stroke_skew() {
14503
14504 var canvas = document.getElementById('c452');
14505 var ctx = canvas.getContext('2d');
14506
14507 ctx.fillStyle = '#f00';
14508 ctx.fillRect(0, 0, 100, 50);
14509
14510 ctx.save();
14511 ctx.beginPath();
14512 ctx.moveTo(49, -50);
14513 ctx.lineTo(201, -50);
14514 ctx.rotate(Math.PI/4);
14515 ctx.scale(1, 283);
14516 ctx.strokeStyle = '#0f0';
14517 ctx.stroke();
14518 ctx.restore();
14519
14520 ctx.save();
14521 ctx.beginPath();
14522 ctx.translate(-150, 0);
14523 ctx.moveTo(49, -50);
14524 ctx.lineTo(199, -50);
14525 ctx.rotate(Math.PI/4);
14526 ctx.scale(1, 142);
14527 ctx.strokeStyle = '#f00';
14528 ctx.stroke();
14529 ctx.restore();
14530
14531 ctx.save();
14532 ctx.beginPath();
14533 ctx.translate(-150, 0);
14534 ctx.moveTo(49, -50);
14535 ctx.lineTo(199, -50);
14536 ctx.rotate(Math.PI/4);
14537 ctx.scale(1, 142);
14538 ctx.strokeStyle = '#f00';
14539 ctx.stroke();
14540 ctx.restore();
14541
14542 isPixel(ctx, 0,0, 0,255,0,255, 0);
14543 isPixel(ctx, 50,0, 0,255,0,255, 0);
14544 isPixel(ctx, 99,0, 0,255,0,255, 0);
14545 isPixel(ctx, 0,25, 0,255,0,255, 0);
14546 isPixel(ctx, 50,25, 0,255,0,255, 0);
14547 isPixel(ctx, 99,25, 0,255,0,255, 0);
14548 isPixel(ctx, 0,49, 0,255,0,255, 0);
14549 isPixel(ctx, 50,49, 0,255,0,255, 0);
14550 isPixel(ctx, 99,49, 0,255,0,255, 0);
14551
14552 }
14553 </script>
14554
14555 <!-- [[[ test_2d.path.stroke.unaffected.html ]]] -->
14556
14557 <p>Canvas test: 2d.path.stroke.unaffected</p>
14558 <!-- Testing: Stroking does not start a new path or subpath -->
14559 <canvas id="c453" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14560 <script>
14561
14562
14563 function test_2d_path_stroke_unaffected() {
14564
14565 var canvas = document.getElementById('c453');
14566 var ctx = canvas.getContext('2d');
14567
14568 ctx.fillStyle = '#f00';
14569 ctx.fillRect(0, 0, 100, 50);
14570
14571 ctx.lineWidth = 50;
14572 ctx.moveTo(-100, 25);
14573 ctx.lineTo(-100, -100);
14574 ctx.lineTo(200, -100);
14575 ctx.lineTo(200, 25);
14576 ctx.strokeStyle = '#f00';
14577 ctx.stroke();
14578
14579 ctx.closePath();
14580 ctx.strokeStyle = '#0f0';
14581 ctx.stroke();
14582
14583 isPixel(ctx, 50,25, 0,255,0,255, 0);
14584
14585
14586 }
14587 </script>
14588
14589 <!-- [[[ test_2d.path.stroke.union.html ]]] -->
14590
14591 <p>Canvas test: 2d.path.stroke.union</p>
14592 <!-- Testing: Strokes in opposite directions are unioned, not subtracted -->
14593 <canvas id="c454" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14594 <script>
14595
14596
14597 function test_2d_path_stroke_union() {
14598
14599 var canvas = document.getElementById('c454');
14600 var ctx = canvas.getContext('2d');
14601
14602 ctx.fillStyle = '#f00';
14603 ctx.fillRect(0, 0, 100, 50);
14604
14605 ctx.strokeStyle = '#0f0';
14606 ctx.lineWidth = 40;
14607 ctx.moveTo(0, 10);
14608 ctx.lineTo(100, 10);
14609 ctx.moveTo(100, 40);
14610 ctx.lineTo(0, 40);
14611 ctx.stroke();
14612
14613 isPixel(ctx, 50,25, 0,255,0,255, 0);
14614
14615
14616 }
14617 </script>
14618
14619 <!-- [[[ test_2d.path.transformation.basic.html ]]] -->
14620
14621 <p>Canvas test: 2d.path.transformation.basic</p>
14622 <canvas id="c455" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14623 <script>
14624
14625
14626 function test_2d_path_transformation_basic() {
14627
14628 var canvas = document.getElementById('c455');
14629 var ctx = canvas.getContext('2d');
14630
14631 ctx.fillStyle = '#f00';
14632 ctx.fillRect(0, 0, 100, 50);
14633
14634 ctx.translate(-100, 0);
14635 ctx.rect(100, 0, 100, 50);
14636 ctx.translate(0, -100);
14637 ctx.fillStyle = '#0f0';
14638 ctx.fill();
14639
14640 isPixel(ctx, 50,25, 0,255,0,255, 0);
14641
14642
14643 }
14644 </script>
14645
14646 <!-- [[[ test_2d.path.transformation.changing.html ]]] -->
14647
14648 <p>Canvas test: 2d.path.transformation.changing</p>
14649 <!-- Testing: Transformations are applied while building paths, not when drawing -->
14650 <canvas id="c456" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14651 <script>
14652
14653
14654 function test_2d_path_transformation_changing() {
14655
14656 var canvas = document.getElementById('c456');
14657 var ctx = canvas.getContext('2d');
14658
14659 ctx.fillStyle = '#f00';
14660 ctx.fillRect(0, 0, 100, 50);
14661 ctx.fillStyle = '#0f0';
14662 ctx.moveTo(0, 0);
14663 ctx.translate(100, 0);
14664 ctx.lineTo(0, 0);
14665 ctx.translate(0, 50);
14666 ctx.lineTo(0, 0);
14667 ctx.translate(-100, 0);
14668 ctx.lineTo(0, 0);
14669 ctx.translate(1000, 1000);
14670 ctx.rotate(Math.PI/2);
14671 ctx.scale(0.1, 0.1);
14672 ctx.fill();
14673
14674 isPixel(ctx, 50,25, 0,255,0,255, 0);
14675
14676
14677 }
14678 </script>
14679
14680 <!-- [[[ test_2d.path.transformation.multiple.html ]]] -->
14681
14682 <p>Canvas test: 2d.path.transformation.multiple</p>
14683 <canvas id="c457" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14684 <script>
14685
14686
14687 function test_2d_path_transformation_multiple() {
14688
14689 var canvas = document.getElementById('c457');
14690 var ctx = canvas.getContext('2d');
14691
14692 ctx.fillStyle = '#f00';
14693 ctx.fillRect(0, 0, 100, 50);
14694
14695 ctx.rect(0, 0, 100, 50);
14696 ctx.fill();
14697 ctx.translate(-100, 0);
14698 ctx.fillStyle = '#0f0';
14699 ctx.fill();
14700
14701 isPixel(ctx, 50,25, 0,255,0,255, 0);
14702
14703
14704 }
14705 </script>
14706
14707 <!-- [[[ test_2d.pattern.animated.gif.html ]]] -->
14708
14709 <p>Canvas test: 2d.pattern.animated.gif</p>
14710 <!-- Testing: createPattern() of an animated GIF draws the first frame -->
14711 <canvas id="c458" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14712 <script>
14713
14714 var canvas458 = document.getElementById('c458');
14715 var ctx458 = canvas458.getContext('2d');
14716 var isDone_test_2d_pattern_animated_gif = false;
14717
14718 function test_2d_pattern_animated_gif() {
14719
14720 deferTest();
14721 setTimeout(function () {
14722     var pattern = ctx458.createPattern(document.getElementById('anim-gr_2.gif'), 'repeat');
14723     ctx458.fillStyle = pattern;
14724     ctx458.fillRect(0, 0, 50, 50);
14725     setTimeout(wrapFunction(function () {
14726         ctx458.fillRect(50, 0, 50, 50);
14727         isPixel(ctx458, 25,25, 0,255,0,255, 2);
14728         isPixel(ctx458, 75,25, 0,255,0,255, 2);
14729                 isDone_test_2d_pattern_animated_gif = true;
14730     }), 2500);
14731 }, 2500);
14732
14733
14734 }
14735 </script>
14736 <img src="image_anim-gr.gif" id="anim-gr_2.gif" class="resource">
14737
14738 <!-- [[[ test_2d.pattern.basic.canvas.html ]]] -->
14739
14740 <p>Canvas test: 2d.pattern.basic.canvas</p>
14741 <canvas id="c459" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14742 <script>
14743
14744
14745 function test_2d_pattern_basic_canvas() {
14746
14747 var canvas = document.getElementById('c459');
14748 var ctx = canvas.getContext('2d');
14749
14750 ctx.fillStyle = '#f00';
14751 ctx.fillRect(0, 0, 100, 50);
14752
14753 var canvas2 = document.createElement('canvas');
14754 canvas2.width = 100;
14755 canvas2.height = 50;
14756 var ctx2 = canvas2.getContext('2d');
14757 ctx2.fillStyle = '#0f0';
14758 ctx2.fillRect(0, 0, 100, 50);
14759
14760 var pattern = ctx.createPattern(canvas2, 'no-repeat');
14761 ctx.fillStyle = pattern;
14762 ctx.fillRect(0, 0, 100, 50);
14763
14764 isPixel(ctx, 1,1, 0,255,0,255, 0);
14765 isPixel(ctx, 50,1, 0,255,0,255, 0);
14766 isPixel(ctx, 98,1, 0,255,0,255, 0);
14767 isPixel(ctx, 1,25, 0,255,0,255, 0);
14768 isPixel(ctx, 50,25, 0,255,0,255, 0);
14769 isPixel(ctx, 98,25, 0,255,0,255, 0);
14770 isPixel(ctx, 1,48, 0,255,0,255, 0);
14771 isPixel(ctx, 50,48, 0,255,0,255, 0);
14772 isPixel(ctx, 98,48, 0,255,0,255, 0);
14773
14774
14775 }
14776 </script>
14777
14778 <!-- [[[ test_2d.pattern.basic.image.html ]]] -->
14779
14780 <p>Canvas test: 2d.pattern.basic.image</p>
14781 <canvas id="c460" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14782 <script>
14783
14784
14785 function test_2d_pattern_basic_image() {
14786
14787 var canvas = document.getElementById('c460');
14788 var ctx = canvas.getContext('2d');
14789
14790 ctx.fillStyle = '#f00';
14791 ctx.fillRect(0, 0, 100, 50);
14792 var img = document.getElementById('green_8.png');
14793 var pattern = ctx.createPattern(img, 'no-repeat');
14794 ctx.fillStyle = pattern;
14795 ctx.fillRect(0, 0, 100, 50);
14796
14797 isPixel(ctx, 1,1, 0,255,0,255, 0);
14798 isPixel(ctx, 98,1, 0,255,0,255, 0);
14799 isPixel(ctx, 1,48, 0,255,0,255, 0);
14800 isPixel(ctx, 98,48, 0,255,0,255, 0);
14801
14802
14803 }
14804 </script>
14805 <img src="image_green.png" id="green_8.png" class="resource">
14806
14807 <!-- [[[ test_2d.pattern.basic.nocontext.html ]]] -->
14808
14809 <p>Canvas test: 2d.pattern.basic.nocontext</p>
14810 <canvas id="c461" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14811 <script>
14812
14813
14814 function test_2d_pattern_basic_nocontext() {
14815
14816 var canvas = document.getElementById('c461');
14817 var ctx = canvas.getContext('2d');
14818
14819 var canvas2 = document.createElement('canvas');
14820 canvas2.width = 100;
14821 canvas2.height = 50;
14822 var pattern = ctx.createPattern(canvas2, 'no-repeat');
14823
14824 ctx.fillStyle = '#0f0';
14825 ctx.fillRect(0, 0, 100, 50);
14826 ctx.fillStyle = pattern;
14827 ctx.fillRect(0, 0, 100, 50);
14828
14829 isPixel(ctx, 1,1, 0,255,0,255, 0);
14830 isPixel(ctx, 98,1, 0,255,0,255, 0);
14831 isPixel(ctx, 1,48, 0,255,0,255, 0);
14832 isPixel(ctx, 98,48, 0,255,0,255, 0);
14833
14834
14835 }
14836 </script>
14837
14838 <!-- [[[ test_2d.pattern.basic.type.html ]]] -->
14839
14840 <p>Canvas test: 2d.pattern.basic.type</p>
14841 <canvas id="c462" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14842 <script>
14843
14844 function test_2d_pattern_basic_type() {
14845
14846 var canvas = document.getElementById('c462');
14847 var ctx = canvas.getContext('2d');
14848
14849 ok(window.CanvasPattern !== undefined, "window.CanvasPattern !== undefined");
14850
14851 window.CanvasPattern.prototype.thisImplementsCanvasPattern = true;
14852
14853 var img = document.getElementById('green_9.png');
14854 var pattern = ctx.createPattern(img, 'no-repeat');
14855 ok(pattern.thisImplementsCanvasPattern, "pattern.thisImplementsCanvasPattern");
14856
14857
14858 }
14859 </script>
14860 <img src="image_green.png" id="green_9.png" class="resource">
14861
14862 <!-- [[[ test_2d.pattern.basic.zerocanvas.html ]]] -->
14863
14864 <p>Canvas test: 2d.pattern.basic.zerocanvas</p>
14865 <canvas id="c463" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14866 <script>
14867
14868
14869
14870 function test_2d_pattern_basic_zerocanvas() {
14871
14872 var canvas = document.getElementById('c463');
14873 var ctx = canvas.getContext('2d');
14874
14875 canvas.width = 0;
14876 canvas.height = 10;
14877 ok(canvas.width === 0, "canvas.width === 0");
14878 ok(canvas.height === 10, "canvas.height === 10");
14879 var _thrown = undefined; try {
14880   ctx.createPattern(canvas, 'repeat');
14881 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
14882
14883 canvas.width = 10;
14884 canvas.height = 0;
14885 ok(canvas.width === 10, "canvas.width === 10");
14886 ok(canvas.height === 0, "canvas.height === 0");
14887 var _thrown = undefined; try {
14888   ctx.createPattern(canvas, 'repeat');
14889 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
14890
14891 canvas.width = 0;
14892 canvas.height = 0;
14893 ok(canvas.width === 0, "canvas.width === 0");
14894 ok(canvas.height === 0, "canvas.height === 0");
14895 var _thrown = undefined; try {
14896   ctx.createPattern(canvas, 'repeat');
14897 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "InvalidStateError" && _thrown.code == DOMException.INVALID_STATE_ERR, "should throw InvalidStateError");
14898
14899
14900 }
14901 </script>
14902
14903 <!-- [[[ test_2d.pattern.crosscanvas.html ]]] -->
14904
14905 <p>Canvas test: 2d.pattern.crosscanvas</p>
14906 <canvas id="c464" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14907 <script>
14908
14909
14910 function test_2d_pattern_crosscanvas() {
14911
14912 var canvas = document.getElementById('c464');
14913 var ctx = canvas.getContext('2d');
14914
14915 var img = document.getElementById('green_10.png');
14916
14917 var pattern = document.createElement('canvas').getContext('2d').createPattern(img, 'no-repeat');
14918 ctx.fillStyle = '#f00';
14919 ctx.fillRect(0, 0, 100, 50);
14920 ctx.fillStyle = pattern;
14921 ctx.fillRect(0, 0, 100, 50);
14922
14923 isPixel(ctx, 50,25, 0,255,0,255, 0);
14924
14925
14926 }
14927 </script>
14928 <img src="image_green.png" id="green_10.png" class="resource">
14929
14930 <!-- [[[ test_2d.pattern.image.null.html ]]] -->
14931
14932 <p>Canvas test: 2d.pattern.image.null</p>
14933 <canvas id="c467" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14934 <script>
14935
14936 function test_2d_pattern_image_null() {
14937
14938 var canvas = document.getElementById('c467');
14939 var ctx = canvas.getContext('2d');
14940
14941 var _thrown = undefined; try {
14942   ctx.createPattern(null, 'repeat');
14943 } catch (e) { _thrown = e };
14944 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
14945 }
14946 </script>
14947
14948 <!-- [[[ test_2d.pattern.image.string.html ]]] -->
14949
14950 <p>Canvas test: 2d.pattern.image.string</p>
14951 <canvas id="c468" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14952 <script>
14953
14954 function test_2d_pattern_image_string() {
14955
14956 var canvas = document.getElementById('c468');
14957 var ctx = canvas.getContext('2d');
14958
14959 var _thrown = undefined; try {
14960   ctx.createPattern('image_red.png', 'repeat');
14961 } catch (e) { _thrown = e };
14962 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
14963 }
14964 </script>
14965
14966 <!-- [[[ test_2d.pattern.image.undefined.html ]]] -->
14967
14968 <p>Canvas test: 2d.pattern.image.undefined</p>
14969 <canvas id="c469" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14970 <script>
14971
14972 function test_2d_pattern_image_undefined() {
14973
14974 var canvas = document.getElementById('c469');
14975 var ctx = canvas.getContext('2d');
14976
14977 var _thrown = undefined; try {
14978   ctx.createPattern(undefined, 'repeat');
14979 } catch (e) { _thrown = e };
14980 ok(_thrown && _thrown.name == "TypeError", "should throw TypeError");
14981 }
14982 </script>
14983
14984 <!-- [[[ test_2d.pattern.modify.canvas1.html ]]] -->
14985
14986 <p>Canvas test: 2d.pattern.modify.canvas1</p>
14987 <canvas id="c470" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
14988 <script>
14989
14990
14991 function test_2d_pattern_modify_canvas1() {
14992
14993 var canvas = document.getElementById('c470');
14994 var ctx = canvas.getContext('2d');
14995
14996 var canvas2 = document.createElement('canvas');
14997 canvas2.width = 100;
14998 canvas2.height = 50;
14999 var ctx2 = canvas2.getContext('2d');
15000 ctx2.fillStyle = '#0f0';
15001 ctx2.fillRect(0, 0, 100, 50);
15002
15003 var pattern = ctx.createPattern(canvas2, 'no-repeat');
15004
15005 ctx2.fillStyle = '#f00';
15006 ctx2.fillRect(0, 0, 100, 50);
15007
15008 ctx.fillStyle = pattern;
15009 ctx.fillRect(0, 0, 100, 50);
15010
15011 isPixel(ctx, 1,1, 0,255,0,255, 0);
15012 isPixel(ctx, 98,1, 0,255,0,255, 0);
15013 isPixel(ctx, 1,48, 0,255,0,255, 0);
15014 isPixel(ctx, 98,48, 0,255,0,255, 0);
15015
15016
15017 }
15018 </script>
15019
15020 <!-- [[[ test_2d.pattern.modify.canvas2.html ]]] -->
15021
15022 <p>Canvas test: 2d.pattern.modify.canvas2</p>
15023 <canvas id="c471" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15024 <script>
15025
15026
15027 function test_2d_pattern_modify_canvas2() {
15028
15029 var canvas = document.getElementById('c471');
15030 var ctx = canvas.getContext('2d');
15031
15032 var canvas2 = document.createElement('canvas');
15033 canvas2.width = 100;
15034 canvas2.height = 50;
15035 var ctx2 = canvas2.getContext('2d');
15036 ctx2.fillStyle = '#0f0';
15037 ctx2.fillRect(0, 0, 100, 50);
15038
15039 var pattern = ctx.createPattern(canvas2, 'no-repeat');
15040 ctx.fillStyle = pattern;
15041 ctx.fillRect(0, 0, 100, 50);
15042 ctx.fillStyle = '#f00';
15043 ctx.fillRect(0, 0, 100, 50);
15044
15045 ctx2.fillStyle = '#f00';
15046 ctx2.fillRect(0, 0, 100, 50);
15047
15048 ctx.fillStyle = pattern;
15049 ctx.fillRect(0, 0, 100, 50);
15050
15051 isPixel(ctx, 1,1, 0,255,0,255, 0);
15052 isPixel(ctx, 98,1, 0,255,0,255, 0);
15053 isPixel(ctx, 1,48, 0,255,0,255, 0);
15054 isPixel(ctx, 98,48, 0,255,0,255, 0);
15055
15056
15057 }
15058 </script>
15059
15060 <!-- [[[ test_2d.pattern.modify.image1.html ]]] -->
15061
15062 <p>Canvas test: 2d.pattern.modify.image1</p>
15063 <canvas id="c472" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15064 <script>
15065
15066 var canvas472 = document.getElementById('c472');
15067 var ctx472 = canvas472.getContext('2d');
15068
15069 function test_2d_pattern_modify_image1() {
15070
15071 var img = document.getElementById('green_11.png');
15072 var pattern = ctx472.createPattern(img, 'no-repeat');
15073 deferTest();
15074 img.onload = wrapFunction(function ()
15075 {
15076     ctx472.fillStyle = pattern;
15077     ctx472.fillRect(0, 0, 100, 50);
15078
15079     isPixel(ctx472, 1,1, 0,255,0,255, 0);
15080     isPixel(ctx472, 98,1, 0,255,0,255, 0);
15081     isPixel(ctx472, 1,48, 0,255,0,255, 0);
15082     isPixel(ctx472, 98,48, 0,255,0,255, 0);
15083 });
15084 img.src = 'image_red.png';
15085
15086
15087 }
15088 </script>
15089 <img src="image_green.png" id="green_11.png" class="resource">
15090
15091 <!-- [[[ test_2d.pattern.modify.image2.html ]]] -->
15092
15093 <p>Canvas test: 2d.pattern.modify.image2</p>
15094 <canvas id="c473" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15095 <script>
15096
15097
15098 var canvas473 = document.getElementById('c473');
15099 var ctx473 = canvas473.getContext('2d');
15100
15101 function test_2d_pattern_modify_image2() {
15102
15103 var img = document.getElementById('green_12.png');
15104 var pattern = ctx473.createPattern(img, 'no-repeat');
15105 ctx473.fillStyle = pattern;
15106 ctx473.fillRect(0, 0, 100, 50);
15107 ctx473.fillStyle = '#00f';
15108 ctx473.fillRect(0, 0, 100, 50);
15109 deferTest();
15110 img.onload = wrapFunction(function ()
15111 {
15112     ctx473.fillStyle = pattern;
15113     ctx473.fillRect(0, 0, 100, 50);
15114
15115     isPixel(ctx473, 1,1, 0,255,0,255, 0);
15116     isPixel(ctx473, 98,1, 0,255,0,255, 0);
15117     isPixel(ctx473, 1,48, 0,255,0,255, 0);
15118     isPixel(ctx473, 98,48, 0,255,0,255, 0);
15119 });
15120 img.src = 'image_red.png';
15121
15122
15123 }
15124 </script>
15125 <img src="image_green.png" id="green_12.png" class="resource">
15126
15127 <!-- [[[ test_2d.pattern.paint.norepeat.basic.html ]]] -->
15128
15129 <p>Canvas test: 2d.pattern.paint.norepeat.basic</p>
15130 <canvas id="c474" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15131 <script>
15132
15133
15134 function test_2d_pattern_paint_norepeat_basic() {
15135
15136 var canvas = document.getElementById('c474');
15137 var ctx = canvas.getContext('2d');
15138
15139 ctx.fillStyle = '#f00';
15140 ctx.fillRect(0, 0, 100, 50);
15141
15142 var img = document.getElementById('green_13.png');
15143 var pattern = ctx.createPattern(img, 'no-repeat');
15144 ctx.fillStyle = pattern;
15145 ctx.fillRect(0, 0, 100, 50);
15146
15147 isPixel(ctx, 1,1, 0,255,0,255, 0);
15148 isPixel(ctx, 98,1, 0,255,0,255, 0);
15149 isPixel(ctx, 1,48, 0,255,0,255, 0);
15150 isPixel(ctx, 98,48, 0,255,0,255, 0);
15151
15152
15153 }
15154 </script>
15155 <img src="image_green.png" id="green_13.png" class="resource">
15156
15157 <!-- [[[ test_2d.pattern.paint.norepeat.coord1.html ]]] -->
15158
15159 <p>Canvas test: 2d.pattern.paint.norepeat.coord1</p>
15160 <canvas id="c475" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15161 <script>
15162
15163
15164 function test_2d_pattern_paint_norepeat_coord1() {
15165
15166 var canvas = document.getElementById('c475');
15167 var ctx = canvas.getContext('2d');
15168
15169 ctx.fillStyle = '#0f0';
15170 ctx.fillRect(0, 0, 50, 50);
15171 ctx.fillStyle = '#f00';
15172 ctx.fillRect(50, 0, 50, 50);
15173
15174 var img = document.getElementById('green_14.png');
15175 var pattern = ctx.createPattern(img, 'no-repeat');
15176 ctx.fillStyle = pattern;
15177 ctx.translate(50, 0);
15178 ctx.fillRect(-50, 0, 100, 50);
15179
15180 isPixel(ctx, 1,1, 0,255,0,255, 0);
15181 isPixel(ctx, 98,1, 0,255,0,255, 0);
15182 isPixel(ctx, 1,48, 0,255,0,255, 0);
15183 isPixel(ctx, 98,48, 0,255,0,255, 0);
15184
15185
15186 }
15187 </script>
15188 <img src="image_green.png" id="green_14.png" class="resource">
15189
15190 <!-- [[[ test_2d.pattern.paint.norepeat.coord2.html ]]] -->
15191
15192 <p>Canvas test: 2d.pattern.paint.norepeat.coord2</p>
15193 <canvas id="c476" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15194 <script>
15195
15196
15197 function test_2d_pattern_paint_norepeat_coord2() {
15198
15199 var canvas = document.getElementById('c476');
15200 var ctx = canvas.getContext('2d');
15201
15202 var img = document.getElementById('green_15.png');
15203 var pattern = ctx.createPattern(img, 'no-repeat');
15204 ctx.fillStyle = pattern;
15205 ctx.fillRect(0, 0, 50, 50);
15206
15207 ctx.fillStyle = '#f00';
15208 ctx.fillRect(50, 0, 50, 50);
15209
15210 ctx.fillStyle = pattern;
15211 ctx.translate(50, 0);
15212 ctx.fillRect(-50, 0, 100, 50);
15213
15214 isPixel(ctx, 1,1, 0,255,0,255, 0);
15215 isPixel(ctx, 98,1, 0,255,0,255, 0);
15216 isPixel(ctx, 1,48, 0,255,0,255, 0);
15217 isPixel(ctx, 98,48, 0,255,0,255, 0);
15218
15219
15220 }
15221 </script>
15222 <img src="image_green.png" id="green_15.png" class="resource">
15223
15224 <!-- [[[ test_2d.pattern.paint.norepeat.coord3.html ]]] -->
15225
15226 <p>Canvas test: 2d.pattern.paint.norepeat.coord3</p>
15227 <canvas id="c477" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15228 <script>
15229
15230
15231 function test_2d_pattern_paint_norepeat_coord3() {
15232
15233 var canvas = document.getElementById('c477');
15234 var ctx = canvas.getContext('2d');
15235
15236 ctx.fillStyle = '#0f0';
15237 ctx.fillRect(0, 0, 100, 50);
15238
15239 var img = document.getElementById('red_15.png');
15240 var pattern = ctx.createPattern(img, 'no-repeat');
15241 ctx.fillStyle = pattern;
15242 ctx.translate(50, 25);
15243 ctx.fillRect(-50, -25, 100, 50);
15244
15245 ctx.fillStyle = '#0f0';
15246 ctx.fillRect(0, 0, 50, 25);
15247
15248 isPixel(ctx, 1,1, 0,255,0,255, 0);
15249 isPixel(ctx, 98,1, 0,255,0,255, 0);
15250 isPixel(ctx, 1,48, 0,255,0,255, 0);
15251 isPixel(ctx, 98,48, 0,255,0,255, 0);
15252
15253
15254 }
15255 </script>
15256 <img src="image_red.png" id="red_15.png" class="resource">
15257
15258 <!-- [[[ test_2d.pattern.paint.norepeat.outside.html ]]] -->
15259
15260 <p>Canvas test: 2d.pattern.paint.norepeat.outside</p>
15261 <canvas id="c478" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15262 <script>
15263
15264
15265 function test_2d_pattern_paint_norepeat_outside() {
15266
15267 var canvas = document.getElementById('c478');
15268 var ctx = canvas.getContext('2d');
15269
15270 ctx.fillStyle = '#f00';
15271 ctx.fillRect(0, 0, 100, 50);
15272
15273 var img = document.getElementById('red_16.png');
15274 var pattern = ctx.createPattern(img, 'no-repeat');
15275 ctx.fillStyle = '#0f0';
15276 ctx.fillRect(0, 0, 100, 50);
15277
15278 ctx.fillStyle = pattern;
15279 ctx.fillRect(0, -50, 100, 50);
15280 ctx.fillRect(-100, 0, 100, 50);
15281 ctx.fillRect(0, 50, 100, 50);
15282 ctx.fillRect(100, 0, 100, 50);
15283
15284 isPixel(ctx, 1,1, 0,255,0,255, 0);
15285 isPixel(ctx, 98,1, 0,255,0,255, 0);
15286 isPixel(ctx, 1,48, 0,255,0,255, 0);
15287 isPixel(ctx, 98,48, 0,255,0,255, 0);
15288
15289
15290 }
15291 </script>
15292 <img src="image_red.png" id="red_16.png" class="resource">
15293
15294 <!-- [[[ test_2d.pattern.paint.orientation.canvas.html ]]] -->
15295
15296 <p>Canvas test: 2d.pattern.paint.orientation.canvas</p>
15297 <!-- Testing: Canvas patterns do not get flipped when painted -->
15298 <canvas id="c479" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15299 <script>
15300
15301
15302 function test_2d_pattern_paint_orientation_canvas() {
15303
15304 var canvas = document.getElementById('c479');
15305 var ctx = canvas.getContext('2d');
15306
15307 ctx.fillStyle = '#f00';
15308 ctx.fillRect(0, 0, 100, 50);
15309
15310 var canvas2 = document.createElement('canvas');
15311 canvas2.width = 100;
15312 canvas2.height = 50;
15313 var ctx2 = canvas2.getContext('2d');
15314 ctx2.fillStyle = '#f00';
15315 ctx2.fillRect(0, 0, 100, 25);
15316 ctx2.fillStyle = '#0f0';
15317 ctx2.fillRect(0, 25, 100, 25);
15318
15319 var pattern = ctx.createPattern(canvas2, 'no-repeat');
15320 ctx.fillStyle = pattern;
15321 ctx.fillRect(0, 0, 100, 50);
15322 ctx.fillStyle = '#0f0';
15323 ctx.fillRect(0, 0, 100, 25);
15324
15325 isPixel(ctx, 1,1, 0,255,0,255, 0);
15326 isPixel(ctx, 98,1, 0,255,0,255, 0);
15327 isPixel(ctx, 1,48, 0,255,0,255, 0);
15328 isPixel(ctx, 98,48, 0,255,0,255, 0);
15329
15330
15331 }
15332 </script>
15333
15334 <!-- [[[ test_2d.pattern.paint.orientation.image.html ]]] -->
15335
15336 <p>Canvas test: 2d.pattern.paint.orientation.image</p>
15337 <!-- Testing: Image patterns do not get flipped when painted -->
15338 <canvas id="c480" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15339 <script>
15340
15341
15342 function test_2d_pattern_paint_orientation_image() {
15343
15344 var canvas = document.getElementById('c480');
15345 var ctx = canvas.getContext('2d');
15346
15347 ctx.fillStyle = '#f00';
15348 ctx.fillRect(0, 0, 100, 50);
15349
15350 var img = document.getElementById('rrgg-256x256_1.png');
15351 var pattern = ctx.createPattern(img, 'no-repeat');
15352 ctx.fillStyle = pattern;
15353 ctx.save();
15354 ctx.translate(0, -103);
15355 ctx.fillRect(0, 103, 100, 50);
15356 ctx.restore();
15357
15358 ctx.fillStyle = '#0f0';
15359 ctx.fillRect(0, 0, 100, 25);
15360
15361 isPixel(ctx, 1,1, 0,255,0,255, 0);
15362 isPixel(ctx, 98,1, 0,255,0,255, 0);
15363 isPixel(ctx, 1,48, 0,255,0,255, 0);
15364 isPixel(ctx, 98,48, 0,255,0,255, 0);
15365
15366
15367 }
15368 </script>
15369 <img src="image_rrgg-256x256.png" id="rrgg-256x256_1.png" class="resource">
15370
15371 <!-- [[[ test_2d.pattern.paint.repeat.basic.html ]]] -->
15372
15373 <p>Canvas test: 2d.pattern.paint.repeat.basic</p>
15374 <canvas id="c481" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15375 <script>
15376
15377
15378 function test_2d_pattern_paint_repeat_basic() {
15379
15380 var canvas = document.getElementById('c481');
15381 var ctx = canvas.getContext('2d');
15382
15383 ctx.fillStyle = '#f00';
15384 ctx.fillRect(0, 0, 100, 50);
15385
15386 var img = document.getElementById('green-16x16_1.png');
15387 var pattern = ctx.createPattern(img, 'repeat');
15388 ctx.fillStyle = pattern;
15389 ctx.fillRect(0, 0, 100, 50);
15390
15391 isPixel(ctx, 1,1, 0,255,0,255, 0);
15392 isPixel(ctx, 98,1, 0,255,0,255, 0);
15393 isPixel(ctx, 1,48, 0,255,0,255, 0);
15394 isPixel(ctx, 98,48, 0,255,0,255, 0);
15395
15396
15397 }
15398 </script>
15399 <img src="image_green-16x16.png" id="green-16x16_1.png" class="resource">
15400
15401 <!-- [[[ test_2d.pattern.paint.repeat.coord1.html ]]] -->
15402
15403 <p>Canvas test: 2d.pattern.paint.repeat.coord1</p>
15404 <canvas id="c482" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15405 <script>
15406
15407
15408 function test_2d_pattern_paint_repeat_coord1() {
15409
15410 var canvas = document.getElementById('c482');
15411 var ctx = canvas.getContext('2d');
15412
15413 ctx.fillStyle = '#f00';
15414 ctx.fillRect(0, 0, 100, 50);
15415
15416 var img = document.getElementById('rgrg-256x256_3.png');
15417 var pattern = ctx.createPattern(img, 'repeat');
15418 ctx.fillStyle = pattern;
15419 ctx.translate(-128, -78);
15420 ctx.fillRect(128, 78, 100, 50);
15421
15422 isPixel(ctx, 1,1, 0,255,0,255, 0);
15423 isPixel(ctx, 98,1, 0,255,0,255, 0);
15424 isPixel(ctx, 1,48, 0,255,0,255, 0);
15425 isPixel(ctx, 98,48, 0,255,0,255, 0);
15426
15427
15428 }
15429 </script>
15430 <img src="image_rgrg-256x256.png" id="rgrg-256x256_3.png" class="resource">
15431
15432 <!-- [[[ test_2d.pattern.paint.repeat.coord2.html ]]] -->
15433
15434 <p>Canvas test: 2d.pattern.paint.repeat.coord2</p>
15435 <canvas id="c483" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15436 <script>
15437
15438
15439 function test_2d_pattern_paint_repeat_coord2() {
15440
15441 var canvas = document.getElementById('c483');
15442 var ctx = canvas.getContext('2d');
15443
15444 var img = document.getElementById('ggrr-256x256_3.png');
15445 var pattern = ctx.createPattern(img, 'repeat');
15446 ctx.fillStyle = pattern;
15447 ctx.fillRect(0, 0, 100, 50);
15448
15449 isPixel(ctx, 1,1, 0,255,0,255, 0);
15450 isPixel(ctx, 98,1, 0,255,0,255, 0);
15451 isPixel(ctx, 1,48, 0,255,0,255, 0);
15452 isPixel(ctx, 98,48, 0,255,0,255, 0);
15453
15454
15455 }
15456 </script>
15457 <img src="image_ggrr-256x256.png" id="ggrr-256x256_3.png" class="resource">
15458
15459 <!-- [[[ test_2d.pattern.paint.repeat.coord3.html ]]] -->
15460
15461 <p>Canvas test: 2d.pattern.paint.repeat.coord3</p>
15462 <canvas id="c484" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15463 <script>
15464
15465
15466
15467 function test_2d_pattern_paint_repeat_coord3() {
15468
15469 var canvas = document.getElementById('c484');
15470 var ctx = canvas.getContext('2d');
15471
15472 var img = document.getElementById('rgrg-256x256_4.png');
15473 var pattern = ctx.createPattern(img, 'repeat');
15474 ctx.fillStyle = pattern;
15475 ctx.fillRect(0, 0, 100, 50);
15476
15477 ctx.translate(-128, -78);
15478 ctx.fillRect(128, 78, 100, 50);
15479
15480 isPixel(ctx, 1,1, 0,255,0,255, 0);
15481 isPixel(ctx, 98,1, 0,255,0,255, 0);
15482 isPixel(ctx, 1,48, 0,255,0,255, 0);
15483 isPixel(ctx, 98,48, 0,255,0,255, 0);
15484 }
15485 </script>
15486 <img src="image_rgrg-256x256.png" id="rgrg-256x256_4.png" class="resource">
15487
15488 <!-- [[[ test_2d.pattern.paint.repeat.outside.html ]]] -->
15489
15490 <p>Canvas test: 2d.pattern.paint.repeat.outside</p>
15491 <canvas id="c485" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15492 <script>
15493
15494
15495 function test_2d_pattern_paint_repeat_outside() {
15496
15497 var canvas = document.getElementById('c485');
15498 var ctx = canvas.getContext('2d');
15499
15500 ctx.fillStyle = '#f00';
15501 ctx.fillRect(0, 0, 100, 50);
15502
15503 var img = document.getElementById('green-16x16_2.png');
15504 var pattern = ctx.createPattern(img, 'repeat');
15505 ctx.fillStyle = pattern;
15506 ctx.translate(50, 25);
15507 ctx.fillRect(-50, -25, 100, 50);
15508
15509 isPixel(ctx, 1,1, 0,255,0,255, 0);
15510 isPixel(ctx, 98,1, 0,255,0,255, 0);
15511 isPixel(ctx, 1,48, 0,255,0,255, 0);
15512 isPixel(ctx, 98,48, 0,255,0,255, 0);
15513
15514
15515 }
15516 </script>
15517 <img src="image_green-16x16.png" id="green-16x16_2.png" class="resource">
15518
15519 <!-- [[[ test_2d.pattern.paint.repeatx.basic.html ]]] -->
15520
15521 <p>Canvas test: 2d.pattern.paint.repeatx.basic</p>
15522 <canvas id="c486" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15523 <script>
15524
15525
15526 function test_2d_pattern_paint_repeatx_basic() {
15527
15528 var canvas = document.getElementById('c486');
15529 var ctx = canvas.getContext('2d');
15530
15531 ctx.fillStyle = '#0f0';
15532 ctx.fillRect(0, 0, 100, 50);
15533 ctx.fillStyle = '#f00';
15534 ctx.fillRect(0, 0, 100, 16);
15535
15536 var img = document.getElementById('green-16x16_3.png');
15537 var pattern = ctx.createPattern(img, 'repeat-x');
15538 ctx.fillStyle = pattern;
15539 ctx.fillRect(0, 0, 100, 50);
15540
15541 isPixel(ctx, 1,1, 0,255,0,255, 0);
15542 isPixel(ctx, 98,1, 0,255,0,255, 0);
15543 isPixel(ctx, 1,48, 0,255,0,255, 0);
15544 isPixel(ctx, 98,48, 0,255,0,255, 0);
15545
15546
15547 }
15548 </script>
15549 <img src="image_green-16x16.png" id="green-16x16_3.png" class="resource">
15550
15551 <!-- [[[ test_2d.pattern.paint.repeatx.coord1.html ]]] -->
15552
15553 <p>Canvas test: 2d.pattern.paint.repeatx.coord1</p>
15554 <canvas id="c487" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15555 <script>
15556
15557
15558
15559 function test_2d_pattern_paint_repeatx_coord1() {
15560
15561 var canvas = document.getElementById('c487');
15562 var ctx = canvas.getContext('2d');
15563
15564 ctx.fillStyle = '#0f0';
15565 ctx.fillRect(0, 0, 100, 50);
15566
15567 var img = document.getElementById('red-16x16_1.png');
15568 var pattern = ctx.createPattern(img, 'repeat-x');
15569 ctx.fillStyle = pattern;
15570 ctx.translate(0, 16);
15571 ctx.fillRect(0, -16, 100, 50);
15572
15573 ctx.fillStyle = '#0f0';
15574 ctx.fillRect(0, 0, 100, 16);
15575
15576 isPixel(ctx, 1,1, 0,255,0,255, 0);
15577 isPixel(ctx, 98,1, 0,255,0,255, 0);
15578 isPixel(ctx, 1,48, 0,255,0,255, 0);
15579 isPixel(ctx, 98,48, 0,255,0,255, 0);
15580 isPixel(ctx, 1,25, 0,255,0,255, 0);
15581 isPixel(ctx, 98,25, 0,255,0,255, 0);
15582 }
15583 </script>
15584 <img src="image_red-16x16.png" id="red-16x16_1.png" class="resource">
15585
15586 <!-- [[[ test_2d.pattern.paint.repeatx.outside.html ]]] -->
15587
15588 <p>Canvas test: 2d.pattern.paint.repeatx.outside</p>
15589 <canvas id="c488" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15590 <script>
15591
15592
15593
15594 function test_2d_pattern_paint_repeatx_outside() {
15595
15596 var canvas = document.getElementById('c488');
15597 var ctx = canvas.getContext('2d');
15598
15599 ctx.fillStyle = '#0f0';
15600 ctx.fillRect(0, 0, 100, 50);
15601
15602 var img = document.getElementById('red-16x16_2.png');
15603 var pattern = ctx.createPattern(img, 'repeat-x');
15604 ctx.fillStyle = pattern;
15605 ctx.fillRect(0, 0, 100, 50);
15606
15607 ctx.fillStyle = '#0f0';
15608 ctx.fillRect(0, 0, 100, 16);
15609
15610 isPixel(ctx, 1,1, 0,255,0,255, 0);
15611 isPixel(ctx, 98,1, 0,255,0,255, 0);
15612 isPixel(ctx, 1,48, 0,255,0,255, 0);
15613 isPixel(ctx, 98,48, 0,255,0,255, 0);
15614 }
15615 </script>
15616 <img src="image_red-16x16.png" id="red-16x16_2.png" class="resource">
15617
15618 <!-- [[[ test_2d.pattern.paint.repeaty.basic.html ]]] -->
15619
15620 <p>Canvas test: 2d.pattern.paint.repeaty.basic</p>
15621 <canvas id="c489" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15622 <script>
15623
15624
15625 function test_2d_pattern_paint_repeaty_basic() {
15626
15627 var canvas = document.getElementById('c489');
15628 var ctx = canvas.getContext('2d');
15629
15630 ctx.fillStyle = '#0f0';
15631 ctx.fillRect(0, 0, 100, 50);
15632 ctx.fillStyle = '#f00';
15633 ctx.fillRect(0, 0, 16, 50);
15634
15635 var img = document.getElementById('green-16x16_4.png');
15636 var pattern = ctx.createPattern(img, 'repeat-y');
15637 ctx.fillStyle = pattern;
15638 ctx.fillRect(0, 0, 100, 50);
15639
15640 isPixel(ctx, 1,1, 0,255,0,255, 0);
15641 isPixel(ctx, 98,1, 0,255,0,255, 0);
15642 isPixel(ctx, 1,48, 0,255,0,255, 0);
15643 isPixel(ctx, 98,48, 0,255,0,255, 0);
15644
15645
15646 }
15647 </script>
15648 <img src="image_green-16x16.png" id="green-16x16_4.png" class="resource">
15649
15650 <!-- [[[ test_2d.pattern.paint.repeaty.coord1.html ]]] -->
15651
15652 <p>Canvas test: 2d.pattern.paint.repeaty.coord1</p>
15653 <canvas id="c490" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15654 <script>
15655
15656
15657
15658 function test_2d_pattern_paint_repeaty_coord1() {
15659
15660 var canvas = document.getElementById('c490');
15661 var ctx = canvas.getContext('2d');
15662
15663 ctx.fillStyle = '#0f0';
15664 ctx.fillRect(0, 0, 100, 50);
15665
15666 var img = document.getElementById('red-16x16_3.png');
15667 var pattern = ctx.createPattern(img, 'repeat-y');
15668 ctx.fillStyle = pattern;
15669 ctx.translate(48, 0);
15670 ctx.fillRect(-48, 0, 100, 50);
15671
15672 ctx.fillStyle = '#0f0';
15673 ctx.fillRect(0, 0, 16, 50);
15674
15675 isPixel(ctx, 50,1, 0,255,0,255, 0);
15676 isPixel(ctx, 50,48, 0,255,0,255, 0);
15677
15678 isPixel(ctx, 1,1, 0,255,0,255, 0);
15679 isPixel(ctx, 98,1, 0,255,0,255, 0);
15680 isPixel(ctx, 1,48, 0,255,0,255, 0);
15681 isPixel(ctx, 98,48, 0,255,0,255, 0);
15682 }
15683 </script>
15684 <img src="image_red-16x16.png" id="red-16x16_3.png" class="resource">
15685
15686 <!-- [[[ test_2d.pattern.paint.repeaty.outside.html ]]] -->
15687
15688 <p>Canvas test: 2d.pattern.paint.repeaty.outside</p>
15689 <canvas id="c491" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15690 <script>
15691
15692
15693
15694 function test_2d_pattern_paint_repeaty_outside() {
15695
15696 var canvas = document.getElementById('c491');
15697 var ctx = canvas.getContext('2d');
15698
15699 ctx.fillStyle = '#0f0';
15700 ctx.fillRect(0, 0, 100, 50);
15701
15702 var img = document.getElementById('red-16x16_4.png');
15703 var pattern = ctx.createPattern(img, 'repeat-y');
15704 ctx.fillStyle = pattern;
15705 ctx.fillRect(0, 0, 100, 50);
15706
15707 ctx.fillStyle = '#0f0';
15708 ctx.fillRect(0, 0, 16, 50);
15709
15710 isPixel(ctx, 1,1, 0,255,0,255, 0);
15711 isPixel(ctx, 1,48, 0,255,0,255, 0);
15712 isPixel(ctx, 98,1, 0,255,0,255, 0);
15713 isPixel(ctx, 98,48, 0,255,0,255, 0);
15714 }
15715 </script>
15716 <img src="image_red-16x16.png" id="red-16x16_4.png" class="resource">
15717
15718 <!-- [[[ test_2d.pattern.repeat.case.html ]]] -->
15719
15720 <p>Canvas test: 2d.pattern.repeat.case</p>
15721 <canvas id="c492" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15722 <script>
15723
15724 function test_2d_pattern_repeat_case() {
15725
15726 var canvas = document.getElementById('c492');
15727 var ctx = canvas.getContext('2d');
15728
15729 var _thrown = undefined; try {
15730   ctx.createPattern(canvas, "Repeat");
15731 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
15732
15733
15734 }
15735 </script>
15736
15737 <!-- [[[ test_2d.pattern.repeat.empty.html ]]] -->
15738
15739 <p>Canvas test: 2d.pattern.repeat.empty</p>
15740 <canvas id="c493" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15741 <script>
15742
15743
15744 function test_2d_pattern_repeat_empty() {
15745
15746 var canvas = document.getElementById('c493');
15747 var ctx = canvas.getContext('2d');
15748
15749 ctx.fillStyle = '#f00';
15750 ctx.fillRect(0, 0, 100, 50);
15751 var img = document.getElementById('green-1x1_1.png');
15752 var pattern = ctx.createPattern(img, "");
15753 ctx.fillStyle = pattern;
15754 ctx.fillRect(0, 0, 200, 50);
15755
15756 isPixel(ctx, 1,1, 0,255,0,255, 0);
15757 isPixel(ctx, 98,1, 0,255,0,255, 0);
15758 isPixel(ctx, 1,48, 0,255,0,255, 0);
15759 isPixel(ctx, 98,48, 0,255,0,255, 0);
15760
15761
15762 }
15763 </script>
15764 <img src="image_green-1x1.png" id="green-1x1_1.png" class="resource">
15765
15766 <!-- [[[ test_2d.pattern.repeat.null.html ]]] -->
15767
15768 <p>Canvas test: 2d.pattern.repeat.null</p>
15769 <canvas id="c494" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15770 <script>
15771
15772
15773 function test_2d_pattern_repeat_null() {
15774
15775 var canvas = document.getElementById('c494');
15776 var ctx = canvas.getContext('2d');
15777
15778 ctx.fillStyle = '#f00';
15779 ctx.fillRect(0, 0, 100, 50);
15780 var img = document.getElementById('green-1x1_2.png');
15781 var pattern = ctx.createPattern(img, null);
15782 ctx.fillStyle = pattern;
15783 ctx.fillRect(0, 0, 100, 50);
15784
15785 isPixel(ctx, 1,1, 0,255,0,255, 0);
15786 isPixel(ctx, 98,1, 0,255,0,255, 0);
15787 isPixel(ctx, 1,48, 0,255,0,255, 0);
15788 isPixel(ctx, 98,48, 0,255,0,255, 0);
15789
15790
15791 }
15792 </script>
15793 <img src="image_green-1x1.png" id="green-1x1_2.png" class="resource">
15794
15795 <!-- [[[ test_2d.pattern.repeat.nullsuffix.html ]]] -->
15796
15797 <p>Canvas test: 2d.pattern.repeat.nullsuffix</p>
15798 <canvas id="c495" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15799 <script>
15800
15801 function test_2d_pattern_repeat_nullsuffix() {
15802
15803 var canvas = document.getElementById('c495');
15804 var ctx = canvas.getContext('2d');
15805
15806 var _thrown = undefined; try {
15807   ctx.createPattern(canvas, "repeat\0");
15808 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
15809
15810
15811 }
15812 </script>
15813
15814 <!-- [[[ test_2d.pattern.repeat.undefined.html ]]] -->
15815
15816 <p>Canvas test: 2d.pattern.repeat.undefined</p>
15817 <canvas id="c496" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15818 <script>
15819
15820 function test_2d_pattern_repeat_undefined() {
15821
15822 var canvas = document.getElementById('c496');
15823 var ctx = canvas.getContext('2d');
15824
15825 var _thrown = undefined; try {
15826   ctx.createPattern(canvas, undefined);
15827 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
15828
15829
15830 }
15831 </script>
15832
15833 <!-- [[[ test_2d.pattern.repeat.unrecognised.html ]]] -->
15834
15835 <p>Canvas test: 2d.pattern.repeat.unrecognised</p>
15836 <canvas id="c497" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15837 <script>
15838
15839 function test_2d_pattern_repeat_unrecognised() {
15840
15841 var canvas = document.getElementById('c497');
15842 var ctx = canvas.getContext('2d');
15843
15844 var _thrown = undefined; try {
15845   ctx.createPattern(canvas, "invalid");
15846 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "SyntaxError" && _thrown.code == DOMException.SYNTAX_ERR, "should throw SyntaxError");
15847
15848
15849 }
15850 </script>
15851
15852 <!-- [[[ test_2d.scaled.html ]]] -->
15853
15854 <p>Canvas test: 2d.scaled</p>
15855 <!-- Testing: CSS-scaled canvases get drawn correctly -->
15856 <canvas id="c498" width="50" height="25" style="width: 100px; height: 50px"><p class="fallback">FAIL (fallback content)</p></canvas>
15857 <script>
15858
15859 function test_2d_scaled() {
15860
15861 var canvas = document.getElementById('c498');
15862 var ctx = canvas.getContext('2d');
15863
15864 ctx.fillStyle = '#00f';
15865 ctx.fillRect(0, 0, 50, 25);
15866 ctx.fillStyle = '#0ff';
15867 ctx.fillRect(0, 0, 25, 10);
15868
15869 todo(false, "test completed successfully"); // (Bug 483989)
15870
15871 }
15872
15873 </script>
15874 <!-- [[[ test_2d.shadow.alpha.1.html ]]] -->
15875
15876 <p>Canvas test: 2d.shadow.alpha.1</p>
15877 <canvas id="c499" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15878 <script>
15879
15880
15881 function test_2d_shadow_alpha_1() {
15882
15883 var canvas = document.getElementById('c499');
15884 var ctx = canvas.getContext('2d');
15885
15886 ctx.fillStyle = '#0f0';
15887 ctx.fillRect(0, 0, 100, 50);
15888 ctx.shadowColor = 'rgba(255, 0, 0, 0.01)';
15889 ctx.shadowOffsetY = 50;
15890 ctx.fillRect(0, -50, 100, 50);
15891
15892 isPixel(ctx, 50,25, 0,255,0,255, 4);
15893
15894
15895 }
15896 </script>
15897
15898 <!-- [[[ test_2d.shadow.alpha.2.html ]]] -->
15899
15900 <p>Canvas test: 2d.shadow.alpha.2</p>
15901 <canvas id="c500" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15902 <script>
15903
15904
15905
15906 function test_2d_shadow_alpha_2() {
15907
15908 var canvas = document.getElementById('c500');
15909 var ctx = canvas.getContext('2d');
15910
15911 ctx.fillStyle = '#f00';
15912 ctx.fillRect(0, 0, 100, 50);
15913 ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
15914 ctx.shadowOffsetY = 50;
15915 ctx.fillRect(0, -50, 100, 50);
15916
15917 isPixel(ctx, 50,25, 127,0,127,255, 2);
15918
15919
15920 }
15921 </script>
15922
15923 <!-- [[[ test_2d.shadow.alpha.3.html ]]] -->
15924
15925 <p>Canvas test: 2d.shadow.alpha.3</p>
15926 <canvas id="c501" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15927 <script>
15928
15929
15930
15931 function test_2d_shadow_alpha_3() {
15932
15933 var canvas = document.getElementById('c501');
15934 var ctx = canvas.getContext('2d');
15935
15936 ctx.fillStyle = '#f00';
15937 ctx.fillRect(0, 0, 100, 50);
15938 ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
15939 ctx.shadowColor = '#00f';
15940 ctx.shadowOffsetY = 50;
15941 ctx.globalAlpha = 0.5;
15942 ctx.fillRect(0, -50, 100, 50);
15943
15944 isPixel(ctx, 50,25, 127,0,127,255, 2);
15945
15946
15947 }
15948 </script>
15949
15950 <!-- [[[ test_2d.shadow.alpha.4.html ]]] -->
15951
15952 <p>Canvas test: 2d.shadow.alpha.4</p>
15953 <canvas id="c502" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15954 <script>
15955
15956
15957
15958 function test_2d_shadow_alpha_4() {
15959
15960 var canvas = document.getElementById('c502');
15961 var ctx = canvas.getContext('2d');
15962
15963 ctx.fillStyle = '#f00';
15964 ctx.fillRect(0, 0, 100, 50);
15965 ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
15966 ctx.shadowColor = 'rgba(0, 0, 255, 0.707)';
15967 ctx.shadowOffsetY = 50;
15968 ctx.globalAlpha = 0.707;
15969 ctx.fillRect(0, -50, 100, 50);
15970
15971 isPixel(ctx, 50,25, 127,0,127,255, 2);
15972
15973
15974 }
15975 </script>
15976
15977 <!-- [[[ test_2d.shadow.alpha.5.html ]]] -->
15978
15979 <p>Canvas test: 2d.shadow.alpha.5</p>
15980 <canvas id="c503" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
15981 <script>
15982
15983
15984
15985 function test_2d_shadow_alpha_5() {
15986
15987 var canvas = document.getElementById('c503');
15988 var ctx = canvas.getContext('2d');
15989
15990 ctx.fillStyle = '#f00';
15991 ctx.fillRect(0, 0, 100, 50);
15992 ctx.fillStyle = 'rgba(64, 0, 0, 0.5)';
15993 ctx.shadowColor = '#00f';
15994 ctx.shadowOffsetY = 50;
15995 ctx.fillRect(0, -50, 100, 50);
15996
15997 isPixel(ctx, 50,25, 127,0,127,255, 2);
15998
15999
16000 }
16001 </script>
16002
16003 <!-- [[[ test_2d.shadow.attributes.shadowBlur.1.html ]]] -->
16004
16005 <p>Canvas test: 2d.shadow.attributes.shadowBlur.1</p>
16006 <canvas id="c504" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16007 <script>
16008
16009 function test_2d_shadow_attributes_shadowBlur_1() {
16010
16011 var canvas = document.getElementById('c504');
16012 var ctx = canvas.getContext('2d');
16013
16014 ctx.shadowBlur = 1;
16015 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16016 ctx.shadowBlur = 0.5;
16017 ok(ctx.shadowBlur === 0.5, "ctx.shadowBlur === 0.5");
16018 ctx.shadowBlur = 1e6;
16019 ok(ctx.shadowBlur === 1e6, "ctx.shadowBlur === 1e6");
16020 ctx.shadowBlur = 1;
16021 ctx.shadowBlur = -2;
16022 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16023 ctx.shadowBlur = 0;
16024 ok(ctx.shadowBlur === 0, "ctx.shadowBlur === 0");
16025
16026
16027 }
16028 </script>
16029
16030 <!-- [[[ test_2d.shadow.attributes.shadowBlur.2.html ]]] -->
16031
16032 <p>Canvas test: 2d.shadow.attributes.shadowBlur.2</p>
16033 <canvas id="c505" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16034 <script>
16035
16036 function test_2d_shadow_attributes_shadowBlur_2() {
16037
16038 var canvas = document.getElementById('c505');
16039 var ctx = canvas.getContext('2d');
16040
16041 ctx.shadowBlur = 1;
16042 ctx.shadowBlur = -2;
16043 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16044
16045 ctx.shadowBlur = 1;
16046 ctx.shadowBlur = Infinity;
16047 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16048
16049 ctx.shadowBlur = 1;
16050 ctx.shadowBlur = -Infinity;
16051 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16052
16053 ctx.shadowBlur = 1;
16054 ctx.shadowBlur = NaN;
16055 ok(ctx.shadowBlur === 1, "ctx.shadowBlur === 1");
16056
16057 }
16058 </script>
16059
16060 <!-- [[[ test_2d.shadow.attributes.shadowColor.1.html ]]] -->
16061
16062 <p>Canvas test: 2d.shadow.attributes.shadowColor.1</p>
16063 <canvas id="c506" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16064 <script>
16065
16066 function test_2d_shadow_attributes_shadowColor_1() {
16067
16068 var canvas = document.getElementById('c506');
16069 var ctx = canvas.getContext('2d');
16070
16071 ctx.shadowColor = 'lime';
16072 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
16073 ctx.shadowColor = 'RGBA(0,255, 0,0)';
16074 is(ctx.shadowColor, 'rgba(0, 255, 0, 0)', "ctx.shadowColor should be what we set it to");
16075
16076
16077 }
16078 </script>
16079
16080 <!-- [[[ test_2d.shadow.attributes.shadowColor.2.html ]]] -->
16081
16082 <p>Canvas test: 2d.shadow.attributes.shadowColor.2</p>
16083 <canvas id="c507" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16084 <script>
16085
16086 function test_2d_shadow_attributes_shadowColor_2() {
16087
16088 var canvas = document.getElementById('c507');
16089 var ctx = canvas.getContext('2d');
16090
16091 ctx.shadowColor = '#00ff00';
16092 ctx.shadowColor = 'bogus';
16093 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
16094 ctx.shadowColor = ctx;
16095 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
16096 ctx.shadowColor = undefined;
16097 ok(ctx.shadowColor === '#00ff00', "ctx.shadowColor === '#00ff00'");
16098
16099
16100 }
16101 </script>
16102
16103 <!-- [[[ test_2d.shadow.attributes.shadowOffset.1.html ]]] -->
16104
16105 <p>Canvas test: 2d.shadow.attributes.shadowOffset.1</p>
16106 <canvas id="c508" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16107 <script>
16108
16109 function test_2d_shadow_attributes_shadowOffset_1() {
16110
16111 var canvas = document.getElementById('c508');
16112 var ctx = canvas.getContext('2d');
16113
16114 ctx.shadowOffsetX = 1;
16115 ctx.shadowOffsetY = 2;
16116 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
16117 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
16118 ctx.shadowOffsetX = 0.5;
16119 ctx.shadowOffsetY = 0.25;
16120 ok(ctx.shadowOffsetX === 0.5, "ctx.shadowOffsetX === 0.5");
16121 ok(ctx.shadowOffsetY === 0.25, "ctx.shadowOffsetY === 0.25");
16122 ctx.shadowOffsetX = -0.5;
16123 ctx.shadowOffsetY = -0.25;
16124 ok(ctx.shadowOffsetX === -0.5, "ctx.shadowOffsetX === -0.5");
16125 ok(ctx.shadowOffsetY === -0.25, "ctx.shadowOffsetY === -0.25");
16126 ctx.shadowOffsetX = 1e6;
16127 ctx.shadowOffsetY = 1e6;
16128 ok(ctx.shadowOffsetX === 1e6, "ctx.shadowOffsetX === 1e6");
16129 ok(ctx.shadowOffsetY === 1e6, "ctx.shadowOffsetY === 1e6");
16130
16131
16132 }
16133 </script>
16134
16135 <!-- [[[ test_2d.shadow.attributes.shadowOffset.2.html ]]] -->
16136
16137 <p>Canvas test: 2d.shadow.attributes.shadowOffset.2</p>
16138 <canvas id="c509" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16139 <script>
16140
16141 function test_2d_shadow_attributes_shadowOffset_2() {
16142
16143 var canvas = document.getElementById('c509');
16144 var ctx = canvas.getContext('2d');
16145
16146 ctx.shadowOffsetX = 1;
16147 ctx.shadowOffsetY = 2;
16148 ctx.shadowOffsetX = Infinity;
16149 ctx.shadowOffsetY = Infinity;
16150 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
16151 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
16152
16153 ctx.shadowOffsetX = 1;
16154 ctx.shadowOffsetY = 2;
16155 ctx.shadowOffsetX = -Infinity;
16156 ctx.shadowOffsetY = -Infinity;
16157 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
16158 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
16159
16160 ctx.shadowOffsetX = 1;
16161 ctx.shadowOffsetY = 2;
16162 ctx.shadowOffsetX = NaN;
16163 ctx.shadowOffsetY = NaN;
16164 ok(ctx.shadowOffsetX === 1, "ctx.shadowOffsetX === 1");
16165 ok(ctx.shadowOffsetY === 2, "ctx.shadowOffsetY === 2");
16166
16167 }
16168 </script>
16169
16170 <!-- [[[ test_2d.shadow.basic.1.html ]]] -->
16171
16172 <p>Canvas test: 2d.shadow.basic.1</p>
16173 <canvas id="c510" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16174 <script>
16175
16176
16177 function test_2d_shadow_basic_1() {
16178
16179 var canvas = document.getElementById('c510');
16180 var ctx = canvas.getContext('2d');
16181
16182 ctx.shadowColor = '#f00';
16183 ctx.fillStyle = '#0f0';
16184 ctx.fillRect(0, 0, 100, 50);
16185 isPixel(ctx, 50,25, 0,255,0,255, 0);
16186
16187
16188 }
16189 </script>
16190
16191 <!-- [[[ test_2d.shadow.basic.2.html ]]] -->
16192
16193 <p>Canvas test: 2d.shadow.basic.2</p>
16194 <canvas id="c511" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16195 <script>
16196
16197
16198 function test_2d_shadow_basic_2() {
16199
16200 var canvas = document.getElementById('c511');
16201 var ctx = canvas.getContext('2d');
16202
16203 ctx.fillStyle = '#0f0';
16204 ctx.fillRect(0, 0, 100, 50);
16205 ctx.fillStyle = '#f00';
16206 ctx.shadowColor = '#f00';
16207 ctx.fillRect(0, -50, 100, 50);
16208 isPixel(ctx, 50,25, 0,255,0,255, 0);
16209
16210
16211 }
16212 </script>
16213
16214 <!-- [[[ test_2d.shadow.blur.high.html ]]] -->
16215
16216 <p>Canvas test: 2d.shadow.blur.high</p>
16217 <canvas id="c512" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16218 <script>
16219
16220 function test_2d_shadow_blur_high() {
16221
16222 var canvas = document.getElementById('c512');
16223 var ctx = canvas.getContext('2d');
16224
16225 ctx.fillStyle = '#ff0';
16226 ctx.fillRect(0, 0, 100, 50);
16227 ctx.shadowColor = '#00f';
16228 ctx.shadowOffsetY = 0;
16229 ctx.shadowBlur = 555.6;
16230 ctx.fillRect(-200, -200, 200, 400);
16231
16232 todo(false, "test completed successfully"); // (Bug 483989)
16233
16234 }
16235
16236 </script>
16237 <!-- [[[ test_2d.shadow.blur.low.html ]]] -->
16238
16239 <p>Canvas test: 2d.shadow.blur.low</p>
16240 <canvas id="c513" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16241 <script>
16242
16243 function test_2d_shadow_blur_low() {
16244
16245 var canvas = document.getElementById('c513');
16246 var ctx = canvas.getContext('2d');
16247
16248 ctx.fillStyle = '#ff0';
16249 ctx.fillRect(0, 0, 100, 50);
16250 ctx.shadowColor = '#00f';
16251 ctx.shadowOffsetY = 25;
16252 for (var x = 0; x < 100; ++x) {
16253     ctx.save();
16254     ctx.beginPath();
16255     ctx.rect(x, 0, 1, 50);
16256     ctx.clip();
16257     ctx.shadowBlur = x;
16258     ctx.fillRect(-200, -200, 500, 200);
16259     ctx.restore();
16260 }
16261
16262 todo(false, "test completed successfully"); // (Bug 483989)
16263
16264 }
16265 </script>
16266 <!-- [[[ test_2d.shadow.canvas.alpha.html ]]] -->
16267
16268 <p>Canvas test: 2d.shadow.canvas.alpha</p>
16269 <canvas id="c514" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16270 <script>
16271
16272
16273
16274 function test_2d_shadow_canvas_alpha() {
16275
16276 var canvas = document.getElementById('c514');
16277 var ctx = canvas.getContext('2d');
16278
16279 var canvas2 = document.createElement('canvas');
16280 canvas2.width = 100;
16281 canvas2.height = 50;
16282 var ctx2 = canvas2.getContext('2d');
16283 ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)';
16284 ctx2.fillRect(0, 0, 100, 50);
16285
16286 ctx.fillStyle = '#f00';
16287 ctx.fillRect(0, 0, 100, 50);
16288 ctx.shadowOffsetY = 50;
16289 ctx.shadowColor = '#00f';
16290 ctx.drawImage(canvas2, 0, -50);
16291
16292 isPixel(ctx, 50,25, 127,0,127,255, 2);
16293
16294
16295 }
16296 </script>
16297 <img src="image_transparent50.png" id="transparent50_1.png" class="resource">
16298
16299 <!-- [[[ test_2d.shadow.canvas.basic.html ]]] -->
16300
16301 <p>Canvas test: 2d.shadow.canvas.basic</p>
16302 <canvas id="c515" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16303 <script>
16304
16305
16306
16307 function test_2d_shadow_canvas_basic() {
16308
16309 var canvas = document.getElementById('c515');
16310 var ctx = canvas.getContext('2d');
16311
16312 var canvas2 = document.createElement('canvas');
16313 canvas2.width = 100;
16314 canvas2.height = 50;
16315 var ctx2 = canvas2.getContext('2d');
16316 ctx2.fillStyle = '#f00';
16317 ctx2.fillRect(0, 0, 100, 50);
16318
16319 ctx.fillStyle = '#f00';
16320 ctx.fillRect(0, 0, 100, 50);
16321 ctx.shadowColor = '#0f0';
16322 ctx.shadowOffsetY = 50;
16323 ctx.drawImage(canvas2, 0, -50);
16324
16325 isPixel(ctx, 50,25, 0,255,0,255, 0);
16326
16327
16328 }
16329 </script>
16330
16331 <!-- [[[ test_2d.shadow.canvas.transparent.1.html ]]] -->
16332
16333 <p>Canvas test: 2d.shadow.canvas.transparent.1</p>
16334 <canvas id="c516" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16335 <script>
16336
16337
16338 function test_2d_shadow_canvas_transparent_1() {
16339
16340 var canvas = document.getElementById('c516');
16341 var ctx = canvas.getContext('2d');
16342
16343 var canvas2 = document.createElement('canvas');
16344 canvas2.width = 100;
16345 canvas2.height = 50;
16346 var ctx2 = canvas2.getContext('2d');
16347
16348 ctx.fillStyle = '#0f0';
16349 ctx.fillRect(0, 0, 100, 50);
16350 ctx.shadowColor = '#f00';
16351 ctx.shadowOffsetY = 50;
16352 ctx.drawImage(canvas2, 0, -50);
16353
16354 isPixel(ctx, 50,25, 0,255,0,255, 0);
16355
16356
16357 }
16358 </script>
16359
16360 <!-- [[[ test_2d.shadow.canvas.transparent.2.html ]]] -->
16361
16362 <p>Canvas test: 2d.shadow.canvas.transparent.2</p>
16363 <canvas id="c517" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16364 <script>
16365
16366
16367
16368 function test_2d_shadow_canvas_transparent_2() {
16369
16370 var canvas = document.getElementById('c517');
16371 var ctx = canvas.getContext('2d');
16372
16373 var canvas2 = document.createElement('canvas');
16374 canvas2.width = 100;
16375 canvas2.height = 50;
16376 var ctx2 = canvas2.getContext('2d');
16377 ctx2.fillStyle = '#f00';
16378 ctx2.fillRect(0, 0, 50, 50);
16379
16380 ctx.fillStyle = '#0f0';
16381 ctx.fillRect(0, 0, 50, 50);
16382 ctx.fillStyle = '#f00';
16383 ctx.fillRect(50, 0, 50, 50);
16384 ctx.shadowOffsetY = 50;
16385 ctx.shadowColor = '#0f0';
16386 ctx.drawImage(canvas2, 50, -50);
16387 ctx.shadowColor = '#f00';
16388 ctx.drawImage(canvas2, -50, -50);
16389
16390 isPixel(ctx, 25,25, 0,255,0,255, 0);
16391 isPixel(ctx, 50,25, 0,255,0,255, 0);
16392 isPixel(ctx, 75,25, 0,255,0,255, 0);
16393
16394
16395 }
16396 </script>
16397
16398 <!-- [[[ test_2d.shadow.clip.1.html ]]] -->
16399
16400 <p>Canvas test: 2d.shadow.clip.1</p>
16401 <canvas id="c518" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16402 <script>
16403
16404
16405
16406 function test_2d_shadow_clip_1() {
16407
16408 var canvas = document.getElementById('c518');
16409 var ctx = canvas.getContext('2d');
16410
16411 ctx.fillStyle = '#0f0';
16412 ctx.fillRect(0, 0, 50, 50);
16413 ctx.fillStyle = '#f00';
16414 ctx.fillRect(50, 0, 50, 50);
16415
16416 ctx.save();
16417 ctx.beginPath();
16418 ctx.rect(50, 0, 50, 50);
16419 ctx.clip();
16420 ctx.shadowColor = '#0f0';
16421 ctx.shadowOffsetX = 50;
16422 ctx.fillRect(0, 0, 50, 50);
16423 ctx.restore();
16424
16425 isPixel(ctx, 25,25, 0,255,0,255, 0);
16426 isPixel(ctx, 75,25, 0,255,0,255, 0);
16427
16428
16429 }
16430 </script>
16431
16432 <!-- [[[ test_2d.shadow.clip.2.html ]]] -->
16433
16434 <p>Canvas test: 2d.shadow.clip.2</p>
16435 <canvas id="c519" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16436 <script>
16437
16438
16439 function test_2d_shadow_clip_2() {
16440
16441 var canvas = document.getElementById('c519');
16442 var ctx = canvas.getContext('2d');
16443
16444 ctx.fillStyle = '#f00';
16445 ctx.fillRect(0, 0, 50, 50);
16446 ctx.fillStyle = '#0f0';
16447 ctx.fillRect(50, 0, 50, 50);
16448
16449 ctx.save();
16450 ctx.beginPath();
16451 ctx.rect(0, 0, 50, 50);
16452 ctx.clip();
16453 ctx.shadowColor = '#f00';
16454 ctx.shadowOffsetX = 50;
16455 ctx.fillRect(0, 0, 50, 50);
16456 ctx.restore();
16457
16458 isPixel(ctx, 25,25, 0,255,0,255, 0);
16459 isPixel(ctx, 75,25, 0,255,0,255, 0);
16460
16461
16462 }
16463 </script>
16464
16465 <!-- [[[ test_2d.shadow.clip.3.html ]]] -->
16466
16467 <p>Canvas test: 2d.shadow.clip.3</p>
16468 <canvas id="c520" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16469 <script>
16470
16471
16472
16473 function test_2d_shadow_clip_3() {
16474
16475 var canvas = document.getElementById('c520');
16476 var ctx = canvas.getContext('2d');
16477
16478 ctx.fillStyle = '#f00';
16479 ctx.fillRect(0, 0, 50, 50);
16480 ctx.fillStyle = '#0f0';
16481 ctx.fillRect(50, 0, 50, 50);
16482
16483 ctx.save();
16484 ctx.beginPath();
16485 ctx.rect(0, 0, 50, 50);
16486 ctx.clip();
16487 ctx.fillStyle = '#f00';
16488 ctx.shadowColor = '#0f0';
16489 ctx.shadowOffsetX = 50;
16490 ctx.fillRect(-50, 0, 50, 50);
16491 ctx.restore();
16492
16493 isPixel(ctx, 25,25, 0,255,0,255, 0);
16494 isPixel(ctx, 75,25, 0,255,0,255, 0);
16495
16496
16497 }
16498 </script>
16499
16500 <!-- [[[ test_2d.shadow.composite.1.html ]]] -->
16501
16502 <p>Canvas test: 2d.shadow.composite.1</p>
16503 <canvas id="c521" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16504 <script>
16505
16506
16507
16508 function test_2d_shadow_composite_1() {
16509
16510 var canvas = document.getElementById('c521');
16511 var ctx = canvas.getContext('2d');
16512
16513 ctx.fillStyle = '#f00';
16514 ctx.fillRect(0, 0, 100, 50);
16515 ctx.globalCompositeOperation = 'xor';
16516 ctx.shadowColor = '#f00';
16517 ctx.shadowOffsetX = 100;
16518 ctx.fillStyle = '#0f0';
16519 ctx.fillRect(-100, 0, 200, 50);
16520
16521 isPixel(ctx, 50, 25, 0, 255, 0, 255, 2);
16522
16523 }
16524 </script>
16525
16526 <!-- [[[ test_2d.shadow.composite.2.html ]]] -->
16527
16528 <p>Canvas test: 2d.shadow.composite.2</p>
16529 <canvas id="c522" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16530 <script>
16531
16532
16533
16534 function test_2d_shadow_composite_2() {
16535
16536 var canvas = document.getElementById('c522');
16537 var ctx = canvas.getContext('2d');
16538
16539 ctx.fillStyle = '#f00';
16540 ctx.fillRect(0, 0, 100, 50);
16541 ctx.globalCompositeOperation = 'xor';
16542 ctx.shadowColor = '#f00';
16543 ctx.shadowBlur = 1;
16544 ctx.fillStyle = '#0f0';
16545 ctx.fillRect(-10, -10, 120, 70);
16546
16547 isPixel(ctx, 50, 25, 0, 255, 0, 255, 2);
16548
16549 }
16550 </script>
16551
16552 <!-- [[[ test_2d.shadow.composite.3.html ]]] -->
16553
16554 <p>Canvas test: 2d.shadow.composite.3</p>
16555 <canvas id="c523" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16556 <script>
16557
16558
16559
16560 function test_2d_shadow_composite_3() {
16561
16562 var canvas = document.getElementById('c523');
16563 var ctx = canvas.getContext('2d');
16564
16565 ctx.fillStyle = '#f00';
16566 ctx.fillRect(0, 0, 100, 50);
16567 ctx.globalCompositeOperation = 'xor';
16568 ctx.shadowColor = '#f00';
16569 ctx.fillStyle = '#0f0';
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.composite.4.html ]]] -->
16579
16580 <p>Canvas test: 2d.shadow.composite.4</p>
16581 <canvas id="c524" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16582 <script>
16583
16584
16585
16586 function test_2d_shadow_composite_4() {
16587
16588 var canvas = document.getElementById('c524');
16589 var ctx = canvas.getContext('2d');
16590
16591 ctx.globalCompositeOperation = 'destination-over';
16592 ctx.shadowColor = '#0f0';
16593 ctx.fillStyle = '#f00';
16594 ctx.fillRect(0, 0, 100, 50);
16595
16596 isPixel(ctx, 50,25, 0,255,0,255, 2);
16597
16598
16599 }
16600 </script>
16601
16602 <!-- [[[ test_2d.shadow.gradient.alpha.html ]]] -->
16603
16604 <p>Canvas test: 2d.shadow.gradient.alpha</p>
16605 <canvas id="c525" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16606 <script>
16607
16608
16609
16610 function test_2d_shadow_gradient_alpha() {
16611
16612 var canvas = document.getElementById('c525');
16613 var ctx = canvas.getContext('2d');
16614
16615 var gradient = ctx.createLinearGradient(0, 0, 100, 0);
16616 gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
16617 gradient.addColorStop(1, 'rgba(255,0,0,0.5)');
16618 ctx.fillStyle = '#f00';
16619 ctx.fillRect(0, 0, 100, 50);
16620 ctx.shadowOffsetY = 50;
16621 ctx.shadowColor = '#00f';
16622 ctx.fillStyle = gradient;
16623 ctx.fillRect(0, -50, 100, 50);
16624
16625 isPixel(ctx, 50,25, 127,0,127,255, 2);
16626
16627
16628 }
16629 </script>
16630
16631 <!-- [[[ test_2d.shadow.gradient.basic.html ]]] -->
16632
16633 <p>Canvas test: 2d.shadow.gradient.basic</p>
16634 <canvas id="c526" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16635 <script>
16636
16637
16638
16639 function test_2d_shadow_gradient_basic() {
16640
16641 var canvas = document.getElementById('c526');
16642 var ctx = canvas.getContext('2d');
16643
16644 var gradient = ctx.createLinearGradient(0, 0, 100, 0);
16645 gradient.addColorStop(0, '#f00');
16646 gradient.addColorStop(1, '#f00');
16647 ctx.fillStyle = '#f00';
16648 ctx.fillRect(0, 0, 100, 50);
16649 ctx.shadowColor = '#0f0';
16650 ctx.shadowOffsetY = 50;
16651 ctx.fillStyle = gradient;
16652 ctx.fillRect(0, -50, 100, 50);
16653
16654 isPixel(ctx, 50,25, 0,255,0,255, 0);
16655
16656
16657 }
16658 </script>
16659
16660 <!-- [[[ test_2d.shadow.gradient.transparent.1.html ]]] -->
16661
16662 <p>Canvas test: 2d.shadow.gradient.transparent.1</p>
16663 <canvas id="c527" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16664 <script>
16665
16666
16667 function test_2d_shadow_gradient_transparent_1() {
16668
16669 var canvas = document.getElementById('c527');
16670 var ctx = canvas.getContext('2d');
16671
16672 var gradient = ctx.createLinearGradient(0, 0, 100, 0);
16673 gradient.addColorStop(0, 'rgba(0,0,0,0)');
16674 gradient.addColorStop(1, 'rgba(0,0,0,0)');
16675 ctx.fillStyle = '#0f0';
16676 ctx.fillRect(0, 0, 100, 50);
16677 ctx.shadowColor = '#f00';
16678 ctx.shadowOffsetY = 50;
16679 ctx.fillStyle = gradient;
16680 ctx.fillRect(0, -50, 100, 50);
16681
16682 isPixel(ctx, 50,25, 0,255,0,255, 0);
16683
16684
16685 }
16686 </script>
16687
16688 <!-- [[[ test_2d.shadow.gradient.transparent.2.html ]]] -->
16689
16690 <p>Canvas test: 2d.shadow.gradient.transparent.2</p>
16691 <canvas id="c528" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16692 <script>
16693
16694
16695
16696 function test_2d_shadow_gradient_transparent_2() {
16697
16698 var canvas = document.getElementById('c528');
16699 var ctx = canvas.getContext('2d');
16700
16701 var gradient = ctx.createLinearGradient(0, 0, 100, 0);
16702 gradient.addColorStop(0, '#f00');
16703 gradient.addColorStop(0.499, '#f00');
16704 gradient.addColorStop(0.5, 'rgba(0,0,0,0)');
16705 gradient.addColorStop(1, 'rgba(0,0,0,0)');
16706 ctx.fillStyle = '#f00';
16707 ctx.fillRect(0, 0, 50, 50);
16708 ctx.fillStyle = '#0f0';
16709 ctx.fillRect(50, 0, 50, 50);
16710 ctx.shadowOffsetY = 50;
16711 ctx.shadowColor = '#0f0';
16712 ctx.fillStyle = gradient;
16713 ctx.fillRect(0, -50, 100, 50);
16714
16715 isPixel(ctx, 25,25, 0,255,0,255, 0);
16716 isPixel(ctx, 50,25, 0,255,0,255, 0);
16717 isPixel(ctx, 75,25, 0,255,0,255, 0);
16718
16719
16720 }
16721 </script>
16722
16723 <!-- [[[ test_2d.shadow.image.alpha.html ]]] -->
16724
16725 <p>Canvas test: 2d.shadow.image.alpha</p>
16726 <canvas id="c529" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16727 <script>
16728
16729
16730
16731 function test_2d_shadow_image_alpha() {
16732
16733 var canvas = document.getElementById('c529');
16734 var ctx = canvas.getContext('2d');
16735
16736 ctx.fillStyle = '#f00';
16737 ctx.fillRect(0, 0, 100, 50);
16738 ctx.shadowOffsetY = 50;
16739 ctx.shadowColor = '#00f';
16740 ctx.drawImage(document.getElementById('transparent50_2.png'), 0, -50);
16741
16742 isPixel(ctx, 50,25, 127,0,127,255, 2);
16743
16744
16745 }
16746 </script>
16747 <img src="image_transparent50.png" id="transparent50_2.png" class="resource">
16748
16749 <!-- [[[ test_2d.shadow.image.basic.html ]]] -->
16750
16751 <p>Canvas test: 2d.shadow.image.basic</p>
16752 <canvas id="c530" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16753 <script>
16754
16755
16756
16757 function test_2d_shadow_image_basic() {
16758
16759 var canvas = document.getElementById('c530');
16760 var ctx = canvas.getContext('2d');
16761
16762 ctx.fillStyle = '#f00';
16763 ctx.fillRect(0, 0, 100, 50);
16764 ctx.shadowColor = '#0f0';
16765 ctx.shadowOffsetY = 50;
16766 ctx.drawImage(document.getElementById('red_17.png'), 0, -50);
16767
16768 isPixel(ctx, 50,25, 0,255,0,255, 0);
16769
16770
16771 }
16772 </script>
16773 <img src="image_red.png" id="red_17.png" class="resource">
16774
16775 <!-- [[[ test_2d.shadow.image.scale.html ]]] -->
16776
16777 <p>Canvas test: 2d.shadow.image.scale</p>
16778 <canvas id="c531" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16779 <script>
16780
16781
16782
16783 function test_2d_shadow_image_scale() {
16784
16785 var canvas = document.getElementById('c531');
16786 var ctx = canvas.getContext('2d');
16787
16788 ctx.fillStyle = '#f00';
16789 ctx.fillRect(0, 0, 100, 50);
16790 ctx.shadowOffsetY = 50;
16791 ctx.shadowColor = '#0f0';
16792 ctx.drawImage(document.getElementById('redtransparent_2.png'), 0, 0, 100, 50, -10, -50, 240, 50);
16793
16794 isPixel(ctx, 25,25, 0,255,0,255, 2);
16795 isPixel(ctx, 50,25, 0,255,0,255, 2);
16796 isPixel(ctx, 75,25, 0,255,0,255, 2);
16797
16798
16799 }
16800 </script>
16801 <img src="image_redtransparent.png" id="redtransparent_2.png" class="resource">
16802
16803 <!-- [[[ test_2d.shadow.image.section.html ]]] -->
16804
16805 <p>Canvas test: 2d.shadow.image.section</p>
16806 <canvas id="c532" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16807 <script>
16808
16809
16810 function test_2d_shadow_image_section() {
16811
16812 var canvas = document.getElementById('c532');
16813 var ctx = canvas.getContext('2d');
16814
16815 ctx.fillStyle = '#0f0';
16816 ctx.fillRect(0, 0, 100, 50);
16817 ctx.shadowOffsetY = 50;
16818 ctx.shadowColor = '#f00';
16819 ctx.drawImage(document.getElementById('redtransparent_3.png'), 50, 0, 50, 50, 0, -50, 50, 50);
16820
16821 isPixel(ctx, 25,25, 0,255,0,255, 2);
16822 isPixel(ctx, 50,25, 0,255,0,255, 2);
16823 isPixel(ctx, 75,25, 0,255,0,255, 2);
16824
16825
16826 }
16827 </script>
16828 <img src="image_redtransparent.png" id="redtransparent_3.png" class="resource">
16829
16830 <!-- [[[ test_2d.shadow.image.transparent.1.html ]]] -->
16831
16832 <p>Canvas test: 2d.shadow.image.transparent.1</p>
16833 <canvas id="c533" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16834 <script>
16835
16836
16837 function test_2d_shadow_image_transparent_1() {
16838
16839 var canvas = document.getElementById('c533');
16840 var ctx = canvas.getContext('2d');
16841
16842 ctx.fillStyle = '#0f0';
16843 ctx.fillRect(0, 0, 100, 50);
16844 ctx.shadowColor = '#f00';
16845 ctx.shadowOffsetY = 50;
16846 ctx.drawImage(document.getElementById('transparent_1.png'), 0, -50);
16847
16848 isPixel(ctx, 50,25, 0,255,0,255, 0);
16849
16850
16851 }
16852 </script>
16853 <img src="image_transparent.png" id="transparent_1.png" class="resource">
16854
16855 <!-- [[[ test_2d.shadow.image.transparent.2.html ]]] -->
16856
16857 <p>Canvas test: 2d.shadow.image.transparent.2</p>
16858 <canvas id="c534" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16859 <script>
16860
16861
16862
16863 function test_2d_shadow_image_transparent_2() {
16864
16865 var canvas = document.getElementById('c534');
16866 var ctx = canvas.getContext('2d');
16867
16868 ctx.fillStyle = '#0f0';
16869 ctx.fillRect(0, 0, 50, 50);
16870 ctx.fillStyle = '#f00';
16871 ctx.fillRect(50, 0, 50, 50);
16872 ctx.shadowOffsetY = 50;
16873 ctx.shadowColor = '#0f0';
16874 ctx.drawImage(document.getElementById('redtransparent_4.png'), 50, -50);
16875 ctx.shadowColor = '#f00';
16876 ctx.drawImage(document.getElementById('redtransparent_4.png'), -50, -50);
16877
16878 isPixel(ctx, 25,25, 0,255,0,255, 0);
16879 isPixel(ctx, 50,25, 0,255,0,255, 0);
16880 isPixel(ctx, 75,25, 0,255,0,255, 0);
16881
16882
16883 }
16884 </script>
16885 <img src="image_redtransparent.png" id="redtransparent_4.png" class="resource">
16886
16887 <!-- [[[ test_2d.shadow.offset.negativeX.html ]]] -->
16888
16889 <p>Canvas test: 2d.shadow.offset.negativeX</p>
16890 <canvas id="c535" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16891 <script>
16892
16893
16894
16895 function test_2d_shadow_offset_negativeX() {
16896
16897 var canvas = document.getElementById('c535');
16898 var ctx = canvas.getContext('2d');
16899
16900 ctx.fillStyle = '#f00';
16901 ctx.fillRect(0, 0, 100, 50);
16902 ctx.fillStyle = '#0f0';
16903 ctx.shadowColor = '#0f0';
16904 ctx.shadowOffsetX = -50;
16905 ctx.fillRect(50, 0, 50, 50);
16906 isPixel(ctx, 25,25, 0,255,0,255, 0);
16907 isPixel(ctx, 75,25, 0,255,0,255, 0);
16908
16909
16910 }
16911 </script>
16912
16913 <!-- [[[ test_2d.shadow.offset.negativeY.html ]]] -->
16914
16915 <p>Canvas test: 2d.shadow.offset.negativeY</p>
16916 <canvas id="c536" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16917 <script>
16918
16919
16920
16921 function test_2d_shadow_offset_negativeY() {
16922
16923 var canvas = document.getElementById('c536');
16924 var ctx = canvas.getContext('2d');
16925
16926 ctx.fillStyle = '#f00';
16927 ctx.fillRect(0, 0, 100, 50);
16928 ctx.fillStyle = '#0f0';
16929 ctx.shadowColor = '#0f0';
16930 ctx.shadowOffsetY = -25;
16931 ctx.fillRect(0, 25, 100, 25);
16932 isPixel(ctx, 50,12, 0,255,0,255, 0);
16933 isPixel(ctx, 50,37, 0,255,0,255, 0);
16934
16935
16936 }
16937 </script>
16938
16939 <!-- [[[ test_2d.shadow.offset.positiveX.html ]]] -->
16940
16941 <p>Canvas test: 2d.shadow.offset.positiveX</p>
16942 <canvas id="c537" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16943 <script>
16944
16945
16946
16947 function test_2d_shadow_offset_positiveX() {
16948
16949 var canvas = document.getElementById('c537');
16950 var ctx = canvas.getContext('2d');
16951
16952 ctx.fillStyle = '#f00';
16953 ctx.fillRect(0, 0, 100, 50);
16954 ctx.fillStyle = '#0f0';
16955 ctx.shadowColor = '#0f0';
16956 ctx.shadowOffsetX = 50;
16957 ctx.fillRect(0, 0, 50, 50);
16958 isPixel(ctx, 25,25, 0,255,0,255, 0);
16959 isPixel(ctx, 75,25, 0,255,0,255, 0);
16960
16961
16962 }
16963 </script>
16964
16965 <!-- [[[ test_2d.shadow.offset.positiveY.html ]]] -->
16966
16967 <p>Canvas test: 2d.shadow.offset.positiveY</p>
16968 <canvas id="c538" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16969 <script>
16970
16971
16972
16973 function test_2d_shadow_offset_positiveY() {
16974
16975 var canvas = document.getElementById('c538');
16976 var ctx = canvas.getContext('2d');
16977
16978 ctx.fillStyle = '#f00';
16979 ctx.fillRect(0, 0, 100, 50);
16980 ctx.fillStyle = '#0f0';
16981 ctx.shadowColor = '#0f0';
16982 ctx.shadowOffsetY = 25;
16983 ctx.fillRect(0, 0, 100, 25);
16984 isPixel(ctx, 50,12, 0,255,0,255, 0);
16985 isPixel(ctx, 50,37, 0,255,0,255, 0);
16986
16987
16988 }
16989 </script>
16990
16991 <!-- [[[ test_2d.shadow.outside.html ]]] -->
16992
16993 <p>Canvas test: 2d.shadow.outside</p>
16994 <canvas id="c539" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
16995 <script>
16996
16997
16998
16999 function test_2d_shadow_outside() {
17000
17001 var canvas = document.getElementById('c539');
17002 var ctx = canvas.getContext('2d');
17003
17004 ctx.fillStyle = '#f00';
17005 ctx.fillRect(0, 0, 100, 50);
17006 ctx.shadowColor = '#0f0';
17007 ctx.shadowOffsetX = 100;
17008 ctx.fillRect(-100, 0, 25, 50);
17009 ctx.shadowOffsetX = -100;
17010 ctx.fillRect(175, 0, 25, 50);
17011 ctx.shadowOffsetX = 0;
17012 ctx.shadowOffsetY = 100;
17013 ctx.fillRect(25, -100, 50, 25);
17014 ctx.shadowOffsetY = -100;
17015 ctx.fillRect(25, 125, 50, 25);
17016 isPixel(ctx, 12,25, 0,255,0,255, 0);
17017 isPixel(ctx, 87,25, 0,255,0,255, 0);
17018 isPixel(ctx, 50,12, 0,255,0,255, 0);
17019 isPixel(ctx, 50,37, 0,255,0,255, 0);
17020
17021
17022 }
17023 </script>
17024
17025 <!-- [[[ test_2d.shadow.pattern.alpha.html ]]] -->
17026
17027 <p>Canvas test: 2d.shadow.pattern.alpha</p>
17028 <canvas id="c540" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17029 <script>
17030
17031
17032
17033 function test_2d_shadow_pattern_alpha() {
17034
17035 var canvas = document.getElementById('c540');
17036 var ctx = canvas.getContext('2d');
17037
17038 var pattern = ctx.createPattern(document.getElementById('transparent50_3.png'), 'repeat');
17039 ctx.fillStyle = '#f00';
17040 ctx.fillRect(0, 0, 100, 50);
17041 ctx.shadowOffsetY = 50;
17042 ctx.shadowColor = '#00f';
17043 ctx.fillStyle = pattern;
17044 ctx.fillRect(0, -50, 100, 50);
17045
17046 isPixel(ctx, 50,25, 127,0,127,255, 2);
17047
17048
17049 }
17050 </script>
17051 <img src="image_transparent50.png" id="transparent50_3.png" class="resource">
17052
17053 <!-- [[[ test_2d.shadow.pattern.basic.html ]]] -->
17054
17055 <p>Canvas test: 2d.shadow.pattern.basic</p>
17056 <canvas id="c541" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17057 <script>
17058
17059
17060
17061 function test_2d_shadow_pattern_basic() {
17062
17063 var canvas = document.getElementById('c541');
17064 var ctx = canvas.getContext('2d');
17065
17066 var pattern = ctx.createPattern(document.getElementById('red_18.png'), 'repeat');
17067 ctx.fillStyle = '#f00';
17068 ctx.fillRect(0, 0, 100, 50);
17069 ctx.shadowColor = '#0f0';
17070 ctx.shadowOffsetY = 50;
17071 ctx.fillStyle = pattern;
17072 ctx.fillRect(0, -50, 100, 50);
17073
17074 isPixel(ctx, 50,25, 0,255,0,255, 0);
17075
17076
17077 }
17078 </script>
17079 <img src="image_red.png" id="red_18.png" class="resource">
17080
17081 <!-- [[[ test_2d.shadow.pattern.transparent.1.html ]]] -->
17082
17083 <p>Canvas test: 2d.shadow.pattern.transparent.1</p>
17084 <canvas id="c542" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17085 <script>
17086
17087
17088 function test_2d_shadow_pattern_transparent_1() {
17089
17090 var canvas = document.getElementById('c542');
17091 var ctx = canvas.getContext('2d');
17092
17093 var pattern = ctx.createPattern(document.getElementById('transparent_2.png'), 'repeat');
17094 ctx.fillStyle = '#0f0';
17095 ctx.fillRect(0, 0, 100, 50);
17096 ctx.shadowColor = '#f00';
17097 ctx.shadowOffsetY = 50;
17098 ctx.fillStyle = pattern;
17099 ctx.fillRect(0, -50, 100, 50);
17100
17101 isPixel(ctx, 50,25, 0,255,0,255, 0);
17102
17103
17104 }
17105 </script>
17106 <img src="image_transparent.png" id="transparent_2.png" class="resource">
17107
17108 <!-- [[[ test_2d.shadow.pattern.transparent.2.html ]]] -->
17109
17110 <p>Canvas test: 2d.shadow.pattern.transparent.2</p>
17111 <canvas id="c543" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17112 <script>
17113
17114
17115
17116 function test_2d_shadow_pattern_transparent_2() {
17117
17118 var canvas = document.getElementById('c543');
17119 var ctx = canvas.getContext('2d');
17120
17121 var pattern = ctx.createPattern(document.getElementById('redtransparent_5.png'), 'repeat');
17122 ctx.fillStyle = '#f00';
17123 ctx.fillRect(0, 0, 50, 50);
17124 ctx.fillStyle = '#0f0';
17125 ctx.fillRect(50, 0, 50, 50);
17126 ctx.shadowOffsetY = 50;
17127 ctx.shadowColor = '#0f0';
17128 ctx.fillStyle = pattern;
17129 ctx.fillRect(0, -50, 100, 50);
17130
17131 isPixel(ctx, 25,25, 0,255,0,255, 0);
17132 isPixel(ctx, 50,25, 0,255,0,255, 0);
17133 isPixel(ctx, 75,25, 0,255,0,255, 0);
17134
17135
17136 }
17137 </script>
17138 <img src="image_redtransparent.png" id="redtransparent_5.png" class="resource">
17139
17140 <!-- [[[ test_2d.shadow.stroke.basic.html ]]] -->
17141
17142 <p>Canvas test: 2d.shadow.stroke.basic</p>
17143 <canvas id="c544" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17144 <script>
17145
17146
17147
17148 function test_2d_shadow_stroke_basic() {
17149
17150 var canvas = document.getElementById('c544');
17151 var ctx = canvas.getContext('2d');
17152
17153 ctx.fillStyle = '#f00';
17154 ctx.fillRect(0, 0, 100, 50);
17155 ctx.strokeStyle = '#f00';
17156 ctx.shadowColor = '#0f0';
17157 ctx.shadowOffsetY = 50;
17158 ctx.beginPath();
17159 ctx.lineWidth = 50;
17160 ctx.moveTo(0, -25);
17161 ctx.lineTo(100, -25);
17162 ctx.stroke();
17163
17164 isPixel(ctx, 1,25, 0,255,0,255, 0);
17165 isPixel(ctx, 50,25, 0,255,0,255, 0);
17166 isPixel(ctx, 98,25, 0,255,0,255, 0);
17167
17168
17169 }
17170 </script>
17171
17172 <!-- [[[ test_2d.shadow.stroke.cap.1.html ]]] -->
17173
17174 <p>Canvas test: 2d.shadow.stroke.cap.1</p>
17175 <canvas id="c545" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17176 <script>
17177
17178
17179 function test_2d_shadow_stroke_cap_1() {
17180
17181 var canvas = document.getElementById('c545');
17182 var ctx = canvas.getContext('2d');
17183
17184 ctx.fillStyle = '#0f0';
17185 ctx.fillRect(0, 0, 100, 50);
17186 ctx.strokeStyle = '#f00';
17187 ctx.shadowColor = '#f00';
17188 ctx.shadowOffsetY = 50;
17189 ctx.beginPath();
17190 ctx.lineWidth = 50;
17191 ctx.lineCap = 'butt';
17192 ctx.moveTo(-50, -25);
17193 ctx.lineTo(0, -25);
17194 ctx.moveTo(100, -25);
17195 ctx.lineTo(150, -25);
17196 ctx.stroke();
17197
17198 isPixel(ctx, 1,25, 0,255,0,255, 0);
17199 isPixel(ctx, 50,25, 0,255,0,255, 0);
17200 isPixel(ctx, 98,25, 0,255,0,255, 0);
17201
17202
17203 }
17204 </script>
17205
17206 <!-- [[[ test_2d.shadow.stroke.cap.2.html ]]] -->
17207
17208 <p>Canvas test: 2d.shadow.stroke.cap.2</p>
17209 <canvas id="c546" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17210 <script>
17211
17212
17213
17214 function test_2d_shadow_stroke_cap_2() {
17215
17216 var canvas = document.getElementById('c546');
17217 var ctx = canvas.getContext('2d');
17218
17219 ctx.fillStyle = '#f00';
17220 ctx.fillRect(0, 0, 100, 50);
17221 ctx.strokeStyle = '#f00';
17222 ctx.shadowColor = '#0f0';
17223 ctx.shadowOffsetY = 50;
17224 ctx.beginPath();
17225 ctx.lineWidth = 50;
17226 ctx.lineCap = 'square';
17227 ctx.moveTo(25, -25);
17228 ctx.lineTo(75, -25);
17229 ctx.stroke();
17230
17231 isPixel(ctx, 1,25, 0,255,0,255, 0);
17232 isPixel(ctx, 50,25, 0,255,0,255, 0);
17233 isPixel(ctx, 98,25, 0,255,0,255, 0);
17234
17235
17236 }
17237 </script>
17238
17239 <!-- [[[ test_2d.shadow.stroke.join.1.html ]]] -->
17240
17241 <p>Canvas test: 2d.shadow.stroke.join.1</p>
17242 <canvas id="c547" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17243 <script>
17244
17245
17246 function test_2d_shadow_stroke_join_1() {
17247
17248 var canvas = document.getElementById('c547');
17249 var ctx = canvas.getContext('2d');
17250
17251 ctx.fillStyle = '#0f0';
17252 ctx.fillRect(0, 0, 100, 50);
17253 ctx.strokeStyle = '#f00';
17254 ctx.shadowColor = '#f00';
17255 ctx.shadowOffsetX = 100;
17256 ctx.lineWidth = 200;
17257 ctx.lineJoin = 'bevel';
17258 ctx.beginPath();
17259 ctx.moveTo(-200, -50);
17260 ctx.lineTo(-150, -50);
17261 ctx.lineTo(-151, -100);
17262 ctx.stroke();
17263
17264 isPixel(ctx, 1,1, 0,255,0,255, 0);
17265 isPixel(ctx, 48,48, 0,255,0,255, 0);
17266 isPixel(ctx, 50,25, 0,255,0,255, 0);
17267 isPixel(ctx, 98,48, 0,255,0,255, 0);
17268
17269
17270 }
17271 </script>
17272
17273 <!-- [[[ test_2d.shadow.stroke.join.2.html ]]] -->
17274
17275 <p>Canvas test: 2d.shadow.stroke.join.2</p>
17276 <canvas id="c548" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17277 <script>
17278
17279
17280
17281 function test_2d_shadow_stroke_join_2() {
17282
17283 var canvas = document.getElementById('c548');
17284 var ctx = canvas.getContext('2d');
17285
17286 ctx.fillStyle = '#f00';
17287 ctx.fillRect(0, 0, 50, 50);
17288 ctx.fillStyle = '#0f0';
17289 ctx.fillRect(50, 0, 50, 50);
17290 ctx.strokeStyle = '#f00';
17291 ctx.shadowColor = '#0f0';
17292 ctx.shadowOffsetX = 100;
17293 ctx.lineWidth = 200;
17294 ctx.lineJoin = 'miter';
17295 ctx.beginPath();
17296 ctx.moveTo(-200, -50);
17297 ctx.lineTo(-150, -50);
17298 ctx.lineTo(-151, -100);
17299 ctx.stroke();
17300
17301 isPixel(ctx, 1,1, 0,255,0,255, 0);
17302 isPixel(ctx, 48,48, 0,255,0,255, 0);
17303 isPixel(ctx, 50,25, 0,255,0,255, 0);
17304 isPixel(ctx, 98,48, 0,255,0,255, 0);
17305
17306
17307 }
17308 </script>
17309
17310 <!-- [[[ test_2d.shadow.stroke.join.3.html ]]] -->
17311
17312 <p>Canvas test: 2d.shadow.stroke.join.3</p>
17313 <canvas id="c549" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17314 <script>
17315
17316
17317 function test_2d_shadow_stroke_join_3() {
17318
17319 var canvas = document.getElementById('c549');
17320 var ctx = canvas.getContext('2d');
17321
17322 ctx.fillStyle = '#0f0';
17323 ctx.fillRect(0, 0, 100, 50);
17324 ctx.strokeStyle = '#f00';
17325 ctx.shadowColor = '#f00';
17326 ctx.shadowOffsetX = 100;
17327 ctx.lineWidth = 200;
17328 ctx.lineJoin = 'miter';
17329 ctx.miterLimit = 0.1;
17330 ctx.beginPath();
17331 ctx.moveTo(-200, -50);
17332 ctx.lineTo(-150, -50);
17333 ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3)
17334 ctx.stroke();
17335
17336 isPixel(ctx, 1,1, 0,255,0,255, 0);
17337 isPixel(ctx, 48,48, 0,255,0,255, 0);
17338 isPixel(ctx, 50,25, 0,255,0,255, 0);
17339 isPixel(ctx, 98,48, 0,255,0,255, 0);
17340
17341
17342 }
17343 </script>
17344
17345 <!-- [[[ test_2d.shadow.transform.1.html ]]] -->
17346
17347 <p>Canvas test: 2d.shadow.transform.1</p>
17348 <canvas id="c550" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17349 <script>
17350
17351
17352
17353 function test_2d_shadow_transform_1() {
17354
17355 var canvas = document.getElementById('c550');
17356 var ctx = canvas.getContext('2d');
17357
17358 ctx.fillStyle = '#f00';
17359 ctx.fillRect(0, 0, 100, 50);
17360 ctx.shadowOffsetY = 50;
17361 ctx.shadowColor = '#0f0';
17362 ctx.translate(100, 100);
17363 ctx.fillRect(-100, -150, 100, 50);
17364
17365 isPixel(ctx, 50,25, 0,255,0,255, 0);
17366
17367
17368 }
17369 </script>
17370
17371 <!-- [[[ test_2d.shadow.transform.2.html ]]] -->
17372
17373 <p>Canvas test: 2d.shadow.transform.2</p>
17374 <canvas id="c551" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17375 <script>
17376
17377
17378
17379 function test_2d_shadow_transform_2() {
17380
17381 var canvas = document.getElementById('c551');
17382 var ctx = canvas.getContext('2d');
17383
17384 ctx.fillStyle = '#f00';
17385 ctx.fillRect(0, 0, 100, 50);
17386 ctx.shadowOffsetY = 50;
17387 ctx.shadowColor = '#0f0';
17388 ctx.rotate(Math.PI)
17389 ctx.fillRect(-100, 0, 100, 50);
17390
17391 isPixel(ctx, 50,25, 0,255,0,255, 0);
17392
17393
17394 }
17395 </script>
17396
17397 <!-- [[[ test_2d.state.saverestore.bitmap.html ]]] -->
17398
17399 <p>Canvas test: 2d.state.saverestore.bitmap</p>
17400 <!-- Testing: save()/restore() does not affect the current bitmap -->
17401 <canvas id="c552" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17402 <script>
17403
17404
17405 function test_2d_state_saverestore_bitmap() {
17406
17407 var canvas = document.getElementById('c552');
17408 var ctx = canvas.getContext('2d');
17409
17410 ctx.fillStyle = '#f00';
17411 ctx.fillRect(0, 0, 100, 50);
17412 ctx.save();
17413 ctx.fillStyle = '#0f0';
17414 ctx.fillRect(0, 0, 100, 50);
17415 ctx.restore();
17416 isPixel(ctx, 50,25, 0,255,0,255, 0);
17417
17418
17419 }
17420 </script>
17421
17422 <!-- [[[ test_2d.state.saverestore.clip.html ]]] -->
17423
17424 <p>Canvas test: 2d.state.saverestore.clip</p>
17425 <!-- Testing: save()/restore() affects the clipping path -->
17426 <canvas id="c553" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17427 <script>
17428
17429
17430 function test_2d_state_saverestore_clip() {
17431
17432 var canvas = document.getElementById('c553');
17433 var ctx = canvas.getContext('2d');
17434
17435 ctx.fillStyle = '#f00';
17436 ctx.fillRect(0, 0, 100, 50);
17437 ctx.save();
17438 ctx.rect(0, 0, 1, 1);
17439 ctx.clip();
17440 ctx.restore();
17441 ctx.fillStyle = '#0f0';
17442 ctx.fillRect(0, 0, 100, 50);
17443 isPixel(ctx, 50,25, 0,255,0,255, 0);
17444
17445
17446 }
17447 </script>
17448
17449 <!-- [[[ test_2d.state.saverestore.fillStyle.html ]]] -->
17450
17451 <p>Canvas test: 2d.state.saverestore.fillStyle</p>
17452 <!-- Testing: save()/restore() works for fillStyle -->
17453 <canvas id="c554" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17454 <script>
17455
17456 function test_2d_state_saverestore_fillStyle() {
17457
17458 var canvas = document.getElementById('c554');
17459 var ctx = canvas.getContext('2d');
17460
17461 // Test that restore() undoes any modifications
17462 var old = ctx.fillStyle;
17463 ctx.save();
17464 ctx.fillStyle = "#ff0000";
17465 ctx.restore();
17466 ok(ctx.fillStyle === old, "ctx.fillStyle === old");
17467
17468 // Also test that save() doesn't modify the values
17469 ctx.fillStyle = "#ff0000";
17470 old = ctx.fillStyle;
17471     // we're not interested in failures caused by get(set(x)) != x (e.g.
17472     // from rounding), so compare against d instead of against "#ff0000"
17473 ctx.save();
17474 ok(ctx.fillStyle === old, "ctx.fillStyle === old");
17475 ctx.restore();
17476
17477
17478 }
17479 </script>
17480
17481 <!-- [[[ test_2d.state.saverestore.globalAlpha.html ]]] -->
17482
17483 <p>Canvas test: 2d.state.saverestore.globalAlpha</p>
17484 <!-- Testing: save()/restore() works for globalAlpha -->
17485 <canvas id="c555" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17486 <script>
17487
17488 function test_2d_state_saverestore_globalAlpha() {
17489
17490 var canvas = document.getElementById('c555');
17491 var ctx = canvas.getContext('2d');
17492
17493 // Test that restore() undoes any modifications
17494 var old = ctx.globalAlpha;
17495 ctx.save();
17496 ctx.globalAlpha = 0.5;
17497 ctx.restore();
17498 ok(ctx.globalAlpha === old, "ctx.globalAlpha === old");
17499
17500 // Also test that save() doesn't modify the values
17501 ctx.globalAlpha = 0.5;
17502 old = ctx.globalAlpha;
17503     // we're not interested in failures caused by get(set(x)) != x (e.g.
17504     // from rounding), so compare against d instead of against 0.5
17505 ctx.save();
17506 ok(ctx.globalAlpha === old, "ctx.globalAlpha === old");
17507 ctx.restore();
17508
17509
17510 }
17511 </script>
17512
17513 <!-- [[[ test_2d.state.saverestore.globalCompositeOperation.html ]]] -->
17514
17515 <p>Canvas test: 2d.state.saverestore.globalCompositeOperation</p>
17516 <!-- Testing: save()/restore() works for globalCompositeOperation -->
17517 <canvas id="c556" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17518 <script>
17519
17520 function test_2d_state_saverestore_globalCompositeOperation() {
17521
17522 var canvas = document.getElementById('c556');
17523 var ctx = canvas.getContext('2d');
17524
17525 // Test that restore() undoes any modifications
17526 var old = ctx.globalCompositeOperation;
17527 ctx.save();
17528 ctx.globalCompositeOperation = "copy";
17529 ctx.restore();
17530 ok(ctx.globalCompositeOperation === old, "ctx.globalCompositeOperation === old");
17531
17532 // Also test that save() doesn't modify the values
17533 ctx.globalCompositeOperation = "copy";
17534 old = ctx.globalCompositeOperation;
17535     // we're not interested in failures caused by get(set(x)) != x (e.g.
17536     // from rounding), so compare against d instead of against "copy"
17537 ctx.save();
17538 ok(ctx.globalCompositeOperation === old, "ctx.globalCompositeOperation === old");
17539 ctx.restore();
17540
17541
17542 }
17543 </script>
17544
17545 <!-- [[[ test_2d.state.saverestore.lineCap.html ]]] -->
17546
17547 <p>Canvas test: 2d.state.saverestore.lineCap</p>
17548 <!-- Testing: save()/restore() works for lineCap -->
17549 <canvas id="c557" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17550 <script>
17551
17552 function test_2d_state_saverestore_lineCap() {
17553
17554 var canvas = document.getElementById('c557');
17555 var ctx = canvas.getContext('2d');
17556
17557 // Test that restore() undoes any modifications
17558 var old = ctx.lineCap;
17559 ctx.save();
17560 ctx.lineCap = "round";
17561 ctx.restore();
17562 ok(ctx.lineCap === old, "ctx.lineCap === old");
17563
17564 // Also test that save() doesn't modify the values
17565 ctx.lineCap = "round";
17566 old = ctx.lineCap;
17567     // we're not interested in failures caused by get(set(x)) != x (e.g.
17568     // from rounding), so compare against d instead of against "round"
17569 ctx.save();
17570 ok(ctx.lineCap === old, "ctx.lineCap === old");
17571 ctx.restore();
17572
17573
17574 }
17575 </script>
17576
17577 <!-- [[[ test_2d.state.saverestore.lineJoin.html ]]] -->
17578
17579 <p>Canvas test: 2d.state.saverestore.lineJoin</p>
17580 <!-- Testing: save()/restore() works for lineJoin -->
17581 <canvas id="c558" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17582 <script>
17583
17584 function test_2d_state_saverestore_lineJoin() {
17585
17586 var canvas = document.getElementById('c558');
17587 var ctx = canvas.getContext('2d');
17588
17589 // Test that restore() undoes any modifications
17590 var old = ctx.lineJoin;
17591 ctx.save();
17592 ctx.lineJoin = "round";
17593 ctx.restore();
17594 ok(ctx.lineJoin === old, "ctx.lineJoin === old");
17595
17596 // Also test that save() doesn't modify the values
17597 ctx.lineJoin = "round";
17598 old = ctx.lineJoin;
17599     // we're not interested in failures caused by get(set(x)) != x (e.g.
17600     // from rounding), so compare against d instead of against "round"
17601 ctx.save();
17602 ok(ctx.lineJoin === old, "ctx.lineJoin === old");
17603 ctx.restore();
17604
17605
17606 }
17607 </script>
17608
17609 <!-- [[[ test_2d.state.saverestore.lineWidth.html ]]] -->
17610
17611 <p>Canvas test: 2d.state.saverestore.lineWidth</p>
17612 <!-- Testing: save()/restore() works for lineWidth -->
17613 <canvas id="c559" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17614 <script>
17615
17616 function test_2d_state_saverestore_lineWidth() {
17617
17618 var canvas = document.getElementById('c559');
17619 var ctx = canvas.getContext('2d');
17620
17621 // Test that restore() undoes any modifications
17622 var old = ctx.lineWidth;
17623 ctx.save();
17624 ctx.lineWidth = 0.5;
17625 ctx.restore();
17626 ok(ctx.lineWidth === old, "ctx.lineWidth === old");
17627
17628 // Also test that save() doesn't modify the values
17629 ctx.lineWidth = 0.5;
17630 old = ctx.lineWidth;
17631     // we're not interested in failures caused by get(set(x)) != x (e.g.
17632     // from rounding), so compare against d instead of against 0.5
17633 ctx.save();
17634 ok(ctx.lineWidth === old, "ctx.lineWidth === old");
17635 ctx.restore();
17636
17637
17638 }
17639 </script>
17640
17641 <!-- [[[ test_2d.state.saverestore.miterLimit.html ]]] -->
17642
17643 <p>Canvas test: 2d.state.saverestore.miterLimit</p>
17644 <!-- Testing: save()/restore() works for miterLimit -->
17645 <canvas id="c560" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17646 <script>
17647
17648 function test_2d_state_saverestore_miterLimit() {
17649
17650 var canvas = document.getElementById('c560');
17651 var ctx = canvas.getContext('2d');
17652
17653 // Test that restore() undoes any modifications
17654 var old = ctx.miterLimit;
17655 ctx.save();
17656 ctx.miterLimit = 0.5;
17657 ctx.restore();
17658 ok(ctx.miterLimit === old, "ctx.miterLimit === old");
17659
17660 // Also test that save() doesn't modify the values
17661 ctx.miterLimit = 0.5;
17662 old = ctx.miterLimit;
17663     // we're not interested in failures caused by get(set(x)) != x (e.g.
17664     // from rounding), so compare against d instead of against 0.5
17665 ctx.save();
17666 ok(ctx.miterLimit === old, "ctx.miterLimit === old");
17667 ctx.restore();
17668
17669
17670 }
17671 </script>
17672
17673 <!-- [[[ test_2d.state.saverestore.path.html ]]] -->
17674
17675 <p>Canvas test: 2d.state.saverestore.path</p>
17676 <!-- Testing: save()/restore() does not affect the current path -->
17677 <canvas id="c561" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17678 <script>
17679
17680
17681 function test_2d_state_saverestore_path() {
17682
17683 var canvas = document.getElementById('c561');
17684 var ctx = canvas.getContext('2d');
17685
17686 ctx.fillStyle = '#f00';
17687 ctx.fillRect(0, 0, 100, 50);
17688 ctx.save();
17689 ctx.rect(0, 0, 100, 50);
17690 ctx.restore();
17691 ctx.fillStyle = '#0f0';
17692 ctx.fill();
17693 isPixel(ctx, 50,25, 0,255,0,255, 0);
17694
17695
17696 }
17697 </script>
17698
17699 <!-- [[[ test_2d.state.saverestore.shadowBlur.html ]]] -->
17700
17701 <p>Canvas test: 2d.state.saverestore.shadowBlur</p>
17702 <!-- Testing: save()/restore() works for shadowBlur -->
17703 <canvas id="c562" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17704 <script>
17705
17706 function test_2d_state_saverestore_shadowBlur() {
17707
17708 var canvas = document.getElementById('c562');
17709 var ctx = canvas.getContext('2d');
17710
17711 // Test that restore() undoes any modifications
17712 var old = ctx.shadowBlur;
17713 ctx.save();
17714 ctx.shadowBlur = 5;
17715 ctx.restore();
17716 ok(ctx.shadowBlur === old, "ctx.shadowBlur === old");
17717
17718 // Also test that save() doesn't modify the values
17719 ctx.shadowBlur = 5;
17720 old = ctx.shadowBlur;
17721     // we're not interested in failures caused by get(set(x)) != x (e.g.
17722     // from rounding), so compare against d instead of against 5
17723 ctx.save();
17724 ok(ctx.shadowBlur === old, "ctx.shadowBlur === old");
17725 ctx.restore();
17726
17727
17728 }
17729 </script>
17730
17731 <!-- [[[ test_2d.state.saverestore.shadowColor.html ]]] -->
17732
17733 <p>Canvas test: 2d.state.saverestore.shadowColor</p>
17734 <!-- Testing: save()/restore() works for shadowColor -->
17735 <canvas id="c563" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17736 <script>
17737
17738 function test_2d_state_saverestore_shadowColor() {
17739
17740 var canvas = document.getElementById('c563');
17741 var ctx = canvas.getContext('2d');
17742
17743 // Test that restore() undoes any modifications
17744 var old = ctx.shadowColor;
17745 ctx.save();
17746 ctx.shadowColor = "#ff0000";
17747 ctx.restore();
17748 ok(ctx.shadowColor === old, "ctx.shadowColor === old");
17749
17750 // Also test that save() doesn't modify the values
17751 ctx.shadowColor = "#ff0000";
17752 old = ctx.shadowColor;
17753     // we're not interested in failures caused by get(set(x)) != x (e.g.
17754     // from rounding), so compare against d instead of against "#ff0000"
17755 ctx.save();
17756 ok(ctx.shadowColor === old, "ctx.shadowColor === old");
17757 ctx.restore();
17758
17759
17760 }
17761 </script>
17762
17763 <!-- [[[ test_2d.state.saverestore.shadowOffsetX.html ]]] -->
17764
17765 <p>Canvas test: 2d.state.saverestore.shadowOffsetX</p>
17766 <!-- Testing: save()/restore() works for shadowOffsetX -->
17767 <canvas id="c564" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17768 <script>
17769
17770 function test_2d_state_saverestore_shadowOffsetX() {
17771
17772 var canvas = document.getElementById('c564');
17773 var ctx = canvas.getContext('2d');
17774
17775 // Test that restore() undoes any modifications
17776 var old = ctx.shadowOffsetX;
17777 ctx.save();
17778 ctx.shadowOffsetX = 5;
17779 ctx.restore();
17780 ok(ctx.shadowOffsetX === old, "ctx.shadowOffsetX === old");
17781
17782 // Also test that save() doesn't modify the values
17783 ctx.shadowOffsetX = 5;
17784 old = ctx.shadowOffsetX;
17785     // we're not interested in failures caused by get(set(x)) != x (e.g.
17786     // from rounding), so compare against d instead of against 5
17787 ctx.save();
17788 ok(ctx.shadowOffsetX === old, "ctx.shadowOffsetX === old");
17789 ctx.restore();
17790
17791
17792 }
17793 </script>
17794
17795 <!-- [[[ test_2d.state.saverestore.shadowOffsetY.html ]]] -->
17796
17797 <p>Canvas test: 2d.state.saverestore.shadowOffsetY</p>
17798 <!-- Testing: save()/restore() works for shadowOffsetY -->
17799 <canvas id="c565" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17800 <script>
17801
17802 function test_2d_state_saverestore_shadowOffsetY() {
17803
17804 var canvas = document.getElementById('c565');
17805 var ctx = canvas.getContext('2d');
17806
17807 // Test that restore() undoes any modifications
17808 var old = ctx.shadowOffsetY;
17809 ctx.save();
17810 ctx.shadowOffsetY = 5;
17811 ctx.restore();
17812 ok(ctx.shadowOffsetY === old, "ctx.shadowOffsetY === old");
17813
17814 // Also test that save() doesn't modify the values
17815 ctx.shadowOffsetY = 5;
17816 old = ctx.shadowOffsetY;
17817     // we're not interested in failures caused by get(set(x)) != x (e.g.
17818     // from rounding), so compare against d instead of against 5
17819 ctx.save();
17820 ok(ctx.shadowOffsetY === old, "ctx.shadowOffsetY === old");
17821 ctx.restore();
17822
17823
17824 }
17825 </script>
17826
17827 <!-- [[[ test_2d.state.saverestore.stack.html ]]] -->
17828
17829 <p>Canvas test: 2d.state.saverestore.stack</p>
17830 <!-- Testing: save()/restore() can be nested as a stack -->
17831 <canvas id="c566" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17832 <script>
17833
17834 function test_2d_state_saverestore_stack() {
17835
17836 var canvas = document.getElementById('c566');
17837 var ctx = canvas.getContext('2d');
17838
17839 ctx.lineWidth = 1;
17840 ctx.save();
17841 ctx.lineWidth = 2;
17842 ctx.save();
17843 ctx.lineWidth = 3;
17844 ok(ctx.lineWidth == 3, "ctx.lineWidth == 3");
17845 ctx.restore();
17846 ok(ctx.lineWidth == 2, "ctx.lineWidth == 2");
17847 ctx.restore();
17848 ok(ctx.lineWidth == 1, "ctx.lineWidth == 1");
17849
17850
17851 }
17852 </script>
17853
17854 <!-- [[[ test_2d.state.saverestore.stackdepth.html ]]] -->
17855
17856 <p>Canvas test: 2d.state.saverestore.stackdepth</p>
17857 <!-- Testing: save()/restore() stack depth is not unreasonably limited -->
17858 <canvas id="c567" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17859 <script>
17860
17861 function test_2d_state_saverestore_stackdepth() {
17862
17863 var canvas = document.getElementById('c567');
17864 var ctx = canvas.getContext('2d');
17865
17866 var limit = 512;
17867 for (var i = 1; i < limit; ++i)
17868 {
17869     ctx.save();
17870     ctx.lineWidth = i;
17871 }
17872 for (var i = limit-1; i > 0; --i)
17873 {
17874     ok(ctx.lineWidth == i, "ctx.lineWidth == i");
17875     ctx.restore();
17876 }
17877
17878
17879 }
17880 </script>
17881
17882 <!-- [[[ test_2d.state.saverestore.strokeStyle.html ]]] -->
17883
17884 <p>Canvas test: 2d.state.saverestore.strokeStyle</p>
17885 <!-- Testing: save()/restore() works for strokeStyle -->
17886 <canvas id="c568" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17887 <script>
17888
17889 function test_2d_state_saverestore_strokeStyle() {
17890
17891 var canvas = document.getElementById('c568');
17892 var ctx = canvas.getContext('2d');
17893
17894 // Test that restore() undoes any modifications
17895 var old = ctx.strokeStyle;
17896 ctx.save();
17897 ctx.strokeStyle = "#ff0000";
17898 ctx.restore();
17899 ok(ctx.strokeStyle === old, "ctx.strokeStyle === old");
17900
17901 // Also test that save() doesn't modify the values
17902 ctx.strokeStyle = "#ff0000";
17903 old = ctx.strokeStyle;
17904     // we're not interested in failures caused by get(set(x)) != x (e.g.
17905     // from rounding), so compare against d instead of against "#ff0000"
17906 ctx.save();
17907 ok(ctx.strokeStyle === old, "ctx.strokeStyle === old");
17908 ctx.restore();
17909
17910
17911 }
17912 </script>
17913
17914 <!-- [[[ test_2d.state.saverestore.transformation.html ]]] -->
17915
17916 <p>Canvas test: 2d.state.saverestore.transformation</p>
17917 <!-- Testing: save()/restore() affects the current transformation matrix -->
17918 <canvas id="c569" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17919 <script>
17920
17921
17922 function test_2d_state_saverestore_transformation() {
17923
17924 var canvas = document.getElementById('c569');
17925 var ctx = canvas.getContext('2d');
17926
17927 ctx.fillStyle = '#0f0';
17928 ctx.fillRect(0, 0, 100, 50);
17929 ctx.save();
17930 ctx.translate(200, 0);
17931 ctx.restore();
17932 ctx.fillStyle = '#f00';
17933 ctx.fillRect(-200, 0, 100, 50);
17934 isPixel(ctx, 50,25, 0,255,0,255, 0);
17935
17936
17937 }
17938 </script>
17939
17940 <!-- [[[ test_2d.state.saverestore.underflow.html ]]] -->
17941
17942 <p>Canvas test: 2d.state.saverestore.underflow - bug 296821</p>
17943 <!-- Testing: restore() with an empty stack has no effect -->
17944 <canvas id="c570" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17945 <script>
17946
17947 function test_2d_state_saverestore_underflow() {
17948
17949 var canvas = document.getElementById('c570');
17950 var ctx = canvas.getContext('2d');
17951
17952 for (var i = 0; i < 16; ++i)
17953     ctx.restore();
17954 ctx.lineWidth = 0.5;
17955 ctx.restore();
17956 ok(ctx.lineWidth == 0.5, "ctx.lineWidth == 0.5");
17957
17958
17959 }
17960 </script>
17961
17962 <!-- [[[ test_2d.strokeRect.basic.html ]]] -->
17963
17964 <p>Canvas test: 2d.strokeRect.basic</p>
17965 <canvas id="c571" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
17966 <script>
17967
17968
17969 function test_2d_strokeRect_basic() {
17970
17971 var canvas = document.getElementById('c571');
17972 var ctx = canvas.getContext('2d');
17973
17974 ctx.strokeStyle = '#0f0';
17975 ctx.lineWidth = 50;
17976 ctx.strokeRect(25, 24, 50, 2);
17977 isPixel(ctx, 50,25, 0,255,0,255, 0);
17978
17979
17980 }
17981 </script>
17982
17983 <!-- [[[ test_2d.strokeRect.clip.html ]]] -->
17984
17985 <p>Canvas test: 2d.strokeRect.clip</p>
17986 <canvas id="c572" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17987 <script>
17988
17989
17990 function test_2d_strokeRect_clip() {
17991
17992 var canvas = document.getElementById('c572');
17993 var ctx = canvas.getContext('2d');
17994
17995 ctx.fillStyle = '#0f0';
17996 ctx.fillRect(0, 0, 100, 50);
17997
17998 ctx.beginPath();
17999 ctx.rect(0, 0, 16, 16);
18000 ctx.clip();
18001
18002 ctx.strokeStyle = '#f00';
18003 ctx.lineWidth = 50;
18004 ctx.strokeRect(0, 0, 100, 50);
18005
18006 ctx.fillStyle = '#0f0';
18007 ctx.fillRect(0, 0, 16, 16);
18008
18009 isPixel(ctx, 50,25, 0,255,0,255, 0);
18010
18011
18012 }
18013 </script>
18014
18015 <!-- [[[ test_2d.strokeRect.globalalpha.html ]]] -->
18016
18017 <p>Canvas test: 2d.strokeRect.globalalpha</p>
18018 <canvas id="c573" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18019 <script>
18020
18021
18022 function test_2d_strokeRect_globalalpha() {
18023
18024 var canvas = document.getElementById('c573');
18025 var ctx = canvas.getContext('2d');
18026
18027 ctx.globalAlpha = 0;
18028 ctx.strokeStyle = '#f00';
18029 ctx.lineWidth = 50;
18030 ctx.strokeRect(25, 24, 50, 2);
18031 isPixel(ctx, 50,25, 0,0,0,0, 0);
18032
18033
18034 }
18035 </script>
18036
18037 <!-- [[[ test_2d.strokeRect.globalcomposite.html ]]] -->
18038
18039 <p>Canvas test: 2d.strokeRect.globalcomposite</p>
18040 <canvas id="c574" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18041 <script>
18042
18043
18044 function test_2d_strokeRect_globalcomposite() {
18045
18046 var canvas = document.getElementById('c574');
18047 var ctx = canvas.getContext('2d');
18048
18049 ctx.globalCompositeOperation = 'source-in';
18050 ctx.strokeStyle = '#f00';
18051 ctx.lineWidth = 50;
18052 ctx.strokeRect(25, 24, 50, 2);
18053 isPixel(ctx, 50,25, 0,0,0,0, 0);
18054
18055
18056 }
18057 </script>
18058
18059 <!-- [[[ test_2d.strokeRect.negative.html ]]] -->
18060
18061 <p>Canvas test: 2d.strokeRect.negative</p>
18062 <canvas id="c575" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18063 <script>
18064
18065
18066 function test_2d_strokeRect_negative() {
18067
18068 var canvas = document.getElementById('c575');
18069 var ctx = canvas.getContext('2d');
18070
18071 ctx.fillStyle = '#f00';
18072 ctx.fillRect(0, 0, 100, 50);
18073 ctx.strokeStyle = '#0f0';
18074 ctx.lineWidth = 25;
18075 ctx.strokeRect(12, 12, 26, 1);
18076 ctx.strokeRect(88, 12, -26, 1);
18077 ctx.strokeRect(12, 38, 26, -1);
18078 ctx.strokeRect(88, 38, -26, -1);
18079 isPixel(ctx, 25,12, 0,255,0,255, 0);
18080 isPixel(ctx, 75,12, 0,255,0,255, 0);
18081 isPixel(ctx, 25,37, 0,255,0,255, 0);
18082 isPixel(ctx, 75,37, 0,255,0,255, 0);
18083
18084
18085 }
18086 </script>
18087
18088 <!-- [[[ test_2d.strokeRect.nonfinite.html ]]] -->
18089
18090 <p>Canvas test: 2d.strokeRect.nonfinite</p>
18091 <!-- Testing: strokeRect() with Infinity/NaN is ignored -->
18092 <canvas id="c576" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18093 <script>
18094
18095
18096 function test_2d_strokeRect_nonfinite() {
18097
18098 var canvas = document.getElementById('c576');
18099 var ctx = canvas.getContext('2d');
18100
18101 var _thrown_outer = false;
18102 try {
18103
18104 ctx.fillStyle = '#0f0';
18105 ctx.fillRect(0, 0, 100, 50);
18106
18107 ctx.strokeStyle = '#f00';
18108 ctx.lineWidth = 150;
18109 ctx.strokeRect(Infinity, 0, 100, 50);
18110 ctx.strokeRect(-Infinity, 0, 100, 50);
18111 ctx.strokeRect(NaN, 0, 100, 50);
18112 ctx.strokeRect(0, Infinity, 100, 50);
18113 ctx.strokeRect(0, -Infinity, 100, 50);
18114 ctx.strokeRect(0, NaN, 100, 50);
18115 ctx.strokeRect(0, 0, Infinity, 50);
18116 ctx.strokeRect(0, 0, -Infinity, 50);
18117 ctx.strokeRect(0, 0, NaN, 50);
18118 ctx.strokeRect(0, 0, 100, Infinity);
18119 ctx.strokeRect(0, 0, 100, -Infinity);
18120 ctx.strokeRect(0, 0, 100, NaN);
18121 ctx.strokeRect(Infinity, Infinity, 100, 50);
18122 ctx.strokeRect(Infinity, Infinity, Infinity, 50);
18123 ctx.strokeRect(Infinity, Infinity, Infinity, Infinity);
18124 ctx.strokeRect(Infinity, Infinity, 100, Infinity);
18125 ctx.strokeRect(Infinity, 0, Infinity, 50);
18126 ctx.strokeRect(Infinity, 0, Infinity, Infinity);
18127 ctx.strokeRect(Infinity, 0, 100, Infinity);
18128 ctx.strokeRect(0, Infinity, Infinity, 50);
18129 ctx.strokeRect(0, Infinity, Infinity, Infinity);
18130 ctx.strokeRect(0, Infinity, 100, Infinity);
18131 ctx.strokeRect(0, 0, Infinity, Infinity);
18132
18133 isPixel(ctx, 50,25, 0,255,0,255, 0);
18134
18135 } catch (e) {
18136     _thrown_outer = true;
18137 }
18138 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
18139
18140
18141 }
18142 </script>
18143
18144 <!-- [[[ test_2d.strokeRect.path.html ]]] -->
18145
18146 <p>Canvas test: 2d.strokeRect.path</p>
18147 <canvas id="c577" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
18148 <script>
18149
18150
18151 function test_2d_strokeRect_path() {
18152
18153 var canvas = document.getElementById('c577');
18154 var ctx = canvas.getContext('2d');
18155
18156 ctx.beginPath();
18157 ctx.rect(0, 0, 100, 50);
18158 ctx.strokeStyle = '#f00';
18159 ctx.lineWidth = 5;
18160 ctx.strokeRect(0, 0, 16, 16);
18161 ctx.fillStyle = '#0f0';
18162 ctx.fill();
18163 isPixel(ctx, 50,25, 0,255,0,255, 0);
18164
18165
18166 }
18167 </script>
18168
18169 <!-- [[[ test_2d.strokeRect.shadow.html ]]] -->
18170
18171 <p>Canvas test: 2d.strokeRect.shadow</p>
18172 <canvas id="c578" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18173 <script>
18174
18175
18176 function test_2d_strokeRect_shadow() {
18177
18178 var canvas = document.getElementById('c578');
18179 var ctx = canvas.getContext('2d');
18180
18181 ctx.fillStyle = '#0f0';
18182 ctx.fillRect(0, 0, 100, 50);
18183
18184 ctx.fillStyle = '#f00';
18185 ctx.shadowBlur = 0;
18186 ctx.shadowOffsetX = 0;
18187 ctx.shadowOffsetY = 50;
18188
18189 // Shadows are optional, so just test that if they apply to fill() then they apply to strokeRect() too
18190 ctx.beginPath();
18191 ctx.rect(0, -50, 100, 50);
18192 ctx.shadowColor = '#f00';
18193 ctx.fill();
18194
18195 ctx.shadowColor = '#0f0';
18196 ctx.strokeStyle = '#f00';
18197 ctx.lineWidth = 50;
18198 ctx.strokeRect(0, -75, 100, 50);
18199
18200 isPixel(ctx, 50,25, 0,255,0,255, 0);
18201
18202
18203 }
18204 </script>
18205
18206 <!-- [[[ test_2d.strokeRect.transform.html ]]] -->
18207
18208 <p>Canvas test: 2d.strokeRect.transform</p>
18209 <canvas id="c579" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
18210 <script>
18211
18212
18213 function test_2d_strokeRect_transform() {
18214
18215 var canvas = document.getElementById('c579');
18216 var ctx = canvas.getContext('2d');
18217
18218 ctx.scale(10, 10);
18219 ctx.translate(0, 5);
18220 ctx.strokeStyle = '#0f0';
18221 ctx.lineWidth = 5;
18222 ctx.strokeRect(2.5, -2.6, 5, 0.2);
18223 isPixel(ctx, 50,25, 0,255,0,255, 0);
18224
18225
18226 }
18227 </script>
18228
18229 <!-- [[[ test_2d.strokeRect.zero.1.html ]]] -->
18230
18231 <p>Canvas test: 2d.strokeRect.zero.1</p>
18232 <canvas id="c580" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18233 <script>
18234
18235
18236 function test_2d_strokeRect_zero_1() {
18237
18238 var canvas = document.getElementById('c580');
18239 var ctx = canvas.getContext('2d');
18240
18241 if (!IsD2DEnabled()) {
18242     // Disabled for D2D until we can figure out Bug 587554.
18243     ctx.strokeStyle = '#f00';
18244     ctx.lineWidth = 250;
18245     ctx.strokeRect(50, 25, 0, 0);
18246     isPixel(ctx, 50,25, 0,0,0,0, 0);
18247 }
18248
18249 }
18250 </script>
18251
18252 <!-- [[[ test_2d.strokeRect.zero.2.html ]]] -->
18253
18254 <p>Canvas test: 2d.strokeRect.zero.2</p>
18255 <canvas id="c581" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18256 <script>
18257
18258
18259
18260 function test_2d_strokeRect_zero_2() {
18261
18262 var canvas = document.getElementById('c581');
18263 var ctx = canvas.getContext('2d');
18264
18265 ctx.strokeStyle = '#f00';
18266 ctx.lineWidth = 250;
18267 ctx.lineCap = 'round';
18268 ctx.lineJoin = 'round';
18269 ctx.strokeRect(50, 25, 0, 0);
18270 isPixel(ctx, 50,25, 0,0,0,0, 0);
18271
18272
18273 }
18274 </script>
18275
18276 <!-- [[[ test_2d.strokeRect.zero.3.html ]]] -->
18277
18278 <p>Canvas test: 2d.strokeRect.zero.3</p>
18279 <canvas id="c582" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
18280 <script>
18281
18282
18283 function test_2d_strokeRect_zero_3() {
18284
18285 var canvas = document.getElementById('c582');
18286 var ctx = canvas.getContext('2d');
18287
18288 ctx.strokeStyle = '#0f0';
18289 ctx.lineWidth = 50;
18290 ctx.strokeRect(0, 25, 100, 0);
18291 isPixel(ctx, 50,25, 0,255,0,255, 0);
18292
18293
18294 }
18295 </script>
18296
18297 <!-- [[[ test_2d.strokeRect.zero.4.html ]]] -->
18298
18299 <p>Canvas test: 2d.strokeRect.zero.4</p>
18300 <canvas id="c583" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
18301 <script>
18302
18303
18304 function test_2d_strokeRect_zero_4() {
18305
18306 var canvas = document.getElementById('c583');
18307 var ctx = canvas.getContext('2d');
18308
18309 ctx.strokeStyle = '#f00';
18310 ctx.lineWidth = 250;
18311 ctx.lineCap = 'round';
18312 ctx.strokeRect(100, 25, 100, 0);
18313 isPixel(ctx, 50,25, 0,0,0,0, 0);
18314
18315
18316 }
18317 </script>
18318
18319 <!-- [[[ test_2d.strokeRect.zero.5.html ]]] -->
18320
18321 <p>Canvas test: 2d.strokeRect.zero.5</p>
18322 <canvas id="c584" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
18323 <script>
18324
18325
18326 function test_2d_strokeRect_zero_5() {
18327
18328 var canvas = document.getElementById('c584');
18329 var ctx = canvas.getContext('2d');
18330
18331 ctx.strokeStyle = '#0f0';
18332 ctx.lineWidth = 250;
18333 ctx.lineJoin = 'round';
18334 ctx.strokeRect(100, 25, 100, 0);
18335 isPixel(ctx, 50,25, 0,255,0,255, 0);
18336
18337
18338 }
18339 </script>
18340
18341 <!-- [[[ test_2d.strokeStyle.default.html ]]] -->
18342
18343 <p>Canvas test: 2d.strokeStyle.default</p>
18344 <canvas id="c585" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18345 <script>
18346
18347 function test_2d_strokeStyle_default() {
18348
18349 var canvas = document.getElementById('c585');
18350 var ctx = canvas.getContext('2d');
18351
18352 ok(ctx.strokeStyle == '#000000', "ctx.strokeStyle == '#000000'");
18353
18354
18355 }
18356 </script>
18357
18358 <!-- [[[ test_2d.text.align.default.html ]]] -->
18359
18360 <p>Canvas test: 2d.text.align.default</p>
18361 <canvas height="50" id="c569a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
18362 <script>
18363
18364 function test_2d_text_align_default() {
18365
18366 var canvas = document.getElementById('c569a');
18367 var ctx = canvas.getContext('2d');
18368
18369 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18370
18371
18372 }
18373 </script>
18374
18375 <!-- [[[ test_2d.text.align.invalid.html ]]] -->
18376
18377 <p>Canvas test: 2d.text.align.invalid</p>
18378 <canvas height="50" id="c570a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
18379 <script>
18380
18381 function test_2d_text_align_invalid() {
18382
18383 var canvas = document.getElementById('c570a');
18384 var ctx = canvas.getContext('2d');
18385
18386 ctx.textAlign = 'start';
18387 ctx.textAlign = 'bogus';
18388 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18389
18390 ctx.textAlign = 'start';
18391 ctx.textAlign = 'END';
18392 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18393
18394 ctx.textAlign = 'start';
18395 ctx.textAlign = 'end ';
18396 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18397
18398 ctx.textAlign = 'start';
18399 ctx.textAlign = 'end\0';
18400 ok(ctx.textAlign === 'start', "ctx.textAlign === 'start'");
18401
18402
18403 }
18404 </script>
18405
18406 <!-- [[[ test_2d.text.baseline.default.html ]]] -->
18407
18408 <p>Canvas test: 2d.text.baseline.default</p>
18409 <canvas height="50" id="c572a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
18410 <script>
18411
18412 function test_2d_text_baseline_default() {
18413
18414 var canvas = document.getElementById('c572a');
18415 var ctx = canvas.getContext('2d');
18416
18417 ok(ctx.textBaseline === 'alphabetic', "ctx.textBaseline === 'alphabetic'");
18418
18419
18420 }
18421 </script>
18422
18423 <!-- [[[ test_2d.text.baseline.invalid.html ]]] -->
18424
18425 <p>Canvas test: 2d.text.baseline.invalid</p>
18426 <canvas height="50" id="c573a" width="100"><p class="fallback">FAIL (fallback content)</p></canvas>
18427 <script>
18428
18429 function test_2d_text_baseline_invalid() {
18430
18431 var canvas = document.getElementById('c573a');
18432 var ctx = canvas.getContext('2d');
18433
18434 ctx.textBaseline = 'top';
18435 ctx.textBaseline = 'bogus';
18436 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
18437
18438 ctx.textBaseline = 'top';
18439 ctx.textBaseline = 'MIDDLE';
18440 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
18441
18442 ctx.textBaseline = 'top';
18443 ctx.textBaseline = 'middle ';
18444 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
18445
18446 ctx.textBaseline = 'top';
18447 ctx.textBaseline = 'middle\0';
18448 ok(ctx.textBaseline === 'top', "ctx.textBaseline === 'top'");
18449
18450
18451 }
18452 </script>
18453
18454 <!-- [[[ test_2d.transformation.order.html ]]] -->
18455
18456 <p>Canvas test: 2d.transformation.order</p>
18457 <!-- Testing: Transformations are applied in the right order -->
18458 <canvas id="c586" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18459 <script>
18460
18461
18462 function test_2d_transformation_order() {
18463
18464 var canvas = document.getElementById('c586');
18465 var ctx = canvas.getContext('2d');
18466
18467 ctx.fillStyle = '#f00';
18468 ctx.fillRect(0, 0, 100, 50);
18469
18470 ctx.scale(2, 1);
18471 ctx.rotate(Math.PI / 2);
18472 ctx.fillStyle = '#0f0';
18473 ctx.fillRect(0, -50, 50, 50);
18474 isPixel(ctx, 75,25, 0,255,0,255, 0);
18475
18476
18477 }
18478 </script>
18479
18480 <!-- [[[ test_2d.transformation.rotate.direction.html ]]] -->
18481
18482 <p>Canvas test: 2d.transformation.rotate.direction</p>
18483 <!-- Testing: rotate() is clockwise -->
18484 <canvas id="c587" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18485 <script>
18486
18487
18488 function test_2d_transformation_rotate_direction() {
18489
18490 var canvas = document.getElementById('c587');
18491 var ctx = canvas.getContext('2d');
18492
18493 ctx.fillStyle = '#f00';
18494 ctx.fillRect(0, 0, 100, 50);
18495
18496 ctx.rotate(Math.PI / 2);
18497 ctx.fillStyle = '#0f0';
18498 ctx.fillRect(0, -100, 50, 100);
18499 isPixel(ctx, 50,25, 0,255,0,255, 0);
18500
18501
18502 }
18503 </script>
18504
18505 <!-- [[[ test_2d.transformation.rotate.nonfinite.html ]]] -->
18506
18507 <p>Canvas test: 2d.transformation.rotate.nonfinite</p>
18508 <!-- Testing: rotate() with Infinity/NaN is ignored -->
18509 <canvas id="c588" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18510 <script>
18511
18512
18513 function test_2d_transformation_rotate_nonfinite() {
18514
18515 var canvas = document.getElementById('c588');
18516 var ctx = canvas.getContext('2d');
18517
18518 var _thrown_outer = false;
18519 try {
18520
18521 ctx.fillStyle = '#f00';
18522 ctx.fillRect(0, 0, 100, 50);
18523
18524 ctx.translate(100, 10);
18525 ctx.rotate(Infinity);
18526 ctx.rotate(-Infinity);
18527 ctx.rotate(NaN);
18528
18529 ctx.fillStyle = '#0f0';
18530 ctx.fillRect(-100, -10, 100, 50);
18531
18532 isPixel(ctx, 50,25, 0,255,0,255, 0);
18533
18534 } catch (e) {
18535     _thrown_outer = true;
18536 }
18537 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
18538
18539
18540 }
18541 </script>
18542
18543 <!-- [[[ test_2d.transformation.rotate.radians.html ]]] -->
18544
18545 <p>Canvas test: 2d.transformation.rotate.radians</p>
18546 <!-- Testing: rotate() uses radians -->
18547 <canvas id="c589" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18548 <script>
18549
18550
18551 function test_2d_transformation_rotate_radians() {
18552
18553 var canvas = document.getElementById('c589');
18554 var ctx = canvas.getContext('2d');
18555
18556 ctx.fillStyle = '#f00';
18557 ctx.fillRect(0, 0, 100, 50);
18558
18559 ctx.rotate(Math.PI); // should fail obviously if this is 3.1 degrees
18560 ctx.fillStyle = '#0f0';
18561 ctx.fillRect(-100, -50, 100, 50);
18562 isPixel(ctx, 50,25, 0,255,0,255, 0);
18563
18564
18565 }
18566 </script>
18567
18568 <!-- [[[ test_2d.transformation.rotate.wrap.html ]]] -->
18569
18570 <p>Canvas test: 2d.transformation.rotate.wrap</p>
18571 <!-- Testing: rotate() wraps large positive values correctly -->
18572 <canvas id="c590" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18573 <script>
18574
18575
18576 function test_2d_transformation_rotate_wrap() {
18577
18578 var canvas = document.getElementById('c590');
18579 var ctx = canvas.getContext('2d');
18580
18581 ctx.fillStyle = '#f00';
18582 ctx.fillRect(0, 0, 100, 50);
18583
18584 ctx.rotate(Math.PI * (1 + 4096)); // == pi (mod 2*pi)
18585 // We need about pi +/- 0.001 in order to get correct-looking results
18586 // 32-bit floats can store pi*4097 with precision 2^-10, so that should
18587 // be safe enough on reasonable implementations
18588 ctx.fillStyle = '#0f0';
18589 ctx.fillRect(-100, -50, 100, 50);
18590 isPixel(ctx, 50,25, 0,255,0,255, 0);
18591 isPixel(ctx, 98,2, 0,255,0,255, 0);
18592 isPixel(ctx, 98,47, 0,255,0,255, 0);
18593
18594
18595 }
18596 </script>
18597
18598 <!-- [[[ test_2d.transformation.rotate.wrapnegative.html ]]] -->
18599
18600 <p>Canvas test: 2d.transformation.rotate.wrapnegative</p>
18601 <!-- Testing: rotate() wraps large negative values correctly -->
18602 <canvas id="c591" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18603 <script>
18604
18605
18606 function test_2d_transformation_rotate_wrapnegative() {
18607
18608 var canvas = document.getElementById('c591');
18609 var ctx = canvas.getContext('2d');
18610
18611 ctx.fillStyle = '#f00';
18612 ctx.fillRect(0, 0, 100, 50);
18613
18614 ctx.rotate(-Math.PI * (1 + 4096));
18615 ctx.fillStyle = '#0f0';
18616 ctx.fillRect(-100, -50, 100, 50);
18617 isPixel(ctx, 50,25, 0,255,0,255, 0);
18618 isPixel(ctx, 98,2, 0,255,0,255, 0);
18619 isPixel(ctx, 98,47, 0,255,0,255, 0);
18620
18621
18622 }
18623 </script>
18624
18625 <!-- [[[ test_2d.transformation.rotate.zero.html ]]] -->
18626
18627 <p>Canvas test: 2d.transformation.rotate.zero</p>
18628 <!-- Testing: rotate() by 0 does nothing -->
18629 <canvas id="c592" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18630 <script>
18631
18632
18633 function test_2d_transformation_rotate_zero() {
18634
18635 var canvas = document.getElementById('c592');
18636 var ctx = canvas.getContext('2d');
18637
18638 ctx.fillStyle = '#f00';
18639 ctx.fillRect(0, 0, 100, 50);
18640
18641 ctx.rotate(0);
18642 ctx.fillStyle = '#0f0';
18643 ctx.fillRect(0, 0, 100, 50);
18644 isPixel(ctx, 50,25, 0,255,0,255, 0);
18645
18646
18647 }
18648 </script>
18649
18650 <!-- [[[ test_2d.transformation.scale.basic.html ]]] -->
18651
18652 <p>Canvas test: 2d.transformation.scale.basic</p>
18653 <!-- Testing: scale() works -->
18654 <canvas id="c593" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18655 <script>
18656
18657
18658 function test_2d_transformation_scale_basic() {
18659
18660 var canvas = document.getElementById('c593');
18661 var ctx = canvas.getContext('2d');
18662
18663 ctx.fillStyle = '#f00';
18664 ctx.fillRect(0, 0, 100, 50);
18665
18666 ctx.scale(2, 4);
18667 ctx.fillStyle = '#0f0';
18668 ctx.fillRect(0, 0, 50, 12.5);
18669 isPixel(ctx, 90,40, 0,255,0,255, 0);
18670
18671
18672 }
18673 </script>
18674
18675 <!-- [[[ test_2d.transformation.scale.large.html ]]] -->
18676
18677 <p>Canvas test: 2d.transformation.scale.large</p>
18678 <!-- Testing: scale() with large scale factors works -->
18679 <canvas id="c594" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18680 <script>
18681
18682
18683 function test_2d_transformation_scale_large() {
18684
18685 var canvas = document.getElementById('c594');
18686 var ctx = canvas.getContext('2d');
18687
18688 ctx.fillStyle = '#f00';
18689 ctx.fillRect(0, 0, 100, 50);
18690
18691 ctx.scale(1e5, 1e5);
18692 ctx.fillStyle = '#0f0';
18693 ctx.fillRect(0, 0, 1, 1);
18694 isPixel(ctx, 50,25, 0,255,0,255, 0);
18695
18696
18697 }
18698 </script>
18699
18700 <!-- [[[ test_2d.transformation.scale.multiple.html ]]] -->
18701
18702 <p>Canvas test: 2d.transformation.scale.multiple</p>
18703 <!-- Testing: Multiple scale()s combine -->
18704 <canvas id="c595" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18705 <script>
18706
18707
18708 function test_2d_transformation_scale_multiple() {
18709
18710 var canvas = document.getElementById('c595');
18711 var ctx = canvas.getContext('2d');
18712
18713 ctx.fillStyle = '#f00';
18714 ctx.fillRect(0, 0, 100, 50);
18715
18716 ctx.scale(Math.sqrt(2), Math.sqrt(2));
18717 ctx.scale(Math.sqrt(2), Math.sqrt(2));
18718 ctx.fillStyle = '#0f0';
18719 ctx.fillRect(0, 0, 50, 25);
18720 isPixel(ctx, 90,40, 0,255,0,255, 0);
18721
18722
18723 }
18724 </script>
18725
18726 <!-- [[[ test_2d.transformation.scale.negative.html ]]] -->
18727
18728 <p>Canvas test: 2d.transformation.scale.negative</p>
18729 <!-- Testing: scale() with negative scale factors works -->
18730 <canvas id="c596" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18731 <script>
18732
18733
18734 function test_2d_transformation_scale_negative() {
18735
18736 var canvas = document.getElementById('c596');
18737 var ctx = canvas.getContext('2d');
18738
18739 ctx.fillStyle = '#f00';
18740 ctx.fillRect(0, 0, 100, 50);
18741
18742 ctx.save();
18743 ctx.scale(-1, 1);
18744 ctx.fillStyle = '#0f0';
18745 ctx.fillRect(-50, 0, 50, 50);
18746 ctx.restore();
18747
18748 ctx.save();
18749 ctx.scale(1, -1);
18750 ctx.fillStyle = '#0f0';
18751 ctx.fillRect(50, -50, 50, 50);
18752 ctx.restore();
18753 isPixel(ctx, 25,25, 0,255,0,255, 0);
18754 isPixel(ctx, 75,25, 0,255,0,255, 0);
18755
18756
18757 }
18758 </script>
18759
18760 <!-- [[[ test_2d.transformation.scale.nonfinite.html ]]] -->
18761
18762 <p>Canvas test: 2d.transformation.scale.nonfinite</p>
18763 <!-- Testing: scale() with Infinity/NaN is ignored -->
18764 <canvas id="c597" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18765 <script>
18766
18767
18768 function test_2d_transformation_scale_nonfinite() {
18769
18770 var canvas = document.getElementById('c597');
18771 var ctx = canvas.getContext('2d');
18772
18773 var _thrown_outer = false;
18774 try {
18775
18776 ctx.fillStyle = '#f00';
18777 ctx.fillRect(0, 0, 100, 50);
18778
18779 ctx.translate(100, 10);
18780 ctx.scale(Infinity, 0.1);
18781 ctx.scale(-Infinity, 0.1);
18782 ctx.scale(NaN, 0.1);
18783 ctx.scale(0.1, Infinity);
18784 ctx.scale(0.1, -Infinity);
18785 ctx.scale(0.1, NaN);
18786 ctx.scale(Infinity, Infinity);
18787
18788 ctx.fillStyle = '#0f0';
18789 ctx.fillRect(-100, -10, 100, 50);
18790
18791 isPixel(ctx, 50,25, 0,255,0,255, 0);
18792
18793 } catch (e) {
18794     _thrown_outer = true;
18795 }
18796 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
18797
18798
18799 }
18800 </script>
18801
18802 <!-- [[[ test_2d.transformation.scale.zero.html ]]] -->
18803
18804 <p>Canvas test: 2d.transformation.scale.zero</p>
18805 <!-- Testing: scale() with a scale factor of zero works -->
18806 <canvas id="c598" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18807 <script>
18808
18809
18810 function test_2d_transformation_scale_zero() {
18811
18812 var canvas = document.getElementById('c598');
18813 var ctx = canvas.getContext('2d');
18814
18815 ctx.fillStyle = '#0f0';
18816 ctx.fillRect(0, 0, 100, 50);
18817
18818 ctx.save();
18819 ctx.translate(50, 0);
18820 ctx.scale(0, 1);
18821 ctx.fillStyle = '#f00';
18822 ctx.fillRect(0, 0, 100, 50);
18823 ctx.restore();
18824
18825 ctx.save();
18826 ctx.translate(0, 25);
18827 ctx.scale(1, 0);
18828 ctx.fillStyle = '#f00';
18829 ctx.fillRect(0, 0, 100, 50);
18830 ctx.restore();
18831 isPixel(ctx, 50,25, 0,255,0,255, 0);
18832
18833
18834 }
18835 </script>
18836
18837 <!-- [[[ test_2d.transformation.setTransform.multiple.html ]]] -->
18838
18839 <p>Canvas test: 2d.transformation.setTransform.multiple</p>
18840 <canvas id="c599" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18841 <script>
18842
18843
18844 function test_2d_transformation_setTransform_multiple() {
18845
18846 var canvas = document.getElementById('c599');
18847 var ctx = canvas.getContext('2d');
18848
18849 ctx.fillStyle = '#f00';
18850 ctx.fillRect(0, 0, 100, 50);
18851
18852 ctx.setTransform(1/2,0, 0,1/2, 0,0);
18853 ctx.setTransform(2,0, 0,2, 0,0);
18854 ctx.fillStyle = '#0f0';
18855 ctx.fillRect(0, 0, 50, 25);
18856 isPixel(ctx, 75,35, 0,255,0,255, 0);
18857
18858
18859 }
18860 </script>
18861
18862 <!-- [[[ test_2d.transformation.setTransform.nonfinite.html ]]] -->
18863
18864 <p>Canvas test: 2d.transformation.setTransform.nonfinite</p>
18865 <!-- Testing: setTransform() with Infinity/NaN is ignored -->
18866 <canvas id="c600" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18867 <script>
18868
18869
18870 function test_2d_transformation_setTransform_nonfinite() {
18871
18872 var canvas = document.getElementById('c600');
18873 var ctx = canvas.getContext('2d');
18874
18875 var _thrown_outer = false;
18876 try {
18877
18878 ctx.fillStyle = '#f00';
18879 ctx.fillRect(0, 0, 100, 50);
18880
18881 ctx.translate(100, 10);
18882 ctx.setTransform(Infinity, 0, 0, 0, 0, 0);
18883 ctx.setTransform(-Infinity, 0, 0, 0, 0, 0);
18884 ctx.setTransform(NaN, 0, 0, 0, 0, 0);
18885 ctx.setTransform(0, Infinity, 0, 0, 0, 0);
18886 ctx.setTransform(0, -Infinity, 0, 0, 0, 0);
18887 ctx.setTransform(0, NaN, 0, 0, 0, 0);
18888 ctx.setTransform(0, 0, Infinity, 0, 0, 0);
18889 ctx.setTransform(0, 0, -Infinity, 0, 0, 0);
18890 ctx.setTransform(0, 0, NaN, 0, 0, 0);
18891 ctx.setTransform(0, 0, 0, Infinity, 0, 0);
18892 ctx.setTransform(0, 0, 0, -Infinity, 0, 0);
18893 ctx.setTransform(0, 0, 0, NaN, 0, 0);
18894 ctx.setTransform(0, 0, 0, 0, Infinity, 0);
18895 ctx.setTransform(0, 0, 0, 0, -Infinity, 0);
18896 ctx.setTransform(0, 0, 0, 0, NaN, 0);
18897 ctx.setTransform(0, 0, 0, 0, 0, Infinity);
18898 ctx.setTransform(0, 0, 0, 0, 0, -Infinity);
18899 ctx.setTransform(0, 0, 0, 0, 0, NaN);
18900 ctx.setTransform(Infinity, Infinity, 0, 0, 0, 0);
18901 ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, 0);
18902 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, 0);
18903 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
18904 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
18905 ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
18906 ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, 0);
18907 ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
18908 ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, Infinity);
18909 ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, 0);
18910 ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, 0);
18911 ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
18912 ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, Infinity);
18913 ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, 0);
18914 ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, Infinity);
18915 ctx.setTransform(Infinity, Infinity, 0, 0, 0, Infinity);
18916 ctx.setTransform(Infinity, 0, Infinity, 0, 0, 0);
18917 ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, 0);
18918 ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, 0);
18919 ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
18920 ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, Infinity);
18921 ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, 0);
18922 ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, Infinity);
18923 ctx.setTransform(Infinity, 0, Infinity, 0, 0, Infinity);
18924 ctx.setTransform(Infinity, 0, 0, Infinity, 0, 0);
18925 ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, 0);
18926 ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, Infinity);
18927 ctx.setTransform(Infinity, 0, 0, Infinity, 0, Infinity);
18928 ctx.setTransform(Infinity, 0, 0, 0, Infinity, 0);
18929 ctx.setTransform(Infinity, 0, 0, 0, Infinity, Infinity);
18930 ctx.setTransform(Infinity, 0, 0, 0, 0, Infinity);
18931 ctx.setTransform(0, Infinity, Infinity, 0, 0, 0);
18932 ctx.setTransform(0, Infinity, Infinity, Infinity, 0, 0);
18933 ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, 0);
18934 ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
18935 ctx.setTransform(0, Infinity, Infinity, Infinity, 0, Infinity);
18936 ctx.setTransform(0, Infinity, Infinity, 0, Infinity, 0);
18937 ctx.setTransform(0, Infinity, Infinity, 0, Infinity, Infinity);
18938 ctx.setTransform(0, Infinity, Infinity, 0, 0, Infinity);
18939 ctx.setTransform(0, Infinity, 0, Infinity, 0, 0);
18940 ctx.setTransform(0, Infinity, 0, Infinity, Infinity, 0);
18941 ctx.setTransform(0, Infinity, 0, Infinity, Infinity, Infinity);
18942 ctx.setTransform(0, Infinity, 0, Infinity, 0, Infinity);
18943 ctx.setTransform(0, Infinity, 0, 0, Infinity, 0);
18944 ctx.setTransform(0, Infinity, 0, 0, Infinity, Infinity);
18945 ctx.setTransform(0, Infinity, 0, 0, 0, Infinity);
18946 ctx.setTransform(0, 0, Infinity, Infinity, 0, 0);
18947 ctx.setTransform(0, 0, Infinity, Infinity, Infinity, 0);
18948 ctx.setTransform(0, 0, Infinity, Infinity, Infinity, Infinity);
18949 ctx.setTransform(0, 0, Infinity, Infinity, 0, Infinity);
18950 ctx.setTransform(0, 0, Infinity, 0, Infinity, 0);
18951 ctx.setTransform(0, 0, Infinity, 0, Infinity, Infinity);
18952 ctx.setTransform(0, 0, Infinity, 0, 0, Infinity);
18953 ctx.setTransform(0, 0, 0, Infinity, Infinity, 0);
18954 ctx.setTransform(0, 0, 0, Infinity, Infinity, Infinity);
18955 ctx.setTransform(0, 0, 0, Infinity, 0, Infinity);
18956 ctx.setTransform(0, 0, 0, 0, Infinity, Infinity);
18957
18958 ctx.fillStyle = '#0f0';
18959 ctx.fillRect(-100, -10, 100, 50);
18960
18961 isPixel(ctx, 50,25, 0,255,0,255, 0);
18962
18963 } catch (e) {
18964     _thrown_outer = true;
18965 }
18966 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
18967
18968
18969 }
18970 </script>
18971
18972 <!-- [[[ test_2d.transformation.setTransform.skewed.html ]]] -->
18973
18974 <p>Canvas test: 2d.transformation.setTransform.skewed</p>
18975 <canvas id="c601" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
18976 <script>
18977
18978
18979 function test_2d_transformation_setTransform_skewed() {
18980
18981 var canvas = document.getElementById('c601');
18982 var ctx = canvas.getContext('2d');
18983
18984 // Create green with a red square ring inside it
18985 ctx.fillStyle = '#0f0';
18986 ctx.fillRect(0, 0, 100, 50);
18987 ctx.fillStyle = '#f00';
18988 ctx.fillRect(20, 10, 60, 30);
18989 ctx.fillStyle = '#0f0';
18990 ctx.fillRect(40, 20, 20, 10);
18991
18992 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly
18993 ctx.setTransform(1,4, 2,3, 5,6);
18994 // Post-transform coordinates:
18995 //   [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
18996 // Hence pre-transform coordinates:
18997 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
18998          [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
18999          [-7.4,11.2]];
19000 ctx.beginPath();
19001 ctx.moveTo(pts[0][0], pts[0][1]);
19002 for (var i = 0; i < pts.length; ++i)
19003     ctx.lineTo(pts[i][0], pts[i][1]);
19004 ctx.fill();
19005 isPixel(ctx, 21,11, 0,255,0,255, 0);
19006 isPixel(ctx, 79,11, 0,255,0,255, 0);
19007 isPixel(ctx, 21,39, 0,255,0,255, 0);
19008 isPixel(ctx, 79,39, 0,255,0,255, 0);
19009 isPixel(ctx, 39,19, 0,255,0,255, IsAzureSkia() ? 1 : 0);
19010 isPixel(ctx, 61,19, 0,255,0,255, 0);
19011 isPixel(ctx, 39,31, 0,255,0,255, 0);
19012 isPixel(ctx, 61,31, 0,255,0,255, 0);
19013
19014
19015 }
19016 </script>
19017
19018 <!-- [[[ test_2d.transformation.transform.identity.html ]]] -->
19019
19020 <p>Canvas test: 2d.transformation.transform.identity</p>
19021 <!-- Testing: transform() with the identity matrix does nothing -->
19022 <canvas id="c602" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19023 <script>
19024
19025
19026 function test_2d_transformation_transform_identity() {
19027
19028 var canvas = document.getElementById('c602');
19029 var ctx = canvas.getContext('2d');
19030
19031 ctx.fillStyle = '#f00';
19032 ctx.fillRect(0, 0, 100, 50);
19033
19034 ctx.transform(1,0, 0,1, 0,0);
19035 ctx.fillStyle = '#0f0';
19036 ctx.fillRect(0, 0, 100, 50);
19037 isPixel(ctx, 50,25, 0,255,0,255, 0);
19038
19039
19040 }
19041
19042 </script>
19043
19044 <!-- [[[ test_2d.transformation.transform.multiply.html ]]] -->
19045
19046 <p>Canvas test: 2d.transformation.transform.multiply</p>
19047 <!-- Testing: transform() multiplies the CTM -->
19048 <canvas id="c603" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19049 <script>
19050
19051
19052 function test_2d_transformation_transform_multiply() {
19053
19054 var canvas = document.getElementById('c603');
19055 var ctx = canvas.getContext('2d');
19056
19057 ctx.fillStyle = '#f00';
19058 ctx.fillRect(0, 0, 100, 50);
19059
19060 ctx.transform(1,2, 3,4, 5,6);
19061 ctx.transform(-2,1, 3/2,-1/2, 1,-2);
19062 ctx.fillStyle = '#0f0';
19063 ctx.fillRect(0, 0, 100, 50);
19064 isPixel(ctx, 50,25, 0,255,0,255, 0);
19065
19066
19067 }
19068 </script>
19069
19070 <!-- [[[ test_2d.transformation.transform.nonfinite.html ]]] -->
19071
19072 <p>Canvas test: 2d.transformation.transform.nonfinite</p>
19073 <!-- Testing: transform() with Infinity/NaN is ignored -->
19074 <canvas id="c604" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19075 <script>
19076
19077
19078 function test_2d_transformation_transform_nonfinite() {
19079
19080 var canvas = document.getElementById('c604');
19081 var ctx = canvas.getContext('2d');
19082
19083 var _thrown_outer = false;
19084 try {
19085
19086 ctx.fillStyle = '#f00';
19087 ctx.fillRect(0, 0, 100, 50);
19088
19089 ctx.translate(100, 10);
19090 ctx.transform(Infinity, 0, 0, 0, 0, 0);
19091 ctx.transform(-Infinity, 0, 0, 0, 0, 0);
19092 ctx.transform(NaN, 0, 0, 0, 0, 0);
19093 ctx.transform(0, Infinity, 0, 0, 0, 0);
19094 ctx.transform(0, -Infinity, 0, 0, 0, 0);
19095 ctx.transform(0, NaN, 0, 0, 0, 0);
19096 ctx.transform(0, 0, Infinity, 0, 0, 0);
19097 ctx.transform(0, 0, -Infinity, 0, 0, 0);
19098 ctx.transform(0, 0, NaN, 0, 0, 0);
19099 ctx.transform(0, 0, 0, Infinity, 0, 0);
19100 ctx.transform(0, 0, 0, -Infinity, 0, 0);
19101 ctx.transform(0, 0, 0, NaN, 0, 0);
19102 ctx.transform(0, 0, 0, 0, Infinity, 0);
19103 ctx.transform(0, 0, 0, 0, -Infinity, 0);
19104 ctx.transform(0, 0, 0, 0, NaN, 0);
19105 ctx.transform(0, 0, 0, 0, 0, Infinity);
19106 ctx.transform(0, 0, 0, 0, 0, -Infinity);
19107 ctx.transform(0, 0, 0, 0, 0, NaN);
19108 ctx.transform(Infinity, Infinity, 0, 0, 0, 0);
19109 ctx.transform(Infinity, Infinity, Infinity, 0, 0, 0);
19110 ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, 0);
19111 ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
19112 ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
19113 ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
19114 ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, 0);
19115 ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
19116 ctx.transform(Infinity, Infinity, Infinity, 0, 0, Infinity);
19117 ctx.transform(Infinity, Infinity, 0, Infinity, 0, 0);
19118 ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, 0);
19119 ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
19120 ctx.transform(Infinity, Infinity, 0, Infinity, 0, Infinity);
19121 ctx.transform(Infinity, Infinity, 0, 0, Infinity, 0);
19122 ctx.transform(Infinity, Infinity, 0, 0, Infinity, Infinity);
19123 ctx.transform(Infinity, Infinity, 0, 0, 0, Infinity);
19124 ctx.transform(Infinity, 0, Infinity, 0, 0, 0);
19125 ctx.transform(Infinity, 0, Infinity, Infinity, 0, 0);
19126 ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, 0);
19127 ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
19128 ctx.transform(Infinity, 0, Infinity, Infinity, 0, Infinity);
19129 ctx.transform(Infinity, 0, Infinity, 0, Infinity, 0);
19130 ctx.transform(Infinity, 0, Infinity, 0, Infinity, Infinity);
19131 ctx.transform(Infinity, 0, Infinity, 0, 0, Infinity);
19132 ctx.transform(Infinity, 0, 0, Infinity, 0, 0);
19133 ctx.transform(Infinity, 0, 0, Infinity, Infinity, 0);
19134 ctx.transform(Infinity, 0, 0, Infinity, Infinity, Infinity);
19135 ctx.transform(Infinity, 0, 0, Infinity, 0, Infinity);
19136 ctx.transform(Infinity, 0, 0, 0, Infinity, 0);
19137 ctx.transform(Infinity, 0, 0, 0, Infinity, Infinity);
19138 ctx.transform(Infinity, 0, 0, 0, 0, Infinity);
19139 ctx.transform(0, Infinity, Infinity, 0, 0, 0);
19140 ctx.transform(0, Infinity, Infinity, Infinity, 0, 0);
19141 ctx.transform(0, Infinity, Infinity, Infinity, Infinity, 0);
19142 ctx.transform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
19143 ctx.transform(0, Infinity, Infinity, Infinity, 0, Infinity);
19144 ctx.transform(0, Infinity, Infinity, 0, Infinity, 0);
19145 ctx.transform(0, Infinity, Infinity, 0, Infinity, Infinity);
19146 ctx.transform(0, Infinity, Infinity, 0, 0, Infinity);
19147 ctx.transform(0, Infinity, 0, Infinity, 0, 0);
19148 ctx.transform(0, Infinity, 0, Infinity, Infinity, 0);
19149 ctx.transform(0, Infinity, 0, Infinity, Infinity, Infinity);
19150 ctx.transform(0, Infinity, 0, Infinity, 0, Infinity);
19151 ctx.transform(0, Infinity, 0, 0, Infinity, 0);
19152 ctx.transform(0, Infinity, 0, 0, Infinity, Infinity);
19153 ctx.transform(0, Infinity, 0, 0, 0, Infinity);
19154 ctx.transform(0, 0, Infinity, Infinity, 0, 0);
19155 ctx.transform(0, 0, Infinity, Infinity, Infinity, 0);
19156 ctx.transform(0, 0, Infinity, Infinity, Infinity, Infinity);
19157 ctx.transform(0, 0, Infinity, Infinity, 0, Infinity);
19158 ctx.transform(0, 0, Infinity, 0, Infinity, 0);
19159 ctx.transform(0, 0, Infinity, 0, Infinity, Infinity);
19160 ctx.transform(0, 0, Infinity, 0, 0, Infinity);
19161 ctx.transform(0, 0, 0, Infinity, Infinity, 0);
19162 ctx.transform(0, 0, 0, Infinity, Infinity, Infinity);
19163 ctx.transform(0, 0, 0, Infinity, 0, Infinity);
19164 ctx.transform(0, 0, 0, 0, Infinity, Infinity);
19165
19166 ctx.fillStyle = '#0f0';
19167 ctx.fillRect(-100, -10, 100, 50);
19168
19169 isPixel(ctx, 50,25, 0,255,0,255, 0);
19170
19171 } catch (e) {
19172     _thrown_outer = true;
19173 }
19174 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19175
19176
19177 }
19178 </script>
19179
19180 <!-- [[[ test_2d.transformation.transform.skewed.html ]]] -->
19181
19182 <p>Canvas test: 2d.transformation.transform.skewed</p>
19183 <!-- Testing: transform() with skewy matrix transforms correctly -->
19184 <canvas id="c605" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19185 <script>
19186
19187
19188 function test_2d_transformation_transform_skewed() {
19189
19190 var canvas = document.getElementById('c605');
19191 var ctx = canvas.getContext('2d');
19192
19193 // Create green with a red square ring inside it
19194 ctx.fillStyle = '#0f0';
19195 ctx.fillRect(0, 0, 100, 50);
19196 ctx.fillStyle = '#f00';
19197 ctx.fillRect(20, 10, 60, 30);
19198 ctx.fillStyle = '#0f0';
19199 ctx.fillRect(40, 20, 20, 10);
19200
19201 // Draw a skewed shape to fill that gap, to make sure it is aligned correctly
19202 ctx.transform(1,4, 2,3, 5,6);
19203 // Post-transform coordinates:
19204 //   [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
19205 // Hence pre-transform coordinates:
19206 var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
19207          [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
19208          [-7.4,11.2]];
19209 ctx.beginPath();
19210 ctx.moveTo(pts[0][0], pts[0][1]);
19211 for (var i = 0; i < pts.length; ++i)
19212     ctx.lineTo(pts[i][0], pts[i][1]);
19213 ctx.fill();
19214 isPixel(ctx, 21,11, 0,255,0,255, 0);
19215 isPixel(ctx, 79,11, 0,255,0,255, 0);
19216 isPixel(ctx, 21,39, 0,255,0,255, 0);
19217 isPixel(ctx, 79,39, 0,255,0,255, 0);
19218 isPixel(ctx, 39,19, 0,255,0,255, IsAzureSkia() ? 1 : 0);
19219 isPixel(ctx, 61,19, 0,255,0,255, 0);
19220 isPixel(ctx, 39,31, 0,255,0,255, 0);
19221 isPixel(ctx, 61,31, 0,255,0,255, 0);
19222
19223
19224 }
19225 </script>
19226
19227 <!-- [[[ test_2d.transformation.translate.basic.html ]]] -->
19228
19229 <p>Canvas test: 2d.transformation.translate.basic</p>
19230 <!-- Testing: translate() works -->
19231 <canvas id="c606" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19232 <script>
19233
19234
19235 function test_2d_transformation_translate_basic() {
19236
19237 var canvas = document.getElementById('c606');
19238 var ctx = canvas.getContext('2d');
19239
19240 ctx.fillStyle = '#f00';
19241 ctx.fillRect(0, 0, 100, 50);
19242
19243 ctx.translate(100, 50);
19244 ctx.fillStyle = '#0f0';
19245 ctx.fillRect(-100, -50, 100, 50);
19246 isPixel(ctx, 90,40, 0,255,0,255, 0);
19247
19248
19249 }
19250 </script>
19251
19252 <!-- [[[ test_2d.transformation.translate.nonfinite.html ]]] -->
19253
19254 <p>Canvas test: 2d.transformation.translate.nonfinite</p>
19255 <!-- Testing: translate() with Infinity/NaN is ignored -->
19256 <canvas id="c607" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19257 <script>
19258
19259
19260 function test_2d_transformation_translate_nonfinite() {
19261
19262 var canvas = document.getElementById('c607');
19263 var ctx = canvas.getContext('2d');
19264
19265 var _thrown_outer = false;
19266 try {
19267
19268 ctx.fillStyle = '#f00';
19269 ctx.fillRect(0, 0, 100, 50);
19270
19271 ctx.translate(100, 10);
19272 ctx.translate(Infinity, 0.1);
19273 ctx.translate(-Infinity, 0.1);
19274 ctx.translate(NaN, 0.1);
19275 ctx.translate(0.1, Infinity);
19276 ctx.translate(0.1, -Infinity);
19277 ctx.translate(0.1, NaN);
19278 ctx.translate(Infinity, Infinity);
19279
19280 ctx.fillStyle = '#0f0';
19281 ctx.fillRect(-100, -10, 100, 50);
19282
19283 isPixel(ctx, 50,25, 0,255,0,255, 0);
19284
19285 } catch (e) {
19286     _thrown_outer = true;
19287 }
19288 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19289
19290
19291 }
19292 </script>
19293
19294 <!-- [[[ test_2d.type.exists.html ]]] -->
19295
19296 <p>Canvas test: 2d.type.exists</p>
19297 <!-- Testing: The 2D context interface is a property of 'window' -->
19298 <canvas id="c609" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19299 <script>
19300
19301 function test_2d_type_exists() {
19302
19303 var canvas = document.getElementById('c609');
19304 var ctx = canvas.getContext('2d');
19305
19306 ok(window.CanvasRenderingContext2D, "window.CanvasRenderingContext2D");
19307
19308
19309 }
19310 </script>
19311
19312 <!-- [[[ test_2d.type.extend.html ]]] -->
19313
19314 <p>Canvas test: 2d.type.extend</p>
19315 <!-- Testing: Interface methods can be added -->
19316 <canvas id="c610" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19317 <script>
19318
19319
19320 function test_2d_type_extend() {
19321
19322 var canvas = document.getElementById('c610');
19323 var ctx = canvas.getContext('2d');
19324
19325 window.CanvasRenderingContext2D.prototype.fillRectGreen = function (x, y, w, h)
19326 {
19327     this.fillStyle = '#0f0';
19328     this.fillRect(x, y, w, h);
19329 };
19330 ctx.fillStyle = '#f00';
19331 ctx.fillRectGreen(0, 0, 100, 50);
19332 isPixel(ctx, 50,25, 0,255,0,255, 0);
19333
19334
19335 }
19336 </script>
19337
19338 <!-- [[[ test_2d.type.prototype.html ]]] -->
19339
19340 <p>Canvas test: 2d.type.prototype</p>
19341 <!-- Testing: window.CanvasRenderingContext2D.prototype is { DontDelete, ReadOnly }, and its methods are not -->
19342 <canvas id="c611" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19343 <script>
19344
19345 function test_2d_type_prototype() {
19346
19347 var canvas = document.getElementById('c611');
19348 var ctx = canvas.getContext('2d');
19349
19350 var fill = window.CanvasRenderingContext2D.prototype.fill;
19351 ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
19352 ok(window.CanvasRenderingContext2D.prototype.fill, "window.CanvasRenderingContext2D.prototype.fill");
19353 window.CanvasRenderingContext2D.prototype = null;
19354 ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
19355 delete window.CanvasRenderingContext2D.prototype;
19356 ok(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
19357 window.CanvasRenderingContext2D.prototype.fill = 1;
19358 ok(window.CanvasRenderingContext2D.prototype.fill === 1, "window.CanvasRenderingContext2D.prototype.fill === 1");
19359 delete window.CanvasRenderingContext2D.prototype.fill;
19360 ok(window.CanvasRenderingContext2D.prototype.fill === undefined, "window.CanvasRenderingContext2D.prototype.fill === undefined");
19361
19362 //restore the original method to ensure that other tests can run successfully
19363 window.CanvasRenderingContext2D.prototype.fill = fill;
19364 }
19365 </script>
19366
19367 <!-- [[[ test_2d.type.replace.html ]]] -->
19368
19369 <p>Canvas test: 2d.type.replace</p>
19370 <!-- Testing: Interface methods can be overridden -->
19371 <canvas id="c612" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19372 <script>
19373
19374
19375 function test_2d_type_replace() {
19376
19377 var canvas = document.getElementById('c612');
19378 var ctx = canvas.getContext('2d');
19379
19380 var fillRect = window.CanvasRenderingContext2D.prototype.fillRect;
19381 window.CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h)
19382 {
19383     this.fillStyle = '#0f0';
19384     fillRect.call(this, x, y, w, h);
19385 };
19386 ctx.fillStyle = '#f00';
19387 ctx.fillRect(0, 0, 100, 50);
19388 isPixel(ctx, 50,25, 0,255,0,255, 0);
19389
19390 //restore the original method to ensure that other tests can run successfully
19391 window.CanvasRenderingContext2D.prototype.fillRect = fillRect;
19392 }
19393 </script>
19394
19395 <!-- [[[ test_2d.voidreturn.html ]]] -->
19396
19397 <p>Canvas test: 2d.voidreturn</p>
19398 <!-- Testing: void methods return undefined -->
19399 <canvas id="c613" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19400 <script>
19401
19402 function test_2d_voidreturn() {
19403
19404 var canvas = document.getElementById('c613');
19405 var ctx = canvas.getContext('2d');
19406
19407 ok(ctx.save() === undefined, "ctx.save() === undefined");
19408 ok(ctx.restore() === undefined, "ctx.restore() === undefined");
19409 ok(ctx.scale(1, 1) === undefined, "ctx.scale(1, 1) === undefined");
19410 ok(ctx.rotate(0) === undefined, "ctx.rotate(0) === undefined");
19411 ok(ctx.translate(0, 0) === undefined, "ctx.translate(0, 0) === undefined");
19412 if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
19413     ok(ctx.transform(1, 0, 0, 1, 0, 0) === undefined, "ctx.transform(1, 0, 0, 1, 0, 0) === undefined");
19414 }
19415 if (ctx.setTransform) {
19416     ok(ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined, "ctx.setTransform(1, 0, 0, 1, 0, 0) === undefined");
19417 }
19418 if (ctx.resetTransform) {
19419     ok(ctx.resetTransform() === undefined, "ctx.resetTransform() === undefined");
19420 }
19421 ok(ctx.clearRect(0, 0, 0, 0) === undefined, "ctx.clearRect(0, 0, 0, 0) === undefined");
19422 ok(ctx.fillRect(0, 0, 0, 0) === undefined, "ctx.fillRect(0, 0, 0, 0) === undefined");
19423 ok(ctx.strokeRect(0, 0, 0, 0) === undefined, "ctx.strokeRect(0, 0, 0, 0) === undefined");
19424 ok(ctx.beginPath() === undefined, "ctx.beginPath() === undefined");
19425 ok(ctx.closePath() === undefined, "ctx.closePath() === undefined");
19426 ok(ctx.moveTo(0, 0) === undefined, "ctx.moveTo(0, 0) === undefined");
19427 ok(ctx.lineTo(0, 0) === undefined, "ctx.lineTo(0, 0) === undefined");
19428 ok(ctx.quadraticCurveTo(0, 0, 0, 0) === undefined, "ctx.quadraticCurveTo(0, 0, 0, 0) === undefined");
19429 ok(ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined, "ctx.bezierCurveTo(0, 0, 0, 0, 0, 0) === undefined");
19430 ok(ctx.arcTo(0, 0, 0, 0, 1) === undefined, "ctx.arcTo(0, 0, 0, 0, 1) === undefined");
19431 ok(ctx.rect(0, 0, 0, 0) === undefined, "ctx.rect(0, 0, 0, 0) === undefined");
19432 ok(ctx.arc(0, 0, 1, 0, 0, true) === undefined, "ctx.arc(0, 0, 1, 0, 0, true) === undefined");
19433 ok(ctx.fill() === undefined, "ctx.fill() === undefined");
19434 ok(ctx.stroke() === undefined, "ctx.stroke() === undefined");
19435 ok(ctx.clip() === undefined, "ctx.clip() === undefined");
19436 if (ctx.putImageData) {
19437     ok(ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined, "ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0) === undefined");
19438 }
19439 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");
19440 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");
19441 ok(ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined, "ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white') === undefined");
19442
19443
19444 }
19445 </script>
19446 <img src="image_yellow.png" id="yellow_11.png" class="resource">
19447
19448 <!-- [[[ test_bug397524.html ]]] -->
19449
19450 <p>Test for Bug 397524</p>
19451 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=397524">Mozilla Bug 397524</a>
19452 <p id="display">
19453   <canvas id="canvas1" width="1" height="1"></canvas>
19454   <canvas id="canvas2" width="1" height="1"></canvas>
19455   <canvas id="canvas3" width="1" height="1"></canvas>
19456   <img id="i1", src="image_green-1x1.png">
19457   <img id="i2" src="http://example.com/tests/dom/canvas/test/image_green-1x1.png">
19458   <img id="i3" src="image_green-redirect">
19459 </p>
19460 <div id="content" style="display: none">
19461
19462 </div>
19463 <pre id="test">
19464 <script class="testbody" type="text/javascript">
19465
19466 /** Test for Bug 397524 **/
19467
19468 function draw(n) {
19469   $("canvas" + n).getContext('2d').drawImage($("i" + n), 0, 0);
19470 }
19471
19472 function test_bug397524() {
19473   draw(1);
19474   draw(2);
19475   draw(3);
19476
19477   // Should be able to get the data out of the first canvas
19478   $("canvas1").toDataURL("image/png");
19479
19480   // Should not be able to get the data out of a cross-site load
19481   var gotData = false;
19482   try {
19483     $("canvas2").toDataURL("image/png");
19484     gotData = true;
19485   } catch (ex) {
19486     if (ex.code != 18 || ex.name != "SecurityError") {
19487       throw ex;
19488     }
19489   }
19490   is(gotData, false, "Shouldn't be able to read images cross-site!");
19491
19492   // Should not be able to get the data out of a redirected cross-site load
19493   var gotData = false;
19494   try {
19495     $("canvas3").toDataURL("image/png");
19496     gotData = true;
19497   } catch (ex) {
19498     if (ex.code != 18 || ex.name != "SecurityError") {
19499       throw ex;
19500     }
19501   }
19502   is(gotData, false, "Shouldn't be able to read images redirected cross-site!");
19503
19504 }
19505
19506 </script>
19507 </pre>
19508
19509 <!-- [[[ test_bug405982.html ]]] -->
19510
19511 <p>Canvas test: toDataURL.png</p>
19512 <canvas id="c614" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19513 <script>
19514 function test_bug405982() {
19515
19516 var canvas = SpecialPowers.wrap(document.getElementById('c614'));
19517 var ctx = canvas.getContext('2d');
19518
19519 var _threw = false;
19520 try {
19521   var data = canvas.toDataURL('image/png', 'quality=100');
19522 }
19523 catch (e) {
19524   _threw = true;
19525 }
19526 ok(!_threw, "Should not throw an exception for invalid args to png encoder");
19527
19528 _threw = false;
19529 try {
19530   var data = canvas.toDataURL('image/jpeg', 'foobar=true');
19531 }
19532 catch (e) {
19533   _threw = true;
19534 }
19535 ok(!_threw, "Should not throw an exception for invalid args to jpeg encoder");
19536
19537 }
19538 </script>
19539 <!-- [[[ test_context.arguments.extra.html ]]] -->
19540
19541 <p>Canvas test: context.arguments.extra</p>
19542 <canvas id="c615" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19543 <script>
19544
19545 function test_context_arguments_extra() {
19546
19547 var canvas = document.getElementById('c615');
19548 var ctx = canvas.getContext('2d');
19549
19550 ok(canvas.getContext('2d', 'foo') !== null, "canvas.getContext('2d', 'foo') !== null");
19551
19552
19553 }
19554 </script>
19555
19556 <!-- [[[ test_context.arguments.missing.html ]]] -->
19557
19558 <p>Canvas test: context.arguments.missing</p>
19559 <canvas id="c616" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19560 <script>
19561
19562 function test_context_arguments_missing() {
19563
19564 var canvas = document.getElementById('c616');
19565 var ctx = canvas.getContext('2d');
19566
19567 var _thrown = undefined; try {
19568   canvas.getContext();
19569 } catch (e) { _thrown = e }; todo(_thrown && _thrown.name == "NotSupportedError" && _thrown.code == DOMException.NOT_SUPPORTED_ERR, "should throw NotSupportedError");
19570
19571
19572 }
19573 </script>
19574
19575 <!-- [[[ test_context.casesensitive.html ]]] -->
19576
19577 <p>Canvas test: context.casesensitive - bug 401788</p>
19578 <!-- Testing: Context name "2D" is unrecognised; matching is case sensitive -->
19579 <canvas id="c617" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19580 <script>
19581
19582 function test_context_casesensitive() {
19583
19584 var canvas = document.getElementById('c617');
19585 var ctx = canvas.getContext('2d');
19586
19587 var _thrown_outer = false;
19588 try {
19589
19590 ok(canvas.getContext('2D') === null, "canvas.getContext('2D') === null");
19591
19592 } catch (e) {
19593     _thrown_outer = true;
19594 }
19595 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19596
19597
19598 }
19599 </script>
19600
19601 <!-- [[[ test_context.emptystring.html ]]] -->
19602
19603 <p>Canvas test: context.emptystring - bug 401788</p>
19604 <!-- Testing: getContext with empty string returns null -->
19605 <canvas id="c618" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19606 <script>
19607
19608 function test_context_emptystring() {
19609
19610 var canvas = document.getElementById('c618');
19611 var ctx = canvas.getContext('2d');
19612
19613 var _thrown_outer = false;
19614 try {
19615
19616 ok(canvas.getContext("") === null, "canvas.getContext(\"\") === null");
19617
19618 } catch (e) {
19619     _thrown_outer = true;
19620 }
19621 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19622
19623
19624 }
19625 </script>
19626
19627 <!-- [[[ test_context.unrecognised.badname.html ]]] -->
19628
19629 <p>Canvas test: context.unrecognised.badname - bug 401788</p>
19630 <!-- Testing: getContext with unrecognised context name returns null -->
19631 <canvas id="c619" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19632 <script>
19633
19634 function test_context_unrecognised_badname() {
19635
19636 var canvas = document.getElementById('c619');
19637 var ctx = canvas.getContext('2d');
19638
19639 var _thrown_outer = false;
19640 try {
19641
19642 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");
19643
19644 } catch (e) {
19645     _thrown_outer = true;
19646 }
19647 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19648
19649
19650 }
19651 </script>
19652
19653 <!-- [[[ test_context.unrecognised.badsuffix.html ]]] -->
19654
19655 <p>Canvas test: context.unrecognised.badsuffix - bug 401788</p>
19656 <!-- Testing: Context name "2d" plus a suffix is unrecognised -->
19657 <canvas id="c620" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19658 <script>
19659
19660 function test_context_unrecognised_badsuffix() {
19661
19662 var canvas = document.getElementById('c620');
19663 var ctx = canvas.getContext('2d');
19664
19665 var _thrown_outer = false;
19666 try {
19667
19668 ok(canvas.getContext("2d#") === null, "canvas.getContext(\"2d#\") === null");
19669
19670 } catch (e) {
19671     _thrown_outer = true;
19672 }
19673 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19674
19675
19676 }
19677 </script>
19678
19679 <!-- [[[ test_context.unrecognised.nullsuffix.html ]]] -->
19680
19681 <p>Canvas test: context.unrecognised.nullsuffix - bug 401788</p>
19682 <!-- Testing: Context name "2d" plus a "\0" suffix is unrecognised -->
19683 <canvas id="c621" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19684 <script>
19685
19686 function test_context_unrecognised_nullsuffix() {
19687
19688 var canvas = document.getElementById('c621');
19689 var ctx = canvas.getContext('2d');
19690
19691 var _thrown_outer = false;
19692 try {
19693
19694 ok(canvas.getContext("2d\0") === null, "canvas.getContext(\"2d\\0\") === null");
19695
19696 } catch (e) {
19697     _thrown_outer = true;
19698 }
19699 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19700
19701
19702 }
19703 </script>
19704
19705 <!-- [[[ test_context.unrecognised.unicode.html ]]] -->
19706
19707 <p>Canvas test: context.unrecognised.unicode - bug 401788</p>
19708 <!-- Testing: Context name which kind of looks like "2d" is unrecognised -->
19709 <canvas id="c622" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19710 <script>
19711
19712 function test_context_unrecognised_unicode() {
19713
19714 var canvas = document.getElementById('c622');
19715 var ctx = canvas.getContext('2d');
19716
19717 var _thrown_outer = false;
19718 try {
19719
19720 ok(canvas.getContext("2\uFF44") === null, "canvas.getContext(\"2\\uFF44\") === null"); // Fullwidth Latin Small Letter D
19721
19722 } catch (e) {
19723     _thrown_outer = true;
19724 }
19725 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
19726
19727
19728 }
19729 </script>
19730
19731 <!-- [[[ test_fallback.basic.html ]]] -->
19732
19733 <p>Canvas test: fallback.basic</p>
19734 <!-- Testing: Fallback content is inserted into the DOM -->
19735 <canvas id="c623" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19736 <script>
19737
19738 function test_fallback_basic() {
19739
19740 var canvas = document.getElementById('c623');
19741 var ctx = canvas.getContext('2d');
19742
19743 ok(canvas.childNodes.length == 1, "canvas.childNodes.length == 1");
19744
19745
19746 }
19747 </script>
19748
19749 <!-- [[[ test_fallback.multiple.html ]]] -->
19750
19751 <p>Canvas test: fallback.multiple</p>
19752 <!-- Testing: Fallback content with multiple elements -->
19753 <canvas id="c624" width="100" height="50"><p class="fallback">FAIL</p><p class="fallback">FAIL</p></canvas>
19754 <script>
19755
19756 function test_fallback_multiple() {
19757
19758 var canvas = document.getElementById('c624');
19759 var ctx = canvas.getContext('2d');
19760
19761 ok(canvas.childNodes.length == 2, "canvas.childNodes.length == 2");
19762
19763
19764 }
19765 </script>
19766
19767 <!-- [[[ test_fallback.nested.html ]]] -->
19768
19769 <p>Canvas test: fallback.nested</p>
19770 <!-- Testing: Fallback content containing another canvas (mostly testing parsers) -->
19771 <canvas id="c625" width="100" height="50"><canvas><p class="fallback">FAIL (fallback content)</p></canvas><p class="fallback">FAIL (fallback content)</p></canvas>
19772 <script>
19773
19774 function test_fallback_nested() {
19775
19776 var canvas = document.getElementById('c625');
19777 var ctx = canvas.getContext('2d');
19778
19779 ok(canvas.childNodes.length == 2, "canvas.childNodes.length == 2");
19780
19781
19782 }
19783 </script>
19784
19785 <!-- [[[ test_initial.colour.html ]]] -->
19786
19787 <p>Canvas test: initial.colour</p>
19788 <!-- Testing: Initial state is transparent black -->
19789 <canvas id="c626" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19790 <script>
19791
19792
19793 function test_initial_colour() {
19794
19795 var canvas = document.getElementById('c626');
19796 var ctx = canvas.getContext('2d');
19797
19798 isPixel(ctx, 20,20, 0,0,0,0, 0);
19799
19800
19801 }
19802 </script>
19803
19804 <!-- [[[ test_initial.reset.2dstate.html ]]] -->
19805
19806 <p>Canvas test: initial.reset.2dstate</p>
19807 <!-- Testing: Resetting the canvas state resets 2D state variables -->
19808 <canvas id="c627" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19809 <script>
19810
19811 function test_initial_reset_2dstate() {
19812
19813 var canvas = document.getElementById('c627');
19814 var ctx = canvas.getContext('2d');
19815
19816 canvas.width = 100;
19817 var default_val;
19818
19819 default_val = ctx.strokeStyle;
19820 ctx.strokeStyle = "#ff0000";
19821 canvas.width = 100;
19822 ok(ctx.strokeStyle === default_val, "ctx.strokeStyle === default_val");
19823
19824 default_val = ctx.fillStyle;
19825 ctx.fillStyle = "#ff0000";
19826 canvas.width = 100;
19827 ok(ctx.fillStyle === default_val, "ctx.fillStyle === default_val");
19828
19829 default_val = ctx.globalAlpha;
19830 ctx.globalAlpha = 0.5;
19831 canvas.width = 100;
19832 ok(ctx.globalAlpha === default_val, "ctx.globalAlpha === default_val");
19833
19834 default_val = ctx.lineWidth;
19835 ctx.lineWidth = 0.5;
19836 canvas.width = 100;
19837 ok(ctx.lineWidth === default_val, "ctx.lineWidth === default_val");
19838
19839 default_val = ctx.lineCap;
19840 ctx.lineCap = "round";
19841 canvas.width = 100;
19842 ok(ctx.lineCap === default_val, "ctx.lineCap === default_val");
19843
19844 default_val = ctx.lineJoin;
19845 ctx.lineJoin = "round";
19846 canvas.width = 100;
19847 ok(ctx.lineJoin === default_val, "ctx.lineJoin === default_val");
19848
19849 default_val = ctx.miterLimit;
19850 ctx.miterLimit = 0.5;
19851 canvas.width = 100;
19852 ok(ctx.miterLimit === default_val, "ctx.miterLimit === default_val");
19853
19854 default_val = ctx.shadowOffsetX;
19855 ctx.shadowOffsetX = 5;
19856 canvas.width = 100;
19857 ok(ctx.shadowOffsetX === default_val, "ctx.shadowOffsetX === default_val");
19858
19859 default_val = ctx.shadowOffsetY;
19860 ctx.shadowOffsetY = 5;
19861 canvas.width = 100;
19862 ok(ctx.shadowOffsetY === default_val, "ctx.shadowOffsetY === default_val");
19863
19864 default_val = ctx.shadowBlur;
19865 ctx.shadowBlur = 5;
19866 canvas.width = 100;
19867 ok(ctx.shadowBlur === default_val, "ctx.shadowBlur === default_val");
19868
19869 default_val = ctx.shadowColor;
19870 ctx.shadowColor = "#ff0000";
19871 canvas.width = 100;
19872 ok(ctx.shadowColor === default_val, "ctx.shadowColor === default_val");
19873
19874 default_val = ctx.globalCompositeOperation;
19875 ctx.globalCompositeOperation = "copy";
19876 canvas.width = 100;
19877 ok(ctx.globalCompositeOperation === default_val, "ctx.globalCompositeOperation === default_val");
19878
19879
19880 }
19881 </script>
19882
19883 <!-- [[[ test_initial.reset.clip.html ]]] -->
19884
19885 <p>Canvas test: initial.reset.clip</p>
19886 <!-- Testing: Resetting the canvas state resets the current clip region -->
19887 <canvas id="c628" width="100" height="50" style="background: #f00"><p class="fallback">FAIL (fallback content)</p></canvas>
19888 <script>
19889
19890
19891 function test_initial_reset_clip() {
19892
19893 var canvas = document.getElementById('c628');
19894 var ctx = canvas.getContext('2d');
19895
19896 canvas.width = 100;
19897 ctx.rect(0, 0, 1, 1);
19898 ctx.clip();
19899 canvas.width = 100;
19900 ctx.fillStyle = '#0f0';
19901 ctx.fillRect(0, 0, 100, 50);
19902 isPixel(ctx, 20,20, 0,255,0,255, 0);
19903
19904
19905 }
19906 </script>
19907
19908 <!-- [[[ test_initial.reset.different.html ]]] -->
19909
19910 <p>Canvas test: initial.reset.different</p>
19911 <!-- Testing: Changing size resets canvas to transparent black -->
19912 <canvas id="c629" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
19913 <script>
19914
19915
19916 function test_initial_reset_different() {
19917
19918 var canvas = document.getElementById('c629');
19919 var ctx = canvas.getContext('2d');
19920
19921 ctx.fillStyle = '#f00';
19922 ctx.fillRect(0, 0, 50, 50);
19923 isPixel(ctx, 20,20, 255,0,0,255, 0);
19924 canvas.width = 50;
19925 isPixel(ctx, 20,20, 0,0,0,0, 0);
19926
19927
19928 }
19929 </script>
19930
19931 <!-- [[[ test_initial.reset.gradient.html ]]] -->
19932
19933 <p>Canvas test: initial.reset.gradient</p>
19934 <!-- Testing: Resetting the canvas state does not invalidate any existing gradients -->
19935 <canvas id="c630" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19936 <script>
19937
19938
19939 function test_initial_reset_gradient() {
19940
19941 var canvas = document.getElementById('c630');
19942 var ctx = canvas.getContext('2d');
19943
19944 canvas.width = 50;
19945 var g = ctx.createLinearGradient(0, 0, 100, 0);
19946 g.addColorStop(0, '#0f0');
19947 g.addColorStop(1, '#0f0');
19948 canvas.width = 100;
19949 ctx.fillStyle = '#f00';
19950 ctx.fillRect(0, 0, 100, 50);
19951 ctx.fillStyle = g;
19952 ctx.fillRect(0, 0, 100, 50);
19953 isPixel(ctx, 50,25, 0,255,0,255, 0);
19954
19955
19956 }
19957 </script>
19958
19959 <!-- [[[ test_initial.reset.path.html ]]] -->
19960
19961 <p>Canvas test: initial.reset.path</p>
19962 <!-- Testing: Resetting the canvas state resets the current path -->
19963 <canvas id="c631" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
19964 <script>
19965
19966
19967 function test_initial_reset_path() {
19968
19969 var canvas = document.getElementById('c631');
19970 var ctx = canvas.getContext('2d');
19971
19972 canvas.width = 100;
19973 ctx.rect(0, 0, 100, 50);
19974 canvas.width = 100;
19975 ctx.fillStyle = '#f00';
19976 ctx.fill();
19977 isPixel(ctx, 20,20, 0,0,0,0, 0);
19978
19979
19980 }
19981 </script>
19982
19983 <!-- [[[ test_initial.reset.pattern.html ]]] -->
19984
19985 <p>Canvas test: initial.reset.pattern</p>
19986 <!-- Testing: Resetting the canvas state does not invalidate any existing patterns -->
19987 <canvas id="c632" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
19988 <script>
19989
19990
19991 function test_initial_reset_pattern() {
19992
19993 var canvas = document.getElementById('c632');
19994 var ctx = canvas.getContext('2d');
19995
19996 canvas.width = 50;
19997 ctx.fillStyle = '#0f0';
19998 ctx.fillRect(0, 0, 50, 50);
19999 var p = ctx.createPattern(canvas, 'repeat-x');
20000 canvas.width = 100;
20001 ctx.fillStyle = '#f00';
20002 ctx.fillRect(0, 0, 100, 50);
20003 ctx.fillStyle = p;
20004 ctx.fillRect(0, 0, 100, 50);
20005 isPixel(ctx, 50,25, 0,255,0,255, 0);
20006
20007
20008 }
20009 </script>
20010
20011 <!-- [[[ test_initial.reset.same.html ]]] -->
20012
20013 <p>Canvas test: initial.reset.same</p>
20014 <!-- Testing: Setting size (not changing the value) resets canvas to transparent black -->
20015 <canvas id="c633" width="100" height="50" style="background: #0f0"><p class="fallback">FAIL (fallback content)</p></canvas>
20016 <script>
20017
20018
20019 function test_initial_reset_same() {
20020
20021 var canvas = document.getElementById('c633');
20022 var ctx = canvas.getContext('2d');
20023
20024 canvas.width = 100;
20025 ctx.fillStyle = '#f00';
20026 ctx.fillRect(0, 0, 50, 50);
20027 isPixel(ctx, 20,20, 255,0,0,255, 0);
20028 canvas.width = 100;
20029 isPixel(ctx, 20,20, 0,0,0,0, 0);
20030
20031
20032 }
20033 </script>
20034
20035 <!-- [[[ test_initial.reset.transform.html ]]] -->
20036
20037 <p>Canvas test: initial.reset.transform</p>
20038 <!-- Testing: Resetting the canvas state resets the current transformation matrix -->
20039 <canvas id="c634" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20040 <script>
20041
20042
20043 function test_initial_reset_transform() {
20044
20045 var canvas = document.getElementById('c634');
20046 var ctx = canvas.getContext('2d');
20047
20048 canvas.width = 100;
20049 ctx.scale(0, 0);
20050 canvas.width = 100;
20051 ctx.fillStyle = '#0f0';
20052 ctx.fillRect(0, 0, 100, 50);
20053 isPixel(ctx, 20,20, 0,255,0,255, 0);
20054
20055
20056 }
20057 </script>
20058
20059 <!-- [[[ test_size.attributes.default.html ]]] -->
20060
20061 <p>Canvas test: size.attributes.default</p>
20062 <!-- Testing: Default width/height -->
20063 <canvas id="c635" ><p class="fallback">FAIL (fallback content)</p></canvas>
20064 <script>
20065
20066 function test_size_attributes_default() {
20067
20068 var canvas = document.getElementById('c635');
20069 var ctx = canvas.getContext('2d');
20070
20071 ok(canvas.width == 300, "canvas.width == 300");
20072 ok(canvas.height == 150, "canvas.height == 150");
20073 ok(!canvas.hasAttribute('width'), "!canvas.hasAttribute('width')");
20074 ok(!canvas.hasAttribute('height'), "!canvas.hasAttribute('height')");
20075
20076
20077 }
20078 </script>
20079
20080 <!-- [[[ test_size.attributes.html ]]] -->
20081
20082 <p>Canvas test: size.attributes</p>
20083 <!-- Testing: width/height DOM attributes and content attributes -->
20084 <canvas id="c636" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas>
20085 <script>
20086
20087 function test_size_attributes() {
20088
20089 var canvas = document.getElementById('c636');
20090 var ctx = canvas.getContext('2d');
20091
20092 ok(canvas.width == 120, "canvas.width == 120");
20093 ok(canvas.height == 60, "canvas.height == 60");
20094 ok(canvas.getAttribute('width') == 120, "canvas.getAttribute('width') == 120");
20095 ok(canvas.getAttribute('height') == 60, "canvas.getAttribute('height') == 60");
20096
20097
20098 }
20099 </script>
20100
20101 <!-- [[[ test_size.attributes.parse.badsuffix.html ]]] -->
20102
20103 <p>Canvas test: size.attributes.parse.badsuffix</p>
20104 <!-- Testing: Parsing of non-negative integers -->
20105 <canvas id="c637" width="100foo" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20106 <script>
20107
20108 function test_size_attributes_parse_badsuffix() {
20109
20110 var canvas = document.getElementById('c637');
20111 var ctx = canvas.getContext('2d');
20112
20113 is(canvas.width, 100, "canvas.width == 100");
20114
20115
20116 }
20117 </script>
20118
20119 <!-- [[[ test_size.attributes.parse.floatsuffix.html ]]] -->
20120
20121 <p>Canvas test: size.attributes.parse.floatsuffix</p>
20122 <!-- Testing: Parsing of non-negative integers -->
20123 <canvas id="c638" width="100.9" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20124 <script>
20125
20126 function test_size_attributes_parse_floatsuffix() {
20127
20128 var canvas = document.getElementById('c638');
20129 var ctx = canvas.getContext('2d');
20130
20131 ok(canvas.width == 100, "canvas.width == 100");
20132
20133
20134 }
20135 </script>
20136
20137 <!-- [[[ test_size.attributes.parse.negative.html ]]] -->
20138
20139 <p>Canvas test: size.attributes.parse.negative</p>
20140 <!-- Testing: Parsing of non-negative integers -->
20141 <canvas id="c639" width="-100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20142 <script>
20143
20144 function test_size_attributes_parse_negative() {
20145
20146 var canvas = document.getElementById('c639');
20147 var ctx = canvas.getContext('2d');
20148
20149 ok(canvas.width == 300, "canvas.width == 300");
20150
20151
20152 }
20153 </script>
20154
20155 <!-- [[[ test_size.attributes.parse.nonnumber.html ]]] -->
20156
20157 <p>Canvas test: size.attributes.parse.nonnumber</p>
20158 <!-- Testing: Parsing of non-negative integers -->
20159 <canvas id="c640" width="foo" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20160 <script>
20161
20162 function test_size_attributes_parse_nonnumber() {
20163
20164 var canvas = document.getElementById('c640');
20165 var ctx = canvas.getContext('2d');
20166
20167 ok(canvas.width == 300, "canvas.width == 300");
20168
20169
20170 }
20171 </script>
20172
20173 <!-- [[[ test_size.attributes.parse.percentsuffix.html ]]] -->
20174
20175 <p>Canvas test: size.attributes.parse.percentsuffix</p>
20176 <!-- Testing: Parsing of non-negative integers -->
20177 <canvas id="c641" width="100%" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20178 <script>
20179
20180 function test_size_attributes_parse_percentsuffix() {
20181
20182 var canvas = document.getElementById('c641');
20183 var ctx = canvas.getContext('2d');
20184
20185 ok(canvas.width == 100, "canvas.width == 100");
20186
20187
20188 }
20189 </script>
20190
20191 <!-- [[[ test_size.attributes.parse.whitespace.html ]]] -->
20192
20193 <p>Canvas test: size.attributes.parse.whitespace</p>
20194 <!-- Testing: Parsing of non-negative integers -->
20195 <canvas id="c642" width="   100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20196 <script>
20197
20198 function test_size_attributes_parse_whitespace() {
20199
20200 var canvas = document.getElementById('c642');
20201 var ctx = canvas.getContext('2d');
20202
20203 ok(canvas.width == 100, "canvas.width == 100");
20204
20205
20206 }
20207 </script>
20208
20209 <!-- [[[ test_size.attributes.parse.zero.html ]]] -->
20210
20211 <p>Canvas test: size.attributes.parse.zero</p>
20212 <!-- Testing: Parsing of non-negative integers -->
20213 <canvas id="c643" width="0" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20214 <script>
20215
20216 function test_size_attributes_parse_zero() {
20217
20218 var canvas = document.getElementById('c643');
20219 var ctx = canvas.getContext('2d');
20220
20221 ok(canvas.width == 0, "canvas.width == 0");
20222
20223
20224 }
20225 </script>
20226
20227 <!-- [[[ test_size.attributes.parse.zerosuffix.html ]]] -->
20228
20229 <p>Canvas test: size.attributes.parse.zerosuffix</p>
20230 <!-- Testing: Parsing of non-negative integers -->
20231 <canvas id="c644" width="100.0" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20232 <script>
20233
20234 function test_size_attributes_parse_zerosuffix() {
20235
20236 var canvas = document.getElementById('c644');
20237 var ctx = canvas.getContext('2d');
20238
20239 ok(canvas.width == 100, "canvas.width == 100");
20240
20241
20242 }
20243 </script>
20244
20245 <!-- [[[ test_size.attributes.reflect.1.html ]]] -->
20246
20247 <p>Canvas test: size.attributes.reflect.1</p>
20248 <!-- Testing: Setting DOM attributes updates DOM and content attributes -->
20249 <canvas id="c645" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20250 <script>
20251
20252 function test_size_attributes_reflect_1() {
20253
20254 var canvas = document.getElementById('c645');
20255 var ctx = canvas.getContext('2d');
20256
20257 canvas.width = 120;
20258 canvas.height = 60;
20259 ok(canvas.getAttribute('width') == '120', "canvas.getAttribute('width') == '120'");
20260 ok(canvas.getAttribute('height') == '60', "canvas.getAttribute('height') == '60'");
20261 ok(canvas.width == 120, "canvas.width == 120");
20262 ok(canvas.height == 60, "canvas.height == 60");
20263
20264
20265 }
20266 </script>
20267
20268 <!-- [[[ test_size.attributes.reflect.2.html ]]] -->
20269
20270 <p>Canvas test: size.attributes.reflect.2</p>
20271 <!-- Testing: Setting content attributes updates DOM and content attributes -->
20272 <canvas id="c646" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20273 <script>
20274
20275 function test_size_attributes_reflect_2() {
20276
20277 var canvas = document.getElementById('c646');
20278 var ctx = canvas.getContext('2d');
20279
20280 canvas.setAttribute('width', '120');
20281 canvas.setAttribute('height', '60');
20282 ok(canvas.getAttribute('width') == '120', "canvas.getAttribute('width') == '120'");
20283 ok(canvas.getAttribute('height') == '60', "canvas.getAttribute('height') == '60'");
20284 ok(canvas.width == 120, "canvas.width == 120");
20285 ok(canvas.height == 60, "canvas.height == 60");
20286
20287
20288 }
20289 </script>
20290
20291 <!-- [[[ test_size.attributes.removed.html ]]] -->
20292
20293 <p>Canvas test: size.attributes.removed</p>
20294 <!-- Testing: Removing content attributes reverts to default size -->
20295 <canvas id="c647" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas>
20296 <script>
20297
20298 function test_size_attributes_removed() {
20299
20300 var canvas = document.getElementById('c647');
20301 var ctx = canvas.getContext('2d');
20302
20303 canvas.removeAttribute('width');
20304 ok(canvas.width == 300, "canvas.width == 300");
20305
20306
20307 }
20308 </script>
20309
20310 <!-- [[[ test_size.attributes.setAttribute.badsuffix.html ]]] -->
20311
20312 <p>Canvas test: size.attributes.setAttribute.badsuffix</p>
20313 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20314 <canvas id="c648" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20315 <script>
20316
20317 function test_size_attributes_setAttribute_badsuffix() {
20318
20319 var canvas = document.getElementById('c648');
20320 var ctx = canvas.getContext('2d');
20321
20322 canvas.setAttribute('width', '100foo');
20323 is(canvas.width, 100, "canvas.width == 100");
20324
20325
20326 }
20327 </script>
20328
20329 <!-- [[[ test_size.attributes.setAttribute.floatsuffix.html ]]] -->
20330
20331 <p>Canvas test: size.attributes.setAttribute.floatsuffix</p>
20332 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20333 <canvas id="c649" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20334 <script>
20335
20336 function test_size_attributes_setAttribute_floatsuffix() {
20337
20338 var canvas = document.getElementById('c649');
20339 var ctx = canvas.getContext('2d');
20340
20341 canvas.setAttribute('width', '1');
20342 canvas.setAttribute('width', '100.9');
20343 ok(canvas.width == 100, "canvas.width == 100");
20344
20345
20346 }
20347 </script>
20348
20349 <!-- [[[ test_size.attributes.setAttribute.negative.html ]]] -->
20350
20351 <p>Canvas test: size.attributes.setAttribute.negative</p>
20352 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20353 <canvas id="c650" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20354 <script>
20355
20356 function test_size_attributes_setAttribute_negative() {
20357
20358 var canvas = document.getElementById('c650');
20359 var ctx = canvas.getContext('2d');
20360
20361 canvas.setAttribute('width', '-100');
20362 ok(canvas.width == 300, "canvas.width == 300");
20363
20364
20365 }
20366 </script>
20367
20368 <!-- [[[ test_size.attributes.setAttribute.nonnumber.html ]]] -->
20369
20370 <p>Canvas test: size.attributes.setAttribute.nonnumber</p>
20371 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20372 <canvas id="c651" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20373 <script>
20374
20375 function test_size_attributes_setAttribute_nonnumber() {
20376
20377 var canvas = document.getElementById('c651');
20378 var ctx = canvas.getContext('2d');
20379
20380 canvas.setAttribute('width', 'foo');
20381 ok(canvas.width == 300, "canvas.width == 300");
20382
20383
20384 }
20385 </script>
20386
20387 <!-- [[[ test_size.attributes.setAttribute.percentsuffix.html ]]] -->
20388
20389 <p>Canvas test: size.attributes.setAttribute.percentsuffix</p>
20390 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20391 <canvas id="c652" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20392 <script>
20393
20394 function test_size_attributes_setAttribute_percentsuffix() {
20395
20396 var canvas = document.getElementById('c652');
20397 var ctx = canvas.getContext('2d');
20398
20399 canvas.setAttribute('width', '100%');
20400 ok(canvas.width == 100, "canvas.width == 100");
20401
20402
20403 }
20404 </script>
20405
20406 <!-- [[[ test_size.attributes.setAttribute.whitespace.html ]]] -->
20407
20408 <p>Canvas test: size.attributes.setAttribute.whitespace</p>
20409 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20410 <canvas id="c653" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20411 <script>
20412
20413 function test_size_attributes_setAttribute_whitespace() {
20414
20415 var canvas = document.getElementById('c653');
20416 var ctx = canvas.getContext('2d');
20417
20418 canvas.setAttribute('width', '   100');
20419 ok(canvas.width == 100, "canvas.width == 100");
20420
20421
20422 }
20423 </script>
20424
20425 <!-- [[[ test_size.attributes.setAttribute.zero.html ]]] -->
20426
20427 <p>Canvas test: size.attributes.setAttribute.zero</p>
20428 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20429 <canvas id="c654" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20430 <script>
20431
20432 function test_size_attributes_setAttribute_zero() {
20433
20434 var canvas = document.getElementById('c654');
20435 var ctx = canvas.getContext('2d');
20436
20437 canvas.setAttribute('width', '0');
20438 ok(canvas.width == 0, "canvas.width == 0");
20439
20440
20441 }
20442 </script>
20443
20444 <!-- [[[ test_size.attributes.setAttribute.zerosuffix.html ]]] -->
20445
20446 <p>Canvas test: size.attributes.setAttribute.zerosuffix</p>
20447 <!-- Testing: Parsing of non-negative integers in setAttribute -->
20448 <canvas id="c655" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20449 <script>
20450
20451 function test_size_attributes_setAttribute_zerosuffix() {
20452
20453 var canvas = document.getElementById('c655');
20454 var ctx = canvas.getContext('2d');
20455
20456 canvas.setAttribute('width', '1');
20457 canvas.setAttribute('width', '100.0');
20458 ok(canvas.width == 100, "canvas.width == 100");
20459
20460
20461 }
20462 </script>
20463
20464 <!-- [[[ test_size.attributes.style.html ]]] -->
20465
20466 <p>Canvas test: size.attributes.style</p>
20467 <!-- Testing: Canvas size is independent of CSS resizing -->
20468 <canvas id="c656" width="50" height="30" style="width: 100px; height: 50px"><p class="fallback">FAIL (fallback content)</p></canvas>
20469 <script>
20470
20471 function test_size_attributes_style() {
20472
20473 var canvas = document.getElementById('c656');
20474 var ctx = canvas.getContext('2d');
20475
20476 ok(canvas.width == 50, "canvas.width == 50");
20477 ok(canvas.height == 30, "canvas.height == 30");
20478
20479
20480 }
20481 </script>
20482
20483 <!-- [[[ test_size.attributes.type.get.html ]]] -->
20484
20485 <p>Canvas test: size.attributes.type.get</p>
20486 <!-- Testing: width/height DOM/content attributes - string vs number types -->
20487 <canvas id="c657" width="120" height="60"><p class="fallback">FAIL (fallback content)</p></canvas>
20488 <script>
20489
20490 function test_size_attributes_type_get() {
20491
20492 var canvas = document.getElementById('c657');
20493 var ctx = canvas.getContext('2d');
20494
20495 ok(canvas.width === 120, "canvas.width === 120");
20496 ok(canvas.height === 60, "canvas.height === 60");
20497 ok(canvas.getAttribute('width') === '120', "canvas.getAttribute('width') === '120'");
20498 ok(canvas.getAttribute('height') === '60', "canvas.getAttribute('height') === '60'");
20499
20500
20501 }
20502 </script>
20503
20504 <!-- [[[ test_size.attributes.type.set.html ]]] -->
20505
20506 <p>Canvas test: size.attributes.type.set</p>
20507 <!-- Testing: Setting width/height DOM attributes -->
20508 <canvas id="c658" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20509 <script>
20510
20511 function test_size_attributes_type_set() {
20512
20513 var canvas = document.getElementById('c658');
20514 var ctx = canvas.getContext('2d');
20515
20516 canvas.width = 120;
20517 canvas.height = 60;
20518 ok(canvas.width === 120, "canvas.width === 120");
20519 ok(canvas.height === 60, "canvas.height === 60");
20520
20521
20522 }
20523 </script>
20524
20525 <!-- [[[ test_text.font.html ]]] -->
20526
20527 <p>Canvas test: text.font</p>
20528 <canvas id="c659" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20529 <script>
20530 var _deferred = true;
20531
20532 function test_text_font() {
20533
20534 var canvas = document.getElementById('c659');
20535 var ctx = canvas.getContext('2d');
20536
20537 is(ctx.font, '10px sans-serif', "default font is not '10px sans-serif'");
20538
20539 ctx.save();
20540 ctx.font = '18pt serif';
20541 is(ctx.font, '24px serif', 'font getter returns incorrect value');
20542
20543 ctx.restore();
20544 is(ctx.font, '10px sans-serif', 'font not being stored in the context state');
20545
20546 if (!_deferred) SimpleTest.finish();
20547 }
20548 </script>
20549
20550 <!-- [[[ test_text.measure.html ]]] -->
20551
20552 <p>Canvas test: text.measure</p>
20553 <canvas id="c660" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20554 <script>
20555 var _deferred = true;
20556
20557 function test_text_measure() {
20558
20559 var canvas = document.getElementById('c660');
20560 var ctx = canvas.getContext('2d');
20561
20562 ctx.font = "10px sans-serif";
20563 ctx.textAlign = "left";
20564 ctx.textBaseline = "top";
20565
20566 var str = 'Test String';
20567 var wid = ctx.measureText(str).width;
20568
20569 ok(wid > 0, "measureText returns nonpositive value for non-empty string");
20570
20571 ctx.font = "20px sans-serif";
20572 isnot(wid, ctx.measureText(str).width, "measureText does not change with a different font size");
20573
20574 ctx.font = "10px sans-serif";
20575 ctx.textAlign = "center";
20576 ctx.textBaseline = "alphabetic";
20577
20578 is(wid, ctx.measureText(str).width, "measureText changes when alignement/baseline is changed");
20579
20580
20581 if (!_deferred) SimpleTest.finish();
20582 }
20583 </script>
20584
20585 <!-- [[[ test_text.space.replace.html ]]] -->
20586
20587 <p>Canvas test: text.space.replace</p>
20588 <canvas id="c661" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20589 <script>
20590 var _deferred = true;
20591
20592 function test_text_space_replace() {
20593
20594 var canvas = document.getElementById('c661');
20595 var ctx = canvas.getContext('2d');
20596
20597 var swid = ctx.measureText(' ').width;
20598 ctx.font = "10px sans-serif";
20599
20600 isnot(swid, 0.0, "measureText reutuns zero for a non-empty string");
20601 is(swid, ctx.measureText('\x09').width, "measureText does not replace whitespace char with a space");
20602 is(swid, ctx.measureText('\x0A').width, "measureText does not replace whitespace char with a space");
20603 is(swid, ctx.measureText('\x0B').width, "measureText does not replace whitespace char with a space");
20604 is(swid, ctx.measureText('\x0C').width, "measureText does not replace whitespace char with a space");
20605 is(swid, ctx.measureText('\x0D').width, "measureText does not replace whitespace char with a space");
20606
20607 if (!_deferred) SimpleTest.finish();
20608 }
20609 </script>
20610
20611 <!-- [[[ test_text.textAlign.html ]]] -->
20612
20613 <p>Canvas test: text.textAlign</p>
20614 <canvas id="c662" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20615 <script>
20616 var _deferred = true;
20617
20618 function test_text_textAlign() {
20619
20620 var canvas = document.getElementById('c662');
20621 var ctx = canvas.getContext('2d');
20622
20623 is(ctx.textAlign, 'start', "default textAlign is not 'start'");
20624
20625 ctx.save();
20626 ctx.textAlign = 'end';
20627 is(ctx.textAlign, 'end', 'textAlign getter returns incorrect value');
20628
20629 ctx.save();
20630 ctx.textAlign = 'left';
20631 is(ctx.textAlign, 'left', 'textAlign getter returns incorrect value');
20632
20633 ctx.save();
20634 ctx.textAlign = 'center';
20635 is(ctx.textAlign, 'center', 'textAlign getter returns incorrect value');
20636
20637 ctx.save();
20638 ctx.textAlign = 'right';
20639 is(ctx.textAlign, 'right', 'textAlign getter returns incorrect value');
20640
20641 ctx.save();
20642 ctx.textAlign = 'start';
20643 is(ctx.textAlign, 'start', 'textAlign getter returns incorrect value');
20644
20645 ctx.restore();
20646 is(ctx.textAlign, 'right', 'textAlign not being stored in the context state');
20647
20648 ctx.restore();
20649 is(ctx.textAlign, 'center', 'textAlign not being stored in the context state');
20650
20651 ctx.restore();
20652 is(ctx.textAlign, 'left', 'textAlign not being stored in the context state');
20653
20654 ctx.restore();
20655 is(ctx.textAlign, 'end', 'textAlign not being stored in the context state');
20656
20657 ctx.restore();
20658 is(ctx.textAlign, 'start', 'textAlign not being stored in the context state');
20659
20660 if (!_deferred) SimpleTest.finish();
20661 }
20662 </script>
20663
20664 <!-- [[[ test_text.textBaseline.html ]]] -->
20665
20666 <p>Canvas test: text.textBaseline</p>
20667 <canvas id="c663" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20668 <script>
20669 var _deferred = true;
20670
20671 function test_text_textBaseline() {
20672
20673 var canvas = document.getElementById('c663');
20674 var ctx = canvas.getContext('2d');
20675
20676 is(ctx.textBaseline, 'alphabetic', "default textBaseline is not 'alphabetic'");
20677
20678 ctx.save();
20679 ctx.textBaseline = 'ideographic';
20680 is(ctx.textBaseline, 'ideographic', 'textBaseline getter returns incorrect value');
20681
20682 ctx.save();
20683 ctx.textBaseline = 'top';
20684 is(ctx.textBaseline, 'top', 'textBaseline getter returns incorrect value');
20685
20686 ctx.save();
20687 ctx.textBaseline = 'middle';
20688 is(ctx.textBaseline, 'middle', 'textBaseline getter returns incorrect value');
20689
20690 ctx.save();
20691 ctx.textBaseline = 'bottom';
20692 is(ctx.textBaseline, 'bottom', 'textBaseline getter returns incorrect value');
20693
20694 ctx.save();
20695 ctx.textBaseline = 'hanging';
20696 is(ctx.textBaseline, 'hanging', 'textBaseline getter returns incorrect value');
20697
20698 ctx.save();
20699 ctx.textBaseline = 'alphabetic';
20700 is(ctx.textBaseline, 'alphabetic', 'textBaseline getter returns incorrect value');
20701
20702 ctx.restore();
20703 is(ctx.textBaseline, 'hanging', 'textBaseline not being stored in the context state');
20704
20705 ctx.restore();
20706 is(ctx.textBaseline, 'bottom', 'textBaseline not being stored in the context state');
20707
20708 ctx.restore();
20709 is(ctx.textBaseline, 'middle', 'textBaseline not being stored in the context state');
20710
20711 ctx.restore();
20712 is(ctx.textBaseline, 'top', 'textBaseline not being stored in the context state');
20713
20714 ctx.restore();
20715 is(ctx.textBaseline, 'ideographic', 'textBaseline not being stored in the context state');
20716
20717 ctx.restore();
20718 is(ctx.textBaseline, 'alphabetic', 'textBaseline not being stored in the context state');
20719
20720 if (!_deferred) SimpleTest.finish();
20721 }
20722 </script>
20723
20724 <!-- [[[ test_toDataURL.arguments.1.html ]]] -->
20725
20726 <p>Canvas test: toDataURL.arguments.1 - bug 401795</p>
20727 <!-- Testing: toDataURL ignores extra arguments -->
20728 <canvas id="c664" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20729 <script>
20730
20731 function test_toDataURL_arguments_1() {
20732
20733 var canvas = document.getElementById('c664');
20734 var ctx = canvas.getContext('2d');
20735
20736 var _thrown_outer = false;
20737 try {
20738
20739 var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception');
20740 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20741
20742 } catch (e) {
20743     _thrown_outer = true;
20744 }
20745 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
20746
20747
20748 }
20749 </script>
20750
20751 <!-- [[[ test_toDataURL.arguments.2.html ]]] -->
20752
20753 <p>Canvas test: toDataURL.arguments.2 - bug 401795</p>
20754 <!-- Testing: toDataURL ignores extra arguments -->
20755 <canvas id="c665" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20756 <script>
20757
20758 function test_toDataURL_arguments_2() {
20759
20760 var canvas = document.getElementById('c665');
20761 var ctx = canvas.getContext('2d');
20762
20763 var _thrown_outer = false;
20764 try {
20765
20766 var data = canvas.toDataURL('image/png', 'another argument that should not raise an exception', 'and another');
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.arguments.3.html ]]] -->
20779
20780 <p>Canvas test: toDataURL.arguments.3 - bug 401795</p>
20781 <!-- Testing: toDataURL ignores extra arguments -->
20782 <canvas id="c666" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20783 <script>
20784
20785 function test_toDataURL_arguments_3() {
20786
20787 var canvas = document.getElementById('c666');
20788 var ctx = canvas.getContext('2d');
20789
20790 var _thrown_outer = false;
20791 try {
20792
20793 // More arguments that should not raise exceptions
20794 var data = canvas.toDataURL('image/png', null, null, null);
20795 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20796
20797 } catch (e) {
20798     _thrown_outer = true;
20799 }
20800 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
20801
20802
20803 }
20804 </script>
20805
20806 <!-- [[[ test_toDataURL.complexcolours.html ]]] -->
20807
20808 <p>Canvas test: toDataURL.complexcolours</p>
20809 <!-- Testing: toDataURL handles non-primary and non-solid colours correctly -->
20810 <canvas id="c667" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20811 <script>
20812
20813 var canvas667 = document.getElementById('c667');
20814 var ctx667 = canvas667.getContext('2d');
20815
20816 function test_toDataURL_complexcolours() {
20817
20818 // (These values are chosen to survive relatively alright through being premultiplied)
20819 ctx667.fillStyle = 'rgba(1, 3, 254, 1)';
20820 ctx667.fillRect(0, 0, 25, 25);
20821 ctx667.fillStyle = 'rgba(8, 252, 248, 0.75)';
20822 ctx667.fillRect(25, 0, 25, 25);
20823 ctx667.fillStyle = 'rgba(6, 10, 250, 0.502)';
20824 ctx667.fillRect(50, 0, 25, 25);
20825 ctx667.fillStyle = 'rgba(12, 16, 244, 0.25)';
20826 ctx667.fillRect(75, 0, 25, 25);
20827 var img = new Image();
20828 deferTest();
20829 img.onload = wrapFunction(function ()
20830 {
20831     ctx667.drawImage(img, 0, 25);
20832     // (The alpha values do not really survive float->int conversion, so just
20833     // do approximate comparisons)
20834     isPixel(ctx667, 12,40, 1,3,254,255, 0);
20835     isPixel(ctx667, 37,40, 8,252,248,191, 2);
20836     isPixel(ctx667, 62,40, 6,10,250,127, 4);
20837     isPixel(ctx667, 87,40, 12,16,244,63, 8);
20838 });
20839 img.src = canvas667.toDataURL();
20840
20841
20842 }
20843 </script>
20844
20845 <!-- [[[ test_toDataURL.default.html ]]] -->
20846
20847 <p>Canvas test: toDataURL.default</p>
20848 <!-- Testing: toDataURL with no arguments returns a PNG -->
20849 <canvas id="c668" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20850 <script>
20851
20852 function test_toDataURL_default() {
20853
20854 var canvas = document.getElementById('c668');
20855 var ctx = canvas.getContext('2d');
20856
20857 var data = canvas.toDataURL();
20858 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20859
20860
20861 }
20862 </script>
20863
20864 <!-- [[[ test_toDataURL.lowercase.html ]]] -->
20865
20866 <p>Canvas test: toDataURL.lowercase - bug 401795</p>
20867 <!-- Testing: toDataURL type is case-sensitive -->
20868 <canvas id="c669" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20869 <script>
20870
20871 function test_toDataURL_lowercase() {
20872
20873 var canvas = document.getElementById('c669');
20874 var ctx = canvas.getContext('2d');
20875
20876 var _thrown_outer = false;
20877 try {
20878
20879 var data = canvas.toDataURL('ImAgE/PnG');
20880 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20881
20882 } catch (e) {
20883     _thrown_outer = true;
20884 }
20885 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
20886
20887
20888 }
20889 </script>
20890
20891 <!-- [[[ test_toDataURL.nocontext.html ]]] -->
20892
20893 <p>Canvas test: toDataURL.nocontext</p>
20894 <!-- Testing: toDataURL works before any context has been got -->
20895 <canvas id="c670" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20896 <script>
20897
20898 function test_toDataURL_nocontext() {
20899
20900 var canvas = document.getElementById('c670');
20901 var ctx = canvas.getContext('2d');
20902
20903 var canvas2 = document.createElement('canvas');
20904
20905 var data = canvas2.toDataURL();
20906 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20907
20908
20909 }
20910 </script>
20911
20912 <!-- [[[ test_toDataURL.png.html ]]] -->
20913
20914 <p>Canvas test: toDataURL.png</p>
20915 <!-- Testing: toDataURL with image/png returns a PNG -->
20916 <canvas id="c671" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20917 <script>
20918
20919 function test_toDataURL_png() {
20920
20921 var canvas = document.getElementById('c671');
20922 var ctx = canvas.getContext('2d');
20923
20924 var data = canvas.toDataURL('image/png');
20925 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20926
20927
20928 }
20929 </script>
20930
20931 <!-- [[[ test_toDataURL.primarycolours.html ]]] -->
20932
20933 <p>Canvas test: toDataURL.primarycolours</p>
20934 <!-- Testing: toDataURL handles simple colours correctly -->
20935 <canvas id="c672" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20936 <script>
20937
20938
20939 var canvas672 = document.getElementById('c672');
20940 var ctx672 = canvas672.getContext('2d');
20941
20942 function test_toDataURL_primarycolours() {
20943
20944 ctx672.fillStyle = '#ff0';
20945 ctx672.fillRect(0, 0, 25, 40);
20946 ctx672.fillStyle = '#0ff';
20947 ctx672.fillRect(25, 0, 50, 40);
20948 ctx672.fillStyle = '#00f';
20949 ctx672.fillRect(75, 0, 25, 40);
20950 ctx672.fillStyle = '#fff';
20951 ctx672.fillRect(0, 40, 100, 10);
20952 var data = canvas672.toDataURL();
20953 ctx672.fillStyle = '#f00';
20954 ctx672.fillRect(0, 0, 100, 50);
20955 var img = new Image();
20956 deferTest();
20957 img.onload = wrapFunction(function ()
20958 {
20959     ctx672.drawImage(img, 0, 0);
20960     isPixel(ctx672, 12,20, 255,255,0,255, 0);
20961     isPixel(ctx672, 50,20, 0,255,255,255, 0);
20962     isPixel(ctx672, 87,20, 0,0,255,255, 0);
20963     isPixel(ctx672, 50,45, 255,255,255,255, 0);
20964 });
20965 img.src = data;
20966
20967
20968 }
20969 </script>
20970
20971 <!-- [[[ test_toDataURL.unrecognised.html ]]] -->
20972
20973 <p>Canvas test: toDataURL.unrecognised - bug 401795</p>
20974 <!-- Testing: toDataURL with an unhandled type returns a PNG -->
20975 <canvas id="c673" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
20976 <script>
20977
20978 function test_toDataURL_unrecognised() {
20979
20980 var canvas = document.getElementById('c673');
20981 var ctx = canvas.getContext('2d');
20982
20983 var _thrown_outer = false;
20984 try {
20985
20986 var data = canvas.toDataURL('image/example');
20987 ok(/^data:image\/png[;,]/.test(data), "data =~ /^data:image\\/png[;,]/");
20988
20989 } catch (e) {
20990     _thrown_outer = true;
20991 }
20992 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
20993
20994
20995 }
20996 </script>
20997
20998 <!-- [[[ test_toDataURL.zerosize.html ]]] -->
20999
21000 <p>Canvas test: toDataURL.zerosize</p>
21001 <!-- Testing: toDataURL on zero-size canvas returns 'data:,' -->
21002 <canvas id="c674" width="0" height="0"><p class="fallback">FAIL (fallback content)</p></canvas>
21003 <script>
21004
21005 function test_toDataURL_zerosize() {
21006
21007 var canvas = document.getElementById('c674');
21008 var ctx = canvas.getContext('2d');
21009
21010 var data = canvas.toDataURL();
21011 ok(data === 'data:,', "data === 'data:,'");
21012
21013
21014 }
21015 </script>
21016
21017 <!-- [[[ test_type.exists.html ]]] -->
21018
21019 <p>Canvas test: type.exists</p>
21020 <!-- Testing: HTMLCanvasElement is a property of window -->
21021 <canvas id="c676" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21022 <script>
21023
21024 function test_type_exists() {
21025
21026 var canvas = document.getElementById('c676');
21027 var ctx = canvas.getContext('2d');
21028
21029 ok(window.HTMLCanvasElement, "window.HTMLCanvasElement");
21030
21031
21032 }
21033 </script>
21034
21035 <!-- [[[ test_type.extend.html ]]] -->
21036
21037 <p>Canvas test: type.extend</p>
21038 <!-- Testing: HTMLCanvasElement methods can be added, and the new methods used by canvases -->
21039 <canvas id="c677" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21040 <script>
21041
21042 function test_type_extend() {
21043
21044 var canvas = document.getElementById('c677');
21045 var ctx = canvas.getContext('2d');
21046
21047 window.HTMLCanvasElement.prototype.getZero = function () { return 0; };
21048 ok(canvas.getZero() === 0, "canvas.getZero() === 0");
21049
21050
21051 }
21052 </script>
21053
21054 <!-- [[[ test_type.name.html ]]] -->
21055
21056 <p>Canvas test: type.name</p>
21057 <!-- Testing: HTMLCanvasElement type and toString -->
21058 <canvas id="c678" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21059 <script>
21060
21061 function test_type_name() {
21062
21063 var canvas = document.getElementById('c678');
21064 var ctx = canvas.getContext('2d');
21065
21066 ok(Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]', "Object.prototype.toString.call(canvas) === '[object HTMLCanvasElement]'");
21067
21068
21069 }
21070 </script>
21071
21072 <!-- [[[ test_type.prototype.html ]]] -->
21073
21074 <p>Canvas test: type.prototype</p>
21075 <!-- Testing: window.HTMLCanvasElement has prototype, which is { ReadOnly, DontDelete }. prototype has getContext, which is not -->
21076 <canvas id="c679" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21077 <script>
21078
21079 function test_type_prototype() {
21080
21081 var canvas = document.getElementById('c679');
21082 var ctx = canvas.getContext('2d');
21083
21084 ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype");
21085 ok(window.HTMLCanvasElement.prototype.getContext, "window.HTMLCanvasElement.prototype.getContext");
21086 window.HTMLCanvasElement.prototype = null;
21087 ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype");
21088 delete window.HTMLCanvasElement.prototype;
21089 ok(window.HTMLCanvasElement.prototype, "window.HTMLCanvasElement.prototype");
21090 var getContext = window.HTMLCanvasElement.prototype.getContext;
21091 window.HTMLCanvasElement.prototype.getContext = 1;
21092 ok(window.HTMLCanvasElement.prototype.getContext === 1, "window.HTMLCanvasElement.prototype.getContext === 1");
21093 delete window.HTMLCanvasElement.prototype.getContext;
21094 ok(window.HTMLCanvasElement.prototype.getContext === undefined, "window.HTMLCanvasElement.prototype.getContext === undefined");
21095 window.HTMLCanvasElement.prototype.getContext = getContext;
21096
21097
21098 }
21099 </script>
21100
21101 <!-- [[[ test_type.replace.html ]]] -->
21102
21103 <p>Canvas test: type.replace</p>
21104 <!-- Testing: HTMLCanvasElement methods can be replaced, and the replacement methods used by canvases -->
21105 <canvas id="c680" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21106 <script>
21107
21108 function test_type_replace() {
21109
21110 var canvas = document.getElementById('c680');
21111 var ctx = canvas.getContext('2d');
21112
21113 var getContext = window.HTMLCanvasElement.prototype.getContext;
21114 window.HTMLCanvasElement.prototype.getContext = function (name) { return 0; };
21115 ok(canvas.getContext('2d') === 0, "canvas.getContext('2d') === 0");
21116 window.HTMLCanvasElement.prototype.getContext = getContext;
21117
21118
21119 }
21120 </script>
21121
21122 <!-- [[[ test_2d.imagedata_coercion.html ]]] -->
21123
21124 <p>Canvas test: 2d.imagedata_coercion</p>
21125 <!-- Testing: imagedata coerced correctly on set -->
21126 <canvas id="c681" width="100" height="1"><p class="fallback">FAIL (fallback content)</p></canvas>
21127 <script>
21128
21129 /* NOTE: Due to round-tripping through premultiplied values and the rounding
21130 that ensues, values of alpha < 255 will tend to do weird things.  In
21131 particular, the premultiplied color values are computed by multiplying by a,
21132 dividing by 255, then always rounding up.  The conversion the other way is done
21133 by multiplying by 255/a and rounding down.  So if
21134
21135   255/a * (amount added when rounding) > 1
21136
21137 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
21138 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. */
21139
21140 /* Our tests.  Each test has two arrays: the array of values to set and the
21141    array of values that should read back as a result. */
21142 var tests = [
21143   [
21144     [ 0, 1, 3, 250 ], [ 0, 1, 3, 250 ]
21145   ],
21146   [
21147     [ 0, 1, 2, 250, 4, 5, 6, 250 ], [ 0, 1, 2, 250, 4, 5, 6, 250 ]
21148   ],
21149   [
21150     [ 0, 1000, 2, 300, 400, 5, 600, 250 ], [ 0, 255, 2, 255, 255, 5, 255, 250 ]
21151   ],
21152   [
21153     [ -10, -5, NaN, 250, 4, 5, 6, -250 ], [ 0, 0, 0, 250, 0, 0, 0, 0 ]
21154   ],
21155   [
21156     [ 0.5, 12.2, 12.8, 251.5, 12.5, 13.5, 13.2, 250.5 ],
21157     [ 0, 12, 13, 252, 12, 14, 13, 250 ]
21158   ]
21159 ];
21160
21161 function doTest(type, idx) {
21162   var testPair = tests[idx];
21163   var test = testPair[0];
21164   var ref = testPair[1];
21165   var descSuffix = " for " + type + " test #" + (idx+1);
21166   function myIs(a, b, str) {
21167     is(a, b, str + descSuffix);
21168   }
21169
21170   myIs(test.length, ref.length, "Length mismatch");
21171   myIs(test.length % 4, 0, "Length not a multiple of 4");
21172   var pixels = test.length / 4;
21173   var imageData = ctx681.createImageData(pixels, 1);
21174   myIs(imageData.width, pixels, "Incorrect created data width");
21175   myIs(imageData.height, 1, "Incorrect created data height");
21176   myIs(imageData.data.length, test.length,
21177        "Incorrect length in created image data");
21178
21179   ctx681.putImageData(imageData, 0, 0);
21180   var testImageData = ctx681.getImageData(0, 0, pixels, 1);
21181   myIs(testImageData.data.length, test.length,
21182        "Incorrect length in test image data after clearing pixels");
21183   var j;
21184   for (j = 0; j < testImageData.data.length; ++j) {
21185     myIs(testImageData.data[j], 0,
21186          "Nonzero value at position " + j + " in test image data " +
21187          "after clearing pixels");
21188   }
21189   for (j = 0; j < imageData.data.length; ++j) {
21190     imageData.data[j] = test[j];
21191   }
21192   if (type == "slow") {
21193     // convert to a non-dense array so we can test that codepath
21194     imageData.data.makeMeSlow = 1;
21195   }
21196   ctx681.putImageData(imageData, 0, 0);
21197   testImageData = ctx681.getImageData(0, 0, pixels, 1);
21198   myIs(testImageData.data.length, test.length,
21199        "Incorrect length in test image data after putting our imagedata");
21200   for (j = 0; j < testImageData.data.length; ++j) {
21201     myIs(testImageData.data[j], ref[j],
21202          "Incorrect value at position " + j + " in test image data " +
21203          "after putting our imagedata");
21204   }
21205 }
21206
21207 function doTests(type) {
21208   for (var i = 0; i < tests.length; ++i) {
21209     doTest(type, i);
21210   }
21211 }
21212
21213 var canvas681;
21214 var ctx681;
21215
21216 function test_2d_imagedata_coercion() {
21217
21218 canvas681 = document.getElementById('c681');
21219 ctx681 = canvas681.getContext('2d');
21220
21221 doTests("fast");
21222 doTests("slow");
21223
21224 }
21225 </script>
21226
21227 <!-- [[[ test_2d.imageSmoothing.html ]]] -->
21228
21229 <p>Canvas test: 2d.imageRenderingQuality</p>
21230 <canvas id="c682" width="10" height="10"></canvas><br>
21231 <canvas style="visibility: hidden" id="c683" width="2" height="2"></canvas>
21232 <script type="text/javascript">
21233
21234 function setup_test_2d_imageSmoothing() {
21235   var c683 = document.getElementById("c683");
21236   var cx683 = c683.getContext("2d");
21237
21238   cx683.fillStyle = "red";
21239   cx683.fillRect(0, 0, 2, 2);
21240
21241   cx683.fillStyle = "rgb(0,255,0)";
21242   cx683.fillRect(0, 0, 1, 1);
21243 }
21244
21245 function test_2d_imageSmoothing() {
21246   setup_test_2d_imageSmoothing();
21247
21248   var c682 = document.getElementById("c682");
21249   var c683 = document.getElementById("c683");
21250
21251   var cx682 = c682.getContext("2d");
21252
21253   ok(cx682.imageSmoothingEnabled == true, "initial imageSmoothingEnabled is true");
21254
21255   // check that imageSmoothingEnabled is part of the context
21256   cx682.save();
21257   cx682.imageSmoothingEnabled = false;
21258   ok(cx682.imageSmoothingEnabled == false, "imageSmoothingEnabled is false after setting");
21259   cx682.restore();
21260   ok(cx682.imageSmoothingEnabled == true, "imageSmoothingEnabled is true after restore");
21261
21262   // check that false works
21263   cx682.imageSmoothingEnabled = false;
21264
21265   cx682.scale(10,10);
21266   cx682.drawImage(c683, 0, 0);
21267
21268   // this should be all red
21269   var data = cx682.getImageData(9, 9, 1, 1);
21270   var pixels = data.data;
21271   ok (pixels[0] == 0 &&
21272       pixels[1] == 255 &&
21273       pixels[2] == 0 &&
21274       pixels[3] == 255,
21275       "pixel is [" + pixels.toString() + "] (expected [0,255,0,255])");
21276 }
21277
21278 </script>
21279
21280 <p>Canvas test: zero_dimensions</p>
21281 <canvas id="c684" width="0" height="0"></canvas>
21282 <script type="text/javascript">
21283 function test_zero_dimensions() {
21284   var c = document.getElementById("c684");
21285   ok(c.width == 0, "c.width not 0");
21286   ok(c.height == 0, "c.height not 0");
21287 }
21288 </script>
21289
21290 <p>Canvas test: zero_dimensions_image_data</p>
21291 <canvas id="c685" width="0" height="0"></canvas>
21292 <script type="text/javascript">
21293 function test_zero_dimensions_imagedata() {
21294   var c = document.getElementById("c685");
21295   var ctx = c.getContext("2d");
21296   ctx.fillStyle = "blue";
21297   ctx.fillRect(0, 0, 100, 100);
21298   var imgdata = ctx.getImageData(0, 0, 100, 100);
21299   var isTransparentBlack = true;
21300   for (var i = 0; i < imgdata.data.length; ++i)
21301       if (imgdata.data[i] !== 0)
21302           isTransparentBlack = false;
21303   ok(isTransparentBlack, "isTransparentBlack");
21304 }
21305 </script>
21306
21307 <p>Canvas test: getImageData_after_zero_canvas</p>
21308 <canvas id="c686" width="100" height="100"></canvas>
21309 <script type="text/javascript">
21310 function test_getImageData_after_zero_canvas() {
21311     var c = document.getElementById("c686");
21312     var ctx = c.getContext("2d");
21313     ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
21314     ctx.fillRect(0, 0, c.width, c.height);
21315     var oldimgdata = ctx.getImageData(0, 0, c.width, c.height);
21316     c.width = c.height = 0;
21317     c.width = c.height = 100;
21318     ctx.fillRect(0, 0, c.width, c.height);
21319     var imgdata = ctx.getImageData(0, 0, c.width, c.height);
21320     var same = false;
21321     ok(imgdata.data.length === oldimgdata.data.length, "not the same length");
21322     for (var i = 0; i < imgdata.data.length; ++i)
21323         same = imgdata.data[i] === oldimgdata.data[i];
21324     ok(same, "changing dimensions broke canvas");
21325 }
21326 </script>
21327
21328 <p>Canvas test: test_opaque</p>
21329 <canvas id="c688" width="150" height="50"></canvas>
21330 <script type="text/javascript">
21331
21332 function test_opaque() {
21333   var c = document.getElementById("c688");
21334   var ctx = c.getContext("2d", {alpha: false});
21335   ctx.fillStyle = "green";
21336   ctx.fillRect(0,0,10,10);
21337   ctx.fillStyle = "rgba(255,0,0,.5)";
21338   ctx.fillRect(10,0,10,10);
21339
21340   isPixel(ctx, 20, 20, 0, 0, 0, 255, 0);
21341   isPixel(ctx, 5, 5, 0, 128, 0, 255, 0);
21342   isPixel(ctx, 15, 5, 128, 0, 0, 255, 0);
21343 }
21344 </script>
21345
21346 <p>Canvas test: 2d.transformation.transform.identity</p>
21347 <!-- Testing: resetTransform() changes to the identity matrix -->
21348 <canvas id="c689" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21349 <script>
21350
21351
21352 function test_2d_transformation_reset_transform() {
21353
21354 var canvas = document.getElementById('c689');
21355 var ctx = canvas.getContext('2d');
21356
21357 ctx.fillStyle = '#f00';
21358 ctx.fillRect(0, 0, 100, 50);
21359
21360 ctx.setTransform(0.1, 0.0, 0.0, 0.1, 80.0, 30.0);
21361 ctx.resetTransform();
21362 ctx.fillStyle = '#0f0';
21363 ctx.fillRect(0, 0, 100, 50);
21364 isPixel(ctx, 50,25, 0,255,0,255, 0);
21365
21366
21367 }
21368
21369 </script>
21370
21371 <!-- [[[ test_2d.clearRect.testdoubleprecision.html ]]] -->
21372
21373 <p>Canvas test: 2d.clearRect.testdoubleprecision</p>
21374 <canvas id="c690" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21375 <script>
21376
21377 function test_2d_clearRect_testdoubleprecision() {
21378   var canvas = document.getElementById('c690');
21379   ctx = canvas.getContext('2d');
21380   ctx.setTransform(1, 1, 1, 1, 0, 0);
21381   ctx.clearRect(-1.79e+308, 0, 1.79e+308, 8);
21382 }
21383 </script>
21384
21385 <!-- [[[ test_2d.path.ellipse.angle.1.html ]]] -->
21386
21387 <p>Canvas test: 2d.path.ellipse.angle.1</p>
21388 <!-- Testing: ellipse() draws pi/2 .. -pi anticlockwise correctly -->
21389 <canvas id="c690" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21390 <script>
21391
21392
21393 function test_2d_path_ellipse_angle_1() {
21394
21395 var canvas = document.getElementById('c690');
21396 var ctx = canvas.getContext('2d');
21397
21398 ctx.fillStyle = '#0f0';
21399 ctx.fillRect(0, 0, 100, 50);
21400 ctx.fillStyle = '#f00';
21401 ctx.beginPath();
21402 ctx.moveTo(100, 0);
21403 ctx.ellipse(100, 0, 150, 100, 0, Math.PI/2, -Math.PI, true);
21404 ctx.fill();
21405 isPixel(ctx, 50,25, 0,255,0,255, 0);
21406
21407
21408 }
21409 </script>
21410
21411 <!-- [[[ test_2d.path.ellipse.angle.2.html ]]] -->
21412
21413 <p>Canvas test: 2d.path.ellipse.angle.2</p>
21414 <!-- Testing: ellipse() draws -3pi/2 .. -pi anticlockwise correctly -->
21415 <canvas id="c691" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21416 <script>
21417
21418
21419 function test_2d_path_ellipse_angle_2() {
21420
21421 var canvas = document.getElementById('c691');
21422 var ctx = canvas.getContext('2d');
21423
21424 ctx.fillStyle = '#0f0';
21425 ctx.fillRect(0, 0, 100, 50);
21426 ctx.fillStyle = '#f00';
21427 ctx.beginPath();
21428 ctx.moveTo(100, 0);
21429 ctx.ellipse(100, 0, 150, 100, 0, -3*Math.PI/2, -Math.PI, true);
21430 ctx.fill();
21431 isPixel(ctx, 50,25, 0,255,0,255, 0);
21432
21433
21434 }
21435 </script>
21436
21437 <!-- [[[ test_2d.path.ellipse.angle.3.html ]]] -->
21438
21439 <p>Canvas test: 2d.path.ellipse.angle.3</p>
21440 <!-- Testing: ellipse() wraps angles mod 2pi when anticlockwise and end > start+2pi -->
21441 <canvas id="c692" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21442 <script>
21443
21444
21445 function test_2d_path_ellipse_angle_3() {
21446
21447 var canvas = document.getElementById('c692');
21448 var ctx = canvas.getContext('2d');
21449
21450 ctx.fillStyle = '#0f0';
21451 ctx.fillRect(0, 0, 100, 50);
21452 ctx.fillStyle = '#f00';
21453 ctx.beginPath();
21454 ctx.moveTo(100, 0);
21455 ctx.ellipse(100, 0, 150, 100, 0, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
21456 ctx.fill();
21457 isPixel(ctx, 50,25, 0,255,0,255, 0);
21458
21459
21460 }
21461 </script>
21462
21463 <!-- [[[ test_2d.path.ellipse.angle.4.html ]]] -->
21464
21465 <p>Canvas test: 2d.path.ellipse.angle.4</p>
21466 <!-- Testing: ellipse() draws a full circle when clockwise and end > start+2pi -->
21467 <canvas id="c693" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21468 <script>
21469
21470
21471 function test_2d_path_ellipse_angle_4() {
21472
21473 var canvas = document.getElementById('c693');
21474 var ctx = canvas.getContext('2d');
21475
21476 ctx.fillStyle = '#f00';
21477 ctx.fillRect(0, 0, 100, 50);
21478 ctx.fillStyle = '#0f0';
21479 ctx.beginPath();
21480 ctx.moveTo(50, 25);
21481 ctx.ellipse(50, 25, 60, 50, 0, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
21482 ctx.fill();
21483 isPixel(ctx, 1,1, 0,255,0,255, 0);
21484 isPixel(ctx, 98,1, 0,255,0,255, 0);
21485 isPixel(ctx, 1,48, 0,255,0,255, 0);
21486 isPixel(ctx, 98,48, 0,255,0,255, 0);
21487
21488
21489 }
21490 </script>
21491
21492 <!-- [[[ test_2d.path.ellipse.angle.5.html ]]] -->
21493
21494 <p>Canvas test: 2d.path.ellipse.angle.5</p>
21495 <!-- Testing: ellipse() wraps angles mod 2pi when clockwise and start > end+2pi -->
21496 <canvas id="c694" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21497 <script>
21498
21499
21500 function test_2d_path_ellipse_angle_5() {
21501
21502 var canvas = document.getElementById('c694');
21503 var ctx = canvas.getContext('2d');
21504
21505 ctx.fillStyle = '#0f0';
21506 ctx.fillRect(0, 0, 100, 50);
21507 ctx.fillStyle = '#f00';
21508 ctx.beginPath();
21509 ctx.moveTo(100, 0);
21510 ctx.ellipse(100, 0, 150, 100, 0, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
21511 ctx.fill();
21512 isPixel(ctx, 50,25, 0,255,0,255, 0);
21513
21514
21515 }
21516 </script>
21517
21518 <!-- [[[ test_2d.path.ellipse.angle.6.html ]]] -->
21519
21520 <p>Canvas test: 2d.path.ellipse.angle.6</p>
21521 <!-- Testing: ellipse() draws a full circle when anticlockwise and start > end+2pi -->
21522 <canvas id="c695" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21523 <script>
21524
21525 function test_2d_path_ellipse_angle_6() {
21526
21527 var canvas = document.getElementById('c695');
21528 var ctx = canvas.getContext('2d');
21529
21530 ctx.fillStyle = '#f00';
21531 ctx.fillRect(0, 0, 100, 50);
21532 ctx.fillStyle = '#0f0';
21533 ctx.beginPath();
21534 ctx.moveTo(50, 25);
21535 ctx.ellipse(50, 25, 60, 50, 0, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
21536 ctx.fill();
21537 isPixel(ctx, 1,1, 0,255,0,255, 0);
21538 isPixel(ctx, 98,1, 0,255,0,255, 0);
21539 isPixel(ctx, 1,48, 0,255,0,255, 0);
21540 isPixel(ctx, 98,48, 0,255,0,255, 0);
21541
21542
21543 }
21544 </script>
21545
21546 <!-- [[[ test_2d.path.ellipse.empty.html ]]] -->
21547
21548 <p>Canvas test: 2d.path.ellipse.empty</p>
21549 <!-- Testing: ellipse() with an empty path does not draw a straight line to the start point -->
21550 <canvas id="c696" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21551 <script>
21552
21553
21554 function test_2d_path_ellipse_empty() {
21555
21556 var canvas = document.getElementById('c696');
21557 var ctx = canvas.getContext('2d');
21558
21559 ctx.fillStyle = '#0f0';
21560 ctx.fillRect(0, 0, 100, 50);
21561 ctx.lineWidth = 50;
21562 ctx.strokeStyle = '#f00';
21563 ctx.beginPath();
21564 ctx.ellipse(200, 25, 5, 5, 0, 0, 2*Math.PI, true);
21565 ctx.stroke();
21566 isPixel(ctx, 50,25, 0,255,0,255, 0);
21567
21568
21569 }
21570 </script>
21571
21572 <!-- [[[ test_2d.path.ellipse.end.html ]]] -->
21573
21574 <p>Canvas test: 2d.path.ellipse.end</p>
21575 <!-- Testing: ellipse() adds the end point of the ellipse to the subpath -->
21576 <canvas id="c697" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21577 <script>
21578
21579 function test_2d_path_ellipse_end() {
21580
21581 var canvas = document.getElementById('c697');
21582 var ctx = canvas.getContext('2d');
21583
21584 ctx.fillStyle = '#f00';
21585 ctx.fillRect(0, 0, 100, 50);
21586 ctx.lineWidth = 50;
21587 ctx.strokeStyle = '#0f0';
21588 ctx.beginPath();
21589 ctx.moveTo(-100, 0);
21590 ctx.ellipse(-100, 0, 25, 25, 0, -Math.PI/2, Math.PI/2, true);
21591 ctx.lineTo(100, 25);
21592 ctx.stroke();
21593 isPixel(ctx, 50,25, 0,255,0,255, 0);
21594
21595
21596 }
21597 </script>
21598
21599 <!-- [[[ test_2d.path.ellipse.negative.html ]]] -->
21600
21601 <p>Canvas test: 2d.path.ellipse.negative</p>
21602 <!-- Testing: ellipse() with negative radius throws INDEX_SIZE_ERR -->
21603 <canvas id="c698" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21604 <script>
21605
21606 function test_2d_path_ellipse_negative() {
21607
21608 var canvas = document.getElementById('c698');
21609 var ctx = canvas.getContext('2d');
21610
21611 var _thrown = undefined;
21612 try {
21613   ctx.ellipse(0, 0, -1, 0, 0, -Math.PI/2, Math.PI/2, true);
21614 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
21615
21616 try {
21617   ctx.ellipse(0, 0, 0, -1, 0, -Math.PI/2, Math.PI/2, true);
21618 } catch (e) { _thrown = e }; ok(_thrown && _thrown.name == "IndexSizeError" && _thrown.code == DOMException.INDEX_SIZE_ERR, "should throw IndexSizeError");
21619
21620
21621 }
21622 </script>
21623
21624 <!-- [[[ test_2d.path.ellipse.nonempty.html ]]] -->
21625
21626 <p>Canvas test: 2d.path.ellipse.nonempty</p>
21627 <!-- Testing: ellipse() with a non-empty path does draw a straight line to the start point -->
21628 <canvas id="c699" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21629 <script>
21630
21631 function test_2d_path_ellipse_nonempty() {
21632
21633 var canvas = document.getElementById('c699');
21634 var ctx = canvas.getContext('2d');
21635
21636 ctx.fillStyle = '#f00';
21637 ctx.fillRect(0, 0, 100, 50);
21638 ctx.lineWidth = 50;
21639 ctx.strokeStyle = '#0f0';
21640 ctx.beginPath();
21641 ctx.moveTo(0, 25);
21642 ctx.ellipse(200, 25, 5, 2, 0, 0, 2*Math.PI, true);
21643 ctx.stroke();
21644 isPixel(ctx, 50,25, 0,255,0,255, 0);
21645
21646
21647 }
21648 </script>
21649
21650 <!-- [[[ test_2d.path.bezierCurveTo.nonfinite.html ]]] -->
21651
21652 <p>Canvas test: 2d.path.ellipse.nonfinite</p>
21653 <!-- Testing: bezierCurveTo() with Infinity/NaN is ignored -->
21654 <canvas id="c700" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21655 <script>
21656
21657 function test_2d_path_ellipse_nonfinite() {
21658
21659 var canvas = document.getElementById('c700');
21660 var ctx = canvas.getContext('2d');
21661
21662 var _thrown_outer = false;
21663 try {
21664
21665 ctx.moveTo(0, 0);
21666 ctx.lineTo(100, 0);
21667 ctx.ellipse(Infinity, 25, 0, 0, 0, 0, 2 * Math.PI, false);
21668 ctx.ellipse(-Infinity, 25, 0, 0, 0, 0, 2 * Math.PI, false);
21669 ctx.ellipse(NaN, 25, 0, 0, 0, 0, 2 * Math.PI, false);
21670 ctx.ellipse(50, Infinity, 0, 0, 0, 0, 2 * Math.PI, false);
21671 ctx.ellipse(50, -Infinity, 0, 0, 0, 0, 2 * Math.PI, false);
21672 ctx.ellipse(50, NaN, 50, 0, 0, 0, 2 * Math.PI, false);
21673 ctx.ellipse(50, 25, Infinity, 0, 0, 0, 2 * Math.PI, false);
21674 ctx.ellipse(50, 25, -Infinity, 0, 0, 0, 2 * Math.PI, false);
21675 ctx.ellipse(50, 25, NaN, 0, 0, 0, 2 * Math.PI, false);
21676 ctx.ellipse(50, 25, 0, Infinity, 0, 0, 2 * Math.PI, false);
21677 ctx.ellipse(50, 25, 0, -Infinity, 0, 0, 2 * Math.PI, false);
21678 ctx.ellipse(50, 25, 0, NaN, 0, 0, 2 * Math.PI, false);
21679 ctx.ellipse(50, 25, 0, 0, Infinity, 0, 2 * Math.PI, false);
21680 ctx.ellipse(50, 25, 0, 0, -Infinity, 0, 2 * Math.PI, false);
21681 ctx.ellipse(50, 25, 0, 0, NaN, 0, 2 * Math.PI, false);
21682 ctx.ellipse(50, 25, 0, 0, 0, Infinity, 2 * Math.PI, false);
21683 ctx.ellipse(50, 25, 0, 0, 0, -Infinity, 2 * Math.PI, false);
21684 ctx.ellipse(50, 25, 0, 0, 0, NaN, 2 * Math.PI, false);
21685 ctx.ellipse(50, 25, 0, 0, 0, 0, Infinity, false);
21686 ctx.ellipse(50, 25, 0, 0, 0, 0, -Infinity, false);
21687 ctx.ellipse(50, 25, 0, 0, 0, 0, NaN, false);
21688 ctx.ellipse(Infinity, Infinity, 0, 0, 0, 0, 2 * Math.PI, false);
21689 ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, 0, 2 * Math.PI, false);
21690 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, 0, 2 * Math.PI, false);
21691 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false);
21692 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false);
21693 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, false);
21694 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, false);
21695 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, false);
21696 ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity, false);
21697 ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, Infinity, Infinity, false);
21698 ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, Infinity, Infinity, false);
21699 ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, false);
21700 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false);
21701 ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false);
21702 ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false);
21703 ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false);
21704 ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false);
21705 ctx.ellipse(Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, false);
21706 ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, 0, Infinity, false);
21707 ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, 0, Infinity, false);
21708 ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, 0, Infinity, false);
21709 ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, 0, Infinity, false);
21710 ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity, false);
21711 ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, Infinity, Infinity, false);
21712 ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, Infinity, Infinity, false);
21713 ctx.ellipse(50, Infinity, Infinity, Infinity, 0, Infinity, Infinity, false);
21714 ctx.ellipse(Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity, false);
21715 ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, Infinity, Infinity, false);
21716 ctx.ellipse(50, Infinity, Infinity, 0, Infinity, Infinity, Infinity, false);
21717 ctx.ellipse(Infinity, 25, 50, Infinity, Infinity, Infinity, Infinity, false);
21718 ctx.ellipse(50, Infinity, 50, Infinity, Infinity, Infinity, Infinity, false);
21719 ctx.ellipse(50, 25, Infinity, Infinity, Infinity, Infinity, Infinity, false);
21720 ctx.ellipse(Infinity, Infinity, Infinity, 0, Infinity, 0, 2 * Math.PI, false);
21721 ctx.ellipse(Infinity, Infinity, 0, Infinity, Infinity, 0, 2 * Math.PI, false);
21722 ctx.ellipse(Infinity, 25, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false);
21723 ctx.ellipse(50, Infinity, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false);
21724 ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, Infinity, 2 * Math.PI, false);
21725 ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, Infinity, 2 * Math.PI, false);
21726 ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false);
21727 ctx.ellipse(50, Infinity, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false);
21728 ctx.ellipse(Infinity, Infinity, 0, 0, Infinity, Infinity, 2 * Math.PI, false);
21729 ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false);
21730 ctx.ellipse(50, Infinity, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false);
21731 ctx.ellipse(Infinity, 25, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false);
21732 ctx.ellipse(50, Infinity, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false);
21733 ctx.ellipse(50, 25, Infinity, Infinity, Infinity, Infinity, 2 * Math.PI, false);
21734 ctx.ellipse(Infinity, Infinity, Infinity, 0, 0, 0, Infinity, false);
21735 ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, 0, Infinity, false);
21736 ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, 0, Infinity, false);
21737 ctx.ellipse(50, Infinity, Infinity, Infinity, 0, 0, Infinity, false);
21738 ctx.ellipse(Infinity, Infinity, 0, 0, Infinity, 0, Infinity, false);
21739 ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, 0, Infinity, false);
21740 ctx.ellipse(50, Infinity, Infinity, 0, Infinity, 0, Infinity, false);
21741 ctx.ellipse(Infinity, 25, 0, Infinity, Infinity, 0, Infinity, false);
21742 ctx.ellipse(50, Infinity, 0, Infinity, Infinity, 0, Infinity, false);
21743 ctx.ellipse(50, 25, Infinity, Infinity, Infinity, 0, Infinity, false);
21744 ctx.ellipse(Infinity, Infinity, 0, 0, 0, Infinity, Infinity, false);
21745 ctx.ellipse(Infinity, 25, Infinity, 0, 0, Infinity, Infinity, false);
21746 ctx.ellipse(50, Infinity, Infinity, 0, 0, Infinity, Infinity, false);
21747 ctx.ellipse(Infinity, 25, 0, Infinity, 0, Infinity, Infinity, false);
21748 ctx.ellipse(50, Infinity, 0, Infinity, 0, Infinity, Infinity, false);
21749 ctx.ellipse(50, 25, Infinity, Infinity, 0, Infinity, Infinity, false);
21750 ctx.ellipse(Infinity, 25, 0, 0, Infinity, Infinity, Infinity, false);
21751 ctx.ellipse(50, Infinity, 0, 0, Infinity, Infinity, Infinity, false);
21752 ctx.ellipse(50, 25, Infinity, 0, Infinity, Infinity, Infinity, false);
21753 ctx.ellipse(50, 25, 50, Infinity, Infinity, Infinity, Infinity, false);
21754 ctx.ellipse(Infinity, Infinity, 0, Infinity, 0, 0, 2 * Math.PI, false);
21755 ctx.ellipse(Infinity, 25, Infinity, Infinity, 0, 0, 2 * Math.PI, false);
21756 ctx.ellipse(50, Infinity, Infinity, Infinity, 0, 0, 2 * Math.PI, false);
21757 ctx.ellipse(Infinity, Infinity, 0, 0, Infinity, 0, 2 * Math.PI, false);
21758 ctx.ellipse(Infinity, 25, Infinity, 0, Infinity, 0, 2 * Math.PI, false);
21759 ctx.ellipse(50, Infinity, Infinity, 0, Infinity, 0, 2 * Math.PI, false);
21760 ctx.ellipse(Infinity, 25, 0, Infinity, Infinity, 0, 2 * Math.PI, false);
21761 ctx.ellipse(50, Infinity, 0, Infinity, Infinity, 0, 2 * Math.PI, false);
21762 ctx.ellipse(50, 25, Infinity, Infinity, Infinity, 0, 2 * Math.PI, false);
21763 ctx.ellipse(Infinity, Infinity, 0, 0, 0, Infinity, 2 * Math.PI, false);
21764 ctx.ellipse(Infinity, 25, Infinity, 0, 0, Infinity, 2 * Math.PI, false);
21765 ctx.ellipse(50, Infinity, Infinity, 0, 0, Infinity, 2 * Math.PI, false);
21766 ctx.ellipse(Infinity, 25, 0, Infinity, 0, Infinity, 2 * Math.PI, false);
21767 ctx.ellipse(50, Infinity, 0, Infinity, 0, Infinity, 2 * Math.PI, false);
21768 ctx.ellipse(50, 25, Infinity, Infinity, 0, Infinity, 2 * Math.PI, false);
21769 ctx.ellipse(Infinity, 25, 0, 0, Infinity, Infinity, 2 * Math.PI, false);
21770 ctx.ellipse(50, Infinity, 0, 0, Infinity, Infinity, 2 * Math.PI, false);
21771 ctx.ellipse(50, 25, Infinity, 0, Infinity, Infinity, 2 * Math.PI, false);
21772 ctx.ellipse(50, 25, 0, Infinity, Infinity, Infinity, 2 * Math.PI, false);
21773 ctx.ellipse(Infinity, Infinity, 0, 0, 0, 0, Infinity, false);
21774 ctx.ellipse(Infinity, 25, Infinity, 0, 0, 0, Infinity, false);
21775 ctx.ellipse(50, Infinity, Infinity, 0, 0, 0, Infinity, false);
21776 ctx.ellipse(Infinity, 25, 0, Infinity, 0, 0, Infinity, false);
21777 ctx.ellipse(50, Infinity, 0, Infinity, 0, 0, Infinity, false);
21778 ctx.ellipse(50, 25, Infinity, Infinity, 0, 0, Infinity, false);
21779 ctx.ellipse(Infinity, 25, 0, 0, Infinity, 0, Infinity, false);
21780 ctx.ellipse(50, Infinity, 0, 0, Infinity, 0, Infinity, false);
21781 ctx.ellipse(50, 25, Infinity, 0, Infinity, 0, Infinity, false);
21782 ctx.ellipse(50, 25, 0, Infinity, Infinity, 0, Infinity, false);
21783 ctx.ellipse(Infinity, 25, 0, 0, 0, Infinity, Infinity, false);
21784 ctx.ellipse(50, Infinity, 0, 0, 0, Infinity, Infinity, false);
21785 ctx.ellipse(50, 25, Infinity, 0, 0, Infinity, Infinity, false);
21786 ctx.ellipse(50, 25, 0, Infinity, 0, Infinity, Infinity, false);
21787 ctx.ellipse(50, 25, 0, 0, Infinity, Infinity, Infinity, false);
21788 ctx.ellipse(Infinity, 25, Infinity, 0, 0, 0, 2 * Math.PI, false);
21789 ctx.ellipse(50, Infinity, Infinity, 0, 0, 0, 2 * Math.PI, false);
21790 ctx.ellipse(Infinity, 25, 0, Infinity, 0, 0, 2 * Math.PI, false);
21791 ctx.ellipse(50, Infinity, 0, Infinity, 0, 0, 2 * Math.PI, false);
21792 ctx.ellipse(50, 25, Infinity, Infinity, 0, 0, 2 * Math.PI, false);
21793 ctx.ellipse(Infinity, 25, 0, 0, Infinity, 0, 2 * Math.PI, false);
21794 ctx.ellipse(50, Infinity, 0, 0, Infinity, 0, 2 * Math.PI, false);
21795 ctx.ellipse(50, 25, Infinity, 0, Infinity, 0, 2 * Math.PI, false);
21796 ctx.ellipse(50, 25, 0, Infinity, Infinity, 0, 2 * Math.PI, false);
21797 ctx.ellipse(Infinity, 25, 0, 0, 0, Infinity, 2 * Math.PI, false);
21798 ctx.ellipse(50, Infinity, 0, 0, 0, Infinity, 2 * Math.PI, false);
21799 ctx.ellipse(50, 25, Infinity, 0, 0, Infinity, 2 * Math.PI, false);
21800 ctx.ellipse(50, 25, 0, Infinity, 0, Infinity, 2 * Math.PI, false);
21801 ctx.ellipse(50, 25, 0, 0, Infinity, Infinity, 2 * Math.PI, false);
21802 ctx.ellipse(Infinity, 25, 0, 0, 0, 0, Infinity, false);
21803 ctx.ellipse(50, Infinity, 0, 0, 0, 0, Infinity, false);
21804 ctx.ellipse(50, 25, Infinity, 0, 0, 0, Infinity, false);
21805 ctx.ellipse(50, 25, 0, Infinity, 0, 0, Infinity, false);
21806 ctx.ellipse(50, 25, 0, 0, Infinity, 0, Infinity, false);
21807 ctx.ellipse(50, 25, 0, 0, 0, Infinity, Infinity, false);
21808 ctx.lineTo(100, 50);
21809 ctx.lineTo(0, 50);
21810 ctx.fillStyle = '#0f0';
21811 ctx.fill();
21812 isPixel(ctx, 50,25, 0,255,0,255, 0);
21813 isPixel(ctx, 90,45, 0,255,0,255, 0);
21814
21815 } catch (e) {
21816     _thrown_outer = true;
21817 }
21818 ok(!_thrown_outer, ctx.canvas.id + ' should not throw exception');
21819
21820
21821 }
21822 </script>
21823
21824
21825 <!-- [[[ test_2d.path.ellipse.scale.1.html ]]] -->
21826
21827 <p>Canvas test: 2d.path.ellipse.scale.1</p>
21828 <!-- Testing: Non-uniformly scaled ellipse are the right shape -->
21829 <canvas id="c701" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21830 <script>
21831
21832 function test_2d_path_ellipse_scale_1() {
21833
21834 var canvas = document.getElementById('c701');
21835 var ctx = canvas.getContext('2d');
21836
21837 ctx.fillStyle = '#f00';
21838 ctx.fillRect(0, 0, 100, 50);
21839 ctx.scale(2, 0.5);
21840 ctx.fillStyle = '#0f0';
21841 ctx.beginPath();
21842 var hypothenuse = Math.sqrt(50 * 50 + 25 * 25);
21843 var tolerance = 0.5;
21844 var radius = hypothenuse + tolerance;
21845 ctx.ellipse(25, 50, radius, radius, 0, 0, 2*Math.PI, false);
21846 ctx.fill();
21847 ctx.fillStyle = '#f00';
21848 ctx.beginPath();
21849 ctx.moveTo(-25, 50);
21850 ctx.ellipse(-25, 50, 24, 34, 0, 0, 2 * Math.PI, false);
21851 ctx.moveTo(75, 50);
21852 ctx.ellipse(75, 50, 24, 34, 0, 0, 2 * Math.PI, false);
21853 ctx.moveTo(25, -25);
21854 ctx.ellipse(25, -25, 34, 24, 0, 0, 2 * Math.PI, false);
21855 ctx.moveTo(25, 125);
21856 ctx.ellipse(25, -25, 34, 24, 0, 0, 2 * Math.PI, false);
21857 ctx.fill();
21858
21859 isPixel(ctx, 0,0, 0,255,0,255, 0);
21860 isPixel(ctx, 50,0, 0,255,0,255, 0);
21861 isPixel(ctx, 99,0, 0,255,0,255, 0);
21862 isPixel(ctx, 0,25, 0,255,0,255, 0);
21863 isPixel(ctx, 50,25, 0,255,0,255, 0);
21864 isPixel(ctx, 99,25, 0,255,0,255, 0);
21865 isPixel(ctx, 0,49, 0,255,0,255, 0);
21866 isPixel(ctx, 50,49, 0,255,0,255, 0);
21867 isPixel(ctx, 99,49, 0,255,0,255, 0);
21868
21869
21870 }
21871 </script>
21872
21873 <!-- [[[ test_2d.path.ellipse.scale.2.html ]]] -->
21874
21875 <p>Canvas test: 2d.path.ellipse.scale.2</p>
21876 <!-- Testing: Highly scaled ellipse are the right shape -->
21877 <canvas id="c702" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21878 <script>
21879
21880
21881 function test_2d_path_ellipse_scale_2() {
21882
21883 var canvas = document.getElementById('c702');
21884 var ctx = canvas.getContext('2d');
21885
21886 ctx.fillStyle = '#f00';
21887 ctx.fillRect(0, 0, 100, 50);
21888 ctx.scale(100, 100);
21889 ctx.strokeStyle = '#0f0';
21890 ctx.lineWidth = 1.2;
21891 ctx.beginPath();
21892 ctx.ellipse(0, 0, 0.6, 1, 0, 0, Math.PI/2, false);
21893 ctx.ellipse(0, 0, 1, 0.6, 0, 0, Math.PI/2, false);
21894 ctx.stroke();
21895
21896 isPixel(ctx, 1,1, 0,255,0,255, 0);
21897 isPixel(ctx, 50,1, 0,255,0,255, 0);
21898 isPixel(ctx, 98,1, 0,255,0,255, 0);
21899 isPixel(ctx, 1,25, 0,255,0,255, 0);
21900 isPixel(ctx, 50,25, 0,255,0,255, 0);
21901 isPixel(ctx, 98,25, 0,255,0,255, 0);
21902 isPixel(ctx, 1,48, 0,255,0,255, 0);
21903 isPixel(ctx, 50,48, 0,255,0,255, 0);
21904 isPixel(ctx, 98,48, 0,255,0,255, 0);
21905
21906
21907 }
21908 </script>
21909
21910 <!-- [[[ test_2d.path.ellipse.selfintersect.1.html ]]] -->
21911
21912 <p>Canvas test: 2d.path.ellipse.selfintersect.1</p>
21913 <!-- Testing: ellipse() with lineWidth > 2*radius is drawn sensibly -->
21914 <canvas id="c703" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21915 <script>
21916
21917
21918 function test_2d_path_ellipse_selfintersect_1() {
21919
21920 var canvas = document.getElementById('c703');
21921 var ctx = canvas.getContext('2d');
21922
21923 ctx.fillStyle = '#0f0';
21924 ctx.fillRect(0, 0, 100, 50);
21925 ctx.lineWidth = 200;
21926 ctx.strokeStyle = '#f00';
21927 ctx.beginPath();
21928 ctx.ellipse(100, 50, 35, 25, 0, 0, -Math.PI/2, true);
21929 ctx.stroke();
21930 ctx.beginPath();
21931 ctx.ellipse(0, 0, 35, 25, 0, 0, -Math.PI/2, true);
21932 ctx.stroke();
21933 isPixel(ctx, 50,25, 0,255,0,255, 0);
21934
21935
21936 }
21937 </script>
21938
21939 <!-- [[[ test_2d.path.ellipse.selfintersect.2.html ]]] -->
21940
21941 <p>Canvas test: 2d.path.ellipse.selfintersect.2</p>
21942 <!-- Testing: ellipse() with lineWidth > 2*radius is drawn sensibly -->
21943 <canvas id="c704" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21944 <script>
21945
21946
21947 function test_2d_path_ellipse_selfintersect_2() {
21948
21949 var canvas = document.getElementById('c704');
21950 var ctx = canvas.getContext('2d');
21951
21952 ctx.fillStyle = '#f00';
21953 ctx.fillRect(0, 0, 100, 50);
21954 ctx.lineWidth = 180;
21955 ctx.strokeStyle = '#0f0';
21956 ctx.beginPath();
21957 ctx.ellipse(-50, 50, 25, 25, 0, 0, -Math.PI/2, true);
21958 ctx.stroke();
21959 ctx.beginPath();
21960 ctx.ellipse(100, 0, 25, 25, 0, 0, -Math.PI/2, true);
21961 ctx.stroke();
21962 isPixel(ctx, 50,25, 0,255,0,255, 0);
21963 isPixel(ctx, 90,10, 0,255,0,255, 0);
21964 isPixel(ctx, 97,1, 0,255,0,255, 0);
21965 isPixel(ctx, 97,2, 0,255,0,255, 0);
21966 isPixel(ctx, 97,3, 0,255,0,255, 0);
21967 isPixel(ctx, 2,48, 0,255,0,255, 0);
21968
21969
21970 }
21971 </script>
21972
21973 <!-- [[[ test_2d.path.ellipse.shape.1.html ]]] -->
21974
21975 <p>Canvas test: 2d.path.ellipse.shape.1</p>
21976 <!-- Testing: ellipse() from 0 to pi does not draw anything in the wrong half -->
21977 <canvas id="c705" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
21978 <script>
21979
21980 function test_2d_path_ellipse_shape_1() {
21981
21982 var canvas = document.getElementById('c705');
21983 var ctx = canvas.getContext('2d');
21984
21985 ctx.fillStyle = '#0f0';
21986 ctx.fillRect(0, 0, 100, 50);
21987 ctx.lineWidth = 50;
21988 ctx.strokeStyle = '#f00';
21989 ctx.beginPath();
21990 ctx.ellipse(50, 50, 40, 60, 0, 0, Math.PI, false);
21991 ctx.stroke();
21992 isPixel(ctx, 50,25, 0,255,0,255, 0);
21993 isPixel(ctx, 1,1, 0,255,0,255, 0);
21994 isPixel(ctx, 98,1, 0,255,0,255, 0);
21995 isPixel(ctx, 1,48, 0,255,0,255, 0);
21996 isPixel(ctx, 20,48, 0,255,0,255, 0);
21997 isPixel(ctx, 98,48, 0,255,0,255, 0);
21998
21999 }
22000 </script>
22001
22002 <!-- [[[ test_2d.path.ellipse.shape.2.html ]]] -->
22003
22004 <p>Canvas test: 2d.path.ellipse.shape.2</p>
22005 <!-- Testing: ellipse() from 0 to pi draws stuff in the right half -->
22006 <canvas id="c706" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22007 <script>
22008
22009 function test_2d_path_ellipse_shape_2() {
22010
22011 var canvas = document.getElementById('c706');
22012 var ctx = canvas.getContext('2d');
22013
22014 ctx.fillStyle = '#f00';
22015 ctx.fillRect(0, 0, 100, 50);
22016 ctx.lineWidth = 100;
22017 ctx.strokeStyle = '#0f0';
22018 ctx.beginPath();
22019 ctx.ellipse(50, 50, 30, 15, 0, 0, Math.PI, true);
22020 ctx.stroke();
22021 isPixel(ctx, 50,25, 0,255,0,255, 0);
22022 isPixel(ctx, 1,1, 0,255,0,255, 0);
22023 isPixel(ctx, 98,1, 0,255,0,255, 0);
22024 isPixel(ctx, 1,48, 0,255,0,255, 0);
22025 isPixel(ctx, 20,48, 0,255,0,255, 0);
22026 isPixel(ctx, 98,48, 0,255,0,255, 0);
22027
22028
22029 }
22030 </script>
22031
22032 <!-- [[[ test_2d.path.ellipse.shape.3.html ]]] -->
22033
22034 <p>Canvas test: 2d.path.ellipse.shape.3</p>
22035 <!-- Testing: ellipse() from 0 to -pi/2 draws stuff in the right quadrant -->
22036 <canvas id="c707" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22037 <script>
22038
22039
22040 function test_2d_path_ellipse_shape_3() {
22041
22042 var canvas = document.getElementById('c707');
22043 var ctx = canvas.getContext('2d');
22044
22045 ctx.fillStyle = '#f00';
22046 ctx.fillRect(0, 0, 100, 50);
22047 ctx.lineWidth = 150;
22048 ctx.strokeStyle = '#0f0';
22049 ctx.beginPath();
22050 ctx.ellipse(-50, 50, 100, 200, 0, 0, -Math.PI/2, true);
22051 ctx.stroke();
22052 isPixel(ctx, 50,25, 0,255,0,255, 0);
22053 isPixel(ctx, 1,1, 0,255,0,255, 0);
22054 isPixel(ctx, 98,1, 0,255,0,255, 0);
22055 isPixel(ctx, 1,48, 0,255,0,255, 0);
22056 isPixel(ctx, 98,48, 0,255,0,255, 0);
22057
22058
22059 }
22060 </script>
22061
22062 <!-- [[[ test_2d.path.ellipse.shape.4.html ]]] -->
22063
22064 <p>Canvas test: 2d.path.ellipse.shape.4</p>
22065 <!-- Testing: ellipse() from 0 to 5pi does not draw strange things -->
22066 <canvas id="c708" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22067 <script>
22068
22069
22070 function test_2d_path_ellipse_shape_4() {
22071
22072 var canvas = document.getElementById('c708');
22073 var ctx = canvas.getContext('2d');
22074
22075 ctx.fillStyle = '#0f0';
22076 ctx.fillRect(0, 0, 100, 50);
22077 ctx.lineWidth = 200;
22078 ctx.strokeStyle = '#f00';
22079 ctx.beginPath();
22080 ctx.ellipse(300, 0, 100, 200, 0, 0, 5*Math.PI, false);
22081 ctx.stroke();
22082 isPixel(ctx, 50,25, 0,255,0,255, 0);
22083 isPixel(ctx, 1,1, 0,255,0,255, 0);
22084 isPixel(ctx, 98,1, 0,255,0,255, 0);
22085 isPixel(ctx, 1,48, 0,255,0,255, 0);
22086 isPixel(ctx, 98,48, 0,255,0,255, 0);
22087
22088
22089 }
22090 </script>
22091
22092 <!-- [[[ test_2d.path.ellipse.twopie.1.html ]]] -->
22093
22094 <p>Canvas test: 2d.path.ellipse.twopie.1</p>
22095 <!-- Testing: ellipse() draws nothing when end = start + 2pi-e and anticlockwise -->
22096 <canvas id="c709" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22097 <script>
22098
22099 function test_2d_path_ellipse_twopie_1() {
22100
22101 var canvas = document.getElementById('c709');
22102 var ctx = canvas.getContext('2d');
22103
22104 ctx.fillStyle = '#0f0';
22105 ctx.fillRect(0, 0, 100, 50);
22106 ctx.strokeStyle = '#f00';
22107 ctx.lineWidth = 100;
22108 ctx.beginPath();
22109 ctx.ellipse(50, 25, 50, 60, 0, 0, 2*Math.PI - 1e-4, true);
22110 ctx.stroke();
22111 isPixel(ctx, 50,20, 0,255,0,255, 0);
22112
22113
22114 }
22115 </script>
22116
22117 <!-- [[[ test_2d.path.ellipse.twopie.2.html ]]] -->
22118
22119 <p>Canvas test: 2d.path.ellipse.twopie.2</p>
22120 <!-- Testing: ellipse() draws a full ellipse when end = start + 2pi-e and clockwise -->
22121 <canvas id="c710" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22122 <script>
22123
22124
22125 function test_2d_path_ellipse_twopie_2() {
22126
22127 var canvas = document.getElementById('c710');
22128 var ctx = canvas.getContext('2d');
22129
22130 ctx.fillStyle = '#f00';
22131 ctx.fillRect(0, 0, 100, 50);
22132 ctx.strokeStyle = '#0f0';
22133 ctx.lineWidth = 100;
22134 ctx.beginPath();
22135 ctx.ellipse(50, 25, 50, 30, 0, 0, 2*Math.PI - 1e-4, false);
22136 ctx.stroke();
22137 isPixel(ctx, 50,20, 0,255,0,255, 0);
22138
22139
22140 }
22141 </script>
22142
22143 <!-- [[[ test_2d.path.ellipse.twopie.3.html ]]] -->
22144
22145 <p>Canvas test: 2d.path.ellipse.twopie.3</p>
22146 <!-- Testing: ellipse() draws a full circle when end = start + 2pi+e and anticlockwise -->
22147 <canvas id="c711" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22148 <script>
22149
22150
22151 function test_2d_path_ellipse_twopie_3() {
22152
22153 var canvas = document.getElementById('c711');
22154 var ctx = canvas.getContext('2d');
22155
22156 ctx.fillStyle = '#f00';
22157 ctx.fillRect(0, 0, 100, 50);
22158 ctx.strokeStyle = '#0f0';
22159 ctx.lineWidth = 100;
22160 ctx.beginPath();
22161 ctx.ellipse(50, 25, 50, 25, 0, 0, 2*Math.PI + 1e-4, true);
22162 ctx.stroke();
22163 isPixel(ctx, 50,20, 0,255,0,255, 0);
22164
22165
22166 }
22167 </script>
22168
22169 <!-- [[[ test_2d.path.ellipse.twopie.4.html ]]] -->
22170
22171 <p>Canvas test: 2d.path.ellipse.twopie.4</p>
22172 <!-- Testing: ellipse() draws nothing when end = start + 2pi+e and clockwise -->
22173 <canvas id="c712" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22174 <script>
22175
22176
22177 function test_2d_path_ellipse_twopie_4() {
22178
22179 var canvas = document.getElementById('c712');
22180 var ctx = canvas.getContext('2d');
22181
22182 ctx.fillStyle = '#f00';
22183 ctx.fillRect(0, 0, 100, 50);
22184 ctx.strokeStyle = '#0f0';
22185 ctx.lineWidth = 100;
22186 ctx.beginPath();
22187 ctx.ellipse(50, 25, 50, 25, 0, 0, 2*Math.PI + 1e-4, false);
22188 ctx.stroke();
22189 isPixel(ctx, 50,20, 0,255,0,255, 0);
22190
22191
22192 }
22193 </script>
22194
22195 <!-- [[[ test_2d.path.ellipse.zero.1.html ]]] -->
22196
22197 <p>Canvas test: 2d.path.ellipse.zero.1</p>
22198 <!-- Testing: ellipse() draws nothing when startAngle = endAngle and anticlockwise -->
22199 <canvas id="c713" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22200 <script>
22201
22202
22203 function test_2d_path_ellipse_zero_1() {
22204
22205 var canvas = document.getElementById('c713');
22206 var ctx = canvas.getContext('2d');
22207
22208 ctx.fillStyle = '#0f0';
22209 ctx.fillRect(0, 0, 100, 50);
22210 ctx.strokeStyle = '#f00';
22211 ctx.lineWidth = 100;
22212 ctx.beginPath();
22213 ctx.ellipse(50, 25, 50, 25, 0, 0, 0, true);
22214 ctx.stroke();
22215 isPixel(ctx, 50,20, 0,255,0,255, 0);
22216
22217
22218
22219 }
22220 </script>
22221
22222 <!-- [[[ test_2d.path.ellipse.zero.2.html ]]] -->
22223
22224 <p>Canvas test: 2d.path.ellipse.zero.2</p>
22225 <!-- Testing: ellipse() draws nothing when startAngle = endAngle and clockwise -->
22226 <canvas id="c714" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22227 <script>
22228
22229
22230 function test_2d_path_ellipse_zero_2() {
22231
22232 var canvas = document.getElementById('c714');
22233 var ctx = canvas.getContext('2d');
22234
22235 ctx.fillStyle = '#0f0';
22236 ctx.fillRect(0, 0, 100, 50);
22237 ctx.strokeStyle = '#f00';
22238 ctx.lineWidth = 100;
22239 ctx.beginPath();
22240 ctx.ellipse(50, 25, 50, 25, 0, 0, 0, true);
22241 ctx.stroke();
22242 isPixel(ctx, 50,20, 0,255,0,255, 0);
22243
22244
22245 }
22246 </script>
22247
22248 <!-- [[[ test_2d.path.ellipse.zeroradius.html ]]] -->
22249
22250 <p>Canvas test: 2d.path.ellipse.zeroradius</p>
22251 <!-- Testing: ellipse() with zero radius draws a line to the start point -->
22252 <canvas id="c715" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22253 <script>
22254
22255 function test_2d_path_ellipse_zeroradius() {
22256
22257 var canvas = document.getElementById('c715');
22258 var ctx = canvas.getContext('2d');
22259
22260 ctx.fillStyle = '#f00'
22261 ctx.fillRect(0, 0, 100, 50);
22262 ctx.lineWidth = 50;
22263 ctx.strokeStyle = '#0f0';
22264 ctx.beginPath();
22265 ctx.moveTo(0, 25);
22266 ctx.ellipse(200, 25, 0, 0, 0, 0, Math.PI, true);
22267 ctx.stroke();
22268
22269 isPixel(ctx, 50, 25, 0, 255, 0, 255, 0);
22270
22271
22272 }
22273 </script>
22274
22275 <!-- [[[ test_2d.path.ellipse.rotate.html ]]] -->
22276
22277 <p>Canvas test: 2d.path.ellipse.rotate</p>
22278 <!-- Testing: ellipse() with a rotation angle works -->
22279 <canvas id="c716" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
22280 <script>
22281
22282 function test_2d_path_ellipse_rotate() {
22283
22284 var canvas = document.getElementById('c716');
22285 var ctx = canvas.getContext('2d');
22286
22287 ctx.fillStyle = '#0f0';
22288 ctx.fillRect(0, 0, 100, 50);
22289 ctx.lineWidth = 5;
22290 ctx.strokeStyle = '#f00';
22291 ctx.beginPath();
22292 ctx.ellipse(50, 25, 50, 25, Math.PI/4, 0, 2 * Math.PI, false);
22293 ctx.stroke();
22294 ctx.beginPath();
22295 ctx.ellipse(50, 25, 50, 25, -Math.PI/4, 0, 2 * Math.PI, false);
22296 ctx.stroke();
22297 isPixel(ctx, 50, 25, 0,255,0,255, 0);
22298 isPixel(ctx, 48,1, 0,255,0,255, 0);
22299 isPixel(ctx, 98,24, 0,255,0,255, 0);
22300 isPixel(ctx, 48,48, 0,255,0,255, 0);
22301 isPixel(ctx, 24,48, 0,255,0,255, 0);
22302 }
22303 </script>
22304
22305 <script>
22306
22307 function asyncTestsDone() {
22308         if (isDone_test_2d_drawImage_animated_apng &&
22309                 isDone_test_2d_pattern_animated_gif &&
22310                 isDone_test_2d_drawImage_animated_gif) {
22311                 SimpleTest.finish();
22312         } else {
22313                 setTimeout(asyncTestsDone, 500);
22314         }
22315  }
22316
22317 // eslint-disable-next-line complexity
22318 function runTests() {
22319 /**
22320  * xor and lighter aren't well handled by cairo; they mostly work, but we don't want
22321  * to test that
22322  */
22323  //test_2d_composite_solid_lighter();
22324  //test_2d_composite_transparent_xor();
22325  //test_2d_composite_solid_xor();
22326  //test_2d_composite_transparent_lighter();
22327  //test_2d_composite_image_xor();
22328  //test_2d_composite_image_lighter();
22329  //test_2d_composite_canvas_xor();
22330  //test_2d_composite_canvas_lighter();
22331  //test_2d_composite_clip_xor();
22332  //test_2d_composite_clip_lighter();
22333
22334 /**
22335  * Temporarily disabled tests; unbounded operators changed behaviour, need to reevaluate tests
22336  */
22337  //test_2d_composite_canvas_destination_atop();
22338  //test_2d_composite_canvas_destination_in();
22339  //test_2d_composite_canvas_source_in();
22340  //test_2d_composite_canvas_source_out();
22341  //test_2d_composite_image_destination_atop();
22342  //test_2d_composite_image_destination_in();
22343  //test_2d_composite_image_source_in();
22344  //test_2d_composite_image_source_out();
22345
22346  /**
22347   * These tests only pass on Mac OS X >= 10.5; see bug 450114
22348   */
22349  //test_2d_gradient_radial_equal();
22350  //test_2d_gradient_radial_touch1();
22351  //test_2d_gradient_radial_touch2();
22352  //test_2d_gradient_radial_touch3();
22353
22354  /**
22355   * These 19 tests receive special makefile treatment
22356   */
22357  //test_2d_composite_uncovered_image_destination_atop();
22358  //test_2d_composite_uncovered_image_destination_in();
22359  //test_2d_composite_uncovered_image_source_in();
22360  //test_2d_composite_uncovered_image_source_out();
22361  //test_2d_gradient_radial_cone_behind();
22362  //test_2d_gradient_radial_cone_beside();
22363  //test_2d_gradient_radial_cone_front();
22364  //test_2d_gradient_radial_cone_shape2();
22365  //test_2d_gradient_radial_cone_top();
22366  //test_2d_gradient_radial_inside2();
22367  //test_2d_gradient_radial_inside3();
22368  //test_2d_gradient_radial_outside1();
22369  //test_2d_gradient_radial_outside2();
22370  //test_2d_gradient_radial_outside3();
22371  //test_2d_line_cap_closed();
22372  //test_2d_line_join_parallel();
22373  //test_2d_path_arc_shape_3();
22374  //test_2d_path_rect_selfintersect();
22375  //test_2d_strokeRect_zero_5();
22376
22377  /**
22378   * Other tests not being run
22379   */
22380  //test_2d_composite_uncovered_fill_destination_atop();
22381  //test_2d_composite_uncovered_fill_destination_in();
22382  //test_2d_composite_uncovered_fill_source_in();
22383  //test_2d_composite_uncovered_fill_source_out();
22384  //test_2d_composite_uncovered_pattern_destination_atop();
22385  //test_2d_composite_uncovered_pattern_destination_in();
22386  //test_2d_composite_uncovered_pattern_source_in();
22387  //test_2d_composite_uncovered_pattern_source_out();
22388
22389  //test_2d_path_rect_zero_6();  // This test is bogus according to the spec; see bug 407107
22390
22391  // These tests are bogus according to the spec: shadows should not be
22392  // drawn if shadowBlur, shadowOffsetX, and shadowOffsetY are all zero, whic
22393  // they are in these tests
22394  //test_2d_shadow_composite_3();
22395  //test_2d_shadow_composite_4();
22396  try {
22397   test_2d_canvas_readonly();
22398  } catch (e) {
22399   ok(false, "unexpected exception thrown in: test_2d_canvas_readonly");
22400  }
22401  try {
22402   test_2d_canvas_reference();
22403  } catch (e) {
22404   ok(false, "unexpected exception thrown in: test_2d_canvas_reference");
22405  }
22406  try {
22407   test_2d_clearRect_basic();
22408  } catch (e) {
22409   ok(false, "unexpected exception thrown in: test_2d_clearRect_basic");
22410  }
22411  try {
22412   test_2d_clearRect_clip();
22413  } catch (e) {
22414   ok(false, "unexpected exception thrown in: test_2d_clearRect_clip");
22415  }
22416  try {
22417   test_2d_clearRect_globalalpha();
22418  } catch (e) {
22419   ok(false, "unexpected exception thrown in: test_2d_clearRect_globalalpha");
22420  }
22421  try {
22422   test_2d_clearRect_globalcomposite();
22423  } catch (e) {
22424   ok(false, "unexpected exception thrown in: test_2d_clearRect_globalcomposite");
22425  }
22426  try {
22427   test_2d_clearRect_negative();
22428  } catch (e) {
22429   ok(false, "unexpected exception thrown in: test_2d_clearRect_negative");
22430  }
22431  try {
22432   test_2d_clearRect_nonfinite();
22433  } catch (e) {
22434   ok(false, "unexpected exception thrown in: test_2d_clearRect_nonfinite");
22435  }
22436  try {
22437   test_2d_clearRect_path();
22438  } catch (e) {
22439   ok(false, "unexpected exception thrown in: test_2d_clearRect_path");
22440  }
22441  try {
22442   test_2d_clearRect_shadow();
22443  } catch (e) {
22444   ok(false, "unexpected exception thrown in: test_2d_clearRect_shadow");
22445  }
22446  try {
22447   test_2d_clearRect_transform();
22448  } catch (e) {
22449   ok(false, "unexpected exception thrown in: test_2d_clearRect_transform");
22450  }
22451  try {
22452   test_2d_clearRect_zero();
22453  } catch (e) {
22454   ok(false, "unexpected exception thrown in: test_2d_clearRect_zero");
22455  }
22456  try {
22457   test_2d_composite_canvas_copy();
22458  } catch (e) {
22459   ok(false, "unexpected exception thrown in: test_2d_composite_canvas_copy");
22460  }
22461  try {
22462   test_2d_composite_canvas_destination_out();
22463  } catch (e) {
22464   ok(false, "unexpected exception thrown in: test_2d_composite_canvas_destination_out");
22465  }
22466  try {
22467   test_2d_composite_canvas_destination_over();
22468  } catch (e) {
22469   ok(false, "unexpected exception thrown in: test_2d_composite_canvas_destination_over");
22470  }
22471  try {
22472   test_2d_composite_canvas_source_atop();
22473  } catch (e) {
22474   ok(false, "unexpected exception thrown in: test_2d_composite_canvas_source_atop");
22475  }
22476  try {
22477   test_2d_composite_canvas_source_over();
22478  } catch (e) {
22479   ok(false, "unexpected exception thrown in: test_2d_composite_canvas_source_over");
22480  }
22481  try {
22482   test_2d_composite_clip_copy();
22483  } catch (e) {
22484   ok(false, "unexpected exception thrown in: test_2d_composite_clip_copy");
22485  }
22486  try {
22487   test_2d_composite_clip_destination_atop();
22488  } catch (e) {
22489   ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_atop");
22490  }
22491  try {
22492   test_2d_composite_clip_destination_in();
22493  } catch (e) {
22494   ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_in");
22495  }
22496  try {
22497   test_2d_composite_clip_destination_out();
22498  } catch (e) {
22499   ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_out");
22500  }
22501  try {
22502   test_2d_composite_clip_destination_over();
22503  } catch (e) {
22504   ok(false, "unexpected exception thrown in: test_2d_composite_clip_destination_over");
22505  }
22506  try {
22507   test_2d_composite_clip_source_atop();
22508  } catch (e) {
22509   ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_atop");
22510  }
22511  try {
22512   test_2d_composite_clip_source_in();
22513  } catch (e) {
22514   ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_in");
22515  }
22516  try {
22517   test_2d_composite_clip_source_out();
22518  } catch (e) {
22519   ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_out");
22520  }
22521  try {
22522   test_2d_composite_clip_source_over();
22523  } catch (e) {
22524   ok(false, "unexpected exception thrown in: test_2d_composite_clip_source_over");
22525  }
22526  try {
22527   test_2d_composite_globalAlpha_canvas();
22528  } catch (e) {
22529   ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_canvas");
22530  }
22531  try {
22532   test_2d_composite_globalAlpha_canvaspattern();
22533  } catch (e) {
22534   ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_canvaspattern");
22535  }
22536  try {
22537   test_2d_composite_globalAlpha_default();
22538  } catch (e) {
22539   ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_default");
22540  }
22541  try {
22542   test_2d_composite_globalAlpha_fill();
22543  } catch (e) {
22544   ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_fill");
22545  }
22546  try {
22547   test_2d_composite_globalAlpha_image();
22548  } catch (e) {
22549   ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_image");
22550  }
22551  try {
22552   test_2d_composite_globalAlpha_imagepattern();
22553  } catch (e) {
22554   ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_imagepattern");
22555  }
22556  try {
22557   test_2d_composite_globalAlpha_invalid();
22558  } catch (e) {
22559   ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_invalid");
22560  }
22561  try {
22562   test_2d_composite_globalAlpha_range();
22563  } catch (e) {
22564   ok(false, "unexpected exception thrown in: test_2d_composite_globalAlpha_range");
22565  }
22566  try {
22567   test_2d_composite_image_copy();
22568  } catch (e) {
22569   ok(false, "unexpected exception thrown in: test_2d_composite_image_copy");
22570  }
22571  try {
22572   test_2d_composite_image_destination_out();
22573  } catch (e) {
22574   ok(false, "unexpected exception thrown in: test_2d_composite_image_destination_out");
22575  }
22576  try {
22577   test_2d_composite_image_destination_over();
22578  } catch (e) {
22579   ok(false, "unexpected exception thrown in: test_2d_composite_image_destination_over");
22580  }
22581  try {
22582   test_2d_composite_image_source_atop();
22583  } catch (e) {
22584   ok(false, "unexpected exception thrown in: test_2d_composite_image_source_atop");
22585  }
22586  try {
22587   test_2d_composite_image_source_over();
22588  } catch (e) {
22589   ok(false, "unexpected exception thrown in: test_2d_composite_image_source_over");
22590  }
22591  try {
22592   test_2d_composite_operation_casesensitive();
22593  } catch (e) {
22594   ok(false, "unexpected exception thrown in: test_2d_composite_operation_casesensitive");
22595  }
22596  try {
22597   test_2d_composite_operation_darker();
22598  } catch (e) {
22599   ok(false, "unexpected exception thrown in: test_2d_composite_operation_darker");
22600  }
22601  try {
22602   test_2d_composite_operation_default();
22603  } catch (e) {
22604   ok(false, "unexpected exception thrown in: test_2d_composite_operation_default");
22605  }
22606  try {
22607   test_2d_composite_operation_get();
22608  } catch (e) {
22609   ok(false, "unexpected exception thrown in: test_2d_composite_operation_get");
22610  }
22611  try {
22612   test_2d_composite_operation_highlight();
22613  } catch (e) {
22614   ok(false, "unexpected exception thrown in: test_2d_composite_operation_highlight");
22615  }
22616  try {
22617   test_2d_composite_operation_nullsuffix();
22618  } catch (e) {
22619   ok(false, "unexpected exception thrown in: test_2d_composite_operation_nullsuffix");
22620  }
22621  try {
22622   test_2d_composite_operation_over();
22623  } catch (e) {
22624   ok(false, "unexpected exception thrown in: test_2d_composite_operation_over");
22625  }
22626  try {
22627   test_2d_composite_operation_unrecognised();
22628  } catch (e) {
22629   ok(false, "unexpected exception thrown in: test_2d_composite_operation_unrecognised");
22630  }
22631  try {
22632   test_2d_composite_solid_copy();
22633  } catch (e) {
22634   ok(false, "unexpected exception thrown in: test_2d_composite_solid_copy");
22635  }
22636  try {
22637   test_2d_composite_solid_destination_atop();
22638  } catch (e) {
22639   ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_atop");
22640  }
22641  try {
22642   test_2d_composite_solid_destination_in();
22643  } catch (e) {
22644   ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_in");
22645  }
22646  try {
22647   test_2d_composite_solid_destination_out();
22648  } catch (e) {
22649   ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_out");
22650  }
22651  try {
22652   test_2d_composite_solid_destination_over();
22653  } catch (e) {
22654   ok(false, "unexpected exception thrown in: test_2d_composite_solid_destination_over");
22655  }
22656  try {
22657   test_2d_composite_solid_source_atop();
22658  } catch (e) {
22659   ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_atop");
22660  }
22661  try {
22662   test_2d_composite_solid_source_in();
22663  } catch (e) {
22664   ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_in");
22665  }
22666  try {
22667   test_2d_composite_solid_source_out();
22668  } catch (e) {
22669   ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_out");
22670  }
22671  try {
22672   test_2d_composite_solid_source_over();
22673  } catch (e) {
22674   ok(false, "unexpected exception thrown in: test_2d_composite_solid_source_over");
22675  }
22676  try {
22677   test_2d_composite_transparent_copy();
22678  } catch (e) {
22679   ok(false, "unexpected exception thrown in: test_2d_composite_transparent_copy");
22680  }
22681  try {
22682   test_2d_composite_transparent_destination_atop();
22683  } catch (e) {
22684   ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_atop");
22685  }
22686  try {
22687   test_2d_composite_transparent_destination_in();
22688  } catch (e) {
22689   ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_in");
22690  }
22691  try {
22692   test_2d_composite_transparent_destination_out();
22693  } catch (e) {
22694   ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_out");
22695  }
22696  try {
22697   test_2d_composite_transparent_destination_over();
22698  } catch (e) {
22699   ok(false, "unexpected exception thrown in: test_2d_composite_transparent_destination_over");
22700  }
22701  try {
22702   test_2d_composite_transparent_source_atop();
22703  } catch (e) {
22704   ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_atop");
22705  }
22706  try {
22707   test_2d_composite_transparent_source_in();
22708  } catch (e) {
22709   ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_in");
22710  }
22711  try {
22712   test_2d_composite_transparent_source_out();
22713  } catch (e) {
22714   ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_out");
22715  }
22716  try {
22717   test_2d_composite_transparent_source_over();
22718  } catch (e) {
22719   ok(false, "unexpected exception thrown in: test_2d_composite_transparent_source_over");
22720  }
22721  try {
22722   test_2d_composite_uncovered_fill_copy();
22723  } catch (e) {
22724   ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_fill_copy");
22725  }
22726  try {
22727   test_2d_composite_uncovered_image_copy();
22728  } catch (e) {
22729   ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_image_copy");
22730  }
22731  try {
22732   test_2d_composite_uncovered_pattern_copy();
22733  } catch (e) {
22734   ok(false, "unexpected exception thrown in: test_2d_composite_uncovered_pattern_copy");
22735  }
22736  try {
22737   test_2d_drawImage_3arg();
22738  } catch (e) {
22739   ok(false, "unexpected exception thrown in: test_2d_drawImage_3arg");
22740  }
22741  try {
22742   test_2d_drawImage_5arg();
22743  } catch (e) {
22744   ok(false, "unexpected exception thrown in: test_2d_drawImage_5arg");
22745  }
22746  try {
22747   test_2d_drawImage_9arg_basic();
22748  } catch (e) {
22749   ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_basic");
22750  }
22751  try {
22752   test_2d_drawImage_9arg_destpos();
22753  } catch (e) {
22754   ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_destpos");
22755  }
22756  try {
22757   test_2d_drawImage_9arg_destsize();
22758  } catch (e) {
22759   ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_destsize");
22760  }
22761  try {
22762   test_2d_drawImage_9arg_sourcepos();
22763  } catch (e) {
22764   ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_sourcepos");
22765  }
22766  try {
22767   test_2d_drawImage_9arg_sourcesize();
22768  } catch (e) {
22769   ok(false, "unexpected exception thrown in: test_2d_drawImage_9arg_sourcesize");
22770  }
22771  try {
22772   test_2d_drawImage_alpha();
22773  } catch (e) {
22774   ok(false, "unexpected exception thrown in: test_2d_drawImage_alpha");
22775  }
22776  try {
22777   test_2d_drawImage_animated_poster();
22778  } catch (e) {
22779   ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_poster");
22780  }
22781  try {
22782   test_2d_drawImage_broken();
22783  } catch (e) {
22784   ok(false, "unexpected exception thrown in: test_2d_drawImage_broken");
22785  }
22786  try {
22787   test_2d_drawImage_canvas();
22788  } catch (e) {
22789   ok(false, "unexpected exception thrown in: test_2d_drawImage_canvas");
22790  }
22791  try {
22792   test_2d_drawImage_clip();
22793  } catch (e) {
22794   ok(false, "unexpected exception thrown in: test_2d_drawImage_clip");
22795  }
22796  try {
22797   test_2d_drawImage_composite();
22798  } catch (e) {
22799   ok(false, "unexpected exception thrown in: test_2d_drawImage_composite");
22800  }
22801  try {
22802   test_2d_drawImage_floatsource();
22803  } catch (e) {
22804   ok(false, "unexpected exception thrown in: test_2d_drawImage_floatsource");
22805  }
22806  try {
22807   test_2d_drawImage_incomplete();
22808  } catch (e) {
22809   ok(false, "unexpected exception thrown in: test_2d_drawImage_incomplete");
22810  }
22811  try {
22812   test_2d_drawImage_negativedest();
22813  } catch (e) {
22814   ok(false, "unexpected exception thrown in: test_2d_drawImage_negativedest");
22815  }
22816  try {
22817   test_2d_drawImage_negativesource();
22818  } catch (e) {
22819   ok(false, "unexpected exception thrown in: test_2d_drawImage_negativesource");
22820  }
22821  try {
22822   test_2d_drawImage_nonfinite();
22823  } catch (e) {
22824   ok(false, "unexpected exception thrown in: test_2d_drawImage_nonfinite");
22825  }
22826  try {
22827   test_2d_drawImage_nowrap();
22828  } catch (e) {
22829   ok(false, "unexpected exception thrown in: test_2d_drawImage_nowrap");
22830  }
22831  try {
22832   test_2d_drawImage_null();
22833  } catch (e) {
22834   ok(false, "unexpected exception thrown in: test_2d_drawImage_null");
22835  }
22836  try {
22837   test_2d_drawImage_path();
22838  } catch (e) {
22839   ok(false, "unexpected exception thrown in: test_2d_drawImage_path");
22840  }
22841  try {
22842   test_2d_drawImage_self_1();
22843  } catch (e) {
22844   ok(false, "unexpected exception thrown in: test_2d_drawImage_self_1");
22845  }
22846  try {
22847   test_2d_drawImage_self_2();
22848  } catch (e) {
22849   ok(false, "unexpected exception thrown in: test_2d_drawImage_self_2");
22850  }
22851  try {
22852   test_2d_drawImage_transform();
22853  } catch (e) {
22854   ok(false, "unexpected exception thrown in: test_2d_drawImage_transform");
22855  }
22856  try {
22857   test_2d_drawImage_wrongtype();
22858  } catch (e) {
22859   ok(false, "unexpected exception thrown in: test_2d_drawImage_wrongtype");
22860  }
22861  try {
22862   test_2d_drawImage_zerosource();
22863  } catch (e) {
22864   ok(false, "unexpected exception thrown in: test_2d_drawImage_zerosource");
22865  }
22866  try {
22867   test_2d_fillRect_basic();
22868  } catch (e) {
22869   ok(false, "unexpected exception thrown in: test_2d_fillRect_basic");
22870  }
22871  try {
22872   test_2d_fillRect_clip();
22873  } catch (e) {
22874   ok(false, "unexpected exception thrown in: test_2d_fillRect_clip");
22875  }
22876  try {
22877   test_2d_fillRect_negative();
22878  } catch (e) {
22879   ok(false, "unexpected exception thrown in: test_2d_fillRect_negative");
22880  }
22881  try {
22882   test_2d_fillRect_nonfinite();
22883  } catch (e) {
22884   ok(false, "unexpected exception thrown in: test_2d_fillRect_nonfinite");
22885  }
22886  try {
22887   test_2d_fillRect_path();
22888  } catch (e) {
22889   ok(false, "unexpected exception thrown in: test_2d_fillRect_path");
22890  }
22891  try {
22892   test_2d_fillRect_shadow();
22893  } catch (e) {
22894   ok(false, "unexpected exception thrown in: test_2d_fillRect_shadow");
22895  }
22896  try {
22897   test_2d_fillRect_transform();
22898  } catch (e) {
22899   ok(false, "unexpected exception thrown in: test_2d_fillRect_transform");
22900  }
22901  try {
22902   test_2d_fillRect_zero();
22903  } catch (e) {
22904   ok(false, "unexpected exception thrown in: test_2d_fillRect_zero");
22905  }
22906  try {
22907   test_2d_fillStyle_default();
22908  } catch (e) {
22909   ok(false, "unexpected exception thrown in: test_2d_fillStyle_default");
22910  }
22911  try {
22912   test_2d_fillStyle_get_semitransparent();
22913  } catch (e) {
22914   ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_semitransparent");
22915  }
22916  try {
22917   test_2d_fillStyle_get_solid();
22918  } catch (e) {
22919   ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_solid");
22920  }
22921  try {
22922   test_2d_fillStyle_get_transparent();
22923  } catch (e) {
22924   ok(false, "unexpected exception thrown in: test_2d_fillStyle_get_transparent");
22925  }
22926  try {
22927   test_2d_fillStyle_invalidstring();
22928  } catch (e) {
22929   ok(false, "unexpected exception thrown in: test_2d_fillStyle_invalidstring");
22930  }
22931  try {
22932   test_2d_fillStyle_invalidtype();
22933  } catch (e) {
22934   ok(false, "unexpected exception thrown in: test_2d_fillStyle_invalidtype");
22935  }
22936  try {
22937   test_2d_fillStyle_parse_current_basic();
22938  } catch (e) {
22939   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_basic");
22940  }
22941  try {
22942   test_2d_fillStyle_parse_current_changed();
22943  } catch (e) {
22944   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_changed");
22945  }
22946  try {
22947   test_2d_fillStyle_parse_current_removed();
22948  } catch (e) {
22949   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_current_removed");
22950  }
22951  try {
22952   test_2d_fillStyle_parse_hex3();
22953  } catch (e) {
22954   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hex3");
22955  }
22956  try {
22957   test_2d_fillStyle_parse_hex6();
22958  } catch (e) {
22959   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hex6");
22960  }
22961  try {
22962   test_2d_fillStyle_parse_hsl_1();
22963  } catch (e) {
22964   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_1");
22965  }
22966  try {
22967   test_2d_fillStyle_parse_hsl_2();
22968  } catch (e) {
22969   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_2");
22970  }
22971  try {
22972   test_2d_fillStyle_parse_hsl_3();
22973  } catch (e) {
22974   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_3");
22975  }
22976  try {
22977   test_2d_fillStyle_parse_hsl_4();
22978  } catch (e) {
22979   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_4");
22980  }
22981  try {
22982   test_2d_fillStyle_parse_hsl_5();
22983  } catch (e) {
22984   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_5");
22985  }
22986  try {
22987   test_2d_fillStyle_parse_hsl_clamp_1();
22988  } catch (e) {
22989   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_1");
22990  }
22991  try {
22992   test_2d_fillStyle_parse_hsl_clamp_2();
22993  } catch (e) {
22994   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_2");
22995  }
22996  try {
22997   test_2d_fillStyle_parse_hsl_clamp_3();
22998  } catch (e) {
22999   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_3");
23000  }
23001  try {
23002   test_2d_fillStyle_parse_hsl_clamp_4();
23003  } catch (e) {
23004   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsl_clamp_4");
23005  }
23006  try {
23007   test_2d_fillStyle_parse_hsla_1();
23008  } catch (e) {
23009   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_1");
23010  }
23011  try {
23012   test_2d_fillStyle_parse_hsla_2();
23013  } catch (e) {
23014   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_2");
23015  }
23016  try {
23017   test_2d_fillStyle_parse_hsla_clamp_1();
23018  } catch (e) {
23019   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_1");
23020  }
23021  try {
23022   test_2d_fillStyle_parse_hsla_clamp_2();
23023  } catch (e) {
23024   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_2");
23025  }
23026  try {
23027   test_2d_fillStyle_parse_hsla_clamp_3();
23028  } catch (e) {
23029   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_3");
23030  }
23031  try {
23032   test_2d_fillStyle_parse_hsla_clamp_4();
23033  } catch (e) {
23034   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_4");
23035  }
23036  try {
23037   test_2d_fillStyle_parse_hsla_clamp_5();
23038  } catch (e) {
23039   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_5");
23040  }
23041  try {
23042   test_2d_fillStyle_parse_hsla_clamp_6();
23043  } catch (e) {
23044   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_hsla_clamp_6");
23045  }
23046  try {
23047   test_2d_fillStyle_parse_html4();
23048  } catch (e) {
23049   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_html4");
23050  }
23051  try {
23052   test_2d_fillStyle_parse_invalid_hex3();
23053  } catch (e) {
23054   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hex3");
23055  }
23056  try {
23057   test_2d_fillStyle_parse_invalid_hex6();
23058  } catch (e) {
23059   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hex6");
23060  }
23061  try {
23062   test_2d_fillStyle_parse_invalid_hsl_1();
23063  } catch (e) {
23064   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_1");
23065  }
23066  try {
23067   test_2d_fillStyle_parse_invalid_hsl_2();
23068  } catch (e) {
23069   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_2");
23070  }
23071  try {
23072   test_2d_fillStyle_parse_invalid_hsl_3();
23073  } catch (e) {
23074   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_3");
23075  }
23076  try {
23077   test_2d_fillStyle_parse_invalid_hsl_4();
23078  } catch (e) {
23079   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_4");
23080  }
23081  try {
23082   test_2d_fillStyle_parse_invalid_hsl_5();
23083  } catch (e) {
23084   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsl_5");
23085  }
23086  try {
23087   test_2d_fillStyle_parse_invalid_hsla_1();
23088  } catch (e) {
23089   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsla_1");
23090  }
23091  try {
23092   test_2d_fillStyle_parse_invalid_hsla_2();
23093  } catch (e) {
23094   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_hsla_2");
23095  }
23096  try {
23097    test_2d_fillStyle_parse_invalid_name_1()
23098  } catch (e) {
23099   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_1");
23100  }
23101  try {
23102    test_2d_fillStyle_parse_invalid_name_2()
23103  } catch (e) {
23104   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_2");
23105  }
23106  try {
23107    test_2d_fillStyle_parse_invalid_name_3()
23108  } catch (e) {
23109   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_name_3");
23110  }
23111  try {
23112   test_2d_fillStyle_parse_invalid_rgb_1();
23113  } catch (e) {
23114   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_1");
23115  }
23116  try {
23117   test_2d_fillStyle_parse_invalid_rgb_2();
23118  } catch (e) {
23119   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_2");
23120  }
23121  try {
23122   test_2d_fillStyle_parse_invalid_rgb_3();
23123  } catch (e) {
23124   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_3");
23125  }
23126  try {
23127   test_2d_fillStyle_parse_invalid_rgb_4();
23128  } catch (e) {
23129   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_4");
23130  }
23131  try {
23132   test_2d_fillStyle_parse_invalid_rgb_5();
23133  } catch (e) {
23134   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_5");
23135  }
23136  try {
23137   test_2d_fillStyle_parse_invalid_rgb_6();
23138  } catch (e) {
23139   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_6");
23140  }
23141  try {
23142   test_2d_fillStyle_parse_invalid_rgb_7();
23143  } catch (e) {
23144   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgb_7");
23145  }
23146  try {
23147   test_2d_fillStyle_parse_invalid_rgba_1();
23148  } catch (e) {
23149   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_1");
23150  }
23151  try {
23152   test_2d_fillStyle_parse_invalid_rgba_2();
23153  } catch (e) {
23154   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_2");
23155  }
23156  try {
23157   test_2d_fillStyle_parse_invalid_rgba_3();
23158  } catch (e) {
23159   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_3");
23160  }
23161  try {
23162   test_2d_fillStyle_parse_invalid_rgba_4();
23163  } catch (e) {
23164   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_4");
23165  }
23166  try {
23167   test_2d_fillStyle_parse_invalid_rgba_5();
23168  } catch (e) {
23169   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_invalid_rgba_5");
23170  }
23171  try {
23172   test_2d_fillStyle_parse_rgb_clamp_1();
23173  } catch (e) {
23174   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_1");
23175  }
23176  try {
23177   test_2d_fillStyle_parse_rgb_clamp_2();
23178  } catch (e) {
23179   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_2");
23180  }
23181  try {
23182   test_2d_fillStyle_parse_rgb_clamp_3();
23183  } catch (e) {
23184   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_3");
23185  }
23186  try {
23187   test_2d_fillStyle_parse_rgb_clamp_4();
23188  } catch (e) {
23189   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_4");
23190  }
23191  try {
23192   test_2d_fillStyle_parse_rgb_clamp_5();
23193  } catch (e) {
23194   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_clamp_5");
23195  }
23196  try {
23197   test_2d_fillStyle_parse_rgb_num();
23198  } catch (e) {
23199   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_num");
23200  }
23201  try {
23202   test_2d_fillStyle_parse_rgb_percent();
23203  } catch (e) {
23204   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgb_percent");
23205  }
23206  try {
23207   test_2d_fillStyle_parse_rgba_clamp_1();
23208  } catch (e) {
23209   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_clamp_1");
23210  }
23211  try {
23212   test_2d_fillStyle_parse_rgba_clamp_2();
23213  } catch (e) {
23214   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_clamp_2");
23215  }
23216  try {
23217   test_2d_fillStyle_parse_rgba_num_1();
23218  } catch (e) {
23219   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_num_1");
23220  }
23221  try {
23222   test_2d_fillStyle_parse_rgba_num_2();
23223  } catch (e) {
23224   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_num_2");
23225  }
23226  try {
23227   test_2d_fillStyle_parse_rgba_percent();
23228  } catch (e) {
23229   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_percent");
23230  }
23231  try {
23232   test_2d_fillStyle_parse_rgba_solid_1();
23233  } catch (e) {
23234   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_solid_1");
23235  }
23236  try {
23237   test_2d_fillStyle_parse_rgba_solid_2();
23238  } catch (e) {
23239   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_rgba_solid_2");
23240  }
23241  try {
23242   test_2d_fillStyle_parse_svg_1();
23243  } catch (e) {
23244   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_svg_1");
23245  }
23246  try {
23247   test_2d_fillStyle_parse_svg_2();
23248  } catch (e) {
23249   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_svg_2");
23250  }
23251  try {
23252   test_2d_fillStyle_parse_system();
23253  } catch (e) {
23254   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_system");
23255  }
23256  try {
23257   test_2d_fillStyle_parse_transparent_1();
23258  } catch (e) {
23259   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_transparent_1");
23260  }
23261  try {
23262   test_2d_fillStyle_parse_transparent_2();
23263  } catch (e) {
23264   ok(false, "unexpected exception thrown in: test_2d_fillStyle_parse_transparent_2");
23265  }
23266  try {
23267   test_2d_getcontext_exists();
23268  } catch (e) {
23269   ok(false, "unexpected exception thrown in: test_2d_getcontext_exists");
23270  }
23271  try {
23272   test_2d_getcontext_shared();
23273  } catch (e) {
23274   ok(false, "unexpected exception thrown in: test_2d_getcontext_shared");
23275  }
23276  try {
23277   test_2d_getcontext_unique();
23278  } catch (e) {
23279   ok(false, "unexpected exception thrown in: test_2d_getcontext_unique");
23280  }
23281  try {
23282   test_2d_gradient_empty();
23283  } catch (e) {
23284   ok(false, "unexpected exception thrown in: test_2d_gradient_empty");
23285  }
23286  try {
23287   test_2d_gradient_interpolate_alpha();
23288  } catch (e) {
23289   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_alpha");
23290  }
23291  try {
23292   test_2d_gradient_interpolate_colour();
23293  } catch (e) {
23294   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_colour");
23295  }
23296  try {
23297   test_2d_gradient_interpolate_colouralpha();
23298  } catch (e) {
23299   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_colouralpha");
23300  }
23301  try {
23302   test_2d_gradient_interpolate_multiple();
23303  } catch (e) {
23304   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_multiple");
23305  }
23306  try {
23307   test_2d_gradient_interpolate_outside();
23308  } catch (e) {
23309   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_outside");
23310  }
23311  try {
23312   test_2d_gradient_interpolate_overlap();
23313  } catch (e) {
23314   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_overlap");
23315  }
23316  try {
23317   test_2d_gradient_interpolate_overlap2();
23318  } catch (e) {
23319   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_overlap2");
23320  }
23321  try {
23322   test_2d_gradient_interpolate_solid();
23323  } catch (e) {
23324   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_solid");
23325  }
23326  try {
23327   test_2d_gradient_interpolate_vertical();
23328  } catch (e) {
23329   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_vertical");
23330  }
23331  try {
23332   test_2d_gradient_interpolate_zerosize();
23333  } catch (e) {
23334   ok(false, "unexpected exception thrown in: test_2d_gradient_interpolate_zerosize");
23335  }
23336  try {
23337   test_2d_gradient_linear_nonfinite();
23338  } catch (e) {
23339   ok(false, "unexpected exception thrown in: test_2d_gradient_linear_nonfinite");
23340  }
23341  try {
23342   test_2d_gradient_linear_transform_1();
23343  } catch (e) {
23344   ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_1");
23345  }
23346  try {
23347   test_2d_gradient_linear_transform_2();
23348  } catch (e) {
23349   ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_2");
23350  }
23351  try {
23352   test_2d_gradient_linear_transform_3();
23353  } catch (e) {
23354   ok(false, "unexpected exception thrown in: test_2d_gradient_linear_transform_3");
23355  }
23356  try {
23357   test_2d_gradient_object_compare();
23358  } catch (e) {
23359   ok(false, "unexpected exception thrown in: test_2d_gradient_object_compare");
23360  }
23361  try {
23362   test_2d_gradient_object_crosscanvas();
23363  } catch (e) {
23364   ok(false, "unexpected exception thrown in: test_2d_gradient_object_crosscanvas");
23365  }
23366  try {
23367   test_2d_gradient_object_invalidcolour();
23368  } catch (e) {
23369   ok(false, "unexpected exception thrown in: test_2d_gradient_object_invalidcolour");
23370  }
23371  try {
23372   test_2d_gradient_object_invalidoffset();
23373  } catch (e) {
23374   ok(false, "unexpected exception thrown in: test_2d_gradient_object_invalidoffset");
23375  }
23376  try {
23377   test_2d_gradient_object_return();
23378  } catch (e) {
23379   ok(false, "unexpected exception thrown in: test_2d_gradient_object_return");
23380  }
23381  try {
23382   test_2d_gradient_object_type();
23383  } catch (e) {
23384   ok(false, "unexpected exception thrown in: test_2d_gradient_object_type");
23385  }
23386  try {
23387   test_2d_gradient_object_update();
23388  } catch (e) {
23389   ok(false, "unexpected exception thrown in: test_2d_gradient_object_update");
23390  }
23391  try {
23392   test_2d_gradient_radial_cone_bottom();
23393  } catch (e) {
23394   ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_bottom");
23395  }
23396  try {
23397   test_2d_gradient_radial_cone_cylinder();
23398  } catch (e) {
23399   ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_cylinder");
23400  }
23401  try {
23402   test_2d_gradient_radial_cone_shape1();
23403  } catch (e) {
23404   ok(false, "unexpected exception thrown in: test_2d_gradient_radial_cone_shape1");
23405  }
23406  try {
23407   test_2d_gradient_radial_inside1();
23408  } catch (e) {
23409   ok(false, "unexpected exception thrown in: test_2d_gradient_radial_inside1");
23410  }
23411  try {
23412   test_2d_gradient_radial_negative();
23413  } catch (e) {
23414   ok(false, "unexpected exception thrown in: test_2d_gradient_radial_negative");
23415  }
23416  try {
23417   test_2d_gradient_radial_nonfinite();
23418  } catch (e) {
23419   ok(false, "unexpected exception thrown in: test_2d_gradient_radial_nonfinite");
23420  }
23421  try {
23422   test_2d_gradient_radial_transform_1();
23423  } catch (e) {
23424   ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_1");
23425  }
23426  try {
23427   test_2d_gradient_radial_transform_2();
23428  } catch (e) {
23429   ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_2");
23430  }
23431  try {
23432   test_2d_gradient_radial_transform_3();
23433  } catch (e) {
23434   ok(false, "unexpected exception thrown in: test_2d_gradient_radial_transform_3");
23435  }
23436  try {
23437   test_2d_imageData_create_basic();
23438  } catch (e) {
23439   ok(false, "unexpected exception thrown in: test_2d_imageData_create_basic");
23440  }
23441  try {
23442   test_2d_imageData_create1_basic();
23443  } catch (e) {
23444   ok(false, "unexpected exception thrown in: test_2d_imageData_create1_basic");
23445  }
23446  try {
23447   test_2d_imageData_create_initial();
23448  } catch (e) {
23449   ok(false, "unexpected exception thrown in: test_2d_imageData_create_initial");
23450  }
23451  try {
23452   test_2d_imageData_create1_initial();
23453  } catch (e) {
23454   ok(false, "unexpected exception thrown in: test_2d_imageData_create1_initial");
23455  }
23456  try {
23457   test_2d_imageData_create_large();
23458  } catch (e) {
23459   ok(false, "unexpected exception thrown in: test_2d_imageData_create_large");
23460  }
23461  try {
23462   test_2d_imageData_create_negative();
23463  } catch (e) {
23464   ok(false, "unexpected exception thrown in: test_2d_imageData_create_negative");
23465  }
23466  try {
23467   test_2d_imageData_create_nonfinite();
23468  } catch (e) {
23469   ok(false, "unexpected exception thrown in: test_2d_imageData_create_nonfinite");
23470  }
23471  try {
23472   test_2d_imageData_create_round();
23473  } catch (e) {
23474   ok(false, "unexpected exception thrown in: test_2d_imageData_create_round");
23475  }
23476  try {
23477   test_2d_imageData_create_tiny();
23478  } catch (e) {
23479   ok(false, "unexpected exception thrown in: test_2d_imageData_create_tiny");
23480  }
23481  try {
23482   test_2d_imageData_create_type();
23483  } catch (e) {
23484   ok(false, "unexpected exception thrown in: test_2d_imageData_create_type");
23485  }
23486  try {
23487   test_2d_imageData_create1_type();
23488  } catch (e) {
23489   ok(false, "unexpected exception thrown in: test_2d_imageData_create1_type");
23490  }
23491  try {
23492   test_2d_imageData_create_zero();
23493  } catch (e) {
23494   ok(false, "unexpected exception thrown in: test_2d_imageData_create_zero");
23495  }
23496  try {
23497   test_2d_imageData_create1_zero();
23498  } catch (e) {
23499   ok(false, "unexpected exception thrown in: test_2d_imageData_create1_zero");
23500  }
23501  try {
23502   test_2d_imageData_get_basic();
23503  } catch (e) {
23504   ok(false, "unexpected exception thrown in: test_2d_imageData_get_basic");
23505  }
23506  try {
23507   test_2d_imageData_get_clamp();
23508  } catch (e) {
23509   ok(false, "unexpected exception thrown in: test_2d_imageData_get_clamp");
23510  }
23511  try {
23512   test_2d_imageData_get_nonfinite();
23513  } catch (e) {
23514   ok(false, "unexpected exception thrown in: test_2d_imageData_get_nonfinite");
23515  }
23516  try {
23517   test_2d_imageData_get_nonpremul();
23518  } catch (e) {
23519   ok(false, "unexpected exception thrown in: test_2d_imageData_get_nonpremul");
23520  }
23521  try {
23522   test_2d_imageData_get_order_alpha();
23523  } catch (e) {
23524   ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_alpha");
23525  }
23526  try {
23527   test_2d_imageData_get_order_cols();
23528  } catch (e) {
23529   ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_cols");
23530  }
23531  try {
23532   test_2d_imageData_get_order_rgb();
23533  } catch (e) {
23534   ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_rgb");
23535  }
23536  try {
23537   test_2d_imageData_get_order_rows();
23538  } catch (e) {
23539   ok(false, "unexpected exception thrown in: test_2d_imageData_get_order_rows");
23540  }
23541  try {
23542   test_2d_imageData_get_range();
23543  } catch (e) {
23544   ok(false, "unexpected exception thrown in: test_2d_imageData_get_range");
23545  }
23546  try {
23547   test_2d_imageData_get_source_negative();
23548  } catch (e) {
23549   ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_negative");
23550  }
23551  try {
23552   test_2d_imageData_get_source_outside();
23553  } catch (e) {
23554   ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_outside");
23555  }
23556  try {
23557   test_2d_imageData_get_source_size();
23558  } catch (e) {
23559   ok(false, "unexpected exception thrown in: test_2d_imageData_get_source_size");
23560  }
23561  try {
23562   test_2d_imageData_get_tiny();
23563  } catch (e) {
23564   ok(false, "unexpected exception thrown in: test_2d_imageData_get_tiny");
23565  }
23566  try {
23567   test_2d_imageData_get_type();
23568  } catch (e) {
23569   ok(false, "unexpected exception thrown in: test_2d_imageData_get_type");
23570  }
23571  try {
23572   test_2d_imageData_get_unaffected();
23573  } catch (e) {
23574   ok(false, "unexpected exception thrown in: test_2d_imageData_get_unaffected");
23575  }
23576  try {
23577   test_2d_imageData_get_zero();
23578  } catch (e) {
23579   ok(false, "unexpected exception thrown in: test_2d_imageData_get_zero");
23580  }
23581  try {
23582   test_2d_imageData_object_clamp();
23583  } catch (e) {
23584   ok(false, "unexpected exception thrown in: test_2d_imageData_object_clamp");
23585  }
23586  try {
23587   test_2d_imageData_object_ctor();
23588  } catch (e) {
23589   ok(false, "unexpected exception thrown in: test_2d_imageData_object_ctor");
23590  }
23591  try {
23592   test_2d_imageData_object_nan();
23593  } catch (e) {
23594   ok(false, "unexpected exception thrown in: test_2d_imageData_object_nan");
23595  }
23596  try {
23597   test_2d_imageData_object_properties();
23598  } catch (e) {
23599   ok(false, "unexpected exception thrown in: test_2d_imageData_object_properties");
23600  }
23601  try {
23602   test_2d_imageData_object_readonly();
23603  } catch (e) {
23604   ok(false, "unexpected exception thrown in: test_2d_imageData_object_readonly");
23605  }
23606  try {
23607   test_2d_imageData_object_round();
23608  } catch (e) {
23609   ok(false, "unexpected exception thrown in: test_2d_imageData_object_round");
23610  }
23611  try {
23612   test_2d_imageData_object_set();
23613  } catch (e) {
23614   ok(false, "unexpected exception thrown in: test_2d_imageData_object_set");
23615  }
23616  try {
23617   test_2d_imageData_object_string();
23618  } catch (e) {
23619   ok(false, "unexpected exception thrown in: test_2d_imageData_object_string");
23620  }
23621  try {
23622   test_2d_imageData_object_undefined();
23623  } catch (e) {
23624   ok(false, "unexpected exception thrown in: test_2d_imageData_object_undefined");
23625  }
23626  try {
23627   test_2d_imageData_put_alpha();
23628  } catch (e) {
23629   ok(false, "unexpected exception thrown in: test_2d_imageData_put_alpha");
23630  }
23631  try {
23632   test_2d_imageData_put_basic();
23633  } catch (e) {
23634   ok(false, "unexpected exception thrown in: test_2d_imageData_put_basic");
23635  }
23636  try {
23637   test_2d_imageData_put_clip();
23638  } catch (e) {
23639   ok(false, "unexpected exception thrown in: test_2d_imageData_put_clip");
23640  }
23641  try {
23642   test_2d_imageData_put_created();
23643  } catch (e) {
23644   ok(false, "unexpected exception thrown in: test_2d_imageData_put_created");
23645  }
23646  try {
23647   test_2d_imageData_put_cross();
23648  } catch (e) {
23649   ok(false, "unexpected exception thrown in: test_2d_imageData_put_cross");
23650  }
23651  try {
23652   test_2d_imageData_put_dirty_negative();
23653  } catch (e) {
23654   ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_negative");
23655  }
23656  try {
23657   test_2d_imageData_put_dirty_outside();
23658  } catch (e) {
23659   ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_outside");
23660  }
23661  try {
23662   test_2d_imageData_put_dirty_rect1();
23663  } catch (e) {
23664   ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_rect1");
23665  }
23666  try {
23667   test_2d_imageData_put_dirty_rect2();
23668  } catch (e) {
23669   ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_rect2");
23670  }
23671  try {
23672   test_2d_imageData_put_dirty_zero();
23673  } catch (e) {
23674   ok(false, "unexpected exception thrown in: test_2d_imageData_put_dirty_zero");
23675  }
23676  try {
23677   test_2d_imageData_put_modified();
23678  } catch (e) {
23679   ok(false, "unexpected exception thrown in: test_2d_imageData_put_modified");
23680  }
23681  try {
23682   test_2d_imageData_put_nonfinite();
23683  } catch (e) {
23684   ok(false, "unexpected exception thrown in: test_2d_imageData_put_nonfinite");
23685  }
23686  try {
23687   test_2d_imageData_put_null();
23688  } catch (e) {
23689   ok(false, "unexpected exception thrown in: test_2d_imageData_put_null");
23690  }
23691  try {
23692   test_2d_imageData_put_path();
23693  } catch (e) {
23694   ok(false, "unexpected exception thrown in: test_2d_imageData_put_path");
23695  }
23696  try {
23697   test_2d_imageData_put_unaffected();
23698  } catch (e) {
23699   ok(false, "unexpected exception thrown in: test_2d_imageData_put_unaffected");
23700  }
23701  try {
23702   test_2d_imageData_put_unchanged();
23703  } catch (e) {
23704   ok(false, "unexpected exception thrown in: test_2d_imageData_put_unchanged");
23705  }
23706  try {
23707   test_2d_imageData_put_wrongtype();
23708  } catch (e) {
23709   ok(false, "unexpected exception thrown in: test_2d_imageData_put_wrongtype");
23710  }
23711  try {
23712   test_2d_line_cap_butt();
23713  } catch (e) {
23714   ok(false, "unexpected exception thrown in: test_2d_line_cap_butt");
23715  }
23716  try {
23717   test_2d_line_cap_invalid();
23718  } catch (e) {
23719   ok(false, "unexpected exception thrown in: test_2d_line_cap_invalid");
23720  }
23721  try {
23722   test_2d_line_cap_open();
23723  } catch (e) {
23724   ok(false, "unexpected exception thrown in: test_2d_line_cap_open");
23725  }
23726  try {
23727   test_2d_line_cap_round();
23728  } catch (e) {
23729   ok(false, "unexpected exception thrown in: test_2d_line_cap_round");
23730  }
23731  try {
23732   test_2d_line_cap_square();
23733  } catch (e) {
23734   ok(false, "unexpected exception thrown in: test_2d_line_cap_square");
23735  }
23736  try {
23737   test_2d_line_cross();
23738  } catch (e) {
23739   ok(false, "unexpected exception thrown in: test_2d_line_cross");
23740  }
23741  try {
23742   test_2d_line_defaults();
23743  } catch (e) {
23744   ok(false, "unexpected exception thrown in: test_2d_line_defaults");
23745  }
23746  try {
23747   test_2d_line_join_bevel();
23748  } catch (e) {
23749   ok(false, "unexpected exception thrown in: test_2d_line_join_bevel");
23750  }
23751  try {
23752   test_2d_line_join_closed();
23753  } catch (e) {
23754   ok(false, "unexpected exception thrown in: test_2d_line_join_closed");
23755  }
23756  try {
23757   test_2d_line_join_invalid();
23758  } catch (e) {
23759   ok(false, "unexpected exception thrown in: test_2d_line_join_invalid");
23760  }
23761  try {
23762   test_2d_line_join_miter();
23763  } catch (e) {
23764   ok(false, "unexpected exception thrown in: test_2d_line_join_miter");
23765  }
23766  try {
23767   test_2d_line_join_open();
23768  } catch (e) {
23769   ok(false, "unexpected exception thrown in: test_2d_line_join_open");
23770  }
23771  try {
23772   test_2d_line_join_round();
23773  } catch (e) {
23774   ok(false, "unexpected exception thrown in: test_2d_line_join_round");
23775  }
23776  try {
23777   test_2d_line_miter_acute();
23778  } catch (e) {
23779   ok(false, "unexpected exception thrown in: test_2d_line_miter_acute");
23780  }
23781  try {
23782   test_2d_line_miter_exceeded();
23783  } catch (e) {
23784   ok(false, "unexpected exception thrown in: test_2d_line_miter_exceeded");
23785  }
23786  try {
23787   test_2d_line_miter_invalid();
23788  } catch (e) {
23789   ok(false, "unexpected exception thrown in: test_2d_line_miter_invalid");
23790  }
23791  try {
23792   test_2d_line_miter_lineedge();
23793  } catch (e) {
23794   ok(false, "unexpected exception thrown in: test_2d_line_miter_lineedge");
23795  }
23796  try {
23797   test_2d_line_miter_obtuse();
23798  } catch (e) {
23799   ok(false, "unexpected exception thrown in: test_2d_line_miter_obtuse");
23800  }
23801  try {
23802   test_2d_line_miter_rightangle();
23803  } catch (e) {
23804   ok(false, "unexpected exception thrown in: test_2d_line_miter_rightangle");
23805  }
23806  try {
23807   test_2d_line_miter_within();
23808  } catch (e) {
23809   ok(false, "unexpected exception thrown in: test_2d_line_miter_within");
23810  }
23811  try {
23812   test_2d_line_union();
23813  } catch (e) {
23814   ok(false, "unexpected exception thrown in: test_2d_line_union");
23815  }
23816  try {
23817   test_2d_line_width_basic();
23818  } catch (e) {
23819   ok(false, "unexpected exception thrown in: test_2d_line_width_basic");
23820  }
23821  try {
23822   test_2d_line_width_invalid();
23823  } catch (e) {
23824   ok(false, "unexpected exception thrown in: test_2d_line_width_invalid");
23825  }
23826  try {
23827   test_2d_line_width_transformed();
23828  } catch (e) {
23829   ok(false, "unexpected exception thrown in: test_2d_line_width_transformed");
23830  }
23831  try {
23832   test_2d_missingargs();
23833  } catch (e) {
23834   ok(false, "unexpected exception thrown in: test_2d_missingargs");
23835  }
23836  try {
23837   test_2d_path_arc_angle_1();
23838  } catch (e) {
23839   ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_1");
23840  }
23841  try {
23842   test_2d_path_arc_angle_2();
23843  } catch (e) {
23844   ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_2");
23845  }
23846  try {
23847   test_2d_path_arc_angle_3();
23848  } catch (e) {
23849   ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_3");
23850  }
23851  try {
23852   test_2d_path_arc_angle_4();
23853  } catch (e) {
23854   ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_4");
23855  }
23856  try {
23857   test_2d_path_arc_angle_5();
23858  } catch (e) {
23859   ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_5");
23860  }
23861  try {
23862   test_2d_path_arc_angle_6();
23863  } catch (e) {
23864   ok(false, "unexpected exception thrown in: test_2d_path_arc_angle_6");
23865  }
23866  try {
23867   test_2d_path_arc_empty();
23868  } catch (e) {
23869   ok(false, "unexpected exception thrown in: test_2d_path_arc_empty");
23870  }
23871  try {
23872   test_2d_path_arc_end();
23873  } catch (e) {
23874   ok(false, "unexpected exception thrown in: test_2d_path_arc_end");
23875  }
23876  try {
23877   test_2d_path_arc_negative();
23878  } catch (e) {
23879   ok(false, "unexpected exception thrown in: test_2d_path_arc_negative");
23880  }
23881  try {
23882   test_2d_path_arc_nonempty();
23883  } catch (e) {
23884   ok(false, "unexpected exception thrown in: test_2d_path_arc_nonempty");
23885  }
23886  try {
23887   test_2d_path_arc_nonfinite();
23888  } catch (e) {
23889   ok(false, "unexpected exception thrown in: test_2d_path_arc_nonfinite");
23890  }
23891  try {
23892   test_2d_path_arc_scale_1();
23893  } catch (e) {
23894   ok(false, "unexpected exception thrown in: test_2d_path_arc_scale_1");
23895  }
23896  try {
23897   test_2d_path_arc_scale_2();
23898  } catch (e) {
23899   ok(false, "unexpected exception thrown in: test_2d_path_arc_scale_2");
23900  }
23901  try {
23902   test_2d_path_arc_selfintersect_1();
23903  } catch (e) {
23904   ok(false, "unexpected exception thrown in: test_2d_path_arc_selfintersect_1");
23905  }
23906  try {
23907   test_2d_path_arc_selfintersect_2();
23908  } catch (e) {
23909   ok(false, "unexpected exception thrown in: test_2d_path_arc_selfintersect_2");
23910  }
23911  try {
23912   test_2d_path_arc_shape_1();
23913  } catch (e) {
23914   ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_1");
23915  }
23916  try {
23917   test_2d_path_arc_shape_2();
23918  } catch (e) {
23919   ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_2");
23920  }
23921  try {
23922   test_2d_path_arc_shape_4();
23923  } catch (e) {
23924   ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_4");
23925  }
23926  try {
23927   test_2d_path_arc_shape_5();
23928  } catch (e) {
23929   ok(false, "unexpected exception thrown in: test_2d_path_arc_shape_5");
23930  }
23931  try {
23932   test_2d_path_arc_twopie_1();
23933  } catch (e) {
23934   ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_1");
23935  }
23936  try {
23937   test_2d_path_arc_twopie_2();
23938  } catch (e) {
23939   ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_2");
23940  }
23941  try {
23942   test_2d_path_arc_twopie_3();
23943  } catch (e) {
23944   ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_3");
23945  }
23946  try {
23947   test_2d_path_arc_twopie_4();
23948  } catch (e) {
23949   ok(false, "unexpected exception thrown in: test_2d_path_arc_twopie_4");
23950  }
23951  try {
23952   test_2d_path_arc_zero_1();
23953  } catch (e) {
23954   ok(false, "unexpected exception thrown in: test_2d_path_arc_zero_1");
23955  }
23956  try {
23957   test_2d_path_arc_zero_2();
23958  } catch (e) {
23959   ok(false, "unexpected exception thrown in: test_2d_path_arc_zero_2");
23960  }
23961  try {
23962   test_2d_path_arc_zeroradius();
23963  } catch (e) {
23964   ok(false, "unexpected exception thrown in: test_2d_path_arc_zeroradius");
23965  }
23966  try {
23967   test_2d_path_arcTo_coincide_1();
23968  } catch (e) {
23969   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_coincide_1");
23970  }
23971  try {
23972   test_2d_path_arcTo_coincide_2();
23973  } catch (e) {
23974   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_coincide_2");
23975  }
23976  try {
23977   test_2d_path_arcTo_collinear_1();
23978  } catch (e) {
23979   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_1");
23980  }
23981  try {
23982   test_2d_path_arcTo_collinear_2();
23983  } catch (e) {
23984   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_2");
23985  }
23986  try {
23987   test_2d_path_arcTo_collinear_3();
23988  } catch (e) {
23989   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_collinear_3");
23990  }
23991  try {
23992   test_2d_path_arcTo_emptysubpath();
23993  } catch (e) {
23994   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_emptysubpath");
23995  }
23996  try {
23997   test_2d_path_arcTo_negative();
23998  } catch (e) {
23999   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_negative");
24000  }
24001  try {
24002   test_2d_path_arcTo_nonfinite();
24003  } catch (e) {
24004   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_nonfinite");
24005  }
24006  try {
24007   test_2d_path_arcTo_scale();
24008  } catch (e) {
24009   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_scale");
24010  }
24011  try {
24012   test_2d_path_arcTo_shape_curve1();
24013  } catch (e) {
24014   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_curve1");
24015  }
24016  try {
24017   test_2d_path_arcTo_shape_curve2();
24018  } catch (e) {
24019   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_curve2");
24020  }
24021  try {
24022   test_2d_path_arcTo_shape_end();
24023  } catch (e) {
24024   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_end");
24025  }
24026  try {
24027   test_2d_path_arcTo_shape_start();
24028  } catch (e) {
24029   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_shape_start");
24030  }
24031  try {
24032   test_2d_path_arcTo_transformation();
24033  } catch (e) {
24034   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_transformation");
24035  }
24036  try {
24037   test_2d_path_arcTo_zero_1();
24038  } catch (e) {
24039   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_zero_1");
24040  }
24041  try {
24042   test_2d_path_arcTo_zero_2();
24043  } catch (e) {
24044   ok(false, "unexpected exception thrown in: test_2d_path_arcTo_zero_2");
24045  }
24046  try {
24047   test_2d_path_beginPath();
24048  } catch (e) {
24049   ok(false, "unexpected exception thrown in: test_2d_path_beginPath");
24050  }
24051  try {
24052   test_2d_path_bezierCurveTo_basic();
24053  } catch (e) {
24054   ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_basic");
24055  }
24056  try {
24057   test_2d_path_bezierCurveTo_emptysubpath();
24058  } catch (e) {
24059   ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_emptysubpath");
24060  }
24061  try {
24062   test_2d_path_bezierCurveTo_nonfinite();
24063  } catch (e) {
24064   ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_nonfinite");
24065  }
24066  try {
24067   test_2d_path_bezierCurveTo_scaled();
24068  } catch (e) {
24069   ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_scaled");
24070  }
24071  try {
24072   test_2d_path_bezierCurveTo_shape();
24073  } catch (e) {
24074   ok(false, "unexpected exception thrown in: test_2d_path_bezierCurveTo_shape");
24075  }
24076  try {
24077   test_2d_path_clip_basic_1();
24078  } catch (e) {
24079   ok(false, "unexpected exception thrown in: test_2d_path_clip_basic_1");
24080  }
24081  try {
24082   test_2d_path_clip_basic_2();
24083  } catch (e) {
24084   ok(false, "unexpected exception thrown in: test_2d_path_clip_basic_2");
24085  }
24086  try {
24087   test_2d_path_clip_empty();
24088  } catch (e) {
24089   ok(false, "unexpected exception thrown in: test_2d_path_clip_empty");
24090  }
24091  try {
24092   test_2d_path_clip_intersect();
24093  } catch (e) {
24094   ok(false, "unexpected exception thrown in: test_2d_path_clip_intersect");
24095  }
24096  try {
24097   test_2d_path_clip_unaffected();
24098  } catch (e) {
24099   ok(false, "unexpected exception thrown in: test_2d_path_clip_unaffected");
24100  }
24101  try {
24102   test_2d_path_clip_winding_1();
24103  } catch (e) {
24104   ok(false, "unexpected exception thrown in: test_2d_path_clip_winding_1");
24105  }
24106  try {
24107   test_2d_path_clip_winding_2();
24108  } catch (e) {
24109   ok(false, "unexpected exception thrown in: test_2d_path_clip_winding_2");
24110  }
24111  try {
24112   test_2d_path_closePath_empty();
24113  } catch (e) {
24114   ok(false, "unexpected exception thrown in: test_2d_path_closePath_empty");
24115  }
24116  try {
24117   test_2d_path_closePath_newline();
24118  } catch (e) {
24119   ok(false, "unexpected exception thrown in: test_2d_path_closePath_newline");
24120  }
24121  try {
24122   test_2d_path_closePath_nextpoint();
24123  } catch (e) {
24124   ok(false, "unexpected exception thrown in: test_2d_path_closePath_nextpoint");
24125  }
24126  try {
24127   test_2d_path_fill_closed_basic();
24128  } catch (e) {
24129   ok(false, "unexpected exception thrown in: test_2d_path_fill_closed_basic");
24130  }
24131  try {
24132   test_2d_path_fill_closed_unaffected();
24133  } catch (e) {
24134   ok(false, "unexpected exception thrown in: test_2d_path_fill_closed_unaffected");
24135  }
24136  try {
24137   test_2d_path_fill_overlap();
24138  } catch (e) {
24139   ok(false, "unexpected exception thrown in: test_2d_path_fill_overlap");
24140  }
24141  try {
24142   test_2d_path_fill_winding_add();
24143  } catch (e) {
24144   ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_add");
24145  }
24146  try {
24147   test_2d_path_fill_winding_subtract_1();
24148  } catch (e) {
24149   ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_1");
24150  }
24151  try {
24152   test_2d_path_fill_winding_subtract_2();
24153  } catch (e) {
24154   ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_2");
24155  }
24156  try {
24157   test_2d_path_fill_winding_subtract_3();
24158  } catch (e) {
24159   ok(false, "unexpected exception thrown in: test_2d_path_fill_winding_subtract_3");
24160  }
24161  try {
24162   test_2d_path_initial();
24163  } catch (e) {
24164   ok(false, "unexpected exception thrown in: test_2d_path_initial");
24165  }
24166  try {
24167   test_2d_path_isPointInPath_arc();
24168  } catch (e) {
24169   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_arc");
24170  }
24171  try {
24172   test_2d_path_isPointInPath_basic_1();
24173  } catch (e) {
24174   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_basic_1");
24175  }
24176  try {
24177   test_2d_path_isPointInPath_basic_2();
24178  } catch (e) {
24179   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_basic_2");
24180  }
24181  try {
24182   test_2d_path_isPointInPath_bezier();
24183  } catch (e) {
24184   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_bezier");
24185  }
24186  try {
24187   test_2d_path_isPointInPath_bigarc();
24188  } catch (e) {
24189   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_bigarc");
24190  }
24191  try {
24192   test_2d_path_isPointInPath_edge();
24193  } catch (e) {
24194   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_edge");
24195  }
24196  try {
24197   test_2d_path_isPointInPath_empty();
24198  } catch (e) {
24199   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_empty");
24200  }
24201  try {
24202   test_2d_path_isPointInPath_nonfinite();
24203  } catch (e) {
24204   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_nonfinite");
24205  }
24206  try {
24207   test_2d_path_isPointInPath_outside();
24208  } catch (e) {
24209   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_outside");
24210  }
24211  try {
24212   test_2d_path_isPointInPath_subpath();
24213  } catch (e) {
24214   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_subpath");
24215  }
24216  try {
24217    test_2d_path_isPointInPath_transform_1();
24218  } catch (e) {
24219   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_1");
24220  }
24221  try {
24222   test_2d_path_isPointInPath_transform_2();
24223  } catch (e) {
24224   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_2");
24225  }
24226  try {
24227   test_2d_path_isPointInPath_transform_3();
24228  } catch (e) {
24229   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_transform_3");
24230  }
24231  try {
24232   test_2d_path_isPointInPath_unclosed();
24233  } catch (e) {
24234   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_unclosed");
24235  }
24236  try {
24237   test_2d_path_isPointInPath_winding();
24238  } catch (e) {
24239   ok(false, "unexpected exception thrown in: test_2d_path_isPointInPath_winding");
24240  }
24241  try {
24242   test_2d_path_lineTo_basic();
24243  } catch (e) {
24244   ok(false, "unexpected exception thrown in: test_2d_path_lineTo_basic");
24245  }
24246  try {
24247   test_2d_path_lineTo_emptysubpath();
24248  } catch (e) {
24249   ok(false, "unexpected exception thrown in: test_2d_path_lineTo_emptysubpath");
24250  }
24251  try {
24252   test_2d_path_lineTo_nextpoint();
24253  } catch (e) {
24254   ok(false, "unexpected exception thrown in: test_2d_path_lineTo_nextpoint");
24255  }
24256  try {
24257   test_2d_path_lineTo_nonfinite();
24258  } catch (e) {
24259   ok(false, "unexpected exception thrown in: test_2d_path_lineTo_nonfinite");
24260  }
24261  try {
24262   test_2d_path_moveTo_basic();
24263  } catch (e) {
24264   ok(false, "unexpected exception thrown in: test_2d_path_moveTo_basic");
24265  }
24266  try {
24267   test_2d_path_moveTo_multiple();
24268  } catch (e) {
24269   ok(false, "unexpected exception thrown in: test_2d_path_moveTo_multiple");
24270  }
24271  try {
24272   test_2d_path_moveTo_newsubpath();
24273  } catch (e) {
24274   ok(false, "unexpected exception thrown in: test_2d_path_moveTo_newsubpath");
24275  }
24276  try {
24277   test_2d_path_moveTo_nonfinite();
24278  } catch (e) {
24279   ok(false, "unexpected exception thrown in: test_2d_path_moveTo_nonfinite");
24280  }
24281  try {
24282   test_2d_path_quadraticCurveTo_basic();
24283  } catch (e) {
24284   ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_basic");
24285  }
24286  try {
24287   test_2d_path_quadraticCurveTo_emptysubpath();
24288  } catch (e) {
24289   ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_emptysubpath");
24290  }
24291  try {
24292   test_2d_path_quadraticCurveTo_nonfinite();
24293  } catch (e) {
24294   ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_nonfinite");
24295  }
24296  try {
24297   test_2d_path_quadraticCurveTo_scaled();
24298  } catch (e) {
24299   ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_scaled");
24300  }
24301  try {
24302   test_2d_path_quadraticCurveTo_shape();
24303  } catch (e) {
24304   ok(false, "unexpected exception thrown in: test_2d_path_quadraticCurveTo_shape");
24305  }
24306  try {
24307   test_2d_path_rect_basic();
24308  } catch (e) {
24309   ok(false, "unexpected exception thrown in: test_2d_path_rect_basic");
24310  }
24311  try {
24312   test_2d_path_rect_closed();
24313  } catch (e) {
24314   ok(false, "unexpected exception thrown in: test_2d_path_rect_closed");
24315  }
24316  try {
24317   test_2d_path_rect_end_1();
24318  } catch (e) {
24319   ok(false, "unexpected exception thrown in: test_2d_path_rect_end_1");
24320  }
24321  try {
24322   test_2d_path_rect_end_2();
24323  } catch (e) {
24324   ok(false, "unexpected exception thrown in: test_2d_path_rect_end_2");
24325  }
24326  try {
24327   test_2d_path_rect_negative();
24328  } catch (e) {
24329   ok(false, "unexpected exception thrown in: test_2d_path_rect_negative");
24330  }
24331  try {
24332   test_2d_path_rect_newsubpath();
24333  } catch (e) {
24334   ok(false, "unexpected exception thrown in: test_2d_path_rect_newsubpath");
24335  }
24336  try {
24337   test_2d_path_rect_nonfinite();
24338  } catch (e) {
24339   ok(false, "unexpected exception thrown in: test_2d_path_rect_nonfinite");
24340  }
24341  try {
24342   test_2d_path_rect_winding();
24343  } catch (e) {
24344   ok(false, "unexpected exception thrown in: test_2d_path_rect_winding");
24345  }
24346  try {
24347   test_2d_path_rect_zero_1();
24348  } catch (e) {
24349   ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_1");
24350  }
24351  try {
24352   test_2d_path_rect_zero_2();
24353  } catch (e) {
24354   ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_2");
24355  }
24356  try {
24357   test_2d_path_rect_zero_3();
24358  } catch (e) {
24359   ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_3");
24360  }
24361  try {
24362   test_2d_path_rect_zero_4();
24363  } catch (e) {
24364   ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_4");
24365  }
24366  try {
24367   test_2d_path_rect_zero_5();
24368  } catch (e) {
24369   ok(false, "unexpected exception thrown in: test_2d_path_rect_zero_5");
24370  }
24371  try {
24372   test_2d_path_stroke_empty();
24373  } catch (e) {
24374   ok(false, "unexpected exception thrown in: test_2d_path_stroke_empty");
24375  }
24376  try {
24377   test_2d_path_stroke_overlap();
24378  } catch (e) {
24379   ok(false, "unexpected exception thrown in: test_2d_path_stroke_overlap");
24380  }
24381  try {
24382   test_2d_path_stroke_prune_arc();
24383  } catch (e) {
24384   ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_arc");
24385  }
24386  try {
24387   test_2d_path_stroke_prune_closed();
24388  } catch (e) {
24389   ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_closed");
24390  }
24391  try {
24392   test_2d_path_stroke_prune_corner();
24393  } catch (e) {
24394   ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_corner");
24395  }
24396  try {
24397   test_2d_path_stroke_prune_curve();
24398  } catch (e) {
24399   ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_curve");
24400  }
24401  try {
24402   test_2d_path_stroke_prune_line();
24403  } catch (e) {
24404   ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_line");
24405  }
24406  try {
24407   test_2d_path_stroke_prune_rect();
24408  } catch (e) {
24409   ok(false, "unexpected exception thrown in: test_2d_path_stroke_prune_rect");
24410  }
24411  try {
24412   test_2d_path_stroke_scale1();
24413  } catch (e) {
24414   ok(false, "unexpected exception thrown in: test_2d_path_stroke_scale1");
24415  }
24416  try {
24417   test_2d_path_stroke_scale2();
24418  } catch (e) {
24419   ok(false, "unexpected exception thrown in: test_2d_path_stroke_scale2");
24420  }
24421  try {
24422   test_2d_path_stroke_skew();
24423  } catch (e) {
24424   ok(false, "unexpected exception thrown in: test_2d_path_stroke_skew");
24425  }
24426  try {
24427   test_2d_path_stroke_unaffected();
24428  } catch (e) {
24429   ok(false, "unexpected exception thrown in: test_2d_path_stroke_unaffected");
24430  }
24431  try {
24432   test_2d_path_stroke_union();
24433  } catch (e) {
24434   ok(false, "unexpected exception thrown in: test_2d_path_stroke_union");
24435  }
24436  try {
24437   test_2d_path_transformation_basic();
24438  } catch (e) {
24439   ok(false, "unexpected exception thrown in: test_2d_path_transformation_basic");
24440  }
24441  try {
24442   test_2d_path_transformation_changing();
24443  } catch (e) {
24444   ok(false, "unexpected exception thrown in: test_2d_path_transformation_changing");
24445  }
24446  try {
24447   test_2d_path_transformation_multiple();
24448  } catch (e) {
24449   ok(false, "unexpected exception thrown in: test_2d_path_transformation_multiple");
24450  }
24451  try {
24452   test_2d_pattern_animated_gif();
24453  } catch (e) {
24454   ok(false, "unexpected exception thrown in: test_2d_pattern_animated_gif");
24455  }
24456  try {
24457   test_2d_pattern_basic_canvas();
24458  } catch (e) {
24459   ok(false, "unexpected exception thrown in: test_2d_pattern_basic_canvas");
24460  }
24461  try {
24462   test_2d_pattern_basic_image();
24463  } catch (e) {
24464   ok(false, "unexpected exception thrown in: test_2d_pattern_basic_image");
24465  }
24466  try {
24467   test_2d_pattern_basic_nocontext();
24468  } catch (e) {
24469   ok(false, "unexpected exception thrown in: test_2d_pattern_basic_nocontext");
24470  }
24471  try {
24472   test_2d_pattern_basic_type();
24473  } catch (e) {
24474   ok(false, "unexpected exception thrown in: test_2d_pattern_basic_type");
24475  }
24476  try {
24477   test_2d_pattern_basic_zerocanvas();
24478  } catch (e) {
24479   ok(false, "unexpected exception thrown in: test_2d_pattern_basic_zerocanvas");
24480  }
24481  try {
24482   test_2d_pattern_crosscanvas();
24483  } catch (e) {
24484   ok(false, "unexpected exception thrown in: test_2d_pattern_crosscanvas");
24485  }
24486  try {
24487   test_2d_pattern_image_null();
24488  } catch (e) {
24489   ok(false, "unexpected exception thrown in: test_2d_pattern_image_null");
24490  }
24491  try {
24492   test_2d_pattern_image_string();
24493  } catch (e) {
24494   ok(false, "unexpected exception thrown in: test_2d_pattern_image_string");
24495  }
24496  try {
24497   test_2d_pattern_image_undefined();
24498  } catch (e) {
24499   ok(false, "unexpected exception thrown in: test_2d_pattern_image_undefined");
24500  }
24501  try {
24502   test_2d_pattern_modify_canvas1();
24503  } catch (e) {
24504   ok(false, "unexpected exception thrown in: test_2d_pattern_modify_canvas1");
24505  }
24506  try {
24507   test_2d_pattern_modify_canvas2();
24508  } catch (e) {
24509   ok(false, "unexpected exception thrown in: test_2d_pattern_modify_canvas2");
24510  }
24511  try {
24512   test_2d_pattern_modify_image1();
24513  } catch (e) {
24514   ok(false, "unexpected exception thrown in: test_2d_pattern_modify_image1");
24515  }
24516  try {
24517   test_2d_pattern_modify_image2();
24518  } catch (e) {
24519   ok(false, "unexpected exception thrown in: test_2d_pattern_modify_image2");
24520  }
24521  try {
24522   test_2d_pattern_paint_norepeat_basic();
24523  } catch (e) {
24524   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_basic");
24525  }
24526  try {
24527   test_2d_pattern_paint_norepeat_coord1();
24528  } catch (e) {
24529   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord1");
24530  }
24531  try {
24532   test_2d_pattern_paint_norepeat_coord2();
24533  } catch (e) {
24534   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord2");
24535  }
24536  try {
24537   test_2d_pattern_paint_norepeat_coord3();
24538  } catch (e) {
24539   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_coord3");
24540  }
24541  try {
24542   test_2d_pattern_paint_norepeat_outside();
24543  } catch (e) {
24544   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_norepeat_outside");
24545  }
24546  try {
24547   test_2d_pattern_paint_orientation_canvas();
24548  } catch (e) {
24549   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_orientation_canvas");
24550  }
24551  try {
24552   test_2d_pattern_paint_orientation_image();
24553  } catch (e) {
24554   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_orientation_image");
24555  }
24556  try {
24557   test_2d_pattern_paint_repeat_basic();
24558  } catch (e) {
24559   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_basic");
24560  }
24561  try {
24562   test_2d_pattern_paint_repeat_coord1();
24563  } catch (e) {
24564   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord1");
24565  }
24566  try {
24567   test_2d_pattern_paint_repeat_coord2();
24568  } catch (e) {
24569   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord2");
24570  }
24571  try {
24572   test_2d_pattern_paint_repeat_coord3();
24573  } catch (e) {
24574   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_coord3");
24575  }
24576  try {
24577   test_2d_pattern_paint_repeat_outside();
24578  } catch (e) {
24579   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeat_outside");
24580  }
24581  try {
24582   test_2d_pattern_paint_repeatx_basic();
24583  } catch (e) {
24584   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_basic");
24585  }
24586  try {
24587   test_2d_pattern_paint_repeatx_coord1();
24588  } catch (e) {
24589   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_coord1");
24590  }
24591  try {
24592   test_2d_pattern_paint_repeatx_outside();
24593  } catch (e) {
24594   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeatx_outside");
24595  }
24596  try {
24597   test_2d_pattern_paint_repeaty_basic();
24598  } catch (e) {
24599   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_basic");
24600  }
24601  try {
24602   test_2d_pattern_paint_repeaty_coord1();
24603  } catch (e) {
24604   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_coord1");
24605  }
24606  try {
24607   test_2d_pattern_paint_repeaty_outside();
24608  } catch (e) {
24609   ok(false, "unexpected exception thrown in: test_2d_pattern_paint_repeaty_outside");
24610  }
24611  try {
24612   test_2d_pattern_repeat_case();
24613  } catch (e) {
24614   ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_case");
24615  }
24616  try {
24617   test_2d_pattern_repeat_empty();
24618  } catch (e) {
24619   ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_empty");
24620  }
24621  try {
24622   test_2d_pattern_repeat_null();
24623  } catch (e) {
24624   ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_null");
24625  }
24626  try {
24627   test_2d_pattern_repeat_nullsuffix();
24628  } catch (e) {
24629   ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_nullsuffix");
24630  }
24631  try {
24632   test_2d_pattern_repeat_undefined();
24633  } catch (e) {
24634   ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_undefined");
24635  }
24636  try {
24637   test_2d_pattern_repeat_unrecognised();
24638  } catch (e) {
24639   ok(false, "unexpected exception thrown in: test_2d_pattern_repeat_unrecognised");
24640  }
24641  try {
24642   test_2d_scaled();
24643  } catch (e) {
24644   ok(false, "unexpected exception thrown in: test_2d_scaled");
24645  }
24646  try {
24647   test_2d_shadow_alpha_1();
24648  } catch (e) {
24649   ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_1");
24650  }
24651  try {
24652   test_2d_shadow_alpha_2();
24653  } catch (e) {
24654   ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_2");
24655  }
24656  try {
24657   test_2d_shadow_alpha_3();
24658  } catch (e) {
24659   ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_3");
24660  }
24661  try {
24662   test_2d_shadow_alpha_4();
24663  } catch (e) {
24664   ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_4");
24665  }
24666  try {
24667   test_2d_shadow_alpha_5();
24668  } catch (e) {
24669   ok(false, "unexpected exception thrown in: test_2d_shadow_alpha_5");
24670  }
24671  try {
24672   test_2d_shadow_attributes_shadowBlur_1();
24673  } catch (e) {
24674   ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowBlur_1");
24675  }
24676  try {
24677   test_2d_shadow_attributes_shadowBlur_2();
24678  } catch (e) {
24679   ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowBlur_2");
24680  }
24681  try {
24682   test_2d_shadow_attributes_shadowColor_1();
24683  } catch (e) {
24684   ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowColor_1");
24685  }
24686  try {
24687   test_2d_shadow_attributes_shadowColor_2();
24688  } catch (e) {
24689   ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowColor_2");
24690  }
24691  try {
24692   test_2d_shadow_attributes_shadowOffset_1();
24693  } catch (e) {
24694   ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowOffset_1");
24695  }
24696  try {
24697   test_2d_shadow_attributes_shadowOffset_2();
24698  } catch (e) {
24699   ok(false, "unexpected exception thrown in: test_2d_shadow_attributes_shadowOffset_2");
24700  }
24701  try {
24702   test_2d_shadow_basic_1();
24703  } catch (e) {
24704   ok(false, "unexpected exception thrown in: test_2d_shadow_basic_1");
24705  }
24706  try {
24707   test_2d_shadow_basic_2();
24708  } catch (e) {
24709   ok(false, "unexpected exception thrown in: test_2d_shadow_basic_2");
24710  }
24711  try {
24712   test_2d_shadow_blur_high();
24713  } catch (e) {
24714   ok(false, "unexpected exception thrown in: test_2d_shadow_blur_high");
24715  }
24716  try {
24717   test_2d_shadow_blur_low();
24718  } catch (e) {
24719   ok(false, "unexpected exception thrown in: test_2d_shadow_blur_low");
24720  }
24721  try {
24722   test_2d_shadow_canvas_alpha();
24723  } catch (e) {
24724   ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_alpha");
24725  }
24726  try {
24727   test_2d_shadow_canvas_basic();
24728  } catch (e) {
24729   ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_basic");
24730  }
24731  try {
24732   test_2d_shadow_canvas_transparent_1();
24733  } catch (e) {
24734   ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_transparent_1");
24735  }
24736  try {
24737   test_2d_shadow_canvas_transparent_2();
24738  } catch (e) {
24739   ok(false, "unexpected exception thrown in: test_2d_shadow_canvas_transparent_2");
24740  }
24741  try {
24742   test_2d_shadow_clip_1();
24743  } catch (e) {
24744   ok(false, "unexpected exception thrown in: test_2d_shadow_clip_1");
24745  }
24746  try {
24747   test_2d_shadow_clip_2();
24748  } catch (e) {
24749   ok(false, "unexpected exception thrown in: test_2d_shadow_clip_2");
24750  }
24751  try {
24752   test_2d_shadow_clip_3();
24753  } catch (e) {
24754   ok(false, "unexpected exception thrown in: test_2d_shadow_clip_3");
24755  }
24756  try {
24757   test_2d_shadow_composite_1();
24758  } catch (e) {
24759   ok(false, "unexpected exception thrown in: test_2d_shadow_composite_1");
24760  }
24761  try {
24762   test_2d_shadow_composite_2();
24763  } catch (e) {
24764   ok(false, "unexpected exception thrown in: test_2d_shadow_composite_2");
24765  }
24766  try {
24767   test_2d_shadow_gradient_alpha();
24768  } catch (e) {
24769   ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_alpha");
24770  }
24771  try {
24772   test_2d_shadow_gradient_basic();
24773  } catch (e) {
24774   ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_basic");
24775  }
24776  try {
24777   test_2d_shadow_gradient_transparent_1();
24778  } catch (e) {
24779   ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_transparent_1");
24780  }
24781  try {
24782   test_2d_shadow_gradient_transparent_2();
24783  } catch (e) {
24784   ok(false, "unexpected exception thrown in: test_2d_shadow_gradient_transparent_2");
24785  }
24786  try {
24787   test_2d_shadow_image_alpha();
24788  } catch (e) {
24789   ok(false, "unexpected exception thrown in: test_2d_shadow_image_alpha");
24790  }
24791  try {
24792   test_2d_shadow_image_basic();
24793  } catch (e) {
24794   ok(false, "unexpected exception thrown in: test_2d_shadow_image_basic");
24795  }
24796  try {
24797   test_2d_shadow_image_scale();
24798  } catch (e) {
24799   ok(false, "unexpected exception thrown in: test_2d_shadow_image_scale");
24800  }
24801  try {
24802   test_2d_shadow_image_section();
24803  } catch (e) {
24804   ok(false, "unexpected exception thrown in: test_2d_shadow_image_section");
24805  }
24806  try {
24807   test_2d_shadow_image_transparent_1();
24808  } catch (e) {
24809   ok(false, "unexpected exception thrown in: test_2d_shadow_image_transparent_1");
24810  }
24811  try {
24812   test_2d_shadow_image_transparent_2();
24813  } catch (e) {
24814   ok(false, "unexpected exception thrown in: test_2d_shadow_image_transparent_2");
24815  }
24816  try {
24817   test_2d_shadow_offset_negativeX();
24818  } catch (e) {
24819   ok(false, "unexpected exception thrown in: test_2d_shadow_offset_negativeX");
24820  }
24821  try {
24822   test_2d_shadow_offset_negativeY();
24823  } catch (e) {
24824   ok(false, "unexpected exception thrown in: test_2d_shadow_offset_negativeY");
24825  }
24826  try {
24827   test_2d_shadow_offset_positiveX();
24828  } catch (e) {
24829   ok(false, "unexpected exception thrown in: test_2d_shadow_offset_positiveX");
24830  }
24831  try {
24832   test_2d_shadow_offset_positiveY();
24833  } catch (e) {
24834   ok(false, "unexpected exception thrown in: test_2d_shadow_offset_positiveY");
24835  }
24836  try {
24837   test_2d_shadow_outside();
24838  } catch (e) {
24839   ok(false, "unexpected exception thrown in: test_2d_shadow_outside");
24840  }
24841  try {
24842   test_2d_shadow_pattern_alpha();
24843  } catch (e) {
24844   ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_alpha");
24845  }
24846  try {
24847   test_2d_shadow_pattern_basic();
24848  } catch (e) {
24849   ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_basic");
24850  }
24851  try {
24852   test_2d_shadow_pattern_transparent_1();
24853  } catch (e) {
24854   ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_transparent_1");
24855  }
24856  try {
24857   test_2d_shadow_pattern_transparent_2();
24858  } catch (e) {
24859   ok(false, "unexpected exception thrown in: test_2d_shadow_pattern_transparent_2");
24860  }
24861  try {
24862   test_2d_shadow_stroke_basic();
24863  } catch (e) {
24864   ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_basic");
24865  }
24866  try {
24867   test_2d_shadow_stroke_cap_1();
24868  } catch (e) {
24869   ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_cap_1");
24870  }
24871  try {
24872   test_2d_shadow_stroke_cap_2();
24873  } catch (e) {
24874   ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_cap_2");
24875  }
24876  try {
24877   test_2d_shadow_stroke_join_1();
24878  } catch (e) {
24879   ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_1");
24880  }
24881  try {
24882   test_2d_shadow_stroke_join_2();
24883  } catch (e) {
24884   ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_2");
24885  }
24886  try {
24887   test_2d_shadow_stroke_join_3();
24888  } catch (e) {
24889   ok(false, "unexpected exception thrown in: test_2d_shadow_stroke_join_3");
24890  }
24891  try {
24892   test_2d_shadow_transform_1();
24893  } catch (e) {
24894   ok(false, "unexpected exception thrown in: test_2d_shadow_transform_1");
24895  }
24896  try {
24897   test_2d_shadow_transform_2();
24898  } catch (e) {
24899   ok(false, "unexpected exception thrown in: test_2d_shadow_transform_2");
24900  }
24901  try {
24902   test_2d_state_saverestore_bitmap();
24903  } catch (e) {
24904   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_bitmap");
24905  }
24906  try {
24907   test_2d_state_saverestore_clip();
24908  } catch (e) {
24909   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_clip");
24910  }
24911  try {
24912   test_2d_state_saverestore_fillStyle();
24913  } catch (e) {
24914   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_fillStyle");
24915  }
24916  try {
24917   test_2d_state_saverestore_globalAlpha();
24918  } catch (e) {
24919   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_globalAlpha");
24920  }
24921  try {
24922   test_2d_state_saverestore_globalCompositeOperation();
24923  } catch (e) {
24924   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_globalCompositeOperation");
24925  }
24926  try {
24927   test_2d_state_saverestore_lineCap();
24928  } catch (e) {
24929   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineCap");
24930  }
24931  try {
24932   test_2d_state_saverestore_lineJoin();
24933  } catch (e) {
24934   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineJoin");
24935  }
24936  try {
24937   test_2d_state_saverestore_lineWidth();
24938  } catch (e) {
24939   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_lineWidth");
24940  }
24941  try {
24942   test_2d_state_saverestore_miterLimit();
24943  } catch (e) {
24944   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_miterLimit");
24945  }
24946  try {
24947   test_2d_state_saverestore_path();
24948  } catch (e) {
24949   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_path");
24950  }
24951  try {
24952   test_2d_state_saverestore_shadowBlur();
24953  } catch (e) {
24954   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowBlur");
24955  }
24956  try {
24957   test_2d_state_saverestore_shadowColor();
24958  } catch (e) {
24959   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowColor");
24960  }
24961  try {
24962   test_2d_state_saverestore_shadowOffsetX();
24963  } catch (e) {
24964   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowOffsetX");
24965  }
24966  try {
24967   test_2d_state_saverestore_shadowOffsetY();
24968  } catch (e) {
24969   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_shadowOffsetY");
24970  }
24971  try {
24972   test_2d_state_saverestore_stack();
24973  } catch (e) {
24974   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_stack");
24975  }
24976  try {
24977   test_2d_state_saverestore_stackdepth();
24978  } catch (e) {
24979   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_stackdepth");
24980  }
24981  try {
24982   test_2d_state_saverestore_strokeStyle();
24983  } catch (e) {
24984   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_strokeStyle");
24985  }
24986  try {
24987   test_2d_state_saverestore_transformation();
24988  } catch (e) {
24989   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_transformation");
24990  }
24991  try {
24992   test_2d_state_saverestore_underflow();
24993  } catch (e) {
24994   ok(false, "unexpected exception thrown in: test_2d_state_saverestore_underflow");
24995  }
24996  try {
24997   test_2d_strokeRect_basic();
24998  } catch (e) {
24999   ok(false, "unexpected exception thrown in: test_2d_strokeRect_basic");
25000  }
25001  try {
25002   test_2d_strokeRect_clip();
25003  } catch (e) {
25004   ok(false, "unexpected exception thrown in: test_2d_strokeRect_clip");
25005  }
25006  try {
25007   test_2d_strokeRect_globalalpha();
25008  } catch (e) {
25009   ok(false, "unexpected exception thrown in: test_2d_strokeRect_globalalpha");
25010  }
25011  try {
25012   test_2d_strokeRect_globalcomposite();
25013  } catch (e) {
25014   ok(false, "unexpected exception thrown in: test_2d_strokeRect_globalcomposite");
25015  }
25016  try {
25017   test_2d_strokeRect_negative();
25018  } catch (e) {
25019   ok(false, "unexpected exception thrown in: test_2d_strokeRect_negative");
25020  }
25021  try {
25022   test_2d_strokeRect_nonfinite();
25023  } catch (e) {
25024   ok(false, "unexpected exception thrown in: test_2d_strokeRect_nonfinite");
25025  }
25026  try {
25027   test_2d_strokeRect_path();
25028  } catch (e) {
25029   ok(false, "unexpected exception thrown in: test_2d_strokeRect_path");
25030  }
25031  try {
25032   test_2d_strokeRect_shadow();
25033  } catch (e) {
25034   ok(false, "unexpected exception thrown in: test_2d_strokeRect_shadow");
25035  }
25036  try {
25037   test_2d_strokeRect_transform();
25038  } catch (e) {
25039   ok(false, "unexpected exception thrown in: test_2d_strokeRect_transform");
25040  }
25041  try {
25042   test_2d_strokeRect_zero_1();
25043  } catch (e) {
25044   ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_1");
25045  }
25046  try {
25047   test_2d_strokeRect_zero_2();
25048  } catch (e) {
25049   ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_2");
25050  }
25051  try {
25052   test_2d_strokeRect_zero_3();
25053  } catch (e) {
25054   ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_3");
25055  }
25056  try {
25057   test_2d_strokeRect_zero_4();
25058  } catch (e) {
25059   ok(false, "unexpected exception thrown in: test_2d_strokeRect_zero_4");
25060  }
25061  try {
25062   test_2d_strokeStyle_default();
25063  } catch (e) {
25064   ok(false, "unexpected exception thrown in: test_2d_strokeStyle_default");
25065  }
25066  try {
25067   test_2d_text_align_default();
25068  } catch (e) {
25069   ok(false, "unexpected exception thrown in: test_2d_text_align_default");
25070  }
25071  try {
25072   test_2d_text_align_invalid();
25073  } catch (e) {
25074   ok(false, "unexpected exception thrown in: test_2d_text_align_invalid");
25075  }
25076  try {
25077   test_2d_text_baseline_default();
25078  } catch (e) {
25079   ok(false, "unexpected exception thrown in: test_2d_text_baseline_default");
25080  }
25081  try {
25082   test_2d_text_baseline_invalid();
25083  } catch (e) {
25084   ok(false, "unexpected exception thrown in: test_2d_text_baseline_invalid");
25085  }
25086  try {
25087   test_2d_transformation_order();
25088  } catch (e) {
25089   ok(false, "unexpected exception thrown in: test_2d_transformation_order");
25090  }
25091  try {
25092   test_2d_transformation_rotate_direction();
25093  } catch (e) {
25094   ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_direction");
25095  }
25096  try {
25097   test_2d_transformation_rotate_nonfinite();
25098  } catch (e) {
25099   ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_nonfinite");
25100  }
25101  try {
25102   test_2d_transformation_rotate_radians();
25103  } catch (e) {
25104   ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_radians");
25105  }
25106  try {
25107   test_2d_transformation_rotate_wrap();
25108  } catch (e) {
25109   ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_wrap");
25110  }
25111  try {
25112   test_2d_transformation_rotate_wrapnegative();
25113  } catch (e) {
25114   ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_wrapnegative");
25115  }
25116  try {
25117   test_2d_transformation_rotate_zero();
25118  } catch (e) {
25119   ok(false, "unexpected exception thrown in: test_2d_transformation_rotate_zero");
25120  }
25121  try {
25122   test_2d_transformation_scale_basic();
25123  } catch (e) {
25124   ok(false, "unexpected exception thrown in: test_2d_transformation_scale_basic");
25125  }
25126  try {
25127   test_2d_transformation_scale_large();
25128  } catch (e) {
25129   ok(false, "unexpected exception thrown in: test_2d_transformation_scale_large");
25130  }
25131  try {
25132   test_2d_transformation_scale_multiple();
25133  } catch (e) {
25134   ok(false, "unexpected exception thrown in: test_2d_transformation_scale_multiple");
25135  }
25136  try {
25137   test_2d_transformation_scale_negative();
25138  } catch (e) {
25139   ok(false, "unexpected exception thrown in: test_2d_transformation_scale_negative");
25140  }
25141  try {
25142   test_2d_transformation_scale_nonfinite();
25143  } catch (e) {
25144   ok(false, "unexpected exception thrown in: test_2d_transformation_scale_nonfinite");
25145  }
25146  try {
25147   test_2d_transformation_scale_zero();
25148  } catch (e) {
25149   ok(false, "unexpected exception thrown in: test_2d_transformation_scale_zero");
25150  }
25151  try {
25152   test_2d_transformation_setTransform_multiple();
25153  } catch (e) {
25154   ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_multiple");
25155  }
25156  try {
25157   test_2d_transformation_setTransform_nonfinite();
25158  } catch (e) {
25159   ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_nonfinite");
25160  }
25161  try {
25162   test_2d_transformation_setTransform_skewed();
25163  } catch (e) {
25164   ok(false, "unexpected exception thrown in: test_2d_transformation_setTransform_skewed");
25165  }
25166  try {
25167   test_2d_transformation_transform_identity();
25168  } catch (e) {
25169   ok(false, "unexpected exception thrown in: test_2d_transformation_transform_identity");
25170  }
25171  try {
25172   test_2d_transformation_transform_multiply();
25173  } catch (e) {
25174   ok(false, "unexpected exception thrown in: test_2d_transformation_transform_multiply");
25175  }
25176  try {
25177   test_2d_transformation_transform_nonfinite();
25178  } catch (e) {
25179   ok(false, "unexpected exception thrown in: test_2d_transformation_transform_nonfinite");
25180  }
25181  try {
25182   test_2d_transformation_transform_skewed();
25183  } catch (e) {
25184   ok(false, "unexpected exception thrown in: test_2d_transformation_transform_skewed");
25185  }
25186  try {
25187   test_2d_transformation_translate_basic();
25188  } catch (e) {
25189   ok(false, "unexpected exception thrown in: test_2d_transformation_translate_basic");
25190  }
25191  try {
25192   test_2d_transformation_translate_nonfinite();
25193  } catch (e) {
25194   ok(false, "unexpected exception thrown in: test_2d_transformation_translate_nonfinite");
25195  }
25196  try {
25197   test_2d_type_exists();
25198  } catch (e) {
25199   ok(false, "unexpected exception thrown in: test_2d_type_exists");
25200  }
25201  try {
25202   test_2d_type_extend();
25203  } catch (e) {
25204   ok(false, "unexpected exception thrown in: test_2d_type_extend");
25205  }
25206  try {
25207   test_2d_type_prototype();
25208  } catch (e) {
25209   ok(false, "unexpected exception thrown in: test_2d_type_prototype");
25210  }
25211  try {
25212   test_2d_type_replace();
25213  } catch (e) {
25214   ok(false, "unexpected exception thrown in: test_2d_type_replace");
25215  }
25216  try {
25217   test_2d_voidreturn();
25218  } catch (e) {
25219   ok(false, "unexpected exception thrown in: test_2d_voidreturn");
25220  }
25221  try {
25222   test_bug397524();
25223  } catch (e) {
25224   ok(false, "unexpected exception thrown in: test_bug397524");
25225  }
25226  try {
25227   test_bug405982();
25228  } catch (e) {
25229   ok(false, "unexpected exception thrown in: test_bug405982");
25230  }
25231  try {
25232   test_context_arguments_extra();
25233  } catch (e) {
25234   ok(false, "unexpected exception thrown in: test_context_arguments_extra");
25235  }
25236  try {
25237   test_context_arguments_missing();
25238  } catch (e) {
25239   ok(false, "unexpected exception thrown in: test_context_arguments_missing");
25240  }
25241  try {
25242   test_context_casesensitive();
25243  } catch (e) {
25244   ok(false, "unexpected exception thrown in: test_context_casesensitive");
25245  }
25246  try {
25247   test_context_emptystring();
25248  } catch (e) {
25249   ok(false, "unexpected exception thrown in: test_context_emptystring");
25250  }
25251  try {
25252   test_context_unrecognised_badname();
25253  } catch (e) {
25254   ok(false, "unexpected exception thrown in: test_context_unrecognised_badname");
25255  }
25256  try {
25257   test_context_unrecognised_badsuffix();
25258  } catch (e) {
25259   ok(false, "unexpected exception thrown in: test_context_unrecognised_badsuffix");
25260  }
25261  try {
25262   test_context_unrecognised_nullsuffix();
25263  } catch (e) {
25264   ok(false, "unexpected exception thrown in: test_context_unrecognised_nullsuffix");
25265  }
25266  try {
25267   test_context_unrecognised_unicode();
25268  } catch (e) {
25269   ok(false, "unexpected exception thrown in: test_context_unrecognised_unicode");
25270  }
25271  try {
25272   test_fallback_basic();
25273  } catch (e) {
25274   ok(false, "unexpected exception thrown in: test_fallback_basic");
25275  }
25276  try {
25277   test_fallback_multiple();
25278  } catch (e) {
25279   ok(false, "unexpected exception thrown in: test_fallback_multiple");
25280  }
25281  try {
25282   test_fallback_nested();
25283  } catch (e) {
25284   ok(false, "unexpected exception thrown in: test_fallback_nested");
25285  }
25286  try {
25287   test_initial_colour();
25288  } catch (e) {
25289   ok(false, "unexpected exception thrown in: test_initial_colour");
25290  }
25291  try {
25292   test_initial_reset_2dstate();
25293  } catch (e) {
25294   ok(false, "unexpected exception thrown in: test_initial_reset_2dstate");
25295  }
25296  try {
25297   test_initial_reset_clip();
25298  } catch (e) {
25299   ok(false, "unexpected exception thrown in: test_initial_reset_clip");
25300  }
25301  try {
25302   test_initial_reset_different();
25303  } catch (e) {
25304   ok(false, "unexpected exception thrown in: test_initial_reset_different");
25305  }
25306  try {
25307   test_initial_reset_gradient();
25308  } catch (e) {
25309   ok(false, "unexpected exception thrown in: test_initial_reset_gradient");
25310  }
25311  try {
25312   test_initial_reset_path();
25313  } catch (e) {
25314   ok(false, "unexpected exception thrown in: test_initial_reset_path");
25315  }
25316  try {
25317   test_initial_reset_pattern();
25318  } catch (e) {
25319   ok(false, "unexpected exception thrown in: test_initial_reset_pattern");
25320  }
25321  try {
25322   test_initial_reset_same();
25323  } catch (e) {
25324   ok(false, "unexpected exception thrown in: test_initial_reset_same");
25325  }
25326  try {
25327   test_initial_reset_transform();
25328  } catch (e) {
25329   ok(false, "unexpected exception thrown in: test_initial_reset_transform");
25330  }
25331  try {
25332   test_size_attributes_default();
25333  } catch (e) {
25334   ok(false, "unexpected exception thrown in: test_size_attributes_default");
25335  }
25336  try {
25337   test_size_attributes();
25338  } catch (e) {
25339   ok(false, "unexpected exception thrown in: test_size_attributes");
25340  }
25341  try {
25342   test_size_attributes_parse_badsuffix();
25343  } catch (e) {
25344   ok(false, "unexpected exception thrown in: test_size_attributes_parse_badsuffix");
25345  }
25346  try {
25347   test_size_attributes_parse_floatsuffix();
25348  } catch (e) {
25349   ok(false, "unexpected exception thrown in: test_size_attributes_parse_floatsuffix");
25350  }
25351  try {
25352   test_size_attributes_parse_negative();
25353  } catch (e) {
25354   ok(false, "unexpected exception thrown in: test_size_attributes_parse_negative");
25355  }
25356  try {
25357   test_size_attributes_parse_nonnumber();
25358  } catch (e) {
25359   ok(false, "unexpected exception thrown in: test_size_attributes_parse_nonnumber");
25360  }
25361  try {
25362   test_size_attributes_parse_percentsuffix();
25363  } catch (e) {
25364   ok(false, "unexpected exception thrown in: test_size_attributes_parse_percentsuffix");
25365  }
25366  try {
25367   test_size_attributes_parse_whitespace();
25368  } catch (e) {
25369   ok(false, "unexpected exception thrown in: test_size_attributes_parse_whitespace");
25370  }
25371  try {
25372   test_size_attributes_parse_zero();
25373  } catch (e) {
25374   ok(false, "unexpected exception thrown in: test_size_attributes_parse_zero");
25375  }
25376  try {
25377   test_size_attributes_parse_zerosuffix();
25378  } catch (e) {
25379   ok(false, "unexpected exception thrown in: test_size_attributes_parse_zerosuffix");
25380  }
25381  try {
25382   test_size_attributes_reflect_1();
25383  } catch (e) {
25384   ok(false, "unexpected exception thrown in: test_size_attributes_reflect_1");
25385  }
25386  try {
25387   test_size_attributes_reflect_2();
25388  } catch (e) {
25389   ok(false, "unexpected exception thrown in: test_size_attributes_reflect_2");
25390  }
25391  try {
25392   test_size_attributes_removed();
25393  } catch (e) {
25394   ok(false, "unexpected exception thrown in: test_size_attributes_removed");
25395  }
25396  try {
25397   test_size_attributes_setAttribute_badsuffix();
25398  } catch (e) {
25399   ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_badsuffix");
25400  }
25401  try {
25402   test_size_attributes_setAttribute_floatsuffix();
25403  } catch (e) {
25404   ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_floatsuffix");
25405  }
25406  try {
25407   test_size_attributes_setAttribute_negative();
25408  } catch (e) {
25409   ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_negative");
25410  }
25411  try {
25412   test_size_attributes_setAttribute_nonnumber();
25413  } catch (e) {
25414   ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_nonnumber");
25415  }
25416  try {
25417   test_size_attributes_setAttribute_percentsuffix();
25418  } catch (e) {
25419   ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_percentsuffix");
25420  }
25421  try {
25422   test_size_attributes_setAttribute_whitespace();
25423  } catch (e) {
25424   ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_whitespace");
25425  }
25426  try {
25427   test_size_attributes_setAttribute_zero();
25428  } catch (e) {
25429   ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_zero");
25430  }
25431  try {
25432   test_size_attributes_setAttribute_zerosuffix();
25433  } catch (e) {
25434   ok(false, "unexpected exception thrown in: test_size_attributes_setAttribute_zerosuffix");
25435  }
25436  try {
25437   test_size_attributes_style();
25438  } catch (e) {
25439   ok(false, "unexpected exception thrown in: test_size_attributes_style");
25440  }
25441  try {
25442   test_size_attributes_type_get();
25443  } catch (e) {
25444   ok(false, "unexpected exception thrown in: test_size_attributes_type_get");
25445  }
25446  try {
25447   test_size_attributes_type_set();
25448  } catch (e) {
25449   ok(false, "unexpected exception thrown in: test_size_attributes_type_set");
25450  }
25451  try {
25452   test_text_font();
25453  } catch (e) {
25454   ok(false, "unexpected exception thrown in: test_text_font");
25455  }
25456  try {
25457   test_text_measure();
25458  } catch (e) {
25459   ok(false, "unexpected exception thrown in: test_text_measure");
25460  }
25461  try {
25462   test_text_space_replace();
25463  } catch (e) {
25464   ok(false, "unexpected exception thrown in: test_text_space_replace");
25465  }
25466  try {
25467   test_text_textAlign();
25468  } catch (e) {
25469   ok(false, "unexpected exception thrown in: test_text_textAlign");
25470  }
25471  try {
25472   test_text_textBaseline();
25473  } catch (e) {
25474   ok(false, "unexpected exception thrown in: test_text_textBaseline");
25475  }
25476  try {
25477   test_toDataURL_arguments_1();
25478  } catch (e) {
25479   ok(false, "unexpected exception thrown in: test_toDataURL_arguments_1");
25480  }
25481  try {
25482   test_toDataURL_arguments_2();
25483  } catch (e) {
25484   ok(false, "unexpected exception thrown in: test_toDataURL_arguments_2");
25485  }
25486  try {
25487   test_toDataURL_arguments_3();
25488  } catch (e) {
25489   ok(false, "unexpected exception thrown in: test_toDataURL_arguments_3");
25490  }
25491  try {
25492   test_toDataURL_complexcolours();
25493  } catch (e) {
25494   ok(false, "unexpected exception thrown in: test_toDataURL_complexcolours");
25495  }
25496  try {
25497   test_toDataURL_default();
25498  } catch (e) {
25499   ok(false, "unexpected exception thrown in: test_toDataURL_default");
25500  }
25501  try {
25502   test_toDataURL_lowercase();
25503  } catch (e) {
25504   ok(false, "unexpected exception thrown in: test_toDataURL_lowercase");
25505  }
25506  try {
25507   test_toDataURL_nocontext();
25508  } catch (e) {
25509   ok(false, "unexpected exception thrown in: test_toDataURL_nocontext");
25510  }
25511  try {
25512   test_toDataURL_png();
25513  } catch (e) {
25514   ok(false, "unexpected exception thrown in: test_toDataURL_png");
25515  }
25516  try {
25517   test_toDataURL_primarycolours();
25518  } catch (e) {
25519   ok(false, "unexpected exception thrown in: test_toDataURL_primarycolours");
25520  }
25521  try {
25522   test_toDataURL_unrecognised();
25523  } catch (e) {
25524   ok(false, "unexpected exception thrown in: test_toDataURL_unrecognised");
25525  }
25526  try {
25527   test_toDataURL_zerosize();
25528  } catch (e) {
25529   ok(false, "unexpected exception thrown in: test_toDataURL_zerosize");
25530  }
25531  try {
25532   test_type_exists();
25533  } catch (e) {
25534   ok(false, "unexpected exception thrown in: test_type_exists");
25535  }
25536  try {
25537   test_type_extend();
25538  } catch (e) {
25539   ok(false, "unexpected exception thrown in: test_type_extend");
25540  }
25541  try {
25542   test_type_name();
25543  } catch (e) {
25544   ok(false, "unexpected exception thrown in: test_type_name");
25545  }
25546  try {
25547   test_type_prototype();
25548  } catch (e) {
25549   ok(false, "unexpected exception thrown in: test_type_prototype");
25550  }
25551  try {
25552   test_2d_imagedata_coercion();
25553  } catch (e) {
25554   ok(false, "unexpected exception thrown in: test_2d_imagedata_coercion");
25555  }
25556  try {
25557   test_2d_imageSmoothing();
25558  } catch (e) {
25559   ok(false, "unexpected exception thrown in: test_2d_imageSmoothing");
25560  }
25561  try {
25562   test_zero_dimensions();
25563  } catch (e) {
25564   ok(false, "unexpected exception thrown in: test_zero_dimensions");
25565  }
25566  try {
25567   test_zero_dimensions_imagedata();
25568  } catch(e) {
25569   ok(false, "unexpected exception thrown in: test_zero_dimensions_imagedata");
25570  }
25571  try {
25572   test_getImageData_after_zero_canvas();
25573  } catch(e) {
25574   ok(false, "unexpected exception thrown in: test_getImageData_after_zero_canvas");
25575   throw e;
25576  }
25577  try {
25578   test_opaque();
25579  } catch(e) {
25580   ok(false, "unexpected exception thrown in: test_opaque");
25581   throw e;
25582  }
25583  try {
25584   test_2d_transformation_reset_transform();
25585  } catch (e) {
25586   ok(false, "unexpected exception thrown in: test_2d_transformation_reset_transform");
25587  }
25588  try {
25589   test_2d_path_ellipse_angle_1();
25590  } catch (e) {
25591   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_1");
25592  }
25593  try {
25594   test_2d_path_ellipse_angle_2();
25595  } catch (e) {
25596   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_2");
25597  }
25598  try {
25599   test_2d_path_ellipse_angle_3();
25600  } catch (e) {
25601   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_3");
25602  }
25603  try {
25604   test_2d_path_ellipse_angle_4();
25605  } catch (e) {
25606   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_4");
25607  }
25608  try {
25609   test_2d_path_ellipse_angle_5();
25610  } catch (e) {
25611   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_5");
25612  }
25613  try {
25614   test_2d_path_ellipse_angle_6();
25615  } catch (e) {
25616   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_angle_6");
25617  }
25618  try {
25619   test_2d_path_ellipse_empty();
25620  } catch (e) {
25621   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_empty");
25622  }
25623  try {
25624   test_2d_path_ellipse_end();
25625  } catch (e) {
25626   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_end");
25627  }
25628  try {
25629   test_2d_path_ellipse_negative();
25630  } catch (e) {
25631   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_negative");
25632  }
25633  try {
25634   test_2d_path_ellipse_nonempty();
25635  } catch (e) {
25636   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_nonempty");
25637  }
25638  try {
25639   test_2d_path_ellipse_nonfinite();
25640  } catch (e) {
25641   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_nonfinite");
25642  }
25643  try {
25644   test_2d_path_ellipse_scale_1();
25645  } catch (e) {
25646   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_scale_1");
25647  }
25648  try {
25649   test_2d_path_ellipse_scale_2();
25650  } catch (e) {
25651   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_scale_2");
25652  }
25653  try {
25654   test_2d_path_ellipse_selfintersect_1();
25655  } catch (e) {
25656   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_selfintersect_1");
25657  }
25658  try {
25659   test_2d_path_ellipse_selfintersect_2();
25660  } catch (e) {
25661   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_selfintersect_2");
25662  }
25663  try {
25664   test_2d_path_ellipse_shape_1();
25665  } catch (e) {
25666   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_1");
25667  }
25668  try {
25669   test_2d_path_ellipse_shape_2();
25670  } catch (e) {
25671   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_2");
25672  }
25673  try {
25674   test_2d_path_ellipse_shape_3();
25675  } catch (e) {
25676   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_3");
25677  }
25678  try {
25679   test_2d_path_ellipse_shape_4();
25680  } catch (e) {
25681   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_shape_4");
25682  }
25683  try {
25684   test_2d_path_ellipse_twopie_1();
25685  } catch (e) {
25686   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_1");
25687  }
25688  try {
25689   test_2d_path_ellipse_twopie_2();
25690  } catch (e) {
25691   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_2");
25692  }
25693  try {
25694   test_2d_path_ellipse_twopie_3();
25695  } catch (e) {
25696   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_3");
25697  }
25698  try {
25699   test_2d_path_ellipse_twopie_4();
25700  } catch (e) {
25701   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_twopie_4");
25702  }
25703  try {
25704   test_2d_path_ellipse_zero_1();
25705  } catch (e) {
25706   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_zero_1");
25707  }
25708  try {
25709   test_2d_path_ellipse_zero_2();
25710  } catch (e) {
25711   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_zero_2");
25712  }
25713  try {
25714   test_2d_path_ellipse_zeroradius();
25715  } catch (e) {
25716   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_zeroradius");
25717  }
25718  try {
25719   test_2d_path_ellipse_rotate();
25720  } catch (e) {
25721   ok(false, "unexpected exception thrown in: test_2d_path_ellipse_rotate");
25722  }
25723  try {
25724   // run this test last since it replaces the getContext method
25725   test_type_replace();
25726  } catch (e) {
25727   ok(false, "unexpected exception thrown in: test_type_replace");
25728  }
25729  try {
25730    test_2d_clearRect_testdoubleprecision();
25731  } catch(e) {
25732    ok(false, "unexpected exception thrown in: test_2d_clearRect_testdoubleprecision");
25733    throw e;
25734  }
25735
25736  //run the asynchronous tests
25737  try {
25738   test_2d_drawImage_animated_apng();
25739  } catch (e) {
25740   ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_apng");
25741  }
25742  try {
25743   test_2d_drawImage_animated_gif();
25744  } catch (e) {
25745   ok(false, "unexpected exception thrown in: test_2d_drawImage_animated_gif");
25746  }
25747
25748  setTimeout(asyncTestsDone, 500);
25749 }
25750
25751 addLoadEvent(runTests);
25752
25753 </script>