Auto merge of #17382 - servo:derive-all-the-things, r=emilio

Derive more ToCss impls

<!-- 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/17382)
<!-- Reviewable:end -->

25 files changed, 164 insertions, 355 deletions

diff --git a/components/layout/flex.rs b/components/layout/flex.rs
index e2bd1c0838d..30295eabfe7 100644
--- a/components/layout/flex.rs
+++ b/components/layout/flex.rs
@@ -25,8 +25,9 @@ use style::computed_values::border_collapse;
 use style::logical_geometry::{Direction, LogicalSize};
 use style::properties::ServoComputedValues;
 use style::servo::restyle_damage::{REFLOW, REFLOW_OUT_OF_FLOW};
-use style::values::computed::{LengthOrPercentage, LengthOrPercentageOrAuto};
-use style::values::computed::{LengthOrPercentageOrAutoOrContent, LengthOrPercentageOrNone};
+use style::values::computed::{LengthOrPercentage, LengthOrPercentageOrAuto, LengthOrPercentageOrNone};
+use style::values::computed::flex::FlexBasis;
+use style::values::generics::flex::FlexBasis as GenericFlexBasis;
 
 /// The size of an axis. May be a specified size, a min/max
 /// constraint, or an unlimited size
@@ -67,23 +68,25 @@ impl AxisSize {
 /// and the container size, then return the used value of flex basis. it can be used to help
 /// determining the flex base size and to indicate whether the main size of the item
 /// is definite after flex size resolving.
-fn from_flex_basis(flex_basis: LengthOrPercentageOrAutoOrContent,
-                   main_length: LengthOrPercentageOrAuto,
-                   containing_length: Option<Au>) -> MaybeAuto {
+fn from_flex_basis(
+    flex_basis: FlexBasis,
+    main_length: LengthOrPercentageOrAuto,
+    containing_length: Option<Au>
+) -> MaybeAuto {
     match (flex_basis, containing_length) {
-        (LengthOrPercentageOrAutoOrContent::Length(length), _) =>
+        (GenericFlexBasis::Length(LengthOrPercentage::Length(length)), _) =>
             MaybeAuto::Specified(length),
-        (LengthOrPercentageOrAutoOrContent::Percentage(percent), Some(size)) =>
+        (GenericFlexBasis::Length(LengthOrPercentage::Percentage(percent)), Some(size)) =>
             MaybeAuto::Specified(size.scale_by(percent.0)),
-        (LengthOrPercentageOrAutoOrContent::Percentage(_), None) =>
+        (GenericFlexBasis::Length(LengthOrPercentage::Percentage(_)), None) =>
             MaybeAuto::Auto,
-        (LengthOrPercentageOrAutoOrContent::Calc(calc), _) =>
+        (GenericFlexBasis::Length(LengthOrPercentage::Calc(calc)), _) =>
             MaybeAuto::from_option(calc.to_used_value(containing_length)),
-        (LengthOrPercentageOrAutoOrContent::Content, _) =>
+        (GenericFlexBasis::Content, _) =>
             MaybeAuto::Auto,
-        (LengthOrPercentageOrAutoOrContent::Auto, Some(size)) =>
+        (GenericFlexBasis::Auto, Some(size)) =>
             MaybeAuto::from_style(main_length, size),
-        (LengthOrPercentageOrAutoOrContent::Auto, None) => {
+        (GenericFlexBasis::Auto, None) => {
             if let LengthOrPercentageOrAuto::Length(length) = main_length {
                 MaybeAuto::Specified(length)
             } else {
diff --git a/components/style/counter_style/mod.rs b/components/style/counter_style/mod.rs
index c189429fb90..cfe35bccf05 100644
--- a/components/style/counter_style/mod.rs
+++ b/components/style/counter_style/mod.rs
@@ -469,7 +469,7 @@ fn bound_to_css<W>(range: Option<i32>, dest: &mut W) -> fmt::Result where W: fmt
 }
 
 /// https://drafts.csswg.org/css-counter-styles/#counter-style-pad
-#[derive(Debug, Clone)]
+#[derive(Clone, Debug, ToCss)]
 pub struct Pad(pub u32, pub Symbol);
 
 impl Parse for Pad {
@@ -484,15 +484,8 @@ impl Parse for Pad {
     }
 }
 
-impl ToCss for Pad {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        write!(dest, "{} ", self.0)?;
-        self.1.to_css(dest)
-    }
-}
-
 /// https://drafts.csswg.org/css-counter-styles/#counter-style-fallback
-#[derive(Debug, Clone)]
+#[derive(Clone, Debug, ToCss)]
 pub struct Fallback(pub CustomIdent);
 
 impl Parse for Fallback {
@@ -501,12 +494,6 @@ impl Parse for Fallback {
     }
 }
 
-impl ToCss for Fallback {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        self.0.to_css(dest)
-    }
-}
-
 /// https://drafts.csswg.org/css-counter-styles/#descdef-counter-style-symbols
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub struct Symbols(pub Vec<Symbol>);
@@ -542,7 +529,7 @@ impl ToCss for Symbols {
 }
 
 /// https://drafts.csswg.org/css-counter-styles/#descdef-counter-style-additive-symbols
-#[derive(Debug, Clone)]
+#[derive(Clone, Debug, ToCss)]
 pub struct AdditiveSymbols(pub Vec<AdditiveTuple>);
 
 impl Parse for AdditiveSymbols {
@@ -556,14 +543,8 @@ impl Parse for AdditiveSymbols {
     }
 }
 
-impl ToCss for AdditiveSymbols {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        self.0.to_css(dest)
-    }
-}
-
 /// <integer> && <symbol>
-#[derive(Debug, Clone)]
+#[derive(Clone, Debug, ToCss)]
 pub struct AdditiveTuple {
     /// <integer>
     pub weight: u32,
@@ -588,15 +569,8 @@ impl Parse for AdditiveTuple {
     }
 }
 
-impl ToCss for AdditiveTuple {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        write!(dest, "{} ", self.weight)?;
-        self.symbol.to_css(dest)
-    }
-}
-
 /// https://drafts.csswg.org/css-counter-styles/#counter-style-speak-as
-#[derive(Debug, Clone)]
+#[derive(Clone, Debug, ToCss)]
 pub enum SpeakAs {
     /// auto
     Auto,
@@ -639,15 +613,3 @@ impl Parse for SpeakAs {
         })
     }
 }
