view-timeline-subject-bounds-update.html (1820B)
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>Update subject bounds refTest</title> 7 <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8694"> 8 <link rel="match" 9 href="./animation-update-ref.html?translate=100px&scroll=800"> 10 <script src="/web-animations/testcommon.js"></script> 11 </head> 12 <style type="text/css"> 13 @keyframes anim { 14 from { transform: translateX(100px) } 15 to { transform: translateX(0px) } 16 } 17 #scroller { 18 border: 1px solid black; 19 overflow: hidden; 20 width: 300px; 21 height: 200px; 22 } 23 #target { 24 margin-bottom: 800px; 25 margin-top: 700px; 26 margin-left: 10px; 27 margin-right: 10px; 28 width: 100px; 29 height: 200px; 30 z-index: -1; 31 background-color: green; 32 animation: anim auto both linear; 33 animation-timeline: --timeline; 34 view-timeline: --timeline; 35 animation-range: exit; 36 } 37 #target.bounds-update { 38 height: 100px; 39 /* Keep the scroll range the same. */ 40 margin-top: 800px; 41 } 42 </style> 43 <body> 44 <div id="scroller"> 45 <div id="target"></div> 46 </div> 47 </body> 48 <script type="text/javascript"> 49 document.documentElement.addEventListener('TestRendered', async () => { 50 runTest(); 51 }, { once: true }); 52 53 async function runTest() { 54 await waitForCompositorReady(); 55 56 const anim = target.getAnimations()[0]; 57 58 // Scroll to exit 50%. 59 scroller.scrollTop = 800; 60 await waitForNextFrame(); 61 62 // After the update to the animation range, the positioning is exit 0% 63 target.classList.add('bounds-update'); 64 await waitForNextFrame(); 65 66 // Make sure change to animation range was properly picked up. 67 document.documentElement.classList.remove("reftest-wait"); 68 } 69 </script> 70 </body> 71 </html>