view-timeline-with-transform-on-subject.html (2078B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="support/testcommon.js"></script> 10 <title>Animation range and delay</title> 11 </head> 12 <style type="text/css"> 13 @keyframes anim { 14 from { transform: scaleX(0) translateY(0); } 15 to { transform: scaleX(1) translatey(50vh); } 16 } 17 #scroller { 18 border: 10px solid lightgray; 19 overflow-y: scroll; 20 overflow-x: hidden; 21 width: 300px; 22 height: 200px; 23 } 24 .spacer { 25 height: 200px; 26 } 27 #target { 28 height: 50px; 29 background-color: green; 30 animation: anim auto both linear; 31 animation-timeline: view(); 32 animation-range-start: contain 0%; 33 animation-range-end: contain 100%; 34 } 35 </style> 36 <body> 37 <div id=scroller> 38 <div class="spacer"></div> 39 <div id="target"></div> 40 <div class="spacer"></div> 41 </div> 42 </body> 43 <script type="text/javascript"> 44 async function runTest() { 45 function assert_progress_equals(anim, expected, errorMessage) { 46 assert_approx_equals( 47 anim.effect.getComputedTiming().progress, 48 expected, 1e-6, errorMessage); 49 } 50 51 promise_test(async t => { 52 await waitForNextFrame(); 53 const anim = document.getAnimations()[0]; 54 await anim.ready; 55 await waitForNextFrame(); 56 57 // @ contain 0% 58 scroller.scrollTop = 50; 59 await waitForNextFrame(); 60 assert_progress_equals(anim, 0, 'progress at contain 0%'); 61 62 // @ contain 50% 63 scroller.scrollTop = 125; 64 await waitForNextFrame(); 65 assert_progress_equals(anim, 0.5, 'progress at contain 50%'); 66 67 // @ contain 100% 68 scroller.scrollTop = 200; 69 await waitForNextFrame(); 70 assert_progress_equals(anim, 1, 'progress at contain 100%'); 71 }, 'ViewTimeline use untransformed box for range calculations'); 72 } 73 74 window.onload = runTest; 75 </script> 76 </html>