<!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>