blob: b369623c82271bfb922c471d8e2511edc6a29526 [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
<style>
#scroller {
width: 500px;
height: 500px;
border: 1px solid black;
overflow: scroll;
margin: 10px;
will-change: transform;
}
.filler {
height: 160px;
width: 10px;
}
.clipper {
width: 300px;
height: 400px;
margin: 10px;
overflow: hidden;
border: 2px solid black;
position: relative;
will-change: transform;
}
.controls-bar-bottom {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
z-index: 0;
}
.above, .below {
position: absolute;
width: 100%;
height: 100%;
}
.above {
background-color: green;
}
.below {
background-color: red;
will-change: transform;
}
</style>
<script>
window.addEventListener('load', () => {
document.getElementById('scroller').scrollTop = 95;
}, false);
</script>
</head>
<body>
<div id="scroller">
<div class="filler"></div>
<div class="clipper">
<div class="controls-bar-bottom">
<div class="below"></div>
<div class="above"></div>
</div>
</div>
<div class="filler"></div>
</div>
</div>
</body>
</html>