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