1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!doctype html>
<meta charset=utf-8>
<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1738781">
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6787">
<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>
|
