third_party/WebKit/LayoutTests/fast/canvas/canvas-toBlob-defaultpng.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<script>
async_test(t => {
    
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
    var canvas2 = document.createElement("canvas");
    var ctx2 = canvas2.getContext("2d");
    
    var newImg = new Image();
    newImg.onload = function() {
        // 300x150 is the default size of the canvas, which is the source of the newImg.
        ctx2.drawImage(newImg, 0, 0, 300, 150);

        var imageData1 = ctx.getImageData(0, 0, 150, 75).data;
        var imageData2 = ctx2.getImageData(0, 0, 150, 75).data;
        var imageMatched = true;
        for (var i = 1; i < imageData1.length; i++)
            if (imageData1[i]!=imageData2[i])
            {
                imageMatched = false;
                break;
            }
        assert_true(imageMatched);
        t.done();
    }
    
    canvas.toBlob(function(blob) {
        url = URL.createObjectURL(blob);
        newImg.src = url;
    });
    
}, "Verify whether the image data survives the toBlob process after async image encoding.");
</script>