-
-impl ToCss for SpeakAs {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        match *self {
-            SpeakAs::Auto => dest.write_str("auto"),
-            SpeakAs::Bullets => dest.write_str("bullets"),
-            SpeakAs::Numbers => dest.write_str("numbers"),
-            SpeakAs::Words => dest.write_str("words"),
-            SpeakAs::Other(ref other) => other.to_css(dest),
-        }
-    }
-}
diff --git a/components/style/font_face.rs b/components/style/font_face.rs
index fe010cf106d..662b0c733ce 100644
--- a/components/style/font_face.rs
+++ b/components/style/font_face.rs
@@ -24,33 +24,16 @@ use style_traits::{ToCss, OneOrMoreCommaSeparated, ParseError, StyleParseError};
 use values::specified::url::SpecifiedUrl;
 
 /// A source for a font-face rule.
-#[derive(Clone, Debug, PartialEq, Eq)]
 #[cfg_attr(feature = "servo", derive(Deserialize, Serialize))]
+#[derive(Clone, Debug, Eq, PartialEq, ToCss)]
 pub enum Source {
     /// A `url()` source.
     Url(UrlSource),
     /// A `local()` source.
+    #[css(function)]
     Local(FamilyName),
 }
 
-impl ToCss for Source {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
-    {
-        match *self {
-            Source::Url(ref url) => {
-                try!(dest.write_str("url(\""));
-                try!(url.to_css(dest));
-            },
-            Source::Local(ref family) => {
-                try!(dest.write_str("local(\""));
-                try!(family.to_css(dest));
-            },
-        }
-        dest.write_str("\")")
-    }
-}
-
 impl OneOrMoreCommaSeparated for Source {}
 
 /// A `UrlSource` represents a font-face source that has been specified with a
@@ -70,7 +53,7 @@ impl ToCss for UrlSource {
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result
         where W: fmt::Write,
     {
-        dest.write_str(self.url.as_str())
+        self.url.to_css(dest)
     }
 }
 
diff --git a/components/style/gecko/url.rs b/components/style/gecko/url.rs
index 28359fba6cd..192d43ef5a1 100644
--- a/components/style/gecko/url.rs
+++ b/components/style/gecko/url.rs
@@ -4,12 +4,11 @@
 
 //! Common handling for the specified value CSS url() values.
 
-use cssparser::CssStringWriter;
 use gecko_bindings::structs::{ServoBundledURI, URLExtraData};
 use gecko_bindings::structs::root::mozilla::css::ImageValue;
 use gecko_bindings::sugar::refptr::RefPtr;
 use parser::ParserContext;
-use std::fmt::{self, Write};
+use std::fmt;
 use style_traits::{ToCss, ParseError};
 use stylearc::Arc;
 
@@ -100,8 +99,8 @@ impl SpecifiedUrl {
 
 impl ToCss for SpecifiedUrl {
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        try!(dest.write_str("url(\""));
-        try!(CssStringWriter::new(dest).write_str(&*self.serialization));
-        dest.write_str("\")")
+        dest.write_str("url(")?;
+        self.serialization.to_css(dest)?;
+        dest.write_str(")")
     }
 }
