angular · atscott · Mar 4, 2020 · Mar 4, 2020
diff --git a/aio/scripts/_payload-limits.json b/aio/scripts/_payload-limits.json
@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2987,
-        "main-es2015": 451552,
+        "main-es2015": 451469,
         "polyfills-es2015": 52195
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3097,
-        "main-es2015": 429313,
+        "main-es2015": 429230,
         "polyfills-es2015": 52195
       }
     }

diff --git a/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts b/packages/animations/browser/src/render/css_keyframes/css_keyframes_driver.ts
@@ -7,9 +7,9 @@
  */
 import {AnimationPlayer, ɵStyleData} from '@angular/animations';
 
-import {allowPreviousPlayerStylesMerge, balancePreviousStylesIntoKeyframes} from '../../util';
+import {allowPreviousPlayerStylesMerge, balancePreviousStylesIntoKeyframes, computeStyle} from '../../util';
 import {AnimationDriver} from '../animation_driver';
-import {computeStyle, containsElement, hypenatePropsObject, invokeQuery, matchesElement, validateStyleProperty} from '../shared';
+import {containsElement, hypenatePropsObject, invokeQuery, matchesElement, validateStyleProperty} from '../shared';
 import {packageNonAnimatableStyles} from '../special_cased_styles';
 
 import {CssKeyframesPlayer} from './css_keyframes_player';
@@ -36,7 +36,7 @@ export class CssKeyframesDriver implements AnimationDriver {
   }
 
   computeStyle(element: any, prop: string, defaultValue?: string): string {
-    return computeStyle(element, prop);
+    return (window.getComputedStyle(element) as any)[prop] as string;
   }
 
   buildKeyframeElement(element: any, name: string, keyframes: {[key: string]: any}[]): any {

diff --git a/packages/animations/browser/src/render/css_keyframes/css_keyframes_player.ts b/packages/animations/browser/src/render/css_keyframes/css_keyframes_player.ts
@@ -7,7 +7,7 @@
  */
 import {AnimationPlayer} from '@angular/animations';
 
-import {computeStyle} from '../shared';
+import {computeStyle} from '../../util';
 import {SpecialCasedStyles} from '../special_cased_styles';
 import {ElementAnimationStyleHandler} from './element_animation_style_handler';
 

diff --git a/packages/animations/browser/src/render/shared.ts b/packages/animations/browser/src/render/shared.ts
@@ -237,54 +237,3 @@ export function hypenatePropsObject(object: {[key: string]: any}): {[key: string
   });
   return newObj;
 }
-
-
-/**
- * Returns the computed style for the provided property on the provided element.
- *
- * This function uses `window.getComputedStyle` internally to determine the
- * style value for the element. Firefox doesn't support reading the shorthand
- * forms of margin/padding and for this reason this function needs to account
- * for that.
- */
-export function computeStyle(element: HTMLElement, prop: string): string {
-  const styles = window.getComputedStyle(element);
-
-  // this is casted to any because the `CSSStyleDeclaration` type is a fixed
-  // set of properties and `prop` is a dynamic reference to a property within
-  // the `CSSStyleDeclaration` list.
-  let value = getComputedValue(styles, prop as keyof CSSStyleDeclaration);
-
-  // Firefox returns empty string values for `margin` and `padding` properties
-  // when extracted using getComputedStyle (see similar issue here:
-  // https://github.com/jquery/jquery/issues/3383). In this situation
-  // we want to emulate the value that is returned by creating the top,
-  // right, bottom and left properties as individual style lookups.
-  if (value.length === 0 && (prop === 'margin' || prop === 'padding')) {
-    const t = getComputedValue(styles, (prop + 'Top') as 'marginTop' | 'paddingTop');
-    const r = getComputedValue(styles, (prop + 'Right') as 'marginRight' | 'paddingRight');
-    const b = getComputedValue(styles, (prop + 'Bottom') as 'marginBottom' | 'paddingBottom');
-    const l = getComputedValue(styles, (prop + 'Left') as 'marginLeft' | 'paddingLeft');
-
-    // reconstruct the padding/margin value as `top right bottom left`
-    // we `trim()` the value because if all of the values above are
-    // empty string values then we would like the return value to
-    // also be an empty string.
-    value = `${t} ${r} ${b} ${l}`.trim();
-  }
-
-  return value;
-}
-
-/**
- * Reads and returns the provided property style from the provided styles collection.
- *
- * This function is useful because it will return an empty string in the
- * event that the value obtained from the styles collection is a non-string
- * value (which is usually the case if the `styles` object is mocked out).
- */
-function getComputedValue<K extends keyof CSSStyleDeclaration>(
-    styles: CSSStyleDeclaration, prop: K): string {
-  const value = styles[prop];
-  return typeof value === 'string' ? value : '';
-}
diff --git a/packages/animations/browser/src/render/web_animations/web_animations_driver.ts b/packages/animations/browser/src/render/web_animations/web_animations_driver.ts
@@ -10,7 +10,7 @@ import {AnimationPlayer, ɵStyleData} from '@angular/animations';
 import {allowPreviousPlayerStylesMerge, balancePreviousStylesIntoKeyframes, copyStyles} from '../../util';
 import {AnimationDriver} from '../animation_driver';
 import {CssKeyframesDriver} from '../css_keyframes/css_keyframes_driver';
