LayoutTests/animations/3d/replace-filling-transform.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5
   6         #result {
   7           opacity: 0; /* hide from pixel test */
   8         }
   9
  10         #box {
  11             position: absolute;
  12             height: 100px;
  13             width: 100px;
  14             background-color: green;
  15             -webkit-animation: anim1 0.1s ease 0s forwards;
  16          }
  17
  18          #correctposition {
  19              position: absolute;
  20              height: 100px;
  21              width: 100px;
  22              background-color: red;
  23              -webkit-transform: translate3d(50px, 200px, 0);
  24          }
  25
  26          @-webkit-keyframes anim1 {
  27            from {
  28              -webkit-transform: translate3d(100px, 0, 0);
  29            }
  30            to {
  31              -webkit-transform: translate3d(200px, 0, 0);
  32            }
  33          }
  34
  35          @-webkit-keyframes anim2 {
  36            from {
  37              -webkit-transform: translate3d(50px, 0, 0);
  38            }
  39            to {
  40              -webkit-transform: translate3d(50px, 200px, 0);
  41            }
  42          }
  43     </style>
  44     <script>
  45
  46         var box;
  47         var expectedValue = "matrix(1, 0, 0, 1, 50, 200)";
  48
  49         function testState()
  50         {
  51             var result = document.getElementById("result");
  52             var computedValue = window.getComputedStyle(box).webkitTransform;
  53
  54             if (computedValue == expectedValue)
  55                 result.innerHTML = "PASS - final state was " + expectedValue;
  56             else
  57                 result.innerHTML = "FAIL - final state was " + computedValue + " expected " + expectedValue;
  58
  59             if (window.layoutTestController)
  60                 layoutTestController.notifyDone();
  61         }
  62
  63         function swapAnim()
  64         {
  65             // remove this listener
  66             box.removeEventListener("webkitAnimationEnd", swapAnim);
  67             // add the test listener
  68             box.addEventListener("webkitAnimationEnd", testState, false);
  69             // change the animation
  70             box.style.webkitAnimation = "anim2 0.1s ease 0s forwards";
  71         }
  72
  73         function setup()
  74         {
  75             box = document.getElementById("box");
  76             document.addEventListener("webkitAnimationEnd", swapAnim, false);
  77         }
  78
  79         if (window.layoutTestController) {
  80             layoutTestController.dumpAsText(true);
  81             layoutTestController.waitUntilDone();
  82         }
  83
  84         window.addEventListener("load", setup, false);
  85
  86     </script>
  87 </head>
  88 <body>
  89 <!--
  90 This sets up two animations. It runs the first and then triggers the 2nd. The first fills
  91 forwards, but should still be replaced by the second. The first is a horizontal animation, the second is
  92 vertical, so the box should end up translated vertically down the page.
  93 -->
  94 <div id="correctposition">
  95 </div>
  96 <div id="box">
  97 </div>
  98 <div id="result">
  99 </div>
 100 </body>
 101 </html>