diff --git a/components/style/macros.rs b/components/style/macros.rs
index 151cfaa2f60..7899ef61083 100644
--- a/components/style/macros.rs
+++ b/components/style/macros.rs
@@ -82,17 +82,11 @@ macro_rules! add_impls_for_keyword_enum {
 
 macro_rules! define_keyword_type {
     ($name: ident, $css: expr) => {
-        #[derive(Clone, PartialEq, Copy)]
-        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
         #[allow(missing_docs)]
+        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+        #[derive(Clone, Copy, PartialEq, ToCss)]
         pub struct $name;
 
-        impl ::style_traits::ToCss for $name {
-            fn to_css<W>(&self, dest: &mut W) -> ::std::fmt::Result where W: ::std::fmt::Write {
-                write!(dest, $css)
-            }
-        }
-
         impl $crate::properties::animated_properties::Animatable for $name {
             #[inline]
             fn add_weighted(&self, _other: &Self, _self_progress: f64, _other_progress: f64)
diff --git a/components/style/media_queries.rs b/components/style/media_queries.rs
index 2737f7bba35..adca60b2042 100644
--- a/components/style/media_queries.rs
+++ b/components/style/media_queries.rs
@@ -45,8 +45,8 @@ impl MediaList {
 }
 
 /// https://drafts.csswg.org/mediaqueries/#mq-prefix
-#[derive(PartialEq, Eq, Copy, Clone, Debug)]
 #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+#[derive(Clone, Copy, Debug, Eq, PartialEq, ToCss)]
 pub enum Qualifier {
     /// Hide a media query from legacy UAs:
     /// https://drafts.csswg.org/mediaqueries/#mq-only
@@ -56,17 +56,6 @@ pub enum Qualifier {
     Not,
 }
 
-impl ToCss for Qualifier {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write
-    {
-        dest.write_str(match *self {
-            Qualifier::Not => "not",
-            Qualifier::Only => "only",
-        })
-    }
-}
-
 /// A [media query][mq].
 ///
 /// [mq]: https://drafts.csswg.org/mediaqueries/
diff --git a/components/style/properties/helpers.mako.rs b/components/style/properties/helpers.mako.rs
index f2c0e818b37..4b9d103c26e 100644
--- a/components/style/properties/helpers.mako.rs
+++ b/components/style/properties/helpers.mako.rs
@@ -764,7 +764,7 @@
     % endif
 </%def>
 
-<%def name="shorthand(name, sub_properties, experimental=False, **kwargs)">
+<%def name="shorthand(name, sub_properties, experimental=False, derive_serialize=False, **kwargs)">
 <%
     shorthand = data.declare_shorthand(name, sub_properties.split(), experimental=experimental,
                                        **kwargs)
@@ -778,9 +778,12 @@
         use properties::{ShorthandId, LonghandId, UnparsedValue, longhands};
         #[allow(unused_imports)]
         use selectors::parser::SelectorParseError;
+        #[allow(unused_imports)]
         use std::fmt;
         use stylearc::Arc;
-        use style_traits::{ToCss, ParseError, StyleParseError};
+        use style_traits::{ParseError, StyleParseError};
+        #[allow(unused_imports)]
+        use style_traits::ToCss;
 
         pub struct Longhands {
             % for sub_property in shorthand.sub_properties:
@@ -798,6 +801,9 @@
 
         /// Represents a serializable set of all of the longhand properties that
         /// correspond to a shorthand.
+        % if derive_serialize:
+        #[derive(ToCss)]
+        % endif
         pub struct LonghandsToSerialize<'a> {
             % for sub_property in shorthand.sub_properties:
                 pub ${sub_property.ident}:
diff --git a/components/style/properties/longhand/position.mako.rs b/components/style/properties/longhand/position.mako.rs
index 56ed70a47b7..609573b44af 100644
--- a/components/style/properties/longhand/position.mako.rs
+++ b/components/style/properties/longhand/position.mako.rs
@@ -170,9 +170,8 @@ ${helpers.predefined_type("order", "Integer", "0",
 % else:
     // FIXME: This property should be animatable.
     ${helpers.predefined_type("flex-basis",
-                              "LengthOrPercentageOrAutoOrContent",
-                              "computed::LengthOrPercentageOrAutoOrContent::Auto",
-                              "parse_non_negative",
+                              "FlexBasis",
+                              "computed::FlexBasis::auto()",
                               spec="https://drafts.csswg.org/css-flexbox/#flex-basis-property",
                               extra_prefixes="webkit",
                               animation_value_type="none")}
diff --git a/components/style/properties/shorthand/box.mako.rs b/components/style/properties/shorthand/box.mako.rs
index abded44dc57..f92def63264 100644
--- a/components/style/properties/shorthand/box.mako.rs
+++ b/components/style/properties/shorthand/box.mako.rs
@@ -334,6 +334,7 @@ macro_rules! try_parse_one {
 <%helpers:shorthand name="-moz-transform" products="gecko"
                     sub_properties="transform"
                     flags="SHORTHAND_ALIAS_PROPERTY"
+                    derive_serialize="True"
                     spec="Non-standard: https://developer.mozilla.org/en-US/docs/Web/CSS/transform">
     use properties::longhands::transform;
 
@@ -343,10 +344,4 @@ macro_rules! try_parse_one {
             transform: transform::parse_prefixed(context, input)?,
         })
     }
-
-    impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            self.transform.to_css(dest)
-        }
-    }
 </%helpers:shorthand>
diff --git a/components/style/properties/shorthand/column.mako.rs b/components/style/properties/shorthand/column.mako.rs
index 692326056b3..166de6e34d1 100644
--- a/components/style/properties/shorthand/column.mako.rs
+++ b/components/style/properties/shorthand/column.mako.rs
@@ -4,7 +4,10 @@
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
-<%helpers:shorthand name="columns" sub_properties="column-count column-width" experimental="True"
+<%helpers:shorthand name="columns"
+                    sub_properties="column-width column-count"
+                    experimental="True"
+                    derive_serialize="True"
                     extra_prefixes="moz" spec="https://drafts.csswg.org/css-multicol/#propdef-columns">
     use properties::longhands::{column_count, column_width};
 
@@ -49,19 +52,11 @@
             })
         }
     }
-
-    impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            try!(self.column_width.to_css(dest));
-            try!(write!(dest, " "));
-
-            self.column_count.to_css(dest)
-        }
-    }
 </%helpers:shorthand>
 
 <%helpers:shorthand name="column-rule" products="gecko" extra_prefixes="moz"
     sub_properties="column-rule-width column-rule-style column-rule-color"
