gfx: Add elliptical border-radius shorthand parsing

Adds elliptical border-radius shorthand parsing, e.g.:

    /* The syntax of the second radius allows one to four values */
    /* (first radius values) / radius */
    border-radius: 10px 5% / 20px;

    /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
    border-radius: 10px 5% / 20px 30px;

    /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
    border-radius: 10px 5px 2em / 20px 25px 30%;

    /* (first radius values) / top-left | top-right | bottom-right | bottom-left */
    border-radius: 10px 5% / 20px 25em 30px 35em;

components/style/properties.mako.rs

@@ -5135,16 +5135,18 @@ pub mod shorthands {
         'border-%s-radius' % (corner)
          for corner in ['top-left', 'top-right', 'bottom-right', 'bottom-left']
     )}">
+        use util::geometry::Au;
+        use values::specified::{Length, LengthOrPercentage};
         use values::specified::BorderRadiusSize;
 
         let _ignored = context;
 
-        fn parse_one_set_of_border_radii(mut input: &mut Parser)
+        fn parse_one_set_of_border_values(mut input: &mut Parser)
-                                         -> Result<[BorderRadiusSize; 4], ()> {
+                                         -> Result<[LengthOrPercentage; 4], ()> {
             let mut count = 0;
-            let mut values = [BorderRadiusSize::zero(); 4];
+            let mut values = [LengthOrPercentage::Length(Length::Absolute(Au(0))); 4];
             while count < 4 {
-                if let Ok(value) = input.try(BorderRadiusSize::parse_one_radii) {
+                if let Ok(value) = input.try(LengthOrPercentage::parse) {
                     values[count] = value;
                     count += 1;
                 } else {
@@ -5161,9 +5163,21 @@ pub mod shorthands {
             }
         }
 
-        let radii = try!(parse_one_set_of_border_radii(input));
+        fn parse_one_set_of_border_radii(mut input: &mut Parser)
-        // TODO(bjwbell): Finish parsing code for elliptical borders.
+                                         -> 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));
         Ok(Longhands {
             border_top_left_radius: Some(radii[0]),
             border_top_right_radius: Some(radii[1]),

components/style/values.rs

@@ -842,6 +842,21 @@ pub mod specified {
             let zero = LengthOrPercentage::Length(Length::Absolute(Au(0)));
                 BorderRadiusSize(Size2D::new(zero, zero))
         }
+
+        pub fn new(width: LengthOrPercentage, height: LengthOrPercentage) -> BorderRadiusSize {
+            BorderRadiusSize(Size2D::new(width, height))
+        }
+
+        pub fn circle(radius: LengthOrPercentage) -> BorderRadiusSize {
+            BorderRadiusSize(Size2D::new(radius, radius))
+        }
+
+        #[inline]
+        pub fn parse(input: &mut Parser) -> Result<BorderRadiusSize, ()> {
+            let first = try!(LengthOrPercentage::parse_non_negative(input));
+            let second = input.try(LengthOrPercentage::parse_non_negative).unwrap_or(first);
+            Ok(BorderRadiusSize(Size2D::new(first, second)))
+        }
     }
 
     impl ToCss for BorderRadiusSize {
@@ -852,27 +867,6 @@ pub mod specified {
             size.height.to_css(dest)
         }
     }
-    impl BorderRadiusSize {
-        pub fn circle(radius: LengthOrPercentage) -> BorderRadiusSize {
-            BorderRadiusSize(Size2D::new(radius, radius))
-        }
-
-        pub fn parse_one_radii(input: &mut Parser) -> Result<BorderRadiusSize, ()> {
-            if let Ok(first) = LengthOrPercentage::parse_non_negative(input) {
-                Ok(BorderRadiusSize(Size2D::new(first, first)))
-            } else {
-                Err(())
-            }
-        }
-
-        #[allow(dead_code)]
-        #[inline]
-        pub fn parse(input: &mut Parser) -> Result<BorderRadiusSize, ()> {
-            let first = try!(LengthOrPercentage::parse_non_negative(input));
-            let second = input.try(LengthOrPercentage::parse_non_negative).unwrap_or(first);
-            Ok(BorderRadiusSize(Size2D::new(first, second)))
-        }
-    }
 
     // http://dev.w3.org/csswg/css2/colors.html#propdef-background-position
     #[derive(Clone, PartialEq, Copy)]

tests/ref/basic.list

@@ -68,6 +68,7 @@ flaky_cpu == append_style_a.html append_style_b.html
 != border_radius_dashed_a.html border_radius_dashed_ref.html
 == border_radius_elliptical_a.html border_radius_elliptical_ref.html
 == border_radius_overlapping_a.html border_radius_overlapping_ref.html
+== border_radius_shorthand_a.html border_radius_shorthand_ref.html
 == border_rounding_1px_invisible_issue_7184_a.html border_rounding_1px_invisible_issue_7184_ref.html
 == border_spacing_a.html border_spacing_ref.html
 == border_spacing_auto_layout_a.html border_spacing_ref.html

tests/ref/border_radius_shorthand_a.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+        <meta content="utf-8" http-equiv="encoding">
+        <style type="text/css">
+         div.box {
+             background: white;
+             border-width: 15px 15px 15px 15px;
+             border-color: yellow red green blue;
+             border-style: solid;
+             border-radius: 100px 150px / 50px 100px 200px;
+             height: 500px;
+             width: 500px;
+         }
+        </style>
+    </head>
+    <body>
+        <h2>Shorthand Border Radius - Elliptical</h2>
+        <div class="box"></div><br>
+    </body>
+</html>

tests/ref/border_radius_shorthand_ref.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+        <meta content="utf-8" http-equiv="encoding">
+        <style type="text/css">
+         div.box {
+             background: white;
+             border-width: 15px 15px 15px 15px;
+             border-color: yellow red green blue;
+             border-style: solid;
+             border-top-left-radius: 100px 50px;
+             border-top-right-radius: 150px 100px;
+             border-bottom-right-radius: 100px 200px;
+             border-bottom-left-radius: 150px 100px;
+             height: 500px;
+             width: 500px;
+         }
+        </style>
+    </head>
+    <body>
+        <h2>Shorthand Border Radius - Elliptical</h2>
+        <div class="box"></div><br>
+    </body>
+</html>