scroll-timeline-with-percent-delay.tentative.html (2716B)
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: scroll(); 31 /* Sentinel value when in before or after phase of the animation. */ 32 opacity: 0.96875; 33 } 34 </style> 35 <body> 36 <div id=scroller> 37 <div id=target></div> 38 </div> 39 </body> 40 <script type="text/javascript"> 41 async function runTest() { 42 43 function assert_opacity_equals(expected, errorMessage) { 44 assert_approx_equals( 45 parseFloat(getComputedStyle(target).opacity), expected, 1e-6, 46 errorMessage); 47 } 48 49 promise_test(async t => { 50 await waitForNextFrame(); 51 const anim = document.getAnimations()[0]; 52 await anim.ready; 53 54 await waitForNextFrame(); 55 scroller.scrollTop = 56 (scroller.scrollHeight - scroller.clientHeight) / 2; 57 await waitForNextFrame(); 58 59 const baseOpacity = 0.96875; 60 // Delays are percentages. 61 const testData = [ 62 { delay: 0, endDelay: 0, opacity: 0.5 }, 63 { delay: 20, endDelay: 0, opacity: 0.375 }, 64 { delay: 0, endDelay: 20, opacity: 0.625 }, 65 { delay: 20, endDelay: 20, opacity: 0.5 }, 66 // // Negative delays. 67 { delay: -25, endDelay: 0, opacity: 0.6 }, 68 { delay: 0, endDelay: -25, opacity: 0.4 }, 69 { delay: -25, endDelay: -25, opacity: 0.5 }, 70 // Stress tests with >= 100% total delay. Verify effect is inactive. 71 { delay: 100, endDelay: 0, opacity: baseOpacity }, 72 { delay: 0, endDelay: 100, opacity: baseOpacity }, 73 { delay: 100, endDelay: 100, opacity: baseOpacity } 74 ]; 75 76 testData.forEach(test => { 77 anim.effect.updateTiming({ 78 delay: CSS.percent(test.delay), 79 endDelay: CSS.percent(test.endDelay) 80 }); 81 assert_opacity_equals( 82 test.opacity, 83 `Opacity when delay=${test.delay} and endDelay=${test.endDelay}`); 84 }); 85 }, 'ScrollTimeline with animation delays as percentages'); 86 } 87 88 window.onload = runTest; 89 90 </script> 91 </html>