+    derive_serialize="True"
     spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
     use properties::longhands::{column_rule_width, column_rule_style};
     use properties::longhands::column_rule_color;
@@ -97,14 +92,4 @@
             Err(StyleParseError::UnspecifiedError.into())
         }
     }
-
-    impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            self.column_rule_width.to_css(dest)?;
-            dest.write_str(" ")?;
-            self.column_rule_style.to_css(dest)?;
-            dest.write_str(" ")?;
-            self.column_rule_color.to_css(dest)
-        }
-    }
 </%helpers:shorthand>
diff --git a/components/style/properties/shorthand/inherited_text.mako.rs b/components/style/properties/shorthand/inherited_text.mako.rs
index ae8a5e21215..784caf43d2f 100644
--- a/components/style/properties/shorthand/inherited_text.mako.rs
+++ b/components/style/properties/shorthand/inherited_text.mako.rs
@@ -4,8 +4,9 @@
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
-<%helpers:shorthand name="text-emphasis" products="gecko" sub_properties="text-emphasis-color
-    text-emphasis-style"
+<%helpers:shorthand name="text-emphasis" products="gecko"
+    sub_properties="text-emphasis-style text-emphasis-color"
+    derive_serialize="True"
     spec="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property">
     use properties::longhands::{text_emphasis_color, text_emphasis_style};
 
@@ -38,22 +39,15 @@
             Err(StyleParseError::UnspecifiedError.into())
         }
     }
-
-    impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            self.text_emphasis_style.to_css(dest)?;
-            dest.write_str(" ")?;
-            self.text_emphasis_color.to_css(dest)
-        }
-    }
 </%helpers:shorthand>
 
 // CSS Compatibility
 // https://compat.spec.whatwg.org/
 <%helpers:shorthand name="-webkit-text-stroke"
-                    sub_properties="-webkit-text-stroke-color
-                                    -webkit-text-stroke-width"
+                    sub_properties="-webkit-text-stroke-width
+                                    -webkit-text-stroke-color"
                     products="gecko"
+                    derive_serialize="True"
                     spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke">
     use properties::longhands::{_webkit_text_stroke_color, _webkit_text_stroke_width};
 
@@ -87,12 +81,4 @@
             Err(StyleParseError::UnspecifiedError.into())
         }
     }
-
-    impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            self._webkit_text_stroke_width.to_css(dest)?;
-            dest.write_str(" ")?;
-            self._webkit_text_stroke_color.to_css(dest)
-        }
-    }
 </%helpers:shorthand>
diff --git a/components/style/properties/shorthand/list.mako.rs b/components/style/properties/shorthand/list.mako.rs
index 8f591760ec7..c92d5c7170e 100644
--- a/components/style/properties/shorthand/list.mako.rs
+++ b/components/style/properties/shorthand/list.mako.rs
@@ -5,7 +5,8 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="list-style"
-                    sub_properties="list-style-image list-style-position list-style-type"
+                    sub_properties="list-style-position list-style-image list-style-type"
+                    derive_serialize="True"
                     spec="https://drafts.csswg.org/css-lists/#propdef-list-style">
     use properties::longhands::{list_style_image, list_style_position, list_style_type};
     use values::{Either, None_};
@@ -108,14 +109,4 @@
             _ => Err(StyleParseError::UnspecifiedError.into()),
         }
     }
-
-    impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            self.list_style_position.to_css(dest)?;
-            dest.write_str(" ")?;
-            self.list_style_image.to_css(dest)?;
-            dest.write_str(" ")?;
-            self.list_style_type.to_css(dest)
-        }
-    }
 </%helpers:shorthand>
diff --git a/components/style/properties/shorthand/outline.mako.rs b/components/style/properties/shorthand/outline.mako.rs
index c81b93ae5a9..b05d4d8b567 100644
--- a/components/style/properties/shorthand/outline.mako.rs
+++ b/components/style/properties/shorthand/outline.mako.rs
@@ -4,7 +4,9 @@
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
-<%helpers:shorthand name="outline" sub_properties="outline-color outline-style outline-width"
+<%helpers:shorthand name="outline"
+                    sub_properties="outline-width outline-style outline-color"
+                    derive_serialize="True"
                     spec="https://drafts.csswg.org/css-ui/#propdef-outline">
     use properties::longhands::{outline_color, outline_width, outline_style};
     use values::specified;
@@ -51,16 +53,6 @@
             Err(StyleParseError::UnspecifiedError.into())
         }
     }
