<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
position: absolute;
overflow: scroll;
-webkit-perspective: 100px;
-webkit-transform-style: preserve-3d;
}
.child {
position: absolute;
top: 65px;
width: 60px;
height: 200px;
}
.first {
left: 0px;
background-color: green;
transform: translateZ(10px);
}
.second {
left: 65px;
background-color: blue;
transform: translateZ(20px);
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsText();
if (window.internals) {
internals.settings.setPreferCompositingToLCDTextEnabled(true);
}
function runTest() {
var pre = document.createElement('pre');
if (!window.internals) {
var description = "This test ensures that the accelerated overflow "
+ "scrolling machinery is not invoked for the body element.";
pre.innerHTML = description;
} else {
document.body.offsetTop;
pre.innerHTML = internals.layerTreeAsText(document);
}
document.body.appendChild(pre);
}
window.onload = runTest;
</script>
</head>
<body>
<div class="container">
<div class="child first"> </div>
<div class="child second"> </div>
</div>
</body>
</html>