canvas-state-stack-simple.html | Explore in Territory

<!DOCTYPE html>
<script>
  var context;

  window.onload = function() {
    if (window.testRunner)
      testRunner.waitUntilDone();
    context = document.getElementById('c').getContext('2d');
    context.scale(2,2);
    context.beginPath();
    context.rect(0,0,75,75);
    context.clip();
    context.fillStyle = 'red';
    context.fillRect(0,0,30,30);
    context.fillRect(50,50,30,30);
    context.save();
    context.scale(0.5,0.5);
    context.beginPath();
    context.rect(0,0,5,5);
    context.clip();
    requestAnimationFrame(drawSecondFrame);
  }

  function drawSecondFrame() {
    context.restore();
    context.fillStyle = 'green';
    context.fillRect(0,0,30,30);
    context.fillRect(50,50,30,30);
    if (window.testRunner)
      testRunner.notifyDone();
  }
</script>
<p>Two green squares of different sizes should appear below</p>
<canvas id="c" width="300" height="300"></canvas>

chromium/third_party/blink/web_tests/fast/canvas/canvas-state-stack-simple.html