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

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: apply comments 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') | no next file with comments »
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", "invalid"];
164 // elements = [image, aCanvas, d, testBitmap, blob]; 166 premultiplyAlphaOptions = ["default", "none", "invalid"];
167 optionIndexArray = [[0, 0], [0, 1], [0, 2],
168 [1, 0], [1, 1], [1, 2],
169 [2, 0], [2, 1], [2, 2]];
165 // wait for callback to finish before each check to ensure synchronous b ehavior 170 // wait for callback to finish before each check to ensure synchronous b ehavior
166 nextCheck(0, 0); 171 nextCheck(0, 0);
167 } 172 }
168 } 173 }
169 174
170 function nextCheck(elementIndex, optionIndex) { 175 function nextCheck(elementIndex, optionIndex) {
171 if (elementIndex == elements.length) { 176 if (elementIndex == elements.length) {
172 finishJSTest(); 177 finishJSTest();
173 return; 178 return;
174 } 179 }
175 var element = elements[elementIndex]; 180 var element = elements[elementIndex];
181 var optionIndex1 = optionIndexArray[optionIndex][0];
182 var optionIndex2 = optionIndexArray[optionIndex][1];
176 imageBitmaps = {}; 183 imageBitmaps = {};
177 debug("Checking " + jsWrapperClass(element) + " with imageOrientation: " + o ptions[optionIndex] + "."); 184 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 }); 185 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 }); 186 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 }); 187 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 }); 188 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 }); 189 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 }); 190 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 }) ; 191 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 }); 192 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 }); 193 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() { 194 Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() {
188 checkNoCrop(imageBitmaps.noCrop, options[optionIndex]); 195 checkNoCrop(imageBitmaps.noCrop, imageOrientationOptions[optionIndex1]);
189 checkCrop(imageBitmaps.crop, options[optionIndex]); 196 checkCrop(imageBitmaps.crop, imageOrientationOptions[optionIndex1]);
190 checkCropCenter(imageBitmaps.cropCenter, options[optionIndex]); 197 checkCropCenter(imageBitmaps.cropCenter, imageOrientationOptions[optionI ndex1]);
191 checkCropRight(imageBitmaps.cropRight, options[optionIndex]); 198 checkCropRight(imageBitmaps.cropRight, imageOrientationOptions[optionInd ex1]);
192 checkOverCrop(imageBitmaps.overCrop, options[optionIndex]); 199 checkOverCrop(imageBitmaps.overCrop, imageOrientationOptions[optionIndex 1]);
193 checkOverCropRight(imageBitmaps.overCropRight, options[optionIndex]); 200 checkOverCropRight(imageBitmaps.overCropRight, imageOrientationOptions[o ptionIndex1]);
194 checkCrop(imageBitmaps.negativeCrop, options[optionIndex]); 201 checkCrop(imageBitmaps.negativeCrop, imageOrientationOptions[optionIndex 1]);
195 checkEmpty(imageBitmaps.empty, options[optionIndex]); 202 checkEmpty(imageBitmaps.empty, imageOrientationOptions[optionIndex1]);
196 checkEmpty(imageBitmaps.emptyTwo, options[optionIndex]); 203 checkEmpty(imageBitmaps.emptyTwo, imageOrientationOptions[optionIndex1]) ;
197 if (optionIndex == 3) 204 if (optionIndex == optionIndexArray.length - 1)
198 nextCheck(elementIndex + 1, 0); 205 nextCheck(elementIndex + 1, 0);
199 else 206 else
200 nextCheck(elementIndex, optionIndex + 1); 207 nextCheck(elementIndex, optionIndex + 1);
201 }, shouldNotBeCalled); 208 }, function() {
209 // when the options are invalid, we expect the promise to be rejected.
210 if ((imageOrientationOptions[optionIndex1] != "none" && imageOrientation Options[optionIndex1] != "flipY") ||
211 (premultiplyAlphaOptions[optionIndex2] != "default" && premultiplyAl phaOptions[optionIndex2] != "none")) {
212 testPassed("createImageBitmap with invalid options are rejected");
213 if (optionIndex == optionIndexArray.length - 1)
214 nextCheck(elementIndex + 1, 0);
215 else
216 nextCheck(elementIndex, optionIndex + 1);
217 } else {
218 shouldNotBeCalled();
219 }
220 });
202 } 221 }
203 222
204 function checkNoCrop(imageBitmap, option) { 223 function checkNoCrop(imageBitmap, option) {
205 debug("Check no crop."); 224 debug("Check no crop.");
206 bitmap = imageBitmap; 225 bitmap = imageBitmap;
207 shouldBeType("bitmap", "ImageBitmap"); 226 shouldBeType("bitmap", "ImageBitmap");
208 shouldBe("bitmap.width", "imageWidth"); 227 shouldBe("bitmap.width", "imageWidth");
209 shouldBe("bitmap.height", "imageHeight"); 228 shouldBe("bitmap.height", "imageHeight");
210 229
211 clearContext(ctx); 230 clearContext(ctx);
(...skipping 202 matching lines...) Expand 10 before | Expand all | Expand 10 after
414 bitmap = imageBitmap; 433 bitmap = imageBitmap;
415 shouldBeType("bitmap", "ImageBitmap"); 434 shouldBeType("bitmap", "ImageBitmap");
416 shouldBe("bitmap.width", "60"); 435 shouldBe("bitmap.width", "60");
417 shouldBe("bitmap.height", "60"); 436 shouldBe("bitmap.height", "60");
418 437
419 clearContext(ctx); 438 clearContext(ctx);
420 ctx.drawImage(imageBitmap, 0, 0); 439 ctx.drawImage(imageBitmap, 0, 0);
421 if (option == "flipY" || option == "bottomLeft") { 440 if (option == "flipY" || option == "bottomLeft") {
422 shouldBeClear(1, 59); 441 shouldBeClear(1, 59);
423 shouldBeClear(9, 51); 442 shouldBeClear(9, 51);
424 shouldBeBlue(10, 30); 443 shouldBeBlue(11, 31);
425 shouldBeBlue(19, 39); 444 shouldBeBlue(19, 39);
426 shouldBeBlack(20, 30); 445 shouldBeBlack(21, 31);
427 shouldBeBlack(29, 39); 446 shouldBeBlack(29, 39);
428 shouldBeRed(10, 40); 447 shouldBeRed(11, 41);
429 shouldBeRed(19, 49); 448 shouldBeRed(19, 49);
430 shouldBeGreen(20, 40); 449 shouldBeGreen(21, 41);
431 shouldBeGreen(29, 49); 450 shouldBeGreen(29, 49);
432 shouldBeClear(31, 59); 451 shouldBeClear(31, 59);
433 shouldBeClear(1, 29); 452 shouldBeClear(1, 29);
434 shouldBeClear(30, 30); 453 shouldBeClear(31, 31);
435 } else { 454 } else {
436 shouldBeClear(1, 1); 455 shouldBeClear(1, 1);
437 shouldBeClear(9, 9); 456 shouldBeClear(9, 9);
438 shouldBeRed(11, 11); 457 shouldBeRed(11, 11);
439 shouldBeRed(19, 19); 458 shouldBeRed(19, 19);
440 shouldBeGreen(21, 19); 459 shouldBeGreen(21, 19);
441 shouldBeBlue(19, 21); 460 shouldBeBlue(19, 21);
442 shouldBeBlack(21, 21); 461 shouldBeBlack(21, 21);
443 shouldBeBlack(29, 29); 462 shouldBeBlack(29, 29);
444 shouldBeClear(32, 1); 463 shouldBeClear(32, 1);
445 shouldBeClear(1, 32); 464 shouldBeClear(1, 32);
446 shouldBeClear(32, 32); 465 shouldBeClear(32, 32);
447 } 466 }
448 467
449 clearContext(ctx); 468 // comment out this part for now due to crbug.com/578889
469 /*clearContext(ctx);
450 ctx.drawImage(imageBitmap, 0, 0, 30, 30); 470 ctx.drawImage(imageBitmap, 0, 0, 30, 30);
451 if (option == "flipY" || option == "bottomLeft") { 471 if (option == "flipY" || option == "bottomLeft") {
452 shouldBeClear(1, 29); 472 shouldBeClear(1, 29);
453 shouldBeClear(4, 25); 473 shouldBeClear(4, 25);
454 shouldBeBlue(5, 15); 474 shouldBeBlue(5, 15);
455 shouldBeBlue(9, 19); 475 shouldBeBlue(9, 19);
456 shouldBeBlack(10, 15); 476 shouldBeBlack(10, 15);
457 shouldBeBlack(14, 19); 477 shouldBeBlack(14, 19);
458 shouldBeRed(5, 21); 478 shouldBeRed(5, 21);
459 shouldBeRed(9, 24); 479 shouldBeRed(9, 24);
460 shouldBeGreen(11, 21); 480 shouldBeGreen(11, 21);
461 shouldBeGreen(14, 24); 481 shouldBeGreen(14, 24);
462 shouldBeClear(16, 29); 482 shouldBeClear(16, 29);
463 shouldBeClear(1, 14); 483 shouldBeClear(1, 14);
464 shouldBeClear(15, 15); 484 shouldBeClear(15, 15);
465 } else { 485 } else {
466 shouldBeClear(1, 1); 486 shouldBeClear(1, 1);
467 shouldBeClear(4, 4); 487 shouldBeClear(4, 4);
468 shouldBeRed(6, 6); 488 shouldBeRed(6, 6);
469 shouldBeRed(9, 9); 489 shouldBeRed(9, 9);
470 shouldBeGreen(11, 9); 490 shouldBeGreen(11, 9);
471 shouldBeBlue(9, 11); 491 shouldBeBlue(9, 11);
472 shouldBeBlack(11, 11); 492 shouldBeBlack(11, 11);
473 shouldBeBlack(14, 14); 493 shouldBeBlack(14, 14);
474 shouldBeClear(16, 1); 494 shouldBeClear(16, 1);
475 shouldBeClear(1, 16); 495 shouldBeClear(1, 16);
476 shouldBeClear(16, 16); 496 shouldBeClear(16, 16);
477 } 497 }*/
478 } 498 }
479 499
480 function checkOverCropRight(imageBitmap, option) { 500 function checkOverCropRight(imageBitmap, option) {
481 debug("Check over crop right."); 501 debug("Check over crop right.");
482 bitmap = imageBitmap; 502 bitmap = imageBitmap;
483 shouldBe("bitmap.width", "50"); 503 shouldBe("bitmap.width", "50");
484 shouldBe("bitmap.height", "50"); 504 shouldBe("bitmap.height", "50");
485 505
486 clearContext(ctx); 506 clearContext(ctx);
487 ctx.drawImage(imageBitmap, 0, 0); 507 ctx.drawImage(imageBitmap, 0, 0);
488 if (option == "flipY" || option == "bottomLeft") { 508 if (option == "flipY" || option == "bottomLeft") {
489 shouldBeBlack(1, 40); 509 shouldBeBlack(1, 40);
490 shouldBeBlack(9, 49); 510 shouldBeBlack(9, 49);
491 shouldBeClear(10, 49); 511 shouldBeClear(10, 49);
492 shouldBeClear(1, 39); 512 shouldBeClear(1, 39);
493 shouldBeClear(10, 40); 513 shouldBeClear(10, 40);
494 } else { 514 } else {
495 shouldBeBlack(1, 1); 515 shouldBeBlack(1, 1);
496 shouldBeBlack(9, 9); 516 shouldBeBlack(9, 9);
497 shouldBeClear(11, 11); 517 shouldBeClear(11, 11);
498 shouldBeClear(1, 11); 518 shouldBeClear(1, 11);
499 shouldBeClear(11, 1); 519 shouldBeClear(11, 1);
500 } 520 }
501 521
502 clearContext(ctx); 522 // comment out this part for now due to crbug.com/578889
523 /*clearContext(ctx);
503 ctx.drawImage(imageBitmap, 0, 0, 20, 20); 524 ctx.drawImage(imageBitmap, 0, 0, 20, 20);
504 if (option == "flipY" || option == "bottomLeft") { 525 if (option == "flipY" || option == "bottomLeft") {
505 shouldBeBlack(0, 16); 526 shouldBeBlack(0, 16);
506 shouldBeBlack(3, 19); 527 shouldBeBlack(3, 19);
507 shouldBeClear(4, 19); 528 shouldBeClear(4, 19);
508 shouldBeClear(0, 15); 529 shouldBeClear(0, 15);
509 shouldBeClear(4, 15); 530 shouldBeClear(4, 15);
510 } else { 531 } else {
511 shouldBeBlack(1, 1); 532 shouldBeBlack(1, 1);
512 shouldBeBlack(3, 3); 533 shouldBeBlack(3, 3);
513 shouldBeClear(5, 5); 534 shouldBeClear(5, 5);
514 shouldBeClear(1, 5); 535 shouldBeClear(1, 5);
515 shouldBeClear(5, 1); 536 shouldBeClear(5, 1);
516 } 537 }*/
517 538
518 clearContext(ctx); 539 clearContext(ctx);
519 ctx.drawImage(imageBitmap, 10, 10, 20, 20, 0, 0, 20, 20); 540 ctx.drawImage(imageBitmap, 10, 10, 20, 20, 0, 0, 20, 20);
520 if (option == "flipY" || option == "bottomLeft") { 541 if (option == "flipY" || option == "bottomLeft") {
521 shouldBeClear(1, 1); 542 shouldBeClear(1, 1);
522 shouldBeClear(3, 3); 543 shouldBeClear(3, 3);
523 shouldBeClear(5, 5); 544 shouldBeClear(5, 5);
524 shouldBeClear(1, 5); 545 shouldBeClear(1, 5);
525 shouldBeClear(5, 1); 546 shouldBeClear(5, 1);
526 } else { 547 } else {
(...skipping 17 matching lines...) Expand all
544 clearContext(ctx); 565 clearContext(ctx);
545 ctx.drawImage(imageBitmap, 0, 0); 566 ctx.drawImage(imageBitmap, 0, 0);
546 shouldBeClear(1, 1); 567 shouldBeClear(1, 1);
547 shouldBeClear(9, 9); 568 shouldBeClear(9, 9);
548 shouldBeClear(11, 11); 569 shouldBeClear(11, 11);
549 shouldBeClear(22, 22); 570 shouldBeClear(22, 22);
550 } 571 }
551 </script> 572 </script>
552 </body> 573 </body>
553 </html> 574 </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') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698