[WebAPI] TC dev for ImageBitmap (#3658)

Impacted tests(approved): new 3, update 0, delete 0 Unit test platform: Crosswalk Project for Android 20.50.533.0 Unit test result summary: pass 3, fail 0, block 0 BUG=https://crosswalk-project.org/jira/browse/CTS-1746
crosswalk-project · Jun 16, 2016 · e3aea44 · e3aea44
1 parent 0aaeef6
commit e3aea44
Show file tree

Hide file tree

Showing 8 changed files with 1,263 additions and 0 deletions.
diff --git a/webapi/tct-canvas-html5-tests/canvas/WebKit/COPYING b/webapi/tct-canvas-html5-tests/canvas/WebKit/COPYING
@@ -0,0 +1,23 @@
+This test suite comes from
+https://chromium.googlesource.com/chromium/src.git 
+with modification:
+
+canvas-createImageBitmap-recursive.html
+
+  -<script src="../../resources/js-test.js"></script>
+  +<script src="./resources/js-test.js"></script>
+
+canvas-createImageBitmap-blob-in-workers.html
+canvas-createImageBitmap-from-canvas-toBlob.html
+
+  -<script src="../../../../resources/js-test.js"></script>
+  +<script src="./resources/js-test.js"></script>
+
+canvas-createImageBitmap-blob-in-workers.html
+
+  -var worker = new Worker('../../../../fast/canvas/resources/canvas-createImageBitmap-blob-in-workers.js');
+  +var worker = new Worker('./resources/canvas-createImageBitmap-blob-in-workers.js');
+
+These tests are copyright by chromium and/or the author listed in the test
+file. The tests are dual-licensed under the License:
+https://src.chromium.org/viewvc/chrome/trunk/src/LICENSE
diff --git a/webapi/tct-canvas-html5-tests/canvas/WebKit/canvas-createImageBitmap-blob-in-workers.html b/webapi/tct-canvas-html5-tests/canvas/WebKit/canvas-createImageBitmap-blob-in-workers.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="./resources/js-test.js"></script>
+</head>
+<body>
+<script>
+jsTestIsAsync = true;
+var worker = new Worker('./resources/canvas-createImageBitmap-blob-in-workers.js');
+
+description('Test race condition for createImageBitmap from blob in workers and main.');
+
+var imgWidth = 20;
+var imgHeight = 20;
+var numOfBitmaps = 5;
+var bitmapArray = [];
+
+var canvas1 = document.createElement("canvas");
+var ctx1 = canvas1.getContext("2d");
+ctx1.fillStyle = "#FF0000";
+ctx1.fillRect(0, 0, imgWidth, imgHeight);
+
+function compareImageData(data1, data2)
+{
+    if (data1.length != data2.length) {
+        testFailed("The two image have different dimensions");
+        finishJSTest();
+    }
+    for (var i = 0; i < data1.length; i++) {
+        if (data1[i] != data2[i]) {
+            testFailed("The two image have different pixel data");
+            finishJSTest();
+        }
+    }
+}
+
+var getMessageFromWorker = new Promise((resolve, reject) => {
+    function onMessage(e) {
+        resolve(e.data.data);
+        worker.removeEventListener("message", onMessage);
+    }
+    worker.addEventListener("message", onMessage);
+});
+
+// check that the created ImageBitmaps from worker and main have the same pixel
+// data as the source, which is the canvas1.toBlob
+var newImg = new Image();
+canvas1.toBlob(function(blob) {
+    worker.postMessage(blob);
+    for (var i = 0; i < numOfBitmaps; i++) {
+        createImageBitmap(blob).then(imageBitmap => {
+            bitmapArray.push(imageBitmap);
+            if (bitmapArray.length == numOfBitmaps) {
+                var url = URL.createObjectURL(blob);
+                newImg.src = url;
+            }
+        });
+    }
+});
+
+var imageLoaded = new Promise((resolve, reject) => {
+    newImg.onload = function() {
+        var canvas2 = document.createElement("canvas");
+        var ctx2 = canvas2.getContext("2d");
+        ctx2.drawImage(newImg, 0, 0, imgWidth, imgHeight);
+        resolve(ctx2.getImageData(0, 0, imgWidth, imgHeight).data);
+    };
+});
+
+Promise.all([imageLoaded, getMessageFromWorker]).then(([imageDataFromImg, imageBitmapFromWorker]) => {
+    var canvas3 = document.createElement("canvas");
+    var ctx3 = canvas3.getContext("2d");
+    for (var i = 0; i < numOfBitmaps; i++) {
+        ctx3.clearRect(0, 0, imgWidth, imgHeight);
+        ctx3.drawImage(bitmapArray[i], 0, 0, imgWidth, imgHeight);
+        var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data;
+        compareImageData(imageData, imageDataFromImg);
+    }
+
+    ctx3.clearRect(0, 0, imgWidth, imgHeight);
+    ctx3.drawImage(imageBitmapFromWorker, 0, 0, imgWidth, imgHeight);
+    var imageData = ctx3.getImageData(0, 0, imgWidth, imgHeight).data;
+    compareImageData(imageData, imageDataFromImg);
+    testPassed("ImageBitmaps created from blob in worker and in main have the same pixel data");
+    finishJSTest();
+});
+
+</script>
+</body>
+</html>
diff --git a/webapi/tct-canvas-html5-tests/canvas/WebKit/canvas-createImageBitmap-from-canvas-toBlob.html b/webapi/tct-canvas-html5-tests/canvas/WebKit/canvas-createImageBitmap-from-canvas-toBlob.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<script src="./resources/js-test.js"></script>
+<script>
+jsTestIsAsync = true;
+
+description("Tests that createImageBitmap from a canvas.toBlob object should have the same pixel data as the blob.");
+
+var imageData2;
+var imageData3;
+
+var canvas1 = document.createElement("canvas");
+var ctx1 = canvas1.getContext("2d");
+ctx1.fillStyle = "#FF0000";
+ctx1.fillRect(0, 0, 150, 75);
+
+var newImg = new Image();
+newImg.onload = function() {
+    var canvas3 = document.createElement("canvas");
+    var ctx3 = canvas3.getContext("2d");
+    ctx3.drawImage(newImg, 0, 0, 150, 75);
+
+    imageData3 = ctx3.getImageData(0, 0, 150, 75).data;
+    var imageMatched = true;
+    for (var i = 1; i < imageData2.length; i++) {
+        if (imageData2[i] != imageData3[i]) {
+            imageMatched = false;
+            break;
+        }
+    }
+    if (imageMatched)
+        testPassed("image data from the created ImageBitmap and the originated blob is the same");
+    else
+        testFailed("image data from the created ImageBitmap and the originated blob is NOT the same");
+    finishJSTest();
+}
+
+canvas1.toBlob(function(blob) {
+    createImageBitmap(blob).then(imageBitmap => {
+        var canvas2 = document.createElement("canvas");
+        var ctx2 = canvas2.getContext("2d");
+        ctx2.drawImage(imageBitmap, 0, 0, 150, 75);
+        imageData2 = ctx2.getImageData(0, 0, 150, 75).data;
+        url = URL.createObjectURL(blob);
+        newImg.src = url;
+    });
+});
+</script>
diff --git a/webapi/tct-canvas-html5-tests/canvas/WebKit/canvas-createImageBitmap-recursive.html b/webapi/tct-canvas-html5-tests/canvas/WebKit/canvas-createImageBitmap-recursive.html
@@ -0,0 +1,138 @@
+<html>
+<head>
+<script src="./resources/js-test.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-3, y+h-3);
+    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;
+    shouldBe("d[0]", "0");
+    shouldBe("d[1]", "255");
+    shouldBe("d[2]", "0");
+    shouldBe("d[3]", "255");
+}
+function shouldBeClear(x, y) {
+    // should be transparent black pixels
+    d = ctx.getImageData(x, y, 1, 1).data;
+    shouldBe("d[0]", "0");
+    shouldBe("d[1]", "0");
+    shouldBe("d[2]", "0");
+    shouldBe("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.all([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.all([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.imageSmoothingEnabled=false;
+        ctx.drawImage(imageBitmap, x1, y1, w1, h1, 0, 0, 50, 50);
+        shouldBeFilled(0, 0, 50, 50);
+    }
+}
+
+</script>
+</body>
+</html>
diff --git a/...ct-canvas-html5-tests/canvas/WebKit/resources/canvas-createImageBitmap-blob-in-workers.js b/...ct-canvas-html5-tests/canvas/WebKit/resources/canvas-createImageBitmap-blob-in-workers.js
@@ -0,0 +1,5 @@
+self.addEventListener('message', function(e) {
+  createImageBitmap(e.data).then(imageBitmap => {
+    postMessage({data: imageBitmap}, [imageBitmap]);
+  });
+});