[css3-multicol] Spanning elements and BFCs in Webkit

I partially satisfied my action from last week in a response to the
agenda thread.  I'll fully satisfy the action here.

I did some experiments to determine exactly how Webkit treats
column-spanning elements.  Specifically, we were trying to determine
if (1) each spanning element is a BFC, (2) consecutive runs of
spanning elements get wrapped in an anonymous BFC, or (3) something
else.

The answer is officially (3), though for most purposes it acts like (2).

First, margin-collapsing.  Consecutive spanning elements collapse
margins together, while they clearly do not collapse their margins
with those of adjacent non-spanning elements.  This is trivial to
demonstrate, so I will not include a testcase.  This matches behavior
(2).

Second, float containment.  Floats are allowed to extrude from
spanning elements, and intrude into consecutive spanning elements.
However, they are not allowed to intrude into the "multicol box"
containing following columns of non-spanning elements.  Here is a
testcase:

<!DOCTYPE html>
<title>test</title>
<div style="border: thick solid black; -webkit-columns: 3; width: 600px;">
 foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
 <h1 style="-webkit-column-span: all;">
  <div style="float: left; width: 100px; height: 200px; background:
red;">bar</div>
  spanning
 </h1>
 <h1 style="-webkit-column-span: all">spanning</h1>
 <h1>not spanning</h1>
 foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo
foo foo foo foo foo foo foo foo
 <div style="float: left; width: 100px; height: 200px; background:
red;">bar</div>
</div>

This case demonstrates all of the above behavior.  In particular, the
anonymous block  containing the non-spanning content at the end is
shrunk to avoid having the float intrude on it.  It also gains height
to contain the second float, which is placed inside of it.

In other words, it appears that Webkit treats the box surrounding
multicol content as a BFC, but spanning elements are just treated as
normal block elements.  This often acts similarly to (2), but is
actually a substantially different model.

~TJ

Received on Wednesday, 28 September 2011 21:47:36 UTC