Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-anchoring/dirty-contents-reselect-anchor.tentative.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.padding {
background: grey;
border: 1px dashed black;
margin: 5px;
height: 200vh;
}
</style>
<div id="content"></div>
<script>
const content = document.getElementById("content");
const t = async_test("Scroll anchor is re-selected after adjustment if there are dirty descendants at selection time");
function replaceAllContent() {
content.innerHTML = `
<div class="padding"></div>
<button id="target">Scroll target</button>
<div class="padding"></div>
`;
}
function insertContent() {
let inserted = document.createElement("div");
inserted.className = "padding inserted";
content.insertBefore(inserted, content.firstChild);
}
// Set the content, and scroll #target into view.
replaceAllContent();
document.getElementById("target").scrollIntoView();
t.step(function() {
assert_not_equals(window.scrollY, 0, "Should've scrolled");
});
// Save the target scroll position, which shouldn't change.
const oldTargetTop = document.getElementById("target").getBoundingClientRect().top;
// Replace all the content, then insert content at the top afterwards.
replaceAllContent();
requestAnimationFrame(() => requestAnimationFrame(t.step_func_done(function() {
insertContent();
const newTargetTop = document.getElementById("target").getBoundingClientRect().top;
assert_equals(oldTargetTop, newTargetTop, "Scroll position should've been preserved");
})));
</script>
<style>