third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-out-of-bounds-src-expected.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
  20 var bgcanvasLowerRight = document.createElement('canvas');
  21 bgcanvasLowerRight.width = 100;
  22 bgcanvasLowerRight.height = 100;
  23 var bgctxLowerRight = bgcanvasLowerRight.getContext('2d');
  24 bgctxLowerRight.fillStyle = 'green';
  25 bgctxLowerRight.fillRect(bgcanvasLowerRight.width/2, bgcanvasLowerRight.height/2, bgcanvasLowerRight.width/2, bgcanvasLowerRight.height/2);
  26
  27 var bgcanvasUpperLeft = document.createElement('canvas');
  28 bgcanvasUpperLeft.width = 100;
  29 bgcanvasUpperLeft.height = 100;
  30 var bgctxUpperLeft = bgcanvasUpperLeft.getContext('2d');
  31 bgctxUpperLeft.fillStyle = 'green';
  32 bgctxUpperLeft.fillRect(0, 0, bgcanvasUpperLeft.width/2, bgcanvasUpperLeft.height/2);
  33
  34 var bgcanvasCenter = document.createElement('canvas');
  35 bgcanvasCenter.width = 300;
  36 bgcanvasCenter.height = 300;
  37 var bgctxCenter = bgcanvasCenter.getContext('2d');
  38 bgctxCenter.fillStyle = 'green';
  39 bgctxCenter.fillRect(100, 100, 100, 100);
  40
  41 var ctx1 = canvas1.getContext('2d');
  42 var ctx2 = canvas2.getContext('2d');
  43 var ctx3 = canvas3.getContext('2d');
  44 var ctx4 = canvas4.getContext('2d');
  45
  46 var srcCanvases = [bgcanvas, bgcanvasLowerRight, bgcanvasUpperLeft, bgcanvasCenter];
  47 var dstCtxs = [ctx1, ctx2, ctx3, ctx4];
  48
  49 for (var i = 0; i < dstCtxs.length; ++i) {
  50     var srcCanvas = srcCanvases[i];
  51     var ctx = dstCtxs[i];
  52     ctx.drawImage(srcCanvas, -100, -100, 300, 300, -25, -25, 300, 300);
  53     ctx.drawImage(srcCanvas, -100, -100, 200, 200, -25, -25, 100, 100);
  54     ctx.drawImage(srcCanvas,    0, -100, 100, 200,  75, -25, 100, 100);
  55     ctx.drawImage(srcCanvas,    0, -100, 200, 200, 175, -25, 100, 100);
  56     ctx.drawImage(srcCanvas, -100,    0, 200, 100, -25,  75, 100, 100);
  57     ctx.drawImage(srcCanvas,    0,    0, 200, 100, 175, 75,  100, 100);
  58     ctx.drawImage(srcCanvas, -100,    0, 200, 200, -25, 175, 100, 100);
  59     ctx.drawImage(srcCanvas,    0,    0, 100, 200, 75,  175, 100, 100);
  60     ctx.drawImage(srcCanvas,    0,    0, 200, 200, 175, 175, 100, 100);
  61 }
  62
  63 </script>
  64 </body></html>