setting-effect.html (1237B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Setting the effect of a scroll-driven animation</title> 4 <link rel="help" 5 href="https://drafts.csswg.org/web-animations-1/#setting-the-associated-effect"> 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="testcommon.js"></script> 10 <style> 11 #scroller { 12 overflow-y: scroll; 13 height: 100px; 14 width: 100px; 15 } 16 17 #target { 18 width: 100%; 19 height: 1000%; 20 background-color: green; 21 } 22 </style> 23 <body> 24 25 <div id="scroller"> 26 <div id="target"></div> 27 </div> 28 29 <script> 30 'use strict'; 31 32 test(() => { 33 const scroller = document.getElementById("scroller"); 34 const target = document.getElementById("target"); 35 36 const timeline = new ScrollTimeline({ source: scroller }); 37 const animation = target.animate(null, { timeline }); 38 assert_percents_equal(animation.effect.getComputedTiming().endTime, 100); 39 40 animation.effect = new KeyframeEffect(target, { opacity: [0, 1] }); 41 assert_percents_equal(animation.effect.getComputedTiming().endTime, 100); 42 }, 'Setting the effect of scroll-driven animation computes percentage timing values.'); 43 44 </script> 45 </body>