mirror of
https://github.com/servo/servo.git
synced 2025-06-26 18:14:34 +01:00
47 lines
1.2 KiB
HTML
47 lines
1.2 KiB
HTML
<!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">
|
|
<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-27000">
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<style>
|
|
#container {
|
|
width: 200px;
|
|
height: 200px;
|
|
overflow: scroll;
|
|
background: linear-gradient(green, blue);
|
|
will-change: scroll-position;
|
|
}
|
|
#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>
|