OLD | NEW |
| (Empty) |
1 description("Ensure correct behavior of canvas with drawImage+shadow after scali
ng. A blue and red checkered pattern should be displayed."); | |
2 | |
3 function print(message, color) | |
4 { | |
5 var paragraph = document.createElement("div"); | |
6 paragraph.appendChild(document.createTextNode(message)); | |
7 paragraph.style.fontFamily = "monospace"; | |
8 if (color) | |
9 paragraph.style.color = color; | |
10 document.getElementById("console").appendChild(paragraph); | |
11 } | |
12 | |
13 function shouldBeAround(a, b) | |
14 { | |
15 var evalA; | |
16 try { | |
17 evalA = eval(a); | |
18 } catch(e) { | |
19 evalA = e; | |
20 } | |
21 | |
22 if (Math.abs(evalA - b) < 10) | |
23 print("PASS " + a + " is around " + b , "green") | |
24 else | |
25 print("FAIL " + a + " is not around " + b + " (actual: " + evalA + ")",
"red"); | |
26 } | |
27 | |
28 // Create auxiliary canvas to draw to and create an image from. | |
29 // This is done instead of simply loading an image from the file system | |
30 // because that would throw a SECURITY_ERR DOM Exception. | |
31 var aCanvas = document.createElement('canvas'); | |
32 aCanvas.width = 10; | |
33 aCanvas.height = 10; | |
34 aCanvas.setAttribute('height', '10'); | |
35 var aCtx = aCanvas.getContext('2d'); | |
36 aCtx.fillStyle = 'rgba(0, 0, 255, 1)'; | |
37 aCtx.fillRect(0, 0, 50, 50); | |
38 | |
39 // Create the image object to be drawn on the master canvas. | |
40 var img = new Image(); | |
41 img.onload = drawImageToCanvasAndCheckPixels; | |
42 img.src = aCanvas.toDataURL(); // set a data URI of the base64 encoded image as
the source | |
43 | |
44 aCanvas.width = 10; | |
45 aCtx.fillStyle = 'rgba(0, 0, 255, 0.5)'; | |
46 aCtx.fillRect(0, 0, 50, 50); | |
47 // Create the image object to be drawn on the master canvas. | |
48 var transparentImg = new Image(); | |
49 transparentImg.onload = drawImageToCanvasAndCheckPixels; | |
50 transparentImg.src = aCanvas.toDataURL(); // set a data URI of the base64 encode
d image as the source | |
51 | |
52 // Create master canvas. | |
53 var canvas = document.createElement('canvas'); | |
54 document.body.appendChild(canvas); | |
55 canvas.setAttribute('width', '150'); | |
56 canvas.setAttribute('height', '110'); | |
57 var ctx = canvas.getContext('2d'); | |
58 | |
59 var imagesLoaded = 0; | |
60 | |
61 function drawImageToCanvasAndCheckPixels() { | |
62 imagesLoaded = imagesLoaded + 1; | |
63 if (imagesLoaded == 2) { | |
64 ctx.scale(2, 2); | |
65 ctx.shadowOffsetX = 20; | |
66 ctx.shadowOffsetY = 20; | |
67 ctx.fillStyle = 'rgba(0, 0, 255, 1)'; | |
68 | |
69 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)'; | |
70 ctx.drawImage(img, 10, 10); | |
71 | |
72 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)'; | |
73 ctx.drawImage(img, 10, 30); | |
74 | |
75 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)'; | |
76 ctx.shadowBlur = 10; | |
77 ctx.drawImage(img, 30, 10); | |
78 | |
79 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)'; | |
80 ctx.drawImage(img, 30, 30); | |
81 | |
82 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)'; | |
83 ctx.drawImage(transparentImg, 50, 10); | |
84 | |
85 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)'; | |
86 ctx.drawImage(transparentImg, 50, 30); | |
87 | |
88 checkPixels(); | |
89 } | |
90 } | |
91 | |
92 var d; // imageData.data | |
93 | |
94 function checkPixels() { | |
95 | |
96 // Verify solid shadow. | |
97 d = ctx.getImageData(40, 40, 1, 1).data; | |
98 shouldBe('d[0]', '255'); | |
99 shouldBe('d[1]', '0'); | |
100 shouldBe('d[2]', '0'); | |
101 shouldBe('d[3]', '255'); | |
102 | |
103 d = ctx.getImageData(59, 59, 1, 1).data; | |
104 shouldBe('d[0]', '255'); | |
105 shouldBe('d[1]', '0'); | |
106 shouldBe('d[2]', '0'); | |
107 shouldBe('d[3]', '255'); | |
108 | |
109 // Verify solid alpha shadow. | |
110 d = ctx.getImageData(41, 81, 1, 1).data; | |
111 shouldBe('d[0]', '255'); | |
112 shouldBe('d[1]', '0'); | |
113 shouldBe('d[2]', '0'); | |
114 shouldBeAround('d[3]', '76'); | |
115 | |
116 d = ctx.getImageData(59, 99, 1, 1).data; | |
117 shouldBe('d[0]', '255'); | |
118 shouldBe('d[1]', '0'); | |
119 shouldBe('d[2]', '0'); | |
120 shouldBeAround('d[3]', '76'); | |
121 | |
122 // Verify blurry shadow. | |
123 d = ctx.getImageData(90, 39, 1, 1).data; | |
124 shouldBe('d[0]', '255'); | |
125 shouldBe('d[1]', '0'); | |
126 shouldBe('d[2]', '0'); | |
127 shouldBeAround('d[3]', '114'); | |
128 | |
129 d = ctx.getImageData(90, 60, 1, 1).data; | |
130 shouldBe('d[0]', '255'); | |
131 shouldBe('d[1]', '0'); | |
132 shouldBe('d[2]', '0'); | |
133 shouldBeAround('d[3]', '114'); | |
134 | |
135 d = ctx.getImageData(79, 50, 1, 1).data; | |
136 shouldBe('d[0]', '255'); | |
137 shouldBe('d[1]', '0'); | |
138 shouldBe('d[2]', '0'); | |
139 shouldBeAround('d[3]', '114'); | |
140 | |
141 d = ctx.getImageData(100, 50, 1, 1).data; | |
142 shouldBe('d[0]', '255'); | |
143 shouldBe('d[1]', '0'); | |
144 shouldBe('d[2]', '0'); | |
145 shouldBeAround('d[3]', '114'); | |
146 | |
147 // Verify blurry alpha shadow. | |
148 d = ctx.getImageData(90, 79, 1, 1).data; | |
149 shouldBe('d[0]', '255'); | |
150 shouldBe('d[1]', '0'); | |
151 shouldBe('d[2]', '0'); | |
152 shouldBeAround('d[3]', '34'); | |
153 | |
154 d = ctx.getImageData(90, 100, 1, 1).data; | |
155 shouldBe('d[0]', '255'); | |
156 shouldBe('d[1]', '0'); | |
157 shouldBe('d[2]', '0'); | |
158 shouldBeAround('d[3]', '34'); | |
159 | |
160 d = ctx.getImageData(79, 90, 1, 1).data; | |
161 shouldBe('d[0]', '255'); | |
162 shouldBe('d[1]', '0'); | |
163 shouldBe('d[2]', '0'); | |
164 shouldBeAround('d[3]', '34'); | |
165 | |
166 d = ctx.getImageData(100, 90, 1, 1).data; | |
167 shouldBe('d[0]', '255'); | |
168 shouldBe('d[1]', '0'); | |
169 shouldBe('d[2]', '0'); | |
170 shouldBeAround('d[3]', '34'); | |
171 | |
172 // Verify blurry shadow of image with alpha | |
173 d = ctx.getImageData(130, 39, 1, 1).data; | |
174 shouldBe('d[0]', '255'); | |
175 shouldBe('d[1]', '0'); | |
176 shouldBe('d[2]', '0'); | |
177 shouldBeAround('d[3]', '57'); | |
178 | |
179 d = ctx.getImageData(130, 60, 1, 1).data; | |
180 shouldBe('d[0]', '255'); | |
181 shouldBe('d[1]', '0'); | |
182 shouldBe('d[2]', '0'); | |
183 shouldBeAround('d[3]', '57'); | |
184 | |
185 d = ctx.getImageData(119, 50, 1, 1).data; | |
186 shouldBe('d[0]', '255'); | |
187 shouldBe('d[1]', '0'); | |
188 shouldBe('d[2]', '0'); | |
189 shouldBeAround('d[3]', '57'); | |
190 | |
191 d = ctx.getImageData(140, 50, 1, 1).data; | |
192 shouldBe('d[0]', '255'); | |
193 shouldBe('d[1]', '0'); | |
194 shouldBe('d[2]', '0'); | |
195 shouldBeAround('d[3]', '57'); | |
196 | |
197 // Verify blurry alpha shadow of image with alpha. | |
198 d = ctx.getImageData(130, 79, 1, 1).data; | |
199 shouldBe('d[0]', '255'); | |
200 shouldBe('d[1]', '0'); | |
201 shouldBe('d[2]', '0'); | |
202 shouldBeAround('d[3]', '17'); | |
203 | |
204 d = ctx.getImageData(130, 100, 1, 1).data; | |
205 shouldBe('d[0]', '255'); | |
206 shouldBe('d[1]', '0'); | |
207 shouldBe('d[2]', '0'); | |
208 shouldBeAround('d[3]', '17'); | |
209 | |
210 d = ctx.getImageData(119, 90, 1, 1).data; | |
211 shouldBe('d[0]', '255'); | |
212 shouldBe('d[1]', '0'); | |
213 shouldBe('d[2]', '0'); | |
214 shouldBeAround('d[3]', '17'); | |
215 | |
216 d = ctx.getImageData(140, 90, 1, 1).data; | |
217 shouldBe('d[0]', '255'); | |
218 shouldBe('d[1]', '0'); | |
219 shouldBe('d[2]', '0'); | |
220 shouldBeAround('d[3]', '17'); | |
221 finishJSTest(); | |
222 } | |
223 | |
224 window.jsTestIsAsync = true; | |
OLD | NEW |