Adding support for correct shorthand serialization

components/style/properties/helpers.mako.rs

@@ -403,9 +403,11 @@
 %>
     % if shorthand:
     pub mod ${shorthand.ident} {
-        use cssparser::Parser;
+        #[allow(unused_imports)]
+        use cssparser::{Parser, ToCss};
         use parser::ParserContext;
         use properties::{longhands, PropertyDeclaration, DeclaredValue, Shorthand};
+        use std::fmt;
 
         pub struct Longhands {
             % for sub_property in shorthand.sub_properties:
@@ -414,6 +416,55 @@
             % endfor
         }
 
+        /// Represents a serializable set of all of the longhand properties that correspond to a shorthand
+        pub struct LonghandsToSerialize<'a> {
+            % for sub_property in shorthand.sub_properties:
+                pub ${sub_property.ident}: &'a DeclaredValue<longhands::${sub_property.ident}::SpecifiedValue>,
+            % endfor
+        }
+
+        impl<'a> LonghandsToSerialize<'a> {
+            pub fn from_iter<I: Iterator<Item=&'a PropertyDeclaration>>(iter: I) -> Result<Self, ()> {
+                // Define all of the expected variables that correspond to the shorthand
+                % for sub_property in shorthand.sub_properties:
+                    let mut ${sub_property.ident} = None;
+                % endfor
+
+                // Attempt to assign the incoming declarations to the expected variables
+                for longhand in iter {
+                    match *longhand {
+                        % for sub_property in shorthand.sub_properties:
+                            PropertyDeclaration::${sub_property.camel_case}(ref value) => {
+                                ${sub_property.ident} = Some(value)
+                            },
+                        % endfor
+                        _ => {}
+                    };
+                }
+
+                // If any of the expected variables are missing, return an error
+                match (
+                    % for sub_property in shorthand.sub_properties:
+                        ${sub_property.ident},
+                    % endfor
+                ) {
+
+                    (
+                    % for sub_property in shorthand.sub_properties:
+                        Some(${sub_property.ident}),
+                    % endfor
+                    ) =>
+                    Ok(LonghandsToSerialize {
+                        % for sub_property in shorthand.sub_properties:
+                            ${sub_property.ident}: ${sub_property.ident},
+                        % endfor
+                    }),
+                    _ => Err(())
+                }
+            }
+        }
+
+
         pub fn parse(context: &ParserContext, input: &mut Parser,
                      declarations: &mut Vec<PropertyDeclaration>)
                      -> Result<(), ()> {
@@ -454,11 +505,8 @@
             }
         }
 
-        #[allow(unused_variables)]
-        pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         ${caller.body()}
     }
-    }
     % endif
 </%def>
 
@@ -468,12 +516,26 @@
                      for side in ['top', 'right', 'bottom', 'left'])}">
         use super::parse_four_sides;
         use values::specified;
-        let _unused = context;
+
+        pub fn parse_value(_: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
             let (top, right, bottom, left) = try!(parse_four_sides(input, ${parser_function}));
             Ok(Longhands {
                 % for side in ["top", "right", "bottom", "left"]:
                     ${to_rust_ident(sub_property_pattern % side)}: Some(${side}),
                 % endfor
             })
+        }
+
+        impl<'a> ToCss for LonghandsToSerialize<'a>  {
+            fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+                super::serialize_four_sides(
+                    dest,
+                    self.${to_rust_ident(sub_property_pattern % 'top')},
+                    self.${to_rust_ident(sub_property_pattern % 'right')},
+                    self.${to_rust_ident(sub_property_pattern % 'bottom')},
+                    self.${to_rust_ident(sub_property_pattern % 'left')}
+                )
+            }
+        }
     </%self:shorthand>
 </%def>

components/style/properties/properties.mako.rs

@@ -6,7 +6,7 @@
 
 // Please note that valid Rust syntax may be mangled by the Mako parser.
 // For example, Vec<&Foo> will be mangled as Vec&Foo>. To work around these issues, the code
