<!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>