display-change-does-not-terminate-animation.html

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    #target {
      position: relative;
      height: 50px;
      width: 50px;
      background-color: blue;
    }
    .animated {
      animation: test 10s linear;
      animation: test 10s linear;
    }
    @keyframes test {
        from { left: 100px; }
        to   { left: 200px; }
    }
    @keyframes test {
        from { left: 100px; }
        to   { left: 200px; }
    }
  </style>
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <script type="text/javascript">
    var test = async_test("Tests that changing the display property of a running animation to a value other than 'none' does not cause it to terminate or re-start");

    var target;
    var onStartFunc = test.step_func(onStart);

    function go() {
      target = document.getElementById('target');
      target.addEventListener('animationstart', onStartFunc);
      target.classList.add('animated');
    }

    function onStart(e) {
      target.removeEventListener('animationstart', onStartFunc);
      target.addEventListener('animationstart', test.step_func(onRestart));
      test.step_timeout(setDisplay.bind(null, 0), 20);
    }

    function checkLeftValue(previousValue, isLast) {
      var currentValue = getComputedStyle(target).left;
      assert_less_than_equal(parseFloat(previousValue), parseFloat(currentValue), 'Left property should not be reset');
      if (isLast)
        test.done();
    }

    var values = [
      'inline',
      'block',
      'inline-block',
      'inline-table',
      'list-item',
      'run-in',
      'table',
      'table-caption',
      'table-column-group',
      'table-header-group',
      'table-footer-group',
      'table-row-group',
      'table-cell',
      'table-column',
      'table-row'
    ];
    function setDisplay(index) {
      var isLast = index === values.length - 1;
      test.step_timeout(checkLeftValue.bind(null, getComputedStyle(target).left, isLast), 0);
      target.style.display = values[index];
      if (!isLast) {
        test.step_timeout(setDisplay.bind(null, index + 1, true), 20);
      }
    }

    function onRestart(e) {
      assert_unreached("Start event fired again");
    }
  </script>
</head>
<body onload="go()">
  <div id="target">target</div>
</body>
</html>
chromium/third_party/blink/web_tests/animations/display-change-does-not-terminate-animation.html
