<!DOCTYPE html>
<meta charset="utf-8">
<title>Updating a CSS property set as a transition-property while a CSS Animation is already animating that property</title>
<style>

.target {
    animation: animation 2s;
    transition: margin-left 1s;
}

.target.in-flight {
    margin-left: 200px;
}

@keyframes animation {
    from { margin-left: 50px }
    to   { margin-left: 100px }
}

</style>
<body>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>

'use strict';

test(test => {
    const target = document.body.appendChild(document.createElement("div"));
    target.classList.add("target");

    let animations = target.getAnimations();
    assert_equals(animations.length, 1, "There is one animation applied to the target after starting the test.");

    const animation = animations[0];
    assert_true(animation instanceof CSSAnimation, 1, "There is one CSS Animation applied to the target after starting the test.");

    // Update opacity while the CSS Animation is running. This should not initiate a CSS Transition.
    target.classList.add("in-flight");
    animations = target.getAnimations();
    assert_equals(animations.length, 1, "There is one animation applied to the target after updating the animated property.");
    assert_equals(animations[0], animation, "The single running animation is the original CSS Animation.");

    // Finish the animation and check there is no transition started then either.
    animation.finish();

    assert_equals(target.getAnimations().length, 0, "There is no animation running after finishing the CSS Animation.");

    assert_equals(getComputedStyle(target).marginLeft, "200px", "The final value for the property is the one set during the animation.");

    target.remove();
}, `Updating a CSS property set as a transition-property while a CSS Animation is already animating that property.`);

</script>
</body>