| Index: LayoutTests/fast/canvas/canvas-createImageBitmap-recursive.html
|
| diff --git a/LayoutTests/fast/canvas/canvas-createImageBitmap-recursive.html b/LayoutTests/fast/canvas/canvas-createImageBitmap-recursive.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..06f6e6c0114c6c3c8b4f886d85ee2a28626ec089
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/canvas/canvas-createImageBitmap-recursive.html
|
| @@ -0,0 +1,138 @@
|
| +<html>
|
| +<head>
|
| +<script src="../js/resources/js-test-pre.js"></script>
|
| +</head>
|
| +<body>
|
| +<script>
|
| +description("Ensure correct behavior of drawImage with ImageBitmaps constructed from ImageBitmaps that are constructed from images (not pinned to memory) and canvases (pinned to memory).");
|
| +
|
| +window.jsTestIsAsync = true;
|
| +
|
| +function shouldBeFilled(x, y, w, h) {
|
| + shouldBeGreen(x+2, y+2);
|
| + shouldBeGreen(x+w-2, y+h-2);
|
| + shouldBeGreen(x+w/2, y+h/2);
|
| + shouldBeClear(x-2, y-2);
|
| + shouldBeClear(x+w+2, y+h+2);
|
| +}
|
| +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 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");
|
| +}
|
| +function shouldNotBeCalled() {
|
| + testFailed("Promise was rejected.");
|
| + finishJSTest();
|
| +}
|
| +function clearContext(context) {
|
| + context.clearRect(0, 0, 50, 50);
|
| +}
|
| +
|
| +var image;
|
| +var imageWidth = 20;
|
| +var imageHeight = 20;
|
| +
|
| +var aCanvas = document.createElement("canvas");
|
| +aCanvas.width = imageWidth;
|
| +aCanvas.height = imageHeight;
|
| +var aCtx = aCanvas.getContext("2d");
|
| +aCtx.fillStyle = 'rgb(0, 255, 0)';
|
| +aCtx.fillRect(0, 0, 20, 20);
|
| +
|
| +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();
|
| +
|
| +function imageLoaded() {
|
| + var bitmapFromImage, bitmapFromCanvas;
|
| + var p1 = createImageBitmap(image, -10, -10, 20, 20).then(function(imageBitmap) { bitmapFromImage = imageBitmap });
|
| + var p2 = createImageBitmap(aCanvas, 10, 10, 20, 20).then(function(imageBitmap) { bitmapFromCanvas = imageBitmap });
|
| + Promise.every(p1, p2).then(function() {
|
| + checkBitmaps(bitmapFromImage, bitmapFromCanvas);
|
| + }, shouldNotBeCalled);
|
| +}
|
| +
|
| +function checkBitmaps(bitmapFromImage, bitmapFromCanvas) {
|
| + var funcs = [];
|
| + var p1 = createImageBitmap(bitmapFromImage).then(function(imageBitmap) {
|
| + funcs[0] = checkDrawnToRect(imageBitmap, 10, 10, 10, 10);
|
| + });
|
| + var p2 = createImageBitmap(bitmapFromImage, -10, -10, 30, 30).then(function(imageBitmap) {
|
| + funcs[1] = checkDrawnToRect(imageBitmap, 20, 20, 10, 10);
|
| + });
|
| + var p3 = createImageBitmap(bitmapFromImage, 10, 10, 20, 20).then(function(imageBitmap) {
|
| + funcs[2] = checkDrawnToRect(imageBitmap, 0, 0, 10, 10);
|
| + });
|
| + var p4 = createImageBitmap(bitmapFromCanvas).then(function(imageBitmap) {
|
| + funcs[3] = checkDrawnToRect(imageBitmap, 0, 0, 10, 10);
|
| + });
|
| + var p5 = createImageBitmap(bitmapFromCanvas, -15, -10, 35, 40).then(function(imageBitmap) {
|
| + funcs[4] = checkDrawnToRect(imageBitmap, 15, 10, 10, 10);
|
| + });
|
| + var p6 = createImageBitmap(bitmapFromCanvas, 5, 5, 10, 10).then(function(imageBitmap) {
|
| + funcs[5] = checkDrawnToRect(imageBitmap, 0, 0, 5, 5);
|
| + });
|
| + Promise.every(p1, p2, p3, p4, p5, p6).then(function() {
|
| + for (var i = 0; i < funcs.length; ++i)
|
| + funcs[i]();
|
| + finishJSTest();
|
| + }, shouldNotBeCalled);
|
| +}
|
| +
|
| +function checkDrawnToRect(bitmap, x, y, w, h) {
|
| + // x, y, w, h are the expected location of the green square
|
| + var imageBitmap = bitmap;
|
| + var x1 = x;
|
| + var y1 = y;
|
| + var w1 = w;
|
| + var h1 = h;
|
| + return function() {
|
| + clearContext(ctx);
|
| + ctx.drawImage(imageBitmap, 0, 0);
|
| + shouldBeFilled(x1, y1, w1, h1);
|
| +
|
| + clearContext(ctx);
|
| + ctx.drawImage(imageBitmap, 10, 10, 40, 40);
|
| + // scale up w and h as necessary
|
| + var w2 = w1 * 40.0 / imageBitmap.width;
|
| + var h2 = h1 * 40.0 / imageBitmap.height;
|
| + // x and y are transformed
|
| + var x2 = x1 * w2 / w1 + 10;
|
| + var y2 = y1 * h2 / h1 + 10;
|
| + shouldBeFilled(x2, y2, w2, h2);
|
| +
|
| + clearContext(ctx);
|
| + ctx.drawImage(imageBitmap, 0, 0, 50, 50);
|
| + // scale up w and h as necessary
|
| + var w3 = w1 * 50.0 / imageBitmap.width;
|
| + var h3 = h1 * 50.0 / imageBitmap.height;
|
| + // x and y are transformed
|
| + var x3 = x1 * w3 / w1;
|
| + var y3 = y1 * h3 / h1;
|
| + shouldBeFilled(x3, y3, w3, h3);
|
| +
|
| + clearContext(ctx);
|
| + ctx.drawImage(imageBitmap, x1, y1, w1, h1, 0, 0, 50, 50);
|
| + shouldBeFilled(0, 0, 50, 50);
|
| + }
|
| +}
|
| +
|
| +</script>
|
| +<script src="../js/resources/js-test-post.js"></script>
|
| +</body>
|
| +</html>
|
|
|