80 lines
No EOL
3.1 KiB
HTML
80 lines
No EOL
3.1 KiB
HTML
<!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> |