-
-    impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            try!(self.outline_width.to_css(dest));
-            try!(write!(dest, " "));
-            try!(self.outline_style.to_css(dest));
-            try!(write!(dest, " "));
-            self.outline_color.to_css(dest)
-        }
-    }
 </%helpers:shorthand>
 
 // The -moz-outline-radius shorthand is non-standard and not on a standards track.
diff --git a/components/style/properties/shorthand/position.mako.rs b/components/style/properties/shorthand/position.mako.rs
index a66631131d9..3f832e57d5b 100644
--- a/components/style/properties/shorthand/position.mako.rs
+++ b/components/style/properties/shorthand/position.mako.rs
@@ -4,7 +4,10 @@
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
-<%helpers:shorthand name="flex-flow" sub_properties="flex-direction flex-wrap" extra_prefixes="webkit"
+<%helpers:shorthand name="flex-flow"
+                    sub_properties="flex-direction flex-wrap"
+                    extra_prefixes="webkit"
+                    derive_serialize="True"
                     spec="https://drafts.csswg.org/css-flexbox/#flex-flow-property">
     use properties::longhands::{flex_direction, flex_wrap};
 
@@ -36,18 +39,12 @@
             flex_wrap: unwrap_or_initial!(flex_wrap, wrap),
         })
     }
-
-
-    impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            self.flex_direction.to_css(dest)?;
-            dest.write_str(" ")?;
-            self.flex_wrap.to_css(dest)
-        }
-    }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="flex" sub_properties="flex-grow flex-shrink flex-basis" extra_prefixes="webkit"
+<%helpers:shorthand name="flex"
+                    sub_properties="flex-grow flex-shrink flex-basis"
+                    extra_prefixes="webkit"
+                    derive_serialize="True"
                     spec="https://drafts.csswg.org/css-flexbox/#flex-property">
     use values::specified::Number;
 
@@ -101,18 +98,6 @@
             flex_basis: basis.unwrap_or(longhands::flex_basis::SpecifiedValue::zero_percent()),
         })
     }
-
-    impl<'a> ToCss for LonghandsToSerialize<'a>  {
-        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            try!(self.flex_grow.to_css(dest));
-            try!(dest.write_str(" "));
-
-            try!(self.flex_shrink.to_css(dest));
-            try!(dest.write_str(" "));
-
-            self.flex_basis.to_css(dest)
-        }
-    }
 </%helpers:shorthand>
 
 <%helpers:shorthand name="grid-gap" sub_properties="grid-row-gap grid-column-gap"
diff --git a/components/style/servo/url.rs b/components/style/servo/url.rs
index fa019d581e6..972eced90e7 100644
--- a/components/style/servo/url.rs
+++ b/components/style/servo/url.rs
@@ -4,10 +4,9 @@
 
 //! Common handling for the specified value CSS url() values.
 
-use cssparser::CssStringWriter;
 use parser::ParserContext;
 use servo_url::ServoUrl;
-use std::fmt::{self, Write};
+use std::fmt;
 // Note: We use std::sync::Arc rather than stylearc::Arc here because the
 // nonzero optimization is important in keeping the size of SpecifiedUrl below
 // the threshold.
