touch-gesture-noscroll-body-propagated.html

<!DOCTYPE html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/gesture-util.js"></script>
<script src="../../../../resources/testdriver.js"></script>
<script src="../../../../resources/testdriver-actions.js"></script>
<script src="../../../../resources/testdriver-vendor.js"></script>
<style>
html {
  overflow-y: hidden;
}

body {
  margin: 0;
}

.greenbox {
  width: 20vh;
  height: 20vh;
  background: green;
  padding: 0px;
  margin: 0px;
}

.redbox {
  width: 20vh;
  height: 20vh;
  background: red;
  padding: 0px;
  margin: 0px;
}

.scrollable {
  position: relative;
  overflow: scroll;
}

.content {
  height: 200%;
  width: 200%;
}

</style>
<body>
  <div class="redbox"></div>
  <div class="greenbox"></div>
  <div class="redbox scrollable" id="target">
    <div class="content"></div>
  </div>
  <div class="greenbox"></div>
  <div class="redbox"></div>
  <div class="greenbox"></div>
</body>
<script>
promise_test (async () => {
  waitForCompositorCommit();

  // first scroll scrolls inner content.
  const position = elementCenter(target);
  const margin = 20;
  const scrollRange = target.scrollWidth - target.clientHeight;
  const dx = 0;
  const dy = -(position.y - margin);
  await touchScroll(position.x, position.y, dx, dy, target);
  assert_equals(target.scrollTop, scrollRange);
  await raf();
  await raf();
  assert_equals(document.scrollingElement.scrollTop, 0);

  // Scroll propagation does not trigger scroll since body has overflow:hidden.
  await touchDrag(position.x, position.y, 0, -40);
  await raf();
  await raf();
  assert_equals(target.scrollTop, scrollRange);
  assert_equals(document.scrollingElement.scrollTop, 0);
}, 'This tests that a page cannot be scrolled vertically with touch if the ' +
   'document\'s scrolling-element has style overflow-y:hidden and the scroll ' +
   'event is propagated from a scrollable child div.');
</script>
chromium/third_party/blink/web_tests/fast/events/touch/gesture/touch-gesture-noscroll-body-propagated.html
