REGRESSION (r242132): Nested position:sticky elements move incorrectly
[WebKit-https.git] / LayoutTests / scrollingcoordinator / mac / nested-sticky.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <style>
5         body {
6             height: 2000px;
7         }
8       
9         .outer {
10             background: blue;
11             margin-top: 120px;
12             height: 200px;
13             padding: 10px;
14         }
15
16         .sticky {
17             position: sticky;
18             position: -webkit-sticky;
19             top: 0px;
20         }
21
22        .inner {
23             padding: 10px;
24             background: orange;
25             top: 10px;
26             height: 80px;
27         }
28     </style>
29     <script>
30         function scrollTest()
31         {
32             eventSender.mouseMoveTo(20, 20);
33             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "began", "none");
34             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -100, "changed", "none");
35             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -100, "none", "continue");
36             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -100, "none", "continue");
37             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
38             eventSender.callAfterScrollingCompletes(() => {
39                 testRunner.notifyDone();
40             });
41         }
42
43         function startTest()
44         {
45             if (window.eventSender) {
46                 testRunner.waitUntilDone();
47
48                 eventSender.monitorWheelEvents();
49                 setTimeout(scrollTest, 0);
50             }
51         }
52         
53         window.addEventListener('load', startTest, false);
54     </script>
55 </head>
56 <body>
57   <div class="outer sticky">
58     <div class="inner sticky"></div>
59 </body>
60 </html>