| <!DOCTYPE html> |
| <script src="../../../resources/check-layout.js"></script> |
| <style> |
| body { margin:8px; font-size:16px; } |
| </style> |
| <p>Given a float followed by a regular block with the same height as the float, then a block B with |
| a negative margin, followed by a block with with overflow:hidden. Check that the |
| overflow:hidden block doesn't overlap with the float, and also that it takes up all available |
| space (but not more) beside the float. There's an empty collapse-through block before B, so |
| that our initial logical top estimate fails and we have to relayout. When laying out again, we |
| have to detect that the float that we first thought didn't affect the overflow:hidden block now |
| affects it.</p> |
| <p>Below there should be an olive square to the left of a navy square. The navy square should be |
| slightly larger than the olive one, and there should be spacing between them. They should not |
| overlap.</p> |
| <div style="width:18em;"> |
| <div> |
| <div style="float:left; width:8em; height:8em; margin-right:1em; background:olive;"></div> |
| <div style="height:8em;"></div> |
| <div> |
| <!-- Here's an empty block that we can just collapse through, but we don't realize that |
| when calculating our initial top estimate on its parent, so we have to relayout |
| when it turns out that a negative margin has pulled us upwards (and suddenly we |
| have something block-level that's affected by the float). --> |
| <div></div> |
| |
| <div style="margin-top:-8em;"></div> |
| |
| <!-- Here's a block-level element that is affected by floats, because it's a table. We |
| could have used e.g. an overflow:hidden DIV for the same effect. --> |
| <div id="bfc" style="overflow:hidden; height:9em; background:navy;" data-total-x="152" data-expected-width="144"></div> |
| </div> |
| </div> |
| </div> |
| <p id="result" style="clear:both;"></p> |
| <script> |
| checkLayout("#bfc", document.getElementById("result")); |
| </script> |
