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