-// can be escaped. In the above example, Vec<<&Foo> achieves the desired result of Vec<&Foo>.
+// can be escaped. In the above example, Vec<<&Foo> or Vec< &Foo> achieves the desired result of Vec<&Foo>.
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
@@ -74,8 +74,7 @@ pub mod longhands {
 }
 
 pub mod shorthands {
-    use cssparser::{Parser, ToCss};
+    use cssparser::Parser;
-    use std::fmt;
     use parser::ParserContext;
     use values::specified;
 
@@ -122,33 +121,7 @@ pub mod shorthands {
         Ok((top, right, bottom, left))
     }
 
-    /// Serialize a set of top,left,bottom,right values, in <margin>-shorthand style,
+    <%include file="/shorthand/serialize.mako.rs" />
-    /// attempting to minimize the output
-    pub fn serialize_four_sides<T, W>(sides: (&T, &T, &T, &T), dest: &mut W) -> fmt::Result
-        where W: fmt::Write, T: ToCss+PartialEq {
-        if sides.0 == sides.1 && sides.0 == sides.2 && sides.0 == sides.3 {
-            sides.0.to_css(dest)
-        } else if sides.0 == sides.2 && sides.1 == sides.3 {
-            try!(sides.0.to_css(dest));
-            try!(dest.write_str(" "));
-            sides.1.to_css(dest)
-        } else if sides.1 == sides.3 {
-            try!(sides.0.to_css(dest));
-            try!(dest.write_str(" "));
-            try!(sides.1.to_css(dest));
-            try!(dest.write_str(" "));
-            sides.2.to_css(dest)
-        } else {
-            try!(sides.0.to_css(dest));
-            try!(dest.write_str(" "));
-            try!(sides.1.to_css(dest));
-            try!(dest.write_str(" "));
-            try!(sides.2.to_css(dest));
-            try!(dest.write_str(" "));
-            sides.3.to_css(dest)
-        }
-    }
-
     <%include file="/shorthand/background.mako.rs" />
     <%include file="/shorthand/border.mako.rs" />
     <%include file="/shorthand/box.mako.rs" />
@@ -435,18 +408,14 @@ impl ToCss for PropertyDeclarationBlock {
     }
 }
 
-enum AppendableValue<'a, I>
+pub enum AppendableValue<'a, I>
 where I: Iterator<Item=&'a PropertyDeclaration> {
     Declaration(&'a PropertyDeclaration),
-    DeclarationsForShorthand(I),
+    DeclarationsForShorthand(Shorthand, I),
     Css(&'a str)
 }
 
-fn append_property_name<W>(dest: &mut W,
+fn handle_first_serialization<W>(dest: &mut W, is_first_serialization: &mut bool) -> fmt::Result where W: fmt::Write {
-                           property_name: &str,
-                           is_first_serialization: &mut bool)
-                           -> fmt::Result where W: fmt::Write {
-
     // after first serialization(key: value;) add whitespace between the pairs
     if !*is_first_serialization {
         try!(write!(dest, " "));
@@ -455,7 +424,7 @@ fn append_property_name<W>(dest: &mut W,
         *is_first_serialization = false;
     }
 
-    write!(dest, "{}", property_name)
+    Ok(())
 }
 
 fn append_declaration_value<'a, W, I>
@@ -471,15 +440,8 @@ fn append_declaration_value<'a, W, I>
       AppendableValue::Declaration(decl) => {
           try!(decl.to_css(dest));
        },
-       AppendableValue::DeclarationsForShorthand(decls) => {
+       AppendableValue::DeclarationsForShorthand(shorthand, decls) => {
-           let mut decls = decls.peekable();
+          try!(shorthand.longhands_to_css(decls, dest));
-           while let Some(decl) = decls.next() {
-               try!(decl.to_css(dest));
-
-               if decls.peek().is_some() {
-                   try!(write!(dest, " "));
-               }
-           }
        }
   }
 
@@ -498,8 +460,15 @@ fn append_serialization<'a, W, I>(dest: &mut W,
                                   -> fmt::Result
                                   where W: fmt::Write, I: Iterator<Item=&'a PropertyDeclaration> {
 
-    try!(append_property_name(dest, property_name, is_first_serialization));
+    try!(handle_first_serialization(dest, is_first_serialization));
-    try!(write!(dest, ":"));
+
+    // Overflow does not behave like a normal shorthand. When overflow-x and overflow-y are not of equal
+    // values, they no longer use the shared property name "overflow" and must be handled differently
+    if shorthands::is_overflow_shorthand(&appendable_value) {
+        return append_declaration_value(dest, appendable_value, is_important);
+    }
+
+    write!(dest, "{}:", property_name);
 
     // for normal parsed values, add a space between key: and value
     match &appendable_value {
@@ -512,7 +481,7 @@ fn append_serialization<'a, W, I>(dest: &mut W,
                 try!(write!(dest, " "));
             }
          },
-         &AppendableValue::DeclarationsForShorthand(_) => try!(write!(dest, " "))
+         &AppendableValue::DeclarationsForShorthand(..) => try!(write!(dest, " "))
     }
 
     try!(append_declaration_value(dest, appendable_value, is_important));
@@ -691,6 +660,20 @@ impl Shorthand {
         }
     }
 
