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