Auto merge of #12680 - Manishearth:basic-shape, r=SimonSapin

style: Add support for parsing and serialization of <basic-shape>s

Still WIP: I still need to use this somewhere and make serialization minimal. I'm not sure if I should do either in this PR.
The only other browser that handles basic shapes doesn't serialize correctly either (https://bugzilla.mozilla.org/show_bug.cgi?id=1290864), so that's not something we need to get done now.

As far as using this somewhere, I have the following options:

 - Merge this now, work on using it in stylo in a followup.
 - Just write extensive unit tests for parsing/serialization for now (stylo in a followup)
 - Use this for clip-path in stylo only (which I intend to do anyway, just not sure if I should do it in this PR)
 - Use this for clip-path in Servo (I'd rather not do this; this would be a huge change requiring a lot more layout knowledge than I currently have)

Thoughts? Review? @SimonSapin @bholley

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

16 files changed, 1188 insertions, 181 deletions

diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
index 58ff6d23e44..229f826b4e3 100644
--- a/components/layout/display_list_builder.rs
+++ b/components/layout/display_list_builder.rs
@@ -520,9 +520,9 @@ impl FragmentDisplayListBuilding for Fragment {
             };
 
             // Use `background-position` to get the offset.
-            let horizontal_position = model::specified(background.background_position.horizontal,
+            let horizontal_position = model::specified(background.background_position.0.horizontal,
                                                        bounds.size.width - image_size.width);
-            let vertical_position = model::specified(background.background_position.vertical,
+            let vertical_position = model::specified(background.background_position.0.vertical,
                                                      bounds.size.height - image_size.height);
 
             let abs_x = border.left + virtual_origin_x + horizontal_position + origin_x;
diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 8fd16e33c07..f1451c3190b 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -1042,17 +1042,18 @@ fn static_assert() {
     }
 
     pub fn clone_background_position(&self) -> longhands::background_position::computed_value::T {
+        use values::computed::position::Position;
         let position = &self.gecko.mImage.mLayers.mFirstElement.mPosition;
-        longhands::background_position::computed_value::T {
+        longhands::background_position::computed_value::T(Position {
             horizontal: position.mXPosition.into(),
             vertical: position.mYPosition.into(),
-        }
+        })
     }
 
     pub fn set_background_position(&mut self, v: longhands::background_position::computed_value::T) {
         let position = &mut self.gecko.mImage.mLayers.mFirstElement.mPosition;
-        position.mXPosition = v.horizontal.into();
-        position.mYPosition = v.vertical.into();
+        position.mXPosition = v.0.horizontal.into();
+        position.mYPosition = v.0.vertical.into();
         self.gecko.mImage.mPositionXCount = 1;
         self.gecko.mImage.mPositionYCount = 1;
     }
diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index 10bac440f30..c9a3ab8cb64 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -30,6 +30,7 @@ use super::ComputedValues;
 use values::computed::{Angle, LengthOrPercentageOrAuto, LengthOrPercentageOrNone};
 use values::computed::{BorderRadiusSize, LengthOrNone};
 use values::computed::{CalcLengthOrPercentage, LengthOrPercentage};
+use values::computed::position::Position;
 
 // NB: This needs to be here because it needs all the longhands generated
 // beforehand.
@@ -469,16 +470,23 @@ impl Interpolate for ClipRect {
 }
 
 /// https://drafts.csswg.org/css-transitions/#animtype-simple-list
-impl Interpolate for BackgroundPosition {
+impl Interpolate for Position {
     #[inline]
     fn interpolate(&self, other: &Self, time: f64) -> Result<Self, ()> {
-        Ok(BackgroundPosition {
+        Ok(Position {
             horizontal: try!(self.horizontal.interpolate(&other.horizontal, time)),
             vertical: try!(self.vertical.interpolate(&other.vertical, time)),
         })
     }
 }
 
+impl Interpolate for BackgroundPosition {
+    #[inline]
+    fn interpolate(&self, other: &Self, time: f64) -> Result<Self, ()> {
+        Ok(BackgroundPosition(try!(self.0.interpolate(&other.0, time))))
+    }
+}
+
 impl Interpolate for BackgroundSize {
     fn interpolate(&self, other: &Self, time: f64) -> Result<Self, ()> {
         use properties::longhands::background_size::computed_value::ExplicitSize;
diff --git a/components/style/properties/longhand/background.mako.rs b/components/style/properties/longhand/background.mako.rs
index 501a98fd7fa..1a0f2aaeffe 100644
--- a/components/style/properties/longhand/background.mako.rs
+++ b/components/style/properties/longhand/background.mako.rs
@@ -80,91 +80,35 @@ ${helpers.predefined_type("background-color", "CSSColor",
         use std::fmt;
         use values::LocalToCss;
         use values::HasViewportPercentage;
+        use values::specified::position::Position;
 
         pub mod computed_value {
-            use values::computed::LengthOrPercentage;
+            use values::computed::position::Position;
 
             #[derive(PartialEq, Copy, Clone, Debug)]
             #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
-            pub struct T {
-                pub horizontal: LengthOrPercentage,
-                pub vertical: LengthOrPercentage,
-            }
+            pub struct T(pub Position);
         }
 
         impl HasViewportPercentage for SpecifiedValue {
             fn has_viewport_percentage(&self) -> bool {
-                return self.horizontal.has_viewport_percentage() || self.vertical.has_viewport_percentage();
+                self.0.has_viewport_percentage()
             }
         }
 
         #[derive(Debug, Clone, PartialEq, Copy)]
         #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
-        pub struct SpecifiedValue {
-            pub horizontal: specified::LengthOrPercentage,
-            pub vertical: specified::LengthOrPercentage,
-        }
+        pub struct SpecifiedValue(pub Position);
 
         impl ToCss for SpecifiedValue {
             fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-                try!(self.horizontal.to_css(dest));
-                try!(dest.write_str(" "));
-                try!(self.vertical.to_css(dest));
-                Ok(())
+                self.0.to_css(dest)
             }
         }
 
         impl ToCss for computed_value::T {
             fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-                try!(self.horizontal.to_css(dest));
-                try!(dest.write_str(" "));
-                try!(self.vertical.to_css(dest));
-                Ok(())
-            }
-        }
-
-        impl SpecifiedValue {
-            fn new(first: specified::PositionComponent, second: specified::PositionComponent)
-                    -> Result<SpecifiedValue, ()> {
-                let (horiz, vert) = match (category(first), category(second)) {
-                    // Don't allow two vertical keywords or two horizontal keywords.
-                    (PositionCategory::HorizontalKeyword, PositionCategory::HorizontalKeyword) |
-                    (PositionCategory::VerticalKeyword, PositionCategory::VerticalKeyword) => return Err(()),
-
-                    // Swap if both are keywords and vertical precedes horizontal.
-                    (PositionCategory::VerticalKeyword, PositionCategory::HorizontalKeyword) |
-                    (PositionCategory::VerticalKeyword, PositionCategory::OtherKeyword) |
-                    (PositionCategory::OtherKeyword, PositionCategory::HorizontalKeyword) => (second, first),
-
-                    // By default, horizontal is first.
-                    _ => (first, second),
-                };
-                Ok(SpecifiedValue {
-                    horizontal: horiz.to_length_or_percentage(),
-                    vertical: vert.to_length_or_percentage(),
-                })
-            }
-        }
-
-        // Collapse `Position` into a few categories to simplify the above `match` expression.
-        enum PositionCategory {
-            HorizontalKeyword,
-            VerticalKeyword,
-            OtherKeyword,
-            LengthOrPercentage,
-        }
-        fn category(p: specified::PositionComponent) -> PositionCategory {
-            match p {
-                specified::PositionComponent::Left |
-                specified::PositionComponent::Right =>
-                    PositionCategory::HorizontalKeyword,
-                specified::PositionComponent::Top |
-                specified::PositionComponent::Bottom =>
-                    PositionCategory::VerticalKeyword,
-                specified::PositionComponent::Center =>
-                    PositionCategory::OtherKeyword,
-                specified::PositionComponent::LengthOrPercentage(_) =>
-                    PositionCategory::LengthOrPercentage,
+                self.0.to_css(dest)
             }
         }
 
@@ -173,27 +117,22 @@ ${helpers.predefined_type("background-color", "CSSColor",
 
             #[inline]
             fn to_computed_value(&self, context: &Context) -> computed_value::T {
-                computed_value::T {
-                    horizontal: self.horizontal.to_computed_value(context),
-                    vertical: self.vertical.to_computed_value(context),
-                }
+                computed_value::T(self.0.to_computed_value(context))
             }
         }
 
         #[inline]
         pub fn get_initial_value() -> computed_value::T {
-            computed_value::T {
+            use values::computed::position::Position;
+            computed_value::T(Position {
                 horizontal: computed::LengthOrPercentage::Percentage(0.0),
                 vertical: computed::LengthOrPercentage::Percentage(0.0),
-            }
+            })
         }
 
         pub fn parse(_context: &ParserContext, input: &mut Parser)
                      -> Result<SpecifiedValue, ()> {
-            let first = try!(specified::PositionComponent::parse(input));
-            let second = input.try(specified::PositionComponent::parse)
-                .unwrap_or(specified::PositionComponent::Center);
-            SpecifiedValue::new(first, second)
+            Ok(SpecifiedValue(try!(Position::parse(input))))
         }
 </%helpers:longhand>
 
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index 83ad6b73d82..1680f30fdd9 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -73,11 +73,12 @@ pub mod longhands {
 }
 
 pub mod shorthands {
-    use cssparser::Parser;
+    use cssparser::{Parser, ToCss};
+    use std::fmt;
     use parser::ParserContext;
     use values::specified;
 
-    fn parse_four_sides<F, T>(input: &mut Parser, parse_one: F) -> Result<(T, T, T, T), ()>
+    pub fn parse_four_sides<F, T>(input: &mut Parser, parse_one: F) -> Result<(T, T, T, T), ()>
     where F: Fn(&mut Parser) -> Result<T, ()>, F: Copy, T: Clone {
         // zero or more than four values is invalid.
         // one value sets them all
@@ -120,6 +121,33 @@ pub mod shorthands {
         Ok((top, right, bottom, left))
     }
 
+    /// Serialize a set of top,left,bottom,right values, in <margin>-shorthand style,
+    /// 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" />
diff --git a/components/style/properties/shorthand/border.mako.rs b/components/style/properties/shorthand/border.mako.rs
index f884708e76c..99565b87101 100644
--- a/components/style/properties/shorthand/border.mako.rs
+++ b/components/style/properties/shorthand/border.mako.rs
@@ -97,53 +97,15 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
     'border-%s-radius' % (corner)
      for corner in ['top-left', 'top-right', 'bottom-right', 'bottom-left']
 )}">
-    use app_units::Au;
-    use values::specified::{Length, LengthOrPercentage};
-    use values::specified::BorderRadiusSize;
+    use values::specified::basic_shape::BorderRadius;
 
     let _ignored = context;
 
-    fn parse_one_set_of_border_values(mut input: &mut Parser)
-                                     -> Result<[LengthOrPercentage; 4], ()> {
-        let mut count = 0;
-        let mut values = [LengthOrPercentage::Length(Length::Absolute(Au(0))); 4];
-        while count < 4 {
-            if let Ok(value) = input.try(LengthOrPercentage::parse) {
-                values[count] = value;
-                count += 1;
-            } else {
-                break
-            }
-        }
-
-        match count {
-            1 => Ok([values[0], values[0], values[0], values[0]]),
-            2 => Ok([values[0], values[1], values[0], values[1]]),
-            3 => Ok([values[0], values[1], values[2], values[1]]),
-            4 => Ok([values[0], values[1], values[2], values[3]]),
-            _ => Err(()),
-        }
-    }
-
-    fn parse_one_set_of_border_radii(mut input: &mut Parser)
-                                     -> Result<[BorderRadiusSize; 4], ()> {
-        let widths = try!(parse_one_set_of_border_values(input));
-        let mut heights = widths.clone();
-        let mut radii_values = [BorderRadiusSize::zero(); 4];
-        if input.try(|input| input.expect_delim('/')).is_ok() {
-            heights = try!(parse_one_set_of_border_values(input));
-        }
-        for i in 0..radii_values.len() {
-            radii_values[i] = BorderRadiusSize::new(widths[i], heights[i]);
-        }
-        Ok(radii_values)
-    }
-
-    let radii = try!(parse_one_set_of_border_radii(input));
+    let radii = try!(BorderRadius::parse(input));
     Ok(Longhands {
-        border_top_left_radius: Some(radii[0]),
-        border_top_right_radius: Some(radii[1]),
-        border_bottom_right_radius: Some(radii[2]),
-        border_bottom_left_radius: Some(radii[3]),
+        border_top_left_radius: Some(radii.top_left),
+        border_top_right_radius: Some(radii.top_right),
+        border_bottom_right_radius: Some(radii.bottom_right),
+        border_bottom_left_radius: Some(radii.bottom_left),
     })
 </%helpers:shorthand>
diff --git a/components/style/values/computed/basic_shape.rs b/components/style/values/computed/basic_shape.rs
new file mode 100644
index 00000000000..fe0a338db62
--- /dev/null
+++ b/components/style/values/computed/basic_shape.rs
@@ -0,0 +1,194 @@
+/* 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/. */
+
+//! CSS handling for the computed value of
+//! [`basic-shape`][basic-shape]s
+//!
+//! [basic-shape]: https://drafts.csswg.org/css-shapes/#typedef-basic-shape
+
+use cssparser::ToCss;
+use properties::shorthands::serialize_four_sides;
+use std::fmt;
+use values::computed::position::Position;
+use values::computed::{BorderRadiusSize, LengthOrPercentage};
+
+pub use values::specified::basic_shape::FillRule;
+
+#[derive(Clone, PartialEq, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub enum BasicShape {
+    Inset(InsetRect),
+    Circle(Circle),
+    Ellipse(Ellipse),
+    Polygon(Polygon),
+}
+
+impl ToCss for BasicShape {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        match *self {
+            BasicShape::Inset(ref rect) => rect.to_css(dest),
+            BasicShape::Circle(ref circle) => circle.to_css(dest),
+            BasicShape::Ellipse(ref e) => e.to_css(dest),
+            BasicShape::Polygon(ref poly) => poly.to_css(dest),
+        }
+    }
+}
+
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub struct InsetRect {
+    pub top: LengthOrPercentage,
+    pub right: LengthOrPercentage,
+    pub bottom: LengthOrPercentage,
+    pub left: LengthOrPercentage,
+    pub round: Option<BorderRadius>,
+}
+
+impl ToCss for InsetRect {
+    // XXXManishearth again, we should try to reduce the number of values printed here
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(dest.write_str("inset("));
+        try!(self.top.to_css(dest));
+        try!(dest.write_str(" "));
+        try!(self.right.to_css(dest));
+        try!(dest.write_str(" "));
+        try!(self.bottom.to_css(dest));
+        try!(dest.write_str(" "));
+        try!(self.left.to_css(dest));
+        if let Some(ref radius) = self.round {
+            try!(dest.write_str(" round "));
+            try!(radius.to_css(dest));
+        }
+        dest.write_str(")")
+    }
+}
+
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub struct Circle {
+    pub radius: ShapeRadius,
+    pub position: Position,
+}
+
+impl ToCss for Circle {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(self.radius.to_css(dest));
+        try!(dest.write_str(" at "));
+        self.position.to_css(dest)
+    }
+}
+
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub struct Ellipse {
+    pub semiaxis_x: ShapeRadius,
+    pub semiaxis_y: ShapeRadius,
+    pub position: Position,
+}
+
+impl ToCss for Ellipse {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(dest.write_str("ellipse("));
+        if (self.semiaxis_x, self.semiaxis_y) != Default::default() {
+            try!(self.semiaxis_x.to_css(dest));
+            try!(dest.write_str(" "));
+            try!(self.semiaxis_y.to_css(dest));
+            try!(dest.write_str(" "));
+        }
+        try!(dest.write_str("at "));
+        try!(self.position.to_css(dest));
+        dest.write_str(")")
+    }
+}
+
+#[derive(Clone, PartialEq, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+/// https://drafts.csswg.org/css-shapes/#funcdef-polygon
+pub struct Polygon {
+    pub fill: FillRule,
+    pub coordinates: Vec<(LengthOrPercentage, LengthOrPercentage)>,
+}
+
+impl ToCss for Polygon {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(dest.write_str("polygon("));
+        let mut need_space = false;
+        if self.fill != Default::default() {
+            try!(self.fill.to_css(dest));
+            try!(dest.write_str(", "));
+        }
+        for coord in &self.coordinates {
+            if need_space {
+                try!(dest.write_str(", "));
+            }
+            try!(coord.0.to_css(dest));
+            try!(dest.write_str(" "));
+            try!(coord.1.to_css(dest));
+            need_space = true;
+        }
+        dest.write_str(")")
+    }
+}
+
+/// https://drafts.csswg.org/css-shapes/#typedef-shape-radius
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub enum ShapeRadius {
+    Length(LengthOrPercentage),
+    ClosestSide,
+    FarthestSide,
+}
+
+impl Default for ShapeRadius {
+    fn default() -> Self {
+        ShapeRadius::ClosestSide
+    }
+}
+
+impl ToCss for ShapeRadius {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        match *self {
+            ShapeRadius::Length(lop) => lop.to_css(dest),
+            ShapeRadius::ClosestSide => dest.write_str("closest-side"),
+            ShapeRadius::FarthestSide => dest.write_str("farthest-side"),
+        }
+    }
+}
+
+/// https://drafts.csswg.org/css-backgrounds-3/#border-radius
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub struct BorderRadius {
+    pub top_left: BorderRadiusSize,
+    pub top_right: BorderRadiusSize,
+    pub bottom_right: BorderRadiusSize,
+    pub bottom_left: BorderRadiusSize,
+}
+
+impl ToCss for BorderRadius {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        if self.top_left.0.width == self.top_left.0.height &&
+           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,
+                                  &self.top_right.0.width,
+                                  &self.bottom_right.0.width,
+                                  &self.bottom_left.0.width),
+                                  dest)
+        } else {
+            try!(serialize_four_sides((&self.top_left.0.width,
+                                       &self.top_right.0.width,
+                                       &self.bottom_right.0.width,
+                                       &self.bottom_left.0.width),
+                                       dest));
+            try!(dest.write_str(" / "));
+            serialize_four_sides((&self.top_left.0.height,
+                                  &self.top_right.0.height,
+                                  &self.bottom_right.0.height,
+                                  &self.bottom_left.0.height),
+                                  dest)
+        }
+    }
+}
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index cefe1c7d6ac..49b3f2e7285 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -13,6 +13,9 @@ use url::Url;
 pub use cssparser::Color as CSSColor;
 pub use super::specified::{Angle, BorderStyle, Time, UrlExtraData};
 
