<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<canvas id="canvas_source"></canvas>
<video id="v"></video>
<script>
description("Exercises the requestFrame() call on captureStream(0).");

window.jsTestIsAsync = true;

var canvas = document.getElementById('canvas_source');
var stream;
var track;

function onVideoPlay() {
  testPassed('Video play callback succeeded.');
  drawToCanvas(canvas);
  testPassed('Calling requestFrame().');
  track.requestFrame();
};

function onVideoCanPlayThrough() {
  testPassed('Video canplaythrough callback succeeded.');
  finishJSTest();
};

function drawToCanvas(canvas) {
  testPassed('Drawing to canvas.');
  var ctx = canvas.getContext("2d");
  ctx.strokeStyle="#FF0204";
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(100, 100);
  ctx.stroke();
};

function playMediaStream() {
  shouldBe('stream.getVideoTracks().length', '1');
  track = stream.getVideoTracks()[0];
  shouldBeEqualToString('track.readyState', 'live');

  // var video = document.createElement('video');
  var video = document.getElementById('v');
  try {
    video.srcObject = stream;
    testPassed('Plugged stream to video tag.');
  } catch(e) {
    testFailed('Exception plugging stream to <video>: ' + e);
    finishJSTest();
  }
  video.addEventListener("play", onVideoPlay);
  video.addEventListener("canplaythrough", onVideoCanPlayThrough);
  video.play();
};

try {
  stream = canvas.captureStream(0);
  testPassed('Got a stream from canvas.');
} catch (e) {
  testFailed('Exception calling captureStream(): ' + e);
  finishJSTest();
}
if (stream) {
  playMediaStream();
}

</script>
</body>
</html>