6 transform: translateZ(0px);
7 -webkit-perspective: 400;
15 background-color: green;
23 background-color: red;
24 transform: translateZ(10px);
25 -webkit-transform-style: preserve-3d;
26 -webkit-animation-duration: 100ms;
27 -webkit-animation-fill-mode: both;
28 -webkit-animation-timing-function: linear;
29 -webkit-animation-iteration-count: 1;
32 @-webkit-keyframes anim {
33 from { transform: translateZ(0px) translateX(0px); }
34 to { transform: translateZ(200px) translateX(-200px); }
38 <script src="resources/animation-test-helpers.js"></script>
40 if (window.testRunner) {
41 testRunner.waitUntilDone();
44 function animationDone()
46 var animated = document.getElementById('animated');
48 var expected = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -200, 0, 200, 1];
49 var computed = getPropertyValue("webkitTransform", "animated");
50 if (comparePropertyValue("webkitTransform", computed, expected, 0.002)) {
51 result = "PASS - Computed final position is correct.";
53 result = "FAIL - Computed final position is incorrect. Expected " + expected + ", got " + computed;
55 document.getElementById('result').innerHTML = result;
56 testRunner.notifyDone();
59 function animationStarted()
61 var animated = document.getElementById('animated');
62 animated.style.webkitTransformStyle = 'flat';
67 var animated = document.getElementById('animated');
68 animated.style.webkitAnimationName = "anim";
69 animated.addEventListener('webkitAnimationEnd', animationDone);
70 animated.addEventListener('webkitAnimationStart', animationStarted);
74 <body onload="startTest()">
76 <div id="revealed"></div>
77 <div id="animated"></div>
79 <div id="result"></div>