<!DOCTYPE html>
<html>
    <head>
        <script src="../../resources/check-layout.js"></script>
        <script>
            if (window.testRunner)
                testRunner.waitUntilDone();

            function runTest() {
                document.getElementById("container").style.width="110%";
                document.getElementById("margin").style.left="200px";
                document.getElementById("container").style.width="100%";
                setTimeout( function() {
                    document.getElementById("margin").style.left="12px";
                    window.checkLayout("#scrollable",document.getElementById("output"));
                    if (window.testRunner)
                        testRunner.notifyDone();
                },0);
            }
        </script>
        <style>
            #spacer {
                width: 100px;
                height: 100px;
                background: blue;
            }
            #scrollable {
                background: white;
                border: 1px solid black;
                overflow: auto;
                position: relative;
                width: 250px;
            }
            #container {
                position:relative;
                display:inline-block;
                width:100%;
                height:130px;
            }
            #margin {
                position: absolute;
                width: 200px;
                top: 12px;
                margin-right: 12px;
                left: 12px;
                height: 110px;
            }
        </style>
    </head>
    <body onload="runTest();">
         <p>Tests that the div element with id=scrollable scroll width is 250.</p>
        <div id="scrollable" data-expected-scroll-width="250">
            <div id="container" style="width: 100%;">
                <div id="margin" style="left: 12px;">
                    <div id="spacer" style="height: 100px; width: 100%;">
                    </div>
                </div>
            </div>
        </div>
        <div id="output"></div>
    </body>
</html>