Add tests for rotation animation

This commit is contained in:
Michael Howell 2016-06-26 09:10:31 -07:00
parent e10288ec1c
commit cab6260c32
3 changed files with 61 additions and 0 deletions

View file

@ -4516,6 +4516,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",
@ -11604,6 +11616,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",

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>

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>