+    pub fn longhands_to_css<'a, W, I>(&self, declarations: I, dest: &mut W) -> fmt::Result
+        where W: fmt::Write, I: Iterator<Item=&'a PropertyDeclaration> {
+        match *self {
+            % for property in data.shorthands:
+                Shorthand::${property.camel_case} => {
+                    match shorthands::${property.ident}::LonghandsToSerialize::from_iter(declarations) {
+                        Ok(longhands) => longhands.to_css(dest),
+                        Err(_) => Err(fmt::Error)
+                    }
+                },
+            % endfor
+        }
+    }
+
     /// Serializes possible shorthand value to String.
     pub fn serialize_shorthand_value_to_string<'a, I>(self, declarations: I, is_important: bool) -> String
     where I: Iterator<Item=&'a PropertyDeclaration> + Clone {
@@ -747,10 +730,7 @@ impl Shorthand {
             }
 
             if !declarations3.any(|d| d.with_variables()) {
-                return Some(AppendableValue::DeclarationsForShorthand(declarations));
+                return Some(AppendableValue::DeclarationsForShorthand(self, declarations));
-                // FIXME: this needs property-specific code, which probably should be in style/
-                // "as appropriate according to the grammar of shorthand "
-                // https://drafts.csswg.org/cssom/#serialize-a-css-value
             }
 
             None

components/style/properties/shorthand/background.mako.rs

@@ -11,6 +11,7 @@
     use properties::longhands::{background_color, background_position, background_repeat, background_attachment};
     use properties::longhands::{background_image, background_size, background_origin, background_clip};
 
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let mut color = None;
         let mut image = None;
         let mut position = None;
@@ -95,5 +96,91 @@
         } else {
             Err(())
         }
-</%helpers:shorthand>
+    }
 
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match *self.background_color {
+                DeclaredValue::Value(ref color) => {
+                    try!(color.to_css(dest));
+                },
+                _ => {
+                    try!(write!(dest, "transparent"));
+                }
+            };
+
+            try!(write!(dest, " "));
+
+            match *self.background_image {
+                DeclaredValue::Value(ref image) => {
+                    try!(image.to_css(dest));
+                },
+                _ => {
+                    try!(write!(dest, "none"));
+                }
+            };
+
+            try!(write!(dest, " "));
+
+            try!(self.background_repeat.to_css(dest));
+
+            try!(write!(dest, " "));
+
+            match *self.background_attachment {
+                DeclaredValue::Value(ref attachment) => {
+                    try!(attachment.to_css(dest));
+                },
+                _ => {
+                    try!(write!(dest, "scroll"));
+                }
+            };
+
+            try!(write!(dest, " "));
+
+            try!(self.background_position.to_css(dest));
+
+            if let DeclaredValue::Value(ref size) = *self.background_size {
+                try!(write!(dest, " / "));
+                try!(size.to_css(dest));
+            }
+
+            match (self.background_origin, self.background_clip) {
+                (&DeclaredValue::Value(ref origin), &DeclaredValue::Value(ref clip)) => {
+                    use properties::longhands::background_origin::computed_value::T as Origin;
+                    use properties::longhands::background_clip::computed_value::T as Clip;
+
+                    try!(write!(dest, " "));
+
+                    match (origin, clip) {
+                        (&Origin::padding_box, &Clip::padding_box) => {
+                            try!(origin.to_css(dest));
+                        },
+                        (&Origin::border_box, &Clip::border_box) => {
+                            try!(origin.to_css(dest));
+                        },
+                        (&Origin::content_box, &Clip::content_box) => {
+                            try!(origin.to_css(dest));
+                        },
+                        _ => {
+                            try!(origin.to_css(dest));
+                            try!(write!(dest, " "));
+                            try!(clip.to_css(dest));
+                        }
+                    }
+                },
+                (&DeclaredValue::Value(ref origin), _) => {
+                    try!(write!(dest, " "));
+                    try!(origin.to_css(dest));
+                },
+                (_, &DeclaredValue::Value(ref clip)) => {
+                    try!(write!(dest, " "));
+                    try!(clip.to_css(dest));
+                },
+                _ => {}
+            };
+
+
+            Ok(())
+        }
+    }
+</%helpers:shorthand>

components/style/properties/shorthand/border.mako.rs

@@ -13,6 +13,8 @@ ${helpers.four_sides_shorthand("border-style", "border-%s-style",
                  for side in ['top', 'right', 'bottom', 'left'])}">
     use super::parse_four_sides;
     use values::specified;
