fix: finish animation/transitions for elements (#2632)

src/css/IPropertyDescriptor.ts

@@ -1,8 +1,8 @@
 import {CSSValue} from './syntax/parser';
-import {CSSTypes} from './types/index';
+import {CSSTypes} from './types';
 import {Context} from '../core/context';
 
-export enum PropertyDescriptorParsingType {
+export const enum PropertyDescriptorParsingType {
     VALUE,
     LIST,
     IDENT_VALUE,

src/css/index.ts

@@ -57,6 +57,7 @@ import {Tokenizer} from './syntax/tokenizer';
 import {Color, color as colorType, isTransparent} from './types/color';
 import {angle} from './types/angle';
 import {image} from './types/image';
+import {time} from './types/time';
 import {opacity} from './property-descriptors/opacity';
 import {textDecorationColor} from './property-descriptors/text-decoration-color';
 import {textDecorationLine} from './property-descriptors/text-decoration-line';
@@ -71,6 +72,7 @@ import {contains} from '../core/bitwise';
 import {content} from './property-descriptors/content';
 import {counterIncrement} from './property-descriptors/counter-increment';
 import {counterReset} from './property-descriptors/counter-reset';
+import {duration} from './property-descriptors/duration';
 import {quotes} from './property-descriptors/quotes';
 import {boxShadow} from './property-descriptors/box-shadow';
 import {paintOrder} from './property-descriptors/paint-order';
@@ -79,6 +81,7 @@ import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-w
 import {Context} from '../core/context';
 
 export class CSSParsedDeclaration {
+    animationDuration: ReturnType<typeof time.parse>;
     backgroundClip: ReturnType<typeof backgroundClip.parse>;
     backgroundColor: Color;
     backgroundImage: ReturnType<typeof backgroundImage.parse>;
@@ -138,6 +141,7 @@ export class CSSParsedDeclaration {
     textTransform: ReturnType<typeof textTransform.parse>;
     transform: ReturnType<typeof transform.parse>;
     transformOrigin: ReturnType<typeof transformOrigin.parse>;
+    transitionDuration: ReturnType<typeof time.parse>;
     visibility: ReturnType<typeof visibility.parse>;
     webkitTextStrokeColor: Color;
     webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
@@ -145,6 +149,7 @@ export class CSSParsedDeclaration {
     zIndex: ReturnType<typeof zIndex.parse>;
 
     constructor(context: Context, declaration: CSSStyleDeclaration) {
+        this.animationDuration = parse(context, duration, declaration.animationDuration);
         this.backgroundClip = parse(context, backgroundClip, declaration.backgroundClip);
         this.backgroundColor = parse(context, backgroundColor, declaration.backgroundColor);
         this.backgroundImage = parse(context, backgroundImage, declaration.backgroundImage);
@@ -213,6 +218,7 @@ export class CSSParsedDeclaration {
         this.textTransform = parse(context, textTransform, declaration.textTransform);
         this.transform = parse(context, transform, declaration.transform);
         this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
+        this.transitionDuration = parse(context, duration, declaration.transitionDuration);
         this.visibility = parse(context, visibility, declaration.visibility);
         this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
         this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
@@ -306,6 +312,8 @@ const parse = (context: Context, descriptor: CSSPropertyDescriptor<any>, style?:
                 case 'length-percentage':
                     const value = parser.parseComponentValue();
                     return isLengthPercentage(value) ? value : ZERO_LENGTH;
+                case 'time':
+                    return time.parse(context, parser.parseComponentValue());
             }
             break;
     }

src/css/property-descriptors/duration.ts

@@ -0,0 +1,9 @@
+import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
+
+export const duration: IPropertyTypeValueDescriptor = {
+    name: 'duration',
+    initialValue: '0s',
+    prefix: false,
+    type: PropertyDescriptorParsingType.TYPE_VALUE,
+    format: 'time'
+};

src/css/property-descriptors/overflow-wrap.ts

@@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export enum OVERFLOW_WRAP {
+export const enum OVERFLOW_WRAP {
     NORMAL = 'normal',
     BREAK_WORD = 'break-word'
 }

src/css/syntax/tokenizer.ts

@@ -2,7 +2,7 @@
 
 import {fromCodePoint, toCodePoints} from 'css-line-break';
 
-export enum TokenType {
+export const enum TokenType {
     STRING_TOKEN,
     BAD_STRING_TOKEN,
     LEFT_PARENTHESIS_TOKEN,

src/css/types/index.ts

@@ -1 +1 @@
-export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage';
+export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage' | 'time';

src/css/types/time.ts

@@ -0,0 +1,20 @@
+import {CSSValue} from '../syntax/parser';
+import {TokenType} from '../syntax/tokenizer';
+import {ITypeDescriptor} from '../ITypeDescriptor';
+import {Context} from '../../core/context';
+
+export const time: ITypeDescriptor<number> = {
+    name: 'time',
+    parse: (_context: Context, value: CSSValue): number => {
+        if (value.type === TokenType.DIMENSION_TOKEN) {
+            switch (value.unit.toLowerCase()) {
+                case 's':
+                    return 1000 * value.number;
+                case 'ms':
+                    return value.number;
+            }
+        }
+
+        throw new Error(`Unsupported time type`);
+    }
+};

src/dom/element-container.ts

@@ -21,10 +21,21 @@ export class ElementContainer {
         this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
         this.textNodes = [];
         this.elements = [];
-        if (this.styles.transform !== null && isHTMLElementNode(element)) {
-            // getBoundingClientRect takes transforms into account
-            element.style.transform = 'none';
+
+        if (isHTMLElementNode(element)) {
+            if (this.styles.animationDuration > 0) {
+                element.style.animationDuration = '0s';
+            }
+            if (this.styles.transitionDuration > 0) {
+                element.style.transitionDuration = '0s';
+            }
+
+            if (this.styles.transform !== null) {
+                // getBoundingClientRect takes transforms into account
+                element.style.transform = 'none';
+            }
         }
+
         this.bounds = parseBounds(this.context, element);
         this.flags = 0;
     }

tests/reftests/animation.html

@@ -5,46 +5,84 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="../test.js"></script>
     <style>
-        span {
-            color:blue;
-        }
-        p {
-            background-color: green;
-        }
-        div {
-            background: red;
-            border: 5px solid blue;
-            animation: spin 3s linear 1s infinite;
-        }
         body {
             font-family: Arial;
         }
 
-        @-webkit-keyframes spin {
+        @keyframes rotate0 {
             0% {
-                -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
-                /* Firefox 16+, IE 10+, Opera */ }
-            100% {
-                -webkit-transform: rotate(360deg);
-                transform: rotate(360deg);
-                /* Firefox 16+, IE 10+, Opera */ } }
+            }
+        }
 
-        @keyframes spin {
+        @keyframes rotate45 {
             0% {
-                -webkit-transform: rotate(0deg);
-                transform: rotate(0deg);
-                /* Firefox 16+, IE 10+, Opera */ }
-            100% {
-                -webkit-transform: rotate(360deg);
-                transform: rotate(360deg);
-                /* Firefox 16+, IE 10+, Opera */ } }
+                transform: rotate(45deg);
+            }
+        }
+
+        p {
+            font: 22px/1 Arial, sans-serif;
+            position: absolute;
+            top: 25%;
+            left: 25%;
+            width: 50%;
+            height: 50%;
+            color: #fff;
+            background-color: #666;
+            line-height: 90px;
+            text-align: center;
+        }
+
+        .transformed.working p {
+            transform: rotate(45deg);
+        }
+
+        .animated.working p {
+            animation-name: rotate0;
+            animation-duration: 1ms;
+            animation-play-state: paused;
+        }
+
+        .animated.broken p {
+            animation-name: rotate45;
+            animation-duration: 1ms;
+            animation-play-state: paused;
+        }
+
+        .transitioned p {
+            transition: 1ms;
+            transform: rotate(45deg)
+        }
+
+
+        div {
+            float: left;
+            clear: left;
+            margin-right: 10px;
+            background-color: #ccc;
+            width: 180px;
+            height: 180px;
+            position: relative;
+        }
     </style>
 
 </head>
 <body>
-<div style="clip: rect(0px, 400px, 50px, 200px); ">Some inline text <span> followed by text in span </span> followed by more inline text.
-    <p>Then a block level element.</p>
-    Then more inline text.</div>
+<div class="transformed working">
+    <p>Hello</p>
+</div>
+
+<div class="animated working">
+    <p>Hello</p>
+</div>
+
+<div class="animated broken">
+    <p>Hello</p>
+</div>
+
+<div class="transitioned broken">
+    <p>Hello</p>
+</div>
 </body>
 </html>