<!DOCTYPE HTML>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<style>
::-webkit-scrollbar {
display: none;
}
body {
margin: 0px;
height: 1000px;
width: 1000px;
}
#parentDiv {
background-color: #FF7F7F;
height: 600px;
width: 600px;
overflow: scroll;
}
#content1 {
height: 1100px;
width: 1100px;
}
#childDiv {
background-color: #84BE6A;
height: 500px;
width: 500px;
overflow: scroll;
}
#content2 {
height: 1000px;
width: 1000px;
}
</style>
<div id="parentDiv">
<div id="content1">
<div id="childDiv">
<div id="content2">
</div>
</div>
</div>
</div>
<script>
var parentDiv = document.getElementById('parentDiv');
var childDiv = document.getElementById('childDiv');
var rect = childDiv.getBoundingClientRect();
function setUpForTest() {
if (window.internals)
internals.settings.setScrollAnimatorEnabled(false);
parentDiv.scrollTo(0, 0);
childDiv.scrollTo(0, 0);
}
childDiv.addEventListener('scroll', () => {
if(childDiv.scrollTop > 0)
childDiv.remove();
});
promise_test( async () => {
setUpForTest();
await waitForCompositorCommit();
// Start scrolling on the child div and remove the div in the middle of
// scrolling, then check that parentDiv have not scrolled.
var x = (rect.left + rect.right) / 2;
var y = (rect.top + rect.bottom) / 2;
// Slow scrolling gives enough time to switch from cc to main.
var pixels_per_sec = 100;
await smoothScroll(400, x, y, GestureSourceType.TOUCH_INPUT, 'down', pixels_per_sec);
await conditionHolds( () => { return parentDiv.scrollTop === 0; },
"parentDiv has scrolled, which should not have!" );
}, "New node must NOT start wheel scrolling when the latched node is removed.");
</script>