<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
    <title>Scrolling tree should show slow-repaint reasons on the overflow and root nodes</title>
    <style>
        .scroller {
            background-color: silver;
            border: 1px solid black;
            padding: 10px;
            width: 400px;
            height: 300px;
            overflow: scroll;
        }
        
        .scrolling-content {
            height: 1000px;
        }
        
        .fixed-background {
            margin-top: 100px;
            width: 400px;
            height: 300px;
            background-image: linear-gradient(green, blue);
        }

        .adding .fixed-background {
            background-attachment: scroll;
        }

        .removing .fixed-background {
            background-attachment: fixed;
        }
        
        body.toggled .adding .fixed-background {
            background-attachment: fixed;
        }

        body.toggled .removing .fixed-background {
            background-attachment: scroll;
        }

        body.none .fixed-background {
            background-attachment: scroll;
        }
    </style>
    <script src="../../../resources/ui-helper.js"></script>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }
        
        async function doTest()
        {
            let output = '';
            UIHelper.delayFor(0);
            
            output += 'Before toggle:\n';
            if (window.internals)
                output += window.internals.scrollingStateTreeAsText() + '\n';

            document.body.classList.add('toggled');
            output += '\nAfter toggle:\n';
            if (window.internals)
                output += window.internals.scrollingStateTreeAsText() + '\n';

            document.body.classList.replace('toggled', 'none');
            output += '\nAfter removal:\n';
            if (window.internals)
                output += window.internals.scrollingStateTreeAsText() + '\n';

            document.getElementById('scrollingTree').innerText = output;
            if (window.testRunner)
                testRunner.notifyDone();
        }

        window.addEventListener('load', doTest, false);
    </script>
</head>
<body>
    <div class="scroller adding">
        <div class="scrolling-content">
            Scrolling content
            <div class="fixed-background">
                Fixed background
            </div>
        </div>
    </div>

    <div class="scroller removing">
        <div class="scrolling-content">
            Scrolling content
            <div class="fixed-background">
                Fixed background
            </div>
        </div>
    </div>

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