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

Update web-platform-tests to revision b'2d7c53f5bc604132d2c83955537e454ee9c788c0'

Browse source
This commit is contained in:
WPT Sync Bot 2023-01-18 01:45:07 +00:00
parent 619a46113f
commit 1c6b303ef2
396 changed files with 29611 additions and 1967 deletions
Download patch file Download diff file Expand all files Collapse all files

144
tests/wpt/web-platform-tests/scroll-animations/css/view-timeline-delay-animation.html
View file

@ -1,144 +0,0 @@
<!DOCTYPE html>
<title>Animations using named timeline ranges</title>
<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<script src="support/testcommon.js"></script>
<style>
@keyframes anim {
from { z-index: 0; background-color: skyblue;}
to { z-index: 100; background-color: coral; }
}
#scroller {
border: 10px solid lightgray;
overflow-y: scroll;
width: 200px;
height: 200px;
}
#target {
margin: 800px 0px;
width: 100px;
height: 100px;
z-index: -1;
background-color: green;
}
</style>
<main id=main>
</main>
<template>
<div id=scroller>
<div id=target></div>
</div>
</template>
<script>
setup(assert_implements_animation_timeline);
function inflate(t, template) {
t.add_cleanup(() => main.replaceChildren());
main.append(template.content.cloneNode(true));
}
async function scrollTop(e, value) {
e.scrollTop = value;
await waitForNextFrame();
}
async function waitForAnimationReady(target) {
await waitForNextFrame();
await Promise.all(target.getAnimations().map(x => x.promise));
}
async function assertValueAt(scroller, target, args) {
await waitForAnimationReady(target);
await scrollTop(scroller, args.scrollTop);
assert_equals(getComputedStyle(target).zIndex, args.expected.toString());
}
function test_animation_delay(options) {
promise_test(async (t) => {
inflate(t, document.querySelector('template'));
let scroller = main.querySelector('#scroller');
let target = main.querySelector('#target');
target.style.viewTimeline = 't1 block';
// TODO(crbug.com/1375998): Create the timeline in a separate frame to
// work around a bug.
await waitForNextFrame();
target.style.animation = 'anim 10s linear';
target.style.animationTimeline = 't1';
target.style.animationDelayStart = options.startDelay;
target.style.animationDelayEnd = options.endDelay;
// Accommodates floating point precision errors at the endpoints.
target.style.animationFillMode = 'both';
// 0%
await assertValueAt(scroller, target,
{ scrollTop: options.rangeStart, expected: 0 });
// 50%
await assertValueAt(scroller, target,
{ scrollTop: (options.rangeStart + options.rangeEnd) / 2, expected: 50 });
// 100%
await assertValueAt(scroller, target,
{ scrollTop: options.rangeEnd, expected: 100 });
// Test before/after phases (need to clear the fill mode for that).
target.style.animationFillMode = 'initial';
await assertValueAt(scroller, target,
{ scrollTop: options.rangeStart - 10, expected: -1 });
await assertValueAt(scroller, target,
{ scrollTop: options.rangeEnd + 10, expected: -1 });
// Check 50% again without fill mode.
await assertValueAt(scroller, target,
{ scrollTop: (options.rangeStart + options.rangeEnd) / 2, expected: 50 });
}, `Animation with delays [${options.startDelay}, ${options.endDelay}]`);
}
test_animation_delay({
startDelay: 'initial',
endDelay: 'initial',
rangeStart: 600,
rangeEnd: 900
});
test_animation_delay({
startDelay: 'cover 0%',
endDelay: 'cover 100%',
rangeStart: 600,
rangeEnd: 900
});
test_animation_delay({
startDelay: 'contain 0%',
endDelay: 'contain 100%',
rangeStart: 700,
rangeEnd: 800
});
test_animation_delay({
startDelay: 'enter 0%',
endDelay: 'enter 100%',
rangeStart: 600,
rangeEnd: 700
});
test_animation_delay({
startDelay: 'exit 0%',
endDelay: 'exit 100%',
rangeStart: 800,
rangeEnd: 900
});
test_animation_delay({
startDelay: 'contain -50%',
endDelay: 'enter 200%',
rangeStart: 650,
rangeEnd: 800
});
test_animation_delay({
startDelay: 'enter 0%',
endDelay: 'exit 100%',
rangeStart: 600,
rangeEnd: 900
});
</script>