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}
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 0000000..6ae1158
--- /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>
