<!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 100px;
        height: 100px;
    }

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

    .clips {
        overflow: hidden;
    }

    .container {
        position: absolute;
        left: 0px;
        top: 0px;
        overflow: hidden;
        -webkit-transform: translateX(110px);
    }

    .under {
        background-color: red;
        position:absolute;
        left: 0px;
        top: 0px;
    }

    .over {
        background-color: green;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    #layertree {
        position: absolute;
        left: 10000px;
        top: 0px;
    }

    body {
        overflow: hidden;
    }
</style>

<script>
    if (window.testRunner) {
        testRunner.dumpAsText(true);
        window.addEventListener('load', function() {
            document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
        }, false);
    }
</script>
</head>

<body>
  <!-- Tests that CSS transforms and clipping work properly together. -->
  <!-- This reproduces an error reported in https://bugs.webkit.org/show_bug.cgi?id=76486
       where the clipRect was not accounting for transforms. As a result, in the overlapMap,
       the intersection of clipRect and layer bounds becomes empty, and layers on top do not
       get properly composited. If this happens, the red "under composited" layer will be
       exposed, because the "over" div does not become a composited layer. -->
  <div class="container clips">
    <div class="under composited"></div>
    <div class="over"></div>
  </div>

  <pre id="layertree"></pre>

</body>

</html>