third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-out-of-bounds-src.html

   1 <html>
   2 <body>
   3 <canvas id="c1" width="250" height="250"></canvas>
   4 <canvas id="c2" width="250" height="250"></canvas>
   5 <br>
   6 <canvas id="c3" width="250" height="250"></canvas>
   7 <canvas id="c4" width="250" height="250"></canvas>
   8 <script type="text/javascript">
   9 var canvas1 = document.getElementById('c1');
  10 var canvas2 = document.getElementById('c2');
  11 var canvas3 = document.getElementById('c3');
  12 var canvas4 = document.getElementById('c4');
  13 var bgcanvas = document.createElement('canvas');
  14 bgcanvas.width = 100;
  15 bgcanvas.height = 100;
  16 var bgctx = bgcanvas.getContext('2d');
  17 bgctx.fillStyle = 'green';
  18 bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height);
  19 var greenSquareURL = bgcanvas.toDataURL();
  20 var img = new Image();
  21 img.src = greenSquareURL;
  22 var ctx1 = canvas1.getContext('2d');
  23 var ctx2 = canvas2.getContext('2d');
  24 var ctx3 = canvas3.getContext('2d');
  25 var ctx4 = canvas4.getContext('2d');
  26 video = document.createElement("video");
  27 video.poster = greenSquareURL;
  28
  29 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, 0,    -100, 100, 200, 75,  -25, 100, 100);
  32 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, 0,  0,      200, 100, 175, 75,  100, 100);
  35 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,    200, 200, 175, 175, 100, 100);
  38
  39 ctx2.drawImage(img, -100, -100, 300, 300, -25, -25, 300, 300);
  40 ctx2.drawImage(img, -100, -100, 200, 200, -25, -25, 100, 100);
  41 ctx2.drawImage(img, 0,    -100, 100, 200, 75,  -25, 100, 100);
  42 ctx2.drawImage(img, 0,    -100, 200, 200, 175, -25, 100, 100);
  43 ctx2.drawImage(img, -100, 0,    200, 100, -25, 75,  100, 100);
  44 ctx2.drawImage(img, 0,  0,      200, 100, 175, 75,  100, 100);
  45 ctx2.drawImage(img, -100, 0,    200, 200, -25, 175, 100, 100);
  46 ctx2.drawImage(img, 0,    0,    100, 200, 75,  175, 100, 100);
  47 ctx2.drawImage(img, 0,    0,    200, 200, 175, 175, 100, 100);
  48
  49 if (window.testRunner) {
  50     testRunner.waitUntilDone();
  51 }
  52
  53 var video = document.createElement("video");
  54 video.autoplay = false;
  55 video.addEventListener("canplaythrough", videoLoaded, false);
  56 video.src = "resources/green.ogv";
  57
  58 function videoLoaded() {
  59     var w = video.videoWidth;
  60     var h = video.videoHeight;
  61     ctx3.drawImage(video, -w, -h, 3*w, 3*h, -25, -25, 300, 300);
  62     ctx3.drawImage(video, -w, -h, 2*w, 2*h, -25, -25, 100, 100);
  63     ctx3.drawImage(video, 0,  -h, w,   2*h, 75,  -25, 100, 100);
  64     ctx3.drawImage(video, 0,  -h, 2*w, 2*h, 175, -25, 100, 100);
  65     ctx3.drawImage(video, -w, 0,  2*w, h,   -25, 75,  100, 100);
  66     ctx3.drawImage(video, 0,  0,  2*w, h,   175, 75,  100, 100);
  67     ctx3.drawImage(video, -w, 0,  2*w, 2*h, -25, 175, 100, 100);
  68     ctx3.drawImage(video, 0,  0,  w,   2*h, 75,  175, 100, 100);
  69     ctx3.drawImage(video, 0,  0,  2*w, 2*h, 175, 175, 100, 100);
  70
  71     if (window.createImageBitmap) {
  72         window.createImageBitmap(img).then(imageReady, function() {
  73             testFailed("Promise was rejected.");
  74             finishJSTest();
  75         });
  76     } else {
  77         if (window.testRunner) {
  78             testRunner.notifyDone();
  79         }
  80     }
  81 }
  82
  83 function imageReady(imageBitmap) {
  84     ctx4.drawImage(imageBitmap, -100, -100, 300, 300, -25, -25, 300, 300);
  85     ctx4.drawImage(imageBitmap, -100, -100, 200, 200, -25, -25, 100, 100);
  86     ctx4.drawImage(imageBitmap, 0,    -100, 100, 200, 75,  -25, 100, 100);
  87     ctx4.drawImage(imageBitmap, 0,    -100, 200, 200, 175, -25, 100, 100);
  88     ctx4.drawImage(imageBitmap, -100, 0,    200, 100, -25, 75,  100, 100);
  89     ctx4.drawImage(imageBitmap, 0,  0,      200, 100, 175, 75,  100, 100);
  90     ctx4.drawImage(imageBitmap, -100, 0,    200, 200, -25, 175, 100, 100);
  91     ctx4.drawImage(imageBitmap, 0,    0,    100, 200, 75,  175, 100, 100);
  92     ctx4.drawImage(imageBitmap, 0,    0,    200, 200, 175, 175, 100, 100);
  93     if (window.testRunner) {
  94         testRunner.notifyDone();
  95     }
  96 }
  97
  98 </script>
  99 </body></html>