This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
spec:css3-regions:auto-height [2012/03/29 09:02] – vhardy | spec:css3-regions:auto-height [2012/04/02 21:21] – vhardy | ||
---|---|---|---|
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 is now obsolete. The proposed processing |
- | that illustrate how this model is used concretely. | + | |
- | == Use Case A : Single | + | http:// |
- | < | + | and the use cases are in the test repository: |
- | < | + | |
- | < | + | |
- | #article { | + | |
- | flow-into: article; | + | |
- | } | + | |
- | #regionA { | + | https:// |
- | width: auto; | + | |
- | | + | |
- | flow-from: article; | + | |
- | } | + | |
- | </ | + | (the regions-auto-size-*.xht tests) |
- | </ | + | |
- | < | + | |
- | <div id=" | + | |
- | <div id=" | + | |
- | </ | + | |
- | </ | ||
- | The intrinsic size of the regionA RFCB (RFCB-A) is resolved as follows: | ||
- | |||
- | < | ||
- | - The width of regionA' | ||
- | 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 ' | ||
- | - Phase 2: layout the ' | ||
- | height computed to ' | ||
- | 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:// | ||
- | 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 == | ||
- | |||
- | < | ||
- | < | ||
- | #article { | ||
- | flow-into: article; | ||
- | } | ||
- | |||
- | #article p: | ||
- | region-break-after: | ||
- | } | ||
- | #regionA, #regionB { | ||
- | flow-from: article; | ||
- | } | ||
- | |||
- | #regionA { | ||
- | width: 800px; | ||
- | height: auto; | ||
- | } | ||
- | |||
- | #regionB { | ||
- | width: 400px; | ||
- | height: auto; | ||
- | } | ||
- | </ | ||
- | |||
- | < | ||
- | |||
- | <div id=" | ||
- | |||
- | <div id=" | ||
- | <div id=" | ||
- | </ | ||
- | </ | ||
- | |||
- | To resolve the ' | ||
- | |||
- | < | ||
- | |||
- | - 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 | ||
- | | ||
- | 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. | ||
- | < | ||
- | |||
- | == Example B - Edge Case B (from https:// | ||
- | |||
- | < | ||
- | < | ||
- | <div id=" | ||
- | <div id=" | ||
- | </ | ||
- | </ | ||
- | |||
- | - 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: | ||
- | - 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 (' | ||
- | | ||
- | - 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: | ||
- | - compute the intrinsic height of the region based on the fragment content | ||
- | - freeze the intrinsic height (' | ||
- | | ||
- | Because there is a region with height: | ||
- | |||
- | - Step B, Phase 1: layout region1 and region2. region1 uses an intrinsic height of ' | ||
- | - Step B, Phase 2: layout content in region. | ||
- | |||
- | == Example C - Edge Case A (from https:// | ||
- | < | ||
- | < | ||
- | #regionA { | ||
- | top: 0; | ||
- | bottom: 0; | ||
- | width: 100px; | ||
- | position: absolute; | ||
- | flow-from: article; | ||
- | } | ||
- | | ||
- | #regionB { | ||
- | flow-from: article; | ||
- | width: 200px; | ||
- | margin-left: | ||
- | top: 0; | ||
- | right: 0; | ||
- | position: absolute; | ||
- | } | ||
- | | ||
- | #article { | ||
- | flow-into: article; | ||
- | } | ||
- | | ||
- | </ | ||
- | |||
- | <div id=" | ||
- | <div id=" | ||
- | <div id=" | ||
- | <div id=" | ||
- | </ | ||
- | </ | ||
- | **[OBSERVATION: | ||
- | - Step A, Phase 1: layout regionA and regionB. regionB uses an intrinsic size of zero and, as a result, regionB' | ||
- | - Step A, Phase 2: layout content in regions. When laying out regionB, because regionB has height: | ||
- | - 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 (' | ||
- | | ||
- | Because there is a region with height: | ||
- | |||
- | - Step B, Phase 1: layout regionA and regionB. regionB uses an intrinsic height of ' | ||
- | | ||
- | - 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 == | ||
- | |||
- | < | ||
- | < | ||
- | #article { | ||
- | | ||
- | } | ||
- | |||
- | #regionA, #regionB { | ||
- | | ||
- | } | ||
- | |||
- | #regionA { | ||
- | | ||
- | | ||
- | } | ||
- | |||
- | #regionB { | ||
- | | ||
- | | ||
- | } | ||
- | </ | ||
- | |||
- | <div id=" | ||
- | <div id=" | ||
- | <div id=" | ||
- | </ | ||
- | |||
- | - 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: | ||
- | - 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 (' | ||
- | 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 (' | ||
- | |||
- | |||
- | - Step B, Phase 1: layout regionA and regionB using the intrinsic heights of ' | ||
- | - Step B, Phase 2: layout content in regionA and B. | ||
| |