Auto merge of #18131 - emilio:calc-serialization, r=canaltinova

style: Multiple calc serialization fixes.

This puts us in line with the spec as written, except for caveat in https://github.com/w3c/csswg-drafts/issues/1731.

Need to fix computed calc() too, I'm less confident that we won't need to change test expectations.

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/18131)
<!-- Reviewable:end -->

components/style/Cargo.toml

@@ -29,7 +29,7 @@ servo = ["serde", "heapsize", "heapsize_derive",
 gecko_debug = ["nsstring_vendor/gecko_debug"]
 
 [dependencies]
-app_units = "0.5.2"
+app_units = "0.5.3"
 arrayvec = "0.3.20"
 arraydeque = "0.2.3"
 atomic_refcell = "0.1"

components/style/values/computed/length.rs

@@ -195,11 +195,21 @@ impl From<LengthOrPercentageOrNone> for Option<CalcLengthOrPercentage> {
 
 impl ToCss for CalcLengthOrPercentage {
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        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 { " + " })?;
+        length.abs().to_css(dest)?;
+
+        dest.write_str(")")
     }
 }
 

components/style/values/computed/percentage.rs

@@ -11,7 +11,7 @@ use values::CSSFloat;
 use values::animated::ToAnimatedZero;
 
 /// A computed percentage.
-#[derive(Clone, ComputeSquaredDistance, Copy, Debug, Default, HasViewportPercentage, PartialEq)]
+#[derive(Clone, ComputeSquaredDistance, Copy, Debug, Default, HasViewportPercentage, PartialEq, PartialOrd)]
 #[cfg_attr(feature = "servo", derive(Deserialize, HeapSizeOf, Serialize))]
 pub struct Percentage(pub CSSFloat);
 
@@ -27,6 +27,12 @@ impl Percentage {
     pub fn hundred() -> Self {
         Percentage(1.)
     }
+
+    /// Returns the absolute value for this percentage.
+    #[inline]
+    pub fn abs(&self) -> Self {
+        Percentage(self.0.abs())
+    }
 }
 
 /// https://drafts.csswg.org/css-transitions/#animtype-percentage

components/style/values/specified/calc.rs

@@ -90,16 +90,26 @@ impl HasViewportPercentage for CalcLengthOrPercentage {
 }
 
 impl ToCss for CalcLengthOrPercentage {
+    /// https://drafts.csswg.org/css-values/#calc-serialize
+    ///
+    /// FIXME(emilio): Should this simplify away zeros?
     #[allow(unused_assignments)]
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        use num_traits::Zero;
+
         let mut first_value = true;
         macro_rules! first_value_check {
-            () => {
+            ($val:expr) => {
                 if !first_value {
-                    dest.write_str(" + ")?;
-                } else {
-                    first_value = false;
+                    dest.write_str(if $val < Zero::zero() {
+                        " - "
+                    } else {
+                        " + "
+                    })?;
+                } else if $val < Zero::zero() {
+                    dest.write_str("-")?;
                 }
+                first_value = false;
             };
         }
 
@@ -107,8 +117,8 @@ impl ToCss for CalcLengthOrPercentage {
             ( $( $val:ident ),* ) => {
                 $(
                     if let Some(val) = self.$val {
-                        first_value_check!();
-                        val.to_css(dest)?;
+                        first_value_check!(val);
+                        val.abs().to_css(dest)?;
                         dest.write_str(stringify!($val))?;
                     }
                 )*
@@ -117,7 +127,16 @@ impl ToCss for CalcLengthOrPercentage {
 
         dest.write_str("calc(")?;
 
-        serialize!(ch, em, ex, rem, vh, vmax, vmin, vw);
+        // NOTE(emilio): Percentages first because of web-compat problems, see:
+        // https://github.com/w3c/csswg-drafts/issues/1731
+        if let Some(val) = self.percentage {
+            first_value_check!(val.0);
+            val.abs().to_css(dest)?;
+        }
+
+        // NOTE(emilio): The order here it's very intentional, and alphabetic
+        // per the spec linked above.
+        serialize!(ch, em, ex);
 
         #[cfg(feature = "gecko")]
         {
@@ -125,16 +144,13 @@ impl ToCss for CalcLengthOrPercentage {
         }
 
         if let Some(val) = self.absolute {
-            first_value_check!();
-            val.to_css(dest)?;
+            first_value_check!(val);
+            val.abs().to_css(dest)?;
         }
 
-        if let Some(val) = self.percentage {
-            first_value_check!();
-            val.to_css(dest)?;
-        }
+        serialize!(rem, vh, vmax, vmin, vw);
 
-        write!(dest, ")")
+        dest.write_str(")")
     }
 }