Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-animations/display-none-dont-cancel-pseudo.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel=author href="mailto:graouts@apple.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<style>
@keyframes display-animation {
from { margin-left: 100px; display: block }
to { margin-left: 200px; display: none }
}
.target::after {
content: "";
margin-left: 50px;
}
.target.animated::after {
animation: display-animation 1s forwards;
}
</style>
<body>
<script>
promise_test(async t => {
const target = createDiv(t);
target.className = "target";
const cs = getComputedStyle(target, "::after");
const animations = () => target.getAnimations({ subtree: true });
assert_equals(animations().length, 0, "There are no running animations initially");
assert_equals(cs.marginLeft, "50px");
assert_equals(cs.display, "inline");
target.classList.add("animated");
const runningAnimations = animations();
assert_equals(runningAnimations.length, 1, "Setting the 'animated' class started an animation");
assert_equals(cs.marginLeft, "100px");
assert_equals(cs.display, "block");
runningAnimations[0].finish();
assert_equals(animations().length, 1, "The animation remains after completion");
assert_equals(cs.marginLeft, "200px");
assert_equals(cs.display, "none");
}, 'A CSS Animation on a pseudo-element animating to "display: none" with "fill: forwards" remains active after animation completion.');
</script>
</body>