+pub mod basic_shape;
+pub mod position;
+
 pub struct Context<'a> {
     pub is_root_element: bool,
     pub viewport_size: Size2D<Au>,
diff --git a/components/style/values/computed/position.rs b/components/style/values/computed/position.rs
new file mode 100644
index 00000000000..635b03944b8
--- /dev/null
+++ b/components/style/values/computed/position.rs
@@ -0,0 +1,28 @@
+/* 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/. */
+
+//! CSS handling for the computed value of
+//! [`position`][position]s
+//!
+//! [position]: https://drafts.csswg.org/css-backgrounds-3/#position
+
+use cssparser::ToCss;
+use std::fmt;
+use values::computed::LengthOrPercentage;
+
+#[derive(Debug, Clone, PartialEq, Copy)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub struct Position {
+    pub horizontal: LengthOrPercentage,
+    pub vertical: LengthOrPercentage,
+}
+
+impl ToCss for Position {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(self.horizontal.to_css(dest));
+        try!(dest.write_str(" "));
+        try!(self.vertical.to_css(dest));
+        Ok(())
+    }
+}
diff --git a/components/style/values/specified/basic_shape.rs b/components/style/values/specified/basic_shape.rs
new file mode 100644
index 00000000000..a8193116b75
--- /dev/null
+++ b/components/style/values/specified/basic_shape.rs
@@ -0,0 +1,531 @@
+/* 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/. */
+
+//! CSS handling for the specified value of
+//! [`basic-shape`][basic-shape]s
+//!
+//! [basic-shape]: https://drafts.csswg.org/css-shapes/#typedef-basic-shape
+
+use app_units::Au;
+use cssparser::{Parser, ToCss};
+use properties::shorthands::{parse_four_sides, serialize_four_sides};
+use std::fmt;
+use values::computed::basic_shape as computed_basic_shape;
+use values::computed::{Context, ToComputedValue, ComputedValueAsSpecified};
+use values::specified::position::{Position, PositionComponent};
+use values::specified::{BorderRadiusSize, Length, LengthOrPercentage, Percentage};
+
+#[derive(Clone, PartialEq, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub enum BasicShape {
+    Inset(InsetRect),
+    Circle(Circle),
+    Ellipse(Ellipse),
+    Polygon(Polygon),
+}
+
+impl BasicShape {
+    pub fn parse(input: &mut Parser) -> Result<BasicShape, ()> {
+        match_ignore_ascii_case! { try!(input.expect_function()),
+            "inset" => {
+                Ok(BasicShape::Inset(
+                   try!(input.parse_nested_block(InsetRect::parse_function_arguments))))
+            },
+            "circle" => {
+                Ok(BasicShape::Circle(
+                   try!(input.parse_nested_block(Circle::parse_function_arguments))))
+            },
+            "ellipse" => {
+                Ok(BasicShape::Ellipse(
+                   try!(input.parse_nested_block(Ellipse::parse_function_arguments))))
+            },
+            "polygon" => {
+                Ok(BasicShape::Polygon(
+                   try!(input.parse_nested_block(Polygon::parse_function_arguments))))
+            },
+            _ => Err(())
+        }
+    }
+}
+
+impl ToCss for BasicShape {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        match *self {
+            BasicShape::Inset(rect) => rect.to_css(dest),
+            BasicShape::Circle(circle) => circle.to_css(dest),
+            BasicShape::Ellipse(e) => e.to_css(dest),
+            BasicShape::Polygon(ref poly) => poly.to_css(dest),
+        }
+    }
+}
+
+impl ToComputedValue for BasicShape {
+    type ComputedValue = computed_basic_shape::BasicShape;
+
+    #[inline]
+    fn to_computed_value(&self, cx: &Context) -> Self::ComputedValue {
+        match *self {
+            BasicShape::Inset(rect) => computed_basic_shape::BasicShape::Inset(rect.to_computed_value(cx)),
+            BasicShape::Circle(circle) => computed_basic_shape::BasicShape::Circle(circle.to_computed_value(cx)),
+            BasicShape::Ellipse(e) => computed_basic_shape::BasicShape::Ellipse(e.to_computed_value(cx)),
+            BasicShape::Polygon(ref poly) => computed_basic_shape::BasicShape::Polygon(poly.to_computed_value(cx)),
+        }
+    }
+}
+
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+/// https://drafts.csswg.org/css-shapes/#funcdef-inset
+pub struct InsetRect {
+    pub top: LengthOrPercentage,
+    pub right: LengthOrPercentage,
+    pub bottom: LengthOrPercentage,
+    pub left: LengthOrPercentage,
+    pub round: Option<BorderRadius>,
+}
+
+impl InsetRect {
+    pub fn parse(input: &mut Parser) -> Result<InsetRect, ()> {
+        match_ignore_ascii_case! { try!(input.expect_function()),
+            "inset" => {
+                Ok(try!(input.parse_nested_block(InsetRect::parse_function_arguments)))
+            },
+            _ => Err(())
+        }
+    }
+    pub fn parse_function_arguments(input: &mut Parser) -> Result<InsetRect, ()> {
+        let (t, r, b, l) = try!(parse_four_sides(input, LengthOrPercentage::parse));
+        let mut rect = InsetRect {
+            top: t,
+            right: r,
+            bottom: b,
+            left: l,
+            round: None,
+        };
+        if let Ok(_) = input.try(|input| input.expect_ident_matching("round")) {
+            rect.round = Some(try!(BorderRadius::parse(input)));
+        }
+        Ok(rect)
+    }
+}
+
+impl ToCss for InsetRect {
+    // XXXManishearth again, we should try to reduce the number of values printed here
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(dest.write_str("inset("));
+        try!(self.top.to_css(dest));
+        try!(dest.write_str(" "));
+        try!(self.right.to_css(dest));
+        try!(dest.write_str(" "));
+        try!(self.bottom.to_css(dest));
+        try!(dest.write_str(" "));
+        try!(self.left.to_css(dest));
+        if let Some(ref radius) = self.round {
+            try!(dest.write_str(" round "));
+            try!(radius.to_css(dest));
+        }
+        dest.write_str(")")
+    }
+}
+
+impl ToComputedValue for InsetRect {
+    type ComputedValue = computed_basic_shape::InsetRect;
+
+    #[inline]
+    fn to_computed_value(&self, cx: &Context) -> Self::ComputedValue {
+        computed_basic_shape::InsetRect {
+            top: self.top.to_computed_value(cx),
+            right: self.right.to_computed_value(cx),
+            bottom: self.bottom.to_computed_value(cx),
+            left: self.left.to_computed_value(cx),
+            round: self.round.map(|r| r.to_computed_value(cx)),
+        }
+    }
+}
+
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+/// https://drafts.csswg.org/css-shapes/#funcdef-circle
+pub struct Circle {
+    pub radius: ShapeRadius,
+    pub position: Position,
+}
+
+impl Circle {
+    pub fn parse(input: &mut Parser) -> Result<Circle, ()> {
+        match_ignore_ascii_case! { try!(input.expect_function()),
+            "circle" => {
+                Ok(try!(input.parse_nested_block(Circle::parse_function_arguments)))
+            },
+            _ => Err(())
+        }
+    }
+    pub fn parse_function_arguments(input: &mut Parser) -> Result<Circle, ()> {
+        let radius = input.try(ShapeRadius::parse).ok().unwrap_or_else(Default::default);
+        let position = if let Ok(_) = input.try(|input| input.expect_ident_matching("at")) {
+            try!(Position::parse(input))
+        } else {
+            // Defaults to origin
+            Position {
+                horizontal: LengthOrPercentage::Percentage(Percentage(0.5)),
+                vertical: LengthOrPercentage::Percentage(Percentage(0.5)),
+            }
+        };
+        Ok(Circle {
+            radius: radius,
+            position: position,
+        })
+    }
+}
+
+impl ToCss for Circle {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(dest.write_str("circle("));
+        if ShapeRadius::ClosestSide != self.radius {
+            try!(self.radius.to_css(dest));
+            try!(dest.write_str(" "));
+        }
+        try!(dest.write_str("at "));
+        try!(self.position.to_css(dest));
+        dest.write_str(")")
+    }
+}
+
+impl ToComputedValue for Circle {
+    type ComputedValue = computed_basic_shape::Circle;
+
+    #[inline]
+    fn to_computed_value(&self, cx: &Context) -> Self::ComputedValue {
+        computed_basic_shape::Circle {
+            radius: self.radius.to_computed_value(cx),
+            position: self.position.to_computed_value(cx),
+        }
+    }
+}
+
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+/// https://drafts.csswg.org/css-shapes/#funcdef-ellipse
+pub struct Ellipse {
+    pub semiaxis_x: ShapeRadius,
+    pub semiaxis_y: ShapeRadius,
+    pub position: Position,
+}
+
+
+impl Ellipse {
+    pub fn parse(input: &mut Parser) -> Result<Ellipse, ()> {
+        match_ignore_ascii_case! { try!(input.expect_function()),
+            "ellipse" => {
+                Ok(try!(input.parse_nested_block(Ellipse::parse_function_arguments)))
+            },
+            _ => Err(())
+        }
+    }
+    pub fn parse_function_arguments(input: &mut Parser) -> Result<Ellipse, ()> {
+        let (a, b) = input.try(|input| -> Result<_, ()> {
+            Ok((try!(ShapeRadius::parse(input)), try!(ShapeRadius::parse(input))))
+        }).ok().unwrap_or_default();
+        let position = if let Ok(_) = input.try(|input| input.expect_ident_matching("at")) {
+            try!(Position::parse(input))
+        } else {
+            // Defaults to origin
+            Position {
+                horizontal: LengthOrPercentage::Percentage(Percentage(0.5)),
+                vertical: LengthOrPercentage::Percentage(Percentage(0.5)),
+            }
+        };
+        Ok(Ellipse {
+            semiaxis_x: a,
+            semiaxis_y: b,
+            position: position,
+        })
+    }
+}
+
+impl ToCss for Ellipse {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(dest.write_str("ellipse("));
+        if (self.semiaxis_x, self.semiaxis_y) != Default::default() {
+            try!(self.semiaxis_x.to_css(dest));
+            try!(dest.write_str(" "));
+            try!(self.semiaxis_y.to_css(dest));
+            try!(dest.write_str(" "));
+        }
+        try!(dest.write_str("at "));
+        try!(self.position.to_css(dest));
+        dest.write_str(")")
+    }
+}
+
+impl ToComputedValue for Ellipse {
+    type ComputedValue = computed_basic_shape::Ellipse;
+
+    #[inline]
+    fn to_computed_value(&self, cx: &Context) -> Self::ComputedValue {
+        computed_basic_shape::Ellipse {
+            semiaxis_x: self.semiaxis_x.to_computed_value(cx),
+            semiaxis_y: self.semiaxis_y.to_computed_value(cx),
+            position: self.position.to_computed_value(cx),
+        }
+    }
+}
+
+
+#[derive(Clone, PartialEq, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+/// https://drafts.csswg.org/css-shapes/#funcdef-polygon
+pub struct Polygon {
+    pub fill: FillRule,
+    pub coordinates: Vec<(LengthOrPercentage, LengthOrPercentage)>,
+}
+
+impl Polygon {
+    pub fn parse(input: &mut Parser) -> Result<Polygon, ()> {
+        match_ignore_ascii_case! { try!(input.expect_function()),
+            "polygon" => {
+                Ok(try!(input.parse_nested_block(Polygon::parse_function_arguments)))
+            },
+            _ => Err(())
+        }
+    }
+    pub fn parse_function_arguments(input: &mut Parser) -> Result<Polygon, ()> {
+        let fill = input.try(|input| {
+            let fill = FillRule::parse(input);
+            // only eat the comma if there is something before it
+            try!(input.expect_comma());
+            fill
+        }).ok().unwrap_or_else(Default::default);
+        let buf = try!(input.parse_comma_separated(|input| {
+            Ok((try!(LengthOrPercentage::parse(input)),
+                try!(LengthOrPercentage::parse(input))))
+        }));
+        Ok(Polygon {
+            fill: fill,
+            coordinates: buf,
+        })
+    }
+}
+
+impl ToCss for Polygon {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(dest.write_str("polygon("));
+        let mut need_space = false;
+        if self.fill != Default::default() {
+            try!(self.fill.to_css(dest));
+            try!(dest.write_str(", "));
+        }
+        for coord in &self.coordinates {
+            if need_space {
+                try!(dest.write_str(", "));
+            }
+            try!(coord.0.to_css(dest));
+            try!(dest.write_str(" "));
+            try!(coord.1.to_css(dest));
+            need_space = true;
+        }
+        dest.write_str(")")
+    }
+}
+
+impl ToComputedValue for Polygon {
+    type ComputedValue = computed_basic_shape::Polygon;
+
+    #[inline]
+    fn to_computed_value(&self, cx: &Context) -> Self::ComputedValue {
+        computed_basic_shape::Polygon {
+            fill: self.fill.to_computed_value(cx),
+            coordinates: self.coordinates.iter()
+                                         .map(|c| {
+                                            (c.0.to_computed_value(cx),
+                                             c.1.to_computed_value(cx))
+                                         })
+                                         .collect(),
+        }
+    }
+}
+
+/// https://drafts.csswg.org/css-shapes/#typedef-shape-radius
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub enum ShapeRadius {
+    Length(LengthOrPercentage),
+    ClosestSide,
+    FarthestSide,
+}
+
+impl Default for ShapeRadius {
+    fn default() -> Self {
+        ShapeRadius::ClosestSide
+    }
+}
+
+impl ShapeRadius {
+    pub fn parse(input: &mut Parser) -> Result<ShapeRadius, ()> {
+        input.try(LengthOrPercentage::parse).map(ShapeRadius::Length)
+                                            .or_else(|_| {
+            match_ignore_ascii_case! { try!(input.expect_ident()),
+                "closest-side" => Ok(ShapeRadius::ClosestSide),
+                "farthest-side" => Ok(ShapeRadius::FarthestSide),
+                _ => Err(())
+            }
+        })
+    }
+}
+
+impl ToCss for ShapeRadius {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        match *self {
+            ShapeRadius::Length(lop) => lop.to_css(dest),
+            ShapeRadius::ClosestSide => dest.write_str("closest-side"),
+            ShapeRadius::FarthestSide => dest.write_str("farthest-side"),
+        }
+    }
+}
+
+
+impl ToComputedValue for ShapeRadius {
+    type ComputedValue = computed_basic_shape::ShapeRadius;
+
+    #[inline]
+    fn to_computed_value(&self, cx: &Context) -> Self::ComputedValue {
+        match *self {
+            ShapeRadius::Length(lop) => {
+                computed_basic_shape::ShapeRadius::Length(lop.to_computed_value(cx))
+            }
+            ShapeRadius::ClosestSide => computed_basic_shape::ShapeRadius::ClosestSide,
+            ShapeRadius::FarthestSide => computed_basic_shape::ShapeRadius::FarthestSide,
+        }
+    }
+}
+
+/// https://drafts.csswg.org/css-backgrounds-3/#border-radius
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub struct BorderRadius {
+    pub top_left: BorderRadiusSize,
+    pub top_right: BorderRadiusSize,
+    pub bottom_right: BorderRadiusSize,
+    pub bottom_left: BorderRadiusSize,
+}
+
+impl ToCss for BorderRadius {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        if self.top_left.0.width == self.top_left.0.height &&
+           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,
+                                  &self.top_right.0.width,
+                                  &self.bottom_right.0.width,
+                                  &self.bottom_left.0.width),
+                                  dest)
+        } else {
+            try!(serialize_four_sides((&self.top_left.0.width,
+                                       &self.top_right.0.width,
+                                       &self.bottom_right.0.width,
+                                       &self.bottom_left.0.width),
+                                       dest));
+            try!(dest.write_str(" / "));
+            serialize_four_sides((&self.top_left.0.height,
+                                  &self.top_right.0.height,
+                                  &self.bottom_right.0.height,
+                                  &self.bottom_left.0.height),
+                                  dest)
+        }
+    }
+}
+
+impl BorderRadius {
+    pub fn parse(input: &mut Parser) -> Result<BorderRadius, ()> {
+        let widths = try!(parse_one_set_of_border_values(input));
+        let heights = if input.try(|input| input.expect_delim('/')).is_ok() {
+            try!(parse_one_set_of_border_values(input))
+        } else {
+            widths.clone()
+        };
+        Ok(BorderRadius {
+            top_left: BorderRadiusSize::new(widths[0], heights[0]),
+            top_right: BorderRadiusSize::new(widths[1], heights[1]),
+            bottom_right: BorderRadiusSize::new(widths[2], heights[2]),
+            bottom_left: BorderRadiusSize::new(widths[3], heights[3]),
+        })
+    }
+}
+
+fn parse_one_set_of_border_values(mut input: &mut Parser)
+                                 -> Result<[LengthOrPercentage; 4], ()> {
+    let a = try!(LengthOrPercentage::parse(input));
+
+    let b = if let Ok(b) = input.try(LengthOrPercentage::parse) {
+        b
+    } else {
+        return Ok([a, a, a, a])
+    };
+
+    let c = if let Ok(c) = input.try(LengthOrPercentage::parse) {
+        c
+    } else {
+        return Ok([a, b, a, b])
+    };
+
+    if let Ok(d) = input.try(LengthOrPercentage::parse) {
+        Ok([a, b, c, d])
+    } else {
+        Ok([a, b, c, b])
+    }
+}
+
+
+impl ToComputedValue for BorderRadius {
+    type ComputedValue = computed_basic_shape::BorderRadius;
+
+    #[inline]
+    fn to_computed_value(&self, cx: &Context) -> Self::ComputedValue {
+        computed_basic_shape::BorderRadius {
+            top_left: self.top_left.to_computed_value(cx),
+            top_right: self.top_right.to_computed_value(cx),
+            bottom_right: self.bottom_right.to_computed_value(cx),
+            bottom_left: self.bottom_left.to_computed_value(cx),
+        }
+    }
+}
+
+/// https://drafts.csswg.org/css-shapes/#typedef-fill-rule
+#[derive(Clone, PartialEq, Copy, Debug)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub enum FillRule {
+    NonZero,
+    EvenOdd,
+    // basic-shapes spec says that these are the only two values, however
+    // https://www.w3.org/TR/SVG/painting.html#FillRuleProperty
+    // says that it can also be `inherit`
+}
+
+impl ComputedValueAsSpecified for FillRule {}
+
+impl FillRule {
+    pub fn parse(input: &mut Parser) -> Result<FillRule, ()> {
+        match_ignore_ascii_case! { try!(input.expect_ident()),
+            "nonzero" => Ok(FillRule::NonZero),
+            "evenodd" => Ok(FillRule::EvenOdd),
+            _ => Err(())
+        }
+    }
+}
+
+impl Default for FillRule {
+    fn default() -> Self {
+        FillRule::NonZero
+    }
+}
+
+impl ToCss for FillRule {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        match *self {
+            FillRule::NonZero => dest.write_str("nonzero"),
+            FillRule::EvenOdd => dest.write_str("evenodd"),
+        }
+    }
+}
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index 93b270bc117..5dd8bcc0bd4 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -18,6 +18,9 @@ use super::computed::{Context, ToComputedValue};
 use super::{CSSFloat, FONT_MEDIUM_PX, HasViewportPercentage, LocalToCss, NoViewportPercentage};
 use url::Url;
 
