6c13d2dcd9c708b236dfe0f659268d90958dcbac
[WebKit-https.git] / LayoutTests / animations / missing-keyframe-properties.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=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: linear;
14     }
15     
16     #box1 {
17       -webkit-animation-name: move;
18     }
19     @-webkit-keyframes move {
20         from {
21           left: 0px;
22         }
23         50% {
24           opacity: 0;
25         }
26         to {
27           left: 400px;
28         }
29     }
30
31     #box2 {
32       -webkit-animation-name: move2;
33     }
34     @-webkit-keyframes move2 {
35         from {
36           -webkit-transform: translateX(0);
37         }
38         50% {
39           opacity: 0;
40         }
41         to {
42           -webkit-transform: translateX(400px);
43         }
44     }
45
46   </style>
47   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
48   <script type="text/javascript" charset="utf-8">
49     
50     const expectedValues = [
51       // [animation-name, time, element-id, property, expected-value, tolerance]
52       ["move", 1, "box1", "left", 200, 15],
53       ["move2", 1, "box2", "webkitTransform.4", 200, 15],
54       ["move", 0.5, "box1", "opacity", 0.5, 0.1],
55       ["move", 1, "box1", "opacity", 0, 0.1],
56       ["move", 1.5, "box1", "left", 300, 15],
57       ["move2", 1.5, "box2", "webkitTransform.4", 300, 15],
58       ["move", 1.5, "box1", "opacity", 0.5, 0.1],
59     ];
60     
61     runAnimationTest(expectedValues);
62   </script>
63 </head>
64 <body>
65 <div id="box1" class="box"></div>
66 <div id="box2" class="box"></div>
67 <div id="result">
68 </div>
69 </body>
70 </html>