Move /platform/ios-simulator/accessibility tests to accessibility/ios-simulator/
[WebKit-https.git] / LayoutTests / platform / mac-wk2 / tiled-drawing / scrolling / scroll-snap / scroll-snap-mandatory-2d-overflow.html
1 <!DOCTYPE HTML>
2 <html>
3     <head>
4         <style>
5             #grid-container {
6                 width: 400px;
7                 height: 400px;
8                 overflow: scroll;
9                 white-space: nowrap;
10                 -webkit-overflow-scrolling: touch;
11                 -webkit-scroll-snap-type: mandatory;
12                 -webkit-scroll-snap-destination: 0 0;
13                 line-height: 0px;
14             }
15
16             .cell {
17                 width: 400px;
18                 height: 400px;
19                 display: inline-block;
20                 -webkit-scroll-snap-coordinate: 0 0;
21                 background-color: red;
22                 margin: 0;
23                 padding: 0;
24                 position: relative;
25             }
26
27             #green {
28                 background-color: green;
29             }
30
31             #snap-from > p {
32                 position: absolute;
33                 top: 0px;
34                 left: 10px;
35                 margin-top: 0px;
36             }
37         </style>
38         <script src="../../../../../resources/js-test-pre.js"></script>
39         <script>
40         var divTarget;
41         var divScrollPositionBeforeGlide;
42         var divScrollPositionBeforeSnap;
43         var divScrollPositionBeforeSingleAxisGlide;
44
45         function finishTest() {
46             finishJSTest();
47             testRunner.notifyDone();
48         }
49
50         function checkForSingleAxisGlide() {
51             if (divTarget.scrollTop == divScrollPositionBeforeSingleAxisGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeSingleAxisGlide.x)
52                 testPassed("div successfully snapped after dragging along one axis and then scrolling in the other.");
53             else
54                 testFailed("div did not honor 2D snap points. (single axis scroll followed by flick on other axis)");
55             finishTest();
56         }
57
58         function scrollAndGlideInSingleAxisTest() {
59             divScrollPositionBeforeSingleAxisGlide = {
60                 x: divTarget.scrollLeft,
61                 y: divTarget.scrollTop
62             };
63             eventSender.mouseMoveTo(100, 100);
64             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "began", "none", false);
65             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none", false);
66             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none", false);
67             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none", false);
68             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none", false);
69             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none", false);
70             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none", false);
71             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "begin", false);
72             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "continue", false);
73             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "continue", false);
74             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "continue", false);
75             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "continue", false);
76             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end", false);
77             eventSender.callAfterScrollingCompletes(checkForSingleAxisGlide);
78         }
79
80         function checkForScrollSnap() {
81             if (divTarget.scrollTop == divScrollPositionBeforeSnap.y && divTarget.scrollLeft == divScrollPositionBeforeSnap.x)
82                 testPassed("div successfully snapped diagonally.");
83             else
84                 testFailed("div did not honor 2D snap points. (diagonal snap)");
85             setTimeout(scrollAndGlideInSingleAxisTest, 0);
86         }
87
88         function scrollSnapTest() {
89             divScrollPositionBeforeSnap = {
90                 x: divTarget.scrollLeft,
91                 y: divTarget.scrollTop
92             };
93
94             eventSender.mouseMoveTo(100, 100);
95             eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "began", "none", false);
96             eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none", false);
97             eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none", false);
98             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none", false);
99             eventSender.callAfterScrollingCompletes(checkForScrollSnap);
100         }
101
102         function checkForScrollGlide() {
103             // The div should have scrolled (glided) to the next snap point.
104             if (divTarget.scrollTop == divScrollPositionBeforeGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeGlide.x + 400)
105                 testPassed("div successfully scrolled diagonally.");
106             else
107                 testFailed("div did not honor 2D snap points. (diagonal glide)");
108             setTimeout(scrollSnapTest, 0);
109         }
110
111         function scrollGlideTest() {
112             divTarget = document.getElementById("grid-container");
113             divScrollPositionBeforeGlide = {
114                 x: divTarget.scrollLeft,
115                 y: divTarget.scrollTop
116             };
117
118             eventSender.mouseMoveTo(100, 100);
119             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "began", "none", false);
120             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none", false);
121             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none", false);
122             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none", false);
123             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none", false);
124             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "begin", false);
125             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "continue", false);
126             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "continue", false);
127             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "continue", false);
128             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "continue", false);
129             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end", false);
130             eventSender.callAfterScrollingCompletes(checkForScrollGlide);
131         }
132
133         function onLoad() {
134             if (window.eventSender) {
135                 window.jsTestIsAsync = true;
136                 testRunner.dumpAsText();
137                 testRunner.waitUntilDone();
138
139                 eventSender.monitorWheelEvents();
140                 setTimeout(scrollGlideTest, 0);
141             } else {
142                 var messageLocation = document.getElementById("snap-from");
143                 var message = document.createElement("p");
144                 message.innerHTML = "<p>This test is better run under DumpRenderTree." +
145                 "</p><p>To manually test it, place the mouse pointer inside the" +
146                 "</p><p>red box and perform a small swipe to the lower right" +
147                 "</p><p>with some momentum. The grid should scroll to show a" +
148                 "</p><p>green cell. Then scroll a bit to the upper left and" +
149                 "</p><p>release without momentum. It should snap back to show" +
150                 "</p><p>the green cell. Finally, drag slightly to the right and" +
151                 "</p><p>then directly down. It should snap to reveal another" +
152                 "</p><p>green cell directly below the previous one.</p>"
153                 messageLocation.appendChild(message);
154             }
155         }
156         </script>
157     </head>
158     <body onload="onLoad();">
159         <div id="grid-container">
160             <div class="cell" id="snap-from"></div><div class="cell"></div><div class="cell"></div><br/>
161             <div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div><br/>
162             <div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div>
163         </div>
164         <script src="../../../../../resources/js-test-post.js"></script>
165     </body>
166 </html>