<html>
    <head>
        <style type="text/css">
            header {
                position: absolute;
                top: 20px;
                width: 200px;
                height: 50px;
                background-color: silver;
                -webkit-transform: translateZ(0);
            }
            
            header.hidden {
                visibility: hidden;
            }
            
            nav {
                height: 37px;
                overflow: hidden;
            }
            
            nav ul li {
                height: 50px;
                float: left;
                overflow: hidden;
            }
            
        </style>
        <script type="text/javascript">
            if (window.testRunner)
                testRunner.dumpAsText();

            function doTest() {
                var header = document.getElementsByTagName('header')[0];
                header.classList.toggle('hidden');
                if (window.testRunner && window.internals)
                    document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
            }
            window.addEventListener('load', doTest, false);
        </script>
    </head>

<body>
    <header> 
        <nav> 
            <ul>
                <li>Some text here</li>
            </ul>
        </nav> 
    </header>
    
    <pre id="layertree"></pre> 
</body>
</html>