<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Cancelled Transition Should Not Continue To Run</title>
    <style type="text/css" media="screen">
        #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 type="text/javascript" charset="utf-8">
        if (window.layoutTestController) {
            layoutTestController.dumpAsText();
            layoutTestController.waitUntilDone();
        }

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

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

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

        function restartTransition()
        {
            document.getElementById("container").className = "run";
            setTimeout("check()", 250);
        }

        function check()
        {
            var left = parseFloat(window.getComputedStyle(document.getElementById('a')).left);
            result = "left:";
            if (!isEqual(left, 250, 30))
                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, 30))
                result += "<span style='color:red'>FAIL(was:" + transform[4] + ", s/b:50)</span>";
            else
                result += "<span style='color:green'>PASS</span>";
        }

        function start()
        {
            document.getElementById("container").className = "run";
            setTimeout("cancelTransition()", 100);
            setTimeout("restartTransition()", 200);

            window.setTimeout(function() {
                document.getElementById('result').innerHTML = result;
                if (window.layoutTestController)
                layoutTestController.notifyDone();
            },
            500);
        }
    </script>
<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>