third_party/WebKit/LayoutTests/fast/canvas/canvas-clip-stack-persistence-expected.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Test that the clip state persists across frame boundaries.</title>
   5   </head>
   6   <body>
   7     <canvas id='canvas1' width='100' height='100'></canvas>
   8     <canvas id='canvas2' width='100' height='100'></canvas>
   9     <canvas id='canvas3' width='100' height='100'></canvas>
  10     <canvas id='canvas4' width='100' height='100'></canvas>
  11     <script>
  12       var canvas1 = document.getElementById('canvas1');
  13       var canvas2 = document.getElementById('canvas2');
  14       var canvas3 = document.getElementById('canvas3');
  15       var canvas4 = document.getElementById('canvas4');
  16       var ctx1 = canvas1.getContext('2d');
  17       var ctx2 = canvas2.getContext('2d');
  18       var ctx3 = canvas3.getContext('2d');
  19       var ctx4 = canvas4.getContext('2d');
  20
  21       ctx1.fillStyle = 'green';
  22       ctx1.fillRect(0, 0, 100, 100);
  23       ctx1.beginPath();
  24       ctx1.moveTo(10, 10);
  25       ctx1.lineTo(90, 50);
  26       ctx1.lineTo(10, 90);
  27       ctx1.clip();
  28       ctx1.fillStyle = 'yellow';
  29       ctx1.fillRect(0, 0, 100, 100);
  30
  31       ctx2.drawImage(canvas1, 0, 0);
  32       ctx2.fillStyle = 'green';
  33       ctx2.fillRect(0, 0, 50, 100);
  34
  35       ctx3.drawImage(canvas1, 0, 0);
  36
  37       // ctx4 transformed clip
  38       ctx4.fillStyle = 'green';
  39       ctx4.fillRect(0, 0, 10, 100);
  40       ctx4.drawImage(canvas1, 10, 0);
  41
  42     </script>
  43   </body>
  44 </html>