<!DOCTYPE html>
<style>
body {
margin: 0;
}
#indicator {
position: absolute;
top: 200px;
width: 100px;
height: 100px;
background-color: red;
}
#block {
position: relative;
width: 100px;
height: 100px;
top: 100px;
background-color: green;
}
#composited-non-stacking-context {
width: 20px;
height: 20px;
background-color: white;
backface-visibility: hidden;
}
</style>
<div id="indicator">The test fails if you see this.</div>
<div id="composited-non-stacking-context">
<div id="block">The test passes if there is no red.</div>
</div>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function() {
document.getElementById("block").style.top = "200px";
}, true);
</script>