animation-update-ref.html (1486B)
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 <title>Reference file for various tests that update an animation with a scroll timeline</title> 7 <script src="/web-animations/testcommon.js"></script> 8 </head> 9 <style type="text/css"> 10 #scroller { 11 border: 1px solid black; 12 overflow: hidden; 13 width: 300px; 14 height: 200px; 15 } 16 #target { 17 margin-bottom: 800px; 18 margin-top: 800px; 19 margin-left: 10px; 20 margin-right: 10px; 21 width: 100px; 22 height: 100px; 23 z-index: -1; 24 background-color: green; 25 } 26 </style> 27 <body> 28 <div id="scroller"> 29 <div id="target"></div> 30 </div> 31 </body> 32 <script type="text/javascript"> 33 document.documentElement.addEventListener('TestRendered', async () => { 34 runTest(); 35 }, { once: true }); 36 37 async function runTest() { 38 // Defaults to exit 60% if using a view timeline with subject = target. 39 const DEFAULT_SCROLL_POS = 860; 40 await waitForCompositorReady(); 41 42 const urlParams = new URLSearchParams(window.location.search); 43 target.style.transform = 44 `translateX(${urlParams.get('translate') || "0px"}`; 45 46 scroller.scrollTop = urlParams.get('scroll') || DEFAULT_SCROLL_POS; 47 await waitForNextFrame(); 48 await waitForNextFrame(); 49 50 // Make sure change to animation range was properly picked up. 51 document.documentElement.classList.remove("reftest-wait"); 52 } 53 </script> 54 </body> 55 </html>