mirror of
https://github.com/servo/servo.git
synced 2025-06-25 09:34:32 +01:00
65 lines
1.5 KiB
HTML
65 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>Layout Instability: shift offscreen with scroll anchoring and natural scroll</title>
|
|
<link rel="help" href="https://wicg.github.io/layout-instability/" />
|
|
<style>
|
|
#scroller {
|
|
overflow: scroll;
|
|
left: 20px;
|
|
top: 20px;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
#spacer {
|
|
height: 3000px;
|
|
}
|
|
#ch {
|
|
position: relative;
|
|
background: yellow;
|
|
left: 10px;
|
|
top: 100px;
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
#offscreenElement {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: lightblue;
|
|
}
|
|
#onscreenElement {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: lightgreen;
|
|
}
|
|
</style>
|
|
<div id="scroller">
|
|
<div id="offscreenElement"></div>
|
|
<div id="spacer"></div>
|
|
<div id="onscreenElement"></div>
|
|
</div>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="resources/util.js"></script>
|
|
<script>
|
|
|
|
promise_test(async () => {
|
|
const watcher = new ScoreWatcher;
|
|
|
|
// Wait for the initial render to complete.
|
|
await waitForAnimationFrames(2);
|
|
|
|
// Scroll to show #onscreenElement.
|
|
scroller.scrollTop = 3250;
|
|
await waitForAnimationFrames(1);
|
|
|
|
// Resize #offscreernElement and scroll a bit.
|
|
// Visually, #onscreenElement will move by 20px.
|
|
offscreenElement.style.height = '250px';
|
|
scroller.scrollBy(0, 20);
|
|
|
|
await waitForAnimationFrames(3);
|
|
// There should be no reported layout shift, because to the user it looks
|
|
// like a natural scroll by 20px.
|
|
assert_equals(watcher.score, 0);
|
|
}, "Offscreen shift with scroll annchoring and natural scroll not counted.");
|
|
|
|
</script>
|