<!DOCTYPE html>
<style>
#box {
    position: relative;
    height: 100px;
    width: 100px;
    left: 0px;
    background-color: blue;
    transition-property: left;
    transition-duration: 2s;
    transition-timing-function: linear;
}
</style>
<body>
<p>
This tests changing a transitioning property while running and resetting its duration to 0.
The box should start moving left and after 600ms snap back to 0</p>
<div id="box">
</div>
<script src="../animations/resources/animation-test-helpers.js"></script>
<script>
function reset()
{
    document.getElementById('box').style.transitionDuration = "0s";
    document.getElementById('box').style.left = "0px";
}

function trigger()
{
    document.getElementById('box').style.left = "400px";
}

var expectations = [
  [0.5, 'box', 'left', 100, 50],
  [0.7, 'box', 'left', 0, 0],
];

var callbacks = {
  0.6: reset
};

runTransitionTest(expectations, trigger, callbacks);
</script>