css3-overflow/Overview.src.html

changeset 7811
85802187d27b
parent 7809
2a3ae65ab0c8
child 7812
d7ddd11519d1
     1.1 --- a/css3-overflow/Overview.src.html	Mon Mar 25 15:14:55 2013 -0700
     1.2 +++ b/css3-overflow/Overview.src.html	Mon Mar 25 16:09:09 2013 -0700
     1.3 @@ -237,6 +237,168 @@
     1.4  		in the CSS Fragmentation Module [[!CSS3-BREAK]].
     1.5  	</p>
     1.6  
     1.7 +<h2 id="overflow-properties">Overflow properties</h2>
     1.8 +
     1.9 +	<table class=propdef>
    1.10 +		<tr>
    1.11 +			<th>Name:
    1.12 +			<td><dfn>overflow-x</dfn>, <dfn>overflow-y</dfn>
    1.13 +		<tr>
    1.14 +			<th><a href="#values">Value</a>:
    1.15 +			<td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
    1.16 +		<tr>
    1.17 +			<th>Initial:
    1.18 +			<td>visible
    1.19 +		<tr>
    1.20 +			<th>Applies to:
    1.21 +			<td>block containers
    1.22 +		<tr>
    1.23 +			<th>Inherited:
    1.24 +			<td>no
    1.25 +		<tr>
    1.26 +			<th>Percentages:
    1.27 +			<td>N/A
    1.28 +		<tr>
    1.29 +			<th>Media:
    1.30 +			<td>visual
    1.31 +		<tr>
    1.32 +			<th>Computed&nbsp;value:
    1.33 +			<td>see below
    1.34 +		<tr>
    1.35 +			<th>Animatable:
    1.36 +			<td>no
    1.37 +		<tr>
    1.38 +			<th>Canonical order:
    1.39 +			<td><abbr title="follows order of property value definition">per grammar</abbr>
    1.40 +	</table>
    1.41 +
    1.42 +	<table class=propdef>
    1.43 +		<tr>
    1.44 +			<th>Name:
    1.45 +			<td><dfn>overflow</dfn>
    1.46 +		<tr>
    1.47 +			<th><a href="#values">Value</a>:
    1.48 +			<td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
    1.49 +		<tr>
    1.50 +			<th>Initial:
    1.51 +			<td>see individual properties
    1.52 +		<tr>
    1.53 +			<th>Applies to:
    1.54 +			<td>block containers
    1.55 +		<tr>
    1.56 +			<th>Inherited:
    1.57 +			<td>no
    1.58 +		<tr>
    1.59 +			<th>Percentages:
    1.60 +			<td>N/A
    1.61 +		<tr>
    1.62 +			<th>Media:
    1.63 +			<td>visual
    1.64 +		<tr>
    1.65 +			<th>Computed&nbsp;value:
    1.66 +			<td>see individual properties
    1.67 +		<tr>
    1.68 +			<th>Animatable:
    1.69 +			<td>no
    1.70 +		<tr>
    1.71 +			<th>Canonical order:
    1.72 +			<td><abbr title="follows order of property value definition">per grammar</abbr>
    1.73 +	</table>
    1.74 +
    1.75 +	<p>The values of these properties are:</p>
    1.76 +
    1.77 +	<dl>
    1.78 +		<dt><dfn>visible</dfn>
    1.79 +		<dd>
    1.80 +			There is no special handling of overflow, that is, it
    1.81 +			may be rendered outside the block container.
    1.82 +		</dd>
    1.83 +		<dt><dfn>hidden</dfn>
    1.84 +		<dt><dfn>scroll</dfn>
    1.85 +		<dt><dfn>auto</dfn>
    1.86 +		<dd>
    1.87 +			These values are collectively the <dfn>scrolling values</dfn>;
    1.88 +			they are defined in the section on
    1.89 +			<a href="#scrolling-overflow">scrolling and hidden overflow</a>.
    1.90 +		</dd>
    1.91 +		<dt><dfn>paged-x</dfn>
    1.92 +		<dt><dfn>paged-y</dfn>
    1.93 +		<dt><dfn>paged-x-controls</dfn>
    1.94 +		<dt><dfn>paged-y-controls</dfn>
    1.95 +		<dt><dfn>fragments</dfn>
    1.96 +		<dd>
    1.97 +			These values are collectively the <dfn>fragmenting values</dfn>;
    1.98 +			they are defined in the sections on
    1.99 +			<a href="#paginated-overflow">paginated overflow</a> and
   1.100 +			<a href="#fragment-overflow">fragment overflow</a>.
   1.101 +		</dd>
   1.102 +	</dl>
   1.103 +
   1.104 +	<p>
   1.105 +		The 'overflow' property is a shorthand property
   1.106 +		that sets the specified values of both 'overflow-x' and 'overflow-y'
   1.107 +		to the value specified for 'overflow'.
   1.108 +	</p>
   1.109 +
   1.110 +	<div id="overflow-computed-values">
   1.111 +		<p>The computed values of 'overflow-x' and 'overflow-y'
   1.112 +		are determined from the cascaded values [[!CSS3CASCADE]]
   1.113 +		based on the following rules:</p>
   1.114 +
   1.115 +		<ol>
   1.116 +			<li>
   1.117 +				If one or both of the cascaded values are
   1.118 +				<i>fragmenting values</i>, then:
   1.119 +				<ol>
   1.120 +					<li>
   1.121 +						If one of the cascaded values is one of the
   1.122 +						<i>fragmenting values</i>
   1.123 +						and the other is not,
   1.124 +						then the computed values are
   1.125 +						the same as the cascaded values.
   1.126 +					</li>
   1.127 +					<li>
   1.128 +						If both of the cascaded values are <i>fragmenting values</i>, then:
   1.129 +						<ol>
   1.130 +							<li>
   1.131 +								for horizontal writing mode [[!CSS3-WRITING-MODES]],
   1.132 +								the computed value for ''overflow-y'' is the cascaded value
   1.133 +								and the computed value for ''overflow-x'' is ''hidden'', or
   1.134 +							</li>
   1.135 +							<li>
   1.136 +								for vertical writing mode [[!CSS3-WRITING-MODES]],
   1.137 +								the computed value for ''overflow-x'' is the cascaded value
   1.138 +								and the computed value for ''overflow-y'' is ''hidden''.
   1.139 +							</li>
   1.140 +						</ol>
   1.141 +					</li>
   1.142 +				</ol>
   1.143 +			</li>
   1.144 +			<li>
   1.145 +				Otherwise, if one cascaded values is
   1.146 +				one of the <i>scrolling values</i>
   1.147 +				and the other is ''visible'',
   1.148 +				then computed values are the cascaded values
   1.149 +				with ''visible'' changed to ''hidden''.
   1.150 +			</li>
   1.151 +			<li>
   1.152 +				Otherwise, the computed values are as specified.
   1.153 +			</li>
   1.154 +		</ol>
   1.155 +	</div>
   1.156 +
   1.157 +	<p class="issue">
   1.158 +		Are all 4 of the ''paged-*'' values really needed?
   1.159 +	</p>
   1.160 +
   1.161 +	<p>
   1.162 +		When the <i>fragmenting values</i> are used,
   1.163 +		the overflow from the fragments themselves
   1.164 +		treats the fragmenting value as ''hidden''.
   1.165 +		<span class="issue">Is this the right behavior?</span>
   1.166 +		<span class="issue">Give example.</span>
   1.167 +	</p>
   1.168 +
   1.169  <h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
   1.170  
   1.171  	<p class="issue">

mercurial