[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / transitions / opacity-transition-zindex.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     .container {
7       position: relative;
8       height: 300px;
9       width: 300px;
10       margin: 10px;
11       background-color: green;
12       -webkit-transition-property: opacity;
13       -webkit-transition-timing-function: linear;
14       -webkit-transition-duration: 5s;
15     }
16   
17     #first {
18       opacity: 0.5;
19     }
20
21     .box {
22       position: absolute;
23       left: 10px;
24       top: 10px;
25       height: 200px;
26       width: 200px;
27       background-color: blue;
28     }
29
30     .indicator {
31       position: absolute;
32       top: 150px;
33       left: 150px;
34       height: 100px;
35       width: 100px;
36       background-color: orange;
37       z-index: -1;
38     }
39   </style>
40   <script>
41     if (window.testRunner)
42       testRunner.waitUntilDone();
43
44     function runTest()
45     {
46       var container = document.getElementById('first');
47       container.style.opacity = 1;
48       
49       // dump the tree in the middle of the transition
50       if (window.testRunner)
51         window.setTimeout(function() {
52           var firstElement = document.getElementById('first');
53           const transition = firstElement.getAnimations()[0];
54           transition.currentTime = 2500;
55           transition.pause();
56           testRunner.notifyDone();
57         }, 0);
58     }
59     // FIXME: this should use runTransitionTest().
60     window.addEventListener('load', runTest, false);
61   </script>
62 </head>
63 <body>
64
65   <div class="container" id="first">
66     <div class="box"></div>
67     <div class="indicator"></div>
68   </div>
69
70 </body>
71 </html>