From ea6c0f9e17ff602b9cd66e0c5c5724bae9aabe3d Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 12 Apr 2023 15:23:11 -0700
Subject: [PATCH] CSSDisplayAnimation: Don't cancel display:none animations

This behavior is being discussed in this CSSWG issue:
https://github.com/w3c/csswg-drafts/issues/6429

Fixed: 1411474, 1431719
Change-Id: Ic88aa03ef3ee16f3e59aa01ae53ad2644157e28a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4363078
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1129543}
---
 .../display-none-dont-cancel.tentative.html   | 146 ++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 css/css-animations/display-none-dont-cancel.tentative.html
diff --git a/css/css-animations/display-none-dont-cancel.tentative.html b/css/css-animations/display-none-dont-cancel.tentative.html
new file mode 100644
index 00000000000000..6ae115803b820f
--- /dev/null
+++ 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>
