Normalize rotations in computed transforms

This commit is contained in:
Nazım Can Altınova 2016-09-15 15:32:34 +03:00
parent 1901a21a2c
commit 20b3c4bf21
4 changed files with 69 additions and 1 deletions

View file

@ -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));

View file

@ -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",

View file

@ -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>

View file

@ -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>