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