scroll-behavior-smooth-navigation.html (3826B)
1 <!DOCTYPE html> 2 <title>cssom-view - scroll-behavior: smooth</title> 3 <meta name="timeout" content="long"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#smooth-scrolling"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/dom/events/scrolling/scroll_support.js"></script> 8 <style> 9 .filler { height: 10000px } 10 11 .smooth { 12 scroll-behavior: smooth; 13 } 14 15 #scrollable { 16 overflow: scroll; 17 width: 100px; 18 height: 100px; 19 } 20 </style> 21 <div id="testContainer"> 22 <div id="scrollable"> 23 <div class="filler"></div> 24 </div> 25 <div class="filler"></div> 26 </div> 27 <script> 28 promise_test(async () => { 29 await waitForCompositorReady(); 30 }, "Make sure the page is ready for animation."); 31 32 var instantHistoryNavigationTest = 33 async_test("Instant scrolling while doing history navigation."); 34 var smoothHistoryNavigationTest = 35 async_test("Smooth scrolling while doing history navigation."); 36 37 function instant() { 38 document.documentElement.className = ""; 39 document.body.className = ""; 40 window.scrollTo(0, 0); 41 var p = document.createElement("pre"); 42 p.textContent = new Array(1000).join("newline\n"); 43 var a = document.createElement("a"); 44 a.href = "#"; 45 a.name = "foo"; 46 a.textContent = "foo"; 47 p.appendChild(a); 48 document.body.appendChild(p); 49 window.onhashchange = function() { 50 window.onhashchange = function() { 51 instantHistoryNavigationTest.step(function() { 52 assert_equals(location.hash, "", "Shouldn't be scrolled to a fragment."); 53 assert_equals(window.scrollY, 0, "Shouldn't be scrolled back to top yet."); 54 }); 55 p.remove(); 56 instantHistoryNavigationTest.done(); 57 smooth(); 58 } 59 60 instantHistoryNavigationTest.step(function() { 61 assert_equals(location.hash, "#foo", "Should be scrolled to a fragment."); 62 assert_not_equals(window.scrollY, 0, "Shouldn't be scrolled to top anymore."); 63 }); 64 history.back(); 65 } 66 67 instantHistoryNavigationTest.step(function() { 68 assert_equals(window.scrollY, 0, "Should be scrolled to top."); 69 assert_equals(location.hash, "", "Shouldn't be scrolled to a fragment."); 70 }); 71 location.hash = "foo"; 72 }; 73 74 function smooth() { 75 document.documentElement.className = ""; 76 document.body.className = ""; 77 window.scrollTo(0, 0); 78 var p = document.createElement("pre"); 79 p.textContent = new Array(1000).join("newline\n"); 80 var a = document.createElement("a"); 81 a.href = "#"; 82 a.name = "bar"; 83 a.textContent = "bar"; 84 p.appendChild(a); 85 document.body.appendChild(p); 86 window.onhashchange = function() { 87 window.onhashchange = function() { 88 smoothHistoryNavigationTest.step(function() { 89 assert_equals(location.hash, "", "Shouldn't be scrolled to a fragment."); 90 assert_not_equals(window.scrollY, 0, "Shouldn't be scrolled back to top yet."); 91 }); 92 p.remove(); 93 smoothHistoryNavigationTest.done(); 94 } 95 96 smoothHistoryNavigationTest.step(function() { 97 assert_equals(location.hash, "#bar", "Should be scrolled to a fragment."); 98 assert_not_equals(window.scrollY, 0, "Shouldn't be scrolled to top anymore."); 99 }); 100 history.back(); 101 } 102 103 smoothHistoryNavigationTest.step(function() { 104 assert_equals(window.scrollY, 0, "Should be scrolled to top."); 105 assert_equals(location.hash, "", "Shouldn't be scrolled to a fragment."); 106 }); 107 location.hash = "bar"; 108 document.documentElement.className = "smooth"; 109 }; 110 111 testContainer.style.display = "none"; 112 113 // Setting location.hash while loading results in a replace load, which we don't want. 114 window.onload = () => { 115 step_timeout(instant, 0); 116 } 117 </script>