Normalize rotations in computed transforms

servo · bors-servo · Sep 15, 2016 · Sep 15, 2016 · Sep 15, 2016 · 20b3c4bf21b8cc2bdc378a77e180cfaa0ec242fc
commit 20b3c4bf21b8cc2bdc378a77e180cfaa0ec242fc
diff --git a/components/style/properties/longhand/effects.mako.rs b/components/style/properties/longhand/effects.mako.rs
@@ -1099,7 +1099,8 @@ ${helpers.predefined_type("opacity",
                         result.push(computed_value::ComputedOperation::Scale(sx, sy, sz));
                     }
                     SpecifiedOperation::Rotate(ax, ay, az, theta) => {
-                        result.push(computed_value::ComputedOperation::Rotate(ax, ay, az, theta));
+                        let len = (ax * ax + ay * ay + az * az).sqrt();
+                        result.push(computed_value::ComputedOperation::Rotate(ax / len, ay / len, az / len, theta));
                     }
                     SpecifiedOperation::Skew(theta_x, theta_y) => {
                         result.push(computed_value::ComputedOperation::Skew(theta_x, theta_y));

diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -3720,6 +3720,18 @@
             "url": "/_mozilla/css/non-inline-block-resets-underline-property.html"
           }
         ],
+        "css/normalize-rotation.html": [
+          {
+            "path": "css/normalize-rotation.html",
+            "references": [
+              [
+                "/_mozilla/css/normalize-rotation-ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/normalize-rotation.html"
+          }
+        ],
         "css/noscript.html": [
           {
             "path": "css/noscript.html",
@@ -13114,6 +13126,18 @@
           "url": "/_mozilla/css/non-inline-block-resets-underline-property.html"
         }
       ],
+      "css/normalize-rotation.html": [
+        {
+          "path": "css/normalize-rotation.html",
+          "references": [
+            [
+              "/_mozilla/css/normalize-rotation-ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/normalize-rotation.html"
+        }
+      ],
       "css/noscript.html": [
         {
           "path": "css/noscript.html",

diff --git a/tests/wpt/mozilla/tests/css/normalize-rotation-ref.html b/tests/wpt/mozilla/tests/css/normalize-rotation-ref.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Rotations should be normalized in computed transforms</title>
+    <style type="text/css">
+    #box {
+        width: 100px;
+        height: 100px;
+        transform: rotate3d(0.5,0.5,0.5,45deg);
+        background-color: red;
+        position: absolute;
+        top: 200px;
+        left: 200px;
+    }
+    </style>
+</head>
+<body>
+    <div id="box"></div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/css/normalize-rotation.html b/tests/wpt/mozilla/tests/css/normalize-rotation.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Rotations should be normalized in computed transforms</title>
+    <link rel="match" href="normalize-rotation-ref.html">
+    <style type="text/css">
+    #box {
+        width: 100px;
+        height: 100px;
+        transform: rotate3d(1,1,1,45deg);
+        background-color: red;
+        position: absolute;
+        top: 200px;
+        left: 200px;
+    }
+    </style>
+</head>
+<body>
+    <div id="box"></div>
+</body>
+</html>