fix(animations): support webkit-based vendor prefixes for prop validations (#19055)

Closes #18921

PR Close #19055

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 {

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', () => {