<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
async_test(t => {
  var channel = new MessageChannel();
  var canvas = document.createElement('canvas');
  canvas.width = canvas.height = 10;
  var offscreen = canvas.transferControlToOffscreen();
  channel.port2.onmessage = function(message) {
    var ctx = message.data.getContext('2d');
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 10, 10);
    setTimeout(() => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          var canvas2 = document.createElement('canvas');
          canvas2.width = canvas2.height = 10;
          var ctx2 = canvas2.getContext('2d');
          ctx2.drawImage(canvas, 0, 0);
          var pixel = ctx2.getImageData(0, 0, 1, 1).data;
          t.step(function() {
            assert_array_equals(pixel, [0, 255, 0, 255]);
          });
          t.done();
        });
      });
    }, 0);
  }
  channel.port1.postMessage(offscreen, [offscreen]);
}, "Verify that posting an OffscreenCanvas through a MessageChannel works as intended.");

test(function() {
  var channel = new MessageChannel();
  var canvas = document.createElement('canvas');
  canvas.width = canvas.height = 10;
  var offscreen = canvas.transferControlToOffscreen();
  channel.port2.onmessage = function() {};
  assert_throws("DataCloneError", function() {channel.port1.postMessage(offscreen)});
}, "Verify that cloning an OffscreenCanvas through a MessageChannel throws an exception")

</script>