third_party/WebKit/LayoutTests/web-animations-api/player-finish-repeats.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: blue;
  11                 opacity: 0.1;
  12             }
  13
  14             #top {
  15                 top: 0px;
  16             }
  17             #middle {
  18                 top: 100px;
  19             }
  20             #bottom {
  21                 top: 200px;
  22             }
  23             #results {
  24                 top: 300px;
  25             }
  26         </style>
  27         <script type="text/javascript">
  28
  29 function log(message) {
  30     var results = document.getElementById('results');
  31     results.innerHTML += message + '<br>';
  32 }
  33
  34 function validateFinishEvent(player, event) {
  35     if (event.target === player) {
  36         log('PASS: ' + player.name + ' is target');
  37     } else {
  38         log('FAIL: expected target named ' + player.name + ', actual target is ' + event.target);
  39     }
  40     if (event.currentTime === player.currentTime) {
  41         log('PASS: event currentTime equals player currentTime');
  42     } else {
  43         log('FAIL: event currentTime ' + event.currentTime + ' does not equal player currentTime ' + player.currentTime);
  44     }
  45     if (event.timelineTime === document.timeline.currentTime) {
  46         log('PASS: event timelineTime equals timeline currentTime');
  47     } else {
  48         log('FAIL: event timelineTime ' + event.timelineTime +
  49             ' does not equal timeline currentTime ' + document.timeline.currentTime);
  50     }
  51 }
  52
  53 var keyframes = [
  54     {left: '10px', offset: 0},
  55     {left: '100px', offset: 1}
  56 ];
  57
  58 var playerTop, playerMiddle, playerBottom;
  59 var firstTop = true, firstMiddle = true, firstBottom = true;
  60
  61 function onFinishTop(event) {
  62     validateFinishEvent(playerTop, event);
  63
  64     if (firstTop) {
  65         firstTop = false;
  66         playerTop.currentTime = 0;
  67     } else {
  68         playerMiddle = document.getElementById('middle').animate(keyframes, 0.05);
  69         playerMiddle.name = 'playerMiddle';
  70         playerMiddle.onfinish = onFinishMiddle;
  71     }
  72 }
  73
  74 function onFinishMiddle(event) {
  75     validateFinishEvent(playerMiddle, event);
  76
  77     if (firstMiddle) {
  78         firstMiddle = false;
  79         playerMiddle.play();
  80     } else {
  81         playerBottom = document.getElementById('bottom').animate(keyframes, 0.05);
  82         playerBottom.name = 'playerBottom';
  83         playerBottom.onfinish = onFinishBottom;
  84     }
  85 }
  86
  87 function onFinishBottom(event) {
  88     validateFinishEvent(playerBottom, event);
  89
  90     if (firstBottom) {
  91         firstBottom = false;
  92         playerBottom.reverse();
  93     } else {
  94         if (window.testRunner) {
  95             testRunner.notifyDone();
  96         }
  97     }
  98 }
  99
 100 function animate() {
 101
 102     playerTop = document.getElementById('top').animate(keyframes, 0.05);
 103     playerTop.name = 'playerTop';
 104     playerTop.onfinish = onFinishTop;
 105
 106     if (window.testRunner) {
 107         testRunner.dumpAsText();
 108         testRunner.waitUntilDone();
 109     }
 110 }
 111
 112 window.onload = animate;
 113
 114         </script>
 115     </head>
 116     <body>
 117         <div class="anim" id="top"></div>
 118         <div class="anim" id="middle"></div>
 119         <div class="anim" id="bottom"></div>
 120         <div id="results"></div>
 121     </body>
 122 </html>
 123