stacking-context-lost.html 897 B

123456789101112131415161718192021
  1. <!DOCTYPE html>
  2. <script src="resources/text-based-repaint.js"></script>
  3. <script>
  4. function repaintTest()
  5. {
  6. outer.style.zIndex = 'auto';
  7. inner.style.display = 'none';
  8. }
  9. runRepaintAndPixelTest();
  10. </script>
  11. <div style="position: absolute; top: 10px; left: 10px; height: 100px;">
  12. There should be one green box below. A red box may be seen briefly, but the page should settle
  13. on showing only the one green box. Intent is to ensure that we accurately repaint the red box
  14. region when (1) the green box containing the red box ceases to be a stacking context, and (2)
  15. the red box is hidden.
  16. </div>
  17. <div id="outer" style="background-color: green; height: 100px; width: 100px; backface-visibility: hidden; position: relative; z-index: 1; top: 270px; left: 270px;">
  18. <div id="inner" style="background-color: red; height: 100px; width: 100px; position: relative;">
  19. </div>
  20. </div>