third_party/WebKit/LayoutTests/animations/change-transform-style-during-animation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     #container {
   6       transform: translateZ(0px);
   7       -webkit-perspective: 400;
   8     }
   9
  10     #revealed {
  11       position: absolute;
  12       left: 100px;
  13       height: 100px;
  14       width: 100px;
  15       background-color: green;
  16     }
  17
  18     #animated {
  19       position: absolute;
  20       left: 100px;
  21       height: 100px;
  22       width: 100px;
  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;
  30     }
  31
  32     @-webkit-keyframes anim {
  33       from { transform: translateZ(0px) translateX(0px); }
  34       to { transform: translateZ(200px) translateX(-200px); }
  35     }
  36    </style>
  37
  38    <script src="resources/animation-test-helpers.js"></script>
  39    <script>
  40      if (window.testRunner) {
  41        testRunner.waitUntilDone();
  42      }
  43
  44      function animationDone()
  45      {
  46        var animated = document.getElementById('animated');
  47        var result;
  48        var expected = "matrix3d(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(computed, expected, 0.002)) {
  51          result = "PASS - Computed final position is correct.";
  52        } else {
  53          result = "FAIL - Computed final position is incorrect. Expected " + expected + ", got " + computed;
  54        }
  55        document.getElementById('result').innerHTML = result;
  56        testRunner.notifyDone();
  57      }
  58
  59      function animationStarted()
  60      {
  61        var animated = document.getElementById('animated');
  62        animated.style.webkitTransformStyle = 'flat';
  63      }
  64
  65      function startTest()
  66      {
  67        var animated = document.getElementById('animated');
  68        animated.style.webkitAnimationName = "anim";
  69        animated.addEventListener('webkitAnimationEnd', animationDone);
  70        animated.addEventListener('webkitAnimationStart', animationStarted);
  71      }
  72    </script>
  73 </head>
  74 <body onload="startTest()">
  75   <div id="container">
  76     <div id="revealed"></div>
  77     <div id="animated"></div>
  78   </div>
  79   <div id="result"></div>
  80 </body>
  81 </html>