third_party/WebKit/LayoutTests/fast/canvas/canvas-unbalanced-save.html

   1 <!DOCTYPE html>
   2 <script>
   3 var ctx;
   4 window.onload = function () {
   5     if (window.testRunner) {
   6         testRunner.waitUntilDone();
   7     }
   8     ctx = document.getElementById('c').getContext('2d');
   9     ctx.fillStyle = 'green';
  10     ctx.fillRect(0, 0, 100, 100);
  11     ctx.save();
  12     ctx.translate(10, 0);
  13     requestAnimationFrame(blueSquare);
  14 }
  15
  16 function blueSquare() {
  17     ctx.fillStyle = 'blue';
  18     ctx.fillRect(0, 10, 80, 80);
  19     requestAnimationFrame(redSquare);
  20 }
  21
  22 function redSquare() {
  23     ctx.fillStyle = 'red';
  24     ctx.fillRect(10, 20, 60, 60);
  25     if (window.testRunner) {
  26         testRunner.notifyDone();
  27     }
  28 }
  29 </script>
  30 <p>The canvas below should contain green, blue and red nested squares, all centered with respect to each other.</p>
  31 <canvas id="c" width="100" height="100"></canvas>