display-none-dont-cancel-pseudo.tentative.html

<!DOCTYPE html>
<link rel=author href="mailto:[email protected]">
<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>
chromium/third_party/blink/web_tests/external/wpt/css/css-animations/display-none-dont-cancel-pseudo.tentative.html
