third_party/WebKit/LayoutTests/animations/negative-delay-events.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css">
   6     .box {
   7       position: relative;
   8       height: 25px;
   9       width: 25px;
  10       background-color: blue;
  11       margin: 10px;
  12     }
  13     .animation {
  14       -webkit-animation-duration: 0.1s;
  15       -webkit-animation-name: animation;
  16     }
  17     #animation1 {
  18       -webkit-animation-delay: 0.05s;
  19     }
  20     #animation2 {
  21       -webkit-animation-delay: -0.05s;
  22     }
  23     #animation3 {
  24       -webkit-animation-delay: -0.15s;
  25     }
  26     @-webkit-keyframes animation {
  27         from { left: 0; }
  28         to   { left: 500px; }
  29     }
  30   </style>
  31   <script type="text/javascript">
  32     if (window.testRunner) {
  33         testRunner.dumpAsText();
  34         testRunner.waitUntilDone();
  35     }
  36     function log(text) {
  37         var div = document.createElement('div');
  38         div.innerText = text;
  39         document.getElementById('log').appendChild(div);
  40     }
  41
  42     var count = 0;
  43     document.addEventListener('webkitAnimationStart', function(event) {
  44         var pass = event.elapsedTime === [0, 0.05, 0.15][count++];
  45         log((pass ? 'PASS' : 'FAIL') + ': ' + event.target.id + ': Start event: elapsedTime=' + event.elapsedTime);
  46     }, false);
  47
  48     document.addEventListener('webkitAnimationEnd', function(event) {
  49         var pass = event.elapsedTime === 0.1;
  50         log((pass ? 'PASS' : 'FAIL') + ': ' + event.target.id + ': End event: elapsedTime=' + event.elapsedTime);
  51         switch (count) {
  52         case 1:
  53             document.getElementById('animation2').classList.add('animation');
  54             break;
  55         case 2:
  56             document.getElementById('animation3').classList.add('animation');
  57             break;
  58         case 3:
  59             if (window.testRunner)
  60                 testRunner.notifyDone();
  61         }
  62     }, false);
  63   </script>
  64 </head>
  65 <body>
  66   <p>Tests animation events with a negative delay.
  67   <div id="animation1" class="box animation"></div>
  68   <div id="animation2" class="box"></div>
  69   <div id="animation3" class="box"></div>
  70   <div id="log"></div>
  71 </body>
  72 </html>