Scroll-snap points do not handle margins and padding propertly
[WebKit-https.git] / LayoutTests / platform / mac-wk2 / tiled-drawing / scrolling / scroll-snap / scroll-snap-iframe.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: 2px;
11             }
12             .verticalGallery {
13                 width: 300px;
14                 height: 300px;
15                 display: inline-block;
16                 overflow-x: hidden;
17                 overflow-y: auto;
18                 margin: 2px;
19             }
20         </style>
21         <script src="../../../../../resources/js-test-pre.js"></script>
22         <script>
23         var iframeScrollPositionBeforeGlide;
24         var divScrollPositionBeforeSnap;
25
26         function locationInWindowCoordinates(element)
27         {
28             var position = {};
29             position.x = element.offsetLeft;
30             position.y = element.offsetTop;
31
32             while (element.offsetParent) {
33                 position.x = position.x + element.offsetParent.offsetLeft;
34                 position.y = position.y + element.offsetParent.offsetTop;
35                 if (element == document.getElementsByTagName("body")[0])
36                     break;
37
38                 element = element.offsetParent;
39             }
40
41             return position;
42         }
43
44         function finishTest()
45         {
46             finishJSTest();
47             testRunner.notifyDone();            
48         }
49
50         function checkForScrollSnap(targetLabel)
51         {
52             var iframeTarget = document.getElementById(targetLabel);
53
54             var actualPosition = iframeTarget.scrollTop;
55             if (targetLabel == 'horizontalTarget')
56                 actualPosition = iframeTarget.scrollLeft;
57
58             // The div should have snapped back to the previous position
59             if (actualPosition != divScrollPositionBeforeSnap)
60                 testFailed("div did not snap back to proper location for " + targetLabel +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
61             else
62                 testPassed("div honored snap points.");
63
64             if (targetLabel == 'horizontalTarget')
65                 setTimeout(scrollGlideTest('verticalTarget'), 0);
66             else   
67                 finishTest();
68         }
69
70         function scrollSnapTest(targetLabel)
71         {
72             debug("Testing scroll-snap snap for " + targetLabel + ":");
73             var iframeTarget = document.getElementById(targetLabel);
74  
75             var dx = 0;
76             var dy = 0;
77             if (targetLabel == 'horizontalTarget') {
78                 divScrollPositionBeforeSnap = iframeTarget.scrollLeft;
79                 dx = -1;
80             } else {
81                 divScrollPositionBeforeSnap = iframeTarget.scrollTop;
82                 dy = -1;
83             }
84
85             var windowPosition = locationInWindowCoordinates(iframeTarget);
86
87             var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
88             var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
89             eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
90             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none', false);
91             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
92             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
93             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
94             eventSender.callAfterScrollingCompletes(function() { return checkForScrollSnap(targetLabel); });
95         }
96
97         function checkForScrollGlide(targetLabel)
98         {
99             var iframeTarget = document.getElementById(targetLabel);
100             var iframeBody = window.frames[targetLabel].document.body;
101
102             var actualPosition = iframeBody.scrollTop;
103             var expectedPosition = iframeTarget.clientHeight;
104             if (targetLabel == 'horizontalTarget') {
105                 actualPosition = iframeBody.scrollLeft;
106                 expectedPosition = iframeTarget.clientWidth;
107             }
108
109             // The div should have scrolled (glided) to the next snap point.
110             if (actualPosition == expectedPosition)
111                 testPassed("div scrolled to next window.");
112             else
113                 testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
114
115             setTimeout(scrollSnapTest(targetLabel), 0);
116         }
117
118         function scrollGlideTest(targetLabel)
119         {
120             debug("Testing scroll-snap glide for " + targetLabel + ":");
121             var iframeTarget = document.getElementById(targetLabel);
122             var iframeBody = window.frames[targetLabel].document.body;
123  
124             var dx = 0;
125             var dy = 0;
126             if (targetLabel == 'horizontalTarget') {
127                 iframeScrollPositionBeforeGlide = iframeBody.scrollLeft;
128                 dx = -1;
129             } else {
130                 iframeScrollPositionBeforeGlide = iframeBody.scrollTop;
131                 dy = -1;
132             }
133
134             var windowPosition = locationInWindowCoordinates(iframeTarget);
135
136             var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
137             var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
138             eventSender.mouseMoveTo(startPosX, startPosY);
139             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none', false);
140             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
141             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
142             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
143             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
144             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'begin', false);
145             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
146             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
147             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
148             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
149             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end', false);
150             eventSender.callAfterScrollingCompletes(function() { return checkForScrollGlide(targetLabel); });
151         }
152
153         function onLoad()
154         {
155             if (window.eventSender) {
156                 window.jsTestIsAsync = true;
157                 testRunner.dumpAsText();
158                 testRunner.waitUntilDone();
159
160                 eventSender.monitorWheelEvents();
161                 setTimeout(scrollGlideTest('horizontalTarget'), 0);
162             }
163         }
164         </script>
165     </head>
166     <body onload="onLoad();">
167         <div style="position: relative; width: 300px;">
168             <div>Tests that the scroll-snap feature works properly in iframes.</div>
169             <iframe id="horizontalTarget" class="horizontalGallery" src="resources/horizontal-mainframe.html" style="height: 300px; width: 300px"></iframe>
170             <iframe id="verticalTarget" class="verticalGallery" src="resources/vertical-mainframe.html"  style="height: 300px; width: 300px"></iframe>
171             <div id="console"></div>
172         </div>
173         <script src="../../../../../resources/js-test-post.js"></script>
174     </body>
175 </html>