Auto merge of #18525 - emilio:border-spacing, r=nox

style: various serialization fixes

This should close https://github.com/servo/servo/pull/18458, and fix https://bugzilla.mozilla.org/show_bug.cgi?id=1397619.

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

31 files changed, 346 insertions, 289 deletions

diff --git a/components/layout/model.rs b/components/layout/model.rs
index 0ea3a4be467..02cae69fa21 100644
--- a/components/layout/model.rs
+++ b/components/layout/model.rs
@@ -474,8 +474,8 @@ pub fn specified_border_radius(
     containing_size: Size2D<Au>)
     -> Size2D<Au>
 {
-    let w = radius.0.width.to_used_value(containing_size.width);
-    let h = radius.0.height.to_used_value(containing_size.height);
+    let w = radius.0.width().to_used_value(containing_size.width);
+    let h = radius.0.height().to_used_value(containing_size.height);
     Size2D::new(w, h)
 }
 
diff --git a/components/layout/table.rs b/components/layout/table.rs
index e373385e050..76708ddf649 100644
--- a/components/layout/table.rs
+++ b/components/layout/table.rs
@@ -29,7 +29,7 @@ use style::logical_geometry::LogicalSize;
 use style::properties::ComputedValues;
 use style::servo::restyle_damage::{REFLOW, REFLOW_OUT_OF_FLOW};
 use style::values::CSSFloat;
-use style::values::computed::{LengthOrPercentageOrAuto, NonNegativeLength};
+use style::values::computed::LengthOrPercentageOrAuto;
 use table_row::{self, CellIntrinsicInlineSize, CollapsedBorder, CollapsedBorderProvenance};
 use table_row::TableRowFlow;
 use table_wrapper::TableLayout;
@@ -190,12 +190,7 @@ impl TableFlow {
         let style = self.block_flow.fragment.style();
         match style.get_inheritedtable().border_collapse {
             border_collapse::T::separate => style.get_inheritedtable().border_spacing,
-            border_collapse::T::collapse => {
-                border_spacing::T {
-                    horizontal: NonNegativeLength::zero(),
-                    vertical: NonNegativeLength::zero(),
-                }
-            }
+            border_collapse::T::collapse => border_spacing::T::zero(),
         }
     }
 
@@ -204,7 +199,7 @@ impl TableFlow {
         if num_columns == 0 {
             return Au(0);
         }
-        Au::from(self.spacing().horizontal) * (num_columns as i32 + 1)
+        self.spacing().horizontal() * (num_columns as i32 + 1)
     }
 }
 
