CSS 'transformation: skew()' should take <angle> type as parameters

Current implementation is taking <number> type as parameter so skew()
does not work properly. Let the skew() to get <angle> as specification
described.

Fixes #6237.

components/layout/display_list_builder.rs

@@ -1217,8 +1217,8 @@ impl FragmentDisplayListBuilding for Fragment {
                     transform::ComputedOperation::Matrix(m) => {
                         m.to_gfx_matrix()
                     }
-                    transform::ComputedOperation::Skew(sx, sy) => {
+                    transform::ComputedOperation::Skew(theta_x, theta_y) => {
-                        Matrix4::create_skew(sx, sy)
+                        Matrix4::create_skew(theta_x.radians(), theta_y.radians())
                     }
                 };
 

components/style/animation.rs

@@ -415,6 +415,13 @@ impl Interpolate for i32 {
     }
 }
 
+impl Interpolate for Angle {
+    #[inline]
+    fn interpolate(&self, other: &Angle, time: f64) -> Option<Angle> {
+        self.radians().interpolate(&other.radians(), time).map(Angle)
+    }
+}
+
 impl Interpolate for Visibility {
     #[inline]
     fn interpolate(&self, other: &Visibility, time: f64)
@@ -804,7 +811,7 @@ fn build_identity_transform_list(list: &Vec<TransformOperation>) -> Vec<Transfor
                 result.push(TransformOperation::Matrix(identity));
             }
             TransformOperation::Skew(..) => {
-                result.push(TransformOperation::Skew(0.0, 0.0));
+                result.push(TransformOperation::Skew(Angle(0.0), Angle(0.0)));
             }
             TransformOperation::Translate(..) => {
                 result.push(TransformOperation::Translate(LengthOrPercentage::zero(),

components/style/properties.mako.rs

@@ -3610,7 +3610,7 @@ pub mod longhands {
             #[derive(Clone, Debug, PartialEq, HeapSizeOf)]
             pub enum ComputedOperation {
                 Matrix(ComputedMatrix),
-                Skew(CSSFloat, CSSFloat),
+                Skew(computed::Angle, computed::Angle),
                 Translate(computed::LengthOrPercentage,
                           computed::LengthOrPercentage,
                           computed::Length),
@@ -3645,6 +3645,15 @@ pub mod longhands {
             Ok((first, second))
         }
 
+        fn parse_two_angles(input: &mut Parser) -> Result<(specified::Angle, specified::Angle),()> {
+            let first = try!(specified::Angle::parse(input));
+            let second = input.try(|input| {
+                try!(input.expect_comma());
+                specified::Angle::parse(input)
+            }).unwrap_or(specified::Angle(0.0));
+            Ok((first, second))
+        }
+
         #[derive(Copy, Clone, Debug, PartialEq)]
         enum TranslateKind {
             Translate,
@@ -3657,7 +3666,7 @@ pub mod longhands {
         #[derive(Clone, Debug, PartialEq)]
         enum SpecifiedOperation {
             Matrix(SpecifiedMatrix),
-            Skew(CSSFloat, CSSFloat),
+            Skew(specified::Angle, specified::Angle),
             Translate(TranslateKind,
                       specified::LengthOrPercentage,
                       specified::LengthOrPercentage,
@@ -3946,22 +3955,22 @@ pub mod longhands {
                     },
                     "skew" => {
                         try!(input.parse_nested_block(|input| {
-                            let (sx, sy) = try!(parse_two_floats(input));
+                            let (theta_x, theta_y) = try!(parse_two_angles(input));
-                            result.push(SpecifiedOperation::Skew(sx, sy));
+                            result.push(SpecifiedOperation::Skew(theta_x, theta_y));
                             Ok(())
                         }))
                     },
                     "skewx" => {
                         try!(input.parse_nested_block(|input| {
-                            let sx = try!(input.expect_number());
+                            let theta_x = try!(specified::Angle::parse(input));
-                            result.push(SpecifiedOperation::Skew(sx, 1.0));
+                            result.push(SpecifiedOperation::Skew(theta_x, specified::Angle(0.0)));
                             Ok(())
                         }))
                     },
                     "skewy" => {
                         try!(input.parse_nested_block(|input| {
-                            let sy = try!(input.expect_number());
+                            let theta_y = try!(specified::Angle::parse(input));
-                            result.push(SpecifiedOperation::Skew(1.0, sy));
+                            result.push(SpecifiedOperation::Skew(specified::Angle(0.0), theta_y));
                             Ok(())
                         }))
                     },
@@ -4009,8 +4018,8 @@ pub mod longhands {
                         SpecifiedOperation::Rotate(ax, ay, az, theta) => {
                             result.push(computed_value::ComputedOperation::Rotate(ax, ay, az, theta));
                         }
-                        SpecifiedOperation::Skew(sx, sy) => {
+                        SpecifiedOperation::Skew(theta_x, theta_y) => {
-                            result.push(computed_value::ComputedOperation::Skew(sx, sy));
+                            result.push(computed_value::ComputedOperation::Skew(theta_x, theta_y));
                         }
                         SpecifiedOperation::Perspective(d) => {
                             result.push(computed_value::ComputedOperation::Perspective(d.to_computed_value(context)));

tests/ref/basic.list

@@ -371,6 +371,7 @@ flaky_cpu == linebreak_simple_a.html linebreak_simple_b.html
 == transform_3d.html transform_3d_ref.html
 == transform_optimization.html transform_optimization_ref.html
 == transform_simple_a.html transform_simple_ref.html
+== transform_skew_a.html transform_skew_ref.html
 == transform_stacking_context_a.html transform_stacking_context_ref.html
 == upper_id_attr.html upper_id_attr_ref.html
 flaky_cpu,prefs:"layout.writing-mode.enabled" == vertical-lr-blocks.html vertical-lr-blocks_ref.html

tests/ref/transform_skew_a.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    height: 150px;
+    width: 150px;
+}
+
+div>div {
+    background-color: blue;
+}
+
+.container {
+    border: 1px solid black;
+    margin: 20px;
+}
+
+.transformed1 {
+    transform: skewX(0.3rad);
+}
+
+.transformed2 {
+    transform: skewY(0.5rad);
+}
+
+.transformed3 {
+    transform: skew(0.3rad, 0.5rad);
+}
+</style>
+</head>
+<body>
+<p>
+<div class="container">
+    <div class="transformed1"></div>
+</div>
+</p>
+
+<p>
+<div class="container">
+    <div class="transformed2"></div>
+</div>
+</p>
+
+<p>
+<div class="container">
+    <div class="transformed3"></div>
+</div>
+</p>
+</body>
+</html>

tests/ref/transform_skew_ref.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    height: 150px;
+    width: 150px;
+}
+
+div>div {
+    background-color: blue;
+}
+
+.container {
+    border: 1px solid black;
+    margin: 20px;
+}
+
+.transformed1_ref {
+    transform: matrix(1, 0, 0.30933624961, 1, 0, 0);
+}
+
+.transformed2_ref {
+    transform: matrix(1, 0.54630248984, 0, 1, 0, 0);
+}
+
+.transformed3_ref {
+    transform: matrix(1, 0.54630248984, 0.30933624961, 1, 0, 0);
+}
+
+</style>
+</head>
+<body>
+<p>
+<div class="container">
+    <div class="transformed1_ref"></div>
+</div>
+</p>
+
+<p>
+<div class="container">
+    <div class="transformed2_ref"></div>
+</div>
+</p>
+
+<p>
+<div class="container">
+    <div class="transformed3_ref"></div>
+</div>
+</p>
+</body>
+</html>