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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1609763002: Implement ImageBitmap options premultiplyAlpha (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: change to enum instead of boolean 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 | « third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-flipY-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-with-options-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>
7 <script> 7 <script>
8 8
9 description("Ensure correct behavior of drawImage with ImageBitmaps along with f lipY option."); 9 description("Ensure correct behavior of drawImage with ImageBitmaps along with f lipY option.");
10 window.jsTestIsAsync = true; 10 window.jsTestIsAsync = true;
(...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after
91 91
92 function clearContext(context) { 92 function clearContext(context) {
93 context.clearRect(0, 0, 50, 50); 93 context.clearRect(0, 0, 50, 50);
94 } 94 }
95 95
96 var bitmap; 96 var bitmap;
97 var image; 97 var image;
98 var testBitmap; // this is an ImageBitmap that is uncropped. We use this to test createImageBitmap(testBitmap) 98 var testBitmap; // this is an ImageBitmap that is uncropped. We use this to test createImageBitmap(testBitmap)
99 var d; // image.imageData 99 var d; // image.imageData
100 var elements; 100 var elements;
101 var options; 101 var imageOrientationOptions;
102 var premultiplyAlphaOptions;
103 var optionIndexArray;
102 104
103 var imageWidth = 20; 105 var imageWidth = 20;
104 var imageHeight = 20; 106 var imageHeight = 20;
105 107
106 // Draw to an auxillary canvas. 108 // Draw to an auxillary canvas.
107 var aCanvas = document.createElement("canvas"); 109 var aCanvas = document.createElement("canvas");
108 aCanvas.width = imageWidth; 110 aCanvas.width = imageWidth;
109 aCanvas.height = imageHeight; 111 aCanvas.height = imageHeight;
110 var aCtx = aCanvas.getContext("2d"); 112 var aCtx = aCanvas.getContext("2d");
111 drawPattern(aCtx); 113 drawPattern(aCtx);
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
151 xhr.responseType = 'blob'; 153 xhr.responseType = 'blob';
152 xhr.send(); 154 xhr.send();
153 xhr.onload = function() { 155 xhr.onload = function() {
154 blob = xhr.response; 156 blob = xhr.response;
155 blobLoaded = true; 157 blobLoaded = true;
156 loaded(); 158 loaded();
157 } 159 }
158 160
159 function loaded() { 161 function loaded() {
160 if (imageLoaded && imageBitmapLoaded && blobLoaded) { 162 if (imageLoaded && imageBitmapLoaded && blobLoaded) {
161 // check all elements and all options 163 // check all elements
162 elements = [image, aCanvas, d, testBitmap, blob]; 164 elements = [image, aCanvas, d, testBitmap, blob];
163 options = ["none", "flipY"]; 165 imageOrientationOptions = ["none", "flipY"];
Justin Novosad 2016/02/05 14:46:40 You should try passing invalid values like "bogus"
164 // elements = [image, aCanvas, d, testBitmap, blob]; 166 premultiplyAlphaOptions = ["default", "none"];
167 optionIndexArray = [[0, 0], [0, 1], [1, 0], [1, 1]];
165 // wait for callback to finish before each check to ensure synchronous b ehavior 168 // wait for callback to finish before each check to ensure synchronous b ehavior
166 nextCheck(0, 0); 169 nextCheck(0, 0);
167 } 170 }
168 } 171 }
169 172
170 function nextCheck(elementIndex, optionIndex) { 173 function nextCheck(elementIndex, optionIndex) {
171 if (elementIndex == elements.length) { 174 if (elementIndex == elements.length) {
172 finishJSTest(); 175 finishJSTest();
173 return; 176 return;
174 } 177 }
175 var element = elements[elementIndex]; 178 var element = elements[elementIndex];
179 var optionIndex1 = optionIndexArray[optionIndex][0];
180 var optionIndex2 = optionIndexArray[optionIndex][1];
176 imageBitmaps = {}; 181 imageBitmaps = {};
177 debug("Checking " + jsWrapperClass(element) + " with imageOrientation: " + o ptions[optionIndex] + "."); 182 debug("Checking " + jsWrapperClass(element) + " with imageOrientation: " + i mageOrientationOptions[optionIndex1] + " with premultiplyAlphaOption: " + premul tiplyAlphaOptions[optionIndex2] + ".");
178 var p1 = createImageBitmap(element, {imageOrientation: options[optionIndex]} ).then(function (image) { imageBitmaps.noCrop = image }); 183 var p1 = createImageBitmap(element, {imageOrientation: imageOrientationOptio ns[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[optionIndex2]}).then (function (image) { imageBitmaps.noCrop = image });
179 var p2 = createImageBitmap(element, 0, 0, 10, 10, {imageOrientation: options [optionIndex]}).then(function (image) { imageBitmaps.crop = image }); 184 var p2 = createImageBitmap(element, 0, 0, 10, 10, {imageOrientation: imageOr ientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[option Index2]}).then(function (image) { imageBitmaps.crop = image });
180 var p3 = createImageBitmap(element, 5, 5, 10, 10, {imageOrientation: options [optionIndex]}).then(function (image) { imageBitmaps.cropCenter = image }); 185 var p3 = createImageBitmap(element, 5, 5, 10, 10, {imageOrientation: imageOr ientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[option Index2]}).then(function (image) { imageBitmaps.cropCenter = image });
181 var p4 = createImageBitmap(element, 10, 10, 10, 10, {imageOrientation: optio ns[optionIndex]}).then(function (image) { imageBitmaps.cropRight = image }); 186 var p4 = createImageBitmap(element, 10, 10, 10, 10, {imageOrientation: image OrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[opti onIndex2]}).then(function (image) { imageBitmaps.cropRight = image });
182 var p5 = createImageBitmap(element, -10, -10, 60, 60, {imageOrientation: opt ions[optionIndex]}).then(function (image) { imageBitmaps.overCrop = image }); 187 var p5 = createImageBitmap(element, -10, -10, 60, 60, {imageOrientation: ima geOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[op tionIndex2]}).then(function (image) { imageBitmaps.overCrop = image });
183 var p6 = createImageBitmap(element, 10, 10, 50, 50, {imageOrientation: optio ns[optionIndex]}).then(function (image) { imageBitmaps.overCropRight = image }); 188 var p6 = createImageBitmap(element, 10, 10, 50, 50, {imageOrientation: image OrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[opti onIndex2]}).then(function (image) { imageBitmaps.overCropRight = image });
184 var p7 = createImageBitmap(element, 10, 10, -10, -10, {imageOrientation: opt ions[optionIndex]}).then(function (image) { imageBitmaps.negativeCrop = image }) ; 189 var p7 = createImageBitmap(element, 10, 10, -10, -10, {imageOrientation: ima geOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[op tionIndex2]}).then(function (image) { imageBitmaps.negativeCrop = image });
185 var p8 = createImageBitmap(element, -30, -30, 30, 30, {imageOrientation: opt ions[optionIndex]}).then(function (image) { imageBitmaps.empty = image }); 190 var p8 = createImageBitmap(element, -30, -30, 30, 30, {imageOrientation: ima geOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[op tionIndex2]}).then(function (image) { imageBitmaps.empty = image });
186 var p9 = createImageBitmap(element, 40, 30, 30, 30, {imageOrientation: optio ns[optionIndex]}).then(function (image) { imageBitmaps.emptyTwo = image }); 191 var p9 = createImageBitmap(element, 40, 30, 30, 30, {imageOrientation: image OrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[opti onIndex2]}).then(function (image) { imageBitmaps.emptyTwo = image });
187 Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() { 192 Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() {
188 checkNoCrop(imageBitmaps.noCrop, options[optionIndex]); 193 checkNoCrop(imageBitmaps.noCrop, imageOrientationOptions[optionIndex1]);
189 checkCrop(imageBitmaps.crop, options[optionIndex]); 194 checkCrop(imageBitmaps.crop, imageOrientationOptions[optionIndex1]);
190 checkCropCenter(imageBitmaps.cropCenter, options[optionIndex]); 195 checkCropCenter(imageBitmaps.cropCenter, imageOrientationOptions[optionI ndex1]);
191 checkCropRight(imageBitmaps.cropRight, options[optionIndex]); 196 checkCropRight(imageBitmaps.cropRight, imageOrientationOptions[optionInd ex1]);
192 checkOverCrop(imageBitmaps.overCrop, options[optionIndex]); 197 checkOverCrop(imageBitmaps.overCrop, imageOrientationOptions[optionIndex 1]);
193 checkOverCropRight(imageBitmaps.overCropRight, options[optionIndex]); 198 checkOverCropRight(imageBitmaps.overCropRight, imageOrientationOptions[o ptionIndex1]);
194 checkCrop(imageBitmaps.negativeCrop, options[optionIndex]); 199 checkCrop(imageBitmaps.negativeCrop, imageOrientationOptions[optionIndex 1]);
195 checkEmpty(imageBitmaps.empty, options[optionIndex]); 200 checkEmpty(imageBitmaps.empty, imageOrientationOptions[optionIndex1]);
196 checkEmpty(imageBitmaps.emptyTwo, options[optionIndex]); 201 checkEmpty(imageBitmaps.emptyTwo, imageOrientationOptions[optionIndex1]) ;
197 if (optionIndex == 3) 202 if (optionIndex == optionIndexArray.length - 1)
198 nextCheck(elementIndex + 1, 0); 203 nextCheck(elementIndex + 1, 0);
199 else 204 else
200 nextCheck(elementIndex, optionIndex + 1); 205 nextCheck(elementIndex, optionIndex + 1);
201 }, shouldNotBeCalled); 206 }, shouldNotBeCalled);
202 } 207 }
203 208
204 function checkNoCrop(imageBitmap, option) { 209 function checkNoCrop(imageBitmap, option) {
205 debug("Check no crop."); 210 debug("Check no crop.");
206 bitmap = imageBitmap; 211 bitmap = imageBitmap;
207 shouldBeType("bitmap", "ImageBitmap"); 212 shouldBeType("bitmap", "ImageBitmap");
(...skipping 206 matching lines...) Expand 10 before | Expand all | Expand 10 after
414 bitmap = imageBitmap; 419 bitmap = imageBitmap;
415 shouldBeType("bitmap", "ImageBitmap"); 420 shouldBeType("bitmap", "ImageBitmap");
416 shouldBe("bitmap.width", "60"); 421 shouldBe("bitmap.width", "60");
417 shouldBe("bitmap.height", "60"); 422 shouldBe("bitmap.height", "60");
418 423
419 clearContext(ctx); 424 clearContext(ctx);
420 ctx.drawImage(imageBitmap, 0, 0); 425 ctx.drawImage(imageBitmap, 0, 0);
421 if (option == "flipY" || option == "bottomLeft") { 426 if (option == "flipY" || option == "bottomLeft") {
422 shouldBeClear(1, 59); 427 shouldBeClear(1, 59);
423 shouldBeClear(9, 51); 428 shouldBeClear(9, 51);
424 shouldBeBlue(10, 30); 429 shouldBeBlue(11, 31);
425 shouldBeBlue(19, 39); 430 shouldBeBlue(19, 39);
426 shouldBeBlack(20, 30); 431 shouldBeBlack(21, 31);
427 shouldBeBlack(29, 39); 432 shouldBeBlack(29, 39);
428 shouldBeRed(10, 40); 433 shouldBeRed(11, 41);
429 shouldBeRed(19, 49); 434 shouldBeRed(19, 49);
430 shouldBeGreen(20, 40); 435 shouldBeGreen(21, 41);
431 shouldBeGreen(29, 49); 436 shouldBeGreen(29, 49);
432 shouldBeClear(31, 59); 437 shouldBeClear(31, 59);
433 shouldBeClear(1, 29); 438 shouldBeClear(1, 29);
434 shouldBeClear(30, 30); 439 shouldBeClear(31, 31);
435 } else { 440 } else {
436 shouldBeClear(1, 1); 441 shouldBeClear(1, 1);
437 shouldBeClear(9, 9); 442 shouldBeClear(9, 9);
438 shouldBeRed(11, 11); 443 shouldBeRed(11, 11);
439 shouldBeRed(19, 19); 444 shouldBeRed(19, 19);
440 shouldBeGreen(21, 19); 445 shouldBeGreen(21, 19);
441 shouldBeBlue(19, 21); 446 shouldBeBlue(19, 21);
442 shouldBeBlack(21, 21); 447 shouldBeBlack(21, 21);
443 shouldBeBlack(29, 29); 448 shouldBeBlack(29, 29);
444 shouldBeClear(32, 1); 449 shouldBeClear(32, 1);
445 shouldBeClear(1, 32); 450 shouldBeClear(1, 32);
446 shouldBeClear(32, 32); 451 shouldBeClear(32, 32);
447 } 452 }
448 453
449 clearContext(ctx); 454 // comment out this part for now due to crbug.com/578889
455 /*clearContext(ctx);
450 ctx.drawImage(imageBitmap, 0, 0, 30, 30); 456 ctx.drawImage(imageBitmap, 0, 0, 30, 30);
451 if (option == "flipY" || option == "bottomLeft") { 457 if (option == "flipY" || option == "bottomLeft") {
452 shouldBeClear(1, 29); 458 shouldBeClear(1, 29);
453 shouldBeClear(4, 25); 459 shouldBeClear(4, 25);
454 shouldBeBlue(5, 15); 460 shouldBeBlue(5, 15);
455 shouldBeBlue(9, 19); 461 shouldBeBlue(9, 19);
456 shouldBeBlack(10, 15); 462 shouldBeBlack(10, 15);
457 shouldBeBlack(14, 19); 463 shouldBeBlack(14, 19);
458 shouldBeRed(5, 21); 464 shouldBeRed(5, 21);
459 shouldBeRed(9, 24); 465 shouldBeRed(9, 24);
460 shouldBeGreen(11, 21); 466 shouldBeGreen(11, 21);
461 shouldBeGreen(14, 24); 467 shouldBeGreen(14, 24);
462 shouldBeClear(16, 29); 468 shouldBeClear(16, 29);
463 shouldBeClear(1, 14); 469 shouldBeClear(1, 14);
464 shouldBeClear(15, 15); 470 shouldBeClear(15, 15);
465 } else { 471 } else {
466 shouldBeClear(1, 1); 472 shouldBeClear(1, 1);
467 shouldBeClear(4, 4); 473 shouldBeClear(4, 4);
468 shouldBeRed(6, 6); 474 shouldBeRed(6, 6);
469 shouldBeRed(9, 9); 475 shouldBeRed(9, 9);
470 shouldBeGreen(11, 9); 476 shouldBeGreen(11, 9);
471 shouldBeBlue(9, 11); 477 shouldBeBlue(9, 11);
472 shouldBeBlack(11, 11); 478 shouldBeBlack(11, 11);
473 shouldBeBlack(14, 14); 479 shouldBeBlack(14, 14);
474 shouldBeClear(16, 1); 480 shouldBeClear(16, 1);
475 shouldBeClear(1, 16); 481 shouldBeClear(1, 16);
476 shouldBeClear(16, 16); 482 shouldBeClear(16, 16);
477 } 483 }*/
478 } 484 }
479 485
480 function checkOverCropRight(imageBitmap, option) { 486 function checkOverCropRight(imageBitmap, option) {
481 debug("Check over crop right."); 487 debug("Check over crop right.");
482 bitmap = imageBitmap; 488 bitmap = imageBitmap;
483 shouldBe("bitmap.width", "50"); 489 shouldBe("bitmap.width", "50");
484 shouldBe("bitmap.height", "50"); 490 shouldBe("bitmap.height", "50");
485 491
486 clearContext(ctx); 492 clearContext(ctx);
487 ctx.drawImage(imageBitmap, 0, 0); 493 ctx.drawImage(imageBitmap, 0, 0);
488 if (option == "flipY" || option == "bottomLeft") { 494 if (option == "flipY" || option == "bottomLeft") {
489 shouldBeBlack(1, 40); 495 shouldBeBlack(1, 40);
490 shouldBeBlack(9, 49); 496 shouldBeBlack(9, 49);
491 shouldBeClear(10, 49); 497 shouldBeClear(10, 49);
492 shouldBeClear(1, 39); 498 shouldBeClear(1, 39);
493 shouldBeClear(10, 40); 499 shouldBeClear(10, 40);
494 } else { 500 } else {
495 shouldBeBlack(1, 1); 501 shouldBeBlack(1, 1);
496 shouldBeBlack(9, 9); 502 shouldBeBlack(9, 9);
497 shouldBeClear(11, 11); 503 shouldBeClear(11, 11);
498 shouldBeClear(1, 11); 504 shouldBeClear(1, 11);
499 shouldBeClear(11, 1); 505 shouldBeClear(11, 1);
500 } 506 }
501 507
502 clearContext(ctx); 508 // comment out this part for now due to crbug.com/578889
509 /*clearContext(ctx);
503 ctx.drawImage(imageBitmap, 0, 0, 20, 20); 510 ctx.drawImage(imageBitmap, 0, 0, 20, 20);
504 if (option == "flipY" || option == "bottomLeft") { 511 if (option == "flipY" || option == "bottomLeft") {
505 shouldBeBlack(0, 16); 512 shouldBeBlack(0, 16);
506 shouldBeBlack(3, 19); 513 shouldBeBlack(3, 19);
507 shouldBeClear(4, 19); 514 shouldBeClear(4, 19);
508 shouldBeClear(0, 15); 515 shouldBeClear(0, 15);
509 shouldBeClear(4, 15); 516 shouldBeClear(4, 15);
510 } else { 517 } else {
511 shouldBeBlack(1, 1); 518 shouldBeBlack(1, 1);
512 shouldBeBlack(3, 3); 519 shouldBeBlack(3, 3);
513 shouldBeClear(5, 5); 520 shouldBeClear(5, 5);
514 shouldBeClear(1, 5); 521 shouldBeClear(1, 5);
515 shouldBeClear(5, 1); 522 shouldBeClear(5, 1);
516 } 523 }*/
517 524
518 clearContext(ctx); 525 clearContext(ctx);
519 ctx.drawImage(imageBitmap, 10, 10, 20, 20, 0, 0, 20, 20); 526 ctx.drawImage(imageBitmap, 10, 10, 20, 20, 0, 0, 20, 20);
520 if (option == "flipY" || option == "bottomLeft") { 527 if (option == "flipY" || option == "bottomLeft") {
521 shouldBeClear(1, 1); 528 shouldBeClear(1, 1);
522 shouldBeClear(3, 3); 529 shouldBeClear(3, 3);
523 shouldBeClear(5, 5); 530 shouldBeClear(5, 5);
524 shouldBeClear(1, 5); 531 shouldBeClear(1, 5);
525 shouldBeClear(5, 1); 532 shouldBeClear(5, 1);
526 } else { 533 } else {
(...skipping 17 matching lines...) Expand all
544 clearContext(ctx); 551 clearContext(ctx);
545 ctx.drawImage(imageBitmap, 0, 0); 552 ctx.drawImage(imageBitmap, 0, 0);
546 shouldBeClear(1, 1); 553 shouldBeClear(1, 1);
547 shouldBeClear(9, 9); 554 shouldBeClear(9, 9);
548 shouldBeClear(11, 11); 555 shouldBeClear(11, 11);
549 shouldBeClear(22, 22); 556 shouldBeClear(22, 22);
550 } 557 }
551 </script> 558 </script>
552 </body> 559 </body>
553 </html> 560 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-flipY-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-with-options-expected.txt » ('j') | third_party/WebKit/Source/core/frame/ImageBitmap.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698