+
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let _unused = context;
         let (top, right, bottom, left) = try!(parse_four_sides(input, specified::parse_border_width));
         Ok(Longhands {
@@ -21,6 +23,29 @@ ${helpers.four_sides_shorthand("border-style", "border-%s-style",
                     Some(longhands::${to_rust_ident('border-%s-width' % side)}::SpecifiedValue(${side})),
             % endfor
         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            // extract tuple container values so that the different border widths
+            // can be compared via partial eq
+            % for side in ["top", "right", "bottom", "left"]:
+                let ${side} = match self.border_${side}_width {
+                    &DeclaredValue::Value(ref value) => DeclaredValue::Value(value.0),
+                    &DeclaredValue::WithVariables {
+                        css: ref a, first_token_type: ref b, base_url: ref c, from_shorthand: ref d
+                    } => DeclaredValue::WithVariables {
+                        // WithVariables should not be reachable during serialization
+                        css: a.clone(), first_token_type: b.clone(), base_url: c.clone(), from_shorthand: d.clone()
+                    },
+                    &DeclaredValue::Initial => DeclaredValue::Initial,
+                    &DeclaredValue::Inherit => DeclaredValue::Inherit,
+                };
+            % endfor
+
+            super::serialize_four_sides(dest, &top, &right, &bottom, &left)
+        }
+    }
 </%helpers:shorthand>
 
 
@@ -61,12 +86,13 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
     if any { Ok((color, style, width)) } else { Err(()) }
 }
 
-
 % for side in ["top", "right", "bottom", "left"]:
     <%helpers:shorthand name="border-${side}" sub_properties="${' '.join(
         'border-%s-%s' % (side, prop)
         for prop in ['color', 'style', 'width']
     )}">
+
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let (color, style, width) = try!(super::parse_border(context, input));
         Ok(Longhands {
             border_${side}_color: color,
@@ -74,6 +100,19 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
             border_${side}_width:
                 width.map(longhands::${to_rust_ident('border-%s-width' % side)}::SpecifiedValue),
         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            super::serialize_directional_border(
+                dest,
+                self.border_${side}_width,
+                self.border_${side}_style,
+                self.border_${side}_color
+            )
+        }
+    }
+
     </%helpers:shorthand>
 % endfor
 
@@ -82,6 +121,8 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
     for side in ['top', 'right', 'bottom', 'left']
     for prop in ['color', 'style', 'width']
 )}">
+
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let (color, style, width) = try!(super::parse_border(context, input));
         Ok(Longhands {
             % for side in ["top", "right", "bottom", "left"]:
@@ -91,6 +132,21 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
                     width.map(longhands::${to_rust_ident('border-%s-width' % side)}::SpecifiedValue),
             % endfor
         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            // If all longhands are all present, then all sides should be the same,
+            // so we can just one set of color/style/width
+            super::serialize_directional_border(
+                dest,
+                self.border_${side}_width,
+                self.border_${side}_style,
+                self.border_${side}_color
+            )
+        }
+    }
+
 </%helpers:shorthand>
 
 <%helpers:shorthand name="border-radius" sub_properties="${' '.join(
@@ -99,6 +155,7 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
 )}">
     use values::specified::basic_shape::BorderRadius;
 
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let _ignored = context;
 
         let radii = try!(BorderRadius::parse(input));
@@ -108,4 +165,23 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
             border_bottom_right_radius: Some(radii.bottom_right),
             border_bottom_left_radius: Some(radii.bottom_left),
         })
+    }
+
+    // TODO: I do not understand how border radius works with respect to the slashes /,
+    // so putting a default generic impl for now
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.border_top_left_radius.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self.border_top_right_radius.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self.border_bottom_right_radius.to_css(dest));
+            try!(write!(dest, " "));
+
+            self.border_bottom_left_radius.to_css(dest)
+        }
+    }
 </%helpers:shorthand>

components/style/properties/shorthand/box.mako.rs

@@ -7,11 +7,47 @@
 <%helpers:shorthand name="overflow" sub_properties="overflow-x overflow-y">
     use properties::longhands::{overflow_x, overflow_y};
 
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let overflow = try!(overflow_x::parse(context, input));
         Ok(Longhands {
             overflow_x: Some(overflow),
             overflow_y: Some(overflow_y::SpecifiedValue(overflow)),
         })
