<html> | |
<head> | |
<style> | |
header { | |
position: fixed; | |
left: 0px; | |
right: 0px; | |
top: 0px; | |
height: 50px; | |
width: 400px; | |
background-color: silver; | |
} | |
.container | |
{ | |
position: absolute; | |
left: 50px; | |
top: 30px; | |
background-color: silver; | |
overflow-x: hidden; | |
overflow-y: auto; | |
width: 300px; | |
z-index: 1; | |
} | |
.child { | |
width: 100%; | |
height: 50px; | |
background-color: green; | |
} | |
body.changed .composited { | |
transform: translateZ(0); | |
} | |
</style> | |
<script> | |
if (window.testRunner) | |
testRunner.waitUntilDone(); | |
window.addEventListener('load', () => { | |
setTimeout(() => { | |
document.body.classList.add('changed'); | |
if (window.testRunner) | |
testRunner.notifyDone(); | |
}, 0) | |
}, false); | |
</script> | |
</head> | |
<body> | |
<header> | |
| |
<div class="container"> | |
<div class="child"> </div> | |
<div class="child"> </div> | |
<div class="composited child"> </div> | |
</div> | |
</header> | |
</body> | |
</html> |