<style>
body {
margin: 0;
}
.container {
width: 200px;
height: 2000px;
}
.composited {
/* Forces promotion without creating a stacking context. */
backface-visibility: hidden;
}
.outerSticky {
position: sticky;
top: 50px;
background-color: green;
width: 200px;
height: 200px;
}
.middleSticky {
position: sticky;
top: 100px;
background-color: yellow;
width: 200px;
height: 100px;
}
.innerSticky {
position: sticky;
top: 125px;
background-color: red;
width: 200px;
height: 50px;
}
</style>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function finishTest() {
window.scrollTo(0, 200);
if (window.testRunner)
testRunner.notifyDone();
}
window.addEventListener('load', function() {
requestAnimationFrame(function() {
requestAnimationFrame(finishTest);
});
});
</script>
<div class="container">
<div class="outerSticky">
<div class="middleSticky composited">
<div class="innerSticky composited"></div>
</div>
</div>
</div>