@@ -471,8 +466,8 @@ impl Flow for TableFlow {
 
     fn assign_block_size(&mut self, _: &LayoutContext) {
         debug!("assign_block_size: assigning block_size for table");
-        let vertical_spacing = self.spacing().vertical.0;
-        self.block_flow.assign_block_size_for_table_like_flow(Au::from(vertical_spacing))
+        let vertical_spacing = self.spacing().vertical();
+        self.block_flow.assign_block_size_for_table_like_flow(vertical_spacing)
     }
 
     fn compute_stacking_relative_position(&mut self, layout_context: &LayoutContext) {
diff --git a/components/layout/table_row.rs b/components/layout/table_row.rs
index 17728a5ae0b..67fb58b2bc4 100644
--- a/components/layout/table_row.rs
+++ b/components/layout/table_row.rs
@@ -27,7 +27,7 @@ use style::computed_values::{border_collapse, border_spacing, border_top_style};
 use style::logical_geometry::{LogicalSize, PhysicalSide, WritingMode};
 use style::properties::ComputedValues;
 use style::servo::restyle_damage::{REFLOW, REFLOW_OUT_OF_FLOW};
-use style::values::computed::{Color, LengthOrPercentageOrAuto, NonNegativeLength};
+use style::values::computed::{Color, LengthOrPercentageOrAuto};
 use table::{ColumnComputedInlineSize, ColumnIntrinsicInlineSize, InternalTable, VecExt};
 use table_cell::{CollapsedBordersForCell, TableCellFlow};
 
@@ -94,10 +94,7 @@ impl TableRowFlow {
             cell_intrinsic_inline_sizes: Vec::new(),
             column_computed_inline_sizes: Vec::new(),
             incoming_rowspan: Vec::new(),
-            spacing: border_spacing::T {
-                horizontal: NonNegativeLength::zero(),
-                vertical: NonNegativeLength::zero(),
-            },
+            spacing: border_spacing::T::zero(),
             table_writing_mode: writing_mode,
             preliminary_collapsed_borders: CollapsedBordersForRow::new(),
             final_collapsed_borders: CollapsedBordersForRow::new(),
@@ -397,7 +394,7 @@ impl Flow for TableRowFlow {
                         None => break,
                     };
                 column_computed_inline_size.size = column_computed_inline_size.size +
-                    extra_column_computed_inline_size.size + Au::from(self.spacing.horizontal);
+                    extra_column_computed_inline_size.size + self.spacing.horizontal();
                 col += 1;
             }
 
@@ -828,7 +825,7 @@ fn set_inline_position_of_child_flow(
         let column_inline_size = column_computed_inline_sizes[*column_index].size;
         let border_inline_size = match *border_collapse_info {
             Some(_) => Au(0), // FIXME: Make collapsed borders account for colspan/rowspan.
-            None => Au::from(border_spacing.horizontal),
+            None => border_spacing.horizontal(),
         };
         if reverse_column_order {
             *inline_end_margin_edge += column_inline_size + border_inline_size;
@@ -883,9 +880,9 @@ fn set_inline_position_of_child_flow(
         None => {
             // Take spacing into account.
             if reverse_column_order {
-                *inline_end_margin_edge += Au::from(border_spacing.horizontal);
+                *inline_end_margin_edge += border_spacing.horizontal();
             } else {
-                *inline_start_margin_edge += Au::from(border_spacing.horizontal);
+                *inline_start_margin_edge += border_spacing.horizontal();
             }
         }
     }
diff --git a/components/layout/table_rowgroup.rs b/components/layout/table_rowgroup.rs
index aabc56b8e54..3623fc3c8ee 100644
--- a/components/layout/table_rowgroup.rs
+++ b/components/layout/table_rowgroup.rs
@@ -22,7 +22,6 @@ use std::iter::{IntoIterator, Iterator, Peekable};
 use style::computed_values::{border_collapse, border_spacing};
 use style::logical_geometry::LogicalSize;
 use style::properties::ComputedValues;
-use style::values::computed::NonNegativeLength;
 use table::{ColumnIntrinsicInlineSize, InternalTable, TableLikeFlow};
 
 /// A table formatting context.
@@ -56,10 +55,7 @@ impl TableRowGroupFlow {
         TableRowGroupFlow {
             block_flow: BlockFlow::from_fragment(fragment),
             column_intrinsic_inline_sizes: Vec::new(),
-            spacing: border_spacing::T {
-                horizontal: NonNegativeLength::zero(),
-                vertical: NonNegativeLength::zero(),
-            },
+            spacing: border_spacing::T::zero(),
             collapsed_inline_direction_border_widths_for_table: Vec::new(),
             collapsed_block_direction_border_widths_for_table: Vec::new(),
         }
@@ -163,7 +159,7 @@ impl Flow for TableRowGroupFlow {
 
     fn assign_block_size(&mut self, _: &LayoutContext) {
         debug!("assign_block_size: assigning block_size for table_rowgroup");
-        self.block_flow.assign_block_size_for_table_like_flow(Au::from(self.spacing.vertical))
+        self.block_flow.assign_block_size_for_table_like_flow(self.spacing.vertical());
     }
 
     fn compute_stacking_relative_position(&mut self, layout_context: &LayoutContext) {
diff --git a/components/script/dom/element.rs b/components/script/dom/element.rs
index 60a237df618..ee2e1e7db0a 100644
--- a/components/script/dom/element.rs
+++ b/components/script/dom/element.rs
@@ -581,10 +581,12 @@ impl LayoutElementHelpers for LayoutJS<Element> {
             hints.push(from_declaration(
                 shared_lock,
                 PropertyDeclaration::BorderSpacing(
-                    Box::new(border_spacing::SpecifiedValue {
-                        horizontal: width_value.into(),
-                        vertical: None,
-                    }))));
+                    Box::new(border_spacing::SpecifiedValue::new(
+                        width_value.clone().into(),
+                        width_value.into()
+                    ))
+                )
+            ));
         }
 
 
diff --git a/components/style/gecko/conversions.rs b/components/style/gecko/conversions.rs
index dab0eeddc77..fbfd0d01a0f 100644
--- a/components/style/gecko/conversions.rs
+++ b/components/style/gecko/conversions.rs
@@ -719,8 +719,8 @@ pub mod basic_shape {
         /// Set this `BorderRadius` into a given `nsStyleCoord`.
         pub fn set_corners(&self, other: &mut nsStyleCorners) {
             let mut set_corner = |field: &BorderCornerRadius, index| {
-                field.0.width.to_gecko_style_coord(&mut other.data_at_mut(index));
-                field.0.height.to_gecko_style_coord(&mut other.data_at_mut(index + 1));
+                field.0.width().to_gecko_style_coord(&mut other.data_at_mut(index));
+                field.0.height().to_gecko_style_coord(&mut other.data_at_mut(index + 1));
             };
             set_corner(&self.top_left, 0);
             set_corner(&self.top_right, 2);
diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 75fe53450c1..1d8ff1bf08d 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -943,8 +943,8 @@ def set_gecko_property(ffi_name, expr):
 <%def name="impl_corner_style_coord(ident, gecko_ffi_name, x_index, y_index)">
     #[allow(non_snake_case)]
     pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
-        v.0.width.to_gecko_style_coord(&mut self.gecko.${gecko_ffi_name}.data_at_mut(${x_index}));
-        v.0.height.to_gecko_style_coord(&mut self.gecko.${gecko_ffi_name}.data_at_mut(${y_index}));
+        v.0.width().to_gecko_style_coord(&mut self.gecko.${gecko_ffi_name}.data_at_mut(${x_index}));
+        v.0.height().to_gecko_style_coord(&mut self.gecko.${gecko_ffi_name}.data_at_mut(${y_index}));
     }
     #[allow(non_snake_case)]
     pub fn copy_${ident}_from(&mut self, other: &Self) {
@@ -4503,8 +4503,8 @@ fn static_assert() {
                   skip_longhands="border-spacing">
 
     pub fn set_border_spacing(&mut self, v: longhands::border_spacing::computed_value::T) {
-        self.gecko.mBorderSpacingCol = v.horizontal.0.to_i32_au();
-        self.gecko.mBorderSpacingRow = v.vertical.0.to_i32_au();
+        self.gecko.mBorderSpacingCol = v.horizontal().0;
+        self.gecko.mBorderSpacingRow = v.vertical().0;
     }
 
     pub fn copy_border_spacing_from(&mut self, other: &Self) {
@@ -4517,10 +4517,10 @@ fn static_assert() {
     }
 
     pub fn clone_border_spacing(&self) -> longhands::border_spacing::computed_value::T {
-        longhands::border_spacing::computed_value::T {
-            horizontal: Au(self.gecko.mBorderSpacingCol).into(),
-            vertical: Au(self.gecko.mBorderSpacingRow).into()
-        }
+        longhands::border_spacing::computed_value::T::new(
+            Au(self.gecko.mBorderSpacingCol).into(),
+            Au(self.gecko.mBorderSpacingRow).into()
+        )
     }
 </%self:impl_trait>
 
diff --git a/components/style/properties/helpers.mako.rs b/components/style/properties/helpers.mako.rs
index b2182d3842a..41995060941 100644
--- a/components/style/properties/helpers.mako.rs
+++ b/components/style/properties/helpers.mako.rs
@@ -489,12 +489,6 @@
             }
         }
 
-        impl From<computed_value::T> for SpecifiedValue {
-            fn from(other: computed_value::T) -> Self {
-                SpecifiedValue::Keyword(other)
-            }
-        }
-
         #[inline]
         pub fn get_initial_value() -> computed_value::T {
             computed_value::T::${to_rust_ident(values.split()[0])}
diff --git a/components/style/properties/longhand/background.mako.rs b/components/style/properties/longhand/background.mako.rs
index 69dfc229d77..f2eb5f2e038 100644
--- a/components/style/properties/longhand/background.mako.rs
+++ b/components/style/properties/longhand/background.mako.rs
@@ -166,8 +166,8 @@ ${helpers.single_keyword("background-origin",
                          flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER")}
 
 ${helpers.predefined_type("background-size", "BackgroundSize",
-    initial_value="computed::LengthOrPercentageOrAuto::Auto.into()",
-    initial_specified_value="specified::LengthOrPercentageOrAuto::Auto.into()",
+    initial_value="computed::BackgroundSize::auto()",
+    initial_specified_value="specified::BackgroundSize::auto()",
     spec="https://drafts.csswg.org/css-backgrounds/#the-background-size",
     vector=True,
     animation_value_type="BackgroundSizeList",
diff --git a/components/style/properties/longhand/border.mako.rs b/components/style/properties/longhand/border.mako.rs
index 9cb342a162e..6931eaa3f6e 100644
--- a/components/style/properties/longhand/border.mako.rs
+++ b/components/style/properties/longhand/border.mako.rs
@@ -59,7 +59,7 @@ ${helpers.gecko_keyword_conversion(Keyword('border-style',
 // FIXME(#4126): when gfx supports painting it, make this Size2D<LengthOrPercentage>
 % for corner in ["top-left", "top-right", "bottom-right", "bottom-left"]:
     ${helpers.predefined_type("border-" + corner + "-radius", "BorderCornerRadius",
-                              "computed::LengthOrPercentage::zero().into()",
+                              "computed::BorderCornerRadius::zero()",
                               "parse", extra_prefixes="webkit",
                               spec="https://drafts.csswg.org/css-backgrounds/#border-%s-radius" % corner,
                               boxed=True,
@@ -216,8 +216,8 @@ ${helpers.predefined_type("border-image-source", "ImageLayer",
 
 ${helpers.predefined_type("border-image-outset", "LengthOrNumberRect",
     parse_method="parse_non_negative",
-    initial_value="computed::LengthOrNumber::zero().into()",
-    initial_specified_value="specified::LengthOrNumber::zero().into()",
+    initial_value="computed::LengthOrNumberRect::all(computed::LengthOrNumber::zero())",
+    initial_specified_value="specified::LengthOrNumberRect::all(specified::LengthOrNumber::zero())",
     spec="https://drafts.csswg.org/css-backgrounds/#border-image-outset",
     animation_value_type="discrete",
     flags="APPLIES_TO_FIRST_LETTER",
@@ -283,8 +283,8 @@ ${helpers.predefined_type("border-image-outset", "LengthOrNumberRect",
 </%helpers:longhand>
 
 ${helpers.predefined_type("border-image-width", "BorderImageWidth",
-    initial_value="computed::BorderImageSideWidth::one().into()",
-    initial_specified_value="specified::BorderImageSideWidth::one().into()",
+    initial_value="computed::BorderImageWidth::all(computed::BorderImageSideWidth::one())",
+    initial_specified_value="specified::BorderImageWidth::all(specified::BorderImageSideWidth::one())",
     spec="https://drafts.csswg.org/css-backgrounds/#border-image-width",
     animation_value_type="discrete",
     flags="APPLIES_TO_FIRST_LETTER",
diff --git a/components/style/properties/longhand/font.mako.rs b/components/style/properties/longhand/font.mako.rs
index 3890332abad..6092f80289b 100644
--- a/components/style/properties/longhand/font.mako.rs
+++ b/components/style/properties/longhand/font.mako.rs
@@ -420,14 +420,14 @@ ${helpers.single_keyword_system("font-style",
                                       "titling-caps": "TITLING" } %>
 
 ${helpers.single_keyword_system("font-variant-caps",
-                               "normal small-caps",
-                               extra_gecko_values="all-small-caps petite-caps all-petite-caps unicase titling-caps",
-                               gecko_constant_prefix="NS_FONT_VARIANT_CAPS",
-                               gecko_ffi_name="mFont.variantCaps",
-                               spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps",
-                               custom_consts=font_variant_caps_custom_consts,
-                               flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER",
-                               animation_value_type="discrete")}
+                                "normal small-caps",
+                                extra_gecko_values="all-small-caps petite-caps all-petite-caps unicase titling-caps",
+                                gecko_constant_prefix="NS_FONT_VARIANT_CAPS",
+                                gecko_ffi_name="mFont.variantCaps",
+                                spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps",
+                                custom_consts=font_variant_caps_custom_consts,
+                                flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER",
+                                animation_value_type="discrete")}
 
 <%helpers:longhand name="font-weight" animation_value_type="ComputedValue"
                    flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER"
diff --git a/components/style/properties/longhand/inherited_table.mako.rs b/components/style/properties/longhand/inherited_table.mako.rs
index 13a6e7c45d6..99363d082c2 100644
--- a/components/style/properties/longhand/inherited_table.mako.rs
+++ b/components/style/properties/longhand/inherited_table.mako.rs
@@ -20,112 +20,9 @@ ${helpers.single_keyword("caption-side", "top bottom",
                          animation_value_type="discrete",
                          spec="https://drafts.csswg.org/css-tables/#propdef-caption-side")}
 
-<%helpers:longhand name="border-spacing" animation_value_type="BorderSpacing" boxed="True"
-                   spec="https://drafts.csswg.org/css-tables/#propdef-border-spacing">
-    use values::specified::{AllowQuirks, Length};
-    use values::specified::length::NonNegativeLength;
-
-    pub mod computed_value {
-        use values::animated::{ToAnimatedValue, ToAnimatedZero};
-        use values::computed::NonNegativeLength;
-
-        #[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
-        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
-        #[derive(Animate, Clone, ComputeSquaredDistance, Copy, Debug, PartialEq, ToCss)]
-        pub struct T {
-            pub horizontal: NonNegativeLength,
-            pub vertical: NonNegativeLength,
-        }
-
-        impl ToAnimatedZero for T {
-            #[inline]
-            fn to_animated_zero(&self) -> Result<Self, ()> { Err(()) }
-        }
-
-        impl ToAnimatedValue for T {
-            type AnimatedValue = Self;
-
-            #[inline]
-            fn to_animated_value(self) -> Self {
-                self
-            }
-
-            #[inline]
-            fn from_animated_value(animated: Self::AnimatedValue) -> Self {
-                T {
-                    horizontal: ToAnimatedValue::from_animated_value(animated.horizontal),
-                    vertical: ToAnimatedValue::from_animated_value(animated.vertical)
-                }
-            }
-        }
-    }
-
-    #[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
-    #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
-    #[derive(Clone, Debug, PartialEq, ToCss)]
-    pub struct SpecifiedValue {
-        pub horizontal: NonNegativeLength,
-        pub vertical: Option<NonNegativeLength>,
-    }
-
-    #[inline]
-    pub fn get_initial_value() -> computed_value::T {
-        use values::computed::NonNegativeLength as ComputedNonNegativeLength;
-        computed_value::T {
-            horizontal: ComputedNonNegativeLength::zero(),
-            vertical: ComputedNonNegativeLength::zero(),
-        }
-    }
-
-    impl ToComputedValue for SpecifiedValue {
-        type ComputedValue = computed_value::T;
-
-        #[inline]
-        fn to_computed_value(&self, context: &Context) -> computed_value::T {
-            let horizontal = self.horizontal.to_computed_value(context);
-            computed_value::T {
-                horizontal: horizontal,
-                vertical: self.vertical.as_ref().map_or(horizontal, |v| v.to_computed_value(context)),
-            }
-        }
-
-        #[inline]
-        fn from_computed_value(computed: &computed_value::T) -> Self {
-            SpecifiedValue {
-                horizontal: ToComputedValue::from_computed_value(&computed.horizontal),
-                vertical: Some(ToComputedValue::from_computed_value(&computed.vertical)),
-            }
-        }
-    }
-
-    pub fn parse<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
-                         -> Result<SpecifiedValue,ParseError<'i>> {
-        let mut first = None;
-        let mut second = None;
-        match Length::parse_non_negative_quirky(context, input, AllowQuirks::Yes) {
-            Err(_) => (),
-            Ok(length) => {
-                first = Some(length);
-                if let Ok(len) = input.try(|i| Length::parse_non_negative_quirky(context, i, AllowQuirks::Yes)) {
-                    second = Some(len);
-                }
-            }
-        }
-        match (first, second) {
-            (None, None) => Err(StyleParseError::UnspecifiedError.into()),
-            (Some(length), None) => {
-                Ok(SpecifiedValue {
-                    horizontal: length.into(),
-                    vertical: None,
-                })
-            }
-            (Some(horizontal), Some(vertical)) => {
-                Ok(SpecifiedValue {
-                    horizontal: horizontal.into(),
-                    vertical: Some(vertical.into()),
-                })
-            }
-            (None, Some(_)) => unreachable!(),
-        }
-    }
-</%helpers:longhand>
+${helpers.predefined_type("border-spacing",
+                          "BorderSpacing",
+                          "computed::BorderSpacing::zero()",
+                          animation_value_type="BorderSpacing",
+                          boxed="True",
+                          spec="https://drafts.csswg.org/css-tables/#propdef-border-spacing")}
diff --git a/components/style/properties/longhand/outline.mako.rs b/components/style/properties/longhand/outline.mako.rs
index 8f0359ffdb5..7c349be62f8 100644
--- a/components/style/properties/longhand/outline.mako.rs
+++ b/components/style/properties/longhand/outline.mako.rs
@@ -77,7 +77,7 @@ ${helpers.predefined_type("outline-width",
 // The -moz-outline-radius-* properties are non-standard and not on a standards track.
 % for corner in ["topleft", "topright", "bottomright", "bottomleft"]:
     ${helpers.predefined_type("-moz-outline-radius-" + corner, "BorderCornerRadius",
-        "computed::LengthOrPercentage::zero().into()",
+        "computed::BorderCornerRadius::zero()",
         products="gecko",
         boxed=True,
         animation_value_type="BorderCornerRadius",
diff --git a/components/style/properties/shorthand/border.mako.rs b/components/style/properties/shorthand/border.mako.rs
index bdd76c876dc..81093d91b3c 100644
--- a/components/style/properties/shorthand/border.mako.rs
+++ b/components/style/properties/shorthand/border.mako.rs
@@ -209,6 +209,7 @@ pub fn parse_border<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
      for corner in ['top-left', 'top-right', 'bottom-right', 'bottom-left']
 )}" extra_prefixes="webkit" spec="https://drafts.csswg.org/css-backgrounds/#border-radius">
     use values::generics::rect::Rect;
+    use values::generics::border::BorderCornerRadius;
     use values::specified::border::BorderRadius;
     use parser::Parse;
 
@@ -226,14 +227,15 @@ pub fn parse_border<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
         fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
             let LonghandsToSerialize {
-                border_top_left_radius: ref tl,
-                border_top_right_radius: ref tr,
-                border_bottom_right_radius: ref br,
-                border_bottom_left_radius: ref bl,
+                border_top_left_radius: &BorderCornerRadius(ref tl),
+                border_top_right_radius: &BorderCornerRadius(ref tr),
+                border_bottom_right_radius: &BorderCornerRadius(ref br),
+                border_bottom_left_radius: &BorderCornerRadius(ref bl),
             } = *self;
 
-            let widths = Rect::new(&tl.0.width, &tr.0.width, &br.0.width, &bl.0.width);
-            let heights = Rect::new(&tl.0.height, &tr.0.height, &br.0.height, &bl.0.height);
+
+            let widths = Rect::new(tl.width(), tr.width(), br.width(), bl.width());
+            let heights = Rect::new(tl.height(), tr.height(), br.height(), bl.height());
 
             BorderRadius::serialize_rects(widths, heights, dest)
         }
diff --git a/components/style/properties/shorthand/outline.mako.rs b/components/style/properties/shorthand/outline.mako.rs
index d0425e11b69..5d816965fae 100644
--- a/components/style/properties/shorthand/outline.mako.rs
+++ b/components/style/properties/shorthand/outline.mako.rs
@@ -77,15 +77,17 @@
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
         fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            use values::generics::border::BorderCornerRadius;
+
             let LonghandsToSerialize {
-                _moz_outline_radius_topleft: ref tl,
-                _moz_outline_radius_topright: ref tr,
-                _moz_outline_radius_bottomright: ref br,
-                _moz_outline_radius_bottomleft: ref bl,
+                _moz_outline_radius_topleft: &BorderCornerRadius(ref tl),
+                _moz_outline_radius_topright: &BorderCornerRadius(ref tr),
+                _moz_outline_radius_bottomright: &BorderCornerRadius(ref br),
+                _moz_outline_radius_bottomleft: &BorderCornerRadius(ref bl),
             } = *self;
 
-            let widths = Rect::new(&tl.0.width, &tr.0.width, &br.0.width, &bl.0.width);
-            let heights = Rect::new(&tl.0.height, &tr.0.height, &br.0.height, &bl.0.height);
+            let widths = Rect::new(tl.width(), tr.width(), br.width(), bl.width());
+            let heights = Rect::new(tl.height(), tr.height(), br.height(), bl.height());
 
             BorderRadius::serialize_rects(widths, heights, dest)
         }
diff --git a/components/style/values/animated/mod.rs b/components/style/values/animated/mod.rs
index 3a9764d33de..3badee48525 100644
--- a/components/style/values/animated/mod.rs
+++ b/components/style/values/animated/mod.rs
@@ -348,8 +348,8 @@ impl ToAnimatedValue for ComputedBorderCornerRadius {
 
     #[inline]
     fn from_animated_value(animated: Self::AnimatedValue) -> Self {
-        ComputedBorderCornerRadius::new(animated.0.width.clamp_to_non_negative(),
-                                        animated.0.height.clamp_to_non_negative())
+        ComputedBorderCornerRadius::new((animated.0).0.width.clamp_to_non_negative(),
+                                        (animated.0).0.height.clamp_to_non_negative())
     }
 }
 
diff --git a/components/style/values/computed/background.rs b/components/style/values/computed/background.rs
index 1adf8ec0aa5..c618fb66c15 100644
--- a/components/style/values/computed/background.rs
+++ b/components/style/values/computed/background.rs
@@ -13,6 +13,16 @@ use values::generics::background::BackgroundSize as GenericBackgroundSize;
 /// A computed value for the `background-size` property.
 pub type BackgroundSize = GenericBackgroundSize<LengthOrPercentageOrAuto>;
 
+impl BackgroundSize {
+    /// Returns `auto auto`.
+    pub fn auto() -> Self {
+        GenericBackgroundSize::Explicit {
+            width: LengthOrPercentageOrAuto::Auto,
+            height: LengthOrPercentageOrAuto::Auto,
+        }
+    }
+}
+
 impl RepeatableListAnimatable for BackgroundSize {}
 
 impl ToAnimatedZero for BackgroundSize {
diff --git a/components/style/values/computed/border.rs b/components/style/values/computed/border.rs
index 9ca98787730..d8f24a2266b 100644
--- a/components/style/values/computed/border.rs
+++ b/components/style/values/computed/border.rs
@@ -4,14 +4,17 @@
 
 //! Computed types for CSS values related to borders.
 
+use app_units::Au;
 use values::animated::ToAnimatedZero;
 use values::computed::{Number, NumberOrPercentage};
-use values::computed::length::LengthOrPercentage;
+use values::computed::length::{LengthOrPercentage, NonNegativeLength};
 use values::generics::border::BorderCornerRadius as GenericBorderCornerRadius;
 use values::generics::border::BorderImageSideWidth as GenericBorderImageSideWidth;
 use values::generics::border::BorderImageSlice as GenericBorderImageSlice;
 use values::generics::border::BorderRadius as GenericBorderRadius;
+use values::generics::border::BorderSpacing as GenericBorderSpacing;
 use values::generics::rect::Rect;
+use values::generics::size::Size;
 
 /// A computed value for the `border-image-width` property.
 pub type BorderImageWidth = Rect<BorderImageSideWidth>;
@@ -28,6 +31,9 @@ pub type BorderRadius = GenericBorderRadius<LengthOrPercentage>;
 /// A computed value for the `border-*-radius` longhand properties.
 pub type BorderCornerRadius = GenericBorderCornerRadius<LengthOrPercentage>;
 
+/// A computed value for the `border-spacing` longhand property.
+pub type BorderSpacing = GenericBorderSpacing<NonNegativeLength>;
+
 impl BorderImageSideWidth {
     /// Returns `1`.
     #[inline]
@@ -36,6 +42,38 @@ impl BorderImageSideWidth {
     }
 }
 
+impl BorderSpacing {
+    /// Returns `0 0`.
+    pub fn zero() -> Self {
+        GenericBorderSpacing(Size::new(NonNegativeLength::zero(), NonNegativeLength::zero()))
+    }
+
+    /// Returns the horizontal spacing.
+    pub fn horizontal(&self) -> Au {
+        Au::from(*self.0.width())
+    }
+
+    /// Returns the vertical spacing.
+    pub fn vertical(&self) -> Au {
+        Au::from(*self.0.height())
+    }
+}
+
+impl BorderCornerRadius {
+    /// Returns `0 0`.
+    pub fn zero() -> Self {
+        GenericBorderCornerRadius(Size::new(LengthOrPercentage::zero(), LengthOrPercentage::zero()))
+    }
+}
+
+impl ToAnimatedZero for BorderSpacing {
+    #[inline]
+    fn to_animated_zero(&self) -> Result<Self, ()> {
+        // FIXME(emilio): Why?
+        Err(())
+    }
+}
+
 impl ToAnimatedZero for BorderCornerRadius {
     #[inline]
     fn to_animated_zero(&self) -> Result<Self, ()> {
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index a8599991943..5b7f251ff26 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -35,7 +35,7 @@ pub use self::align::{AlignItems, AlignJustifyContent, AlignJustifySelf, Justify
 pub use self::angle::Angle;
 pub use self::background::BackgroundSize;
 pub use self::border::{BorderImageSlice, BorderImageWidth, BorderImageSideWidth};
-pub use self::border::{BorderRadius, BorderCornerRadius};
+pub use self::border::{BorderRadius, BorderCornerRadius, BorderSpacing};
 pub use self::box_::VerticalAlign;
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};
 pub use self::effects::{BoxShadow, Filter, SimpleShadow};
diff --git a/components/style/values/generics/background.rs b/components/style/values/generics/background.rs
index 09db669ad4f..1d3c2345b2f 100644
--- a/components/style/values/generics/background.rs
+++ b/components/style/values/generics/background.rs
@@ -24,12 +24,3 @@ pub enum BackgroundSize<LengthOrPercentageOrAuto> {
     #[animation(error)]
     Contain,
 }
-
-impl<L> From<L> for BackgroundSize<L>
-    where L: Clone,
-{
-    #[inline]
-    fn from(value: L) -> Self {
-        BackgroundSize::Explicit { width: value.clone(), height: value }
-    }
-}
diff --git a/components/style/values/generics/border.rs b/components/style/values/generics/border.rs
index 33f9cd8b8a6..ee1dd7e9883 100644
--- a/components/style/values/generics/border.rs
+++ b/components/style/values/generics/border.rs
@@ -4,10 +4,10 @@
 
 //! Generic types for CSS values related to borders.
 
-use euclid::Size2D;
 use std::fmt;
 use style_traits::ToCss;
 use values::generics::rect::Rect;
+use values::generics::size::Size;
 
 /// A generic value for a single side of a `border-image-width` property.
 #[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
@@ -33,6 +33,34 @@ pub struct BorderImageSlice<NumberOrPercentage> {
     pub fill: bool,
 }
 
+/// A generic value for the `border-*-radius` longhand properties.
+#[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+#[derive(Animate, Clone, ComputeSquaredDistance, Copy, Debug)]
+#[derive(PartialEq, ToComputedValue, ToCss)]
+pub struct BorderCornerRadius<L>(pub Size<L>);
+
+impl<L> BorderCornerRadius<L> {
+    /// Trivially create a `BorderCornerRadius`.
+    pub fn new(w: L, h: L) -> Self {
+        BorderCornerRadius(Size::new(w, h))
+    }
+}
+
+/// A generic value for the `border-spacing` property.
+#[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+#[derive(Animate, Clone, ComputeSquaredDistance, Copy, Debug)]
+#[derive(PartialEq, ToAnimatedValue, ToComputedValue, ToCss)]
+pub struct BorderSpacing<L>(pub Size<L>);
+
+impl<L> BorderSpacing<L> {
+    /// Trivially create a `BorderCornerRadius`.
+    pub fn new(w: L, h: L) -> Self {
+        BorderSpacing(Size::new(w, h))
+    }
+}
+
 /// A generic value for `border-radius`, `outline-radius` and `inset()`.
 ///
 /// https://drafts.csswg.org/css-backgrounds-3/#border-radius
@@ -51,20 +79,13 @@ pub struct BorderRadius<LengthOrPercentage> {
     pub bottom_left: BorderCornerRadius<LengthOrPercentage>,
 }
 
-/// A generic value for `border-*-radius` longhand properties.
-#[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
-#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
-#[derive(Animate, Clone, ComputeSquaredDistance, Copy, Debug)]
-#[derive(PartialEq, ToComputedValue)]
-pub struct BorderCornerRadius<L>(pub Size2D<L>);
-
 impl<N> From<N> for BorderImageSlice<N>
     where N: Clone,
 {
     #[inline]
     fn from(value: N) -> Self {
         Self {
-            offsets: value.into(),
+            offsets: Rect::all(value),
             fill: false,
         }
     }
@@ -87,11 +108,12 @@ impl<N> ToCss for BorderImageSlice<N>
 impl<L> BorderRadius<L> {
     /// Returns a new `BorderRadius<L>`.
     #[inline]
-    pub fn new(tl: BorderCornerRadius<L>,
-               tr: BorderCornerRadius<L>,
-               br: BorderCornerRadius<L>,
-               bl: BorderCornerRadius<L>)
-               -> Self {
+    pub fn new(
+        tl: BorderCornerRadius<L>,
+        tr: BorderCornerRadius<L>,
+        br: BorderCornerRadius<L>,
+        bl: BorderCornerRadius<L>
+    ) -> Self {
         BorderRadius {
             top_left: tl,
             top_right: tr,
@@ -123,10 +145,10 @@ impl<L> ToCss for BorderRadius<L>
 {
     fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
         let BorderRadius {
-            top_left: ref tl,
-            top_right: ref tr,
-            bottom_right: ref br,
-            bottom_left: ref bl,
+            top_left: BorderCornerRadius(ref tl),
+            top_right: BorderCornerRadius(ref tr),
+            bottom_right: BorderCornerRadius(ref br),
+            bottom_left: BorderCornerRadius(ref bl),
         } = *self;
 
         let widths = Rect::new(&tl.0.width, &tr.0.width, &br.0.width, &bl.0.width);
@@ -135,29 +157,3 @@ impl<L> ToCss for BorderRadius<L>
         Self::serialize_rects(widths, heights, dest)
     }
 }
-
-impl<L> BorderCornerRadius<L> {
-    #[inline]
-    /// Create a new `BorderCornerRadius` for an area of given width and height.
-    pub fn new(width: L, height: L) -> BorderCornerRadius<L> {
-        BorderCornerRadius(Size2D::new(width, height))
-    }
-}
-
-impl<L: Clone> From<L> for BorderCornerRadius<L> {
-    fn from(radius: L) -> Self {
-        Self::new(radius.clone(), radius)
-    }
-}
-
-impl<L> ToCss for BorderCornerRadius<L>
-    where L: ToCss,
-{
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write
-    {
-        self.0.width.to_css(dest)?;
-        dest.write_str(" ")?;
-        self.0.height.to_css(dest)
-    }
-}
diff --git a/components/style/values/generics/mod.rs b/components/style/values/generics/mod.rs
index b28147da3d5..4603523d920 100644
--- a/components/style/values/generics/mod.rs
+++ b/components/style/values/generics/mod.rs
@@ -25,6 +25,7 @@ pub mod grid;
 pub mod image;
 pub mod position;
 pub mod rect;
+pub mod size;
 pub mod svg;
 pub mod text;
 pub mod transform;
diff --git a/components/style/values/generics/rect.rs b/components/style/values/generics/rect.rs
index 5d45a9acfbe..4577a6c33a1 100644
--- a/components/style/values/generics/rect.rs
+++ b/components/style/values/generics/rect.rs
@@ -27,6 +27,11 @@ impl<T> Rect<T> {
 impl<T> Rect<T>
     where T: Clone
 {
+    /// Returns a rect with all the values equal to `v`.
+    pub fn all(v: T) -> Self {
+        Rect::new(v.clone(), v.clone(), v.clone(), v)
+    }
+
     /// Parses a new `Rect<T>` value with the given parse function.
     pub fn parse_with<'i, 't, Parse>(
         context: &ParserContext,
@@ -53,15 +58,6 @@ impl<T> Rect<T>
     }
 }
 
-impl<T> From<T> for Rect<T>
-    where T: Clone
-{
-    #[inline]
-    fn from(value: T) -> Self {
-        Self::new(value.clone(), value.clone(), value.clone(), value)
-    }
-}
-
 impl<T> Parse for Rect<T>
     where T: Clone + Parse
 {
diff --git a/components/style/values/generics/size.rs b/components/style/values/generics/size.rs
new file mode 100644
index 00000000000..e28db54afab
--- /dev/null
+++ b/components/style/values/generics/size.rs
@@ -0,0 +1,103 @@
+/* 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 type for CSS properties that are composed by two dimensions.
+
+use cssparser::Parser;
+use euclid::Size2D;
+use parser::ParserContext;
+use std::fmt;
+use style_traits::{ToCss, ParseError};
+use values::animated::ToAnimatedValue;
+
+/// A generic size, for `border-*-radius` longhand properties, or
+/// `border-spacing`.
+#[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+#[derive(Animate, Clone, ComputeSquaredDistance, Copy, Debug)]
+#[derive(PartialEq, ToComputedValue)]
+pub struct Size<L>(pub Size2D<L>);
+
+impl<L> Size<L> {
+    #[inline]
+    /// Create a new `Size` for an area of given width and height.
+    pub fn new(width: L, height: L) -> Size<L> {
+        Size(Size2D::new(width, height))
+    }
+
+    /// Returns the width component.
+    pub fn width(&self) -> &L {
+        &self.0.width
+    }
+
+    /// Returns the height component.
+    pub fn height(&self) -> &L {
+        &self.0.height
+    }
+
+    /// Parse a `Size` with a given parsing function.
+    pub fn parse_with<'i, 't, F>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+        parse_one: F,
+    ) -> Result<Self, ParseError<'i>>
+    where
+        L: Clone,
+        F: Fn(&ParserContext, &mut Parser<'i, 't>) -> Result<L, ParseError<'i>>
+    {
+        let first = parse_one(context, input)?;
+        let second = input
+            .try(|i| parse_one(context, i))
+            .unwrap_or_else(|_| first.clone());
+        Ok(Self::new(first, second))
+    }
+}
+
+impl<L: Clone> From<L> for Size<L> {
+    fn from(size: L) -> Self {
+        Self::new(size.clone(), size)
+    }
+}
+
+impl<L> ToCss for Size<L>
+where L:
+    ToCss + PartialEq,
+{
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    where W:
+        fmt::Write
+    {
+        self.0.width.to_css(dest)?;
+
+        if self.0.height != self.0.width {
+            dest.write_str(" ")?;
+            self.0.height.to_css(dest)?;
+        }
+
+        Ok(())
+    }
+}
+
+impl<L> ToAnimatedValue for Size<L>
+where L:
+    ToAnimatedValue,
+{
+    type AnimatedValue = Size<L::AnimatedValue>;
+
+    #[inline]
+    fn to_animated_value(self) -> Self::AnimatedValue {
+        Size(Size2D::new(
+            self.0.width.to_animated_value(),
+            self.0.height.to_animated_value(),
+        ))
+    }
+
+    #[inline]
+    fn from_animated_value(animated: Self::AnimatedValue) -> Self {
+        Size(Size2D::new(
+            L::from_animated_value(animated.0.width),
+            L::from_animated_value(animated.0.height),
+        ))
+    }
+}
diff --git a/components/style/values/specified/background.rs b/components/style/values/specified/background.rs
index 88a5f3152c7..c358feefaec 100644
--- a/components/style/values/specified/background.rs
+++ b/components/style/values/specified/background.rs
@@ -20,7 +20,7 @@ impl Parse for BackgroundSize {
             let height = input
                 .try(|i| LengthOrPercentageOrAuto::parse_non_negative(context, i))
                 .unwrap_or(LengthOrPercentageOrAuto::Auto);
-            return Ok(GenericBackgroundSize::Explicit { width: width, height: height });
+            return Ok(GenericBackgroundSize::Explicit { width, height });
         }
         let ident = input.expect_ident()?;
         (match_ignore_ascii_case! { &ident,
@@ -30,3 +30,13 @@ impl Parse for BackgroundSize {
         }).map_err(|()| SelectorParseError::UnexpectedIdent(ident.clone()).into())
     }
 }
+
+impl BackgroundSize {
+    /// Returns `auto auto`.
+    pub fn auto() -> Self {
+        GenericBackgroundSize::Explicit {
+            width: LengthOrPercentageOrAuto::Auto,
+            height: LengthOrPercentageOrAuto::Auto,
+        }
+    }
+}
diff --git a/components/style/values/specified/border.rs b/components/style/values/specified/border.rs
index 918f822dc41..aef0b0b2854 100644
--- a/components/style/values/specified/border.rs
+++ b/components/style/values/specified/border.rs
@@ -7,14 +7,16 @@
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
 use style_traits::ParseError;
-use values::computed::{Context, NonNegativeLength, ToComputedValue};
+use values::computed::{self, Context, ToComputedValue};
 use values::generics::border::BorderCornerRadius as GenericBorderCornerRadius;
 use values::generics::border::BorderImageSideWidth as GenericBorderImageSideWidth;
 use values::generics::border::BorderImageSlice as GenericBorderImageSlice;
 use values::generics::border::BorderRadius as GenericBorderRadius;
+use values::generics::border::BorderSpacing as GenericBorderSpacing;
 use values::generics::rect::Rect;
+use values::generics::size::Size;
 use values::specified::{AllowQuirks, Number, NumberOrPercentage};
-use values::specified::length::{Length, LengthOrPercentage};
+use values::specified::length::{Length, LengthOrPercentage, NonNegativeLength};
 
 /// A specified value for a single side of the `border-width` property.
 #[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
@@ -46,6 +48,9 @@ pub type BorderRadius = GenericBorderRadius<LengthOrPercentage>;
 /// A specified value for the `border-*-radius` longhand properties.
 pub type BorderCornerRadius = GenericBorderCornerRadius<LengthOrPercentage>;
 
+/// A specified value for the `border-spacing` longhand properties.
+pub type BorderSpacing = GenericBorderSpacing<NonNegativeLength>;
+
 impl BorderSideWidth {
     /// Parses, with quirks.
     pub fn parse_quirky<'i, 't>(
@@ -72,7 +77,7 @@ impl Parse for BorderSideWidth {
 }
 
 impl ToComputedValue for BorderSideWidth {
-    type ComputedValue = NonNegativeLength;
+    type ComputedValue = computed::NonNegativeLength;
 
     #[inline]
     fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
@@ -149,11 +154,22 @@ impl Parse for BorderRadius {
 }
 
 impl Parse for BorderCornerRadius {
-    fn parse<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i>> {
-        let first = LengthOrPercentage::parse_non_negative(context, input)?;
-        let second = input
-            .try(|i| LengthOrPercentage::parse_non_negative(context, i))
-            .unwrap_or_else(|_| first.clone());
-        Ok(Self::new(first, second))
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>
+    ) -> Result<Self, ParseError<'i>> {
+        Size::parse_with(context, input, LengthOrPercentage::parse_non_negative)
+            .map(GenericBorderCornerRadius)
+    }
+}
+
+impl Parse for BorderSpacing {
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>
+    ) -> Result<Self, ParseError<'i>> {
+        Size::parse_with(context, input, |context, input| {
+            Length::parse_non_negative_quirky(context, input, AllowQuirks::Yes).map(From::from)
+        }).map(GenericBorderSpacing)
     }
 }
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index 7dd63970567..0e606920c87 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -29,7 +29,7 @@ pub use self::angle::Angle;
 pub use self::align::{AlignItems, AlignJustifyContent, AlignJustifySelf, JustifyItems};
 pub use self::background::BackgroundSize;
 pub use self::border::{BorderCornerRadius, BorderImageSlice, BorderImageWidth};
-pub use self::border::{BorderImageSideWidth, BorderRadius, BorderSideWidth};
+pub use self::border::{BorderImageSideWidth, BorderRadius, BorderSideWidth, BorderSpacing};
 pub use self::box_::VerticalAlign;
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};
 pub use self::effects::{BoxShadow, Filter, SimpleShadow};
diff --git a/ports/geckolib/glue.rs b/ports/geckolib/glue.rs
index 5302934d20c..049f7496df6 100644
--- a/ports/geckolib/glue.rs
+++ b/ports/geckolib/glue.rs
@@ -139,7 +139,7 @@ use style::traversal::resolve_style;
 use style::traversal_flags::{TraversalFlags, self};
 use style::values::{CustomIdent, KeyframesName};
 use style::values::animated::{Animate, Procedure, ToAnimatedZero};
-use style::values::computed::Context;
+use style::values::computed::{Context, ToComputedValue};
 use style::values::distance::ComputeSquaredDistance;
 use style_traits::{PARSING_MODE_DEFAULT, ToCss};
 use super::error_reporter::ErrorReporter;
@@ -2636,7 +2636,9 @@ pub extern "C" fn Servo_DeclarationBlock_SetKeywordValue(declarations:
             // We rely on Gecko passing in font-size values (0...7) here.
             longhands::font_size::SpecifiedValue::from_html_size(value as u8)
         },
-        FontStyle => longhands::font_style::computed_value::T::from_gecko_keyword(value).into(),
+        FontStyle => {
+            ToComputedValue::from_computed_value(&longhands::font_style::computed_value::T::from_gecko_keyword(value))
+        },
         FontWeight => longhands::font_weight::SpecifiedValue::from_gecko_keyword(value),
         ListStyleType => Box::new(longhands::list_style_type::SpecifiedValue::from_gecko_keyword(value)),
         MozMathVariant => longhands::_moz_math_variant::SpecifiedValue::from_gecko_keyword(value),
@@ -2680,9 +2682,8 @@ pub extern "C" fn Servo_DeclarationBlock_SetPixelValue(declarations:
     use style::properties::longhands::border_spacing::SpecifiedValue as BorderSpacing;
     use style::properties::longhands::height::SpecifiedValue as Height;
     use style::properties::longhands::width::SpecifiedValue as Width;
-    use style::values::specified::BorderSideWidth;
-    use style::values::specified::MozLength;
-    use style::values::specified::length::{NoCalcLength, LengthOrPercentage};
+    use style::values::specified::{BorderSideWidth, MozLength, BorderCornerRadius};
+    use style::values::specified::length::{NoCalcLength, NonNegativeLength, LengthOrPercentage};
 
     let long = get_longhand_from_id!(property);
     let nocalc = NoCalcLength::from_px(value);
@@ -2702,16 +2703,26 @@ pub extern "C" fn Servo_DeclarationBlock_SetPixelValue(declarations:
         PaddingRight => nocalc.into(),
         PaddingBottom => nocalc.into(),
         PaddingLeft => nocalc.into(),
-        BorderSpacing => Box::new(
-            BorderSpacing {
-                horizontal: nocalc.into(),
-                vertical: None,
-            }
-        ),
-        BorderTopLeftRadius => Box::new(LengthOrPercentage::from(nocalc).into()),
-        BorderTopRightRadius => Box::new(LengthOrPercentage::from(nocalc).into()),
-        BorderBottomLeftRadius => Box::new(LengthOrPercentage::from(nocalc).into()),
-        BorderBottomRightRadius => Box::new(LengthOrPercentage::from(nocalc).into()),
+        BorderSpacing => {
+            let v = NonNegativeLength::from(nocalc);
+            Box::new(BorderSpacing::new(v.clone(), v))
+        },
+        BorderTopLeftRadius => {
+            let length = LengthOrPercentage::from(nocalc);
+            Box::new(BorderCornerRadius::new(length.clone(), length))
+        },
+        BorderTopRightRadius => {
+            let length = LengthOrPercentage::from(nocalc);
+            Box::new(BorderCornerRadius::new(length.clone(), length))
+        },
+        BorderBottomLeftRadius => {
+            let length = LengthOrPercentage::from(nocalc);
+            Box::new(BorderCornerRadius::new(length.clone(), length))
+        },
+        BorderBottomRightRadius => {
+            let length = LengthOrPercentage::from(nocalc);
+            Box::new(BorderCornerRadius::new(length.clone(), length))
+        },
     };
     write_locked_arc(declarations, |decls: &mut PropertyDeclarationBlock| {
         decls.push(prop, Importance::Normal);
diff --git a/tests/unit/style/parsing/border.rs b/tests/unit/style/parsing/border.rs
index 9c2790cc886..e92b59dd2fb 100644
--- a/tests/unit/style/parsing/border.rs
+++ b/tests/unit/style/parsing/border.rs
@@ -29,14 +29,14 @@ macro_rules! assert_border_radius_values {
         let input = parse(BorderRadius::parse, $input)
                           .expect(&format!("Failed parsing {} as border radius",
                                   $input));
-        assert_eq!(::style_traits::ToCss::to_css_string(&input.top_left.0.width), $tlw);
-        assert_eq!(::style_traits::ToCss::to_css_string(&input.top_right.0.width), $trw);
-        assert_eq!(::style_traits::ToCss::to_css_string(&input.bottom_right.0.width), $brw);
-        assert_eq!(::style_traits::ToCss::to_css_string(&input.bottom_left.0.width), $blw);
-        assert_eq!(::style_traits::ToCss::to_css_string(&input.top_left.0.height), $tlh);
-        assert_eq!(::style_traits::ToCss::to_css_string(&input.top_right.0.height), $trh);
-        assert_eq!(::style_traits::ToCss::to_css_string(&input.bottom_right.0.height), $brh);
-        assert_eq!(::style_traits::ToCss::to_css_string(&input.bottom_left.0.height), $blh);
+        assert_eq!(::style_traits::ToCss::to_css_string(&input.top_left.0.width()), $tlw);
+        assert_eq!(::style_traits::ToCss::to_css_string(&input.top_right.0.width()), $trw);
+        assert_eq!(::style_traits::ToCss::to_css_string(&input.bottom_right.0.width()), $brw);
+        assert_eq!(::style_traits::ToCss::to_css_string(&input.bottom_left.0.width()), $blw);
+        assert_eq!(::style_traits::ToCss::to_css_string(&input.top_left.0.height()), $tlh);
+        assert_eq!(::style_traits::ToCss::to_css_string(&input.top_right.0.height()), $trh);
+        assert_eq!(::style_traits::ToCss::to_css_string(&input.bottom_right.0.height()), $brh);
+        assert_eq!(::style_traits::ToCss::to_css_string(&input.bottom_left.0.height()), $blh);
     }
 }
 
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index a451a31a9c2..7c4260ca22f 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -27301,7 +27301,7 @@
    "testharness"
   ],
   "mozilla/calc.html": [
-   "4f65929cacf623da2d3e310a6663d6165a1b0cdc",
+   "2b6f029f2393830ea8dce5f26a5c9caaae65944f",
    "testharness"
   ],
   "mozilla/canvas.initial.reset.2dstate.html": [
diff --git a/tests/wpt/mozilla/tests/mozilla/calc.html b/tests/wpt/mozilla/tests/mozilla/calc.html
index 6f2a77a1d4f..2408f196c00 100644
--- a/tests/wpt/mozilla/tests/mozilla/calc.html
+++ b/tests/wpt/mozilla/tests/mozilla/calc.html
@@ -146,10 +146,10 @@ var otherProperties = [
   ['perspective-origin', 'calc(1px + 0%)', 'calc(0% + 1px) center'],
   ['background-size', 'calc(1px + 0%)', 'calc(0% + 1px) auto'],
   ['background-position', 'calc(1px + 0%) calc(2px + 0%)', 'calc(0% + 1px) calc(0% + 2px)'],
-  ['border-top-left-radius', 'calc(1px + 0%)', 'calc(0% + 1px) calc(0% + 1px)'],
-  ['border-bottom-left-radius', 'calc(1px + 0%)', 'calc(0% + 1px) calc(0% + 1px)'],
-  ['border-top-right-radius', 'calc(1px + 0%)', 'calc(0% + 1px) calc(0% + 1px)'],
-  ['border-bottom-right-radius', 'calc(1px + 0%)', 'calc(0% + 1px) calc(0% + 1px)'],
+  ['border-top-left-radius', 'calc(1px + 0%)', 'calc(0% + 1px)'],
+  ['border-bottom-left-radius', 'calc(1px + 0%)', 'calc(0% + 1px)'],
+  ['border-top-right-radius', 'calc(1px + 0%)', 'calc(0% + 1px)'],
+  ['border-bottom-right-radius', 'calc(1px + 0%)', 'calc(0% + 1px)'],
   ['counter-increment', 'foo calc(1 + 1)', 'foo calc(2)'],
 ];