<!DOCTYPE html>
<body>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="resources/request-frames-until-true.js"></script>
<style>

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

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

promise_test(async t => {
    const target = document.getElementById("target");

    const acceleratedAnimationsStarted = async numberOfAnimations => {
        return requestFramesUntilTrue(
            () => internals.acceleratedAnimationsForElement(target).length == numberOfAnimations,
            () => !"acceleratedAnimationsForElement" in window.internals);
    };

    // Set initial styles.
    target.style.opacity = "0.5";
    target.style.marginLeft = "100px";

    await new Promise(setTimeout);

    // Now update styles to trigger a transition for properties, only one of which should yield an accelerated animation.
    target.style.removeProperty("opacity");
    target.style.removeProperty("margin-left");
    target.style.transitionProperty = "margin-left opacity";
    target.style.transitionDuration = "1s";

    // Wait a few frames for the opacity animation to be commited.
    await acceleratedAnimationsStarted(1);
}, "Transtioning two properties, one of which can be accelerated while the other cannot, yields only one accelerated animation.");

</script>
</body>