LayoutTests/animations/suspend-resume-animation-events.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <html lang="en">
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5   <title>Test event generation with suspendAnimations()/resumeAnimations() for animations</title>
   6   <style type="text/css" media="screen">
   7     #box {
   8       position: relative;
   9       height: 100px;
  10       width: 100px;
  11       background-color: blue;
  12       -webkit-animation-duration: 0.1s;
  13       -webkit-animation-timing-function: linear;
  14       -webkit-animation-direction: alternate;
  15       -webkit-animation-iteration-count: 2;
  16       -webkit-animation-name: "move";
  17     }
  18     @-webkit-keyframes "move" {
  19         from { left: 0; }
  20         to   { left: 500px; }
  21     }
  22     #log {
  23        margin-top: 20px;
  24        height: 300px;
  25        width: 500px;
  26        border: 2px solid gray;
  27     }
  28   </style>
  29   <script type="text/javascript" charset="utf-8">
  30
  31     function suspend()
  32     {
  33         if (window.internals)
  34             internals.suspendAnimations(document);
  35     }
  36
  37     function resume()
  38     {
  39         if (window.internals)
  40             internals.resumeAnimations(document);
  41     }
  42
  43     function startTest()
  44     {
  45         if (window.testRunner) {
  46             testRunner.dumpAsText();
  47             testRunner.waitUntilDone();
  48         }
  49
  50         setTimeout(suspend, 40);
  51         setTimeout(resume, 100);
  52         setTimeout(function()
  53         {
  54             if (window.testRunner)
  55                 testRunner.notifyDone();
  56         }, 350);
  57     }
  58
  59     function logEvent(e, phase)
  60     {
  61         var log = document.getElementById('log');
  62         log.innerHTML = log.innerHTML + phase + ' animation ' + e.animationName + '<br>';
  63     }
  64
  65
  66   </script>
  67 </head>
  68 <body onload="startTest()">
  69 <p>
  70 Events generated are displayed. There should be one start event one iteration event and one end event. There
  71 should not be a start event generated when the animation is resumed.
  72 <div id="box"
  73         onwebkitanimationstart="logEvent(event, 'start'); return false;"
  74         onwebkitanimationiteration="logEvent(event, 'iteration'); return false;"
  75         onwebkitanimationend="logEvent(event, 'end'); return false;"
  76 >
  77 </div>
  78 <p>Log</p>
  79 <div id="log">
  80 </div>
  81 </body>
  82 </html>