Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / tiled-drawing / scrolling / scroll-snap / scroll-snap-mandatory-overflow-stateless.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             .gallery {
6                 width: 400px;
7                 height: 400px;
8                 display: inline-block;
9                 overflow-x: hidden;
10                 overflow-y: auto;
11                 scroll-snap-type: y mandatory;
12             }
13             .colorBox {
14                 height: 400px;
15                 width: 400px;
16                 scroll-snap-align: start;
17             }
18             #item0, #item2 { background-color: red; }
19             #item1 { background-color: green; }
20         </style>
21         <script src="../../../resources/js-test.js"></script>
22         <script>
23         window.jsTestIsAsync = true;
24
25         function locationInWindowCoordinates(element)
26         {
27             var position = {};
28             position.x = element.offsetLeft;
29             position.y = element.offsetTop;
30
31             while (element.offsetParent) {
32                 position.x = position.x + element.offsetParent.offsetLeft;
33                 position.y = position.y + element.offsetParent.offsetTop;
34                 if (element == document.getElementsByTagName("body")[0])
35                     break;
36
37                 element = element.offsetParent;
38             }
39
40             return position;
41         }
42
43         function scrollSnapTest()
44         {
45             var divTarget = document.getElementById("target");
46             var windowPosition = locationInWindowCoordinates(divTarget);
47
48             var startPosX = windowPosition.x + 0.5 * divTarget.clientWidth;
49             var startPosY = windowPosition.y + 0.5 * divTarget.clientHeight;
50             eventSender.mouseMoveTo(startPosX, startPosY);
51             // Each unit of stateless scroll is scaled by 10 pixels.
52             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none");
53             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none");
54             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none");
55             // Wait for the snapping to finish.
56             setTimeout(function() {
57                 if (divTarget.scrollTop != 400)
58                     testFailed("div did not snap to the green region. Expected 400, but got " + divTarget.scrollTop + ".");
59                 else
60                     testPassed("div honored snap points.");
61
62                 finishJSTest();
63             }, 2000);
64         }
65
66
67         function onLoad()
68         {
69             if (window.eventSender) {
70                 eventSender.monitorWheelEvents();
71                 setTimeout(scrollSnapTest, 0);
72             } else {
73                 var messageLocationH = document.getElementById("item0");
74                 var message = document.createElement("div");
75                 message.innerHTML = "This test is better run under DumpRenderTree. To manually<br/>"
76                     + "test it, place the mouse pointer inside the red region at the<br/>"
77                     + "top of the page, and then, using a mechanical mouse wheel,<br/>"
78                     + "scroll so that the green region takes up more of the<br/>"
79                     + "container than the surrounding red regions. After a brief<br/>"
80                     + "pause, the target should scroll so that the green region is<br/>"
81                     + "fully visible, and no red is visible.";
82                 messageLocationH.appendChild(message);
83             }
84         }
85         </script>
86     </head>
87     <body onload="onLoad();">
88         <div style="position: relative; width: 400px">
89             <div>Tests that the scroll-snap feature works properly in overflow regions when using a mechanical mouse wheel.</div>
90             <div class="gallery" id="target">
91                 <div id="item0" class="colorBox"></div>
92                 <div id="item1" class="colorBox"></div>
93                 <div id="item2" class="colorBox"></div>
94             </div>
95             <div id="console"></div>
96         </div>
97     </body>
98 </html>