d1e292567278ce765ca579d64b84b6040863a5e3
[WebKit-https.git] / LayoutTests / animations / missing-keyframe-properties-timing-function.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2 <html>
3 <head>
4   <style type="text/css" media="screen">
5     .box {
6       position: relative;
7       margin: 10px;
8       left: 0;
9       width: 100px;
10       height: 100px;
11       background-color: blue;
12       -webkit-animation-duration: 2s;
13       -webkit-animation-timing-function: ease-in;
14     }
15     
16     #box1 {
17       -webkit-animation-name: move;
18     }
19     @-webkit-keyframes move {
20         from {
21           opacity: 0;
22           left: 100px;
23         }
24         25% {
25           opacity: 0.25;
26         }
27         50% {
28           left: 200px;
29           -webkit-animation-timing-function: linear;
30         }
31         to {
32           left: 400px;
33         }
34     }
35
36     #box2 {
37       -webkit-animation-name: move2;
38     }
39     @-webkit-keyframes move2 {
40         from {
41           opacity: 0;
42           -webkit-transform: translateX(100px);
43         }
44         25% {
45           opacity: 0.25;
46         }
47         50% {
48           -webkit-transform: translateX(200px);
49           -webkit-animation-timing-function: linear;
50         }
51         to {
52           -webkit-transform: translateX(400px);
53         }
54     }
55
56   </style>
57   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
58   <script type="text/javascript" charset="utf-8">
59     
60     const expectedValues = [
61       // [animation-name, time, element-id, property, expected-value, tolerance]
62       ["move", 0.5, "box1", "left", 132, 15],
63       ["move2", 0.5, "box2", "webkitTransform.4", 132, 15],
64       ["move", 1.5, "box1", "left", 300, 15],
65       ["move2", 1.5, "box2", "webkitTransform.4", 300, 15],
66     ];
67     
68     runAnimationTest(expectedValues);
69   </script>
70 </head>
71 <body>
72 <div id="box1" class="box"></div>
73 <div id="box2" class="box"></div>
74 <div id="result">
75 </div>
76 </body>
77 </html>