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> |