css-overflow/Overview.src.html

Tue, 28 Jan 2014 13:21:36 -0800

author
L. David Baron <dbaron@dbaron.org>
date
Tue, 28 Jan 2014 13:21:36 -0800
changeset 9865
625d8c1b183a
parent 9850
0cd153c3469c
child 9966
ecc3593f6bc6
permissions
-rw-r--r--

[css-overflow] Add issue about rewriting these definitions.

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5   <title>CSS Overflow Module Level 3</title>
     6   <link rel=contents href="#contents">
     7   <link rel=index href="#index">
     8   <link rel="stylesheet" type="text/css" href="../default.css">
     9   <link rel="stylesheet" type="text/css"
    10         href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
    11 	<style>
    12 		table.source-demo-pair {
    13 			width: 100%;
    14 		}
    16 		.in-cards-demo {
    17 			width: 13em;
    18 			height: 8em;
    20 			padding: 4px;
    21 			border: medium solid blue;
    22 			margin: 6px;
    24 			font: medium/1.3 Times New Roman, Times, serif;
    25 			white-space: nowrap;
    26 		}
    28 		.bouncy-columns-demo {
    29 			width: 6em;
    30 			height: 10em;
    31 			float: left;
    32 			margin: 1em;
    33 			font: medium/1.25 Times New Roman, Times, serif;
    34 			white-space: nowrap;
    35 		}
    36 		.bouncy-columns-demo.one {
    37 			background: aqua; color: black;
    38 			transform: rotate(-3deg);
    39 		}
    40 		.bouncy-columns-demo.two {
    41 			background: yellow; color: black;
    42 			transform: rotate(3deg);
    43 		}
    45 		.article-font-inherit-demo {
    46 			font: 1em/1.25 Times New Roman, Times, serif;
    47 			white-space: nowrap;
    48 		}
    49 		.article-font-inherit-demo.one {
    50 			width: 12em;
    51 			font-size: 1.5em;
    52 			margin-bottom: 1em;
    53 			height: 4em;
    54 		}
    55 		.article-font-inherit-demo.two {
    56 			width: 11em;
    57 			margin-left: 5em;
    58 			margin-right: 2em;
    59 		}
    61 		.dark-columns-demo {
    62 			width: 6em;
    63 			height: 10em;
    64 			float: left;
    65 			margin-right: 1em;
    66 			font: medium/1.25 Times New Roman, Times, serif;
    67 			white-space: nowrap;
    68 		}
    69 		.dark-columns-demo.one {
    70 			background: aqua; color: black;
    71 		}
    72 		.dark-columns-demo.one :link {
    73 			color: blue;
    74 		}
    75 		.dark-columns-demo.one :visited {
    76 			color: purple;
    77 		}
    78 		.dark-columns-demo.two {
    79 			background: navy; color: white;
    80 		}
    81 		.dark-columns-demo.two :link {
    82 			color: aqua;
    83 		}
    84 		.dark-columns-demo.two :visited {
    85 			color: fuchsia;
    86 		}
    88 		.article-max-lines-demo {
    89 			font: 1em/1.25 Times New Roman, Times, serif;
    90 			white-space: nowrap;
    91 		}
    92 		.article-max-lines-demo.one::first-letter {
    93 			font-size: 2em;
    94 			line-height: 0.9;
    95 		}
    96 		.article-max-lines-demo.one {
    97 			font-size: 1.5em;
    98 			width: 16em;
    99 		}
   100 		.article-max-lines-demo.two {
   101 			width: 11.5em;
   102 			float: left; margin-right: 1em;
   103 		}
   104 		.article-max-lines-demo.three {
   105 			width: 11.5em;
   106 			float: left;
   107 		}
   108 	</style>
   109 </head>
   111 <div class="head">
   112 <!--logo-->
   114 <h1>CSS Overflow Module Level 3</h1>
   116 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
   117 <dl>
   118   <dt>This version:
   119     <dd><a href="[VERSION]">[VERSION]</a>
   121   <dt>Latest version:
   122     <dd><a href="http://www.w3.org/TR/css-overflow-3/">http://www.w3.org/TR/css-overflow-3/</a>
   124   <dt>Editor's draft:
   125     <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
   126     (<a href="https://dvcs.w3.org/hg/csswg/log/tip/css-overflow/Overview.src.html">change log</a>,
   127     <a href="https://dvcs.w3.org/hg/csswg/log/tip/css3-overflow/Overview.src.html">older change log</a>)
   129   <dt>Previous version:
   130     <dd><a href="http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/">http://www.w3.org/TR/2013/WD-css-overflow-3-20130418/</a>
   132   <dt>Editors:
   133     <dd class="h-card vcard">
   134       <a class="p-name fn u-url url" rel="author"
   135          href="http://dbaron.org/">L. David Baron</a>,
   136       <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
   138   <dt>Issue Tracking:</dt>
   139     <dd>Maintained in document (only editor's draft is current)
   141   <dt>Feedback:</dt>
   142     <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-overflow%5D%20feedback"
   143          >www-style@w3.org</a> 
   144          with subject line &ldquo;<kbd>[css-overflow] 
   145          <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
   146          (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/"
   147            >archives</a>)
   149   <dt>Test suite:
   150     <dd>none yet
   151 </dl>
   153 <!--copyright-->
   155 <hr title="Separator for header">
   156 </div>
   158 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
   160 	<p>
   161 		<a href="http://www.w3.org/TR/CSS/">CSS</a> is
   162 		a language for describing
   163 		the rendering of structured documents (such as HTML and XML)
   164 		on screen, on paper, in speech, etc.
   165 		This module contains the features of CSS
   166 		relating to new mechanisms of overflow handling in visual media (e.g., screen or paper).
   167 		In interactive media,
   168 		it describes features that allow the overflow
   169 		from a fixed size container
   170 		to be handled by pagination (displaying one page at a time).
   171 		It also describes features, applying to all visual media,
   172 		that allow the contents of an element
   173 		to be spread across multiple fragments,
   174 		allowing the contents to flow across multiple regions
   175 		or to have different styles for different fragments.
   176 	</p>
   178 <h2 class="no-num no-toc" id="status">Status of this document</h2>
   180 <!--status-->
   182 <p>The following features are at risk: &hellip;
   184 <h2 class="no-num no-toc" id="contents">
   185 Table of contents</h2>
   187 <!--toc-->
   189 <h2 id="intro">
   190 Introduction</h2>
   192 	<p>
   193 		In CSS Level 1 [[CSS1]], placing more content than would fit
   194 		inside an element with a specified size
   195 		was generally an authoring error.
   196 		Doing so caused the content to extend
   197 		outside the bounds of the element,
   198 		which would likely cause
   199 		that content to overlap with other elements.
   200 	</p>
   202 	<p>
   203 		CSS Level 2 [[CSS21]] introduced the 'overflow' property,
   204 		which allows authors to have overflow be handled by scrolling,
   205 		which means it is no longer an authoring error.
   206 		It also allows authors to specify
   207 		that overflow is handled by clipping,
   208 		which makes sense when the author's intent
   209 		is that the content not be shown.
   210 	</p>
   212 	<p>
   213 		However, scrolling is not the only way
   214 		to present large amounts of content,
   215 		and may even not be the optimal way.
   216 		After all, the codex replaced the scroll
   217 		as the common format for large written works
   218 		because of its advantages.
   219 	</p>
   221 	<p>
   222 		This specification introduces
   223 		a mechanism for Web pages to specify
   224 		that an element of a page should handle overflow
   225 		through pagination rather than through scrolling.
   226 	</p>
   228 	<p>
   229 		This specification also extends the concept of overflow
   230 		in another direction.
   231 		Instead of requiring that authors specify a single area
   232 		into which the content of an element must flow,
   233 		this specification allows authors to specify multiple fragments,
   234 		each with their own dimensions and styles,
   235 		so that the content of the element can flow from one to the next,
   236 		using as many as needed to place the content without overflowing.
   237 	</p>
   239 	<p>
   240 		In both of these cases, implementations must
   241 		break the content in the block-progression dimension.
   242 		Implementations must do this is described
   243 		in the CSS Fragmentation Module [[!CSS3-BREAK]].
   244 	</p>
   246 <h2 id="overflow-concepts">Types of overflow</h2>
   248 	<p>
   249 		CSS uses the term <dfn>overflow</dfn> to describe
   250 		the contents of a box
   251 		that extend outside that one of that box's edges
   252 		(i.e., its <i>content edge</i>, <i>padding edge</i>,
   253 		<i>border edge</i>, or <i>margin edge</i>).
   254 		The overflow might be described as the elements or features
   255 		that cause this overflow,
   256 		the non-rectangular region occupied by these features,
   257 		or, more commonly,
   258 		as the minimal rectangle that bounds that region.
   259 		A box's overflow is computed based on the boxes and styles
   260 		of the box and of all its descendants whose containing block chain
   261 		<span class="issue">undefined term?</span>
   262 		includes the box.
   263 	</p>
   265 	<p>
   266 		In most cases, any of these types of overflow
   267 		can be computed for any box
   268 		from the bounds and properties of that box,
   269 		and from the overflow (of that type)
   270 		of each of its children.
   271 		However, this is not always the case; for example,
   272 		when ''transform-style: preserve-3d'' [[CSS3-TRANSFORMS]] is used on
   273 		some of the children, their descendants with
   274 		''transform-style: preserve-3d'' must also be examined.
   275 	</p>
   277 <h3 id="ink-overflow">Ink overflow</h3>
   279 	<p>
   280 		The <dfn>ink overflow</dfn> of a box
   281 		is the part of that box and its contents that
   282 		creates a visual effect outside of
   283 		the box's border box.
   284 	</p>
   286 	<p>
   287 		Since some effects in CSS (for example, the blurs in
   288 		'text-shadow' [[CSS3TEXT]] and 'box-shadow' [[CSS3BG]])
   289 		do not define what visual extent they cover, the extent
   290 		of the <i>ink overflow</i> is undefined.
   291 	</p>
   293 	<p class="issue">
   294 		Should we try to define it at all and just leave pieces undefined?
   295 	</p>
   297 	<p>
   298 		The <dfn>ink overflow region</dfn> is the non-rectangular region
   299 		occupied by the <i>ink overflow</i>, and the
   300 		<dfn>ink overflow rectangle</dfn> is
   301 		the minimal rectangle whose axis is aligned to the box's axes
   302 		and contains the <i>ink overflow region</i>.
   303 		Note that the <i>ink overflow rectangle</i> is a rectangle
   304 		in the box's coordinate system, but might be non-rectangular
   305 		in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
   306 	</p>
   308 <h3 id="scrollable-overflow">Scrollable overflow</h3>
   310 	<p>
   311 		The <dfn>scrollable overflow</dfn> of a box is the
   312 		set of things extending outside of that box's padding edge
   313 		for which a scrolling mechanism needs to be provided.
   314 	</p>
   316 	<p class="issue">
   317 		The following definition should be rewritten to use
   318 		the concept of <a href="http://dev.w3.org/csswg/css-transforms/#3d-rendering-context">3D rendering context</a> [[!CSS3-TRANSFORMS]]
   319 		and related terms,
   320 		particularly once those concepts stabilize following changes
   321 		proposed in the CSS WG meeting on the morning of 2014-01-28.
   322 	</p>
   324 	<p>
   325 		Given the following definitions
   326 		<span class="issue">which belong in [[CSS3-TRANSFORMS]]</span>:
   327 	</p>
   329 	<dl>
   330 		<dt><dfn>3d-preserving child</dfn></dt>
   331 		<dd>
   332 			A child box B of a containing block C is a 3d-preserving
   333 			child if it has ''transform-style: preserve-3d''
   334 			and the user-agent is not required to flatten it
   335 			based on the <a href="http://www.w3.org/TR/css3-transforms/#transform-style-property">requirements</a> in [[!CSS3-TRANSFORMS]].
   336 		</dt>
   337 		<dt><dfn>non-3d-preserving child</dfn></dt>
   338 		<dd>
   339 			A child C of a box P is a non-3d-preserving-child if
   340 			it is not a <i>3d-preserving child</i>.
   341 		</dd>
   342 		<dt><dfn>3d-preserving descendant</dfn></dt>
   343 		<dd>
   344 			Box D is a 3d-preserving descendant of box A if A is
   345 			an ancestor of D, and D and all of the boxes (if any)
   346 			in the containing block chain from D to A
   347 			are <i>3d-preserving child</i> boxes.
   348 		</dd>
   349 	</dl>
   351 	<p>The scrollable overflow of a box is the union of the following things,
   352 	all adjusted for transforms <span class="issue">undefined concept!</span> into the box's coordinate space:</p>
   354 	<ul>
   355 		<li>
   356 			for the box and all of its <i>3d-preserving descendant</i> boxes:
   357 			<ul>
   358 				<li>the box's own padding edge (for the box itself) or border edge (for <i>3d-preserving descendant</i> boxes)</li>
   359 				<li>the bounds <span class="issue">undefined term!</span> of any text directly in the box</li>
   360 				<li><span class="issue">MORE HERE!</span>
   361 			</ul>
   362 		<li>
   363 			for all the <i>non-3d-preserving child</i> boxes of the
   364 			box and its <i>3d-preserving descendant</i> boxes,
   365 			the scrollable overflow of the box
   366 		</li>
   367 	</ul>
   369 	<p class="issue">
   370 		I wrote this definition off the top of my head,
   371 		so it can't possibly be right.
   372 		It's missing tons of pieces!
   373 	</p>
   375 	<p>
   376 		The <dfn>scrollable overflow region</dfn> is the non-rectangular region
   377 		occupied by the <i>scrollable overflow</i>, and the
   378 		<dfn>scrollable overflow rectangle</dfn> is
   379 		the minimal rectangle whose axis is aligned to the box's axes
   380 		and contains the <i>scrollable overflow region</i>.
   381 		Note that the <i>scrollable overflow rectangle</i> is a rectangle
   382 		in the box's coordinate system, but might be non-rectangular
   383 		in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
   384 	</p>
   386 <h3 id="border-box-overflow">Border box overflow</h3>
   388 	<p class="issue">
   389 		This concept has been proposed for some uses, such as for
   390 		determining what the 'outline' property goes around, and
   391 		as the basis of a coordinate system for specifying clips and masks,
   392 		but it's not clear if it's needed.
   393 	</p>
   395 	<p>
   396 		The <dfn>border-box overflow</dfn> of a box is the
   397 		union of the box's border edge and the border edges of
   398 		the box's descendants.</p>
   399 	</p>
   401 	<p class="issue">
   402 		If needed, define more formally, as for scrollable overflow above.
   403 		(Maybe even share the definitions in an appropriate way!)
   404 	</p>
   406 	<p>
   407 		The <dfn>border-box overflow region</dfn> is the non-rectangular region
   408 		occupied by the <i>border-box overflow</i>, and the
   409 		<dfn>border-box overflow rectangle</dfn> is
   410 		the minimal rectangle whose axis is aligned to the box's axes
   411 		and contains the <i>border-box overflow region</i>.
   412 		Note that the <i>border-box overflow rectangle</i> is a rectangle
   413 		in the box's coordinate system, but might be non-rectangular
   414 		in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
   415 	</p>
   417 <h2 id="overflow-properties">Overflow properties</h2>
   419 	<p>
   420 		The ''overflow-x'' property specifies
   421 		the handling of overflow in the horizontal direction
   422 		(i.e., overflow from the left and right sides of the box),
   423 		and the ''overflow-y'' property specifies the handling
   424 		of overflow in the vertical direction
   425 		(i.e., overflow from the top and bottom sides of the box) 
   426 	</p>
   428 	<table class=propdef>
   429 		<tr>
   430 			<th>Name:
   431 			<td><dfn>overflow-x</dfn>, <dfn>overflow-y</dfn>
   432 		<tr>
   433 			<th><a href="#values">Value</a>:
   434 			<td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
   435 		<tr>
   436 			<th>Initial:
   437 			<td>visible
   438 		<tr>
   439 			<th>Applies to:
   440 			<td>block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
   441 		<tr>
   442 			<th>Inherited:
   443 			<td>no
   444 		<tr>
   445 			<th>Percentages:
   446 			<td>N/A
   447 		<tr>
   448 			<th>Media:
   449 			<td>visual
   450 		<tr>
   451 			<th>Computed&nbsp;value:
   452 			<td>see below
   453 		<tr>
   454 			<th>Animatable:
   455 			<td>no
   456 		<tr>
   457 			<th>Canonical order:
   458 			<td><abbr title="follows order of property value definition">per grammar</abbr>
   459 	</table>
   461 	<p>
   462 		The 'overflow' property is a shorthand property
   463 		that sets the specified values of both 'overflow-x' and 'overflow-y'
   464 		to the value specified for 'overflow'.
   465 	</p>
   467 	<table class=propdef>
   468 		<tr>
   469 			<th>Name:
   470 			<td><dfn>overflow</dfn>
   471 		<tr>
   472 			<th><a href="#values">Value</a>:
   473 			<td>visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
   474 		<tr>
   475 			<th>Initial:
   476 			<td>see individual properties
   477 		<tr>
   478 			<th>Applies to:
   479 			<td>block containers [[!CSS21]], flex containers [[!CSS3-FLEXBOX]], and grid containers [[!CSS3-GRID-LAYOUT]]
   480 		<tr>
   481 			<th>Inherited:
   482 			<td>no
   483 		<tr>
   484 			<th>Percentages:
   485 			<td>N/A
   486 		<tr>
   487 			<th>Media:
   488 			<td>visual
   489 		<tr>
   490 			<th>Computed&nbsp;value:
   491 			<td>see individual properties
   492 		<tr>
   493 			<th>Animatable:
   494 			<td>no
   495 		<tr>
   496 			<th>Canonical order:
   497 			<td><abbr title="follows order of property value definition">per grammar</abbr>
   498 	</table>
   500 	<p>The values of these properties are:</p>
   502 	<dl>
   503 		<dt><dfn>visible</dfn>
   504 		<dd>
   505 			There is no special handling of overflow, that is, it
   506 			may be rendered outside the block container.
   507 		</dd>
   508 		<dt><dfn>hidden</dfn>
   509 		<dt><dfn>scroll</dfn>
   510 		<dt><dfn>auto</dfn>
   511 		<dd>
   512 			These values are collectively the <dfn>scrolling values</dfn>;
   513 			they are defined in the section on
   514 			<a href="#scrolling-overflow">scrolling and hidden overflow</a>.
   515 		</dd>
   516 		<dt><dfn>paged-x</dfn>
   517 		<dt><dfn>paged-y</dfn>
   518 		<dt><dfn>paged-x-controls</dfn>
   519 		<dt><dfn>paged-y-controls</dfn>
   520 		<dt><dfn>fragments</dfn>
   521 		<dd>
   522 			These values are collectively the <dfn>fragmenting values</dfn>;
   523 			they are defined in the sections on
   524 			<a href="#paginated-overflow">paginated overflow</a> and
   525 			<a href="#fragment-overflow">fragment overflow</a>.
   526 		</dd>
   527 	</dl>
   529 	<div id="overflow-computed-values">
   530 		<p>The computed values of 'overflow-x' and 'overflow-y'
   531 		are determined from the cascaded values [[!CSS3CASCADE]]
   532 		based on the following rules:</p>
   534 		<ol>
   535 			<li>
   536 				If one or both of the cascaded values are
   537 				<i>fragmenting values</i>, then:
   538 				<ol>
   539 					<li>
   540 						If one of the cascaded values is one of the
   541 						<i>fragmenting values</i>
   542 						and the other is not,
   543 						then the computed values are
   544 						the same as the cascaded values.
   545 					</li>
   546 					<li>
   547 						If both of the cascaded values are <i>fragmenting values</i>, then:
   548 						<ol>
   549 							<li>
   550 								for horizontal writing mode [[!CSS3-WRITING-MODES]],
   551 								the computed value for ''overflow-y'' is the cascaded value
   552 								and the computed value for ''overflow-x'' is ''hidden'', or
   553 							</li>
   554 							<li>
   555 								for vertical writing mode [[!CSS3-WRITING-MODES]],
   556 								the computed value for ''overflow-x'' is the cascaded value
   557 								and the computed value for ''overflow-y'' is ''hidden''.
   558 							</li>
   559 						</ol>
   560 					</li>
   561 				</ol>
   562 			</li>
   563 			<li>
   564 				Otherwise, if one cascaded values is
   565 				one of the <i>scrolling values</i>
   566 				and the other is ''visible'',
   567 				then computed values are the cascaded values
   568 				with ''visible'' changed to ''hidden''.
   569 			</li>
   570 			<li>
   571 				Otherwise, the computed values are as specified.
   572 			</li>
   573 		</ol>
   574 	</div>
   576 	<p class="issue">
   577 		Are all 4 of the ''paged-*'' values really needed?
   578 	</p>
   580 	<p>
   581 		When the <i>fragmenting values</i> are used,
   582 		the overflow from the fragments themselves
   583 		treats the fragmenting value as ''hidden''.
   584 		<span class="issue">Is this the right behavior?</span>
   585 		<span class="issue">Give example.</span>
   586 	</p>
   588 	<p class="issue">
   589 		[[CSS3-MARQUEE]] describes an 'overflow-style' property,
   590 		but it has not picked up implementation experience
   591 		that the working group is aware of.
   592 		Should this document treat 'overflow-style' as a defunct proposal,
   593 		or should this document describe the 'overflow-style' property
   594 		and attempt to revive it,
   595 		despite that implementations have implemented
   596 		'overflow-x' and 'overflow-y' instead?
   597 	</p>
   599 	<p class="issue">
   600 		There are <a href="http://lists.w3.org/Archives/Public/www-style/2012May/1197.html">discussions</a>
   601 		about how overflow, overflow-style, overflow-x and overflow-y
   602 		should work and interact with each other.
   603 		Until consensus on this topic is reached,
   604 		it is not completely clear which of these
   605 		should be used for
   606 		paged-x | paged-y | paged-x-controls | paged-y-controls | fragments
   607 	</p>
   609 <h2 id="scrolling-overflow">Scrolling and hidden overflow</h2>
   611 	<p class="issue">
   612 		Move material from [[CSS21]] and [[CSS3BOX]] here.
   613 	</p>
   615 <h2 id="paginated-overflow">Paginated overflow</h2>
   617 <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as [[CSS3GCPM]] has?)</p>
   619 <p class="issue">Ability to display N pages at once
   620 rather than just one page at once?</p>
   622 	<p class="issue">
   623 		The current implementation of paginated overflow uses
   624 		the 'overflow'/'overflow-x'/'overflow-y' properties
   625 		rather than the 'overflow-style' property as proposed
   626 		in the [[CSS3GCPM]] draft
   627 		(which also matches the [[CSS3-MARQUEE]] proposal).
   628 		We should probably switch away from 'overflow-style',
   629 		but that's not 100% clear.
   630 	</p>
   632 <h2 id="fragment-overflow">Fragment overflow</h2>
   634 	<p>
   635 		This section introduces and defines the meaning of
   636 		the new ''fragments'' value of the 'overflow' property.
   637 	</p>
   639 	<p>
   640 		When the computed value of 'overflow' for an element is ''fragments'',
   641 		and implementations would otherwise have created a box for the element,
   642 		then implementations must create a sequence of <dfn>fragment box</dfn>es
   643 		for that element.
   644 		(It is possible for an element with ''overflow: fragments''
   645 		to generate only one <i>fragment box</i>.
   646 		However, if an element's computed 'overflow' is not ''fragments'',
   647 		then its box is not a <i>fragment box</i>.)
   648 		Every <i>fragment box</i> is a fragmentation container,
   649 		and any overflow
   650 		that would cause that fragmentation container to fragment
   651 		causes another <i>fragment box</i> created as a next sibling
   652 		of the previous one.
   653 		<span class="issue">Or is it as though it's a next sibling of
   654 		the element?  Need to figure out exactly how this interacts with
   655 		other box-level fixup.</span>
   656 		Additionally, if the <i>fragment box</i> is also
   657 		a multi-column box (as defined in [[!CSS3COL]]
   658 		<span class="issue">though it defines <i>multi-column element</i></span>)
   659 		any content that would lead to the creation of <i>overflow columns</i> [[!CSS3COL]]
   660 		instead is flown into an additional fragment box.
   661 		However, fragment boxes may themselves be broken
   662 		(due to fragmentation in a fragmentation context outside of them,
   663 		such as pages, columns, or other fragment boxes);
   664 		such breaking leads to fragments of the same fragment box
   665 		rather than multiple fragment boxes.
   666 		(This matters because fragment boxes may be styled by their index;
   667 		such breaking leads to multiple fragments of a fragment box
   668 		with a single index.
   669 		This design choice is so that
   670 		breaking a fragment box across pages does not break
   671 		the association of indices to particular pieces of content.)
   672 		<span class="issue">Should a forced break that breaks to
   673 		an outer fragmentation context cause a new fragment of a single
   674 		fragment box or a new fragment box?</span>
   675 		<span class="issue">Should we find a term other than
   676 		<i>fragment box</i> here to make this a little less confusing?</span>
   677 	</p>
   679 	<p class="issue">
   680 		What if we want to be able to style the pieces of an element
   681 		split within another type of fragmentation context?
   682 		These rules prevent ever using ''::nth-fragment()'' for that,
   683 		despite that the name seems the most logical name for such a feature.
   684 	</p>
   686 	<div class="example">
   687 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   688 &lt;title&gt;Breaking content into
   689   equal-sized cards&lt;/title&gt;
   690 &lt;style&gt;
   691   .in-cards {
   692     overflow: fragments;
   694     width: 13em;
   695     height: 8em;
   697     padding: 4px;
   698     border: medium solid blue;
   699     margin: 6px;
   701     font: medium/1.3 Times New
   702       Roman, Times, serif;
   703   }
   704 &lt;/style&gt;
   705 &lt;div class="in-cards"&gt;
   706   In this example, the text in the div
   707   is broken into a series of cards.
   708   These cards all have the same style.
   709   The presence of enough content to
   710   overflow one of the cards causes
   711   another one to be created.  The second
   712   card is created just like it's the
   713   next sibling of the first.
   714 &lt;/div&gt;</pre></td><td>
   715 			<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>
   716 			<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>
   717 		</td></tr></table>
   718 	</div>
   720 	<p class="issue">
   721 		We should specify that ''overflow: fragments'' does not apply
   722 		to at least some table parts,
   723 		and perhaps other elements as well.
   724 		We need to determine exactly which ones.
   725 	</p>
   727 	<p class="issue">
   728 		This specification needs to say which type of
   729 		fragmentation context is created
   730 		so that it's clear which values of the 'break' property
   731 		cause breaks within this context.
   732 		We probably want ''break: regions'' to apply.
   733 	</p>
   735 	<p class="issue">
   736 		This specification needs a processing model
   737 		that will apply in cases where the layout containing the
   738 		fragments has characteristics that use the intrinsic size of the fragments
   739 		to change the amount of space available for them,
   740 		such as [[CSS3-GRID-LAYOUT]].
   741 		There has already been some work on such a processing model
   742 		in [[CSS3-REGIONS]],
   743 		and the work done on a model there,
   744 		and the editors of that specification,
   745 		should inform what happens in this specification.
   746 	</p>
   748 <h3 id="fragment-styling">Fragment styling</h3>
   750 <h4 id="fragment-pseudo-element">The ::nth-fragment() pseudo-element</h4>
   752 	<p>
   753 		The ::nth-fragment() pseudo-element is a pseudo-element
   754 		that describes some of the <i>fragment box</i>es generated by an element.
   755 		The argument to the pseudo-element takes the same syntax
   756 		as the argument to the :nth-child() pseudo-class
   757 		defined in [[!SELECT]], and has the same meaning
   758 		except that the number is relative to
   759 		<i>fragment box</i>es generated by the element
   760 		instead of siblings of the element.
   761 	</p>
   763 	<p class="note">
   764 		Selectors that allow addressing fragments
   765 		by counting from the end rather than the start
   766 		are intentionally not provided.
   767 		Such selectors would interfere with determining
   768 		the number of fragments.
   769 	</p>
   771 	<p class="issue">
   772 		Depending on future discussions,
   773 		this ''::nth-fragment(<var>an+b</var>)'' syntax
   774 		may be replaced with
   775 		the new ''::fragment:nth(<var>an+b</var>)'' syntax.
   776 	</p>
   778 <h4 id="style-of-fragments">Styling of fragments</h4>
   780 	<p class="issue">
   781 		Should this apply to fragment overflow only,
   782 		or also to paginated overflow?
   783 		(If it applies,
   784 		then stricter property restrictions would be needed
   785 		for paginated overflow.)
   786 	</p>
   788 	<p>
   789 		In the absence of rules with ''::nth-fragment()'' pseudo-elements,
   790 		the computed style for each <i>fragment box</i>
   791 		is the computed style for the element
   792 		for which the <i>fragment box</i> was created.
   793 		However, the style for a <i>fragment box</i> is also influenced
   794 		by rules whose selector's <i>subject</i> [[!SELECT]]
   795 		has an ''::nth-fragment()'' pseudo-element,
   796 		if the 1-based number of the <i>fragment box</i> matches
   797 		that ''::nth-fragment()'' pseudo-element
   798 		and the selector (excluding the ''::nth-fragment()'' pseudo-element)
   799 		matches the element generating the fragments.
   800 	</p>
   802 	<p>
   803 		When determining the style of the <i>fragment box</i>,
   804 		these rules that match the fragment pseudo-element
   805 		cascade together with the rules that match the element,
   806 		with the fragment pseudo-element adding the specificity
   807 		of a pseudo-class to the specificity calculation.
   808 		<span class="issue">Does this need to be specified in
   809 		the cascading module as well?</span>
   810 	</p>
   812 	<div class="example">
   813 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   814 &lt;style&gt;
   815   .bouncy-columns {
   816     overflow: fragments;
   817     width: 6em;
   818     height: 10em;
   819     float: left;
   820     margin: 1em;
   821     font: medium/1.25 Times New
   822       Roman, Times, serif;
   823   }
   824   .bouncy-columns::nth-fragment(1) {
   825     background: aqua; color: black;
   826     transform: rotate(-3deg);
   827   }
   828   .bouncy-columns::nth-fragment(2) {
   829     background: yellow; color: black;
   830     transform: rotate(3deg);
   831   }
   832 &lt;/style&gt;
   833 &lt;div class="bouncy-columns"&gt;
   834   <i>...</i>
   835 &lt;/div&gt;</pre></td><td>
   836 			<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>
   837 			<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>
   838 			<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>
   839 		</td></tr></table>
   840 	</div>
   842 	<p>
   843 		Styling an ''::nth-fragment()'' pseudo-element with the 'overflow'
   844 		property does take effect;
   845 		if a <i>fragment box</i> has a
   846 		computed value of 'overflow' other than ''fragments''
   847 		then that fragment box is the last fragment.
   848 		However, overriding ''overflow'' on the first fragment
   849 		does not cause the <i>fragment box</i> not to exist;
   850 		whether there are fragment boxes at all is determined by
   851 		the computed value of overflow for the element.
   852 		<span class="issue">Need to reword this to refer to the
   853 		appropriate choice of ''overflow-x'' or ''overflow-y'',
   854 		and then point to rule about the handling of the other one
   855 		of ''overflow-x'' or ''overflow-y''.</span>
   856 	</p>
   858 	<p>
   859 		Styling an ''::nth-fragment()'' pseudo-element with the 'content'
   860 		property has no effect;
   861 		the computed value of 'content' for the fragment box
   862 		remains the same as the computed value of content for the element.
   863 	</p>
   865 	<p>
   866 		Specifying ''display: none'' for a <i>fragment box</i> causes
   867 		the fragment box with that index not to be generated.
   868 		However, in terms of the indices
   869 		used for matching ''::nth-fragment()'' pseudo-elements
   870 		of later fragment boxes,
   871 		it still counts as though it was generated.
   872 		However, since it is not generated, it does not contain any content.
   873 	</p>
   875 	<p>
   876 		Specifying other values of 'display', 'position',
   877 		or 'float' is permitted, but is not allowed to change
   878 		the computed value of 'display-inside'.
   879 		(Since 'overflow', 'overflow-x', and 'overflow-y' only
   880 		apply to block containers, flex containers, and grid containers
   881 		the computed value of 'display-inside' is always
   882 		''block'', ''flex'' or ''grid''.
   883 		<span class="issue">Need to specify exactly how this works,
   884 		but it depends on
   885 		having 'display-inside' and 'display-outside' specified.</span>
   886 	</p>
   888 	<p>
   889 		To match the model for other pseudo-elements
   890 		where the pseudo-elements live inside their corresponding element,
   891 		declarations in ''::nth-fragment()'' pseudo-elements override
   892 		declarations in rules without the pseudo-element.
   893 		The relative priority within such declarations is determined
   894 		by normal cascading order (see [[!CSS21]]).
   895 	</p>
   897 	<p>
   898 		Styles specified on ''::nth-fragment()'' pseudo-elements
   899 		do affect inheritance to content within the <i>fragment box</i>.
   900 		In other words, the content within the <i>fragment box</i> must
   901 		inherit from the fragment box's style (i.e., the pseudo-element style)
   902 		rather than directly from the element.
   903 		This means that elements split between fragment boxes may
   904 		have different styles for different parts of the element.
   905 	</p>
   907 	<p class="issue">
   908 		This inheritance rule allows specifying styles indirectly
   909 		(by using explicit ''inherit'' or using default inheritance
   910 		on properties that don't apply to '':first-letter'')
   911 		that can't be specified directly
   912 		(based on the rules in the next section).
   913 		This is a problem.
   914 		The restrictions that apply to styling inside fragments
   915 		should also apply to inheritance from fragments.
   916 	</p>
   918 	<div class="example">
   919 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   920 &lt;style&gt;
   921   .article {
   922     overflow: fragments;
   923   }
   924   .article::nth-fragment(1) {
   925     font-size: 1.5em;
   926     margin-bottom: 1em;
   927     height: 4em;
   928   }
   929   .article::nth-fragment(2) {
   930     margin-left: 5em;
   931     margin-right: 2em;
   932   }
   933 &lt;/style&gt;
   934 &lt;div class="article"&gt;
   935   The &lt;code&gt;font-size&lt;/code&gt; property<i>...</i>
   936 &lt;/div&gt;</pre></td><td>
   937 			<div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
   938 			<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>
   939 		</td></tr></table>
   940 	</div>
   942 <h4 id="style-in-fragments">Styling inside fragments</h4>
   944 	<p class="issue">
   945 		Should this apply to fragment overflow only,
   946 		or also to paginated overflow,
   947 		or even to pagination across pages?
   948 	</p>
   950 	<p>
   951 		The ''::nth-fragment()'' pseudo-element
   952 		can also be used to style
   953 		content inside of a <i>fragment box</i>.
   954 		Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
   955 		the ''::nth-fragment()'' pseudo-element can be applied
   956 		to parts of the selector other than the subject:
   957 		in particular, it can match ancestors of the subject.
   958 		However, the only CSS properties applied
   959 		by rules with such selectors
   960 		are those that apply
   961 		to the ''::first-letter'' pseudo-element.
   962 	</p>
   964 	<p>
   965 		To be more precise,
   966 		when a rule's selector has ''::nth-fragment()'' pseudo-elements
   967 		attached to parts of the selector other than the subject,
   968 		the declarations in that rule apply to
   969 		a fragment (or pseudo-element thereof) when:
   970 	</p>
   971 	<ol>
   972 		<li>
   973 			the declarations are for properties that apply to the
   974 			''::first-letter'' pseudo-element,
   975 		</li>
   976 		<li>
   977 			the declarations would apply to
   978 			that fragment (or pseudo-element thereof)
   979 			had those ''::nth-fragment()'' pseudo-elements been removed,
   980 			with a particular association between
   981 			each sequence of simple selectors and the element it matched,
   982 			and
   983 		</li>
   984 		<li>
   985 			for each removed ''::nth-fragment()'' pseudo-element,
   986 			the fragment lives within a <i>fragment box</i>
   987 			of the element associated in that association
   988 			with the selector that the pseudo-element was attached to,
   989 			and whose index matches the pseudo-element.
   990 		</li>
   991 	</ol>
   993 	<div class="example">
   994 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
   995 &lt;style&gt;
   996   .dark-columns {
   997     overflow: fragments;
   998     width: 6em;
   999     height: 10em;
  1000     float: left;
  1001     margin-right: 1em;
  1002     font: medium/1.25 Times New
  1003       Roman, Times, serif;
  1005   .dark-columns::nth-fragment(1) {
  1006     background: aqua; color: black;
  1008   .dark-columns::nth-fragment(1) :link {
  1009     color: blue;
  1011   .dark-columns::nth-fragment(1) :visited {
  1012     color: purple;
  1014   .dark-columns::nth-fragment(2) {
  1015     background: navy; color: white;
  1017   .dark-columns::nth-fragment(2) :link {
  1018     color: aqua;
  1020   .dark-columns::nth-fragment(2) :visited {
  1021     color: fuchsia;
  1023 &lt;/style&gt;
  1024 &lt;div class="dark-columns"&gt;
  1025   <i>...</i>
  1026 &lt;/div&gt;</pre></td><td>
  1027 			<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>
  1028 			<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>
  1029 		</td></tr></table>
  1030 	</div>
  1033 <h3 id="max-lines">The 'max-lines' property</h3>
  1035 	<p>
  1036 		Authors may wish to style the opening lines of an element
  1037 		with different styles
  1038 		by putting those opening lines in a separate fragment.
  1039 		However, since it may be difficult to predict the exact height
  1040 		occupied by those lines
  1041 		in order to restrict the first fragment to that height,
  1042 		this specification introduces a 'max-lines' property
  1043 		that forces a fragment to break
  1044 		after a specified number of lines.
  1045 		This forces a break after the given number of lines
  1046 		contained within the element or its descendants,
  1047 		as long as those lines are in the same block formatting context.
  1048 	</p>
  1050 	<table class=propdef>
  1051 		<tr>
  1052 			<th>Name:
  1053 			<td><dfn>max-lines</dfn>
  1054 		<tr>
  1055 			<th><a href="#values">Value</a>:
  1056 			<td>none | &lt;integer&gt;
  1057 		<tr>
  1058 			<th>Initial:
  1059 			<td>none
  1060 		<tr>
  1061 			<th>Applies to:
  1062 			<td>fragment boxes
  1063 		<tr>
  1064 			<th>Inherited:
  1065 			<td>no
  1066 		<tr>
  1067 			<th>Animatable:
  1068 			<td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
  1069 		<tr>
  1070 			<th>Percentages:
  1071 			<td>N/A
  1072 		<tr>
  1073 			<th>Media:
  1074 			<td>visual
  1075 		<tr>
  1076 			<th>Computed&nbsp;value:
  1077 			<td>specified value
  1078 		<tr>
  1079 			<th>Canonical order:
  1080 			<td><abbr title="follows order of property value definition">per grammar</abbr>
  1081 	</table>
  1083 	<dl>
  1084 		<dt>none
  1085 		<dd>
  1086 			<p>
  1087 				Breaks occur only as specified elsewhere.
  1088 			</p>
  1089 		</dd>
  1091 		<dt>&lt;integer&gt;
  1092 		<dd>
  1093 			<p>
  1094 				In addition to any breaks specified elsewhere,
  1095 				a break is forced before any line that would exceed
  1096 				the given number of lines
  1097 				being placed inside the element
  1098 				(excluding lines that are in
  1099 				a different block formatting context from
  1100 				the block formatting context to which
  1101 				an unstyled child of the element would belong).
  1102 			</p>
  1104 			<p class="issue">
  1105 				If there are multiple boundaries between this line
  1106 				and the previous, where exactly (in terms of element
  1107 				boundaries) is the break forced?
  1108 			</p>
  1110 			<p>
  1111 				Only positive integers are accepted.
  1112 				Zero or negative integers are a parse error.
  1113 			</p>
  1114 		</dd>
  1115 	</dl>
  1117 <p class="issue">Should this apply to fragment overflow only, or also
  1118 to pagination?</p>
  1120 	<div class="example">
  1121 		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
  1122 &lt;style&gt;
  1123   .article {
  1124     overflow: fragments;
  1126   .article::first-letter {
  1127     font-size: 2em;
  1128     line-height: 0.9;
  1130   .article::nth-fragment(1) {
  1131     font-size: 1.5em;
  1132     max-lines: 3;
  1134   .article::nth-fragment(2) {
  1135     column-count: 2;
  1137 &lt;/style&gt;
  1138 &lt;div class="article"&gt;
  1139   <i>...</i>
  1140 &lt;/div&gt;</pre></td><td>
  1141 			<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>
  1142 			<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>
  1143 			<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>
  1144 		</td></tr></table>
  1145 	</div>
  1147 <h2 id="static-media">Overflow in static media</h2>
  1149 	<p class="issue">
  1150 		This specification should define useful behavior
  1151 		for all values of 'overflow'
  1152 		in static media (such as print).
  1153 		Current implementation behavior is quite poor and
  1154 		produces unexpected results when authors have not considered
  1155 		what will happen when
  1156 		the content they produce for interactive media
  1157 		is printed.
  1158 	</p>
  1160 <h2 id="conformance">
  1161 Conformance</h2>
  1163 <h3 id="placement">
  1164 Module interactions</h3>
  1166   <p>This module extends the 'overflow'
  1167   feature defined in [[CSS21]] section 11.1.1.  It defines additional
  1168   overflow handling mechanisms that implementations must implement as
  1169   described in this module in order to conform to this module.</p>
  1171   <p>No properties in this module apply to the <code>::first-line</code> or
  1172   <code>::first-letter</code> pseudo-elements.</p>
  1174 <h3 id="values">
  1175 Values</h3>
  1177   <p>This specification follows the
  1178   <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
  1179   definition conventions</a> from [[!CSS21]]. Value types not defined in
  1180   this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
  1181   Other CSS modules may expand the definitions of these value types: for
  1182   example [[CSS3COLOR]], when combined with this module, expands the
  1183   definition of the &lt;color&gt; value type as used in this specification.</p>
  1185   <p>In addition to the property-specific values listed in their definitions,
  1186   all properties defined in this specification also accept the
  1187   <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
  1188   keyword as their property value. For readability it has not been repeated
  1189   explicitly.
  1192 <h3 id="conventions">
  1193 Document conventions</h3>
  1195   <p>Conformance requirements are expressed with a combination of
  1196   descriptive assertions and RFC 2119 terminology. The key words “MUST”,
  1197   “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
  1198   “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
  1199   document are to be interpreted as described in RFC 2119.
  1200   However, for readability, these words do not appear in all uppercase
  1201   letters in this specification.
  1203   <p>All of the text of this specification is normative except sections
  1204   explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
  1206   <p>Examples in this specification are introduced with the words “for example”
  1207   or are set apart from the normative text with <code>class="example"</code>,
  1208   like this:
  1210   <div class="example">
  1211     <p>This is an example of an informative example.</p>
  1212   </div>
  1214   <p>Informative notes begin with the word “Note” and are set apart from the
  1215   normative text with <code>class="note"</code>, like this:
  1217   <p class="note">Note, this is an informative note.</p>
  1219 <h3 id="conformance-classes">
  1220 Conformance classes</h3>
  1222   <p>Conformance to CSS Overflow Module Level 3
  1223   is defined for three conformance classes:
  1224   <dl>
  1225     <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
  1226       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
  1227       style sheet</a>.
  1228     <dt><dfn>renderer</dfn></dt>
  1229       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  1230       that interprets the semantics of a style sheet and renders
  1231       documents that use them.
  1232     <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
  1233       <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
  1234       that writes a style sheet.
  1235   </dl>
  1237   <p>A style sheet is conformant to CSS Overflow Module Level 3
  1238   if all of its statements that use syntax defined in this module are valid
  1239   according to the generic CSS grammar and the individual grammars of each
  1240   feature defined in this module.
  1242   <p>A renderer is conformant to CSS Overflow Module Level 3
  1243   if, in addition to interpreting the style sheet as defined by the
  1244   appropriate specifications, it supports all the features defined
  1245   by CSS Overflow Module Level 3 by parsing them correctly
  1246   and rendering the document accordingly. However, the inability of a
  1247   UA to correctly render a document due to limitations of the device
  1248   does not make the UA non-conformant. (For example, a UA is not
  1249   required to render color on a monochrome monitor.)
  1251   <p>An authoring tool is conformant to CSS Overflow Module Level 3
  1252   if it writes style sheets that are syntactically correct according to the
  1253   generic CSS grammar and the individual grammars of each feature in
  1254   this module, and meet all other conformance requirements of style sheets
  1255   as described in this module.
  1257 <h3 id="partial">
  1258 Partial implementations</h3>
  1260   <p>So that authors can exploit the forward-compatible parsing rules to
  1261   assign fallback values, CSS renderers <strong>must</strong>
  1262   treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
  1263   as appropriate</a>) any at-rules, properties, property values, keywords,
  1264   and other syntactic constructs for which they have no usable level of
  1265   support. In particular, user agents <strong>must not</strong> selectively
  1266   ignore unsupported component values and honor supported values in a single
  1267   multi-value property declaration: if any value is considered invalid
  1268   (as unsupported values must be), CSS requires that the entire declaration
  1269   be ignored.</p>
  1271 <h3 id="experimental">
  1272 Experimental implementations</h3>
  1274   <p>To avoid clashes with future CSS features, the CSS2.1 specification
  1275   reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
  1276   syntax</a> for proprietary and experimental extensions to CSS.
  1278   <p>Prior to a specification reaching the Candidate Recommendation stage
  1279   in the W3C process, all implementations of a CSS feature are considered
  1280   experimental. The CSS Working Group recommends that implementations
  1281   use a vendor-prefixed syntax for such features, including those in
  1282   W3C Working Drafts. This avoids incompatibilities with future changes
  1283   in the draft.
  1284   </p>
  1286 <h3 id="testing">
  1287 Non-experimental implementations</h3>
  1289   <p>Once a specification reaches the Candidate Recommendation stage,
  1290   non-experimental implementations are possible, and implementors should
  1291   release an unprefixed implementation of any CR-level feature they
  1292   can demonstrate to be correctly implemented according to spec.
  1294   <p>To establish and maintain the interoperability of CSS across
  1295   implementations, the CSS Working Group requests that non-experimental
  1296   CSS renderers submit an implementation report (and, if necessary, the
  1297   testcases used for that implementation report) to the W3C before
  1298   releasing an unprefixed implementation of any CSS features. Testcases
  1299   submitted to W3C are subject to review and correction by the CSS
  1300   Working Group.
  1302   <p>Further information on submitting testcases and implementation reports
  1303   can be found from on the CSS Working Group's website at
  1304   <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
  1305   Questions should be directed to the
  1306   <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
  1307   mailing list.
  1309 <h3 id="cr-exit-criteria">
  1310 CR exit criteria</h3>
  1312   <p class=issue>[Change or remove the following CR exit criteria if
  1313   the spec is not a module, but, e.g., a Note or a profile. This text was <a
  1314   href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
  1316   <p>
  1317   For this specification to be advanced to Proposed Recommendation,
  1318   there must be at least two independent, interoperable implementations
  1319   of each feature. Each feature may be implemented by a different set of
  1320   products, there is no requirement that all features be implemented by
  1321   a single product. For the purposes of this criterion, we define the
  1322   following terms:
  1324   <dl>
  1325     <dt>independent <dd>each implementation must be developed by a
  1326     different party and cannot share, reuse, or derive from code
  1327     used by another qualifying implementation. Sections of code that
  1328     have no bearing on the implementation of this specification are
  1329     exempt from this requirement.
  1331     <dt>interoperable <dd>passing the respective test case(s) in the
  1332     official CSS test suite, or, if the implementation is not a Web
  1333     browser, an equivalent test. Every relevant test in the test
  1334     suite should have an equivalent test created if such a user
  1335     agent (UA) is to be used to claim interoperability. In addition
  1336     if such a UA is to be used to claim interoperability, then there
  1337     must one or more additional UAs which can also pass those
  1338     equivalent tests in the same way for the purpose of
  1339     interoperability. The equivalent tests must be made publicly
  1340     available for the purposes of peer review.
  1342     <dt>implementation <dd>a user agent which:
  1344     <ol class=inline>
  1345       <li>implements the specification.
  1347       <li>is available to the general public. The implementation may
  1348       be a shipping product or other publicly available version
  1349       (i.e., beta version, preview release, or “nightly build”). 
  1350       Non-shipping product releases must have implemented the
  1351       feature(s) for a period of at least one month in order to
  1352       demonstrate stability.
  1354       <li>is not experimental (i.e., a version specifically designed
  1355       to pass the test suite and is not intended for normal usage
  1356       going forward).
  1357     </ol>
  1358   </dl>
  1360   <p>The specification will remain Candidate Recommendation for at least
  1361   six months.
  1363 <h2 class=no-num id="acknowledgments">
  1364 Acknowledgments</h2>
  1366 	<p>
  1367 		Thanks especially to the feedback from
  1368 		Rossen Atanassov,
  1369 		Bert Bos,
  1370 		Tantek Çelik,
  1371 		John Daggett,
  1372 		fantasai,
  1373 		Daniel Glazman,
  1374 		Vincent Hardy,
  1375 		H&aring;kon Wium Lie,
  1376 		Peter Linss,
  1377 		Robert O'Callahan,
  1378 		Florian Rivoal,
  1379 		Alan Stearns,
  1380 		Steve Zilles,
  1381 		and all the rest of the
  1382 		<a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
  1383 	</p>
  1385 <h2 class=no-num id="references">
  1386 References</h2>
  1388 <h3 class="no-num" id="normative-references">
  1389 Normative references</h3>
  1390 <!--normative-->
  1392 <h3 class="no-num" id="other-references">
  1393 Other references</h3>
  1394 <!--informative-->
  1396 <h2 class="no-num" id="index">
  1397 Index</h2>
  1398 <!--index-->
  1400 <h2 class="no-num" id="property-index">
  1401 Property index</h2>
  1402 <!-- properties -->
  1404 </body>
  1405 </html>
  1406 <!-- Keep this comment at the end of the file
  1407 Local variables:
  1408 mode: sgml
  1409 sgml-declaration:"~/SGML/HTML4.decl"
  1410 sgml-default-doctype-name:"html"
  1411 sgml-minimize-attributes:t
  1412 sgml-nofill-elements:("pre" "style" "br")
  1413 sgml-live-element-indicator:t
  1414 sgml-omittag:nil
  1415 sgml-shorttag:nil
  1416 sgml-namecase-general:t
  1417 sgml-general-insert-case:lower
  1418 sgml-always-quote-attributes:t
  1419 sgml-indent-step:nil
  1420 sgml-indent-data:t
  1421 sgml-parent-document:nil
  1422 sgml-exposed-tags:nil
  1423 sgml-local-catalogs:nil
  1424 sgml-local-ecat-files:nil
  1425 End:
  1426 -->

mercurial