scrollbar-prevent-default.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script src="../../resources/gesture-util.js"></script>
<style>
body {
  height: 200vh;
  width: 200vw;
  margin: 0;
}
#subframe {
  width: 100px;
  height: 100px;
  background-color: black;
  overflow: scroll;
}
#subframe-content {
  width: 200px;
  height: 200px;
  background-color: black;
}
</style>

<div id="subframe">
    <div id="subframe-content"></div>
</div>

<script>
if (window.internals)
  internals.settings.setScrollAnimatorEnabled(false);

var receivedMousedownEvent = false;
document.addEventListener('mousedown', function(e) {
  e.preventDefault();
  receivedMousedownEvent = true;
});

function testFrameScrollbar() {
  window.scrollTo(0, 10);
  return mouseClickOn(window.innerWidth - 5, 1);
}

function testDivScrollbar() {
  receivedMousedownEvent = false;
  var subframe = document.getElementById('subframe');
  subframe.scrollTop = 10;
  return mouseClickOn(100 - 5, 1);
}

promise_test(async () => {
  // Wait for the promise that gets resloved in runAfterLayoutAndPaint's callback.
  await WaitForlayoutAndPaint();

  // Test the frame scrollbar.
  await testFrameScrollbar();
  waitFor(() => { return receivedMousedownEvent; } );
  waitFor(() => { return window.scrollY == 0; } );

  // Test the div scrollbar.
  await testDivScrollbar();
  waitFor(() => { return receivedMousedownEvent; } );
  waitFor(() => { return subframe.scrollTop == 0; } );
}, 'This tests that scrollbars always receive events even when there is an ' +
   'element underneath the scrollbar which swallows the event. In this case ' +
   'an event handler is added to the window which swallows the event but ' +
   'this may also happen with elements underneath of overlay scrollbars.');
</script>
chromium/third_party/blink/web_tests/fast/scrolling/scrollbar-prevent-default.html
