<!DOCTYPE HTML> <html> <head> <title>Test for bug 879717, check that a video element can be drawn into a canvas at various states of playback</title> <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> <script type="text/javascript" src="manifest.js"></script> </head> <body> <pre id="test"> <script class="testbody" type="text/javascript"> //longer timeout for slow platforms if (isSlowPlatform()) { SimpleTest.requestLongerTimeout(1.5); } var manager = new MediaTestManager; var canvas = document.createElement('canvas'); document.body.appendChild(canvas); var checkDrawImage = function(eventName, videoElement) { var exception = null; var exceptionName = "nothing"; try { var ctx = canvas.getContext('2d'); ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height); } catch (e) { exception = e; exceptionName = e.name; } ok(exception === null, "drawImage shouldn't throw an exception on " + eventName + " of " + videoElement.testName + ", got " + exceptionName); }; var checkDrawImageEventHandler = function(ev) { checkDrawImage(ev.type, ev.target); }; var startTest = function(media, token) { manager.started(token); // File playback var v1 = document.createElement("video"); v1.autoplay = true; // Captured file playback var v2 = document.createElement("video"); // Stream playback var v3 = document.createElement("video"); v3.autoplay = true; v1.gotLoadeddata = false; v2.gotLoadeddata = false; v3.gotLoadeddata = false; v1.testName = "v1 (" + media.name + ")"; v2.testName = "v2 (Captured " + media.name + ")"; v3.testName = "v3 (Stream of " + media.name + ")"; checkDrawImage("beforeplay", v1); checkDrawImage("beforeplay", v2); checkDrawImage("beforeplay", v3); v1.onloadedmetadata = checkDrawImageEventHandler; v2.onloadedmetadata = checkDrawImageEventHandler; v3.onloadedmetadata = checkDrawImageEventHandler; v1.onplay = checkDrawImageEventHandler; v2.onplay = checkDrawImageEventHandler; v3.onplay = checkDrawImageEventHandler; function onplaying(ev) { if (!ev.target.gotPlaying) { ev.target.gotPlaying = true; checkDrawImageEventHandler(ev); } } v1.onplaying = onplaying; v2.onplaying = onplaying; v3.onplaying = onplaying; var onloadeddata = function(ev) { ev.target.gotLoadeddata = true; checkDrawImageEventHandler(ev); }; v1.onloadeddata = onloadeddata; v2.onloadeddata = onloadeddata; v3.onloadeddata = onloadeddata; var checkFinished = function() { if (!v1.testFinished || !v2.testFinished || !v3.testFinished) { return; } ok(v1.gotLoadeddata, v1.testName + " should have gotten the 'loadeddata' event callback"); ok(v2.gotLoadeddata, v2.testName + " should have gotten the 'loadeddata' event callback"); ok(v3.gotLoadeddata, v3.testName + " should have gotten the 'loadeddata' event callback"); manager.finished(token); }; var onended = function(ev) { checkDrawImageEventHandler(ev); removeNodeAndSource(ev.target); ev.target.testFinished = true; checkFinished(); }; v1.onended = onended; v2.onended = onended; v3.onended = onended; document.body.appendChild(v1); document.body.appendChild(v2); document.body.appendChild(v3); v1.src = media.name; v2.src = media.name; v2.preload = 'metadata'; v2.addEventListener('loadedmetadata', function () { v3.srcObject = v2.mozCaptureStreamUntilEnded(); v2.play(); }); } manager.runTests(getPlayableVideos(gSmallTests), startTest); </script> </pre> </body> </html>