background-clip.html | Explore in Territory

<html>
    <head>
        <style type="text/css">
            .box {
                width: 80px;
                height: 80px;
                margin: 5px;
                border-style: solid;
                border-width: 5px;
                padding: 5px;
                background-color: green;
            }
            .composited {
                will-change: transform;
            }
            .padding-clip {
                background-clip: padding-box;
            }
            .content-clip {
                background-clip: content-box;
            }
        </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>
        <!-- Box with border-box background-clip. -->
        <!-- GraphicsLayer::contentsOpaque for this box should be true. -->
        <div class="box composited"></div>
        <!-- Box with padding-box background-clip. -->
        <!-- GraphicsLayer::contentsOpaque for this box should be false. -->
        <div class="box composited padding-clip"></div>
        <!-- Box with content-box background-clip. -->
        <!-- GraphicsLayer::contentsOpaque for this box should be false. -->
        <div class="box composited content-clip"></div>

        <pre id="layertree"></pre>
    </body>
</html>
chromium/third_party/blink/web_tests/compositing/contents-opaque/background-clip.html
