[css3-gcpm] containing block for top/bottom floats

I have a question about CSS3 GCPM Page floats [1].

[1] http://dev.w3.org/csswg/css3-gcpm/#page-floats
| page 
|   This keyword indicates that the page box acts as containing block
|   for the purpose of 'float'.
| multi-column 
|   This keyword indicates that the multi-column element acts as
|   containing block for the purpose of 'float'.
| top
|   This keyword indicates that the element is floated to the top of the
|   containing block.
| bottom 
|   This keyword indicates that the element is floated to the bottom of
|   the containing block.

My question:
What about the containing block for top/bottom floats when neither page
nor multi-column keyword is specified?

Example:

.multicol { column-count: 2 }
.top-float { float: top }

<div class="multicol">
  ...
  <p>This is a paragraph.
    <span class="top-float">TOP FLOAT
      (specified in the paragraph)</span>
    ...
  </p>
  ...
</div>

I expect the top-float is floated to the top of the current column.
But that is not obvious in the GCPM spec.

According to CSS2.1 Definition of "containing block" [2]:

[2] http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
| if the element's position is 'relative' or 'static', the containing
| block is formed by the content edge of the nearest block-level,
| table cell or inline-block ancestor box.

If this CSS2.1 definition is applied to the top floats, the containing
block is the nearest block-level ancestor box, the paragraph p in this
example. The top-float is floated to the top of the paragraph, not the
column box. This is unexpected behavior.

I think that the GCPM spec should define the containing block for
top/bottom floats.

My proposal:
When the float property value has a vertical keyword (top, bottom) and
has no reference keyword (page, multi-column), the containing block is
formed by the content edge of the nearest box that is a column box or 
is a "flow root" defined in the CSS3 basic box model [3] or page area.
In vertical text, a horizontal keyword is vice versa.

[3] http://www.w3.org/TR/css3-box/#flow-root
| A flow root is a box that satisfies at least one of the following:
| - The value of 'float' is not 'none'.
| - The used value of 'overflow' is not 'visible'.
| - The value of 'display' is 'table-cell', 'table-caption',
|   'inline-block' or 'inline-table'.
| - The value of 'position' is neither 'static' nor 'relative'.
| - The value of 'block-progression' is 'lr' or 'rl' and the value of
|   'block-progression' of its parent box is 'tb'
| - The value of 'block-progression' is 'tb' and the value of
|   'block-progression' of its parent box is 'lr' or 'rl'. 
| Other modules may define additional flow roots. 


Best regards,

-- 
Shinyu Murakami
http://www.antennahouse.com
http://www.antenna.co.jp/AHF/

Received on Saturday, 3 January 2009 17:51:54 UTC