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