Modified visual formatting details to use the notion of 'flow fragment height' in used height resolution, step 1/2 of the layout process

Author: vhardy

css3-regions/Overview.html

@@ -437,25 +437,25 @@ <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
      <li><a href="#regions-flow-content-box"><span class=secno>7.1.
       </span>The Region Flow Content Box (RFBC)</a>
       <ul class=toc>
-       <li><a href="#rfbc-width-computation"><span class=secno>7.1.1.
+       <li><a href="#rfbc-width-resolution"><span class=secno>7.1.1.
         </span>RFCB &lsquo;<code class=property>width</code>&rsquo;
         resolution</a>
       </ul>
 
      <li><a href="#regions-visual-formatting-steps"><span class=secno>7.2.
       </span>Regions visual formatting steps</a>
       <ul class=toc>
-       <li><a href="#rfcb-height-computation"><span class=secno>7.2.1.
-        </span>Step 1: RFCB intrinsic &lsquo;<code
-        class=property>height</code>&rsquo; resolution</a>
+       <li><a href="#rfcb-flow-fragment-height-resolution"><span
+        class=secno>7.2.1. </span>Step 1: RFCB flow fragment height
+        resolution</a>
         <ul class=toc>
-         <li><a href="#rfcb-intrinsic-height-resolution-phase-1"><span
-          class=secno>7.2.1.1. </span>RFCB intrinsic &lsquo;<code
-          class=property>height</code>&rsquo; resolution, Phase 1</a>
+         <li><a href="#rfcb-flow-fragment-height-resolution-phase-1"><span
+          class=secno>7.2.1.1. </span>RFCB flow fragment height resolution,
+          Phase 1</a>
 
-         <li><a href="#rfcb-intrinsic-height-resolution-phase-2"><span
-          class=secno>7.2.1.2. </span>RFCB intrinsic &lsquo;<code
-          class=property>height</code>&rsquo; resolution Phase 2</a>
+         <li><a href="#rfcb-flow-fragment-height-resolution-phase-2"><span
+          class=secno>7.2.1.2. </span>RFCB flow fragment height resolution
+          Phase 2</a>
         </ul>
 
        <li><a href="#regions-boxes-layout"><span class=secno>7.2.2.
@@ -2438,31 +2438,29 @@ <h3 id=regions-flow-content-box><span class=secno>7.1. </span>The Region
    href="http://www.w3.org/TR/CSS2/visuren.html#block-boxes">block container
    box</a>.
 
-  <p>With regards to resolving sizes:
-
-  <ul>
-   <li>The <span>RFCB</span> behaves like a <a
-    href="http://www.w3.org/TR/CSS2/visudet.html#blockwidth">block-level
-    non-replaced element</a> with regards to its &lsquo;<code
-    class=property>width</code>&rsquo;.
-
-   <li>The <span>RFCB</span> behaves like a <a
-    href="http://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced
-    element</a> with regards to its height. Computing the
-    <span>RFCB</span>&lsquo;<code class=css>s <a href="">intrinsic height</a>
-    require special processing and is the first step in the process <a
-    href="#regions-visual-formatting-steps">detailed later</a>.</code>
-  </ul>
+  <p>The <span>RFCB</span> is a <a
+   href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container
+   box</a> with a <a href="">computed</a> &lsquo;<code
+   class=property>width</code>&rsquo; of &lsquo;<code
+   class=property>auto</code>&rsquo; and a whose <a href="">used</a>
+   &lsquo;<code class=property>height</code>&rsquo; is resolved as detailed
+   below.
 
-  <h4 id=rfbc-width-computation><span class=secno>7.1.1. </span>RFCB
-   &rsquo;width' resolution</h4>
+  <h4 id=rfbc-width-resolution><span class=secno>7.1.1. </span>RFCB
+   &lsquo;<code class=property>width</code>&rsquo; resolution</h4>
 
   <p>At various points in the visual formatting of documents containing
    regions, the &lsquo;<code class=property>width</code>&rsquo; of RFCBs need
