1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html>
<link rel=author href="mailto:graouts@apple.com">
<link rel=help href="https://drafts.csswg.org/css-display-4/#display-animation">
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/10111">
<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 1ms 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");
await runningAnimations[0].finished;
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>
|
