9529071a6e
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] https://github.com/w3c/csswg-drafts/pull/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
92 lines
2.5 KiB
HTML
92 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>Validate cases where element-based scroll offsets are unresolved.</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<script src="testcommon.js"></script>
|
|
|
|
<style>
|
|
.scroller {
|
|
overflow: auto;
|
|
height: 500px;
|
|
width: 500px;
|
|
will-change: transform;
|
|
}
|
|
|
|
.contents {
|
|
height: 2000px;
|
|
width: 2000px;
|
|
position: relative;
|
|
}
|
|
|
|
#start, #end {
|
|
background: blue;
|
|
border-top: 5px solid pink;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 50px;
|
|
}
|
|
|
|
#start {
|
|
position: absolute;
|
|
top: 50px;
|
|
}
|
|
|
|
#end {
|
|
position: absolute;
|
|
top: 1050px;
|
|
}
|
|
</style>
|
|
<div id="log"></div>
|
|
|
|
<div id="not_a_descendant"></div>
|
|
|
|
<script>
|
|
'use strict';
|
|
|
|
promise_test(async t => {
|
|
const scroller = createScrollerWithStartAndEnd(t);
|
|
t.add_cleanup(() => scroller.remove());
|
|
scroller.scrollTo({ top: 500 });
|
|
|
|
const not_a_descendant = document.querySelector("#not_a_descendant");
|
|
const end = document.querySelector("#end")
|
|
|
|
const timeline = createScrollTimeline(t, {
|
|
scrollSource: scroller,
|
|
orientation: 'block',
|
|
timeRange: 1000,
|
|
startScrollOffset: { target: not_a_descendant },
|
|
endScrollOffset: { target: end }
|
|
});
|
|
|
|
await waitForNextFrame();
|
|
assert_equals(timeline.currentTime, null, "The timeline should not be active.");
|
|
}, "A valid element-based offset's target should be a descendant of timeline's source");
|
|
|
|
promise_test(async t => {
|
|
const scroller = createScrollerWithStartAndEnd(t);
|
|
t.add_cleanup(() => scroller.remove());
|
|
scroller.scrollTo({ top: 500 });
|
|
|
|
const start = document.querySelector("#start");
|
|
const end = document.querySelector("#end")
|
|
|
|
const timeline = createScrollTimeline(t, {
|
|
scrollSource: scroller,
|
|
orientation: 'block',
|
|
timeRange: 1000,
|
|
startScrollOffset: { target: start },
|
|
endScrollOffset: { target: end }
|
|
});
|
|
|
|
start.style.display = "none";
|
|
await waitForNextFrame();
|
|
assert_equals(timeline.currentTime, null, "The timeline should not be active.");
|
|
|
|
start.style.display = "block";
|
|
await waitForNextFrame();
|
|
assert_not_equals(timeline.currentTime, null, "The timeline should be active.");
|
|
}, "A valid element-based offset's target should have a layout box");
|
|
</script> |