Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / tiled-drawing / scrolling / scroll-snap / scroll-snap-mandatory-2d-overflow.html
1 <!DOCTYPE HTML>
2 <html>
3     <head>
4         <style>
5             #grid-container {
6                 width: 400px;
7                 height: 400px;
8                 overflow: scroll;
9                 white-space: nowrap;
10                 -webkit-overflow-scrolling: touch;
11                 scroll-snap-type: both mandatory;
12                 line-height: 0px;
13             }
14
15             .cell {
16                 width: 400px;
17                 height: 400px;
18                 display: inline-block;
19                 scroll-snap-align: start;
20                 background-color: red;
21                 margin: 0;
22                 padding: 0;
23                 position: relative;
24             }
25
26             #green {
27                 background-color: green;
28             }
29
30             #snap-from > p {
31                 position: absolute;
32                 top: 0px;
33                 left: 10px;
34                 margin-top: 0px;
35             }
36         </style>
37         <script src="../../../resources/js-test.js"></script>
38         <script>
39         window.jsTestIsAsync = true;
40
41         var divTarget;
42         var divScrollPositionBeforeGlide;
43         var divScrollPositionBeforeSnap;
44         var divScrollPositionBeforeSingleAxisGlide;
45
46         function checkForSingleAxisGlide() {
47             if (divTarget.scrollTop == divScrollPositionBeforeSingleAxisGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeSingleAxisGlide.x)
48                 testPassed("div successfully snapped after dragging along one axis and then scrolling in the other.");
49             else
50                 testFailed("div did not honor 2D snap points. (single axis scroll followed by flick on other axis)");
51             finishJSTest();
52         }
53
54         function scrollAndGlideInSingleAxisTest() {
55             divScrollPositionBeforeSingleAxisGlide = {
56                 x: divTarget.scrollLeft,
57                 y: divTarget.scrollTop
58             };
59             eventSender.mouseMoveTo(100, 100);
60             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "began", "none");
61             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
62             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
63             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
64             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
65             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
66             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
67             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "begin");
68             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "continue");
69             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
70             eventSender.callAfterScrollingCompletes(checkForSingleAxisGlide);
71         }
72
73         function checkForScrollSnap() {
74             if (divTarget.scrollTop == divScrollPositionBeforeSnap.y && divTarget.scrollLeft == divScrollPositionBeforeSnap.x)
75                 testPassed("div successfully snapped diagonally.");
76             else
77                 testFailed("div did not honor 2D snap points. (diagonal snap)");
78             setTimeout(scrollAndGlideInSingleAxisTest, 0);
79         }
80
81         function scrollSnapTest() {
82             divScrollPositionBeforeSnap = {
83                 x: divTarget.scrollLeft,
84                 y: divTarget.scrollTop
85             };
86
87             eventSender.mouseMoveTo(100, 100);
88             eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "began", "none");
89             eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none");
90             eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none");
91             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
92             eventSender.callAfterScrollingCompletes(checkForScrollSnap);
93         }
94
95         function checkForScrollGlide() {
96             // The div should have scrolled (glided) to the next snap point.
97             if (divTarget.scrollTop == divScrollPositionBeforeGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeGlide.x + 400)
98                 testPassed("div successfully scrolled diagonally.");
99             else
100                 testFailed("div did not honor 2D snap points. (diagonal glide)");
101             setTimeout(scrollSnapTest, 0);
102         }
103
104         function scrollGlideTest() {
105             divTarget = document.getElementById("grid-container");
106             divScrollPositionBeforeGlide = {
107                 x: divTarget.scrollLeft,
108                 y: divTarget.scrollTop
109             };
110
111             eventSender.mouseMoveTo(100, 100);
112             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "began", "none");
113             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none");
114             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none");
115             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none");
116             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
117             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "begin");
118             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "continue");
119             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
120             eventSender.callAfterScrollingCompletes(checkForScrollGlide);
121         }
122
123         function onLoad() {
124             if (window.eventSender) {
125                 eventSender.monitorWheelEvents();
126                 setTimeout(scrollGlideTest, 0);
127             } else {
128                 var messageLocation = document.getElementById("snap-from");
129                 var message = document.createElement("p");
130                 message.innerHTML = "<p>This test is better run under DumpRenderTree." +
131                 "</p><p>To manually test it, place the mouse pointer inside the" +
132                 "</p><p>red box and perform a small swipe to the lower right" +
133                 "</p><p>with some momentum. The grid should scroll to show a" +
134                 "</p><p>green cell. Then scroll a bit to the upper left and" +
135                 "</p><p>release without momentum. It should snap back to show" +
136                 "</p><p>the green cell. Finally, drag slightly to the right and" +
137                 "</p><p>then directly down. It should snap to reveal another" +
138                 "</p><p>green cell directly below the previous one.</p>"
139                 messageLocation.appendChild(message);
140             }
141         }
142         </script>
143     </head>
144     <body onload="onLoad();">
145         <div id="grid-container">
146             <div class="cell" id="snap-from"></div><div class="cell"></div><div class="cell"></div><br/>
147             <div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div><br/>
148             <div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div>
149         </div>
150     </body>
151 </html>