@@ -111,7 +110,6 @@ impl PartialEq for SpecifiedUrl {
 
 impl ToCss for SpecifiedUrl {
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        try!(dest.write_str("url(\""));
         let string = match self.original {
             Some(ref original) => &**original,
             None => match self.resolved {
@@ -123,7 +121,8 @@ impl ToCss for SpecifiedUrl {
             }
         };
 
-        try!(CssStringWriter::new(dest).write_str(string));
-        dest.write_str("\")")
+        dest.write_str("url(")?;
+        string.to_css(dest)?;
+        dest.write_str(")")
     }
 }
diff --git a/components/style/values/computed/flex.rs b/components/style/values/computed/flex.rs
new file mode 100644
index 00000000000..231243c7575
--- /dev/null
+++ b/components/style/values/computed/flex.rs
@@ -0,0 +1,11 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+//! Computed types for CSS values related to flexbox.
+
+use values::computed::length::LengthOrPercentage;
+use values::generics::flex::FlexBasis as GenericFlexBasis;
+
+/// A computed value for the `flex-basis` property.
+pub type FlexBasis = GenericFlexBasis<LengthOrPercentage>;
diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs
index be803379c65..731c51a5c70 100644
--- a/components/style/values/computed/length.rs
+++ b/components/style/values/computed/length.rs
@@ -424,80 +424,6 @@ impl ToComputedValue for specified::LengthOrPercentageOrAuto {
 #[allow(missing_docs)]
 #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
 #[derive(Clone, Copy, PartialEq, ToCss)]
-pub enum LengthOrPercentageOrAutoOrContent {
-    Length(Au),
-    Percentage(Percentage),
-    Calc(CalcLengthOrPercentage),
-    Auto,
-    Content
-}
-
-impl fmt::Debug for LengthOrPercentageOrAutoOrContent {
-    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
-        match *self {
-            LengthOrPercentageOrAutoOrContent::Length(length) => write!(f, "{:?}", length),
-            LengthOrPercentageOrAutoOrContent::Percentage(percentage) => write!(f, "{}%", percentage.0 * 100.),
-            LengthOrPercentageOrAutoOrContent::Calc(calc) => write!(f, "{:?}", calc),
-            LengthOrPercentageOrAutoOrContent::Auto => write!(f, "auto"),
-            LengthOrPercentageOrAutoOrContent::Content => write!(f, "content")
-        }
-    }
-}
-
-impl ToComputedValue for specified::LengthOrPercentageOrAutoOrContent {
-    type ComputedValue = LengthOrPercentageOrAutoOrContent;
-
-    #[inline]
-    fn to_computed_value(&self, context: &Context) -> LengthOrPercentageOrAutoOrContent {
-        match *self {
-            specified::LengthOrPercentageOrAutoOrContent::Length(ref value) => {
-                LengthOrPercentageOrAutoOrContent::Length(value.to_computed_value(context))
-            },
-            specified::LengthOrPercentageOrAutoOrContent::Percentage(value) => {
-                LengthOrPercentageOrAutoOrContent::Percentage(value)
-            },
-            specified::LengthOrPercentageOrAutoOrContent::Calc(ref calc) => {
-                LengthOrPercentageOrAutoOrContent::Calc(calc.to_computed_value(context))
-            },
-            specified::LengthOrPercentageOrAutoOrContent::Auto => {
-                LengthOrPercentageOrAutoOrContent::Auto
-            },
-            specified::LengthOrPercentageOrAutoOrContent::Content => {
-                LengthOrPercentageOrAutoOrContent::Content
-            }
-        }
-    }
-
-
-    #[inline]
-    fn from_computed_value(computed: &LengthOrPercentageOrAutoOrContent) -> Self {
-        match *computed {
-            LengthOrPercentageOrAutoOrContent::Auto => {
-                specified::LengthOrPercentageOrAutoOrContent::Auto
-            }
-            LengthOrPercentageOrAutoOrContent::Content => {
-                specified::LengthOrPercentageOrAutoOrContent::Content
-            }
-            LengthOrPercentageOrAutoOrContent::Length(value) => {
-                specified::LengthOrPercentageOrAutoOrContent::Length(
-                    ToComputedValue::from_computed_value(&value)
-                )
-            }
-            LengthOrPercentageOrAutoOrContent::Percentage(value) => {
-                specified::LengthOrPercentageOrAutoOrContent::Percentage(value)
-            }
-            LengthOrPercentageOrAutoOrContent::Calc(calc) => {
-                specified::LengthOrPercentageOrAutoOrContent::Calc(
-                    Box::new(ToComputedValue::from_computed_value(&calc))
-                )
-            }
-        }
-    }
-}
-
-#[allow(missing_docs)]
-#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
-#[derive(Clone, Copy, PartialEq, ToCss)]
 pub enum LengthOrPercentageOrNone {
     Length(Au),
     Percentage(Percentage),
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index 7b95372d8a7..53aef111bd7 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -28,6 +28,7 @@ pub use self::background::BackgroundSize;
 pub use self::border::{BorderImageSlice, BorderImageWidth, BorderImageSideWidth};
 pub use self::border::{BorderRadius, BorderCornerRadius};
 pub use self::color::{Color, RGBAColor};
+pub use self::flex::FlexBasis;
 pub use self::image::{Gradient, GradientItem, ImageLayer, LineDirection, Image, ImageRect};
 #[cfg(feature = "gecko")]
 pub use self::gecko::ScrollSnapPoint;
@@ -38,9 +39,8 @@ pub use super::specified::{AlignItems, AlignJustifyContent, AlignJustifySelf, Ju
 pub use super::specified::{BorderStyle, Percentage, UrlOrNone};
 pub use super::generics::grid::GridLine;
 pub use super::specified::url::SpecifiedUrl;
-pub use self::length::{CalcLengthOrPercentage, Length, LengthOrNumber, LengthOrPercentage, LengthOrPercentageOrAuto};
-pub use self::length::{LengthOrPercentageOrAutoOrContent, LengthOrPercentageOrNone, LengthOrNone};
-pub use self::length::{MaxLength, MozLength};
+pub use self::length::{CalcLengthOrPercentage, Length, LengthOrNone, LengthOrNumber, LengthOrPercentage};
+pub use self::length::{LengthOrPercentageOrAuto, LengthOrPercentageOrNone, MaxLength, MozLength};
 pub use self::position::Position;
 pub use self::text::{InitialLetter, LetterSpacing, LineHeight, WordSpacing};
 pub use self::transform::{TimingFunction, TransformOrigin};
@@ -49,6 +49,7 @@ pub mod background;
 pub mod basic_shape;
 pub mod border;
 pub mod color;
+pub mod flex;
 pub mod image;
 #[cfg(feature = "gecko")]
 pub mod gecko;
diff --git a/components/style/values/generics/flex.rs b/components/style/values/generics/flex.rs
new file mode 100644
index 00000000000..3d77b8e8e75
--- /dev/null
+++ b/components/style/values/generics/flex.rs
@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+//! Generic types for CSS values related to flexbox.
+
+use values::specified::Percentage;
+
+/// A generic value for the `flex-basis` property.
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+#[derive(Clone, Copy, Debug, HasViewportPercentage, PartialEq, ToComputedValue, ToCss)]
+pub enum FlexBasis<LengthOrPercentage> {
+    /// `auto`
+    Auto,
+    /// `content`
+    Content,
+    /// `<length-percentage>`
+    Length(LengthOrPercentage),
+}
+
+impl<L> FlexBasis<L> {
+    /// Returns `auto`.
+    #[inline]
+    pub fn auto() -> Self {
+        FlexBasis::Auto
+    }
+}
+
+impl<L> FlexBasis<L>
+where Percentage: Into<L>,
+{
+    /// Returns `0%`.
+    #[inline]
+    pub fn zero_percent() -> Self {
+        FlexBasis::Length(Percentage(0.).into())
+    }
+}
diff --git a/components/style/values/generics/mod.rs b/components/style/values/generics/mod.rs
index 3d218b0bdf5..9716d8ec0cd 100644
--- a/components/style/values/generics/mod.rs
+++ b/components/style/values/generics/mod.rs
@@ -16,6 +16,7 @@ use values::specified::url::SpecifiedUrl;
 pub mod background;
 pub mod basic_shape;
 pub mod border;
+pub mod flex;
 #[cfg(feature = "gecko")]
 pub mod gecko;
 pub mod grid;
diff --git a/components/style/values/specified/flex.rs b/components/style/values/specified/flex.rs
new file mode 100644
index 00000000000..82768b20a51
--- /dev/null
+++ b/components/style/values/specified/flex.rs
@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+//! Specified types for CSS values related to flexbox.
+
+use cssparser::Parser;
+use parser::{Parse, ParserContext};
+use style_traits::ParseError;
+use values::generics::flex::FlexBasis as GenericFlexBasis;
+use values::specified::length::LengthOrPercentage;
+
+/// A specified value for the `flex-basis` property.
+pub type FlexBasis = GenericFlexBasis<LengthOrPercentage>;
+
+impl Parse for FlexBasis {
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>)
+    -> Result<Self, ParseError<'i>> {
+        if let Ok(length) = input.try(|i| LengthOrPercentage::parse_non_negative(context, i)) {
+            return Ok(GenericFlexBasis::Length(length));
+        }
+        try_match_ident_ignore_ascii_case! { input.expect_ident()?,
+            "auto" => Ok(GenericFlexBasis::Auto),
+            "content" => Ok(GenericFlexBasis::Content),
+        }
+    }
+}
diff --git a/components/style/values/specified/length.rs b/components/style/values/specified/length.rs
index 04543f7723d..17c846d2da0 100644
--- a/components/style/values/specified/length.rs
+++ b/components/style/values/specified/length.rs
@@ -1101,72 +1101,6 @@ pub type LengthOrNormal = Either<Length, Normal>;
 /// Either a `<length>` or the `auto` keyword.
 pub type LengthOrAuto = Either<Length, Auto>;
 
-/// Either a `<length>` or a `<percentage>` or the `auto` keyword or the
-/// `content` keyword.
-#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
-#[derive(Clone, Debug, HasViewportPercentage, PartialEq, ToCss)]
-pub enum LengthOrPercentageOrAutoOrContent {
-    /// A `<length>`.
-    Length(NoCalcLength),
-    /// A percentage.
-    Percentage(Percentage),
-    /// A `calc` node.
-    Calc(Box<CalcLengthOrPercentage>),
-    /// The `auto` keyword.
-    Auto,
-    /// The `content` keyword.
-    Content
-}
-
-impl LengthOrPercentageOrAutoOrContent {
-    /// Parse a non-negative LengthOrPercentageOrAutoOrContent.
-    pub fn parse_non_negative<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
-                                      -> Result<Self, ParseError<'i>> {
-        let num_context = AllowedLengthType::NonNegative;
-        let token = try!(input.next());
-        match token {
-            Token::Dimension { value, ref unit, .. } if num_context.is_ok(context.parsing_mode, value) => {
-                NoCalcLength::parse_dimension(context, value, unit)
-                             .map(LengthOrPercentageOrAutoOrContent::Length)
-            }
-            Token::Percentage { unit_value, .. } if num_context.is_ok(context.parsing_mode, unit_value) => {
-                Ok(LengthOrPercentageOrAutoOrContent::Percentage(Percentage(unit_value)))
-            }
-            Token::Number { value, .. } if value == 0. => {
-                Ok(Self::zero())
-            }
-            Token::Ident(ref value) if value.eq_ignore_ascii_case("auto") => {
-                Ok(LengthOrPercentageOrAutoOrContent::Auto)
-            }
-            Token::Ident(ref value) if value.eq_ignore_ascii_case("content") => {
-                Ok(LengthOrPercentageOrAutoOrContent::Content)
-            }
-            Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {
-                let calc = try!(input.parse_nested_block(|i| {
-                    CalcNode::parse_length_or_percentage(context, i, num_context)
-                }));
-                Ok(LengthOrPercentageOrAutoOrContent::Calc(Box::new(calc)))
-            }
-            _ => Err(())
-        }.map_err(|()| BasicParseError::UnexpectedToken(token).into())
-    }
-
-    /// Returns the `auto` value.
-    pub fn auto() -> Self {
-        LengthOrPercentageOrAutoOrContent::Auto
-    }
-
-    /// Returns a value representing a `0` length.
-    pub fn zero() -> Self {
-        LengthOrPercentageOrAutoOrContent::Length(NoCalcLength::zero())
-    }
-
-    /// Returns a value representing `0%`.
-    pub fn zero_percent() -> Self {
-        LengthOrPercentageOrAutoOrContent::Percentage(Percentage::zero())
-    }
-}
-
 /// Either a `<length>` or a `<number>`.
 pub type LengthOrNumber = Either<Length, Number>;
 
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index a1f3692d4f5..44ef054ecb8 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -33,16 +33,17 @@ pub use self::background::BackgroundSize;
 pub use self::border::{BorderCornerRadius, BorderImageSlice, BorderImageWidth};
 pub use self::border::{BorderImageSideWidth, BorderRadius, BorderSideWidth};
 pub use self::color::{Color, RGBAColor};
