-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathscroll-behavior-scrollintoview-nested.html
88 lines (87 loc) · 3.99 KB
/
scroll-behavior-scrollintoview-nested.html
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<title>Testing scrollOptions' behavior with scrollIntoView for nested scrolling nodes</title>
<meta name="timeout" content="long"/>
<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-box">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/scroll-behavior.js"></script>
<style>
.scrollable {
overflow: auto;
height: 200px;
}
.smoothBehavior {
scroll-behavior: smooth;
}
.gradient {
background: linear-gradient(135deg, red, green);
}
</style>
<div id="log">
</div>
<div>
<div class="scrollable smoothBehavior" style="width: 450px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable smoothBehavior" style="width: 400px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable" style="width: 350px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable" style="width: 300px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable smoothBehavior" style="width: 250px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div class="scrollable" style="width: 200px">
<div class="gradient" style="width: 100px; height: 500px;"></div>
<div id="elementToReveal" style="width: 10px; height: 10px; background: black;"></div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
<div class="gradient" style="width: 100px; height: 500px;"></div>
</div>
</div>
</div>
<script>
// The CSSOM-View spec and implementations follow different algorithms (scrolls performed in parallel, as inner-to-outer sequence or as outer-to-inner sequence).
// See https://github.com/w3c/csswg-drafts/issues/3127
promise_test(() => {
return new Promise(function(resolve, reject) {
var divs = document.querySelectorAll(".scrollable");
divs.forEach((scrollableDiv) => {
resetScroll(scrollableDiv);
});
elementToReveal.scrollIntoView({inline: "start", block: "start", behavior: "auto"});
var scrollTop = new Map();
var isSmooth = new Map();
divs.forEach((scrollableDiv) => {
scrollTop.set(scrollableDiv, scrollableDiv.scrollTop);
isSmooth.set(scrollableDiv, scrollableDiv.classList.contains("smoothBehavior"));
// If scroll operations are not performed in parallel, scroll boxes with instant behavior might also need to wait for their predecessors.
if (isSmooth.get(scrollableDiv))
assert_less_than(scrollTop.get(scrollableDiv), 500, "Element with smooth behavior should not scroll immediately");
});
observeScrolling(Array.from(divs), function(done) {
try {
divs.forEach((scrollableDiv) => {
assert_less_than_equal(scrollTop.get(scrollableDiv), scrollableDiv.scrollTop, "ScrollTop keeps increasing");
if (!isSmooth.get(scrollableDiv))
assert_any(assert_equals, scrollableDiv.scrollTop, [0, 500], "Element with instant behavior should jump to the final position");
if (done)
assert_equals(scrollableDiv.scrollTop, 500, "Final value of scrollTop");
scrollTop.set(scrollableDiv, scrollableDiv.scrollTop);
});
} catch(e) {
reject(e);
}
if (done)
resolve();
});
});
}, "scrollIntoView with nested elements with different scroll-behavior");
</script>