third_party/WebKit/LayoutTests/fast/canvas/canvas-overflow-hidden-animation.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4   <style>
   5 #canvas {
   6   width: 300px;
   7   height: 300px;
   8   position: absolute;
   9   left: 0px;
  10   top: 0px;
  11 }
  12
  13 #overlay {
  14   width: 300px;
  15   height: 300px;
  16   position: absolute;
  17   left: 0px;
  18   top: 0px;
  19   overflow: hidden;
  20 }
  21
  22 #follower {
  23   position: absolute;
  24   left: 50px;
  25   top: 50px;
  26   width: 50px;
  27   height: 50px;
  28   background-color: #00FF00;
  29 }
  30   </style>
  31   </head>
  32   <body>
  33   <canvas id="canvas"></canvas>
  34   <div id="overlay"><div id="follower"></div></div>
  35     <script>
  36 if (window.testRunner) {
  37   testRunner.waitUntilDone();
  38 }
  39
  40 var canvas = document.getElementById("canvas");
  41 canvas.width = 300;
  42 canvas.height = 300;
  43
  44 var ctx = canvas.getContext("2d");
  45 ctx.fillStyle = "#FF0000";
  46
  47 var follower = document.getElementById("follower");
  48
  49 drawLoop = function() {
  50   // update the follower
  51   follower.style.left = "0px";
  52   follower.style.top  = "0px";
  53
  54   // draw the object
  55   ctx.clearRect(0, 0, 300, 300);
  56   ctx.fillRect(0, 0, 50, 50);
  57
  58   if (window.testRunner) {
  59     testRunner.notifyDone();
  60   }
  61 };
  62
  63 window.setTimeout(drawLoop, 0);
  64     </script>
  65   </body>
  66 </html>
  67