- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 4 Feb 2013 23:47:57 -0800
- To: "Kang-Hao (Kenny) Lu" <kennyluck@csail.mit.edu>
- Cc: WWW Style <www-style@w3.org>
On Fri, Aug 3, 2012 at 8:08 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote: > 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. Woo, long overdue fixes! Fixed the note and made flex lines clamp their cross size at 0. ~TJ
Received on Tuesday, 5 February 2013 07:48:44 UTC