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 <script> | 7 <script> |
8 | 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 |
19 // string will be of the form [object ClassName] | 19 // string will be of the form [object ClassName] |
20 return string.substr(8, string.length - 9); | 20 return string.substr(8, string.length - 9); |
21 } | 21 } |
22 | 22 |
23 function shouldBeType(expression, className) | 23 function shouldBeType(expression, className) |
24 { | 24 { |
25 shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'"); | 25 shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'"); |
26 } | 26 } |
27 | 27 |
| 28 function shouldNotBeCalled() { |
| 29 testFailed("createImageBitmap promise rejected."); |
| 30 finishJSTest(); |
| 31 } |
| 32 |
28 function shouldBeRed(x, y) { | 33 function shouldBeRed(x, y) { |
29 d = ctx.getImageData(x, y, 1, 1).data; | 34 d = ctx.getImageData(x, y, 1, 1).data; |
30 shouldBeTrue("d[0] == 255"); | 35 shouldBeTrue("d[0] == 255"); |
31 shouldBeTrue("d[1] == 0"); | 36 shouldBeTrue("d[1] == 0"); |
32 shouldBeTrue("d[2] == 0"); | 37 shouldBeTrue("d[2] == 0"); |
33 shouldBeTrue("d[3] == 255"); | 38 shouldBeTrue("d[3] == 255"); |
34 } | 39 } |
35 | 40 |
36 function shouldBeGreen(x, y) { | 41 function shouldBeGreen(x, y) { |
37 d = ctx.getImageData(x, y, 1, 1).data; | 42 d = ctx.getImageData(x, y, 1, 1).data; |
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
85 | 90 |
86 var bitmap; | 91 var bitmap; |
87 var image; | 92 var image; |
88 var testBitmap; // this is an ImageBitmap that is uncropped. We use this to test
createImageBitmap(testBitmap) | 93 var testBitmap; // this is an ImageBitmap that is uncropped. We use this to test
createImageBitmap(testBitmap) |
89 var d; // image.imageData | 94 var d; // image.imageData |
90 var elements; | 95 var elements; |
91 | 96 |
92 var imageWidth = 20; | 97 var imageWidth = 20; |
93 var imageHeight = 20; | 98 var imageHeight = 20; |
94 | 99 |
95 // Create auxiliary canvas to draw to and create an image from. | 100 // Draw to an auxillary canvas. |
96 var aCanvas = document.createElement("canvas"); | 101 var aCanvas = document.createElement("canvas"); |
97 aCanvas.width = imageWidth; | 102 aCanvas.width = imageWidth; |
98 aCanvas.height = imageHeight; | 103 aCanvas.height = imageHeight; |
99 var aCtx = aCanvas.getContext("2d"); | 104 var aCtx = aCanvas.getContext("2d"); |
100 drawPattern(aCtx); | 105 drawPattern(aCtx); |
101 | 106 |
102 var canvas = document.createElement("canvas"); | 107 var canvas = document.createElement("canvas"); |
103 canvas.setAttribute("width", "50"); | 108 canvas.setAttribute("width", "50"); |
104 canvas.setAttribute("height", "50"); | 109 canvas.setAttribute("height", "50"); |
105 var ctx = canvas.getContext("2d"); | 110 var ctx = canvas.getContext("2d"); |
106 | 111 |
107 image = new Image(); | 112 image = new Image(); |
108 image.onload = imageLoaded; | 113 image.onload = imageLoaded; |
109 image.src = aCanvas.toDataURL(); // set a data URI of the base64 enconded image
as the source | 114 image.src = aCanvas.toDataURL(); |
110 | 115 |
111 var imageLoaded = false; | 116 var imageLoaded = false; |
112 var imageBitmapLoaded = false; | 117 var imageBitmapLoaded = false; |
| 118 var blobLoaded = false; |
113 | 119 |
114 function imageLoaded() { | 120 function imageLoaded() { |
115 createImageBitmap(image).then(imageBitmapLoadedCallback); | 121 createImageBitmap(image).then(imageBitmapLoadedCallback, shouldNotBeCalled); |
116 d = aCtx.getImageData(0, 0, 20, 20); | 122 d = aCtx.getImageData(0, 0, 20, 20); |
117 imageLoaded = true; | 123 imageLoaded = true; |
118 loaded(); | 124 loaded(); |
119 } | 125 } |
120 | 126 |
121 function imageBitmapLoadedCallback(imageBitmap) { | 127 function imageBitmapLoadedCallback(imageBitmap) { |
122 testBitmap = imageBitmap; | 128 testBitmap = imageBitmap; |
123 | 129 |
124 shouldBe("testBitmap.width", "imageWidth"); | 130 shouldBe("testBitmap.width", "imageWidth"); |
125 shouldBe("testBitmap.height", "imageHeight"); | 131 shouldBe("testBitmap.height", "imageHeight"); |
126 | 132 |
127 // width and height are readonly | 133 // width and height are readonly |
128 testBitmap.width = 42; | 134 testBitmap.width = 42; |
129 testBitmap.height = 42; | 135 testBitmap.height = 42; |
130 shouldBe("testBitmap.width", "imageWidth"); | 136 shouldBe("testBitmap.width", "imageWidth"); |
131 shouldBe("testBitmap.height", "imageHeight"); | 137 shouldBe("testBitmap.height", "imageHeight"); |
132 | 138 |
133 imageBitmapLoaded = true; | 139 imageBitmapLoaded = true; |
134 loaded(); | 140 loaded(); |
135 } | 141 } |
136 | 142 |
| 143 var xhr = new XMLHttpRequest(); |
| 144 xhr.open("GET", 'resources/pattern.png'); |
| 145 xhr.responseType = 'blob'; |
| 146 xhr.send(); |
| 147 xhr.onload = function() { |
| 148 blob = xhr.response; |
| 149 blobLoaded = true; |
| 150 loaded(); |
| 151 } |
| 152 |
137 function loaded() { | 153 function loaded() { |
138 if (imageLoaded && imageBitmapLoaded) { | 154 if (imageLoaded && imageBitmapLoaded && blobLoaded) { |
139 // check all of these elements | 155 // check all of these elements |
140 elements = [image, aCanvas, d, aCtx, testBitmap]; | 156 elements = [image, aCanvas, d, aCtx, testBitmap, blob]; |
141 | 157 |
142 // wait for callback to finish before each check to ensure synchronous b
ehavior | 158 // wait for callback to finish before each check to ensure synchronous b
ehavior |
143 nextCheck(0); | 159 nextCheck(0); |
144 } | 160 } |
145 } | 161 } |
146 | 162 |
147 function nextCheck(elementIndex) { | 163 function nextCheck(elementIndex) { |
148 if (elementIndex == elements.length) { | 164 if (elementIndex == elements.length) { |
149 finishJSTest(); | 165 finishJSTest(); |
150 return; | 166 return; |
(...skipping 14 matching lines...) Expand all Loading... |
165 checkNoCrop(imageBitmaps.noCrop); | 181 checkNoCrop(imageBitmaps.noCrop); |
166 checkCrop(imageBitmaps.crop); | 182 checkCrop(imageBitmaps.crop); |
167 checkCropCenter(imageBitmaps.cropCenter); | 183 checkCropCenter(imageBitmaps.cropCenter); |
168 checkCropRight(imageBitmaps.cropRight); | 184 checkCropRight(imageBitmaps.cropRight); |
169 checkOverCrop(imageBitmaps.overCrop); | 185 checkOverCrop(imageBitmaps.overCrop); |
170 checkOverCropRight(imageBitmaps.overCropRight); | 186 checkOverCropRight(imageBitmaps.overCropRight); |
171 checkCrop(imageBitmaps.negativeCrop); | 187 checkCrop(imageBitmaps.negativeCrop); |
172 checkEmpty(imageBitmaps.empty); | 188 checkEmpty(imageBitmaps.empty); |
173 checkEmpty(imageBitmaps.emptyTwo); | 189 checkEmpty(imageBitmaps.emptyTwo); |
174 nextCheck(elementIndex + 1); | 190 nextCheck(elementIndex + 1); |
175 }, function() { | 191 }, shouldNotBeCalled); |
176 testFailed("createImageBitmap promise rejected."); | |
177 finishJSTest(); | |
178 }); | |
179 } | 192 } |
180 | 193 |
181 function checkNoCrop(imageBitmap) { | 194 function checkNoCrop(imageBitmap) { |
182 debug("Check no crop."); | 195 debug("Check no crop."); |
183 bitmap = imageBitmap; | 196 bitmap = imageBitmap; |
184 shouldBeType("bitmap", "ImageBitmap"); | 197 shouldBeType("bitmap", "ImageBitmap"); |
185 shouldBe("bitmap.width", "imageWidth"); | 198 shouldBe("bitmap.width", "imageWidth"); |
186 shouldBe("bitmap.height", "imageHeight"); | 199 shouldBe("bitmap.height", "imageHeight"); |
187 | 200 |
188 // should be drawn to (0, 0), (20, 20) | 201 // should be drawn to (0, 0), (20, 20) |
(...skipping 202 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
391 ctx.drawImage(imageBitmap, 0, 0); | 404 ctx.drawImage(imageBitmap, 0, 0); |
392 shouldBeClear(1, 1); | 405 shouldBeClear(1, 1); |
393 shouldBeClear(9, 9); | 406 shouldBeClear(9, 9); |
394 shouldBeClear(11, 11); | 407 shouldBeClear(11, 11); |
395 shouldBeClear(22, 22); | 408 shouldBeClear(22, 22); |
396 } | 409 } |
397 </script> | 410 </script> |
398 <script src="../js/resources/js-test-post.js"></script> | 411 <script src="../js/resources/js-test-post.js"></script> |
399 </body> | 412 </body> |
400 </html> | 413 </html> |
OLD | NEW |