<!DOCTYPE html>

<html>
<head>
    <style>
        #container {
            height: 300px;
            width: 700px;
            background: #fcc;
            font-family: ArialRoundedMTBold, sans-serif;
            font-size: 200%;
        }
  
        #container div {
            position: absolute;
            background-color: #933;
            width: 200px;
            height: 100px;
            left: 50px;
        }
        #a {
            top: 100px;
        }
        #container.run #a {
            left: 450px;
            -webkit-transition-property: left;
            -webkit-transition-duration: 0.5s;
            -webkit-transition-timing-function: linear;
        }
        #b {
            top: 250px;
        }
        #container.run #b {
            -webkit-transform: translate(400px, 0px);
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 0.5s;
            -webkit-transition-timing-function: linear;
        }
    </style>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        result = "<span style='color:red'>CHECK NOT COMPLETED</span>";

        function isEqual(actual, desired, tolerance)
        {
            var diff = Math.abs(actual - desired);
            return diff < tolerance;
        }

        function cancelTransition()
        {
            document.getElementById("container").className = "";
            document.body.offsetHeight;
        }

        function restartTransition()
        {
            document.getElementById("container").className = "run";
            document.body.offsetHeight;
            // The transition should restart at the beginning here. After 250 it should be halfway done.
            setTimeout("check()", 250);
        }

        function check()
        {
            var left = parseFloat(window.getComputedStyle(document.getElementById('a')).left);
            result = "left:";
            if (!isEqual(left, 250, 50))
                result += "<span style='color:red'>FAIL(was:" + left + ", s/b:150)</span>";
            else
                result += "<span style='color:green'>PASS</span>";
            
            result += ", webkitTransform:";
            
            var transform = window.getComputedStyle(document.getElementById('b')).webkitTransform;
            transform = transform.split("(");
            transform = transform[1].split(",");
            if (!isEqual(transform[4], 200, 50))
                result += "<span style='color:red'>FAIL(was:" + transform[4] + ", s/b:50)</span>";
            else
                result += "<span style='color:green'>PASS</span>";
            
            document.getElementById('result').innerHTML = result;
            if (window.testRunner)
                testRunner.notifyDone();
        }

        function start()
        {
            document.getElementById("container").className = "run";
            document.body.offsetHeight;
            setTimeout("cancelTransition()", 100);
            setTimeout("restartTransition()", 200);
        }
    </script>
</head>
<body onload="start()">
<p>
    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.
</p>
<div id="container">
    <div id="a" class="tester">left</div>
    <div id="b" class="tester">translate</div>
</div>
<div id="result">
</div>
</body>
</html>