3f5b27501a8f60eb38d680c16825311bbd1f9ed1
[WebKit-https.git] / LayoutTests / compositing / layer-creation / overflow-scroll-overlap.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style type="text/css" media="screen">
6     
7     .composited {
8       height: 30px;
9       width: 30px;
10       -webkit-transform:translateZ(0);
11     }
12     
13     .overflow {
14       position: absolute;
15       top: 20px;
16       left: 20px;
17       overflow-y: scroll;
18       height: 200px;
19       width: 300px;
20       border: solid;
21     }
22
23     .box {
24       position: relative;
25       height: 100px;
26       width: 200px;
27       margin: 55px 20px;
28       background-color: blue;
29       font-size: 18pt;
30       text-align: center;
31     }
32     
33     #results {
34       margin-top: 200px;
35     }
36   </style>
37   <script type="text/javascript" charset="utf-8">
38     
39     if (window.testRunner) {
40       testRunner.dumpAsText();
41       testRunner.waitUntilDone();
42     }
43
44     function doTest()
45     {
46       window.setTimeout(function() {
47         var scrollDiv = document.getElementById('scroller');
48         scrollDiv.scrollTop = 200;
49
50         
51         if (window.testRunner) {
52           document.getElementById('results').innerText = window.internals.layerTreeAsText(document);
53           testRunner.notifyDone();
54         }
55       }, 0);
56     }
57     
58     window.addEventListener('load', doTest, false);
59   </script>
60 </head>
61 <body>
62
63   <div class="composited"></div>
64
65   <div id="scroller" class="overflow">
66     <div class="box" style="width: 200px";></div>
67     <div class="box" style="width: 210px;"></div>
68   </div>
69   <pre id="results"></pre>
70
71 </body>
72 </html>