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