css-overflow/Overview.src.html

changeset 7847
f7490857b4eb
parent 7820
dd69498547be
child 7856
589545d6b465
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/css-overflow/Overview.src.html	Thu Mar 28 16:57:56 2013 -0700
     1.3 @@ -0,0 +1,1240 @@
     1.4 +<!DOCTYPE html>
     1.5 +<html lang="en">
     1.6 +<head>
     1.7 +  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     1.8 +  <title>CSS Overflow Module Level 3</title>
     1.9 +  <link rel=contents href="#contents">
    1.10 +  <link rel=index href="#index">
    1.11 +  <link rel="stylesheet" type="text/css" href="../default.css">
    1.12 +  <link rel="stylesheet" type="text/css"
    1.13 +        href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
    1.14 +	<style>
    1.15 +		table.source-demo-pair {
    1.16 +			width: 100%;
    1.17 +		}
    1.18 +
    1.19 +		.in-cards-demo {
    1.20 +			width: 13em;
    1.21 +			height: 8em;
    1.22 +
    1.23 +			padding: 4px;
    1.24 +			border: medium solid blue;
    1.25 +			margin: 6px;
    1.26 +
    1.27 +			font: medium/1.3 Times New Roman, Times, serif;
    1.28 +			white-space: nowrap;
    1.29 +		}
    1.30 +
    1.31 +		.bouncy-columns-demo {
    1.32 +			width: 6em;
    1.33 +			height: 10em;
    1.34 +			float: left;
    1.35 +			margin: 1em;
    1.36 +			font: medium/1.25 Times New Roman, Times, serif;
    1.37 +			white-space: nowrap;
    1.38 +		}
    1.39 +		.bouncy-columns-demo.one {
    1.40 +			background: aqua; color: black;
    1.41 +			transform: rotate(-3deg);
    1.42 +		}
    1.43 +		.bouncy-columns-demo.two {
    1.44 +			background: yellow; color: black;
    1.45 +			transform: rotate(3deg);
    1.46 +		}
    1.47 +
    1.48 +		.article-font-inherit-demo {
    1.49 +			font: 1em/1.25 Times New Roman, Times, serif;
    1.50 +			white-space: nowrap;
    1.51 +		}
    1.52 +		.article-font-inherit-demo.one {
    1.53 +			width: 12em;
    1.54 +			font-size: 1.5em;
    1.55 +			margin-bottom: 1em;
    1.56 +			height: 4em;
    1.57 +		}
    1.58 +		.article-font-inherit-demo.two {
    1.59 +			width: 11em;
    1.60 +			margin-left: 5em;
    1.61 +			margin-right: 2em;
    1.62 +		}
    1.63 +
    1.64 +		.dark-columns-demo {
    1.65 +			width: 6em;
    1.66 +			height: 10em;
    1.67 +			float: left;
    1.68 +			margin-right: 1em;
    1.69 +			font: medium/1.25 Times New Roman, Times, serif;
    1.70 +			white-space: nowrap;
    1.71 +		}
    1.72 +		.dark-columns-demo.one {
    1.73 +			background: aqua; color: black;
    1.74 +		}
    1.75 +		.dark-columns-demo.one :link {
    1.76 +			color: blue;
    1.77 +		}
    1.78 +		.dark-columns-demo.one :visited {
    1.79 +			color: purple;
    1.80 +		}
    1.81 +		.dark-columns-demo.two {
    1.82 +			background: navy; color: white;
    1.83 +		}
    1.84 +		.dark-columns-demo.two :link {
    1.85 +			color: aqua;
    1.86 +		}
    1.87 +		.dark-columns-demo.two :visited {
    1.88 +			color: fuchsia;
    1.89 +		}
    1.90 +
    1.91 +		.article-max-lines-demo {
    1.92 +			font: 1em/1.25 Times New Roman, Times, serif;
    1.93 +			white-space: nowrap;
    1.94 +		}
    1.95 +		.article-max-lines-demo.one::first-letter {
    1.96 +			font-size: 2em;
    1.97 +			line-height: 0.9;
    1.98 +		}
    1.99 +		.article-max-lines-demo.one {
   1.100 +			font-size: 1.5em;
   1.101 +			width: 16em;
   1.102 +		}
   1.103 +		.article-max-lines-demo.two {
   1.104 +			width: 11.5em;
   1.105 +			float: left; margin-right: 1em;
   1.106 +		}
   1.107 +		.article-max-lines-demo.three {
   1.108 +			width: 11.5em;
   1.109 +			float: left;
   1.110 +		}
   1.111 +	</style>
   1.112 +</head>
   1.113 +
   1.114 +<div class="head">
   1.115 +<!--logo-->
   1.116 +
   1.117 +<h1>CSS Overflow Module Level 3</h1>
   1.118 +
   1.119 +<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
   1.120 +<dl>
   1.121 +  <dt>This version:
   1.122 +    <dd><a href="[VERSION]">[VERSION]</a>
   1.123 +
   1.124 +  <dt>Latest version:
   1.125 +    <dd><a href="http://www.w3.org/TR/css3-overflow/">http://www.w3.org/TR/css3-overflow/</a>
   1.126 +
   1.127 +  <dt>Editor's draft:
   1.128 +    <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
   1.129 +    (<a href="https://dvcs.w3.org/hg/csswg/log/tip/[SHORTNAME]/Overview.src.html">change log</a>)
   1.130 +
   1.131 +  <dt>Previous version:
   1.132 +    <dd>none
   1.133 +
   1.134 +  <dt>Editors:
   1.135 +    <dd class="h-card vcard">
   1.136 +      <a class="p-name fn u-url url" rel="author"
   1.137 +         href="http://dbaron.org/">L. David Baron</a>,
   1.138 +      <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
   1.139 +
   1.140 +  <dt>Issue Tracking:</dt>
   1.141 +    <dd>Maintained in document (only editor's draft is current)
   1.142 +
   1.143 +  <dt>Feedback:</dt>
   1.144 +    <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line &ldquo;<kbd>[[SHORTNAME]] <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
   1.145 +
   1.146 +  <dt>Test suite:
   1.147 +    <dd>none yet
   1.148 +</dl>
   1.149 +
   1.150 +<!--copyright-->
   1.151 +
   1.152 +<hr title="Separator for header">
   1.153 +</div>
   1.154 +
   1.155 +<h2 class="no-num no-toc" id="abstract">Abstract</h2>
   1.156 +
   1.157 +	<p>
   1.158 +		<a href="http://www.w3.org/TR/CSS/">CSS</a> is
   1.159 +		a language for describing
   1.160 +		the rendering of structured documents (such as HTML and XML)
   1.161 +		on screen, on paper, in speech, etc.
   1.162 +		This module contains the features of CSS
   1.163 +		relating to new mechanisms of overflow handling in visual media (e.g., screen or paper).
   1.164 +		In interactive media,
   1.165 +		it describes features that allow the overflow
   1.166 +		from a fixed size container
   1.167 +		to be handled by pagination (displaying one page at a time).
   1.168 +		It also describes features, applying to all visual media,
   1.169 +		that allow the contents of an element
   1.170 +		to be spread across multiple fragments,
   1.171 +		allowing the contents to flow across multiple regions
   1.172 +		or to have different styles for different fragments.
   1.173 +	</p>
   1.174 +
   1.175 +<h2 class="no-num no-toc" id="status">Status of this document</h2>
   1.176 +
   1.177 +<!--status-->
   1.178 +
   1.179 +<p>The following features are at risk: &hellip;
   1.180 +
   1.181 +<h2 class="no-num no-toc" id="contents">
   1.182 +Table of contents</h2>
   1.183 +
   1.184 +<!--toc-->
   1.185 +
   1.186 +<h2 id="intro">
   1.187 +Introduction</h2>
   1.188 +
   1.189 +	<p>
   1.190 +		In CSS Level 1 [[CSS1]], placing more content than would fit
   1.191 +		inside an element with a specified size
   1.192 +		was generally an authoring error.
   1.193 +		Doing so caused the content to extend
   1.194 +		outside the bounds of the element,
   1.195 +		which would likely cause
   1.196 +		that content to overlap with other elements.
   1.197 +	</p>
   1.198 +
   1.199 +	<p>
   1.200 +		CSS Level 2 [[CSS21]] introduced the 'overflow' property,
   1.201 +		which allows authors to have overflow be handled by scrolling,
   1.202 +		which means it is no longer an authoring error.
   1.203 +		It also allows authors to specify
   1.204 +		that overflow is handled by clipping,
   1.205 +		which makes sense when the author's intent
   1.206 +		is that the content not be shown.
   1.207 +	</p>
   1.208 +
   1.209 +	<p>
   1.210 +		However, scrolling is not the only way
   1.211 +		to present large amounts of content,
   1.212 +		and may even not be the optimal way.
   1.213 +		After all, the codex replaced the scroll
   1.214 +		as the common format for large written works
   1.215 +		because of its advantages.
   1.216 +	</p>
   1.217 +
   1.218 +	<p>
   1.219 +		This specification introduces
   1.220 +		a mechanism for Web pages to specify
   1.221 +		that an element of a page should handle overflow
   1.222 +		through pagination rather than through scrolling.
   1.223 +	</p>
   1.224 +
   1.225 +	<p>
   1.226 +		This specification also extends the concept of overflow
   1.227 +		in another direction.
   1.228 +		Instead of requiring that authors specify a single area
   1.229 +		into which the content of an element must flow,
   1.230 +		this specification allows authors to specify multiple fragments,
   1.231 +		each with their own dimensions and styles,
   1.232 +		so that the content of the element can flow from one to the next,
   1.233 +		using as many as needed to place the content without overflowing.
   1.234 +	</p>
   1.235 +
   1.236 +	<p>
   1.237 +		In both of these cases, implementations must
   1.238 +		break the content in the block-progression dimension.
   1.239 +		Implementations must do this is described
   1.240 +		in the CSS Fragmentation Module [[!CSS3-BREAK]].
   1.241 +	</p>
   1.242 +
   1.243 +<h2 id="overflow-properties">Overflow properties</h2>
   1.244 +
   1.245 +	<p>
   1.246 +		The ''overflow-x'' property specifies
   1.247 +		the handling of overflow in the horizontal direction
   1.248 +		(i.e., overflow from the left and right sides of the box),
   1.249 +		and the ''overflow-y'' property specifies the handling
   1.250 +		of overflow in the vertical direction
   1.251 +		(i.e., overflow from the top and bottom sides of the box) 
   1.252 +	</p>
   1.253 +
   1.254 +	<table class=propdef>
   1.255 +		<tr>
   1.256 +			<th>Name:
   1.257 +			<td><dfn>overflow-x</dfn>, <dfn>overflow-y</dfn>
   1.258 +		<tr>
   1.259 +			<th><a href="#values">Value</a>:
   1.260 +			<td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
   1.261 +		<tr>
   1.262 +			<th>Initial:
   1.263 +			<td>visible
   1.264 +		<tr>
   1.265 +			<th>Applies to:
   1.266 +			<td>block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
   1.267 +		<tr>
   1.268 +			<th>Inherited:
   1.269 +			<td>no
   1.270 +		<tr>
   1.271 +			<th>Percentages:
   1.272 +			<td>N/A
   1.273 +		<tr>
   1.274 +			<th>Media:
   1.275 +			<td>visual
   1.276 +		<tr>
   1.277 +			<th>Computed&nbsp;value:
   1.278 +			<td>see below
   1.279 +		<tr>
   1.280 +			<th>Animatable:
   1.281 +			<td>no
   1.282 +		<tr>
   1.283 +			<th>Canonical order:
   1.284 +			<td><abbr title="follows order of property value definition">per grammar</abbr>
   1.285 +	</table>
   1.286 +
   1.287 +	<p>
   1.288 +		The 'overflow' property is a shorthand property
   1.289 +		that sets the specified values of both 'overflow-x' and 'overflow-y'
   1.290 +		to the value specified for 'overflow'.
   1.291 +	</p>
   1.292 +
   1.293 +	<table class=propdef>
   1.294 +		<tr>
   1.295 +			<th>Name:
   1.296 +			<td><dfn>overflow</dfn>
   1.297 +		<tr>
   1.298 +			<th><a href="#values">Value</a>:
   1.299 +			<td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
   1.300 +		<tr>
   1.301 +			<th>Initial:
   1.302 +			<td>see individual properties
   1.303 +		<tr>
   1.304 +			<th>Applies to:
   1.305 +			<td>block containers
   1.306 +		<tr>
   1.307 +			<th>Inherited:
   1.308 +			<td>no
   1.309 +		<tr>
   1.310 +			<th>Percentages:
   1.311 +			<td>N/A
   1.312 +		<tr>
   1.313 +			<th>Media:
   1.314 +			<td>visual
   1.315 +		<tr>
   1.316 +			<th>Computed&nbsp;value:
   1.317 +			<td>see individual properties
   1.318 +		<tr>
   1.319 +			<th>Animatable:
   1.320 +			<td>no
   1.321 +		<tr>
   1.322 +			<th>Canonical order:
   1.323 +			<td><abbr title="follows order of property value definition">per grammar</abbr>
   1.324 +	</table>
   1.325 +
   1.326 +	<p>The values of these properties are:</p>
   1.327 +
   1.328 +	<dl>
   1.329 +		<dt><dfn>visible</dfn>
   1.330 +		<dd>
   1.331 +			There is no special handling of overflow, that is, it
   1.332 +			may be rendered outside the block container.
   1.333 +		</dd>
   1.334 +		<dt><dfn>hidden</dfn>
   1.335 +		<dt><dfn>scroll</dfn>
   1.336 +		<dt><dfn>auto</dfn>
   1.337 +		<dd>
   1.338 +			These values are collectively the <dfn>scrolling values</dfn>;
   1.339 +			they are defined in the section on
   1.340 +			<a href="#scrolling-overflow">scrolling and hidden overflow</a>.
   1.341 +		</dd>
   1.342 +		<dt><dfn>paged-x</dfn>
   1.343 +		<dt><dfn>paged-y</dfn>
   1.344 +		<dt><dfn>paged-x-controls</dfn>
   1.345 +		<dt><dfn>paged-y-controls</dfn>
   1.346 +		<dt><dfn>fragments</dfn>
   1.347 +		<dd>
   1.348 +			These values are collectively the <dfn>fragmenting values</dfn>;
   1.349 +			they are defined in the sections on
   1.350 +			<a href="#paginated-overflow">paginated overflow</a> and
   1.351 +			<a href="#fragment-overflow">fragment overflow</a>.
   1.352 +		</dd>
   1.353 +	</dl>
   1.354 +
   1.355 +	<div id="overflow-computed-values">
   1.356 +		<p>The computed values of 'overflow-x' and 'overflow-y'
   1.357 +		are determined from the cascaded values [[!CSS3CASCADE]]
   1.358 +		based on the following rules:</p>
   1.359 +
   1.360 +		<ol>
   1.361 +			<li>
   1.362 +				If one or both of the cascaded values are
   1.363 +				<i>fragmenting values</i>, then:
   1.364 +				<ol>
   1.365 +					<li>
   1.366 +						If one of the cascaded values is one of the
   1.367 +						<i>fragmenting values</i>
   1.368 +						and the other is not,
   1.369 +						then the computed values are
   1.370 +						the same as the cascaded values.
   1.371 +					</li>
   1.372 +					<li>
   1.373 +						If both of the cascaded values are <i>fragmenting values</i>, then:
   1.374 +						<ol>
   1.375 +							<li>
   1.376 +								for horizontal writing mode [[!CSS3-WRITING-MODES]],
   1.377 +								the computed value for ''overflow-y'' is the cascaded value
   1.378 +								and the computed value for ''overflow-x'' is ''hidden'', or
   1.379 +							</li>
   1.380 +							<li>
   1.381 +								for vertical writing mode [[!CSS3-WRITING-MODES]],
   1.382 +								the computed value for ''overflow-x'' is the cascaded value
   1.383 +								and the computed value for ''overflow-y'' is ''hidden''.
   1.384 +							</li>
   1.385 +						</ol>
   1.386 +					</li>
   1.387 +				</ol>
   1.388 +			</li>
   1.389 +			<li>
   1.390 +				Otherwise, if one cascaded values is
   1.391 +				one of the <i>scrolling values</i>
   1.392 +				and the other is ''visible'',
   1.393 +				then computed values are the cascaded values
   1.394 +				with ''visible'' changed to ''hidden''.
   1.395 +			</li>
   1.396 +			<li>
   1.397 +				Otherwise, the computed values are as specified.
   1.398 +			</li>
   1.399 +		</ol>
   1.400 +	</div>
   1.401 +
   1.402 +	<p class="issue">
   1.403 +		Are all 4 of the ''paged-*'' values really needed?
   1.404 +	</p>
   1.405 +
   1.406 +	<p>
   1.407 +		When the <i>fragmenting values</i> are used,
   1.408 +		the overflow from the fragments themselves
   1.409 +		treats the fragmenting value as ''hidden''.
   1.410 +		<span class="issue">Is this the right behavior?</span>
   1.411 +		<span class="issue">Give example.</span>
   1.412 +	</p>
   1.413 +
   1.414 +	<p class="issue">
   1.415 +		[[CSS3-MARQUEE]] describes an 'overflow-style' property,
   1.416 +		but it has not picked up implementation experience
   1.417 +		that the working group is aware of.
   1.418 +		Should this document treat 'overflow-style' as a defunct proposal,
   1.419 +		or should this document describe the 'overflow-style' property
   1.420 +		and attempt to revive it,
   1.421 +		despite that implementations have implemented
   1.422 +		'overflow-x' and 'overflow-y' instead?
   1.423 +	</p>
   1.424 +
   1.425 +<h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
   1.426 +
   1.427 +	<p class="issue">
   1.428 +		Move material from [[CSS21]] and [[CSS3BOX]] here.
   1.429 +	</p>
   1.430 +
   1.431 +<h2 id="paginated-overflow">Paginated overflow</h2>
   1.432 +
   1.433 +<p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as [[CSS3GCPM]] has?)</p>
   1.434 +
   1.435 +<p class="issue">Ability to display N pages at once
   1.436 +rather than just one page at once?</p>
   1.437 +
   1.438 +	<p class="issue">
   1.439 +		The current implementation of paginated overflow uses
   1.440 +		the 'overflow'/'overflow-x'/'overflow-y' properties
   1.441 +		rather than the 'overflow-style' property as proposed
   1.442 +		in the [[CSS3GCPM]] draft
   1.443 +		(which also matches the [[CSS3-MARQUEE]] proposal).
   1.444 +		We should probably switch away from 'overflow-style',
   1.445 +		but that's not 100% clear.
   1.446 +	</p>
   1.447 +
   1.448 +<h2 id="fragment-overflow">Fragment overflow</h2>
   1.449 +
   1.450 +	<p>
   1.451 +		This section introduces and defines the meaning of
   1.452 +		the new ''fragments'' value of the 'overflow' property.
   1.453 +	</p>
   1.454 +
   1.455 +	<p>
   1.456 +		When the computed value of 'overflow' for an element is ''fragments'',
   1.457 +		and implementations would otherwise have created a box for the element,
   1.458 +		then implementations must create a sequence of <dfn>fragment box</dfn>es
   1.459 +		for that element.
   1.460 +		(It is possible for an element with ''overflow: fragments''
   1.461 +		to generate only one <i>fragment box</i>.
   1.462 +		However, if an element's computed 'overflow' is not ''fragments'',
   1.463 +		then its box is not a <i>fragment box</i>.)
   1.464 +		Every <i>fragment box</i> is a fragmentation container,
   1.465 +		and any overflow
   1.466 +		that would cause that fragmentation container to fragment
   1.467 +		causes another <i>fragment box</i> created as a next sibling
   1.468 +		of the previous one.
   1.469 +		<span class="issue">Or is it as though it's a next sibling of
   1.470 +		the element?  Need to figure out exactly how this interacts with
   1.471 +		other box-level fixup.</span>
   1.472 +		Additionally, if the <i>fragment box</i> is also
   1.473 +		a multi-column box (as defined in [[!CSS3COL]]
   1.474 +		<span class="issue">though it defines <i>multi-column element</i></span>)
   1.475 +		any content that would lead to the creation of <i>overflow columns</i> [[!CSS3COL]]
   1.476 +		instead is flown into an additional fragment box.
   1.477 +		However, fragment boxes may themselves be broken
   1.478 +		(due to fragmentation in a fragmentation context outside of them,
   1.479 +		such as pages, columns, or other fragment boxes);
   1.480 +		such breaking leads to fragments of the same fragment box
   1.481 +		rather than multiple fragment boxes.
   1.482 +		(This matters because fragment boxes may be styled by their index;
   1.483 +		such breaking leads to multiple fragments of a fragment box
   1.484 +		with a single index.
   1.485 +		This design choice is so that
   1.486 +		breaking a fragment box across pages does not break
   1.487 +		the association of indices to particular pieces of content.)
   1.488 +		<span class="issue">Should a forced break that breaks to
   1.489 +		an outer fragmentation context cause a new fragment of a single
   1.490 +		fragment box or a new fragment box?</span>
   1.491 +		<span class="issue">Should we find a term other than
   1.492 +		<i>fragment box</i> here to make this a little less confusing?</span>
   1.493 +	</p>
   1.494 +
   1.495 +	<p class="issue">
   1.496 +		What if we want to be able to style the pieces of an element
   1.497 +		split within another type of fragmentation context?
   1.498 +		These rules prevent ever using ''::nth-fragment()'' for that,
   1.499 +		despite that the name seems the most logical name for such a feature.
   1.500 +	</p>
   1.501 +
   1.502 +	<div class="example">
   1.503 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   1.504 +&lt;title&gt;Breaking content into
   1.505 +  equal-sized cards&lt;/title&gt;
   1.506 +&lt;style&gt;
   1.507 +  .in-cards {
   1.508 +    overflow: fragments;
   1.509 +
   1.510 +    width: 13em;
   1.511 +    height: 8em;
   1.512 +
   1.513 +    padding: 4px;
   1.514 +    border: medium solid blue;
   1.515 +    margin: 6px;
   1.516 +
   1.517 +    font: medium/1.3 Times New
   1.518 +      Roman, Times, serif;
   1.519 +  }
   1.520 +&lt;/style&gt;
   1.521 +&lt;div class="in-cards"&gt;
   1.522 +  In this example, the text in the div
   1.523 +  is broken into a series of cards.
   1.524 +  These cards all have the same style.
   1.525 +  The presence of enough content to
   1.526 +  overflow one of the cards causes
   1.527 +  another one to be created.  The second
   1.528 +  card is created just like it's the
   1.529 +  next sibling of the first.
   1.530 +&lt;/div&gt;</pre></td><td>
   1.531 +			<div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards.  These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
   1.532 +			<div class="in-cards-demo">one to be created.  The second<br>card is created just like it's the<br>next sibling of the first.</div>
   1.533 +		</td></tr></table>
   1.534 +	</div>
   1.535 +
   1.536 +	<p class="issue">
   1.537 +		We should specify that ''overflow: fragments'' does not apply
   1.538 +		to at least some table parts,
   1.539 +		and perhaps other elements as well.
   1.540 +		We need to determine exactly which ones.
   1.541 +	</p>
   1.542 +
   1.543 +	<p class="issue">
   1.544 +		This specification needs to say which type of
   1.545 +		fragmentation context is created
   1.546 +		so that it's clear which values of the 'break' property
   1.547 +		cause breaks within this context.
   1.548 +		We probably want ''break: regions'' to apply.
   1.549 +	</p>
   1.550 +
   1.551 +	<p class="issue">
   1.552 +		This specification needs a processing model
   1.553 +		that will apply in cases where the layout containing the
   1.554 +		fragments has characteristics that use the intrinsic size of the fragments
   1.555 +		to change the amount of space available for them,
   1.556 +		such as [[CSS3-GRID-LAYOUT]].
   1.557 +		There has already been some work on such a processing model
   1.558 +		in [[CSS3-REGIONS]],
   1.559 +		and the work done on a model there,
   1.560 +		and the editors of that specification,
   1.561 +		should inform what happens in this specification.
   1.562 +	</p>
   1.563 +
   1.564 +<h3 id="fragment-styling">Fragment styling</h3>
   1.565 +
   1.566 +<h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4>
   1.567 +
   1.568 +	<p>
   1.569 +		The ::nth-fragment() pseudo-element is a pseudo-element
   1.570 +		that describes some of the <i>fragment box</i>es generated by an element.
   1.571 +		The argument to the pseudo-element takes the same syntax
   1.572 +		as the argument to the :nth-child() pseudo-class
   1.573 +		defined in [[!SELECT]], and has the same meaning
   1.574 +		except that the number is relative to
   1.575 +		<i>fragment box</i>es generated by the element
   1.576 +		instead of siblings of the element.
   1.577 +	</p>
   1.578 +
   1.579 +	<p class="note">
   1.580 +		Selectors that allow addressing fragments
   1.581 +		by counting from the end rather than the start
   1.582 +		are intentionally not provided.
   1.583 +		Such selectors would interfere with determining
   1.584 +		the number of fragments.
   1.585 +	</p>
   1.586 +
   1.587 +	<p class="issue">
   1.588 +		Depending on future discussions,
   1.589 +		this ''::nth-fragment(<var>an+b</var>)'' syntax
   1.590 +		may be replaced with
   1.591 +		the new ''::fragment:nth(<var>an+b</var>)'' syntax.
   1.592 +	</p>
   1.593 +
   1.594 +<h4 id="style-of-fragments">Styling of fragments</h4>
   1.595 +
   1.596 +	<p class="issue">
   1.597 +		Should this apply to fragment overflow only,
   1.598 +		or also to paginated overflow?
   1.599 +		(If it applies,
   1.600 +		then stricter property restrictions would be needed
   1.601 +		for paginated overflow.)
   1.602 +	</p>
   1.603 +
   1.604 +	<p>
   1.605 +		In the absence of rules with ''::nth-fragment()'' pseudo-elements,
   1.606 +		the computed style for each <i>fragment box</i>
   1.607 +		is the computed style for the element
   1.608 +		for which the <i>fragment box</i> was created.
   1.609 +		However, the style for a <i>fragment box</i> is also influenced
   1.610 +		by rules whose selector's <i>subject</i> [[!SELECT]]
   1.611 +		has an ''::nth-fragment()'' pseudo-element,
   1.612 +		if the 1-based number of the <i>fragment box</i> matches
   1.613 +		that ''::nth-fragment()'' pseudo-element
   1.614 +		and the selector (excluding the ''::nth-fragment()'' pseudo-element)
   1.615 +		matches the element generating the fragments.
   1.616 +	</p>
   1.617 +
   1.618 +	<p>
   1.619 +		When determining the style of the <i>fragment box</i>,
   1.620 +		these rules that match the fragment pseudo-element
   1.621 +		cascade together with the rules that match the element,
   1.622 +		with the fragment pseudo-element adding the specificity
   1.623 +		of a pseudo-class to the specificity calculation.
   1.624 +		<span class="issue">Does this need to be specified in
   1.625 +		the cascading module as well?</span>
   1.626 +	</p>
   1.627 +
   1.628 +	<div class="example">
   1.629 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   1.630 +&lt;style&gt;
   1.631 +  .bouncy-columns {
   1.632 +    overflow: fragments;
   1.633 +    width: 6em;
   1.634 +    height: 10em;
   1.635 +    float: left;
   1.636 +    margin: 1em;
   1.637 +    font: medium/1.25 Times New
   1.638 +      Roman, Times, serif;
   1.639 +  }
   1.640 +  .bouncy-columns::nth-fragment(1) {
   1.641 +    background: aqua; color: black;
   1.642 +    transform: rotate(-3deg);
   1.643 +  }
   1.644 +  .bouncy-columns::nth-fragment(2) {
   1.645 +    background: yellow; color: black;
   1.646 +    transform: rotate(3deg);
   1.647 +  }
   1.648 +&lt;/style&gt;
   1.649 +&lt;div class="bouncy-columns"&gt;
   1.650 +  <i>...</i>
   1.651 +&lt;/div&gt;</pre></td><td>
   1.652 +			<div class="bouncy-columns-demo one">In this<br>example, the<br>text in the div<br>is broken into<br>a series of<br>columns.  The<br>author<br>probably</div>
   1.653 +			<div class="bouncy-columns-demo two">intended the<br>text to fill two<br>columns.  But<br>if it happens to<br>fill three<br>columns, the<br>third column is<br>still created.  It</div>
   1.654 +			<div class="bouncy-columns-demo">just doesn't<br>have any<br>fragment-specific<br>styling because<br>the author<br>didn't give it<br>any.</div>
   1.655 +		</td></tr></table>
   1.656 +	</div>
   1.657 +
   1.658 +	<p>
   1.659 +		Styling an ''::nth-fragment()'' pseudo-element with the 'overflow'
   1.660 +		property does take effect;
   1.661 +		if a <i>fragment box</i> has a
   1.662 +		computed value of 'overflow' other than ''fragments''
   1.663 +		then that fragment box is the last fragment.
   1.664 +		However, overriding ''overflow'' on the first fragment
   1.665 +		does not cause the <i>fragment box</i> not to exist;
   1.666 +		whether there are fragment boxes at all is determined by
   1.667 +		the computed value of overflow for the element.
   1.668 +		<span class="issue">Need to reword this to refer to the
   1.669 +		appropriate choice of ''overflow-x'' or ''overflow-y'',
   1.670 +		and then point to rule about the handling of the other one
   1.671 +		of ''overflow-x'' or ''overflow-y''.</span>
   1.672 +	</p>
   1.673 +
   1.674 +	<p>
   1.675 +		Styling an ''::nth-fragment()'' pseudo-element with the 'content'
   1.676 +		property has no effect;
   1.677 +		the computed value of 'content' for the fragment box
   1.678 +		remains the same as the computed value of content for the element.
   1.679 +	</p>
   1.680 +
   1.681 +	<p>
   1.682 +		Specifying ''display: none'' for a <i>fragment box</i> causes
   1.683 +		the fragment box with that index not to be generated.
   1.684 +		However, in terms of the indices
   1.685 +		used for matching ''::nth-fragment()'' pseudo-elements
   1.686 +		of later fragment boxes,
   1.687 +		it still counts as though it was generated.
   1.688 +		However, since it is not generated, it does not contain any content.
   1.689 +	</p>
   1.690 +
   1.691 +	<p>
   1.692 +		Specifying other values of 'display', 'position',
   1.693 +		or 'float' is permitted, but is not allowed to change
   1.694 +		the computed value of 'display-inside'.
   1.695 +		(Since 'overflow', 'overflow-x', and 'overflow-y' only
   1.696 +		apply to block containers, flex containers, and grid containers
   1.697 +		the computed value of 'display-inside' is always
   1.698 +		''block'', ''flex'' or ''grid''.
   1.699 +		<span class="issue">Need to specify exactly how this works,
   1.700 +		but it depends on
   1.701 +		having 'display-inside' and 'display-outside' specified.</span>
   1.702 +	</p>
   1.703 +
   1.704 +	<p>
   1.705 +		To match the model for other pseudo-elements
   1.706 +		where the pseudo-elements live inside their corresponding element,
   1.707 +		declarations in ''::nth-fragment()'' pseudo-elements override
   1.708 +		declarations in rules without the pseudo-element.
   1.709 +		The relative priority within such declarations is determined
   1.710 +		by normal cascading order (see [[!CSS21]]).
   1.711 +	</p>
   1.712 +
   1.713 +	<p>
   1.714 +		Styles specified on ''::nth-fragment()'' pseudo-elements
   1.715 +		do affect inheritance to content within the <i>fragment box</i>.
   1.716 +		In other words, the content within the <i>fragment box</i> must
   1.717 +		inherit from the fragment box's style (i.e., the pseudo-element style)
   1.718 +		rather than directly from the element.
   1.719 +		This means that elements split between fragment boxes may
   1.720 +		have different styles for different parts of the element.
   1.721 +	</p>
   1.722 +
   1.723 +	<p class="issue">
   1.724 +		This inheritance rule allows specifying styles indirectly
   1.725 +		(by using explicit ''inherit'' or using default inheritance
   1.726 +		on properties that don't apply to '':first-letter'')
   1.727 +		that can't be specified directly
   1.728 +		(based on the rules in the next section).
   1.729 +		This is a problem.
   1.730 +		The restrictions that apply to styling inside fragments
   1.731 +		should also apply to inheritance from fragments.
   1.732 +	</p>
   1.733 +
   1.734 +	<div class="example">
   1.735 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   1.736 +&lt;style&gt;
   1.737 +  .article {
   1.738 +    overflow: fragments;
   1.739 +  }
   1.740 +  .article::nth-fragment(1) {
   1.741 +    font-size: 1.5em;
   1.742 +    margin-bottom: 1em;
   1.743 +    height: 4em;
   1.744 +  }
   1.745 +  .article::nth-fragment(2) {
   1.746 +    margin-left: 5em;
   1.747 +    margin-right: 2em;
   1.748 +  }
   1.749 +&lt;/style&gt;
   1.750 +&lt;div class="article"&gt;
   1.751 +  The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
   1.752 +&lt;/div&gt;</pre></td><td>
   1.753 +			<div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
   1.754 +			<div class="article-font-inherit-demo two">descendants of the fragment.<br>This means that inherited<br>properties can be used<br>reliably on a fragment, as in<br>this example.</div>
   1.755 +		</td></tr></table>
   1.756 +	</div>
   1.757 +
   1.758 +<h4 id="style-in-fragments">Styling inside fragments</h4>
   1.759 +
   1.760 +	<p class="issue">
   1.761 +		Should this apply to fragment overflow only,
   1.762 +		or also to paginated overflow,
   1.763 +		or even to pagination across pages?
   1.764 +	</p>
   1.765 +
   1.766 +	<p>
   1.767 +		The ''::nth-fragment()'' pseudo-element
   1.768 +		can also be used to style
   1.769 +		content inside of a <i>fragment box</i>.
   1.770 +		Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
   1.771 +		the ''::nth-fragment()'' pseudo-element can be applied
   1.772 +		to parts of the selector other than the subject:
   1.773 +		in particular, it can match ancestors of the subject.
   1.774 +		However, the only CSS properties applied
   1.775 +		by rules with such selectors
   1.776 +		are those that apply
   1.777 +		to the ''::first-letter'' pseudo-element.
   1.778 +	</p>
   1.779 +
   1.780 +	<p>
   1.781 +		To be more precise,
   1.782 +		when a rule's selector has ''::nth-fragment()'' pseudo-elements
   1.783 +		attached to parts of the selector other than the subject,
   1.784 +		the declarations in that rule apply to
   1.785 +		a fragment (or pseudo-element thereof) when:
   1.786 +	</p>
   1.787 +	<ol>
   1.788 +		<li>
   1.789 +			the declarations are for properties that apply to the
   1.790 +			''::first-letter'' pseudo-element,
   1.791 +		</li>
   1.792 +		<li>
   1.793 +			the declarations would apply to
   1.794 +			that fragment (or pseudo-element thereof)
   1.795 +			had those ''::nth-fragment()'' pseudo-elements been removed,
   1.796 +			with a particular association between
   1.797 +			each sequence of simple selectors and the element it matched,
   1.798 +			and
   1.799 +		</li>
   1.800 +		<li>
   1.801 +			for each removed ''::nth-fragment()'' pseudo-element,
   1.802 +			the fragment lives within a <i>fragment box</i>
   1.803 +			of the element associated in that association
   1.804 +			with the selector that the pseudo-element was attached to,
   1.805 +			and whose index matches the pseudo-element.
   1.806 +		</li>
   1.807 +	</ol>
   1.808 +
   1.809 +	<div class="example">
   1.810 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   1.811 +&lt;style&gt;
   1.812 +  .dark-columns {
   1.813 +    overflow: fragments;
   1.814 +    width: 6em;
   1.815 +    height: 10em;
   1.816 +    float: left;
   1.817 +    margin-right: 1em;
   1.818 +    font: medium/1.25 Times New
   1.819 +      Roman, Times, serif;
   1.820 +  }
   1.821 +  .dark-columns::nth-fragment(1) {
   1.822 +    background: aqua; color: black;
   1.823 +  }
   1.824 +  .dark-columns::nth-fragment(1) :link {
   1.825 +    color: blue;
   1.826 +  }
   1.827 +  .dark-columns::nth-fragment(1) :visited {
   1.828 +    color: purple;
   1.829 +  }
   1.830 +  .dark-columns::nth-fragment(2) {
   1.831 +    background: navy; color: white;
   1.832 +  }
   1.833 +  .dark-columns::nth-fragment(2) :link {
   1.834 +    color: aqua;
   1.835 +  }
   1.836 +  .dark-columns::nth-fragment(2) :visited {
   1.837 +    color: fuchsia;
   1.838 +  }
   1.839 +&lt;/style&gt;
   1.840 +&lt;div class="dark-columns"&gt;
   1.841 +  <i>...</i>
   1.842 +&lt;/div&gt;</pre></td><td>
   1.843 +			<div class="dark-columns-demo one">In this<br><a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>text flows<br>from one<br>light-colored<br>fragment into<br>another<br>dark-colored</div>
   1.844 +			<div class="dark-columns-demo two">fragment.  We<br>therefore want<br>different styles<br>for <a href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>in the different<br>fragments.</div>
   1.845 +		</td></tr></table>
   1.846 +	</div>
   1.847 +
   1.848 +
   1.849 +<h3 id="max-lines">The 'max-lines' property</h3>
   1.850 +
   1.851 +	<p>
   1.852 +		Authors may wish to style the opening lines of an element
   1.853 +		with different styles
   1.854 +		by putting those opening lines in a separate fragment.
   1.855 +		However, since it may be difficult to predict the exact height
   1.856 +		occupied by those lines
   1.857 +		in order to restrict the first fragment to that height,
   1.858 +		this specification introduces a 'max-lines' property
   1.859 +		that forces a fragment to break
   1.860 +		after a specified number of lines.
   1.861 +		This forces a break after the given number of lines
   1.862 +		contained within the element or its descendants,
   1.863 +		as long as those lines are in the same block formatting context.
   1.864 +	</p>
   1.865 +
   1.866 +	<table class=propdef>
   1.867 +		<tr>
   1.868 +			<th>Name:
   1.869 +			<td><dfn>max-lines</dfn>
   1.870 +		<tr>
   1.871 +			<th><a href="#values">Value</a>:
   1.872 +			<td>none | &lt;integer&gt;
   1.873 +		<tr>
   1.874 +			<th>Initial:
   1.875 +			<td>none
   1.876 +		<tr>
   1.877 +			<th>Applies to:
   1.878 +			<td>fragment boxes
   1.879 +		<tr>
   1.880 +			<th>Inherited:
   1.881 +			<td>no
   1.882 +		<tr>
   1.883 +			<th>Animatable:
   1.884 +			<td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
   1.885 +		<tr>
   1.886 +			<th>Percentages:
   1.887 +			<td>N/A
   1.888 +		<tr>
   1.889 +			<th>Media:
   1.890 +			<td>visual
   1.891 +		<tr>
   1.892 +			<th>Computed&nbsp;value:
   1.893 +			<td>specified value
   1.894 +		<tr>
   1.895 +			<th>Canonical order:
   1.896 +			<td><abbr title="follows order of property value definition">per grammar</abbr>
   1.897 +	</table>
   1.898 +
   1.899 +	<dl>
   1.900 +		<dt>none
   1.901 +		<dd>
   1.902 +			<p>
   1.903 +				Breaks occur only as specified elsewhere.
   1.904 +			</p>
   1.905 +		</dd>
   1.906 +
   1.907 +		<dt>&lt;integer&gt;
   1.908 +		<dd>
   1.909 +			<p>
   1.910 +				In addition to any breaks specified elsewhere,
   1.911 +				a break is forced before any line that would exceed
   1.912 +				the given number of lines
   1.913 +				being placed inside the element
   1.914 +				(excluding lines that are in
   1.915 +				a different block formatting context from
   1.916 +				the block formatting context to which
   1.917 +				an unstyled child of the element would belong).
   1.918 +			</p>
   1.919 +
   1.920 +			<p class="issue">
   1.921 +				If there are multiple boundaries between this line
   1.922 +				and the previous, where exactly (in terms of element
   1.923 +				boundaries) is the break forced?
   1.924 +			</p>
   1.925 +
   1.926 +			<p>
   1.927 +				Only positive integers are accepted.
   1.928 +				Zero or negative integers are a parse error.
   1.929 +			</p>
   1.930 +		</dd>
   1.931 +	</dl>
   1.932 +
   1.933 +<p class="issue">Should this apply to fragment overflow only, or also
   1.934 +to pagination?</p>
   1.935 +
   1.936 +	<div class="example">
   1.937 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   1.938 +&lt;style&gt;
   1.939 +  .article {
   1.940 +    overflow: fragments;
   1.941 +  }
   1.942 +  .article::first-letter {
   1.943 +    font-size: 2em;
   1.944 +    line-height: 0.9;
   1.945 +  }
   1.946 +  .article::nth-fragment(1) {
   1.947 +    font-size: 1.5em;
   1.948 +    max-lines: 3;
   1.949 +  }
   1.950 +  .article::nth-fragment(2) {
   1.951 +    column-count: 2;
   1.952 +  }
   1.953 +&lt;/style&gt;
   1.954 +&lt;div class="article"&gt;
   1.955 +  <i>...</i>
   1.956 +&lt;/div&gt;</pre></td><td>
   1.957 +			<div class="article-max-lines-demo one">The max-lines property allows<br>authors to use a larger font for the first<br>few lines of an article.  Without the</div>
   1.958 +			<div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br>'height' property instead, but<br>that would leave a slight gap<br>if the author miscalculated<br>how much height a given<br>number of lines would<br>occupy (which might be</div>
   1.959 +			<div class="article-max-lines-demo three">particularly hard if the author<br>didn't know what text would<br>be filling the space, exactly<br>what font would be used, or<br>exactly which platform's font<br>rendering would be used to<br>display the font).</div>
   1.960 +		</td></tr></table>
   1.961 +	</div>
   1.962 +
   1.963 +<h2 id="static-media">Overflow in static media</h2>
   1.964 +
   1.965 +	<p class="issue">
   1.966 +		This specification should define useful behavior
   1.967 +		for all values of 'overflow'
   1.968 +		in static media (such as print).
   1.969 +		Current implementation behavior is quite poor and
   1.970 +		produces unexpected results when authors have not considered
   1.971 +		what will happen when
   1.972 +		the content they produce for interactive media
   1.973 +		is printed.
   1.974 +	</p>
   1.975 +
   1.976 +<h2 id="conformance">
   1.977 +Conformance</h2>
   1.978 +
   1.979 +<h3 id="placement">
   1.980 +Module interactions</h3>
   1.981 +
   1.982 +  <p>This module extends the 'overflow'
   1.983 +  feature defined in [[CSS21]] section 11.1.1.  It defines additional
   1.984 +  overflow handling mechanisms that implementations must implement as
   1.985 +  described in this module in order to conform to this module.</p>
   1.986 +
   1.987 +  <p>No properties in this module apply to the <code>::first-line</code> or
   1.988 +  <code>::first-letter</code> pseudo-elements.</p>
   1.989 +
   1.990 +<h3 id="values">
   1.991 +Values</h3>
   1.992 +
   1.993 +  <p>This specification follows the
   1.994 +  <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
   1.995 +  definition conventions</a> from [[!CSS21]]. Value types not defined in
   1.996 +  this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
   1.997 +  Other CSS modules may expand the definitions of these value types: for
   1.998 +  example [[CSS3COLOR]], when combined with this module, expands the
   1.999 +  definition of the &lt;color&gt; value type as used in this specification.</p>
  1.1000 +  
  1.1001 +  <p>In addition to the property-specific values listed in their definitions,
  1.1002 +  all properties defined in this specification also accept the
  1.1003 +  <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
  1.1004 +  keyword as their property value. For readability it has not been repeated
  1.1005 +  explicitly.
  1.1006 +
  1.1007 +
  1.1008 +<h3 id="conventions">
  1.1009 +Document conventions</h3>
  1.1010 +
  1.1011 +  <p>Conformance requirements are expressed with a combination of
  1.1012 +  descriptive assertions and RFC 2119 terminology. The key words “MUST”,
  1.1013 +  “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
  1.1014 +  “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
  1.1015 +  document are to be interpreted as described in RFC 2119.
  1.1016 +  However, for readability, these words do not appear in all uppercase
  1.1017 +  letters in this specification.
  1.1018 +  
  1.1019 +  <p>All of the text of this specification is normative except sections
  1.1020 +  explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
  1.1021 +  
  1.1022 +  <p>Examples in this specification are introduced with the words “for example”
  1.1023 +  or are set apart from the normative text with <code>class="example"</code>,
  1.1024 +  like this:
  1.1025 +  
  1.1026 +  <div class="example">
  1.1027 +    <p>This is an example of an informative example.</p>
  1.1028 +  </div>
  1.1029 +  
  1.1030 +  <p>Informative notes begin with the word “Note” and are set apart from the
  1.1031 +  normative text with <code>class="note"</code>, like this:
  1.1032 +  
  1.1033 +  <p class="note">Note, this is an informative note.</p>
  1.1034 +
  1.1035 +<h3 id="conformance-classes">
  1.1036 +Conformance classes</h3>
  1.1037 +
  1.1038 +  <p>Conformance to CSS Overflow Module Level 3
  1.1039 +  is defined for three conformance classes:
  1.1040 +  <dl>
  1.1041 +    <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
  1.1042 +      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
  1.1043 +      style sheet</a>.
  1.1044 +    <dt><dfn>renderer</dfn></dt>
  1.1045 +      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  1.1046 +      that interprets the semantics of a style sheet and renders
  1.1047 +      documents that use them.
  1.1048 +    <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
  1.1049 +      <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  1.1050 +      that writes a style sheet.
  1.1051 +  </dl>
  1.1052 +  
  1.1053 +  <p>A style sheet is conformant to CSS Overflow Module Level 3
  1.1054 +  if all of its statements that use syntax defined in this module are valid
  1.1055 +  according to the generic CSS grammar and the individual grammars of each
  1.1056 +  feature defined in this module.
  1.1057 +  
  1.1058 +  <p>A renderer is conformant to CSS Overflow Module Level 3
  1.1059 +  if, in addition to interpreting the style sheet as defined by the
  1.1060 +  appropriate specifications, it supports all the features defined
  1.1061 +  by CSS Overflow Module Level 3 by parsing them correctly
  1.1062 +  and rendering the document accordingly. However, the inability of a
  1.1063 +  UA to correctly render a document due to limitations of the device
  1.1064 +  does not make the UA non-conformant. (For example, a UA is not
  1.1065 +  required to render color on a monochrome monitor.)
  1.1066 +  
  1.1067 +  <p>An authoring tool is conformant to CSS Overflow Module Level 3
  1.1068 +  if it writes style sheets that are syntactically correct according to the
  1.1069 +  generic CSS grammar and the individual grammars of each feature in
  1.1070 +  this module, and meet all other conformance requirements of style sheets
  1.1071 +  as described in this module.
  1.1072 +
  1.1073 +<h3 id="partial">
  1.1074 +Partial implementations</h3>
  1.1075 +
  1.1076 +  <p>So that authors can exploit the forward-compatible parsing rules to
  1.1077 +  assign fallback values, CSS renderers <strong>must</strong>
  1.1078 +  treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
  1.1079 +  as appropriate</a>) any at-rules, properties, property values, keywords,
  1.1080 +  and other syntactic constructs for which they have no usable level of
  1.1081 +  support. In particular, user agents <strong>must not</strong> selectively
  1.1082 +  ignore unsupported component values and honor supported values in a single
  1.1083 +  multi-value property declaration: if any value is considered invalid
  1.1084 +  (as unsupported values must be), CSS requires that the entire declaration
  1.1085 +  be ignored.</p>
  1.1086 +  
  1.1087 +<h3 id="experimental">
  1.1088 +Experimental implementations</h3>
  1.1089 +
  1.1090 +  <p>To avoid clashes with future CSS features, the CSS2.1 specification
  1.1091 +  reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  1.1092 +  syntax</a> for proprietary and experimental extensions to CSS.
  1.1093 +  
  1.1094 +  <p>Prior to a specification reaching the Candidate Recommendation stage
  1.1095 +  in the W3C process, all implementations of a CSS feature are considered
  1.1096 +  experimental. The CSS Working Group recommends that implementations
  1.1097 +  use a vendor-prefixed syntax for such features, including those in
  1.1098 +  W3C Working Drafts. This avoids incompatibilities with future changes
  1.1099 +  in the draft.
  1.1100 +  </p>
  1.1101 + 
  1.1102 +<h3 id="testing">
  1.1103 +Non-experimental implementations</h3>
  1.1104 +
  1.1105 +  <p>Once a specification reaches the Candidate Recommendation stage,
  1.1106 +  non-experimental implementations are possible, and implementors should
  1.1107 +  release an unprefixed implementation of any CR-level feature they
  1.1108 +  can demonstrate to be correctly implemented according to spec.
  1.1109 +  
  1.1110 +  <p>To establish and maintain the interoperability of CSS across
  1.1111 +  implementations, the CSS Working Group requests that non-experimental
  1.1112 +  CSS renderers submit an implementation report (and, if necessary, the
  1.1113 +  testcases used for that implementation report) to the W3C before
  1.1114 +  releasing an unprefixed implementation of any CSS features. Testcases
  1.1115 +  submitted to W3C are subject to review and correction by the CSS
  1.1116 +  Working Group.
  1.1117 +  
  1.1118 +  <p>Further information on submitting testcases and implementation reports
  1.1119 +  can be found from on the CSS Working Group's website at
  1.1120 +  <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  1.1121 +  Questions should be directed to the
  1.1122 +  <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  1.1123 +  mailing list.
  1.1124 +
  1.1125 +<h3 id="cr-exit-criteria">
  1.1126 +CR exit criteria</h3>
  1.1127 +
  1.1128 +  <p class=issue>[Change or remove the following CR exit criteria if
  1.1129 +  the spec is not a module, but, e.g., a Note or a profile. This text was <a
  1.1130 +  href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
  1.1131 +
  1.1132 +  <p>
  1.1133 +  For this specification to be advanced to Proposed Recommendation,
  1.1134 +  there must be at least two independent, interoperable implementations
  1.1135 +  of each feature. Each feature may be implemented by a different set of
  1.1136 +  products, there is no requirement that all features be implemented by
  1.1137 +  a single product. For the purposes of this criterion, we define the
  1.1138 +  following terms:
  1.1139 +  
  1.1140 +  <dl>
  1.1141 +    <dt>independent <dd>each implementation must be developed by a
  1.1142 +    different party and cannot share, reuse, or derive from code
  1.1143 +    used by another qualifying implementation. Sections of code that
  1.1144 +    have no bearing on the implementation of this specification are
  1.1145 +    exempt from this requirement.
  1.1146 +  
  1.1147 +    <dt>interoperable <dd>passing the respective test case(s) in the
  1.1148 +    official CSS test suite, or, if the implementation is not a Web
  1.1149 +    browser, an equivalent test. Every relevant test in the test
  1.1150 +    suite should have an equivalent test created if such a user
  1.1151 +    agent (UA) is to be used to claim interoperability. In addition
  1.1152 +    if such a UA is to be used to claim interoperability, then there
  1.1153 +    must one or more additional UAs which can also pass those
  1.1154 +    equivalent tests in the same way for the purpose of
  1.1155 +    interoperability. The equivalent tests must be made publicly
  1.1156 +    available for the purposes of peer review.
  1.1157 +  
  1.1158 +    <dt>implementation <dd>a user agent which:
  1.1159 +  
  1.1160 +    <ol class=inline>
  1.1161 +      <li>implements the specification.
  1.1162 +  
  1.1163 +      <li>is available to the general public. The implementation may
  1.1164 +      be a shipping product or other publicly available version
  1.1165 +      (i.e., beta version, preview release, or “nightly build”). 
  1.1166 +      Non-shipping product releases must have implemented the
  1.1167 +      feature(s) for a period of at least one month in order to
  1.1168 +      demonstrate stability.
  1.1169 +  
  1.1170 +      <li>is not experimental (i.e., a version specifically designed
  1.1171 +      to pass the test suite and is not intended for normal usage
  1.1172 +      going forward).
  1.1173 +    </ol>
  1.1174 +  </dl>
  1.1175 +  
  1.1176 +  <p>The specification will remain Candidate Recommendation for at least
  1.1177 +  six months.
  1.1178 +
  1.1179 +<h2 class=no-num id="acknowledgments">
  1.1180 +Acknowledgments</h2>
  1.1181 +
  1.1182 +	<p>
  1.1183 +		Thanks especially to the feedback from
  1.1184 +		Rossen Atanassov,
  1.1185 +		Bert Bos,
  1.1186 +		Tantek Çelik,
  1.1187 +		John Daggett,
  1.1188 +		fantasai,
  1.1189 +		Daniel Glazman,
  1.1190 +		Vincent Hardy,
  1.1191 +		H&aring;kon Wium Lie,
  1.1192 +		Peter Linss,
  1.1193 +		Robert O'Callahan,
  1.1194 +		Florian Rivoal,
  1.1195 +		Alan Stearns,
  1.1196 +		Steve Zilles,
  1.1197 +		and all the rest of the
  1.1198 +		<a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
  1.1199 +	</p>
  1.1200 +
  1.1201 +<h2 class=no-num id="references">
  1.1202 +References</h2>
  1.1203 +
  1.1204 +<h3 class="no-num" id="normative-references">
  1.1205 +Normative references</h3>
  1.1206 +<!--normative-->
  1.1207 +
  1.1208 +<h3 class="no-num" id="other-references">
  1.1209 +Other references</h3>
  1.1210 +<!--informative-->
  1.1211 +
  1.1212 +<h2 class="no-num" id="index">
  1.1213 +Index</h2>
  1.1214 +<!--index-->
  1.1215 +
  1.1216 +<h2 class="no-num" id="property-index">
  1.1217 +Property index</h2>
  1.1218 +<!-- properties -->
  1.1219 +
  1.1220 +</body>
  1.1221 +</html>
  1.1222 +<!-- Keep this comment at the end of the file
  1.1223 +Local variables:
  1.1224 +mode: sgml
  1.1225 +sgml-declaration:"~/SGML/HTML4.decl"
  1.1226 +sgml-default-doctype-name:"html"
  1.1227 +sgml-minimize-attributes:t
  1.1228 +sgml-nofill-elements:("pre" "style" "br")
  1.1229 +sgml-live-element-indicator:t
  1.1230 +sgml-omittag:nil
  1.1231 +sgml-shorttag:nil
  1.1232 +sgml-namecase-general:t
  1.1233 +sgml-general-insert-case:lower
  1.1234 +sgml-always-quote-attributes:t
  1.1235 +sgml-indent-step:nil
  1.1236 +sgml-indent-data:t
  1.1237 +sgml-parent-document:nil
  1.1238 +sgml-exposed-tags:nil
  1.1239 +sgml-local-catalogs:nil
  1.1240 +sgml-local-ecat-files:nil
  1.1241 +End:
  1.1242 +-->
  1.1243 + 

mercurial