| Index: LayoutTests/fast/canvas/canvas-createImageBitmap-createPattern.html
|
| diff --git a/LayoutTests/fast/canvas/canvas-createImageBitmap-createPattern.html b/LayoutTests/fast/canvas/canvas-createImageBitmap-createPattern.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..1ab2ba70854a196c49cc453dacf71f2ac8f8ed42
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/canvas/canvas-createImageBitmap-createPattern.html
|
| @@ -0,0 +1,189 @@
|
| +<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
| +<html>
|
| +<head>
|
| +<script src="../../resources/js-test.js"></script>
|
| +</head>
|
| +<body>
|
| +<script>
|
| +
|
| +description("Ensure correct behavior of createPattern with ImageBitmaps.");
|
| +window.jsTestIsAsync = true;
|
| +
|
| +function jsWrapperClass(node)
|
| +{
|
| + // returns the ClassName of node
|
| + if (!node)
|
| + return "[null]";
|
| + var string = Object.prototype.toString.apply(node);
|
| +
|
| + // string will be of the form [object ClassName]
|
| + return string.substr(8, string.length - 9);
|
| +}
|
| +
|
| +function shouldBeType(expression, className)
|
| +{
|
| + shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'");
|
| +}
|
| +
|
| +function shouldNotBeCalled() {
|
| + testFailed("createImageBitmap promise rejected.");
|
| + finishJSTest();
|
| +}
|
| +
|
| +function shouldBeRed(x, y) {
|
| + d = ctx.getImageData(x, y, 1, 1).data;
|
| + shouldBeTrue("d[0] == 255");
|
| + shouldBeTrue("d[1] == 0");
|
| + shouldBeTrue("d[2] == 0");
|
| + shouldBeTrue("d[3] == 255");
|
| +}
|
| +
|
| +function shouldBeGreen(x, y) {
|
| + d = ctx.getImageData(x, y, 1, 1).data;
|
| + shouldBeTrue("d[0] == 0");
|
| + shouldBeTrue("d[1] == 255");
|
| + shouldBeTrue("d[2] == 0");
|
| + shouldBeTrue("d[3] == 255");
|
| +}
|
| +
|
| +function shouldBeBlue(x, y) {
|
| + d = ctx.getImageData(x, y, 1, 1).data;
|
| + shouldBeTrue("d[0] == 0");
|
| + shouldBeTrue("d[1] == 0");
|
| + shouldBeTrue("d[2] == 255");
|
| + shouldBeTrue("d[3] == 255");
|
| +}
|
| +
|
| +function shouldBeBlack(x, y) {
|
| + d = ctx.getImageData(x, y, 1, 1).data;
|
| + shouldBeTrue("d[0] == 0");
|
| + shouldBeTrue("d[1] == 0");
|
| + shouldBeTrue("d[2] == 0");
|
| + shouldBeTrue("d[3] == 255");
|
| +}
|
| +
|
| +function shouldBeClear(x, y) {
|
| + // should be transparent black pixels
|
| + d = ctx.getImageData(x, y, 1, 1).data;
|
| + shouldBeTrue("d[0] == 0");
|
| + shouldBeTrue("d[1] == 0");
|
| + shouldBeTrue("d[2] == 0");
|
| + shouldBeTrue("d[3] == 0");
|
| +}
|
| +
|
| +var checks = { red: shouldBeRed,
|
| + green: shouldBeGreen,
|
| + blue: shouldBeBlue,
|
| + black: shouldBeBlack,
|
| + clear: shouldBeClear };
|
| +
|
| +function checkQuad(x, y, top_left, top_right, bottom_left, bottom_right) {
|
| + checks[top_left](x, y);
|
| + checks[top_right](x + 1, y);
|
| + checks[bottom_left](x, y + 1);
|
| + checks[bottom_right](x + 1, y + 1);
|
| +}
|
| +
|
| +function drawPattern(ctx) {
|
| + // Draw a four-color pattern
|
| + ctx.beginPath();
|
| + ctx.fillStyle = "rgb(255, 0, 0)";
|
| + ctx.fillRect(0, 0, 10, 10);
|
| + ctx.fillStyle = "rgb(0, 255, 0)";
|
| + ctx.fillRect(10, 0, 10, 10);
|
| + ctx.fillStyle = "rgb(0, 0, 255)";
|
| + ctx.fillRect(0, 10, 10, 10);
|
| + ctx.fillStyle = "rgb(0, 0, 0)";
|
| + ctx.fillRect(10, 10, 10, 10);
|
| +}
|
| +
|
| +function clearContext(context) {
|
| + context.clearRect(0, 0, 50, 50);
|
| +}
|
| +
|
| +var bitmap;
|
| +var image;
|
| +var testBitmap; // this is an ImageBitmap that is uncropped. We use this to test createImageBitmap(testBitmap)
|
| +var d; // image.imageData
|
| +var elements;
|
| +
|
| +var imageWidth = 20;
|
| +var imageHeight = 20;
|
| +
|
| +// Draw to an auxillary canvas.
|
| +var aCanvas = document.createElement("canvas");
|
| +aCanvas.width = imageWidth;
|
| +aCanvas.height = imageHeight;
|
| +var aCtx = aCanvas.getContext("2d");
|
| +drawPattern(aCtx);
|
| +
|
| +var canvas = document.createElement("canvas");
|
| +canvas.setAttribute("width", "50");
|
| +canvas.setAttribute("height", "50");
|
| +var ctx = canvas.getContext("2d");
|
| +
|
| +image = new Image();
|
| +image.onload = imageLoaded;
|
| +image.src = aCanvas.toDataURL();
|
| +
|
| +var imageLoaded = false;
|
| +var imageBitmapLoaded = false;
|
| +
|
| +function imageLoaded() {
|
| + createImageBitmap(image).then(imageBitmapLoadedCallback, shouldNotBeCalled);
|
| + d = aCtx.getImageData(0, 0, 20, 20);
|
| + imageLoaded = true;
|
| + loaded();
|
| +}
|
| +
|
| +function imageBitmapLoadedCallback(imageBitmap) {
|
| + testBitmap = imageBitmap;
|
| +
|
| + shouldBe("testBitmap.width", "imageWidth");
|
| + shouldBe("testBitmap.height", "imageHeight");
|
| +
|
| + // width and height are readonly
|
| + testBitmap.width = 42;
|
| + testBitmap.height = 42;
|
| + shouldBe("testBitmap.width", "imageWidth");
|
| + shouldBe("testBitmap.height", "imageHeight");
|
| +
|
| + imageBitmapLoaded = true;
|
| + loaded();
|
| +}
|
| +
|
| +function loaded() {
|
| + if (imageLoaded && imageBitmapLoaded) {
|
| + ctx.fillStyle = ctx.createPattern(testBitmap, "repeat");
|
| + ctx.fillRect(10, 10, 30, 30);
|
| +
|
| + // Check each pixel quad at each corner. The filled pattern
|
| + // is 3x3 squares of different colors, so there are four rows
|
| + // of four corners.
|
| +
|
| + checkQuad(9, 9, "clear", "clear", "clear", "black");
|
| + checkQuad(19, 9, "clear", "clear", "black", "blue");
|
| + checkQuad(29, 9, "clear", "clear", "blue", "black");
|
| + checkQuad(39, 9, "clear", "clear", "black", "clear");
|
| +
|
| + checkQuad(9, 19, "clear", "black", "clear", "green");
|
| + checkQuad(19, 19, "black", "blue", "green", "red");
|
| + checkQuad(29, 19, "blue", "black", "red", "green");
|
| + checkQuad(39, 19, "black", "clear", "green", "clear");
|
| +
|
| + checkQuad(9, 29, "clear", "green", "clear", "black");
|
| + checkQuad(19, 29, "green", "red", "black", "blue");
|
| + checkQuad(29, 29, "red", "green", "blue", "black");
|
| + checkQuad(39, 29, "green", "clear", "black", "clear");
|
| +
|
| + checkQuad(9, 39, "clear", "black", "clear", "clear");
|
| + checkQuad(19, 39, "black", "blue", "clear", "clear");
|
| + checkQuad(29, 39, "blue", "black", "clear", "clear");
|
| + checkQuad(39, 39, "black", "clear", "clear", "clear");
|
| +
|
| + finishJSTest();
|
| + }
|
| +}
|
| +</script>
|
| +</body>
|
| +</html>
|
|
|