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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     #container {
   6       -webkit-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       -webkit-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 { -webkit-transform: translateZ(0px) translateX(0px); }
  34       to { -webkit-transform: translateZ(200px) translateX(-200px); }
  35     }
  36    </style>
  37
  38    <script src="resources/animation-test-helpers.js"></script>
  39    <script>
  40      if (window.layoutTestController) {
  41        layoutTestController.dumpAsText();
  42        layoutTestController.waitUntilDone();
  43      }
  44
  45      function animationDone()
  46      {
  47        var animated = document.getElementById('animated');
  48        var result;
  49        var expected = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -200, 0, 200, 1];
  50        var computed = getPropertyValue("webkitTransform", "animated");
  51        if (comparePropertyValue("webkitTransform", computed, expected, 0.002)) {
  52          result = "PASS - Computed final position is correct.";
  53        } else {
  54          result = "FAIL - Computed final position is incorrect. Expected " + expected + ", got " + computed;
  55        }
  56        document.getElementById('result').innerHTML = result;
  57        layoutTestController.notifyDone();
  58      }
  59
  60      function animationStarted()
  61      {
  62        var animated = document.getElementById('animated');
  63        animated.style.webkitTransformStyle = 'flat';
  64      }
  65
  66      function startTest()
  67      {
  68        var animated = document.getElementById('animated');
  69        animated.style.webkitAnimationName = "anim";
  70        animated.addEventListener('webkitAnimationEnd', animationDone);
  71        waitForAnimationToStart(animated, animationStarted);
  72      }
  73    </script>
  74 </head>
  75 <body onload="startTest()">
  76   <!-- Test for DRT pauseAnimationAtTimeOnElementWithId() API on animations with multiple keyframes -->
  77   <div id="container">
  78     <div id="revealed"></div>
  79     <div id="animated"></div>
  80   </div>
  81   <div id="result"></div>
  82 </body>
  83 </html>