third_party/WebKit/LayoutTests/compositing/visibility/visibility-on-distant-descendant.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     .hidden {
   7         visibility: hidden;
   8     }
   9
  10     .visible {
  11         visibility: visible;
  12     }
  13
  14     .box {
  15         width: 300px;
  16         height: 300px;
  17     }
  18
  19     .composited {
  20         transform: translatez(0);
  21     }
  22
  23     .topLeft {
  24         position: absolute;
  25         top: 0px;
  26         left: 0px;
  27     }
  28
  29     .stackingContext {
  30         position: absolute;
  31         z-index: 5;
  32     }
  33
  34     .red {
  35         background-color: red;
  36     }
  37
  38     .green {
  39         background-color: green;
  40     }
  41   </style>
  42 </head>
  43 <body>
  44   <!--
  45     https://bugs.webkit.org/show_bug.cgi?id=108118
  46     (Note: CompositedLayerMapping was formerly known as LayerBacking)
  47
  48     The boolean check CompositedLayerMapping::hasVisibleNonCompositingDescendant()
  49     was actually not checking for visible content beyond children layers. As a
  50     result, composited layers sometimes did not see that they actually have
  51     visible content in a descendant Layer. This test recreates that
  52     scenario by using visibility:hidden stacking contexts to create a deeper
  53     hierarchy of Layers within on composited layer.
  54
  55     The green box should be visible, hiding the red box.
  56   -->
  57   <div>
  58
  59     <div class="topLeft red box">
  60     </div>
  61
  62     <div class="composited topLeft hidden box">
  63       <div class="hidden stackingContext">
  64         <div class="hidden stackingContext">
  65           <div class="visible green box">
  66           </div>
  67         </div>
  68       </div>
  69     </div>
  70
  71   </div>
  72 </body>
  73 </html>