Auto merge of #13989 - canaltinova:border-image, r=Manishearth

Implement border-image-* longhands in stylo

Implementation of border-image-\* longhands in stylo. PR covers just parsing/serialization part for now. I'll write gecko glue next.
I wanted to open a WIP pr to get early feedback about these parts. I made a `SingleSpecifiedValue` enums to handle {1, 4} values. I'm not sure about naming. I did like this because `keyword_list` helper is doing similar.

r? @emilio or @Manishearth
---

<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors

<!-- Either: -->
- [ ] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- 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/13989)

<!-- Reviewable:end -->

8 files changed, 1097 insertions, 207 deletions

diff --git a/components/style/gecko/conversions.rs b/components/style/gecko/conversions.rs
index bb8ba94fc16..c002ebf86e7 100644
--- a/components/style/gecko/conversions.rs
+++ b/components/style/gecko/conversions.rs
@@ -9,13 +9,16 @@
 #![allow(unsafe_code)]
 
 use app_units::Au;
-use gecko_bindings::bindings::{RawServoStyleSheet, ServoComputedValues, RawServoDeclarationBlock};
-use gecko_bindings::structs::nsStyleCoord_CalcValue;
+use gecko::values::{convert_rgba_to_nscolor, StyleCoordHelpers};
+use gecko_bindings::bindings::{Gecko_CreateGradient, Gecko_SetGradientImageValue, Gecko_SetUrlImageValue};
+use gecko_bindings::bindings::{RawServoStyleSheet, RawServoDeclarationBlock, ServoComputedValues};
+use gecko_bindings::structs::{nsStyleCoord_CalcValue, nsStyleImage};
+use gecko_bindings::sugar::ns_style_coord::{CoordDataValue, CoordDataMut};
 use gecko_bindings::sugar::ownership::{HasArcFFI, HasFFI};
 use parking_lot::RwLock;
 use properties::{ComputedValues, PropertyDeclarationBlock};
 use stylesheets::Stylesheet;
-use values::computed::{CalcLengthOrPercentage, LengthOrPercentage, LengthOrPercentageOrAuto};
+use values::computed::{CalcLengthOrPercentage, Gradient, Image, LengthOrPercentage, LengthOrPercentageOrAuto};
 
 unsafe impl HasFFI for Stylesheet {
     type FFIType = RawServoStyleSheet;
@@ -111,6 +114,197 @@ impl From<nsStyleCoord_CalcValue> for LengthOrPercentage {
     }
 }
 
