<!DOCTYPE html>
<style>
    body {
        margin: 0 0 0 200px;
        padding: 10;
        border: 5px solid #00f;
        width: 800px;
    }
    .flo {
        float: right;
        background-color: #cf9;
        width: 300px;
    }
    .box {
        margin-left: -200px;
        border: 5px solid #00f;
        overflow: auto;
        height: 20px;
    }
</style>
<script src="../../../resources/check-layout.js"></script>
<body>
    <p> A box with negative margin should drop it in order to fit next to floats rather than push below the floats. It should drop the margin even when there is 
        margin available in the containing block for the box to expand into.
        The behaviour here is not defined by CSS2.1 so this behaviour is for compatibility with IE and FF. IE expands the table into the margin of the parent,
        FF does not. We match FF. Presto expanded all the boxes into parent's margin.</p>
    <div class="flo">float</div>
    <div class="box" data-expected-width=500>margin-left:-200px; overflow:auto;</div>
    <div class="flo">float</div>
    <div class="box" style="overflow: hidden" data-expected-width=500>margin-left:-200px; overflow:hidden;</div>
    <div class="flo">float</div>
    <div class="box" style="margin-left: 0" data-expected-width=500>margin-left:0; overflow:auto;</div>
    <div class="flo">float</div>
    <div class="box" style="overflow: visible" data-expected-width=1000>margin-left:-200px; overflow:visible;</div>
    <div class="flo">float</div>
    <div class="box" style="overflow: visible; display: table" data-expected-width=500>
        margin-left:-200px; display:table;
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <script>checkLayout('.box')</script>
</body>