blob: 548415ea4326b973dbbcf24f7800ad46882565ae [file] [log] [blame]
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<style>
body {
margin: 0px;
height: 2000px;
width: 2000px;
}
#changer {
background-color: #FF7F7F;
height: 10px;
}
#anchor {
height: 1500px;
background-color: #84BE6A;
}
</style>
<div id="changer"></div>
<div id="anchor"></div>
<script>
var asyncTest = async_test("Verify smooth scroll interaction with scroll anchroing");
// The element that will change in height.
var ch;
// Initital scroll position.
var initialY = 10;
// Amount to smooth scroll by.
var userScrollY = 205;
// Amount to change the height of the element above the viewport.
var changerY = 100;
// End position: height of ch + userScroll.
var endY = 305;
var source = GestureSourceType.MOUSE_INPUT;
function scrollListener() {
if (window.scrollY == endY) {
asyncTest.done();
return;
}
if (ch.style.height != "100")
ch.style.height = changerY;
}
window.onload = async () => {
ch = document.getElementById("changer");
document.addEventListener("scroll", scrollListener);
// Smooth scroll.
smoothScroll(userScrollY, 100, 100, source, 'down', SPEED_INSTANT, false /* precise_scrolling_deltas */);
await raf();
document.getElementById('anchor').scrollIntoView();
}
</script>