+    }
+
+
+    // Overflow does not behave like a normal shorthand. When overflow-x and overflow-y are not of equal
+    // values, they no longer use the shared property name "overflow".
+    // Other shorthands do not include their name in the to_css method
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            let x_and_y_equal = match (self.overflow_x, self.overflow_y) {
+                (&DeclaredValue::Value(ref x_value), &DeclaredValue::Value(ref y_container)) => {
+                    *x_value == y_container.0
+                },
+                (&DeclaredValue::WithVariables { .. }, &DeclaredValue::WithVariables { .. }) => true,
+                (&DeclaredValue::Initial, &DeclaredValue::Initial) => true,
+                (&DeclaredValue::Inherit, &DeclaredValue::Inherit) => true,
+                _ => false
+            };
+
+            if x_and_y_equal {
+                try!(write!(dest, "overflow"));
+                try!(write!(dest, ": "));
+                try!(self.overflow_x.to_css(dest));
+            } else {
+                try!(write!(dest, "overflow-x"));
+                try!(write!(dest, ": "));
+                try!(self.overflow_x.to_css(dest));
+                try!(write!(dest, "; "));
+
+                try!(write!(dest, "overflow-y: "));
+                try!(self.overflow_y.to_css(dest));
+            }
+
+            write!(dest, ";")
+        }
+    }
 </%helpers:shorthand>
 
 macro_rules! try_parse_one {
@@ -32,6 +68,7 @@ macro_rules! try_parse_one {
     use properties::longhands::{transition_delay, transition_duration, transition_property};
     use properties::longhands::{transition_timing_function};
 
+    pub fn parse_value(_: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         struct SingleTransition {
             transition_property: transition_property::SingleSpecifiedValue,
             transition_duration: transition_duration::SingleSpecifiedValue,
@@ -93,6 +130,22 @@ macro_rules! try_parse_one {
                 Some(transition_timing_function::SpecifiedValue(timing_functions)),
             transition_delay: Some(transition_delay::SpecifiedValue(delays)),
         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.transition_property.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self.transition_duration.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self.transition_timing_function.to_css(dest));
+            try!(write!(dest, " "));
+
+            self.transition_delay.to_css(dest)
+        }
+    }
 </%helpers:shorthand>
 
 <%helpers:shorthand name="animation"
@@ -104,6 +157,7 @@ macro_rules! try_parse_one {
     use properties::longhands::{animation_delay, animation_iteration_count, animation_direction};
     use properties::longhands::{animation_fill_mode, animation_play_state};
 
+    pub fn parse_value(_: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         struct SingleAnimation {
             animation_name: animation_name::SingleSpecifiedValue,
             animation_duration: animation_duration::SingleSpecifiedValue,
@@ -211,4 +265,34 @@ macro_rules! try_parse_one {
             animation_fill_mode: Some(animation_fill_mode::SpecifiedValue(fill_modes)),
             animation_play_state: Some(animation_play_state::SpecifiedValue(play_states)),
         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.animation_duration.to_css(dest));
+            try!(write!(dest, " "));
+
+            // FIXME: timing function is displaying the actual mathematical name "cubic-bezier(0.25, 0.1, 0.25, 1)"
+            // instead of the common name "ease"
+            try!(self.animation_timing_function.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self.animation_delay.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self.animation_direction.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self.animation_fill_mode.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self.animation_iteration_count.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self.animation_play_state.to_css(dest));
+            try!(write!(dest, " "));
+
+            self.animation_name.to_css(dest)
+        }
+    }
 </%helpers:shorthand>

components/style/properties/shorthand/column.mako.rs

@@ -6,6 +6,9 @@
 
 <%helpers:shorthand name="columns" sub_properties="column-count column-width" experimental="True">
     use properties::longhands::{column_count, column_width};
+
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
+
         let mut column_count = None;
         let mut column_width = None;
         let mut autos = 0;
@@ -43,4 +46,14 @@
                 column_width: column_width,
             })
         }
+    }
+
+    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>

components/style/properties/shorthand/font.mako.rs

@@ -8,6 +8,8 @@
                                                 font-size line-height font-family">
     use properties::longhands::{font_style, font_variant, font_weight, font_size,
                                 line_height, font_family};
+
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let mut nb_normals = 0;
         let mut style = None;
         let mut variant = None;
@@ -63,4 +65,40 @@
             line_height: line_height,
             font_family: Some(font_family::SpecifiedValue(family))
         })
+    }
+
+    // This may be a bit off, unsure, possibly needs changes
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            if let DeclaredValue::Value(ref style) = *self.font_style {
+                try!(style.to_css(dest));
+                try!(write!(dest, " "));
+            }
+
+            if let DeclaredValue::Value(ref variant) = *self.font_variant {
+                try!(variant.to_css(dest));
+                try!(write!(dest, " "));
+            }
+
+            if let DeclaredValue::Value(ref weight) = *self.font_weight {
+                try!(weight.to_css(dest));
+                try!(write!(dest, " "));
+            }
+
+            try!(self.font_size.to_css(dest));
+            if let DeclaredValue::Value(ref height) = *self.line_height {
+                match *height {
+                    line_height::SpecifiedValue::Normal => {},
+                    _ => {
+                        try!(write!(dest, "/"));
+                        try!(height.to_css(dest));
+                    }
+                }
+            }
+
+            try!(write!(dest, " "));
+
+            self.font_family.to_css(dest)
+        }
+    }
 </%helpers:shorthand>

components/style/properties/shorthand/inherited_text.mako.rs

