CSSDisplayAnimation: Skip display:none during animations

Fixed: 1411474, 1431719 Change-Id: Ic88aa03ef3ee16f3e59aa01ae53ad2644157e28a
web-platform-tests · Apr 11, 2023 · ec49208 · ec49208
1 parent ee00ae6
commit ec49208
Showing 1 changed file with 150 additions and 0 deletions.
diff --git a/css/css-animations/display-none-revert.html b/css/css-animations/display-none-revert.html
@@ -0,0 +1,150 @@
+<!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/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);
+
+  // Applying display:revert in this situation results in display:unset,
+  // which then resolves to display:inline.
+  assert_equals(getComputedStyle(target3).display, 'inline',
+    'The display should be block despite the animation saying its none.');
+  assert_equals(numAnimationstartFired, 1,
+    'Only one animation should start.');
+}, 'display:none should be treated as display:revert in keyframes.');
+</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);
+
+  // Applying display:revert in this situation results in display:unset,
+  // which then resolves to display:inline.
+  assert_equals(getComputedStyle(target4).display, 'inline',
+    'The display should be block despite the animation saying its none.');
+  assert_equals(numAnimationstartFired, 1,
+    'Only one animation should start.');
+}, 'display set to a variable for none should be treated as display:revert in keyframes.');
+</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, 'block',
+    'The display should be block despite the animation saying its none.');
+  assert_equals(numAnimationstartFired, 1,
+    'Only one animation should start.');
+}, 'Variables for display:none should be treated as display:revert in keyframes.');
+</script>