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
|
<!DOCTYPE html>
<title>Smooth scrolling of overflow: hidden should be interruptible</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#concept-smooth-scroll">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<style>
#scroller {
overflow-y: hidden;
width: 100px;
height: 100px;
scroll-behavior: smooth;
}
.green {
width: 100px;
height: 100px;
background: green;
}
.red {
width: 100px;
height: 100px;
background: red;
}
</style>
<div id="scroller">
<div class="green"></div>
<div class="red"></div>
<div class="green"></div>
</div>
<script>
promise_test(async () => {
await waitForCompositorReady();
}, 'Make sure the page is ready for animation.');
let interrupted = false;
promise_test(() => {
return new Promise(function(resolve, reject) {
scroller.onscrollend = (event) => {
try {
if (interrupted) {
assert_equals(scroller.scrollTop, 1,
'Scroll should end at 1 when interrupted');
} else {
// If the testing environment doesn't support smooth scrolling, this
// test will not interrupt the scroll, and we can simply assert that
// the scroll ended at 200.
assert_equals(scroller.scrollTop, 200,
'Scroll should end at 200 if not interrupted');
}
resolve();
} catch(e) {
reject(e);
}
};
scroller.onscroll = (event) => {
if (scroller.scrollTop > 1 && scroller.scrollTop < 200) {
// Interrupt the smooth scroll.
scroller.scrollTop = 1;
interrupted = true;
}
};
scroller.scrollTop = 200;
});
}, 'scrollTop should be updated after a mid-scroll scrollTop change');
</script>
|
