| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | |
| 2 <html> | |
| 3 <head> | |
| 4 <script src="../../resources/js-test.js"></script> | |
| 5 </head> | |
| 6 <body> | |
| 7 <script> | |
| 8 | |
| 9 description("Ensure correct behavior of drawImage with ImageBitmaps from video e
lements along with flipY option."); | |
| 10 window.jsTestIsAsync = true; | |
| 11 | |
| 12 function jsWrapperClass(node) | |
| 13 { | |
| 14 // returns the ClassName of node | |
| 15 if (!node) | |
| 16 return "[null]"; | |
| 17 var string = Object.prototype.toString.apply(node); | |
| 18 | |
| 19 // string will be of the form [object ClassName] | |
| 20 return string.substr(8, string.length - 9); | |
| 21 } | |
| 22 | |
| 23 function shouldBeType(expression, className) | |
| 24 { | |
| 25 shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'"); | |
| 26 } | |
| 27 | |
| 28 function shouldBeOpaque(x, y) { | |
| 29 d = ctx.getImageData(x, y, 1, 1).data; | |
| 30 if (d[3] == 255) { | |
| 31 testPassed("This pixel is opaque"); | |
| 32 return; | |
| 33 } | |
| 34 testFailed("This pixel is expected to be opaque, but it is actually: " + d); | |
| 35 } | |
| 36 | |
| 37 function shouldBeClear(x, y) { | |
| 38 // should be transparent black pixels | |
| 39 d = ctx.getImageData(x, y, 1, 1).data; | |
| 40 if (d[0] == 0 && d[1] == 0 && d[2] == 0 && d[3] == 0) { | |
| 41 testPassed("This pixel is transparent black"); | |
| 42 return; | |
| 43 } | |
| 44 testFailed("This pixel is expected to be transparent black, but it is actual
ly: " + d); | |
| 45 } | |
| 46 | |
| 47 function clearContext() { | |
| 48 ctx.clearRect(0, 0, 500, 500); | |
| 49 } | |
| 50 | |
| 51 var bitmap; | |
| 52 var video; | |
| 53 var imageOrientationOptions = ["none", "flipY", "invalid"]; | |
| 54 var premultiplyAlphaOptions = ["default", "none", "premultiply", "invalid"]; | |
| 55 var optionIndexArray = [[0, 0], [0, 1], [0, 2], [0, 3], | |
| 56 [1, 0], [1, 1], [1, 2], [1, 3], | |
| 57 [2, 0], [2, 1], [2, 2], [2, 3]]; | |
| 58 var optionIndex = 0; | |
| 59 | |
| 60 var canvas = document.createElement("canvas"); | |
| 61 canvas.setAttribute("width", "500"); | |
| 62 canvas.setAttribute("height", "500"); | |
| 63 var ctx = canvas.getContext("2d"); | |
| 64 | |
| 65 video = document.createElement("video"); | |
| 66 video.addEventListener("canplaythrough", videoLoaded, false); | |
| 67 video.src = "../../compositing/resources/video.ogv"; | |
| 68 | |
| 69 function videoLoaded() { | |
| 70 if (optionIndex == optionIndexArray.length) { | |
| 71 finishJSTest(); | |
| 72 return; | |
| 73 } | |
| 74 var optionIndex1 = optionIndexArray[optionIndex][0]; | |
| 75 var optionIndex2 = optionIndexArray[optionIndex][1]; | |
| 76 debug("Checking HTMLVideoElement with imageOrientation: " + imageOrientation
Options[optionIndex1] + " with premultiplyAlphaOption: " + premultiplyAlphaOptio
ns[optionIndex2] + "."); | |
| 77 var imageBitmaps = {}; | |
| 78 var p1 = createImageBitmap(video, {imageOrientation: imageOrientationOptions
[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[optionIndex2]}).then(f
unction (image) { imageBitmaps.noCrop = image }); | |
| 79 var p2 = createImageBitmap(video, 0, 0, 100, 100, {imageOrientation: imageO
rientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[optio
nIndex2]}).then(function (image) { imageBitmaps.crop = image }); | |
| 80 var p3 = createImageBitmap(video, 50, 50, 100, 100, {imageOrientation: imag
eOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[opt
ionIndex2]}).then(function (image) { imageBitmaps.cropRight = image }); | |
| 81 var p4 = createImageBitmap(video, 100, 100, 100, 100, {imageOrientation: im
ageOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[o
ptionIndex2]}).then(function (image) { imageBitmaps.cropCenter = image }); | |
| 82 var p5 = createImageBitmap(video, -100, -100, 600, 600, {imageOrientation: i
mageOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[
optionIndex2]}).then(function (image) { imageBitmaps.overCrop = image }); | |
| 83 var p6 = createImageBitmap(video, 100, 100, 500, 500, {imageOrientation: ima
geOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[op
tionIndex2]}).then(function (image) { imageBitmaps.overCropRight = image }); | |
| 84 var p7 = createImageBitmap(video, 100, 100, -100, -100, {imageOrientation: i
mageOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[
optionIndex2]}).then(function (image) { imageBitmaps.negativeCrop = image }); | |
| 85 var p8 = createImageBitmap(video, -300, -300, 300, 300, {imageOrientation: i
mageOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[
optionIndex2]}).then(function (image) { imageBitmaps.empty = image }); | |
| 86 var p9 = createImageBitmap(video, 400, 300, 300, 300, {imageOrientation: ima
geOrientationOptions[optionIndex1], premultiplyAlpha: premultiplyAlphaOptions[op
tionIndex2]}).then(function (image) { imageBitmaps.emptyTwo = image }); | |
| 87 Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() { | |
| 88 checkNoCrop(imageBitmaps.noCrop, imageOrientationOptions[optionIndex1]); | |
| 89 checkCrop(imageBitmaps.crop, imageOrientationOptions[optionIndex1]); | |
| 90 checkCrop(imageBitmaps.cropRight, imageOrientationOptions[optionIndex1])
; | |
| 91 checkCrop(imageBitmaps.cropCenter, imageOrientationOptions[optionIndex1]
); | |
| 92 checkOverCrop(imageBitmaps.overCrop, imageOrientationOptions[optionIndex
1]); | |
| 93 checkOverCropRight(imageBitmaps.overCropRight, imageOrientationOptions[o
ptionIndex1]); | |
| 94 checkCrop(imageBitmaps.negativeCrop, imageOrientationOptions[optionIndex
1]); | |
| 95 checkEmpty(imageBitmaps.empty, imageOrientationOptions[optionIndex1]); | |
| 96 checkEmpty(imageBitmaps.emptyTwo, imageOrientationOptions[optionIndex1])
; | |
| 97 optionIndex++; | |
| 98 videoLoaded(); | |
| 99 }, function(ex) { | |
| 100 // when the options are invalid, we expect the promise to be rejected. | |
| 101 if (imageOrientationOptions[optionIndex1] == "invalid" || premultiplyAlp
haOptions[optionIndex2] == "invalid") { | |
| 102 testPassed("createImageBitmap with invalid options are rejected"); | |
| 103 optionIndex++; | |
| 104 videoLoaded(); | |
| 105 } else { | |
| 106 testFailed("Promise was rejected." + ex); | |
| 107 finishJSTest(); | |
| 108 return; | |
| 109 } | |
| 110 }); | |
| 111 } | |
| 112 | |
| 113 function checkNoCrop(imageBitmap, option) { | |
| 114 bitmap = imageBitmap; | |
| 115 shouldBeType("bitmap", "ImageBitmap"); | |
| 116 | |
| 117 // should be drawn to (0, 0), (352, 288) | |
| 118 clearContext(); | |
| 119 ctx.drawImage(imageBitmap, 0, 0); | |
| 120 shouldBeOpaque(10, 10); | |
| 121 shouldBeOpaque(100, 100); | |
| 122 shouldBeOpaque(300, 50); | |
| 123 shouldBeOpaque(350, 280); | |
| 124 shouldBeClear(360, 40); | |
| 125 shouldBeClear(80, 290); | |
| 126 | |
| 127 /*commenting out all cases because of crbug.com/578889 | |
| 128 // shrunk to (0, 0), (100, 100) | |
| 129 clearContext(ctx); | |
| 130 ctx.drawImage(imageBitmap, 0, 0, 100, 100); | |
| 131 shouldBeOpaque(40, 40); | |
| 132 shouldBeOpaque(90, 90); | |
| 133 shouldBeClear(10, 110); | |
| 134 shouldBeClear(110, 10); | |
| 135 shouldBeClear(110, 110); | |
| 136 | |
| 137 // shrunk to (100, 100), (250, 200) | |
| 138 clearContext(ctx); | |
| 139 ctx.drawImage(imageBitmap, 100, 100, 150, 100); | |
| 140 shouldBeClear(90, 90); | |
| 141 shouldBeOpaque(110, 110); | |
| 142 shouldBeOpaque(240, 190); | |
| 143 shouldBeClear(110, 210); | |
| 144 shouldBeClear(260, 110); | |
| 145 shouldBeClear(260, 210); | |
| 146 | |
| 147 // black should be drawn to (100, 100), (200, 200) | |
| 148 clearContext(ctx); | |
| 149 ctx.drawImage(imageBitmap, 100, 100, 100, 100, 100, 100, 100, 100); | |
| 150 shouldBeClear(90, 90); | |
| 151 shouldBeOpaque(110, 110); | |
| 152 shouldBeOpaque(190, 190); | |
| 153 shouldBeClear(10, 210); | |
| 154 shouldBeClear(210, 10); | |
| 155 shouldBeClear(210, 210); | |
| 156 | |
| 157 // nothing should be drawn | |
| 158 clearContext(ctx); | |
| 159 ctx.drawImage(imageBitmap, 400, 300, 200, 200, 100, 100, 100, 100); | |
| 160 shouldBeClear(10, 10); | |
| 161 shouldBeClear(80, 80); | |
| 162 shouldBeClear(150, 150); | |
| 163 shouldBeClear(210, 210);*/ | |
| 164 } | |
| 165 | |
| 166 function checkCrop(imageBitmap, option) { | |
| 167 bitmap = imageBitmap; | |
| 168 shouldBeType("bitmap", "ImageBitmap"); | |
| 169 | |
| 170 // should be drawn to (0, 0), (100, 100) | |
| 171 clearContext(); | |
| 172 ctx.drawImage(imageBitmap, 0, 0); | |
| 173 shouldBeOpaque(10, 10); | |
| 174 shouldBeOpaque(90, 90); | |
| 175 shouldBeClear(110, 110); | |
| 176 shouldBeClear(210, 210); | |
| 177 } | |
| 178 | |
| 179 function checkOverCrop(imageBitmap, option) { | |
| 180 bitmap = imageBitmap; | |
| 181 shouldBeType("bitmap", "ImageBitmap"); | |
| 182 | |
| 183 // should be drawn to (100, 100), (452, 388) | |
| 184 clearContext(); | |
| 185 ctx.drawImage(imageBitmap, 0, 0); | |
| 186 if (option == "none") { | |
| 187 shouldBeClear(10, 10); | |
| 188 shouldBeClear(90, 90); | |
| 189 shouldBeOpaque(110, 110); | |
| 190 shouldBeOpaque(300, 200); | |
| 191 shouldBeOpaque(450, 380); | |
| 192 shouldBeClear(500, 50); | |
| 193 shouldBeClear(50, 350); | |
| 194 shouldBeClear(460, 390); | |
| 195 } else { | |
| 196 shouldBeClear(10, 590); | |
| 197 shouldBeClear(90, 510); | |
| 198 shouldBeOpaque(110, 490); | |
| 199 shouldBeOpaque(300, 400); | |
| 200 shouldBeOpaque(450, 220); | |
| 201 shouldBeClear(500, 550); | |
| 202 shouldBeClear(50, 250); | |
| 203 shouldBeClear(460, 210); | |
| 204 } | |
| 205 | |
| 206 /*commenting out all cases because of crbug.com/578889 | |
| 207 // should be drawn to (50, 50), (226, 194) | |
| 208 clearContext(); | |
| 209 ctx.drawImage(imageBitmap, 0, 0, 300, 300); | |
| 210 if (option == "none") { | |
| 211 shouldBeClear(10, 10); | |
| 212 shouldBeClear(40, 40); | |
| 213 shouldBeOpaque(60, 60); | |
| 214 shouldBeOpaque(220, 190); | |
| 215 shouldBeClear(230, 50); | |
| 216 shouldBeClear(50, 200); | |
| 217 shouldBeClear(230, 200); | |
| 218 } else { | |
| 219 shouldBeClear(10, 290); | |
| 220 shouldBeClear(40, 260); | |
| 221 shouldBeOpaque(60, 240); | |
| 222 shouldBeOpaque(220, 110); | |
| 223 shouldBeClear(230, 250); | |
| 224 shouldBeClear(50, 100); | |
| 225 shouldBeClear(230, 100); | |
| 226 }*/ | |
| 227 } | |
| 228 | |
| 229 function checkOverCropRight(imageBitmap, option) { | |
| 230 bitmap = imageBitmap; | |
| 231 shouldBeType("bitmap", "ImageBitmap"); | |
| 232 | |
| 233 // should be drawn to (0, 0), (252, 188) | |
| 234 clearContext(); | |
| 235 ctx.drawImage(imageBitmap, 0, 0); | |
| 236 if (option == "none") { | |
| 237 shouldBeOpaque(10, 10); | |
| 238 shouldBeOpaque(100, 100); | |
| 239 shouldBeOpaque(200, 50); | |
| 240 shouldBeOpaque(50, 150); | |
| 241 shouldBeOpaque(250, 180); | |
| 242 shouldBeClear(360, 40); | |
| 243 shouldBeClear(80, 190); | |
| 244 shouldBeClear(260, 190); | |
| 245 } else { | |
| 246 shouldBeOpaque(10, 490); | |
| 247 shouldBeOpaque(100, 400); | |
| 248 shouldBeOpaque(200, 450); | |
| 249 shouldBeOpaque(50, 350); | |
| 250 shouldBeOpaque(250, 320); | |
| 251 shouldBeClear(360, 460); | |
| 252 shouldBeClear(80, 310); | |
| 253 shouldBeClear(260, 310); | |
| 254 } | |
| 255 } | |
| 256 | |
| 257 function checkEmpty(imageBitmap, option) { | |
| 258 bitmap = imageBitmap; | |
| 259 shouldBeType("bitmap", "ImageBitmap"); | |
| 260 | |
| 261 // nothing should be drawn | |
| 262 clearContext(); | |
| 263 ctx.drawImage(imageBitmap, 0, 0); | |
| 264 shouldBeClear(10, 10); | |
| 265 shouldBeClear(90, 90); | |
| 266 shouldBeClear(110, 110); | |
| 267 shouldBeClear(210, 210); | |
| 268 } | |
| 269 | |
| 270 </script> | |
| 271 </body> | |
| 272 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1809603004:
Use ImageDecoder for createImageBitmap(HTMLImageElement, premultiplyAlpha=false) (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master