Farm out the sizing and linebreaking part of flex resolution to the respective chapters.

Author: tabatkins

css3-flexbox/Overview.html

@@ -16,12 +16,12 @@
 
    <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 24 August 2011</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 25 August 2011</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110824/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110824/</a></dd> -->
+    <dd><!-- <a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110825/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110825/</a></dd> -->
      <a
      href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
 
@@ -205,8 +205,8 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
    <li><a href="#pagination"><span class=secno>8. </span> Page breaks in
     flexbox</a>
 
-   <li><a href="#layout-interface"><span class=secno>9. </span> Interface
-    With Other Layout Algorithms</a>
+   <li><a href="#layout-interface"><span class=secno>9. </span> Box
+    Properties and Sizing</a>
 
    <li><a href="#changes"><span class=secno>10. </span>Changes</a>
     <ul class=toc>
@@ -959,124 +959,89 @@ <h3 id=resolving-flexible-lengths><span class=secno>4.2. </span> Resolving
    preferred size. The following algorithm normatively describes how to do
    this conversion:
 
+  <p>First, determine the width and height of the flexbox itself, as
+   described by the <a href="#layout-interface">Box Properties</a> chapter.
+   The <a href="#main-size"><i>main size</i></a> of the flexbox's content box
+   is the <i>available space</i>.
+
+  <p>Second, if the flexbox is <i>multi-line</i>, break the contents across
+   multiple lines, as described by the <a href=multiline>Multiline</a>
+   chapter.
+
+  <p>Then, for each line in the flexbox, do the following:
+
   <ol>
-   <li>
-    <p>Determine the width and height of the flexbox itself.</p>
-
-    <p class=issue>Figure out how to do this for all combinations of flexbox
-     direction, writing modes on the flexbox and flexbox items, and values of
-     "width" and "height".</p>
-
-    <p>The <a href="#main-size"><i>main size</i></a> of the flexbox's content
-     box is the <dfn id=available-space>available space</dfn>.</p>
-
-   <li>For each <a href="#flexbox-item"><i>flexbox item</i></a>, its <dfn
-    id=pre-flex-size title="pre-flex size|pre-flex sizes">pre-flex size</dfn>
-    is the <a href="#main-size"><i>main size</i></a> of the item's margin
-    box, honoring the &lsquo;<code
-    class=css>min/max-width/height</code>&rsquo; properties. If the
-    &lsquo;<code class=property>width</code>&rsquo; or &lsquo;<code
-    class=property>height</code>&rsquo; properties are specified with <a
-    href="#flexible-length0"><i>flexible lengths</i></a>, do this calculation
-    as if they were instead specified with the <a
-    href="#flexible-length0"><i>flexible length's</i></a> <a
-    href="#preferred-size"><i>preferred size</i></a>.
+   <li>Subtract the sum of the <i>pre-flex sizes</i> of the <a
+    href="#flexbox-item"><i>flexbox items</i></a> on the line from the
+    <i>available space</i>. This is the <dfn id=free-space>free space</dfn>.
+    This number may be negative, if the flexbox is single-line or a single <a
+    href="#flexbox-item"><i>flexbox item</i></a> is larger than the entire
+    flexbox.
 
    <li>
-    <p>If the flexbox is <i>multi-line</i>, line-breaking must be performed.</p>
-
-    <p>If the current line has more than one <a
-     href="#flexbox-item"><i>flexbox item</i></a> and the sum of all the <a
-     href="#pre-flex-size"><i>pre-flex sizes</i></a> of its <a
-     href="#flexbox-item"><i>flexbox items</i></a> is greater than the <a
-     href="#available-space"><i>available space</i></a>, a new line must be
-     created. The current line always contains the first <a
-     href="#flexbox-item"><i>flexbox item</i></a> within it, and as many
-     subsequent <a href="#flexbox-item"><i>flexbox items</i></a> as possible
-     while keeping the sum of <a href="#pre-flex-size"><i>pre-flex
-     sizes</i></a> less than the <a href="#available-space"><i>available
-     space</i></a>. The rest of the <a href="#flexbox-item"><i>flexbox
-     items</i></a> move to the next line, where this step is repeated as
-     necessary until no new lines are created.</p>
+    <dl>
+     <dt>If the <a href="#free-space"><i>free space</i></a> is zero:
 
