<!DOCTYPE html>
<html>
  <head>
    <title>Test that the clip state persists across frame boundaries.</title>
  </head>
  <body>
    <canvas id='canvas1' width='100' height='100'></canvas>
    <canvas id='canvas2' width='100' height='100'></canvas>
    <canvas id='canvas3' width='100' height='100'></canvas>
    <canvas id='canvas4' width='100' height='100'></canvas>
    <script>
      var canvas1 = document.getElementById('canvas1');
      var canvas2 = document.getElementById('canvas2');
      var canvas3 = document.getElementById('canvas3');
      var canvas4 = document.getElementById('canvas4');
      var ctx1 = canvas1.getContext('2d');
      var ctx2 = canvas2.getContext('2d');
      var ctx3 = canvas3.getContext('2d');
      var ctx4 = canvas4.getContext('2d');

      ctx1.fillStyle = 'green';
      ctx1.fillRect(0, 0, 100, 100);
      ctx1.beginPath();
      ctx1.moveTo(10, 10);
      ctx1.lineTo(90, 50);
      ctx1.lineTo(10, 90);
      ctx1.clip();
      ctx1.fillStyle = 'yellow';
      ctx1.fillRect(0, 0, 100, 100);

      ctx2.drawImage(canvas1, 0, 0);
      ctx2.fillStyle = 'green';
      ctx2.fillRect(0, 0, 50, 100);

      ctx3.drawImage(canvas1, 0, 0);

      // ctx4 transformed clip
      ctx4.fillStyle = 'green';
      ctx4.fillRect(0, 0, 10, 100);
      ctx4.drawImage(canvas1, 10, 0);
  
    </script>
  </body>
</html>