Chromium Code Reviews| 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 |