| <!DOCTYPE HTML> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| function shouldBeGreen(x, y) { |
| d = ctx.getImageData(x, y, 1, 1).data; |
| assert_array_equals(d, [0, 128, 0, 255]); |
| } |
| |
| function shouldBeTransparent(x, y) { |
| d = ctx.getImageData(x, y, 1, 1).data; |
| assert_array_equals(d, [0, 0, 0, 0]); |
| } |
| |
| function checkBitmap(imageBitmap, width, height) |
| { |
| bitmap = imageBitmap; |
| assert_equals(bitmap.width, width); |
| assert_equals(bitmap.height, height); |
| var half_width = width / 2; |
| var half_height = height / 2; |
| ctx.clearRect(0, 0, 200, 200); |
| ctx.drawImage(bitmap, 0, 0); |
| shouldBeGreen(0, 0); |
| shouldBeGreen(0, half_height - 1); |
| shouldBeGreen(half_width - 1, 0); |
| shouldBeGreen(half_width - 1, half_height - 1); |
| shouldBeTransparent(0, height - 1); |
| shouldBeTransparent(width - 1, 0); |
| shouldBeTransparent(width - 1, height - 1); |
| } |
| |
| function checkFlippedBitmap(imageBitmap, width, height) |
| { |
| bitmap = imageBitmap; |
| assert_equals(bitmap.width, width); |
| assert_equals(bitmap.height, height); |
| var half_width = width / 2; |
| var half_height = height / 2; |
| ctx.clearRect(0, 0, 200, 200); |
| ctx.drawImage(bitmap, 0, 0); |
| shouldBeTransparent(0, 0); |
| shouldBeTransparent(0, half_height - 1); |
| shouldBeTransparent(half_width - 1, 0); |
| shouldBeTransparent(half_width - 1, half_height - 1); |
| shouldBeGreen(0, half_height); |
| shouldBeGreen(half_width - 1, half_height); |
| shouldBeGreen(0, height - 1); |
| shouldBeGreen(half_width - 1, height - 1); |
| } |
| |
| function generateTests() { |
| imageBitmaps = {}; |
| var p1 = createImageBitmap(image).then(function(image) { imageBitmaps.noResize = image }); |
| var p2 = createImageBitmap(image, {resizeWidth: 50, resizeHeight: 50, resizeQuality: "high"}).then(function(image) { imageBitmaps.resizeDown = image }); |
| var p3 = createImageBitmap(image, 50, 50, 100, 100).then(function(image) { imageBitmaps.cropCenter = image }); |
| var p4 = createImageBitmap(image, 50, 50, 100, 100, {resizeWidth: 200, resizeHeight: 200, resizeQuality: "high"}).then(function(image) { imageBitmaps.cropResizeUp = image }); |
| var p5 = createImageBitmap(image, 50, 50, 100, 100, {resizeWidth: 50, resizeHeight: 50, resizeQuality: "high"}).then(function(image) { imageBitmaps.cropResizeDown = image }); |
| var p6 = createImageBitmap(image, {imageOrientation: "flipY"}).then(function(image) { imageBitmaps.noResizeFlip = image }); |
| var p7 = createImageBitmap(image, 50, 50, 100, 100, {imageOrientation: "flipY"}).then(function(image) { imageBitmaps.cropCenterFlip = image }); |
| var p8 = createImageBitmap(image, {resizeWidth: 100, resizeHeight: 100, resizeQuality: "high", imageOrientation: "flipY"}).then(function(image) { imageBitmaps.resizeFlip = image }); |
| var p9 = createImageBitmap(image, 50, 50, 100, 100, {resizeWidth: 200, resizeHeight: 200, resizeQuality: "high", imageOrientation: "flipY"}).then(function(image) { imageBitmaps.cropResizeFlip = image }); |
| return Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(t.step_func_done(function() { |
| checkBitmap(imageBitmaps.noResize, 200, 200); |
| checkBitmap(imageBitmaps.resizeDown, 50, 50); |
| checkBitmap(imageBitmaps.cropCenter, 100, 100); |
| checkBitmap(imageBitmaps.cropResizeUp, 200, 200); |
| checkBitmap(imageBitmaps.cropResizeDown, 50, 50); |
| checkFlippedBitmap(imageBitmaps.noResizeFlip, 200, 200); |
| checkFlippedBitmap(imageBitmaps.cropCenterFlip, 100, 100); |
| checkFlippedBitmap(imageBitmaps.resizeFlip, 100, 100); |
| checkFlippedBitmap(imageBitmaps.cropResizeFlip, 200, 200); |
| }), t.step_func_done(function() { |
| assert_true(false, 'Promise rejected'); |
| })); |
| } |
| |
| var t = async_test('createImageBitmap from svg'); |
| |
| var canvas = document.createElement("canvas"); |
| canvas.setAttribute("width", "200"); |
| canvas.setAttribute("height", "200"); |
| var ctx = canvas.getContext("2d"); |
| |
| var image = new Image(); |
| image.onload = t.step_func(function() { |
| return generateTests(); |
| }); |
| image.src = '../../svg/as-image/resources/100px-green-rect.svg'; |
| </script> |