-pub use self::rect::LengthOrNumberRect;
+pub use self::flex::FlexBasis;
 #[cfg(feature = "gecko")]
 pub use self::gecko::ScrollSnapPoint;
 pub use self::image::{ColorStop, EndingShape as GradientEndingShape, Gradient};
 pub use self::image::{GradientItem, GradientKind, Image, ImageRect, ImageLayer};
-pub use self::length::AbsoluteLength;
-pub use self::length::{FontRelativeLength, ViewportPercentageLength, CharacterWidth, Length, CalcLengthOrPercentage};
-pub use self::length::{Percentage, LengthOrNone, LengthOrNumber, LengthOrPercentage, LengthOrPercentageOrAuto};
-pub use self::length::{LengthOrPercentageOrNone, LengthOrPercentageOrAutoOrContent, NoCalcLength};
-pub use self::length::{MaxLength, MozLength};
+pub use self::length::{AbsoluteLength, CalcLengthOrPercentage, CharacterWidth};
+pub use self::length::{FontRelativeLength, Length, LengthOrNone, LengthOrNumber};
+pub use self::length::{LengthOrPercentage, LengthOrPercentageOrAuto};
+pub use self::length::{LengthOrPercentageOrNone, MaxLength, MozLength};
+pub use self::length::{NoCalcLength, Percentage, ViewportPercentageLength};
+pub use self::rect::LengthOrNumberRect;
 pub use self::position::{Position, PositionComponent};
 pub use self::text::{InitialLetter, LetterSpacing, LineHeight, WordSpacing};
 pub use self::transform::{TimingFunction, TransformOrigin};
