display-inline-block-scrollbar.html

<!DOCTYPE html>
<script src="../../resources/check-layout.js"></script>
<script>
    onload = function() {
        document.getElementById('container').style.width = '110%';
        document.getElementById('margin').style.left = '200px';
        document.getElementById('container').style.width = '100%';
        var forceLayout = document.body.offsetTop;
        document.getElementById('margin').style.left = '12px';
        window.checkLayout('#scrollable', document.getElementById('output'));
    }
</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>
Test for crbug.com/316549: This test passes if the scrollable div has width=250.<br/>
<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>
chromium/third_party/blink/web_tests/fast/css/display-inline-block-scrollbar.html