+impl nsStyleImage {
+    pub fn set(&mut self, image: Image, with_url: bool, cacheable: &mut bool) {
+        match image {
+            Image::Gradient(gradient) => {
+                self.set_gradient(gradient)
+            },
+            Image::Url(ref url, ref extra_data) if with_url => {
+                unsafe {
+                    Gecko_SetUrlImageValue(self,
+                                           url.as_str().as_ptr(),
+                                           url.as_str().len() as u32,
+                                           extra_data.base.get(),
+                                           extra_data.referrer.get(),
+                                           extra_data.principal.get());
+                }
+                // We unfortunately must make any url() value uncacheable, since
+                // the applicable declarations cache is not per document, but
+                // global, and the imgRequestProxy objects we store in the style
+                // structs don't like to be tracked by more than one document.
+                *cacheable = false;
+            },
+            _ => (),
+        }
+    }
+
+    fn set_gradient(&mut self, gradient: Gradient) {
+        use cssparser::Color as CSSColor;
+        use gecko_bindings::structs::{NS_STYLE_GRADIENT_SHAPE_CIRCULAR, NS_STYLE_GRADIENT_SHAPE_ELLIPTICAL};
+        use gecko_bindings::structs::{NS_STYLE_GRADIENT_SHAPE_LINEAR, NS_STYLE_GRADIENT_SIZE_CLOSEST_CORNER};
+        use gecko_bindings::structs::{NS_STYLE_GRADIENT_SIZE_CLOSEST_SIDE, NS_STYLE_GRADIENT_SIZE_EXPLICIT_SIZE};
+        use gecko_bindings::structs::{NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER, NS_STYLE_GRADIENT_SIZE_FARTHEST_SIDE};
+        use gecko_bindings::structs::nsStyleCoord;
+        use values::computed::{GradientKind, GradientShape, LengthOrKeyword};
+        use values::computed::LengthOrPercentageOrKeyword;
+        use values::specified::{AngleOrCorner, HorizontalDirection};
+        use values::specified::{SizeKeyword, VerticalDirection};
+
+        let stop_count = gradient.stops.len();
+        if stop_count >= ::std::u32::MAX as usize {
+            warn!("stylo: Prevented overflow due to too many gradient stops");
+            return;
+        }
+
+        let gecko_gradient = match gradient.gradient_kind {
+            GradientKind::Linear(angle_or_corner) => {
+                let gecko_gradient = unsafe {
+                    Gecko_CreateGradient(NS_STYLE_GRADIENT_SHAPE_LINEAR as u8,
+                                         NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER as u8,
+                                         gradient.repeating,
+                                         /* legacy_syntax = */ false,
+                                         stop_count as u32)
+                };
+
+                match angle_or_corner {
+                    AngleOrCorner::Angle(angle) => {
+                        unsafe {
+                            (*gecko_gradient).mAngle.set(angle);
+                            (*gecko_gradient).mBgPosX.set_value(CoordDataValue::None);
+                            (*gecko_gradient).mBgPosY.set_value(CoordDataValue::None);
+                        }
+                    },
+                    AngleOrCorner::Corner(horiz, vert) => {
+                        let percent_x = match horiz {
+                            HorizontalDirection::Left => 0.0,
+                            HorizontalDirection::Right => 1.0,
+                        };
+                        let percent_y = match vert {
+                            VerticalDirection::Top => 0.0,
+                            VerticalDirection::Bottom => 1.0,
+                        };
+
+                        unsafe {
+                            (*gecko_gradient).mAngle.set_value(CoordDataValue::None);
+                            (*gecko_gradient).mBgPosX
+                                             .set_value(CoordDataValue::Percent(percent_x));
+                            (*gecko_gradient).mBgPosY
+                                             .set_value(CoordDataValue::Percent(percent_y));
+                        }
+                    }
+                }
+                gecko_gradient
+            },
+            GradientKind::Radial(shape, position) => {
+                let (gecko_shape, gecko_size) = match shape {
+                    GradientShape::Circle(ref length) => {
+                        let size = match *length {
+                            LengthOrKeyword::Keyword(keyword) => {
+                                match keyword {
+                                    SizeKeyword::ClosestSide => NS_STYLE_GRADIENT_SIZE_CLOSEST_SIDE,
+                                    SizeKeyword::FarthestSide => NS_STYLE_GRADIENT_SIZE_FARTHEST_SIDE,
+                                    SizeKeyword::ClosestCorner => NS_STYLE_GRADIENT_SIZE_CLOSEST_CORNER,
+                                    SizeKeyword::FarthestCorner => NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER,
+                                }
+                            },
+                            _ => NS_STYLE_GRADIENT_SIZE_EXPLICIT_SIZE,
+                        };
+                        (NS_STYLE_GRADIENT_SHAPE_CIRCULAR as u8, size as u8)
+                    },
+                    GradientShape::Ellipse(ref length) => {
+                        let size = match *length {
+                            LengthOrPercentageOrKeyword::Keyword(keyword) => {
+                                match keyword {
+                                    SizeKeyword::ClosestSide => NS_STYLE_GRADIENT_SIZE_CLOSEST_SIDE,
+                                    SizeKeyword::FarthestSide => NS_STYLE_GRADIENT_SIZE_FARTHEST_SIDE,
+                                    SizeKeyword::ClosestCorner => NS_STYLE_GRADIENT_SIZE_CLOSEST_CORNER,
+                                    SizeKeyword::FarthestCorner => NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER,
+                                }
+                            },
+                            _ => NS_STYLE_GRADIENT_SIZE_EXPLICIT_SIZE,
+                        };
+                        (NS_STYLE_GRADIENT_SHAPE_ELLIPTICAL as u8, size as u8)
+                    }
+                };
+
+                let gecko_gradient = unsafe {
+                    Gecko_CreateGradient(gecko_shape,
+                                         gecko_size,
+                                         gradient.repeating,
+                                         /* legacy_syntax = */ false,
+                                         stop_count as u32)
+                };
+
+                // Clear mAngle and mBgPos fields
+                unsafe {
+                    (*gecko_gradient).mAngle.set_value(CoordDataValue::None);
+                    (*gecko_gradient).mBgPosX.set_value(CoordDataValue::None);
+                    (*gecko_gradient).mBgPosY.set_value(CoordDataValue::None);
+                }
+
+                // Setting radius values depending shape
+                match shape {
+                    GradientShape::Circle(length) => {
+                        if let LengthOrKeyword::Length(len) = length {
+                            unsafe {
+                                (*gecko_gradient).mRadiusX.set_value(CoordDataValue::Coord(len.0));
+                                (*gecko_gradient).mRadiusY.set_value(CoordDataValue::Coord(len.0));
+                            }
+                        }
+                    },
+                    GradientShape::Ellipse(length) => {
+                        if let LengthOrPercentageOrKeyword::LengthOrPercentage(first_len, second_len) = length {
+                            unsafe {
+                                (*gecko_gradient).mRadiusX.set(first_len);
+                                (*gecko_gradient).mRadiusY.set(second_len);
+                            }
+                        }
+                    },
+                }
+                unsafe {
+                    (*gecko_gradient).mBgPosX.set(position.horizontal);
+                    (*gecko_gradient).mBgPosY.set(position.vertical);
+                }
+
+                gecko_gradient
+            },
+        };
+
+        let mut coord: nsStyleCoord = nsStyleCoord::null();
+        for (index, stop) in gradient.stops.iter().enumerate() {
+            // NB: stops are guaranteed to be none in the gecko side by
+            // default.
+            coord.set(stop.position);
+            let color = match stop.color {
+                CSSColor::CurrentColor => {
+                    // TODO(emilio): gecko just stores an nscolor,
+                    // and it doesn't seem to support currentColor
+                    // as value in a gradient.
+                    //
+                    // Double-check it and either remove
+                    // currentColor for servo or see how gecko
+                    // handles this.
+                    0
+                },
+                CSSColor::RGBA(ref rgba) => convert_rgba_to_nscolor(rgba),
+            };
+
+            let mut stop = unsafe {
+                &mut (*gecko_gradient).mStops[index]
+            };
+
+            stop.mColor = color;
+            stop.mIsInterpolationHint = false;
+            stop.mLocation.copy_from(&coord);
+        }
+
+        unsafe {
+            Gecko_SetGradientImageValue(self, gecko_gradient);
+        }
+    }
+}
+
 pub mod basic_shape {
     use euclid::size::Size2D;
     use gecko::values::GeckoStyleCoordConvertible;
diff --git a/components/style/gecko/values.rs b/components/style/gecko/values.rs
index 5260adbb10f..39faa388040 100644
--- a/components/style/gecko/values.rs
+++ b/components/style/gecko/values.rs
@@ -10,8 +10,8 @@ use gecko_bindings::structs::{NS_RADIUS_CLOSEST_SIDE, NS_RADIUS_FARTHEST_SIDE};
 use gecko_bindings::structs::nsStyleCoord;
 use gecko_bindings::sugar::ns_style_coord::{CoordData, CoordDataMut, CoordDataValue};
 use std::cmp::max;
-use values::computed::{LengthOrPercentage, LengthOrPercentageOrAuto, LengthOrPercentageOrNone};
-use values::computed::Angle;
+use values::computed::{LengthOrNumber, LengthOrPercentage, LengthOrPercentageOrAuto};
+use values::computed::{LengthOrPercentageOrNone, Angle};
 use values::computed::basic_shape::ShapeRadius;
 
 pub trait StyleCoordHelpers {
@@ -108,6 +108,24 @@ impl GeckoStyleCoordConvertible for LengthOrPercentageOrNone {
     }
 }
 
+impl GeckoStyleCoordConvertible for LengthOrNumber {
+    fn to_gecko_style_coord<T: CoordDataMut>(&self, coord: &mut T) {
+        let value = match *self {
+            LengthOrNumber::Length(au) => CoordDataValue::Coord(au.0),
+            LengthOrNumber::Number(number) => CoordDataValue::Factor(number),
+        };
+        coord.set_value(value);
+    }
+
+    fn from_gecko_style_coord<T: CoordData>(coord: &T) -> Option<Self> {
+        match coord.as_value() {
+            CoordDataValue::Coord(coord) => Some(LengthOrNumber::Length(Au(coord))),
+            CoordDataValue::Factor(f) => Some(LengthOrNumber::Number(f)),
+            _ => None,
+        }
+    }
+}
+
 impl GeckoStyleCoordConvertible for ShapeRadius {
     fn to_gecko_style_coord<T: CoordDataMut>(&self, coord: &mut T) {
         match *self {
diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 7c2aa42b264..cead90fc571 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -22,18 +22,15 @@ use gecko_bindings::bindings::Gecko_CopyImageValueFrom;
 use gecko_bindings::bindings::Gecko_CopyListStyleImageFrom;
 use gecko_bindings::bindings::Gecko_CopyListStyleTypeFrom;
 use gecko_bindings::bindings::Gecko_CopyMozBindingFrom;
-use gecko_bindings::bindings::Gecko_CreateGradient;
 use gecko_bindings::bindings::Gecko_EnsureImageLayersLength;
 use gecko_bindings::bindings::Gecko_FontFamilyList_AppendGeneric;
 use gecko_bindings::bindings::Gecko_FontFamilyList_AppendNamed;
 use gecko_bindings::bindings::Gecko_FontFamilyList_Clear;
-use gecko_bindings::bindings::Gecko_SetGradientImageValue;
 use gecko_bindings::bindings::Gecko_SetListStyleImage;
 use gecko_bindings::bindings::Gecko_SetListStyleImageNone;
 use gecko_bindings::bindings::Gecko_SetListStyleType;
 use gecko_bindings::bindings::Gecko_SetMozBinding;
 use gecko_bindings::bindings::Gecko_SetNullImageValue;
-use gecko_bindings::bindings::Gecko_SetUrlImageValue;
 use gecko_bindings::bindings::ServoComputedValuesBorrowedOrNull;
 use gecko_bindings::bindings::{Gecko_ResetFilters, Gecko_CopyFiltersFrom};
 use gecko_bindings::structs;
@@ -639,7 +636,8 @@ fn static_assert() {
                                     ["border-{0}-radius".format(x.ident.replace("_", "-"))
                                      for x in CORNERS]) %>
 <%self:impl_trait style_struct_name="Border"
-                  skip_longhands="${skip_border_longhands}"
+                  skip_longhands="${skip_border_longhands} border-image-source border-image-outset
+                                  border-image-repeat border-image-width border-image-slice"
                   skip_additionals="*">
 
     % for side in SIDES:
@@ -663,6 +661,118 @@ fn static_assert() {
                                corner.y_index,
                                need_clone=True) %>
     % endfor
+
+    pub fn set_border_image_source(&mut self, v: longhands::border_image_source::computed_value::T) {
+        unsafe {
+            // Prevent leaking of the last elements we did set
+            Gecko_SetNullImageValue(&mut self.gecko.mBorderImageSource);
+        }
+
+        if let Some(image) = v.0 {
+            // TODO: We need to make border-image-source match with background-image
+            // until then we are setting with_url to false
+            self.gecko.mBorderImageSource.set(image, false, &mut false)
+        }
+    }
+
+    pub fn copy_border_image_source_from(&mut self, other: &Self) {
+        unsafe {
+            Gecko_CopyImageValueFrom(&mut self.gecko.mBorderImageSource,
+                                     &other.gecko.mBorderImageSource);
+        }
+    }
+
+    pub fn set_border_image_outset(&mut self, v: longhands::border_image_outset::computed_value::T) {
+        % for side in SIDES:
+            v.${side.index}.to_gecko_style_coord(&mut self.gecko.mBorderImageOutset
+                                                          .data_at_mut(${side.index}));
+        % endfor
+    }
+
+    pub fn copy_border_image_outset_from(&mut self, other: &Self) {
+        % for side in SIDES:
+            self.gecko.mBorderImageOutset.data_at_mut(${side.index})
+                .copy_from(&other.gecko.mBorderImageOutset.data_at(${side.index}));
+        % endfor
+    }
+
+    pub fn set_border_image_repeat(&mut self, v: longhands::border_image_repeat::computed_value::T) {
+        use properties::longhands::border_image_repeat::computed_value::RepeatKeyword;
+        use gecko_bindings::structs::{NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH, NS_STYLE_BORDER_IMAGE_REPEAT_REPEAT};
+        use gecko_bindings::structs::{NS_STYLE_BORDER_IMAGE_REPEAT_ROUND, NS_STYLE_BORDER_IMAGE_REPEAT_SPACE};
+
+        % for i, side in enumerate(["H", "V"]):
+            let k = match v.${i} {
+                RepeatKeyword::Stretch => NS_STYLE_BORDER_IMAGE_REPEAT_STRETCH,
+                RepeatKeyword::Repeat => NS_STYLE_BORDER_IMAGE_REPEAT_REPEAT,
+                RepeatKeyword::Round => NS_STYLE_BORDER_IMAGE_REPEAT_ROUND,
+                RepeatKeyword::Space => NS_STYLE_BORDER_IMAGE_REPEAT_SPACE,
+            };
+
+            self.gecko.mBorderImageRepeat${side} = k as u8;
+        % endfor
+    }
+
+    pub fn copy_border_image_repeat_from(&mut self, other: &Self) {
+        self.gecko.mBorderImageRepeatH = other.gecko.mBorderImageRepeatH;
+        self.gecko.mBorderImageRepeatV = other.gecko.mBorderImageRepeatV;
+    }
+
+    pub fn set_border_image_width(&mut self, v: longhands::border_image_width::computed_value::T) {
+        use properties::longhands::border_image_width::computed_value::SingleComputedValue;
+
+        % for side in SIDES:
+        match v.${side.index} {
+            SingleComputedValue::Auto => {
+                self.gecko.mBorderImageWidth.data_at_mut(${side.index}).set_value(CoordDataValue::Auto)
+            },
+            SingleComputedValue::LengthOrPercentage(l) => {
+                l.to_gecko_style_coord(&mut self.gecko.mBorderImageWidth.data_at_mut(${side.index}))
+            },
+            SingleComputedValue::Number(n) => {
+                self.gecko.mBorderImageWidth.data_at_mut(${side.index}).set_value(CoordDataValue::Factor(n))
+            },
+        }
+        % endfor
+    }
+
+    pub fn copy_border_image_width_from(&mut self, other: &Self) {
+        % for side in SIDES:
+            self.gecko.mBorderImageWidth.data_at_mut(${side.index})
+                .copy_from(&other.gecko.mBorderImageWidth.data_at(${side.index}));
+        % endfor
+    }
+
+    pub fn set_border_image_slice(&mut self, v: longhands::border_image_slice::computed_value::T) {
+        use gecko_bindings::structs::{NS_STYLE_BORDER_IMAGE_SLICE_NOFILL, NS_STYLE_BORDER_IMAGE_SLICE_FILL};
+        use properties::longhands::border_image_slice::computed_value::PercentageOrNumber;
+
+        for (i, corner) in v.corners.iter().enumerate() {
+            match *corner {
+                PercentageOrNumber::Percentage(p) => {
+                    self.gecko.mBorderImageSlice.data_at_mut(i).set_value(CoordDataValue::Percent(p.0))
+                },
+                PercentageOrNumber::Number(n) => {
+                    self.gecko.mBorderImageSlice.data_at_mut(i).set_value(CoordDataValue::Factor(n))
+                },
+            }
+        }
+
+        let fill = if v.fill {
+            NS_STYLE_BORDER_IMAGE_SLICE_FILL
+        } else {
+            NS_STYLE_BORDER_IMAGE_SLICE_NOFILL
+        };
+        self.gecko.mBorderImageFill = fill as u8;
+    }
+
+    pub fn copy_border_image_slice_from(&mut self, other: &Self) {
+        for i in 0..4 {
+            self.gecko.mBorderImageSlice.data_at_mut(i)
+                .copy_from(&other.gecko.mBorderImageSlice.data_at(i));
+        }
+        self.gecko.mBorderImageFill = other.gecko.mBorderImageFill;
+    }
 </%self:impl_trait>
 
 <% skip_margin_longhands = " ".join(["margin-%s" % x.ident for x in SIDES]) %>
@@ -1238,172 +1348,7 @@ fn static_assert() {
     pub fn set_${shorthand}_image(&mut self,
                                   images: longhands::${shorthand}_image::computed_value::T,
                                   cacheable: &mut bool) {
-        use gecko_bindings::structs::nsStyleImage;
         use gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
-        use gecko_bindings::structs::{NS_STYLE_GRADIENT_SHAPE_LINEAR, NS_STYLE_GRADIENT_SHAPE_CIRCULAR};
-        use gecko_bindings::structs::{NS_STYLE_GRADIENT_SHAPE_ELLIPTICAL, NS_STYLE_GRADIENT_SIZE_CLOSEST_CORNER};
-        use gecko_bindings::structs::{NS_STYLE_GRADIENT_SIZE_CLOSEST_SIDE, NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER};
-        use gecko_bindings::structs::{NS_STYLE_GRADIENT_SIZE_FARTHEST_SIDE, NS_STYLE_GRADIENT_SIZE_EXPLICIT_SIZE};
-        use gecko_bindings::structs::nsStyleCoord;
-        use values::computed::{Image, Gradient, GradientKind, GradientShape, LengthOrKeyword};
-        use values::computed::LengthOrPercentageOrKeyword;
-        use values::specified::AngleOrCorner;
-        use values::specified::{HorizontalDirection, SizeKeyword, VerticalDirection};
-        use cssparser::Color as CSSColor;
-
-        fn set_gradient(gradient: Gradient, geckoimage: &mut nsStyleImage) {
-            let stop_count = gradient.stops.len();
-            if stop_count >= ::std::u32::MAX as usize {
-                warn!("stylo: Prevented overflow due to too many gradient stops");
-                return;
-            }
-
-            let gecko_gradient = match gradient.gradient_kind {
-                GradientKind::Linear(angle_or_corner) => {
-                    let gecko_gradient = unsafe {
-                        Gecko_CreateGradient(NS_STYLE_GRADIENT_SHAPE_LINEAR as u8,
-                                             NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER as u8,
-                                             gradient.repeating,
-                                             /* legacy_syntax = */ false,
-                                             stop_count as u32)
-                    };
-
-                    match angle_or_corner {
-                        AngleOrCorner::Angle(angle) => {
-                            unsafe {
-                                (*gecko_gradient).mAngle.set(angle);
-                                (*gecko_gradient).mBgPosX.set_value(CoordDataValue::None);
-                                (*gecko_gradient).mBgPosY.set_value(CoordDataValue::None);
-                            }
-                        },
-                        AngleOrCorner::Corner(horiz, vert) => {
-                            let percent_x = match horiz {
-                                HorizontalDirection::Left => 0.0,
-                                HorizontalDirection::Right => 1.0,
-                            };
-                            let percent_y = match vert {
-                                VerticalDirection::Top => 0.0,
-                                VerticalDirection::Bottom => 1.0,
-                            };
-
-                            unsafe {
-                                (*gecko_gradient).mAngle.set_value(CoordDataValue::None);
-                                (*gecko_gradient).mBgPosX
-                                                 .set_value(CoordDataValue::Percent(percent_x));
-                                (*gecko_gradient).mBgPosY
-                                                 .set_value(CoordDataValue::Percent(percent_y));
-                            }
-                        }
-                    }
-                    gecko_gradient
-                },
-                GradientKind::Radial(shape, position) => {
-                    let (gecko_shape, gecko_size) = match shape {
-                        GradientShape::Circle(ref length) => {
-                            let size = match *length {
-                                LengthOrKeyword::Keyword(keyword) => {
-                                    match keyword {
-                                        SizeKeyword::ClosestSide => NS_STYLE_GRADIENT_SIZE_CLOSEST_SIDE,
-                                        SizeKeyword::FarthestSide => NS_STYLE_GRADIENT_SIZE_FARTHEST_SIDE,
-                                        SizeKeyword::ClosestCorner => NS_STYLE_GRADIENT_SIZE_CLOSEST_CORNER,
-                                        SizeKeyword::FarthestCorner => NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER,
-                                    }
-                                },
-                                _ => NS_STYLE_GRADIENT_SIZE_EXPLICIT_SIZE,
-                            };
-                            (NS_STYLE_GRADIENT_SHAPE_CIRCULAR as u8, size as u8)
-                        },
-                        GradientShape::Ellipse(ref length) => {
-                            let size = match *length {
-                                LengthOrPercentageOrKeyword::Keyword(keyword) => {
-                                    match keyword {
-                                        SizeKeyword::ClosestSide => NS_STYLE_GRADIENT_SIZE_CLOSEST_SIDE,
-                                        SizeKeyword::FarthestSide => NS_STYLE_GRADIENT_SIZE_FARTHEST_SIDE,
-                                        SizeKeyword::ClosestCorner => NS_STYLE_GRADIENT_SIZE_CLOSEST_CORNER,
-                                        SizeKeyword::FarthestCorner => NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER,
-                                    }
-                                },
-                                _ => NS_STYLE_GRADIENT_SIZE_EXPLICIT_SIZE,
-                            };
-                            (NS_STYLE_GRADIENT_SHAPE_ELLIPTICAL as u8, size as u8)
-                        }
-                    };
-
-                    let gecko_gradient = unsafe {
-                        Gecko_CreateGradient(gecko_shape,
-                                             gecko_size,
-                                             gradient.repeating,
-                                             /* legacy_syntax = */ false,
-                                             stop_count as u32)
-                    };
-
-                    // Clear mAngle and mBgPos fields
-                    unsafe {
-                        (*gecko_gradient).mAngle.set_value(CoordDataValue::None);
-                        (*gecko_gradient).mBgPosX.set_value(CoordDataValue::None);
-                        (*gecko_gradient).mBgPosY.set_value(CoordDataValue::None);
-                    }
-
-                    // Setting radius values depending shape
-                    match shape {
-                        GradientShape::Circle(length) => {
-                            if let LengthOrKeyword::Length(len) = length {
-                                unsafe {
-                                    (*gecko_gradient).mRadiusX.set_value(CoordDataValue::Coord(len.0));
-                                    (*gecko_gradient).mRadiusY.set_value(CoordDataValue::Coord(len.0));
-                                }
-                            }
-                        },
-                        GradientShape::Ellipse(length) => {
-                            if let LengthOrPercentageOrKeyword::LengthOrPercentage(first_len, second_len) = length {
-                                unsafe {
-                                    (*gecko_gradient).mRadiusX.set(first_len);
-                                    (*gecko_gradient).mRadiusY.set(second_len);
-                                }
-                            }
-                        },
-                    }
-                    unsafe {
-                        (*gecko_gradient).mBgPosX.set(position.horizontal);
-                        (*gecko_gradient).mBgPosY.set(position.vertical);
-                    }
-
-                    gecko_gradient
-                },
-            };
-
-            let mut coord: nsStyleCoord = nsStyleCoord::null();
-            for (index, stop) in gradient.stops.iter().enumerate() {
-                // NB: stops are guaranteed to be none in the gecko side by
-                // default.
-                coord.set(stop.position);
-                let color = match stop.color {
-                    CSSColor::CurrentColor => {
-                        // TODO(emilio): gecko just stores an nscolor,
-                        // and it doesn't seem to support currentColor
-                        // as value in a gradient.
-                        //
-                        // Double-check it and either remove
-                        // currentColor for servo or see how gecko
-                        // handles this.
-                        0
-                    },
-                    CSSColor::RGBA(ref rgba) => convert_rgba_to_nscolor(rgba),
-                };
-
-                let mut stop = unsafe {
-                    &mut (*gecko_gradient).mStops[index]
-                };
-
-                stop.mColor = color;
-                stop.mIsInterpolationHint = false;
-                stop.mLocation.copy_from(&coord);
-            }
-
-            unsafe {
-                Gecko_SetGradientImageValue(geckoimage, gecko_gradient);
-            }
-        }
 
         unsafe {
             // Prevent leaking of the last elements we did set
@@ -1421,36 +1366,12 @@ fn static_assert() {
                                                                 .mLayers.iter_mut()) {
             % if shorthand == "background":
                 if let Some(image) = image.0 {
-                    match image {
-                        Image::Gradient(gradient) => {
-                            set_gradient(gradient, &mut geckoimage.mImage)
-                        },
-                        Image::Url(ref url, ref extra_data) => {
-                            unsafe {
-                                Gecko_SetUrlImageValue(&mut geckoimage.mImage,
-                                                       url.as_str().as_ptr(),
-                                                       url.as_str().len() as u32,
-                                                       extra_data.base.get(),
-                                                       extra_data.referrer.get(),
-                                                       extra_data.principal.get());
-                            }
-                            // We unfortunately must make any url() value uncacheable, since
-                            // the applicable declarations cache is not per document, but
-                            // global, and the imgRequestProxy objects we store in the style
-                            // structs don't like to be tracked by more than one document.
-                            *cacheable = false;
-                        }
-                    }
+                    geckoimage.mImage.set(image, true, cacheable)
                 }
             % else:
                 use properties::longhands::mask_image::single_value::computed_value::T;
                 match image {
-                    T::Image(image) => match image {
-                        Image::Gradient(gradient) => {
-                            set_gradient(gradient, &mut geckoimage.mImage)
-                        }
-                        _ => () // we need to support image values
-                    },
+                    T::Image(image) => geckoimage.mImage.set(image, false, cacheable),
                     _ => () // we need to support url valeus
                 }
             % endif
diff --git a/components/style/properties/longhand/border.mako.rs b/components/style/properties/longhand/border.mako.rs
index 40892a79ace..73795afd844 100644
--- a/components/style/properties/longhand/border.mako.rs
+++ b/components/style/properties/longhand/border.mako.rs
@@ -64,3 +64,663 @@ ${helpers.single_keyword("-moz-float-edge", "content-box margin-box",
                          gecko_enum_prefix="StyleFloatEdge",
                          products="gecko",
                          animatable=False)}
+
+// https://drafts.csswg.org/css-backgrounds-3/#border-image-source
+<%helpers:longhand name="border-image-source" products="gecko" animatable="False">
+    use cssparser::ToCss;
+    use std::fmt;
+    use values::LocalToCss;
+    use values::NoViewportPercentage;
+    use values::specified::Image;
+
+    impl NoViewportPercentage for SpecifiedValue {}
+
+    pub mod computed_value {
+        use values::computed;
+        #[derive(Debug, Clone, PartialEq)]
+        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+        pub struct T(pub Option<computed::Image>);
+    }
+
+    #[derive(Debug, Clone, PartialEq)]
+    #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+    pub struct SpecifiedValue(pub Option<Image>);
+
+    impl ToCss for computed_value::T {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match self.0 {
+                Some(ref image) => image.to_css(dest),
+                None => dest.write_str("none"),
+            }
+        }
+    }
+    impl ToCss for SpecifiedValue {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match self.0 {
+                Some(ref image) => image.to_css(dest),
+                None => dest.write_str("none"),
+            }
+        }
+    }
+
+    #[inline]
+    pub fn get_initial_value() -> computed_value::T {
+        computed_value::T(None)
+    }
+
+    impl ToComputedValue for SpecifiedValue {
+        type ComputedValue = computed_value::T;
+
+        #[inline]
+        fn to_computed_value(&self, context: &Context) -> computed_value::T {
+            match self.0 {
+                Some(ref image) => computed_value::T(Some(image.to_computed_value(context))),
+                None => computed_value::T(None),
+            }
+        }
+        #[inline]
+        fn from_computed_value(computed: &computed_value::T) -> Self {
+            match computed.0 {
+                Some(ref image) =>
+                    SpecifiedValue(Some(ToComputedValue::from_computed_value(image))),
+                None => SpecifiedValue(None),
+            }
+        }
+    }
+
+    pub fn parse(context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue, ()> {
+        if input.try(|input| input.expect_ident_matching("none")).is_ok() {
+            return Ok(SpecifiedValue(None));
+        }
+
+        Ok(SpecifiedValue(Some(try!(Image::parse(context, input)))))
+    }
+</%helpers:longhand>
+
+// https://drafts.csswg.org/css-backgrounds-3/#border-image-outset
+<%helpers:longhand name="border-image-outset" products="gecko" animatable="False">
+    use cssparser::ToCss;
+    use std::fmt;
+    use values::HasViewportPercentage;
+    use values::LocalToCss;
+    use values::specified::LengthOrNumber;
+
+    impl HasViewportPercentage for SpecifiedValue {
+        fn has_viewport_percentage(&self) -> bool {
+            let mut viewport_percentage = false;
+            for value in self.0.iter() {
+                let vp = value.has_viewport_percentage();
+                viewport_percentage = vp || viewport_percentage;
+            }
+            viewport_percentage
+        }
+    }
+
+    pub mod computed_value {
+        use values::computed::LengthOrNumber;
+        #[derive(Debug, Clone, PartialEq)]
+        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+        pub struct T(pub LengthOrNumber, pub LengthOrNumber,
+                     pub LengthOrNumber, pub LengthOrNumber);
+    }
+
+    #[derive(Debug, Clone, PartialEq)]
+    #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+    pub struct SpecifiedValue(pub Vec<LengthOrNumber>);
+
+    impl ToCss for computed_value::T {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.0.to_css(dest));
+            try!(dest.write_str(" "));
+            try!(self.1.to_css(dest));
+            try!(dest.write_str(" "));
+            try!(self.2.to_css(dest));
+            try!(dest.write_str(" "));
+            self.3.to_css(dest)
+        }
+    }
+    impl ToCss for SpecifiedValue {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.0[0].to_css(dest));
+            for value in self.0.iter().skip(1) {
+                try!(dest.write_str(" "));
+                try!(value.to_css(dest));
+            }
+            Ok(())
+        }
+    }
+
+    #[inline]
+    pub fn get_initial_value() -> computed_value::T {
+        computed_value::T(computed::LengthOrNumber::Number(0.0),
+                          computed::LengthOrNumber::Number(0.0),
+                          computed::LengthOrNumber::Number(0.0),
+                          computed::LengthOrNumber::Number(0.0))
+    }
+
+    impl ToComputedValue for SpecifiedValue {
+        type ComputedValue = computed_value::T;
+
+        #[inline]
+        fn to_computed_value(&self, context: &Context) -> computed_value::T {
+            let length = self.0.len();
+            match length {
+                4 => computed_value::T(self.0[0].to_computed_value(context),
+                                       self.0[1].to_computed_value(context),
+                                       self.0[2].to_computed_value(context),
+                                       self.0[3].to_computed_value(context)),
+                3 => computed_value::T(self.0[0].to_computed_value(context),
+                                       self.0[1].to_computed_value(context),
+                                       self.0[2].to_computed_value(context),
+                                       self.0[1].to_computed_value(context)),
+                2 => computed_value::T(self.0[0].to_computed_value(context),
+                                       self.0[1].to_computed_value(context),
+                                       self.0[0].to_computed_value(context),
+                                       self.0[1].to_computed_value(context)),
+                1 => computed_value::T(self.0[0].to_computed_value(context),
+                                       self.0[0].to_computed_value(context),
+                                       self.0[0].to_computed_value(context),
+                                       self.0[0].to_computed_value(context)),
+                _ => unreachable!(),
+            }
+        }
+        #[inline]
+        fn from_computed_value(computed: &computed_value::T) -> Self {
+            SpecifiedValue(vec![ToComputedValue::from_computed_value(&computed.0),
+                                ToComputedValue::from_computed_value(&computed.1),
+                                ToComputedValue::from_computed_value(&computed.2),
+                                ToComputedValue::from_computed_value(&computed.3)])
+        }
+    }
+
+    pub fn parse(_context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue, ()> {
+        let mut values = vec![];
+        for _ in 0..4 {
+            let value = input.try(|input| LengthOrNumber::parse(input));
+            match value {
+                Ok(val) => values.push(val),
+                Err(_) => break,
+            }
+        }
+
+        if values.len() > 0 {
+            Ok(SpecifiedValue(values))
+        } else {
+            Err(())
+        }
+    }
+</%helpers:longhand>
+
+// https://drafts.csswg.org/css-backgrounds-3/#border-image-repeat
+<%helpers:longhand name="border-image-repeat" products="gecko" animatable="False">
+    use cssparser::ToCss;
+    use std::fmt;
+    use values::LocalToCss;
+    use values::NoViewportPercentage;
+
+    impl NoViewportPercentage for SpecifiedValue {}
+
+    pub mod computed_value {
+        pub use super::RepeatKeyword;
+        use values::computed;
+
+        #[derive(Debug, Clone, PartialEq)]
+        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+        pub struct T(pub RepeatKeyword, pub RepeatKeyword);
+    }
+
+    #[derive(Debug, Clone, PartialEq)]
+    #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+    pub struct SpecifiedValue(pub RepeatKeyword,
+                              pub Option<RepeatKeyword>);
+
+    define_css_keyword_enum!(RepeatKeyword:
+                             "stretch" => Stretch,
+                             "repeat" => Repeat,
+                             "round" => Round,
+                             "space" => Space);
+
+
+    impl ToCss for computed_value::T {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.0.to_css(dest));
+            try!(dest.write_str(" "));
+            self.0.to_css(dest)
+        }
+    }
+    impl ToCss for SpecifiedValue {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.0.to_css(dest));
+            if self.1.is_some() {
+                try!(dest.write_str(" "));
+                try!(self.0.to_css(dest));
+            }
+            Ok(())
+        }
+    }
+
+    #[inline]
+    pub fn get_initial_value() -> computed_value::T {
+        computed_value::T(RepeatKeyword::Stretch, RepeatKeyword::Stretch)
+    }
+
+    impl ToComputedValue for SpecifiedValue {
+        type ComputedValue = computed_value::T;
+
+        #[inline]
+        fn to_computed_value(&self, _context: &Context) -> computed_value::T {
+            computed_value::T(self.0, self.1.unwrap_or(self.0))
+        }
+        #[inline]
+        fn from_computed_value(computed: &computed_value::T) -> Self {
+            SpecifiedValue(computed.0, Some(computed.1))
+        }
+    }
+
+    pub fn parse(_context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue, ()> {
+        let first = try!(RepeatKeyword::parse(input));
+        let second = input.try(RepeatKeyword::parse).ok();
+
+        Ok(SpecifiedValue(first, second))
+    }
+</%helpers:longhand>
+
+// https://drafts.csswg.org/css-backgrounds-3/#border-image-width
+<%helpers:longhand name="border-image-width" products="gecko" animatable="False">
+    use cssparser::ToCss;
+    use std::fmt;
+    use values::LocalToCss;
+    use values::HasViewportPercentage;
+    use values::specified::{LengthOrPercentage, Number};
+
+    impl HasViewportPercentage for SpecifiedValue {
+        fn has_viewport_percentage(&self) -> bool {
+            let mut viewport_percentage = false;
+            for value in self.0.clone() {
+                let vp = match value {
+                    SingleSpecifiedValue::LengthOrPercentage(len) => len.has_viewport_percentage(),
+                    _ => false,
+                };
+                viewport_percentage = vp || viewport_percentage;
+            }
+            viewport_percentage
+        }
+    }
+
+    pub mod computed_value {
+        use values::computed::{LengthOrPercentage, Number};
+        #[derive(Debug, Clone, PartialEq)]
+        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+        pub struct T(pub SingleComputedValue, pub SingleComputedValue,
+                     pub SingleComputedValue, pub SingleComputedValue);
+
+        #[derive(Debug, Clone, PartialEq)]
+        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+        pub enum SingleComputedValue {
+            LengthOrPercentage(LengthOrPercentage),
+            Number(Number),
+            Auto,
+        }
+    }
+
+    #[derive(Debug, Clone, PartialEq)]
+    #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+    pub struct SpecifiedValue(pub Vec<SingleSpecifiedValue>);
+
+    impl ToCss for computed_value::T {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.0.to_css(dest));
+            try!(dest.write_str(" "));
+            try!(self.1.to_css(dest));
+            try!(dest.write_str(" "));
+            try!(self.2.to_css(dest));
+            try!(dest.write_str(" "));
+            self.3.to_css(dest)
+        }
+    }
+    impl ToCss for SpecifiedValue {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.0[0].to_css(dest));
+            for value in self.0.iter().skip(1) {
+                try!(dest.write_str(" "));
+                try!(value.to_css(dest));
+            }
+            Ok(())
+        }
+    }
+
+    #[derive(Debug, Clone, PartialEq)]
+    #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+    pub enum SingleSpecifiedValue {
+        LengthOrPercentage(LengthOrPercentage),
+        Number(Number),
+        Auto,
+    }
+
+    impl ToCss for computed_value::SingleComputedValue {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match *self {
+                computed_value::SingleComputedValue::LengthOrPercentage(len) => len.to_css(dest),
+                computed_value::SingleComputedValue::Number(number) => number.to_css(dest),
+                computed_value::SingleComputedValue::Auto => dest.write_str("auto"),
+            }
+        }
+    }
+    impl ToCss for SingleSpecifiedValue {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match *self {
+                SingleSpecifiedValue::LengthOrPercentage(len) => len.to_css(dest),
+                SingleSpecifiedValue::Number(number) => number.to_css(dest),
+                SingleSpecifiedValue::Auto => dest.write_str("auto"),
+            }
+        }
+    }
+
+    impl ToComputedValue for SingleSpecifiedValue {
+        type ComputedValue = computed_value::SingleComputedValue;
+
+        #[inline]
+        fn to_computed_value(&self, context: &Context) -> computed_value::SingleComputedValue {
+            match *self {
+                SingleSpecifiedValue::LengthOrPercentage(len) => {
+                    computed_value::SingleComputedValue::LengthOrPercentage(
+                        len.to_computed_value(context))
+                },
+                SingleSpecifiedValue::Number(number) =>
+                    computed_value::SingleComputedValue::Number(number.to_computed_value(context)),
+                SingleSpecifiedValue::Auto => computed_value::SingleComputedValue::Auto,
+            }
+        }
+        #[inline]
+        fn from_computed_value(computed: &computed_value::SingleComputedValue) -> Self {
+            match *computed {
+                computed_value::SingleComputedValue::LengthOrPercentage(len) => {
+                    SingleSpecifiedValue::LengthOrPercentage(
+                        ToComputedValue::from_computed_value(&len))
+                },
+                computed_value::SingleComputedValue::Number(number) =>
+                    SingleSpecifiedValue::Number(ToComputedValue::from_computed_value(&number)),
+                computed_value::SingleComputedValue::Auto => SingleSpecifiedValue::Auto,
+            }
+        }
+    }
+
+    #[inline]
+    pub fn get_initial_value() -> computed_value::T {
+        computed_value::T(computed_value::SingleComputedValue::Number(1.0),
+                          computed_value::SingleComputedValue::Number(1.0),
+                          computed_value::SingleComputedValue::Number(1.0),
+                          computed_value::SingleComputedValue::Number(1.0))
+    }
+
+    impl ToComputedValue for SpecifiedValue {
+        type ComputedValue = computed_value::T;
+
+        #[inline]
+        fn to_computed_value(&self, context: &Context) -> computed_value::T {
+            let length = self.0.len();
+            match length {
+                4 => computed_value::T(self.0[0].to_computed_value(context),
+                                       self.0[1].to_computed_value(context),
+                                       self.0[2].to_computed_value(context),
+                                       self.0[3].to_computed_value(context)),
+                3 => computed_value::T(self.0[0].to_computed_value(context),
+                                       self.0[1].to_computed_value(context),
+                                       self.0[2].to_computed_value(context),
+                                       self.0[1].to_computed_value(context)),
+                2 => computed_value::T(self.0[0].to_computed_value(context),
+                                       self.0[1].to_computed_value(context),
+                                       self.0[0].to_computed_value(context),
+                                       self.0[1].to_computed_value(context)),
+                1 => computed_value::T(self.0[0].to_computed_value(context),
+                                       self.0[0].to_computed_value(context),
+                                       self.0[0].to_computed_value(context),
+                                       self.0[0].to_computed_value(context)),
+                _ => unreachable!(),
+            }
+        }
+        #[inline]
+        fn from_computed_value(computed: &computed_value::T) -> Self {
+            SpecifiedValue(vec![ToComputedValue::from_computed_value(&computed.0),
+                                ToComputedValue::from_computed_value(&computed.1),
+                                ToComputedValue::from_computed_value(&computed.2),
+                                ToComputedValue::from_computed_value(&computed.3)])
+        }
+    }
+
+    impl Parse for SingleSpecifiedValue {
+        fn parse(input: &mut Parser) -> Result<Self, ()> {
+            if input.try(|input| input.expect_ident_matching("auto")).is_ok() {
+                return Ok(SingleSpecifiedValue::Auto);
+            }
+
+            if let Ok(len) = input.try(|input| LengthOrPercentage::parse(input)) {
+                return Ok(SingleSpecifiedValue::LengthOrPercentage(len));
+            }
+
+            let num = try!(Number::parse_non_negative(input));
+            Ok(SingleSpecifiedValue::Number(num))
+        }
+    }
+
+    pub fn parse(_context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue, ()> {
+        let mut values = vec![];
+        for _ in 0..4 {
+            let value = input.try(|input| SingleSpecifiedValue::parse(input));
+            match value {
+                Ok(val) => values.push(val),
+                Err(_) => break,
+            }
+        }
+
+        if values.len() > 0 {
+            Ok(SpecifiedValue(values))
+        } else {
+            Err(())
+        }
+    }
+</%helpers:longhand>
+
+// https://drafts.csswg.org/css-backgrounds-3/#border-image-slice
+<%helpers:longhand name="border-image-slice" products="gecko" animatable="False">
+    use cssparser::ToCss;
+    use std::fmt;
+    use values::LocalToCss;
+    use values::NoViewportPercentage;
+    use values::specified::{Number, Percentage};
+
+    impl NoViewportPercentage for SpecifiedValue {}
+
+    pub mod computed_value {
+        use values::computed::Number;
+        use values::specified::Percentage;
+        #[derive(Debug, Clone, PartialEq)]
+        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+        pub struct T {
+            pub corners: Vec<PercentageOrNumber>,
+            pub fill: bool,
+        }
+
+        #[derive(Debug, Clone, PartialEq)]
+        #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+        pub enum PercentageOrNumber {
+            Percentage(Percentage),
+            Number(Number),
+        }
+    }
+
+    #[derive(Debug, Clone, PartialEq)]
+    #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+    pub struct SpecifiedValue {
+        pub corners: Vec<PercentageOrNumber>,
+        pub fill: bool,
+    }
+
+    impl ToCss for computed_value::T {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.corners[0].to_css(dest));
+            try!(dest.write_str(" "));
+            try!(self.corners[1].to_css(dest));
+            try!(dest.write_str(" "));
+            try!(self.corners[2].to_css(dest));
+            try!(dest.write_str(" "));
+            try!(self.corners[3].to_css(dest));
+
+            if self.fill {
+                try!(dest.write_str("fill"));
+            }
+            Ok(())
+        }
+    }
+    impl ToCss for SpecifiedValue {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            try!(self.corners[0].to_css(dest));
+            for value in self.corners.iter().skip(1) {
+                try!(dest.write_str(" "));
+                try!(value.to_css(dest));
+            }
+
+            if self.fill {
+                try!(dest.write_str("fill"));
+            }
+            Ok(())
+        }
+    }
+
+    #[derive(Debug, Clone, PartialEq)]
+    #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+    pub enum PercentageOrNumber {
+        Percentage(Percentage),
+        Number(Number),
+    }
+
+    impl ToCss for computed_value::PercentageOrNumber {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match *self {
+                computed_value::PercentageOrNumber::Percentage(percentage) => percentage.to_css(dest),
+                computed_value::PercentageOrNumber::Number(number) => number.to_css(dest),
+            }
+        }
+    }
+    impl ToCss for PercentageOrNumber {
+        fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+            match *self {
+                PercentageOrNumber::Percentage(percentage) => percentage.to_css(dest),
+                PercentageOrNumber::Number(number) => number.to_css(dest),
+            }
+        }
+    }
+
+    impl ToComputedValue for PercentageOrNumber {
+        type ComputedValue = computed_value::PercentageOrNumber;
+
+        #[inline]
+        fn to_computed_value(&self, context: &Context) -> computed_value::PercentageOrNumber {
+            match *self {
+                PercentageOrNumber::Percentage(percentage) =>
+                    computed_value::PercentageOrNumber::Percentage(percentage),
+                PercentageOrNumber::Number(number) =>
+                    computed_value::PercentageOrNumber::Number(number.to_computed_value(context)),
+            }
+        }
+        #[inline]
+        fn from_computed_value(computed: &computed_value::PercentageOrNumber) -> Self {
+            match *computed {
+                computed_value::PercentageOrNumber::Percentage(percentage) =>
+                    PercentageOrNumber::Percentage(percentage),
+                computed_value::PercentageOrNumber::Number(number) =>
+                    PercentageOrNumber::Number(ToComputedValue::from_computed_value(&number)),
+            }
+        }
+    }
+
+    #[inline]
+    pub fn get_initial_value() -> computed_value::T {
+        computed_value::T {
+            corners: vec![computed_value::PercentageOrNumber::Percentage(Percentage(1.0)),
+                          computed_value::PercentageOrNumber::Percentage(Percentage(1.0)),
+                          computed_value::PercentageOrNumber::Percentage(Percentage(1.0)),
+                          computed_value::PercentageOrNumber::Percentage(Percentage(1.0))],
+            fill: false,
+        }
+    }
+
+    impl ToComputedValue for SpecifiedValue {
+        type ComputedValue = computed_value::T;
+
+        #[inline]
+        fn to_computed_value(&self, context: &Context) -> computed_value::T {
+            let length = self.corners.len();
+            let corners = match length {
+                4 => vec![self.corners[0].to_computed_value(context),
+                          self.corners[1].to_computed_value(context),
+                          self.corners[2].to_computed_value(context),
+                          self.corners[3].to_computed_value(context)],
+                3 => vec![self.corners[0].to_computed_value(context),
+                          self.corners[1].to_computed_value(context),
+                          self.corners[2].to_computed_value(context),
+                          self.corners[1].to_computed_value(context)],
+                2 => vec![self.corners[0].to_computed_value(context),
+                          self.corners[1].to_computed_value(context),
+                          self.corners[0].to_computed_value(context),
+                          self.corners[1].to_computed_value(context)],
+                1 => vec![self.corners[0].to_computed_value(context),
+                          self.corners[0].to_computed_value(context),
+                          self.corners[0].to_computed_value(context),
+                          self.corners[0].to_computed_value(context)],
+                _ => unreachable!(),
+            };
+            computed_value::T {
+                corners: corners,
+                fill: self.fill,
+            }
+        }
+        #[inline]
+        fn from_computed_value(computed: &computed_value::T) -> Self {
+            SpecifiedValue {
+                corners: vec![ToComputedValue::from_computed_value(&computed.corners[0]),
+                              ToComputedValue::from_computed_value(&computed.corners[1]),
+                              ToComputedValue::from_computed_value(&computed.corners[2]),
+                              ToComputedValue::from_computed_value(&computed.corners[3])],
+                fill: computed.fill,
+            }
+        }
+    }
+
+    impl Parse for PercentageOrNumber {
+        fn parse(input: &mut Parser) -> Result<Self, ()> {
+            if let Ok(per) = input.try(|input| Percentage::parse(input)) {
+                return Ok(PercentageOrNumber::Percentage(per));
+            }
+
+            let num = try!(Number::parse_non_negative(input));
+            Ok(PercentageOrNumber::Number(num))
+        }
+    }
+
+    pub fn parse(_context: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue, ()> {
+        let mut fill = input.try(|input| input.expect_ident_matching("fill")).is_ok();
+
+        let mut values = vec![];
+        for _ in 0..4 {
+            let value = input.try(|input| PercentageOrNumber::parse(input));
+            match value {
+                Ok(val) => values.push(val),
+                Err(_) => break,
+            }
+        }
+
+        if fill == false {
+            fill = input.try(|input| input.expect_ident_matching("fill")).is_ok();
+        }
+
+        if values.len() > 0 {
+            Ok(SpecifiedValue {
+                corners: values,
+                fill: fill
+            })
+        } else {
+            Err(())
+        }
+    }
+</%helpers:longhand>
diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs
index 72056f0bbdd..204c6071ce8 100644
--- a/components/style/values/computed/length.rs
+++ b/components/style/values/computed/length.rs
@@ -5,7 +5,7 @@
 use app_units::Au;
 use ordered_float::NotNaN;
 use std::fmt;
-use super::{ToComputedValue, Context};
+use super::{Number, ToComputedValue, Context};
 use values::{CSSFloat, LocalToCss, specified};
 
 pub use cssparser::Color as CSSColor;
@@ -506,3 +506,53 @@ impl ::cssparser::ToCss for LengthOrNone {
         }
     }
 }
