css/cssom-view/interrupt-hidden-smooth-scroll.html

<!DOCTYPE html>
<title>Smooth scrolling of overflow: hidden should be interruptible</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#concept-smooth-scroll">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<style>
  #scroller {
    overflow-y: hidden;
    width: 100px;
    height: 100px;
    scroll-behavior: smooth;
  }
  .green {
    width: 100px;
    height: 100px;
    background: green;
  }
  .red {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
<div id="scroller">
  <div class="green"></div>
  <div class="red"></div>
  <div class="green"></div>
</div>
<script>
  promise_test(async () => {
    await waitForCompositorReady();
  }, 'Make sure the page is ready for animation.');

  let interrupted = false;
  promise_test(() => {
    return new Promise(function(resolve, reject) {
      scroller.onscrollend = (event) => {
        try {
          if (interrupted) {
            assert_equals(scroller.scrollTop, 1,
                'Scroll should end at 1 when interrupted');
          } else {
            // If the testing environment doesn't support smooth scrolling, this
            // test will not interrupt the scroll, and we can simply assert that
            // the scroll ended at 200.
            assert_equals(scroller.scrollTop, 200,
                'Scroll should end at 200 if not interrupted');
          }
          resolve();
        } catch(e) {
          reject(e);
        }
      };
      scroller.onscroll = (event) => {
        if (scroller.scrollTop > 1 && scroller.scrollTop < 200) {
          // Interrupt the smooth scroll.
          scroller.scrollTop = 1;
          interrupted = true;
        }
      };
      scroller.scrollTop = 200;
    });
  }, 'scrollTop should be updated after a mid-scroll scrollTop change');
</script>