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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-buttons">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../support/common.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<style>
.container {
position: relative;
height: 150px;
/* Ensure width is sufficiently different than height to ensure that
* the directional scroll is using the scrollport size in the associated
* direction. */
width: 400px;
position: relative;
}
.scroller {
height: 100%;
overflow: auto;
position: relative;
counter-reset: page;
}
.scroller.right {
/* Flow content horizontally. */
white-space: nowrap;
}
.scroller::scroll-button(*) {
width: 100px;
height: 50px;
background: green;
position: absolute;
/* Center the button within the scroller so that the call to
* test_driver.click(scroller) hits the button. */
left: calc(50% - 50px);
top: calc(50% - 25px);
}
/* Create scroll buttons for test scrollers. */
.scroller.test.down::scroll-button(down) {
content: "";
}
.scroller.test.right::scroll-button(right) {
content: "";
}
.page {
box-sizing: border-box;
height: 100%;
}
.scroller.right .page {
/* Flow horizontally in horizontal scroller */
display: inline-block;
width: 100%;
}
/* Make pages visible for manual testing. */
.page:nth-child(2*n) {
background: lightgray;
}
.page::before {
counter-increment: page;
content: "Page " counter(page);
}
</style>
<div class="container">
<div class="scroller test down" id="scroller1">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>
</div>
<div class="container">
<div class="scroller test right" id="scroller2">
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
</div>
</div>
<script>
async function clickButtonAndWaitForScroll(scroller) {
const scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller);
let wait_click = new Promise(resolve => scroller.addEventListener("click", resolve, {once: true}));
await test_driver.click(scroller);
await wait_click;
await scrollEndPromise;
}
promise_test(async () => {
const scroller = document.querySelector('.scroller.test.down');
await clickButtonAndWaitForScroll(scroller);
// Activating the scroll button scrolls the originating element by
// one "page" in the associated direction. For most implementations this is
// 85% of the optimal viewing region. We could consider issuing page down
// and asserting the same distance here.
const pageHeight = scroller.clientHeight;
assert_greater_than(scroller.scrollTop, 0.5 * pageHeight);
assert_less_than_equal(scroller.scrollTop, pageHeight);
}, "::scroll-button(down) scrolls about a page when clicked");
promise_test(async () => {
const scroller = document.querySelector('.scroller.test.right');
await clickButtonAndWaitForScroll(scroller);
// Activating the scroll button scrolls the originating element by
// one "page" in the associated direction. For most implementations this is
// 85% of the optimal viewing region in that dimension, however the
// proportion is not precisely specified nor do we have a "Page Right" key
// we could compare with so we assert it is in the range
// [0.5, 1] * scrollport width.
const pageWidth = scroller.clientWidth;
assert_greater_than(scroller.scrollLeft, 0.5 * pageWidth);
assert_less_than_equal(scroller.scrollLeft, pageWidth);
}, "::scroll-button(right) scrolls about a page when clicked");
</script>
|
