view-timeline-with-delay-and-range.tentative.html (2752B)
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 { opacity: 0 } 15 to { opacity: 1 } 16 } 17 #scroller { 18 border: 10px solid lightgray; 19 overflow-y: scroll; 20 width: 300px; 21 height: 200px; 22 } 23 #target { 24 margin: 800px 0px; 25 width: 100px; 26 height: 100px; 27 z-index: -1; 28 background-color: green; 29 animation: anim auto linear; 30 animation-timeline: --t1; 31 view-timeline: --t1 block; 32 animation-range-start: entry 0%; 33 animation-range-end: entry 100%; 34 /* Sentinel value when in before or after phase of the animation. */ 35 opacity: 0.96875; 36 } 37 </style> 38 <body> 39 <div id=scroller> 40 <div id=target></div> 41 </div> 42 </body> 43 <script type="text/javascript"> 44 async function runTest() { 45 46 function assert_opacity_equals(expected, errorMessage) { 47 assert_approx_equals( 48 parseFloat(getComputedStyle(target).opacity), expected, 1e-6, 49 errorMessage); 50 } 51 52 promise_test(async t => { 53 await waitForNextFrame(); 54 const anim = document.getAnimations()[0]; 55 await anim.ready; 56 57 await waitForNextFrame(); 58 scroller.scrollTop = 650; 59 await waitForNextFrame(); 60 61 const baseOpacity = 0.96875; 62 // Delays are percentages. 63 const testData = [ 64 { delay: 0, endDelay: 0, opacity: 0.5 }, 65 { delay: 20, endDelay: 0, opacity: 0.375 }, 66 { delay: 0, endDelay: 20, opacity: 0.625 }, 67 { delay: 20, endDelay: 20, opacity: 0.5 }, 68 // Negative delays. 69 { delay: -25, endDelay: 0, opacity: 0.6 }, 70 { delay: 0, endDelay: -25, opacity: 0.4 }, 71 { delay: -25, endDelay: -25, opacity: 0.5 }, 72 // Stress tests with >= 100% total delay. Verify effect is inactive. 73 { delay: 100, endDelay: 0, opacity: baseOpacity }, 74 { delay: 0, endDelay: 100, opacity: baseOpacity }, 75 { delay: 100, endDelay: 100, opacity: baseOpacity } 76 ]; 77 78 testData.forEach(test => { 79 anim.effect.updateTiming({ 80 delay: CSS.percent(test.delay), 81 endDelay: CSS.percent(test.endDelay) 82 }); 83 assert_opacity_equals( 84 test.opacity, 85 `Opacity when delay=${test.delay} and endDelay=${test.endDelay}`); 86 }); 87 }, 'ViewTimeline with animation delays and range'); 88 } 89 90 window.onload = runTest; 91 92 </script> 93 </html>