Auto merge of #17428 - shinglyu:lineargradient, r=nox

Convert -webkit-linear-gradient coordinate system for Stylo

<!-- Please describe your changes on the following line: -->
This patch will fix the -webkit-linear-gradient direction issue in Stylo. I decided to NOT change the behavior of Servo, because according to the webcompat spec the webkit prefixed version should just be an alias of non-prefixed version. But we might want to remove support for old syntax like "-webkit-linear-gradient(top, ...)" (without "to"), because they are not in the spec anymore.

The Gecko layout system use different coordinate systems for prefixed and non-prefixed version, so I did a conversion, but for Servo I keep the modern version only.

Since I believe we should not support old syntax in Servo, so I'm not going to put the test in Servo. I'll submit my test cases to the Gecko wpt test instead.

---
<!-- 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
- [x] These changes fix [Bug 1372821](https://bugzilla.mozilla.org/show_bug.cgi?id=1372821)
<!-- Either: -->
- [ ] There are tests for these changes OR
- [x] These changes do not require tests because test will be submitted to the Gecko side

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- 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/17428)
<!-- Reviewable:end -->

components/style/values/computed/image.rs

@@ -18,7 +18,9 @@ use values::generics::image::{CompatMode, ColorStop as GenericColorStop, EndingS
 use values::generics::image::{Gradient as GenericGradient, GradientItem as GenericGradientItem};
 use values::generics::image::{Image as GenericImage, GradientKind as GenericGradientKind};
 use values::generics::image::{ImageRect as GenericImageRect, LineDirection as GenericLineDirection};
-use values::specified::image::LineDirection as SpecifiedLineDirection;
+use values::generics::position::Position as GenericPosition;
+use values::specified::image::{Gradient as SpecifiedGradient, LineDirection as SpecifiedLineDirection};
+use values::specified::image::{GradientKind as SpecifiedGradientKind};
 use values::specified::position::{X, Y};
 
 /// A computed image layer.
@@ -93,25 +95,38 @@ impl GenericLineDirection for LineDirection {
     }
 }
 
-impl ToComputedValue for SpecifiedLineDirection {
+impl SpecifiedLineDirection {
-    type ComputedValue = LineDirection;
+    /// Takes a modern linear gradient angle and convert it to Gecko's old coordinate for
+    /// webkit-prefixed version
+    fn to_gecko_coordinate(modern_angle: f32, _compat_mode: CompatMode) -> f32 {
+        #[cfg(feature = "gecko")]
+        {
+            return match _compat_mode {
+                CompatMode::Modern => modern_angle,
+                CompatMode::WebKit => -modern_angle + 270.
+            }
+        }
+        #[cfg(feature = "servo")]
+        modern_angle
+    }
 
-    fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
+    /// Manually derived to_computed_value
+    fn to_computed_value(&self, context: &Context, compat_mode: CompatMode) -> LineDirection {
         match *self {
             SpecifiedLineDirection::Angle(ref angle) => {
                 LineDirection::Angle(angle.to_computed_value(context))
             },
             SpecifiedLineDirection::Horizontal(X::Left) => {
-                LineDirection::Angle(Angle::Degree(270.))
+                LineDirection::Angle(Angle::Degree(SpecifiedLineDirection::to_gecko_coordinate(270., compat_mode)))
             },
             SpecifiedLineDirection::Horizontal(X::Right) => {
-                LineDirection::Angle(Angle::Degree(90.))
+                LineDirection::Angle(Angle::Degree(SpecifiedLineDirection::to_gecko_coordinate(90., compat_mode)))
             },
             SpecifiedLineDirection::Vertical(Y::Top) => {
-                LineDirection::Angle(Angle::Degree(0.))
+                LineDirection::Angle(Angle::Degree(SpecifiedLineDirection::to_gecko_coordinate(0., compat_mode)))
             },
             SpecifiedLineDirection::Vertical(Y::Bottom) => {
-                LineDirection::Angle(Angle::Degree(180.))
+                LineDirection::Angle(Angle::Degree(SpecifiedLineDirection::to_gecko_coordinate(180., compat_mode)))
             },
             SpecifiedLineDirection::Corner(x, y) => {
                 LineDirection::Corner(x, y)
@@ -119,7 +134,7 @@ impl ToComputedValue for SpecifiedLineDirection {
         }
     }
 
-    fn from_computed_value(computed: &Self::ComputedValue) -> Self {
+    fn from_computed_value(computed: &LineDirection) -> Self {
         match *computed {
             LineDirection::Angle(ref angle) => {
                 SpecifiedLineDirection::Angle(ToComputedValue::from_computed_value(angle))
@@ -130,3 +145,53 @@ impl ToComputedValue for SpecifiedLineDirection {
         }
     }
 }
+
+impl ToComputedValue for SpecifiedGradient {
+    type ComputedValue = Gradient;
+
+    fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
+        Self::ComputedValue {
+            kind: self.kind.to_computed_value(context, self.compat_mode),
+            items: self.items.to_computed_value(context),
+            repeating: self.repeating,
+            compat_mode: self.compat_mode
+        }
+    }
+
+    fn from_computed_value(computed: &Self::ComputedValue) -> Self {
+        Self {
+            kind: SpecifiedGradientKind::from_computed_value(&computed.kind),
+            items: ToComputedValue::from_computed_value(&computed.items),
+            repeating: computed.repeating,
+            compat_mode: computed.compat_mode
+        }
+    }
+}
+
+impl SpecifiedGradientKind {
+    /// Manually derived to_computed_value
+    pub fn to_computed_value(&self, context: &Context, compat_mode: CompatMode) -> GradientKind {
+        match self {
+            &GenericGradientKind::Linear(ref line_direction) => {
+                GenericGradientKind::Linear(line_direction.to_computed_value(context, compat_mode))
+            },
+            &GenericGradientKind::Radial(ref ending_shape, ref position) => {
+                GenericGradientKind::Radial(ending_shape.to_computed_value(context),
+                             position.to_computed_value(context))
+            }
+        }
+    }
+
+    /// Manually derived from_computed_value
+    pub fn from_computed_value(computed: &GradientKind) -> SpecifiedGradientKind {
+        match *computed {
+            GenericGradientKind::Linear(line_direction) => {
+                GenericGradientKind::Linear(SpecifiedLineDirection::from_computed_value(&line_direction))
+            },
+            GenericGradientKind::Radial(ending_shape, position) => {
+                GenericGradientKind::Radial(GenericEndingShape::from_computed_value(&ending_shape),
+                                            GenericPosition::from_computed_value(&position))
+            }
+        }
+    }
+}

components/style/values/generics/image.rs

@@ -35,7 +35,7 @@ pub enum Image<Gradient, ImageRect> {
 
 /// A CSS gradient.
 /// https://drafts.csswg.org/css-images/#gradients
-#[derive(Clone, Debug, HasViewportPercentage, PartialEq, ToComputedValue)]
+#[derive(Clone, Debug, HasViewportPercentage, PartialEq)]
 #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
 pub struct Gradient<LineDirection, Length, LengthOrPercentage, Position, Color> {
     /// Gradients can be linear or radial.
@@ -59,7 +59,7 @@ pub enum CompatMode {
 }
 
 /// A gradient kind.
-#[derive(Clone, Copy, Debug, HasViewportPercentage, PartialEq, ToComputedValue)]
+#[derive(Clone, Copy, Debug, HasViewportPercentage, PartialEq)]
 #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
 pub enum GradientKind<LineDirection, Length, LengthOrPercentage, Position> {
     /// A linear gradient.