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
67 lines
2.0 KiB
HTML
67 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>ScrollTimeline progress with single-axis scroll containers</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>
|
|
.inline-scroller {
|
|
overflow-block: clip;
|
|
overflow-inline: scroll;
|
|
}
|
|
.vertical-writing-mode { writing-mode: vertical-rl; }
|
|
.horizontal-writing-mode { writing-mode: horizontal-tb; }
|
|
#outer {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
#inner {
|
|
width: 300px;
|
|
height: 100px;
|
|
}
|
|
#subject {
|
|
width: 50px;
|
|
height: 50px;
|
|
animation: noop 1s;
|
|
animation-timeline: scroll(nearest block);
|
|
}
|
|
@keyframes noop {}
|
|
</style>
|
|
|
|
<div id="outer" class="horizontal-writing-mode inline-scroller">
|
|
<div id="inner" class="vertical-writing-mode inline-scroller">
|
|
<div id="subject" class="horizontal-writing-mode"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
promise_test(async t => {
|
|
t.add_cleanup(() => { outer.scrollLeft = 0; });
|
|
const timeline = subject.getAnimations()[0].timeline;
|
|
assert_equals(timeline.source, outer);
|
|
|
|
outer.scrollLeft = (outer.scrollWidth - outer.clientWidth) / 2;
|
|
await waitForNextFrame();
|
|
|
|
assert_percents_equal(timeline.currentTime, 50);
|
|
}, 'Timeline progress follows the matched source\'s scroll offset');
|
|
|
|
promise_test(async t => {
|
|
t.add_cleanup(() => {
|
|
outer.style.direction = '';
|
|
outer.scrollLeft = 0;
|
|
});
|
|
outer.style.direction = 'rtl';
|
|
const timeline = subject.getAnimations()[0].timeline;
|
|
assert_equals(timeline.source, outer);
|
|
|
|
outer.scrollLeft = -(outer.scrollWidth - outer.clientWidth) / 2;
|
|
await waitForNextFrame();
|
|
|
|
assert_percents_equal(timeline.currentTime, 50);
|
|
}, 'Timeline progress is measured from the matched source\'s scroll origin');
|
|
</script>
|