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