[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / negative-delay.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <html>
3 <head>
4   <title>For Bug 26150 - Negative values for animation-delay are ignored</title>
5   <style type="text/css">
6     .square {
7       background: blue;
8       width: 20px;
9       height: 20px;
10       position: absolute;
11       -webkit-animation-duration: 2s;
12       -webkit-animation-iteration-count: 1;
13       -webkit-animation-timing-function: linear;
14     }
15
16     .move {
17       -webkit-animation-name: square-move;
18     }
19
20     .translate {
21       -webkit-animation-name: square-translate;
22     }
23
24     @-webkit-keyframes square-move {
25       0%    { left: 0px; }
26       100%  { left: 600px; }
27     }
28
29     @-webkit-keyframes square-translate {
30       0%    { -webkit-transform: translateX(0); }
31       100%  { -webkit-transform: translateX(600px); }
32     }
33
34     #square1 {
35       top: 20px;
36       left: 20px;
37       -webkit-animation-delay: -1s;
38     }
39
40     #square2 {
41       top: 60px;
42       left: 20px;
43     }
44
45     #square3 {
46       top: 100px;
47       left: 20px;
48       -webkit-animation-delay: -1s;
49     }
50
51     #square4 {
52       top: 140px;
53       left: 20px;
54     }
55   </style>
56
57   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
58
59   <script>
60     // The delay of square1 is negative so square1 should be in ahead of square2.
61     const expectedValues = [
62       // [animation-name, time, element-id, property, expected-value, tolerance]
63       ["square-move", 0, "square1", "left", 300, 15],
64       ["square-move", 0, "square2", "left", 0, 15],
65       ["square-move", 0.5, "square1", "left", 450, 15],
66       ["square-move", 0.5, "square2", "left", 150, 15],
67       ["square-translate", 0, "square3", "webkitTransform.4", 300, 20],
68       ["square-translate", 0, "square4", "webkitTransform.4", 0, 20],
69       ["square-translate", 0.5, "square3", "webkitTransform.4", 450, 20],
70       ["square-translate", 0.5, "square4", "webkitTransform.4", 150, 20],
71     ];
72
73     runAnimationTest(expectedValues);
74   </script>
75 </head>
76
77 <body>
78
79 <div class="square move" id="square1"></div>
80 <div class="square move" id="square2"></div>
81 <div class="square translate" id="square3"></div>
82 <div class="square translate" id="square4"></div>
83
84 <div id="result">
85 </div>
86
87 </body>
88 </html>