layout: fix clear on blocks establishing new BFCs

As per standard:

> Adjoining vertical margins collapse, except:
> [...]
> If the top and bottom margins of an element with clearance are
> adjoining, its margins collapse with the adjoining margins of
> following siblings but that resulting margin does not collapse with
> the bottom margin of the parent block.

3 files changed, 14 insertions, 1 deletions

diff --git a/src/layout/engine.nim b/src/layout/engine.nim
index 5cc32dd1..e91fd0d8 100644
--- a/src/layout/engine.nim
+++ b/src/layout/engine.nim
@@ -1230,7 +1230,8 @@ func canFlushMargins(box: BlockBox; sizes: ResolvedSizes): bool =
   if box.computed{"position"} == PositionAbsolute:
     return false
   return sizes.padding.top != 0 or sizes.padding.bottom != 0 or
-    box.inline != nil or box.computed{"display"} notin DisplayBlockLike
+    box.inline != nil or box.computed{"display"} notin DisplayBlockLike or
+    box.computed{"clear"} != ClearNone
 
 proc flushMargins(bctx: var BlockContext; box: BlockBox) =
   # Apply uncommitted margins.
@@ -2321,6 +2322,8 @@ proc layoutBlockChildBFC(state: var BlockState; bctx: var BlockContext;
     bctx.flushMargins(child)
     bctx.positionFloats()
     bctx.marginTodo.append(child.state.margin.bottom)
+    if child.computed{"clear"} != ClearNone:
+      state.offset.clearFloats(bctx, child.computed{"clear"})
     if bctx.exclusions.len > 0:
       # Consulting the standard for an important edge case... (abridged)
       #
diff --git a/test/layout/new-bfc-clears-floats.expected b/test/layout/new-bfc-clears-floats.expected
new file mode 100644
index 00000000..876d665a
--- /dev/null
+++ b/test/layout/new-bfc-clears-floats.expected
@@ -0,0 +1,4 @@
+left                                                                       right
+testing
+left                                                                       right
+testing
diff --git a/test/layout/new-bfc-clears-floats.html b/test/layout/new-bfc-clears-floats.html
new file mode 100644
index 00000000..ce81c7e1
--- /dev/null
+++ b/test/layout/new-bfc-clears-floats.html
@@ -0,0 +1,6 @@
+<div style="float: left">left</div>
+<div style="float: right">right</div>
+<div style="clear: both"><div style="display: flow-root">testing</div></div>
+<div style="float: left">left</div>
+<div style="float: right">right</div>
+<div style="clear: both; display: flow-root">testing</div>