display-none-dont-cancel-pseudo.tentative.html (1649B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:graouts@apple.com"> 3 <link rel=help href="https://drafts.csswg.org/css-display-4/#display-animation"> 4 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/10111"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <style> 9 10 @keyframes display-animation { 11 from { margin-left: 100px; display: block } 12 to { margin-left: 200px; display: none } 13 } 14 15 .target::after { 16 content: ""; 17 margin-left: 50px; 18 } 19 20 .target.animated::after { 21 animation: display-animation 1s forwards; 22 } 23 24 </style> 25 <body> 26 <script> 27 28 promise_test(async t => { 29 const target = createDiv(t); 30 target.className = "target"; 31 32 const cs = getComputedStyle(target, "::after"); 33 const animations = () => target.getAnimations({ subtree: true }); 34 35 assert_equals(animations().length, 0, "There are no running animations initially"); 36 assert_equals(cs.marginLeft, "50px"); 37 assert_equals(cs.display, "inline"); 38 39 target.classList.add("animated"); 40 const runningAnimations = animations(); 41 assert_equals(runningAnimations.length, 1, "Setting the 'animated' class started an animation"); 42 assert_equals(cs.marginLeft, "100px"); 43 assert_equals(cs.display, "block"); 44 45 runningAnimations[0].finish(); 46 47 assert_equals(animations().length, 1, "The animation remains after completion"); 48 assert_equals(cs.marginLeft, "200px"); 49 assert_equals(cs.display, "none"); 50 }, 'A CSS Animation on a pseudo-element animating to "display: none" with "fill: forwards" remains active after animation completion.'); 51 52 </script> 53 </body>