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-layout-and-paint.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 runAfterLayoutAndPaint(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>