Re: [css3-flexbox][css3-linebox] (edge case) negative outer size and line layout

On Fri, Aug 3, 2012 at 2:47 AM, Kang-Hao (Kenny) Lu
<kennyluck@csail.mit.edu> wrote:
> The spec has a imprecise informative note:
>
>   # Note that items with zero main size will never start a line unless
>   # they're the very first items in the flex container, or they're
>   # preceded by a forced break. The "collect as many" line will collect
>   # them onto the end of the previous line even if the last non-zero
>   # item exactly "filled up" the line.
>
> because when the last non-zero item overflows the line, the next item
> with zero main size will start next line. This is demonstrable[1] in
> Chrome 22.

That's a good point.  The note is actually wrong.  I'll correct it.

> I think it's fine to leave the paragraph as it is (it's informative
> anyway), but it would be nice if css3-linebox specs this simple
> algorithm* because in inline layout browser are not currently
> interoperable in this edge situation (again, see [1], for
> 'inline-block's with negative outer size).

Yes, it would be useful to have a generic algorithm for this, so we
don't have to redefine it every time.

> A similar edge situation is for flex items with negative outer
> cross-size. The current spec determines the cross-size of a flex line with:
>
>   # (single line flex container)
>   #
>   # Otherwise, for each flex line:
>   #
>   # - Collect all the flex items whose inline-axis is parallel to the
>   #   main-axis, whose ‘align-self’ is ‘baseline’, and whose
>   #   cross-axis margins are both non-‘auto’. Find the largest of the
>   #   distances between each item's baseline and its hypothetical outer
>   #   cross-start edge, and the largest of the distances between each
>   #   item's baseline and its hypothetical outer cross-end edge, and
>   #   sum these two values.
>   #
>   # - Among all the items not collected by the previous step, find the
>   #   largest outer hypothetical cross size.
>   #
>   # - The used cross-size of the flex line is the larger of the numbers
>   #   found in the previous two steps.
>
> The spec should mention whether and when these calculations are clamped
> at 0. If we want to spec Chrome 22's behavior, from testcases like
>
>   data:text/html,<!DOCTYPE html><div style="width: 40px; border: yellow
> 20px solid; display: flex; -webkit-flex-flow: wrap;"><span style="width:
> 60px; background: blue; height: 20px; -webkit-flex: none;"></span><span
> style="width: 20px; height: 20px; background: red; margin-top:
> -40px"></span></div>
>
> and
>
>   data:text/html,<!DOCTYPE html><div style="width: 40px; border: yellow
> 20px solid; display: -webkit-flex; -webkit-flex-flow: wrap;"><span
> style="width: 60px; background: blue; height: 20px; -webkit-flex:
> none;"></span><span style="width: 20px; height: 20px; background: red;
> margin-top: -40px; -webkit-align-self: baseline;">g</span></div>
>
> , it seems that what would be needed is
>
>   | - Collect all the flex items whose inline-axis is parallel to the
>   |   main-axis, whose ‘align-self’ is ‘baseline’, and whose
>   |   cross-axis margins are both non-‘auto’. Find the largest of the
>   |   distances between each item's baseline and its hypothetical outer
>   |   cross-start edge (or zero when all hypothetical outer cross-start
>   |   edges are below the baseline), and the largest of the distances
>   |   between each item's baseline and its hypothetical outer cross-end
>   |   edge (or zero when all hypothetical outer cross-end
>   |   edges are above the baseline), and sum these two values.
>   |
>   | - Among all the items not collected by the previous step, find the
>   |   largest outer hypothetical cross size, clamped at 0.
>
> Otherwise, I don't particularly think negative cross-size for flex lines
> are terrible. We don't have line boxes with negative cross-size because
> there are struts for 'line-height', which stands for "minimum
> cross-size", but we don't have such a thing for flex lines so I don't
> think the consistency is in favor of any side.
>
> I suggest we do whatever would result in less code in browsers.

Ah, I didn't consider that boxes can have a negative outer size.
Silly me.  Yes, clamping at zero is the most sensical behavior here.

~TJ

Received on Friday, 3 August 2012 15:08:54 UTC