add support for mask_position_parse/serial

5 files changed, 213 insertions, 182 deletions

diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 7524d7fa6eb..40ee0b2b2b7 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -1683,72 +1683,56 @@ fn static_assert() {
         }
     </%self:simple_image_array_property>
 
-    % if shorthand != "background":
-    pub fn copy_${shorthand}_position_from(&mut self, other: &Self) {
+    % for orientation in [("x", "Horizontal"), ("y", "Vertical")]:
+    pub fn copy_${shorthand}_position_${orientation[0]}_from(&mut self, other: &Self) {
         use gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
 
-        self.gecko.${image_layers_field}.mPositionXCount
-                = cmp::min(1, other.gecko.${image_layers_field}.mPositionXCount);
-        self.gecko.${image_layers_field}.mPositionYCount
-                = cmp::min(1, other.gecko.${image_layers_field}.mPositionYCount);
+        self.gecko.${image_layers_field}.mPosition${orientation[0].upper()}Count
+            = cmp::min(1, other.gecko.${image_layers_field}.mPosition${orientation[0].upper()}Count);
         self.gecko.${image_layers_field}.mLayers.mFirstElement.mPosition =
             other.gecko.${image_layers_field}.mLayers.mFirstElement.mPosition;
         unsafe {
             Gecko_EnsureImageLayersLength(&mut self.gecko.${image_layers_field},
                                           other.gecko.${image_layers_field}.mLayers.len(),
-                                          LayerType::${shorthand.title()});
-        }
-        for (layer, other) in self.gecko.${image_layers_field}.mLayers.iter_mut()
-                                  .zip(other.gecko.${image_layers_field}.mLayers.iter())
-                                  .take(other.gecko.${image_layers_field}.mPositionXCount as usize) {
-            layer.mPosition.mXPosition
-                = other.mPosition.mXPosition;
+                                          LayerType::${shorthand.capitalize()});
         }
+
         for (layer, other) in self.gecko.${image_layers_field}.mLayers.iter_mut()
-                                  .zip(other.gecko.${image_layers_field}.mLayers.iter())
-                                  .take(other.gecko.${image_layers_field}.mPositionYCount as usize) {
-            layer.mPosition.mYPosition
-                = other.mPosition.mYPosition;
+                                  .zip(other.gecko.${image_layers_field}.mLayers.iter()) {
+            layer.mPosition.m${orientation[0].upper()}Position
+                = other.mPosition.m${orientation[0].upper()}Position;
         }
-        self.gecko.${image_layers_field}.mPositionXCount
-                = other.gecko.${image_layers_field}.mPositionXCount;
-        self.gecko.${image_layers_field}.mPositionYCount
-                = other.gecko.${image_layers_field}.mPositionYCount;
+        self.gecko.${image_layers_field}.mPosition${orientation[0].upper()}Count
+               = other.gecko.${image_layers_field}.mPosition${orientation[0].upper()}Count;
     }
 
-    pub fn clone_${shorthand}_position(&self)
-        -> longhands::${shorthand}_position::computed_value::T {
-        use values::computed::position::Position;
-        longhands::${shorthand}_position::computed_value::T(
+    pub fn clone_${shorthand}_position_${orientation[0]}(&self)
+        -> longhands::${shorthand}_position_${orientation[0]}::computed_value::T {
+        use values::computed::position::${orientation[1]}Position;
+        longhands::${shorthand}_position_${orientation[0]}::computed_value::T(
             self.gecko.${image_layers_field}.mLayers.iter()
-                .take(self.gecko.${image_layers_field}.mPositionXCount as usize)
-                .take(self.gecko.${image_layers_field}.mPositionYCount as usize)
-                .map(|position| Position {
-                    horizontal: position.mPosition.mXPosition.into(),
-                    vertical: position.mPosition.mYPosition.into(),
-                })
+                .take(self.gecko.${image_layers_field}.mPosition${orientation[0].upper()}Count as usize)
+                .map(|position| ${orientation[1]}Position(position.mPosition.m${orientation[0].upper()}Position.into()))
                 .collect()
         )
     }
 
-    pub fn set_${shorthand}_position(&mut self,
-                                     v: longhands::${shorthand}_position::computed_value::T) {
+    pub fn set_${shorthand}_position_${orientation[0]}(&mut self,
+                                     v: longhands::${shorthand}_position_${orientation[0]}::computed_value::T) {
         use gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
 
         unsafe {
-          Gecko_EnsureImageLayersLength(&mut self.gecko.${image_layers_field}, v.0.len(),
-                                        LayerType::${shorthand.title()});
+            Gecko_EnsureImageLayersLength(&mut self.gecko.${image_layers_field}, v.0.len(),
+                                        LayerType::${shorthand.capitalize()});
         }
 
-        self.gecko.${image_layers_field}.mPositionXCount = v.0.len() as u32;
-        self.gecko.${image_layers_field}.mPositionYCount = v.0.len() as u32;
+        self.gecko.${image_layers_field}.mPosition${orientation[0].upper()}Count = v.0.len() as u32;
         for (servo, geckolayer) in v.0.into_iter().zip(self.gecko.${image_layers_field}
                                                            .mLayers.iter_mut()) {
-            geckolayer.mPosition.mXPosition = servo.horizontal.into();
-            geckolayer.mPosition.mYPosition = servo.vertical.into();
+            geckolayer.mPosition.m${orientation[0].upper()}Position = servo.0.into();
         }
     }
-    % endif
+    % endfor
 
     <%self:simple_image_array_property name="size" shorthand="${shorthand}" field_name="mSize">
         use gecko_bindings::structs::nsStyleImageLayers_Size_Dimension;
@@ -1938,56 +1922,6 @@ fn static_assert() {
             T::luminosity => structs::NS_STYLE_BLEND_LUMINOSITY as u8,
         }
     </%self:simple_image_array_property>
-
-    % for orientation in [("x", "Horizontal"), ("y", "Vertical")]:
-    pub fn copy_background_position_${orientation[0]}_from(&mut self, other: &Self) {
-        use gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
-
-        self.gecko.mImage.mPosition${orientation[0].upper()}Count
-                = cmp::min(1, other.gecko.mImage.mPosition${orientation[0].upper()}Count);
-        self.gecko.mImage.mLayers.mFirstElement.mPosition =
-            other.gecko.mImage.mLayers.mFirstElement.mPosition;
-        unsafe {
-            Gecko_EnsureImageLayersLength(&mut self.gecko.mImage,
-                                          other.gecko.mImage.mLayers.len(),
-                                          LayerType::Background);
-        }
-        for (layer, other) in self.gecko.mImage.mLayers.iter_mut()
-                                  .zip(other.gecko.mImage.mLayers.iter()) {
-            layer.mPosition.m${orientation[0].upper()}Position
-                = other.mPosition.m${orientation[0].upper()}Position;
-        }
-        self.gecko.mImage.mPosition${orientation[0].upper()}Count
-                = other.gecko.mImage.mPosition${orientation[0].upper()}Count;
-    }
-
-    pub fn clone_background_position_${orientation[0]}(&self)
-        -> longhands::background_position_${orientation[0]}::computed_value::T {
-        use values::computed::position::${orientation[1]}Position;
-        longhands::background_position_${orientation[0]}::computed_value::T(
-            self.gecko.mImage.mLayers.iter()
-                .take(self.gecko.mImage.mPosition${orientation[0].upper()}Count as usize)
-                .map(|position| ${orientation[1]}Position(position.mPosition.m${orientation[0].upper()}Position.into()))
-                .collect()
-        )
-    }
-
-    pub fn set_background_position_${orientation[0]}(&mut self,
-                                     v: longhands::background_position_${orientation[0]}::computed_value::T) {
-        use gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
-
-        unsafe {
-          Gecko_EnsureImageLayersLength(&mut self.gecko.mImage, v.0.len(),
-                                        LayerType::Background);
-        }
-
-        self.gecko.mImage.mPosition${orientation[0].upper()}Count = v.0.len() as u32;
-        for (servo, geckolayer) in v.0.into_iter().zip(self.gecko.mImage
-                                                           .mLayers.iter_mut()) {
-            geckolayer.mPosition.m${orientation[0].upper()}Position = servo.0.into();
-        }
-    }
-    % endfor
 </%self:impl_trait>
 
 <%self:impl_trait style_struct_name="List"
@@ -2471,7 +2405,7 @@ fn static_assert() {
 </%self:impl_trait>
 
 <% skip_svg_longhands = """
-mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position mask-size mask-image
+mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x mask-position-y mask-size mask-image
 clip-path
 """
 %>
@@ -2633,7 +2567,6 @@ clip-path
             }
         }
     }
-
 </%self:impl_trait>
 
 <%self:impl_trait style_struct_name="Color"
diff --git a/components/style/properties/longhand/svg.mako.rs b/components/style/properties/longhand/svg.mako.rs
index 5e294b0b77f..b75a9c26255 100644
--- a/components/style/properties/longhand/svg.mako.rs
+++ b/components/style/properties/longhand/svg.mako.rs
@@ -103,59 +103,46 @@ ${helpers.single_keyword("mask-repeat",
                          animatable=False,
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-repeat")}
 
-<%helpers:vector_longhand name="mask-position" products="gecko" animatable="True" extra_prefixes="webkit"
+<%helpers:vector_longhand name="mask-position-x" products="gecko" animatable="True" extra_prefixes="webkit"
                           spec="https://drafts.fxtf.org/css-masking/#propdef-mask-position">
-    use std::fmt;
-    use style_traits::ToCss;
-    use values::HasViewportPercentage;
-    use values::specified::position::Position;
-
-    pub mod computed_value {
-        use values::computed::position::Position;
-        use properties::animated_properties::{Interpolate, RepeatableListInterpolate};
-        use properties::longhands::mask_position::computed_value::T as MaskPosition;
-
-        pub type T = Position;
-
-        impl RepeatableListInterpolate for MaskPosition {}
-
-        impl Interpolate for MaskPosition {
-            fn interpolate(&self, other: &Self, progress: f64) -> Result<Self, ()> {
-                Ok(MaskPosition(try!(self.0.interpolate(&other.0, progress))))
-            }
+    pub use properties::longhands::background_position_x::single_value::get_initial_value;
+    pub use properties::longhands::background_position_x::single_value::get_initial_position_value;
+    pub use properties::longhands::background_position_x::single_value::get_initial_specified_value;
+    pub use properties::longhands::background_position_x::single_value::parse;
+    pub use properties::longhands::background_position_x::single_value::SpecifiedValue;
+    pub use properties::longhands::background_position_x::single_value::computed_value;
+    use properties::animated_properties::{Interpolate, RepeatableListInterpolate};
+    use properties::longhands::mask_position_x::computed_value::T as MaskPositionX;
+
+    impl Interpolate for MaskPositionX {
+        #[inline]
+        fn interpolate(&self, other: &Self, progress: f64) -> Result<Self, ()> {
+            Ok(MaskPositionX(try!(self.0.interpolate(&other.0, progress))))
         }
     }
 
-    pub type SpecifiedValue = Position;
+    impl RepeatableListInterpolate for MaskPositionX {}
+</%helpers:vector_longhand>
 
-    #[inline]
-    pub fn get_initial_value() -> computed_value::T {
-        use values::computed::position::Position;
-        Position {
-            horizontal: computed::LengthOrPercentage::Percentage(0.0),
-            vertical: computed::LengthOrPercentage::Percentage(0.0),
-        }
-    }
-    #[inline]
-    pub fn get_initial_specified_value() -> SpecifiedValue {
-        use values::specified::Percentage;
-        use values::specified::position::{HorizontalPosition, VerticalPosition};
-        Position {
-            horizontal: HorizontalPosition {
-                keyword: None,
-                position: Some(specified::LengthOrPercentage::Percentage(Percentage(0.0))),
-            },
-            vertical: VerticalPosition {
-                keyword: None,
-                position: Some(specified::LengthOrPercentage::Percentage(Percentage(0.0))),
-            },
+<%helpers:vector_longhand name="mask-position-y" products="gecko" animatable="True" extra_prefixes="webkit"
+                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-position">
+    pub use properties::longhands::background_position_y::single_value::get_initial_value;
+    pub use properties::longhands::background_position_y::single_value::get_initial_position_value;
+    pub use properties::longhands::background_position_y::single_value::get_initial_specified_value;
+    pub use properties::longhands::background_position_y::single_value::parse;
+    pub use properties::longhands::background_position_y::single_value::SpecifiedValue;
+    pub use properties::longhands::background_position_y::single_value::computed_value;
+    use properties::animated_properties::{Interpolate, RepeatableListInterpolate};
+    use properties::longhands::mask_position_y::computed_value::T as MaskPositionY;
+
+    impl Interpolate for MaskPositionY {
+        #[inline]
+        fn interpolate(&self, other: &Self, progress: f64) -> Result<Self, ()> {
+            Ok(MaskPositionY(try!(self.0.interpolate(&other.0, progress))))
         }
     }
 
-    pub fn parse(context: &ParserContext, input: &mut Parser)
-                 -> Result<SpecifiedValue, ()> {
-        Position::parse(context, input)
-    }
+    impl RepeatableListInterpolate for MaskPositionY {}
 </%helpers:vector_longhand>
 
 ${helpers.single_keyword("mask-clip",
diff --git a/components/style/properties/shorthand/mask.mako.rs b/components/style/properties/shorthand/mask.mako.rs
index 2846cd15b9f..f71652fac2d 100644
--- a/components/style/properties/shorthand/mask.mako.rs
+++ b/components/style/properties/shorthand/mask.mako.rs
@@ -5,11 +5,14 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="mask" products="gecko" extra_prefixes="webkit"
-                    sub_properties="mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position
-                                    mask-size mask-image"
+                    sub_properties="mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x
+                                    mask-position-y mask-size mask-image"
                     spec="https://drafts.fxtf.org/css-masking/#propdef-mask">
-    use properties::longhands::{mask_mode, mask_repeat, mask_clip, mask_origin, mask_composite, mask_position};
+    use properties::longhands::{mask_mode, mask_repeat, mask_clip, mask_origin, mask_composite, mask_position_x,
+                                mask_position_y};
     use properties::longhands::{mask_size, mask_image};
+    use values::specified::position::Position;
+    use parser::Parse;
 
     impl From<mask_origin::single_value::SpecifiedValue> for mask_clip::single_value::SpecifiedValue {
         fn from(origin: mask_origin::single_value::SpecifiedValue) -> mask_clip::single_value::SpecifiedValue {
@@ -33,12 +36,12 @@
     }
 
     pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
-        % for name in "image mode position size repeat origin clip composite".split():
+        % for name in "image mode position_x position_y size repeat origin clip composite".split():
             let mut mask_${name} = mask_${name}::SpecifiedValue(Vec::new());
         % endfor
 
         try!(input.parse_comma_separated(|input| {
-            % for name in "image mode position size repeat origin clip composite".split():
+            % for name in "image mode position_x position_y size repeat origin clip composite".split():
                 let mut ${name} = None;
             % endfor
             loop {
@@ -53,10 +56,10 @@
                         continue
                     }
                 }
-                if position.is_none() {
-                    if let Ok(value) = input.try(|input| mask_position::single_value
-                                                                      ::parse(context, input)) {
-                        position = Some(value);
+                if position_x.is_none() && position_y.is_none() {
+                    if let Ok(value) = input.try(|input| Position::parse(context, input)) {
+                        position_x = Some(value.horizontal);
+                        position_y = Some(value.vertical);
 
                         // Parse mask size, if applicable.
                         size = input.try(|input| {
@@ -84,11 +87,23 @@
                 }
             }
             let mut any = false;
-            % for name in "image mode position size repeat origin clip composite".split():
+            % for name in "image mode position_x position_y size repeat origin clip composite".split():
                 any = any || ${name}.is_some();
             % endfor
             if any {
-                % for name in "image mode position size repeat origin clip composite".split():
+                if position_x.is_some() || position_y.is_some() {
+                    % for name in "position_x position_y".split():
+                        if let Some(bg_${name}) = ${name} {
+                            mask_${name}.0.push(bg_${name});
+                        }
+                    % endfor
+                } else {
+                    % for name in "position_x position_y".split():
+                        mask_${name}.0.push(mask_${name}::single_value
+                                            ::get_initial_position_value());
+                    % endfor
+                }
+                % for name in "image mode size repeat origin clip composite".split():
                     if let Some(m_${name}) = ${name} {
                         mask_${name}.0.push(m_${name});
                     } else {
@@ -103,7 +118,7 @@
         }));
 
         Ok(Longhands {
-            % for name in "image mode position size repeat origin clip composite".split():
+            % for name in "image mode position_x position_y size repeat origin clip composite".split():
                 mask_${name}: Some(mask_${name}),
             % endfor
          })
@@ -120,7 +135,7 @@
             }
             use std::cmp;
             let mut len = 0;
-            % for name in "image mode position size repeat origin clip composite".split():
+            % for name in "image mode position_x position_y size repeat origin clip composite".split():
                 len = cmp::max(len, extract_value(self.mask_${name}).map(|i| i.0.len())
                                                                    .unwrap_or(0));
             % endfor
@@ -131,7 +146,7 @@
             }
 
             for i in 0..len {
-                % for name in "image mode position size repeat origin clip composite".split():
+                % for name in "image mode position_x position_y size repeat origin clip composite".split():
                     let ${name} = if let DeclaredValue::Value(ref arr) = *self.mask_${name} {
                         arr.0.get(i % arr.0.len())
                     } else {
@@ -155,9 +170,15 @@
 
                 try!(write!(dest, " "));
 
-                try!(position.unwrap_or(&mask_position::single_value
-                                                      ::get_initial_specified_value())
-                             .to_css(dest));
+                try!(position_x.unwrap_or(&mask_position_x::single_value
+                                                      ::get_initial_position_value())
+                     .to_css(dest));
+
+                try!(write!(dest, " "));
+
+                try!(position_y.unwrap_or(&mask_position_y::single_value
+                                                      ::get_initial_position_value())
+                     .to_css(dest));
 
                 if let Some(size) = size {
                     try!(write!(dest, " / "));
@@ -212,3 +233,85 @@
         }
     }
 </%helpers:shorthand>
+
+<%helpers:shorthand name="mask-position" products="gecko" extra_prefixes="webkit"
+                    sub_properties="mask-position-x mask-position-y"
+                    spec="https://drafts.csswg.org/css-masks-4/#the-mask-position">
+    use properties::longhands::{mask_position_x,mask_position_y};
+    use values::specified::position::Position;
+    use parser::Parse;
+
+    pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
+        let mut position_x = mask_position_x::SpecifiedValue(Vec::new());
+        let mut position_y = mask_position_y::SpecifiedValue(Vec::new());
+        let mut any = false;
+
+        try!(input.parse_comma_separated(|input| {
+            loop {
+                if let Ok(value) = input.try(|input| Position::parse(context, input)) {
+                    position_x.0.push(value.horizontal);
+                    position_y.0.push(value.vertical);
+                    any = true;
+                    continue
+                }
+                break
+            }
+            Ok(())
+        }));
+        if any == false {
+            return Err(());
+        }
+
+        Ok(Longhands {
+            mask_position_x: Some(position_x),
+            mask_position_y: Some(position_y),
+        })
+    }
+
+    impl<'a> LonghandsToSerialize<'a>  {
+        fn to_css_declared<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            // mako doesn't like ampersands following `<`
+            fn extract_value<T>(x: &DeclaredValue<T>) -> Option< &T> {
+                match *x {
+                    DeclaredValue::Value(ref val) => Some(val),
+                    _ => None,
+                }
+            }
+            use std::cmp;
+            let mut len = 0;
+            % for name in "x y".split():
+                len = cmp::max(len, extract_value(self.mask_position_${name})
+                                                      .map(|i| i.0.len())
+                                                      .unwrap_or(0));
+            % endfor
+
+            // There should be at least one declared value
+            if len == 0 {
+                return dest.write_str("")
+            }
+
+            for i in 0..len {
+                % for name in "x y".split():
+                    let position_${name} = if let DeclaredValue::Value(ref arr) =
+                                           *self.mask_position_${name} {
+                        arr.0.get(i % arr.0.len())
+                    } else {
+                        None
+                    };
+                % endfor
+
+                try!(position_x.unwrap_or(&mask_position_x::single_value
+                                                                ::get_initial_position_value())
+                               .to_css(dest));
+
+                try!(write!(dest, " "));
+
+                try!(position_y.unwrap_or(&mask_position_y::single_value
+                                                                ::get_initial_position_value())
+                               .to_css(dest));
+            }
+
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
diff --git a/tests/unit/style/parsing/mask.rs b/tests/unit/style/parsing/mask.rs
index 98abe602e46..466f2b24a93 100644
--- a/tests/unit/style/parsing/mask.rs
+++ b/tests/unit/style/parsing/mask.rs
@@ -7,7 +7,7 @@ use media_queries::CSSErrorReporterTest;
 use servo_url::ServoUrl;
 use style::parser::ParserContext;
 use style::properties::longhands::{mask_clip, mask_composite, mask_image, mask_mode};
-use style::properties::longhands::{mask_origin, mask_position, mask_repeat, mask_size};
+use style::properties::longhands::{mask_origin, mask_position_x, mask_position_y, mask_repeat, mask_size};
 use style::properties::shorthands::mask;
 use style::stylesheets::Origin;
 
@@ -21,7 +21,8 @@ fn mask_shorthand_should_parse_all_available_properties_when_specified() {
 
     assert_eq!(result.mask_image.unwrap(), parse_longhand!(mask_image, "url(\"http://servo/test.png\")"));
     assert_eq!(result.mask_mode.unwrap(), parse_longhand!(mask_mode, "luminance"));
-    assert_eq!(result.mask_position.unwrap(), parse_longhand!(mask_position, "7px 4px"));
+    assert_eq!(result.mask_position_x.unwrap(), parse_longhand!(mask_position_x, "7px"));
+    assert_eq!(result.mask_position_y.unwrap(), parse_longhand!(mask_position_y, "4px"));
     assert_eq!(result.mask_size.unwrap(), parse_longhand!(mask_size, "70px 50px"));
     assert_eq!(result.mask_repeat.unwrap(), parse_longhand!(mask_repeat, "repeat-x"));
     assert_eq!(result.mask_origin.unwrap(), parse_longhand!(mask_origin, "padding-box"));
@@ -36,7 +37,8 @@ fn mask_shorthand_should_parse_when_some_fields_set() {
     let mut parser = Parser::new("14px 40px repeat-y");
     let result = mask::parse_value(&context, &mut parser).unwrap();
 
-    assert_eq!(result.mask_position.unwrap(), parse_longhand!(mask_position, "14px 40px"));
+    assert_eq!(result.mask_position_x.unwrap(), parse_longhand!(mask_position_x, "14px"));
+    assert_eq!(result.mask_position_y.unwrap(), parse_longhand!(mask_position_y, "40px"));
     assert_eq!(result.mask_repeat.unwrap(), parse_longhand!(mask_repeat, "repeat-y"));
 
     let mut parser = Parser::new("url(\"http://servo/test.png\") repeat add");
@@ -64,12 +66,14 @@ fn mask_shorthand_should_parse_position_and_size_correctly() {
     let mut parser = Parser::new("7px 4px");
     let result = mask::parse_value(&context, &mut parser).unwrap();
 
-    assert_eq!(result.mask_position.unwrap(), parse_longhand!(mask_position, "7px 4px"));
+    assert_eq!(result.mask_position_x.unwrap(), parse_longhand!(mask_position_x, "7px"));
+    assert_eq!(result.mask_position_y.unwrap(), parse_longhand!(mask_position_y, "4px"));
 
     let mut parser = Parser::new("7px 4px / 30px 20px");
     let result = mask::parse_value(&context, &mut parser).unwrap();
 
-    assert_eq!(result.mask_position.unwrap(), parse_longhand!(mask_position, "7px 4px"));
+    assert_eq!(result.mask_position_x.unwrap(), parse_longhand!(mask_position_x, "7px"));
+    assert_eq!(result.mask_position_y.unwrap(), parse_longhand!(mask_position_y, "4px"));
     assert_eq!(result.mask_size.unwrap(), parse_longhand!(mask_size, "30px 20px"));
 
     let mut parser = Parser::new("/ 30px 20px");
diff --git a/tests/unit/style/properties/serialization.rs b/tests/unit/style/properties/serialization.rs
index 4d83aad5905..d1826cc4248 100644
--- a/tests/unit/style/properties/serialization.rs
+++ b/tests/unit/style/properties/serialization.rs
@@ -879,7 +879,8 @@ mod shorthand_serialization {
         use style::properties::longhands::mask_image as image;
         use style::properties::longhands::mask_mode as mode;
         use style::properties::longhands::mask_origin as origin;
-        use style::properties::longhands::mask_position as position;
+        use style::properties::longhands::mask_position_x as position_x;
+        use style::properties::longhands::mask_position_y as position_y;
         use style::properties::longhands::mask_repeat as repeat;
         use style::properties::longhands::mask_size as size;
         use style::values::specified::Image;
@@ -918,16 +919,16 @@ mod shorthand_serialization {
 
             let mode = single_vec_keyword_value!(mode, luminance);
 
-            let position = single_vec_value_typedef!(position,
-                Position {
-                    horizontal: HorizontalPosition {
-                        keyword: None,
-                        position: Some(LengthOrPercentage::Length(NoCalcLength::from_px(7f32))),
-                    },
-                    vertical: VerticalPosition {
-                        keyword: None,
-                        position: Some(LengthOrPercentage::Length(NoCalcLength::from_px(4f32))),
-                    },
+            let position_x = single_vec_value_typedef!(position_x,
+                HorizontalPosition {
+                    keyword: None,
+                    position: Some(LengthOrPercentage::Length(NoCalcLength::from_px(7f32))),
+                }
+            );
+            let position_y = single_vec_value_typedef!(position_y,
+                VerticalPosition {
+                    keyword: None,
+                    position: Some(LengthOrPercentage::Length(NoCalcLength::from_px(4f32))),
                 }
             );
 
@@ -947,7 +948,8 @@ mod shorthand_serialization {
 
             properties.push(PropertyDeclaration::MaskImage(image));
             properties.push(PropertyDeclaration::MaskMode(mode));
-            properties.push(PropertyDeclaration::MaskPosition(position));
+            properties.push(PropertyDeclaration::MaskPositionX(position_x));
+            properties.push(PropertyDeclaration::MaskPositionY(position_y));
             properties.push(PropertyDeclaration::MaskSize(size));
             properties.push(PropertyDeclaration::MaskRepeat(repeat));
             properties.push(PropertyDeclaration::MaskOrigin(origin));
@@ -972,16 +974,17 @@ mod shorthand_serialization {
 
             let mode = single_vec_keyword_value!(mode, luminance);
 
-            let position = single_vec_value_typedef!(position,
-                Position {
-                    horizontal: HorizontalPosition {
-                        keyword: None,
-                        position: Some(LengthOrPercentage::Length(NoCalcLength::from_px(7f32))),
-                    },
-                    vertical: VerticalPosition {
-                        keyword: None,
-                        position: Some(LengthOrPercentage::Length(NoCalcLength::from_px(4f32))),
-                    },
+            let position_x = single_vec_value_typedef!(position_x,
+                HorizontalPosition {
+                    keyword: None,
+                    position: Some(LengthOrPercentage::Length(NoCalcLength::from_px(7f32))),
+                }
+            );
+
+            let position_y = single_vec_value_typedef!(position_y,
+                VerticalPosition {
+                    keyword: None,
+                    position: Some(LengthOrPercentage::Length(NoCalcLength::from_px(4f32))),
                 }
             );
 
@@ -1001,7 +1004,8 @@ mod shorthand_serialization {
 
             properties.push(PropertyDeclaration::MaskImage(image));
             properties.push(PropertyDeclaration::MaskMode(mode));
-            properties.push(PropertyDeclaration::MaskPosition(position));
+            properties.push(PropertyDeclaration::MaskPositionX(position_x));
+            properties.push(PropertyDeclaration::MaskPositionY(position_y));
             properties.push(PropertyDeclaration::MaskSize(size));
             properties.push(PropertyDeclaration::MaskRepeat(repeat));
             properties.push(PropertyDeclaration::MaskOrigin(origin));