| <!DOCTYPE HTML> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| function createNewCanvas(width, height) |
| { |
| var canvas = document.createElement("canvas"); |
| canvas.width = width; |
| canvas.height = height; |
| var ctx = canvas.getContext("2d"); |
| ctx.clearRect(0, 0, width, height); |
| return ctx; |
| } |
| |
| function checkLowResult(imageBitmap, video, sx, sy, sw, sh) |
| { |
| var ctx1 = createNewCanvas(50, 50); |
| var ctx2 = createNewCanvas(50, 50); |
| ctx1.drawImage(imageBitmap, 0, 0); |
| ctx2.drawImage(video, sx, sy, sw, sh, 0, 0, 40, 30); |
| var data1 = ctx1.getImageData(0, 0, 50, 50).data; |
| var data2 = ctx2.getImageData(0, 0, 50, 50).data; |
| var dataMatched = true; |
| for (var i = 0; i < data1.length; i++) { |
| // data1[i] is strictly the same as data2[i] on software rendering. |
| // But on GPU, the difference could be quite significant. |
| if (Math.abs(data1[i] - data2[i]) > 18) { |
| dataMatched = false; |
| break; |
| } |
| } |
| assert_true(dataMatched); |
| } |
| |
| function generateTest() |
| { |
| return Promise.all([ |
| createImageBitmap(video, {resizeWidth: 40, resizeHeight: 30, resizeQuality: "high"}), |
| createImageBitmap(video, {resizeWidth: 40, resizeHeight: 30, resizeQuality: "medium"}), |
| createImageBitmap(video, {resizeWidth: 40, resizeHeight: 30, resizeQuality: "low"}), |
| createImageBitmap(video, {resizeWidth: 40, resizeHeight: 30, resizeQuality: "pixelated"}), |
| createImageBitmap(video, 50, 50, 160, 120, {resizeWidth: 40, resizeHeight: 30, resizeQuality: "high"}), |
| createImageBitmap(video, 50, 50, 160, 120, {resizeWidth: 40, resizeHeight: 30, resizeQuality: "medium"}), |
| createImageBitmap(video, 50, 50, 160, 120, {resizeWidth: 40, resizeHeight: 30, resizeQuality: "low"}), |
| createImageBitmap(video, 50, 50, 160, 120, {resizeWidth: 40, resizeHeight: 30, resizeQuality: "pixelated"}), |
| ]).then(t.step_func_done(([noCropHigh, noCropMedium, noCropLow, noCropPixelated, cropHigh, cropMedium, cropLow, cropPixelated]) => { |
| checkLowResult(noCropLow, video, 0, 0, video.videoWidth, video.videoHeight); |
| checkLowResult(cropLow, video, 50, 50, 160, 120); |
| }), t.step_func_done(function() { |
| assert_true(false, 'Promise rejected'); |
| })); |
| } |
| |
| var t = async_test('createImageBitmap(HTMLVideoElement) with resize option'); |
| |
| // HTMLVideoElement |
| var video = document.createElement("video"); |
| video.oncanplaythrough = t.step_func(function() { |
| return generateTest(); |
| }); |
| video.src = "../../compositing/resources/video.ogv"; |
| </script> |
