| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range"> |
| <link rel="match" href="animation-range-visual-test-ref.html"> |
| <meta name=fuzzy content="maxDifference=0-64;totalPixels=0-15"> |
| <link rel="stylesheet" href="support/animation-range.css"> |
| <script src="/common/reftest-wait.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| </head> |
| <body onload="test();"> |
| <h3>View timeline</h3> |
| <template id="meters"> |
| <div class="meters"> |
| <div class="cover"><div class="meter"><div class="bar"></div></div><div>Cover</div></div> |
| <div class="contain"><div class="meter"><div class="bar"></div></div><div>Contain</div></div> |
| <div class="entry"><div class="meter"><div class="bar"></div></div><div>Entry</div></div> |
| <div class="exit"><div class="meter"><div class="bar"></div></div><div>Exit</div></div> |
| </div> |
| </template> |
| <div class="flex"> |
| <div> |
| <div class="scroller" data-scroll-top="10"> |
| <div class="subject"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| <div> |
| <div class="scroller" data-scroll-top="30"> |
| <div class="subject"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| <div> |
| <div class="scroller" data-scroll-top="90"> |
| <div class="subject"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| <div> |
| <div class="scroller" data-scroll-top="110"> |
| <div class="subject"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| </div> |
| </body> |
| <script> |
| function test() { |
| let template = document.querySelector('#meters'); |
| let scrollers = document.querySelectorAll('.scroller'); |
| for (let i = 0; i < scrollers.length; i++) { |
| let subject = scrollers[i].querySelector('.subject'); |
| subject.appendChild(template.content.cloneNode(true)); |
| scrollers[i].scrollTop = parseInt(scrollers[i].getAttribute('data-scroll-top')); |
| } |
| waitForCompositorReady().then(takeScreenshot); |
| } |
| </script> |
| </html> |
