Differences

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

--- spec:css3-regions:auto-height [2012/03/29 08:18] – vhardy
+++ spec:css3-regions:auto-height [2012/03/29 14:50] – vhardy
@@ Line 4: / Line 4: @@
 that illustrate how this model is used concretely.
-== Use Case A ==
+== Use Case A : Single regions in normal flow with height: auto ==
 <code>
@@ Line 48: / Line 48: @@
 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>