<!DOCTYPE html>
<script src =../../resources/testharness.js></script>
<script src =../../resources/testharnessreport.js></script>
<script>

async_test(t => {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  var recorder = new MediaRecorder(canvas.captureStream());
  var frameCount = 0;

  recorder.ondataavailable = function() {
    t.step(function() {
      assert_true(event.data.size > 0, 'Recorded data size should be > 0');
    });

    frameCount = frameCount + 1;
    if (frameCount > 3) {
      recorder.stop();
      t.done();
    } else {
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
  }

  recorder.start(0);
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}, "Verify that drawing to a 2D canvas that is not attached to the DOM dispatches frames to an attached MediaRecorder." );

async_test(t => {
  var canvas = document.createElement('canvas');
  var gl = canvas.getContext('webgl');
  gl.clearColor(0, 1, 0, 1);
  var recorder = new MediaRecorder(canvas.captureStream());
  var frameCount = 0;

  recorder.ondataavailable = function() {
    t.step(function() {
      assert_true(event.data.size > 0, 'Recorded data size should be > 0');
    });

    frameCount = frameCount + 1;
    if (frameCount > 3) {
      recorder.stop();
      t.done();
    } else {
      gl.clear(gl.COLOR_BUFFER_BIT);
    }
  }
  recorder.start(0);

  gl.clear(gl.COLOR_BUFFER_BIT);
}, "Verify that drawing to a webgl canvas that is not attached to the DOM dispatches frames to an attached MediaRecorder." );
</script>