<!DOCTYPE html>
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/webgl-test.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<canvas id="canvas_source"></canvas>
<script id="vshader" type="x-shader/x-vertex">
  attribute vec4 vPosition;
  void main()
  {
      gl_Position = vPosition;
  }
</script>

<script id="fshader" type="x-shader/x-fragment">
  void main()
  {
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }
</script>
<script>
description("Exercises the potential events on CanvasCaptureMediaStream.");

window.jsTestIsAsync = true;

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

function onVideoPlay() {
  testPassed('Video play callback succeeded.');
};

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

function drawToCanvas(canvas) {
  testPassed('Drawing to canvas.');
  var ctx = initWebGL("canvas_source", "vshader", "fshader", [ "vPosition"], [ 0, 0, 0, 1 ], 1);
  ctx.drawArrays(ctx.TRIANGLES, 0, 3);
};

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

  var video = document.createElement('video');
  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();

  drawToCanvas(canvas);
};

try {
  stream = canvas.captureStream();
  testPassed('Got a stream from canvas.');
} catch (e) {
  testFailed('Exception calling captureStream(): ' + e);
  finishJSTest();
}
if (stream) {
  playMediaStream();
}
</script>
</body>
</html>