[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / keyframe-timing-functions-transform.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style type="text/css" media="screen">
6   
7     #container {
8       position: relative;
9       border: 1px solid black;
10       height: 100px;
11       width: 700px;
12     }
13     
14     #box {
15       position: absolute;
16       height: 100px;
17       width: 100px;
18       background-color: blue;
19       -webkit-animation-name: move;
20       -webkit-animation-duration: 1.5s;
21     }
22
23     @-webkit-keyframes move {
24       0%   {
25         -webkit-transform: translateX(0);
26         -webkit-animation-timing-function: ease-out;
27       }
28       10% {
29         -webkit-transform: translateX(100px);
30         -webkit-animation-timing-function: linear;
31       }
32       90% {
33         -webkit-transform: translateX(500px);
34         -webkit-animation-timing-function: ease-in;
35       }
36       100% {
37         -webkit-transform: translateX(600px);
38       }
39     }
40     
41   </style>
42   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
43   <script type="text/javascript" charset="utf-8">
44
45     const expectedValues = [
46       // [animation-name, time, element-id, property, expected-value, tolerance]
47       ["move", 0.75, "box", "webkitTransform.4", 300, 20],
48     ];
49     
50     runAnimationTest(expectedValues);
51   </script>
52 </head>
53 <body>
54
55   Tests whether timing functions inside keyframes are respected.
56 <div id="container">
57   <div id="box"></div>
58 </div>
59 <div id="result">
60 </div>
61 </body>
62 </html>