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/style/properties.mako.rs

@@ -3167,9 +3167,9 @@ pub mod longhands {
                         (*self).clone()
                 }
 
-                pub fn skew(&mut self, sx: CSSFloat, sy: CSSFloat) {
-                    *self = ComputedMatrix::new(1.0, sx,
-                                                sy, 1.0,
+                pub fn skew(&mut self, theta_x: CSSFloat, theta_y: CSSFloat) {
+                    *self = ComputedMatrix::new(1.0, -theta_y.tan(),
+                                                -theta_x.tan(), 1.0,
                                                 computed::LengthAndPercentage::zero(),
                                                 computed::LengthAndPercentage::zero()) *
                         (*self).clone()
@@ -3259,13 +3259,22 @@ 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(Clone, Debug, PartialEq)]
         enum SpecifiedOperation {
             Matrix(SpecifiedMatrix),
             Translate(specified::LengthAndPercentage, specified::LengthAndPercentage),
             Scale(CSSFloat, CSSFloat),
             Rotate(specified::Angle),
-            Skew(CSSFloat, CSSFloat),
+            Skew(specified::Angle, specified::Angle),
         }
 
         impl ToCss for SpecifiedOperation {
@@ -3388,22 +3397,22 @@ pub mod longhands {
                     },
                     "skew" => {
                         try!(input.parse_nested_block(|input| {
-                            let (sx, sy) = try!(parse_two_floats(input));
-                            result.push(SpecifiedOperation::Skew(sx, sy));
+                            let (theta_x, theta_y) = try!(parse_two_angles(input));
+                            result.push(SpecifiedOperation::Skew(theta_x, theta_y));
                             Ok(())
                         }))
                     },
                     "skewx" => {
                         try!(input.parse_nested_block(|input| {
-                            let sx = try!(input.expect_number());
-                            result.push(SpecifiedOperation::Skew(sx, 1.0));
+                            let theta_x = try!(specified::Angle::parse(input));
+                            result.push(SpecifiedOperation::Skew(theta_x, specified::Angle(0.0)));
                             Ok(())
                         }))
                     },
                     "skewy" => {
                         try!(input.parse_nested_block(|input| {
-                            let sy = try!(input.expect_number());
-                            result.push(SpecifiedOperation::Skew(1.0, sy));
+                            let theta_y = try!(specified::Angle::parse(input));
+                            result.push(SpecifiedOperation::Skew(specified::Angle(0.0), theta_y));
                             Ok(())
                         }))
                     }
@@ -3448,8 +3457,8 @@ pub mod longhands {
                         SpecifiedOperation::Rotate(ref theta) => {
                             result.rotate(f32::consts::PI_2 - theta.radians());
                         }
-                        SpecifiedOperation::Skew(sx, sy) => {
-                            result.skew(sx, sy)
+                        SpecifiedOperation::Skew(ref theta_x, ref theta_y) => {
+                            result.skew(f32::consts::PI_2 - theta_x.radians(), f32::consts::PI_2 - theta_y.radians())
                         }
                     }
                 }

tests/ref/basic.list

@@ -313,6 +313,7 @@ flaky_cpu == linebreak_simple_a.html linebreak_simple_b.html
 == text_transform_none_a.html text_transform_none_ref.html
 == text_transform_uppercase_a.html text_transform_uppercase_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,experimental == 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.3, 1, 0, 0);
+}
+
+.transformed2_ref {
+    transform: matrix(1, 0.5, 0, 1, 0, 0);
+}
+
+.transformed3_ref {
+    transform: matrix(1, 0.5, 0.3, 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>