7b16d65eb1f359c121581396e9618d4788e878e3
[WebKit-https.git] / LayoutTests / tiled-drawing / scrolling / scroll-snap / scroll-snap-mandatory-borders.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             .horizontalGallery {
6                 width: 300px;
7                 height: 300px;
8                 overflow-y: hidden;
9                 overflow-x: auto;
10                 border-top: 20px solid black;
11                 border-bottom: 10px solid black;
12                 border-left: 15px solid black;
13                 border-right: 9px solid black;
14                 margin-bottom: 2px;
15                 -webkit-overflow-scrolling: touch;
16                 -webkit-scroll-snap-points-x: repeat(100%);
17                 -webkit-scroll-snap-type: mandatory;
18             }
19             .horizontalGalleryDrawer {
20                 width: 1800px;
21                 height: 300px;
22             }
23             .verticalGallery {
24                 width: 300px;
25                 height: 300px;
26                 display: inline-block;
27                 overflow-x: hidden;
28                 overflow-y: auto;
29                 border-top: 20px solid black;
30                 border-bottom: 10px solid black;
31                 border-left: 15px solid black;
32                 border-right: 9px solid black;
33                 margin-top: 2px;
34                 -webkit-overflow-scrolling: touch;
35                 -webkit-scroll-snap-points-y: repeat(100%);
36                 -webkit-scroll-snap-type: mandatory;
37             }
38             .verticalGalleryDrawer {
39                 width: 300px;
40                 height: 1800px;
41             }
42             .colorBox {
43                 height: 300px;
44                 width: 300px;
45                 float: left;
46             }
47             #itemH0, #itemV0 { background-color: red; }
48             #itemH1, #itemV1 { background-color: green; }
49             #itemH2, #itemV2 { background-color: blue; }
50             #itemH3, #itemV3 { background-color: aqua; }
51             #itemH4, #itemV4 { background-color: yellow; }
52             #itemH5, #itemV5 { background-color: fuchsia; }
53         </style>
54         <script src="../../../resources/js-test.js"></script>
55         <script>
56         window.jsTestIsAsync = true;
57
58         var divScrollPositionBeforeGlide;
59         var divScrollPositionBeforeSnap;
60
61         function locationInWindowCoordinates(element)
62         {
63             var position = {};
64             position.x = element.offsetLeft;
65             position.y = element.offsetTop;
66
67             while (element.offsetParent) {
68                 position.x = position.x + element.offsetParent.offsetLeft;
69                 position.y = position.y + element.offsetParent.offsetTop;
70                 if (element == document.getElementsByTagName("body")[0])
71                     break;
72
73                 element = element.offsetParent;
74             }
75
76             return position;
77         }
78
79         function checkForScrollSnap(targetLabel)
80         {
81             var divTarget = document.getElementById(targetLabel);
82
83             var actualPosition = divTarget.scrollTop;
84             if (targetLabel == 'horizontalTarget')
85                 actualPosition = divTarget.scrollLeft;
86
87             // The div should have snapped back to the previous position
88             if (actualPosition != divScrollPositionBeforeSnap)
89                 testFailed("div did not snap back to proper location for " + targetLabel +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
90             else
91                 testPassed("div honored snap points.");
92
93             if (targetLabel == 'horizontalTarget')
94                 setTimeout(function() { scrollGlideTest('verticalTarget') }, 0);
95             else   
96                 finishJSTest();
97         }
98
99         function scrollSnapTest(targetLabel)
100         {
101             debug("Testing scroll-snap snap for " + targetLabel + ":");
102             var divTarget = document.getElementById(targetLabel);
103  
104             var dx = 0;
105             var dy = 0;
106             if (targetLabel == 'horizontalTarget') {
107                 divScrollPositionBeforeSnap = divTarget.scrollLeft;
108                 dx = -1;
109             } else {
110                 divScrollPositionBeforeSnap = divTarget.scrollTop;
111                 dy = -1;
112             }
113
114             var windowPosition = locationInWindowCoordinates(divTarget);
115
116             var startPosX = windowPosition.x + 0.5 * divTarget.clientWidth;
117             var startPosY = windowPosition.y + 0.5 * divTarget.clientHeight;
118             eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
119             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
120             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
121             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
122             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
123             eventSender.callAfterScrollingCompletes(function() { return checkForScrollSnap(targetLabel); });
124         }
125
126         function checkForScrollGlide(targetLabel)
127         {
128             var divTarget = document.getElementById(targetLabel);
129
130             var actualPosition = divTarget.scrollTop;
131             var expectedPosition = divTarget.clientHeight;
132             if (targetLabel == 'horizontalTarget') {
133                 actualPosition = divTarget.scrollLeft;
134                 expectedPosition = divTarget.clientWidth;
135             }
136
137             // The div should have scrolled (glided) to the next snap point.
138             if (actualPosition == expectedPosition)
139                 testPassed("div scrolled to next window.");
140             else
141                 testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
142
143             setTimeout(function() { scrollSnapTest(targetLabel) }, 0);
144         }
145
146         function scrollGlideTest(targetLabel)
147         {
148             debug("Testing scroll-snap glide for " + targetLabel + ":");
149             var divTarget = document.getElementById(targetLabel);
150  
151             var dx = 0;
152             var dy = 0;
153             if (targetLabel == 'horizontalTarget') {
154                 divScrollPositionBeforeGlide = divTarget.scrollLeft;
155                 dx = -1;
156             } else {
157                 divScrollPositionBeforeGlide = divTarget.scrollTop;
158                 dy = -1;
159             }
160
161             var windowPosition = locationInWindowCoordinates(divTarget);
162
163             var startPosX = windowPosition.x + divTarget.clientWidth - 10;
164             var startPosY = windowPosition.y + 50;
165             eventSender.mouseMoveTo(startPosX, startPosY);
166             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
167             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
168             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
169             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
170             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
171             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'begin');
172             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue');
173             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
174             eventSender.callAfterScrollingCompletes(function() { return checkForScrollGlide(targetLabel); });
175         }
176
177         function onLoad()
178         {
179             if (window.eventSender) {
180                 eventSender.monitorWheelEvents();
181                 setTimeout(function() { scrollGlideTest('horizontalTarget') }, 0);
182             } else {
183                 var messageLocationH = document.getElementById('itemH0');
184                 var message = document.createElement('div');
185                 message.innerHTML = "<p>This test is better run under DumpRenderTree.<br/>To manually test it, place the mouse pointer<br/>"
186                     + "inside the red region at the top of the page,<br/>and then use the mouse wheel or a two-finger<br/>swipe to make a"
187                     + "small swipe gesture with<br/>some momentum.<br/><br/>"
188                     + "The region should scroll to show a green region.<br/><br/>"
189                     + "Next, perform a small scroll gesture that does<br/>not involve momentum. You should begin to<br/>see one of the colors "
190                     + "to the side of the current<br/>green box. When you release the wheel, the<br/>region should scroll back to a single color.";
191                 messageLocationH.appendChild(message);
192
193                 var messageLocationV = document.getElementById('itemV0');
194                 var message = document.createElement('div');
195                 message.innerHTML = "<p>You should also be able to repeat these tests steps for this vertical region.<br/>"
196                 messageLocationV.appendChild(message);
197             }
198         }
199         </script>
200     </head>
201     <body onload="onLoad();">
202         <div style="position: relative; width: 300px">
203             <div>Tests that the scroll-snap feature works properly in overflow regions.</div>
204             <div class="horizontalGallery" id="horizontalTarget">
205                 <div class="horizontalGalleryDrawer">
206                     <div id="itemH0" class="colorBox"></div>
207                     <div id="itemH1" class="colorBox"></div>
208                     <div id="itemH2" class="colorBox"></div>
209                     <div id="itemH3" class="colorBox"></div>
210                     <div id="itemH4" class="colorBox"></div>
211                     <div id="itemH5" class="colorBox"></div>
212                 </div>
213             </div>
214             <div class="verticalGallery" id="verticalTarget">
215                 <div class="verticalGalleryDrawer">
216                     <div id="itemV0" class="colorBox"></div>
217                     <div id="itemV1" class="colorBox"></div>
218                     <div id="itemV2" class="colorBox"></div>
219                     <div id="itemV3" class="colorBox"></div>
220                     <div id="itemV4" class="colorBox"></div>
221                     <div id="itemV5" class="colorBox"></div>
222                 </div>
223             </div>
224             <div id="console"></div>
225         </div>
226     </body>
227 </html>