<!doctype html>
<meta charset=utf-8>
<title>Animation.frameRate</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../imported/w3c/web-platform-tests/web-animations/testcommon.js"></script>
<body>
<script>
'use strict';

promise_test(async t => {
    const timestamps = new Map;

    const timing = { duration: 10_000, iterations: Infinity };

    await new Promise(resolve => {
        const animations = [];

        const addTimestamp = frameRate => {
            const timestamp = document.timeline.currentTime;
            if (!timestamps.has(timestamp))
                timestamps.set(timestamp, new Set);
            timestamps.get(timestamp).add(frameRate);

            if (timestamps.get(timestamp).size == 3)
                resolve();
        };

        const addAnimation = frameRate => {
            const animation = document.timeline.animate(progress => addTimestamp(frameRate), timing);
            animation.frameRate = frameRate;
            animations.push(animation);
            t.add_cleanup(() => animation.cancel());
        };

        // Start an animation that updates at 12fps.
        addAnimation(12);

        // Wait one frame before we start another animation running at 6fps.
        // This new animation should update in sync with the 12fps animation.
        requestAnimationFrame(() => {
            addAnimation(6);

            // Wait another frame before we start another animation running at 6fps.
            // This new animation should update in sync with the 12fps animation.
            requestAnimationFrame(() => {
                addAnimation(18);
            })
        });
    });
}, "Animations that start on consecutive frames with different, but compatible frame rates, eventually resolve in the same frame");

</script>
</body>