2008-09-12 21:54:57 +00:00
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
|
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
|
|
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
|
<title>Animation using matrix()</title>
|
|
|
|
|
<style type="text/css" media="screen">
|
|
|
|
|
#box {
|
|
|
|
|
position: relative;
|
2010-01-15 01:22:54 +00:00
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
2008-09-12 21:54:57 +00:00
|
|
|
background-color: #9bb;
|
|
|
|
|
-webkit-animation-name: horiz, vert;
|
2010-01-19 23:49:05 +00:00
|
|
|
-webkit-animation-duration: 1s;
|
2008-09-12 21:54:57 +00:00
|
|
|
-webkit-animation-iteration-count: infinite;
|
|
|
|
|
-webkit-animation-direction: alternate;
|
|
|
|
|
-webkit-animation-timing-function: linear;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes horiz {
|
|
|
|
|
from { left: 0px; }
|
2010-01-19 23:49:05 +00:00
|
|
|
to { left:300px; }
|
2008-09-12 21:54:57 +00:00
|
|
|
}
|
|
|
|
|
@-webkit-keyframes vert {
|
|
|
|
|
from { top: 0px; }
|
2010-01-19 23:49:05 +00:00
|
|
|
to { top: 300px; }
|
2008-09-12 21:54:57 +00:00
|
|
|
}
|
|
|
|
|
</style>
|
2011-04-26 03:16:31 +00:00
|
|
|
<script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
|
2008-09-12 21:54:57 +00:00
|
|
|
<script type="text/javascript" charset="utf-8">
|
2008-12-11 00:48:35 +00:00
|
|
|
|
|
|
|
|
const expectedValues = [
|
|
|
|
|
// [animation-name, time, element-id, property, expected-value, tolerance]
|
2010-01-19 23:49:05 +00:00
|
|
|
[null, 0.75, "box", "left", 150, 40],
|
|
|
|
|
[null, 0.75, "box", "top", 225, 40],
|
2008-12-11 00:48:35 +00:00
|
|
|
];
|
2008-09-12 21:54:57 +00:00
|
|
|
|
|
|
|
|
function removeAnim()
|
|
|
|
|
{
|
|
|
|
|
var target = document.getElementById("box");
|
|
|
|
|
var left = window.getComputedStyle(target).left;
|
|
|
|
|
target.style.webkitAnimationName = "vert";
|
|
|
|
|
target.style.left = left;
|
|
|
|
|
}
|
|
|
|
|
|
2008-12-11 00:48:35 +00:00
|
|
|
function setup()
|
2008-09-12 21:54:57 +00:00
|
|
|
{
|
2010-01-19 23:49:05 +00:00
|
|
|
setTimeout("removeAnim()", 500);
|
2008-09-12 21:54:57 +00:00
|
|
|
}
|
|
|
|
|
|
2008-12-11 00:48:35 +00:00
|
|
|
runAnimationTest(expectedValues, setup);
|
2008-09-12 21:54:57 +00:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2010-01-19 23:49:05 +00:00
|
|
|
This test performs two animations, left and top. It animates over 1 second.
|
|
|
|
|
At 0.5 second it removes the left animation and the top animation should continue
|
2008-09-12 21:54:57 +00:00
|
|
|
from where it left off.
|
|
|
|
|
<div id="box">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="result">
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
