<!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>