| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 body { margin:8px; font-size:16px; } |
| 4 </style> |
| 5 <script src="../../../resources/check-layout.js"></script> |
| 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 table. Check that the table doesn't overlap
with the |
| 8 float. There's an empty collapse-through block before B, so that our initial
logical top |
| 9 estimate fails and we have to relayout. When laying out again, we have to de
tect that the float |
| 10 that we first thought didn't affect the table now affects it.</p> |
| 11 <p>The word "BINGO" should be seen below, to the right of a blue block.</p> |
| 12 <div style="width:20em; color:blue;"> |
| 13 <div> |
| 14 <div style="float:left; width:8em; height:8em; margin-right:1em; backgro
und:blue;"></div> |
| 15 <div style="height:8em;"></div> |
| 16 <div> |
| 17 <!-- Here's an empty block that we can just collapse through, but we
don't realize that |
| 18 when calculating our initial top estimate on its parent, so we
have to relayout |
| 19 when it turns out that a negative margin has pulled us upwards
(and suddenly we |
| 20 have something block-level that's affected by the float). --> |
| 21 <div></div> |
| 22 |
| 23 <div style="margin-top:-4em;"></div> |
| 24 |
| 25 <!-- Here's a block-level element that is affected by floats, becaus
e it's a table. We |
| 26 could have used e.g. an overflow:hidden DIV for the same effect
. --> |
| 27 <div id="table" style="display:table;" data-total-x="152">BINGO</div
> |
| 28 </div> |
| 29 </div> |
| 30 </div> |
| 31 <p id="result" style="clear:both;"></p> |
| 32 <script> |
| 33 checkLayout("#table", document.getElementById("result")); |
| 34 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1315353005:
Avoid duplicated code in LayoutBlockChild::layoutBlockChild(). (Closed)
Base URL: svn://svn.chromium.org/blink/trunk