From 10771d0bd8ad50b7f7eed92083be70a30f9d537b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matias=20Niemel=C3=A4?= <matias@yearofmoo.com>
Date: Tue, 5 Sep 2017 10:47:19 -0700
Subject: [PATCH] fix(animations): support webkit-based vendor prefixes for
 prop validations (#19055)

Closes #18921

PR Close #19055
---
 .../animations/browser/src/render/shared.ts   | 20 ++++++++++++++++++-
 .../browser/test/dsl/animation_spec.ts        | 20 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/packages/animations/browser/src/render/shared.ts b/packages/animations/browser/src/render/shared.ts
index 9a2f810410..034a091ade 100644
--- a/packages/animations/browser/src/render/shared.ts
+++ b/packages/animations/browser/src/render/shared.ts
@@ -166,12 +166,30 @@ if (typeof Element != 'undefined') {
   };
 }
 
+function containsVendorPrefix(prop: string): boolean {
+  // Webkit is the only real popular vendor prefix nowadays
+  // cc: http://shouldiprefix.com/
+  return prop.substring(1, 6) == 'ebkit';  // webkit or Webkit
+}
+
 let _CACHED_BODY: {style: any}|null = null;
+let _IS_WEBKIT = false;
 export function validateStyleProperty(prop: string): boolean {
   if (!_CACHED_BODY) {
     _CACHED_BODY = getBodyNode() || {};
+    _IS_WEBKIT = _CACHED_BODY !.style ? ('WebkitAppearance' in _CACHED_BODY !.style) : false;
   }
-  return _CACHED_BODY !.style ? prop in _CACHED_BODY !.style : true;
+
+  let result = true;
+  if (_CACHED_BODY !.style && !containsVendorPrefix(prop)) {
+    result = prop in _CACHED_BODY !.style;
+    if (!result && _IS_WEBKIT) {
+      const camelProp = 'Webkit' + prop.charAt(0).toUpperCase() + prop.substr(1);
+      result = camelProp in _CACHED_BODY !.style;
+    }
+  }
+
+  return result;
 }
 
 export function getBodyNode(): any|null {
diff --git a/packages/animations/browser/test/dsl/animation_spec.ts b/packages/animations/browser/test/dsl/animation_spec.ts
index f5e3fd28b8..084c8e8b95 100644
--- a/packages/animations/browser/test/dsl/animation_spec.ts
+++ b/packages/animations/browser/test/dsl/animation_spec.ts
@@ -216,6 +216,26 @@ export function main() {
             .toThrowError(
                 /The provided animation property "abc" is not a supported CSS property for animations/);
       });
+
+      it('should allow a vendor-prefixed property to be used in an animation sequence without throwing an error',
+         () => {
+           const steps = [
+             style({webkitTransform: 'translateX(0px)'}),
+             animate(1000, style({webkitTransform: 'translateX(100px)'}))
+           ];
+
+           expect(() => validateAndThrowAnimationSequence(steps)).not.toThrow();
+         });
+
+      it('should allow for old CSS properties (like transform) to be auto-prefixed by webkit',
+         () => {
+           const steps = [
+             style({transform: 'translateX(-100px)'}),
+             animate(1000, style({transform: 'translateX(500px)'}))
+           ];
+
+           expect(() => validateAndThrowAnimationSequence(steps)).not.toThrow();
+         });
     });
 
     describe('keyframe building', () => {