Free Debreuil
2e2f1a4034
Automatic update from web-platform-tests Make scroll timelines support single-axis scroll containers Scroll timelines set to `nearest` and view timelines now resolve to the nearest ancestor scroll container for the requested axis. For these cases, the writing mode of the nearest ancestor scroll container is used. Add the writing mode used to resolve logical axes to the timeline snapshot, and hook this up to the compositor timeline. Fixed: 473576118 Bug: 440038212 Change-Id: Ic7e920cbca2146f74259e965d137ffa60ffe7f42 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7880064 Auto-Submit: Free Debreuil <freedebreuil@google.com> Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Free Debreuil <freedebreuil@google.com> Cr-Commit-Position: refs/heads/main@{#1657374} -- wpt-commits: 20e1b2784411997a5aea8788aa91169bcb4f1838 wpt-pr: 61095
63 lines
1.9 KiB
HTML
63 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>ScrollTimeline source lookup with single-axis scroll containers (inactive)</title>
|
|
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines-anonymous">
|
|
<link rel="author" title="Free Debreuil" href="mailto:freedebreuil@google.com">
|
|
<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 {
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow-x: clip;
|
|
overflow-y: scroll;
|
|
}
|
|
#subject {
|
|
width: 50px;
|
|
height: 200px;
|
|
animation: noop 1s;
|
|
animation-timeline: scroll(nearest inline);
|
|
}
|
|
@keyframes noop {}
|
|
</style>
|
|
|
|
<div id="scroller">
|
|
<div id="subject"></div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
// Force layout so the timeline's construction-time snapshot sees it.
|
|
scroller.offsetHeight;
|
|
const jsTimeline = new ScrollTimeline({ source: scroller, axis: 'x' });
|
|
assert_equals(jsTimeline.source, scroller);
|
|
assert_equals(jsTimeline.currentTime, null);
|
|
}, 'JS-created ScrollTimeline for a non-scrollable axis is inactive');
|
|
|
|
test(() => {
|
|
scroller.offsetHeight;
|
|
const animations = subject.getAnimations();
|
|
assert_equals(animations.length, 1);
|
|
const cssTimeline = animations[0].timeline;
|
|
assert_equals(cssTimeline.source, document.documentElement);
|
|
assert_equals(cssTimeline.currentTime, null);
|
|
}, 'CSS anonymous ScrollTimeline falls back when no ancestor matches the axis');
|
|
|
|
promise_test(async t => {
|
|
t.add_cleanup(() => {
|
|
scroller.style.display = '';
|
|
});
|
|
scroller.offsetHeight;
|
|
const jsTimeline = new ScrollTimeline({ source: scroller, axis: 'y' });
|
|
assert_not_equals(jsTimeline.currentTime, null);
|
|
|
|
scroller.style.display = 'none';
|
|
await waitForNextFrame();
|
|
await waitForNextFrame();
|
|
|
|
assert_equals(jsTimeline.currentTime, null);
|
|
}, 'ScrollTimeline becomes inactive when the reference element has display:none');
|
|
</script>
|