third_party/WebKit/LayoutTests/web-animations-api/player-finish-event.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     if (window.testRunner) {
  44         testRunner.notifyDone();
  45     }
  46 }
  47
  48 function onFinishMiddle(event) {
  49     validateFinishEvent(playerMiddle, event);
  50 }
  51
  52 function onFinishBottom(event) {
  53     validateFinishEvent(playerBottom, event);
  54 }
  55
  56 function animate() {
  57
  58     var keyframes = [
  59         {left: '10px', opacity: '1', offset: 0},
  60         {left: '100px', opacity: '0', offset: 1}
  61     ];
  62
  63     playerTop = document.getElementById('top').animate(keyframes, 600);
  64     playerTop.name = 'playerTop';
  65     playerTop.onfinish = onFinishTop;
  66
  67     playerMiddle = document.getElementById('middle').animate(keyframes, 100);
  68     playerMiddle.name = 'playerMiddle';
  69     playerMiddle.onfinish = onFinishMiddle;
  70
  71     playerBottom = document.getElementById('bottom').animate(keyframes, 100);
  72     playerBottom.name = 'playerBottom';
  73     playerBottom.onfinish = onFinishBottom;
  74
  75     if (window.testRunner) {
  76         testRunner.dumpAsText();
  77         testRunner.waitUntilDone();
  78     }
  79 }
  80
  81 window.onload = animate;
  82
  83         </script>
  84     </head>
  85     <body>
  86         <div class="anim" id="top"></div>
  87         <div class="anim" id="middle"></div>
  88         <div class="anim" id="bottom"></div>
  89         <div id="results"></div>
  90     </body>
  91 </html>
  92