animation-range-visual-test.html (2108B)
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="match" href="animation-range-visual-test-ref.html"> 8 <meta name=fuzzy content="maxDifference=0-64;totalPixels=0-25"> 9 <link rel="stylesheet" href="support/animation-range.css"> 10 <script src="/common/reftest-wait.js"></script> 11 <script src="/web-animations/testcommon.js"></script> 12 </head> 13 <body onload="test();"> 14 <h3>View timeline</h3> 15 <template id="meters"> 16 <div class="meters"> 17 <div class="cover"><div class="meter"><div class="bar"></div></div><div>Cover</div></div> 18 <div class="contain"><div class="meter"><div class="bar"></div></div><div>Contain</div></div> 19 <div class="entry"><div class="meter"><div class="bar"></div></div><div>Entry</div></div> 20 <div class="exit"><div class="meter"><div class="bar"></div></div><div>Exit</div></div> 21 </div> 22 </template> 23 <div class="flex"> 24 <div> 25 <div class="scroller" data-scroll-top="10"> 26 <div class="subject"></div> 27 <div class="spacer"></div> 28 </div> 29 </div> 30 <div> 31 <div class="scroller" data-scroll-top="30"> 32 <div class="subject"></div> 33 <div class="spacer"></div> 34 </div> 35 </div> 36 <div> 37 <div class="scroller" data-scroll-top="90"> 38 <div class="subject"></div> 39 <div class="spacer"></div> 40 </div> 41 </div> 42 <div> 43 <div class="scroller" data-scroll-top="110"> 44 <div class="subject"></div> 45 <div class="spacer"></div> 46 </div> 47 </div> 48 </div> 49 </body> 50 <script> 51 function test() { 52 let template = document.querySelector('#meters'); 53 let scrollers = document.querySelectorAll('.scroller'); 54 for (let i = 0; i < scrollers.length; i++) { 55 let subject = scrollers[i].querySelector('.subject'); 56 subject.appendChild(template.content.cloneNode(true)); 57 scrollers[i].scrollTop = parseInt(scrollers[i].getAttribute('data-scroll-top')); 58 } 59 waitForCompositorReady().then(takeScreenshot); 60 } 61 </script> 62 </html>