Background position parsing

Author: devongovett

src/properties/background.rs

@@ -0,0 +1,124 @@
+use cssparser::*;
+use crate::values::length::{HorizontalPosition, HorizontalPositionKeyword, VerticalPosition, VerticalPositionKeyword, LengthPercentage};
+use crate::values::traits::{Parse, ToCss};
+
+/// https://www.w3.org/TR/css-backgrounds-3/#background-position
+#[derive(Debug, Clone, PartialEq)]
+pub struct BackgroundPosition {
+  x: HorizontalPosition,
+  y: VerticalPosition
+}
+
+impl Parse for BackgroundPosition {
+  fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ()>> {
+    match input.try_parse(HorizontalPosition::parse) {
+      Ok(HorizontalPosition::Center) => {
+        // Try parsing a vertical position next.
+        if let Ok(y) = input.try_parse(VerticalPosition::parse) {
+          return Ok(BackgroundPosition {
+            x: HorizontalPosition::Center,
+            y
+          })
+        }
+
+        // If it didn't work, assume the first actually represents a y position,
+        // and the next is an x position. e.g. `center left` rather than `left center`.
+        let x = input
+          .try_parse(HorizontalPosition::parse)
+          .unwrap_or(HorizontalPosition::Center);
+        let y = VerticalPosition::Center;
+        return Ok(BackgroundPosition { x, y })
+      },
+      Ok(x @ HorizontalPosition::Length(_)) => {
+        // If we got a length as the first component, then the second must 
+        // be a keyword or length (not a side offset).
+        if let Ok(y_keyword) = input.try_parse(VerticalPositionKeyword::parse) {
+          let y = VerticalPosition::Side(y_keyword, None);
+          return Ok(BackgroundPosition { x, y });
+        }
+        if let Ok(y_lp) = input.try_parse(LengthPercentage::parse) {
+            let y = VerticalPosition::Length(y_lp);
+            return Ok(BackgroundPosition { x, y });
+        }
+        let y = VerticalPosition::Center;
+        let _ = input.try_parse(|i| i.expect_ident_matching("center"));
+        return Ok(BackgroundPosition { x, y });
+      }
+      Ok(HorizontalPosition::Side(x_keyword, lp)) => {
+        // If we got a horizontal side keyword (and optional offset), expect another for the vertical side.
+        // e.g. `left center` or `left 20px center`
+        if input.try_parse(|i| i.expect_ident_matching("center")).is_ok() {
+          let x = HorizontalPosition::Side(x_keyword, lp);
+          let y = VerticalPosition::Center;
+          return Ok(BackgroundPosition { x, y });
+        }
+
+        // e.g. `left top`, `left top 20px`, `left 20px top`, or `left 20px top 20px`
+        if let Ok(y_keyword) = input.try_parse(VerticalPositionKeyword::parse) {
+          let y_lp = input.try_parse(LengthPercentage::parse).ok();
+          let x = HorizontalPosition::Side(x_keyword, lp);
+          let y = VerticalPosition::Side(y_keyword, y_lp);
+          return Ok(BackgroundPosition { x, y });
+        }
+
+        // If we didn't get a vertical side keyword (e.g. `left 20px`), then apply the offset to the vertical side.
+        let x = HorizontalPosition::Side(x_keyword, None);
+        let y = lp.map_or(VerticalPosition::Center, VerticalPosition::Length);
+        return Ok(BackgroundPosition { x, y });
+      }
+      _ => {}
+    }
+
+    // If the horizontal position didn't parse, then it must be out of order. Try vertical position keyword.
+    let y_keyword = VerticalPositionKeyword::parse(input)?;
+    let lp_and_x_pos: Result<_, ParseError<()>> = input.try_parse(|i| {
+      let y_lp = i.try_parse(LengthPercentage::parse).ok();
+      if let Ok(x_keyword) = i.try_parse(HorizontalPositionKeyword::parse) {
+        let x_lp = i.try_parse(LengthPercentage::parse).ok();
+        let x_pos = HorizontalPosition::Side(x_keyword, x_lp);
+        return Ok((y_lp, x_pos));
+      }
+      i.expect_ident_matching("center")?;
+      let x_pos = HorizontalPosition::Center;
+      Ok((y_lp, x_pos))
+    });
+
+    if let Ok((y_lp, x)) = lp_and_x_pos {
+      let y = VerticalPosition::Side(y_keyword, y_lp);
+      return Ok(BackgroundPosition { x, y });
+    }
+
+    let x = HorizontalPosition::Center;
+    let y = VerticalPosition::Side(y_keyword, None);
+    Ok(BackgroundPosition { x, y })
+  }
+}
+
+impl ToCss for BackgroundPosition {
+  fn to_css<W>(&self, dest: &mut W) -> std::fmt::Result where W: std::fmt::Write {
+    match (&self.x, &self.y) {
+      (
+        x_pos @ &HorizontalPosition::Side(_, Some(_)),
+        &VerticalPosition::Length(ref y_lp),
+      ) => {
+        x_pos.to_css(dest)?;
+        dest.write_str(" top ")?;
+        y_lp.to_css(dest)
+      },
+      (
+        &HorizontalPosition::Length(ref x_lp),
+        y_pos @ &VerticalPosition::Side(_, Some(_)),
+      ) => {
+        dest.write_str("left ")?;
+        x_lp.to_css(dest)?;
+        dest.write_str(" ")?;
+        y_pos.to_css(dest)
+      },
+      (x_pos, y_pos) => {
+        x_pos.to_css(dest)?;
+        dest.write_str(" ")?;
+        y_pos.to_css(dest)
+      },
+    }
+  }
+}

