| OLD | NEW | 
|---|
| 1 <html> | 1 <html> | 
| 2 <body> | 2 <body> | 
| 3 <canvas id="c1" width="250" height="250"></canvas> | 3 <canvas id="c1" width="250" height="250"></canvas> | 
| 4 <canvas id="c2" width="250" height="250"></canvas> | 4 <canvas id="c2" width="250" height="250"></canvas> | 
| 5 <br> | 5 <br> | 
| 6 <canvas id="c3" width="250" height="250"></canvas> | 6 <canvas id="c3" width="250" height="250"></canvas> | 
| 7 <canvas id="c4" width="250" height="250"></canvas> | 7 <canvas id="c4" width="250" height="250"></canvas> | 
| 8 <script type="text/javascript"> | 8 <script type="text/javascript"> | 
| 9 var canvas1 = document.getElementById('c1'); | 9 var canvas1 = document.getElementById('c1'); | 
| 10 var canvas2 = document.getElementById('c2'); | 10 var canvas2 = document.getElementById('c2'); | 
| 11 var canvas3 = document.getElementById('c3'); | 11 var canvas3 = document.getElementById('c3'); | 
| 12 var canvas4 = document.getElementById('c4'); | 12 var canvas4 = document.getElementById('c4'); | 
| 13 var bgcanvas = document.createElement('canvas'); | 13 var bgcanvas = document.createElement('canvas'); | 
| 14 bgcanvas.width = 100; | 14 bgcanvas.width = 100; | 
| 15 bgcanvas.height = 100; | 15 bgcanvas.height = 100; | 
| 16 var bgctx = bgcanvas.getContext('2d'); | 16 var bgctx = bgcanvas.getContext('2d'); | 
| 17 bgctx.fillStyle = 'green'; | 17 bgctx.fillStyle = 'green'; | 
| 18 bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height); | 18 bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height); | 
| 19 var greenSquareURL = bgcanvas.toDataURL(); | 19 var greenSquareURL = bgcanvas.toDataURL(); | 
| 20 var img = new Image(); | 20 var img = new Image(); | 
|  | 21 img.onload = imgLoaded; | 
| 21 img.src = greenSquareURL; | 22 img.src = greenSquareURL; | 
| 22 var ctx1 = canvas1.getContext('2d'); | 23 var ctx1 = canvas1.getContext('2d'); | 
| 23 var ctx2 = canvas2.getContext('2d'); | 24 var ctx2 = canvas2.getContext('2d'); | 
| 24 var ctx3 = canvas3.getContext('2d'); | 25 var ctx3 = canvas3.getContext('2d'); | 
| 25 var ctx4 = canvas4.getContext('2d'); | 26 var ctx4 = canvas4.getContext('2d'); | 
| 26 video = document.createElement("video"); | 27 video = document.createElement("video"); | 
| 27 video.poster = greenSquareURL; | 28 video.poster = greenSquareURL; | 
| 28 | 29 | 
| 29 ctx1.drawImage(bgcanvas, -100, -100, 300, 300, -25, -25, 300, 300); | 30 ctx1.drawImage(bgcanvas, -100, -100, 300, 300, -25, -25, 300, 300); | 
| 30 ctx1.drawImage(bgcanvas, -100, -100, 200, 200, -25, -25, 100, 100); | 31 ctx1.drawImage(bgcanvas, -100, -100, 200, 200, -25, -25, 100, 100); | 
| 31 ctx1.drawImage(bgcanvas, 0,    -100, 100, 200, 75,  -25, 100, 100); | 32 ctx1.drawImage(bgcanvas, 0,    -100, 100, 200, 75,  -25, 100, 100); | 
| 32 ctx1.drawImage(bgcanvas, 0,    -100, 200, 200, 175, -25, 100, 100); | 33 ctx1.drawImage(bgcanvas, 0,    -100, 200, 200, 175, -25, 100, 100); | 
| 33 ctx1.drawImage(bgcanvas, -100, 0,    200, 100, -25, 75,  100, 100); | 34 ctx1.drawImage(bgcanvas, -100, 0,    200, 100, -25, 75,  100, 100); | 
| 34 ctx1.drawImage(bgcanvas, 0,  0,      200, 100, 175, 75,  100, 100); | 35 ctx1.drawImage(bgcanvas, 0,  0,      200, 100, 175, 75,  100, 100); | 
| 35 ctx1.drawImage(bgcanvas, -100, 0,    200, 200, -25, 175, 100, 100); | 36 ctx1.drawImage(bgcanvas, -100, 0,    200, 200, -25, 175, 100, 100); | 
| 36 ctx1.drawImage(bgcanvas, 0,    0,    100, 200, 75,  175, 100, 100); | 37 ctx1.drawImage(bgcanvas, 0,    0,    100, 200, 75,  175, 100, 100); | 
| 37 ctx1.drawImage(bgcanvas, 0,    0,    200, 200, 175, 175, 100, 100); | 38 ctx1.drawImage(bgcanvas, 0,    0,    200, 200, 175, 175, 100, 100); | 
| 38 | 39 | 
| 39 ctx2.drawImage(img, -100, -100, 300, 300, -25, -25, 300, 300); | 40 function imgLoaded() { | 
| 40 ctx2.drawImage(img, -100, -100, 200, 200, -25, -25, 100, 100); | 41     ctx2.drawImage(img, -100, -100, 300, 300, -25, -25, 300, 300); | 
| 41 ctx2.drawImage(img, 0,    -100, 100, 200, 75,  -25, 100, 100); | 42     ctx2.drawImage(img, -100, -100, 200, 200, -25, -25, 100, 100); | 
| 42 ctx2.drawImage(img, 0,    -100, 200, 200, 175, -25, 100, 100); | 43     ctx2.drawImage(img, 0,    -100, 100, 200, 75,  -25, 100, 100); | 
| 43 ctx2.drawImage(img, -100, 0,    200, 100, -25, 75,  100, 100); | 44     ctx2.drawImage(img, 0,    -100, 200, 200, 175, -25, 100, 100); | 
| 44 ctx2.drawImage(img, 0,  0,      200, 100, 175, 75,  100, 100); | 45     ctx2.drawImage(img, -100, 0,    200, 100, -25, 75,  100, 100); | 
| 45 ctx2.drawImage(img, -100, 0,    200, 200, -25, 175, 100, 100); | 46     ctx2.drawImage(img, 0,  0,      200, 100, 175, 75,  100, 100); | 
| 46 ctx2.drawImage(img, 0,    0,    100, 200, 75,  175, 100, 100); | 47     ctx2.drawImage(img, -100, 0,    200, 200, -25, 175, 100, 100); | 
| 47 ctx2.drawImage(img, 0,    0,    200, 200, 175, 175, 100, 100); | 48     ctx2.drawImage(img, 0,    0,    100, 200, 75,  175, 100, 100); | 
|  | 49     ctx2.drawImage(img, 0,    0,    200, 200, 175, 175, 100, 100); | 
|  | 50 } | 
| 48 | 51 | 
| 49 if (window.testRunner) { | 52 if (window.testRunner) { | 
| 50     testRunner.waitUntilDone(); | 53     testRunner.waitUntilDone(); | 
| 51 } | 54 } | 
| 52 | 55 | 
| 53 var video = document.createElement("video"); | 56 var video = document.createElement("video"); | 
| 54 video.autoplay = false; | 57 video.autoplay = false; | 
| 55 video.addEventListener("canplaythrough", videoLoaded, false); | 58 video.addEventListener("canplaythrough", videoLoaded, false); | 
| 56 video.src = "resources/green.ogv"; | 59 video.src = "resources/green.ogv"; | 
| 57 | 60 | 
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 90     ctx4.drawImage(imageBitmap, -100, 0,    200, 200, -25, 175, 100, 100); | 93     ctx4.drawImage(imageBitmap, -100, 0,    200, 200, -25, 175, 100, 100); | 
| 91     ctx4.drawImage(imageBitmap, 0,    0,    100, 200, 75,  175, 100, 100); | 94     ctx4.drawImage(imageBitmap, 0,    0,    100, 200, 75,  175, 100, 100); | 
| 92     ctx4.drawImage(imageBitmap, 0,    0,    200, 200, 175, 175, 100, 100); | 95     ctx4.drawImage(imageBitmap, 0,    0,    200, 200, 175, 175, 100, 100); | 
| 93     if (window.testRunner) { | 96     if (window.testRunner) { | 
| 94         testRunner.notifyDone(); | 97         testRunner.notifyDone(); | 
| 95     } | 98     } | 
| 96 } | 99 } | 
| 97 | 100 | 
| 98 </script> | 101 </script> | 
| 99 </body></html> | 102 </body></html> | 
| OLD | NEW | 
|---|