Bug 1484316: Serialize clip-path and shape-outside using Servo. r=xidorn

Differential Revision: https://phabricator.services.mozilla.com/D3653

UltraBlame original commit: 53f23b446b29fd9dd32709be5c39b9eb3da9735e

layout/style/ServoCSSPropList.mako.py

@@ -97,6 +97,8 @@ def method(prop):
     "OffsetPath",
     "Opacity",
     "Resize",
+    "basic_shape::ClippingShape",
+    "basic_shape::FloatAreaShape",
     "url::ImageUrlOrNone",
 ]
 

layout/style/nsCSSProps.cpp

@@ -696,17 +696,6 @@ static_assert(ArrayLength(nsCSSProps::kFlexBasisKTable) ==
 
 
 
-const KTableEntry nsCSSProps::kClipPathGeometryBoxKTable[] = {
-  { eCSSKeyword_content_box, StyleGeometryBox::ContentBox },
-  { eCSSKeyword_padding_box, StyleGeometryBox::PaddingBox },
-  { eCSSKeyword_border_box, StyleGeometryBox::BorderBox },
-  { eCSSKeyword_margin_box, StyleGeometryBox::MarginBox },
-  { eCSSKeyword_fill_box, StyleGeometryBox::FillBox },
-  { eCSSKeyword_stroke_box, StyleGeometryBox::StrokeBox },
-  { eCSSKeyword_view_box, StyleGeometryBox::ViewBox },
-  { eCSSKeyword_UNKNOWN, -1 }
-};
-
 const KTableEntry nsCSSProps::kShapeRadiusKTable[] = {
   { eCSSKeyword_closest_side, StyleShapeRadius::ClosestSide },
   { eCSSKeyword_farthest_side, StyleShapeRadius::FarthestSide },
@@ -727,14 +716,6 @@ const KTableEntry nsCSSProps::kFilterFunctionKTable[] = {
   { eCSSKeyword_UNKNOWN, -1 }
 };
 
-const KTableEntry nsCSSProps::kShapeOutsideShapeBoxKTable[] = {
-  { eCSSKeyword_content_box, StyleGeometryBox::ContentBox },
-  { eCSSKeyword_padding_box, StyleGeometryBox::PaddingBox },
-  { eCSSKeyword_border_box, StyleGeometryBox::BorderBox },
-  { eCSSKeyword_margin_box, StyleGeometryBox::MarginBox },
-  { eCSSKeyword_UNKNOWN, -1 }
-};
-
 int32_t
 nsCSSProps::FindIndexOfKeyword(nsCSSKeyword aKeyword,
                                const KTableEntry aTable[])

layout/style/nsCSSProps.h

@@ -313,10 +313,8 @@ class nsCSSProps {
 
   static const KTableEntry kBorderImageRepeatKTable[];
   static const KTableEntry kBorderStyleKTable[];
-  static const KTableEntry kClipPathGeometryBoxKTable[];
   static const KTableEntry kShapeRadiusKTable[];
   static const KTableEntry kFilterFunctionKTable[];
-  static const KTableEntry kShapeOutsideShapeBoxKTable[];
   static const KTableEntry kBoxShadowTypeKTable[];
   static const KTableEntry kCursorKTable[];
 

layout/style/nsComputedDOMStyle.cpp

@@ -5019,58 +5019,6 @@ nsComputedDOMStyle::CreatePrimitiveValueForShapeSource(
   return valueList.forget();
 }
 
-already_AddRefed<CSSValue>
-nsComputedDOMStyle::GetShapeSource(
-  const StyleShapeSource& aShapeSource,
-  const KTableEntry aBoxKeywordTable[])
-{
-  switch (aShapeSource.GetType()) {
-    case StyleShapeSourceType::Shape:
-      return CreatePrimitiveValueForShapeSource(aShapeSource.GetBasicShape(),
-                                                aShapeSource.GetReferenceBox(),
-                                                aBoxKeywordTable);
-    case StyleShapeSourceType::Box:
-      return CreatePrimitiveValueForShapeSource(nullptr,
-                                                aShapeSource.GetReferenceBox(),
-                                                aBoxKeywordTable);
-    case StyleShapeSourceType::URL: {
-      RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-      SetValueToURLValue(aShapeSource.GetURL(), val);
-      return val.forget();
-    }
-    case StyleShapeSourceType::None: {
-      RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-      val->SetIdent(eCSSKeyword_none);
-      return val.forget();
-    }
-    case StyleShapeSourceType::Image: {
-      RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-      SetValueToStyleImage(*aShapeSource.GetShapeImage(), val);
-      return val.forget();
-    }
-    case StyleShapeSourceType::Path: {
-
-
-      MOZ_ASSERT_UNREACHABLE("Unexpected SVG Path type.");
-    }
-  }
-  return nullptr;
-}
-
-already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetClipPath()
-{
-  return GetShapeSource(StyleSVGReset()->mClipPath,
-                        nsCSSProps::kClipPathGeometryBoxKTable);
-}
-
-already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetShapeOutside()
-{
-  return GetShapeSource(StyleDisplay()->mShapeOutside,
-                        nsCSSProps::kShapeOutsideShapeBoxKTable);
-}
-
 void
 nsComputedDOMStyle::SetCssTextToCoord(nsAString& aCssText,
                                       const nsStyleCoord& aCoord,

layout/style/nsComputedDOMStyle.h

@@ -414,7 +414,6 @@ class nsComputedDOMStyle final : public nsDOMCSSDeclaration
   already_AddRefed<CSSValue> DoGetScrollSnapCoordinate();
   already_AddRefed<CSSValue> DoGetScrollbarFaceColor();
   already_AddRefed<CSSValue> DoGetScrollbarTrackColor();
-  already_AddRefed<CSSValue> DoGetShapeOutside();
 
 
   already_AddRefed<CSSValue> DoGetCaretColor();
@@ -474,7 +473,6 @@ class nsComputedDOMStyle final : public nsDOMCSSDeclaration
 
 
 
-  already_AddRefed<CSSValue> DoGetClipPath();
   already_AddRefed<CSSValue> DoGetFilter();
   already_AddRefed<CSSValue> DoGetPaintOrder();
 
@@ -559,10 +557,6 @@ class nsComputedDOMStyle final : public nsDOMCSSDeclaration
   already_AddRefed<CSSValue> CreatePrimitiveValueForStyleFilter(
     const nsStyleFilter& aStyleFilter);
 
-  already_AddRefed<CSSValue>
-  GetShapeSource(const mozilla::StyleShapeSource& aShapeSource,
-                 const KTableEntry aBoxKeywordTable[]);
-
   template<typename ReferenceBox>
   already_AddRefed<CSSValue>
   CreatePrimitiveValueForShapeSource(

layout/style/test/test_transitions_per_property.html

@@ -729,16 +729,16 @@
   { start: "circle(calc(80px + 20px))", end: "circle(calc(200px + 300px))",
     expected: ["circle", ["200px at 50% 50%"]] },
   { start: "circle(calc(80% + 20%))", end: "circle(calc(200% + 300%))",
-    expected: ["circle", ["calc(0px + 200%) at 50% 50%"]] },
+    expected: ["circle", ["200% at 50% 50%"]] },
   { start: "circle(calc(10px + 20%))", end: "circle(calc(50px + 40%))",
-    expected: ["circle", ["calc(20px + 25%) at 50% 50%"]] },
+    expected: ["circle", ["calc(25% + 20px) at 50% 50%"]] },
   // matching functions with interpolation between percentage/pixel values
   { start: "circle(20px)", end: "circle(100%)",
-    expected: ["circle", ["calc(15px + 25%) at 50% 50%"]] },
+    expected: ["circle", ["calc(25% + 15px) at 50% 50%"]] },
   { start: "ellipse(100% 100px at 8px 20%) border-box",
     end:   "ellipse(40px 4%    at 80% 60px) border-box",
-    expected: ["ellipse", ["calc(10px + 75%) calc(75px + 1%) at " +
-                           "calc(6px + 20%) calc(15px + 15%)"],
+    expected: ["ellipse", ["calc(75% + 10px) calc(1% + 75px) at " +
+                           "calc(20% + 6px) calc(15% + 15px)"],
                "border-box"] },
   // no interpolation for keywords
   { start: "circle()", end: "circle(50px)",
@@ -762,7 +762,7 @@
   { start: "ellipse(500px 500px)", end: "ellipse(farthest-side farthest-side)",
     expected: ["ellipse", ["farthest-side farthest-side at 50% 50%"]] },
   { start: "ellipse(500px 500px)", end: "ellipse(closest-side closest-side)",
-    expected: ["ellipse", ["closest-side closest-side at 50% 50%"]] },
+    expected: ["ellipse", ["at 50% 50%"]] },
   // mismatching boxes
   { start: "circle(100px at 100px 100px) border-box",
     end: "circle(500px at 500px 500px) content-box",

servo/components/style/gecko/conversions.rs

@@ -19,6 +19,7 @@ use stylesheets::{Origin, RulesMutateError};
 use values::computed::{Angle, CalcLengthOrPercentage, Gradient, Image};
 use values::computed::{Integer, LengthOrPercentage, LengthOrPercentageOrAuto};
 use values::computed::{Percentage, TextAlign};
+use values::computed::image::LineDirection;
 use values::computed::url::ComputedImageUrl;
 use values::generics::box_::VerticalAlign;
 use values::generics::grid::{TrackListValue, TrackSize};
@@ -139,6 +140,68 @@ impl Angle {
     }
 }
 
+fn line_direction(
+    horizontal: LengthOrPercentage,
+    vertical: LengthOrPercentage,
+) -> LineDirection {
+    use values::computed::position::Position;
+    use values::specified::position::{X, Y};
+
+    let horizontal_percentage = match horizontal {
+        LengthOrPercentage::Percentage(percentage) => Some(percentage.0),
+        _ => None,
+    };
+
+    let vertical_percentage = match vertical {
+        LengthOrPercentage::Percentage(percentage) => Some(percentage.0),
+        _ => None,
+    };
+
+    let horizontal_as_corner = horizontal_percentage.and_then(|percentage| {
+        if percentage == 0.0 {
+            Some(X::Left)
+        } else if percentage == 1.0 {
+            Some(X::Right)
+        } else {
+            None
+        }
+    });
+
+    let vertical_as_corner = vertical_percentage.and_then(|percentage| {
+        if percentage == 0.0 {
+            Some(Y::Top)
+        } else if percentage == 1.0 {
+            Some(Y::Bottom)
+        } else {
+            None
+        }
+    });
+
+    if let (Some(hc), Some(vc)) = (horizontal_as_corner, vertical_as_corner) {
+        return LineDirection::Corner(hc, vc)
+    }
+
+    if let Some(hc) = horizontal_as_corner {
+        if vertical_percentage == Some(0.5) {
+            return LineDirection::Horizontal(hc)
+        }
+    }
+
+    if let Some(vc) = vertical_as_corner {
+        if horizontal_percentage == Some(0.5) {
+            return LineDirection::Vertical(vc)
+        }
+    }
+
+    LineDirection::MozPosition(
+        Some(Position {
+            horizontal,
+            vertical,
+        }),
+        None,
+    )
+}
+
 impl nsStyleImage {
 
     pub fn set(&mut self, image: Image) {
@@ -174,13 +237,13 @@ impl nsStyleImage {
         }
     }
 
+
     fn set_gradient(&mut self, gradient: Gradient) {
         use self::structs::NS_STYLE_GRADIENT_SIZE_CLOSEST_CORNER as CLOSEST_CORNER;
         use self::structs::NS_STYLE_GRADIENT_SIZE_CLOSEST_SIDE as CLOSEST_SIDE;
         use self::structs::NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER as FARTHEST_CORNER;
         use self::structs::NS_STYLE_GRADIENT_SIZE_FARTHEST_SIDE as FARTHEST_SIDE;
         use self::structs::nsStyleCoord;
-        use values::computed::image::LineDirection;
         use values::generics::image::{Circle, Ellipse, EndingShape, GradientKind, ShapeExtent};
         use values::specified::position::{X, Y};
 
@@ -437,12 +500,11 @@ impl nsStyleImage {
         use self::structs::NS_STYLE_GRADIENT_SIZE_CLOSEST_SIDE as CLOSEST_SIDE;
         use self::structs::NS_STYLE_GRADIENT_SIZE_FARTHEST_CORNER as FARTHEST_CORNER;
         use self::structs::NS_STYLE_GRADIENT_SIZE_FARTHEST_SIDE as FARTHEST_SIDE;
-        use values::computed::{Length, LengthOrPercentage};
+        use values::computed::Length;
         use values::computed::image::LineDirection;
         use values::computed::position::Position;
         use values::generics::image::{Circle, ColorStop, CompatMode, Ellipse};
         use values::generics::image::{EndingShape, GradientKind, ShapeExtent};
-        use values::specified::position::{X, Y};
 
         let gecko_gradient = bindings::Gecko_GetGradientImageValue(self)
             .as_ref()
@@ -456,41 +518,7 @@ impl nsStyleImage {
                 let line_direction = match (angle, horizontal_style, vertical_style) {
                     (Some(a), None, None) => LineDirection::Angle(a),
                     (None, Some(horizontal), Some(vertical)) => {
-                        let horizontal_as_corner = match horizontal {
-                            LengthOrPercentage::Percentage(percentage) => {
-                                if percentage.0 == 0.0 {
-                                    Some(X::Left)
-                                } else if percentage.0 == 1.0 {
-                                    Some(X::Right)
-                                } else {
-                                    None
-                                }
-                            },
-                            _ => None,
-                        };
-                        let vertical_as_corner = match vertical {
-                            LengthOrPercentage::Percentage(percentage) => {
-                                if percentage.0 == 0.0 {
-                                    Some(Y::Top)
-                                } else if percentage.0 == 1.0 {
-                                    Some(Y::Bottom)
-                                } else {
-                                    None
-                                }
-                            },
-                            _ => None,
-                        };
-
-                        match (horizontal_as_corner, vertical_as_corner) {
-                            (Some(hc), Some(vc)) => LineDirection::Corner(hc, vc),
-                            _ => LineDirection::MozPosition(
-                                Some(Position {
-                                    horizontal,
-                                    vertical,
-                                }),
-                                None,
-                            ),
-                        }
+                        line_direction(horizontal, vertical)
                     },
                     (Some(_), Some(horizontal), Some(vertical)) => LineDirection::MozPosition(
                         Some(Position {
@@ -743,17 +771,15 @@ pub mod basic_shape {
                     let r = LengthOrPercentage::from_gecko_style_coord(&other.mCoordinates[1]);
                     let b = LengthOrPercentage::from_gecko_style_coord(&other.mCoordinates[2]);
                     let l = LengthOrPercentage::from_gecko_style_coord(&other.mCoordinates[3]);
-                    let round = (&other.mRadius).into();
+                    let round: BorderRadius = (&other.mRadius).into();
+                    let round = if round.all_zero() { None } else { Some(round) };
                     let rect = Rect::new(
                         t.expect("inset() offset should be a length, percentage, or calc value"),
                         r.expect("inset() offset should be a length, percentage, or calc value"),
                         b.expect("inset() offset should be a length, percentage, or calc value"),
                         l.expect("inset() offset should be a length, percentage, or calc value"),
                     );
-                    GenericBasicShape::Inset(InsetRect {
-                        rect: rect,
-                        round: Some(round),
-                    })
+                    GenericBasicShape::Inset(InsetRect { rect, round })
                 },
                 StyleBasicShapeType::Circle => GenericBasicShape::Circle(Circle {
                     radius: (&other.mCoordinates[0]).into(),

servo/components/style/values/computed/border.rs

@@ -81,3 +81,19 @@ impl ToAnimatedZero for BorderCornerRadius {
         Err(())
     }
 }
+
+impl BorderRadius {
+
+    pub fn all_zero(&self) -> bool {
+        fn all(corner: &BorderCornerRadius) -> bool {
+            fn is_zero(l: &LengthOrPercentage) -> bool {
+                *l == LengthOrPercentage::zero()
+            }
+            is_zero(corner.0.width()) && is_zero(corner.0.height())
+        }
+        all(&self.top_left) &&
+            all(&self.top_right) &&
+            all(&self.bottom_left) &&
+            all(&self.bottom_right)
+    }
+}

testing/web-platform/meta/css/css-shapes/shape-outside/values/shape-margin-003.html.ini

@@ -2,6 +2,3 @@
   [calc((12.5%*6 + 10in) / 4) - inline style]
     expected: FAIL
 
-  [calc((12.5%*6 + 10in) / 4) - computed style]
-    expected: FAIL
-

testing/web-platform/meta/css/css-shapes/shape-outside/values/shape-outside-circle-010.html.ini

@@ -2,12 +2,3 @@
   [circle(calc((12.5%*6 + 10in) / 4)) - inline style]
     expected: FAIL
 
-  [circle(calc(30%)) - computed style]
-    expected: FAIL
-
-  [circle(calc(100%/4)) - computed style]
-    expected: FAIL
-
-  [circle(calc(25%*3)) - computed style]
-    expected: FAIL
-