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

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.

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).

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,

and

data:text/html,

, 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.

• Namely, this prose:

  Otherwise, starting from the first uncollected item, collect as

  many consecutive flex items as will fit or until a forced break is

  encountered (but collect at least one) into the flex container's

  inner main size into a flex line...

  For this step, the size of a flex item is its outer hypothetical

  main size.

[1] http://lists.w3.org/Archives/Public/www-archive/2012Aug/att-0001/negative-size-line-layout

(feel free to use it for other purposes because all browsers have bugs in this demo here and there...)

Cheers, Kenny

Web Specialist, Oupeng Browser, Beijing Try Oupeng: http://www.oupeng.com/

Received on Friday, 3 August 2012 09:48:44 UTC