filter.html | Explore in Territory

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                margin: 0;
            }
            .layer {
                position: absolute;
                top: 0;
                left: 0;
            }
            .container-box {
                margin: 10px;
                width: 100px;
                height: 100px;
                overflow: hidden;
            }
            .box {
                width: 100px;
                height: 100px;
                background-color: green;
            }
            .composited {
                will-change: transform;
            }
            .filter-blur {
                -webkit-filter: blur(10px);
            }
            .filter-opacity {
                -webkit-filter: opacity(50%);
            }
        </style>
        <script type="text/javascript">
            if (window.testRunner)
                testRunner.dumpAsText();

            function doTest() {
                if (window.testRunner && window.internals)
                    document.getElementById('layertree').innerText = internals.layerTreeAsText(document);
            }
            window.addEventListener('load', doTest, false);
        </script>
    </head>
    <body>
        <!-- There should be 2 boxes with different shades of green:
            Box 1. There should be a white gradient on the margins.
            Box 2. Light green box.
        -->
        <!-- GraphicsLayer::contentsOpaque for these boxes should be false. -->
        <div class="composited container-box">
            <div class="box filter-blur"></div>
        </div>
        <div class="composited container-box">
            <div class="box filter-opacity"></div>
        </div>
        <pre id="layertree"></pre>
    </body>
</html>
chromium/third_party/blink/web_tests/compositing/contents-opaque/filter.html
