blob: 03ae41dff82dd09fbb25dafb3565290fc794ec98 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
#container {
transform: translateZ(0px);
perspective: 400;
}
#revealed {
position: absolute;
left: 100px;
height: 100px;
width: 100px;
background-color: green;
}
#animated {
position: absolute;
left: 100px;
height: 100px;
width: 100px;
background-color: red;
transform: translateZ(10px);
transform-style: preserve-3d;
animation-duration: 100ms;
animation-fill-mode: both;
animation-timing-function: linear;
animation-iteration-count: 1;
}
@keyframes anim {
from { transform: translateZ(0px) translateX(0px); }
to { transform: translateZ(200px) translateX(-200px); }
}
</style>
<script src="resources/animation-test-helpers.js"></script>
<script>
'use strict';
if (window.testRunner) {
testRunner.waitUntilDone();
}
function animationDone()
{
var result;
var expected = "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -200, 0, 200, 1)";
var computed = getPropertyValue("transform", "animated");
if (comparePropertyValue(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;
requestAnimationFrame(function() {
requestAnimationFrame(function() {
if (window.testRunner)
testRunner.notifyDone();
});
});
}
function animationStarted()
{
var animated = document.getElementById('animated');
animated.style.transformStyle = 'flat';
}
function startTest()
{
var animated = document.getElementById('animated');
animated.style.animationName = "anim";
animated.addEventListener('webkitAnimationEnd', animationDone);
animated.addEventListener('webkitAnimationStart', animationStarted);
}
</script>
</head>
<body onload="startTest()">
<div id="container">
<div id="revealed"></div>
<div id="animated"></div>
</div>
<div id="result"></div>
</body>
</html>