changeset
[css3-overflow] Describe the values of the 'overflow', 'overflow-x', and 'overflow-y' properties.
Mon, 25 Mar 2013 16:09:09 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Mon, 25 Mar 2013 16:09:09 -0700
- changeset 7811
- 85802187d27b
- parent 7810
- 9d38acef4dfc
- child 7812
- d7ddd11519d1
[css3-overflow] Describe the values of the 'overflow', 'overflow-x', and 'overflow-y' properties.
| css3-overflow/Overview.html | file | annotate | diff | comparison | revisions | |
| css3-overflow/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-overflow/Overview.html Mon Mar 25 15:14:55 2013 -0700 1.2 +++ b/css3-overflow/Overview.html Mon Mar 25 16:09:09 2013 -0700 1.3 @@ -250,58 +250,61 @@ 1.4 <ul class=toc> 1.5 <li><a href="#intro"><span class=secno>1. </span> Introduction</a> 1.6 1.7 - <li><a href="#scrolling-overflow"><span class=secno>2. </span>Scrolling 1.8 + <li><a href="#overflow-properties"><span class=secno>2. </span>Overflow 1.9 + properties</a> 1.10 + 1.11 + <li><a href="#scrolling-overflow"><span class=secno>3. </span>Scrolling 1.12 and hidden overflow</a> 1.13 1.14 - <li><a href="#paginated-overflow"><span class=secno>3. </span>Paginated 1.15 + <li><a href="#paginated-overflow"><span class=secno>4. </span>Paginated 1.16 overflow</a> 1.17 1.18 - <li><a href="#fragment-overflow"><span class=secno>4. </span>Fragment 1.19 + <li><a href="#fragment-overflow"><span class=secno>5. </span>Fragment 1.20 overflow</a> 1.21 <ul class=toc> 1.22 - <li><a href="#fragment-styling"><span class=secno>4.1. </span>Fragment 1.23 + <li><a href="#fragment-styling"><span class=secno>5.1. </span>Fragment 1.24 styling</a> 1.25 <ul class=toc> 1.26 - <li><a href="#fragment-pseudo-element"><span class=secno>4.1.1. 1.27 + <li><a href="#fragment-pseudo-element"><span class=secno>5.1.1. 1.28 </span>The ::nth-fragment() pseudo-element</a> 1.29 1.30 - <li><a href="#style-of-fragments"><span class=secno>4.1.2. 1.31 + <li><a href="#style-of-fragments"><span class=secno>5.1.2. 1.32 </span>Styling of fragments</a> 1.33 1.34 - <li><a href="#style-in-fragments"><span class=secno>4.1.3. 1.35 + <li><a href="#style-in-fragments"><span class=secno>5.1.3. 1.36 </span>Styling inside fragments</a> 1.37 </ul> 1.38 1.39 - <li><a href="#max-lines"><span class=secno>4.2. </span>The ‘<code 1.40 + <li><a href="#max-lines"><span class=secno>5.2. </span>The ‘<code 1.41 class=property>max-lines</code>’ property</a> 1.42 </ul> 1.43 1.44 - <li><a href="#static-media"><span class=secno>5. </span>Overflow in static 1.45 + <li><a href="#static-media"><span class=secno>6. </span>Overflow in static 1.46 media</a> 1.47 1.48 - <li><a href="#conformance"><span class=secno>6. </span> Conformance</a> 1.49 + <li><a href="#conformance"><span class=secno>7. </span> Conformance</a> 1.50 <ul class=toc> 1.51 - <li><a href="#placement"><span class=secno>6.1. </span> Module 1.52 + <li><a href="#placement"><span class=secno>7.1. </span> Module 1.53 interactions</a> 1.54 1.55 - <li><a href="#values"><span class=secno>6.2. </span> Values</a> 1.56 + <li><a href="#values"><span class=secno>7.2. </span> Values</a> 1.57 1.58 - <li><a href="#conventions"><span class=secno>6.3. </span> Document 1.59 + <li><a href="#conventions"><span class=secno>7.3. </span> Document 1.60 conventions</a> 1.61 1.62 - <li><a href="#conformance-classes"><span class=secno>6.4. </span> 1.63 + <li><a href="#conformance-classes"><span class=secno>7.4. </span> 1.64 Conformance classes</a> 1.65 1.66 - <li><a href="#partial"><span class=secno>6.5. </span> Partial 1.67 + <li><a href="#partial"><span class=secno>7.5. </span> Partial 1.68 implementations</a> 1.69 1.70 - <li><a href="#experimental"><span class=secno>6.6. </span> Experimental 1.71 + <li><a href="#experimental"><span class=secno>7.6. </span> Experimental 1.72 implementations</a> 1.73 1.74 - <li><a href="#testing"><span class=secno>6.7. </span> Non-experimental 1.75 + <li><a href="#testing"><span class=secno>7.7. </span> Non-experimental 1.76 implementations</a> 1.77 1.78 - <li><a href="#cr-exit-criteria"><span class=secno>6.8. </span> CR exit 1.79 + <li><a href="#cr-exit-criteria"><span class=secno>7.8. </span> CR exit 1.80 criteria</a> 1.81 </ul> 1.82 1.83 @@ -331,12 +334,12 @@ 1.84 elements. 1.85 1.86 <p> CSS Level 2 <a href="#CSS21" 1.87 - rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> introduced the ‘<code 1.88 - class=property>overflow</code>’ property, which allows authors to have 1.89 - overflow be handled by scrolling, which means it is no longer an authoring 1.90 - error. It also allows authors to specify that overflow is handled by 1.91 - clipping, which makes sense when the author's intent is that the content 1.92 - not be shown. 1.93 + rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> introduced the ‘<a 1.94 + href="#overflow"><code class=property>overflow</code></a>’ property, 1.95 + which allows authors to have overflow be handled by scrolling, which means 1.96 + it is no longer an authoring error. It also allows authors to specify that 1.97 + overflow is handled by clipping, which makes sense when the author's 1.98 + intent is that the content not be shown. 1.99 1.100 <p> However, scrolling is not the only way to present large amounts of 1.101 content, and may even not be the optimal way. After all, the codex 1.102 @@ -359,14 +362,225 @@ 1.103 the CSS Fragmentation Module <a href="#CSS3-BREAK" 1.104 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>. 1.105 1.106 - <h2 id=scrolling-overflow><span class=secno>2. </span>Scrolling and hidden 1.107 + <h2 id=overflow-properties><span class=secno>2. </span>Overflow properties</h2> 1.108 + 1.109 + <table class=propdef> 1.110 + <tbody> 1.111 + <tr> 1.112 + <th>Name: 1.113 + 1.114 + <td><dfn id=overflow-x>overflow-x</dfn>, <dfn 1.115 + id=overflow-y>overflow-y</dfn> 1.116 + 1.117 + <tr> 1.118 + <th><a href="#values">Value</a>: 1.119 + 1.120 + <td>visible | hidden | scroll | auto | paged-x | paged-y | 1.121 + paged-x-controls | paged-y-controls | fragments 1.122 + 1.123 + <tr> 1.124 + <th>Initial: 1.125 + 1.126 + <td>visible 1.127 + 1.128 + <tr> 1.129 + <th>Applies to: 1.130 + 1.131 + <td>block containers 1.132 + 1.133 + <tr> 1.134 + <th>Inherited: 1.135 + 1.136 + <td>no 1.137 + 1.138 + <tr> 1.139 + <th>Percentages: 1.140 + 1.141 + <td>N/A 1.142 + 1.143 + <tr> 1.144 + <th>Media: 1.145 + 1.146 + <td>visual 1.147 + 1.148 + <tr> 1.149 + <th>Computed value: 1.150 + 1.151 + <td>see below 1.152 + 1.153 + <tr> 1.154 + <th>Animatable: 1.155 + 1.156 + <td>no 1.157 + 1.158 + <tr> 1.159 + <th>Canonical order: 1.160 + 1.161 + <td><abbr title="follows order of property value definition">per 1.162 + grammar</abbr> 1.163 + </table> 1.164 + 1.165 + <table class=propdef> 1.166 + <tbody> 1.167 + <tr> 1.168 + <th>Name: 1.169 + 1.170 + <td><dfn id=overflow>overflow</dfn> 1.171 + 1.172 + <tr> 1.173 + <th><a href="#values">Value</a>: 1.174 + 1.175 + <td>visible | hidden | scroll | auto | paged-x | paged-y | 1.176 + paged-x-controls | paged-y-controls | fragments 1.177 + 1.178 + <tr> 1.179 + <th>Initial: 1.180 + 1.181 + <td>see individual properties 1.182 + 1.183 + <tr> 1.184 + <th>Applies to: 1.185 + 1.186 + <td>block containers 1.187 + 1.188 + <tr> 1.189 + <th>Inherited: 1.190 + 1.191 + <td>no 1.192 + 1.193 + <tr> 1.194 + <th>Percentages: 1.195 + 1.196 + <td>N/A 1.197 + 1.198 + <tr> 1.199 + <th>Media: 1.200 + 1.201 + <td>visual 1.202 + 1.203 + <tr> 1.204 + <th>Computed value: 1.205 + 1.206 + <td>see individual properties 1.207 + 1.208 + <tr> 1.209 + <th>Animatable: 1.210 + 1.211 + <td>no 1.212 + 1.213 + <tr> 1.214 + <th>Canonical order: 1.215 + 1.216 + <td><abbr title="follows order of property value definition">per 1.217 + grammar</abbr> 1.218 + </table> 1.219 + 1.220 + <p>The values of these properties are: 1.221 + 1.222 + <dl> 1.223 + <dt><dfn id=visible>visible</dfn> 1.224 + 1.225 + <dd> There is no special handling of overflow, that is, it may be rendered 1.226 + outside the block container. 1.227 + 1.228 + <dt><dfn id=hidden>hidden</dfn> 1.229 + 1.230 + <dt><dfn id=scroll>scroll</dfn> 1.231 + 1.232 + <dt><dfn id=auto>auto</dfn> 1.233 + 1.234 + <dd> These values are collectively the <dfn id=scrolling-values>scrolling 1.235 + values</dfn>; they are defined in the section on <a 1.236 + href="#scrolling-overflow">scrolling and hidden overflow</a>. 1.237 + 1.238 + <dt><dfn id=paged-x>paged-x</dfn> 1.239 + 1.240 + <dt><dfn id=paged-y>paged-y</dfn> 1.241 + 1.242 + <dt><dfn id=paged-x-controls>paged-x-controls</dfn> 1.243 + 1.244 + <dt><dfn id=paged-y-controls>paged-y-controls</dfn> 1.245 + 1.246 + <dt><dfn id=fragments>fragments</dfn> 1.247 + 1.248 + <dd> These values are collectively the <dfn 1.249 + id=fragmenting-values>fragmenting values</dfn>; they are defined in the 1.250 + sections on <a href="#paginated-overflow">paginated overflow</a> and <a 1.251 + href="#fragment-overflow">fragment overflow</a>. 1.252 + </dl> 1.253 + 1.254 + <p> The ‘<a href="#overflow"><code class=property>overflow</code></a>’ 1.255 + property is a shorthand property that sets the specified values of both 1.256 + ‘<a href="#overflow-x"><code class=property>overflow-x</code></a>’ and 1.257 + ‘<a href="#overflow-y"><code class=property>overflow-y</code></a>’ to 1.258 + the value specified for ‘<a href="#overflow"><code 1.259 + class=property>overflow</code></a>’. 1.260 + 1.261 + <div id=overflow-computed-values> 1.262 + <p>The computed values of ‘<a href="#overflow-x"><code 1.263 + class=property>overflow-x</code></a>’ and ‘<a 1.264 + href="#overflow-y"><code class=property>overflow-y</code></a>’ are 1.265 + determined from the cascaded values <a href="#CSS3CASCADE" 1.266 + rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a> based on the 1.267 + following rules: 1.268 + 1.269 + <ol> 1.270 + <li> If one or both of the cascaded values are <a 1.271 + href="#fragmenting-values"><i>fragmenting values</i></a>, then: 1.272 + <ol> 1.273 + <li> If one of the cascaded values is one of the <a 1.274 + href="#fragmenting-values"><i>fragmenting values</i></a> and the other 1.275 + is not, then the computed values are the same as the cascaded values. 1.276 + 1.277 + <li> If both of the cascaded values are <a 1.278 + href="#fragmenting-values"><i>fragmenting values</i></a>, then: 1.279 + <ol> 1.280 + <li> for horizontal writing mode <a href="#CSS3-WRITING-MODES" 1.281 + rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>, 1.282 + the computed value for ‘<a href="#overflow-y"><code 1.283 + class=css>overflow-y</code></a>’ is the cascaded value and the 1.284 + computed value for ‘<a href="#overflow-x"><code 1.285 + class=css>overflow-x</code></a>’ is ‘<a href="#hidden"><code 1.286 + class=css>hidden</code></a>’, or 1.287 + 1.288 + <li> for vertical writing mode <a href="#CSS3-WRITING-MODES" 1.289 + rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>, 1.290 + the computed value for ‘<a href="#overflow-x"><code 1.291 + class=css>overflow-x</code></a>’ is the cascaded value and the 1.292 + computed value for ‘<a href="#overflow-y"><code 1.293 + class=css>overflow-y</code></a>’ is ‘<a href="#hidden"><code 1.294 + class=css>hidden</code></a>’. 1.295 + </ol> 1.296 + </ol> 1.297 + 1.298 + <li> Otherwise, if one cascaded values is one of the <a 1.299 + href="#scrolling-values"><i>scrolling values</i></a> and the other is 1.300 + ‘<a href="#visible"><code class=css>visible</code></a>’, then 1.301 + computed values are the cascaded values with ‘<a href="#visible"><code 1.302 + class=css>visible</code></a>’ changed to ‘<a href="#hidden"><code 1.303 + class=css>hidden</code></a>’. 1.304 + 1.305 + <li> Otherwise, the computed values are as specified. 1.306 + </ol> 1.307 + </div> 1.308 + 1.309 + <p class=issue> Are all 4 of the ‘<code class=css>paged-*</code>’ 1.310 + values really needed? 1.311 + 1.312 + <p> When the <a href="#fragmenting-values"><i>fragmenting values</i></a> 1.313 + are used, the overflow from the fragments themselves treats the 1.314 + fragmenting value as ‘<a href="#hidden"><code 1.315 + class=css>hidden</code></a>’. <span class=issue>Is this the right 1.316 + behavior?</span> <span class=issue>Give example.</span> 1.317 + 1.318 + <h2 id=scrolling-overflow><span class=secno>3. </span>Scrolling and hidden 1.319 overflow</h2> 1.320 1.321 <p class=issue> Move material from <a href="#CSS21" 1.322 rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> and <a href="#CSS3BOX" 1.323 rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a> here. 1.324 1.325 - <h2 id=paginated-overflow><span class=secno>3. </span>Paginated overflow</h2> 1.326 + <h2 id=paginated-overflow><span class=secno>4. </span>Paginated overflow</h2> 1.327 1.328 <p class=issue>overflow:paginate or overflow:pages (or paged-x, paged-y, 1.329 paged-x-controls, paged-y-controls as <a href="#CSS3GCPM" 1.330 @@ -376,9 +590,10 @@ 1.331 at once? 1.332 1.333 <p class=issue> The current implementation of paginated overflow uses the 1.334 - ‘<code class=property>overflow</code>’/‘<code 1.335 - class=property>overflow-x</code>’/‘<code 1.336 - class=property>overflow-y</code>’ properties rather than the ‘<code 1.337 + ‘<a href="#overflow"><code class=property>overflow</code></a>’/‘<a 1.338 + href="#overflow-x"><code class=property>overflow-x</code></a>’/‘<a 1.339 + href="#overflow-y"><code class=property>overflow-y</code></a>’ 1.340 + properties rather than the ‘<code 1.341 class=property>overflow-style</code>’ property as proposed in the <a 1.342 href="#CSS3GCPM" rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> draft 1.343 (which also matches the <a href="#CSS3-MARQUEE" 1.344 @@ -386,21 +601,24 @@ 1.345 should probably switch away from ‘<code 1.346 class=property>overflow-style</code>’, but that's not 100% clear. 1.347 1.348 - <h2 id=fragment-overflow><span class=secno>4. </span>Fragment overflow</h2> 1.349 + <h2 id=fragment-overflow><span class=secno>5. </span>Fragment overflow</h2> 1.350 1.351 - <p> This section introduces and defines the meaning of the new ‘<code 1.352 - class=css>fragments</code>’ value of the ‘<code 1.353 - class=property>overflow</code>’ property. 1.354 + <p> This section introduces and defines the meaning of the new ‘<a 1.355 + href="#fragments"><code class=css>fragments</code></a>’ value of the 1.356 + ‘<a href="#overflow"><code class=property>overflow</code></a>’ 1.357 + property. 1.358 1.359 - <p> When the computed value of ‘<code class=property>overflow</code>’ 1.360 - for an element is ‘<code class=css>fragments</code>’, and 1.361 + <p> When the computed value of ‘<a href="#overflow"><code 1.362 + class=property>overflow</code></a>’ for an element is ‘<a 1.363 + href="#fragments"><code class=css>fragments</code></a>’, and 1.364 implementations would otherwise have created a box for the element, then 1.365 implementations must create a sequence of <dfn id=fragment-box>fragment 1.366 box</dfn>es for that element. (It is possible for an element with ‘<code 1.367 class=css>overflow: fragments</code>’ to generate only one <a 1.368 href="#fragment-box"><i>fragment box</i></a>. However, if an element's 1.369 - computed ‘<code class=property>overflow</code>’ is not ‘<code 1.370 - class=css>fragments</code>’, then its box is not a <a 1.371 + computed ‘<a href="#overflow"><code 1.372 + class=property>overflow</code></a>’ is not ‘<a href="#fragments"><code 1.373 + class=css>fragments</code></a>’, then its box is not a <a 1.374 href="#fragment-box"><i>fragment box</i></a>.) Every <a 1.375 href="#fragment-box"><i>fragment box</i></a> is a fragmentation container, 1.376 and any overflow that would cause that fragmentation container to fragment 1.377 @@ -501,9 +719,9 @@ 1.378 done on a model there, and the editors of that specification, should 1.379 inform what happens in this specification. 1.380 1.381 - <h3 id=fragment-styling><span class=secno>4.1. </span>Fragment styling</h3> 1.382 + <h3 id=fragment-styling><span class=secno>5.1. </span>Fragment styling</h3> 1.383 1.384 - <h4 id=fragment-pseudo-element><span class=secno>4.1.1. </span>The 1.385 + <h4 id=fragment-pseudo-element><span class=secno>5.1.1. </span>The 1.386 ::nth-fragment() pseudo-element</h4> 1.387 1.388 <p> The ::nth-fragment() pseudo-element is a pseudo-element that describes 1.389 @@ -523,7 +741,7 @@ 1.390 with the new ‘<code class=css>::fragment:nth(<var>an+b</var>)</code>’ 1.391 syntax. 1.392 1.393 - <h4 id=style-of-fragments><span class=secno>4.1.2. </span>Styling of 1.394 + <h4 id=style-of-fragments><span class=secno>5.1.2. </span>Styling of 1.395 fragments</h4> 1.396 1.397 <p class=issue> Should this apply to fragment overflow only, or also to 1.398 @@ -610,12 +828,14 @@ 1.399 </div> 1.400 1.401 <p> Styling an ‘<code class=css>::nth-fragment()</code>’ pseudo-element 1.402 - with the ‘<code class=property>overflow</code>’ property does take 1.403 - effect; if a <a href="#fragment-box"><i>fragment box</i></a> has a 1.404 - computed value of ‘<code class=property>overflow</code>’ other than 1.405 - ‘<code class=css>fragments</code>’ then that fragment box is the last 1.406 - fragment. However, overriding ‘<code class=css>overflow</code>’ on the 1.407 - first fragment does not cause the <a href="#fragment-box"><i>fragment 1.408 + with the ‘<a href="#overflow"><code 1.409 + class=property>overflow</code></a>’ property does take effect; if a <a 1.410 + href="#fragment-box"><i>fragment box</i></a> has a computed value of ‘<a 1.411 + href="#overflow"><code class=property>overflow</code></a>’ other than 1.412 + ‘<a href="#fragments"><code class=css>fragments</code></a>’ then that 1.413 + fragment box is the last fragment. However, overriding ‘<a 1.414 + href="#overflow"><code class=css>overflow</code></a>’ on the first 1.415 + fragment does not cause the <a href="#fragment-box"><i>fragment 1.416 box</i></a> not to exist; whether there are fragment boxes at all is 1.417 determined by the computed value of overflow for the element. 1.418 1.419 @@ -636,8 +856,8 @@ 1.420 class=css>display:none</code>’? Or perhaps to forbid ‘<code 1.421 class=property>display</code>’, ‘<code 1.422 class=property>position</code>’, ‘<code 1.423 - class=property>float</code>’, and similar (in addition to ‘<code 1.424 - class=property>overflow</code>’)? 1.425 + class=property>float</code>’, and similar (in addition to ‘<a 1.426 + href="#overflow"><code class=property>overflow</code></a>’)? 1.427 1.428 <p> To match the model for other pseudo-elements where the pseudo-elements 1.429 live inside their corresponding element, declarations in ‘<code 1.430 @@ -701,7 +921,7 @@ 1.431 </table> 1.432 </div> 1.433 1.434 - <h4 id=style-in-fragments><span class=secno>4.1.3. </span>Styling inside 1.435 + <h4 id=style-in-fragments><span class=secno>5.1.3. </span>Styling inside 1.436 fragments</h4> 1.437 1.438 <p class=issue> Should this apply to fragment overflow only, or also to 1.439 @@ -798,7 +1018,7 @@ 1.440 </table> 1.441 </div> 1.442 1.443 - <h3 id=max-lines><span class=secno>4.2. </span>The ‘<a 1.444 + <h3 id=max-lines><span class=secno>5.2. </span>The ‘<a 1.445 href="#max-lines0"><code class=property>max-lines</code></a>’ property</h3> 1.446 1.447 <p> Authors may wish to style the opening lines of an element with 1.448 @@ -945,20 +1165,21 @@ 1.449 </table> 1.450 </div> 1.451 1.452 - <h2 id=static-media><span class=secno>5. </span>Overflow in static media</h2> 1.453 + <h2 id=static-media><span class=secno>6. </span>Overflow in static media</h2> 1.454 1.455 <p class=issue> This specification should define useful behavior for all 1.456 - values of ‘<code class=property>overflow</code>’ in static media (such 1.457 - as print). Current implementation behavior is quite poor and produces 1.458 - unexpected results when authors have not considered what will happen when 1.459 - the content they produce for interactive media is printed. 1.460 + values of ‘<a href="#overflow"><code 1.461 + class=property>overflow</code></a>’ in static media (such as print). 1.462 + Current implementation behavior is quite poor and produces unexpected 1.463 + results when authors have not considered what will happen when the content 1.464 + they produce for interactive media is printed. 1.465 1.466 - <h2 id=conformance><span class=secno>6. </span> Conformance</h2> 1.467 + <h2 id=conformance><span class=secno>7. </span> Conformance</h2> 1.468 1.469 - <h3 id=placement><span class=secno>6.1. </span> Module interactions</h3> 1.470 + <h3 id=placement><span class=secno>7.1. </span> Module interactions</h3> 1.471 1.472 - <p>This module extends the ‘<code class=property>overflow</code>’ 1.473 - feature defined in <a href="#CSS21" 1.474 + <p>This module extends the ‘<a href="#overflow"><code 1.475 + class=property>overflow</code></a>’ feature defined in <a href="#CSS21" 1.476 rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> section 11.1.1. It defines 1.477 additional overflow handling mechanisms that implementations must 1.478 implement as described in this module in order to conform to this module. 1.479 @@ -966,7 +1187,7 @@ 1.480 <p>No properties in this module apply to the <code>::first-line</code> or 1.481 <code>::first-letter</code> pseudo-elements. 1.482 1.483 - <h3 id=values><span class=secno>6.2. </span> Values</h3> 1.484 + <h3 id=values><span class=secno>7.2. </span> Values</h3> 1.485 1.486 <p>This specification follows the <a 1.487 href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property 1.488 @@ -985,7 +1206,7 @@ 1.489 keyword as their property value. For readability it has not been repeated 1.490 explicitly. 1.491 1.492 - <h3 id=conventions><span class=secno>6.3. </span> Document conventions</h3> 1.493 + <h3 id=conventions><span class=secno>7.3. </span> Document conventions</h3> 1.494 1.495 <p>Conformance requirements are expressed with a combination of descriptive 1.496 assertions and RFC 2119 terminology. The key words “MUST”, “MUST 1.497 @@ -1012,7 +1233,7 @@ 1.498 1.499 <p class=note>Note, this is an informative note. 1.500 1.501 - <h3 id=conformance-classes><span class=secno>6.4. </span> Conformance 1.502 + <h3 id=conformance-classes><span class=secno>7.4. </span> Conformance 1.503 classes</h3> 1.504 1.505 <p>Conformance to CSS Overflow Module Level 3 is defined for three 1.506 @@ -1056,7 +1277,7 @@ 1.507 module, and meet all other conformance requirements of style sheets as 1.508 described in this module. 1.509 1.510 - <h3 id=partial><span class=secno>6.5. </span> Partial implementations</h3> 1.511 + <h3 id=partial><span class=secno>7.5. </span> Partial implementations</h3> 1.512 1.513 <p>So that authors can exploit the forward-compatible parsing rules to 1.514 assign fallback values, CSS renderers <strong>must</strong> treat as 1.515 @@ -1070,7 +1291,7 @@ 1.516 unsupported values must be), CSS requires that the entire declaration be 1.517 ignored. 1.518 1.519 - <h3 id=experimental><span class=secno>6.6. </span> Experimental 1.520 + <h3 id=experimental><span class=secno>7.6. </span> Experimental 1.521 implementations</h3> 1.522 1.523 <p>To avoid clashes with future CSS features, the CSS2.1 specification 1.524 @@ -1084,7 +1305,7 @@ 1.525 vendor-prefixed syntax for such features, including those in W3C Working 1.526 Drafts. This avoids incompatibilities with future changes in the draft. 1.527 1.528 - <h3 id=testing><span class=secno>6.7. </span> Non-experimental 1.529 + <h3 id=testing><span class=secno>7.7. </span> Non-experimental 1.530 implementations</h3> 1.531 1.532 <p>Once a specification reaches the Candidate Recommendation stage, 1.533 @@ -1106,7 +1327,7 @@ 1.534 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 1.535 mailing list. 1.536 1.537 - <h3 id=cr-exit-criteria><span class=secno>6.8. </span> CR exit criteria</h3> 1.538 + <h3 id=cr-exit-criteria><span class=secno>7.8. </span> CR exit criteria</h3> 1.539 1.540 <p class=issue>[Change or remove the following CR exit criteria if the spec 1.541 is not a module, but, e.g., a Note or a profile. This text was <a 1.542 @@ -1198,6 +1419,26 @@ 1.543 </dd> 1.544 <!----> 1.545 1.546 + <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES] 1.547 + 1.548 + <dd>Elika J. Etemad; Koji Ishii. <a 1.549 + href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/"><cite>CSS 1.550 + Writing Modes Module Level 3.</cite></a> 15 November 2012. W3C Working 1.551 + Draft. (Work in progress.) URL: <a 1.552 + href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a> 1.553 + </dd> 1.554 + <!----> 1.555 + 1.556 + <dt id=CSS3CASCADE>[CSS3CASCADE] 1.557 + 1.558 + <dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr. <a 1.559 + href="http://www.w3.org/TR/2013/WD-css3-cascade-20130103/"><cite>CSS 1.560 + Cascading and Inheritance Level 3.</cite></a> 3 January 2013. W3C Working 1.561 + Draft. (Work in progress.) URL: <a 1.562 + href="http://www.w3.org/TR/2013/WD-css3-cascade-20130103/">http://www.w3.org/TR/2013/WD-css3-cascade-20130103/</a> 1.563 + </dd> 1.564 + <!----> 1.565 + 1.566 <dt id=CSS3COL>[CSS3COL] 1.567 1.568 <dd>Håkon Wium Lie. <a 1.569 @@ -1312,22 +1553,58 @@ 1.570 1.571 <ul class=indexlist> 1.572 <li>authoring tool, <a href="#authoring-tool" 1.573 - title="section 6.4."><strong>6.4.</strong></a> 1.574 + title="section 7.4."><strong>7.4.</strong></a> 1.575 + 1.576 + <li>auto, <a href="#auto" title="section 2."><strong>2.</strong></a> 1.577 1.578 <li>fragment box, <a href="#fragment-box" 1.579 - title="section 4."><strong>4.</strong></a> 1.580 + title="section 5."><strong>5.</strong></a> 1.581 + 1.582 + <li>fragmenting values, <a href="#fragmenting-values" 1.583 + title="section 2."><strong>2.</strong></a> 1.584 + 1.585 + <li>fragments, <a href="#fragments" 1.586 + title="section 2."><strong>2.</strong></a> 1.587 + 1.588 + <li>hidden, <a href="#hidden" title="section 2."><strong>2.</strong></a> 1.589 1.590 <li>max-lines, <a href="#max-lines0" 1.591 - title="section 4.2."><strong>4.2.</strong></a> 1.592 + title="section 5.2."><strong>5.2.</strong></a> 1.593 + 1.594 + <li>overflow, <a href="#overflow" 1.595 + title="section 2."><strong>2.</strong></a> 1.596 + 1.597 + <li>overflow-x, <a href="#overflow-x" 1.598 + title="section 2."><strong>2.</strong></a> 1.599 + 1.600 + <li>overflow-y, <a href="#overflow-y" 1.601 + title="section 2."><strong>2.</strong></a> 1.602 + 1.603 + <li>paged-x, <a href="#paged-x" title="section 2."><strong>2.</strong></a> 1.604 + 1.605 + <li>paged-x-controls, <a href="#paged-x-controls" 1.606 + title="section 2."><strong>2.</strong></a> 1.607 + 1.608 + <li>paged-y, <a href="#paged-y" title="section 2."><strong>2.</strong></a> 1.609 + 1.610 + <li>paged-y-controls, <a href="#paged-y-controls" 1.611 + title="section 2."><strong>2.</strong></a> 1.612 1.613 <li>renderer, <a href="#renderer" 1.614 - title="section 6.4."><strong>6.4.</strong></a> 1.615 + title="section 7.4."><strong>7.4.</strong></a> 1.616 + 1.617 + <li>scroll, <a href="#scroll" title="section 2."><strong>2.</strong></a> 1.618 + 1.619 + <li>scrolling values, <a href="#scrolling-values" 1.620 + title="section 2."><strong>2.</strong></a> 1.621 1.622 <li>style sheet 1.623 <ul> 1.624 <li>as conformance class, <a href="#style-sheet" 1.625 - title="section 6.4."><strong>6.4.</strong></a> 1.626 + title="section 7.4."><strong>7.4.</strong></a> 1.627 </ul> 1.628 + 1.629 + <li>visible, <a href="#visible" title="section 2."><strong>2.</strong></a> 1.630 </ul> 1.631 <!--end-index--> 1.632 1.633 @@ -1366,6 +1643,54 @@ 1.634 <td>N/A 1.635 1.636 <td>visual 1.637 + 1.638 + <tr> 1.639 + <th><a class=property href="#overflow">overflow</a> 1.640 + 1.641 + <td>visible | hidden | scroll | auto | paged-x | paged-y | 1.642 + paged-x-controls | paged-y-controls | fragments 1.643 + 1.644 + <td>see individual properties 1.645 + 1.646 + <td>block containers 1.647 + 1.648 + <td>no 1.649 + 1.650 + <td>N/A 1.651 + 1.652 + <td>visual 1.653 + 1.654 + <tr> 1.655 + <th><a class=property href="#overflow-x">overflow-x</a> 1.656 + 1.657 + <td>visible | hidden | scroll | auto | paged-x | paged-y | 1.658 + paged-x-controls | paged-y-controls | fragments 1.659 + 1.660 + <td>visible 1.661 + 1.662 + <td>block containers 1.663 + 1.664 + <td>no 1.665 + 1.666 + <td>N/A 1.667 + 1.668 + <td>visual 1.669 + 1.670 + <tr> 1.671 + <th><a class=property href="#overflow-y">overflow-y</a> 1.672 + 1.673 + <td>visible | hidden | scroll | auto | paged-x | paged-y | 1.674 + paged-x-controls | paged-y-controls | fragments 1.675 + 1.676 + <td>visible 1.677 + 1.678 + <td>block containers 1.679 + 1.680 + <td>no 1.681 + 1.682 + <td>N/A 1.683 + 1.684 + <td>visual 1.685 </table> 1.686 <!--end-properties--> 1.687 </html>
2.1 --- a/css3-overflow/Overview.src.html Mon Mar 25 15:14:55 2013 -0700 2.2 +++ b/css3-overflow/Overview.src.html Mon Mar 25 16:09:09 2013 -0700 2.3 @@ -237,6 +237,168 @@ 2.4 in the CSS Fragmentation Module [[!CSS3-BREAK]]. 2.5 </p> 2.6 2.7 +<h2 id="overflow-properties">Overflow properties</h2> 2.8 + 2.9 + <table class=propdef> 2.10 + <tr> 2.11 + <th>Name: 2.12 + <td><dfn>overflow-x</dfn>, <dfn>overflow-y</dfn> 2.13 + <tr> 2.14 + <th><a href="#values">Value</a>: 2.15 + <td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments 2.16 + <tr> 2.17 + <th>Initial: 2.18 + <td>visible 2.19 + <tr> 2.20 + <th>Applies to: 2.21 + <td>block containers 2.22 + <tr> 2.23 + <th>Inherited: 2.24 + <td>no 2.25 + <tr> 2.26 + <th>Percentages: 2.27 + <td>N/A 2.28 + <tr> 2.29 + <th>Media: 2.30 + <td>visual 2.31 + <tr> 2.32 + <th>Computed value: 2.33 + <td>see below 2.34 + <tr> 2.35 + <th>Animatable: 2.36 + <td>no 2.37 + <tr> 2.38 + <th>Canonical order: 2.39 + <td><abbr title="follows order of property value definition">per grammar</abbr> 2.40 + </table> 2.41 + 2.42 + <table class=propdef> 2.43 + <tr> 2.44 + <th>Name: 2.45 + <td><dfn>overflow</dfn> 2.46 + <tr> 2.47 + <th><a href="#values">Value</a>: 2.48 + <td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments 2.49 + <tr> 2.50 + <th>Initial: 2.51 + <td>see individual properties 2.52 + <tr> 2.53 + <th>Applies to: 2.54 + <td>block containers 2.55 + <tr> 2.56 + <th>Inherited: 2.57 + <td>no 2.58 + <tr> 2.59 + <th>Percentages: 2.60 + <td>N/A 2.61 + <tr> 2.62 + <th>Media: 2.63 + <td>visual 2.64 + <tr> 2.65 + <th>Computed value: 2.66 + <td>see individual properties 2.67 + <tr> 2.68 + <th>Animatable: 2.69 + <td>no 2.70 + <tr> 2.71 + <th>Canonical order: 2.72 + <td><abbr title="follows order of property value definition">per grammar</abbr> 2.73 + </table> 2.74 + 2.75 + <p>The values of these properties are:</p> 2.76 + 2.77 + <dl> 2.78 + <dt><dfn>visible</dfn> 2.79 + <dd> 2.80 + There is no special handling of overflow, that is, it 2.81 + may be rendered outside the block container. 2.82 + </dd> 2.83 + <dt><dfn>hidden</dfn> 2.84 + <dt><dfn>scroll</dfn> 2.85 + <dt><dfn>auto</dfn> 2.86 + <dd> 2.87 + These values are collectively the <dfn>scrolling values</dfn>; 2.88 + they are defined in the section on 2.89 + <a href="#scrolling-overflow">scrolling and hidden overflow</a>. 2.90 + </dd> 2.91 + <dt><dfn>paged-x</dfn> 2.92 + <dt><dfn>paged-y</dfn> 2.93 + <dt><dfn>paged-x-controls</dfn> 2.94 + <dt><dfn>paged-y-controls</dfn> 2.95 + <dt><dfn>fragments</dfn> 2.96 + <dd> 2.97 + These values are collectively the <dfn>fragmenting values</dfn>; 2.98 + they are defined in the sections on 2.99 + <a href="#paginated-overflow">paginated overflow</a> and 2.100 + <a href="#fragment-overflow">fragment overflow</a>. 2.101 + </dd> 2.102 + </dl> 2.103 + 2.104 + <p> 2.105 + The 'overflow' property is a shorthand property 2.106 + that sets the specified values of both 'overflow-x' and 'overflow-y' 2.107 + to the value specified for 'overflow'. 2.108 + </p> 2.109 + 2.110 + <div id="overflow-computed-values"> 2.111 + <p>The computed values of 'overflow-x' and 'overflow-y' 2.112 + are determined from the cascaded values [[!CSS3CASCADE]] 2.113 + based on the following rules:</p> 2.114 + 2.115 + <ol> 2.116 + <li> 2.117 + If one or both of the cascaded values are 2.118 + <i>fragmenting values</i>, then: 2.119 + <ol> 2.120 + <li> 2.121 + If one of the cascaded values is one of the 2.122 + <i>fragmenting values</i> 2.123 + and the other is not, 2.124 + then the computed values are 2.125 + the same as the cascaded values. 2.126 + </li> 2.127 + <li> 2.128 + If both of the cascaded values are <i>fragmenting values</i>, then: 2.129 + <ol> 2.130 + <li> 2.131 + for horizontal writing mode [[!CSS3-WRITING-MODES]], 2.132 + the computed value for ''overflow-y'' is the cascaded value 2.133 + and the computed value for ''overflow-x'' is ''hidden'', or 2.134 + </li> 2.135 + <li> 2.136 + for vertical writing mode [[!CSS3-WRITING-MODES]], 2.137 + the computed value for ''overflow-x'' is the cascaded value 2.138 + and the computed value for ''overflow-y'' is ''hidden''. 2.139 + </li> 2.140 + </ol> 2.141 + </li> 2.142 + </ol> 2.143 + </li> 2.144 + <li> 2.145 + Otherwise, if one cascaded values is 2.146 + one of the <i>scrolling values</i> 2.147 + and the other is ''visible'', 2.148 + then computed values are the cascaded values 2.149 + with ''visible'' changed to ''hidden''. 2.150 + </li> 2.151 + <li> 2.152 + Otherwise, the computed values are as specified. 2.153 + </li> 2.154 + </ol> 2.155 + </div> 2.156 + 2.157 + <p class="issue"> 2.158 + Are all 4 of the ''paged-*'' values really needed? 2.159 + </p> 2.160 + 2.161 + <p> 2.162 + When the <i>fragmenting values</i> are used, 2.163 + the overflow from the fragments themselves 2.164 + treats the fragmenting value as ''hidden''. 2.165 + <span class="issue">Is this the right behavior?</span> 2.166 + <span class="issue">Give example.</span> 2.167 + </p> 2.168 + 2.169 <h2 id="scrolling-overflow">Scrolling and hidden overflow</h2> 2.170 2.171 <p class="issue">