-   <li>
-    <p>Within each line, run the following steps:</p>
-
-    <ol>
-     <li>Subtract the sum of the <a href="#pre-flex-size"><i>pre-flex
-      sizes</i></a> of the <a href="#flexbox-item"><i>flexbox items</i></a>
-      on the line from the <a href="#available-space"><i>available
-      space</i></a>. This is the <dfn id=free-space>free space</dfn>. This
-      number may be negative, if the flexbox is single-line or a single <a
-      href="#flexbox-item"><i>flexbox item</i></a> is larger than the entire
-      flexbox.
+     <dd>All <a href="#flexible-length0"><i>flexible lengths</i></a> resolve
+      to their <a href="#preferred-size"><i>preferred size</i></a>.
+
+     <dt>If the <a href="#free-space"><i>free space</i></a> is positive:
+
+     <dd>
+      <p>Sum the <a href="#positive-flexibility"><i>positive
+       flexibility</i></a> of every <a href="#flexible-length0"><i>flexible
+       length</i></a> on the line. This is the <dfn
+       id=total-positive-flexibility>total positive flexibility</dfn>.</p>
+
+      <p>For each <a href="#flexible-length0"><i>flexible length</i></a>,
+       increment its <a href="#preferred-size"><i>preferred size</i></a> by
+       <code><a href="#free-space"><i>free space</i></a> * &lt;pos-flex> / <a
+       href="#total-positive-flexibility"><i>total positive
+       flexibility</i></a></code>.</p>
+
+     <dt>If the <a href="#free-space"><i>free space</i></a> is negative:
+
+     <dd>
+      <p>Sum the <a href="#negative-flexibility"><i>negative
+       flexibility</i></a> of every <a href="#flexible-length0"><i>flexible
+       length</i></a> on the line. This is the <dfn
+       id=total-negative-flexibility>total negative flexibility</dfn>.</p>
+
+      <p>For each <a href="#flexible-length0"><i>flexible length</i></a>,
+       increment its <a href="#preferred-size"><i>preferred size</i></a> by
+       <code><a href="#free-space"><i>free space</i></a> * &lt;neg-flex> / <a
+       href="#total-negative-flexibility"><i>total negative
+       flexibility</i></a></code>. <span class=note>Note: since the free
+       space is negative, incrementing the preferred size by this number
+       makes the preferred size smaller.</span></p>
+    </dl>
 
