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: Check that a line inside B doesn't overlap with the float
. There's an empty |
| 8 collapse-through block before B, so that our initial logical top estimate fa
ils and we have to |
| 9 relayout. When laying out again, we have to detect that the float that we fi
rst thought didn't |
| 10 affect the line 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 a line that's affected by the float). --> |
| 21 <div></div> |
| 22 |
| 23 <div class="testee" data-total-x="8" style="margin-top:-4em;"> |
| 24 <span class="testee" data-total-x="152">BINGO</span> |
| 25 </div> |
| 26 </div> |
| 27 </div> |
| 28 </div> |
| 29 <p id="result" style="clear:both;"></p> |
| 30 <script> |
| 31 checkLayout(".testee", document.getElementById("result")); |
| 32 </script> |
OLD | NEW |