84 lines
2.6 KiB
HTML
84 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>getAnimations for scroll-linked animations</title>
|
|
<link rel="help"
|
|
href="https://www.w3.org/TR/web-animations-1/#animation-effect-phases-and-states">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/testcommon.js"></script>
|
|
<style>
|
|
@keyframes slide {
|
|
from { transform: translateX(100px); }
|
|
to { transform: translateX(100px); }
|
|
}
|
|
|
|
#container {
|
|
border: 10px solid lightgray;
|
|
overflow-x: scroll;
|
|
height: 200px;
|
|
width: 200px;
|
|
scroll-timeline-name: --timeline;
|
|
}
|
|
#spacer {
|
|
height: 200vh;
|
|
}
|
|
#target {
|
|
background-color: green;
|
|
height: 100px;
|
|
width: 100px;
|
|
animation: slide 1s linear;
|
|
animation-timeline: --timeline;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="container">
|
|
<div id="spacer"></div>
|
|
<div id="target"></div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
setup(assert_implements_animation_timeline);
|
|
|
|
promise_test(async t => {
|
|
let animations = document.getAnimations();
|
|
assert_equals(animations.length, 1,
|
|
'Single running animation');
|
|
assert_true(animations[0].timeline instanceof ScrollTimeline,
|
|
'Animation associated with a scroll timeline');
|
|
|
|
// Canceled animation is no longer current.
|
|
const anim = animations[0];
|
|
animations[0].cancel();
|
|
|
|
assert_equals(
|
|
document.getAnimations().length, 0,
|
|
'A canceled animation is no longer returned by getAnimations');
|
|
|
|
// Replaying an animation makes it current.
|
|
anim.play();
|
|
assert_equals(
|
|
document.getAnimations().length, 1,
|
|
'A play-pending animation is return by getAnimations');
|
|
|
|
// Animation effect is still current even if the timeline's source element
|
|
// cannot be scrolled.
|
|
spacer.style = 'display: none';
|
|
t.add_cleanup(() => {
|
|
spacer.style = '';
|
|
});
|
|
|
|
animations = document.getAnimations();
|
|
assert_equals(
|
|
animations.length, 1,
|
|
'Running animation is included in getAnimations list even if ' +
|
|
'currentTime is null');
|
|
assert_true(animations[0].timeline instanceof ScrollTimeline,
|
|
'Animation has timeline associated with an element that ' +
|
|
'cannot be scrolled');
|
|
assert_equals(animations[0].timeline.currentTime, null,
|
|
'Inactive timeline when timeline\'s source element cannot ' +
|
|
'be scrolled');
|
|
}, 'getAnimations includes inactive scroll-linked animations that have not ' +
|
|
'been canceled');
|
|
</script>
|