-     <li>
-      <dl>
-       <dt>If the <a href="#free-space"><i>free space</i></a> is zero:
-
-       <dd>All <a href="#flexible-length0"><i>flexible lengths</i></a>
-        resolve to their <a href="#preferred-size"><i>preferred size</i></a>.
-
-       <dt>If the <a href="#free-space"><i>free space</i></a> is positive:
-
-       <dd>
-        <p>Sum the <a href="#positive-flexibility"><i>positive
-         flexibility</i></a> of every <a href="#flexible-length0"><i>flexible
-         length</i></a> on the line. This is the <dfn
-         id=total-positive-flexibility>total positive flexibility</dfn>.</p>
-
-        <p>For each <a href="#flexible-length0"><i>flexible length</i></a>,
-         increment its <a href="#preferred-size"><i>preferred size</i></a> by
-         <code><a href="#free-space"><i>free space</i></a> * &lt;pos-flex> /
-         <a href="#total-positive-flexibility"><i>total positive
-         flexibility</i></a></code>.</p>
-
-       <dt>If the <a href="#free-space"><i>free space</i></a> is negative:
-
-       <dd>
-        <p>Sum the <a href="#negative-flexibility"><i>negative
-         flexibility</i></a> of every <a href="#flexible-length0"><i>flexible
-         length</i></a> on the line. This is the <dfn
-         id=total-negative-flexibility>total negative flexibility</dfn>.</p>
-
-        <p>For each <a href="#flexible-length0"><i>flexible length</i></a>,
-         increment its <a href="#preferred-size"><i>preferred size</i></a> by
-         <code><a href="#free-space"><i>free space</i></a> * &lt;neg-flex> /
-         <a href="#total-negative-flexibility"><i>total negative
-         flexibility</i></a></code>. <span class=note>Note: since the free
-         space is negative, incrementing the preferred size by this number
-         makes the preferred size smaller.</span></p>
-      </dl>
-
-     <li>
-      <p>Verify that min/max constraints aren't violated: for each <a
-       href="#flexbox-item"><i>flexbox item</i></a> on the line with
-       &lsquo;<code class=property>width</code>&rsquo;/&lsquo;<code
-       class=property>height</code>&rsquo; specified as a <a
-       href="#flexible-length0"><i>flexible length</i></a>, if instead
-       specifying the &lsquo;<code
-       class=property>width</code>&rsquo;/&lsquo;<code
-       class=property>height</code>&rsquo; as the <a
-       href="#preferred-size"><i>preferred size</i></a> would cause the item
-       to be in violation of its &lsquo;<code
-       class=css>min/max-width/height</code>&rsquo; properties, resolve the
-       <a href="#flexible-length0"><i>flexible length</i></a> to the
-       smallest/largest length that would make it no longer in violation of
-       those properties, as defined by <a
-       href="http://www.w3.org/TR/CSS2/visudet.html#propdef-min-width">the
-       algorithm in CSS2.1</a>.</p>
-
-      <p>If any <a href="#flexbox-item"><i>flexbox item</i></a> was found to
-       be in violation by this step and resolved into an inflexible length,
-       reset the <a href="#preferred-size"><i>preferred size</i></a> of any
-       remaining <a href="#flexible-length0"><i>flexible lengths</i></a> to
-       their original values and restart this sub-algorithm.</p>
-
-     <li>Any remaining <a href="#flexible-length0"><i>flexible
-      lengths</i></a> resolve to their <a href="#preferred-size"><i>preferred
-      size</i></a>.
-    </ol>
+   <li>
+    <p>Verify that min/max constraints aren't violated: for each <a
+     href="#flexbox-item"><i>flexbox item</i></a> on the line with
+     &lsquo;<code class=property>width</code>&rsquo;/&lsquo;<code
+     class=property>height</code>&rsquo; specified as a <a
+     href="#flexible-length0"><i>flexible length</i></a>, if instead
+     specifying the &lsquo;<code
+     class=property>width</code>&rsquo;/&lsquo;<code
+     class=property>height</code>&rsquo; as the <a
+     href="#preferred-size"><i>preferred size</i></a> would cause the item to
+     be in violation of its &lsquo;<code
+     class=css>min/max-width/height</code>&rsquo; properties, resolve the <a
+     href="#flexible-length0"><i>flexible length</i></a> to the
+     smallest/largest length that would make it no longer in violation of
+     those properties, as defined by <a
+     href="http://www.w3.org/TR/CSS2/visudet.html#propdef-min-width">the
+     algorithm in CSS2.1</a>.</p>
+
+    <p>If any <a href="#flexbox-item"><i>flexbox item</i></a> was found to be
+     in violation by this step and resolved into an inflexible length, reset
+     the <a href="#preferred-size"><i>preferred size</i></a> of any remaining
+     <a href="#flexible-length0"><i>flexible lengths</i></a> to their
+     original values and restart this sub-algorithm.</p>
+
+   <li>Any remaining <a href="#flexible-length0"><i>flexible lengths</i></a>
+    resolve to their <a href="#preferred-size"><i>preferred size</i></a>.
   </ol>
 
   <p>Once all <a href="#flexible-length0"><i>flexible lengths</i></a> have
@@ -2067,73 +2032,12 @@ <h2 id=pagination><span class=secno>8. </span> Page breaks in flexbox</h2>
   <p class=issue>TODO: add more detail: how breaking affect sizing (for
    broken boxes and boxes after the break) and alignment
 
