third_party/WebKit/LayoutTests/fast/canvas/canvas-clip-stack-persistence.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       if (window.testRunner) {
  21         testRunner.waitUntilDone();
  22       }
  23       window.requestAnimationFrame(setupClips);
  24
  25       function setupClips() {
  26         // ctx1 covers clipPath and unrealized save on the stack
  27         ctx1.fillStyle = 'green';
  28         ctx1.fillRect(0, 0, 100, 100);
  29         ctx1.save();
  30         ctx1.beginPath();
  31         ctx1.moveTo(10, 10);
  32         ctx1.lineTo(90, 50);
  33         ctx1.lineTo(10, 90);
  34         ctx1.clip();
  35         ctx1.save();
  36
  37         // ctx2 covers accumulation of path and rect in separate layers
  38         ctx2.fillStyle = 'green';
  39         ctx2.fillRect(0, 0, 100, 100);
  40         ctx2.save();
  41         ctx2.beginPath();
  42         ctx2.moveTo(10, 10);
  43         ctx2.lineTo(90, 50);
  44         ctx2.lineTo(10, 90);
  45         ctx2.clip();
  46         ctx2.save();
  47         ctx2.beginPath();
  48         ctx2.rect(50, 0, 50, 100);
  49         ctx2.clip();
  50
  51         // ctx3 identical to ctx2, but will call restore before drawing
  52         ctx3.fillStyle = 'green';
  53         ctx3.fillRect(0, 0, 100, 100);
  54         ctx3.save();
  55         ctx3.beginPath();
  56         ctx3.moveTo(10, 10);
  57         ctx3.lineTo(90, 50);
  58         ctx3.lineTo(10, 90);
  59         ctx3.clip();
  60         ctx3.save();
  61         ctx3.beginPath();
  62         ctx3.rect(50, 0, 50, 100);
  63         ctx3.clip();
  64
  65         // ctx4 transformed clip
  66         ctx4.fillStyle = 'green';
  67         ctx4.fillRect(0, 0, 100, 100);
  68         ctx4.save();
  69         ctx4.translate(10, 0)
  70         ctx4.beginPath();
  71         ctx4.moveTo(10, 10);
  72         ctx4.lineTo(90, 50);
  73         ctx4.lineTo(10, 90);
  74         ctx4.clip();
  75
  76         window.requestAnimationFrame(drawPass)
  77       }
  78
  79       function drawPass() {
  80         ctx1.fillStyle = 'yellow';
  81         ctx1.fillRect(0, 0, 100, 100);
  82
  83         ctx2.fillStyle = 'yellow';
  84         ctx2.fillRect(0, 0, 100, 100);
  85
  86         ctx3.restore();
  87         ctx3.fillStyle = 'yellow';
  88         ctx3.fillRect(0, 0, 100, 100);
  89
  90         ctx4.fillStyle = 'yellow';
  91         ctx4.fillRect(-10, 0, 100, 100);
  92
  93         if (window.testRunner) {
  94           testRunner.notifyDone();
  95         }
  96       }
  97     </script>
  98   </body>
  99 </html>