LayoutTests/animations/suspend-transform-animation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     #box {
   6         position: absolute;
   7         left: 0;
   8         top: 0;
   9         height: 100px;
  10         width: 100px;
  11         background-color: red;
  12         -webkit-animation-duration: 0.2s;
  13         -webkit-animation-timing-function: linear;
  14     }
  15
  16     .move {
  17         -webkit-animation-name: move;
  18     }
  19
  20     @-webkit-keyframes move {
  21         from { -webkit-transform: translateX(100px) scale(1); }
  22         to   { -webkit-transform: translateX(400px) scale(1); }
  23     }
  24
  25     #safezone {
  26         position: absolute;
  27         left: 0;
  28         top: 0;
  29         height: 100px;
  30         width: 300px;
  31         left: 100px;
  32         background-color: green;
  33     }
  34   </style>
  35   <script type="text/javascript" charset="utf-8">
  36     if (window.layoutTestController)
  37         layoutTestController.waitUntilDone();
  38
  39     function suspendAndWaitForCompletion()
  40     {
  41         if (window.internals)
  42             internals.suspendAnimations(document);
  43
  44         window.setTimeout(function() {
  45             if (window.layoutTestController)
  46                 layoutTestController.notifyDone();
  47         }, 250);
  48     }
  49
  50     function doTest()
  51     {
  52         document.getElementById('box').addEventListener('webkitAnimationStart', function() {
  53             suspendAndWaitForCompletion();
  54         }, false)
  55
  56         document.getElementById('box').className = 'move';
  57     }
  58
  59     window.addEventListener('load', doTest, false);
  60   </script>
  61 </head>
  62 <body>
  63
  64 <!-- When suspended, the red box should be hidden by the green box. You should see no red. -->
  65 <div id="box"></div>
  66 <div id="safezone"></div>
  67
  68 <div id="result"></div>
  69
  70 </body>
  71 </html>