Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Commit d1682ad

Browse files
majidomajido
committed
Bug 1642327 [wpt PR 23889] - [scroll-timeline] Correctly handle unresolvable cases, a=testonly
Automatic update from web-platform-tests [scroll-timeline] Correctly handle unresolvable cases For these cases we cannot calculate a meaningful scroll offset: 1. When target is not a descendant of timeline's source. 2. When target has no layout box. The current draft spec [1] asks for these situations to result into unresolved scroll offset which keeps timeline inactive. [1] w3c/csswg-drafts#5124 TEST: wpt/scroll-animations/element-based-offset-unresolved.html BUG: 1023375 Change-Id: Iec616444dda8dcdd6649e250aa993b439c00885e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2222884 Reviewed-by: Majid Valipour <majidvp@chromium.org> Reviewed-by: Yi Gu <yigu@chromium.org> Commit-Queue: Majid Valipour <majidvp@chromium.org> Cr-Commit-Position: refs/heads/master@{#774144} -- wpt-commits: 52575c9d7c3139cab33780e114b5cf9237a47157 wpt-pr: 23889 Differential Revision: https://phabricator.services.mozilla.com/D78787
1 parent 7838708 commit d1682ad

File tree

3 files changed

+106
-13
lines changed

3 files changed

+106
-13
lines changed

‎testing/web-platform/tests/scroll-animations/element-based-offset-unresolved.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<meta charset=utf-8>
3+
<title>Validate cases where element-based scroll offsets are unresolved.</title>
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<script src="/web-animations/testcommon.js"></script>
7+
<script src="testcommon.js"></script>
8+
9+
<style>
10+
.scroller {
11+
overflow: auto;
12+
height: 500px;
13+
width: 500px;
14+
will-change: transform;
15+
}
16+
17+
.contents {
18+
height: 2000px;
19+
width: 2000px;
20+
position: relative;
21+
}
22+
23+
#start, #end {
24+
background: blue;
25+
border-top: 5px solid pink;
26+
box-sizing: border-box;
27+
width: 100%;
28+
height: 50px;
29+
}
30+
31+
#start {
32+
position: absolute;
33+
top: 50px;
34+
}
35+
36+
#end {
37+
position: absolute;
38+
top: 1050px;
39+
}
40+
</style>
41+
<div id="log"></div>
42+
43+
<div id="not_a_descendant"></div>
44+
45+
<script>
46+
'use strict';
47+
48+
promise_test(async t => {
49+
const scroller = createScrollerWithStartAndEnd(t);
50+
t.add_cleanup(() => scroller.remove());
51+
scroller.scrollTo({ top: 500 });
52+
53+
const not_a_descendant = document.querySelector("#not_a_descendant");
54+
const end = document.querySelector("#end")
55+
56+
const timeline = createScrollTimeline(t, {
57+
scrollSource: scroller,
58+
orientation: 'block',
59+
timeRange: 1000,
60+
startScrollOffset: { target: not_a_descendant },
61+
endScrollOffset: { target: end }
62+
});
63+
64+
await waitForNextFrame();
65+
assert_equals(timeline.currentTime, null, "The timeline should not be active.");
66+
}, "A valid element-based offset's target should be a descendant of timeline's source");
67+
68+
promise_test(async t => {
69+
const scroller = createScrollerWithStartAndEnd(t);
70+
t.add_cleanup(() => scroller.remove());
71+
scroller.scrollTo({ top: 500 });
72+
73+
const start = document.querySelector("#start");
74+
const end = document.querySelector("#end")
75+
76+
const timeline = createScrollTimeline(t, {
77+
scrollSource: scroller,
78+
orientation: 'block',
79+
timeRange: 1000,
80+
startScrollOffset: { target: start },
81+
endScrollOffset: { target: end }
82+
});
83+
84+
start.style.display = "none";
85+
await waitForNextFrame();
86+
assert_equals(timeline.currentTime, null, "The timeline should not be active.");
87+
88+
start.style.display = "block";
89+
await waitForNextFrame();
90+
assert_not_equals(timeline.currentTime, null, "The timeline should be active.");
91+
}, "A valid element-based offset's target should have a layout box");
92+
</script>

‎testing/web-platform/tests/scroll-animations/element-based-offset.html

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,19 +60,6 @@
6060
<script>
6161
'use strict';
6262

63-
function createScrollerWithStartAndEnd(test, orientationClass) {
64-
var scroller = createDiv(test);
65-
scroller.innerHTML =
66-
`<div class='contents'>
67-
<div id='start'></div>
68-
<div id='end'></div>
69-
</div>`;
70-
scroller.classList.add('scroller');
71-
scroller.classList.add(orientationClass);
72-
73-
return scroller;
74-
}
75-
7663
async function createScrollAnimationTest(description, config) {
7764
promise_test(async t => {
7865
const scroller = createScrollerWithStartAndEnd(t, config.orientation);

‎testing/web-platform/tests/scroll-animations/testcommon.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,19 @@ function createScroller(test) {
77
return scroller;
88
}
99

10+
function createScrollerWithStartAndEnd(test, orientationClass = 'vertical') {
11+
var scroller = createDiv(test);
12+
scroller.innerHTML =
13+
`<div class='contents'>
14+
<div id='start'></div>
15+
<div id='end'></div>
16+
</div>`;
17+
scroller.classList.add('scroller');
18+
scroller.classList.add(orientationClass);
19+
20+
return scroller;
21+
}
22+
1023
function createScrollTimeline(test, options) {
1124
options = options || {
1225
scrollSource: createScroller(test),
@@ -33,3 +46,4 @@ function createScrollLinkedAnimation(test, timeline) {
3346
return new Animation(
3447
new KeyframeEffect(createDiv(test), KEYFRAMES, DURATION), timeline);
3548
}
49+

0 commit comments

Comments
 (0)