@@ -8,7 +8,16 @@
 // the `overflow-wrap` property, as if it were a shorthand of `overflow-wrap`."
 <%helpers:shorthand name="word-wrap" sub_properties="overflow-wrap">
     use properties::longhands::overflow_wrap;
+
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         Ok(Longhands {
             overflow_wrap: Some(try!(overflow_wrap::parse(context, input))),
         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            self.overflow_wrap.to_css(dest)
+        }
+    }
 </%helpers:shorthand>

components/style/properties/shorthand/list.mako.rs

@@ -8,6 +8,7 @@
                     sub_properties="list-style-image list-style-position list-style-type">
     use properties::longhands::{list_style_image, list_style_position, list_style_type};
 
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         // `none` is ambiguous until we've finished parsing the shorthands, so we count the number
         // of times we see it.
         let mut nones = 0u8;
@@ -89,4 +90,28 @@
             }
             _ => Err(()),
         }
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match *self.list_style_position {
+                DeclaredValue::Initial => try!(write!(dest, "outside")),
+                _ => try!(self.list_style_position.to_css(dest))
+            }
+
+            try!(write!(dest, " "));
+
+            match *self.list_style_image {
+                DeclaredValue::Initial => try!(write!(dest, "none")),
+                _ => try!(self.list_style_image.to_css(dest))
+            };
+
+            try!(write!(dest, " "));
+
+            match *self.list_style_type {
+                DeclaredValue::Initial => write!(dest, "disc"),
+                _ => self.list_style_type.to_css(dest)
+            }
+        }
+    }
 </%helpers:shorthand>

components/style/properties/shorthand/outline.mako.rs

@@ -8,6 +8,7 @@
     use properties::longhands::outline_width;
     use values::specified;
 
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let _unused = context;
         let mut color = None;
         let mut style = None;
@@ -46,6 +47,27 @@
         } else {
             Err(())
         }
+    }
+
+    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, " "));
+
+            match *self.outline_style {
+                DeclaredValue::Initial => try!(write!(dest, "none")),
+                _ => try!(self.outline_style.to_css(dest))
+            };
+
+            match *self.outline_color {
+                DeclaredValue::Initial => Ok(()),
+                _ => {
+                    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.
@@ -55,6 +77,7 @@
 )}" products="gecko">
     use properties::shorthands;
 
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         // Re-use border-radius parsing.
         shorthands::border_radius::parse_value(context, input).map(|longhands| {
             Longhands {
@@ -63,4 +86,21 @@
                 % endfor
             }
         })
+    }
+
+    // TODO: Border radius for the radius shorthand is not implemented correctly yet
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self._moz_outline_radius_topleft.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self._moz_outline_radius_topright.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(self._moz_outline_radius_bottomright.to_css(dest));
+            try!(write!(dest, " "));
+
+            self._moz_outline_radius_bottomleft.to_css(dest)
+        }
+    }
 </%helpers:shorthand>

components/style/properties/shorthand/position.mako.rs

@@ -9,6 +9,7 @@
                                      experimental="True">
     use properties::longhands::{flex_direction, flex_wrap};
 
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let mut direction = None;
         let mut wrap = None;
         loop {
@@ -34,6 +35,24 @@
             flex_direction: direction,
             flex_wrap: wrap,
         })
+    }
+
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match *self.flex_direction {
+                DeclaredValue::Initial => try!(write!(dest, "row")),
+                _ => try!(self.flex_direction.to_css(dest))
+            };
+
+            try!(write!(dest, " "));
+
+            match *self.flex_wrap {
+                DeclaredValue::Initial => write!(dest, "nowrap"),
+                _ => self.flex_wrap.to_css(dest)
+            }
+        }
+    }
 </%helpers:shorthand>
 
 // https://drafts.csswg.org/css-flexbox/#flex-property
@@ -49,6 +68,7 @@
         Ok((grow, shrink))
     }
 
+    pub fn parse_value(_: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let mut grow = None;
         let mut shrink = None;
         let mut basis = None;
@@ -85,4 +105,17 @@
             flex_shrink: shrink.or(Some(Number(1.0))),
             flex_basis: basis.or(Some(LengthOrPercentageOrAutoOrContent::Length(Length::Absolute(Au(0)))))
         })
+    }
+
+    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!(write!(dest, " "));
+
+            try!(self.flex_shrink.to_css(dest));
+            try!(write!(dest, " "));
+
+            self.flex_basis.to_css(dest)
+        }
+    }
 </%helpers:shorthand>

components/style/properties/shorthand/serialize.mako.rs

