Differences

This shows you the differences between two versions of the page.

--- spec:css3-regions:auto-height [2012/03/29 14:50] – vhardy
+++ spec:css3-regions:auto-height [2014/12/09 15:48] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 ==== Regions: Processing Model for auto sizing ====
-The regions specification proposes a model for handling auto sizing on regions. This page contains use cases
+This page is now obsolete. The proposed processing model is in the specification draft:
-that illustrate how this model is used concretely.
-== Use Case A : Single regions in normal flow with height: auto ==
+http://dev.w3.org/csswg/css3-regions/#regions-visual-formatting-details
-<code>
+and the use cases are in the test repository:
-<head>
-<style>
-#article {
-    flow-into: article;
-}
-#regionA {
+https://hg.csswg.org/test/file/887baeb650dd/contributors/adobe/incoming/css3-regions
-     width: auto;
-     height: auto;
-     flow-from: article;
-}
-</style>
+(the regions-auto-size-*.xht tests)
-</head>
-<body>
-<div id="article">…</div>
-<div id="regionA"></div>
-</body>
-</code>
-The intrinsic size of the regionA RFCB (RFCB-A) is resolved as follows:
-<code>
-  - The width of regionA's (RFCB-A) is the width of its container (e.g., 300px), since
-    it behaves like a non-replaced block level element for that dimension.
-  - The intrinsic height of RFCB-A is resolved as follows:
-        - Phase 1: layout the document with a 'used' height of 0 for RFCB-A.
-        - Phase 2: layout the 'article' named flow into regionA. Because regionA's
-          height computed to 'auto', compute a new used height for
-          RFCB-A. Assuming there is no break in the content, the used height will be that
-          of the entire flow laid out in the RFCB-A width (because it is the first
-          (http://www.w3.org/TR/css3-break/#fragmenter)fragmented box)
-          This yields the intrinsic height (e.g., 1000px).
-</code>
-When layout happen, regionA will be laid out it's width is computed as that of any non-replaced
-block level element and its intrinsic height is 1000px and used as for any height computation of replaced elements.
-In our example, the regionA box will have used width and height of 300px x 1000px and will tightly fit the flow content.
-== Example B : two regions with height:auto in normal flow ==
-<code>
-<style>
-#article {
-    flow-into: article;
-}
-#article p:first-child {
-    region-break-after: always;
-}
-#regionA, #regionB {
-    flow-from: article;
-}
-#regionA {
-    width: 800px;
-    height: auto;
-}
-#regionB {
-    width: 400px;
-    height: auto;
-}
-</style>
-<body>
-<div id="article"><p id="p1">Paragraph 1, ...</p><p id="p2">Paragraph 2, ...</p></div>
-<div id="regionA"></div> <!-- RFCB-A -->
-<div id="regionB"></div> <!-- RFCB-B -->
-</body>
-</code>
-To resolve the 'intrinsic' height of regionA and regionB:
-<code>
-- Phase 1: layout regions using a used height of 0 for both regionA and regionB.
-- Phase 2: layout the article flow content in regionA, then regionB:
-     - the fragment used for regionA is the content of #p1 because there is a break after that
-       paragraph (following the fragmentation rules). Using the rules for laying out a
-       block level non-replaced element in the normal flow with overflow computing to visible.
-       This yields a used height (RIH-1) to tightly wrap #p1 on the vertical dimension.
-     - similarly, for regionB, the content of #p2 (the remainder of the flow) is
-       used when computing the used height (RIH-2) for RFCB-2.
-</code>
-The RIH-1 and RIH-2 intrinsic heights are used during the layout of regions, before flowing named flow content into them.
-<html><span style="color:#a00;font-weight:bold">IMPORTANT: THE FOLLOWING USE CASES NEED TO BE UPDATED</span></html>
-== Example B - Edge Case B (from https://www.w3.org/Style/CSS/Tracker/actions/351) ==
-<code>
-   <div style="display:flexbox">
-      <div id="region1" style="flow-from:x; flex:2"></div>
-      <div id="region2" style="flow-from:x; flex:1"></div>
-   </div>
-</code>
-  - Step A, Phase 1: layout region1 and region2 using an intrinsic height of 0.
-  - Step A, Phase 2: layout content in regions. Because region1 has height:auto,
-                      - compute the fragment that fits into the region (following fragmentation rules).
-                      - compute the intrinsic height of the region based on the fragment content
-                      - freeze the intrinsic height ('Y') for region1.
-     Because region2 has height:auto:
-                      - compute the fragment that fits into the region (following fragmentation rules). Depending on what the fragment rules determined fit into region1 there may not be content remaining in the flow. **[QUESTION: assuming no explicit breaks why would there be any content left from regions1? The intrinsic height will be simply all of the flow's content...]**
-                      - compute the intrinsic height of the region based on the fragment content
-                      - freeze the intrinsic height ('Z') for region2.
-Because there is a region with height:auto, a Step B is necessary.
-  - Step B, Phase 1: layout region1 and region2. region1 uses an intrinsic height of 'Y', region2 uses an intrinsic height of 'Z'.
-  - Step B, Phase 2: layout content in region.
-== Example C - Edge Case A (from https://www.w3.org/Style/CSS/Tracker/actions/351) ==
-<code>
-<style>
-    #regionA {
-        top: 0;
-        bottom: 0;
-        width: 100px;
-        position: absolute;
-        flow-from: article;
-    }
-    #regionB {
-        flow-from: article;
-        width: 200px;
-        margin-left: 120px;
-        top: 0;
-        right: 0;
-        position: absolute;
-    }
-    #article {
-        flow-into: article;
-    }
-</style>
-<div id="article">…</div>
-<div id="container" style="position:relative">
-    <div id="regionA"></div>
-    <div id="regionB"></div>
-</div>
-</code>
-**[OBSERVATION: If you follow the rules of CSS 2.1 ch 10. the used size of absolutely positioned elements with height: auto; top:0px; bottom: 0px; will be the height of the containing block minus MBP, thus, this problem is practically non-existent]**
-  - Step A, Phase 1: layout regionA and regionB. regionB uses an intrinsic size of zero and, as a result, regionB's top and bottom compute to 0 and has a height of zero as well.
-  - Step A, Phase 2: layout content in regions. When laying out regionB, because regionB has height:auto:
-                      - compute the fragment that fits into the region (following fragmentation rules).
-                      - compute the intrinsic height of the region based on the fragment content
-                      - freeze the intrinsic height ('Y') for regionB.
-Because there is a region with height:auto, a Step B is necessary.
-  - Step B, Phase 1: layout regionA and regionB. regionB uses an intrinsic height of 'Y'. As a result,
-                     regionA's bottom property's used value is 'Y'.
-  - Step B, Phase 2: layout content in region. The content will fit partially in regionA (because it has a narrower width)
-                     but will not fill in regionB completely.
-== Example D: Multi-column region with height:auto ==
-<code>
-<style>
-#article {
-   flow-into: article;
-}
-#regionA, #regionB {
-   flow-from: article;
-}
-#regionA {
-   height: auto;
-   column-count: 2;
-}
-#regionB {
-   height: auto;
-   column-count: 2;
-}
-</style>
-<div id="article">...</div>
-<div id="regionA"></div>
-<div id="regionB"></div>
-</code>
-  - Step A, Phase 1: layout regionA and regionB. Both use an intrinsic height of zero.
-  - Step A, Phase 2: layout content in regions. When layout region A, because region A has height:auto:
-                        - compute the fragment that fits into the region (following fragmentation rules).
-                        - compute the intrinsic height of the region based on the fragment content
-                        - freeze the intrinsic height ('Y') for region A. **[QUESTION: are you talking about 'used height' is all of these cases?]**
-                      layout content in regionB as well, and because region B has height:auto
-                        - compute the fragment that fits into the region,
-                        - compute the intrinsic height of the region based on the fragment content
-                        - freeze the intrinsic height ('Z') for region B.
-  - Step B, Phase 1: layout regionA and regionB using the intrinsic heights of 'Y' and 'Z' respectively.
-  - Step B, Phase 2: layout content in regionA and B.