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

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

Issue 20748002: Blob creation methods for ImageBitmap. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 5 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 | Annotate | Revision Log
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="../js/resources/js-test-pre.js"></script> 4 <script src="../js/resources/js-test-pre.js"></script>
5 </head> 5 </head>
6 <body> 6 <body>
7 <input type="file" name="file" id="file" onchange="onInputFileChange()">
7 <script> 8 <script>
8
9 description("Ensure correct behavior of drawImage with ImageBitmaps."); 9 description("Ensure correct behavior of drawImage with ImageBitmaps.");
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
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after
80 } 80 }
81 81
82 function clearContext(context) { 82 function clearContext(context) {
83 context.clearRect(0, 0, 50, 50); 83 context.clearRect(0, 0, 50, 50);
84 } 84 }
85 85
86 var bitmap; 86 var bitmap;
87 var image; 87 var image;
88 var testBitmap; // this is an ImageBitmap that is uncropped. We use this to test createImageBitmap(testBitmap) 88 var testBitmap; // this is an ImageBitmap that is uncropped. We use this to test createImageBitmap(testBitmap)
89 var d; // image.imageData 89 var d; // image.imageData
90 var blob;
90 var checks; 91 var checks;
91 var elements; 92 var elements;
92 93
93 var imageWidth = 20; 94 var imageWidth = 20;
94 var imageHeight = 20; 95 var imageHeight = 20;
95 96
96 // Create auxiliary canvas to draw to and create an image from. 97 // Create auxiliary canvas to draw to and create an image from.
97 var aCanvas = document.createElement("canvas"); 98 var aCanvas = document.createElement("canvas");
98 aCanvas.width = imageWidth; 99 aCanvas.width = imageWidth;
99 aCanvas.height = imageHeight; 100 aCanvas.height = imageHeight;
100 var aCtx = aCanvas.getContext("2d"); 101 var aCtx = aCanvas.getContext("2d");
101 drawPattern(aCtx); 102 drawPattern(aCtx);
102 103
103 var canvas = document.createElement("canvas"); 104 var canvas = document.createElement("canvas");
104 canvas.setAttribute("width", "50"); 105 canvas.setAttribute("width", "50");
105 canvas.setAttribute("height", "50"); 106 canvas.setAttribute("height", "50");
106 var ctx = canvas.getContext("2d"); 107 var ctx = canvas.getContext("2d");
107 108
108 image = new Image(); 109 image = new Image();
109 image.onload = imageLoaded; 110 image.onload = imageLoaded;
110 image.src = aCanvas.toDataURL(); // set a data URI of the base64 enconded image as the source 111 image.src = aCanvas.toDataURL(); // set a data URI of the base64 enconded image as the source
111 112
112 var imageLoaded = false; 113 var imageLoaded = false;
113 var imageBitmapLoaded = false; 114 var imageBitmapLoaded = false;
115 var blobLoaded = false;
114 116
115 function imageLoaded() { 117 function imageLoaded() {
116 createImageBitmap(image, imageBitmapLoadedCallback); 118 createImageBitmap(image, imageBitmapLoadedCallback);
117 d = aCtx.getImageData(0, 0, 20, 20); 119 d = aCtx.getImageData(0, 0, 20, 20);
118 imageLoaded = true; 120 imageLoaded = true;
119 loaded(); 121 loaded();
120 } 122 }
121 123
122 function imageBitmapLoadedCallback(imageBitmap) { 124 function imageBitmapLoadedCallback(imageBitmap) {
123 testBitmap = imageBitmap; 125 testBitmap = imageBitmap;
124 126
125 shouldBe("testBitmap.width", "imageWidth"); 127 shouldBe("testBitmap.width", "imageWidth");
126 shouldBe("testBitmap.height", "imageHeight"); 128 shouldBe("testBitmap.height", "imageHeight");
127 129
128 // width and height are readonly 130 // width and height are readonly
129 testBitmap.width = 42; 131 testBitmap.width = 42;
130 testBitmap.height = 42; 132 testBitmap.height = 42;
131 shouldBe("testBitmap.width", "imageWidth"); 133 shouldBe("testBitmap.width", "imageWidth");
132 shouldBe("testBitmap.height", "imageHeight"); 134 shouldBe("testBitmap.height", "imageHeight");
133 135
134 imageBitmapLoaded = true; 136 imageBitmapLoaded = true;
135 loaded(); 137 loaded();
136 } 138 }
137 139
140 if (window.eventSender) {
141 window.onload = function() {
142 eventSender.beginDragWithFiles(['resources/pattern.png']);
143 moveMouseToCenterOfElement(document.getElementById('file'));
144 eventSender.mouseUp();
Justin Novosad 2013/07/26 18:15:58 This is a weird indirect way to get a blob. Since
145 };
146 }
147
148 function onInputFileChange()
149 {
150 var file = document.getElementById("file").files[0];
151 var reader = new FileReader();
152 reader.onload = function(event) {
153 blob = new Blob([event.target.result]);
154 blobLoaded = true;
155 loaded();
156 }
157 reader.readAsArrayBuffer(file);
158 }
159
160 function moveMouseToCenterOfElement(element)
161 {
162 var centerX = element.offsetLeft + element.offsetWidth / 2;
163 var centerY = element.offsetTop + element.offsetHeight / 2;
164 eventSender.mouseMoveTo(centerX, centerY);
165 }
166
138 function loaded() { 167 function loaded() {
139 if (imageLoaded && imageBitmapLoaded) { 168 if (imageLoaded && imageBitmapLoaded && blobLoaded) {
140 // check all of these elements 169 // check all of these elements
141 elements = [image, aCanvas, d, aCtx, testBitmap]; 170 elements = [image, aCanvas, d, aCtx, blob, testBitmap];
142 171
143 // with all of these checks 172 // with all of these checks
144 checks = [checkNoCrop, checkCrop, checkCropRight, checkOverCrop, checkOv erCropRight, checkNegativeCrop, checkEmpty, checkEmpty2, checkImmutable]; 173 checks = [checkNoCrop, checkCrop, checkCropRight, checkOverCrop, checkOv erCropRight, checkNegativeCrop, checkEmpty, checkEmpty2];
145 174
146 // wait for callback to finish before each check to ensure synchronous b ehavior 175 // wait for callback to finish before each check to ensure synchronous b ehavior
147 nextCheck(); 176 nextCheck();
148 } 177 }
149 } 178 }
150 179
151 // these counters are incremented after every check 180 // these counters are incremented after every check
152 var i = 0; 181 var i = 0;
153 var j = 0; 182 var j = 0;
154 var callbackCount = 0; 183 var callbackCount = 0;
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
195 function checkEmpty(element) { 224 function checkEmpty(element) {
196 debug("checkEmpty with ".concat(jsWrapperClass(element))); 225 debug("checkEmpty with ".concat(jsWrapperClass(element)));
197 createImageBitmap(element, callbackEmpty, -30, -30, 30, 30); 226 createImageBitmap(element, callbackEmpty, -30, -30, 30, 30);
198 } 227 }
199 228
200 function checkEmpty2(element) { 229 function checkEmpty2(element) {
201 debug("checkEmpty2 with ".concat(jsWrapperClass(element))); 230 debug("checkEmpty2 with ".concat(jsWrapperClass(element)));
202 createImageBitmap(element, callbackEmpty, 40, 30, 30, 30); 231 createImageBitmap(element, callbackEmpty, 40, 30, 30, 30);
203 } 232 }
204 233
205 function checkImmutable(element) {
206 debug("checkImmutable with ".concat(jsWrapperClass(element)));
207 createImageBitmap(element, callbackImmutable);
208 }
209
210 function callbackNoCrop(imageBitmap) { 234 function callbackNoCrop(imageBitmap) {
211 bitmap = imageBitmap; 235 bitmap = imageBitmap;
212 shouldBe("bitmap.width", "imageWidth"); 236 shouldBe("bitmap.width", "imageWidth");
213 shouldBe("bitmap.height", "imageHeight"); 237 shouldBe("bitmap.height", "imageHeight");
214 238
215 // should be drawn to (0, 0), (20, 20) 239 // should be drawn to (0, 0), (20, 20)
216 clearContext(ctx); 240 clearContext(ctx);
217 ctx.drawImage(imageBitmap, 0, 0); 241 ctx.drawImage(imageBitmap, 0, 0);
218 shouldBeRed(9, 9); 242 shouldBeRed(9, 9);
219 shouldBeGreen(11, 9); 243 shouldBeGreen(11, 9);
(...skipping 198 matching lines...) Expand 10 before | Expand all | Expand 10 after
418 clearContext(ctx); 442 clearContext(ctx);
419 ctx.drawImage(imageBitmap, 0, 0); 443 ctx.drawImage(imageBitmap, 0, 0);
420 shouldBeClear(1, 1); 444 shouldBeClear(1, 1);
421 shouldBeClear(9, 9); 445 shouldBeClear(9, 9);
422 shouldBeClear(11, 11); 446 shouldBeClear(11, 11);
423 shouldBeClear(22, 22); 447 shouldBeClear(22, 22);
424 448
425 commonCallback(imageBitmap); 449 commonCallback(imageBitmap);
426 } 450 }
427 451
428 function callbackImmutable(imageBitmap) {
429 // change the underlying element to ensure that it does not change the image Bitmap
430 switch(i) {
431 case 0: // image
432 image = new Image();
433 break;
434 case 1: // canvas
435 clearContext(aCtx);
436 break;
437 case 2: // data
438 d = 0;
439 break;
440 case 3: // context
441 clearContext(aCtx);
442 break;
443 case 4: // bitmap
444 testBitmap = 0;
445 break;
446 default:
447 testFailed("Default should not be called.");
448 }
449 // should be drawn to (0, 0), (20, 20)
450 callbackNoCrop(imageBitmap);
451
452 // we potentially cleared our auxillary context, so redraw the image
453 drawPattern(aCtx);
454 }
455
456 function commonCallback(imageBitmap) { 452 function commonCallback(imageBitmap) {
457 bitmap = imageBitmap; 453 bitmap = imageBitmap;
458 shouldBeType("bitmap", "ImageBitmap"); 454 shouldBeType("bitmap", "ImageBitmap");
459 455
460 callbackCount += 1; 456 callbackCount += 1;
461 457
462 if (callbackCount < elements.length * checks.length) { 458 if (callbackCount < elements.length * checks.length) {
463 ++j; 459 ++j;
464 if(j == checks.length) { 460 if(j == checks.length) {
465 // completed all the checks for the ith element 461 // completed all the checks for the ith element
466 j = 0; 462 j = 0;
467 ++i; 463 ++i;
468 } 464 }
469 nextCheck(); 465 nextCheck();
470 } else { 466 } else {
471 finishJSTest(); 467 finishJSTest();
472 } 468 }
473 } 469 }
474 470
475 </script> 471 </script>
476 <script src="../js/resources/js-test-post.js"></script> 472 <script src="../js/resources/js-test-post.js"></script>
477 </body> 473 </body>
478 </html> 474 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698