| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #pane { |
| display:inline-block; |
| width:200px; |
| height:500px; |
| } |
| #boxup { |
| position: absolute; |
| top:0px; |
| width:200px; |
| height:230px; |
| background-color: #000; |
| opacity:.4; |
| } |
| #boxdown { |
| position: absolute; |
| top:270px; |
| width:200px; |
| height:230px; |
| background-color: #000; |
| opacity:.4; |
| } |
| #objectBack { |
| position: absolute; |
| top:200px; |
| width:200px; |
| height:100px; |
| background-color: #6c6; |
| } |
| #targetElement { |
| position: absolute; |
| top:30px; |
| width:200px; |
| height:40px; |
| background-color: #c66; |
| } |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="../../resources/ui-helper.js"></script> |
| </head> |
| <body onload="setupTopLevel();"> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| var pageScrollPositionBeforeGesture; |
| var divElement; |
| var divScrollPositionBeforeGesture; |
| |
| var deleteThreshhold = 40; |
| |
| 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; |
| } |
| |
| document.addEventListener("DOMContentLoaded", function() { |
| var objectBack = document.getElementById("objectBack"); |
| var targetElement = document.getElementById("targetElement"); |
| var inIFrame = window.parent !== window; |
| var pos = 0; |
| |
| |
| document.addEventListener("wheel", function(event) { |
| pos = pos - event.deltaY ; |
| move(objectBack, pos); |
| if (Math.abs(pos) > deleteThreshhold) { |
| // don't remove it twice |
| if (targetElement.parentNode) { |
| var parent = targetElement.parentNode; |
| parent.removeChild(targetElement); |
| testPassed("Removed the target element"); |
| } |
| } |
| event.preventDefault(); |
| }); |
| |
| // Setup |
| targetElement.innerHTML = "Put cursor here. Scroll up/down"; |
| |
| function move(element, pos) { |
| element.style.transform = "translateY(" + pos + "px)"; |
| } |
| }); |
| |
| function checkForScroll() |
| { |
| var pageScrollPositionAfterGesture = document.scrollingElement.scrollTop; |
| |
| // The page should not have scrolled |
| if (pageScrollPositionBeforeGesture != pageScrollPositionAfterGesture) |
| testFailed("Page received scroll events, when it should not have. Expected " + pageScrollPositionBeforeGesture + ", but got " + pageScrollPositionAfterGesture); |
| else |
| testPassed("Page did not scroll"); |
| |
| var divScrollPositionAfterGesture = divElement.getBoundingClientRect().top; |
| |
| // The div should have continued moving after the element was deleted |
| if (divScrollPositionAfterGesture > (divScrollPositionBeforeGesture - deleteThreshhold - 10)) |
| testFailed("div did not scroll to proper location. Expected " + divScrollPositionBeforeGesture + ", but got " + divScrollPositionAfterGesture); |
| else |
| testPassed("div continued scrolling after target element was deleted."); |
| |
| finishJSTest(); |
| } |
| |
| async function scrollTest() |
| { |
| pageScrollPositionBeforeGesture = document.scrollingElement.scrollTop; |
| |
| divElement = document.getElementById('objectBack'); |
| |
| divScrollPositionBeforeGesture = divElement.getBoundingClientRect().top; |
| |
| const windowPosition = locationInWindowCoordinates(divElement); |
| const startPosX = windowPosition.x + 0.5 * divElement.clientWidth; |
| const startPosY = windowPosition.y + 0.5 * divElement.clientHeight; |
| |
| const events = [ |
| { |
| type : "wheel", |
| viewX : startPosX, |
| viewY : startPosY, |
| deltaY : -10, |
| phase : "began" |
| }, |
| { |
| type : "wheel", |
| deltaY : -10, |
| phase : "changed" |
| }, |
| { |
| type : "wheel", |
| deltaY : -10, |
| phase : "changed" |
| }, |
| { |
| type : "wheel", |
| phase : "ended" |
| }, |
| { |
| type : "wheel", |
| deltaY : -10, |
| momentumPhase : "began" |
| }, |
| { |
| type : "wheel", |
| deltaY : -10, |
| momentumPhase : "changed" |
| }, |
| { |
| type : "wheel", |
| momentumPhase : "ended" |
| } |
| ]; |
| |
| await UIHelper.mouseWheelSequence({ events: events }); |
| checkForScroll(); |
| } |
| |
| function setupTopLevel() |
| { |
| if (window.eventSender) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| setTimeout(scrollTest, 0); |
| } else { |
| var messageLocation = document.getElementById('parent'); |
| var message = document.createElement('div'); |
| message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>" |
| + "at the top of the page, and then use the mouse wheel or a two-finger swipe to scroll the<br/>" |
| + "down past the iframe.<br/><br/>" |
| + "The iframe should not scroll.</p>"; |
| messageLocation.appendChild(message); |
| } |
| } |
| </script> |
| <div id="parent" style="height: 2000px;"> |
| <div id="pane"> |
| <h3>Container</h3> |
| <div id="objectBack"><div id="targetElement"></div></div> |
| <div id="boxup"></div> |
| <div id="boxdown"></div> |
| </div> |
| <p class="description">After moving 40px up or down we remove the initial target element of wheel event from<br/> |
| the dom. In safari this causes the wheel event to stop firing on the current frame, but it<br/> |
| then starts firing on the parent frame.</p> |
| </div> |
| <div id="console"></div> |
| <script> |
| description("Tests that iframe doesn't consume wheel events when scrolling a select in an iframe."); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
