diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs
index 5ff6b5f0c465..9268f5748ddb 100644
--- a/components/style/values/computed/length.rs
+++ b/components/style/values/computed/length.rs
@@ -10,6 +10,7 @@ use std::fmt;
 use style_traits::ToCss;
 use super::{Number, ToComputedValue, Context};
 use values::{Auto, CSSFloat, Either, None_, Normal, specified};
+use values::specified::length::{FontRelativeLength, ViewportPercentageLength};
 
 pub use cssparser::Color as CSSColor;
 pub use super::image::{EndingShape as GradientShape, Gradient, GradientKind, Image};
@@ -105,13 +106,19 @@ impl ToComputedValue for specified::CalcLengthOrPercentage {
             length += absolute;
         }
 
-        for val in &[self.vw, self.vh, self.vmin, self.vmax] {
+        for val in &[self.vw.map(ViewportPercentageLength::Vw),
+                     self.vh.map(ViewportPercentageLength::Vh),
+                     self.vmin.map(ViewportPercentageLength::Vmin),
+                     self.vmax.map(ViewportPercentageLength::Vmax)] {
             if let Some(val) = *val {
                 length += val.to_computed_value(context.viewport_size());
             }
         }
 
-        for val in &[self.ch, self.em, self.ex, self.rem] {
+        for val in &[self.ch.map(FontRelativeLength::Ch),
+                     self.em.map(FontRelativeLength::Em),
+                     self.ex.map(FontRelativeLength::Ex),
+                     self.rem.map(FontRelativeLength::Rem)] {
             if let Some(val) = *val {
                 length += val.to_computed_value(context, /* use inherited */ false);
             }
@@ -119,7 +126,7 @@ impl ToComputedValue for specified::CalcLengthOrPercentage {
 
         CalcLengthOrPercentage {
             length: length,
-            percentage: self.percentage.map(|p| p.0),
+            percentage: self.percentage,
         }
     }
 
@@ -127,7 +134,7 @@ impl ToComputedValue for specified::CalcLengthOrPercentage {
     fn from_computed_value(computed: &CalcLengthOrPercentage) -> Self {
         specified::CalcLengthOrPercentage {
             absolute: Some(computed.length),
-            percentage: computed.percentage.map(specified::Percentage),
+            percentage: computed.percentage,
             ..Default::default()
         }
     }
diff --git a/components/style/values/specified/length.rs b/components/style/values/specified/length.rs
index b86038eb19a2..24f5563c2b9f 100644
--- a/components/style/values/specified/length.rs
+++ b/components/style/values/specified/length.rs
@@ -440,15 +440,15 @@ pub enum CalcUnit {
 #[allow(missing_docs)]
 pub struct CalcLengthOrPercentage {
     pub absolute: Option<Au>,
-    pub vw: Option<ViewportPercentageLength>,
-    pub vh: Option<ViewportPercentageLength>,
-    pub vmin: Option<ViewportPercentageLength>,
-    pub vmax: Option<ViewportPercentageLength>,
-    pub em: Option<FontRelativeLength>,
-    pub ex: Option<FontRelativeLength>,
-    pub ch: Option<FontRelativeLength>,
-    pub rem: Option<FontRelativeLength>,
-    pub percentage: Option<Percentage>,
+    pub vw: Option<CSSFloat>,
+    pub vh: Option<CSSFloat>,
+    pub vmin: Option<CSSFloat>,
+    pub vmax: Option<CSSFloat>,
+    pub em: Option<CSSFloat>,
+    pub ex: Option<CSSFloat>,
+    pub ch: Option<CSSFloat>,
+    pub rem: Option<CSSFloat>,
+    pub percentage: Option<CSSFloat>,
 }
 
 impl CalcLengthOrPercentage {
@@ -671,15 +671,15 @@ impl CalcLengthOrPercentage {
 
         Ok(CalcLengthOrPercentage {
             absolute: absolute.map(Au),
-            vw: vw.map(ViewportPercentageLength::Vw),
-            vh: vh.map(ViewportPercentageLength::Vh),
-            vmax: vmax.map(ViewportPercentageLength::Vmax),
-            vmin: vmin.map(ViewportPercentageLength::Vmin),
-            em: em.map(FontRelativeLength::Em),
-            ex: ex.map(FontRelativeLength::Ex),
-            ch: ch.map(FontRelativeLength::Ch),
-            rem: rem.map(FontRelativeLength::Rem),
-            percentage: percentage.map(Percentage),
+            vw: vw,
+            vh: vh,
+            vmax: vmax,
+            vmin: vmin,
+            em: em,
+            ex: ex,
+            ch: ch,
+            rem: rem,
+            percentage: percentage,
         })
     }
 
@@ -767,21 +767,26 @@ impl ToCss for CalcLengthOrPercentage {
             };
         }
 
+        let mut first_value = true;
+        macro_rules! first_value_check {
+            () => {
+                if !first_value {
+                    try!(dest.write_str(" + "));
+                } else {
+                    first_value = false;
+                }
+            };
+        }
+
         macro_rules! serialize {
             ( $( $val:ident ),* ) => {
-                {
-                    let mut first_value = true;
-                    $(
-                        if let Some(val) = self.$val {
-                            if !first_value {
-                                try!(write!(dest, " + "));
-                            } else {
-                                first_value = false;
-                            }
-                            try!(val.to_css(dest));
-                        }
-                    )*
-                 }
+                $(
+                    if let Some(val) = self.$val {
+                        first_value_check!();
+                        try!(val.to_css(dest));
+                        try!(dest.write_str(stringify!($val)));
+                    }
+                )*
             };
         }
 
@@ -792,11 +797,21 @@ impl ToCss for CalcLengthOrPercentage {
            try!(write!(dest, "calc("));
         }
 
-        serialize!(ch, em, ex, absolute, rem, vh, vmax, vmin, vw, percentage);
+        serialize!(ch, em, ex, rem, vh, vmax, vmin, vw);
+        if let Some(val) = self.absolute {
+            first_value_check!();
+            try!(val.to_css(dest));
+        }
+
+        if let Some(val) = self.percentage {
+            first_value_check!();
+            try!(write!(dest, "{}%", val * 100.));
+        }
 
         if count > 1 {
            try!(write!(dest, ")"));
         }
+
         Ok(())
      }
 }
diff --git a/tests/wpt/mozilla/tests/mozilla/calc.html b/tests/wpt/mozilla/tests/mozilla/calc.html
index 63ac26613f75..8d6f11f6892b 100644
--- a/tests/wpt/mozilla/tests/mozilla/calc.html
+++ b/tests/wpt/mozilla/tests/mozilla/calc.html
@@ -40,13 +40,13 @@
 
     // Alphabetical order
     ['calc(0ch + 0px + 0pt + 0pc + 0in + 0cm + 0mm + 0rem + 0em + 0ex + 0% + 0vw + 0vh + 0vmin + 0vmax)',
-     'calc(0ch + 0em + 0ex + 0px + 0rem + 0vh + 0vmax + 0vmin + 0vw + 0%)',
+     'calc(0ch + 0em + 0ex + 0rem + 0vh + 0vmax + 0vmin + 0vw + 0px + 0%)',
      '0px'],
 
     // Simplification
     ['calc((2 - 1) * 10px)', '10px', '10px'],
     ['calc(((3 - 1) * (8 + 4)) * 10px)', '240px', '240px'],
-    ['calc(5 * (20px / 2 + 7 * (3em + 12px/4 + (8 - 2) * 2rem)))', 'calc(105em + 155px + 420rem)', '8555px'],
+    ['calc(5 * (20px / 2 + 7 * (3em + 12px/4 + (8 - 2) * 2rem)))', 'calc(105em + 420rem + 155px)', '8555px'],
 
 ];