fix(animations): getAnimationStyle causes exceptions in older browsers (#29709)

Serginho · AndrewKushnir · commit cb1d77a9e3e7 · 2020-11-20T08:33:21.000-08:00
PR #29709 getAnimationStyle causes exceptions in older browsers PR Close #29709
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
@@ -140,8 +140,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/packages/animations/browser/test/render/css_keyframes/element_animation_style_handler_spec.ts b/packages/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,23 @@ 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: {
+          'animationstyle1': 'value',
+          'animationstyle2': null,
+          'animationstyle3': '',
+          'animation': null
+        }
+      };
+      expect(getAnimationStyle(fakeElement, 'style1')).toBe('value');
+      expect(getAnimationStyle(fakeElement, 'style2')).toBe('');
+      expect(getAnimationStyle(fakeElement, 'style3')).toBe('');
+      expect(getAnimationStyle(fakeElement, '')).toBe('');
+    });
   });
 }

Original file line number	Diff line number	Diff line change
`@@ -140,8 +140,8 @@ function setAnimationStyle(element: any, name: string, value: string, index?: nu`
`140`	`140`	`element.style[prop] = value;`
`141`	`141`	`}`
`142`	`142`
`143`		`-function getAnimationStyle(element: any, name: string) {`
`144`		`- return element.style[ANIMATION_PROP + name];`
	`143`	`+export function getAnimationStyle(element: any, name: string) {`
	`144`	`+ return element.style[ANIMATION_PROP + name] \|\| '';`
`145`	`145`	`}`
`146`	`146`
`147`	`147`	`function countChars(value: string, char: string): number {`