[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / 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.testRunner)
41        testRunner.dumpAsText();
42
43      function animationDone()
44      {
45        var animated = document.getElementById('animated');
46        var result;
47        var expected = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -200, 0, 200, 1];
48        var computed = getPropertyValue("webkitTransform", "animated");
49        if (comparePropertyValue("webkitTransform", computed, expected, 0.002)) {
50          result = "PASS - Computed final position is correct.";
51        } else {
52          result = "FAIL - Computed final position is incorrect. Expected " + expected + ", got " + computed;
53        }
54        document.getElementById('result').innerHTML = result;
55        testRunner.notifyDone();
56      }
57
58      function animationStarted()
59      {
60        var animated = document.getElementById('animated');
61        animated.style.webkitTransformStyle = 'flat';
62      }
63
64      function startTest()
65      {
66        var animated = document.getElementById('animated');
67        animated.style.webkitAnimationName = "anim";
68        animated.addEventListener('webkitAnimationEnd', animationDone);
69        waitForAnimationToStart(animated, animationStarted);
70      }
71    </script>
72 </head>
73 <body onload="startTest()">
74   <div id="container">
75     <div id="revealed"></div>
76     <div id="animated"></div>
77   </div>
78   <div id="result"></div>
79 </body>
80 </html>