<!DOCTYPE html>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest()
{
    outer.style.zIndex = 'auto';
    inner.style.display = 'none';
}

runRepaintAndPixelTest();
</script>
<div style="position: absolute; top: 10px; left: 10px; height: 100px;">
    There should be one green box below. A red box may be seen briefly, but the page should settle
    on showing only the one green box. Intent is to ensure that we accurately repaint the red box
    region when (1) the green box containing the red box ceases to be a stacking context, and (2)
    the red box is hidden.
</div>
<div id="outer" style="background-color: green; height: 100px; width: 100px; backface-visibility: hidden; position: relative; z-index: 1; top: 270px; left: 270px;">
    <div id="inner" style="background-color: red; height: 100px; width: 100px; position: relative;">
    </div>
</div>