<!doctype html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<body onload="runAfterLayoutAndPaint(repaintTest, true);">
  <canvas id="canvas-source-in" width="100" height="100"></canvas>
  <canvas id="canvas-copy" width="100" height="100"></canvas>
  <script>
  var compositeTypes = ['source-in','copy'];

  for (i = 0; i < compositeTypes.length; i++) {
    var canvas = document.getElementById('canvas-' + compositeTypes[i]);
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0, 0, 100, 100);
  }

  function repaintTest()
  {
    for (i = 0; i < compositeTypes.length; i++) {
      var canvas = document.getElementById('canvas-' + compositeTypes[i]);
      var ctx = canvas.getContext('2d');
      ctx.globalCompositeOperation = compositeTypes[i];
      ctx.fillStyle = '#00f';
      ctx.fillRect(40, 40, 20, 20);
    }
  }
  </script>
</body>