Google Git
Sign in
chromium / external / w3c / web-platform-tests / 5fcf49d42ed0b212a392e946e9501a8df1100c25 / . / scroll-animations / multiple-scroll-offsets.html
blob: 09a3b14c189ea809c4af5f6f3749a61a8f9d9bcb [file] [log] [blame]
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]1<!DOCTYPE html>
2<meta charset="utf-8">
3<title>ScrollTimeline current time algorithm</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>
7<script src="/web-animations/testcommon.js"></script>
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]8<script src="./testcommon.js"></script>
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]9
10<body></body>
11
12<script>
13'use strict';
14
15promise_test(async t => {
16 const scroller = setupScrollTimelineTest();
17 const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
18
19 const scrollTimeline = new ScrollTimeline({
20 scrollSource: scroller,
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]21 orientation: 'block',
22 scrollOffsets: [CSS.px(10), CSS.px(20), CSS.px(40), CSS.px(70), CSS.px(90)],
23 });
24
25 var offset = 0;
26 var w = 1 / 4; // offset weight
27 var p = 0; // progress within the offset
28
29 scroller.scrollTop = 10;
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]30 assert_percents_equal(scrollTimeline.currentTime, (offset + p) * w * 100,
31 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]32
33 p = (12 - 10) / (20 - 10);
34 scroller.scrollTop = 12;
35 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]36 assert_percents_equal(scrollTimeline.currentTime, (offset + p) * w * 100,
37 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]38
39 offset = 1;
40 p = 0;
41 scroller.scrollTop = 20;
42 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]43 assert_percents_equal(scrollTimeline.currentTime, (offset + p) * w * 100,
44 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]45
46 p = (35 - 20) / (40 - 20);
47 scroller.scrollTop = 35;
48 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]49 assert_percents_equal(scrollTimeline.currentTime, (offset + p) * w * 100,
50 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]51
52 offset = 2;
53 p = 0;
54 scroller.scrollTop = 40;
55 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]56 assert_percents_equal(scrollTimeline.currentTime, (offset + p) * w * 100,
57 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]58
59 p = (60 - 40) / (70 - 40);
60 scroller.scrollTop = 60;
61 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]62 assert_percents_equal(scrollTimeline.currentTime, (offset + p) * w * 100,
63 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]64
65 offset = 3;
66 p = 0;
67 scroller.scrollTop = 70;
68 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]69 assert_percents_equal(scrollTimeline.currentTime, (offset + p) * w * 100,
70 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]71
72 p = (80 - 70) / (90 - 70);
73 scroller.scrollTop = 80;
74 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]75 assert_percents_equal(scrollTimeline.currentTime, (offset + p) * w * 100,
76 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]77
78 scroller.scrollTop = 90;
79 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]80 assert_percents_equal(scrollTimeline.currentTime, 100,
81 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]82}, 'currentTime calculations when multiple scroll offsets are specified');
83
84promise_test(async t => {
85 const scroller = setupScrollTimelineTest();
86 const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
87
88 var scrollTimeline = new ScrollTimeline({
89 scrollSource: scroller,
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]90 orientation: 'block',
91 scrollOffsets: [CSS.px(300), CSS.px(200), CSS.px(10)],
92 });
93
94 scroller.scrollTop = 250;
95 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]96 assert_percents_equal(scrollTimeline.currentTime, 0,
97 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]98
99 scroller.scrollTop = 400;
100 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]101 assert_percents_equal(scrollTimeline.currentTime, 100,
102 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]103
104 scrollTimeline = new ScrollTimeline({
105 scrollSource: scroller,
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]106 orientation: 'block',
Olga Gerchikov44d0f24b2021-04-22 01:30:19[diff] [blame]107 scrollOffsets: ['auto', CSS.px(400), CSS.px(200)],
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]108 });
109
110 scroller.scrollTop = 100;
111 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]112 assert_percents_equal(scrollTimeline.currentTime, 12.5,
113 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]114
115 scrollTimeline = new ScrollTimeline({
116 scrollSource: scroller,
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]117 orientation: 'block',
118 scrollOffsets: [CSS.px(200), CSS.px(0), CSS.px(400)],
119 });
120
121 scroller.scrollTop = 200;
122 await waitForNextFrame();
Blink WPT Botbac5e062021-08-10 17:04:44[diff] [blame]123 assert_percents_equal(scrollTimeline.currentTime, 75,
124 "current time calculation when scroll = " + scroller.scrollTop);
Olga Gerchikovd6536802021-01-12 04:15:34[diff] [blame]125}, 'currentTime calculations when overlapping scroll offsets are specified');
126</script>