<style>

    #target {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: black;
    }

</style>
<div id="target"></div>
<script src="../resources/ui-helper.js"></script>
<script>

(async () => {
    if (window.testRunner)
        testRunner.waitUntilDone();

    // Start an animation that lasts a day.
    const duration = 24 * 60 * 60 * 1000;
    const translateAnimation = document.getElementById("target").animate({ translate: "100px" }, duration);
    translateAnimation.currentTime = duration / 2;

    // Wait until the animation has been applied.
    await translateAnimation.ready;
    await UIHelper.ensureStablePresentationUpdate();

    // Add an extra animation.
    const transformAnimation = document.getElementById("target").animate({ transform: "translateY(100px)" }, duration);
    transformAnimation.currentTime = duration / 2;

    // Wait until the new animation has been applied.
    await transformAnimation.ready;
    await UIHelper.ensureStablePresentationUpdate();

    if (window.testRunner)
        testRunner.notifyDone();
})();

</script>