blob: 599feef487c1ac896f30f197e40448206fe39f19 [file] [log] [blame]
<!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>