scrollIntoView-smooth.html (4002B)
1 <!DOCTYPE HTML> 2 <!-- meta name="viewport" content="width=device-width,initial-scale=1" --> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/dom/events/scrolling/scroll_support.js"></script> 6 <title>Check End Position of smooth scrollIntoView</title> 7 <div id="container" style="height: 2500px; width: 2500px;"> 8 <div id="content" style="height: 500px; width: 500px;margin-left: 1000px; margin-right: 1000px; margin-top: 1000px;margin-bottom: 1000px;background-color: red"> 9 </div> 10 <div id="shadow"></div> 11 </div> 12 <script> 13 var content_height = 500; 14 var content_width = 500; 15 var window_height = document.documentElement.clientHeight; 16 var window_width = document.documentElement.clientWidth; 17 var content = document.getElementById("content"); 18 add_completion_callback(() => document.getElementById("container").remove()); 19 20 // When testing manually, we need an additional frame at beginning 21 // to trigger the effect. 22 requestAnimationFrame(() => { 23 promise_test(async (t) => { 24 await waitForScrollReset(t, document.scrollingElement); 25 var expected_x = content.offsetLeft + content_width - window_width; 26 var expected_y = content.offsetTop + content_height - window_height; 27 assert_not_equals(window.scrollX, expected_x, "scrollX"); 28 assert_not_equals(window.scrollY, expected_y, "scrollY"); 29 const scrollend_promise = waitForScrollEndFallbackToDelayWithoutScrollEvent(document); 30 content.scrollIntoView({behavior: "smooth", block: "nearest", inline: 31 "nearest"}); 32 await scrollend_promise; 33 assert_approx_equals(window.scrollX, expected_x, 1, "scrollX"); 34 assert_approx_equals(window.scrollY, expected_y, 1, "scrollY"); 35 }, "Smooth scrollIntoView should scroll the element to the 'nearest' position"); 36 37 promise_test(async (t) => { 38 await waitForScrollReset(t, document.scrollingElement); 39 var expected_x = content.offsetLeft; 40 var expected_y = content.offsetTop; 41 assert_not_equals(window.scrollX, expected_x, "scrollX"); 42 assert_not_equals(window.scrollY, expected_y, "scrollY"); 43 const scrollend_promise = waitForScrollEndFallbackToDelayWithoutScrollEvent(document); 44 content.scrollIntoView({behavior: "smooth", block: "start", inline: 45 "start"}); 46 await scrollend_promise; 47 assert_approx_equals(window.scrollX, expected_x, 1, "scrollX"); 48 assert_approx_equals(window.scrollY, expected_y, 1, "scrollY"); 49 }, "Smooth scrollIntoView should scroll the element to the 'start' position"); 50 51 promise_test(async (t) => { 52 await waitForScrollReset(t, document.scrollingElement); 53 var expected_x = content.offsetLeft + (content_width - window_width) / 2; 54 var expected_y = content.offsetTop + (content_height - window_height) / 2; 55 assert_not_equals(window.scrollX, expected_x, "scrollX"); 56 assert_not_equals(window.scrollY, expected_y, "scrollY"); 57 const scrollend_promise = waitForScrollEndFallbackToDelayWithoutScrollEvent(document); 58 content.scrollIntoView({behavior: "smooth", block: "center", inline: 59 "center"}); 60 await scrollend_promise; 61 assert_approx_equals(window.scrollX, expected_x, 1, "scrollX"); 62 assert_approx_equals(window.scrollY, expected_y, 1, "scrollY"); 63 }, "Smooth scrollIntoView should scroll the element to the 'center' position"); 64 65 promise_test(async (t) => { 66 await waitForScrollReset(t, document.scrollingElement); 67 var expected_x = content.offsetLeft + content_width - window_width; 68 var expected_y = content.offsetTop + content_height - window_height; 69 assert_not_equals(window.scrollX, expected_x, "scrollX"); 70 assert_not_equals(window.scrollY, expected_y, "scrollY"); 71 const scrollend_promise = waitForScrollEndFallbackToDelayWithoutScrollEvent(document); 72 content.scrollIntoView({behavior: "smooth", block: "end", inline: 73 "end"}); 74 await scrollend_promise; 75 assert_approx_equals(window.scrollX, expected_x, 1, "scrollX"); 76 assert_approx_equals(window.scrollY, expected_y, 1, "scrollY"); 77 }, "Smooth scrollIntoView should scroll the element to the 'end' position"); 78 79 }); 80 </script>