third_party/WebKit/LayoutTests/animations/delay-start-event.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5     .target {
   6       position: relative;
   7       height: 100px;
   8       width: 100px;
   9       background-color: red;
  10       margin-bottom: 10px;
  11     }
  12     .animated {
  13       -webkit-animation: test 1s linear;
  14       animation: test 1s linear;
  15     }
  16     #negative-delay {
  17       -webkit-animation-delay: -500ms;
  18       animation-delay: -500ms;
  19     }
  20     #zero-delay {
  21       -webkit-animation-delay: 0ms;
  22       animation-delay: 0ms;
  23     }
  24     #positive-delay {
  25       -webkit-animation-delay: 500ms;
  26       animation-delay: 500ms;
  27     }
  28     @-webkit-keyframes test {
  29         from { left: 100px; }
  30         to   { left: 300px; }
  31     }
  32     @keyframes test {
  33         from { left: 100px; }
  34         to   { left: 300px; }
  35     }
  36   </style>
  37   <script type="text/javascript">
  38     if (window.testRunner) {
  39       testRunner.dumpAsText();
  40       testRunner.waitUntilDone();
  41     }
  42
  43     var immediate = true;
  44     onload = function() {
  45       requestAnimationFrame(function(t) {
  46         ['negative-delay', 'zero-delay', 'positive-delay'].forEach(function(id) {
  47           var target = document.getElementById(id);
  48           target.addEventListener('webkitAnimationStart', onStartEventFired);
  49           target.classList.add('animated');
  50         });
  51         requestAnimationFrame(function() {
  52           immediate = false;
  53         });
  54       });
  55     };
  56
  57     function log(message) {
  58       var div = document.createElement('div');
  59       div.textContent = message;
  60       document.body.appendChild(div);
  61     }
  62
  63     function onStartEventFired(e) {
  64       var id = e.target.id;
  65       var pass = immediate || id == 'positive-delay';
  66       log((pass ? 'PASS' : 'FAIL') + ': ' + id + ': Start event ' + (immediate ? 'fired' : 'did not fire') + ' immediately');
  67       if (id === 'positive-delay' && window.testRunner) {
  68         testRunner.notifyDone();
  69       }
  70     }
  71   </script>
  72 </head>
  73 <body>
  74   <p>Tests that the start event is fired at the correct time with different start delays.</p>
  75   <div class="target" id="negative-delay"></div>
  76   <div class="target" id="zero-delay"></div>
  77   <div class="target" id="positive-delay"></div>
  78   <div id="result"></div>
  79 </body>
  80 </html>