| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <title>Add background-attachment:fixed during smooth scroll</title> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#dictdef-scrolltooptions"> |
| <link rel="match" href="add-background-attachment-fixed-during-smooth-scroll-ref.html"> |
| <script src="/common/reftest-wait.js"></script> |
| <style> |
| #container { |
| width: 200px; |
| height: 200px; |
| overflow: scroll; |
| background: linear-gradient(green, blue); |
| will-change: transform; |
| } |
| #content { |
| width: 7500px; |
| height: 7500px; |
| } |
| </style> |
| <script> |
| function startSmoothScroll() { |
| var scrollToOptions = {behavior: "smooth", top: 6000}; |
| container.scrollTo(scrollToOptions); |
| requestAnimationFrame(preventCompositedScrolling); |
| } |
| |
| function preventCompositedScrolling() { |
| container.style.backgroundAttachment = "fixed"; |
| requestAnimationFrame(waitForSmoothScrollEnd); |
| } |
| |
| function waitForSmoothScrollEnd() { |
| if (container.scrollTop == 6000) { |
| takeScreenshot(); |
| } else { |
| window.requestAnimationFrame(waitForSmoothScrollEnd); |
| } |
| } |
| |
| onload = () => { |
| requestAnimationFrame(startSmoothScroll); |
| } |
| </script> |
| <div id="container"> |
| <div id="content">Content</div> |
| </div> |