0677f0dbd43c2547c73e2f016146d74e7e1d3a4d
[WebKit-https.git] / LayoutTests / tiled-drawing / scrolling / scroll-snap / scroll-snap-scrolling-jumps-to-top.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             body {
6                 overflow: hidden;
7                 margin: 0;
8             }
9
10             #container {
11                 width: 300px;
12                 height: 300px;
13                 display: inline-block;
14                 overflow-x: hidden;
15                 overflow-y: auto;
16                 scroll-snap-type: y mandatory;
17                 -webkit-scroll-snap-type: mandatory;
18             }
19
20             .child {
21                 height: 300px;
22                 width: 300px;
23                 float: left;
24                 scroll-snap-align: start;
25                 -webkit-scroll-snap-coordinate: 0 0;
26             }
27         </style>
28         <script>
29         let write = s => output.innerHTML += s + "<br>";
30         function run() {
31             container.scrollTop = 300;
32             write(`The scroll position is: ${container.scrollTop}`);
33             if (!window.eventSender || !window.testRunner)
34                 return;
35
36             testRunner.dumpAsText();
37             testRunner.waitUntilDone();
38             eventSender.monitorWheelEvents();
39             eventSender.mouseMoveTo(container.offsetLeft + container.clientWidth / 2, container.offsetTop + container.clientHeight / 2);
40
41             write("Scrolling without momentum to the same position several times")
42             for (let i = 0; i < 10; i++) {
43                 eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "began", "none");
44                 eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 1, "changed", "none");
45                 eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
46                 eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "changed", "none");
47                 eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
48             }
49
50             setTimeout(() => {
51                 eventSender.callAfterScrollingCompletes(() => {
52                     write(`The scroll position is now: ${container.scrollTop}`);
53                     testRunner.notifyDone();
54                 });
55             }, 0);
56         }
57         </script>
58     </head>
59     <body onload=run()>
60         <p>To manually test, scroll so the green box exactly fills the container, and let go.</p>
61         <p>The scroll position should not jump to the top.</p>
62         <div id="container">
63             <div style="background-color: red;" class="child"></div>
64             <div style="background-color: green;" class="child"></div>
65         </div>
66         <div id="output"></div>
67     </body>
68 </html>