fix(animations): getAnimationStyle causes exceptions in older browsers

angular · Mar 1, 2020 · fb2f0a8 · fb2f0a8
1 parent 699ecac
commit fb2f0a8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts b/packages/animations/browser/src/render/css_keyframes/element_animation_style_handler.ts
@@ -133,8 +133,8 @@ function setAnimationStyle(element: any, name: string, value: string, index?: nu
   element.style[prop] = value;
 }
 
-function getAnimationStyle(element: any, name: string) {
-  return element.style[ANIMATION_PROP + name];
+export function getAnimationStyle(element: any, name: string) {
+  return element.style[ANIMATION_PROP + name] || '';
 }
 
 function countChars(value: string, char: string): number {

diff --git a/...ages/animations/browser/test/render/css_keyframes/element_animation_style_handler_spec.ts b/...ages/animations/browser/test/render/css_keyframes/element_animation_style_handler_spec.ts
@@ -5,9 +5,8 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {ElementAnimationStyleHandler} from '../../../src/render/css_keyframes/element_animation_style_handler';
+import {ElementAnimationStyleHandler, getAnimationStyle} from '../../../src/render/css_keyframes/element_animation_style_handler';
 import {computeStyle} from '../../../src/util';
-
 import {assertStyle, createElement, makeAnimationEvent, supportsAnimationEventCreation} from './shared';
 
 const EMPTY_FN = () => {};
@@ -227,5 +226,21 @@ const EMPTY_FN = () => {};
       element.dispatchEvent(event);
       expect(done).toBeTruthy();
     });
+
+    // Issue: https://github.com/angular/angular/issues/24094
+    it('should not break getAnimationStyle in old browsers', () => {
+      // Old browsers like Chrome Android 34 returns null if element.style
+      // is not found, modern browsers returns empty string.
+      const fakeElement = {
+        style: {
+          'animation-name': 'fooAnimation',
+          'animation-end': null,
+          'animation-duration': ''
+        }
+      };
+      expect(getAnimationStyle(fakeElement, 'name')).toBe('fooAnimation');
+      expect(getAnimationStyle(fakeElement, 'duration')).toBe('');
+      expect(getAnimationStyle(fakeElement, 'end')).toBe('');
+    });
   });
 }