Google Git
Sign in
chromium / external / w3c / web-platform-tests / 167fc7a89f441e9548454d54f260a6d19cf973b6 / . / scroll-animations / current-time-writing-modes.html
blob: 5a53d43f037f9bda10f25e906af98518d554e084 [file] [log] [blame]
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]1<!DOCTYPE html>
2<meta charset="utf-8">
3<title>ScrollTimeline current time algorithm - interaction with writing modes</title>
4<link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm">
5<script src="/resources/testharness.js"></script>
6<script src="/resources/testharnessreport.js"></script>
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]7<script src="/web-animations/testcommon.js"></script>
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]8<script src="./resources/scrolltimeline-utils.js"></script>
9
10<body></body>
11
12<script>
13'use strict';
14
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]15promise_test(async t => {
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]16 const scrollerOverrides = new Map([['direction', 'rtl']]);
17 const scroller = setupScrollTimelineTest(scrollerOverrides);
18
19 // Set the timeRange such that currentTime maps directly to the value
20 // scrolled. The contents and scroller are square, so it suffices to compute
21 // one edge and use it for all the timelines.
22 const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
23
24 const blockScrollTimeline = new ScrollTimeline(
25 {scrollSource: scroller, timeRange: scrollerSize, orientation: 'block'});
26 const inlineScrollTimeline = new ScrollTimeline(
27 {scrollSource: scroller, timeRange: scrollerSize, orientation: 'inline'});
28 const horizontalScrollTimeline = new ScrollTimeline({
29 scrollSource: scroller,
30 timeRange: scrollerSize,
31 orientation: 'horizontal'
32 });
33 const verticalScrollTimeline = new ScrollTimeline({
34 scrollSource: scroller,
35 timeRange: scrollerSize,
36 orientation: 'vertical'
37 });
38
39 // Unscrolled, all timelines should read a current time of 0 even though the
40 // X-axis will have started at the right hand side for rtl.
41 assert_equals(
42 blockScrollTimeline.currentTime, 0, 'Unscrolled block timeline');
43 assert_equals(
44 inlineScrollTimeline.currentTime, 0, 'Unscrolled inline timeline');
45 assert_equals(
46 horizontalScrollTimeline.currentTime, 0,
47 'Unscrolled horizontal timeline');
48 assert_equals(
49 verticalScrollTimeline.currentTime, 0, 'Unscrolled vertical timeline');
50
51 // The offset in the inline/horizontal direction should be inverted. The
52 // block/vertical direction should be unaffected.
53 scroller.scrollTop = 50;
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]54 scroller.scrollLeft = 75 - scrollerSize;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]55 // Wait for new animation frame which allows the timeline to compute new
56 // current time.
57 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]58
59 assert_equals(blockScrollTimeline.currentTime, 50, 'Scrolled block timeline');
60 assert_equals(
61 inlineScrollTimeline.currentTime, scrollerSize - 75,
62 'Scrolled inline timeline');
63 assert_equals(
64 horizontalScrollTimeline.currentTime, scrollerSize - 75,
65 'Scrolled horizontal timeline');
66 assert_equals(
67 verticalScrollTimeline.currentTime, 50, 'Scrolled vertical timeline');
68}, 'currentTime handles direction: rtl correctly');
69
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]70promise_test(async t => {
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]71 const scrollerOverrides = new Map([['writing-mode', 'vertical-rl']]);
72 const scroller = setupScrollTimelineTest(scrollerOverrides);
73
74 // Set the timeRange such that currentTime maps directly to the value
75 // scrolled. The contents and scroller are square, so it suffices to compute
76 // one edge and use it for all the timelines.
77 const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
78
79 const blockScrollTimeline = new ScrollTimeline(
80 {scrollSource: scroller, timeRange: scrollerSize, orientation: 'block'});
81 const inlineScrollTimeline = new ScrollTimeline(
82 {scrollSource: scroller, timeRange: scrollerSize, orientation: 'inline'});
83 const horizontalScrollTimeline = new ScrollTimeline({
84 scrollSource: scroller,
85 timeRange: scrollerSize,
86 orientation: 'horizontal'
87 });
88 const verticalScrollTimeline = new ScrollTimeline({
89 scrollSource: scroller,
90 timeRange: scrollerSize,
91 orientation: 'vertical'
92 });
93
94 // Unscrolled, all timelines should read a current time of 0 even though the
95 // X-axis will have started at the right hand side for vertical-rl.
96 assert_equals(
97 blockScrollTimeline.currentTime, 0, 'Unscrolled block timeline');
98 assert_equals(
99 inlineScrollTimeline.currentTime, 0, 'Unscrolled inline timeline');
100 assert_equals(
101 horizontalScrollTimeline.currentTime, 0,
102 'Unscrolled horizontal timeline');
103 assert_equals(
104 verticalScrollTimeline.currentTime, 0, 'Unscrolled vertical timeline');
105
106 // For vertical-rl, the X-axis starts on the right-hand-side and is the block
107 // axis. The Y-axis is normal but is the inline axis. For the
108 // horizontal/vertical cases, horizontal starts on the right-hand-side and
109 // vertical is normal.
110 scroller.scrollTop = 50;
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]111 scroller.scrollLeft = 75 - scrollerSize;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]112 // Wait for new animation frame which allows the timeline to compute new
113 // current time.
114 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]115
116 assert_equals(
117 blockScrollTimeline.currentTime, scrollerSize - 75,
118 'Scrolled block timeline');
119 assert_equals(
120 inlineScrollTimeline.currentTime, 50, 'SCrolled inline timeline');
121 assert_equals(
122 horizontalScrollTimeline.currentTime, scrollerSize - 75,
123 'Scrolled horizontal timeline');
124 assert_equals(
125 verticalScrollTimeline.currentTime, 50, 'Scrolled vertical timeline');
126}, 'currentTime handles writing-mode: vertical-rl correctly');
127
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]128promise_test(async t => {
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]129 const scrollerOverrides = new Map([['writing-mode', 'vertical-lr']]);
130 const scroller = setupScrollTimelineTest(scrollerOverrides);
131
132 // Set the timeRange such that currentTime maps directly to the value
133 // scrolled. The contents and scroller are square, so it suffices to compute
134 // one edge and use it for all the timelines.
135 const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
136
137 const blockScrollTimeline = new ScrollTimeline(
138 {scrollSource: scroller, timeRange: scrollerSize, orientation: 'block'});
139 const inlineScrollTimeline = new ScrollTimeline(
140 {scrollSource: scroller, timeRange: scrollerSize, orientation: 'inline'});
141 const horizontalScrollTimeline = new ScrollTimeline({
142 scrollSource: scroller,
143 timeRange: scrollerSize,
144 orientation: 'horizontal'
145 });
146 const verticalScrollTimeline = new ScrollTimeline({
147 scrollSource: scroller,
148 timeRange: scrollerSize,
149 orientation: 'vertical'
150 });
151
152 // Unscrolled, all timelines should read a current time of 0.
153 assert_equals(
154 blockScrollTimeline.currentTime, 0, 'Unscrolled block timeline');
155 assert_equals(
156 inlineScrollTimeline.currentTime, 0, 'Unscrolled inline timeline');
157 assert_equals(
158 horizontalScrollTimeline.currentTime, 0,
159 'Unscrolled horizontal timeline');
160 assert_equals(
161 verticalScrollTimeline.currentTime, 0, 'Unscrolled vertical timeline');
162
163 // For vertical-lr, both axes start at their 'normal' positions but the X-axis
164 // is the block direction and the Y-axis is the inline direction. This does
165 // not affect horizontal/vertical.
166 scroller.scrollTop = 50;
167 scroller.scrollLeft = 75;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]168 // Wait for new animation frame which allows the timeline to compute new
169 // current time.
170 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]171
172 assert_equals(blockScrollTimeline.currentTime, 75, 'Scrolled block timeline');
173 assert_equals(
174 inlineScrollTimeline.currentTime, 50, 'Scrolled inline timeline');
175 assert_equals(
176 horizontalScrollTimeline.currentTime, 75, 'Scrolled horizontal timeline');
177 assert_equals(
178 verticalScrollTimeline.currentTime, 50, 'Scrolled vertical timeline');
179}, 'currentTime handles writing-mode: vertical-lr correctly');
180
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]181promise_test(async t => {
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]182 const scrollerOverrides = new Map([['direction', 'rtl']]);
183 const scroller = setupScrollTimelineTest(scrollerOverrides);
184 // Set the timeRange such that currentTime maps directly to the value
185 // scrolled. The contents and scroller are square, so it suffices to compute
186 // one edge and use it for all the timelines.
187 const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
188
189 const lengthScrollTimeline = new ScrollTimeline({
190 scrollSource: scroller,
191 timeRange: scrollerSize,
192 orientation: 'horizontal',
193 startScrollOffset: '20px'
194 });
195 const percentageScrollTimeline = new ScrollTimeline({
196 scrollSource: scroller,
197 timeRange: scrollerSize,
198 orientation: 'horizontal',
199 startScrollOffset: '20%'
200 });
201 const calcScrollTimeline = new ScrollTimeline({
202 scrollSource: scroller,
203 timeRange: scrollerSize,
204 orientation: 'horizontal',
205 startScrollOffset: 'calc(20% - 5px)'
206 });
207
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]208 // Unscrolled, all timelines should read a current time of 0, since
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]209 // the current offset (0) will be less than the startScrollOffset.
210 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]211 lengthScrollTimeline.currentTime, 0,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]212 'Unscrolled length-based timeline');
213 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]214 percentageScrollTimeline.currentTime, 0,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]215 'Unscrolled percentage-based timeline');
216 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]217 calcScrollTimeline.currentTime, 0, 'Unscrolled calc-based timeline');
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]218
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]219 // With direction rtl offsets are inverted, such that scrollLeft == 0
220 // is the 'zero' point for currentTime. However the
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]221 // startScrollOffset is an absolute distance along the offset, so doesn't
222 // need adjusting.
223
224 // Check the length-based ScrollTimeline.
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]225 scroller.scrollLeft = 0;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]226 // Wait for new animation frame which allows the timeline to compute new
227 // current time.
228 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]229 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]230 lengthScrollTimeline.currentTime, 0,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]231 'Length-based timeline before the startScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]232 scroller.scrollLeft = -20;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]233 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]234 assert_equals(
235 lengthScrollTimeline.currentTime, 0,
236 'Length-based timeline at the startScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]237 scroller.scrollLeft = -50;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]238 await waitForNextFrame();
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]239 assert_times_equal(
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]240 lengthScrollTimeline.currentTime,
241 calculateCurrentTime(50, 20, scrollerSize, scrollerSize),
242 'Length-based timeline after the startScrollOffset point');
243
244 // Check the percentage-based ScrollTimeline.
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]245 scroller.scrollLeft = -(0.19 * scrollerSize);
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]246 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]247 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]248 percentageScrollTimeline.currentTime, 0,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]249 'Percentage-based timeline before the startScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]250 scroller.scrollLeft = -(0.20 * scrollerSize);
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]251 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]252 assert_equals(
253 percentageScrollTimeline.currentTime, 0,
254 'Percentage-based timeline at the startScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]255 scroller.scrollLeft = -(0.4 * scrollerSize);
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]256 await waitForNextFrame();
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]257 assert_times_equal(
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]258 percentageScrollTimeline.currentTime,
259 calculateCurrentTime(
260 0.4 * scrollerSize, 0.2 * scrollerSize, scrollerSize, scrollerSize),
261 'Percentage-based timeline after the startScrollOffset point');
262
263 // Check the calc-based ScrollTimeline.
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]264 scroller.scrollLeft = -(0.2 * scrollerSize - 10);
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]265 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]266 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]267 calcScrollTimeline.currentTime, 0,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]268 'Calc-based timeline before the startScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]269 scroller.scrollLeft = -(0.2 * scrollerSize - 5);
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]270 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]271 assert_equals(
272 calcScrollTimeline.currentTime, 0,
273 'Calc-based timeline at the startScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]274 scroller.scrollLeft = -(0.2 * scrollerSize);
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]275 await waitForNextFrame();
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]276 assert_times_equal(
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]277 calcScrollTimeline.currentTime,
278 calculateCurrentTime(
279 0.2 * scrollerSize, 0.2 * scrollerSize - 5, scrollerSize,
280 scrollerSize),
281 'Calc-based timeline after the startScrollOffset point');
282}, 'currentTime handles startScrollOffset with direction: rtl correctly');
283
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]284promise_test(async t => {
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]285 const scrollerOverrides = new Map([['direction', 'rtl']]);
286 const scroller = setupScrollTimelineTest(scrollerOverrides);
287 // Set the timeRange such that currentTime maps directly to the value
288 // scrolled. The contents and scroller are square, so it suffices to compute
289 // one edge and use it for all the timelines.
290 const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
291
292 const lengthScrollTimeline = new ScrollTimeline({
293 scrollSource: scroller,
294 timeRange: scrollerSize,
295 orientation: 'horizontal',
296 endScrollOffset: (scrollerSize - 20) + 'px'
297 });
298 const percentageScrollTimeline = new ScrollTimeline({
299 scrollSource: scroller,
300 timeRange: scrollerSize,
301 orientation: 'horizontal',
302 endScrollOffset: '80%'
303 });
304 const calcScrollTimeline = new ScrollTimeline({
305 scrollSource: scroller,
306 timeRange: scrollerSize,
307 orientation: 'horizontal',
308 endScrollOffset: 'calc(80% + 5px)'
309 });
310
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]311 // With direction rtl offsets are inverted, such that scrollLeft == 0
312 // is the 'zero' point for currentTime. However the
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]313 // endScrollOffset is an absolute distance along the offset, so doesn't need
314 // adjusting.
315
316 // Check the length-based ScrollTimeline.
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]317 scroller.scrollLeft = -scrollerSize;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]318 // Wait for new animation frame which allows the timeline to compute new
319 // current time.
320 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]321 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]322 lengthScrollTimeline.currentTime, lengthScrollTimeline.timeRange,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]323 'Length-based timeline after the endScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]324 scroller.scrollLeft = 20 - scrollerSize;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]325 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]326 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]327 lengthScrollTimeline.currentTime, lengthScrollTimeline.timeRange,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]328 'Length-based timeline at the endScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]329 scroller.scrollLeft = 50 - scrollerSize;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]330 await waitForNextFrame();
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]331 assert_times_equal(
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]332 lengthScrollTimeline.currentTime,
333 calculateCurrentTime(
334 scrollerSize - 50, 0, scrollerSize - 20, scrollerSize),
335 'Length-based timeline before the endScrollOffset point');
336
337 // Check the percentage-based ScrollTimeline.
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]338 scroller.scrollLeft = 0.19 * scrollerSize - scrollerSize;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]339 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]340 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]341 percentageScrollTimeline.currentTime, percentageScrollTimeline.timeRange,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]342 'Percentage-based timeline after the endScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]343 scroller.scrollLeft = 0.20 * scrollerSize - scrollerSize;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]344 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]345 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]346 percentageScrollTimeline.currentTime, percentageScrollTimeline.timeRange,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]347 'Percentage-based timeline at the endScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]348 scroller.scrollLeft = 0.4 * scrollerSize - scrollerSize;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]349 await waitForNextFrame();
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]350 assert_times_equal(
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]351 percentageScrollTimeline.currentTime,
352 calculateCurrentTime(
353 0.6 * scrollerSize, 0, 0.8 * scrollerSize, scrollerSize),
354 'Percentage-based timeline before the endScrollOffset point');
355
356 // Check the calc-based ScrollTimeline. 80% + 5px
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]357 scroller.scrollLeft = -0.8 * scrollerSize - 10;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]358 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]359 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]360 calcScrollTimeline.currentTime, calcScrollTimeline.timeRange,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]361 'Calc-based timeline after the endScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]362 scroller.scrollLeft = -0.8 * scrollerSize - 5;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]363 await waitForNextFrame();
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]364 assert_equals(
Jordan Taylor769ccd72020-03-17 01:29:34[diff] [blame]365 calcScrollTimeline.currentTime, calcScrollTimeline.timeRange,
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]366 'Calc-based timeline at the endScrollOffset point');
Cathie Chen30018932019-10-10 03:10:31[diff] [blame]367 scroller.scrollLeft = -0.8 * scrollerSize;
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]368 await waitForNextFrame();
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]369 assert_times_equal(
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]370 calcScrollTimeline.currentTime,
371 calculateCurrentTime(
372 0.8 * scrollerSize, 0, 0.8 * scrollerSize + 5, scrollerSize),
373 'Calc-based timeline before the endScrollOffset point');
374}, 'currentTime handles endScrollOffset with direction: rtl correctly');
Stephen McGruerce50d582019-03-01 03:00:02[diff] [blame]375
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]376promise_test(async t => {
Stephen McGruerce50d582019-03-01 03:00:02[diff] [blame]377 const scrollerOverrides = new Map([['direction', 'rtl']]);
378 const scroller = setupScrollTimelineTest(scrollerOverrides);
379 // Set the timeRange such that currentTime maps directly to the value
380 // scrolled. The contents and scroller are square, so it suffices to compute
381 // one edge and use it for all the timelines.
382 const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
383
384 // When the endScrollOffset is equal to the maximum scroll offset (and there
385 // are no fill modes), the endScrollOffset is treated as inclusive.
386 const inclusiveAutoScrollTimeline = new ScrollTimeline({
387 scrollSource: scroller,
388 timeRange: scrollerSize,
389 orientation: 'block',
390 endScrollOffset: 'auto'
391 });
392 const inclusiveLengthScrollTimeline = new ScrollTimeline({
393 scrollSource: scroller,
394 timeRange: scrollerSize,
395 orientation: 'block',
396 endScrollOffset: scrollerSize + 'px'
397 });
398 const inclusivePercentageScrollTimeline = new ScrollTimeline({
399 scrollSource: scroller,
400 timeRange: scrollerSize,
401 orientation: 'block',
402 endScrollOffset: '100%'
403 });
404 const inclusiveCalcScrollTimeline = new ScrollTimeline({
405 scrollSource: scroller,
406 timeRange: scrollerSize,
407 orientation: 'block',
408 endScrollOffset: 'calc(80% + ' + (0.2 * scrollerSize) + 'px)'
409 });
410
411 // With direction rtl offsets are inverted, such that scrollLeft ==
412 // scrollerSize is the 'zero' point for currentTime. However the
413 // endScrollOffset is an absolute distance along the offset, so doesn't need
414 // adjusting.
415
416 scroller.scrollLeft = 0;
417 let expectedCurrentTime = calculateCurrentTime(
418 scroller.scrollLeft, 0, scrollerSize, scrollerSize);
Olga Gerchikov167fc7a2020-04-02 14:06:14[diff] [blame^]419 // Wait for new animation frame which allows the timeline to compute new
420 // current time.
421 await waitForNextFrame();
Stephen McGruerce50d582019-03-01 03:00:02[diff] [blame]422
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]423 assert_times_equal(
Stephen McGruerce50d582019-03-01 03:00:02[diff] [blame]424 inclusiveAutoScrollTimeline.currentTime, expectedCurrentTime,
425 'Inclusive auto timeline at the endScrollOffset point');
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]426 assert_times_equal(
Stephen McGruerce50d582019-03-01 03:00:02[diff] [blame]427 inclusiveLengthScrollTimeline.currentTime, expectedCurrentTime,
428 'Inclusive length-based timeline at the endScrollOffset point');
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]429 assert_times_equal(
Stephen McGruerce50d582019-03-01 03:00:02[diff] [blame]430 inclusivePercentageScrollTimeline.currentTime, expectedCurrentTime,
431 'Inclusive percentage-based timeline at the endScrollOffset point');
Olga Gerchikovbf21d032019-12-18 20:35:13[diff] [blame]432 assert_times_equal(
Stephen McGruerce50d582019-03-01 03:00:02[diff] [blame]433 inclusiveCalcScrollTimeline.currentTime, expectedCurrentTime,
434 'Inclusive calc-based timeline at the endScrollOffset point');
435}, 'currentTime handles endScrollOffset (inclusive case) with direction: rtl correctly');
Stephen McGruer26390b32018-12-10 15:47:18[diff] [blame]436</script>