851707f24dc7f7f492959962a4797c2f25a9de73
[WebKit-https.git] / LayoutTests / animations / missing-from-to.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7   <title>Test animation with missing from and to keyframes</title>
8   <style type="text/css" media="screen">
9     .box {
10       position: relative;
11       left: 10px;
12       top: 10px;
13       height: 20px;
14       width: 20px;
15       background-color: blue;
16       -webkit-animation-duration: 2s;
17       -webkit-animation-timing-function: linear;
18     }
19   
20     #box1 {
21       -webkit-animation-name: anim1;
22     }
23     @-webkit-keyframes anim1 {
24         from { left: 10px; }
25         40% { left: 30px; }
26         60% { left: 10px; }
27         to { left: 20px; }
28     }
29
30     #box2 {
31       -webkit-animation-name: anim2;
32       background-color: red;
33     }
34     @-webkit-keyframes anim2 {
35         40% { left: 30px; }
36         60% { left: 10px; }
37         to { left: 20px; }
38     }
39
40     #box3 {
41       left: 20px;
42       -webkit-animation-name: anim3;
43       background-color: green;
44     }
45     @-webkit-keyframes anim3 {
46         from { left: 10px; }
47         40% { left: 30px; }
48         60% { left: 10px; }
49     }
50
51     #box4 {
52       -webkit-animation-name: anim4;
53       background-color: yellow;
54     }
55     @-webkit-keyframes anim4 {
56         40% { left: 30px; }
57         60% { left: 20px; }
58     }
59
60     #box5 {
61       -webkit-animation-name: anim5;
62       background-color: orange;
63     }
64     @-webkit-keyframes anim5 {
65     }
66     
67     #result {
68       margin-top: 20px;
69     }
70   </style>
71   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
72   <script type="text/javascript" charset="utf-8">
73
74     const expectedValues = [
75       // [animation-name, time, element-id, property, expected-value, tolerance]
76       ["anim1", 0.4, "box1", "left", 20, 2],
77       ["anim1", 1.0, "box1", "left", 20, 2],
78       ["anim1", 1.6, "box1", "left", 15, 2],
79       ["anim2", 0.4, "box2", "left", 20, 2],
80       ["anim2", 1.0, "box2", "left", 20, 2],
81       ["anim2", 1.6, "box2", "left", 15, 2],
82       ["anim3", 0.4, "box3", "left", 20, 2],
83       ["anim3", 1.0, "box3", "left", 20, 2],
84       ["anim3", 1.6, "box3", "left", 15, 2],
85       ["anim4", 0.4, "box4", "left", 20, 2],
86       ["anim4", 1.0, "box4", "left", 25, 2],
87       ["anim4", 1.6, "box4", "left", 15, 2]
88     ];
89
90     runAnimationTest(expectedValues, function() {
91       if (window.testRunner) {
92           var box5Element = document.getElementById('box5');
93           if (internals.pauseAnimationAtTimeOnElement("anim5", 0.1, box5Element))
94               result += "FAIL - box5 animation was running<br>";
95           else 
96               result += "PASS - box5 animation was not running<br>";
97       }
98     });
99     
100   </script>
101 </head>
102 <body>
103 This test performs animations of the left property on five boxes over 2 seconds.
104 Box 1 has all keyframes. Box 2 has a missing "from" keyframe.
105 Box 3 has a missing "to" keyframe.
106 Box 4 has both "from" and "to" keyframes missing, but other keyframes which
107 should trigger the generation of "from" and "to". Box 5 has no keyframes, and
108 should not animate.
109 The test takes 3 snapshots each and expects each result to be within a specified range.
110 <div class="box" id="box1">
111 </div>
112 <div class="box" id="box2">
113 </div>
114 <div class="box" id="box3">
115 </div>
116 <div class="box" id="box4">
117 </div>
118 <div class="box" id="box5">
119 </div>
120 <div id="result">
121 </div>
122 </body>
123 </html>