| <html> |
| <body> |
| <canvas id="c1" width="250" height="250"></canvas> |
| <canvas id="c2" width="250" height="250"></canvas> |
| <br> |
| <canvas id="c3" width="250" height="250"></canvas> |
| <canvas id="c4" width="250" height="250"></canvas> |
| <script type="text/javascript"> |
| var canvas1 = document.getElementById('c1'); |
| var canvas2 = document.getElementById('c2'); |
| var canvas3 = document.getElementById('c3'); |
| var canvas4 = document.getElementById('c4'); |
| var bgcanvas = document.createElement('canvas'); |
| bgcanvas.width = 100; |
| bgcanvas.height = 100; |
| var bgctx = bgcanvas.getContext('2d'); |
| bgctx.fillStyle = 'green'; |
| bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height); |
| var greenSquareURL = bgcanvas.toDataURL(); |
| var img = new Image(); |
| img.src = greenSquareURL; |
| var ctx1 = canvas1.getContext('2d'); |
| var ctx2 = canvas2.getContext('2d'); |
| var ctx3 = canvas3.getContext('2d'); |
| var ctx4 = canvas4.getContext('2d'); |
| video = document.createElement("video"); |
| video.poster = greenSquareURL; |
| |
| ctx1.drawImage(bgcanvas, -100, -100, 300, 300, -25, -25, 300, 300); |
| ctx1.drawImage(bgcanvas, -100, -100, 200, 200, -25, -25, 100, 100); |
| ctx1.drawImage(bgcanvas, 0, -100, 100, 200, 75, -25, 100, 100); |
| ctx1.drawImage(bgcanvas, 0, -100, 200, 200, 175, -25, 100, 100); |
| ctx1.drawImage(bgcanvas, -100, 0, 200, 100, -25, 75, 100, 100); |
| ctx1.drawImage(bgcanvas, 0, 0, 200, 100, 175, 75, 100, 100); |
| ctx1.drawImage(bgcanvas, -100, 0, 200, 200, -25, 175, 100, 100); |
| ctx1.drawImage(bgcanvas, 0, 0, 100, 200, 75, 175, 100, 100); |
| ctx1.drawImage(bgcanvas, 0, 0, 200, 200, 175, 175, 100, 100); |
| |
| ctx2.drawImage(img, -100, -100, 300, 300, -25, -25, 300, 300); |
| ctx2.drawImage(img, -100, -100, 200, 200, -25, -25, 100, 100); |
| ctx2.drawImage(img, 0, -100, 100, 200, 75, -25, 100, 100); |
| ctx2.drawImage(img, 0, -100, 200, 200, 175, -25, 100, 100); |
| ctx2.drawImage(img, -100, 0, 200, 100, -25, 75, 100, 100); |
| ctx2.drawImage(img, 0, 0, 200, 100, 175, 75, 100, 100); |
| ctx2.drawImage(img, -100, 0, 200, 200, -25, 175, 100, 100); |
| ctx2.drawImage(img, 0, 0, 100, 200, 75, 175, 100, 100); |
| ctx2.drawImage(img, 0, 0, 200, 200, 175, 175, 100, 100); |
| |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| } |
| |
| var video = document.createElement("video"); |
| video.autoplay = false; |
| video.addEventListener("canplaythrough", videoLoaded, false); |
| video.src = "resources/green.ogv"; |
| |
| function videoLoaded() { |
| var w = video.videoWidth; |
| var h = video.videoHeight; |
| ctx3.drawImage(video, -w, -h, 3*w, 3*h, -25, -25, 300, 300); |
| ctx3.drawImage(video, -w, -h, 2*w, 2*h, -25, -25, 100, 100); |
| ctx3.drawImage(video, 0, -h, w, 2*h, 75, -25, 100, 100); |
| ctx3.drawImage(video, 0, -h, 2*w, 2*h, 175, -25, 100, 100); |
| ctx3.drawImage(video, -w, 0, 2*w, h, -25, 75, 100, 100); |
| ctx3.drawImage(video, 0, 0, 2*w, h, 175, 75, 100, 100); |
| ctx3.drawImage(video, -w, 0, 2*w, 2*h, -25, 175, 100, 100); |
| ctx3.drawImage(video, 0, 0, w, 2*h, 75, 175, 100, 100); |
| ctx3.drawImage(video, 0, 0, 2*w, 2*h, 175, 175, 100, 100); |
| |
| if (window.createImageBitmap) { |
| window.createImageBitmap(img).then(imageReady, function() { |
| testFailed("Promise was rejected."); |
| finishJSTest(); |
| }); |
| } else { |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| } |
| |
| function imageReady(imageBitmap) { |
| ctx4.drawImage(imageBitmap, -100, -100, 300, 300, -25, -25, 300, 300); |
| ctx4.drawImage(imageBitmap, -100, -100, 200, 200, -25, -25, 100, 100); |
| ctx4.drawImage(imageBitmap, 0, -100, 100, 200, 75, -25, 100, 100); |
| ctx4.drawImage(imageBitmap, 0, -100, 200, 200, 175, -25, 100, 100); |
| ctx4.drawImage(imageBitmap, -100, 0, 200, 100, -25, 75, 100, 100); |
| ctx4.drawImage(imageBitmap, 0, 0, 200, 100, 175, 75, 100, 100); |
| ctx4.drawImage(imageBitmap, -100, 0, 200, 200, -25, 175, 100, 100); |
| ctx4.drawImage(imageBitmap, 0, 0, 100, 200, 75, 175, 100, 100); |
| ctx4.drawImage(imageBitmap, 0, 0, 200, 200, 175, 175, 100, 100); |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| |
| </script> |
| </body></html> |
