<html style="background-color: lightgray">
    <head>
        <style type="text/css">
            body {
                width: 100px;
                height: 100px;
                background-color: blue;
            }
            #underbody {
                position: fixed;
                z-index: -1;
                width: 200px;
                height: 200px;
                background-color: green;
                -webkit-transform: translateZ(0);
            }
        </style>
        <script type="text/javascript">
            if (window.testRunner)
                testRunner.dumpAsText();

            function doTest() {
                if (window.testRunner && window.internals)
                    document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
            }
            window.addEventListener('load', doTest, false);
        </script>
    </head>
    <!-- Composited body over the child div. -->
    <!-- Root <html> element has a background-color. -->
    <!-- Background for the body element is painted in this case. -->
    <!-- GraphicsLayer::contentsOpaque for the body layer should be false. -->
    <body>
        <!-- Box under the body. -->
        <div id="underbody"></div>

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