<!DOCTYPE html>

<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<style>
@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#target1 {
    background: red;
    animation: fade 1s infinite;
}

#target2 {
    background: blue;
}
</style>

<input id="target1">

<script>
var test = async_test("Animations should be canceled when an element is removed from the document.");

const expectedValues = [
    // [time, element-id, property, expected-value, tolerance]
    [0.5, "target2", "opacity", 1, 0],
];

// Timeout so you can see it really animating at the start.
var input = document.getElementById("target1");
requestAnimationFrame(test.step_func(() => {
    requestAnimationFrame(test.step_func_done(() => {
        input.type = "button";
        input.type = "text";
        // Remove the element, but there's no detachLayoutTree() since it's already detached.
        input.remove();
        // Change the id which should mean no more animations.
        input.id = "target2";
        // Insert the element again.
        document.body.appendChild(input);
        assert_equals(document.getAnimations().length, 0);
    }));
}));
</script>