+pub mod basic_shape;
+pub mod position;
+
 impl NoViewportPercentage for i32 {}  // For PropertyDeclaration::Order
 
 #[derive(Clone, PartialEq, Debug)]
@@ -1122,59 +1125,6 @@ impl ToCss for BorderRadiusSize {
     }
 }
 
-// http://dev.w3.org/csswg/css2/colors.html#propdef-background-position
-#[derive(Clone, PartialEq, Copy)]
-pub enum PositionComponent {
-    LengthOrPercentage(LengthOrPercentage),
-    Center,
-    Left,
-    Right,
-    Top,
-    Bottom,
-}
-
-impl HasViewportPercentage for PositionComponent {
-    fn has_viewport_percentage(&self) -> bool {
-        match *self {
-            PositionComponent::LengthOrPercentage(length) => length.has_viewport_percentage(),
-            _ => false
-        }
-    }
-}
-
-impl PositionComponent {
-    pub fn parse(input: &mut Parser) -> Result<PositionComponent, ()> {
-        input.try(LengthOrPercentage::parse)
-        .map(PositionComponent::LengthOrPercentage)
-        .or_else(|()| {
-            match try!(input.next()) {
-                Token::Ident(value) => {
-                    match_ignore_ascii_case! { value,
-                        "center" => Ok(PositionComponent::Center),
-                        "left" => Ok(PositionComponent::Left),
-                        "right" => Ok(PositionComponent::Right),
-                        "top" => Ok(PositionComponent::Top),
-                        "bottom" => Ok(PositionComponent::Bottom),
-                        _ => Err(())
-                    }
-                },
-                _ => Err(())
-            }
-        })
-    }
-    #[inline]
-    pub fn to_length_or_percentage(self) -> LengthOrPercentage {
-        match self {
-            PositionComponent::LengthOrPercentage(value) => value,
-            PositionComponent::Center => LengthOrPercentage::Percentage(Percentage(0.5)),
-            PositionComponent::Left |
-            PositionComponent::Top => LengthOrPercentage::Percentage(Percentage(0.0)),
-            PositionComponent::Right |
-            PositionComponent::Bottom => LengthOrPercentage::Percentage(Percentage(1.0)),
-        }
-    }
-}
-
 #[derive(Clone, PartialEq, PartialOrd, Copy, Debug)]
 #[cfg_attr(feature = "servo", derive(HeapSizeOf, Deserialize, Serialize))]
 /// An angle, normalized to radians.
