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