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; }
11 border: 20px solid black;
14 <script src="../../resources/run-after-display.js"></script>
15 <script type="text/javascript" charset="utf-8">
17 if (window.testRunner) {
18 testRunner.dumpAsTextWithPixelResults();
19 testRunner.waitUntilDone();
24 function initializeCanvas()
26 var canvas = document.getElementById('canvas1');
27 canvas.width = 170; // deliberately different from element size, for scaling
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);
37 function repaintTest()
39 var canvas = document.getElementById('canvas1');
40 var ctx = canvas.getContext('2d');
42 // Test with default CTM
43 ctx.fillStyle = 'black';
44 ctx.strokeStyle = 'green';
49 ctx.fillRect(30, 40, 70, 80);
50 ctx.strokeRect(30, 40, 70, 80);
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;
60 ctx.shadowColor = '#0000AA';
61 ctx.translate(50, 10);
62 ctx.clearRect(10, 10, 80, 80);
65 canvas = document.getElementById('canvas3');
66 ctx = canvas.getContext('2d');
70 ctx.bezierCurveTo(150, 20, 150, 120, 100, 120);
71 ctx.bezierCurveTo(50, 120, 50, 20, 100, 20);
74 ctx.strokeStyle = 'black';
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;
83 ctx.shadowColor = 'blue'
85 ctx.rotate(Math.PI / 5);
87 ctx.strokeRect(100, 0, 1, 1);
90 canvas = document.getElementById('canvas5');
91 ctx = canvas.getContext('2d');
97 ctx.strokeStyle = '#222222';
101 canvas = document.getElementById('canvas6');
102 ctx = canvas.getContext('2d');
103 ctx.font = "80px 'Times New Roman'";
106 ctx.strokeStyle = 'black';
107 ctx.strokeText("WebKit", 20, 100);
108 ctx.fillStyle = 'green';
109 ctx.fillText("WebKit", 20, 100);
112 canvas = document.getElementById('canvas7');
113 ctx = canvas.getContext('2d');
114 ctx.shadowOffsetX = 20;
115 ctx.shadowOffsetY = 20;
117 ctx.shadowColor = 'blue';
118 ctx.translate(60, 0);
119 ctx.drawImage(appleImage, 10, 10, 100, 100);
122 canvas = document.getElementById('canvas8');
123 ctx = canvas.getContext('2d');
124 ctx.shadowOffsetX = 20;
125 ctx.shadowOffsetY = 20;
127 ctx.shadowColor = 'blue';
130 ctx.rect(50, 30, 80, 80);
134 ctx.translate(40, 0);
135 ctx.drawImage(appleImage, 10, 10, 100, 100);
138 canvas = document.getElementById('canvas9');
139 ctx = canvas.getContext('2d');
140 ctx.drawImage(appleImage, 10, 10, 100, 100);
142 var imageData = ctx.getImageData(15, 15, 90, 90);
144 // putImageData ignores shadow, transform and clip, but set the to test
145 ctx.shadowOffsetX = 20;
146 ctx.shadowOffsetY = 20;
148 ctx.translate(160, 50);
150 ctx.rect(50, 30, 80, 80);
154 ctx.putImageData(imageData, 150, 20);
156 if (window.testRunner)
157 testRunner.notifyDone();
160 function pageLoaded()
164 appleImage = new Image();
165 appleImage.onload = function() {
166 runAfterDisplay(repaintTest);
168 appleImage.src = "resources/apple.gif";
172 <body onload="pageLoaded()">
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>