| <!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> |
