css3-overflow/Overview.src.html@692f0f5f757b
css3-overflow/Overview.src.html
Mon, 06 Aug 2012 18:31:23 -0700
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Mon, 06 Aug 2012 18:31:23 -0700
- changeset 6479
- 692f0f5f757b
- parent 6478
- 94d91d8d42e2
- child 6480
- 4183f2de4bf6
- permissions
- -rw-r--r--
'max-lines' example.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>CSS Region Styling 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 }
15 .in-cards-demo {
16 width: 13em;
17 height: 8em;
19 padding: 4px;
20 border: medium solid blue;
21 margin: 6px;
23 font: medium/1.3 Times New Roman, Times, serif;
24 white-space: nowrap;
25 }
26 .bouncy-columns-demo {
27 width: 6em;
28 height: 10em;
29 float: left;
30 margin: 1em;
31 font: medium/1.25 Times New Roman, Times, serif;
32 white-space: nowrap;
33 }
34 .bouncy-columns-demo.one {
35 background: aqua; color: black;
36 transform: rotate(-3deg);
37 }
38 .bouncy-columns-demo.two {
39 background: yellow; color: black;
40 transform: rotate(3deg);
41 }
43 .article-max-lines-demo {
44 font: 1em/1.25 Times New Roman, Times, serif;
45 white-space: nowrap;
46 }
47 .article-max-lines-demo.one::first-letter {
48 font-size: 2em;
49 line-height: 0.9;
50 }
51 .article-max-lines-demo.one {
52 font-size: 1.5em;
53 width: 16em;
54 }
55 .article-max-lines-demo.two {
56 width: 11.5em;
57 float: left; margin-right: 1em;
58 }
59 .article-max-lines-demo.three {
60 width: 11.5em;
61 float: left;
62 }
63 </style>
64 </head>
66 <div class="head">
67 <!--logo-->
69 <h1>CSS Region Styling Module Level 3</h1>
71 <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
72 <dl>
73 <dt>This version:
74 <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/ED-css3-region-styling-[CDATE]/</a>
76 <dt>Latest version:
77 <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a>
79 <dt>Editor's draft:
80 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a>
82 <!--
83 <dt>Previous version:
84 <dd><a href="http://www.w3.org/PreviousVersionURI">
85 http://www.w3.org/PreviousVersionURI</a>
86 -->
88 <dt>Issue Tracking:</dt>
89 <dd>Maintained in document (only editor's draft is current)
91 <dt>Feedback:</dt>
92 <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line “<kbd>[[SHORTNAME]] <var>… message topic …</var></kbd>”
94 <dt>Editors:
95 <dd class="h-card vcard">
96 <a class="p-name fn u-url url" rel="author"
97 href="http://dbaron.org/">L. David Baron</a>,
98 <a class="p-org org" href="http://www.mozilla.org/">Mozilla</a>
99 </dl>
101 <!--copyright-->
103 <hr title="Separator for header">
104 </div>
106 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
108 <p>
109 <a href="http://www.w3.org/TR/CSS/">CSS</a> is
110 a language for describing
111 the rendering of structured documents (such as HTML and XML)
112 on screen, on paper, in speech, etc.
113 This module contains the features of CSS
114 relating to new mechanisms of overflow handling in visual media (e.g., screen or paper).
115 In interactive media,
116 it describes features that allow the overflow
117 from a fixed size container
118 to be handled by pagination (displaying one page at a time).
119 It also describes features, applying to all visual media,
120 that allow the contents of an element
121 to be spread across multiple containers,
122 allowing the contents to flow across multiple regions of a page
123 or to have different styles for different parts.
124 </p>
126 <h2 class="no-num no-toc" id="status">Status of this document</h2>
128 <!--status-->
130 <p>The following features are at risk: …
132 <h2 class="no-num no-toc" id="contents">
133 Table of contents</h2>
135 <!--toc-->
137 <h2 id="intro">
138 Introduction</h2>
140 <p>
141 In CSS Level 1 [[CSS1]], placing more content than would fit
142 inside an element with a specified size
143 was generally an authoring error.
144 Doing so caused the content to extend
145 outside the bounds of the element,
146 which would likely cause
147 that content to overlap with other elements.
148 </p>
150 <p>
151 CSS Level 2 [[CSS21]] introduced the 'overflow' property,
152 which allows authors to have overflow be handled by scrolling,
153 which means it is no longer an authoring error.
154 It also allows authors to specify
155 that overflow is handled by clipping,
156 which makes sense when the author's intent
157 is that the content not be shown.
158 </p>
160 <p>
161 However, scrolling is not the only way
162 to present large amounts of content,
163 and may even not be the optimal way.
164 After all, the codex replaced the scroll
165 as the common format for large written works
166 because of its advantages.
167 </p>
169 <p>
170 This specification introduces
171 a mechanism for Web pages to specify
172 that a region of a page should handle overflow
173 through pagination rather than through scrolling.
174 </p>
176 <p>
177 This specification also extends the concept of overflow
178 in another direction.
179 Instead of requiring that authors specify a single region
180 into which the content of an element must flow,
181 this specification allows authors to specify multiple regions,
182 each with their own dimensions and styles,
183 so that the content of the element can flow from one to the next,
184 using as many as needed to place the content without overflowing.
185 </p>
187 <p>
188 In both of these cases, implementations must
189 break the content in the block-progression dimension.
190 Implementations must do this is described
191 in the CSS Fragmentation Module [[!CSS3-BREAK]].
192 </p>
195 <h2 id="paginated-overflow">Paginated overflow</h2>
197 <p class="issue">overflow:paginate or overflow:pages (or paged-x, paged-y, paged-x-controls, paged-y-controls as css3-gcpm has?)</p>
199 <p class="issue">Ability to display N pages at once
200 rather than just one page at once?</p>
202 <h2 id="region-overflow">Region overflow</h2>
204 <p>
205 This section introduces and defines the meaning of
206 the new ''regions'' (<span class="issue">or ''repeat''?</span>)
207 value of the 'overflow' property.
208 </p>
210 <p>
211 When the computed value of 'overflow' for an element is ''regions'',
212 and implementations would otherwise have created a box for the element,
213 then implementations must create at least one box for that element.
214 Each box created for the element is called a <dfn>region box</dfn>
215 for that element.
216 (If an element with ''overflow: regions'' generates only one box,
217 that box is a <i>region box</i>.
218 However, if an element's computed 'overflow' is not ''regions'',
219 then its box is not a <i>region box</i>.)
220 Every <i>region box</i> is a fragmentation container,
221 and for each <i>region box</i> which ends with a fragmentation break,
222 (which could happen
223 because breakable content overflows in the block dimension
224 or because of a forced break),
225 there must be another <i>region box</i> created as a next sibling
226 of the previous one.
227 <span class="issue">Or is it as though it's a next sibling of
228 the element? Need to figure out exactly how this interacts with
229 other box-level fixup.</span>
230 (Breakable content might overflow in the box dimension either
231 because of a specified size on the region box
232 or because the region box is within a fragmentation context
233 in which it is being broken.
234 In other words, a single region box is never broken
235 across columns or pages;
236 the pieces that are in separate columns or pages
237 are always distinct region boxes.)
238 </p>
240 <p class="issue">
241 We also want ''::nth-region()'' pseudo-elements
242 to be able to apply to the pieces of an element
243 split within a fragmentation context.
244 Should we require that authors who want to use
245 ''::nth-region()'' in this way specify ''overflow:regions''
246 (even if they don't specify a constrained height),
247 or should it work automatically for all elements
248 even if they don't have ''overflow: regions''?
249 </p>
251 <div class="example">
252 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
253 <title>Breaking content into
254 equal-sized cards</title>
255 <style>
256 .in-cards {
257 overflow: regions;
259 width: 13em;
260 height: 8em;
262 padding: 4px;
263 border: medium solid blue;
264 margin: 6px;
266 font: medium/1.3 Times New
267 Roman, Times, serif;
268 }
269 </style>
270 <div class="in-cards">
271 In this example, the text in the div
272 is broken into a series of cards.
273 These cards all have the same style.
274 The presence of enough content to
275 overflow one of the cards causes
276 another one to be created. The second
277 card is created just like it's the
278 next sibling of the first.
279 </div></pre></td><td>
280 <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>
281 <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>
282 </td></tr></table>
283 </div>
285 <h3 id="region-styling">Region styling</h3>
287 <h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4>
289 <p>
290 The ::nth-region() pseudo-element is a pseudo-element
291 that describes some of the region boxes generated by an element.
292 The argument to the pseudo-element takes the same syntax
293 as the argument to the :nth-child() pseudo-class
294 defined in [[!SELECT]], and has the same meaning
295 except that the number is relative to
296 <i>region boxes</i> generated by the element
297 instead of siblings of the element.
298 </p>
300 <p class="issue">
301 If we go with a name for the 'overflow' value other than
302 ''overflow: regions'',
303 then we should probably rename this pseudo-element,
304 perhaps to ::nth-piece(), ::nth-part(), or ::nth-instance().
305 </p>
307 <p class="note">
308 Selectors that allow addressing regions
309 by counting from the end rather than the start
310 are intentionally not provided.
311 Such selectors would interfere with determining
312 the number of regions.
313 </p>
315 <h4 id="style-of-regions">Styling of regions</h4>
317 <p class="issue">
318 Should this apply to region overflow only,
319 or also to paginated overflow?
320 (If it applies,
321 then stricter property restrictions would be needed
322 for paginated overflow.)
323 </p>
325 <p>
326 In the absence of rules with ''::nth-region()'' pseudo-elements,
327 the computed style for each <i>region box</i>
328 is the computed style for the element
329 for which the <i>region box</i> was created.
330 However, the style for a <i>region box</i> is also influenced
331 by rules whose selector's <i>subject</i> [[!SELECT]]
332 has an ''::nth-region()'' pseudo-element,
333 if the 1-based number of the region box matches
334 that ''::nth-region()'' pseudo-element
335 and the selector (excluding the ''::nth-region()'' pseudo-element)
336 matches the element generating the regions.
337 </p>
339 <div class="example">
340 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
341 <style>
342 .bouncy-columns {
343 overflow: regions;
344 width: 6em;
345 height: 10em;
346 float: left;
347 margin: 1em;
348 font: medium/1.25 Times New
349 Roman, Times, serif;
350 }
351 .bouncy-columns::nth-region(1) {
352 background: aqua; color: black;
353 transform: rotate(-3deg);
354 }
355 .bouncy-columns::nth-region(2) {
356 background: yellow; color: black;
357 transform: rotate(3deg);
358 }
359 </style>
360 <div class="bouncy-columns">
361 <i>...</i>
362 </div></pre></td><td>
363 <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>
364 <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>
365 <div class="bouncy-columns-demo">just doesn't<br>have any<br>region-specific<br>styling because<br>the author<br>didn't give it<br>any.</div>
366 </td></tr></table>
367 </div>
369 <p>
370 Styling an ''::nth-region()'' pseudo-element with the 'overflow'
371 property has no effect;
372 the computed value of 'overflow' for the region box
373 remains the same as the computed value of overflow for the element.
374 </p>
376 <p>
377 Specifying ''display: none'' for a region box causes
378 the region box with that index not to be generated.
379 However, in terms of the indices
380 used for matching ''::nth-region()'' pseudo-elements
381 of later region boxes,
382 it still counts as though it was generated.
383 However, since it is not generated, it does not contain any content.
384 </p>
386 <p class="issue">
387 Would it make more sense to forbid ''display:none''?
388 Or perhaps to forbid 'display', 'position', 'float',
389 and similar (in addition to 'overflow')?
390 </p>
392 <p>
393 To match the model for other pseudo-elements
394 where the pseudo-elements live inside their corresponding element,
395 declarations in ''::nth-region()'' pseudo-elements override
396 declarations in rules without the pseudo-element.
397 The relative priority within such declarations is determined
398 by normal cascading order (see [[!CSS21]]).
399 </p>
401 <p>
402 Styles specified on ''::nth-region()'' pseudo-elements
403 do affect inheritance to content within the <i>region box</i>.
404 In other words, the content within the <i>region box</i> must
405 inherit from the region box's style (i.e., the pseudo-element style)
406 rather than directly from the element.
407 This means that elements split between region boxes may
408 have different styles for different parts of the element.
409 </p>
411 <p class="issue">
412 This inheritance rule allows specifying styles indirectly
413 (by using explicit ''inherit'' or using default inheritance
414 on properties that don't apply to '':first-letter'')
415 that can't be specified directly
416 (based on the rules in the next section).
417 This is a problem.
418 The restrictions that apply to styling inside regions
419 should also apply to inheritance from regions.
420 </p>
422 <p class="issue">
423 TODO: ADD EXAMPLE HERE.
424 </p>
426 <h4 id="style-in-regions">Styling inside regions</h4>
428 <p class="issue">
429 Should this apply to region overflow only,
430 or also to paginated overflow,
431 or even to pagination across pages?
432 </p>
434 <p>
435 The ''::nth-region()'' pseudo-element
436 can also be used to style
437 content inside of a <i>region box</i>.
438 Unlike the ''::first-line'' and ''::first-letter'' pseudo-elements,
439 the ''::nth-region()'' pseudo-element can be applied
440 to parts of the selector other than the subject:
441 in particular, it can match ancestors of the subject.
442 However, the only CSS properties applied
443 by rules with such selectors
444 are those that apply
445 to the ''::first-letter'' pseudo-element.
446 </p>
448 <p>
449 To be more precise,
450 when a rule's selector has ''::nth-region()'' pseudo-elements
451 attached to parts of the selector other than the subject,
452 the declarations in that rule apply to
453 a fragment (or pseudo-element thereof) when:
454 </p>
455 <ol>
456 <li>
457 the declarations are for properties that apply to the
458 ''::first-letter'' pseudo-element,
459 </li>
460 <li>
461 the declarations would apply to
462 that fragment (or pseudo-element thereof)
463 had those ''::nth-region()'' pseudo-elements been removed,
464 with a particular association between
465 each sequence of simple selectors and the element it matched,
466 and
467 </li>
468 <li>
469 for each removed ''::nth-region()'' pseudo-element,
470 the fragment lives within a <i>region box</i>
471 of the element associated in that association
472 with the selector that the pseudo-element was attached to,
473 and whose index matches the pseudo-element.
474 </li>
475 </ol>
477 <p class="issue">
478 TODO: ADD EXAMPLE HERE.
479 </p>
481 <h3 id="max-lines">The 'max-lines' property</h3>
483 <p>
484 Authors may wish to style the opening lines of an element
485 with different styles
486 by putting those opening lines in a separate region.
487 However, since it may be difficult to predict the exact height
488 occupied by those lines
489 in order to restrict the first region to that height,
490 this specification introduces a 'max-lines' property
491 that forces a region to break
492 after a specified number of lines.
493 This forces a break after the given number of lines
494 contained within the element or its descendants,
495 as long as those lines are in the same block formatting context.
496 </p>
498 <table class=propdef>
499 <tr>
500 <th>Name:
501 <td><dfn>max-lines</dfn>
502 <tr>
503 <th><a href="#values">Value</a>:
504 <td>none | <integer>
505 <tr>
506 <th>Initial:
507 <td>none
508 <tr>
509 <th>Applies to:
510 <td>region boxes
511 <tr>
512 <th>Inherited:
513 <td>no
514 <tr>
515 <th>Percentages:
516 <td>N/A
517 <tr>
518 <th>Media:
519 <td>visual
520 <tr>
521 <th>Computed value:
522 <td>specified value
523 <tr>
524 <th>Animatable:
525 <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
526 <tr>
527 <th>Canonical order:
528 <td><abbr title="follows order of property value definition">per grammar</abbr>
529 </table>
531 <dl>
532 <dt>none
533 <dd>
534 <p>
535 Breaks occur only as specified elsewhere.
536 </p>
537 </dd>
539 <dt><integer>
540 <dd>
541 <p>
542 In addition to any breaks specified elsewhere,
543 a break is forced before any line that would exceed
544 the given number of lines
545 being placed inside the element
546 (excluding lines that are in
547 a different block formatting context from
548 the block formatting context to which
549 an unstyled child of the element would belong).
550 </p>
552 <p class="issue">
553 If there are multiple boundaries between this line
554 and the previous, where exactly (in terms of element
555 boundaries) is the break forced?
556 </p>
558 <p>
559 Only positive integers are accepted.
560 Zero or negative integers are a parse error.
561 </p>
562 </dd>
563 </dl>
565 <p class="issue">Should this apply to regions overflow only, or also
566 to pagination?</p>
568 <div class="example">
569 <table class="source-demo-pair"><tr><td><pre><!DOCTYPE HTML>
570 <style>
571 .article {
572 overflow: regions;
573 }
574 .article::first-letter {
575 font-size: 2em;
576 line-height: 0.9;
577 }
578 .article::nth-region(1) {
579 font-size: 1.5em;
580 max-lines: 3;
581 }
582 .article::nth-region(n+2) {
583 /* 2 and up */
584 column-count: 2;
585 }
586 </style>
587 <div class="article">
588 <i>...</i>
589 </div></pre></td><td>
590 <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>
591 <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>
592 <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>
593 </td></tr></table>
594 </div>
596 <h2 id="conformance">
597 Conformance</h2>
599 <h3 id="placement">
600 Module interactions</h3>
602 <p>This module extends the 'overflow'
603 feature defined in [[CSS21]] section 11.1.1. It defines additional
604 overflow handling mechanisms that implementations must implement as
605 described in this module in order to conform to this module.</p>
607 <p>No properties in this module apply to the <code>::first-line</code> or
608 <code>::first-letter</code> pseudo-elements.</p>
610 <h3 id="values">
611 Values</h3>
613 <p>This specification follows the
614 <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
615 definition conventions</a> from [[!CSS21]]. Value types not defined in
616 this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
617 Other CSS modules may expand the definitions of these value types: for
618 example [[CSS3COLOR]], when combined with this module, expands the
619 definition of the <color> value type as used in this specification.</p>
621 <p>In addition to the property-specific values listed in their definitions,
622 all properties defined in this specification also accept the
623 <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
624 keyword as their property value. For readability it has not been repeated
625 explicitly.
628 <h3 id="conventions">
629 Document conventions</h3>
631 <p>Conformance requirements are expressed with a combination of
632 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
633 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
634 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
635 document are to be interpreted as described in RFC 2119.
636 However, for readability, these words do not appear in all uppercase
637 letters in this specification.
639 <p>All of the text of this specification is normative except sections
640 explicitly marked as non-normative, examples, and notes. [[!RFC2119]]</p>
642 <p>Examples in this specification are introduced with the words “for example”
643 or are set apart from the normative text with <code>class="example"</code>,
644 like this:
646 <div class="example">
647 <p>This is an example of an informative example.</p>
648 </div>
650 <p>Informative notes begin with the word “Note” and are set apart from the
651 normative text with <code>class="note"</code>, like this:
653 <p class="note">Note, this is an informative note.</p>
655 <h3 id="conformance-classes">
656 Conformance classes</h3>
658 <p>Conformance to CSS Region Styling Module Level 3
659 is defined for three conformance classes:
660 <dl>
661 <dt><dfn title="style sheet!!as conformance class">style sheet</dfn>
662 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
663 style sheet</a>.
664 <dt><dfn>renderer</dfn></dt>
665 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
666 that interprets the semantics of a style sheet and renders
667 documents that use them.
668 <dt><dfn id="authoring-tool">authoring tool</dfn></dt>
669 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
670 that writes a style sheet.
671 </dl>
673 <p>A style sheet is conformant to CSS Region Styling Module Level 3
674 if all of its statements that use syntax defined in this module are valid
675 according to the generic CSS grammar and the individual grammars of each
676 feature defined in this module.
678 <p>A renderer is conformant to CSS Region Styling Module Level 3
679 if, in addition to interpreting the style sheet as defined by the
680 appropriate specifications, it supports all the features defined
681 by CSS Region Styling Module Level 3 by parsing them correctly
682 and rendering the document accordingly. However, the inability of a
683 UA to correctly render a document due to limitations of the device
684 does not make the UA non-conformant. (For example, a UA is not
685 required to render color on a monochrome monitor.)
687 <p>An authoring tool is conformant to CSS Region Styling Module Level 3
688 if it writes style sheets that are syntactically correct according to the
689 generic CSS grammar and the individual grammars of each feature in
690 this module, and meet all other conformance requirements of style sheets
691 as described in this module.
693 <h3 id="partial">
694 Partial implementations</h3>
696 <p>So that authors can exploit the forward-compatible parsing rules to
697 assign fallback values, CSS renderers <strong>must</strong>
698 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
699 as appropriate</a>) any at-rules, properties, property values, keywords,
700 and other syntactic constructs for which they have no usable level of
701 support. In particular, user agents <strong>must not</strong> selectively
702 ignore unsupported component values and honor supported values in a single
703 multi-value property declaration: if any value is considered invalid
704 (as unsupported values must be), CSS requires that the entire declaration
705 be ignored.</p>
707 <h3 id="experimental">
708 Experimental implementations</h3>
710 <p>To avoid clashes with future CSS features, the CSS2.1 specification
711 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
712 syntax</a> for proprietary and experimental extensions to CSS.
714 <p>Prior to a specification reaching the Candidate Recommendation stage
715 in the W3C process, all implementations of a CSS feature are considered
716 experimental. The CSS Working Group recommends that implementations
717 use a vendor-prefixed syntax for such features, including those in
718 W3C Working Drafts. This avoids incompatibilities with future changes
719 in the draft.
720 </p>
722 <h3 id="testing">
723 Non-experimental implementations</h3>
725 <p>Once a specification reaches the Candidate Recommendation stage,
726 non-experimental implementations are possible, and implementors should
727 release an unprefixed implementation of any CR-level feature they
728 can demonstrate to be correctly implemented according to spec.
730 <p>To establish and maintain the interoperability of CSS across
731 implementations, the CSS Working Group requests that non-experimental
732 CSS renderers submit an implementation report (and, if necessary, the
733 testcases used for that implementation report) to the W3C before
734 releasing an unprefixed implementation of any CSS features. Testcases
735 submitted to W3C are subject to review and correction by the CSS
736 Working Group.
738 <p>Further information on submitting testcases and implementation reports
739 can be found from on the CSS Working Group's website at
740 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
741 Questions should be directed to the
742 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
743 mailing list.
745 <h3 id="cr-exit-criteria">
746 CR exit criteria</h3>
748 <p class=issue>[Change or remove the following CR exit criteria if
749 the spec is not a module, but, e.g., a Note or a profile. This text was <a
750 href="http://www.w3.org/Style/CSS/Tracker/actions/44"> decided on 2008-06-04.</a>]</p>
752 <p>
753 For this specification to be advanced to Proposed Recommendation,
754 there must be at least two independent, interoperable implementations
755 of each feature. Each feature may be implemented by a different set of
756 products, there is no requirement that all features be implemented by
757 a single product. For the purposes of this criterion, we define the
758 following terms:
760 <dl>
761 <dt>independent <dd>each implementation must be developed by a
762 different party and cannot share, reuse, or derive from code
763 used by another qualifying implementation. Sections of code that
764 have no bearing on the implementation of this specification are
765 exempt from this requirement.
767 <dt>interoperable <dd>passing the respective test case(s) in the
768 official CSS test suite, or, if the implementation is not a Web
769 browser, an equivalent test. Every relevant test in the test
770 suite should have an equivalent test created if such a user
771 agent (UA) is to be used to claim interoperability. In addition
772 if such a UA is to be used to claim interoperability, then there
773 must one or more additional UAs which can also pass those
774 equivalent tests in the same way for the purpose of
775 interoperability. The equivalent tests must be made publicly
776 available for the purposes of peer review.
778 <dt>implementation <dd>a user agent which:
780 <ol class=inline>
781 <li>implements the specification.
783 <li>is available to the general public. The implementation may
784 be a shipping product or other publicly available version
785 (i.e., beta version, preview release, or “nightly build”).
786 Non-shipping product releases must have implemented the
787 feature(s) for a period of at least one month in order to
788 demonstrate stability.
790 <li>is not experimental (i.e., a version specifically designed
791 to pass the test suite and is not intended for normal usage
792 going forward).
793 </ol>
794 </dl>
796 <p>The specification will remain Candidate Recommendation for at least
797 six months.
799 <h2 class=no-num id="acknowledgments">
800 Acknowledgments</h2>
802 <p>
803 Thanks especially to the feedback from
804 Håkon Wium Lie,
805 Florian Rivoal,
806 Alan Stearns,
807 and all the rest of the
808 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
809 </p>
811 <h2 class=no-num id="references">
812 References</h2>
814 <h3 class="no-num" id="normative-references">
815 Normative references</h3>
816 <!--normative-->
818 <h3 class="no-num" id="other-references">
819 Other references</h3>
820 <!--informative-->
822 <h2 class="no-num" id="index">
823 Index</h2>
824 <!--index-->
826 <h2 class="no-num" id="property-index">
827 Property index</h2>
828 <!-- properties -->
830 </body>
831 </html>
832 <!-- Keep this comment at the end of the file
833 Local variables:
834 mode: sgml
835 sgml-declaration:"~/SGML/HTML4.decl"
836 sgml-default-doctype-name:"html"
837 sgml-minimize-attributes:t
838 sgml-nofill-elements:("pre" "style" "br")
839 sgml-live-element-indicator:t
840 sgml-omittag:nil
841 sgml-shorttag:nil
842 sgml-namecase-general:t
843 sgml-general-insert-case:lower
844 sgml-always-quote-attributes:t
845 sgml-indent-step:nil
846 sgml-indent-data:t
847 sgml-parent-document:nil
848 sgml-exposed-tags:nil
849 sgml-local-catalogs:nil
850 sgml-local-ecat-files:nil
851 End:
852 -->
