| <!DOCTYPE html> |
| <style> |
| body { |
| padding: 10; |
| width: 800px; |
| } |
| .float { |
| background-color: green; |
| width: 150px; |
| height: 150px; |
| } |
| .right { float: right; } |
| .left { float: left; } |
| .box { |
| overflow: hidden; |
| background-color: blue; |
| } |
| .margin-left { margin-left: -400px; } |
| .margin-right {margin-right: -400px; } |
| </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. This behaviour is not |
| defined by CSS2.1, but the behaviour enforced by this test makes us match IE and FF.</p> |
| <div style="overflow:hidden"> |
| <div class="float right"></div> |
| <div class="box margin-left" data-expected-width=650>Header</div> |
| </div> |
| <div style="overflow:hidden"> |
| <div class="float right"></div> |
| <div class="box margin-right" data-expected-width=650>Header</div> |
| </div> |
| <div style="overflow:hidden"> |
| <div class="float left"></div> |
| <div class="box margin-left" data-expected-width=650>Header</div> |
| </div> |
| <div style="overflow:hidden"> |
| <div class="float left"></div> |
| <div class="box margin-right" data-expected-width=650>Header</div> |
| </div> |
| |
| <div style="overflow:hidden"> |
| <div class="float right"></div> |
| <div class="float left"></div> |
| <div class="box margin-left" data-expected-width=500>Header</div> |
| </div> |
| <div style="overflow:hidden"> |
| <div class="float right"></div> |
| <div class="float left"></div> |
| <div class="box margin-right" data-expected-width=500>Header</div> |
| </div> |
| <script>checkLayout('.box')</script> |
| </body> |
| |
