third_party/WebKit/LayoutTests/compositing/geometry/bounds-ignores-hidden-dynamic-negzindex.html

   1 <style>
   2     body {
   3         overflow: hidden;
   4     }
   5     .composited {
   6         transform: translateZ(0);
   7     }
   8
   9     .box {
  10         width: 100px;
  11         height: 100px;
  12         background-color: blue;
  13     }
  14
  15     img {
  16         background-color: black;
  17         width: 100px;
  18         height: 100px;
  19         border: none !important;
  20     }
  21
  22     div.inline {
  23         width: 100px;
  24         height: 100px;
  25         background-color: red;
  26     }
  27     img.to-visible {
  28         visibility: hidden;
  29     }
  30     body.changed img.to-visible {
  31         visibility: visible;
  32     }
  33
  34     img.to-hidden {
  35         visibility: visible;
  36     }
  37     body.changed img.to-hidden {
  38         visibility: hidden;
  39     }
  40
  41     #layers {
  42         opacity: 0; /* hide from pixel result */
  43     }
  44
  45     .box {
  46         width: 100px;
  47         height: 100px;
  48         background-color: green;
  49     }
  50
  51     .indicator {
  52         position: absolute;
  53         left: 0;
  54         z-index: 1;
  55     }
  56 </style>
  57 <script>
  58     if (window.testRunner) {
  59         testRunner.dumpAsTextWithPixelResults();
  60         testRunner.waitUntilDone();
  61     }
  62
  63     function doTest()
  64     {
  65         window.setTimeout(function() {
  66             document.body.classList.add('changed');
  67             if (window.testRunner) {
  68                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  69                 testRunner.notifyDone();
  70             }
  71         }, 0);
  72     }
  73     window.addEventListener('load', doTest, false);
  74 </script>
  75 <body>
  76     <!-- You should see no red. -->
  77     <div class="indicator box" style="top: 0px"></div>
  78     <div class="indicator box" style="top: 250px"></div>
  79
  80     <div style="position: absolute; left: 0px; top: 0px; z-index: 0; " class="composited">
  81         <div class="inline"></div>
  82         <img style="position: absolute; left: 50px; top: 50px; z-index: -1;">
  83         <img style="position: absolute; left: 400px; top: 150px; z-index: 0;" class="to-visible">
  84     </div>
  85
  86     <div style="position: absolute; left: 0px; top: 250px; z-index: 0; " class="composited">
  87         <div class="inline"></div>
  88         <img style="position: absolute; left: 50px; top: 50px; z-index: -1;">
  89         <img style="position: absolute; left: 400px; top: 150px; z-index: 0;" class="to-hidden">
  90     </div>
  91
  92 <pre id="layers">Layer tree goes here in DRT</pre>
  93 </body>