| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .gallery { |
| width: 400px; |
| height: 400px; |
| display: inline-block; |
| overflow-x: hidden; |
| overflow-y: auto; |
| scroll-snap-type: y mandatory; |
| } |
| .colorBox { |
| height: 400px; |
| width: 400px; |
| scroll-snap-align: start; |
| } |
| #item0, #item2 { background-color: red; } |
| #item1 { background-color: green; } |
| </style> |
| <script src="../../../resources/js-test.js"></script> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| function locationInWindowCoordinates(element) |
| { |
| var position = {}; |
| position.x = element.offsetLeft; |
| position.y = element.offsetTop; |
| |
| while (element.offsetParent) { |
| position.x = position.x + element.offsetParent.offsetLeft; |
| position.y = position.y + element.offsetParent.offsetTop; |
| if (element == document.getElementsByTagName("body")[0]) |
| break; |
| |
| element = element.offsetParent; |
| } |
| |
| return position; |
| } |
| |
| function scrollSnapTest() |
| { |
| var divTarget = document.getElementById("target"); |
| var windowPosition = locationInWindowCoordinates(divTarget); |
| |
| var startPosX = windowPosition.x + 0.5 * divTarget.clientWidth; |
| var startPosY = windowPosition.y + 0.5 * divTarget.clientHeight; |
| eventSender.mouseMoveTo(startPosX, startPosY); |
| // Each unit of stateless scroll is scaled by 10 pixels. |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none"); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -10, "none", "none"); |
| // Wait for the snapping to finish. |
| setTimeout(function() { |
| if (divTarget.scrollTop != 400) |
| testFailed("div did not snap to the green region. Expected 400, but got " + divTarget.scrollTop + "."); |
| else |
| testPassed("div honored snap points."); |
| |
| finishJSTest(); |
| }, 2000); |
| } |
| |
| |
| function onLoad() |
| { |
| if (window.eventSender) { |
| eventSender.monitorWheelEvents(); |
| internals.setPlatformMomentumScrollingPredictionEnabled(false); |
| setTimeout(scrollSnapTest, 0); |
| } else { |
| var messageLocationH = document.getElementById("item0"); |
| var message = document.createElement("div"); |
| message.innerHTML = "This test is better run under DumpRenderTree. To manually<br/>" |
| + "test it, place the mouse pointer inside the red region at the<br/>" |
| + "top of the page, and then, using a mechanical mouse wheel,<br/>" |
| + "scroll so that the green region takes up more of the<br/>" |
| + "container than the surrounding red regions. After a brief<br/>" |
| + "pause, the target should scroll so that the green region is<br/>" |
| + "fully visible, and no red is visible."; |
| messageLocationH.appendChild(message); |
| } |
| } |
| </script> |
| </head> |
| <body onload="onLoad();"> |
| <div style="position: relative; width: 400px"> |
| <div>Tests that the scroll-snap feature works properly in overflow regions when using a mechanical mouse wheel.</div> |
| <div class="gallery" id="target"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| </div> |
| <div id="console"></div> |
| </div> |
| </body> |
| </html> |
