diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index f89bd2ef2db..a03d55070aa 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -1246,7 +1246,14 @@ impl Animatable for LengthOrPercentageOrNone {
             (LengthOrPercentageOrNone::None, LengthOrPercentageOrNone::None) => {
                 Ok(LengthOrPercentageOrNone::None)
             }
-            _ => Err(())
+            (this, other) => {
+                let this = <Option<CalcLengthOrPercentage>>::from(this);
+                let other = <Option<CalcLengthOrPercentage>>::from(other);
+                match this.add_weighted(&other, self_portion, other_portion) {
+                    Ok(Some(result)) => Ok(LengthOrPercentageOrNone::Calc(result)),
+                    _ => Err(()),
+                }
+            },
         }
     }
 
@@ -1273,7 +1280,12 @@ impl Animatable for LengthOrPercentageOrNone {
              LengthOrPercentageOrNone::Percentage(ref other)) => {
                 this.compute_distance(other)
             },
-            _ => Err(())
+            (this, other) => {
+                // If one of the element is Auto, Option<> will be None, and the returned distance is Err(())
+                let this = <Option<CalcLengthOrPercentage>>::from(this);
+                let other = <Option<CalcLengthOrPercentage>>::from(other);
+                this.compute_distance(&other)
+            },
         }
     }
 }
diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs
index 3d59a51ff42..7e765daf623 100644
--- a/components/style/values/computed/length.rs
+++ b/components/style/values/computed/length.rs
@@ -157,6 +157,25 @@ impl From<LengthOrPercentageOrAuto> for Option<CalcLengthOrPercentage> {
     }
 }
 
+impl From<LengthOrPercentageOrNone> for Option<CalcLengthOrPercentage> {
+    fn from(len: LengthOrPercentageOrNone) -> Option<CalcLengthOrPercentage> {
+        match len {
+            LengthOrPercentageOrNone::Percentage(this) => {
+                Some(CalcLengthOrPercentage::new(Au(0), Some(this)))
+            }
+            LengthOrPercentageOrNone::Length(this) => {
+                Some(CalcLengthOrPercentage::new(this, None))
+            }
+            LengthOrPercentageOrNone::Calc(this) => {
+                Some(this)
+            }
+            LengthOrPercentageOrNone::None => {
+                None
+            }
+        }
+    }
+}
+
 impl ToCss for CalcLengthOrPercentage {
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
         match (self.length, self.percentage) {