-   to be resolved. In all cases, the resolution is done as follows.
-
-  <p>The &lsquo;<code class=property>width</code>&rsquo; of an
-   <span>RFCB</span> is based on its <code class=css>min-content</code>,
+   to be resolved. In all cases, the resolution is done following the rules
+   for <a
+   href="http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating
+   widths and margins</a> (see <a href="#CSS21"
+   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>) but using a special method
+   for computing the <em>shrink-to-fit</em> width if that measure is needed
+   to resolve the &lsquo;<code class=property>width</code>&rsquo; used value.
+
+  <p>In other words, the &lsquo;<code class=property>width</code>&rsquo; of
+   an <span>RFCB</span> is based on its <code class=css>min-content</code>,
    <code class=css>max-content</code>, <code class=css>fill-available</code>
    and <code class=css>fill-content</code> (also called
    <em>shrink-to-fit</em>) sizes, as <a
@@ -2489,8 +2487,9 @@ <h3 id=regions-visual-formatting-steps><span class=secno>7.2.
    laid out in regions is a three step process:
 
   <ul>
-   <li><em>Step 1: RFCB intrinsic height resolution</em>. In this step, the
-    intrinsic heigh of regions flow content boxes is resolved.
+   <li><em>Step 1: RFCB <def>flow fragment height</def> resolution</em>. In
+    this step, the height of fragments fitting in regions flow content boxes
+    is resolved.
 
    <li><em>Step 2: document and regions layout</em>. In this step, the
     document content is laid out, including regions and their regions flow
@@ -2507,15 +2506,13 @@ <h3 id=regions-visual-formatting-steps><span class=secno>7.2.
    <p class=caption>Regions visual formatting steps</p>
   </div>
 
-  <h4 id=rfcb-height-computation><span class=secno>7.2.1. </span>Step 1: RFCB
-   intrinsic &lsquo;<code class=property>height</code>&rsquo; resolution</h4>
+  <h4 id=rfcb-flow-fragment-height-resolution><span class=secno>7.2.1.
+   </span>Step 1: RFCB flow fragment height resolution</h4>
 
-  <p>Conceptually, resolving the intrinsic &lsquo;<code
-   class=property>height</code>&rsquo; of an RFCB is a two phase process.
+  <p>Conceptually, resolving the flow fragment height is a two phase process.
 
-  <h5 id=rfcb-intrinsic-height-resolution-phase-1><span class=secno>7.2.1.1.
-   </span>RFCB intrinsic &lsquo;<code class=property>height</code>&rsquo;
-   resolution, Phase 1</h5>
+  <h5 id=rfcb-flow-fragment-height-resolution-phase-1><span
+   class=secno>7.2.1.1. </span>RFCB flow fragment height resolution, Phase 1</h5>
 
   <p>The document is laid out with a <a
    href="http://www.w3.org/TR/CSS2/cascade.html#used-value">used</a> height
@@ -2524,20 +2521,15 @@ <h5 id=rfcb-intrinsic-height-resolution-phase-1><span class=secno>7.2.1.1.
    <span>regions</span>. This phase yields resolved position and sizes for
    all regions and their RFCBs in the document.
 
-  <h5 id=rfcb-intrinsic-height-resolution-phase-2><span class=secno>7.2.1.2.
-   </span>RFCB intrinsic &lsquo;<code class=property>height</code>&rsquo;
-   resolution Phase 2</h5>
+  <h5 id=rfcb-flow-fragment-height-resolution-phase-2><span
+   class=secno>7.2.1.2. </span>RFCB flow fragment height resolution Phase 2</h5>
 
   <p><a href="#named-flow0">Named flows</a> are laid out in
-   <span>regions</span>. For <span>regions</span> whose <a
-   href="http://www.w3.org/TR/CSS2/cascade.html#computed-value">computed</a>
-   &lsquo;<code class=property>height</code>&rsquo; is <code
-   class=css>auto</code>, the user agent computes a new <a
-   href="http://www.w3.org/TR/CSS2/cascade.html#used-value">used</a>
-   &lsquo;<code class=property>height</code>&rsquo; for the <span>RFCB</span>
-   using the remainder of the flow and accounting for <a
-   href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. Note that
-   this process accounts for constraints such as the &lsquo;<code
+   <span>regions</span>. The user agent computes the <em><span>flow fragment
+   height</span></em> for the <span>RFCB</span>s using the remainder of the
+   flow and accounting for <a
+   href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. This
+   process accounts for constraints such as the &lsquo;<code
    class=property>max-height</code>&rsquo; value, as described in the CSS 2.1
    section on <a
    href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">calculating
