third_party/WebKit/LayoutTests/compositing/visibility/layer-visible-content.html

   1 <html>
   2 <head>
   3   <style type="text/css">
   4     body {
   5         margin: 0;
   6         overflow: hidden;
   7     }
   8
   9     .container {
  10         visibility: hidden;
  11         position: absolute;
  12         width: 200px;
  13         height: 200px;
  14         overflow: hidden;
  15         z-index: 0;
  16     }
  17
  18     .box {
  19         height: 100px;
  20         width: 100px;
  21     }
  22
  23     .indicator {
  24         position: absolute;
  25         top: 0;
  26         left: 0;
  27         background-color:red;
  28     }
  29
  30     .visible-box {
  31         background-color:green;
  32     }
  33     .composited {
  34         transform:translateZ(0);
  35         height: 10px;
  36         width: 10px;
  37     }
  38     pre {
  39         opacity: 0; /* hide in pixel result */
  40         height: 16px; /* avoid platform-dependent height difference of hidden text layer-tree */
  41     }
  42   </style>
  43   <script>
  44     if (window.testRunner)
  45         testRunner.dumpAsTextWithPixelResults();
  46
  47     function dumpLayers()
  48     {
  49         if (window.testRunner)
  50             document.getElementById('layer-tree').innerText = window.internals.layerTreeAsText(document);
  51     }
  52     window.addEventListener('load', dumpLayers, false);
  53   </script>
  54 </head>
  55
  56 <body>
  57   <!-- You should see a green box in the top left, and no red. -->
  58   <div class="indicator box"></div>
  59
  60   <div class="container">
  61     <div style="position: relative;">
  62       <div style="visibility:visible;">
  63         <div class="visible-box box">
  64           <div class="composited box"></div>
  65         </div>
  66       </div>
  67     </div>
  68   </div>
  69 <pre id="layer-tree">Layer tree goes here in DRT</pre>
  70 </body>
  71 </html>