animation-range-visual-test-ref.html (2630B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range"> 7 <link rel="stylesheet" href="support/animation-range.css"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 .meter { 11 animation: active-interval linear 100s paused; 12 animation-timeline: auto; 13 } 14 15 .bar { 16 animation: slide-in linear 100s paused; 17 animation-timeline: auto; 18 } 19 </style> 20 </head> 21 <body onload="test();"> 22 <h3>View timeline</h3> 23 <template id="meters"> 24 <div class="meters"> 25 <div class="cover"><div class="meter"><div class="bar"></div></div><div>Cover</div></div> 26 <div class="contain"><div class="meter"><div class="bar"></div></div><div>Contain</div></div> 27 <div class="entry"><div class="meter"><div class="bar"></div></div><div>Entry</div></div> 28 <div class="exit"><div class="meter"><div class="bar"></div></div><div>Exit</div></div> 29 </div> 30 </template> 31 <div class="flex"> 32 <div> 33 <div class="scroller" data-scroll-top="10"> 34 <div class="subject" data-progress=".08333,-1,.5,-1"></div> 35 <div class="spacer"></div> 36 </div> 37 </div> 38 <div> 39 <div class="scroller" data-scroll-top="30"> 40 <div class="subject" data-progress=".25,.125,2,-1"></div> 41 <div class="spacer"></div> 42 </div> 43 </div> 44 <div> 45 <div class="scroller" data-scroll-top="90"> 46 <div class="subject" data-progress=".75,.875,2,-1"></div> 47 <div class="spacer"></div> 48 </div> 49 </div> 50 <div> 51 <div class="scroller" data-scroll-top="110"> 52 <div class="subject" data-progress=".91667,2,2,.5"></div> 53 <div class="spacer"></div> 54 </div> 55 </div> 56 </div> 57 </body> 58 <script> 59 function test() { 60 let template = document.querySelector('#meters'); 61 let scrollers = document.querySelectorAll('.scroller'); 62 for (let i = 0; i < scrollers.length; i++) { 63 let subject = scrollers[i].querySelector('.subject'); 64 let clone = template.content.cloneNode(true); 65 let meters = clone.querySelectorAll('.meter'); 66 let progress = subject.getAttribute('data-progress').split(',').map(s => parseFloat(s)); 67 for (let meter of meters) { 68 let bar = meter.querySelector('.bar'); 69 let startTime = -progress.splice(0, 1)[0] * 100; 70 meter.style.animationDelay = `${startTime}s`; 71 bar.style.animationDelay = `${startTime}s`; 72 } 73 subject.appendChild(clone); 74 scrollers[i].scrollTop = parseInt(scrollers[i].getAttribute('data-scroll-top')); 75 } 76 takeScreenshot(); 77 } 78 </script> 79 </html>