beea64ef740221a3d4401065f2dc3b4cd796d33a
[WebKit-https.git] / LayoutTests / fast / scrolling / ios / reconcile-layer-position-recursive.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
2 <html>
3   <head>
4     <title>Reconcile layer position recursive</title>
5     <meta charset="utf-8"/>
6     <style>
7       #container div {
8          margin: 50px;
9          border: 5px solid black;
10       }
11       .scrollable {
12          background: linear-gradient(135deg, cyan, green);
13          overflow: auto;
14       }
15       .fixed {
16          position: fixed;
17          height: 100px;
18          width: 100px;
19          background: yellow;
20       }
21       .sticky {
22          position: sticky;
23          height: 100px;
24          width: 100px;
25          background: magenta;
26       }
27     </style>
28     <script>
29       if (window.testRunner) {
30           testRunner.dumpAsText();
31           testRunner.waitUntilDone();
32       }
33       if (window.internals)
34           window.internals.settings.setAsyncFrameScrollingEnabled(true);
35       function getSwipeUIScript(fromX, fromY, toX, toY, duration)
36       {
37           return `(() => {
38               uiController.dragFromPointToPoint(${fromX}, ${fromY}, ${toX}, ${toY}, ${duration}, () => {
39                   uiController.uiScriptComplete("");
40               });
41           })();`;
42       }
43       function doTest()
44       {
45           if (window.testRunner && testRunner.runUIScript && window.internals) {
46               testRunner.runUIScript(getSwipeUIScript(2, 200, 0, 2, .05), () => {
47                   setTimeout(() => {
48                        document.getElementById('layerTree').innerText = internals.layerTreeAsText(document,
49                    internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS | internals.LAYER_TREE_INCLUDES_TILE_CACHES);
50                       testRunner.notifyDone();
51                   }, 3000);
52               });
53           }
54       }
55       window.addEventListener('load', doTest, false);
56     </script>
57   </head>
58   <body>
59     <div style="height: 1000px"></div>
60     <div id="container" class="scrollable" style="height: 300px; width: 300px">
61       <div class="scrollable" style="height: 400px; width: 200px">
62         <div style="height: 500px; width: 100px; background: gray">
63           <div class="fixed" style="left: 20px; top: 20px;">
64             <div class="sticky" style="left: 30px; top: 30px;"></div>
65           </div>
66           <div class="sticky" style="left: 20px; top: 70px;">
67             <div class="sticky" style="left: 30px; top: 30px;"></div>
68           </div>
69         </div>
70       </div>
71     </div>
72     <div style="height: 300px"></div>
73     <pre id="layerTree"></pre>
74   </body>
75 </html>