blob: 7fea44476c5a7d8d84328aa157f10cdccd201437 [file] [log] [blame]
<!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>