cancel-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 {
            width: 700px;
            background-color: #fcc;
        }

        #container div {
            position: relative;
            background-color: #933;
            width: 200px;
            height: 50px;
            left: 50px;
            margin-top: 10px;
        }
        #container.run #left {
            left: 450px;
            transition-property: left;
            transition-duration: 4s;
            transition-timing-function: linear;
        }
        #container.run #translate {
            transform: translate(400px, 0px);
            transition-property: transform;
            transition-duration: 4s;
            transition-delay: -1s;
            transition-timing-function: linear;
        }
    </style>
</head>
<body>
    <!--
        Test removes the transition properties while the transition is running, then adds them back in.
        If working properly the transitions should start from the beginning. But there was a bug that
        would cause the transition to continue to run (although with no visible effect). So when you
        restarted, it would pick up where it left off.
        https://bugs.webkit.org/show_bug.cgi?id=26163
    -->
    <div id="container">
        <div id="left">left</div>
        <div id="translate">translate</div>
    </div>
    <script>
        'use strict';

        function waitForProgress() {
          var initialLeft = getComputedStyle(left).left;
          return new Promise(resolve => {
            function poll() {
              var currentLeft = getComputedStyle(left).left;
              if (currentLeft === initialLeft) {
                requestAnimationFrame(poll);
              } else {
                resolve();
              }
            }
            requestAnimationFrame(poll);
          });
        }

        async_test(t => {
            getComputedStyle(container).height; // force style recalc
            container.className = 'run';
            getComputedStyle(container).height; // force style recalc - transition will start
            waitForProgress().then(t.step_func_done(() => {
                assert_greater_than(parseFloat(getComputedStyle(left).left), 50);
                container.className = '';
                getComputedStyle(container).height; // force style recalc - transition will cancel

                container.className = 'run'; // restart transition
                assert_equals(getComputedStyle(left).left, '50px');
                assert_equals(getComputedStyle(translate).transform, 'matrix(1, 0, 0, 1, 100, 0)');
            }));
        }, 'Transition restarts from the beginning');
    </script>
</body>
</html>
chromium/third_party/blink/web_tests/transitions/cancel-transition.html
