<!DOCTYPE HTML> <title>Canvas test: mozGetAsFile</title> <script src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" href="/tests/SimpleTest/test.css"> <body> <canvas id="c" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> <script> function compareAsync(file, canvas, type, callback) { var reader = new FileReader(); reader.onload = function(e) { is(e.target.result, canvas.toDataURL(type), "<canvas>.mozGetAsFile().getAsDataURL() should equal <canvas>.toDataURL()"); callback(canvas); }; reader.readAsDataURL(file); } function test1(canvas) { var pngfile = canvas.mozGetAsFile("foo.png"); is(pngfile.type, "image/png", "Default type for mozGetAsFile should be PNG"); compareAsync(pngfile, canvas, "image/png", test2); is(pngfile.name, "foo.png", "File name should be what we passed in"); } function test2(canvas) { var jpegfile = canvas.mozGetAsFile("bar.jpg", "image/jpeg"); is(jpegfile.type, "image/jpeg", "When a valid type is specified that should be returned"); compareAsync(jpegfile, canvas, "image/jpeg", SimpleTest.finish); is(jpegfile.name, "bar.jpg", "File name should be what we passed in"); } SimpleTest.waitForExplicitFinish(); addLoadEvent(function () { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); ctx.drawImage(document.getElementById('yellow75.png'), 0, 0); test1(canvas); }); </script> <img src="image_yellow75.png" id="yellow75.png" class="resource">