diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs
index bf0938bd685..813c873264e 100644
--- a/components/style/values/computed/length.rs
+++ b/components/style/values/computed/length.rs
@@ -194,23 +194,24 @@ impl From<LengthOrPercentageOrNone> for Option<CalcLengthOrPercentage> {
 
 impl ToCss for CalcLengthOrPercentage {
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        // FIXME(emilio): This should be consistent with specified calc().
-        //
-        // Also, serialisation here is kinda weird with negative percentages,
-        // for example, as of right now:
-        //
-        //  calc(10px - 5%)
-        //
-        // would serialize as:
-        //
-        //  calc(10px + -5%)
-        //
-        // Need to update and run through try.
-        match (self.length, self.percentage) {
-            (l, Some(p)) if l == Au(0) => p.to_css(dest),
-            (l, Some(p)) => write!(dest, "calc({}px + {}%)", Au::to_px(l), p.0 * 100.),
-            (l, None) => write!(dest, "{}px", Au::to_px(l)),
-        }
+        use num_traits::Zero;
+
+        let (length, percentage) = match (self.length, self.percentage) {
+            (l, None) => return l.to_css(dest),
+            (l, Some(p)) if l == Au(0) => return p.to_css(dest),
+            (l, Some(p)) => (l, p),
+        };
+
+        dest.write_str("calc(")?;
+        percentage.to_css(dest)?;
+
+        dest.write_str(if length < Zero::zero() { " - " } else { " + " })?;
+
+        // FIXME(emilio): Au::abs would be nice.
+        let length = if length < Zero::zero() { -length } else { length };
+
+        length.to_css(dest)?;
+        dest.write_str(")")
     }
 }