| <!DOCTYPE html> |
| <title>cssom-view - scroll-behavior: smooth</title> |
| <meta name="timeout" content="long"> |
| <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> |
| <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> |
| 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"); |
| |
| var instantHistoryNavigationTest = |
| async_test("Instant scrolling while doing history navigation."); |
| var smoothHistoryNavigationTest = |
| async_test("Smooth scrolling while doing history navigation."); |
| |
| function instant() { |
| document.documentElement.className = ""; |
| document.body.className = ""; |
| window.scrollTo(0, 0); |
| var p = document.createElement("pre"); |
| p.textContent = new Array(1000).join("newline\n"); |
| var a = document.createElement("a"); |
| a.href = "#"; |
| a.name = "foo"; |
| a.textContent = "foo"; |
| p.appendChild(a); |
| document.body.appendChild(p); |
| window.onhashchange = function() { |
| window.onhashchange = function() { |
| instantHistoryNavigationTest.step(function() { |
| assert_equals(location.hash, "", "Shouldn't be scrolled to a fragment."); |
| assert_equals(window.scrollY, 0, "Shouldn't be scrolled back to top yet."); |
| }); |
| p.remove(); |
| instantHistoryNavigationTest.done(); |
| smooth(); |
| } |
| |
| instantHistoryNavigationTest.step(function() { |
| assert_equals(location.hash, "#foo", "Should be scrolled to a fragment."); |
| assert_not_equals(window.scrollY, 0, "Shouldn't be scrolled to top anymore."); |
| }); |
| history.back(); |
| } |
| |
| instantHistoryNavigationTest.step(function() { |
| assert_equals(window.scrollY, 0, "Should be scrolled to top."); |
| assert_equals(location.hash, "", "Shouldn't be scrolled to a fragment."); |
| }); |
| location.hash = "foo"; |
| }; |
| instant(); |
| |
| function smooth() { |
| document.documentElement.className = ""; |
| document.body.className = ""; |
| window.scrollTo(0, 0); |
| var p = document.createElement("pre"); |
| p.textContent = new Array(1000).join("newline\n"); |
| var a = document.createElement("a"); |
| a.href = "#"; |
| a.name = "bar"; |
| a.textContent = "bar"; |
| p.appendChild(a); |
| document.body.appendChild(p); |
| window.onhashchange = function() { |
| window.onhashchange = function() { |
| smoothHistoryNavigationTest.step(function() { |
| assert_equals(location.hash, "", "Shouldn't be scrolled to a fragment."); |
| assert_not_equals(window.scrollY, 0, "Shouldn't be scrolled back to top yet."); |
| }); |
| p.remove(); |
| smoothHistoryNavigationTest.done(); |
| } |
| |
| smoothHistoryNavigationTest.step(function() { |
| assert_equals(location.hash, "#bar", "Should be scrolled to a fragment."); |
| assert_not_equals(window.scrollY, 0, "Shouldn't be scrolled to top anymore."); |
| }); |
| history.back(); |
| } |
| |
| smoothHistoryNavigationTest.step(function() { |
| assert_equals(window.scrollY, 0, "Should be scrolled to top."); |
| assert_equals(location.hash, "", "Shouldn't be scrolled to a fragment."); |
| }); |
| location.hash = "bar"; |
| document.documentElement.className = "smooth"; |
| }; |
| |
| testContainer.style.display = "none"; |
| </script> |
