-
Notifications
You must be signed in to change notification settings - Fork 54
/
scroll-timeline-writing-modes.https.html
169 lines (142 loc) · 6.1 KB
/
scroll-timeline-writing-modes.https.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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<title>Tests that ScrollTimeline works properly with writing mode and directionality</title>
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="common.js"></script>
<script>
// Creates a DOM structure like:
// - container
// - box {100x100}
// - scroller {100x100, writing-mode, direction}
// - contents
function createTestDOM(x_scroll_axis, writing_mode, direction) {
const elements = {};
elements.container = document.createElement('div');
elements.box = document.createElement('div');
elements.box.style.height = '100px';
elements.box.style.width = '100px';
elements.scroller = document.createElement('div');
elements.scroller.style.height = '100px';
elements.scroller.style.width = '100px';
if (x_scroll_axis)
elements.scroller.style.overflowX = 'scroll';
else
elements.scroller.style.overflowY = 'scroll';
elements.scroller.style.direction = direction;
elements.scroller.style.writingMode = writing_mode;
// Callers don't need access to this.
const contents = document.createElement('div');
contents.style.height = x_scroll_axis ? '100%' : '1000px';
contents.style.width = x_scroll_axis ? '1000px' : '100%';
elements.scroller.appendChild(contents);
elements.container.appendChild(elements.box);
elements.container.appendChild(elements.scroller);
document.body.appendChild(elements.container);
return elements;
}
function createAndPlayTestAnimation(elements, timeline_orientation) {
const effect = new KeyframeEffect(
elements.box,
[{transform: 'translateY(0)'}, {transform: 'translateY(200px)'}], {
duration: 1000,
});
const timeline = new ScrollTimeline({
scrollSource: elements.scroller,
timeRange: 1000,
orientation: timeline_orientation
});
const animation = new WorkletAnimation('passthrough', effect, timeline);
animation.play();
return animation;
}
setup(setupAndRegisterTests, {explicit_done: true});
function setupAndRegisterTests() {
registerPassthroughAnimator().then(() => {
// Note that block horizontal-tb is tested implicitly in the basic
// ScrollTimeline tests (as it is the default).
async_test(
block_vertical_lr,
'A block ScrollTimeline should produce the correct current time for vertical-lr');
async_test(
block_vertical_rl,
'A block ScrollTimeline should produce the correct current time for vertical-rl');
// Again, inline for horizontal-tb and direction: ltr is the default
// inline mode and so is tested elsewhere.
async_test(
inline_horizontal_tb_rtl,
'An inline ScrollTimeline should produce the correct current time for horizontal-tb and direction: rtl');
async_test(
inline_vertical_writing_mode_ltr,
'An inline ScrollTimeline should produce the correct current time for vertical writing mode');
async_test(
inline_vertical_writing_mode_rtl,
'An inline ScrollTimeline should produce the correct current time for vertical writing mode and direction: rtl');
done();
});
}
function block_vertical_lr(t) {
const elements = createTestDOM(true, 'vertical-lr', 'ltr');
const animation = createAndPlayTestAnimation(elements, 'block');
// Move the scroller to the 25% point.
const maxScroll =
elements.scroller.scrollWidth - elements.scroller.clientWidth;
elements.scroller.scrollLeft = 0.25 * maxScroll;
waitForNotNullLocalTime(animation).then(t.step_func_done(() => {
assert_equals(
getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)');
}));
}
function block_vertical_rl(t) {
const elements = createTestDOM(true, 'vertical-rl', 'ltr');
const animation = createAndPlayTestAnimation(elements, 'block');
// Move the scroller to the left 25% point, since it is vertical-rl,
// i.e leftwards overflow direction, scrollLeft is -25% point.
const maxScroll =
elements.scroller.scrollWidth - elements.scroller.clientWidth;
elements.scroller.scrollLeft = -0.25 * maxScroll;
waitForNotNullLocalTime(animation).then(t.step_func_done(() => {
assert_equals(
getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)');
}));
}
function inline_horizontal_tb_rtl(t) {
const elements = createTestDOM(true, 'horizontal-tb', 'rtl');
const animation = createAndPlayTestAnimation(elements, 'inline');
// Move the scroller to the left 25% point, since it is direction: rtl,
// i.e leftwards overflow direction, scrollLeft is -25% point.
const maxScroll =
elements.scroller.scrollWidth - elements.scroller.clientWidth;
elements.scroller.scrollLeft = -0.25 * maxScroll;
waitForNotNullLocalTime(animation).then(t.step_func_done(() => {
assert_equals(
getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)');
}));
}
function inline_vertical_writing_mode_ltr(t) {
const elements = createTestDOM(false, 'vertical-lr', 'ltr');
const animation = createAndPlayTestAnimation(elements, 'inline');
// Move the scroller to the 25% point.
const maxScroll =
elements.scroller.scrollHeight - elements.scroller.clientHeight;
elements.scroller.scrollTop = 0.25 * maxScroll;
waitForNotNullLocalTime(animation).then(t.step_func_done(() => {
assert_equals(
getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)');
}));
}
function inline_vertical_writing_mode_rtl(t) {
const elements = createTestDOM(false, 'vertical-lr', 'rtl');
const animation = createAndPlayTestAnimation(elements, 'inline');
// Move the scroller to the top 25% point, since it is a vertical-lr writing mode
// and direction: rtl, i.e upwards overflow direction, scrollTop is -25% point.
const maxScroll =
elements.scroller.scrollHeight - elements.scroller.clientHeight;
elements.scroller.scrollTop = -0.25 * maxScroll;
waitForNotNullLocalTime(animation).then(t.step_func_done(() => {
assert_equals(
getComputedStyle(elements.box).transform, 'matrix(1, 0, 0, 1, 0, 50)');
}));
}
</script>