<html>
<br> <canvas id="normalColors" width="60" height="60"></canvas>
<br> <canvas id="blackColors" width="60" height="60"></canvas>

<script>
  function requestAnimationFrameNtimesThen(times, fn) {
    if(times>0) {
      requestAnimationFrame(() => {
        requestAnimationFrameNtimesThen(times-1, fn);
      });
    } else
      fn();
  };

  if (window.testRunner) {
    testRunner.waitUntilDone();
  }
  // source content as canvas
  var htmlCanvas = document.createElement('canvas');
  htmlCanvas.width = 60;
  htmlCanvas.height = 60;
  var htmlCanvasCtx = htmlCanvas.getContext("2d");
  htmlCanvasCtx.fillStyle = "blue";
  htmlCanvasCtx.fillRect(0, 0, 15, 60);
  htmlCanvasCtx.fillStyle = "red";
  htmlCanvasCtx.fillRect(15, 0, 45, 30);
  htmlCanvasCtx.fillStyle = "green";
  htmlCanvasCtx.fillRect(15, 30, 45, 30);

  createImageBitmap(htmlCanvas).then(function(bmap){
    // This offscreen canvas will be used in several tests
    var canNewOffscreen = new OffscreenCanvas(60,60);
    var ctxNewOffscreen = canNewOffscreen.getContext("bitmaprenderer");
    ctxNewOffscreen.transferFromImageBitmap(bmap);

    var outputCanvas = document.getElementById("normalColors");
    var outputCanvasRenderer = outputCanvas.getContext("bitmaprenderer");
    outputCanvasRenderer.transferFromImageBitmap(canNewOffscreen.transferToImageBitmap());

    var outputCanvas = document.getElementById("blackColors");
    var outputCanvasRenderer = outputCanvas.getContext("bitmaprenderer");
    outputCanvasRenderer.transferFromImageBitmap(canNewOffscreen.transferToImageBitmap());

    if (window.testRunner) {
      requestAnimationFrameNtimesThen(1, () => {
        testRunner.notifyDone();
      });
    }
  });

</script>
</html>