5fa4e3b3130faea870f5999004d68fb717f63ca5
[WebKit-https.git] / LayoutTests / transitions / zero-duration-with-non-zero-delay-end.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     body {
7       margin: 0;
8     }
9     
10     #target {
11       position: relative;
12       top: 100px;
13       left: 100px;
14       width: 200px;
15       height: 200px;
16       background-color: red;
17       -webkit-transition-property: left;
18       -webkit-transition-duration: 0s;
19       -webkit-transition-delay: 0.5s;
20     }
21    </style>
22    <script>
23
24     function numberOfActiveAnimations()
25     {
26         return document.getAnimations().filter(animation => {
27             const playState = animation.playState;
28             return playState == "running" || playState == "paused";
29         }).length;
30     }
31
32     function sample0() {
33       var expected = 1;
34       var current = numberOfActiveAnimations();
35       if (current == expected)
36         document.getElementById('result0').innerHTML = "Number of active animations before transition is (" + current + ") as expected";
37       else
38         document.getElementById('result0').innerHTML = "Number of active animations before transition is (" + current + ") but was expecting (" + expected + ")";
39     }
40     
41     function sample1() {
42       var expected = 0;
43       var current = numberOfActiveAnimations();
44       if (current == expected)
45         document.getElementById('result1').innerHTML = "Number of active animations after transition is (" + current + ") as expected";
46       else
47         document.getElementById('result1').innerHTML = "Number of active animations after transition is (" + current + ") but was expecting (" + expected + ")";
48       
49       testRunner.notifyDone();
50     }
51     
52     function runTest() {
53       window.setTimeout(sample0, 250);
54       // Note that since 0-delay transitions do not disptach transitionEnd events
55       // we have to use a timeout here.
56       window.setTimeout(sample1, 750);
57     }
58     
59     function startTest() {
60       if (window.testRunner) {
61         testRunner.dumpAsText();
62         testRunner.waitUntilDone();
63         
64         var target = document.getElementById('target');
65         target.style.left = '200px';
66         runTest();
67       }
68     }
69    </script>
70 </head>
71 <body onload="startTest()">
72   <h1>Test for DRT numberOfActiveAnimations() API</h1>
73
74   <div id="target">
75   </div>
76   
77   <div id="result0">
78   </div>
79   
80   <div id="result1">
81   </div>
82
83 </body>
84 </html>