interrupted-all-transition.html | Explore in Territory

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <style>
    #container {
      position: relative;
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
    #box {
      position: absolute;
      left: 0px;
      height: 100px;
      width: 100px;
      background-color: blue;
      transition-duration: 1s;
      transition-timing-function: linear;
    }
  </style>
</head>
<body>

<div id="container">
  <div id="box">
  </div>
</div>
  <script>
    'use strict';

    // It may take a number of frames before the property updates.
    // https://bugs.chromium.org/p/chromium/issues/detail?id=679981
    function waitForProgress() {
      var initialLeft = getComputedStyle(box).left;
      return new Promise(resolve => {
        function poll() {
          var currentLeft = getComputedStyle(box).left;
          if (currentLeft === initialLeft) {
            requestAnimationFrame(poll);
          } else {
            resolve();
          }
        }
        requestAnimationFrame(poll);
      });
    }

    async_test(t => {
      box.offsetTop; // Force style recalc
      box.style.left = '300px';
      box.style.opacity = 0.5;
      var previousLeft;
      waitForProgress().then(() => {
        previousLeft = getComputedStyle(box).left;
        box.style.left = '0px';
      }).then(waitForProgress).then(t.step_func_done(() => {
        var currentLeft = getComputedStyle(box).left;
        assert_less_than(parseFloat(currentLeft), parseFloat(previousLeft));
      }));
    }, 'Box should start moving left after left style is reset');
  </script>
</body>
</html>
chromium/third_party/blink/web_tests/transitions/interrupted-all-transition.html
