CSSDisplayAnimation: Transition none at beginning or end

This patch makes display animations function like visibility animations, where animations to or from the invisible state are moved to either the beginning or end in order to make the element visible during the entire animation. Bug: 1395394 Change-Id: Ifc8a657ddf612d32c730ff47b9eea92e8d1e5313 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4357115 Reviewed-by: Robert Flack <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1121380}
web-platform-tests · Mar 28, 2023 · 50658e0 · 50658e0
1 parent f692017
commit 50658e0
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
diff --git a/css/css-animations/display-interpolation.html b/css/css-animations/display-interpolation.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<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/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+const alwaysBlock = [
+  {at: -1, expect: 'block'},
+  {at: 0, expect: 'block'},
+  {at: 0.1, expect: 'block'},
+  {at: 0.9, expect: 'block'},
+  {at: 1, expect: 'block'},
+  {at: 1.5, expect: 'block'},
+];
+const alwaysNone = [
+  {at: -1, expect: 'none'},
+  {at: 0, expect: 'none'},
+  {at: 0.1, expect: 'none'},
+  {at: 0.9, expect: 'none'},
+  {at: 1, expect: 'none'},
+  {at: 1.5, expect: 'none'},
+];
+
+test_interpolation({
+  property: 'display',
+  from: 'block',
+  to: 'none',
+  // transition:all is not supposed to allow display to be transitioned.
+  'CSS Transitions with transition: all': alwaysNone
+}, [
+  {at: -1, expect: 'block'},
+  {at: 0, expect: 'block'},
+  {at: 0.1, expect: 'block'},
+  {at: 0.9, expect: 'block'},
+  {at: 1, expect: 'none'},
+  {at: 1.5, expect: 'none'},
+]);
+
+// This transitions tests expect 'block' at every point because transitioning
+// from display:none does not provide an initial style. This is expected and
+// can be worked around by using @initial.
+test_interpolation({
+  property: 'display',
+  from: 'none',
+  to: 'block',
+  'CSS Transitions with transition: all': alwaysBlock,
+  'CSS Transitions': alwaysBlock
+}, [
+  {at: -1, expect: 'none'},
+  {at: 0, expect: 'none'},
+  {at: 0.1, expect: 'block'},
+  {at: 0.9, expect: 'block'},
+  {at: 1, expect: 'block'},
+  {at: 1.5, expect: 'block'},
+]);
+
+test_no_interpolation({
+  property: 'display',
+  from: 'inline',
+  to: 'block'
+});
+
+test_interpolation({
+  property: 'display',
+  from: 'block',
+  to: 'block'
+}, alwaysBlock);
+
+test_interpolation({
+  property: 'display',
+  from: 'none',
+  to: 'none'
+}, alwaysNone);
+</script>
diff --git a/css/support/interpolation-testcommon.js b/css/support/interpolation-testcommon.js
@@ -274,6 +274,8 @@
     } else if (expectations === expectNotAnimatable) {
       expectations = interpolationMethod.notAnimatableExpectations(from, to, interpolationTest.options.underlying);
       applyUnderlying = true;
+    } else if (interpolationTest.options[interpolationMethod.name]) {
+      expectations = interpolationTest.options[interpolationMethod.name];
     }
 
     // Setup a standard equality function if an override is not provided.