[iOS WK2] Wrong scrolling behavior for nested absolute position elements inside overf...
[WebKit-https.git] / LayoutTests / scrollingcoordinator / scrolling-tree / nested-absolute-in-relative-in-overflow.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3 <head>
4     <title>Absolutes in relative in overflow move with it but are not stacking descendants: need 3 'move' nodes</title>
5     <style>
6         .scrollcontent {
7             height: 500px;
8         }
9         .scroller {
10             margin: 20px;
11             overflow: scroll;
12             height: 300px;
13             width: 300px;
14             border: 2px solid black;
15         }
16     
17         .relative {
18             position: relative;
19             border: 3px solid orange;
20             height: 20px;
21         }
22
23         .absolute {
24             position:absolute;
25             left: 50px;
26             top: 50px;
27             width: 100px;
28             height: 100px;
29             background: gray;
30             border: 2px solid green;
31         }
32     
33         .inner {
34             left:25px;
35             top:25px;
36             width: 200px;
37         }
38
39         .scrollcontent {
40             height: 500px;
41             background-image: repeating-linear-gradient(white, silver 200px);
42         }
43     </style>
44     <script>
45         if (window.testRunner)
46             testRunner.dumpAsText();
47
48         window.addEventListener('load', () => {
49             if (window.internals)
50                 document.getElementById('tree').innerText = internals.scrollingStateTreeAsText();
51         }, false);
52     </script>
53 </head>
54 <body>
55
56     <div class="scroller">
57         <div class="relative">
58             <div class="absolute">abs
59                 <div class="inner absolute">abs</div>
60             </div>
61         </div>
62         <div class="scrollcontent"></div>
63     </div>
64 <pre id="tree"></pre>
65 </body>
66 </html>