46ed969cf7cb5ab82ab01a1b56c111fd3b985d2b
[WebKit-https.git] / LayoutTests / transitions / negative-delay.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2 <html>
3 <head>
4   <style>
5     .square {
6       position: absolute;
7       background: blue;
8       width: 20px;
9       height: 20px;
10       -webkit-transition-timing-function: linear;
11     }
12
13     .translated {
14       -webkit-transform: translateX(600px);
15     }
16
17     #square1 {
18       top: 20px;
19       left: 0px;
20       -webkit-transition-property: left;
21       -webkit-transition-duration: 2s;
22       -webkit-transition-delay: -1s;
23     }
24
25     #square1.moved {
26       left: 600px;
27     }
28
29     #square2 {
30       top: 60px;
31       left: 0px;
32       -webkit-transition-property: left;
33       -webkit-transition-duration: 2s;
34     }
35
36     #square2.moved {
37       left: 600px;
38     }
39
40     #square3 {
41       top: 100px;
42       left: 0px;
43       -webkit-transition-property: -webkit-transform;
44       -webkit-transition-duration: 2s;
45       -webkit-transition-delay: -1s;
46     }
47
48     #square4 {
49       top: 140px;
50       left: 0px;
51       -webkit-transition-property: -webkit-transform;
52       -webkit-transition-duration: 2s;
53     }
54   </style>
55
56   <script src="resources/transition-test-helpers.js"></script>
57
58   <script>
59     // The delay of square1 is negative so square1 should be in ahead of square2.
60     const expectedValues = [
61       // [time, element-id, property, expected-value, tolerance]
62       [0, "square1", "left", 300, 15],
63       [0, "square2", "left", 0, 15],
64       [0.5, "square1", "left", 450, 15],
65       [0.5, "square2", "left", 150, 15],
66       [0, "square3", "-webkit-transform.4", 300, 20],
67       [0, "square4", "-webkit-transform.4", 0, 20],
68       [0.5, "square3", "-webkit-transform.4", 450, 20],
69       [0.5, "square4", "-webkit-transform.4", 150, 20],
70     ];
71
72     function setupTest()
73     {
74       document.getElementById('square1').className = 'moved square';
75       document.getElementById('square2').className = 'moved square';
76       document.getElementById('square3').className = 'translated square';
77       document.getElementById('square4').className = 'translated square';
78     }
79   
80     runTransitionTest(expectedValues, setupTest, usePauseAPI);
81   </script>
82 </head>
83
84 <body>
85
86 <div class="square" id="square1"></div>
87 <div class="square" id="square2"></div>
88 <div class="square" id="square3"></div>
89 <div class="square" id="square4"></div>
90
91 <div id="result">
92 </div>
93
94 </body>
95 </html>