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

function draw2d(canvas) {
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  return ctx;
};

function drawWebGL(canvas) {
  var gl = canvas.getContext('webgl');
  gl.clearColor(0, 1, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  return gl;
};

// Run captureStream() after transferControlToOffscreen().
var testOffScreenCanvasCommits = function(drawFunction, message) {
  async_test(function(test) {
    var canvas = document.createElement('canvas');
    var offscreen = canvas.transferControlToOffscreen();

    var recorder = new MediaRecorder(canvas.captureStream());
    recorder.ondataavailable = test.step_func_done(function(event) {
      assert_true(event.data.size > 0, 'Recorded data size should be > 0');
    });
    recorder.start(0);

    var ctx = drawFunction(offscreen);
    ctx.commit();
  }), message;
};

testOffScreenCanvasCommits(draw2d,
                           'capture of an OffscreenCanvas with 2D context');
testOffScreenCanvasCommits(drawWebGL,
                           'capture of an OffscreenCanvas with WebGL context');
</script>