<!DOCTYPE html>
<html>
<head>
<style>
#container {
-webkit-transform: translateZ(0px);
-webkit-perspective: 400;
}
#revealed {
position: absolute;
left: 100px;
height: 100px;
width: 100px;
background-color: green;
#animated {
background-color: red;
-webkit-transform: translateZ(10px);
-webkit-transform-style: preserve-3d;
-webkit-animation-duration: 100ms;
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
@-webkit-keyframes anim {
from { -webkit-transform: translateZ(0px) translateX(0px); }
to { -webkit-transform: translateZ(200px) translateX(-200px); }
</style>
<script src="resources/animation-test-helpers.js"></script>
<script>
if (window.testRunner)
testRunner.dumpAsText();
function animationDone()
{
var animated = document.getElementById('animated');
var result;
var expected = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -200, 0, 200, 1];
var computed = getPropertyValue("webkitTransform", "animated");
if (comparePropertyValue("webkitTransform", computed, expected, 0.002)) {
result = "PASS - Computed final position is correct.";
} else {
result = "FAIL - Computed final position is incorrect. Expected " + expected + ", got " + computed;
document.getElementById('result').innerHTML = result;
testRunner.notifyDone();
function animationStarted()
animated.style.webkitTransformStyle = 'flat';
function startTest()
animated.style.webkitAnimationName = "anim";
animated.addEventListener('webkitAnimationEnd', animationDone);
waitForAnimationToStart(animated, animationStarted);
</script>
</head>
<body onload="startTest()">
<div id="container">
<div id="revealed"></div>
<div id="animated"></div>
</div>
<div id="result"></div>
</body>
</html>