-import {computeStyle, containsElement, invokeQuery, isBrowser, matchesElement, validateStyleProperty} from '../shared';
+import {containsElement, invokeQuery, isBrowser, matchesElement, validateStyleProperty} from '../shared';
 import {packageNonAnimatableStyles} from '../special_cased_styles';
 
 import {WebAnimationsPlayer} from './web_animations_player';
@@ -32,7 +32,7 @@ export class WebAnimationsDriver implements AnimationDriver {
   }
 
   computeStyle(element: any, prop: string, defaultValue?: string): string {
-    return computeStyle(element, prop);
+    return (window.getComputedStyle(element) as any)[prop] as string;
   }
 
   overrideWebAnimationsSupport(supported: boolean) { this._isNativeImpl = supported; }

diff --git a/packages/animations/browser/src/render/web_animations/web_animations_player.ts b/packages/animations/browser/src/render/web_animations/web_animations_player.ts
@@ -7,7 +7,7 @@
  */
 import {AnimationPlayer} from '@angular/animations';
 
-import {computeStyle} from '../shared';
+import {computeStyle} from '../../util';
 import {SpecialCasedStyles} from '../special_cased_styles';
 
 import {DOMAnimation} from './dom_animation';

diff --git a/packages/animations/browser/src/util.ts b/packages/animations/browser/src/util.ts
@@ -6,10 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {AnimateTimings, AnimationMetadata, AnimationMetadataType, AnimationOptions, sequence, ɵStyleData} from '@angular/animations';
-
 import {Ast as AnimationAst, AstVisitor as AnimationAstVisitor} from './dsl/animation_ast';
 import {AnimationDslVisitor} from './dsl/animation_dsl_visitor';
-import {computeStyle, isNode} from './render/shared';
+import {isNode} from './render/shared';
 
 export const ONE_SECOND = 1000;
 
@@ -341,3 +340,7 @@ export function visitDslNode(visitor: any, node: any, context: any): any {
       throw new Error(`Unable to resolve animation metadata node #${node.type}`);
   }
 }
+
+export function computeStyle(element: any, prop: string): string {
+  return (<any>window.getComputedStyle(element))[prop];
+}
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
@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {ElementAnimationStyleHandler} from '../../../src/render/css_keyframes/element_animation_style_handler';
+import {computeStyle} from '../../../src/util';
+
 import {assertStyle, createElement, makeAnimationEvent, supportsAnimationEventCreation} from './shared';
 
 const EMPTY_FN = () => {};

diff --git a/packages/animations/browser/test/render/shared_spec.ts b/packages/animations/browser/test/render/shared_spec.ts