fix: multi arg transition/animation duration (#2657)

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<typeof time.parse>;
+    animationDuration: ReturnType<typeof duration.parse>;
     backgroundClip: ReturnType<typeof backgroundClip.parse>;
     backgroundColor: Color;
     backgroundImage: ReturnType<typeof backgroundImage.parse>;
@@ -143,7 +143,7 @@ export class CSSParsedDeclaration {
     textTransform: ReturnType<typeof textTransform.parse>;
     transform: ReturnType<typeof transform.parse>;
     transformOrigin: ReturnType<typeof transformOrigin.parse>;
-    transitionDuration: ReturnType<typeof time.parse>;
+    transitionDuration: ReturnType<typeof duration.parse>;
     visibility: ReturnType<typeof visibility.parse>;
     webkitTextStrokeColor: Color;
     webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;

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<number[]> = {
     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));
+    }
 };

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';
             }
 

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)
         }