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