background-change-during-smooth-scroll.html (1132B)
1 <!DOCTYPE html> 2 <title>Background change from opaque to transparent during smooth scroll</title> 3 <link rel=help href="https://drafts.csswg.org/cssom-view/#dictdef-scrolltooptions"> 4 <style> 5 #container { 6 width: 200px; 7 height: 200px; 8 overflow: scroll; 9 background: white; 10 } 11 #content { 12 width: 7500px; 13 height: 7500px; 14 } 15 </style> 16 <script src="/resources/testharness.js"></script> 17 <script src="/resources/testharnessreport.js"></script> 18 <script> 19 var t = async_test('background change during smooth scroll'); 20 21 function startSmoothScroll() { 22 var scrollToOptions = {behavior: "smooth", top: 6000}; 23 container.scrollTo(scrollToOptions); 24 requestAnimationFrame(preventCompositedScrolling); 25 } 26 27 function preventCompositedScrolling() { 28 container.style.background = "transparent"; 29 requestAnimationFrame(waitForSmoothScrollEnd); 30 } 31 32 function waitForSmoothScrollEnd() { 33 if (container.scrollTop == 6000) { 34 t.done(); 35 } else { 36 window.requestAnimationFrame(waitForSmoothScrollEnd); 37 } 38 } 39 40 onload = () => { 41 requestAnimationFrame(startSmoothScroll); 42 } 43 </script> 44 <div id="container"> 45 <div id="content">Content</div> 46 </div>