@@ -0,0 +1,97 @@
+/* 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/. */
+
+use cssparser::ToCss;
+use properties::{AppendableValue, DeclaredValue, PropertyDeclaration, Shorthand};
+use values::specified::{BorderStyle, CSSColor};
+use std::fmt;
+
+pub fn serialize_four_sides<W, I>(dest: &mut W, top: &I, right: &I, bottom: &I, left: &I)
+    -> fmt::Result where W: fmt::Write, I: ToCss + PartialEq {
+
+    if left == right {
+        let horizontal_value = left;
+
+        if top == bottom {
+            let vertical_value = top;
+
+            if horizontal_value == vertical_value {
+                let single_value = horizontal_value;
+                try!(single_value.to_css(dest));
+            } else {
+                try!(vertical_value.to_css(dest));
+                try!(write!(dest, " "));
+
+                try!(horizontal_value.to_css(dest));
+            }
+        } else {
+            try!(top.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(horizontal_value.to_css(dest));
+            try!(write!(dest, " "));
+
+            try!(bottom.to_css(dest));
+        }
+    } else {
+        try!(top.to_css(dest));
+        try!(write!(dest, " "));
+
+        try!(right.to_css(dest));
+        try!(write!(dest, " "));
+
+        try!(bottom.to_css(dest));
+        try!(write!(dest, " "));
+
+        try!(left.to_css(dest));
+    }
+
+    Ok(())
+}
+
+fn serialize_directional_border<W, I>(dest: &mut W,
+                                                width: &DeclaredValue<I>,
+                                                style: &DeclaredValue<BorderStyle>,
+                                                color: &DeclaredValue<CSSColor>)
+                                                -> fmt::Result where W: fmt::Write, I: ToCss {
+    match *width {
+        DeclaredValue::Value(ref width) => {
+            try!(width.to_css(dest));
+        },
+        _ => {
+            try!(write!(dest, "medium"));
+        }
+    };
+
+    try!(write!(dest, " "));
+
+    match *style {
+        DeclaredValue::Value(ref style) => {
+            try!(style.to_css(dest));
+        },
+        _ => {
+            try!(write!(dest, "none"));
+        }
+    };
+
+    match *color {
+        DeclaredValue::Value(ref color) => {
+            try!(write!(dest, " "));
+            color.to_css(dest)
+        },
+        _ => Ok(())
+    }
+}
+
+
+pub fn is_overflow_shorthand<'a, I>(appendable_value: &AppendableValue<'a, I>) -> bool
+                                    where I: Iterator<Item=&'a PropertyDeclaration> {
+    if let AppendableValue::DeclarationsForShorthand(shorthand, _) = *appendable_value {
+        if let Shorthand::Overflow = shorthand {
+            return true;
+        }
+    }
+
+    false
+}

components/style/properties/shorthand/text.mako.rs

@@ -13,6 +13,7 @@
     use properties::longhands::{text_decoration_color, text_decoration_line, text_decoration_style};
     use values::specified::CSSColor;
 
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let (mut color, mut line, mut style, mut any) = (None, None, None, false);
         loop {
             macro_rules! parse_component {
@@ -43,4 +44,30 @@
             text_decoration_line: line.or(Some(text_decoration_line::computed_value::none)),
             text_decoration_style: style.or(Some(text_decoration_style::computed_value::T::solid)),
         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match *self.text_decoration_line {
+                DeclaredValue::Value(ref line) => {
+                    try!(line.to_css(dest));
+                },
+                _ => {
+                    try!(write!(dest, "none"));
+                }
+            };
+
+            if let DeclaredValue::Value(ref style) = *self.text_decoration_style {
+                try!(write!(dest, " "));
+                try!(style.to_css(dest));
+            }
+
+            if let DeclaredValue::Value(ref color) = *self.text_decoration_color {
+                try!(write!(dest, " "));
+                try!(color.to_css(dest));
+            }
+
+            Ok(())
+        }
+    }
 </%helpers:shorthand>

components/style/values/computed/basic_shape.rs

@@ -172,23 +172,23 @@ impl ToCss for BorderRadius {
            self.top_right.0.width == self.top_right.0.height &&
            self.bottom_right.0.width == self.bottom_right.0.height &&
            self.bottom_left.0.width == self.bottom_left.0.height {
-            serialize_four_sides((&self.top_left.0.width,
+            serialize_four_sides(dest,
+                                 &self.top_left.0.width,
                                  &self.top_right.0.width,
                                  &self.bottom_right.0.width,
-                                  &self.bottom_left.0.width),
+                                 &self.bottom_left.0.width)
-                                  dest)
         } else {
-            try!(serialize_four_sides((&self.top_left.0.width,
+            try!(serialize_four_sides(dest,
+                                      &self.top_left.0.width,
                                       &self.top_right.0.width,
                                       &self.bottom_right.0.width,
-                                       &self.bottom_left.0.width),
+                                      &self.bottom_left.0.width));
-                                       dest));
             try!(dest.write_str(" / "));
-            serialize_four_sides((&self.top_left.0.height,
+            serialize_four_sides(dest,
+                                 &self.top_left.0.height,
                                  &self.top_right.0.height,
                                  &self.bottom_right.0.height,
-                                  &self.bottom_left.0.height),
+                                 &self.bottom_left.0.height)
-                                  dest)
         }
     }
 }

