55 lines
1.9 KiB
HTML
55 lines
1.9 KiB
HTML
|
<!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>
|