Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 04:30:10 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #11873 - notriddle:rotate_anim, r=glennw

Browse source 
Rotate animation

Add rotation interpolation code for the case where their direction vectors are equal.
___

- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #11808 (github issue number if applicable).
- [X] There are tests for these changes

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/11873)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2016-07-10 16:30:48 -07:00 • committed by GitHub
commit beaef005c2
4 changed files with 73 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/style/properties/helpers/animated_properties.mako.rs
View file

@ -606,9 +606,18 @@ fn interpolate_transform_list(from_list: &[TransformOperation],
result.push(TransformOperation::Scale(ix, iy, iz));
}
(&TransformOperation::Rotate(fx, fy, fz, fa),
&TransformOperation::Rotate(_tx, _ty, _tz, _ta)) => {
// TODO(gw): Implement matrix decomposition and interpolation
result.push(TransformOperation::Rotate(fx, fy, fz, fa));
&TransformOperation::Rotate(tx, ty, tz, ta)) => {
let norm_f = ((fx * fx) + (fy * fy) + (fz * fz)).sqrt();
let norm_t = ((tx * tx) + (ty * ty) + (tz * tz)).sqrt();
let (fx, fy, fz) = (fx / norm_f, fy / norm_f, fz / norm_f);
let (tx, ty, tz) = (tx / norm_t, ty / norm_t, tz / norm_t);
if fx == tx && fy == ty && fz == tz {
let ia = fa.interpolate(&ta, time).unwrap();
result.push(TransformOperation::Rotate(fx, fy, fz, ia));
} else {
// TODO(gw): Implement matrix decomposition and interpolation
result.push(TransformOperation::Rotate(fx, fy, fz, fa));
}
}
(&TransformOperation::Perspective(fd),
&TransformOperation::Perspective(_td)) => {

24
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -4540,6 +4540,18 @@
"url": "/_mozilla/css/root_pseudo_a.html"
}
],
"css/rotate_anim.html": [
{
"path": "css/rotate_anim.html",
"references": [
[
"/_mozilla/css/rotate_anim_ref.html",
"=="
]
],
"url": "/_mozilla/css/rotate_anim.html"
}
],
"css/rtl_body.html": [
{
"path": "css/rtl_body.html",
@ -11696,6 +11708,18 @@
"url": "/_mozilla/css/root_pseudo_a.html"
}
],
"css/rotate_anim.html": [
{
"path": "css/rotate_anim.html",
"references": [
[
"/_mozilla/css/rotate_anim_ref.html",
"=="
]
],
"url": "/_mozilla/css/rotate_anim.html"
}
],
"css/rtl_body.html": [
{
"path": "css/rtl_body.html",

26
tests/wpt/mozilla/tests/css/rotate_anim.html Normal file
View file

@ -0,0 +1,26 @@
<!doctype html>
<html>
<meta charset="utf-8">
<title>Rotation transformation</title>
<link rel="match" href="rotate_anim_ref.html">
<style>
div {
padding: 200px;
transform: rotate(90deg);
transition: transform 0s linear;
}
div.active {
transform: rotate(180deg);
}
</style>
<div>Hello Servo!</div>
<script>
var html = document.getElementsByTagName("html")[0];
var div = document.getElementsByTagName("div")[0];
requestAnimationFrame(function() {
div.className = "active";
requestAnimationFrame(function() {});
});
</script>

11
tests/wpt/mozilla/tests/css/rotate_anim_ref.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<title>Rotation transformation reference</title>
<style>
div {
padding: 200px;
transform: rotate(180deg);
transition: transform 1s linear;
}
</style>
<div>Hello Servo!</div>