@@ -55,6 +56,7 @@ pub mod basic_shape;
 pub mod border;
 pub mod calc;
 pub mod color;
+pub mod flex;
 #[cfg(feature = "gecko")]
 pub mod gecko;
 pub mod grid;
diff --git a/components/style_derive/to_css.rs b/components/style_derive/to_css.rs
index 5f2fa3aa8d1..6f705ddd91b 100644
--- a/components/style_derive/to_css.rs
+++ b/components/style_derive/to_css.rs
@@ -142,6 +142,7 @@ fn where_predicate(ty: syn::Ty) -> syn::WherePredicate {
 /// If the first Camel segment is "Moz"" or "Webkit", the result string
 /// is prepended with "-".
 fn to_css_identifier(mut camel_case: &str) -> String {
+    camel_case = camel_case.trim_right_matches('_');
     let mut first = true;
     let mut result = String::with_capacity(camel_case.len());
     while let Some(segment) = split_camel_segment(&mut camel_case) {
diff --git a/tests/unit/style/properties/serialization.rs b/tests/unit/style/properties/serialization.rs
index 882bd436a47..b5914c02749 100644
--- a/tests/unit/style/properties/serialization.rs
+++ b/tests/unit/style/properties/serialization.rs
@@ -6,11 +6,10 @@ use properties::{parse, parse_input};
 use style::computed_values::display::T::inline_block;
 use style::properties::{PropertyDeclaration, Importance, PropertyId};
 use style::properties::parse_property_declaration_list;
-use style::values::{RGBA, Auto};
-use style::values::CustomIdent;
+use style::values::{CustomIdent, RGBA, Auto};
+use style::values::generics::flex::FlexBasis;
 use style::values::specified::{BorderStyle, BorderSideWidth, Color};
-use style::values::specified::{Length, LengthOrPercentage};
-use style::values::specified::{LengthOrPercentageOrAuto, LengthOrPercentageOrAutoOrContent};
+use style::values::specified::{Length, LengthOrPercentage, LengthOrPercentageOrAuto};
 use style::values::specified::{NoCalcLength, PositionComponent};
 use style::values::specified::position::Y;
 use style::values::specified::url::SpecifiedUrl;
@@ -564,7 +563,7 @@ mod shorthand_serialization {
         let grow = Number::new(2f32);
         let shrink = Number::new(3f32);
         let basis =
-            LengthOrPercentageOrAutoOrContent::Percentage(Percentage(0.5f32));
+            FlexBasis::Length(Percentage(0.5f32).into());
 
         properties.push(PropertyDeclaration::FlexGrow(grow));
         properties.push(PropertyDeclaration::FlexShrink(shrink));