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 index 03e06889d30b2..0c5794bf9d4c8 100644 --- 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/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 index d5b64b5758d1b..5ea5dd97d31f8 100644 --- 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,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(''); + }); }); }