<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
.composited {
height: 30px;
width: 30px;
background: gray;
will-change: transform;
}
.overflow {
position: absolute;
top: 20px;
left: 20px;
overflow-y: scroll;
height: 200px;
width: 300px;
border: solid;
}
.box {
position: relative;
height: 100px;
width: 200px;
margin: 55px 20px;
background-color: blue;
font-size: 18pt;
text-align: center;
}
#results {
margin-top: 200px;
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function doTest()
{
window.setTimeout(function() {
var scrollDiv = document.getElementById('scroller');
scrollDiv.scrollTop = 49;
if (window.testRunner) {
document.getElementById('results').innerText = internals.layerTreeAsText(document);
testRunner.notifyDone();
}
}, 150);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<div class="composited"></div>
<div id="scroller" class="overflow">
<div class="box" style="width: 200px";></div>
<div class="box" style="width: 210px;"></div>
</div>
<pre id="results"></pre>
</body>
</html>