From 6eca5b0d7fde1ef0f3180fa739f685c5dcde7473 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 28 Aug 2019 13:20:54 -0400
Subject: [PATCH] fix(animation): better feature detection (#19212)

fixes #19205
---
 core/src/components/nav/test/nav-controller.spec.ts      | 2 +-
 core/src/utils/animation/animation.ts                    | 2 +-
 .../src/utils/animation/test/animationbuilder/index.html | 2 +-
 core/src/utils/animation/test/basic/index.html           | 2 +-
 core/src/utils/animation/test/display/index.html         | 2 +-
 core/src/utils/animation/test/hooks/index.html           | 2 +-
 core/src/utils/animation/test/multiple/index.html        | 2 +-
 core/src/utils/animation/test/reuse/index.html           | 9 ++++++---
 8 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/core/src/components/nav/test/nav-controller.spec.ts b/core/src/components/nav/test/nav-controller.spec.ts
index 695e980620..168f1a0e29 100644
--- a/core/src/components/nav/test/nav-controller.spec.ts
+++ b/core/src/components/nav/test/nav-controller.spec.ts
@@ -926,7 +926,7 @@ describe('NavController', () => {
   const MockView5 = 'mock-view5';
   
   const mockWebAnimation = (el: HTMLElement) => {
-    window.Animation = () => {};
+    Element.prototype.animate = () => {};
     
     el.animate = () => {
       const animation = {
diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts
index b7a769a8da..31c3f579eb 100644
--- a/core/src/utils/animation/animation.ts
+++ b/core/src/utils/animation/animation.ts
@@ -42,7 +42,7 @@ export const createAnimation = () => {
   const _afterAddReadFunctions: any[] = [];
   const _afterAddWriteFunctions: any[] = [];
   const webAnimations: any[] = [];
-  const supportsWebAnimations = (typeof (window as any).Animation === 'function');
+  const supportsWebAnimations = (typeof (Element as any) === 'function') && (typeof (Element as any).prototype!.animate === 'function');
   const ANIMATION_END_FALLBACK_PADDING_MS = 100;
 
   /**
diff --git a/core/src/utils/animation/test/animationbuilder/index.html b/core/src/utils/animation/test/animationbuilder/index.html
index 4bf70132c6..6d01be6019 100644
--- a/core/src/utils/animation/test/animationbuilder/index.html
+++ b/core/src/utils/animation/test/animationbuilder/index.html
@@ -12,7 +12,7 @@
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>  <script>
     const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
     if (forceCSSAnimations) {
-      window.Animation = null;
+      Element.prototype.animate = null;
     }
     
     class PageRoot extends HTMLElement {
diff --git a/core/src/utils/animation/test/basic/index.html b/core/src/utils/animation/test/basic/index.html
index a6ffc2cc1e..88c3ea9bd8 100644
--- a/core/src/utils/animation/test/basic/index.html
+++ b/core/src/utils/animation/test/basic/index.html
@@ -14,7 +14,7 @@
   <script type="module">
     const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
     if (forceCSSAnimations) {
-      window.Animation = null;
+      Element.prototype.animate = null;
     }
     
     import { createAnimation } from '../../../../dist/index.mjs';
diff --git a/core/src/utils/animation/test/display/index.html b/core/src/utils/animation/test/display/index.html
index 15d2dfa10e..58ca1638b9 100644
--- a/core/src/utils/animation/test/display/index.html
+++ b/core/src/utils/animation/test/display/index.html
@@ -14,7 +14,7 @@
   <script type="module">
     const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
     if (forceCSSAnimations) {
-      window.Animation = null;
+      Element.prototype.animate = null;
     }
     
     import { createAnimation } from '../../../../dist/index.mjs';
diff --git a/core/src/utils/animation/test/hooks/index.html b/core/src/utils/animation/test/hooks/index.html
index 4d296285a7..618f3991be 100644
--- a/core/src/utils/animation/test/hooks/index.html
+++ b/core/src/utils/animation/test/hooks/index.html
@@ -14,7 +14,7 @@
   <script type="module">
     const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
     if (forceCSSAnimations) {
-      window.Animation = null;
+      Element.prototype.animate = null;
     }
     
     import { createAnimation } from '../../../../dist/index.mjs';
diff --git a/core/src/utils/animation/test/multiple/index.html b/core/src/utils/animation/test/multiple/index.html
index 51f324a61c..46cf9c7bb0 100644
--- a/core/src/utils/animation/test/multiple/index.html
+++ b/core/src/utils/animation/test/multiple/index.html
@@ -14,7 +14,7 @@
   <script type="module">
     const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
     if (forceCSSAnimations) {
-      window.Animation = null;
+      Element.prototype.animate = null;
     }
     
     import { createAnimation } from '../../../../dist/index.mjs';
diff --git a/core/src/utils/animation/test/reuse/index.html b/core/src/utils/animation/test/reuse/index.html
index 19448bf963..fc48a49b00 100644
--- a/core/src/utils/animation/test/reuse/index.html
+++ b/core/src/utils/animation/test/reuse/index.html
@@ -11,9 +11,12 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  <script type="module">
-    window.Animation = null;
-    
+  <script type="module">   
+    const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
+    if (forceCSSAnimations) {
+      Element.prototype.animate = null;
+    } 
+
     import { createAnimation } from '../../../../dist/index.mjs';
 
     createAnimation()