src/properties/mod.rs

@@ -1,18 +1,20 @@
 mod custom;
 pub mod margin_padding;
+pub mod background;
 
 use cssparser::*;
 use custom::*;
+use background::*;
 use crate::values::{image::*, length::*, border::*, border_image::*, border_radius::*, rect::*, color::*};
 use super::values::traits::{Parse, ToCss};
 
 #[derive(Debug, Clone)]
 pub enum Property {
   BackgroundColor(CssColor),
   BackgroundImage(Vec<Image>),
-  // BackgroundPositionX
-  // BackgroundPositionY
-  // BackgroundPosition
+  BackgroundPositionX(HorizontalPosition),
+  BackgroundPositionY(VerticalPosition),
+  BackgroundPosition(BackgroundPosition),
   // BackgroundSize
   // BackgroundRepeat
   // BackgroundAttachment
@@ -191,6 +193,9 @@ impl Property {
     match name.as_ref() {
       "background-color" => property!(BackgroundColor, CssColor),
       "background-image" => property!(BackgroundImage, Image, true),
+      "background-position-x" => property!(BackgroundPositionX, HorizontalPosition),
+      "background-position-y" => property!(BackgroundPositionY, VerticalPosition),
+      "background-position" => property!(BackgroundPosition, BackgroundPosition),
       "color" => property!(Color, CssColor),
       "width" => property!(Width, Size),
       "height" => property!(Height, Size),
@@ -350,6 +355,9 @@ impl Property {
     match self {
       BackgroundColor(color) => property!("background-color", color),
       BackgroundImage(image) => property!("background-image", image, true),
+      BackgroundPositionX(val) => property!("background-position-x", val),
+      BackgroundPositionY(val) => property!("background-position-y", val),
+      BackgroundPosition(val) => property!("background-position", val),
       Color(color) => property!("color", color),
       Width(val) => property!("width", val),
       Height(val) => property!("height", val),

src/values/length.rs

@@ -1,5 +1,6 @@
 use cssparser::*;
 use super::traits::{Parse, ToCss};
+use super::macros::enum_property;
 
 /// https://drafts.csswg.org/css-sizing-3/#specifying-sizes
 
@@ -417,3 +418,60 @@ pub fn serialize_number<W>(number: f32, dest: &mut W) -> std::fmt::Result where
   };
   tok.to_css(dest)
 }
+
+#[derive(Debug, Clone, PartialEq)]
+pub enum Position<S> {
+  /// `center`
+  Center,
+  /// `<length-percentage>`
+  Length(LengthPercentage),
+  /// `<side> <length-percentage>?`
+  Side(S, Option<LengthPercentage>),
+}
+
+impl<S: Parse> Parse for Position<S> {
+  fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i, ()>> {
+    if input.try_parse(|i| i.expect_ident_matching("center")).is_ok() {
+      return Ok(Position::Center);
+    }
+
+    if let Ok(lp) = input.try_parse(|input| LengthPercentage::parse(input)) {
+      return Ok(Position::Length(lp));
+    }
+
+    let keyword = S::parse(input)?;
+    let lp = input.try_parse(|input| LengthPercentage::parse(input)).ok();
+    Ok(Position::Side(keyword, lp))
+  }
+}
+
+impl<S: ToCss> ToCss for Position<S> {
+  fn to_css<W>(&self, dest: &mut W) -> std::fmt::Result where W: std::fmt::Write {
+    use Position::*;
+    match &self {
+      Center => dest.write_str("center"),
+      Length(lp) => lp.to_css(dest),
+      Side(s, lp) => {
+        s.to_css(dest)?;
+        if let Some(lp) = lp {
+          dest.write_str(" ")?;
+          lp.to_css(dest)?;
+        }
+        Ok(())
+      }
+    }
+  }
+}
+
+enum_property!(HorizontalPositionKeyword,
+  Left,
+  Right
+);
+
+enum_property!(VerticalPositionKeyword,
+  Top,
+  Bottom
+);
+
+pub type HorizontalPosition = Position<HorizontalPositionKeyword>;
+pub type VerticalPosition = Position<VerticalPositionKeyword>;

test.js

@@ -7,6 +7,8 @@ css.transform({
 .foo + .bar:not(.baz) {
   background-color: blue;
   background-image: url(img.png), url('test.jpg');
+  background-position-x: right 20px;
+  background-position-y: top 20px;
   color: blue;
   width: 250px;
   height: 50%;