<html>
<head>
    <style>
        img { border: 1px solid black; }
        pre { display: inline-block; margin: 5px; }
    </style>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText();

        function draw()
        {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect(10, 10, 55, 50);
            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect(30, 30, 55, 50);

            testToDataURL();
        }

        // Default list of supported image formats.
        var supportedMIMETypes = [
            "image/png",
            "image/jpeg",
            "image/gif",
        ];

        function testToDataURL()
        {
            // Test supported MIME types
            for (var i in supportedMIMETypes) {
                testMIMEType(supportedMIMETypes[i]);
            }

            // Test no MIME type
            testMIMEType();
            testMIMEType(null);
            testMIMEType(undefined);

            // Test other formats that we don't support
            testMIMEType("image/x-webkitbitmap");
        }

        function testMIMEType(mime)
        {
            var canvas = document.getElementById("canvas");

            var hadArgument = arguments.length;
            var url;
            if (!hadArgument)
                url = canvas.toDataURL();
            else
                url = canvas.toDataURL(mime);

            var image = document.createElement("img");
            image.src = url;
            var usedMIMEType = url.substring(5, url.search(/;/));
            document.body.appendChild(image);
            var info = document.createElement("pre");
            info.appendChild(document.createTextNode("Given MIMEType: " + (hadArgument ? mime : "")));
            info.appendChild(document.createTextNode("\n"));
            info.appendChild(document.createTextNode("Used MIMEType: " + usedMIMEType));
            info.appendChild(document.createTextNode("\n"));
            info.appendChild(document.createTextNode((mime == usedMIMEType) ? "MIME types are the SAME." :  "MIME types DIFFER."));
            info.appendChild(document.createTextNode("\n\n"));

            document.body.appendChild(info);
            document.body.appendChild(document.createElement("hr"));
        }
    </script>
</head>
<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas> The Actual Canvas <br><hr>
</body>
</html>