third_party/WebKit/LayoutTests/animations/display-none-terminates-animation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5     #target {
   6       position: relative;
   7       height: 50px;
   8       width: 50px;
   9       background-color: blue;
  10     }
  11     .animated {
  12       -webkit-animation: test 1s linear;
  13       animation: test 1s linear;
  14     }
  15     @-webkit-keyframes test {
  16         from { left: 100px; }
  17         to   { left: 200px; }
  18     }
  19     @keyframes test {
  20         from { left: 100px; }
  21         to   { left: 200px; }
  22     }
  23   </style>
  24   <script type="text/javascript">
  25     if (window.testRunner) {
  26       testRunner.dumpAsText();
  27       testRunner.waitUntilDone();
  28     }
  29
  30     function log(message) {
  31       var div = document.createElement('div');
  32       div.textContent = message;
  33       document.body.appendChild(div);
  34     }
  35
  36     var target;
  37     function go() {
  38       target = document.getElementById('target');
  39       target.addEventListener('webkitAnimationStart', onStart);
  40       target.classList.add('animated');
  41     }
  42
  43     function onStart(e) {
  44       log('INFO: Start event fired');
  45       target.removeEventListener('webkitAnimationStart', onStart);
  46       requestAnimationFrame(function() {
  47         setTimeout(setDisplayNone, 100);
  48       });
  49     }
  50
  51     var leftPropertyWhenSetDisplayNone;
  52     function setDisplayNone() {
  53       leftPropertyWhenSetDisplayNone = getComputedStyle(target).left;
  54       target.style.display = 'none';
  55       requestAnimationFrame(function() {
  56         setTimeout(setDisplayBlock, 100);
  57       });
  58     }
  59
  60     function setDisplayBlock() {
  61       target.addEventListener('webkitAnimationStart', onRestart);
  62       target.style.display = 'block';
  63     }
  64
  65     function onRestart(e) {
  66       log('INFO: Start event fired again');
  67       var pass = leftPropertyWhenSetDisplayNone > getComputedStyle(target).left;
  68       log((pass ? 'PASS' : 'FAIL') + ': Left property was ' + (pass ? '' : 'not ') + 'reset correctly');
  69       if (window.testRunner) {
  70         testRunner.notifyDone();
  71       }
  72     }
  73   </script>
  74 </head>
  75 <body onload="go()">
  76   <p>
  77     Tests that setting the display property of a running animation to 'none'
  78     terminates the animation, and that setting it a value other than 'none'
  79     causes it to re-start from the start.
  80   </p>
  81   <div id="target"></div>
  82 </body>
  83 </html>