Border radius

Author: devongovett

src/lib.rs

@@ -334,4 +334,81 @@ mod tests {
       }"#
     });
   }
+
+  #[test]
+  pub fn test_border_radius() {
+    test(r#"
+      .foo {
+        border-radius: 10px 100px 10px 100px;
+      }
+    "#, indoc! {r#"
+      .foo {
+        border-radius: 10px 100px;
+      }"#
+    });
+
+    test(r#"
+      .foo {
+        border-radius: 10px 100px 10px 100px / 120px 120px;
+      }
+    "#, indoc! {r#"
+      .foo {
+        border-radius: 10px 100px / 120px;
+      }"#
+    });
+
+    test(r#"
+      .foo {
+        border-top-left-radius: 10px 120px;
+        border-top-right-radius: 100px 120px;
+        border-bottom-left-radius: 10px 120px;
+        border-bottom-right-radius: 100px 120px;
+      }
+    "#, indoc! {r#"
+      .foo {
+        border-radius: 10px 100px / 120px;
+      }"#
+    });
+
+    test(r#"
+      .foo {
+        border-radius: 10px 100px 10px 100px / 120px 120px;
+        border-start-start-radius: 10px;
+      }
+    "#, indoc! {r#"
+      .foo {
+        border-radius: 10px 100px / 120px;
+        border-start-start-radius: 10px;
+      }"#
+    });
+
+    test(r#"
+      .foo {
+        border-start-start-radius: 10px;
+        border-radius: 10px 100px 10px 100px / 120px 120px;
+      }
+    "#, indoc! {r#"
+      .foo {
+        border-radius: 10px 100px / 120px;
+      }"#
+    });
+
+    test(r#"
+      .foo {
+        border-top-left-radius: 10px 120px;
+        border-top-right-radius: 100px 120px;
+        border-start-start-radius: 10px;
+        border-bottom-left-radius: 10px 120px;
+        border-bottom-right-radius: 100px 120px;
+      }
+    "#, indoc! {r#"
+      .foo {
+        border-top-left-radius: 10px 120px;
+        border-top-right-radius: 100px 120px;
+        border-start-start-radius: 10px;
+        border-bottom-left-radius: 10px 120px;
+        border-bottom-right-radius: 100px 120px;
+      }"#
+    });
+  }
 }

src/properties/mod.rs

@@ -2,8 +2,8 @@ mod custom;
 
 use cssparser::*;
 use custom::*;
