| <!DOCTYPE html> |
| <html> |
| <title>createImageBitmap with sizing test</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/common/canvas-tests.js"></script> |
| <script src="common.js"></script> |
| <link rel="stylesheet" href="/common/canvas-tests.css"> |
| <body> |
| <script> |
| (function() { |
| |
| // The ImageBitmap part of the HTML specification says this should be an InvalidStateError, but |
| // the IDL requires an unsigned value, so the TypeError will hit first. |
| promise_test(function(t) { |
| return promise_rejects(t, new TypeError, createImageBitmap(new Image(), 0, 0, 10, 10, { resizeWidth: -10, resizeHeight: 10 })); |
| }, "createImageBitmap rejects with TypeError if resizeWidth is negative"); |
| |
| promise_test(function(t) { |
| return promise_rejects(t, new TypeError, createImageBitmap(new Image(), 0, 0, 10, 10, { resizeWidth: 10, resizeHeight: -10 })); |
| }, "createImageBitmap rejects with TypeError if resizeHeight is negative"); |
| |
| promise_test(function() { |
| return new Promise(function(resolve, reject) { |
| let img = new Image(); |
| img.onload = function() { resolve(img); }; |
| img.src = "resources/target-blue-dot.png"; |
| }).then(function(img) { |
| // Crop the 9x9 image into 5x5. |
| return createImageBitmap(img, 0, 0, 5, 5); |
| }).then(function(imageBitmap) { |
| assert_equals(imageBitmap.width, 5, "ImageBitmap width should be 5"); |
| assert_equals(imageBitmap.height, 5, "ImageBitmap height should be 5"); |
| |
| let [canvas, ctx] = create9x9CanvasWith2dContext(); |
| ctx.drawImage(imageBitmap, 0, 0); |
| _assertPixel(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255"); |
| _assertPixel(canvas, 4,3, 0,255,0,255, "4,3", "0,255,0,255"); |
| _assertPixel(canvas, 3,4, 0,255,0,255, "3,4", "0,255,0,255"); |
| _assertPixel(canvas, 4,4, 0,0,255,255, "4,4", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 5,4, 0,0,0,0, "5,4", "0,0,0,0"); // Outside source rectangle so transparent. |
| _assertPixel(canvas, 4,5, 0,0,0,0, "4,5", "0,0,0,0"); // Outside source rectangle so transparent. |
| }); |
| }, "createImageBitmap from HTMLImageElement with cropped source"); |
| |
| promise_test(function() { |
| return new Promise(function(resolve, reject) { |
| let canvas = create9x9CanvasWithTargetImage(); |
| // Crop the 9x9 image into 5x5. |
| resolve(createImageBitmap(canvas, 0, 0, 5, 5)); |
| }).then(function(imageBitmap) { |
| assert_equals(imageBitmap.width, 5, "ImageBitmap width should be 5"); |
| assert_equals(imageBitmap.height, 5, "ImageBitmap height should be 5"); |
| |
| let [canvas, ctx] = create9x9CanvasWith2dContext(); |
| ctx.drawImage(imageBitmap, 0, 0); |
| _assertPixel(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255"); |
| _assertPixel(canvas, 4,3, 0,255,0,255, "4,3", "0,255,0,255"); |
| _assertPixel(canvas, 3,4, 0,255,0,255, "3,4", "0,255,0,255"); |
| _assertPixel(canvas, 4,4, 0,0,255,255, "4,4", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 5,4, 0,0,0,0, "5,4", "0,0,0,0"); // Outside source rectangle so transparent. |
| _assertPixel(canvas, 4,5, 0,0,0,0, "4,5", "0,0,0,0"); // Outside source rectangle so transparent. |
| }); |
| }, "createImageBitmap from HTMLCanvasElement with cropped source"); |
| |
| promise_test(function() { |
| return new Promise(function(resolve, reject) { |
| let img = new Image(); |
| img.onload = function() { resolve(img); }; |
| img.src = "resources/target-blue-dot.png"; |
| }).then(function(img) { |
| // Source is only 9x9, so the 100x100 will be clamped. |
| return createImageBitmap(img, 0, 0, 100, 100); |
| }).then(function(imageBitmap) { |
| assert_equals(imageBitmap.width, 9, "ImageBitmap width should be 9"); |
| assert_equals(imageBitmap.height, 9, "ImageBitmap height should be 9"); |
| |
| let [canvas, ctx] = create9x9CanvasWith2dContext(); |
| ctx.drawImage(imageBitmap, 0, 0); |
| _assertPixel(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255"); |
| _assertPixel(canvas, 4,3, 0,255,0,255, "4,3", "0,255,0,255"); |
| _assertPixel(canvas, 3,4, 0,255,0,255, "3,4", "0,255,0,255"); |
| _assertPixel(canvas, 4,4, 0,0,255,255, "4,4", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 5,4, 0,255,0,255, "5,4", "0,255,0,255"); |
| _assertPixel(canvas, 4,5, 0,255,0,255, "4,5", "0,255,0,255"); |
| }); |
| }, "createImageBitmap with a cropping rectangle that is bigger than the source"); |
| |
| promise_test(function() { |
| return new Promise(function(resolve, reject) { |
| let img = new Image(); |
| img.onload = function() { resolve(img); }; |
| img.src = "resources/target-blue-dot.png"; |
| }).then(function(img) { |
| // Resize the 9x9 into 18x18, but without interpolation so that |
| // we can still do accurate pixel tests. |
| return createImageBitmap(img, 0, 0, 9, 9, { resizeWidth: 18, resizeHeight: 18, resizeQuality: "pixelated" }); |
| }).then(function(imageBitmap) { |
| assert_equals(imageBitmap.width, 18, "ImageBitmap width should be 18"); |
| assert_equals(imageBitmap.height, 18, "ImageBitmap height should be 18"); |
| |
| let [canvas, ctx] = create18x18CanvasWith2dContext(); |
| ctx.drawImage(imageBitmap, 0, 0); |
| // All the target points are now 2x what they would be normally. |
| _assertPixel(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255"); |
| _assertPixel(canvas, 8,6, 0,255,0,255, "8,6", "0,255,0,255"); |
| _assertPixel(canvas, 6,8, 0,255,0,255, "6,8", "0,255,0,255"); |
| _assertPixel(canvas, 8,8, 0,0,255,255, "8,8", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 9,9, 0,0,255,255, "9,9", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 10,8, 0,255,0,255, "10,8", "0,255,0,255"); |
| _assertPixel(canvas, 8,10, 0,255,0,255, "8,10", "0,255,0,255"); |
| |
| }); |
| }, "createImageBitmap with resizeWidth and resizeHeight"); |
| |
| promise_test(function() { |
| return new Promise(function(resolve, reject) { |
| let img = new Image(); |
| img.onload = function() { resolve(img); }; |
| img.src = "resources/target-blue-dot.png"; |
| }).then(function(img) { |
| // Only provide resizeHeight. |
| return createImageBitmap(img, 0, 0, 9, 9, { resizeHeight: 18, resizeQuality: "pixelated" }); |
| }).then(function(imageBitmap) { |
| assert_equals(imageBitmap.width, 18, "ImageBitmap width should be 18"); |
| assert_equals(imageBitmap.height, 18, "ImageBitmap height should be 18"); |
| |
| let [canvas, ctx] = create18x18CanvasWith2dContext(); |
| ctx.drawImage(imageBitmap, 0, 0); |
| // All the target points are now 2x what they would be normally. |
| _assertPixel(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255"); |
| _assertPixel(canvas, 8,6, 0,255,0,255, "8,6", "0,255,0,255"); |
| _assertPixel(canvas, 6,8, 0,255,0,255, "6,8", "0,255,0,255"); |
| _assertPixel(canvas, 8,8, 0,0,255,255, "8,8", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 9,9, 0,0,255,255, "9,9", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 10,8, 0,255,0,255, "10,8", "0,255,0,255"); |
| _assertPixel(canvas, 8,10, 0,255,0,255, "8,10", "0,255,0,255"); |
| |
| }); |
| }, "createImageBitmap with only resizeHeight should calculate resizeWidth"); |
| |
| promise_test(function() { |
| return new Promise(function(resolve, reject) { |
| let img = new Image(); |
| img.onload = function() { resolve(img); }; |
| img.src = "resources/target-blue-dot.png"; |
| }).then(function(img) { |
| // Only provide resizeWidth. |
| return createImageBitmap(img, 0, 0, 9, 9, { resizeWidth: 18, resizeQuality: "pixelated" }); |
| }).then(function(imageBitmap) { |
| assert_equals(imageBitmap.width, 18, "ImageBitmap width should be 18"); |
| assert_equals(imageBitmap.height, 18, "ImageBitmap height should be 18"); |
| |
| let [canvas, ctx] = create18x18CanvasWith2dContext(); |
| ctx.drawImage(imageBitmap, 0, 0); |
| // All the target points are now 2x what they would be normally. |
| _assertPixel(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255"); |
| _assertPixel(canvas, 8,6, 0,255,0,255, "8,6", "0,255,0,255"); |
| _assertPixel(canvas, 6,8, 0,255,0,255, "6,8", "0,255,0,255"); |
| _assertPixel(canvas, 8,8, 0,0,255,255, "8,8", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 9,9, 0,0,255,255, "9,9", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 10,8, 0,255,0,255, "10,8", "0,255,0,255"); |
| _assertPixel(canvas, 8,10, 0,255,0,255, "8,10", "0,255,0,255"); |
| |
| }); |
| }, "createImageBitmap with only resizeWidth should calculate resizeHeight"); |
| |
| promise_test(function() { |
| return new Promise(function(resolve, reject) { |
| let img = new Image(); |
| img.onload = function() { resolve(img); }; |
| img.src = "resources/target-blue-dot.svg"; |
| }).then(function(img) { |
| return createImageBitmap(img); |
| }).then(function(imageBitmap) { |
| let [canvas, ctx] = create9x9CanvasWith2dContext(); |
| ctx.drawImage(imageBitmap, 0, 0); |
| _assertPixel(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255"); |
| _assertPixel(canvas, 4,3, 0,255,0,255, "4,3", "0,255,0,255"); |
| _assertPixel(canvas, 3,4, 0,255,0,255, "3,4", "0,255,0,255"); |
| _assertPixel(canvas, 4,4, 0,0,255,255, "4,4", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 5,4, 0,255,0,255, "5,4", "0,255,0,255"); |
| _assertPixel(canvas, 4,5, 0,255,0,255, "4,5", "0,255,0,255"); |
| }); |
| }, "createImageBitmap with an SVG uses intrinsic size"); |
| |
| promise_test(function() { |
| return new Promise(function(resolve, reject) { |
| let img = new Image(); |
| img.onload = function() { resolve(img); }; |
| img.src = "resources/target-blue-dot-no-intrinsic.svg"; |
| }).then(function(img) { |
| return createImageBitmap(img, { resizeWidth: 9, resizeHeight: 9 }); |
| }).then(function(imageBitmap) { |
| let [canvas, ctx] = create9x9CanvasWith2dContext(); |
| ctx.drawImage(imageBitmap, 0, 0); |
| _assertPixel(canvas, 0,0, 0,255,0,255, "0,0", "0,255,0,255"); |
| _assertPixel(canvas, 4,3, 0,255,0,255, "4,3", "0,255,0,255"); |
| _assertPixel(canvas, 3,4, 0,255,0,255, "3,4", "0,255,0,255"); |
| _assertPixel(canvas, 4,4, 0,0,255,255, "4,4", "0,0,255,255"); // Target blue dot. |
| _assertPixel(canvas, 5,4, 0,255,0,255, "5,4", "0,255,0,255"); |
| _assertPixel(canvas, 4,5, 0,255,0,255, "4,5", "0,255,0,255"); |
| }); |
| }, "createImageBitmap with an SVG that has no intrinsic size uses resize parameters"); |
| |
| })(); |
| </script> |
| </body> |
| </html> |
