1 files changed, 52 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-animations/display-none-dont-cancel-pseudo.tentative.html b/testing/web-platform/tests/css/css-animations/display-none-dont-cancel-pseudo.tentative.html
new file mode 100644
index 0000000000..bed4ec2b80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/display-none-dont-cancel-pseudo.tentative.html
@@ -0,0 +1,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>
+\ No newline at end of file