Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 14:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'

Browse source
This commit is contained in:
WPT Sync Bot 2022-01-20 04:38:55 +00:00 • committed by cybai
parent 4401622eb1
commit b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
Download patch file Download diff file Expand all files Collapse all files

128
tests/wpt/web-platform-tests/scroll-animations/scroll-timelines/scroll-timeline-invalidation.html Normal file
View file

@ -0,0 +1,128 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>ScrollTimeline invalidation</title>
<link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm">
<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: 100px;
width: 100px;
will-change: transform;
}
.contents {
height: 1000px;
width: 100%;
}
</style>
<div id="log"></div>
<script>
'use strict';
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const effect_duration = 350;
animation.effect.updateTiming({ duration: effect_duration });
const scroller = animation.timeline.source;
let maxScroll = scroller.scrollHeight - scroller.clientHeight;
scroller.scrollTop = 0.2 * maxScroll;
const initial_progress = (scroller.scrollTop / maxScroll) * 100;
// Wait for new animation frame which allows the timeline to compute new
// current time.
await waitForNextFrame();
animation.play();
await animation.ready;
// Animation current time is at 20% because scroller was scrolled to 20%
// assert_equals(animation.currentTime.value, 20);
assert_equals(animation.currentTime.value, 20);
assert_equals(scroller.scrollTop, 180);
assert_equals(maxScroll, 900);
// Shrink scroller content size (from 1000 to 500).
// scroller.scrollTop maintains the same offset, which means shrinking the
// content has the effect of skipping the animation forward.
scroller.firstChild.style.height = "500px";
maxScroll = scroller.scrollHeight - scroller.clientHeight;
assert_equals(scroller.scrollTop, 180);
assert_equals(maxScroll, 400);
await waitForNextFrame();
const expected_progress = (scroller.scrollTop / maxScroll) * 100;
assert_true(expected_progress > initial_progress)
assert_equals(animation.currentTime.value, expected_progress); // 45%
assert_equals(animation.timeline.currentTime.value, expected_progress); // 45%
assert_equals(animation.effect.getComputedTiming().localTime.value, expected_progress); // 45%
}, 'Animation current time and effect local time are updated after scroller ' +
'content size changes.');
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
animation.effect.updateTiming({ duration: 350 });
const scroller = animation.timeline.source;
let maxScroll = scroller.scrollHeight - scroller.clientHeight;
const scrollOffset = 0.2 * maxScroll
scroller.scrollTop = scrollOffset;
const initial_progress = (scroller.scrollTop / maxScroll) * 100;
// Wait for new animation frame which allows the timeline to compute new
// current time.
await waitForNextFrame();
animation.play();
await animation.ready;
// Animation current time is at 20% because scroller was scrolled to 20%
// assert_equals(animation.currentTime.value, 20);
assert_equals(animation.currentTime.value, 20);
assert_equals(scroller.scrollTop, scrollOffset);
assert_equals(maxScroll, 900);
// Change scroller size.
scroller.style.height = "500px";
maxScroll = scroller.scrollHeight - scroller.clientHeight;
assert_equals(scroller.scrollTop, scrollOffset);
assert_equals(maxScroll, 500);
await waitForNextFrame();
const expected_progress = (scroller.scrollTop / maxScroll) * 100;
assert_true(expected_progress > initial_progress);
assert_equals(animation.currentTime.value, expected_progress); // 45%
assert_equals(animation.timeline.currentTime.value, expected_progress); // 45%
assert_equals(animation.effect.getComputedTiming().localTime.value, expected_progress); // 45%
}, 'Animation current time and effect local time are updated after scroller ' +
'size changes.');
promise_test(async t => {
const timeline = createScrollTimeline(t);
const scroller = timeline.source;
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
// Instantiate scroll animation that resizes its scroll timeline scroller.
const animation = new Animation(
new KeyframeEffect(
timeline.source.firstChild,
[{ height: '1000px' }, { height: '2000px' }],
{ duration: 1000, }
), timeline);
animation.play();
await animation.ready;
await waitForNextFrame();
scroller.scrollTop = 0.2 * maxScroll;
// Wait for new animation frame which allows the timeline to compute new
// current time.
await waitForNextFrame();
assert_times_equal(timeline.currentTime.value, 20,
'Timeline current time is updated after animation frame.');
await waitForNextFrame();
assert_times_equal(timeline.currentTime.value, 16.3636,
'Timeline current time is updated after two animation frames and ' +
'reflects single layout run.');
}, 'If scroll animation resizes its scroll timeline scroller, ' +
'layout runs only once to reflect the initial update.');
</script>