| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| #topTarget { |
| position: absolute; |
| top: 0; |
| left: 0; |
| border: 1px black solid; |
| } |
| |
| #bottomTarget { |
| position: absolute; |
| top: 400px; |
| left: 0; |
| border: 1px black solid; |
| } |
| |
| .gallery { |
| width: 400px; |
| height: 400px; |
| overflow-y: hidden; |
| overflow-x: auto; |
| margin-bottom: 2px; |
| scroll-snap-type: x mandatory; |
| opacity: 0.5; |
| } |
| |
| .galleryDrawer { |
| width: 2400px; |
| height: 400px; |
| } |
| |
| .colorBox { |
| height: 400px; |
| width: 400px; |
| float: left; |
| scroll-snap-align: start; |
| } |
| #itemH0, #itemV0 { background-color: red; } |
| #itemH1, #itemV1 { background-color: green; } |
| #itemH2, #itemV2 { background-color: blue; } |
| #itemH3, #itemV3 { background-color: aqua; } |
| #itemH4, #itemV4 { background-color: yellow; } |
| #itemH5, #itemV5 { background-color: fuchsia; } |
| </style> |
| <script src="../../resources/ui-helper.js"></script> |
| <script> |
| 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; |
| } |
| |
| let swipeWithMomentum = (element) => swipeInElement(element, true); |
| let swipeWithoutMomentum = (element) => swipeInElement(element, false); |
| |
| async function swipeInElement(element, momentum) |
| { |
| write(`* Swiping ${momentum ? "with" : "without"} momentum in ${element.id} with scroll offset ${element.scrollLeft}`); |
| |
| internals.setPlatformMomentumScrollingPredictionEnabled(false); |
| const location = locationInWindowCoordinates(element); |
| |
| let events = [ |
| { |
| type : "wheel", |
| viewX : location.x, |
| viewY : location.y, |
| deltaX : -10, |
| phase : "began" |
| }, |
| { |
| type : "wheel", |
| deltaX : -10, |
| phase : "changed" |
| }, |
| { |
| type : "wheel", |
| deltaX : -10, |
| phase : "changed" |
| }, |
| { |
| type : "wheel", |
| phase : "ended" |
| } |
| ]; |
| const momentumEvents = [ |
| { |
| type : "wheel", |
| deltaX : -10, |
| momentumPhase : "began" |
| }, |
| { |
| type : "wheel", |
| deltaX : -10, |
| momentumPhase : "changed" |
| }, |
| { |
| type : "wheel", |
| momentumPhase : "ended" |
| } |
| ]; |
| |
| if (momentum) |
| events.push(...momentumEvents); |
| |
| await UIHelper.mouseWheelSequence({ events: events }); |
| |
| write(` topTarget now has scroll offset ${topTarget.scrollLeft}`); |
| write(` bottomTarget now has scroll offset ${bottomTarget.scrollLeft}`); |
| write(""); |
| } |
| |
| function run() |
| { |
| if (!window.eventSender) |
| return; |
| |
| swipeWithMomentum(topTarget) |
| .then(() => swipeWithoutMomentum(topTarget)) |
| .then(() => swipeWithMomentum(bottomTarget)) |
| .then(() => swipeWithoutMomentum(bottomTarget)) |
| .then(() => testRunner.notifyDone()); |
| } |
| </script> |
| </head> |
| <body onload=run()> |
| <div style="position: relative; width: 400px"> |
| <p>Manually test with the following steps:</p> |
| <p>1. Scroll with momentum to the green box in the first div.</p> |
| <p>2. In the first div, drag so the blue box is partially visible, then let go so the div snaps back to show green.</p> |
| <p>3. Scroll with momentum to the green box in the second div.</p> |
| <p>4. In the second div, drag so the blue box is partially visible, then let go so the div snaps back to show green.</p> |
| <div class="gallery" id="topTarget"> |
| <div class="galleryDrawer"> |
| <div id="itemH0" class="colorBox"></div> |
| <div id="itemH1" class="colorBox"></div> |
| <div id="itemH2" class="colorBox"></div> |
| <div id="itemH3" class="colorBox"></div> |
| <div id="itemH4" class="colorBox"></div> |
| <div id="itemH5" class="colorBox"></div> |
| </div> |
| </div> |
| <div class="gallery" id="bottomTarget"> |
| <div class="galleryDrawer"> |
| <div id="itemV0" class="colorBox"></div> |
| <div id="itemV1" class="colorBox"></div> |
| <div id="itemV2" class="colorBox"></div> |
| <div id="itemV3" class="colorBox"></div> |
| <div id="itemV4" class="colorBox"></div> |
| <div id="itemV5" class="colorBox"></div> |
| </div> |
| </div> |
| <div id="output"></div> |
| <script> |
| let write = s => output.innerHTML += s + "<br>"; |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| </script> |
| </div> |
| </body> |
| </html> |
