72 lines
1.8 KiB
HTML
72 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<script src="/tests/SimpleTest/EventUtils.js"></script>
|
|
<script src="/tests/SimpleTest/NativeKeyCodes.js"></script>
|
|
<script src="/tests/SimpleTest/paint_listener.js"></script>
|
|
<script src="apz_test_utils.js"></script>
|
|
<script src="apz_test_native_event_utils.js"></script>
|
|
<title>What happens if main thread scrolls?</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.container {
|
|
width: 100vw;
|
|
height: 10vh;
|
|
min-height: 300px;
|
|
display: flex;
|
|
}
|
|
|
|
#stream {
|
|
width: 300px;
|
|
overflow-y: scroll;
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<div id="stream"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
async function setup() {
|
|
// Setup a scroll container having 50 child elements, and scroll to
|
|
// the bottom.
|
|
for (let i = 0 ; i < 50; i++) {
|
|
const el = document.createElement("div");
|
|
el.style.height = "20px";
|
|
|
|
stream.append(el);
|
|
}
|
|
|
|
const scrollPromise = promiseOneEvent(stream, "scroll");
|
|
stream.scrollTo(0, stream.scrollHeight);
|
|
await scrollPromise;
|
|
await promiseApzFlushedRepaints();
|
|
}
|
|
|
|
async function test() {
|
|
await setup();
|
|
|
|
// Remove the first element so that a scroll anchor adjustment happens,
|
|
// at the same time the scrollable range shrinks.
|
|
stream.firstElementChild.remove();
|
|
|
|
await promiseApzFlushedRepaints();
|
|
|
|
// The scroll offset on the main-thread is the expected value.
|
|
const expectedScrollOffset = stream.scrollTop;
|
|
|
|
// Collect sampled offsets on the compositor.
|
|
const records = collectSampledScrollOffsets(stream);
|
|
|
|
ok(records.some(record => SpecialPowers.wrap(record).scrollOffsetY == expectedScrollOffset),
|
|
`There should be ${expectedScrollOffset} in [${records.map(record => SpecialPowers.wrap(record).scrollOffsetY)}]`);
|
|
}
|
|
|
|
waitUntilApzStable()
|
|
.then(test)
|
|
.then(subtestDone, subtestFailed);
|
|
</script>
|
|
</html>
|