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.testRunner)
  37         testRunner.waitUntilDone();
  38
  39     function suspendAndWaitForCompletion()
  40     {
  41         if (window.internals)
  42             internals.suspendAnimations(document);
  43
  44         window.setTimeout(function() {
  45             if (window.testRunner) {
  46                 internals.resumeAnimations(document);
  47                 testRunner.notifyDone();
  48             }
  49         }, 250);
  50     }
  51
  52     function doTest()
  53     {
  54         document.getElementById('box').addEventListener('webkitAnimationStart', function() {
  55             suspendAndWaitForCompletion();
  56         }, false)
  57
  58         document.getElementById('box').className = 'move';
  59     }
  60
  61     window.addEventListener('load', doTest, false);
  62   </script>
  63 </head>
  64 <body>
  65
  66 <!-- When suspended, the red box should be hidden by the green box. You should see no red. -->
  67 <div id="box"></div>
  68 <div id="safezone"></div>
  69
  70 <div id="result"></div>
  71
  72 </body>
  73 </html>