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

.animated {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: black;
}

</style>
</head>
<body>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div class="animated"></div>
<div class="animated"></div>
<script>

promise_test(async () => {
    for (let element of document.querySelectorAll(".animated"))
        element.animate({ transform: ["translateX(0)", "translateX(100px)"] }, { duration: 1000, iterations: Infinity });

    // Wait a few frames to make sure the accelerated animations have started.
    await new Promise(requestAnimationFrame);
    await new Promise(requestAnimationFrame);
    await new Promise(requestAnimationFrame);

    window.internals.startTrackingStyleRecalcs();

    // Wait a few more frames to allow time for a style update to occur if the running animations would have triggered one.
    await new Promise(requestAnimationFrame);
    await new Promise(requestAnimationFrame);
    await new Promise(requestAnimationFrame);

    assert_equals(window.internals.styleRecalcCount(), 0);
}, "There should not be style updates while accelerated JS-originated animations are running on sibling elements with the same CSS class.");

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