third_party/WebKit/LayoutTests/fast/canvas/canvas-incremental-repaint.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5   <title>Canvas Incremental Repaint</title>
   6   <style type="text/css" media="screen">
   7     body { overflow: hidden; }
   8     canvas {
   9       width: 200px;
  10       height: 150px;
  11       border: 20px solid black;
  12     }
  13   </style>
  14   <script src="../../resources/run-after-layout-and-paint.js"></script>
  15   <script type="text/javascript" charset="utf-8">
  16
  17     if (window.testRunner) {
  18       testRunner.dumpAsTextWithPixelResults();
  19       testRunner.waitUntilDone();
  20     }
  21
  22     var appleImage;
  23
  24     function initializeCanvas()
  25     {
  26       var canvas = document.getElementById('canvas1');
  27       canvas.width = 170; // deliberately different from element size, for scaling
  28       canvas.height = 125;
  29
  30       // prep for clearRect test
  31       canvas = document.getElementById('canvas2');
  32       var ctx = canvas.getContext('2d');
  33       ctx.fillStyle = '#888888';
  34       ctx.fillRect(0, 0, canvas.width, canvas.height);
  35     }
  36
  37     function repaintTest()
  38     {
  39       var canvas = document.getElementById('canvas1');
  40       var ctx = canvas.getContext('2d');
  41
  42       // Test with default CTM
  43       ctx.fillStyle = 'black';
  44       ctx.strokeStyle = 'green';
  45       ctx.lineWidth = 12;
  46
  47       ctx.save();
  48       ctx.scale(1.5, 0.8);
  49       ctx.fillRect(30, 40, 70, 80);
  50       ctx.strokeRect(30, 40, 70, 80);
  51       ctx.restore();
  52
  53       // Test clearRect
  54       canvas = document.getElementById('canvas2');
  55       ctx = canvas.getContext('2d');
  56       // clearRect is affected by the transform, and does shadows
  57       ctx.shadowOffsetX = 20;
  58       ctx.shadowOffsetY = 20;
  59       ctx.shadowBlur = 40;
  60       ctx.shadowColor = '#0000AA';
  61       ctx.translate(50, 10);
  62       ctx.clearRect(10, 10, 80, 80);
  63
  64       // Test with stroke
  65       canvas = document.getElementById('canvas3');
  66       ctx = canvas.getContext('2d');
  67
  68       ctx.beginPath();
  69       ctx.moveTo(100, 20);
  70       ctx.bezierCurveTo(150, 20, 150, 120, 100, 120);
  71       ctx.bezierCurveTo(50, 120, 50, 20, 100, 20);
  72       ctx.closePath();
  73       ctx.lineWidth = 20;
  74       ctx.strokeStyle = 'black';
  75       ctx.stroke();
  76
  77       // Test with thick stroke and transform, and shadow
  78       canvas = document.getElementById('canvas4');
  79       ctx = canvas.getContext('2d');
  80       ctx.shadowOffsetX = 20;
  81       ctx.shadowOffsetY = 20;
  82       ctx.shadowBlur = 40;
  83       ctx.shadowColor = 'blue'
  84       ctx.lineWidth = 50;
  85       ctx.rotate(Math.PI / 5);
  86       ctx.scale(1.2, 1.2);
  87       ctx.strokeRect(100, 0, 1, 1);
  88
  89       // Mitre test
  90       canvas = document.getElementById('canvas5');
  91       ctx = canvas.getContext('2d');
  92       ctx.moveTo(15, 40);
  93       ctx.lineTo(190, 60);
  94       ctx.lineTo(15, 80);
  95
  96       ctx.lineWidth = 20;
  97       ctx.strokeStyle = '#222222';
  98       ctx.stroke();
  99
 100       // Text test
 101       canvas = document.getElementById('canvas6');
 102       ctx = canvas.getContext('2d');
 103       ctx.font = "80px 'Times New Roman'";
 104       ctx.lineWidth = 40;
 105       ctx.scale(1, 0.9);
 106       ctx.strokeStyle = 'black';
 107       ctx.strokeText("WebKit", 20, 100);
 108       ctx.fillStyle = 'green';
 109       ctx.fillText("WebKit", 20, 100);
 110
 111       // drawImage test
 112       canvas = document.getElementById('canvas7');
 113       ctx = canvas.getContext('2d');
 114       ctx.shadowOffsetX = 20;
 115       ctx.shadowOffsetY = 20;
 116       ctx.shadowBlur = 40;
 117       ctx.shadowColor = 'blue';
 118       ctx.translate(60, 0);
 119       ctx.drawImage(appleImage, 10, 10, 100, 100);
 120
 121       // clip test
 122       canvas = document.getElementById('canvas8');
 123       ctx = canvas.getContext('2d');
 124       ctx.shadowOffsetX = 20;
 125       ctx.shadowOffsetY = 20;
 126       ctx.shadowBlur = 40;
 127       ctx.shadowColor = 'blue';
 128
 129       ctx.beginPath();
 130       ctx.rect(50, 30, 80, 80);
 131       ctx.closePath();
 132       ctx.clip();
 133
 134       ctx.translate(40, 0);
 135       ctx.drawImage(appleImage, 10, 10, 100, 100);
 136
 137       // ImageData test
 138       canvas = document.getElementById('canvas9');
 139       ctx = canvas.getContext('2d');
 140       ctx.drawImage(appleImage, 10, 10, 100, 100);
 141
 142       var imageData = ctx.getImageData(15, 15, 90, 90);
 143
 144       // putImageData ignores shadow, transform and clip, but set the to test
 145       ctx.shadowOffsetX = 20;
 146       ctx.shadowOffsetY = 20;
 147       ctx.shadowBlur = 40;
 148       ctx.translate(160, 50);
 149       ctx.beginPath();
 150       ctx.rect(50, 30, 80, 80);
 151       ctx.closePath();
 152       ctx.clip();
 153
 154       ctx.putImageData(imageData, 150, 20);
 155
 156       if (window.testRunner)
 157         testRunner.notifyDone();
 158     }
 159
 160     function pageLoaded()
 161     {
 162       initializeCanvas();
 163
 164       appleImage = new Image();
 165       appleImage.onload = function() {
 166         runAfterLayoutAndPaint(repaintTest);
 167       }
 168       appleImage.src = "resources/apple.gif";
 169     }
 170   </script>
 171 </head>
 172 <body onload="pageLoaded()">
 173
 174 <canvas id="canvas1"></canvas>
 175 <canvas id="canvas2"></canvas>
 176 <canvas id="canvas3"></canvas><br>
 177 <canvas id="canvas4"></canvas>
 178 <canvas id="canvas5"></canvas>
 179 <canvas id="canvas6"></canvas><br>
 180 <canvas id="canvas7"></canvas>
 181 <canvas id="canvas8"></canvas>
 182 <canvas id="canvas9"></canvas>
 183
 184 </body>
 185 </html>