-use crate::values::{image::*, length::*, border::*, border_image::*, rect::*, color::*};
-use super::values::traits::Parse;
+use crate::values::{image::*, length::*, border::*, border_image::*, border_radius::*, rect::*, color::*};
+use super::values::traits::{Parse, ToCss};
 
 #[derive(Debug, Clone)]
 pub enum Property {
@@ -72,18 +72,15 @@ pub enum Property {
   BorderInlineStartWidth(BorderSideWidth),
   BorderInlineEndWidth(BorderSideWidth),
 
-  // BorderBlock
-  // BorderInline
-
-  // BorderTopLeftRadius
-  // BorderTopRightRadius
-  // BorderBottomLeftRadius
-  // BorderBottomRightRadius
-  // BorderStartStartRadius
-  // BorderStartEndRadius
-  // BorderEndStartRadius
-  // BorderEndEndRadius
-  // BorderRadius
+  BorderTopLeftRadius(Size2D),
+  BorderTopRightRadius(Size2D),
+  BorderBottomLeftRadius(Size2D),
+  BorderBottomRightRadius(Size2D),
+  BorderStartStartRadius(Size2D),
+  BorderStartEndRadius(Size2D),
+  BorderEndStartRadius(Size2D),
+  BorderEndEndRadius(Size2D),
+  BorderRadius(BorderRadius),
 
   /// https://www.w3.org/TR/css-backgrounds-3/#border-image-source
   BorderImageSource(Image),
@@ -220,6 +217,15 @@ impl Property {
       "border-image-width" => property!(BorderImageWidth, Rect),
       "border-image-slice" => property!(BorderImageSlice, BorderImageSlice),
       "border-image" => property!(BorderImage, BorderImage),
+      "border-top-left-radius" => property!(BorderTopLeftRadius, Size2D),
+      "border-top-right-radius" => property!(BorderTopRightRadius, Size2D),
+      "border-bottom-left-radius" => property!(BorderBottomLeftRadius, Size2D),
+      "border-bottom-right-radius" => property!(BorderBottomRightRadius, Size2D),
+      "border-start-start-radius" => property!(BorderStartStartRadius, Size2D),
+      "border-start-end-radius" => property!(BorderStartEndRadius, Size2D),
+      "border-end-start-radius" => property!(BorderEndStartRadius, Size2D),
+      "border-end-end-radius" => property!(BorderEndEndRadius, Size2D),
+      "border-radius" => property!(BorderRadius, BorderRadius),
       _ => {}
     }
 
@@ -326,6 +332,15 @@ impl Property {
       BorderImageWidth(val) => property!("border-image-width", val),
       BorderImageSlice(val) => property!("border-image-slice", val),
       BorderImage(val) => property!("border-image", val),
+      BorderTopLeftRadius(val) => property!("border-top-left-radius", val),
+      BorderTopRightRadius(val) => property!("border-top-right-radius", val),
+      BorderBottomLeftRadius(val) => property!("border-bottom-left-radius", val),
+      BorderBottomRightRadius(val) => property!("border-bottom-right-radius", val),
+      BorderStartStartRadius(val) => property!("border-start-start-radius", val),
+      BorderStartEndRadius(val) => property!("border-start-end-radius", val),
+      BorderEndStartRadius(val) => property!("border-end-start-radius", val),
+      BorderEndEndRadius(val) => property!("border-end-end-radius", val),
+      BorderRadius(val) => property!("border-radius", val),
       Custom(custom) => {
         dest.write_str(custom.name.as_ref())?;
         dest.write_str(": ")?;

src/values/border.rs

@@ -1,12 +1,12 @@
 use super::length::*;
 use cssparser::*;
-use super::traits::Parse;
+use super::traits::{Parse, ToCss};
 use super::color::CssColor;
 use crate::properties::Property;
 use super::rect::Rect;
-#[macro_use]
 use super::macros::*;
 use super::border_image::*;
+use super::border_radius::*;
 
 #[derive(Debug, Clone, PartialEq)]
 pub enum BorderSideWidth {
@@ -194,7 +194,8 @@ pub struct BorderHandler {
   border_inline_end: BorderShorthand,
   category: BorderCategory,
   decls: Vec<Property>,
-  border_image_handler: BorderImageHandler
+  border_image_handler: BorderImageHandler,
+  border_radius_handler: BorderRadiusHandler
 }
 
 impl BorderHandler {
@@ -308,7 +309,7 @@ impl BorderHandler {
         self.border_image_handler.reset();
       }
       _ => {
-        return self.border_image_handler.handle_property(property)
+        return self.border_image_handler.handle_property(property) || self.border_radius_handler.handle_property(property)
       }
     }
 
@@ -521,6 +522,7 @@ impl BorderHandler {
   pub fn finalize(&mut self) -> Vec<Property> {
     self.flush();
     self.decls.extend(self.border_image_handler.finalize());
+    self.decls.extend(self.border_radius_handler.finalize());
     std::mem::take(&mut self.decls)
   }
 }

src/values/border_image.rs

@@ -1,6 +1,6 @@
 use super::length::{*, NumberOrPercentage};
 use cssparser::*;
-use super::traits::Parse;
+use super::traits::{Parse, ToCss};
 use crate::properties::Property;
 use super::rect::Rect;
 use super::image::Image;
@@ -280,33 +280,39 @@ impl BorderImageHandler {
 
   pub fn finalize(&mut self) -> Vec<Property> {
     let mut decls = vec![];
-    if self.source.is_some() && self.slice.is_some() && self.width.is_some() && self.outset.is_some() && self.repeat.is_some() {
+    let source = std::mem::take(&mut self.source);
+    let slice = std::mem::take(&mut self.slice);
+    let width = std::mem::take(&mut self.width);
+    let outset = std::mem::take(&mut self.outset);
+    let repeat = std::mem::take(&mut self.repeat);
+
+    if source.is_some() && slice.is_some() && width.is_some() && outset.is_some() && repeat.is_some() {
       decls.push(Property::BorderImage(BorderImage {
-        source: self.source.clone().unwrap(),
-        slice: self.slice.clone().unwrap(),
-        width: self.width.clone().unwrap(),
-        outset: self.outset.clone().unwrap(),
-        repeat: self.repeat.clone().unwrap()
+        source: source.unwrap(),
+        slice: slice.unwrap(),
+        width: width.unwrap(),
+        outset: outset.unwrap(),
+        repeat: repeat.unwrap()
       }))
     } else {
-      if let Some(source) = &self.source {
-        decls.push(Property::BorderImageSource(source.clone()))
+      if let Some(source) = source {
+        decls.push(Property::BorderImageSource(source))
       }
 
-      if let Some(slice) = &self.slice {
-        decls.push(Property::BorderImageSlice(slice.clone()))
+      if let Some(slice) = slice {
+        decls.push(Property::BorderImageSlice(slice))
       }
 
-      if let Some(width) = &self.width {
-        decls.push(Property::BorderImageWidth(width.clone()))
+      if let Some(width) = width {
+        decls.push(Property::BorderImageWidth(width))
       }
 
-      if let Some(outset) = &self.outset {
-        decls.push(Property::BorderImageOutset(outset.clone()))
+      if let Some(outset) = outset {
+        decls.push(Property::BorderImageOutset(outset))
       }
 
-      if let Some(repeat) = &self.repeat {
-        decls.push(Property::BorderImageRepeat(repeat.clone()))
+      if let Some(repeat) = repeat {
+        decls.push(Property::BorderImageRepeat(repeat))
       }
     }
 

src/values/border_radius.rs

@@ -0,0 +1,118 @@
+use super::length::*;
+use cssparser::*;
+use super::traits::{Parse, ToCss};
+use crate::properties::Property;
+use super::rect::Rect;
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct BorderRadius {
+  top_left: Size2D,
+  top_right: Size2D,
+  bottom_left: Size2D,
+  bottom_right: Size2D
+}
+
+impl Parse for BorderRadius {
+  fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ()>> {
+    let widths: Rect<LengthPercentage> = Rect::parse(input)?;
+    let heights = if input.try_parse(|input| input.expect_delim('/')).is_ok() {
+      Rect::parse(input)?
+    } else {
+      widths.clone()
+    };
+
+    Ok(BorderRadius {
+      top_left: Size2D::new(widths.0, heights.0),
+      top_right: Size2D::new(widths.1, heights.1),
+      bottom_left: Size2D::new(widths.2, heights.2),
+      bottom_right: Size2D::new(widths.3, heights.3)
+    })
+  }
+}
+
+impl ToCss for BorderRadius {
+  fn to_css<W>(&self, dest: &mut W) -> std::fmt::Result where W: std::fmt::Write {
+    let widths = Rect::new(&self.top_left.width, &self.top_right.width, &self.bottom_left.width, &self.bottom_right.width);
+    let heights = Rect::new(&self.top_left.height, &self.top_right.height, &self.bottom_left.height, &self.bottom_right.height);
+
+    widths.to_css(dest)?;
+    if widths != heights {
+      dest.write_str(" / ")?;
+      heights.to_css(dest)?;
+    }
+
+    Ok(())
+  }
+}
+
+#[derive(Default, Debug)]
+pub struct BorderRadiusHandler {
+  top_left: Option<Size2D>,
+  top_right: Option<Size2D>,
+  bottom_left: Option<Size2D>,
+  bottom_right: Option<Size2D>,
+  decls: Vec<Property>
+}
+
+impl BorderRadiusHandler {
+  pub fn handle_property(&mut self, property: &Property) -> bool {
+    use Property::*;
+    match property {
+      BorderTopLeftRadius(val) => self.top_left = Some(val.clone()),
+      BorderTopRightRadius(val) => self.top_right = Some(val.clone()),
+      BorderBottomLeftRadius(val) => self.bottom_left = Some(val.clone()),
+      BorderBottomRightRadius(val) => self.bottom_right = Some(val.clone()),
+      BorderStartStartRadius(_) | BorderStartEndRadius(_) | BorderEndStartRadius(_) | BorderEndEndRadius(_) => {
+        self.flush();
+        self.decls.push(property.clone());
+      }
+      BorderRadius(val) => {
+        self.decls.clear();
+        self.top_left = Some(val.top_left.clone());
+        self.top_right = Some(val.top_right.clone());
+        self.bottom_left = Some(val.bottom_left.clone());
+        self.bottom_right = Some(val.bottom_right.clone());
+      }
+      _ => return false
+    }
+
+    true
+  }
+
+  pub fn flush(&mut self) {
+    let top_left = std::mem::take(&mut self.top_left);
+    let top_right = std::mem::take(&mut self.top_right);
+    let bottom_left = std::mem::take(&mut self.bottom_left);
+    let bottom_right = std::mem::take(&mut self.bottom_right);
+
+    if top_left.is_some() && top_right.is_some() && bottom_left.is_some() && bottom_right.is_some() {
+      self.decls.push(Property::BorderRadius(BorderRadius {
+        top_left: top_left.unwrap(),
+        top_right: top_right.unwrap(),
+        bottom_left: bottom_left.unwrap(),
+        bottom_right: bottom_right.unwrap(),
+      }))
+    } else {
+      if let Some(val) = top_left {
+        self.decls.push(Property::BorderTopLeftRadius(val))
+      }
+
+      if let Some(val) = top_right {
+        self.decls.push(Property::BorderTopRightRadius(val))
+      }
+
+      if let Some(val) = bottom_left {
+        self.decls.push(Property::BorderBottomLeftRadius(val))
+      }
+
+      if let Some(val) = bottom_right {
+        self.decls.push(Property::BorderBottomRightRadius(val))
+      }
+    }
+  }
+
+  pub fn finalize(&mut self) -> Vec<Property> {
+    self.flush();
+    std::mem::take(&mut self.decls)
+  }
+}

src/values/color.rs

@@ -1,5 +1,5 @@
 use cssparser::*;
-use super::traits::Parse;
+use super::traits::{Parse, ToCss};
 
 #[derive(Debug, Clone, PartialEq)]
 pub struct CssColor(Color);

src/values/image.rs

@@ -1,5 +1,5 @@
 use cssparser::*;
-use super::traits::Parse;
+use super::traits::{Parse, ToCss};
 
 /// https://www.w3.org/TR/css-images-3/#typedef-image
 #[derive(Debug, Clone, PartialEq)]
@@ -33,6 +33,7 @@ impl Parse for Image {
 impl ToCss for Image {
   fn to_css<W>(&self, dest: &mut W) -> std::fmt::Result where W: std::fmt::Write {
     use Image::*;
+    use cssparser::ToCss;
     match self {
       None => dest.write_str("none"),
       Url(url) => {