d372f1b7f34de99bc0641846b5ce5232919a632e
[WebKit-https.git] / LayoutTests / animations / 3d / replace-filling-transform.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
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.testRunner)
60                 testRunner.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.testRunner) {
80             testRunner.dumpAsText(true);
81             testRunner.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>