OLD | NEW |
---|---|
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 Loading... | |
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 Loading... | |
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 Loading... | |
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> |
OLD | NEW |