components/style/values/specified/basic_shape.rs

@@ -415,23 +415,23 @@ impl ToCss for BorderRadius {
            self.top_right.0.width == self.top_right.0.height &&
            self.bottom_right.0.width == self.bottom_right.0.height &&
            self.bottom_left.0.width == self.bottom_left.0.height {
-            serialize_four_sides((&self.top_left.0.width,
+            serialize_four_sides(dest,
+                                 &self.top_left.0.width,
                                  &self.top_right.0.width,
                                  &self.bottom_right.0.width,
-                                  &self.bottom_left.0.width),
+                                 &self.bottom_left.0.width)
-                                  dest)
         } else {
-            try!(serialize_four_sides((&self.top_left.0.width,
+            try!(serialize_four_sides(dest,
+                                      &self.top_left.0.width,
                                       &self.top_right.0.width,
                                       &self.bottom_right.0.width,
-                                       &self.bottom_left.0.width),
+                                      &self.bottom_left.0.width));
-                                       dest));
             try!(dest.write_str(" / "));
-            serialize_four_sides((&self.top_left.0.height,
+            serialize_four_sides(dest,
+                                 &self.top_left.0.height,
                                  &self.top_right.0.height,
                                  &self.bottom_right.0.height,
-                                  &self.bottom_left.0.height),
+                                 &self.bottom_left.0.height)
-                                  dest)
         }
     }
 }

tests/wpt/metadata-css/css-flexbox-1_dev/html/flex-flexitem-percentage-prescation.htm.ini

@@ -1,4 +0,0 @@
-[flex-flexitem-percentage-prescation.htm]
-  type: reftest
-  expected:
-    if os == "linux": FAIL

tests/wpt/metadata-css/css21_dev/html4/run-in-listitem-between-001.htm.ini

@@ -1,3 +0,0 @@
-[run-in-listitem-between-001.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/css21_dev/html4/run-in-listitem-between-002.htm.ini

@@ -1,3 +0,0 @@
-[run-in-listitem-between-002.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/metadata-css/cssom-1_dev/html/cssom-setProperty-shorthand.htm.ini

@@ -18,27 +18,12 @@
   [shorthand border can be set with setProperty]
     expected: FAIL
 
-  [shorthand border-color can be set with setProperty]
-    expected: FAIL
-
-  [shorthand border-style can be set with setProperty]
-    expected: FAIL
-
-  [shorthand border-width can be set with setProperty]
-    expected: FAIL
-
   [shorthand list-style can be set with setProperty]
     expected: FAIL
 
-  [shorthand margin can be set with setProperty]
-    expected: FAIL
-
   [shorthand outline can be set with setProperty]
     expected: FAIL
 
-  [shorthand padding can be set with setProperty]
-    expected: FAIL
-
   [shorthand background can be set with setProperty]
     expected: FAIL
 

tests/wpt/metadata-css/cssom-1_dev/html/index-001.htm.ini

@@ -1,5 +0,0 @@
-[index-001.htm]
-  type: testharness
-  [margin_20px_20px]
-    expected: FAIL
-

tests/wpt/metadata-css/cssom-1_dev/html/index-002.htm.ini

@@ -3,9 +3,6 @@
   [border is expected to be border: 1px;]
     expected: FAIL
 
-  [border is expected to be border: 1px solid red;]
-    expected: FAIL
-
   [border is expected to be border: 1px red;]
     expected: FAIL
 
@@ -27,10 +24,7 @@
   [border is expected to be border: dotted;]
     expected: FAIL
 
-  [border is expected to be border-width: 1px;]
+  [overflow is expected to be overflow: scroll hidden;]
-    expected: FAIL
-
-  [overflow is expected to be overflow: scroll;]
     expected: FAIL
 
   [outline is expected to be outline: blue dotted 2px;]

tests/wpt/mozilla/meta/mozilla/calc.html.ini

@@ -1,5 +1,8 @@
 [calc.html]
   type: testharness
+  [calc for border-width]
+    expected: FAIL
+
   [calc for column-width]
     expected: FAIL
 

tests/wpt/mozilla/meta/mozilla/style_no_trailing_space.html.ini

@@ -0,0 +1,5 @@
+[style_no_trailing_space.html]
+  type: testharness
+  [Untitled]
+    expected: FAIL
+