third_party/WebKit/ManualTests/animated-canvas-as-background.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 #container {
   6     width: 300px;
   7     height: 300px;
   8     background-image: -webkit-canvas(sourceCanvas);
   9     background-size: 100%;
  10     display: inline-block;
  11 }
  12 </style>
  13 </head>
  14 <body>
  15     <p>This test passes if two green squares are displayed below.</p>
  16     <div>
  17         <div style="display: inline-block">
  18             <div id="container"></div>
  19         </div>
  20         <div id="canvas-container" style="display: inline-block"></div>
  21     </div>
  22     <script>
  23         var ctx = document.getCSSCanvasContext('2d', 'sourceCanvas', 300, 300);
  24         var canvas = ctx.canvas;
  25
  26         function asyncDraw2() {
  27             ctx.fillStyle = "green";
  28             ctx.fillRect(0, 0, 300, 300);
  29         }
  30
  31         function asyncDraw1() {
  32             ctx.fillStyle = "red";
  33             ctx.fillRect(0, 0, 300, 300);
  34             window.webkitRequestAnimationFrame(asyncDraw2);
  35         }
  36
  37         window.webkitRequestAnimationFrame(asyncDraw1);
  38
  39         document.querySelector('#canvas-container').appendChild(canvas);
  40     </script>
  41 </body>
  42 </html>