| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSSOM View - Smooth scrollIntoView + smooth scroll to fragment</title> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/dom/events/scrolling/scroll_support.js"></script> |
| </head> |
| <body> |
| <style> |
| iframe { |
| width: 100vw; |
| height: 100vh; |
| } |
| </style> |
| <script> |
| let frame = null; |
| async function test_smooth_scrollintoview_with_smooth_fragment() { |
| return new Promise((resolve) => { |
| window.addEventListener("message", (evt) => { |
| assert_equals(evt.data, "ready"); |
| |
| // Check that the fragment scroll completed. |
| const fragment_scroll_container = |
| frame.contentDocument.getElementById("fragment_scroll_container"); |
| const fragment_scroll_target = |
| frame.contentDocument.getElementById("fragment_scroll_target"); |
| assert_approx_equals(fragment_scroll_container.scrollTop, |
| fragment_scroll_target.offsetTop, 1, |
| "scroll to fragment was completed"); |
| |
| // Check that the scrollIntoView completed. |
| const scrollintoview_container = |
| frame.contentDocument.getElementById("scrollintoview_container"); |
| const scrollintoview_target = |
| frame.contentDocument.getElementById("scrollintoview_target"); |
| assert_approx_equals(scrollintoview_container.scrollTop, |
| scrollintoview_target.offsetTop, 1, |
| "scrollIntoView was completed"); |
| |
| resolve(); |
| }); |
| }); |
| } |
| |
| promise_test(async (t) => { |
| frame = document.createElement("iframe"); |
| let test_complete_promise = |
| test_smooth_scrollintoview_with_smooth_fragment(); |
| frame.src = |
| "smooth-scrollIntoView-with-smooth-fragment-scroll-iframe.html" + |
| "#fragment_scroll_target"; |
| document.documentElement.appendChild(frame); |
| await test_complete_promise; |
| frame.src = ""; |
| frame.remove(); |
| }, "Smooth scroll to hash fragment (on pageload) alongside smooth " + |
| "scrollIntoView runs to completion."); |
| |
| promise_test(async (t) => { |
| frame = document.createElement("iframe"); |
| const iframe_load_promise = new Promise((resolve) => { |
| frame.addEventListener("load", resolve); |
| }); |
| const test_complete_promise = |
| test_smooth_scrollintoview_with_smooth_fragment(); |
| frame.src = |
| "smooth-scrollIntoView-with-smooth-fragment-scroll-iframe.html"; |
| document.documentElement.appendChild(frame); |
| await iframe_load_promise; |
| const link = frame.contentDocument.getElementById("fragment_link"); |
| link.click(); |
| await test_complete_promise; |
| frame.src = ""; |
| frame.remove(); |
| }, "Smooth scroll to hash fragment (on click) alongside smooth " + |
| "scrollIntoView runs to completion."); |
| </script> |
| </body> |
