 <!DOCTYPE html>
 <script src =../../resources/testharness.js></script>
 <script src =../../resources/testharnessreport.js></script>
 <body></body>
 <script>
  
 function draw2d(canvas) {
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};

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

// Run captureStream() on OffscreenCanvas that uses transferToImageBitmap().
var testOffScreenCanvasTransferBitmaps = function(drawFunction, message) {
  async_test(function(test) {
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    var ctx = canvas.getContext('bitmaprenderer');
    var offscreen = new OffscreenCanvas(64, 48);

    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);

    drawFunction(offscreen);
    var image = offscreen.transferToImageBitmap();
    assert_equals(image.width, 64);
    assert_equals(image.height, 48);
    ctx.transferFromImageBitmap(offscreen.transferToImageBitmap());
  }), message;
};

testOffScreenCanvasTransferBitmaps(
    draw2d,
    'captureStream() on OffscreenCanvas with 2D context using transferToImageBitmap().');
testOffScreenCanvasTransferBitmaps(
    drawWebGL,
    'captureStream() on OffscreenCanvas with WebGL context using transferToImageBitmap().');
</script>