snap-to-target-on-layout-change.html

<!DOCTYPE html>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/testdriver.js"></script>
<script src="../../resources/testdriver-actions.js"></script>
<script src="../../resources/testdriver-vendor.js"></script>
<style>
#scroller {
  overflow: scroll;
  height: 300px;
  width: 300px;
  margin: 0;
  padding: 0;
  scroll-snap-type: y mandatory;
}

#container {
  margin: 0;
  padding: 0;
  width: 600px;
  height: 2000px;
}

#initial-area {
  position: relative;
  top: 0;
  width: 200px;
  height: 200px;
  background-color: red;
  scroll-snap-align: start;
}

#target-area {
  position: relative;
  top: 200px;
  width: 200px;
  height: 200px;
  background-color: green;
  scroll-snap-align: start;
}
</style>

<div id="scroller">
  <div id="container">
    <div id="initial-area"></div>
    <div id="target-area"></div>
  </div>
</div>

<script>
const scroller = document.getElementById('scroller');
const target_area = document.getElementById('target-area');
const macPlatform = navigator.platform.indexOf('Mac') == 0;

function cleanup() {
  scroller.scrollTo(0,0);
  assert_equals(scroller.scrollTop, 0);

  target_area.style.setProperty('top', '200px');
  assert_equals(scroller.scrollTop, 0);
}

promise_test (async t => {
  t.add_cleanup(cleanup);

  await mouseClickOn(10, 10);
  await wheelScroll(50, 50, 0, 250 /* pixels to scroll */, scroller);
  assert_equals(scroller.scrollTop, 400);

  target_area.style.setProperty('top', '600px');
  assert_equals(scroller.scrollTop, 800);
}, "Layout changes should make the scroller resnap to targets set from wheel"
   + " scrolling");

promise_test (async t => {
  t.add_cleanup(cleanup);

  await mouseClickOn(10, 10);
  await keyboardScroll("ArrowDown", scroller);
  assert_equals(scroller.scrollTop, 400);

  target_area.style.setProperty('top', '600px');
  assert_equals(scroller.scrollTop, 800);
}, "Layout changes should make the scroller resnap to targets set from keyboard"
   + " scrolling");

if (!macPlatform) {
  // MacOS devices do not have touch screens Test is not relevant.
  promise_test (async t => {
    t.add_cleanup(cleanup);

    await mouseClickOn(10, 10);
    await touchScroll(50, 250, 0, -250 /* delta */, scroller);
    assert_equals(scroller.scrollTop, 400);

    target_area.style.setProperty('top', '600px');
    assert_equals(scroller.scrollTop, 800);
  }, "Layout changes should make the scroller resnap to targets set from gesture"
     + " scrolling");
}

</script>
chromium/third_party/blink/web_tests/fast/scroll-snap/snap-to-target-on-layout-change.html
