Index: LayoutTests/fast/block/margin-collapse/table-beside-float-complex-margin-collapsing.html |
diff --git a/LayoutTests/fast/block/margin-collapse/table-beside-float-complex-margin-collapsing.html b/LayoutTests/fast/block/margin-collapse/table-beside-float-complex-margin-collapsing.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..3f2d2472f6cf71e2bb291dcaaa1218ec298636b5 |
--- /dev/null |
+++ b/LayoutTests/fast/block/margin-collapse/table-beside-float-complex-margin-collapsing.html |
@@ -0,0 +1,34 @@ |
+<!DOCTYPE html> |
+<style> |
+ body { margin:8px; font-size:16px; } |
+</style> |
+<script src="../../../resources/check-layout.js"></script> |
+<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 table. Check that the table doesn't overlap with 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 table now affects it.</p> |
+<p>The word "BINGO" should be seen below, to the right of a blue block.</p> |
+<div style="width:20em; color:blue;"> |
+ <div> |
+ <div style="float:left; width:8em; height:8em; margin-right:1em; background:blue;"></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:-4em;"></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="table" style="display:table;" data-total-x="152">BINGO</div> |
+ </div> |
+ </div> |
+</div> |
+<p id="result" style="clear:both;"></p> |
+<script> |
+ checkLayout("#table", document.getElementById("result")); |
+</script> |