clip-child-by-non-stacking-ancestor.html

<!DOCTYPE html>

<html>
<head>
    <style type="text/css" media="screen">
        .container {
            will-change: transform;
            background-color: silver;
            width: 100px;
            height: 100px;
        }

        /* create a render layer with no stacking context */
        .clip {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }

        /* being clipped, this shouldn't affect container's composited bounds */
        .box {
            position: absolute;
            top: 100px;
            left: 100px;
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>
</head>
<script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function doTest()
    {
        if (window.testRunner) {
            document.getElementById('layertree').innerText = internals.layerTreeAsText(document);
            testRunner.notifyDone();
        }
    }

    window.addEventListener('load', doTest, false);
</script>
<body>
    <!-- the composited bounds of container should be 100px, not 200px -->
    <div class="container">
        <div class="clip">
            <div class="box"></div>
        </div>
    </div>
    <pre id="layertree"></pre>
</body>
</html>
chromium/third_party/blink/web_tests/compositing/clip-child-by-non-stacking-ancestor.html
