blob: 7953ad1d9be19d520c67bcc759386e615e0a428c [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] --><html>
<html>
<head>
<style>
#scroller {
width: 400px;
height: 400px;
margin: 20px;
overflow: scroll;
will-change: z-index;
border: 1px solid black;
}
.contents {
height: 300%;
}
.rating {
position: relative;
background-color: green;
padding: 10px;
}
.wrapper {
left: 100px;
top: 100px;
background-color: rgba(128, 128, 128, 0.2)
}
.behind {
position: absolute;
top: 160px;
width: 50px;
height: 50px;
background-color: silver;
}
.composited {
transform: translateZ(0);
}
.filler {
height: 200px;
}
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
window.addEventListener('load', () => {
setTimeout(() => {
window.internals.startTrackingRepaints();
document.getElementById('scroller').scrollTop = 80;
document.getElementById('layers').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
testRunner.notifyDone();
}, 50);
}, false);
</script>
</head>
<body>
<div id="scroller">
<div class="composited behind"></div>
<div class="contents">
<div class="filler"></div>
<div class="rating">&nbsp;</div>
<div class="filler"></div>
</div>
</div>
<pre id="layers"></pre>
</body>
</html>