| <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 ctx1 = document.getElementById('c1').getContext('2d'); |
| var ctx2 = document.getElementById('c2').getContext('2d'); |
| var ctx3 = document.getElementById('c3').getContext('2d'); |
| var ctx4 = document.getElementById('c4').getContext('2d'); |
| ctx1.fillStyle = 'green'; |
| ctx2.fillStyle = 'green'; |
| ctx3.fillStyle = 'green'; |
| ctx4.fillStyle = 'green'; |
| ctx1.fillRect(25, 25, 200, 200); |
| ctx2.fillRect(25, 25, 200, 200); |
| if (window.createImageBitmap) { |
| ctx4.fillRect(25, 25, 200, 200); |
| } |
| |
| 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, 0, 0, w, h, 75, 75, 100, 100); |
| ctx3.drawImage(video, 0, 0, w, h, 25, 25, 50, 50); |
| ctx3.drawImage(video, 0, 0, w, h, 75, 25, 100, 50); |
| ctx3.drawImage(video, 0, 0, w, h, 175, 25, 50, 50); |
| ctx3.drawImage(video, 0, 0, w, h, 25, 75, 50, 100); |
| ctx3.drawImage(video, 0, 0, w, h, 175, 75, 50, 100); |
| ctx3.drawImage(video, 0, 0, w, h, 25, 175, 50, 50); |
| ctx3.drawImage(video, 0, 0, w, h, 75, 175, 100, 50); |
| ctx3.drawImage(video, 0, 0, w, h, 175, 175, 50, 50); |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| |
| </script> |
| </body></html> |
