<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id='element'></div>
<style>
    #element {
        transition: background 100ms;
        background: black;
    }
</style>
<script>
var t = async_test('Replaying a transition after it has finished should not trigger a new transition');

t.step(function() {
    element.offsetTop; // Force recalc
    element.style.background = "green";
    element.offsetTop; // Force recalc

    assert_equals(document.getAnimations().length, 1);
    var animation = document.getAnimations()[0];
    animation.onfinish = function() {
        requestAnimationFrame(function() {
            requestAnimationFrame(function() {
                animation.startTime = document.timeline.currentTime - 10;
                animation.onfinish = t.done.bind(t);
            });
        });
    }
});
</script>