Differences

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

--- spec:css3-regions:auto-height [2012/03/28 16:12] – 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:
 <code>
@@ Line 38: / Line 38: @@
           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 fragmented box)
+          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 layout where it's width is computed as that of any non-replaced
+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 values of 300px x 1000px and will tightly fit the flow content.
+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>