From f1431665513e0a4636fb167a241f4a0571ba728a Mon Sep 17 00:00:00 2001
From: Niklas von Hertzen <niklasvh@gmail.com>
Date: Sat, 14 Aug 2021 16:22:36 +0800
Subject: [PATCH] fix: disable transition properties (#2659)

---
 src/css/index.ts              | 2 --
 src/dom/document-cloner.ts    | 1 +
 src/dom/element-container.ts  | 4 +---
 tests/reftests/animation.html | 9 +++++++++
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/css/index.ts b/src/css/index.ts
index 272c6ac..b338871 100644
--- a/src/css/index.ts
+++ b/src/css/index.ts
@@ -143,7 +143,6 @@ export class CSSParsedDeclaration {
     textTransform: ReturnType<typeof textTransform.parse>;
     transform: ReturnType<typeof transform.parse>;
     transformOrigin: ReturnType<typeof transformOrigin.parse>;
-    transitionDuration: ReturnType<typeof duration.parse>;
     visibility: ReturnType<typeof visibility.parse>;
     webkitTextStrokeColor: Color;
     webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
@@ -221,7 +220,6 @@ 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);
diff --git a/src/dom/document-cloner.ts b/src/dom/document-cloner.ts
index e6c2588..07dedb2 100644
--- a/src/dom/document-cloner.ts
+++ b/src/dom/document-cloner.ts
@@ -233,6 +233,7 @@ export class DocumentCloner {
 
         if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
             const clone = this.createElementClone(node);
+            clone.style.transitionProperty = 'none';
 
             const style = window.getComputedStyle(node);
             const styleBefore = window.getComputedStyle(node, ':before');
diff --git a/src/dom/element-container.ts b/src/dom/element-container.ts
index 01f5018..151e0cd 100644
--- a/src/dom/element-container.ts
+++ b/src/dom/element-container.ts
@@ -23,15 +23,13 @@ export class ElementContainer {
         if (isDebugging(element, DebuggerType.PARSE)) {
             debugger;
         }
+
         this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
 
         if (isHTMLElementNode(element)) {
             if (this.styles.animationDuration.some((duration) => duration > 0)) {
                 element.style.animationDuration = '0s';
             }
-            if (this.styles.transitionDuration.some((duration) => duration > 0)) {
-                element.style.transitionDuration = '0s';
-            }
 
             if (this.styles.transform !== null) {
                 // getBoundingClientRect takes transforms into account
diff --git a/tests/reftests/animation.html b/tests/reftests/animation.html
index 552abc4..f7e9693 100644
--- a/tests/reftests/animation.html
+++ b/tests/reftests/animation.html
@@ -55,6 +55,11 @@
             transform: rotate(45deg)
         }
 
+        .transition-delay {
+            transition: 1ms;
+            transition-delay: 50ms;
+            transform: rotate(45deg)
+        }
 
         div {
             float: left;
@@ -84,5 +89,9 @@
 <div class="transitioned broken">
     <p>Hello</p>
 </div>
+
+<div class="transition-delay">
+    <p>Hello</p>
+</div>
 </body>
 </html>