<!DOCTYPE html>
<html>
<head>
<style>

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

</style>
</head>
<body>
<div id="target"></div>
<script>

if (window.testRunner)
    testRunner.waitUntilDone();

const animation = document.getElementById("target").animate({ transform: ["translateX(0)", "translateX(100px)"] }, 1000);

animation.ready.then(() => {
    // Ensure accelerated animations have been commmitted by waiting for the next frame.
    requestAnimationFrame(() => {
        // We pause the animation right away.
        animation.pause();

        // Then on the next frame, we change its delay to seek it to its mid-point.
        requestAnimationFrame(() => {
            const effect = animation.effect;
            const duration = effect.getTiming().duration;
            const delay = animation.currentTime - 0.5 * duration;
            animation.effect.updateTiming({ delay });

            // Then wait another frame to ensure the seek was committed.
            if (window.testRunner)
                requestAnimationFrame(() => testRunner.notifyDone());
        });
    });
});

</script>
</body>
</html>