third_party/WebKit/LayoutTests/paint/invalidation/spv2/stacking-context-lost.html

   1 <!-- Based on fast/repaint/stacking-context-lost.html -->
   2 <!DOCTYPE html>
   3 <script src="resources/paint-invalidation-test.js"></script>
   4 <script>
   5 window.expectedPaintInvalidationObjects = [
   6     "LayoutBlockFlow (relative positioned) DIV id='outer'",
   7     "LayoutBlockFlow (relative positioned) DIV id='inner'",
   8     "LayoutBlockFlow (relative positioned) DIV id='inner'",
   9     "LayoutBlockFlow (relative positioned) DIV id='outer'",
  10 ];
  11 function paintInvalidationTest()
  12 {
  13     outer.style.zIndex = 'auto';
  14     inner.style.display = 'none';
  15 }
  16
  17 runPaintInvalidationTest();
  18 </script>
  19 <div style="position: absolute; top: 10px; left: 10px; height: 100px;">
  20     There should be one green box below. A red box may be seen briefly, but the page should settle
  21     on showing only the one green box. Intent is to ensure that we accurately repaint the red box
  22     region when (1) the green box containing the red box ceases to be a stacking context, and (2)
  23     the red box is hidden.
  24 </div>
  25 <div id="outer" style="background-color: green; height: 100px; width: 100px; backface-visibility: hidden; position: relative; z-index: 1; top: 270px; left: 270px;">
  26     <div id="inner" style="background-color: red; height: 100px; width: 100px; position: relative;">
  27     </div>
  28 </div>