Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / tiled-drawing / scrolling / scroll-snap / scroll-snap-mandatory-mainframe-vertical-then-horizontal.html
1 <!DOCTYPE HTML>
2 <html>
3     <head>
4         <style>
5             .verticalGallery {
6                 width: 100vw;
7                 height: 600vh;
8                 margin: 0;
9                 padding: 0;
10                 scroll-snap-type: y mandatory;
11             }
12             .colorBox {
13                 height: 100vh;
14                 width: 100vw;
15                 float: left;
16                 scroll-snap-align: start;
17             }
18             #item0 { background-color: red; }
19             #item1 { background-color: green; }
20             #item2 { background-color: blue; }
21             #item3 { background-color: aqua; }
22             #item4 { background-color: yellow; }
23             #item5 { background-color: fuchsia; }
24         </style>
25         <script src="../../../resources/js-test.js"></script>
26         <script>
27         window.jsTestIsAsync = true;
28
29         function scrollSnapTest() {
30             var startPosX = document.body.offsetLeft + 20;
31             var startPosY = document.body.offsetTop + 20;
32             eventSender.mouseMoveTo(startPosX, startPosY);
33             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none');
34             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none');
35             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
36             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
37             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none');
38             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
39             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'begin');
40             eventSender.mouseScrollByWithWheelAndMomentumPhases(-4, 0, 'none', 'continue');
41             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
42             eventSender.callAfterScrollingCompletes(() => {
43                 if (document.body.scrollTop == 0)
44                     testPassed("scroll offset snapped back to top.");
45                 else
46                     testFailed(`did not honor snap points (expected 0, observed ${document.body.scrollTop}).`);
47
48                 finishJSTest();
49             });
50         }
51
52         function onLoad() {
53             if (window.eventSender) {
54                 eventSender.monitorWheelEvents();
55                 setTimeout(scrollSnapTest, 0);
56             } else {
57                 var messageLocation = document.getElementById('item0');
58                 var message = document.createElement('div');
59                 message.innerHTML = `<p>This test is better run under DumpRenderTree. To manually test it, scroll down
60                 slightly, and then directly to the left or right with momentum without lifting your fingers from the
61                 trackpad. The scroll offset should animate to the nearest snap offset.</p>`;
62                 messageLocation.appendChild(message);
63             }
64         }
65         </script>
66     </head>
67     <body onload="onLoad();" class="verticalGallery">
68         <div id="item0" class="colorBox"><div id="console"></div></div>
69         <div id="item1" class="colorBox"></div>
70         <div id="item2" class="colorBox"></div>
71         <div id="item3" class="colorBox"></div>
72         <div id="item4" class="colorBox"></div>
73         <div id="item5" class="colorBox"></div>
74     </body>
75 </html>