css-overflow/Overview.src.html

Mon, 21 Apr 2014 03:57:26 +0900

author
Koji Ishii <kojiishi@gluesoft.co.jp>
date
Mon, 21 Apr 2014 03:57:26 +0900
changeset 13781
739abfcf7fd0
parent 9966
ecc3593f6bc6
child 14821
db327947a378
permissions
-rw-r--r--

[css-text] issues-lc-2013 updated up to 63

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

mercurial