Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(611)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-flipY.html

Issue 1631733003: Implementing ImageBitmap option imageOrientation of flipY (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-flipY-expected.txt » ('j') | third_party/WebKit/Source/core/frame/ImageBitmap.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html> 2 <html>
3 <head> 3 <head>
4 <script src="../../resources/js-test.js"></script> 4 <script src="../../resources/js-test.js"></script>
5 </head> 5 </head>
6 <body> 6 <body>
jbroman 2016/01/26 17:03:37 Would you mind also testing the other cases (none,
xidachen 2016/02/03 02:17:19 Acknowledged.
7 <script> 7 <script>
8 8
9 description("Ensure correct behavior of drawImage with ImageBitmaps."); 9 description("Ensure correct behavior of drawImage with ImageBitmaps along with f lipY option.");
10 window.jsTestIsAsync = true; 10 window.jsTestIsAsync = true;
11 11
12 function jsWrapperClass(node) 12 function jsWrapperClass(node)
13 { 13 {
14 // returns the ClassName of node 14 // returns the ClassName of node
15 if (!node) 15 if (!node)
16 return "[null]"; 16 return "[null]";
17 var string = Object.prototype.toString.apply(node); 17 var string = Object.prototype.toString.apply(node);
18 18
19 // string will be of the form [object ClassName] 19 // string will be of the form [object ClassName]
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after
145 xhr.responseType = 'blob'; 145 xhr.responseType = 'blob';
146 xhr.send(); 146 xhr.send();
147 xhr.onload = function() { 147 xhr.onload = function() {
148 blob = xhr.response; 148 blob = xhr.response;
149 blobLoaded = true; 149 blobLoaded = true;
150 loaded(); 150 loaded();
151 } 151 }
152 152
153 function loaded() { 153 function loaded() {
154 if (imageLoaded && imageBitmapLoaded && blobLoaded) { 154 if (imageLoaded && imageBitmapLoaded && blobLoaded) {
155 // check all of these elements 155 // check the case of ImageData only, the rest will be added later on whe n
156 elements = [image, aCanvas, d, testBitmap, blob]; 156 // they are supported.
157 elements = [d];
158 // elements = [image, aCanvas, d, testBitmap, blob];
157 // wait for callback to finish before each check to ensure synchronous b ehavior 159 // wait for callback to finish before each check to ensure synchronous b ehavior
158 nextCheck(0); 160 nextCheck(0);
159 } 161 }
160 } 162 }
161 163
162 function nextCheck(elementIndex) { 164 function nextCheck(elementIndex) {
163 if (elementIndex == elements.length) { 165 if (elementIndex == elements.length) {
164 finishJSTest(); 166 finishJSTest();
165 return; 167 return;
166 } 168 }
167 var element = elements[elementIndex]; 169 var element = elements[elementIndex];
168 imageBitmaps = {}; 170 imageBitmaps = {};
169 debug("Checking " + jsWrapperClass(element) + "."); 171 debug("Checking " + jsWrapperClass(element) + ".");
170 var p1 = createImageBitmap(element).then(function (image) { imageBitmaps.noC rop = image }); 172 var p1 = createImageBitmap(element, {'orientation' : "flipY"}).then(function (image) { imageBitmaps.noCrop = image });
jbroman 2016/01/26 17:03:37 style nit: prefer not to quote the keys, and to ha
xidachen 2016/02/03 02:17:19 Acknowledged.
171 var p2 = createImageBitmap(element, 0, 0, 10, 10).then(function (image) { im ageBitmaps.crop = image }); 173 var p2 = createImageBitmap(element, 0, 0, 10, 10, {'orientation' : "flipY"}) .then(function (image) { imageBitmaps.crop = image });
172 var p3 = createImageBitmap(element, 5, 5, 10, 10).then(function (image) { im ageBitmaps.cropCenter = image }); 174 var p3 = createImageBitmap(element, 5, 5, 10, 10, {'orientation' : "flipY"}) .then(function (image) { imageBitmaps.cropCenter = image });
173 var p4 = createImageBitmap(element, 10, 10, 10, 10).then(function (image) { imageBitmaps.cropRight = image }); 175 var p4 = createImageBitmap(element, 10, 10, 10, 10, {'orientation' : "flipY" }).then(function (image) { imageBitmaps.cropRight = image });
174 var p5 = createImageBitmap(element, -10, -10, 60, 60).then(function (image) { imageBitmaps.overCrop = image }); 176 var p5 = createImageBitmap(element, -10, -10, 60, 60, {'orientation' : "flip Y"}).then(function (image) { imageBitmaps.overCrop = image });
175 var p6 = createImageBitmap(element, 10, 10, 50, 50).then(function (image) { imageBitmaps.overCropRight = image }); 177 var p6 = createImageBitmap(element, 10, 10, 50, 50, {'orientation' : "flipY" }).then(function (image) { imageBitmaps.overCropRight = image });
176 var p7 = createImageBitmap(element, 10, 10, -10, -10).then(function (image) { imageBitmaps.negativeCrop = image }); 178 var p7 = createImageBitmap(element, 10, 10, -10, -10, {'orientation' : "flip Y"}).then(function (image) { imageBitmaps.negativeCrop = image });
177 var p8 = createImageBitmap(element, -30, -30, 30, 30).then(function (image) { imageBitmaps.empty = image }); 179 var p8 = createImageBitmap(element, -30, -30, 30, 30, {'orientation' : "flip Y"}).then(function (image) { imageBitmaps.empty = image });
178 var p9 = createImageBitmap(element, 40, 30, 30, 30).then(function (image) { imageBitmaps.emptyTwo = image }); 180 var p9 = createImageBitmap(element, 40, 30, 30, 30, {'orientation' : "flipY" }).then(function (image) { imageBitmaps.emptyTwo = image });
179 Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() { 181 Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() {
180 checkNoCrop(imageBitmaps.noCrop); 182 checkNoCrop(imageBitmaps.noCrop);
181 checkCrop(imageBitmaps.crop); 183 checkCrop(imageBitmaps.crop);
182 checkCropCenter(imageBitmaps.cropCenter); 184 checkCropCenter(imageBitmaps.cropCenter);
183 checkCropRight(imageBitmaps.cropRight); 185 checkCropRight(imageBitmaps.cropRight);
184 checkOverCrop(imageBitmaps.overCrop); 186 checkOverCrop(imageBitmaps.overCrop);
185 checkOverCropRight(imageBitmaps.overCropRight); 187 checkOverCropRight(imageBitmaps.overCropRight);
186 checkCrop(imageBitmaps.negativeCrop); 188 checkCrop(imageBitmaps.negativeCrop);
187 checkEmpty(imageBitmaps.empty); 189 checkEmpty(imageBitmaps.empty);
188 checkEmpty(imageBitmaps.emptyTwo); 190 checkEmpty(imageBitmaps.emptyTwo);
189 nextCheck(elementIndex + 1); 191 nextCheck(elementIndex + 1);
190 }, shouldNotBeCalled); 192 }, shouldNotBeCalled);
191 } 193 }
192 194
193 function checkNoCrop(imageBitmap) { 195 function checkNoCrop(imageBitmap) {
194 debug("Check no crop."); 196 debug("Check no crop.");
195 bitmap = imageBitmap; 197 bitmap = imageBitmap;
196 shouldBeType("bitmap", "ImageBitmap"); 198 shouldBeType("bitmap", "ImageBitmap");
197 shouldBe("bitmap.width", "imageWidth"); 199 shouldBe("bitmap.width", "imageWidth");
198 shouldBe("bitmap.height", "imageHeight"); 200 shouldBe("bitmap.height", "imageHeight");
199 201
200 // should be drawn to (0, 0), (20, 20) 202 // should be drawn to (0, 0), (20, 20)
201 clearContext(ctx); 203 clearContext(ctx);
202 ctx.drawImage(imageBitmap, 0, 0); 204 ctx.drawImage(imageBitmap, 0, 0);
203 shouldBeRed(9, 9); 205 shouldBeBlue(9, 9);
204 shouldBeGreen(11, 9); 206 shouldBeBlack(11, 9);
205 shouldBeBlue(9, 11); 207 shouldBeRed(9, 11);
206 shouldBeBlack(11, 11); 208 shouldBeGreen(11, 11);
207 shouldBeBlack(19, 19); 209 shouldBeGreen(19, 19);
208 shouldBeClear(1, 21); 210 shouldBeClear(1, 21);
209 shouldBeClear(21, 1); 211 shouldBeClear(21, 1);
210 shouldBeClear(21, 21); 212 shouldBeClear(21, 21);
211 213
212 // shrunk to (0, 0), (10, 10) 214 // shrunk to (0, 0), (10, 10)
213 clearContext(ctx); 215 clearContext(ctx);
214 ctx.drawImage(imageBitmap, 0, 0, 10, 10); 216 ctx.drawImage(imageBitmap, 0, 0, 10, 10);
215 shouldBeRed(4, 4); 217 shouldBeBlue(4, 4);
216 shouldBeGreen(6, 4); 218 shouldBeBlack(6, 4);
217 shouldBeBlue(4, 6); 219 shouldBeRed(4, 6);
218 shouldBeBlack(6, 6); 220 shouldBeGreen(6, 6);
219 shouldBeBlack(9, 9); 221 shouldBeGreen(9, 9);
220 shouldBeClear(1, 11); 222 shouldBeClear(1, 11);
221 shouldBeClear(11, 1); 223 shouldBeClear(11, 1);
222 shouldBeClear(11, 11); 224 shouldBeClear(11, 11);
223 225
224 // shrunk to (10, 10), (20, 20) 226 // shrunk to (10, 10), (20, 20)
225 clearContext(ctx); 227 clearContext(ctx);
226 ctx.drawImage(imageBitmap, 10, 10, 10, 10); 228 ctx.drawImage(imageBitmap, 10, 10, 10, 10);
227 shouldBeRed(14, 14); 229 shouldBeBlue(14, 14);
228 shouldBeGreen(16, 14); 230 shouldBeBlack(16, 14);
229 shouldBeBlue(14, 16); 231 shouldBeRed(14, 16);
230 shouldBeBlack(16, 16); 232 shouldBeGreen(16, 16);
231 shouldBeBlack(19, 19); 233 shouldBeGreen(19, 19);
232 shouldBeClear(11, 21); 234 shouldBeClear(11, 21);
233 shouldBeClear(21, 11); 235 shouldBeClear(21, 11);
234 shouldBeClear(21, 21); 236 shouldBeClear(21, 21);
235 237
236 // black should be drawn to (10, 10), (20, 20) 238 // black should be drawn to (10, 10), (20, 20)
237 clearContext(ctx); 239 clearContext(ctx);
238 ctx.drawImage(imageBitmap, 10, 10, 10, 10, 10, 10, 10, 10); 240 ctx.drawImage(imageBitmap, 10, 10, 10, 10, 10, 10, 10, 10);
239 shouldBeClear(9, 9); 241 shouldBeClear(9, 9);
240 shouldBeBlack(11, 11); 242 shouldBeGreen(11, 11);
241 shouldBeBlack(19, 19); 243 shouldBeGreen(19, 19);
242 shouldBeClear(1, 21); 244 shouldBeClear(1, 21);
243 shouldBeClear(21, 1); 245 shouldBeClear(21, 1);
244 shouldBeClear(21, 21); 246 shouldBeClear(21, 21);
245 } 247 }
246 248
247 function checkCrop(imageBitmap) { 249 function checkCrop(imageBitmap) {
248 debug("Check crop."); 250 debug("Check crop.");
249 bitmap = imageBitmap; 251 bitmap = imageBitmap;
250 shouldBeType("bitmap", "ImageBitmap"); 252 shouldBeType("bitmap", "ImageBitmap");
251 shouldBe("bitmap.width", "10"); 253 shouldBe("bitmap.width", "10");
252 shouldBe("bitmap.height", "10"); 254 shouldBe("bitmap.height", "10");
253 255
254 // red should be drawn to (0, 0), (10, 10) 256 // red should be drawn to (0, 0), (10, 10)
255 clearContext(ctx); 257 clearContext(ctx);
256 ctx.drawImage(imageBitmap, 0, 0); 258 ctx.drawImage(imageBitmap, 0, 0);
257 shouldBeRed(1, 1); 259 shouldBeBlue(1, 1);
258 shouldBeRed(9, 9); 260 shouldBeBlue(9, 9);
259 shouldBeClear(12, 12); 261 shouldBeClear(12, 12);
260 shouldBeClear(1, 12); 262 shouldBeClear(1, 12);
261 shouldBeClear(12, 1); 263 shouldBeClear(12, 1);
262 264
263 // red should be drawn to (0, 0), (20, 20) 265 // red should be drawn to (0, 0), (20, 20)
264 clearContext(ctx); 266 clearContext(ctx);
265 ctx.drawImage(imageBitmap, 0, 0, 20, 20); 267 ctx.drawImage(imageBitmap, 0, 0, 20, 20);
266 shouldBeRed(1, 1); 268 shouldBeBlue(1, 1);
267 shouldBeRed(18, 18); 269 shouldBeBlue(18, 18);
268 shouldBeClear(22, 22); 270 shouldBeClear(22, 22);
269 shouldBeClear(1, 22); 271 shouldBeClear(1, 22);
270 shouldBeClear(22, 1); 272 shouldBeClear(22, 1);
271 } 273 }
272 274
273 function checkCropCenter(imageBitmap) { 275 function checkCropCenter(imageBitmap) {
274 debug("Check crop center."); 276 debug("Check crop center.");
275 bitmap = imageBitmap; 277 bitmap = imageBitmap;
276 shouldBeType("bitmap", "ImageBitmap"); 278 shouldBeType("bitmap", "ImageBitmap");
277 shouldBe("bitmap.width", "10"); 279 shouldBe("bitmap.width", "10");
278 shouldBe("bitmap.height", "10"); 280 shouldBe("bitmap.height", "10");
279 281
280 // should be drawn to (0, 0), (10, 10) with all four colors 282 // should be drawn to (0, 0), (10, 10) with all four colors
281 clearContext(ctx); 283 clearContext(ctx);
282 ctx.drawImage(imageBitmap, 0, 0); 284 ctx.drawImage(imageBitmap, 0, 0);
283 shouldBeRed(4, 4); 285 shouldBeBlue(4, 4);
284 shouldBeGreen(6, 4); 286 shouldBeBlack(6, 4);
285 shouldBeBlue(4, 6); 287 shouldBeRed(4, 6);
286 shouldBeBlack(6, 6); 288 shouldBeGreen(6, 6);
287 shouldBeBlack(9, 9); 289 shouldBeGreen(9, 9);
288 shouldBeClear(11, 11); 290 shouldBeClear(11, 11);
289 shouldBeClear(1, 11); 291 shouldBeClear(1, 11);
290 shouldBeClear(11, 1); 292 shouldBeClear(11, 1);
291 293
292 // should be drawn to (0, 0), (20, 20) with all four colors 294 // should be drawn to (0, 0), (20, 20) with all four colors
293 clearContext(ctx); 295 clearContext(ctx);
294 ctx.drawImage(imageBitmap, 0, 0, 20, 20); 296 ctx.drawImage(imageBitmap, 0, 0, 20, 20);
295 shouldBeRed(8, 8); 297 shouldBeBlue(8, 8);
296 shouldBeGreen(11, 8); 298 shouldBeBlack(11, 8);
297 shouldBeBlue(8, 11); 299 shouldBeRed(8, 11);
298 shouldBeBlack(11, 11); 300 shouldBeGreen(11, 11);
299 shouldBeBlack(18, 18); 301 shouldBeGreen(18, 18);
300 shouldBeClear(22, 22); 302 shouldBeClear(22, 22);
301 shouldBeClear(1, 21); 303 shouldBeClear(1, 21);
302 shouldBeClear(21, 1); 304 shouldBeClear(21, 1);
303 } 305 }
304 306
305 function checkCropRight(imageBitmap) { 307 function checkCropRight(imageBitmap) {
306 debug("Check crop right."); 308 debug("Check crop right.");
307 bitmap = imageBitmap; 309 bitmap = imageBitmap;
308 shouldBeType("bitmap", "ImageBitmap"); 310 shouldBeType("bitmap", "ImageBitmap");
309 shouldBe("bitmap.width", "10"); 311 shouldBe("bitmap.width", "10");
310 shouldBe("bitmap.height", "10"); 312 shouldBe("bitmap.height", "10");
311 313
312 // black should be drawn to (0, 0), (10, 10) 314 // black should be drawn to (0, 0), (10, 10)
313 clearContext(ctx); 315 clearContext(ctx);
314 ctx.drawImage(imageBitmap, 0, 0); 316 ctx.drawImage(imageBitmap, 0, 0);
315 shouldBeBlack(1, 1); 317 shouldBeGreen(1, 1);
316 shouldBeBlack(9, 9); 318 shouldBeGreen(9, 9);
317 shouldBeClear(11, 11); 319 shouldBeClear(11, 11);
318 shouldBeClear(1, 11); 320 shouldBeClear(1, 11);
319 shouldBeClear(11, 1); 321 shouldBeClear(11, 1);
320 } 322 }
321 323
322 function checkOverCrop(imageBitmap) { 324 function checkOverCrop(imageBitmap) {
323 debug("Check over crop."); 325 debug("Check over crop.");
324 bitmap = imageBitmap; 326 bitmap = imageBitmap;
325 shouldBeType("bitmap", "ImageBitmap"); 327 shouldBeType("bitmap", "ImageBitmap");
326 shouldBe("bitmap.width", "60"); 328 shouldBe("bitmap.width", "60");
327 shouldBe("bitmap.height", "60"); 329 shouldBe("bitmap.height", "60");
328 330
329 // should be drawn to (10, 10), (30, 30) 331 // should be drawn to (10, 10), (30, 30)
330 clearContext(ctx); 332 clearContext(ctx);
331 ctx.drawImage(imageBitmap, 0, 0); 333 ctx.drawImage(imageBitmap, 0, 0);
332 shouldBeClear(1, 1); 334 shouldBeClear(1, 1);
333 shouldBeClear(9, 9); 335 shouldBeClear(9, 9);
334 shouldBeRed(11, 11); 336 shouldBeBlue(11, 11);
335 shouldBeRed(19, 19); 337 shouldBeBlue(19, 19);
336 shouldBeGreen(21, 19); 338 shouldBeBlack(21, 19);
337 shouldBeBlue(19, 21); 339 shouldBeRed(19, 21);
338 shouldBeBlack(21, 21); 340 shouldBeGreen(21, 21);
339 shouldBeBlack(29, 29); 341 shouldBeGreen(29, 29);
340 shouldBeClear(32, 1); 342 shouldBeClear(32, 1);
341 shouldBeClear(1, 32); 343 shouldBeClear(1, 32);
342 shouldBeClear(32, 32); 344 shouldBeClear(32, 32);
343 345
344 // should be drawn to (5, 5), (15, 15) 346 // should be drawn to (5, 5), (15, 15)
345 clearContext(ctx); 347 clearContext(ctx);
346 ctx.drawImage(imageBitmap, 0, 0, 30, 30); 348 ctx.drawImage(imageBitmap, 0, 0, 30, 30);
347 shouldBeClear(1, 1); 349 shouldBeClear(1, 1);
348 shouldBeClear(4, 4); 350 shouldBeClear(4, 4);
349 shouldBeRed(6, 6); 351 shouldBeBlue(6, 6);
350 shouldBeRed(9, 9); 352 shouldBeBlue(9, 9);
351 shouldBeGreen(11, 9); 353 shouldBeBlack(11, 9);
352 shouldBeBlue(9, 11); 354 shouldBeRed(9, 11);
353 shouldBeBlack(11, 11); 355 shouldBeGreen(11, 11);
354 shouldBeBlack(14, 14); 356 shouldBeGreen(14, 14);
355 shouldBeClear(16, 1); 357 shouldBeClear(16, 1);
356 shouldBeClear(1, 16); 358 shouldBeClear(1, 16);
357 shouldBeClear(16, 16); 359 shouldBeClear(16, 16);
358 } 360 }
359 361
360 function checkOverCropRight(imageBitmap) { 362 function checkOverCropRight(imageBitmap) {
361 debug("Check over crop right."); 363 debug("Check over crop right.");
362 bitmap = imageBitmap; 364 bitmap = imageBitmap;
363 shouldBe("bitmap.width", "50"); 365 shouldBe("bitmap.width", "50");
364 shouldBe("bitmap.height", "50"); 366 shouldBe("bitmap.height", "50");
365 367
366 // black should be drawn to (0, 0), (10, 10) 368 // black should be drawn to (0, 0), (10, 10)
367 clearContext(ctx); 369 clearContext(ctx);
368 ctx.drawImage(imageBitmap, 0, 0); 370 ctx.drawImage(imageBitmap, 0, 0);
369 shouldBeBlack(1, 1); 371 shouldBeGreen(1, 1);
370 shouldBeBlack(9, 9); 372 shouldBeGreen(9, 9);
371 shouldBeClear(11, 11); 373 shouldBeClear(11, 11);
372 shouldBeClear(1, 11); 374 shouldBeClear(1, 11);
373 shouldBeClear(11, 1); 375 shouldBeClear(11, 1);
374 376
375 // black should be drawn to (0, 0), (4, 4) 377 // black should be drawn to (0, 0), (4, 4)
376 clearContext(ctx); 378 clearContext(ctx);
377 ctx.drawImage(imageBitmap, 0, 0, 20, 20); 379 ctx.drawImage(imageBitmap, 0, 0, 20, 20);
378 shouldBeBlack(1, 1); 380 shouldBeGreen(1, 1);
379 shouldBeBlack(3, 3); 381 shouldBeGreen(3, 3);
380 shouldBeClear(5, 5); 382 shouldBeClear(5, 5);
381 shouldBeClear(1, 5); 383 shouldBeClear(1, 5);
382 shouldBeClear(5, 1); 384 shouldBeClear(5, 1);
383 385
384 // nothing should be drawn 386 // nothing should be drawn
385 clearContext(ctx); 387 clearContext(ctx);
386 ctx.drawImage(imageBitmap, 10, 10, 20, 20, 0, 0, 20, 20); 388 ctx.drawImage(imageBitmap, 10, 10, 20, 20, 0, 0, 20, 20);
387 shouldBeClear(1, 1); 389 shouldBeClear(1, 1);
388 shouldBeClear(3, 3); 390 shouldBeClear(3, 3);
389 shouldBeClear(5, 5); 391 shouldBeClear(5, 5);
(...skipping 12 matching lines...) Expand all
402 clearContext(ctx); 404 clearContext(ctx);
403 ctx.drawImage(imageBitmap, 0, 0); 405 ctx.drawImage(imageBitmap, 0, 0);
404 shouldBeClear(1, 1); 406 shouldBeClear(1, 1);
405 shouldBeClear(9, 9); 407 shouldBeClear(9, 9);
406 shouldBeClear(11, 11); 408 shouldBeClear(11, 11);
407 shouldBeClear(22, 22); 409 shouldBeClear(22, 22);
408 } 410 }
409 </script> 411 </script>
410 </body> 412 </body>
411 </html> 413 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-flipY-expected.txt » ('j') | third_party/WebKit/Source/core/frame/ImageBitmap.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698