third_party/WebKit/LayoutTests/fast/canvas/canvas-state-stack-simple.html

   1 <!DOCTYPE html>
   2 <script>
   3   var context;
   4
   5   window.onload = function() {
   6     if (window.testRunner)
   7       testRunner.waitUntilDone();
   8     context = document.getElementById('c').getContext('2d');
   9     context.scale(2,2);
  10     context.beginPath();
  11     context.rect(0,0,75,75);
  12     context.clip();
  13     context.fillStyle = 'red';
  14     context.fillRect(0,0,30,30);
  15     context.fillRect(50,50,30,30);
  16     context.save();
  17     context.scale(0.5,0.5);
  18     context.beginPath();
  19     context.rect(0,0,5,5);
  20     context.clip();
  21     requestAnimationFrame(drawSecondFrame);
  22   }
  23
  24   function drawSecondFrame() {
  25     context.restore();
  26     context.fillStyle = 'green';
  27     context.fillRect(0,0,30,30);
  28     context.fillRect(50,50,30,30);
  29     if (window.testRunner)
  30       testRunner.notifyDone();
  31   }
  32 </script>
  33 <p>Two green squares of different sizes should appear below</p>
  34 <canvas id="c" width="300" height="300"></canvas>