36cf8cef11d866bd00472b2c1361c5780eb9278f
[WebKit-https.git] / LayoutTests / fast / scrolling / ios / overflow-scrolling-ancestor-clip-size.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3 <head>
4   <meta name="viewport" content="width=device-width">
5   <script>
6     if (window.testRunner)
7       testRunner.dumpAsText();
8
9     function doScroll()
10     {
11       var overflow = document.getElementById('scroller');
12       overflow.scrollTop = 30;
13
14       if (window.testRunner)
15         document.getElementById('layers').innerHTML = window.internals.layerTreeAsText(document);
16     }
17     
18     window.addEventListener('load', doScroll, false);
19   </script>
20   <style>
21     #scroller {
22       position: relative;
23       z-index: 0;
24       overflow: scroll;
25       width: 300px;
26       height: 400px;
27       border: 11px solid black;
28     }
29     
30     .column {
31       overflow: hidden;
32       margin: 50px 20px;
33       width: 260px;
34       height: 800px;
35       background-color: red;
36     }
37     .contents {
38       -webkit-transform: translateZ(0);
39       width: 100%;
40       height: 100%;
41       background: green;
42     }
43   </style>
44 </head>
45 <body>
46
47   <div id="scroller">
48     <div class="column">
49       <div class="contents"></div>
50     </div>
51   </div>
52   <pre id="layers">Layer tree goes here in DRT.</pre>
53
54 </body>
55 </html>