testing/web-platform/tests/css/cssom-view/scroll-behavior-smooth.html
author Duncan McIntosh <dmcintosh@mozilla.com>
Wed, 09 Jul 2025 19:42:02 +0000 (2 hours ago)
changeset 795924 9ccc6a2267cbf69c621fec973bd28573c2a45a1f
parent 752838 3f775b657457e8dcaabe3156b67e6af5fb3282c1
permissions -rw-r--r--
Bug 1966586 - Reuse other browser windows when opening _blank links in Taskbar Tabs windows. r=nrishel This doesn't affect other tab additions, nor does it stop the tab bar from appearing altogether. The idea is that _if_ another tab is somehow made, the user should see it; but we should not create new tabs if we can avoid it. This also adds tests for opening URIs in popups and taskbar tabs to make it less likely that this breaks in future. Differential Revision: https://phabricator.services.mozilla.com/D253726
<!DOCTYPE html>
<title>cssom-view - scroll-behavior: smooth</title>
<meta name="timeout" content="long">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#smooth-scrolling">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<style>
  .filler { height: 10000px }

  .smooth {
    scroll-behavior: smooth;
  }

  #scrollable {
    overflow: scroll;
    width: 100px;
    height: 100px;
  }
</style>
<div id="testContainer">
  <div id="scrollable">
    <div class="filler"></div>
  </div>
  <div class="filler"></div>
</div>
<script>
  promise_test(async () => {
    await waitForCompositorReady();
  }, "Make sure the page is ready for animation.");

  test(() => {
    scrollable.scrollTo(0, 5000);
    assert_equals(scrollable.scrollTop, 5000, "Initially scrolls instantly");
    scrollable.scrollTo(0, 0);
    scrollable.className = "smooth";
    scrollable.scrollTo(0, 5000);
    assert_less_than(scrollable.scrollTop, 5000, "scroll-behavior:smooth should not scroll instantly");
    scrollable.className = "";
    scrollable.scrollTo(0, 0);
  }, "scroll-behavior: smooth on DIV element");

  test(() => {
    window.scrollTo(0, 5000);
    assert_equals(window.scrollY, 5000, "Initially scrolls instantly");
    window.scrollTo(0, 0);
    document.documentElement.className = "smooth";
    assert_less_than(window.scrollY, 5000, "scroll-behavior:smooth should not scroll instantly");
    document.documentElement.className = "";
    window.scrollTo(0, 0);
  }, "HTML element scroll-behavior should propagate to viewport");

  test(() => {
    window.scrollTo(0, 5000);
    assert_equals(window.scrollY, 5000, "Initially scrolls instantly");
    window.scrollTo(0, 0);
    document.body.className = "smooth";
    window.scrollTo(0, 5000);
    assert_equals(window.scrollY, 5000, "scroll-behavior:smooth on BODY should scroll viewport instantly");
    document.body.className = "";
    window.scrollTo(0, 0);
  }, "BODY element scroll-behavior should not propagate to viewport");

  testContainer.style.display = "none";
</script>