-  <h2 id=layout-interface><span class=secno>9. </span> Interface With Other
-   Layout Algorithms</h2>
-
-  <div class=issue>
-   <p>This section seems necessary, but not the precise way it's written. I
-    need to identify precisely what data needs to be exposed both by the
-    containing measure model (for the flexbox to use) and by the flexbox (for
-    the containing measure model to use), and then write that up. Then the
-    other measure models we produce can re-use the same template.</p>
-
-   <p>Need to define:</p>
-
-   <ul>
-    <li>The min/max/fit-content widths and heights of flexboxes in block
-     contents
+  <h2 id=layout-interface><span class=secno>9. </span> Box Properties and
+   Sizing</h2>
 
-    <li>Related to the above, &lsquo;<code class=css>auto</code>&rsquo;
-     width/height of flexbox is shrink-to-fit.
-
-    <li>Other stuff?
-   </ul>
-  </div>
-  <!--
-  <p>
-   A box placed in a block is considered a block level element and will be positioned
-   and sized according to the rules for CSS 2.1 (section 10.3 for widths). Specifically,
-   the following equation applies for calculating the width:
-  </p>
-  <blockquote>
-  <p>'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + scrollbar width (if any) = width of containing block
-  </p>
-  </blockquote>
-  <p>All children of 'box' elements are block-level. If inline-level elements are nested
-     inside boxes, they get wrapped in an anonymous block which then takes part in the
-     box layout.
-
-  </p><p>
-     If the width of a child of a flexible box is computed as 'auto', then the used value
-     is the shrink-to-fit width. This calculation is done similarly to how the width of
-     a floating element is determined. Otherwise if the width has a computed value,
-     then that value is used as the width.
-  </p><p>
-
-     In a horizontally oriented box, the flexibility is then applied which may increase
-     or decrease the used width. In a vertically oriented box, the position and size
-     of the child may be adjusted by the value of the container's
-     <span class="property">'flex-align'</span> property.
-  </p><p>
-
-     The <span class="property">'min-width'</span>, <span class="property">'min-height'</span>,
-     <span class="property">'max-width'</span>, and <span class="property">'max-height'</span>
-     CSS properties act the same on boxes as on blocks.
-  </p><p>
-
-     The height of a child of a flexible box is determined in the same manner as specified
-     in the CSS specification. The used height may further be adjusted by the container's
-     <span class="property">'flex-align'</span> property in a horizontally
-     oriented box, or the flexibility in a vertically oriented box.
-  </p><p>
-
-     Note that it is possible for a horizontally oriented box that the height of a
-     flexible child containing an inline descendant will change when the flexibility is
-     applied. Similarly, in a vertically oriented box, the height of a child may change
-     based on the <span class="property">'flex-align'</span> property of the
-     box.
-  </p>
-	-->
+  <p class=issue>Define how flexboxes are sized, paying attention to
+   width/height keywords on both the flexbox and flexbox items, the writing
+   modes of both the flexbox and flexbox items, and the flexbox direction.
 
   <hr title="Separator from footer">
 
@@ -2406,9 +2310,6 @@ <h2 class=no-num id=index>Index</h2>
    <li>available free space, <a href="#available-free-space" title="available
     free space"><strong>7.</strong></a>
 
-   <li>available space, <a href="#available-space" title="available
-    space"><strong>4.2.</strong></a>
-
    <li>baseline, <a href="#flex-align-baseline"
     title=baseline><strong>5.2.</strong></a>
 
@@ -2538,12 +2439,6 @@ <h2 class=no-num id=index>Index</h2>
    <li>preferred size, <a href="#preferred-size" title="preferred
     size"><strong>4.1.</strong></a>
 
-   <li>pre-flex size, <a href="#pre-flex-size" title="pre-flex
-    size"><strong>4.2.</strong></a>
-
-   <li>pre-flex sizes, <a href="#pre-flex-size" title="pre-flex
-    sizes"><strong>4.2.</strong></a>
-
    <li>relevant length, <a href="#relevant-length" title="relevant
     length"><strong>7.</strong></a>