third_party/WebKit/LayoutTests/web-animations-api/player-finish-sample-only.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     log('FAIL: seeking to finish should not queue event');
  50 }
  51
  52 function onFinishBottom(event) {
  53     log('FAIL: seeking past finish should not queue 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     playerMiddle = document.getElementById('middle').animate(keyframes, 70.0);
  64     playerMiddle.name = 'playerMiddle';
  65     playerMiddle.onfinish = onFinishMiddle;
  66     playerMiddle.finish();
  67     playerMiddle.currentTime = 0;
  68
  69     playerBottom = document.getElementById('bottom').animate(keyframes, 70.0);
  70     playerBottom.name = 'playerBottom';
  71     playerBottom.onfinish = onFinishBottom;
  72     playerBottom.currentTime = 80.0;
  73     playerBottom.currentTime = 0;
  74
  75     playerTop = document.getElementById('top').animate(keyframes, 90.0);
  76     playerTop.name = 'playerTop';
  77     playerTop.onfinish = onFinishTop;
  78     playerTop.finish();
  79
  80     if (window.testRunner) {
  81         testRunner.dumpAsText();
  82         testRunner.waitUntilDone();
  83     }
  84 }
  85
  86 window.onload = animate;
  87
  88         </script>
  89     </head>
  90     <body>
  91         <div class="anim" id="top"></div>
  92         <div class="anim" id="middle"></div>
  93         <div class="anim" id="bottom"></div>
  94         <div id="results"></div>
  95     </body>
  96 </html>
  97