third_party/WebKit/LayoutTests/animations/display-change-does-not-terminate-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 10s linear;
  13       animation: test 10s 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.getElementById('log').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       target.addEventListener('webkitAnimationStart', onRestart);
  47       setTimeout(setDisplay.bind(null, 0), 20);
  48     }
  49
  50     function checkLeftValue(previousValue, isLast) {
  51       var currentValue = getComputedStyle(target).left;
  52       var pass = parseFloat(previousValue) <= parseFloat(currentValue);
  53       log((pass ? 'PASS' : 'FAIL') + ': Left property was ' + (pass ? 'not ' : '') + 'reset' +
  54           (pass ? '' : ' (saw change from ' + previousValue + ' to ' + currentValue + ')'));
  55       if (isLast && window.testRunner) {
  56         testRunner.notifyDone();
  57       }
  58     }
  59
  60     var values = [
  61       'inline',
  62       'block',
  63       'inline-block',
  64       'inline-table',
  65       'list-item',
  66       'run-in',
  67       'table',
  68       'table-caption',
  69       'table-column-group',
  70       'table-header-group',
  71       'table-footer-group',
  72       'table-row-group',
  73       'table-cell',
  74       'table-column',
  75       'table-row'
  76     ];
  77     function setDisplay(index) {
  78       log('INFO: Setting display to ' + values[index]);
  79       var isLast = index === values.length - 1;
  80       setTimeout(checkLeftValue.bind(null, getComputedStyle(target).left, isLast), 0);
  81       target.style.display = values[index];
  82       if (!isLast) {
  83         setTimeout(setDisplay.bind(null, index + 1, true), 20);
  84       }
  85     }
  86
  87     function onRestart(e) {
  88       // Clear log to avoid flakiness in failure output.
  89       document.getElementById('log').innerHTML = '';
  90       log('FAIL: Start event fired again');
  91       if (window.testRunner) {
  92         testRunner.notifyDone();
  93       }
  94     }
  95   </script>
  96 </head>
  97 <body onload="go()">
  98   <p>
  99     Tests that changing the display property of a running animation to a value
 100     other than 'none' does not cause it to terminate or re-start.
 101   </p>
 102   <div id="target">target</div>
 103   <div id="log"></div>
 104 </body>
 105 </html>