From 8346cca4620a446631a2e0b5610b97035254a726 Mon Sep 17 00:00:00 2001
From: tleish <tleish@users.noreply.github.com>
Date: Mon, 23 Mar 2020 10:19:21 -0600
Subject: [PATCH] Fix for #624 to auto-calc tween values for css type values
 using Window.getComputedStyle().

---
 src/index.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index 5249dcf5..1a0f0a6b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -715,11 +715,11 @@ function normalizeTweens(prop, animatable) {
   return prop.tweens.map(t => {
     const tween = normalizeTweenValues(t, animatable);
     const tweenValue = tween.value;
-    let to = is.arr(tweenValue) ? tweenValue[1] : tweenValue;
+    let to = calcTweenValue(animatable.target, prop.name, is.arr(tweenValue) ? tweenValue[1] : tweenValue);
     const toUnit = getUnit(to);
     const originalValue = getOriginalTargetValue(animatable.target, prop.name, toUnit, animatable);
     const previousValue = previousTween ? previousTween.to.original : originalValue;
-    const from = is.arr(tweenValue) ? tweenValue[0] : previousValue;
+    const from = calcTweenValue(animatable.target, prop.name, is.arr(tweenValue) ? tweenValue[0] : previousValue);
     const fromUnit = getUnit(from) || getUnit(originalValue);
     const unit = toUnit || fromUnit;
     if (is.und(to)) to = previousValue;
@@ -736,6 +736,24 @@ function normalizeTweens(prop, animatable) {
   });
 }
 
+function calcTweenValue(el, propName, value) {
+  switch (getAnimationType(el, propName)) {
+    case 'css': return calcCssTweenValue(el, propName, value);
+    default: return value;
+  }
+}
+
+// calculate css value from obscure values like 'auto'
+function calcCssTweenValue(el, propName, value) {
+  if(getUnit(value) !== undefined){ return value } // no calculation required
+  let uppercasePropName = propName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  let currentValue = el.style[propName];
+  el.style[propName] = value; // temporarily change value
+  let tweenValue = getComputedStyle(el).getPropertyValue(uppercasePropName) || value;
+  el.style[propName] = currentValue; // reset original value
+  return tweenValue;
+}
+
 // Tween progress
 
 const setProgressValue = {