[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / compositing / overflow / overflow-positioning.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
3 <html lang="en">
4 <head>
5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6   <title>25052 testcase</title>
7   <style type="text/css" media="screen">
8   body {
9       margin: 100px;
10   }
11   
12   #container {
13     position: relative;
14     overflow: hidden;
15     height: 200px;
16     width: 200px;
17     border: 1px solid black;
18     z-index: 0;
19   }
20   
21   #header {
22     position: relative;
23     width: 100%;
24     height: 100px;
25     background-color: rgba(128, 128, 0, 0.2);
26   }
27
28   #hanger {
29     position: absolute;
30     left: -200px;
31     height: 100px;
32     width: 150px;
33     background-color: blue;
34   }
35   
36   #mover {
37     position: absolute;
38     top: 0;
39     height: 150px;
40     width: 150px;
41     background-color: green;
42     -webkit-transition: -webkit-transform 1000s;
43   }
44   
45   #mover:hover {
46     -webkit-transform: translate(0px, 100px);
47   }
48   #mover.moving {
49     -webkit-transform: translate(0px, 100px);
50   }
51   </style>
52   <script type="text/javascript" charset="utf-8">
53     if (window.testRunner)
54       testRunner.waitUntilDone();
55
56     function startTest()
57     {
58       window.setTimeout(function() {
59         var mover = document.getElementById('mover');
60         mover.className = 'moving';
61         
62         window.setTimeout(function() {
63           if (window.testRunner)
64             testRunner.notifyDone();
65         }, 0);
66         
67       }, 0);
68     }
69
70     window.addEventListener('load', startTest, false);
71   </script>
72 </head>
73 <body>
74
75 <p>Things should not jump around when the green square starts the transition.</p>
76 <div id="container">
77   <div id="header">
78     <div id="hanger"></div>
79   </div>
80   <div id="mover">
81   </div>
82 </div>
83
84 </body>
85 </html>