third_party/WebKit/LayoutTests/animations/play-state.html

   1 <!DOCTYPE html>
   2 <head>
   3   <title>Test of -webkit-animation-play-state</title>
   4   <style>
   5     .target {
   6       height: 100px;
   7       width: 100px;
   8       -webkit-animation-duration: 40ms;
   9       -webkit-animation-timing-function: linear;
  10     }
  11     #translate {
  12       background-color: blue;
  13       -webkit-animation-name: move1;
  14     }
  15     @-webkit-keyframes move1 {
  16         from { transform: translateX(100px); }
  17         to   { transform: translateX(200px); }
  18     }
  19     #left {
  20       position: relative;
  21       background-color: red;
  22       -webkit-animation-name: move2;
  23     }
  24     @-webkit-keyframes move2 {
  25         from { left: 100px; }
  26         to   { left: 200px; }
  27     }
  28     .paused {
  29       -webkit-animation-play-state: paused;
  30     }
  31   </style>
  32   <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
  33   <script type="text/javascript">
  34     if (window.testRunner) {
  35       testRunner.dumpAsText();
  36       testRunner.waitUntilDone();
  37     }
  38
  39     function log(message) {
  40       var div = document.createElement('div');
  41       div.textContent = message;
  42       document.body.appendChild(div);
  43     }
  44
  45     function logPassFail(expected, actual, id, description) {
  46       var didPass = expected === actual;
  47       log((didPass ? 'PASS' : 'FAIL') + ': Element \'' + id + '\' had ' + (didPass ? 'correct' : 'incorrect') + '  style ' + description);
  48     }
  49
  50     function togglePaused() {
  51       var targets = document.getElementsByClassName('target');
  52       for (var i = 0; i < targets.length; ++i) {
  53         targets[i].classList.toggle('paused');
  54       }
  55     }
  56
  57     var start = function() {
  58       document.removeEventListener('webkitAnimationStart', start, false);
  59       setTimeout(pause, 20);
  60     }
  61
  62     var transform;
  63     var left;
  64     function pause() {
  65       togglePaused();
  66       transform = getComputedStyle(document.getElementById('translate')).webkitTransform;
  67       left = getComputedStyle(document.getElementById('left')).left;
  68       setTimeout(resume, 20);
  69     }
  70
  71     function resume() {
  72       logPassFail(transform, getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'when paused');
  73       logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused');
  74       togglePaused();
  75       setTimeout(end, 100);
  76     }
  77
  78     function end() {
  79       logPassFail('none', getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'at end');
  80       logPassFail('auto', getComputedStyle(document.getElementById('left')).left, 'left', 'at end');
  81       if (window.testRunner) {
  82         testRunner.notifyDone();
  83       }
  84     }
  85
  86     document.addEventListener('webkitAnimationStart', start, false);
  87   </script>
  88 </head>
  89 <body>
  90 <p>
  91   This tests the operation of -webkit-animation-play-state. We test style
  92   while the animations are paused and once unpaused.
  93 </p>
  94 <div class="target" id="translate">transform</div>
  95 <div class="target" id="left">left</div>
  96 </body>
  97 </html>