+
+#[derive(Clone, PartialEq)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub enum LengthOrNumber {
+    Length(Length),
+    Number(Number),
+}
+
+impl fmt::Debug for LengthOrNumber {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        match *self {
+            LengthOrNumber::Length(length) => write!(f, "{:?}", length),
+            LengthOrNumber::Number(number) => write!(f, "{:?}", number),
+        }
+    }
+}
+
+impl ToComputedValue for specified::LengthOrNumber {
+    type ComputedValue = LengthOrNumber;
+
+    #[inline]
+    fn to_computed_value(&self, context: &Context) -> LengthOrNumber {
+        match *self {
+            specified::LengthOrNumber::Length(len) =>
+                LengthOrNumber::Length(len.to_computed_value(context)),
+            specified::LengthOrNumber::Number(number) =>
+                LengthOrNumber::Number(number.to_computed_value(context)),
+        }
+    }
+    #[inline]
+    fn from_computed_value(computed: &LengthOrNumber) -> Self {
+        match *computed {
+            LengthOrNumber::Length(len) =>
+                specified::LengthOrNumber::Length(ToComputedValue::from_computed_value(&len)),
+            LengthOrNumber::Number(number) =>
+                specified::LengthOrNumber::Number(ToComputedValue::from_computed_value(&number)),
+        }
+    }
+}
+
+impl ::cssparser::ToCss for LengthOrNumber {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        match *self {
+            LengthOrNumber::Length(len) => len.to_css(dest),
+            LengthOrNumber::Number(number) => number.to_css(dest),
+        }
+    }
+}
+
+pub type Length = Au;
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index de5dfa76844..6307c8b06a5 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -12,7 +12,7 @@ pub use cssparser::Color as CSSColor;
 pub use self::image::{EndingShape as GradientShape, Gradient, GradientKind, Image};
 pub use self::image::{LengthOrKeyword, LengthOrPercentageOrKeyword};
 pub use super::specified::{Angle, BorderStyle, Time, UrlExtraData, UrlOrNone};
