Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<meta charset="utf-8">
<script src="apz_test_utils.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<style>
#scroller {
overflow: scroll;
width: 300px;
height: 300px;
position: relative;
}
#target {
width: 100%;
height: 40px;
position: absolute;
top: 300px;
left: 10px;
background-color: blue;
}
#spacer {
height: 1000px;
}
</style>
<div id="scroller">
<div id="target"></div>
<div id="spacer"></div>
</div>
<script>
"use strict";
async function test() {
// Trigger a smooth scroll animation which will be clobbered by a subsequent
// instant scroll operation.
const scrollEventPromise = promiseOneEvent(scroller, "scroll");
scroller.scrollTo({ top: 300, behavior: "smooth" });
await scrollEventPromise;
// While the smooth scroll is running, do an instant scroll.
target.scrollIntoView();
is(scroller.scrollTop, 300);
is(scroller.scrollLeft, 10);
// At the same time, shrink the target element width so that it will clamp
// the scroll position.
target.style.width = "calc(100% - 1px)";
// Wait for the above two scroll operations to have been reflected in APZ.
// While reflecting the first instant scroll operation, the smooth scroll
// animation should be cancelled. Cancelling the animation will trigger a
// repaint request with eVisualUpdate, thus the updated scroll position will
// be reflected back to the main thread.
await promiseApzFlushedRepaints();
is(scroller.scrollTop, 300);
is(scroller.scrollLeft, 9);
}
waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);
</script>