src/third_party/WebKit/LayoutTests/web-animations-api/player-cancel-finishes.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style type="text/css">
   5             .anim {
   6                 position: absolute;
   7                 left: 10px;
   8                 height: 90px;
   9                 width: 100px;
  10                 background-color: black;
  11             }
  12         </style>
  13         <script type="text/javascript">
  14
  15 function log(message) {
  16     var results = document.getElementById('results');
  17     results.innerHTML += message + '<br>';
  18 }
  19
  20 function validateFinishEvent(player, event) {
  21     if (event.target === player) {
  22         log('PASS: ' + player.name + ' is target');
  23     } else {
  24         log('FAIL: expected target named ' + player.name + ', actual target is ' + event.target);
  25     }
  26     if (event.currentTime === player.currentTime) {
  27         log('PASS: event currentTime equals player currentTime');
  28     } else {
  29         log('FAIL: event currentTime ' + event.currentTime + ' does not equal player currentTime ' + player.currentTime);
  30     }
  31     if (event.timelineTime === document.timeline.currentTime) {
  32         log('PASS: event timelineTime equals timeline currentTime');
  33     } else {
  34         log('FAIL: event timelineTime ' + event.timelineTime +
  35             ' does not equal timeline currentTime ' + document.timeline.currentTime);
  36     }
  37 }
  38
  39 var playerTop, playerMiddle, playerBottom;
  40
  41 function onFinishTop(event) {
  42     validateFinishEvent(playerTop, event);
  43     playerMiddle.cancel();
  44 }
  45
  46 function onFinishMiddle(event) {
  47     validateFinishEvent(playerMiddle, event);
  48     playerBottom.currentTime = 0;
  49 }
  50
  51 function onFinishBottom(event) {
  52     validateFinishEvent(playerBottom, event);
  53     if (window.testRunner) {
  54         testRunner.notifyDone();
  55     }
  56 }
  57
  58 function animate() {
  59
  60     var keyframes = [
  61         {left: '10px', offset: 0},
  62         {left: '100px', offset: 1}
  63     ];
  64
  65     var timing = {
  66         fill: 'none',
  67         iterations: Infinity,
  68         duration: 99
  69     };
  70
  71     playerTop = document.getElementById('top').animate(keyframes, timing);
  72     playerTop.name = 'playerTop';
  73     playerTop.onfinish = onFinishTop;
  74
  75     playerMiddle = document.getElementById('middle').animate(keyframes, timing);
  76     playerMiddle.name = 'playerMiddle';
  77     playerMiddle.onfinish = onFinishMiddle;
  78
  79     playerBottom = document.getElementById('bottom').animate(keyframes, timing);
  80     playerBottom.name = 'playerBottom';
  81     playerBottom.onfinish = onFinishBottom;
  82
  83     // Finish event does not fire while currentTime is negative.
  84     playerBottom.currentTime = -99;
  85     playerBottom.source = null;
  86
  87     playerTop.currentTime = -0.1;
  88     playerTop.source = null;
  89
  90     if (window.testRunner) {
  91         testRunner.dumpAsText();
  92         testRunner.waitUntilDone();
  93     }
  94 }
  95
  96 window.onload = animate;
  97
  98         </script>
  99     </head>
 100     <body>
 101         <div class="anim" id="top"></div>
 102         <div class="anim" id="middle"></div>
 103         <div class="anim" id="bottom"></div>
 104         <div id="results"></div>
 105     </body>
 106 </html>
 107