third_party/WebKit/LayoutTests/animations/play-state-initially-paused-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 10ms linear forwards;
  14       -webkit-animation-play-state: paused;
  15       animation: test 10ms linear forwards;
  16       animation-play-state: paused;
  17     }
  18     .running {
  19       -webkit-animation-play-state: running;
  20       animation-play-state: running;
  21     }
  22     #animation1 {
  23       -webkit-animation-delay: -10ms;
  24       animation-delay: -10ms;
  25     }
  26     #animation2 {
  27       -webkit-animation-delay: 0ms;
  28       animation-delay: 0ms;
  29     }
  30     #animation3 {
  31       -webkit-animation-delay: 10ms;
  32       animation-delay: 10ms;
  33     }
  34     @-webkit-keyframes test {
  35         from { left: 100px; }
  36         to   { left: 300px; }
  37     }
  38     @keyframes test {
  39         from { left: 100px; }
  40         to   { left: 300px; }
  41     }
  42   </style>
  43   <script type="text/javascript">
  44     if (window.testRunner) {
  45       testRunner.dumpAsText();
  46       testRunner.waitUntilDone();
  47     }
  48
  49     function log(message) {
  50       var div = document.createElement('div');
  51       div.textContent = message;
  52       document.body.appendChild(div);
  53     }
  54
  55     function startNextAnimation(currentId) {
  56       // Running animations serially avoids flakiness due to overlap.
  57       if (currentId === 'animation1') {
  58         start(document.getElementById('animation2'), true);
  59       } else if (currentId === 'animation2') {
  60         start(document.getElementById('animation3'), false);
  61       } else if (currentId === 'animation3' && window.testRunner) {
  62         testRunner.notifyDone();
  63       }
  64     }
  65
  66     function onStartEventFired(expectStartEventFirst, e) {
  67       var id = e.target.id;
  68       if (expectStartEventFirst) {
  69         log('PASS: ' + id + ': Start event fired without setting play state to running');
  70       } else {
  71         log((isRunning ? 'PASS' : 'FAIL') + ': ' + id + ': Start event fired ' + (isRunning ? 'after' : 'before') + ' play state was set to running');
  72       }
  73       startNextAnimation(id);
  74     }
  75
  76     var isRunning;
  77     function run(element) {
  78       element.classList.add('running');
  79       isRunning = true;
  80     }
  81
  82     function start(target, expectImmediateStartEvent) {
  83       isRunning = false;
  84       var startEventHandler = onStartEventFired.bind(null, expectImmediateStartEvent);
  85       target.addEventListener('webkitAnimationStart', startEventHandler);
  86       target.addEventListener('animationstart', startEventHandler);
  87       target.classList.add('animated');
  88       if (!expectImmediateStartEvent) {
  89         setTimeout(run.bind(null, target), 100);
  90       }
  91     }
  92
  93     function go() {
  94       start(document.getElementById('animation1'), true);
  95     }
  96   </script>
  97 </head>
  98 <body onload="go()">
  99   <p>Tests that an animation which is initially paused fires its start event as soon as its delay expires, not when it transitions to the running state.</p>
 100   <div class="target" id="animation1"></div>
 101   <div class="target" id="animation2"></div>
 102   <div class="target" id="animation3"></div>
 103   <div id="result"></div>
 104 </body>
 105 </html>