46 lines
1.1 KiB
HTML
46 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<title>Background change from opaque to transparent during smooth scroll</title>
|
|
<link rel=help href="https://drafts.csswg.org/cssom-view/#dictdef-scrolltooptions">
|
|
<style>
|
|
#container {
|
|
width: 200px;
|
|
height: 200px;
|
|
overflow: scroll;
|
|
background: white;
|
|
}
|
|
#content {
|
|
width: 7500px;
|
|
height: 7500px;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
var t = async_test('background change during smooth scroll');
|
|
|
|
function startSmoothScroll() {
|
|
var scrollToOptions = {behavior: "smooth", top: 6000};
|
|
container.scrollTo(scrollToOptions);
|
|
requestAnimationFrame(preventCompositedScrolling);
|
|
}
|
|
|
|
function preventCompositedScrolling() {
|
|
container.style.background = "transparent";
|
|
requestAnimationFrame(waitForSmoothScrollEnd);
|
|
}
|
|
|
|
function waitForSmoothScrollEnd() {
|
|
if (container.scrollTop == 6000) {
|
|
t.done();
|
|
} else {
|
|
window.requestAnimationFrame(waitForSmoothScrollEnd);
|
|
}
|
|
}
|
|
|
|
onload = () => {
|
|
requestAnimationFrame(startSmoothScroll);
|
|
}
|
|
</script>
|
|
<div id="container">
|
|
<div id="content">Content</div>
|
|
</div>
|