-pub use self::length::{CalcLengthOrPercentage, LengthOrPercentage, LengthOrPercentageOrAuto};
+pub use self::length::{CalcLengthOrPercentage, Length, LengthOrNumber, LengthOrPercentage, LengthOrPercentageOrAuto};
 pub use self::length::{LengthOrPercentageOrAutoOrContent, LengthOrPercentageOrNone, LengthOrNone};
 
 pub mod basic_shape;
@@ -147,7 +147,5 @@ impl ::cssparser::ToCss for BorderRadiusSize {
     }
 }
 
-
-pub type Length = Au;
 pub type Number = CSSFloat;
 pub type Opacity = CSSFloat;
diff --git a/components/style/values/specified/length.rs b/components/style/values/specified/length.rs
index 0eca7c16ac2..bcd320da425 100644
--- a/components/style/values/specified/length.rs
+++ b/components/style/values/specified/length.rs
@@ -11,7 +11,7 @@ use std::cmp;
 use std::fmt;
 use std::ops::Mul;
 use style_traits::values::specified::AllowedNumericType;
-use super::{Angle, SimplifiedValueNode, SimplifiedSumNode, Time};
+use super::{Angle, Number, SimplifiedValueNode, SimplifiedSumNode, Time};
 use values::{CSSFloat, FONT_MEDIUM_PX, HasViewportPercentage, LocalToCss, computed};
 
 pub use super::image::{AngleOrCorner, ColorStop, EndingShape as GradientEndingShape, Gradient};
