animation-timeline-deferred.html (3086B)
1 <!DOCTYPE html> 2 <title>Deferred timelines via Animation.timeline</title> 3 <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7759"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/web-animations/testcommon.js"></script> 7 8 <main id=main></main> 9 <script> 10 function inflate(t, template) { 11 t.add_cleanup(() => main.replaceChildren()); 12 main.append(template.content.cloneNode(true)); 13 main.offsetTop; 14 } 15 16 async function scrollTop(e, value) { 17 e.scrollTop = value; 18 await waitForNextFrame(); 19 } 20 </script> 21 <style> 22 @keyframes anim { 23 from { width: 0px; } 24 to { width: 200px; } 25 } 26 .scroller { 27 overflow-y: hidden; 28 width: 200px; 29 height: 200px; 30 } 31 .scroller > .content { 32 margin: 400px 0px; 33 width: 100px; 34 height: 100px; 35 background-color: green; 36 } 37 .animating { 38 background-color: coral; 39 width: 0px; 40 animation: anim auto linear; 41 animation-timeline: --t1; 42 } 43 .timeline { 44 scroll-timeline-name: --t1; 45 } 46 .scope { 47 timeline-scope: --t1; 48 } 49 </style> 50 51 <template id=animation_timeline_attached> 52 <div class="scope"> 53 <div class=animating>Test</div> 54 <div class="scroller timeline"> 55 <div class="content animating"></div> 56 </div> 57 </div> 58 </template> 59 <script> 60 promise_test(async (t) => { 61 inflate(t, animation_timeline_attached); 62 let scroller = main.querySelector('.scroller'); 63 let animating = Array.from(main.querySelectorAll('.animating')); 64 65 assert_equals(animating.length, 2); 66 let animations = animating.map((e) => e.getAnimations()[0]); 67 assert_equals(animations.length, 2); 68 69 // animations[0] is attached via deferred timeline (timeline-scope), 70 // and animations[1] is attached directly. 71 assert_equals(animations[0].timeline, animations[1].timeline); 72 }, 'Animation.timeline returns attached timeline'); 73 </script> 74 75 <template id=animation_timeline_inactive> 76 <div class="scope"> 77 <div class=animating>Test</div> 78 </div> 79 </template> 80 <script> 81 promise_test(async (t) => { 82 inflate(t, animation_timeline_inactive); 83 let scroller = main.querySelector('.scroller'); 84 let animating = main.querySelector('.animating'); 85 86 assert_equals(animating.getAnimations()[0].timeline.source, null); 87 }, 'Animation.timeline returns a timeline with no source for inactive deferred timeline'); 88 </script> 89 90 <template id=animation_timeline_overattached> 91 <div class="scope"> 92 <div class=animating>Test</div> 93 <div class="scroller timeline"> 94 <div class="content"></div> 95 </div> 96 <div class="scroller timeline"> 97 <div class="content"></div> 98 </div> 99 </div> 100 </template> 101 <script> 102 promise_test(async (t) => { 103 inflate(t, animation_timeline_overattached); 104 let scroller = main.querySelector('.scroller'); 105 let animating = main.querySelector('.animating'); 106 107 assert_equals(animating.getAnimations()[0].timeline.source, null); 108 }, 'Animation.timeline returns a timeline with no source for inactive (overattached) deferred timeline'); 109 </script>