@@ -1239,7 +1189,7 @@ pub struct UrlExtraData {
 
 impl UrlExtraData {
     #[cfg(feature = "servo")]
-    pub fn make_from(_context: &ParserContext) -> Option<UrlExtraData> {
+    pub fn make_from(_: &ParserContext) -> Option<UrlExtraData> {
         Some(UrlExtraData { })
     }
 
diff --git a/components/style/values/specified/position.rs b/components/style/values/specified/position.rs
new file mode 100644
index 00000000000..071df767f38
--- /dev/null
+++ b/components/style/values/specified/position.rs
@@ -0,0 +1,156 @@
+/* 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/. */
+
+//! CSS handling for the specified value of
+//! [`position`][position]s
+//!
+//! [position]: https://drafts.csswg.org/css-backgrounds-3/#position
+
+use cssparser::{Parser, ToCss, Token};
+use std::fmt;
+use values::HasViewportPercentage;
+use values::computed::position as computed_position;
+use values::computed::{Context, ToComputedValue};
+use values::specified::{LengthOrPercentage, Percentage};
+
+#[derive(Debug, Clone, PartialEq, Copy)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub struct Position {
+    pub horizontal: LengthOrPercentage,
+    pub vertical: LengthOrPercentage,
+}
+
+impl ToCss for Position {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        try!(self.horizontal.to_css(dest));
+        try!(dest.write_str(" "));
+        try!(self.vertical.to_css(dest));
+        Ok(())
+    }
+}
+
+impl HasViewportPercentage for Position {
+    fn has_viewport_percentage(&self) -> bool {
+        self.horizontal.has_viewport_percentage() || self.vertical.has_viewport_percentage()
+    }
+}
+// http://dev.w3.org/csswg/css2/colors.html#propdef-background-position
+#[derive(Clone, PartialEq, Copy)]
+pub enum PositionComponent {
+    LengthOrPercentage(LengthOrPercentage),
+    Center,
+    Left,
+    Right,
+    Top,
+    Bottom,
+}
+
+impl Position {
+    pub fn new(first: PositionComponent, second: PositionComponent)
+            -> Result<Position, ()> {
+        let (horiz, vert) = match (category(first), category(second)) {
+            // Don't allow two vertical keywords or two horizontal keywords.
+            // also don't allow length/percentage values in the wrong position
+            (PositionCategory::HorizontalKeyword, PositionCategory::HorizontalKeyword) |
+            (PositionCategory::VerticalKeyword, PositionCategory::VerticalKeyword) |
+            (PositionCategory::LengthOrPercentage, PositionCategory::HorizontalKeyword) |
+            (PositionCategory::VerticalKeyword, PositionCategory::LengthOrPercentage) => return Err(()),
+
+            // Swap if both are keywords and vertical precedes horizontal.
+            (PositionCategory::VerticalKeyword, PositionCategory::HorizontalKeyword) |
+            (PositionCategory::VerticalKeyword, PositionCategory::OtherKeyword) |
+            (PositionCategory::OtherKeyword, PositionCategory::HorizontalKeyword) => (second, first),
+            // By default, horizontal is first.
+            _ => (first, second),
+        };
+        Ok(Position {
+            horizontal: horiz.to_length_or_percentage(),
+            vertical: vert.to_length_or_percentage(),
+        })
+    }
+
+    pub fn parse(input: &mut Parser) -> Result<Position, ()> {
+        let first = try!(PositionComponent::parse(input));
+        let second = input.try(PositionComponent::parse)
+            .unwrap_or(PositionComponent::Center);
+        Position::new(first, second)
+    }
+}
+
+// Collapse `Position` into a few categories to simplify the above `match` expression.
+enum PositionCategory {
+    HorizontalKeyword,
+    VerticalKeyword,
+    OtherKeyword,
+    LengthOrPercentage,
+}
+
+fn category(p: PositionComponent) -> PositionCategory {
+    match p {
+        PositionComponent::Left |
+        PositionComponent::Right =>
+            PositionCategory::HorizontalKeyword,
+        PositionComponent::Top |
+        PositionComponent::Bottom =>
+            PositionCategory::VerticalKeyword,
+        PositionComponent::Center =>
+            PositionCategory::OtherKeyword,
+        PositionComponent::LengthOrPercentage(_) =>
+            PositionCategory::LengthOrPercentage,
+    }
+}
+
+impl ToComputedValue for Position {
+    type ComputedValue = computed_position::Position;
+
+    #[inline]
+    fn to_computed_value(&self, context: &Context) -> computed_position::Position {
+        computed_position::Position {
+            horizontal: self.horizontal.to_computed_value(context),
+            vertical: self.vertical.to_computed_value(context),
+        }
+    }
+}
+
+impl HasViewportPercentage for PositionComponent {
+    fn has_viewport_percentage(&self) -> bool {
+        match *self {
+            PositionComponent::LengthOrPercentage(length) => length.has_viewport_percentage(),
+            _ => false
+        }
+    }
+}
+
+impl PositionComponent {
+    pub fn parse(input: &mut Parser) -> Result<PositionComponent, ()> {
+        input.try(LengthOrPercentage::parse)
+        .map(PositionComponent::LengthOrPercentage)
+        .or_else(|()| {
+            match try!(input.next()) {
+                Token::Ident(value) => {
+                    match_ignore_ascii_case! { value,
+                        "center" => Ok(PositionComponent::Center),
+                        "left" => Ok(PositionComponent::Left),
+                        "right" => Ok(PositionComponent::Right),
+                        "top" => Ok(PositionComponent::Top),
+                        "bottom" => Ok(PositionComponent::Bottom),
+                        _ => Err(())
+                    }
+                },
+                _ => Err(())
+            }
+        })
+    }
+    #[inline]
+    pub fn to_length_or_percentage(self) -> LengthOrPercentage {
+        match self {
+            PositionComponent::LengthOrPercentage(value) => value,
+            PositionComponent::Center => LengthOrPercentage::Percentage(Percentage(0.5)),
+            PositionComponent::Left |
+            PositionComponent::Top => LengthOrPercentage::Percentage(Percentage(0.0)),
+            PositionComponent::Right |
+            PositionComponent::Bottom => LengthOrPercentage::Percentage(Percentage(1.0)),
+        }
+    }
+}
diff --git a/tests/unit/style/lib.rs b/tests/unit/style/lib.rs
index 74546cb12f0..56111373e96 100644
--- a/tests/unit/style/lib.rs
+++ b/tests/unit/style/lib.rs
@@ -21,6 +21,7 @@ mod attr;
 mod cache;
 mod logical_geometry;
 mod media_queries;
+mod parsing;
 mod properties;
 mod str;
 mod stylesheets;
diff --git a/tests/unit/style/parsing/basic_shape.rs b/tests/unit/style/parsing/basic_shape.rs
new file mode 100644
index 00000000000..b3702dfc8cd
--- /dev/null
+++ b/tests/unit/style/parsing/basic_shape.rs
@@ -0,0 +1,139 @@
+/* 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 parsing::parse;
+use style::values::specified::basic_shape::*;
+
+// Ensure that basic-shape sub-functions parse as both basic shapes
+// and their individual components
+macro_rules! assert_roundtrip_basicshape {
+    ($fun:expr, $input:expr, $output:expr) => {
+        assert_roundtrip!($fun, $input, $output);
+        assert_roundtrip!(BasicShape::parse, $input, $output);
+    }
+}
+
+macro_rules! assert_border_radius_values {
+    ($input:expr; $tlw:expr, $trw:expr, $brw:expr, $blw:expr ;
+                  $tlh:expr, $trh:expr, $brh:expr, $blh:expr) => {
+        let input = parse(BorderRadius::parse, $input)
+                          .expect(&format!("Failed parsing {} as border radius",
+                                  $input));
+        assert_eq!(::cssparser::ToCss::to_css_string(&input.top_left.0.width), $tlw);
+        assert_eq!(::cssparser::ToCss::to_css_string(&input.top_right.0.width), $trw);
+        assert_eq!(::cssparser::ToCss::to_css_string(&input.bottom_right.0.width), $brw);
+        assert_eq!(::cssparser::ToCss::to_css_string(&input.bottom_left.0.width), $blw);
+        assert_eq!(::cssparser::ToCss::to_css_string(&input.top_left.0.height), $tlh);
+        assert_eq!(::cssparser::ToCss::to_css_string(&input.top_right.0.height), $trh);
+        assert_eq!(::cssparser::ToCss::to_css_string(&input.bottom_right.0.height), $brh);
+        assert_eq!(::cssparser::ToCss::to_css_string(&input.bottom_left.0.height), $blh);
+    }
+}
+
+#[test]
+fn test_inset() {
+    // these are actually wrong, we should be serializing to the minimum possible result
+    // the advantage of being wrong is that the roundtrip test actually suffices
+    // for testing the intermediate state
+    assert_roundtrip_basicshape!(InsetRect::parse, "inset(10px)", "inset(10px 10px 10px 10px)");
+    assert_roundtrip_basicshape!(InsetRect::parse, "inset(10px 20%)", "inset(10px 20% 10px 20%)");
+
+    assert_roundtrip_basicshape!(InsetRect::parse, "inset(10px round 10px)",
+                                                   "inset(10px 10px 10px 10px round 10px)");
+    assert_roundtrip_basicshape!(InsetRect::parse, "inset(10px round 10px 20px 30px 40px)",
+                                                   "inset(10px 10px 10px 10px round 10px 20px 30px 40px)");
+    assert_roundtrip_basicshape!(InsetRect::parse, "inset(10px 10px 10px 10px round 10px 20px 30px 40px \
+                                                    / 1px 2px 3px 4px)",
+                                                   "inset(10px 10px 10px 10px round 10px 20px 30px 40px \
+                                                    / 1px 2px 3px 4px)");
+}
+
+#[test]
+fn test_border_radius() {
+    assert_border_radius_values!("10px";
+                                 "10px", "10px", "10px", "10px" ;
+                                 "10px", "10px", "10px", "10px");
+    assert_border_radius_values!("10px 20px";
+                                 "10px", "20px", "10px", "20px" ;
+                                 "10px", "20px", "10px", "20px");
+    assert_border_radius_values!("10px 20px 30px";
+                                 "10px", "20px", "30px", "20px" ;
+                                 "10px", "20px", "30px", "20px");
+    assert_border_radius_values!("10px 20px 30px 40px";
+                                 "10px", "20px", "30px", "40px" ;
+                                 "10px", "20px", "30px", "40px");
+    assert_border_radius_values!("10% / 20px";
+                                 "10%", "10%", "10%", "10%" ;
+                                 "20px", "20px", "20px", "20px");
+    assert_border_radius_values!("10px / 20px 30px";
+                                 "10px", "10px", "10px", "10px" ;
+                                 "20px", "30px", "20px", "30px");
+    assert_border_radius_values!("10px 20px 30px 40px / 1px 2px 3px 4px";
+                                 "10px", "20px", "30px", "40px" ;
+                                 "1px", "2px", "3px", "4px");
+}
+
+#[test]
+fn test_circle() {
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at center)", "circle(at 50% 50%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle()", "circle(at 50% 50%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at left bottom)", "circle(at 0% 100%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at bottom left)", "circle(at 0% 100%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at top left)", "circle(at 0% 0%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at center left)", "circle(at 0% 50%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at left center)", "circle(at 0% 50%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at top center)", "circle(at 50% 0%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at center top)", "circle(at 50% 0%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at 40% top)", "circle(at 40% 0%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(at 10px 100px)", "circle(at 10px 100px)");
+    // closest-side is omitted, because it is the default
+    assert_roundtrip_basicshape!(Circle::parse, "circle(closest-side at center)", "circle(at 50% 50%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(farthest-side at center)",
+                                                "circle(farthest-side at 50% 50%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(20px at center)", "circle(20px at 50% 50%)");
+    assert_roundtrip_basicshape!(Circle::parse, "circle(calc(1px + 50%) at center)",
+                                                "circle(calc(1px + 50%) at 50% 50%)");
+
+    assert!(parse(Circle::parse, "circle(at top 40%)").is_err());
+
+}
+
+#[test]
+fn test_ellipse() {
+    assert_roundtrip_basicshape!(Ellipse::parse, "ellipse(at center)", "ellipse(at 50% 50%)");
+    assert_roundtrip_basicshape!(Ellipse::parse, "ellipse()", "ellipse(at 50% 50%)");
+    assert_roundtrip_basicshape!(Ellipse::parse, "ellipse(at left bottom)", "ellipse(at 0% 100%)");
+    assert_roundtrip_basicshape!(Ellipse::parse, "ellipse(at bottom left)", "ellipse(at 0% 100%)");
+    assert_roundtrip_basicshape!(Ellipse::parse, "ellipse(at 10px 100px)", "ellipse(at 10px 100px)");
+    // closest-side is omitted, because it is the default
+    assert_roundtrip_basicshape!(Ellipse::parse, "ellipse(closest-side closest-side at center)",
+                                                 "ellipse(at 50% 50%)");
+    assert_roundtrip_basicshape!(Ellipse::parse, "ellipse(farthest-side closest-side at center)",
+                                                 "ellipse(farthest-side closest-side at 50% 50%)");
+    assert_roundtrip_basicshape!(Ellipse::parse, "ellipse(20px 10% at center)", "ellipse(20px 10% at 50% 50%)");
+    assert_roundtrip_basicshape!(Ellipse::parse, "ellipse(calc(1px + 50%) 10px at center)",
+                                                 "ellipse(calc(1px + 50%) 10px at 50% 50%)");
+}
+
+#[test]
+fn test_polygon() {
+    // surprisingly, polygons are only required to have at least one vertex,
+    // not at least 3
+    assert_roundtrip_basicshape!(Polygon::parse, "polygon(10px 10px)", "polygon(10px 10px)");
+    assert_roundtrip_basicshape!(Polygon::parse, "polygon(10px 10px, 10px 10px)", "polygon(10px 10px, 10px 10px)");
+    assert_roundtrip_basicshape!(Polygon::parse, "polygon(nonzero, 10px 10px, 10px 10px)",
+                                                 "polygon(10px 10px, 10px 10px)");
+    assert_roundtrip_basicshape!(Polygon::parse, "polygon(evenodd, 10px 10px, 10px 10px)",
+                                                 "polygon(evenodd, 10px 10px, 10px 10px)");
+    assert_roundtrip_basicshape!(Polygon::parse, "polygon(evenodd, 10px 10px, 10px calc(10px + 50%))",
+                                                 "polygon(evenodd, 10px 10px, 10px calc(10px + 50%))");
+    assert_roundtrip_basicshape!(Polygon::parse, "polygon(evenodd, 10px 10px, 10px 10px, 10px 10px, 10px 10px, 10px \
+                                                  10px, 10px 10px, 10px 10px, 10px 10px, 10px 10px, 10px 10px, \
+                                                  10px 10px, 10px 10px, 10px 10px)",
+                                                 "polygon(evenodd, 10px 10px, 10px 10px, 10px 10px, 10px 10px, 10px \
+                                                  10px, 10px 10px, 10px 10px, 10px 10px, 10px 10px, 10px 10px, \
+                                                  10px 10px, 10px 10px, 10px 10px)");
+
+    assert!(parse(Polygon::parse, "polygon()").is_err());
+}
diff --git a/tests/unit/style/parsing/mod.rs b/tests/unit/style/parsing/mod.rs
new file mode 100644
index 00000000000..c99032417ee
--- /dev/null
+++ b/tests/unit/style/parsing/mod.rs
@@ -0,0 +1,33 @@
+/* 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/. */
+
+//! Tests for parsing and serialization of values/properties
+
+use cssparser::Parser;
+
+fn parse<T, F: Fn(&mut Parser) -> Result<T, ()>>(f: F, s: &str) -> Result<T, ()> {
+    let mut parser = Parser::new(s);
+    f(&mut parser)
+}
+
+
+// This is a macro so that the file/line information
+// is preserved in the panic
+macro_rules! assert_roundtrip {
+    ($fun:expr, $input:expr, $output:expr) => {
+        let parsed = $crate::parsing::parse($fun, $input)
+                        .expect(&format!("Failed to parse {}", $input));
+        let serialized = ::cssparser::ToCss::to_css_string(&parsed);
+        assert_eq!(serialized, $output);
+
+        let re_parsed = $crate::parsing::parse($fun, &serialized)
+                        .expect(&format!("Failed to parse serialization {}", $input));
+        let re_serialized = ::cssparser::ToCss::to_css_string(&re_parsed);
+        assert_eq!(serialized, re_serialized);
+    }
+}
+
+
+mod basic_shape;
+mod position;
diff --git a/tests/unit/style/parsing/position.rs b/tests/unit/style/parsing/position.rs
new file mode 100644
index 00000000000..ca55b2c452d
--- /dev/null
+++ b/tests/unit/style/parsing/position.rs
@@ -0,0 +1,34 @@
+/* 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 parsing::parse;
+use style::values::specified::position::*;
+
+#[test]
+fn test_position() {
+    // Serialization is not actually specced
+    // though these are the values expected by basic-shape
+    // https://github.com/w3c/csswg-drafts/issues/368
+    assert_roundtrip!(Position::parse, "center", "50% 50%");
+    assert_roundtrip!(Position::parse, "top left", "0% 0%");
+    assert_roundtrip!(Position::parse, "left top", "0% 0%");
+    assert_roundtrip!(Position::parse, "top right", "100% 0%");
+    assert_roundtrip!(Position::parse, "right top", "100% 0%");
+    assert_roundtrip!(Position::parse, "bottom left", "0% 100%");
+    assert_roundtrip!(Position::parse, "left bottom", "0% 100%");
+    assert_roundtrip!(Position::parse, "left center", "0% 50%");
+    assert_roundtrip!(Position::parse, "right center", "100% 50%");
+    assert_roundtrip!(Position::parse, "center top", "50% 0%");
+    assert_roundtrip!(Position::parse, "center bottom", "50% 100%");
+    assert_roundtrip!(Position::parse, "center 10px", "50% 10px");
+    assert_roundtrip!(Position::parse, "center 10%", "50% 10%");
+    assert_roundtrip!(Position::parse, "right 10%", "100% 10%");
+
+    // Only keywords can be reordered
+    assert!(parse(Position::parse, "top 40%").is_err());
+    assert!(parse(Position::parse, "40% left").is_err());
+
+    // we don't yet handle 4-valued positions
+    // https://github.com/servo/servo/issues/12690
+}