diff --git a/src/css/index.ts b/src/css/index.ts index 2131ab9..272c6ac 100644 --- a/src/css/index.ts +++ b/src/css/index.ts @@ -82,7 +82,7 @@ import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-w import {Context} from '../core/context'; export class CSSParsedDeclaration { - animationDuration: ReturnType; + animationDuration: ReturnType; backgroundClip: ReturnType; backgroundColor: Color; backgroundImage: ReturnType; @@ -143,7 +143,7 @@ export class CSSParsedDeclaration { textTransform: ReturnType; transform: ReturnType; transformOrigin: ReturnType; - transitionDuration: ReturnType; + transitionDuration: ReturnType; visibility: ReturnType; webkitTextStrokeColor: Color; webkitTextStrokeWidth: ReturnType; diff --git a/src/css/property-descriptors/duration.ts b/src/css/property-descriptors/duration.ts index 2fa785a..db9b567 100644 --- a/src/css/property-descriptors/duration.ts +++ b/src/css/property-descriptors/duration.ts @@ -1,9 +1,14 @@ -import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; +import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor'; +import {Context} from '../../core/context'; +import {CSSValue, isDimensionToken} from '../syntax/parser'; +import {time} from '../types/time'; -export const duration: IPropertyTypeValueDescriptor = { +export const duration: IPropertyListDescriptor = { name: 'duration', initialValue: '0s', prefix: false, - type: PropertyDescriptorParsingType.TYPE_VALUE, - format: 'time' + type: PropertyDescriptorParsingType.LIST, + parse: (context: Context, tokens: CSSValue[]) => { + return tokens.filter(isDimensionToken).map((token) => time.parse(context, token)); + } }; diff --git a/src/dom/element-container.ts b/src/dom/element-container.ts index 522cf2b..d284287 100644 --- a/src/dom/element-container.ts +++ b/src/dom/element-container.ts @@ -23,10 +23,10 @@ export class ElementContainer { this.elements = []; if (isHTMLElementNode(element)) { - if (this.styles.animationDuration > 0) { + if (this.styles.animationDuration.some((duration) => duration > 0)) { element.style.animationDuration = '0s'; } - if (this.styles.transitionDuration > 0) { + if (this.styles.transitionDuration.some((duration) => duration > 0)) { element.style.transitionDuration = '0s'; } diff --git a/tests/reftests/animation.html b/tests/reftests/animation.html index 6986ffc..552abc4 100644 --- a/tests/reftests/animation.html +++ b/tests/reftests/animation.html @@ -40,7 +40,7 @@ .animated.working p { animation-name: rotate0; - animation-duration: 1ms; + animation-duration: 1ms, 1ms; animation-play-state: paused; } @@ -51,7 +51,7 @@ } .transitioned p { - transition: 1ms; + transition: 1ms, 1ms; transform: rotate(45deg) }