1.1 --- a/css-overflow/Overview.src.html Tue Jan 28 00:45:24 2014 -0800
1.2 +++ b/css-overflow/Overview.src.html Tue Jan 28 01:13:53 2014 -0800
1.3 @@ -243,6 +243,169 @@
1.4 in the CSS Fragmentation Module [[!CSS3-BREAK]].
1.5 </p>
1.6
1.7 +<h2 id="overflow-concepts">Types of overflow</h2>
1.8 +
1.9 + <p>
1.10 + CSS uses the term <dfn>overflow</dfn> to describe
1.11 + the contents of a box
1.12 + that extend outside that one of that box's edges
1.13 + (i.e., its <i>content edge</i>, <i>padding edge</i>,
1.14 + <i>border edge</i>, or <i>margin edge</i>).
1.15 + The overflow might be described as the elements or features
1.16 + that cause this overflow,
1.17 + the non-rectangular region occupied by these features,
1.18 + or, more commonly,
1.19 + as the minimal rectangle that bounds that region.
1.20 + A box's overflow is computed based on the boxes and styles
1.21 + of the box and of all its descendants whose containing block chain
1.22 + <span class="issue">undefined term?</span>
1.23 + includes the box.
1.24 + </p>
1.25 +
1.26 + <p>
1.27 + In most cases, any of these types of overflow
1.28 + can be computed for any box
1.29 + from the bounds and properties of that box,
1.30 + and from the overflow (of that type)
1.31 + of each of its children.
1.32 + However, this is not always the case; for example,
1.33 + when ''transform-style: preserve-3d'' [[CSS3-TRANSFORMS]] is used on
1.34 + some of the children, their descendants with
1.35 + ''transform-style: preserve-3d'' must also be examined.
1.36 + </p>
1.37 +
1.38 +<h3 id="ink-overflow">Ink overflow</h3>
1.39 +
1.40 + <p>
1.41 + The <dfn>ink overflow</dfn> of a box
1.42 + is the part of that box and its contents that
1.43 + creates a visual effect outside of
1.44 + the box's border box.
1.45 + </p>
1.46 +
1.47 + <p>
1.48 + Since some effects in CSS (for example, the blurs in
1.49 + 'text-shadow' [[CSS3TEXT]] and 'box-shadow' [[CSS3BG]])
1.50 + do not define what visual extent they cover, the extent
1.51 + of the <i>ink overflow</i> is undefined.
1.52 + </p>
1.53 +
1.54 + <p class="issue">
1.55 + Should we try to define it at all and just leave pieces undefined?
1.56 + </p>
1.57 +
1.58 + <p>
1.59 + The <dfn>ink overflow region</dfn> is the non-rectangular region
1.60 + occupied by the <i>ink overflow</i>, and the
1.61 + <dfn>ink overflow rectangle</dfn> is
1.62 + the minimal rectangle whose axis is aligned to the box's axes
1.63 + and contains the <i>ink overflow region</i>.
1.64 + Note that the <i>ink overflow rectangle</i> is a rectangle
1.65 + in the box's coordinate system, but might be non-rectangular
1.66 + in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
1.67 + </p>
1.68 +
1.69 +<h3 id="scrollable-overflow">Scrollable overflow</h3>
1.70 +
1.71 + <p>
1.72 + The <dfn>scrollable overflow</dfn> of a box is the
1.73 + set of things extending outside of that box's padding edge
1.74 + for which a scrolling mechanism needs to be provided.
1.75 + </p>
1.76 +
1.77 + <p>
1.78 + Given the following definitions
1.79 + <span class="issue">which belong in [[CSS3-TRANSFORMS]]</span>:
1.80 + </p>
1.81 +
1.82 + <dl>
1.83 + <dt><dfn>3d-preserving child</dfn></dt>
1.84 + <dd>
1.85 + A child box C of a parent box P is a 3d-preserving
1.86 + child if it has ''transform-style: preserve-3d''
1.87 + and the user-agent is not required to flatten it
1.88 + based on the <a href="http://www.w3.org/TR/css3-transforms/#transform-style-property">requirements</a> in [[!CSS3-TRANSFORMS]].
1.89 + </dt>
1.90 + <dt><dfn>non-3d-preserving child</dfn></dt>
1.91 + <dd>
1.92 + A child C of a box P is a non-3d-preserving-child if
1.93 + it is not a <i>3d-preserving child</i>.
1.94 + </dd>
1.95 + <dt><dfn>3d-preserving descendant</dfn></dt>
1.96 + <dd>
1.97 + Box D is a 3d-preserving descendant of box A if A is
1.98 + an ancestor of D, and D and all of the boxes (if any)
1.99 + in the ancestor chain from D to A
1.100 + are <i>3d-preserving child</i> boxes.
1.101 + </dd>
1.102 + </dl>
1.103 +
1.104 + <p>The scrollable overflow of a box is the union of the following things,
1.105 + all adjusted for transforms <span class="issue">undefined concept!</span> into the box's coordinate space:</p>
1.106 +
1.107 + <ul>
1.108 + <li>
1.109 + for the box and all of its <i>3d-preserving descendant</i> boxes:
1.110 + <ul>
1.111 + <li>the box's own padding edge (for the box itself) or border edge (for <i>3d-preserving descendant</i> boxes)</li>
1.112 + <li>the bounds <span class="issue">undefined term!</span> of any text directly in the box</li>
1.113 + <li><span class="issue">MORE HERE!</span>
1.114 + </ul>
1.115 + <li>
1.116 + for all the <i>non-3d-preserving child</i> boxes of the
1.117 + box and its <i>3d-preserving descendant</i> boxes,
1.118 + the scrollable overflow of the box
1.119 + </li>
1.120 + </ul>
1.121 +
1.122 + <p class="issue">
1.123 + I wrote this definition off the top of my head,
1.124 + so it can't possibly be right.
1.125 + It's missing tons of pieces!
1.126 + </p>
1.127 +
1.128 + <p>
1.129 + The <dfn>scrollable overflow region</dfn> is the non-rectangular region
1.130 + occupied by the <i>scrollable overflow</i>, and the
1.131 + <dfn>scrollable overflow rectangle</dfn> is
1.132 + the minimal rectangle whose axis is aligned to the box's axes
1.133 + and contains the <i>scrollable overflow region</i>.
1.134 + Note that the <i>scrollable overflow rectangle</i> is a rectangle
1.135 + in the box's coordinate system, but might be non-rectangular
1.136 + in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
1.137 + </p>
1.138 +
1.139 +<h3 id="border-box-overflow">Border box overflow</h3>
1.140 +
1.141 + <p class="issue">
1.142 + This concept has been proposed for some uses, such as for
1.143 + determining what the 'outline' property goes around, and
1.144 + as the basis of a coordinate system for specifying clips and masks,
1.145 + but it's not clear if it's needed.
1.146 + </p>
1.147 +
1.148 + <p>
1.149 + The <dfn>border-box overflow</dfn> of a box is the
1.150 + union of the box's border edge and the border edges of
1.151 + the box's descendants.</p>
1.152 + </p>
1.153 +
1.154 + <p class="issue">
1.155 + If needed, define more formally, as for scrollable overflow above.
1.156 + (Maybe even share the definitions in an appropriate way!)
1.157 + </p>
1.158 +
1.159 + <p>
1.160 + The <dfn>border-box overflow region</dfn> is the non-rectangular region
1.161 + occupied by the <i>border-box overflow</i>, and the
1.162 + <dfn>border-box overflow rectangle</dfn> is
1.163 + the minimal rectangle whose axis is aligned to the box's axes
1.164 + and contains the <i>border-box overflow region</i>.
1.165 + Note that the <i>border-box overflow rectangle</i> is a rectangle
1.166 + in the box's coordinate system, but might be non-rectangular
1.167 + in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
1.168 + </p>
1.169 +
1.170 <h2 id="overflow-properties">Overflow properties</h2>
1.171
1.172 <p>