@@ -713,6 +713,18 @@ impl ToCss for Percentage {
     }
 }
 
+impl Parse for Percentage {
+    #[inline]
+    fn parse(input: &mut Parser) -> Result<Self, ()> {
+        let context = AllowedNumericType::All;
+        match try!(input.next()) {
+            Token::Percentage(ref value) if context.is_ok(value.unit_value) =>
+                Ok(Percentage(value.unit_value)),
+            _ => Err(())
+        }
+    }
+}
+
 #[derive(Clone, PartialEq, Copy, Debug)]
 #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
 pub enum LengthOrPercentage {
@@ -1002,3 +1014,40 @@ impl LengthOrPercentageOrAutoOrContent {
     }
 }
 
+#[derive(Debug, Clone, PartialEq)]
+#[cfg_attr(feature = "servo", derive(HeapSizeOf))]
+pub enum LengthOrNumber {
+    Length(Length),
+    Number(Number),
+}
+
+impl HasViewportPercentage for LengthOrNumber {
+    fn has_viewport_percentage(&self) -> bool {
+        match *self {
+            LengthOrNumber::Length(length) => length.has_viewport_percentage(),
+            _ => false
+        }
+    }
+}
+
+impl ToCss for LengthOrNumber {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        match *self {
+            LengthOrNumber::Length(len) => len.to_css(dest),
+            LengthOrNumber::Number(number) => number.to_css(dest),
+        }
+    }
+}
+
+impl Parse for LengthOrNumber {
+    fn parse(input: &mut Parser) -> Result<Self, ()> {
+        let length = input.try(Length::parse);
+        if let Ok(len) = length {
+            return Ok(LengthOrNumber::Length(len));
+        }
+
+        let num = try!(Number::parse_non_negative(input));
+        Ok(LengthOrNumber::Number(num))
+    }
+}
+
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index 30ca7266185..84ad99c6112 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -22,8 +22,8 @@ pub use self::image::{AngleOrCorner, ColorStop, EndingShape as GradientEndingSha
 pub use self::image::{GradientKind, HorizontalDirection, Image, LengthOrKeyword, LengthOrPercentageOrKeyword};
 pub use self::image::{SizeKeyword, VerticalDirection};
 pub use self::length::{FontRelativeLength, ViewportPercentageLength, CharacterWidth, Length, CalcLengthOrPercentage};
-pub use self::length::{Percentage, LengthOrPercentage, LengthOrPercentageOrAuto, LengthOrPercentageOrNone};
-pub use self::length::{LengthOrNone, LengthOrPercentageOrAutoOrContent, CalcUnit};
+pub use self::length::{Percentage, LengthOrNone, LengthOrNumber, LengthOrPercentage, LengthOrPercentageOrAuto};
+pub use self::length::{LengthOrPercentageOrNone, LengthOrPercentageOrAutoOrContent, CalcUnit};
 
 pub mod basic_shape;
 pub mod image;