smooth-scrollIntoView-with-smooth-fragment-scroll.html (3157B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSSOM View - Smooth scrollIntoView + smooth scroll to fragment</title> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/dom/events/scrolling/scroll_support.js"></script> 9 </head> 10 <body> 11 <style> 12 iframe { 13 width: 100vw; 14 height: 100vh; 15 } 16 </style> 17 <script> 18 let frame = null; 19 async function test_smooth_scrollintoview_with_smooth_fragment() { 20 return new Promise((resolve) => { 21 window.addEventListener("message", (evt) => { 22 assert_equals(evt.data, "ready"); 23 24 // Check that the fragment scroll completed. 25 const fragment_scroll_container = 26 frame.contentDocument.getElementById("fragment_scroll_container"); 27 const fragment_scroll_target = 28 frame.contentDocument.getElementById("fragment_scroll_target"); 29 assert_approx_equals(fragment_scroll_container.scrollTop, 30 fragment_scroll_target.offsetTop, 1, 31 "scroll to fragment was completed"); 32 33 // Check that the scrollIntoView completed. 34 const scrollintoview_container = 35 frame.contentDocument.getElementById("scrollintoview_container"); 36 const scrollintoview_target = 37 frame.contentDocument.getElementById("scrollintoview_target"); 38 assert_approx_equals(scrollintoview_container.scrollTop, 39 scrollintoview_target.offsetTop, 1, 40 "scrollIntoView was completed"); 41 42 resolve(); 43 }); 44 }); 45 } 46 47 promise_test(async (t) => { 48 frame = document.createElement("iframe"); 49 let test_complete_promise = 50 test_smooth_scrollintoview_with_smooth_fragment(); 51 frame.src = 52 "smooth-scrollIntoView-with-smooth-fragment-scroll-iframe.html" + 53 "#fragment_scroll_target"; 54 document.documentElement.appendChild(frame); 55 await test_complete_promise; 56 frame.src = ""; 57 frame.remove(); 58 }, "Smooth scroll to hash fragment (on pageload) alongside smooth " + 59 "scrollIntoView runs to completion."); 60 61 promise_test(async (t) => { 62 frame = document.createElement("iframe"); 63 const iframe_load_promise = new Promise((resolve) => { 64 frame.addEventListener("load", resolve); 65 }); 66 const test_complete_promise = 67 test_smooth_scrollintoview_with_smooth_fragment(); 68 frame.src = 69 "smooth-scrollIntoView-with-smooth-fragment-scroll-iframe.html"; 70 document.documentElement.appendChild(frame); 71 await iframe_load_promise; 72 const link = frame.contentDocument.getElementById("fragment_link"); 73 link.click(); 74 await test_complete_promise; 75 frame.src = ""; 76 frame.remove(); 77 }, "Smooth scroll to hash fragment (on click) alongside smooth " + 78 "scrollIntoView runs to completion."); 79 </script> 80 </body>