| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <style> |
| .horizontalGallery { |
| width: 600vw; |
| height: 100vh; |
| margin: 0; |
| padding: 0; |
| scroll-snap-type: x mandatory; |
| } |
| .colorBox { |
| height: 100vh; |
| width: 100vw; |
| float: left; |
| scroll-snap-align: start; |
| } |
| #item0 { background-color: red; background-image: url('../../resources/green-blue.png'); background-attachment: fixed;} |
| #item1 { background-color: green; } |
| #item2 { background-color: blue; } |
| #item3 { background-color: aqua; } |
| #item4 { background-color: yellow; } |
| #item5 { background-color: fuchsia; } |
| </style> |
| <script src="../../../resources/js-test.js"></script> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| var divTarget; |
| var divScrollPositionBeforeGlide; |
| var divScrollPositionBeforeSnap; |
| |
| function checkForScrollSnap() { |
| // The div should have snapped back to the previous position |
| if (divTarget.scrollLeft != divScrollPositionBeforeSnap) |
| testFailed(`div did not snap back to proper location. ${divTarget.scrollLeft} vs. ${divScrollPositionBeforeSnap}`); |
| else |
| testPassed("div honored snap points."); |
| |
| finishJSTest(); |
| } |
| |
| function scrollSnapTest() { |
| // See where our div lives: |
| pageScrollPositionBefore = document.scrollingElement.scrollLeft; |
| |
| divTarget = document.getElementById('target'); |
| |
| divScrollPositionBeforeSnap = divTarget.scrollLeft; |
| |
| var startPosX = divTarget.offsetLeft + 20; |
| var startPosY = divTarget.offsetTop + 20; |
| eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none'); |
| eventSender.callAfterScrollingCompletes(checkForScrollSnap); |
| } |
| |
| function checkForScrollGlide() { |
| // The div should have scrolled (glided) to the next snap point. |
| if (divTarget.scrollLeft == window.innerWidth) |
| testPassed("div scrolled to next window."); |
| else |
| testFailed(`div did not honor snap points. ${divTarget.scrollLeft} vs. ${window.innerWidth}`); |
| |
| setTimeout(scrollSnapTest, 0); |
| } |
| |
| function scrollGlideTest() { |
| divTarget = document.getElementById('target'); |
| |
| divScrollPositionBeforeGlide = divTarget.scrollLeft; |
| |
| var startPosX = divTarget.offsetLeft + 20; |
| var startPosY = divTarget.offsetTop + 20; |
| eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'began', 'none'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'changed', 'none'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, 'none', 'begin'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(-4, 0, 'none', 'continue'); |
| eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end'); |
| eventSender.callAfterScrollingCompletes(checkForScrollGlide); |
| } |
| |
| function onLoad() { |
| |
| if (window.eventSender) { |
| eventSender.monitorWheelEvents(); |
| internals.setPlatformMomentumScrollingPredictionEnabled(false); |
| setTimeout(scrollGlideTest, 0); |
| } else { |
| var messageLocation = document.getElementById('item0'); |
| var message = document.createElement('div'); |
| message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>" |
| + "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/>" |
| + "small swipe gesture with some momentum.<br/><br/>" |
| + "The region should scroll to show a green region.<br/><br/>" |
| + "Next, perform a small scroll gesture that does not involve momentum. You should begin to see one of the colors<br/>" |
| + "to the left (or right) of the current green box. When you release the wheel, the region should scroll back so<br/>" |
| + "that the region is a single color.<br/><br/>" |
| + "You should also be able to repeat these test steps for the vertical region below.</p>"; |
| messageLocation.appendChild(message); |
| } |
| } |
| </script> |
| </head> |
| <body onload="onLoad();" class="horizontalGallery" id="target"> |
| <div id="item0" class="colorBox"><div id="console"></div></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </body> |
| </html> |
