CSSDisplayAnimation: Don't cancel display:none animations

This behavior is being discussed in this CSSWG issue: w3c/csswg-drafts#6429 Fixed: 1411474, 1431719 Change-Id: Ic88aa03ef3ee16f3e59aa01ae53ad2644157e28a
web-platform-tests · Apr 11, 2023 · c10e437 · c10e437
1 parent e27d35c
commit c10e437
Showing 1 changed file with 146 additions and 0 deletions.
diff --git a/css/css-animations/display-none-dont-cancel.tentative.html b/css/css-animations/display-none-dont-cancel.tentative.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://drafts.csswg.org/css-display-4/#display-animation">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6429">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/css-animations/support/testcommon.js"></script>
+
+<div id=target1>hello</div>
+<style>
+@keyframes display1 {
+  0% { display: none; }
+  100% { display: inline; }
+}
+.animate1 {
+  animation: display1 1s infinite;
+}
+</style>
+<script>
+promise_test(async () => {
+  let numAnimationstartFired = 0;
+  target1.addEventListener('animationstart', () => numAnimationstartFired++);
+
+  await waitForAnimationFrames(1);
+  target1.classList.add('animate1');
+  await waitForAnimationFrames(2);
+
+  assert_equals(getComputedStyle(target1).display, 'inline',
+    'The display should be inline during the animation.');
+  assert_equals(numAnimationstartFired, 1,
+    'Only one animation should start.');
+}, 'display:none animating to display:inline should be inline for the whole animation.');
+</script>
+
+<div id=target2>hello</div>
+<style>
+@keyframes display2 {
+  0% { display: var(--none-value); }
+  100% { display: inline; }
+}
+.animate2 {
+  animation: display2 1s infinite;
+}
+#target2 {
+  --none-value: none;
+}
+</style>
+<script>
+promise_test(async () => {
+  let numAnimationstartFired = 0;
+  target2.addEventListener('animationstart', () => numAnimationstartFired++);
+
+  await waitForAnimationFrames(1);
+  target2.classList.add('animate2');
+  await waitForAnimationFrames(2);
+
+  assert_equals(getComputedStyle(target2).display, 'inline',
+    'The display should be inline during the animation.');
+  assert_equals(numAnimationstartFired, 1,
+    'Only one animation should start.');
+}, 'A CSS variable of display:none animating to display:inline should be inline for the whole animation.');
+</script>
+
+<div id=target3>hello</div>
+<style>
+@keyframes display3 {
+  0% { display: none; }
+  100% { display: none; }
+}
+.animate3 {
+  animation: display3 1s infinite;
+}
+</style>
+<script>
+promise_test(async () => {
+  let numAnimationstartFired = 0;
+  target3.addEventListener('animationstart', () => numAnimationstartFired++);
+
+  await waitForAnimationFrames(1);
+  target3.classList.add('animate3');
+  await waitForAnimationFrames(2);
+
+  assert_equals(getComputedStyle(target3).display, 'none',
+    'The display should be none and the animation should keep running.');
+  assert_equals(numAnimationstartFired, 1,
+    'Only one animation should start.');
+}, 'Animating from display:none to display:none should not cancel the animation.');
+</script>
+
+<div id=target4>hello</div>
+<style>
+@keyframes display4 {
+  0% { display: var(--none-value); }
+  100% { display: var(--none-value); }
+}
+.animate4 {
+  animation: display4 1s infinite;
+}
+#target4 {
+  --none-value: none;
+}
+</style>
+<script>
+promise_test(async () => {
+  let numAnimationstartFired = 0;
+  target4.addEventListener('animationstart', () => numAnimationstartFired++);
+
+  await waitForAnimationFrames(1);
+  target4.classList.add('animate4');
+  await waitForAnimationFrames(2);
+
+  assert_equals(getComputedStyle(target4).display, 'none',
+    'The display should be none and the animation should keep running.');
+  assert_equals(numAnimationstartFired, 1,
+    'Only one animation should start.');
+}, 'Animating from display:none to display:none with an intermediate variable should not cancel the animation.');
+</script>
+
+<div id=target5>hello</div>
+<style>
+@keyframes display5 {
+  0% { --display: none; }
+  100% { --display: none; }
+}
+.animate5 {
+  animation: display5 1s infinite;
+}
+#target5 {
+  display: var(--display, block);
+}
+</style>
+<script>
+promise_test(async () => {
+  let numAnimationstartFired = 0;
+  target5.addEventListener('animationstart', () => numAnimationstartFired++);
+
+  await waitForAnimationFrames(1);
+  target5.classList.add('animate5');
+  await waitForAnimationFrames(2);
+
+  assert_equals(getComputedStyle(target5).display, 'none',
+    'The display should be none and the animation should keep running.');
+  assert_equals(numAnimationstartFired, 1,
+    'Only one animation should start.');
+}, 'Animating a variable of "none" which gets set to display elsewhere should not cancel the animation.');
+</script>