@@ -2552,38 +2544,19 @@ <h5 id=rfcb-intrinsic-height-resolution-phase-2><span class=secno>7.2.1.2.
    href="file:///Users/vhardy/work/W3C/mercurial/csswg/css3-regions/Overview.html#processing-model">rules</a>
    described earlier in this document.
 
-  <p>This new used &lsquo;<code class=property>height</code>&rsquo; is the
-   intrinsic &lsquo;<code class=property>height</code>&rsquo; of the
-   <span>RFCB</span> (which behaves like a <a
-   href="http://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced
-   element</a> with regards to its &lsquo;<code
-   class=property>height</code>&rsquo; in the following steps of the
-   process).
-
-  <div class=note>It is important to note that during the Phase 2 of the
-   resolution of the RFCB's intrinsic &lsquo;<code
-   class=property>height</code>&rsquo;, the RFCB is treated as a block-level
-   element (using the CSS 2.1 terminology for <a
-   href="http://www.w3.org/TR/CSS2/visudet.html">section 10</a>) for
-   &lsquo;<code class=property>height</code>&rsquo; computation. However,
-   once the intrinsic &lsquo;<code class=property>height</code>&rsquo; is
-   resolved, the RFCB is treated as block-level replaced element for
-   &lsquo;<code class=property>height</code>&rsquo; computation.</div>
-
   <h4 id=regions-boxes-layout><span class=secno>7.2.2. </span>Step 2: regions
    boxes layout</h4>
 
   <p>In this step, the document is laid out according to the normal CSS
-   layout rules. RFCB boxes, as described before, are treated as <a
-   href="http://www.w3.org/TR/CSS2/visudet.html#blockwidth">block-level
-   non-replaced element</a> in normal flow with regards to their &lsquo;<code
-   class=property>width</code>&rsquo; and as <a
-   href="http://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced
-   element</a> with regards to their height. The &lsquo;<code
-   class=property>intrinsic</code>&rsquo; height for regions computed in step
-   1 may be used in this step (it may not be needed, for example if the
-   region's computed &lsquo;<code class=property>height</code>&rsquo; is not
-   <code class=css>auto</code>)
+   layout rules. RFCB boxes, as described before, are <a
+   href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container
+   boxes</a>. If a measure of the content is required to resolve the used
+   &lsquo;<code class=property>width</code>&rsquo;, the value is resolved as
+   described in the <a href="#rfbc-width-resolution">RFCB width
+   resolution</a> section. If a measure of the content is required to resolve
+   the used height of the RFCB (for example if the region box is absolutely
+   positioned), the <span>flow fragment height</span> resolved in Step 1 is
+   used.
 
   <p>At the end of this step, regions are laid out and ready to receive
    content from their associated <a href="#named-flow0">named flows</a>.
@@ -2666,21 +2639,17 @@ <h3 id=regions-visual-formatting-examples><span class=secno>7.4.
         </pre>
   </div>
 
-  <p>The following figure shows the visual result for the example
-
-  <div class=figure> <img alt="Regions visual formatting example"
-   src="images/regions-visual-formatting-example.png" width=400px>
-   <p class=caption>Region visual formatting example</p>
-  </div>
+  <p>The following figures illustrate the intermediate results for the visual
+   formatting process.
 
   <div class=figure> <img alt="Regions visual formatting example"
    src="images/intrinsic-height-phase-1.png" width=370px>
-   <p class=caption>Step 1: Resolving intrinsic height (Phase 1)</p>
+   <p class=caption>Step 1 - Phase 1: Layout RFBCs with used height of 0</p>
   </div>
 
   <div class=figure> <img alt="Step 1: Resolving intrinsic height (Phase 2)"
    src="images/intrinsic-height-phase-2.png" width=370px>
-   <p class=caption>Step 1: Resolving intrinsic height (Phase 2)</p>
+   <p class=caption>Step 1 - Phase 2: Measure flow fragments heights</p>
   </div>
 
   <div class=figure> <img
@@ -2690,6 +2659,12 @@ <h3 id=regions-visual-formatting-examples><span class=secno>7.4.
     href="#named-flow0">named flows</a></p>
   </div>
 
+  <div class=figure> <img alt="Regions visual formatting example"
+   src="images/regions-visual-formatting-example.png" width=400px>
+   <p class=caption>Step 3: Final result after laying out named flows in
+    regions</p>
+  </div>
+
   <h2 id=relation-to-document-events><span class=secno>8. </span>Relation to
    document events</h2>