Move platform/mac-wk2/tiled-drawing to tiled-drawing/
[WebKit-https.git] / LayoutTests / tiled-drawing / scrolling / scroll-snap / scroll-snap-mandatory-mainframe-vertical.html
1 <!DOCTYPE HTML>
2 <html>
3     <head>
4         <style>
5             .verticalGallery {
6                 width: 100vw;
7                 height: 600vh;
8                 margin: 0;
9                 padding: 0;
10                 -webkit-scroll-snap-points-y: repeat(100vh);
11                 -webkit-scroll-snap-type: mandatory;
12             }
13             .colorBox {
14                 height: 100vh;
15                 width: 100vw;
16                 float: left;
17             }
18             #item0 { background-color: red; }
19             #item1 { background-color: green; }
20             #item2 { background-color: blue; }
21             #item3 { background-color: aqua; }
22             #item4 { background-color: yellow; }
23             #item5 { background-color: fuchsia; }
24         </style>
25         <script src="../../../resources/js-test-pre.js"></script>
26         <script>
27         var divTarget;
28         var divScrollPositionBeforeGlide;
29         var divScrollPositionBeforeSnap;
30
31         function checkForScrollSnap() {
32             // The div should have snapped back to the previous position
33             if (divTarget.scrollTop != divScrollPositionBeforeSnap)
34                 testFailed("div did not snap back to proper location.");
35             else
36                 testPassed("div honored snap points.");
37
38             testRunner.notifyDone();
39         }
40
41         function scrollSnapTest() {
42             // See where our div lives:
43             pageScrollPositionBefore = document.body.scrollTop;
44
45             divTarget = document.getElementById('target');
46  
47             divScrollPositionBeforeSnap = divTarget.scrollTop;
48
49             var startPosX = divTarget.offsetLeft + 20;
50             var startPosY = divTarget.offsetTop + 20;
51             eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
52             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none', false);
53             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
54             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
55             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
56             eventSender.callAfterScrollingCompletes(checkForScrollSnap);
57         }
58
59         function checkForScrollGlide() {
60             // The div should have scrolled (glided) to the next snap point.
61             if (divTarget.scrollTop == window.innerHeight)
62                 testPassed("div scrolled to next window.");
63             else
64                 testFailed("div did not honor snap points.");
65
66             setTimeout(scrollSnapTest, 0);
67         }
68
69         function scrollGlideTest() {
70             divTarget = document.getElementById('target');
71  
72             divScrollPositionBeforeGlide = divTarget.scrollTop;
73
74             var startPosX = divTarget.offsetLeft + 20;
75             var startPosY = divTarget.offsetTop + 20;
76             eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
77             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', 'none', false);
78             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
79             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
80             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'changed', 'none', false);
81             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
82             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'begin', false);
83             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
84             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
85             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
86             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'none', 'continue', false);
87             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end', false);
88             eventSender.callAfterScrollingCompletes(checkForScrollGlide);
89         }
90
91         function onLoad() {
92
93             if (window.eventSender) {
94                 testRunner.waitUntilDone();
95
96                 eventSender.monitorWheelEvents();
97                 setTimeout(scrollGlideTest, 0);
98             } else {
99                 var messageLocation = document.getElementById('item0');
100                 var message = document.createElement('div');
101                 message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>"
102                     + "inside the red region at the top of the page, and then use the mouse wheel or a two-finger swipe to make a<br/>"
103                     + "small swipe gesture with some momentum.<br/><br/>"
104                     + "The region should scroll to show a green region.<br/><br/>"
105                     + "Next, perform a small scroll gesture that does not involve momentum. You should begin to see one of the colors<br/>"
106                     + "to the left (or right) of the current green box. When you release the wheel, the region should scroll back so<br/>"
107                     + "that the region is a single color.<br/><br/>"
108                     + "You should also be able to repeat these test steps for the vertical region below.</p>";
109                 messageLocation.appendChild(message);
110             }
111         }
112         </script>
113     </head>
114     <body onload="onLoad();" class="verticalGallery" id="target">
115         <div id="item0" class="colorBox"><div id="console"></div></div>
116         <div id="item1" class="colorBox"></div>
117         <div id="item2" class="colorBox"></div>
118         <div id="item3" class="colorBox"></div>
119         <div id="item4" class="colorBox"></div>
120         <div id="item5" class="colorBox"></div>
121         <script src="../../../resources/js-test-post.js"></script>
122     </body>
123 </html>