<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 1000px;
        }
        
        iframe {
            display: block;
            margin: 10px;
            border: 5px solid black;
        }
        
        #container {
            position: absolute;
            top: 10px;
            border: 4px solid green;
            padding: 10px;
        }
        
        #container.fixed {
            position: fixed;
            top: 10px;
            border: 4px solid orange;
        }
        
        #tree {
            position: absolute;
            top: 375px;
        }
    </style>
    <script>
        if (window.testRunner) {
            testRunner.waitUntilDone();
            testRunner.dumpAsText();
            window.internals.settings.setScrollingTreeIncludesFrames(true);
        }

        function startTest()
        {
            window.setTimeout(function() {
                document.getElementById('container').classList.toggle('fixed');

                if (window.internals)
                    document.getElementById('tree').innerText = internals.scrollingStateTreeAsText();

                if (window.testRunner)
                    testRunner.notifyDone();

            }, 0);
        }
        
        window.addEventListener('load', startTest, false);
    </script>
</head>
<body>
    
    <div id="container">
        <iframe src="resources/doc-with-sticky.html" scrolling="no" width="500" height="300"></iframe>
    </div>
<pre id="tree">Scrolling tree goes here</pre>
</body>
</html>