Differences

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

--- spec:css3-regions:auto-height [2012/03/28 15:58] – vhardy
+++ spec:css3-regions:auto-height [2012/03/29 09:02] – vhardy
@@ Line 4: / Line 4: @@
 that illustrate how this model is used concretely.
-== Example A ==
+== Use Case A : Single regions in normal flow with height: auto ==
 <code>
@@ Line 28: / Line 28: @@
 </code>
-The intrinsic size of the regionA RFCB (RFCB-A) is computed as follows:
+The intrinsic size of the regionA RFCB (RFCB-A) is resolved as follows:
-  - The intrinsic width of regionA's (RFCB-A) is the 'shrink-to-fit' (or 'fit-content') width of the '#article' element. This intrinsic
+<code>
-    height is not used in this case because the 'width' of the RFCB will follow the rules of the
+  - 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. Because regionA is in the normal flow.
+        - 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
+        - Phase 2: layout the 'article' named flow into regionA. Because regionA's
-          RFCB-A. Assuming there is no break in the content, the used height will
+          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>
-  - Step A, Phase 1: layout regionA. regionA uses an intrinsic height of zero.
+When layout happen, regionA will be laid out it's width is computed as that of any non-replaced
-  - Step A, Phase 2: layout content in regions. When laying out regionA with height:auto:
+block level element and its intrinsic height is 1000px and used as for any height computation of replaced elements.
-                      - compute the fragment that fits into the region (following fragmentation rules) in the specified width of 300ex.
+In our example, the regionA box will have used width and height of 300px x 1000px and will tightly fit the flow content.
-                      - compute the intrinsic height of the region based on the fragment content
-                      - freeze the intrinsic height ('Y') for regionB. **[QUESTION: what is regionB?]**
-Because there is a region with height:auto, a Step B is necessary.
-  - Step B, Phase 1: layout regionA. regionA uses an intrinsic height of 'Y'.
-  - Step B, Phase 2: layout content in region.
+== 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) ==