Add transitions for CSS calc().

Closes #7284

components/style/animation.rs

@@ -28,7 +28,7 @@ use util::bezier::Bezier;
 use util::geometry::Au;
 use values::CSSFloat;
 use values::computed::{Angle, LengthOrPercentageOrAuto, LengthOrPercentageOrNone};
-use values::computed::{LengthOrPercentage, Length, Time};
+use values::computed::{LengthOrPercentage, Length, Time, Calc};
 
 #[derive(Clone, Debug)]
 pub struct PropertyAnimation {
@@ -513,6 +513,17 @@ impl Interpolate for Color {
     }
 }
 
+impl Interpolate for Calc {
+    #[inline]
+    fn interpolate(&self, other: &Calc, time: f64)
+                   -> Option<Calc> {
+        Some(Calc {
+            length: self.length().interpolate(&other.length(), time),
+            percentage: self.percentage().interpolate(&other.percentage(), time),
+        })
+    }
+}
+
 impl Interpolate for LengthOrPercentage {
     #[inline]
     fn interpolate(&self, other: &LengthOrPercentage, time: f64)
@@ -530,7 +541,13 @@ impl Interpolate for LengthOrPercentage {
                     Some(LengthOrPercentage::Percentage(value))
                 })
             }
-            (_, _) => None,
+            (this, other) => {
+                let this: Calc = From::from(this);
+                let other: Calc = From::from(other);
+                this.interpolate(&other, time).and_then(|value| {
+                    Some(LengthOrPercentage::Calc(value))
+                })
+            }
         }
     }
 }
@@ -555,7 +572,13 @@ impl Interpolate for LengthOrPercentageOrAuto {
             (LengthOrPercentageOrAuto::Auto, LengthOrPercentageOrAuto::Auto) => {
                 Some(LengthOrPercentageOrAuto::Auto)
             }
-            (_, _) => None,
+            (this, other) => {
+                let this: Option<Calc> = From::from(this);
+                let other: Option<Calc> = From::from(other);
+                this.interpolate(&other, time).unwrap_or(None).and_then(|value| {
+                    Some(LengthOrPercentageOrAuto::Calc(value))
+                })
+            }
         }
     }
 }

components/style/values.rs

@@ -1299,8 +1299,8 @@ pub mod computed {
 
     #[derive(Clone, PartialEq, Copy, Debug, HeapSizeOf)]
     pub struct Calc {
-        length: Option<Au>,
+        pub length: Option<Au>,
-        percentage: Option<CSSFloat>,
+        pub percentage: Option<CSSFloat>,
     }
 
     impl Calc {
@@ -1313,6 +1313,53 @@ pub mod computed {
         }
     }
 
+    impl From<LengthOrPercentage> for Calc {
+        fn from(len: LengthOrPercentage) -> Calc {
+            match len {
+                LengthOrPercentage::Percentage(this) => {
+                    Calc {
+                        length: None,
+                        percentage: Some(this),
+                    }
+                }
+                LengthOrPercentage::Length(this) => {
+                    Calc {
+                        length: Some(this),
+                        percentage: None,
+                    }
+                }
+                LengthOrPercentage::Calc(this) => {
+                    this
+                }
+            }
+        }
+    }
+
+    impl From<LengthOrPercentageOrAuto> for Option<Calc> {
+        fn from(len: LengthOrPercentageOrAuto) -> Option<Calc> {
+            match len {
+                LengthOrPercentageOrAuto::Percentage(this) => {
+                    Some(Calc {
+                        length: None,
+                        percentage: Some(this),
+                    })
+                }
+                LengthOrPercentageOrAuto::Length(this) => {
+                    Some(Calc {
+                        length: Some(this),
+                        percentage: None,
+                    })
+                }
+                LengthOrPercentageOrAuto::Calc(this) => {
+                    Some(this)
+                }
+                LengthOrPercentageOrAuto::Auto => {
+                    None
+                }
+            }
+        }
+    }
+
     impl ::cssparser::ToCss for Calc {
         fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
             match (self.length, self.percentage) {

tests/ref/basic.list

@@ -378,6 +378,7 @@ device-pixel-ratio=2 != pixel_snapping_border_a.html pixel_snapping_border_ref.h
 == transform_simple_a.html transform_simple_ref.html
 == transform_skew_a.html transform_skew_ref.html
 == transform_stacking_context_a.html transform_stacking_context_ref.html
+== transition_calc.html transition_calc_ref.html
 == upper_id_attr.html upper_id_attr_ref.html
 flaky_cpu,prefs:"layout.writing-mode.enabled" == vertical-lr-blocks.html vertical-lr-blocks_ref.html
 == vertical_align_bottom_a.html vertical_align_bottom_ref.html

tests/ref/transition_calc.html

@@ -0,0 +1,25 @@
+<style>
+.outer {
+    width: 100px;
+    height: 100px;
+}
+.inner {
+    transition: height 0s;
+    height: calc(100px + 5%);
+    width: 100px;
+    background: red;
+    display: inline-block;
+}
+.inner.active {
+    height: 200px;
+}
+</style>
+<div class=outer>
+<div class=inner id=inner></div>
+</div>
+<script>
+requestAnimationFrame(function() {
+    document.getElementById('inner').className = 'inner active';
+    requestAnimationFrame(function() {});
+});
+</script>

tests/ref/transition_calc_ref.html

@@ -0,0 +1,17 @@
+<style>
+.outer {
+    width: 100px;
+    height: 100px;
+}
+.inner {
+    width: 100px;
+    height: 200px;
+    background: red;
+    display: inline-block;
+}
+.inner.active {
+}
+</style>
+<div class=outer>
+<div class=inner id=inner></div>
+</div>