OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../../resources/check-layout.js"></script> |
| 3 <style> |
| 4 body { margin:8px; font-size:16px; } |
| 5 </style> |
| 6 <p>Given a float followed by a regular block with the same height as the float,
then a block B with |
| 7 a negative margin, followed by a block with with overflow:hidden. Check that
the |
| 8 overflow:hidden block doesn't overlap with the float, and also that it takes
up all available |
| 9 space (but not more) beside the float. There's an empty collapse-through blo
ck before B, so |
| 10 that our initial logical top estimate fails and we have to relayout. When la
ying out again, we |
| 11 have to detect that the float that we first thought didn't affect the overfl
ow:hidden block now |
| 12 affects it.</p> |
| 13 <p>Below there should be an olive square to the left of a navy square. The navy
square should be |
| 14 slightly larger than the olive one, and there should be spacing between them
. They should not |
| 15 overlap.</p> |
| 16 <div style="width:18em;"> |
| 17 <div> |
| 18 <div style="float:left; width:8em; height:8em; margin-right:1em; backgro
und:olive;"></div> |
| 19 <div style="height:8em;"></div> |
| 20 <div> |
| 21 <!-- Here's an empty block that we can just collapse through, but we
don't realize that |
| 22 when calculating our initial top estimate on its parent, so we
have to relayout |
| 23 when it turns out that a negative margin has pulled us upwards
(and suddenly we |
| 24 have something block-level that's affected by the float). --> |
| 25 <div></div> |
| 26 |
| 27 <div style="margin-top:-8em;"></div> |
| 28 |
| 29 <!-- Here's a block-level element that is affected by floats, becaus
e it's a table. We |
| 30 could have used e.g. an overflow:hidden DIV for the same effect
. --> |
| 31 <div id="bfc" style="overflow:hidden; height:9em; background:navy;"
data-total-x="152" data-expected-width="144"></div> |
| 32 </div> |
| 33 </div> |
| 34 </div> |
| 35 <p id="result" style="clear:both;"></p> |
| 36 <script> |
| 37 checkLayout("#bfc", document.getElementById("result")); |
| 38 </script> |
OLD | NEW |