<!DOCTYPE html>
<meta charset="utf-8">
<title>Forcing a style update in a transitionend event for an accelerated animation should not prevent another transition for the same property from running later</title>
<body>
<script src="../resources/ui-helper.js"></script>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>

'use strict';

promise_test(async t => {
    const target = document.body.appendChild(document.createElement("div"));
    const animatedStyle = "transition: transform 1ms linear; transform: translateX(100px)";

    // Start a transform transition.
    getComputedStyle(target).transform;
    target.setAttribute("style", animatedStyle);

    // Wait until it completes, and in the "transitionend" event handler, force a style recalc
    // before removing the transition style.
    await new Promise(resolve => {
        target.addEventListener("transitionend", event => {
            target.getAnimations();
            target.removeAttribute("style");
            resolve();
        }, { once: true });
    });

    // Wait until the accelerated animation has completed.
    await UIHelper.ensurePresentationUpdate();

    // Start another transform transition.
    getComputedStyle(target).transform;
    target.setAttribute("style", animatedStyle);

    // Check that it starts and ends.
    await new Promise(resolve => target.addEventListener("transitionend", resolve, { once: true }));
}, "Forcing a style update in a transitionend event for an accelerated animation should not prevent another transition for the same property from running later.");

</script>
</body>