<!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>
Codebase Browser
chromium