| <!-- Based on fast/repaint/stacking-context-lost.html --> |
| <!DOCTYPE html> |
| <script src="resources/paint-invalidation-test.js"></script> |
| <script> |
| window.expectedPaintInvalidationObjects = [ |
| "LayoutBlockFlow (relative positioned) DIV id='outer'", |
| "LayoutBlockFlow (relative positioned) DIV id='inner'", |
| "LayoutBlockFlow (relative positioned) DIV id='inner'", |
| "LayoutBlockFlow (relative positioned) DIV id='outer'", |
| ]; |
| function paintInvalidationTest() |
| { |
| outer.style.zIndex = 'auto'; |
| inner.style.display = 'none'; |
| } |
| |
| runPaintInvalidationTest(); |
| </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> |