<!DOCTYPE html>

<html>
<head>
    <style>
    #box {
        position: relative;
        height: 100px;
        width: 100px;
        background-color: blue;
        -webkit-transition-property: left;
        -webkit-transition-duration: 2s;
        -webkit-transition-timing-function: linear;
    }
    </style>
    <script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    result = "PASS";
    
    function isEqual(actual, desired, tolerance)
    {
        var diff = Math.abs(actual - desired);
        return diff <= tolerance;
    }
    
    function snapshot(expected, tolerance)
    {
        if (result != "PASS")
            return;
            
        var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
        if (!isEqual(left, expected, tolerance))
            result = "FAIL(was:"+left+", expected:"+expected+")";
    }
    
    function reset()
    {
        document.getElementById('box').style.webkitTransitionDuration = "0s";
        document.getElementById('box').style.left = "0px";
    }
    
    function startTransition()
    {
        document.getElementById('box').style.left = "400px";
    }

    function start()
    {
        setTimeout("startTransition()", 0);
        setTimeout("snapshot(100, 80)", 500);
        setTimeout("reset()", 600);
        setTimeout("snapshot(0, 0)", 700);
        
        window.setTimeout(function() {
            document.getElementById('result').innerHTML = result;
            if (window.testRunner)
                testRunner.notifyDone();
        }, 800);
    }
    
    window.addEventListener('load', start, false)
  </script>
</head>
<body>

<p>
This tests changing a transitioning property while running and resetting its duration to 0.
The box should start moving left and after 500ms snap back to 0</p>
<div id="box">
</div>
<div id="result">
</div>
</body>
</html>