Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
spec:css3-regions:auto-height [2012/03/29 14:50]
vhardy
spec:css3-regions:auto-height [2014/12/09 15:48] (current)
Line 1: Line 1:
 ==== Regions: Processing Model for auto sizing ==== ==== 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-intoarticle; +
-}+
  
-#regionA { +https://​hg.csswg.org/​test/​file/​887baeb650dd/​contributors/​adobe/​incoming/​css3-regions
-     widthauto; +
-     ​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. 
                       ​                       ​
 
spec/css3-regions/auto-height.txt · Last modified: 2014/12/09 15:48 (external edit)
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki