<!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();
  // Start scrolling on the child div and remove the div in the middle of
  // scrolling, then check that parentDiv starts scrolling.
  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.MOUSE_INPUT, 'down', pixels_per_sec);
  await waitFor( () => {return parentDiv.scrollTop > 0});
}, "New node must start wheel scrolling when the latched node is removed.");
</script>