Turn back on the "amp boilerplate animation test" for Microsoft Edge (#…

…39258)

* Revert "Disable broken test `should show the body in boilerplate test` (#39151)"

This reverts commit 927c884.

* add auto to one of the "none" values for `animation-duration`

Per https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
"For time-based animations, auto is equivalent to a value of 0s"

* remove animation-timeline

seems to be causing other tests to fail

* add additional option to add initial state value for time based animations

test/integration/test-boilerplates.js

@@ -1,5 +1,6 @@
 import {getStyle} from '#core/dom/style';
 
+import {isAnimationNone} from '#testing/helpers/service';
 import {createFixtureIframe, expectBodyToBecomeVisible} from '#testing/iframe';
 
 const timeout = window.ampTestRuntimeConfig.mochaTimeout;
@@ -38,8 +39,7 @@ describes.sandboxed('New Visibility Boilerplate', {}, () => {
       expect(getStyle(fixture.win.document.body, 'visibility')).to.equal(
         'visible'
       );
-      // TODO(#39152): this breaks in Microsoft Edge.
-      // expect(isAnimationNone(fixture.win.document.body)).to.be.true;
+      expect(isAnimationNone(fixture.win.document.body, true)).to.be.true;
     });
   });
 });

testing/helpers/service.js

@@ -88,25 +88,40 @@ export function waitFor(callback, errorMessage) {
   );
 }
 
-const noneValues = {
-  'animation-name': ['none', 'initial'],
-  'animation-duration': ['0s', '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.
+ * For time-based animations, auto is equivalent to a value of 0s.
+ *
+ * @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];