23c2b3521b79ca2e5400fbb5514d62b572acf3fe
[WebKit-https.git] / LayoutTests / transitions / opacity-transition-zindex.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>Opacity Transitions and Stacking Context</title>
8   <style type="text/css" media="screen">
9     .container {
10       position: relative;
11       height: 300px;
12       width: 300px;
13       margin: 10px;
14       background-color: green;
15       -webkit-transition-property: opacity;
16       -webkit-transition-timing-function: linear;
17       -webkit-transition-duration: 5s;
18     }
19   
20     #first {
21       opacity: 0.5;
22     }
23
24     .box {
25       position: absolute;
26       left: 10px;
27       top: 10px;
28       height: 200px;
29       width: 200px;
30       background-color: blue;
31     }
32
33     .indicator {
34       position: absolute;
35       top: 150px;
36       left: 150px;
37       height: 100px;
38       width: 100px;
39       background-color: orange;
40       z-index: -1;
41     }
42   </style>
43   <script type="text/javascript" charset="utf-8">
44     if (window.layoutTestController) {
45         layoutTestController.waitUntilDone();
46     }
47
48     function runTest()
49     {
50       var container = document.getElementById('first');
51       container.style.opacity = 1;
52       // dump the tree in the middle of the transition
53       window.setTimeout(function() {
54         if (window.layoutTestController)
55             layoutTestController.notifyDone();
56       }, 2500);
57     }
58     
59     window.addEventListener('load', runTest, false);
60   </script>
61 </head>
62 <body>
63
64   <div class="container" id="first">
65     <div class="box"></div>
66     <div class="indicator"></div>
67   </div>
68
69 </body>
70 </html>