| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <script> |
| 5 function checkNoCrop(imageBitmap) |
| 6 { |
| 7 var canvas = document.createElement("canvas"); |
| 8 canvas.width = 50; |
| 9 canvas.height = 50; |
| 10 var ctx = canvas.getContext("2d"); |
| 11 ctx.clearRect(0, 0, canvas.width, canvas.height); |
| 12 ctx.drawImage(imageBitmap, 0, 0); |
| 13 var d = ctx.getImageData(0, 0, 1, 1).data; |
| 14 assert_array_equals(d, [255, 0, 0, 255], "This pixel should be red."); |
| 15 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); |
| 16 d = ctx.getImageData(39, 0, 1, 1).data; |
| 17 assert_array_equals(d, [0, 255, 0, 255], "This pixel should be green."); |
| 18 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); |
| 19 d = ctx.getImageData(0, 39, 1, 1).data; |
| 20 assert_array_equals(d, [0, 0, 255, 255], "This pixel should be blue."); |
| 21 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); |
| 22 d = ctx.getImageData(39, 39, 1, 1).data; |
| 23 assert_array_equals(d, [0, 0, 0, 255], "This pixel should be black."); |
| 24 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); |
| 25 d = ctx.getImageData(41, 41, 1, 1).data; |
| 26 assert_array_equals(d, [0, 0, 0, 0], "This pixel should be transparent black
."); |
| 27 console.log(d[0] + " " + d[1] + " " + d[2] + " " + d[3]); |
| 28 } |
| 29 |
| 30 function checkCrop(imageBitmap) |
| 31 { |
| 32 var canvas = document.createElement("canvas"); |
| 33 canvas.width = 50; |
| 34 canvas.height = 50; |
| 35 var ctx = canvas.getContext("2d"); |
| 36 ctx.clearRect(0, 0, canvas.width, canvas.height); |
| 37 ctx.drawImage(imageBitmap, 0, 0); |
| 38 var d = ctx.getImageData(0, 0, 1, 1).data; |
| 39 assert_array_equals(d, [255, 0, 0, 255], "This pixel should be red."); |
| 40 d = ctx.getImageData(19, 0, 1, 1).data; |
| 41 assert_array_equals(d, [0, 255, 0, 255], "This pixel should be green."); |
| 42 d = ctx.getImageData(0, 19, 1, 1).data; |
| 43 assert_array_equals(d, [0, 0, 255, 255], "This pixel should be blue."); |
| 44 d = ctx.getImageData(19, 19, 1, 1).data; |
| 45 assert_array_equals(d, [0, 0, 0, 255], "This pixel should be black."); |
| 46 d = ctx.getImageData(21, 21, 1, 1).data; |
| 47 assert_array_equals(d, [0, 0, 0, 0], "This pixel should be transparent black
."); |
| 48 } |
| 49 |
| 50 function compareBitmaps(bitmap1, bitmap2) |
| 51 { |
| 52 var canvas1 = document.createElement("canvas"); |
| 53 var canvas2 = document.createElement("canvas"); |
| 54 canvas1.width = 50; |
| 55 canvas1.height = 50; |
| 56 canvas2.width = 50; |
| 57 canvas2.height = 50; |
| 58 var ctx1 = canvas1.getContext("2d"); |
| 59 var ctx2 = canvas2.getContext("2d"); |
| 60 ctx1.clearRect(0, 0, canvas1.width, canvas1.height); |
| 61 ctx2.clearRect(0, 0, canvas2.width, canvas2.height); |
| 62 ctx1.drawImage(bitmap1, 0, 0); |
| 63 ctx2.drawImage(bitmap2, 0, 0); |
| 64 var data1 = ctx1.getImageData(0, 0, 50, 50).data; |
| 65 var data2 = ctx2.getImageData(0, 0, 50, 50).data; |
| 66 var dataMatched = true; |
| 67 for (var i = 0; i < data1.length; i++) { |
| 68 if (data1[i] != data2[i]) { |
| 69 dataMatched = false; |
| 70 break; |
| 71 } |
| 72 } |
| 73 assert_false(dataMatched); |
| 74 } |
| 75 |
| 76 function testImageBitmap(source) |
| 77 { |
| 78 return Promise.all([ |
| 79 createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQual
ity: "high"}), |
| 80 createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQual
ity: "medium"}), |
| 81 createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQual
ity: "low"}), |
| 82 createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQual
ity: "pixelated"}), |
| 83 createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeHeight
: 40, resizeQuality: "high"}), |
| 84 createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeHeight
: 40, resizeQuality: "medium"}), |
| 85 createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeHeight
: 40, resizeQuality: "low"}), |
| 86 createImageBitmap(source, 10, 10, 20, 20, {resizeWidth: 40, resizeHeight
: 40, resizeQuality: "pixelated"}), |
| 87 ]).then(([noCropHigh, noCropMedium, noCropLow, noCropPixelated, cropHigh, cr
opMedium, cropLow, cropPixelated]) => { |
| 88 checkNoCrop(noCropHigh); |
| 89 checkNoCrop(noCropMedium); |
| 90 checkNoCrop(noCropLow); |
| 91 checkNoCrop(noCropPixelated); |
| 92 checkCrop(cropHigh); |
| 93 checkCrop(cropMedium); |
| 94 checkCrop(cropLow); |
| 95 checkCrop(cropPixelated); |
| 96 // Brute-force comparison among all bitmaps is too expensive |
| 97 compareBitmaps(noCropHigh, noCropMedium); |
| 98 compareBitmaps(noCropLow, noCropPixelated); |
| 99 compareBitmaps(cropHigh, cropMedium); |
| 100 compareBitmaps(cropLow, cropPixelated); |
| 101 }); |
| 102 } |
| 103 |
| 104 function initializeTestCanvas() |
| 105 { |
| 106 var testCanvas = document.createElement("canvas"); |
| 107 testCanvas.width = 20; |
| 108 testCanvas.height = 20; |
| 109 var testCtx = testCanvas.getContext("2d"); |
| 110 testCtx.fillStyle = "rgb(255, 0, 0)"; |
| 111 testCtx.fillRect(0, 0, 10, 10); |
| 112 testCtx.fillStyle = "rgb(0, 255, 0)"; |
| 113 testCtx.fillRect(10, 0, 10, 10); |
| 114 testCtx.fillStyle = "rgb(0, 0, 255)"; |
| 115 testCtx.fillRect(0, 10, 10, 10); |
| 116 testCtx.fillStyle = "rgb(0, 0, 0)"; |
| 117 testCtx.fillRect(10, 10, 10, 10); |
| 118 return testCanvas; |
| 119 } |
| 120 |
| 121 // Blob |
| 122 promise_test(function() { |
| 123 return new Promise((resolve, reject) => { |
| 124 var xhr = new XMLHttpRequest(); |
| 125 xhr.open("GET", 'resources/pattern.png'); |
| 126 xhr.responseType = 'blob'; |
| 127 xhr.send(); |
| 128 xhr.onload = function() { |
| 129 resolve(xhr.response); |
| 130 }; |
| 131 }).then(testImageBitmap); |
| 132 }, 'createImageBitmap from a Blob with resize option.'); |
| 133 |
| 134 // HTMLCanvasElement |
| 135 promise_test(function() { |
| 136 var testCanvas = initializeTestCanvas(); |
| 137 return testImageBitmap(testCanvas); |
| 138 }, 'createImageBitmap from a HTMLCanvasElement with resize option.'); |
| 139 |
| 140 // HTMLImageElement |
| 141 promise_test(function() { |
| 142 return new Promise((resolve, reject) => { |
| 143 var image = new Image(); |
| 144 image.onload = function() { |
| 145 resolve(image); |
| 146 } |
| 147 image.src = 'resources/pattern.png' |
| 148 }).then(testImageBitmap); |
| 149 }, 'createImageBitmap from a HTMLImageElement with resize option.'); |
| 150 |
| 151 // ImageBitmap |
| 152 promise_test(function() { |
| 153 var testCanvas = initializeTestCanvas(); |
| 154 return createImageBitmap(testCanvas).then(testImageBitmap); |
| 155 }, 'createImageBitmap from an ImageBitmap with resize option.'); |
| 156 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2035113002:
Implement ImageBitmapOptions resize (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master