This is an old revision of the document!


Regions: Processing Model for auto sizing

The regions specification proposes a model for handling auto sizing on regions. This page contains use cases that illustrate how this model is used concretely.

Use Case A : Single regions in normal flow with height: auto
<head>
<style>
#article {
    flow-into: article;
}

#regionA {
     width: auto;
     height: auto;
     flow-from: article;
}

</style>
</head>
<body>
<div id="article">…</div>
<div id="regionA"></div>
</body>

The intrinsic size of the regionA RFCB (RFCB-A) is resolved as follows:

  - 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). 

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
<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>

To resolve the 'intrinsic' height of regionA and regionB:

- 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.

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)
   <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>
  1. Step A, Phase 1: layout region1 and region2 using an intrinsic height of 0.
  2. Step A, Phase 2: layout content in regions. Because region1 has height:auto,
    1. compute the fragment that fits into the region (following fragmentation rules).
    2. compute the intrinsic height of the region based on the fragment content
    3. freeze the intrinsic height ('Y') for region1.

Because region2 has height:auto:

  1. 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…]
  2. compute the intrinsic height of the region based on the fragment content
  3. freeze the intrinsic height ('Z') for region2.

Because there is a region with height:auto, a Step B is necessary.

  1. Step B, Phase 1: layout region1 and region2. region1 uses an intrinsic height of 'Y', region2 uses an intrinsic height of 'Z'.
  2. Step B, Phase 2: layout content in region.
Example C - Edge Case A (from https://www.w3.org/Style/CSS/Tracker/actions/351)
<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>

[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]

  1. 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.
  2. Step A, Phase 2: layout content in regions. When laying out regionB, because regionB has height:auto:
    1. compute the fragment that fits into the region (following fragmentation rules).
    2. compute the intrinsic height of the region based on the fragment content
    3. freeze the intrinsic height ('Y') for regionB.

Because there is a region with height:auto, a Step B is necessary.

  1. 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'.

  1. 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
<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>
  1. Step A, Phase 1: layout regionA and regionB. Both use an intrinsic height of zero.
  2. Step A, Phase 2: layout content in regions. When layout region A, because region A has height:auto:
    1. compute the fragment that fits into the region (following fragmentation rules).
    2. compute the intrinsic height of the region based on the fragment content
    3. 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

  1. compute the fragment that fits into the region,
  2. compute the intrinsic height of the region based on the fragment content
  3. freeze the intrinsic height ('Z') for region B.
  1. Step B, Phase 1: layout regionA and regionB using the intrinsic heights of 'Y' and 'Z' respectively.
  2. Step B, Phase 2: layout content in regionA and B.
 
spec/css3-regions/auto-height.1333057832.txt.gz · Last modified: 2014/12/09 15:48 (external edit)
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki