<!DOCTYPE html>

<html>
<head>
  <style type="text/css" media="screen">
    .hidden {
        visibility: hidden;
    }

    .visible {
        visibility: visible;
    }

    .box {
        width: 300px;
        height: 300px;
    }

    .composited {
        -webkit-transform: translatez(0);
    }

    .topLeft {
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .stackingContext {
        position: absolute;
        z-index: 5;
    }

    .red {
        background-color: red;
    }

    .green {
        background-color: green;
    }
  </style>
</head>
<body>
  <!--
    https://bugs.webkit.org/show_bug.cgi?id=108118

    The boolean check RenderLayerBacking::hasVisibleNonCompositingDescendant()
    was actually not checking for visible content beyond children layers. As a
    result, composited layers sometimes did not see that they actually have
    visible content in a descendant RenderLayer. This test recreates that
    scenario by using visibility:hidden stacking contexts to create a deeper
    hierarchy of RenderLayers within on composited layer.

    The green box should be visible, hiding the red box.
  -->
  <div>

    <div class="topLeft red box">
    </div>

    <div class="composited topLeft hidden box">
      <div class="hidden stackingContext">
        <div class="hidden stackingContext">
          <div class="visible green box">
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
</html>