2d.layer.globalCompositeOperation.w.html (41857B)
1 <!DOCTYPE html> 2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> 3 <meta charset="UTF-8"> 4 <html class="reftest-wait"> 5 <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> 6 <link rel="match" href="2d.layer.globalCompositeOperation-expected.html"> 7 <title>Canvas test: 2d.layer.globalCompositeOperation</title> 8 <h1>2d.layer.globalCompositeOperation</h1> 9 <p class="desc">Checks that layers work with all globalCompositeOperation values.</p> 10 <script>pending_tests = 26;</script> 11 12 <div class="grid-container" style="--grid-width: 7"> 13 <span> 14 <div>source-over</div> 15 <canvas class="grid-cell-content" id="canvas0" width="90" height="90"> 16 <p class="fallback">FAIL (fallback content)</p> 17 </canvas> 18 <script id="myWorker0" type="text/worker"> 19 self.onmessage = function(e) { 20 const canvas = new OffscreenCanvas(90, 90); 21 const ctx = canvas.getContext('2d'); 22 23 ctx.translate(50, 50); 24 ctx.scale(2, 2); 25 ctx.rotate(Math.PI); 26 ctx.translate(-25, -25); 27 28 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 29 ctx.fillRect(15, 15, 25, 25); 30 31 ctx.globalAlpha = 0.75; 32 ctx.globalCompositeOperation = 'source-over'; 33 ctx.shadowOffsetX = 7; 34 ctx.shadowOffsetY = 7; 35 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 36 37 ctx.beginLayer(); 38 39 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 40 ctx.fillRect(10, 25, 25, 20); 41 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 42 ctx.fillRect(25, 10, 20, 25); 43 44 ctx.endLayer(); 45 46 const bitmap = canvas.transferToImageBitmap(); 47 self.postMessage(bitmap, bitmap); 48 }; 49 </script> 50 <script type="module"> 51 const blob = new Blob([document.getElementById('myWorker0').textContent]); 52 const worker = new Worker(URL.createObjectURL(blob)); 53 worker.addEventListener('message', msg => { 54 const outputCanvas = document.getElementById('canvas0'); 55 const outputCtx = outputCanvas.getContext('2d'); 56 outputCtx.drawImage(msg.data, 0, 0); 57 if (--pending_tests == 0) { 58 document.documentElement.classList.remove('reftest-wait'); 59 } 60 }); 61 worker.postMessage(null); 62 </script> 63 </span> 64 65 <span> 66 <div>source-in</div> 67 <canvas class="grid-cell-content" id="canvas1" width="90" height="90"> 68 <p class="fallback">FAIL (fallback content)</p> 69 </canvas> 70 <script id="myWorker1" type="text/worker"> 71 self.onmessage = function(e) { 72 const canvas = new OffscreenCanvas(90, 90); 73 const ctx = canvas.getContext('2d'); 74 75 ctx.translate(50, 50); 76 ctx.scale(2, 2); 77 ctx.rotate(Math.PI); 78 ctx.translate(-25, -25); 79 80 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 81 ctx.fillRect(15, 15, 25, 25); 82 83 ctx.globalAlpha = 0.75; 84 ctx.globalCompositeOperation = 'source-in'; 85 ctx.shadowOffsetX = 7; 86 ctx.shadowOffsetY = 7; 87 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 88 89 ctx.beginLayer(); 90 91 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 92 ctx.fillRect(10, 25, 25, 20); 93 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 94 ctx.fillRect(25, 10, 20, 25); 95 96 ctx.endLayer(); 97 98 const bitmap = canvas.transferToImageBitmap(); 99 self.postMessage(bitmap, bitmap); 100 }; 101 </script> 102 <script type="module"> 103 const blob = new Blob([document.getElementById('myWorker1').textContent]); 104 const worker = new Worker(URL.createObjectURL(blob)); 105 worker.addEventListener('message', msg => { 106 const outputCanvas = document.getElementById('canvas1'); 107 const outputCtx = outputCanvas.getContext('2d'); 108 outputCtx.drawImage(msg.data, 0, 0); 109 if (--pending_tests == 0) { 110 document.documentElement.classList.remove('reftest-wait'); 111 } 112 }); 113 worker.postMessage(null); 114 </script> 115 </span> 116 117 <span> 118 <div>source-out</div> 119 <canvas class="grid-cell-content" id="canvas2" width="90" height="90"> 120 <p class="fallback">FAIL (fallback content)</p> 121 </canvas> 122 <script id="myWorker2" type="text/worker"> 123 self.onmessage = function(e) { 124 const canvas = new OffscreenCanvas(90, 90); 125 const ctx = canvas.getContext('2d'); 126 127 ctx.translate(50, 50); 128 ctx.scale(2, 2); 129 ctx.rotate(Math.PI); 130 ctx.translate(-25, -25); 131 132 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 133 ctx.fillRect(15, 15, 25, 25); 134 135 ctx.globalAlpha = 0.75; 136 ctx.globalCompositeOperation = 'source-out'; 137 ctx.shadowOffsetX = 7; 138 ctx.shadowOffsetY = 7; 139 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 140 141 ctx.beginLayer(); 142 143 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 144 ctx.fillRect(10, 25, 25, 20); 145 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 146 ctx.fillRect(25, 10, 20, 25); 147 148 ctx.endLayer(); 149 150 const bitmap = canvas.transferToImageBitmap(); 151 self.postMessage(bitmap, bitmap); 152 }; 153 </script> 154 <script type="module"> 155 const blob = new Blob([document.getElementById('myWorker2').textContent]); 156 const worker = new Worker(URL.createObjectURL(blob)); 157 worker.addEventListener('message', msg => { 158 const outputCanvas = document.getElementById('canvas2'); 159 const outputCtx = outputCanvas.getContext('2d'); 160 outputCtx.drawImage(msg.data, 0, 0); 161 if (--pending_tests == 0) { 162 document.documentElement.classList.remove('reftest-wait'); 163 } 164 }); 165 worker.postMessage(null); 166 </script> 167 </span> 168 169 <span> 170 <div>source-atop</div> 171 <canvas class="grid-cell-content" id="canvas3" width="90" height="90"> 172 <p class="fallback">FAIL (fallback content)</p> 173 </canvas> 174 <script id="myWorker3" type="text/worker"> 175 self.onmessage = function(e) { 176 const canvas = new OffscreenCanvas(90, 90); 177 const ctx = canvas.getContext('2d'); 178 179 ctx.translate(50, 50); 180 ctx.scale(2, 2); 181 ctx.rotate(Math.PI); 182 ctx.translate(-25, -25); 183 184 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 185 ctx.fillRect(15, 15, 25, 25); 186 187 ctx.globalAlpha = 0.75; 188 ctx.globalCompositeOperation = 'source-atop'; 189 ctx.shadowOffsetX = 7; 190 ctx.shadowOffsetY = 7; 191 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 192 193 ctx.beginLayer(); 194 195 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 196 ctx.fillRect(10, 25, 25, 20); 197 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 198 ctx.fillRect(25, 10, 20, 25); 199 200 ctx.endLayer(); 201 202 const bitmap = canvas.transferToImageBitmap(); 203 self.postMessage(bitmap, bitmap); 204 }; 205 </script> 206 <script type="module"> 207 const blob = new Blob([document.getElementById('myWorker3').textContent]); 208 const worker = new Worker(URL.createObjectURL(blob)); 209 worker.addEventListener('message', msg => { 210 const outputCanvas = document.getElementById('canvas3'); 211 const outputCtx = outputCanvas.getContext('2d'); 212 outputCtx.drawImage(msg.data, 0, 0); 213 if (--pending_tests == 0) { 214 document.documentElement.classList.remove('reftest-wait'); 215 } 216 }); 217 worker.postMessage(null); 218 </script> 219 </span> 220 221 <span> 222 <div>destination-over</div> 223 <canvas class="grid-cell-content" id="canvas4" width="90" height="90"> 224 <p class="fallback">FAIL (fallback content)</p> 225 </canvas> 226 <script id="myWorker4" type="text/worker"> 227 self.onmessage = function(e) { 228 const canvas = new OffscreenCanvas(90, 90); 229 const ctx = canvas.getContext('2d'); 230 231 ctx.translate(50, 50); 232 ctx.scale(2, 2); 233 ctx.rotate(Math.PI); 234 ctx.translate(-25, -25); 235 236 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 237 ctx.fillRect(15, 15, 25, 25); 238 239 ctx.globalAlpha = 0.75; 240 ctx.globalCompositeOperation = 'destination-over'; 241 ctx.shadowOffsetX = 7; 242 ctx.shadowOffsetY = 7; 243 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 244 245 ctx.beginLayer(); 246 247 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 248 ctx.fillRect(10, 25, 25, 20); 249 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 250 ctx.fillRect(25, 10, 20, 25); 251 252 ctx.endLayer(); 253 254 const bitmap = canvas.transferToImageBitmap(); 255 self.postMessage(bitmap, bitmap); 256 }; 257 </script> 258 <script type="module"> 259 const blob = new Blob([document.getElementById('myWorker4').textContent]); 260 const worker = new Worker(URL.createObjectURL(blob)); 261 worker.addEventListener('message', msg => { 262 const outputCanvas = document.getElementById('canvas4'); 263 const outputCtx = outputCanvas.getContext('2d'); 264 outputCtx.drawImage(msg.data, 0, 0); 265 if (--pending_tests == 0) { 266 document.documentElement.classList.remove('reftest-wait'); 267 } 268 }); 269 worker.postMessage(null); 270 </script> 271 </span> 272 273 <span> 274 <div>destination-in</div> 275 <canvas class="grid-cell-content" id="canvas5" width="90" height="90"> 276 <p class="fallback">FAIL (fallback content)</p> 277 </canvas> 278 <script id="myWorker5" type="text/worker"> 279 self.onmessage = function(e) { 280 const canvas = new OffscreenCanvas(90, 90); 281 const ctx = canvas.getContext('2d'); 282 283 ctx.translate(50, 50); 284 ctx.scale(2, 2); 285 ctx.rotate(Math.PI); 286 ctx.translate(-25, -25); 287 288 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 289 ctx.fillRect(15, 15, 25, 25); 290 291 ctx.globalAlpha = 0.75; 292 ctx.globalCompositeOperation = 'destination-in'; 293 ctx.shadowOffsetX = 7; 294 ctx.shadowOffsetY = 7; 295 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 296 297 ctx.beginLayer(); 298 299 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 300 ctx.fillRect(10, 25, 25, 20); 301 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 302 ctx.fillRect(25, 10, 20, 25); 303 304 ctx.endLayer(); 305 306 const bitmap = canvas.transferToImageBitmap(); 307 self.postMessage(bitmap, bitmap); 308 }; 309 </script> 310 <script type="module"> 311 const blob = new Blob([document.getElementById('myWorker5').textContent]); 312 const worker = new Worker(URL.createObjectURL(blob)); 313 worker.addEventListener('message', msg => { 314 const outputCanvas = document.getElementById('canvas5'); 315 const outputCtx = outputCanvas.getContext('2d'); 316 outputCtx.drawImage(msg.data, 0, 0); 317 if (--pending_tests == 0) { 318 document.documentElement.classList.remove('reftest-wait'); 319 } 320 }); 321 worker.postMessage(null); 322 </script> 323 </span> 324 325 <span> 326 <div>destination-out</div> 327 <canvas class="grid-cell-content" id="canvas6" width="90" height="90"> 328 <p class="fallback">FAIL (fallback content)</p> 329 </canvas> 330 <script id="myWorker6" type="text/worker"> 331 self.onmessage = function(e) { 332 const canvas = new OffscreenCanvas(90, 90); 333 const ctx = canvas.getContext('2d'); 334 335 ctx.translate(50, 50); 336 ctx.scale(2, 2); 337 ctx.rotate(Math.PI); 338 ctx.translate(-25, -25); 339 340 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 341 ctx.fillRect(15, 15, 25, 25); 342 343 ctx.globalAlpha = 0.75; 344 ctx.globalCompositeOperation = 'destination-out'; 345 ctx.shadowOffsetX = 7; 346 ctx.shadowOffsetY = 7; 347 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 348 349 ctx.beginLayer(); 350 351 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 352 ctx.fillRect(10, 25, 25, 20); 353 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 354 ctx.fillRect(25, 10, 20, 25); 355 356 ctx.endLayer(); 357 358 const bitmap = canvas.transferToImageBitmap(); 359 self.postMessage(bitmap, bitmap); 360 }; 361 </script> 362 <script type="module"> 363 const blob = new Blob([document.getElementById('myWorker6').textContent]); 364 const worker = new Worker(URL.createObjectURL(blob)); 365 worker.addEventListener('message', msg => { 366 const outputCanvas = document.getElementById('canvas6'); 367 const outputCtx = outputCanvas.getContext('2d'); 368 outputCtx.drawImage(msg.data, 0, 0); 369 if (--pending_tests == 0) { 370 document.documentElement.classList.remove('reftest-wait'); 371 } 372 }); 373 worker.postMessage(null); 374 </script> 375 </span> 376 377 <span> 378 <div>destination-atop</div> 379 <canvas class="grid-cell-content" id="canvas7" width="90" height="90"> 380 <p class="fallback">FAIL (fallback content)</p> 381 </canvas> 382 <script id="myWorker7" type="text/worker"> 383 self.onmessage = function(e) { 384 const canvas = new OffscreenCanvas(90, 90); 385 const ctx = canvas.getContext('2d'); 386 387 ctx.translate(50, 50); 388 ctx.scale(2, 2); 389 ctx.rotate(Math.PI); 390 ctx.translate(-25, -25); 391 392 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 393 ctx.fillRect(15, 15, 25, 25); 394 395 ctx.globalAlpha = 0.75; 396 ctx.globalCompositeOperation = 'destination-atop'; 397 ctx.shadowOffsetX = 7; 398 ctx.shadowOffsetY = 7; 399 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 400 401 ctx.beginLayer(); 402 403 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 404 ctx.fillRect(10, 25, 25, 20); 405 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 406 ctx.fillRect(25, 10, 20, 25); 407 408 ctx.endLayer(); 409 410 const bitmap = canvas.transferToImageBitmap(); 411 self.postMessage(bitmap, bitmap); 412 }; 413 </script> 414 <script type="module"> 415 const blob = new Blob([document.getElementById('myWorker7').textContent]); 416 const worker = new Worker(URL.createObjectURL(blob)); 417 worker.addEventListener('message', msg => { 418 const outputCanvas = document.getElementById('canvas7'); 419 const outputCtx = outputCanvas.getContext('2d'); 420 outputCtx.drawImage(msg.data, 0, 0); 421 if (--pending_tests == 0) { 422 document.documentElement.classList.remove('reftest-wait'); 423 } 424 }); 425 worker.postMessage(null); 426 </script> 427 </span> 428 429 <span> 430 <div>lighter</div> 431 <canvas class="grid-cell-content" id="canvas8" width="90" height="90"> 432 <p class="fallback">FAIL (fallback content)</p> 433 </canvas> 434 <script id="myWorker8" type="text/worker"> 435 self.onmessage = function(e) { 436 const canvas = new OffscreenCanvas(90, 90); 437 const ctx = canvas.getContext('2d'); 438 439 ctx.translate(50, 50); 440 ctx.scale(2, 2); 441 ctx.rotate(Math.PI); 442 ctx.translate(-25, -25); 443 444 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 445 ctx.fillRect(15, 15, 25, 25); 446 447 ctx.globalAlpha = 0.75; 448 ctx.globalCompositeOperation = 'lighter'; 449 ctx.shadowOffsetX = 7; 450 ctx.shadowOffsetY = 7; 451 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 452 453 ctx.beginLayer(); 454 455 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 456 ctx.fillRect(10, 25, 25, 20); 457 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 458 ctx.fillRect(25, 10, 20, 25); 459 460 ctx.endLayer(); 461 462 const bitmap = canvas.transferToImageBitmap(); 463 self.postMessage(bitmap, bitmap); 464 }; 465 </script> 466 <script type="module"> 467 const blob = new Blob([document.getElementById('myWorker8').textContent]); 468 const worker = new Worker(URL.createObjectURL(blob)); 469 worker.addEventListener('message', msg => { 470 const outputCanvas = document.getElementById('canvas8'); 471 const outputCtx = outputCanvas.getContext('2d'); 472 outputCtx.drawImage(msg.data, 0, 0); 473 if (--pending_tests == 0) { 474 document.documentElement.classList.remove('reftest-wait'); 475 } 476 }); 477 worker.postMessage(null); 478 </script> 479 </span> 480 481 <span> 482 <div>copy</div> 483 <canvas class="grid-cell-content" id="canvas9" width="90" height="90"> 484 <p class="fallback">FAIL (fallback content)</p> 485 </canvas> 486 <script id="myWorker9" type="text/worker"> 487 self.onmessage = function(e) { 488 const canvas = new OffscreenCanvas(90, 90); 489 const ctx = canvas.getContext('2d'); 490 491 ctx.translate(50, 50); 492 ctx.scale(2, 2); 493 ctx.rotate(Math.PI); 494 ctx.translate(-25, -25); 495 496 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 497 ctx.fillRect(15, 15, 25, 25); 498 499 ctx.globalAlpha = 0.75; 500 ctx.globalCompositeOperation = 'copy'; 501 ctx.shadowOffsetX = 7; 502 ctx.shadowOffsetY = 7; 503 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 504 505 ctx.beginLayer(); 506 507 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 508 ctx.fillRect(10, 25, 25, 20); 509 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 510 ctx.fillRect(25, 10, 20, 25); 511 512 ctx.endLayer(); 513 514 const bitmap = canvas.transferToImageBitmap(); 515 self.postMessage(bitmap, bitmap); 516 }; 517 </script> 518 <script type="module"> 519 const blob = new Blob([document.getElementById('myWorker9').textContent]); 520 const worker = new Worker(URL.createObjectURL(blob)); 521 worker.addEventListener('message', msg => { 522 const outputCanvas = document.getElementById('canvas9'); 523 const outputCtx = outputCanvas.getContext('2d'); 524 outputCtx.drawImage(msg.data, 0, 0); 525 if (--pending_tests == 0) { 526 document.documentElement.classList.remove('reftest-wait'); 527 } 528 }); 529 worker.postMessage(null); 530 </script> 531 </span> 532 533 <span> 534 <div>xor</div> 535 <canvas class="grid-cell-content" id="canvas10" width="90" height="90"> 536 <p class="fallback">FAIL (fallback content)</p> 537 </canvas> 538 <script id="myWorker10" type="text/worker"> 539 self.onmessage = function(e) { 540 const canvas = new OffscreenCanvas(90, 90); 541 const ctx = canvas.getContext('2d'); 542 543 ctx.translate(50, 50); 544 ctx.scale(2, 2); 545 ctx.rotate(Math.PI); 546 ctx.translate(-25, -25); 547 548 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 549 ctx.fillRect(15, 15, 25, 25); 550 551 ctx.globalAlpha = 0.75; 552 ctx.globalCompositeOperation = 'xor'; 553 ctx.shadowOffsetX = 7; 554 ctx.shadowOffsetY = 7; 555 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 556 557 ctx.beginLayer(); 558 559 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 560 ctx.fillRect(10, 25, 25, 20); 561 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 562 ctx.fillRect(25, 10, 20, 25); 563 564 ctx.endLayer(); 565 566 const bitmap = canvas.transferToImageBitmap(); 567 self.postMessage(bitmap, bitmap); 568 }; 569 </script> 570 <script type="module"> 571 const blob = new Blob([document.getElementById('myWorker10').textContent]); 572 const worker = new Worker(URL.createObjectURL(blob)); 573 worker.addEventListener('message', msg => { 574 const outputCanvas = document.getElementById('canvas10'); 575 const outputCtx = outputCanvas.getContext('2d'); 576 outputCtx.drawImage(msg.data, 0, 0); 577 if (--pending_tests == 0) { 578 document.documentElement.classList.remove('reftest-wait'); 579 } 580 }); 581 worker.postMessage(null); 582 </script> 583 </span> 584 585 <span> 586 <div>multiply</div> 587 <canvas class="grid-cell-content" id="canvas11" width="90" height="90"> 588 <p class="fallback">FAIL (fallback content)</p> 589 </canvas> 590 <script id="myWorker11" type="text/worker"> 591 self.onmessage = function(e) { 592 const canvas = new OffscreenCanvas(90, 90); 593 const ctx = canvas.getContext('2d'); 594 595 ctx.translate(50, 50); 596 ctx.scale(2, 2); 597 ctx.rotate(Math.PI); 598 ctx.translate(-25, -25); 599 600 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 601 ctx.fillRect(15, 15, 25, 25); 602 603 ctx.globalAlpha = 0.75; 604 ctx.globalCompositeOperation = 'multiply'; 605 ctx.shadowOffsetX = 7; 606 ctx.shadowOffsetY = 7; 607 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 608 609 ctx.beginLayer(); 610 611 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 612 ctx.fillRect(10, 25, 25, 20); 613 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 614 ctx.fillRect(25, 10, 20, 25); 615 616 ctx.endLayer(); 617 618 const bitmap = canvas.transferToImageBitmap(); 619 self.postMessage(bitmap, bitmap); 620 }; 621 </script> 622 <script type="module"> 623 const blob = new Blob([document.getElementById('myWorker11').textContent]); 624 const worker = new Worker(URL.createObjectURL(blob)); 625 worker.addEventListener('message', msg => { 626 const outputCanvas = document.getElementById('canvas11'); 627 const outputCtx = outputCanvas.getContext('2d'); 628 outputCtx.drawImage(msg.data, 0, 0); 629 if (--pending_tests == 0) { 630 document.documentElement.classList.remove('reftest-wait'); 631 } 632 }); 633 worker.postMessage(null); 634 </script> 635 </span> 636 637 <span> 638 <div>screen</div> 639 <canvas class="grid-cell-content" id="canvas12" width="90" height="90"> 640 <p class="fallback">FAIL (fallback content)</p> 641 </canvas> 642 <script id="myWorker12" type="text/worker"> 643 self.onmessage = function(e) { 644 const canvas = new OffscreenCanvas(90, 90); 645 const ctx = canvas.getContext('2d'); 646 647 ctx.translate(50, 50); 648 ctx.scale(2, 2); 649 ctx.rotate(Math.PI); 650 ctx.translate(-25, -25); 651 652 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 653 ctx.fillRect(15, 15, 25, 25); 654 655 ctx.globalAlpha = 0.75; 656 ctx.globalCompositeOperation = 'screen'; 657 ctx.shadowOffsetX = 7; 658 ctx.shadowOffsetY = 7; 659 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 660 661 ctx.beginLayer(); 662 663 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 664 ctx.fillRect(10, 25, 25, 20); 665 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 666 ctx.fillRect(25, 10, 20, 25); 667 668 ctx.endLayer(); 669 670 const bitmap = canvas.transferToImageBitmap(); 671 self.postMessage(bitmap, bitmap); 672 }; 673 </script> 674 <script type="module"> 675 const blob = new Blob([document.getElementById('myWorker12').textContent]); 676 const worker = new Worker(URL.createObjectURL(blob)); 677 worker.addEventListener('message', msg => { 678 const outputCanvas = document.getElementById('canvas12'); 679 const outputCtx = outputCanvas.getContext('2d'); 680 outputCtx.drawImage(msg.data, 0, 0); 681 if (--pending_tests == 0) { 682 document.documentElement.classList.remove('reftest-wait'); 683 } 684 }); 685 worker.postMessage(null); 686 </script> 687 </span> 688 689 <span> 690 <div>overlay</div> 691 <canvas class="grid-cell-content" id="canvas13" width="90" height="90"> 692 <p class="fallback">FAIL (fallback content)</p> 693 </canvas> 694 <script id="myWorker13" type="text/worker"> 695 self.onmessage = function(e) { 696 const canvas = new OffscreenCanvas(90, 90); 697 const ctx = canvas.getContext('2d'); 698 699 ctx.translate(50, 50); 700 ctx.scale(2, 2); 701 ctx.rotate(Math.PI); 702 ctx.translate(-25, -25); 703 704 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 705 ctx.fillRect(15, 15, 25, 25); 706 707 ctx.globalAlpha = 0.75; 708 ctx.globalCompositeOperation = 'overlay'; 709 ctx.shadowOffsetX = 7; 710 ctx.shadowOffsetY = 7; 711 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 712 713 ctx.beginLayer(); 714 715 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 716 ctx.fillRect(10, 25, 25, 20); 717 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 718 ctx.fillRect(25, 10, 20, 25); 719 720 ctx.endLayer(); 721 722 const bitmap = canvas.transferToImageBitmap(); 723 self.postMessage(bitmap, bitmap); 724 }; 725 </script> 726 <script type="module"> 727 const blob = new Blob([document.getElementById('myWorker13').textContent]); 728 const worker = new Worker(URL.createObjectURL(blob)); 729 worker.addEventListener('message', msg => { 730 const outputCanvas = document.getElementById('canvas13'); 731 const outputCtx = outputCanvas.getContext('2d'); 732 outputCtx.drawImage(msg.data, 0, 0); 733 if (--pending_tests == 0) { 734 document.documentElement.classList.remove('reftest-wait'); 735 } 736 }); 737 worker.postMessage(null); 738 </script> 739 </span> 740 741 <span> 742 <div>darken</div> 743 <canvas class="grid-cell-content" id="canvas14" width="90" height="90"> 744 <p class="fallback">FAIL (fallback content)</p> 745 </canvas> 746 <script id="myWorker14" type="text/worker"> 747 self.onmessage = function(e) { 748 const canvas = new OffscreenCanvas(90, 90); 749 const ctx = canvas.getContext('2d'); 750 751 ctx.translate(50, 50); 752 ctx.scale(2, 2); 753 ctx.rotate(Math.PI); 754 ctx.translate(-25, -25); 755 756 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 757 ctx.fillRect(15, 15, 25, 25); 758 759 ctx.globalAlpha = 0.75; 760 ctx.globalCompositeOperation = 'darken'; 761 ctx.shadowOffsetX = 7; 762 ctx.shadowOffsetY = 7; 763 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 764 765 ctx.beginLayer(); 766 767 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 768 ctx.fillRect(10, 25, 25, 20); 769 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 770 ctx.fillRect(25, 10, 20, 25); 771 772 ctx.endLayer(); 773 774 const bitmap = canvas.transferToImageBitmap(); 775 self.postMessage(bitmap, bitmap); 776 }; 777 </script> 778 <script type="module"> 779 const blob = new Blob([document.getElementById('myWorker14').textContent]); 780 const worker = new Worker(URL.createObjectURL(blob)); 781 worker.addEventListener('message', msg => { 782 const outputCanvas = document.getElementById('canvas14'); 783 const outputCtx = outputCanvas.getContext('2d'); 784 outputCtx.drawImage(msg.data, 0, 0); 785 if (--pending_tests == 0) { 786 document.documentElement.classList.remove('reftest-wait'); 787 } 788 }); 789 worker.postMessage(null); 790 </script> 791 </span> 792 793 <span> 794 <div>lighten</div> 795 <canvas class="grid-cell-content" id="canvas15" width="90" height="90"> 796 <p class="fallback">FAIL (fallback content)</p> 797 </canvas> 798 <script id="myWorker15" type="text/worker"> 799 self.onmessage = function(e) { 800 const canvas = new OffscreenCanvas(90, 90); 801 const ctx = canvas.getContext('2d'); 802 803 ctx.translate(50, 50); 804 ctx.scale(2, 2); 805 ctx.rotate(Math.PI); 806 ctx.translate(-25, -25); 807 808 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 809 ctx.fillRect(15, 15, 25, 25); 810 811 ctx.globalAlpha = 0.75; 812 ctx.globalCompositeOperation = 'lighten'; 813 ctx.shadowOffsetX = 7; 814 ctx.shadowOffsetY = 7; 815 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 816 817 ctx.beginLayer(); 818 819 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 820 ctx.fillRect(10, 25, 25, 20); 821 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 822 ctx.fillRect(25, 10, 20, 25); 823 824 ctx.endLayer(); 825 826 const bitmap = canvas.transferToImageBitmap(); 827 self.postMessage(bitmap, bitmap); 828 }; 829 </script> 830 <script type="module"> 831 const blob = new Blob([document.getElementById('myWorker15').textContent]); 832 const worker = new Worker(URL.createObjectURL(blob)); 833 worker.addEventListener('message', msg => { 834 const outputCanvas = document.getElementById('canvas15'); 835 const outputCtx = outputCanvas.getContext('2d'); 836 outputCtx.drawImage(msg.data, 0, 0); 837 if (--pending_tests == 0) { 838 document.documentElement.classList.remove('reftest-wait'); 839 } 840 }); 841 worker.postMessage(null); 842 </script> 843 </span> 844 845 <span> 846 <div>color-dodge</div> 847 <canvas class="grid-cell-content" id="canvas16" width="90" height="90"> 848 <p class="fallback">FAIL (fallback content)</p> 849 </canvas> 850 <script id="myWorker16" type="text/worker"> 851 self.onmessage = function(e) { 852 const canvas = new OffscreenCanvas(90, 90); 853 const ctx = canvas.getContext('2d'); 854 855 ctx.translate(50, 50); 856 ctx.scale(2, 2); 857 ctx.rotate(Math.PI); 858 ctx.translate(-25, -25); 859 860 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 861 ctx.fillRect(15, 15, 25, 25); 862 863 ctx.globalAlpha = 0.75; 864 ctx.globalCompositeOperation = 'color-dodge'; 865 ctx.shadowOffsetX = 7; 866 ctx.shadowOffsetY = 7; 867 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 868 869 ctx.beginLayer(); 870 871 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 872 ctx.fillRect(10, 25, 25, 20); 873 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 874 ctx.fillRect(25, 10, 20, 25); 875 876 ctx.endLayer(); 877 878 const bitmap = canvas.transferToImageBitmap(); 879 self.postMessage(bitmap, bitmap); 880 }; 881 </script> 882 <script type="module"> 883 const blob = new Blob([document.getElementById('myWorker16').textContent]); 884 const worker = new Worker(URL.createObjectURL(blob)); 885 worker.addEventListener('message', msg => { 886 const outputCanvas = document.getElementById('canvas16'); 887 const outputCtx = outputCanvas.getContext('2d'); 888 outputCtx.drawImage(msg.data, 0, 0); 889 if (--pending_tests == 0) { 890 document.documentElement.classList.remove('reftest-wait'); 891 } 892 }); 893 worker.postMessage(null); 894 </script> 895 </span> 896 897 <span> 898 <div>color-burn</div> 899 <canvas class="grid-cell-content" id="canvas17" width="90" height="90"> 900 <p class="fallback">FAIL (fallback content)</p> 901 </canvas> 902 <script id="myWorker17" type="text/worker"> 903 self.onmessage = function(e) { 904 const canvas = new OffscreenCanvas(90, 90); 905 const ctx = canvas.getContext('2d'); 906 907 ctx.translate(50, 50); 908 ctx.scale(2, 2); 909 ctx.rotate(Math.PI); 910 ctx.translate(-25, -25); 911 912 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 913 ctx.fillRect(15, 15, 25, 25); 914 915 ctx.globalAlpha = 0.75; 916 ctx.globalCompositeOperation = 'color-burn'; 917 ctx.shadowOffsetX = 7; 918 ctx.shadowOffsetY = 7; 919 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 920 921 ctx.beginLayer(); 922 923 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 924 ctx.fillRect(10, 25, 25, 20); 925 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 926 ctx.fillRect(25, 10, 20, 25); 927 928 ctx.endLayer(); 929 930 const bitmap = canvas.transferToImageBitmap(); 931 self.postMessage(bitmap, bitmap); 932 }; 933 </script> 934 <script type="module"> 935 const blob = new Blob([document.getElementById('myWorker17').textContent]); 936 const worker = new Worker(URL.createObjectURL(blob)); 937 worker.addEventListener('message', msg => { 938 const outputCanvas = document.getElementById('canvas17'); 939 const outputCtx = outputCanvas.getContext('2d'); 940 outputCtx.drawImage(msg.data, 0, 0); 941 if (--pending_tests == 0) { 942 document.documentElement.classList.remove('reftest-wait'); 943 } 944 }); 945 worker.postMessage(null); 946 </script> 947 </span> 948 949 <span> 950 <div>hard-light</div> 951 <canvas class="grid-cell-content" id="canvas18" width="90" height="90"> 952 <p class="fallback">FAIL (fallback content)</p> 953 </canvas> 954 <script id="myWorker18" type="text/worker"> 955 self.onmessage = function(e) { 956 const canvas = new OffscreenCanvas(90, 90); 957 const ctx = canvas.getContext('2d'); 958 959 ctx.translate(50, 50); 960 ctx.scale(2, 2); 961 ctx.rotate(Math.PI); 962 ctx.translate(-25, -25); 963 964 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 965 ctx.fillRect(15, 15, 25, 25); 966 967 ctx.globalAlpha = 0.75; 968 ctx.globalCompositeOperation = 'hard-light'; 969 ctx.shadowOffsetX = 7; 970 ctx.shadowOffsetY = 7; 971 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 972 973 ctx.beginLayer(); 974 975 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 976 ctx.fillRect(10, 25, 25, 20); 977 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 978 ctx.fillRect(25, 10, 20, 25); 979 980 ctx.endLayer(); 981 982 const bitmap = canvas.transferToImageBitmap(); 983 self.postMessage(bitmap, bitmap); 984 }; 985 </script> 986 <script type="module"> 987 const blob = new Blob([document.getElementById('myWorker18').textContent]); 988 const worker = new Worker(URL.createObjectURL(blob)); 989 worker.addEventListener('message', msg => { 990 const outputCanvas = document.getElementById('canvas18'); 991 const outputCtx = outputCanvas.getContext('2d'); 992 outputCtx.drawImage(msg.data, 0, 0); 993 if (--pending_tests == 0) { 994 document.documentElement.classList.remove('reftest-wait'); 995 } 996 }); 997 worker.postMessage(null); 998 </script> 999 </span> 1000 1001 <span> 1002 <div>soft-light</div> 1003 <canvas class="grid-cell-content" id="canvas19" width="90" height="90"> 1004 <p class="fallback">FAIL (fallback content)</p> 1005 </canvas> 1006 <script id="myWorker19" type="text/worker"> 1007 self.onmessage = function(e) { 1008 const canvas = new OffscreenCanvas(90, 90); 1009 const ctx = canvas.getContext('2d'); 1010 1011 ctx.translate(50, 50); 1012 ctx.scale(2, 2); 1013 ctx.rotate(Math.PI); 1014 ctx.translate(-25, -25); 1015 1016 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 1017 ctx.fillRect(15, 15, 25, 25); 1018 1019 ctx.globalAlpha = 0.75; 1020 ctx.globalCompositeOperation = 'soft-light'; 1021 ctx.shadowOffsetX = 7; 1022 ctx.shadowOffsetY = 7; 1023 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 1024 1025 ctx.beginLayer(); 1026 1027 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 1028 ctx.fillRect(10, 25, 25, 20); 1029 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 1030 ctx.fillRect(25, 10, 20, 25); 1031 1032 ctx.endLayer(); 1033 1034 const bitmap = canvas.transferToImageBitmap(); 1035 self.postMessage(bitmap, bitmap); 1036 }; 1037 </script> 1038 <script type="module"> 1039 const blob = new Blob([document.getElementById('myWorker19').textContent]); 1040 const worker = new Worker(URL.createObjectURL(blob)); 1041 worker.addEventListener('message', msg => { 1042 const outputCanvas = document.getElementById('canvas19'); 1043 const outputCtx = outputCanvas.getContext('2d'); 1044 outputCtx.drawImage(msg.data, 0, 0); 1045 if (--pending_tests == 0) { 1046 document.documentElement.classList.remove('reftest-wait'); 1047 } 1048 }); 1049 worker.postMessage(null); 1050 </script> 1051 </span> 1052 1053 <span> 1054 <div>difference</div> 1055 <canvas class="grid-cell-content" id="canvas20" width="90" height="90"> 1056 <p class="fallback">FAIL (fallback content)</p> 1057 </canvas> 1058 <script id="myWorker20" type="text/worker"> 1059 self.onmessage = function(e) { 1060 const canvas = new OffscreenCanvas(90, 90); 1061 const ctx = canvas.getContext('2d'); 1062 1063 ctx.translate(50, 50); 1064 ctx.scale(2, 2); 1065 ctx.rotate(Math.PI); 1066 ctx.translate(-25, -25); 1067 1068 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 1069 ctx.fillRect(15, 15, 25, 25); 1070 1071 ctx.globalAlpha = 0.75; 1072 ctx.globalCompositeOperation = 'difference'; 1073 ctx.shadowOffsetX = 7; 1074 ctx.shadowOffsetY = 7; 1075 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 1076 1077 ctx.beginLayer(); 1078 1079 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 1080 ctx.fillRect(10, 25, 25, 20); 1081 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 1082 ctx.fillRect(25, 10, 20, 25); 1083 1084 ctx.endLayer(); 1085 1086 const bitmap = canvas.transferToImageBitmap(); 1087 self.postMessage(bitmap, bitmap); 1088 }; 1089 </script> 1090 <script type="module"> 1091 const blob = new Blob([document.getElementById('myWorker20').textContent]); 1092 const worker = new Worker(URL.createObjectURL(blob)); 1093 worker.addEventListener('message', msg => { 1094 const outputCanvas = document.getElementById('canvas20'); 1095 const outputCtx = outputCanvas.getContext('2d'); 1096 outputCtx.drawImage(msg.data, 0, 0); 1097 if (--pending_tests == 0) { 1098 document.documentElement.classList.remove('reftest-wait'); 1099 } 1100 }); 1101 worker.postMessage(null); 1102 </script> 1103 </span> 1104 1105 <span> 1106 <div>exclusion</div> 1107 <canvas class="grid-cell-content" id="canvas21" width="90" height="90"> 1108 <p class="fallback">FAIL (fallback content)</p> 1109 </canvas> 1110 <script id="myWorker21" type="text/worker"> 1111 self.onmessage = function(e) { 1112 const canvas = new OffscreenCanvas(90, 90); 1113 const ctx = canvas.getContext('2d'); 1114 1115 ctx.translate(50, 50); 1116 ctx.scale(2, 2); 1117 ctx.rotate(Math.PI); 1118 ctx.translate(-25, -25); 1119 1120 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 1121 ctx.fillRect(15, 15, 25, 25); 1122 1123 ctx.globalAlpha = 0.75; 1124 ctx.globalCompositeOperation = 'exclusion'; 1125 ctx.shadowOffsetX = 7; 1126 ctx.shadowOffsetY = 7; 1127 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 1128 1129 ctx.beginLayer(); 1130 1131 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 1132 ctx.fillRect(10, 25, 25, 20); 1133 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 1134 ctx.fillRect(25, 10, 20, 25); 1135 1136 ctx.endLayer(); 1137 1138 const bitmap = canvas.transferToImageBitmap(); 1139 self.postMessage(bitmap, bitmap); 1140 }; 1141 </script> 1142 <script type="module"> 1143 const blob = new Blob([document.getElementById('myWorker21').textContent]); 1144 const worker = new Worker(URL.createObjectURL(blob)); 1145 worker.addEventListener('message', msg => { 1146 const outputCanvas = document.getElementById('canvas21'); 1147 const outputCtx = outputCanvas.getContext('2d'); 1148 outputCtx.drawImage(msg.data, 0, 0); 1149 if (--pending_tests == 0) { 1150 document.documentElement.classList.remove('reftest-wait'); 1151 } 1152 }); 1153 worker.postMessage(null); 1154 </script> 1155 </span> 1156 1157 <span> 1158 <div>hue</div> 1159 <canvas class="grid-cell-content" id="canvas22" width="90" height="90"> 1160 <p class="fallback">FAIL (fallback content)</p> 1161 </canvas> 1162 <script id="myWorker22" type="text/worker"> 1163 self.onmessage = function(e) { 1164 const canvas = new OffscreenCanvas(90, 90); 1165 const ctx = canvas.getContext('2d'); 1166 1167 ctx.translate(50, 50); 1168 ctx.scale(2, 2); 1169 ctx.rotate(Math.PI); 1170 ctx.translate(-25, -25); 1171 1172 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 1173 ctx.fillRect(15, 15, 25, 25); 1174 1175 ctx.globalAlpha = 0.75; 1176 ctx.globalCompositeOperation = 'hue'; 1177 ctx.shadowOffsetX = 7; 1178 ctx.shadowOffsetY = 7; 1179 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 1180 1181 ctx.beginLayer(); 1182 1183 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 1184 ctx.fillRect(10, 25, 25, 20); 1185 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 1186 ctx.fillRect(25, 10, 20, 25); 1187 1188 ctx.endLayer(); 1189 1190 const bitmap = canvas.transferToImageBitmap(); 1191 self.postMessage(bitmap, bitmap); 1192 }; 1193 </script> 1194 <script type="module"> 1195 const blob = new Blob([document.getElementById('myWorker22').textContent]); 1196 const worker = new Worker(URL.createObjectURL(blob)); 1197 worker.addEventListener('message', msg => { 1198 const outputCanvas = document.getElementById('canvas22'); 1199 const outputCtx = outputCanvas.getContext('2d'); 1200 outputCtx.drawImage(msg.data, 0, 0); 1201 if (--pending_tests == 0) { 1202 document.documentElement.classList.remove('reftest-wait'); 1203 } 1204 }); 1205 worker.postMessage(null); 1206 </script> 1207 </span> 1208 1209 <span> 1210 <div>saturation</div> 1211 <canvas class="grid-cell-content" id="canvas23" width="90" height="90"> 1212 <p class="fallback">FAIL (fallback content)</p> 1213 </canvas> 1214 <script id="myWorker23" type="text/worker"> 1215 self.onmessage = function(e) { 1216 const canvas = new OffscreenCanvas(90, 90); 1217 const ctx = canvas.getContext('2d'); 1218 1219 ctx.translate(50, 50); 1220 ctx.scale(2, 2); 1221 ctx.rotate(Math.PI); 1222 ctx.translate(-25, -25); 1223 1224 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 1225 ctx.fillRect(15, 15, 25, 25); 1226 1227 ctx.globalAlpha = 0.75; 1228 ctx.globalCompositeOperation = 'saturation'; 1229 ctx.shadowOffsetX = 7; 1230 ctx.shadowOffsetY = 7; 1231 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 1232 1233 ctx.beginLayer(); 1234 1235 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 1236 ctx.fillRect(10, 25, 25, 20); 1237 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 1238 ctx.fillRect(25, 10, 20, 25); 1239 1240 ctx.endLayer(); 1241 1242 const bitmap = canvas.transferToImageBitmap(); 1243 self.postMessage(bitmap, bitmap); 1244 }; 1245 </script> 1246 <script type="module"> 1247 const blob = new Blob([document.getElementById('myWorker23').textContent]); 1248 const worker = new Worker(URL.createObjectURL(blob)); 1249 worker.addEventListener('message', msg => { 1250 const outputCanvas = document.getElementById('canvas23'); 1251 const outputCtx = outputCanvas.getContext('2d'); 1252 outputCtx.drawImage(msg.data, 0, 0); 1253 if (--pending_tests == 0) { 1254 document.documentElement.classList.remove('reftest-wait'); 1255 } 1256 }); 1257 worker.postMessage(null); 1258 </script> 1259 </span> 1260 1261 <span> 1262 <div>color</div> 1263 <canvas class="grid-cell-content" id="canvas24" width="90" height="90"> 1264 <p class="fallback">FAIL (fallback content)</p> 1265 </canvas> 1266 <script id="myWorker24" type="text/worker"> 1267 self.onmessage = function(e) { 1268 const canvas = new OffscreenCanvas(90, 90); 1269 const ctx = canvas.getContext('2d'); 1270 1271 ctx.translate(50, 50); 1272 ctx.scale(2, 2); 1273 ctx.rotate(Math.PI); 1274 ctx.translate(-25, -25); 1275 1276 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 1277 ctx.fillRect(15, 15, 25, 25); 1278 1279 ctx.globalAlpha = 0.75; 1280 ctx.globalCompositeOperation = 'color'; 1281 ctx.shadowOffsetX = 7; 1282 ctx.shadowOffsetY = 7; 1283 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 1284 1285 ctx.beginLayer(); 1286 1287 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 1288 ctx.fillRect(10, 25, 25, 20); 1289 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 1290 ctx.fillRect(25, 10, 20, 25); 1291 1292 ctx.endLayer(); 1293 1294 const bitmap = canvas.transferToImageBitmap(); 1295 self.postMessage(bitmap, bitmap); 1296 }; 1297 </script> 1298 <script type="module"> 1299 const blob = new Blob([document.getElementById('myWorker24').textContent]); 1300 const worker = new Worker(URL.createObjectURL(blob)); 1301 worker.addEventListener('message', msg => { 1302 const outputCanvas = document.getElementById('canvas24'); 1303 const outputCtx = outputCanvas.getContext('2d'); 1304 outputCtx.drawImage(msg.data, 0, 0); 1305 if (--pending_tests == 0) { 1306 document.documentElement.classList.remove('reftest-wait'); 1307 } 1308 }); 1309 worker.postMessage(null); 1310 </script> 1311 </span> 1312 1313 <span> 1314 <div>luminosity</div> 1315 <canvas class="grid-cell-content" id="canvas25" width="90" height="90"> 1316 <p class="fallback">FAIL (fallback content)</p> 1317 </canvas> 1318 <script id="myWorker25" type="text/worker"> 1319 self.onmessage = function(e) { 1320 const canvas = new OffscreenCanvas(90, 90); 1321 const ctx = canvas.getContext('2d'); 1322 1323 ctx.translate(50, 50); 1324 ctx.scale(2, 2); 1325 ctx.rotate(Math.PI); 1326 ctx.translate(-25, -25); 1327 1328 ctx.fillStyle = 'rgba(0, 0, 255, 0.8)'; 1329 ctx.fillRect(15, 15, 25, 25); 1330 1331 ctx.globalAlpha = 0.75; 1332 ctx.globalCompositeOperation = 'luminosity'; 1333 ctx.shadowOffsetX = 7; 1334 ctx.shadowOffsetY = 7; 1335 ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; 1336 1337 ctx.beginLayer(); 1338 1339 ctx.fillStyle = 'rgba(204, 0, 0, 1)'; 1340 ctx.fillRect(10, 25, 25, 20); 1341 ctx.fillStyle = 'rgba(0, 204, 0, 1)'; 1342 ctx.fillRect(25, 10, 20, 25); 1343 1344 ctx.endLayer(); 1345 1346 const bitmap = canvas.transferToImageBitmap(); 1347 self.postMessage(bitmap, bitmap); 1348 }; 1349 </script> 1350 <script type="module"> 1351 const blob = new Blob([document.getElementById('myWorker25').textContent]); 1352 const worker = new Worker(URL.createObjectURL(blob)); 1353 worker.addEventListener('message', msg => { 1354 const outputCanvas = document.getElementById('canvas25'); 1355 const outputCtx = outputCanvas.getContext('2d'); 1356 outputCtx.drawImage(msg.data, 0, 0); 1357 if (--pending_tests == 0) { 1358 document.documentElement.classList.remove('reftest-wait'); 1359 } 1360 }); 1361 worker.postMessage(null); 1362 </script> 1363 </span> 1364 1365 </div> 1366 </html>