add additional option to add initial state value for time based anima…

…tions
ampproject · Aug 11, 2023 · 5644afb · 5644afb
1 parent e041f74
commit 5644afb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/test/integration/test-boilerplates.js b/test/integration/test-boilerplates.js
@@ -39,7 +39,7 @@ describes.sandboxed('New Visibility Boilerplate', {}, () => {
       expect(getStyle(fixture.win.document.body, 'visibility')).to.equal(
         'visible'
       );
-      expect(isAnimationNone(fixture.win.document.body)).to.be.true;
+      expect(isAnimationNone(fixture.win.document.body, true)).to.be.true;
     });
   });
 });
diff --git a/testing/helpers/service.js b/testing/helpers/service.js
@@ -88,25 +88,40 @@ export function waitFor(callback, errorMessage) {
   );
 }
 
-const noneValues = {
-  'animation-name': ['none', 'initial'],
-  'animation-duration': ['0s', 'auto', 'initial'],
-  'animation-timing-function': ['ease', 'initial'],
-  'animation-delay': ['0s', 'initial'],
-  'animation-iteration-count': ['1', 'initial'],
-  'animation-direction': ['normal', 'initial'],
-  'animation-fill-mode': ['none', 'initial'],
-  'animation-play-state': ['running', 'initial', /* IE11 */ ''],
-};
+/**
+ * Gets the initial values of an Element's animation state.
+ * The values for `animation-duration`;
+ *
+ * @param {!boolean} isTimeBasedAnimation
+ */
+function getInitialNoneValues(isTimeBasedAnimation) {
+  const initialValues = {
+    'animation-name': ['none', 'initial'],
+    'animation-duration': ['0s', 'auto', 'initial'],
+    'animation-timing-function': ['ease', 'initial'],
+    'animation-delay': ['0s', 'initial'],
+    'animation-iteration-count': ['1', 'initial'],
+    'animation-direction': ['normal', 'initial'],
+    'animation-fill-mode': ['none', 'initial'],
+    'animation-play-state': ['running', 'initial', /* IE11 */ ''],
+  };
+  if (isTimeBasedAnimation) {
+    initialValues['animation-duration'].unshift('auto');
+  }
+  return initialValues;
+}
 
 /**
  * Browsers are inconsistent when accessing the value for 'animation: none'.
  * Some return 'none', some return the full shorthand, some give the full
  * shorthand in a different order.
+ *
  * @param {!Element} element
+ * @param {boolean=} opt_isTimeBasedAnimation
  * @return {boolean}
  */
-export function isAnimationNone(element) {
+export function isAnimationNone(element, opt_isTimeBasedAnimation = true) {
+  const noneValues = getInitialNoneValues(opt_isTimeBasedAnimation);
   for (const property in noneValues) {
     const value = getStyle(element, property);
     const expectedValues = noneValues[property];