diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/scroll-animations/css/animation-timeline-deferred.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/scroll-animations/css/animation-timeline-deferred.html')
-rw-r--r-- | testing/web-platform/tests/scroll-animations/css/animation-timeline-deferred.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/css/animation-timeline-deferred.html b/testing/web-platform/tests/scroll-animations/css/animation-timeline-deferred.html new file mode 100644 index 0000000000..d0671e5f23 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/css/animation-timeline-deferred.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<title>Deferred timelines via Animation.timeline</title> +<link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7759"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> + +<main id=main></main> +<script> + function inflate(t, template) { + t.add_cleanup(() => main.replaceChildren()); + main.append(template.content.cloneNode(true)); + main.offsetTop; + } + + async function scrollTop(e, value) { + e.scrollTop = value; + await waitForNextFrame(); + } +</script> +<style> + @keyframes anim { + from { width: 0px; } + to { width: 200px; } + } + .scroller { + overflow-y: hidden; + width: 200px; + height: 200px; + } + .scroller > .content { + margin: 400px 0px; + width: 100px; + height: 100px; + background-color: green; + } + .animating { + background-color: coral; + width: 0px; + animation: anim auto linear; + animation-timeline: --t1; + } + .timeline { + scroll-timeline-name: --t1; + } + .scope { + timeline-scope: --t1; + } +</style> + +<template id=animation_timeline_attached> + <div class="scope"> + <div class=animating>Test</div> + <div class="scroller timeline"> + <div class="content animating"></div> + </div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, animation_timeline_attached); + let scroller = main.querySelector('.scroller'); + let animating = Array.from(main.querySelectorAll('.animating')); + + assert_equals(animating.length, 2); + let animations = animating.map((e) => e.getAnimations()[0]); + assert_equals(animations.length, 2); + + // animations[0] is attached via deferred timeline (timeline-scope), + // and animations[1] is attached directly. + assert_equals(animations[0].timeline, animations[1].timeline); + }, 'Animation.timeline returns attached timeline'); +</script> + +<template id=animation_timeline_inactive> + <div class="scope"> + <div class=animating>Test</div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, animation_timeline_inactive); + let scroller = main.querySelector('.scroller'); + let animating = main.querySelector('.animating'); + + assert_equals(animating.getAnimations()[0].timeline, null); + }, 'Animation.timeline returns null for inactive deferred timeline'); +</script> + +<template id=animation_timeline_overattached> + <div class="scope"> + <div class=animating>Test</div> + <div class="scroller timeline"> + <div class="content"></div> + </div> + <div class="scroller timeline"> + <div class="content"></div> + </div> + </div> +</template> +<script> + promise_test(async (t) => { + inflate(t, animation_timeline_overattached); + let scroller = main.querySelector('.scroller'); + let animating = main.querySelector('.animating'); + + assert_equals(animating.getAnimations()[0].timeline, null); + }, 'Animation.timeline returns null for inactive (overattached) deferred timeline'); +</script> |