tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

scroll-behavior-smooth.html (2308B)

      1 <!DOCTYPE html>
      2 <title>cssom-view - scroll-behavior: smooth</title>
      3 <meta name="timeout" content="long">
      4 <meta name="viewport" content="width=device-width,initial-scale=1">
      5 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
      6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#smooth-scrolling">
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="/dom/events/scrolling/scroll_support.js"></script>
     10 <style>
     11  .filler { height: 10000px }
     12 
     13  .smooth {
     14    scroll-behavior: smooth;
     15  }
     16 
     17  #scrollable {
     18    overflow: scroll;
     19    width: 100px;
     20    height: 100px;
     21  }
     22 </style>
     23 <div id="testContainer">
     24  <div id="scrollable">
     25    <div class="filler"></div>
     26  </div>
     27  <div class="filler"></div>
     28 </div>
     29 <script>
     30  promise_test(async () => {
     31    await waitForCompositorReady();
     32  }, "Make sure the page is ready for animation.");
     33 
     34  test(() => {
     35    scrollable.scrollTo(0, 5000);
     36    assert_equals(scrollable.scrollTop, 5000, "Initially scrolls instantly");
     37    scrollable.scrollTo(0, 0);
     38    scrollable.className = "smooth";
     39    scrollable.scrollTo(0, 5000);
     40    assert_less_than(scrollable.scrollTop, 5000, "scroll-behavior:smooth should not scroll instantly");
     41    scrollable.className = "";
     42    scrollable.scrollTo(0, 0);
     43  }, "scroll-behavior: smooth on DIV element");
     44 
     45  test(() => {
     46    window.scrollTo(0, 5000);
     47    assert_equals(window.scrollY, 5000, "Initially scrolls instantly");
     48    window.scrollTo(0, 0);
     49    document.documentElement.className = "smooth";
     50    assert_less_than(window.scrollY, 5000, "scroll-behavior:smooth should not scroll instantly");
     51    document.documentElement.className = "";
     52    window.scrollTo(0, 0);
     53  }, "HTML element scroll-behavior should propagate to viewport");
     54 
     55  test(() => {
     56    window.scrollTo(0, 5000);
     57    assert_equals(window.scrollY, 5000, "Initially scrolls instantly");
     58    window.scrollTo(0, 0);
     59    document.body.className = "smooth";
     60    window.scrollTo(0, 5000);
     61    assert_equals(window.scrollY, 5000, "scroll-behavior:smooth on BODY should scroll viewport instantly");
     62    document.body.className = "";
     63    window.scrollTo(0, 0);
     64  }, "BODY element scroll-behavior should not propagate to viewport");
     65 
     66  testContainer.style.display = "none";
     67 </script>