css-overflow/Overview.html@02a27e98e286
css-overflow/Overview.html
Sun, 31 Jan 2016 18:33:44 -0800
- author
- Peter Linss <[email protected]>
- date
- Sun, 31 Jan 2016 18:33:44 -0800
- changeset 16999
- 02a27e98e286
- parent 15804
- 6aa19556cbea
- child 17019
- bab8c985fbe9
- permissions
- -rw-r--r--
change overflow level 4 to actually say level 4
1 <!doctype html>
2 <html lang="en">
3 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
8 <title>CSS Overflow Module Level 4</title>
11 <meta content="exploring" name="csswg-work-status">
14 <meta content="ED" name="w3c-status">
17 <link href="../default.css" rel="stylesheet" type="text/css">
20 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
23 <style>
24 body {
25 background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white;
26 background-attachment: fixed;
27 color: black;
28 font-family: sans-serif;
29 margin: 0 auto;
30 max-width: 50em;
31 padding: 2em 1em 2em 70px;
32 }
33 :link { color: #00C; background: transparent }
34 :visited { color: #609; background: transparent }
35 a[href]:active { color: #C00; background: transparent }
36 a[href]:hover { background: #ffa }
38 a[href] img { border-style: none }
40 h1, h2, h3, h4, h5, h6 { text-align: left }
41 h1, h2, h3 { color: #005A9C; }
42 h1 { font: 170% sans-serif }
43 h2 { font: 140% sans-serif }
44 h3 { font: 120% sans-serif }
45 h4 { font: bold 100% sans-serif }
46 h5 { font: italic 100% sans-serif }
47 h6 { font: small-caps 100% sans-serif }
49 .hide { display: none }
51 div.head { margin-bottom: 1em }
52 div.head h1 { margin-top: 2em; clear: both }
53 div.head table { margin-left: 2em; margin-top: 2em }
55 p.copyright { font-size: small }
56 p.copyright small { font-size: small }
58 pre { margin-left: 2em }
59 dt { font-weight: bold }
61 ul.toc, ol.toc {
62 list-style: none;
63 }
64 </style>
67 <meta content="Bikeshed 1.0.0" name="generator">
68 <style>
69 table.source-demo-pair {
70 width: 100%;
71 }
73 .in-cards-demo {
74 width: 13em;
75 height: 8em;
77 padding: 4px;
78 border: medium solid blue;
79 margin: 6px;
81 font: medium/1.3 Times New Roman, Times, serif;
82 white-space: nowrap;
83 }
85 .bouncy-columns-demo {
86 width: 6em;
87 height: 10em;
88 float: left;
89 margin: 1em;
90 font: medium/1.25 Times New Roman, Times, serif;
91 white-space: nowrap;
92 }
93 .bouncy-columns-demo.one {
94 background: aqua; color: black;
95 transform: rotate(-3deg);
96 }
97 .bouncy-columns-demo.two {
98 background: yellow; color: black;
99 transform: rotate(3deg);
100 }
102 .article-font-inherit-demo {
103 font: 1em/1.25 Times New Roman, Times, serif;
104 white-space: nowrap;
105 }
106 .article-font-inherit-demo.one {
107 width: 12em;
108 font-size: 1.5em;
109 margin-bottom: 1em;
110 height: 4em;
111 }
112 .article-font-inherit-demo.two {
113 width: 11em;
114 margin-left: 5em;
115 margin-right: 2em;
116 }
118 .dark-columns-demo {
119 width: 6em;
120 height: 10em;
121 float: left;
122 margin-right: 1em;
123 font: medium/1.25 Times New Roman, Times, serif;
124 white-space: nowrap;
125 }
126 .dark-columns-demo.one {
127 background: aqua; color: black;
128 }
129 .dark-columns-demo.one :link {
130 color: blue;
131 }
132 .dark-columns-demo.one :visited {
133 color: purple;
134 }
135 .dark-columns-demo.two {
136 background: navy; color: white;
137 }
138 .dark-columns-demo.two :link {
139 color: aqua;
140 }
141 .dark-columns-demo.two :visited {
142 color: fuchsia;
143 }
145 .article-max-lines-demo {
146 font: 1em/1.25 Times New Roman, Times, serif;
147 white-space: nowrap;
148 }
149 .article-max-lines-demo.one::first-letter {
150 font-size: 2em;
151 line-height: 0.9;
152 }
153 .article-max-lines-demo.one {
154 font-size: 1.5em;
155 width: 16em;
156 }
157 .article-max-lines-demo.two {
158 width: 11.5em;
159 float: left; margin-right: 1em;
160 }
161 .article-max-lines-demo.three {
162 width: 11.5em;
163 float: left;
164 }
165 </style>
169 <style>.highlight .hll { background-color: #ffffcc }
170 .highlight { background: #ffffff; }
171 .highlight .c { color: #708090 } /* Comment */
172 .highlight .k { color: #990055 } /* Keyword */
173 .highlight .l { color: #669900 } /* Literal */
174 .highlight .n { color: #0077aa } /* Name */
175 .highlight .o { color: #999999 } /* Operator */
176 .highlight .p { color: #999999 } /* Punctuation */
177 .highlight .cm { color: #708090 } /* Comment.Multiline */
178 .highlight .cp { color: #708090 } /* Comment.Preproc */
179 .highlight .c1 { color: #708090 } /* Comment.Single */
180 .highlight .cs { color: #708090 } /* Comment.Special */
181 .highlight .kc { color: #990055 } /* Keyword.Constant */
182 .highlight .kd { color: #990055 } /* Keyword.Declaration */
183 .highlight .kn { color: #990055 } /* Keyword.Namespace */
184 .highlight .kp { color: #990055 } /* Keyword.Pseudo */
185 .highlight .kr { color: #990055 } /* Keyword.Reserved */
186 .highlight .kt { color: #990055 } /* Keyword.Type */
187 .highlight .ld { color: #669900 } /* Literal.Date */
188 .highlight .m { color: #990055 } /* Literal.Number */
189 .highlight .s { color: #669900 } /* Literal.String */
190 .highlight .na { color: #0077aa } /* Name.Attribute */
191 .highlight .nc { color: #0077aa } /* Name.Class */
192 .highlight .no { color: #0077aa } /* Name.Constant */
193 .highlight .nd { color: #0077aa } /* Name.Decorator */
194 .highlight .ni { color: #0077aa } /* Name.Entity */
195 .highlight .ne { color: #0077aa } /* Name.Exception */
196 .highlight .nf { color: #0077aa } /* Name.Function */
197 .highlight .nl { color: #0077aa } /* Name.Label */
198 .highlight .nn { color: #0077aa } /* Name.Namespace */
199 .highlight .py { color: #0077aa } /* Name.Property */
200 .highlight .nt { color: #0077aa } /* Name.Tag */
201 .highlight .nv { color: #0077aa } /* Name.Variable */
202 .highlight .ow { color: #999999 } /* Operator.Word */
203 .highlight .mb { color: #990055 } /* Literal.Number.Bin */
204 .highlight .mf { color: #990055 } /* Literal.Number.Float */
205 .highlight .mh { color: #990055 } /* Literal.Number.Hex */
206 .highlight .mi { color: #990055 } /* Literal.Number.Integer */
207 .highlight .mo { color: #990055 } /* Literal.Number.Oct */
208 .highlight .sb { color: #669900 } /* Literal.String.Backtick */
209 .highlight .sc { color: #669900 } /* Literal.String.Char */
210 .highlight .sd { color: #669900 } /* Literal.String.Doc */
211 .highlight .s2 { color: #669900 } /* Literal.String.Double */
212 .highlight .se { color: #669900 } /* Literal.String.Escape */
213 .highlight .sh { color: #669900 } /* Literal.String.Heredoc */
214 .highlight .si { color: #669900 } /* Literal.String.Interpol */
215 .highlight .sx { color: #669900 } /* Literal.String.Other */
216 .highlight .sr { color: #669900 } /* Literal.String.Regex */
217 .highlight .s1 { color: #669900 } /* Literal.String.Single */
218 .highlight .ss { color: #669900 } /* Literal.String.Symbol */
219 .highlight .vc { color: #0077aa } /* Name.Variable.Class */
220 .highlight .vg { color: #0077aa } /* Name.Variable.Global */
221 .highlight .vi { color: #0077aa } /* Name.Variable.Instance */
222 .highlight .il { color: #990055 } /* Literal.Number.Integer.Long */
223 .highlight { background: hsl(24, 20%, 95%); }
224 pre.highlight { padding: 1em; margin: .5em 0; overflow: auto; }
225 :not(pre).highlight { padding: .1em; border-radius: .3em; }
226 </style>
227 </head>
230 <body class="h-entry">
232 <div class="head">
234 <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/">
235 <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72">
236 </a>
237 </p>
239 <h1 class="p-name no-ref" id="title">CSS Overflow Module Level 4</h1>
241 <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft,
242 <time class="dt-updated" datetime="2015-07-01">1 July 2015</time></span></h2>
244 <div data-fill-with="spec-metadata">
245 <dl>
246 <dt>This version:
247 <dd><a class="u-url" href="https://draftd.csswg.org/css-overflow-4/">https://drafts.csswg.org/css-overflow-4/</a>
248 <dt>Latest version:
249 <dd><a href="https://www.w3.org/TR/css-overflow-4/">http://www.w3.org/TR/css-overflow-4/</a>
250 <dt>Previous Versions:
251 <dd><a href="https://www.w3.org/TR/css-overflow-3/" rel="previous">https://www.w3.org/TR/css-overflow-3/</a>
252 <dt>Feedback:
253 <dd><span><a href="mailto:[email protected]?subject=%5Bcss-overflow%5D%20YOUR%20TOPIC%20HERE">[email protected]</a> with subject line “<kbd>[css-overflow] <var>… message topic …</var></kbd>†(<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span>
254 <dt>Issue Tracking:
255 <dd><a href="https://github.com/w3c/csswg-drafts/issues/">GitHub</a>
256 <dd><a href="#issues-index">Inline In Spec</a>
257 <dt class="editor">Editors:
258 <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://dbaron.org/">L. David Baron</a> (<span class="p-org org">Mozilla</span>)
259 <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://florian.rivoal.net">Florian Rivoal</a> (<span class="p-org org">Invited Expert</span>) <a class="u-email email" href="mailto:[email protected]">[email protected]</a>
260 <dt>Change Log:
261 <dd><span><a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.bs">from 27 January 2015 to the present</a></span>
262 <dd><span><a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.src.html">from 28 March 2013 to 27 January 2015</a></span>
263 <dd><span><a href="https://hg.csswg.org/drafts/log/tip/css3-overflow/Overview.src.html">from 31 July 2012 to 27 March 2013</a></span>
264 </dl>
265 </div>
267 <div data-fill-with="warning"></div>
269 <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2015 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.
270 </p>
272 <hr title="Separator for header">
273 </div>
276 <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
278 <div class="p-summary" data-fill-with="abstract">
279 <p>This module contains the features of CSS relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). In interactive media, it describes features that allow the overflow from a fixed size container to be handled by pagination (displaying one page at a time). It also describes features, applying to all visual media, that allow the contents of an element to be spread across multiple fragments, allowing the contents to flow across multiple regions or to have different styles for different fragments.</p>
281 <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
282 (such as HTML and XML)
283 on screen, on paper, in speech, etc.</div>
286 <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
288 <div data-fill-with="status">
289 <p>
290 This is a public copy of the editors’ draft.
291 It is provided for discussion only and may change at any moment.
292 Its publication here does not imply endorsement of its contents by W3C.
293 Don’t cite this document other than as work in progress.
295 </p>
296 <p>
297 The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list
298 <a href="mailto:[email protected]?Subject=%5Bcss-overflow%5D%20PUT%20SUBJECT%20HERE">[email protected]</a>
299 (see <a href="http://www.w3.org/Mail/Request">instructions</a>)
300 is preferred for discussion of this specification.
301 When sending e-mail,
302 please put the text “css-overflow†in the subject,
303 preferably like this:
304 “[css-overflow] <em>…summary of comment…</em>â€
306 </p>
307 <p>
308 This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>
309 (part of the <a href="http://www.w3.org/Style/">Style Activity</a>).
311 </p>
312 <p>
313 This document was produced by a group operating under
314 the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
315 W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a>
316 made in connection with the deliverables of the group;
317 that page also includes instructions for disclosing a patent.
318 An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a>
319 must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.
321 </p>
322 <p>
323 This document is governed by the <a href="http://www.w3.org/2014/Process-20140801/" id="w3c_process_revision">1 August 2014 W3C Process Document</a>.
325 </p>
326 <p>
328 </p></div>
330 <div data-fill-with="at-risk"></div>
333 <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="content">Table of Contents</span></h2>
335 <div data-fill-with="table-of-contents" role="navigation">
336 <ul class="toc" role="directory">
337 <li><a href="#intro"><span class="secno">1</span> <span class="content">
338 Introduction</span></a>
339 <li><a href="#overflow-concepts"><span class="secno">2</span> <span class="content">Types of overflow</span></a>
340 <ul class="toc">
341 <li><a href="#ink-overflow"><span class="secno">2.1</span> <span class="content">Ink overflow</span></a>
342 <li><a href="#scrollable-overflow"><span class="secno">2.2</span> <span class="content">Scrollable overflow</span></a>
343 <li><a href="#border-box-overflow"><span class="secno">2.3</span> <span class="content">Border box overflow</span></a>
344 </ul>
345 <li><a href="#overflow-properties"><span class="secno">3</span> <span class="content">Overflow properties</span></a>
346 <li><a href="#fragmentation"><span class="secno">4</span> <span class="content">Fragmentation of overflow</span></a>
347 <li><a href="#paginated-overflow"><span class="secno">5</span> <span class="content">Paginated overflow</span></a>
348 <li><a href="#fragment-overflow"><span class="secno">6</span> <span class="content">Fragment overflow</span></a>
349 <ul class="toc">
350 <li><a href="#fragment-styling"><span class="secno">6.1</span> <span class="content">Fragment styling</span></a>
351 <ul class="toc">
352 <li><a href="#fragment-pseudo-element"><span class="secno">6.1.1</span> <span class="content">The ::nth-fragment() pseudo-element</span></a>
353 <li><a href="#style-of-fragments"><span class="secno">6.1.2</span> <span class="content">Styling of fragments</span></a>
354 <li><a href="#style-in-fragments"><span class="secno">6.1.3</span> <span class="content">Styling inside fragments</span></a>
355 </ul>
356 <li><a href="#max-lines"><span class="secno">6.2</span> <span class="content">The <span class="property">max-lines</span> property</span></a>
357 </ul>
358 <li><a href="#static-media"><span class="secno">7</span> <span class="content">Overflow in static media</span></a>
359 <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">
360 Acknowledgments</span></a>
361 <li><a href="#conformance"><span class="secno"></span> <span class="content">
362 Conformance</span></a>
363 <ul class="toc">
364 <li><a href="#conventions"><span class="secno"></span> <span class="content">
365 Document conventions</span></a>
366 <li><a href="#conformance-classes"><span class="secno"></span> <span class="content">
367 Conformance classes</span></a>
368 <li><a href="#partial"><span class="secno"></span> <span class="content">
369 Partial implementations</span></a>
370 <li><a href="#experimental"><span class="secno"></span> <span class="content">
371 Experimental implementations</span></a>
372 <li><a href="#testing"><span class="secno"></span> <span class="content">
373 Non-experimental implementations</span></a>
374 </ul>
375 <li><a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
376 <ul class="toc">
377 <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
378 <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
379 </ul>
380 <li><a href="#references"><span class="secno"></span> <span class="content">References</span></a>
381 <ul class="toc">
382 <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
383 <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
384 </ul>
385 <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
386 <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
387 </ul></div>
389 <main>
401 <p>
402 </p>
405 <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">
406 Introduction</span><a class="self-link" href="#intro"></a></h2>
409 <p>
410 In CSS Level 1 <a data-link-type="biblio" href="#biblio-css1">[CSS1]</a>, placing more content than would fit
411 inside an element with a specified size
412 was generally an authoring error.
413 Doing so caused the content to extend
414 outside the bounds of the element,
415 which would likely cause
416 that content to overlap with other elements.
417 </p>
420 <p>
421 CSS Level 2 <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> introduced the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property,
422 which allows authors to have overflow be handled by scrolling,
423 which means it is no longer an authoring error.
424 It also allows authors to specify
425 that overflow is handled by clipping,
426 which makes sense when the author’s intent
427 is that the content not be shown.
428 </p>
431 <p>
432 However, scrolling is not the only way
433 to present large amounts of content,
434 and may even not be the optimal way.
435 After all, the codex replaced the scroll
436 as the common format for large written works
437 because of its advantages.
438 </p>
441 <p>
442 This specification introduces
443 a mechanism for Web pages to specify
444 that an element of a page should handle overflow
445 through pagination rather than through scrolling.
446 </p>
449 <p>
450 This specification also extends the concept of overflow
451 in another direction.
452 Instead of requiring that authors specify a single area
453 into which the content of an element must flow,
454 this specification allows authors to specify multiple fragments,
455 each with their own dimensions and styles,
456 so that the content of the element can flow from one to the next,
457 using as many as needed to place the content without overflowing.
458 </p>
461 <p>
462 In both of these cases, implementations must
463 break the content in the block-progression dimension.
464 Implementations must do this is described
465 in the CSS Fragmentation Module <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a>.
466 </p>
469 <h2 class="heading settled" data-level="2" id="overflow-concepts"><span class="secno">2. </span><span class="content">Types of overflow</span><a class="self-link" href="#overflow-concepts"></a></h2>
472 <p>
473 CSS uses the term <dfn data-dfn-type="dfn" data-noexport="" id="overflow">overflow<a class="self-link" href="#overflow"></a></dfn> to describe
474 the contents of a box
475 that extend outside that one of that box’s edges
476 (i.e., its <i>content edge</i>, <i>padding edge</i>,
477 <i>border edge</i>, or <i>margin edge</i>).
478 The overflow might be described as the elements or features
479 that cause this overflow,
480 the non-rectangular region occupied by these features,
481 or, more commonly,
482 as the minimal rectangle that bounds that region.
483 A box’s overflow is computed based on the boxes and styles
484 of the box and of all its descendants whose containing block chain
485 <span class="issue" id="issue-18c1c008"><a class="self-link" href="#issue-18c1c008"></a>undefined term?</span>
486 includes the box.
487 </p>
490 <p>
491 In most cases, any of these types of overflow
492 can be computed for any box
493 from the bounds and properties of that box,
494 and from the overflow (of that type)
495 of each of its children.
496 However, this is not always the case; for example,
497 when <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> is used on
498 some of the children, their descendants with
499 <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> must also be examined.
500 </p>
503 <h3 class="heading settled" data-level="2.1" id="ink-overflow"><span class="secno">2.1. </span><span class="content">Ink overflow</span><a class="self-link" href="#ink-overflow"></a></h3>
506 <p>
507 The <dfn data-dfn-type="dfn" data-noexport="" id="ink-overflow0">ink overflow<a class="self-link" href="#ink-overflow0"></a></dfn> of a box
508 is the part of that box and its contents that
509 creates a visual effect outside of
510 the box’s border box.
511 </p>
514 <p>
515 Since some effects in CSS (for example, the blurs in
516 <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-shadow">text-shadow</a> <a data-link-type="biblio" href="#biblio-css3text">[CSS3TEXT]</a> and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow">box-shadow</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>)
517 do not define what visual extent they cover, the extent
518 of the <a data-link-type="dfn" href="#ink-overflow0">ink overflow</a> is undefined.
519 </p>
522 <p class="issue" id="issue-1baddb1e"><a class="self-link" href="#issue-1baddb1e"></a>
523 Should we try to define it at all and just leave pieces undefined?
524 </p>
527 <p>
528 The <dfn data-dfn-type="dfn" data-noexport="" id="ink-overflow-region">ink overflow region<a class="self-link" href="#ink-overflow-region"></a></dfn> is the non-rectangular region
529 occupied by the <a data-link-type="dfn" href="#ink-overflow0">ink overflow</a>, and the
530 <dfn data-dfn-type="dfn" data-noexport="" id="ink-overflow-rectangle">ink overflow rectangle<a class="self-link" href="#ink-overflow-rectangle"></a></dfn> is
531 the minimal rectangle whose axis is aligned to the box’s axes
532 and contains the <a data-link-type="dfn" href="#ink-overflow-region">ink overflow region</a>.
533 Note that the <a data-link-type="dfn" href="#ink-overflow-rectangle">ink overflow rectangle</a> is a rectangle
534 in the box’s coordinate system, but might be non-rectangular
535 in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>.
536 </p>
539 <h3 class="heading settled" data-level="2.2" id="scrollable-overflow"><span class="secno">2.2. </span><span class="content">Scrollable overflow</span><a class="self-link" href="#scrollable-overflow"></a></h3>
542 <p>
543 The <dfn data-dfn-type="dfn" data-noexport="" id="scrollable-overflow0">scrollable overflow<a class="self-link" href="#scrollable-overflow0"></a></dfn> of a box is the
544 set of things extending outside of that box’s padding edge
545 for which a scrolling mechanism needs to be provided.
546 </p>
549 <p class="issue" id="issue-6b232bb5"><a class="self-link" href="#issue-6b232bb5"></a>
550 The following definition should be rewritten to use
551 the concept of <a href="http://dev.w3.org/csswg/css-transforms/#3d-rendering-context">3D rendering context</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>
552 and related terms,
553 particularly once those concepts stabilize following changes
554 proposed in the CSS WG meeting on the morning of 2014-01-28.
555 </p>
558 <p>
559 Given the following definitions
560 <span class="issue" id="issue-101a26b2"><a class="self-link" href="#issue-101a26b2"></a>which belong in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></span>:
561 </p>
564 <dl>
566 <dt><dfn data-dfn-type="dfn" data-noexport="" id="3d_preserving-child">3d-preserving child<a class="self-link" href="#3d_preserving-child"></a></dfn>
569 <dd>
570 A child box B of a containing block C is a 3d-preserving
571 child if it has <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a>
572 and the user-agent is not required to flatten it
573 based on the <a href="http://www.w3.org/TR/css3-transforms/#transform-style-property">requirements</a> in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>.
576 <dt><dfn data-dfn-type="dfn" data-noexport="" id="non_3d_preserving-child">non-3d-preserving child<a class="self-link" href="#non_3d_preserving-child"></a></dfn>
579 <dd>
580 A child C of a box P is a non-3d-preserving-child if
581 it is not a <a data-link-type="dfn" href="#3d_preserving-child">3d-preserving child</a>.
585 <dt><dfn data-dfn-type="dfn" data-noexport="" id="3d_preserving-descendant">3d-preserving descendant<a class="self-link" href="#3d_preserving-descendant"></a></dfn>
588 <dd>
589 Box D is a 3d-preserving descendant of box A if A is
590 an ancestor of D, and D and all of the boxes (if any)
591 in the containing block chain from D to A
592 are <a data-link-type="dfn" href="#3d_preserving-child">3d-preserving child</a> boxes.
596 </dl>
599 <p>The scrollable overflow of a box is the union of the following things,
600 all adjusted for transforms <span class="issue" id="issue-1b139c15"><a class="self-link" href="#issue-1b139c15"></a>undefined concept!</span> into the box’s coordinate space:</p>
603 <ul>
605 <li>
606 for the box and all of its <a data-link-type="dfn" href="#3d_preserving-descendant">3d-preserving descendant</a> boxes:
608 <ul>
610 <li>the box’s own padding edge (for the box itself) or border edge (for <a data-link-type="dfn" href="#3d_preserving-descendant">3d-preserving descendant</a> boxes)
613 <li>the bounds <span class="issue" id="issue-2d1dc4f9"><a class="self-link" href="#issue-2d1dc4f9"></a>undefined term!</span> of any text directly in the box
616 <li><span class="issue" id="issue-75780f3f"><a class="self-link" href="#issue-75780f3f"></a>MORE HERE!</span>
618 </ul>
621 <li>
622 for all the <a data-link-type="dfn" href="#non_3d_preserving-child">non-3d-preserving child</a> boxes of the
623 box and its <a data-link-type="dfn" href="#3d_preserving-descendant">3d-preserving descendant</a> boxes,
624 the scrollable overflow of the box
628 </ul>
631 <p class="issue" id="issue-e889eac0"><a class="self-link" href="#issue-e889eac0"></a>
632 I wrote this definition off the top of my head,
633 so it can’t possibly be right.
634 It’s missing tons of pieces!
635 </p>
638 <p class="issue" id="issue-521d48c7"><a class="self-link" href="#issue-521d48c7"></a>
639 The handling of preserve-3d subtrees here is probably wrong;
640 the elements should probably count
641 only towards the overflow of the element that flattens them.
642 </p>
645 <p>
646 The <dfn data-dfn-type="dfn" data-noexport="" id="scrollable-overflow-region">scrollable overflow region<a class="self-link" href="#scrollable-overflow-region"></a></dfn> is the non-rectangular region
647 occupied by the <a data-link-type="dfn" href="#scrollable-overflow0">scrollable overflow</a>, and the
648 <dfn data-dfn-type="dfn" data-noexport="" id="scrollable-overflow-rectangle">scrollable overflow rectangle<a class="self-link" href="#scrollable-overflow-rectangle"></a></dfn> is
649 the minimal rectangle whose axis is aligned to the box’s axes
650 and contains the <a data-link-type="dfn" href="#scrollable-overflow-region">scrollable overflow region</a>.
651 Note that the <a data-link-type="dfn" href="#scrollable-overflow-rectangle">scrollable overflow rectangle</a> is a rectangle
652 in the box’s coordinate system, but might be non-rectangular
653 in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>.
654 </p>
657 <h3 class="heading settled" data-level="2.3" id="border-box-overflow"><span class="secno">2.3. </span><span class="content">Border box overflow</span><a class="self-link" href="#border-box-overflow"></a></h3>
660 <p class="issue" id="issue-3930f393"><a class="self-link" href="#issue-3930f393"></a>
661 This concept has been proposed for some uses, such as for
662 determining what the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-ui-3/#propdef-outline">outline</a> property goes around, and
663 as the basis of a coordinate system for specifying clips and masks,
664 but it’s not clear if it’s needed.
665 </p>
668 <p>
669 The <dfn data-dfn-type="dfn" data-noexport="" id="border_box-overflow">border-box overflow<a class="self-link" href="#border_box-overflow"></a></dfn> of a box is the
670 union of the box’s border edge and the border edges of
671 the box’s descendants.</p>
673 <p></p>
676 <p class="issue" id="issue-42ea3c29"><a class="self-link" href="#issue-42ea3c29"></a>
677 If needed, define more formally, as for scrollable overflow above.
678 (Maybe even share the definitions in an appropriate way!)
679 </p>
682 <p>
683 The <dfn data-dfn-type="dfn" data-noexport="" id="border_box-overflow-region">border-box overflow region<a class="self-link" href="#border_box-overflow-region"></a></dfn> is the non-rectangular region
684 occupied by the <a data-link-type="dfn" href="#border_box-overflow">border-box overflow</a>, and the
685 <dfn data-dfn-type="dfn" data-noexport="" id="border_box-overflow-rectangle">border-box overflow rectangle<a class="self-link" href="#border_box-overflow-rectangle"></a></dfn> is
686 the minimal rectangle whose axis is aligned to the box’s axes
687 and contains the <a data-link-type="dfn" href="#border_box-overflow-region">border-box overflow region</a>.
688 Note that the <a data-link-type="dfn" href="#border_box-overflow-rectangle">border-box overflow rectangle</a> is a rectangle
689 in the box’s coordinate system, but might be non-rectangular
690 in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>.
691 </p>
694 <h2 class="heading settled" data-level="3" id="overflow-properties"><span class="secno">3. </span><span class="content">Overflow properties</span><a class="self-link" href="#overflow-properties"></a></h2>
697 <p>
698 The <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> property specifies
699 the handling of overflow in the horizontal direction
700 (i.e., overflow from the left and right sides of the box),
701 and the <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> property specifies the handling
702 of overflow in the vertical direction
703 (i.e., overflow from the top and bottom sides of the box)
704 </p>
707 <table class="definition propdef" data-link-for-hint="overflow-x">
708 <tbody>
709 <tr>
710 <th>Name:
711 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-overflow-x">overflow-x<a class="self-link" href="#propdef-overflow-x"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-overflow-y">overflow-y<a class="self-link" href="#propdef-overflow-y"></a></dfn>
712 <tr class="value">
713 <th>Value:
714 <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-scroll">scroll</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>
715 <tr>
716 <th>Initial:
717 <td><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>
718 <tr>
719 <th>Applies to:
720 <td>block containers <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>, flex containers <a data-link-type="biblio" href="#biblio-css3-flexbox">[CSS3-FLEXBOX]</a>, and grid containers <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a>
721 <tr>
722 <th>Inherited:
723 <td>no
724 <tr>
725 <th>Percentages:
726 <td>N/A
727 <tr>
728 <th>Media:
729 <td>visual
730 <tr>
731 <th>Computed value:
732 <td>see below
733 <tr>
734 <th>Animatable:
735 <td>no
736 <tr>
737 <th>Canonical order:
738 <td><abbr title="follows order of property value definition">per grammar</abbr></table>
741 <p>
742 The <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property is a shorthand property
743 that sets the specified values of both <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a>
744 to the value specified for <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a>.
745 </p>
748 <table class="definition propdef" data-link-for-hint="overflow">
749 <tbody>
750 <tr>
751 <th>Name:
752 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-overflow">overflow<a class="self-link" href="#propdef-overflow"></a></dfn>
753 <tr class="value">
754 <th>Value:
755 <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-scroll">scroll</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>
756 <tr>
757 <th>Initial:
758 <td>see individual properties
759 <tr>
760 <th>Applies to:
761 <td>block containers <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>, flex containers <a data-link-type="biblio" href="#biblio-css3-flexbox">[CSS3-FLEXBOX]</a>, and grid containers <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a>
762 <tr>
763 <th>Inherited:
764 <td>no
765 <tr>
766 <th>Percentages:
767 <td>N/A
768 <tr>
769 <th>Media:
770 <td>visual
771 <tr>
772 <th>Computed value:
773 <td>see individual properties
774 <tr>
775 <th>Animatable:
776 <td>no
777 <tr>
778 <th>Canonical order:
779 <td><abbr title="follows order of property value definition">per grammar</abbr></table>
782 <div id="overflow-computed-values">
784 <p>The computed values of <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a>
785 are determined from the cascaded values <a data-link-type="biblio" href="#biblio-css3cascade">[CSS3CASCADE]</a>
786 based on the following rules:</p>
790 <ol>
792 <li>
793 If one cascaded values is <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>
794 and the other is not,
795 then computed values are the cascaded values
796 with <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> changed to <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>.
800 <li>
801 Otherwise, if both cascaded values are <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>
802 and the computed value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-containment/#propdef-contain">contain</a> is
803 one that activates <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-containment/#paint-containment">paint containment</a>
804 (e.g. <span class="css">contain:strict</span>
805 or <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-containment/#propdef-contain">contain: paint</a>
806 or <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-containment/#propdef-contain">contain: layout paint</a>…),
807 then the computed values of both <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a>
808 are changed to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>.
811 <li>
812 Otherwise, the computed values are as specified.
816 </ol>
819 </div>
822 <p>The values of these properties are:</p>
825 <dl>
827 <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-visible">visible<a class="self-link" href="#valdef-overflow-visible"></a></dfn>
829 <dd>
830 There is no special handling of overflow, that is, it
831 may be rendered outside the block container.
835 <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-hidden">hidden<a class="self-link" href="#valdef-overflow-hidden"></a></dfn>
837 <dd>This value indicates that
838 the content is clipped and that no scrolling user interface should be provided by the UA
839 to view the content outside the clipping region.
840 However, the content may still be scrolled programatically,
841 for example using the mechanisms defined in <a data-link-type="biblio" href="#biblio-cssom-view">[CSSOM-VIEW]</a>.
843 <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-clip">clip<a class="self-link" href="#valdef-overflow-clip"></a></dfn>
845 <dd>Like <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a>,
846 this value indicates that
847 the content is clipped
848 and that no scrolling user interface should be provided by the UA
849 to view the content outside the clipping region.
850 In addition, unlike <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: hidden</a>
851 which still allows programmatic scrolling,
852 <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: clip</a> forbids scrolling entirely,
853 through any mechanism.
856 <p class="issue" id="issue-a9ea8890"><a class="self-link" href="#issue-a9ea8890"></a> Mozilla implements -moz-hidden-unscrollable,
857 which is similar to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>,
858 except that it does not cause the element to establish a BFC.
859 Should we match that?</p>
862 <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-scroll">scroll<a class="self-link" href="#valdef-overflow-scroll"></a></dfn>
864 <dd>This value indicates that the content is clipped
865 and that if the user agent uses a scrolling mechanism
866 that is visible on the screen (such as a scroll bar or a panner),
867 that mechanism should be displayed for a box
868 whether or not any of its content is clipped.
869 This avoids any problem with scrollbars appearing
870 and disappearing in a dynamic environment.
871 When this value is specified and the target medium is <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/mediaqueries-4/#valdef-media-print">print</a>,
872 overflowing content may be printed.
874 <dt><dfn class="css" data-dfn-for="overflow, overflow-x, overflow-y" data-dfn-type="value" data-export="" id="valdef-overflow-auto">auto<a class="self-link" href="#valdef-overflow-auto"></a></dfn>
876 <dd>The behavior of the <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a> value is user agent-dependent,
877 but should cause a scrolling mechanism to be provided for overflowing boxes.
879 </dl>
882 <p>Even if <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> is set to <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>,
883 content may be clipped to a UA’s document window by the native operating environment.</p>
886 <p>If the computed value of <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> is not <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>,
887 the element creates a block formatting context.</p>
890 <p>UAs must apply the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property
891 set on the root element to the viewport.
892 HTML UAs must instead apply the ‘overflow’ property
893 from the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-body-element">body</a></code> element to the viewport
894 if the value on the root element is <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>.
895 The <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> value when used for the viewport
896 must be interpreted as <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>.
897 The element from which the value is propagated
898 must have a used value for <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> of <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>.</p>
901 <p>In the case of a scrollbar being placed on an edge of the element’s box,
902 it should be inserted between the inner border edge
903 and the outer padding edge.
904 Any space taken up by the scrollbars should be
905 taken out of (subtracted from the dimensions of)
906 the containing block formed by the element with the scrollbars.</p>
909 <p class="issue" id="issue-402eb70c"><a class="self-link" href="#issue-402eb70c"></a> import examples from <a data-link-type="biblio" href="#biblio-css3-box">[CSS3-BOX]</a>.</p>
912 <p class="issue" id="issue-c318b1c1"><a class="self-link" href="#issue-c318b1c1"></a>
913 Explain which directions allow scrolling and which don’t,
914 as a function of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a>
915 (including propagation of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> to the ICB).
916 </p>
920 <p class="issue" id="issue-52e2a181"><a class="self-link" href="#issue-52e2a181"></a>
921 <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> describes an <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property,
922 but it has not picked up implementation experience
923 that the working group is aware of.
924 Should this document treat <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> as a defunct proposal,
925 or should this document describe the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property
926 and attempt to revive it,
927 despite that implementations have implemented
928 <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> instead?
929 </p>
932 <h2 class="heading settled" data-level="4" id="fragmentation"><span class="secno">4. </span><span class="content">Fragmentation of overflow</span><a class="self-link" href="#fragmentation"></a></h2>
935 <p>The <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property gives authors the ability
936 to request that content that does not fit inside an element
937 be fragmented (in the sense of <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a>),
938 and provides alternatives
939 for where the remaining content should continue.</p>
942 <p>Notably, this property explains traditional pagination,
943 and extends it further.</p>
946 <table class="definition propdef" data-link-for-hint="continue">
947 <tbody>
948 <tr>
949 <th>Name:
950 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-continue">continue<a class="self-link" href="#propdef-continue"></a></dfn>
951 <tr class="value">
952 <th>Value:
953 <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-overflow">overflow</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a>
954 <tr>
955 <th>Initial:
956 <td>auto
957 <tr>
958 <th>Applies to:
959 <td>block containers <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>, flex containers <a data-link-type="biblio" href="#biblio-css3-flexbox">[CSS3-FLEXBOX]</a>, and grid containers <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a>
960 <tr>
961 <th>Inherited:
962 <td>no
963 <tr>
964 <th>Percentages:
965 <td>N/A
966 <tr>
967 <th>Media:
968 <td>visual
969 <tr>
970 <th>Computed value:
971 <td>see below
972 <tr>
973 <th>Animatable:
974 <td>no
975 <tr>
976 <th>Canonical order:
977 <td><abbr title="follows order of property value definition">per grammar</abbr></table>
980 <p class="issue" id="issue-b2c6e3da"><a class="self-link" href="#issue-b2c6e3da"></a> The naming of this property and its values is preliminary.
981 This was initially proposed as
982 "fragmentation: auto | none | break | clone | page"
983 in <a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html</a>,
984 and there is not yet wide agreement as to which naming is better.</p>
987 <p class="issue" id="issue-d52b3e3d"><a class="self-link" href="#issue-d52b3e3d"></a> This property is meant to generalize and replace <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a>.
988 Once it is sufficiently stable in this specification,
989 <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a> should be removed from the regions specification in favor of this.</p>
992 <p class="note" role="note">Note: <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> replaces "overflow:fragments"
993 from earlier versions of this specification,
994 while <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: paginate</a> replaces "overflow: paged-x | paged-y | paged-x-controls | paged-y-controls"</p>
997 <dl>
999 <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-auto">auto<a class="self-link" href="#valdef-continue-auto"></a></dfn>
1001 <dd><a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> may only occur as a computed value
1002 if the element is a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-regions-1/#css-region">CSS Region</a>
1003 other than the last one in a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-regions-1/#region-chain">region chain</a>.
1004 Content that doesn’t fit is pushed to the next region of the chain.
1007 <p>In all other cases, <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> computes to one of the other values.</p>
1011 <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-overflow">overflow<a class="self-link" href="#valdef-continue-overflow"></a></dfn>
1013 <dd>Content that doesn’t fit overflows, according to the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property
1016 <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-discard">discard<a class="self-link" href="#valdef-continue-discard"></a></dfn>
1018 <dd>Content that doesn’t fit is discarded at a fragmentation break
1021 <p class="note" role="note">Note: generalized from region-fragment: break; on the last region of a region chain</p>
1025 <p class="issue" id="issue-36be54be"><a class="self-link" href="#issue-36be54be"></a> When the element isn’t a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-break-3/#fragmentation-container">fragmentation container</a> already,
1026 should this work by turning it directly into one,
1027 or by creating a <a data-link-type="dfn" href="#fragment-box">fragment box</a> inside it like <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> does?</p>
1031 <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-paginate">paginate<a class="self-link" href="#valdef-continue-paginate"></a></dfn>
1033 <dd>Content that doesn’t fit paginates.
1034 This creates a paginated view inside the element
1035 similar to the way that 'overflow: scroll' creates a scrollable view.
1038 <p>See <a href="#paginated-overflow">paginated overflow</a></p>
1042 <p class="note" role="note">Note: Print is effectively "continue: paginate" on the root.</p>
1045 <dt><dfn class="css" data-dfn-for="continue" data-dfn-type="value" data-export="" id="valdef-continue-fragments">fragments<a class="self-link" href="#valdef-continue-fragments"></a></dfn>
1047 <dd>content that doesn’t fit causes the element to copy itself and continue laying out.
1050 <p>See <a href="#fragment-overflow">fragment overflow</a>.</p>
1053 </dl>
1056 <p>The computed value of the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> for a given element or pseudo element is determined as follow:</p>
1058 <ol>
1060 <li>If the specified value is <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>
1062 <ol>
1064 <li>On a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-regions-1/#css-region">CSS Region</a> other than the last one in a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-regions-1/#region-chain">region chain</a>,
1065 the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>
1067 <li>On a page
1068 the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a>
1070 <li>On a <a data-link-type="dfn" href="#fragment-box">fragment box</a>
1071 the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a>
1073 <li>Otherwise, the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-overflow">overflow</a>
1075 </ol>
1078 <li>If the specified value is <span class="css">framgents</span>
1080 <ol>
1082 <li>On a page
1083 the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a>
1085 <li>Otherwise, the computed value is the specified value
1087 </ol>
1090 <li>In all other cases, the computed value is the specified value
1091 </ol>
1094 <p class="issue" id="issue-53644667"><a class="self-link" href="#issue-53644667"></a> If we introduce a pseudo element that can select columns in a multicol,
1095 we would need to specify that auto computes to auto on it,
1096 or introduce a new value and have auto compute to that
1097 (but what would that value compute to on things that aren’t columns?).</p>
1100 <p class="note" role="note">Note: For background discussions leading to this property, see these threads:
1101 <a href="http://lists.w3.org/Archives/Public/www-style/2012May/1197.html">discussion of overflow, overflow-x, overflow-y and overflow-style</a> and
1102 <a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">proposal for a fragmentation property</a></p>
1105 <h2 class="heading settled" data-level="5" id="paginated-overflow"><span class="secno">5. </span><span class="content">Paginated overflow</span><a class="self-link" href="#paginated-overflow"></a></h2>
1108 <p>This section introduces and defines the meaning of the <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a> value of the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property.</p>
1111 <p class="issue" id="issue-001d5014"><a class="self-link" href="#issue-001d5014"></a> Write this section</p>
1114 <p class="issue" id="issue-338ad0f3"><a class="self-link" href="#issue-338ad0f3"></a> Pages should be possible to style with @page rules. How does that work for nested pages?</p>
1117 <div class="issue" id="issue-67ad77e5"><a class="self-link" href="#issue-67ad77e5"></a>
1118 Should traditional pagination (e.g. when printing)
1119 be expressed through some magic in the computed value of <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>,
1120 or by inserting this in the UA stylesheet:
1122 <pre><code class="lang-css highlight"><span class="k">@media</span> <span class="o">(</span><span class="nt">overflow-block</span><span class="o">:</span> <span class="nt">paged</span><span class="o">),</span> <span class="o">(</span><span class="nt">overflow-block</span><span class="o">:</span> <span class="nt">optional-paged</span><span class="o">)</span> <span class="p">{</span>
1123 <span class="nd">:root</span> <span class="p">{</span>
1124 <span class="n">continue</span><span class="o">:</span> <span class="n">paginate</span><span class="p">;</span>
1125 <span class="p">}</span>
1126 <span class="p">}</span></code></pre>
1127 </div>
1130 <p class="issue" id="issue-6eb3c644"><a class="self-link" href="#issue-6eb3c644"></a> Traditional pagination (e.g. when printing) assumes that
1131 :root is contained in the page box,
1132 rather than having the page box be a pseudo element child of :root.
1133 Can we work around that using something similar to fragment boxes?
1134 Or maybe by having a fragment box (reproducing :root) inside a page box inside :root?</p>
1137 <p class="issue" id="issue-64583cf9"><a class="self-link" href="#issue-64583cf9"></a> How does the page box model work when it is a child of a regular css box?</p>
1140 <p class="issue" id="issue-e9f64b3d"><a class="self-link" href="#issue-e9f64b3d"></a> The initial proposal in <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> and implemantation from Opera
1141 used 4 values instead of <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a>:
1142 "paged-x | paged-y | paged-x-controls | paged-y-controls".
1143 Should this property also include these values,
1144 or are they better handled as separate properties?
1145 (e.g.: "pagination-layout: auto | horizontal | vertical", "pagination-controls: auto | none")</p>
1148 <p class="issue" id="issue-55c97ed8"><a class="self-link" href="#issue-55c97ed8"></a> Ability to display N pages at once
1149 rather than just one page at once?
1150 Could this be a value of "pagination-layout", such as:
1151 "pagination-layout: horizontal 2;"</p>
1154 <p class="issue" id="issue-64de292b"><a class="self-link" href="#issue-64de292b"></a> Brad Kemper has proposed a model for combining pagination and
1155 fragment overflow, which also deals with displaying multiple pages.
1156 <a href="http://www.w3.org/mid/[email protected]">http://www.w3.org/mid/[email protected]</a></p>
1159 <p class="issue" id="issue-360561bd"><a class="self-link" href="#issue-360561bd"></a>
1160 The current implementation of paginated overflow uses
1161 the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a>/<a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a>/<a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> properties
1162 rather than the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property as proposed
1163 in the <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> draft
1164 (which also matches the <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> proposal).
1165 or the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property as described here.
1166 </p>
1169 <h2 class="heading settled" data-level="6" id="fragment-overflow"><span class="secno">6. </span><span class="content">Fragment overflow</span><a class="self-link" href="#fragment-overflow"></a></h2>
1172 <p>This section introduces and defines the meaning of
1173 the <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> value of the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property.</p>
1176 <p>
1177 When the computed value of <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> for an element is <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a>,
1178 and implementations would otherwise have created a box for the element,
1179 then implementations must create a sequence of <dfn data-dfn-type="dfn" data-noexport="" id="fragment-box">fragment box<a class="self-link" href="#fragment-box"></a></dfn>es
1180 for that element.
1181 (It is possible for an element with <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a>
1182 to generate only one <a data-link-type="dfn" href="#fragment-box">fragment box</a>.
1183 However, if an element’s computed <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> is not <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a>,
1184 then its box is not a <a data-link-type="dfn" href="#fragment-box">fragment box</a>.)
1185 Every <a data-link-type="dfn" href="#fragment-box">fragment box</a> is a fragmentation container,
1186 and any overflow
1187 that would cause that fragmentation container to fragment
1188 causes another <a data-link-type="dfn" href="#fragment-box">fragment box</a> created as a next sibling
1189 of the previous one.
1190 <span class="issue" id="issue-74f423ed"><a class="self-link" href="#issue-74f423ed"></a>Or is it as though it’s a next sibling of
1191 the element? Need to figure out exactly how this interacts with
1192 other box-level fixup.</span>
1193 Additionally, if the <a data-link-type="dfn" href="#fragment-box">fragment box</a> is also
1194 a multi-column box (as defined in <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a>
1195 <span class="issue" id="issue-928903ce"><a class="self-link" href="#issue-928903ce"></a>though it defines <i>multi-column element</i></span>)
1196 any content that would lead to the creation of <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-multicol-1/#overflow-columns">overflow columns</a> <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a>
1197 instead is flown into an additional fragment box.
1198 However, fragment boxes may themselves be broken
1199 (due to fragmentation in a fragmentation context outside of them,
1200 such as pages, columns, or other fragment boxes);
1201 such breaking leads to fragments of the same fragment box
1202 rather than multiple fragment boxes.
1203 (This matters because fragment boxes may be styled by their index;
1204 such breaking leads to multiple fragments of a fragment box
1205 with a single index.
1206 This design choice is so that
1207 breaking a fragment box across pages does not break
1208 the association of indices to particular pieces of content.)
1209 <span class="issue" id="issue-060b1de8"><a class="self-link" href="#issue-060b1de8"></a>Should a forced break that breaks to
1210 an outer fragmentation context cause a new fragment of a single
1211 fragment box or a new fragment box?</span>
1212 <span class="issue" id="issue-5b4b087c"><a class="self-link" href="#issue-5b4b087c"></a>Should we find a term other than
1213 <a data-link-type="dfn" href="#fragment-box">fragment box</a> here to make this a little less confusing?</span>
1214 </p>
1217 <p class="issue" id="issue-c4f3aedb"><a class="self-link" href="#issue-c4f3aedb"></a>
1218 What if we want to be able to style the pieces of an element
1219 split within another type of fragmentation context?
1220 These rules prevent ever using <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> for that,
1221 despite that the name seems the most logical name for such a feature.
1222 </p>
1225 <div class="example" id="example-17470be2"><a class="self-link" href="#example-17470be2"></a>
1227 <table class="source-demo-pair">
1228 <tbody>
1229 <tr>
1230 <td>
1231 <pre><!DOCTYPE HTML>
1232 <title>Breaking content into
1233 equal-sized cards</title>
1234 <style>
1235 .in-cards {
1236 continue: fragments;
1238 width: 13em;
1239 height: 8em;
1241 padding: 4px;
1242 border: medium solid blue;
1243 margin: 6px;
1245 font: medium/1.3 Times New
1246 Roman, Times, serif;
1247 }
1248 </style>
1249 <div class="in-cards">
1250 In this example, the text in the div
1251 is broken into a series of cards.
1252 These cards all have the same style.
1253 The presence of enough content to
1254 overflow one of the cards causes
1255 another one to be created. The second
1256 card is created just like it’s the
1257 next sibling of the first.
1258 </div></pre>
1259 <td>
1261 <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>
1264 <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>
1267 </table>
1270 </div>
1273 <p class="issue" id="issue-25a84ff4"><a class="self-link" href="#issue-25a84ff4"></a>
1274 We should specify that <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> does not apply
1275 to at least some table parts,
1276 and perhaps other elements as well.
1277 We need to determine exactly which ones.
1278 </p>
1281 <p class="issue" id="issue-6c1669e3"><a class="self-link" href="#issue-6c1669e3"></a>
1282 This specification needs to say which type of
1283 fragmentation context is created
1284 so that it’s clear which values of the <a class="property" data-link-type="propdesc">break-*</a> properties
1285 cause breaks within this context.
1286 We probably want <span class="css">break-*: region</span> to apply.
1287 </p>
1290 <p class="issue" id="issue-08d6a80e"><a class="self-link" href="#issue-08d6a80e"></a>
1291 This specification needs a processing model
1292 that will apply in cases where the layout containing the
1293 fragments has characteristics that use the intrinsic size of the fragments
1294 to change the amount of space available for them,
1295 such as <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a>.
1296 There has already been some work on such a processing model
1297 in <a data-link-type="biblio" href="#biblio-css3-regions">[CSS3-REGIONS]</a>,
1298 and the work done on a model there,
1299 and the editors of that specification,
1300 should inform what happens in this specification.
1301 </p>
1304 <h3 class="heading settled" data-level="6.1" id="fragment-styling"><span class="secno">6.1. </span><span class="content">Fragment styling</span><a class="self-link" href="#fragment-styling"></a></h3>
1307 <h4 class="heading settled" data-level="6.1.1" id="fragment-pseudo-element"><span class="secno">6.1.1. </span><span class="content">The ::nth-fragment() pseudo-element</span><a class="self-link" href="#fragment-pseudo-element"></a></h4>
1310 <p>
1311 The <dfn class="css" data-dfn-type="selector" data-export="" id="selectordef-nth-fragment">::nth-fragment()<a class="self-link" href="#selectordef-nth-fragment"></a></dfn> pseudo-element
1312 is a pseudo-element
1313 that describes some of the <a data-link-type="dfn" href="#fragment-box">fragment box</a>es generated by an element.
1314 The argument to the pseudo-element takes the same syntax
1315 as the argument to the :nth-child() pseudo-class
1316 defined in <a data-link-type="biblio" href="#biblio-select">[SELECT]</a>, and has the same meaning
1317 except that the number is relative to
1318 <a data-link-type="dfn" href="#fragment-box">fragment box</a>es generated by the element
1319 instead of siblings of the element.
1320 </p>
1323 <p class="note" role="note">
1324 Selectors that allow addressing fragments
1325 by counting from the end rather than the start
1326 are intentionally not provided.
1327 Such selectors would interfere with determining
1328 the number of fragments.
1329 </p>
1332 <p class="issue" id="issue-0e3bec77"><a class="self-link" href="#issue-0e3bec77"></a>
1333 Depending on future discussions,
1334 this <span class="css">::nth-fragment(an+b)</span> syntax
1335 may be replaced with
1336 the new <span class="css">::fragment:nth(an+b)</span> syntax.
1337 </p>
1340 <h4 class="heading settled" data-level="6.1.2" id="style-of-fragments"><span class="secno">6.1.2. </span><span class="content">Styling of fragments</span><a class="self-link" href="#style-of-fragments"></a></h4>
1343 <p class="issue" id="issue-6e8f615f"><a class="self-link" href="#issue-6e8f615f"></a>
1344 Should this apply to continue:fragments only,
1345 or also to continue:paginate?
1346 (If it applies,
1347 then stricter property restrictions would be needed
1348 for continue:paginate.)
1349 </p>
1352 <p>
1353 In the absence of rules with <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements,
1354 the computed style for each <a data-link-type="dfn" href="#fragment-box">fragment box</a>
1355 is the computed style for the element
1356 for which the <a data-link-type="dfn" href="#fragment-box">fragment box</a> was created.
1357 However, the style for a <a data-link-type="dfn" href="#fragment-box">fragment box</a> is also influenced
1358 by rules whose selector’s <a data-link-type="dfn" href="http://dev.w3.org/csswg/selectors-3/#subject">subject</a> <a data-link-type="biblio" href="#biblio-select">[SELECT]</a>
1359 has an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element,
1360 if the 1-based number of the <a data-link-type="dfn" href="#fragment-box">fragment box</a> matches
1361 that <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element
1362 and the selector (excluding the <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element)
1363 matches the element generating the fragments.
1364 </p>
1367 <p>
1368 When determining the style of the <a data-link-type="dfn" href="#fragment-box">fragment box</a>,
1369 these rules that match the fragment pseudo-element
1370 cascade together with the rules that match the element,
1371 with the fragment pseudo-element adding the specificity
1372 of a pseudo-class to the specificity calculation.
1373 <span class="issue" id="issue-8f881f96"><a class="self-link" href="#issue-8f881f96"></a>Does this need to be specified in
1374 the cascading module as well?</span>
1375 </p>
1378 <div class="example" id="example-17b703f2"><a class="self-link" href="#example-17b703f2"></a>
1380 <table class="source-demo-pair">
1381 <tbody>
1382 <tr>
1383 <td>
1384 <pre><!DOCTYPE HTML>
1385 <style>
1386 .bouncy-columns {
1387 continue: fragments;
1388 width: 6em;
1389 height: 10em;
1390 float: left;
1391 margin: 1em;
1392 font: medium/1.25 Times New
1393 Roman, Times, serif;
1394 }
1395 .bouncy-columns::nth-fragment(1) {
1396 background: aqua; color: black;
1397 transform: rotate(-3deg);
1398 }
1399 .bouncy-columns::nth-fragment(2) {
1400 background: yellow; color: black;
1401 transform: rotate(3deg);
1402 }
1403 </style>
1404 <div class="bouncy-columns">
1405 <i>...</i>
1406 </div></pre>
1407 <td>
1409 <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>
1412 <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>
1415 <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>
1418 </table>
1421 </div>
1424 <p>
1425 Styling an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element with the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a>
1426 property does take effect;
1427 if a <a data-link-type="dfn" href="#fragment-box">fragment box</a> has a
1428 computed value of <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> other than <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a>
1429 then that fragment box is the last fragment.
1430 However, overriding <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> on the first fragment
1431 does not cause the <a data-link-type="dfn" href="#fragment-box">fragment box</a> not to exist;
1432 whether there are fragment boxes at all is determined by
1433 the computed value of overflow for the element.
1434 </p>
1437 <p>
1438 Styling an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element with the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-content-3/#propdef-content">content</a>
1439 property has no effect;
1440 the computed value of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-content-3/#propdef-content">content</a> for the fragment box
1441 remains the same as the computed value of content for the element.
1442 </p>
1445 <p>
1446 Specifying <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display: none</a> for a <a data-link-type="dfn" href="#fragment-box">fragment box</a> causes
1447 the fragment box with that index not to be generated.
1448 However, in terms of the indices
1449 used for matching <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements
1450 of later fragment boxes,
1451 it still counts as though it was generated.
1452 However, since it is not generated, it does not contain any content.
1453 </p>
1456 <p>
1457 Specifying other values of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a>, <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-position">position</a>,
1458 or <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-float">float</a> is permitted, but is not allowed to change
1459 the computed value of <a class="property" data-link-type="propdesc">display-inside</a>.
1460 (Since <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> only
1461 applies to block containers, flex containers, and grid containers
1462 the computed value of <a class="property" data-link-type="propdesc">display-inside</a> is always
1463 <span class="css">block</span>, <span class="css">flex</span>, or
1464 <span class="css">grid</span>.
1465 <span class="issue" id="issue-d98e732d"><a class="self-link" href="#issue-d98e732d"></a>Need to specify exactly how this works,
1466 but it depends on
1467 having <a class="property" data-link-type="propdesc">display-inside</a> and <a class="property" data-link-type="propdesc">display-outside</a> specified.</span>
1468 </p>
1471 <p>
1472 To match the model for other pseudo-elements
1473 where the pseudo-elements live inside their corresponding element,
1474 declarations in <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements override
1475 declarations in rules without the pseudo-element.
1476 The relative priority within such declarations is determined
1477 by normal cascading order (see <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>).
1478 </p>
1481 <p>
1482 Styles specified on <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements
1483 do affect inheritance to content within the <a data-link-type="dfn" href="#fragment-box">fragment box</a>.
1484 In other words, the content within the <a data-link-type="dfn" href="#fragment-box">fragment box</a> must
1485 inherit from the fragment box’s style (i.e., the pseudo-element style)
1486 rather than directly from the element.
1487 This means that elements split between fragment boxes may
1488 have different styles for different parts of the element.
1489 </p>
1492 <p class="issue" id="issue-d95b27f9"><a class="self-link" href="#issue-d95b27f9"></a>
1493 This inheritance rule allows specifying styles indirectly
1494 (by using explicit <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-cascade-4/#valdef-all-inherit">inherit</a> or using default inheritance
1495 on properties that don’t apply to <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a>)
1496 that can’t be specified directly
1497 (based on the rules in the next section).
1498 This is a problem.
1499 The restrictions that apply to styling inside fragments
1500 should also apply to inheritance from fragments.
1501 </p>
1504 <div class="example" id="example-539b7bce"><a class="self-link" href="#example-539b7bce"></a>
1506 <table class="source-demo-pair">
1507 <tbody>
1508 <tr>
1509 <td>
1510 <pre><!DOCTYPE HTML>
1511 <style>
1512 .article {
1513 continue: fragments;
1514 }
1515 .article::nth-fragment(1) {
1516 font-size: 1.5em;
1517 margin-bottom: 1em;
1518 height: 4em;
1519 }
1520 .article::nth-fragment(2) {
1521 margin-left: 5em;
1522 margin-right: 2em;
1523 }
1524 </style>
1525 <div class="article">
1526 The <code>font-size</code> property<i>...</i>
1527 </div></pre>
1528 <td>
1530 <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
1533 <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>
1536 </table>
1539 </div>
1542 <h4 class="heading settled" data-level="6.1.3" id="style-in-fragments"><span class="secno">6.1.3. </span><span class="content">Styling inside fragments</span><a class="self-link" href="#style-in-fragments"></a></h4>
1545 <p class="issue" id="issue-d00a7cbb"><a class="self-link" href="#issue-d00a7cbb"></a>
1546 Should this apply to continue:fragments only,
1547 or also to continue:paginate?
1548 </p>
1551 <p>
1552 The <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element
1553 can also be used to style
1554 content inside of a <a data-link-type="dfn" href="#fragment-box">fragment box</a>.
1555 Unlike the <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-line">::first-line</a> and <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-elements,
1556 the <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element can be applied
1557 to parts of the selector other than the subject:
1558 in particular, it can match ancestors of the subject.
1559 However, the only CSS properties applied
1560 by rules with such selectors
1561 are those that apply
1562 to the <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-element.
1563 </p>
1566 <p>
1567 To be more precise,
1568 when a rule’s selector has <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements
1569 attached to parts of the selector other than the subject,
1570 the declarations in that rule apply to
1571 a fragment (or pseudo-element thereof) when:
1572 </p>
1574 <ol>
1576 <li>
1577 the declarations are for properties that apply to the
1578 <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-element,
1582 <li>
1583 the declarations would apply to
1584 that fragment (or pseudo-element thereof)
1585 had those <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements been removed,
1586 with a particular association between
1587 each sequence of simple selectors and the element it matched,
1588 and
1592 <li>
1593 for each removed <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element,
1594 the fragment lives within a <a data-link-type="dfn" href="#fragment-box">fragment box</a>
1595 of the element associated in that association
1596 with the selector that the pseudo-element was attached to,
1597 and whose index matches the pseudo-element.
1601 </ol>
1604 <div class="example" id="example-95fb489a"><a class="self-link" href="#example-95fb489a"></a>
1606 <table class="source-demo-pair">
1607 <tbody>
1608 <tr>
1609 <td>
1610 <pre><!DOCTYPE HTML>
1611 <style>
1612 .dark-columns {
1613 continue: fragments;
1614 width: 6em;
1615 height: 10em;
1616 float: left;
1617 margin-right: 1em;
1618 font: medium/1.25 Times New
1619 Roman, Times, serif;
1620 }
1621 .dark-columns::nth-fragment(1) {
1622 background: aqua; color: black;
1623 }
1624 .dark-columns::nth-fragment(1) :link {
1625 color: blue;
1626 }
1627 .dark-columns::nth-fragment(1) :visited {
1628 color: purple;
1629 }
1630 .dark-columns::nth-fragment(2) {
1631 background: navy; color: white;
1632 }
1633 .dark-columns::nth-fragment(2) :link {
1634 color: aqua;
1635 }
1636 .dark-columns::nth-fragment(2) :visited {
1637 color: fuchsia;
1638 }
1639 </style>
1640 <div class="dark-columns">
1641 <i>...</i>
1642 </div></pre>
1643 <td>
1645 <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>
1648 <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>
1651 </table>
1654 </div>
1658 <h3 class="heading settled" data-level="6.2" id="max-lines"><span class="secno">6.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-max-lines">max-lines</a> property</span><a class="self-link" href="#max-lines"></a></h3>
1661 <p>
1662 Authors may wish to style the opening lines of an element
1663 with different styles
1664 by putting those opening lines in a separate fragment.
1665 However, since it may be difficult to predict the exact height
1666 occupied by those lines
1667 in order to restrict the first fragment to that height,
1668 this specification introduces a <a class="property" data-link-type="propdesc" href="#propdef-max-lines">max-lines</a> property
1669 that forces a fragment to break
1670 after a specified number of lines.
1671 This forces a break after the given number of lines
1672 contained within the element or its descendants,
1673 as long as those lines are in the same block formatting context.
1674 </p>
1677 <table class="definition propdef" data-link-for-hint="max-lines">
1678 <tbody>
1679 <tr>
1680 <th>Name:
1681 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-max-lines">max-lines<a class="self-link" href="#propdef-max-lines"></a></dfn>
1682 <tr class="value">
1683 <th>Value:
1684 <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-max-lines-none">none</a> <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-max-lines-integer"><integer></a>
1685 <tr>
1686 <th>Initial:
1687 <td><a class="css" data-link-type="maybe" href="#valdef-max-lines-none">none</a>
1688 <tr>
1689 <th>Applies to:
1690 <td>fragment boxes
1691 <tr>
1692 <th>Inherited:
1693 <td>no
1694 <tr>
1695 <th>Percentages:
1696 <td>N/A
1697 <tr>
1698 <th>Media:
1699 <td>visual
1700 <tr>
1701 <th>Computed value:
1702 <td>specified value
1703 <tr>
1704 <th>Animatable:
1705 <td>as <a href="http://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
1706 <tr>
1707 <th>Canonical order:
1708 <td><abbr title="follows order of property value definition">per grammar</abbr></table>
1711 <dl>
1713 <dt><dfn class="css" data-dfn-for="max-lines" data-dfn-type="value" data-export="" id="valdef-max-lines-none">none<a class="self-link" href="#valdef-max-lines-none"></a></dfn>
1715 <dd>
1717 <p>
1718 Breaks occur only as specified elsewhere.
1719 </p>
1725 <dt><dfn class="css" data-dfn-for="max-lines" data-dfn-type="value" data-export="" id="valdef-max-lines-integer"><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#integer-value"><integer></a><a class="self-link" href="#valdef-max-lines-integer"></a></dfn>
1727 <dd>
1729 <p>
1730 In addition to any breaks specified elsewhere,
1731 a break is forced before any line that would exceed
1732 the given number of lines
1733 being placed inside the element
1734 (excluding lines that are in
1735 a different block formatting context from
1736 the block formatting context to which
1737 an unstyled child of the element would belong).
1738 </p>
1742 <p class="issue" id="issue-9488ec29"><a class="self-link" href="#issue-9488ec29"></a>
1743 If there are multiple boundaries between this line
1744 and the previous, where exactly (in terms of element
1745 boundaries) is the break forced?
1746 </p>
1750 <p>
1751 Only positive integers are accepted.
1752 Zero or negative integers are a parse error.
1753 </p>
1758 </dl>
1761 <p class="issue" id="issue-f6e7b6c3"><a class="self-link" href="#issue-f6e7b6c3"></a>Should this apply to fragment overflow only, or also
1762 to pagination?
1763 Given what we’re doing with the continue property,
1764 it should actually apply to any fragmentainer.</p>
1767 <p class="issue" id="issue-13fa8ed4"><a class="self-link" href="#issue-13fa8ed4"></a> having max-lines do nothing on regular elements is not ideal.
1768 When applied to non fragmentainers,
1769 it should probably cause <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> to compute to <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a>
1770 so that you only need to reach for one property rather than 2 to get
1771 that effect.</p>
1774 <div class="example" id="example-9f00def3"><a class="self-link" href="#example-9f00def3"></a>
1776 <table class="source-demo-pair">
1777 <tbody>
1778 <tr>
1779 <td>
1780 <pre><!DOCTYPE HTML>
1781 <style>
1782 .article {
1783 continue: fragments;
1784 }
1785 .article::first-letter {
1786 font-size: 2em;
1787 line-height: 0.9;
1788 }
1789 .article::nth-fragment(1) {
1790 font-size: 1.5em;
1791 max-lines: 3;
1792 }
1793 .article::nth-fragment(2) {
1794 column-count: 2;
1795 }
1796 </style>
1797 <div class="article">
1798 <i>...</i>
1799 </div></pre>
1800 <td>
1802 <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>
1805 <div class="article-max-lines-demo two">max-lines property, authors<br>might have to use the<br><a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-height">height</a> 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>
1808 <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>
1811 </table>
1814 </div>
1817 <h2 class="heading settled" data-level="7" id="static-media"><span class="secno">7. </span><span class="content">Overflow in static media</span><a class="self-link" href="#static-media"></a></h2>
1820 <p class="issue" id="issue-de91ba9b"><a class="self-link" href="#issue-de91ba9b"></a>
1821 This specification should define useful behavior
1822 for all values of <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> and <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a>
1823 in static media (such as print).
1824 Current implementation behavior is quite poor and
1825 produces unexpected results when authors have not considered
1826 what will happen when
1827 the content they produce for interactive media
1828 is printed.
1829 </p>
1832 <h2 class="no-num heading settled" id="acknowledgments"><span class="content">
1833 Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
1836 <p>
1837 Thanks especially to the feedback from
1838 Rossen Atanassov,
1839 Bert Bos,
1840 Tantek Çelik,
1841 John Daggett,
1842 fantasai,
1843 Daniel Glazman,
1844 Vincent Hardy,
1845 HÃ¥kon Wium Lie,
1846 Peter Linss,
1847 Robert O’Callahan,
1848 Florian Rivoal,
1849 Alan Stearns,
1850 Steve Zilles,
1851 and all the rest of the
1852 <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community.
1853 </p>
1855 </main>
1857 <h2 class="no-ref no-num heading settled" id="conformance"><span class="content">
1858 Conformance</span><a class="self-link" href="#conformance"></a></h2>
1861 <h3 class="no-ref heading settled" id="conventions"><span class="content">
1862 Document conventions</span><a class="self-link" href="#conventions"></a></h3>
1865 <p>Conformance requirements are expressed with a combination of
1866 descriptive assertions and RFC 2119 terminology. The key words "MUST",
1867 "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
1868 "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
1869 document are to be interpreted as described in RFC 2119.
1870 However, for readability, these words do not appear in all uppercase
1871 letters in this specification.
1873 </p>
1874 <p>All of the text of this specification is normative except sections
1875 explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
1878 <p>Examples in this specification are introduced with the words "for example"
1879 or are set apart from the normative text with <code>class="example"</code>,
1880 like this:
1882 </p>
1883 <div class="example" id="example-f839f6c8"><a class="self-link" href="#example-f839f6c8"></a>
1885 <p>This is an example of an informative example.</p>
1888 </div>
1891 <p>Informative notes begin with the word "Note" and are set apart from the
1892 normative text with <code>class="note"</code>, like this:
1894 </p>
1895 <p class="note" role="note">Note, this is an informative note.</p>
1898 <p>Advisements are normative sections styled to evoke special attention and are
1899 set apart from other normative text with <code><strong class="advisement"></code>, like
1900 this:
1902 <strong class="advisement">
1903 UAs MUST provide an accessible alternative.
1904 </strong>
1906 </p>
1907 <h3 class="no-ref heading settled" id="conformance-classes"><span class="content">
1908 Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
1911 <p>Conformance to this specification
1912 is defined for three conformance classes:
1913 </p>
1914 <dl>
1916 <dt>style sheet
1918 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
1919 style sheet</a>.
1921 <dt>renderer
1923 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
1924 that interprets the semantics of a style sheet and renders
1925 documents that use them.
1927 <dt>authoring tool
1929 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
1930 that writes a style sheet.
1932 </dl>
1935 <p>A style sheet is conformant to this specification
1936 if all of its statements that use syntax defined in this module are valid
1937 according to the generic CSS grammar and the individual grammars of each
1938 feature defined in this module.
1940 </p>
1941 <p>A renderer is conformant to this specification
1942 if, in addition to interpreting the style sheet as defined by the
1943 appropriate specifications, it supports all the features defined
1944 by this specification by parsing them correctly
1945 and rendering the document accordingly. However, the inability of a
1946 UA to correctly render a document due to limitations of the device
1947 does not make the UA non-conformant. (For example, a UA is not
1948 required to render color on a monochrome monitor.)
1950 </p>
1951 <p>An authoring tool is conformant to this specification
1952 if it writes style sheets that are syntactically correct according to the
1953 generic CSS grammar and the individual grammars of each feature in
1954 this module, and meet all other conformance requirements of style sheets
1955 as described in this module.
1957 </p>
1958 <h3 class="no-ref heading settled" id="partial"><span class="content">
1959 Partial implementations</span><a class="self-link" href="#partial"></a></h3>
1962 <p>So that authors can exploit the forward-compatible parsing rules to
1963 assign fallback values, CSS renderers <strong>must</strong>
1964 treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
1965 as appropriate</a>) any at-rules, properties, property values, keywords,
1966 and other syntactic constructs for which they have no usable level of
1967 support. In particular, user agents <strong>must not</strong> selectively
1968 ignore unsupported component values and honor supported values in a single
1969 multi-value property declaration: if any value is considered invalid
1970 (as unsupported values must be), CSS requires that the entire declaration
1971 be ignored.</p>
1974 <h3 class="no-ref heading settled" id="experimental"><span class="content">
1975 Experimental implementations</span><a class="self-link" href="#experimental"></a></h3>
1978 <p>To avoid clashes with future CSS features, the CSS2.1 specification
1979 reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
1980 syntax</a> for proprietary and experimental extensions to CSS.
1982 </p>
1983 <p>Prior to a specification reaching the Candidate Recommendation stage
1984 in the W3C process, all implementations of a CSS feature are considered
1985 experimental. The CSS Working Group recommends that implementations
1986 use a vendor-prefixed syntax for such features, including those in
1987 W3C Working Drafts. This avoids incompatibilities with future changes
1988 in the draft.
1989 </p>
1992 <h3 class="no-ref heading settled" id="testing"><span class="content">
1993 Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
1996 <p>Once a specification reaches the Candidate Recommendation stage,
1997 non-experimental implementations are possible, and implementors should
1998 release an unprefixed implementation of any CR-level feature they
1999 can demonstrate to be correctly implemented according to spec.
2001 </p>
2002 <p>To establish and maintain the interoperability of CSS across
2003 implementations, the CSS Working Group requests that non-experimental
2004 CSS renderers submit an implementation report (and, if necessary, the
2005 testcases used for that implementation report) to the W3C before
2006 releasing an unprefixed implementation of any CSS features. Testcases
2007 submitted to W3C are subject to review and correction by the CSS
2008 Working Group.
2010 </p>
2011 <p>Further information on submitting testcases and implementation reports
2012 can be found from on the CSS Working Group’s website at
2013 <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
2014 Questions should be directed to the
2015 <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">[email protected]</a>
2016 mailing list.
2020 </p>
2021 <h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
2022 <h3 class="no-num heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
2023 <ul class="indexlist">
2024 <li>3d-preserving child, <a href="#3d_preserving-child">2.2</a>
2025 <li>3d-preserving descendant, <a href="#3d_preserving-descendant">2.2</a>
2026 <li>auto
2027 <ul>
2028 <li>value for overflow, overflow-x, overflow-y, <a href="#valdef-overflow-auto">3</a>
2029 <li>value for continue, <a href="#valdef-continue-auto">4</a>
2030 </ul>
2031 <li>border-box overflow, <a href="#border_box-overflow">2.3</a>
2032 <li>border-box overflow rectangle, <a href="#border_box-overflow-rectangle">2.3</a>
2033 <li>border-box overflow region, <a href="#border_box-overflow-region">2.3</a>
2034 <li>clip, <a href="#valdef-overflow-clip">3</a>
2035 <li>continue, <a href="#propdef-continue">4</a>
2036 <li>discard, <a href="#valdef-continue-discard">4</a>
2037 <li>fragment box, <a href="#fragment-box">6</a>
2038 <li>fragments, <a href="#valdef-continue-fragments">4</a>
2039 <li>hidden, <a href="#valdef-overflow-hidden">3</a>
2040 <li>ink overflow, <a href="#ink-overflow0">2.1</a>
2041 <li>ink overflow rectangle, <a href="#ink-overflow-rectangle">2.1</a>
2042 <li>ink overflow region, <a href="#ink-overflow-region">2.1</a>
2043 <li><integer>, <a href="#valdef-max-lines-integer">6.2</a>
2044 <li>max-lines, <a href="#propdef-max-lines">6.2</a>
2045 <li>non-3d-preserving child, <a href="#non_3d_preserving-child">2.2</a>
2046 <li>none, <a href="#valdef-max-lines-none">6.2</a>
2047 <li>::nth-fragment(), <a href="#selectordef-nth-fragment">6.1.1</a>
2048 <li>overflow
2049 <ul>
2050 <li>definition of, <a href="#overflow">2</a>
2051 <li>(property), <a href="#propdef-overflow">3</a>
2052 <li>value for continue, <a href="#valdef-continue-overflow">4</a>
2053 </ul>
2054 <li>overflow-x, <a href="#propdef-overflow-x">3</a>
2055 <li>overflow-y, <a href="#propdef-overflow-y">3</a>
2056 <li>paginate, <a href="#valdef-continue-paginate">4</a>
2057 <li>scroll, <a href="#valdef-overflow-scroll">3</a>
2058 <li>scrollable overflow, <a href="#scrollable-overflow0">2.2</a>
2059 <li>scrollable overflow rectangle, <a href="#scrollable-overflow-rectangle">2.2</a>
2060 <li>scrollable overflow region, <a href="#scrollable-overflow-region">2.2</a>
2061 <li>visible, <a href="#valdef-overflow-visible">3</a>
2062 </ul>
2063 <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
2064 <ul class="indexlist">
2065 <li><a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> defines the following terms:
2066 <ul>
2067 <li><a href="http://dev.w3.org/csswg/css-backgrounds-3/#box-shadow">box-shadow</a>
2068 </ul>
2069 <li><a data-link-type="biblio" href="#biblio-css-break-3">[css-break-3]</a> defines the following terms:
2070 <ul>
2071 <li><a href="http://dev.w3.org/csswg/css-break-3/#fragmentation-container">fragmentation container</a>
2072 </ul>
2073 <li><a data-link-type="biblio" href="#biblio-css-cascade-4">[css-cascade-4]</a> defines the following terms:
2074 <ul>
2075 <li><a href="http://dev.w3.org/csswg/css-cascade-4/#valdef-all-inherit">inherit</a>
2076 </ul>
2077 <li><a data-link-type="biblio" href="#biblio-css-content-3">[css-content-3]</a> defines the following terms:
2078 <ul>
2079 <li><a href="http://dev.w3.org/csswg/css-content-3/#propdef-content">content</a>
2080 </ul>
2081 <li><a data-link-type="biblio" href="#biblio-css-multicol-1">[css-multicol-1]</a> defines the following terms:
2082 <ul>
2083 <li><a href="http://dev.w3.org/csswg/css-multicol-1/#overflow-columns">overflow columns</a>
2084 </ul>
2085 <li><a data-link-type="biblio" href="#biblio-css-position-3">[css-position-3]</a> defines the following terms:
2086 <ul>
2087 <li><a href="http://dev.w3.org/csswg/css-position-3/#propdef-position">position</a>
2088 </ul>
2089 <li><a data-link-type="biblio" href="#biblio-css-pseudo-4">[css-pseudo-4]</a> defines the following terms:
2090 <ul>
2091 <li><a href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a>
2092 <li><a href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-line">::first-line</a>
2093 </ul>
2094 <li><a data-link-type="biblio" href="#biblio-css-regions-1">[css-regions-1]</a> defines the following terms:
2095 <ul>
2096 <li><a href="http://dev.w3.org/csswg/css-regions-1/#css-region">css region</a>
2097 <li><a href="http://dev.w3.org/csswg/css-regions-1/#region-chain">region chain</a>
2098 <li><a href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a>
2099 </ul>
2100 <li><a data-link-type="biblio" href="#biblio-css-text-decor-3">[css-text-decor-3]</a> defines the following terms:
2101 <ul>
2102 <li><a href="http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-shadow">text-shadow</a>
2103 </ul>
2104 <li><a data-link-type="biblio" href="#biblio-css-transforms-1">[css-transforms-1]</a> defines the following terms:
2105 <ul>
2106 <li><a href="http://dev.w3.org/csswg/css-transforms-1/#propdef-transform-style">transform-style</a>
2107 </ul>
2108 <li><a data-link-type="biblio" href="#biblio-css-ui-3">[css-ui-3]</a> defines the following terms:
2109 <ul>
2110 <li><a href="http://dev.w3.org/csswg/css-ui-3/#propdef-outline">outline</a>
2111 </ul>
2112 <li><a data-link-type="biblio" href="#biblio-css-values-3">[css-values-3]</a> defines the following terms:
2113 <ul>
2114 <li><a href="http://dev.w3.org/csswg/css-values-3/#integer-value"><integer></a>
2115 <li><a href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a>
2116 </ul>
2117 <li><a data-link-type="biblio" href="#biblio-css-writing-modes-3">[css-writing-modes-3]</a> defines the following terms:
2118 <ul>
2119 <li><a href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a>
2120 </ul>
2121 <li><a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> defines the following terms:
2122 <ul>
2123 <li><a href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display</a>
2124 <li><a href="http://dev.w3.org/csswg/css2/visuren.html#propdef-float">float</a>
2125 <li><a href="http://dev.w3.org/csswg/css2/visudet.html#propdef-height">height</a>
2126 </ul>
2127 <li><a data-link-type="biblio" href="#biblio-html">[HTML]</a> defines the following terms:
2128 <ul>
2129 <li><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-body-element">body</a>
2130 </ul>
2131 <li><a data-link-type="biblio" href="#biblio-mediaqueries-4">[mediaqueries-4]</a> defines the following terms:
2132 <ul>
2133 <li><a href="http://dev.w3.org/csswg/mediaqueries-4/#valdef-media-print">print</a>
2134 </ul>
2135 </ul>
2136 <h2 class="no-num heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
2137 <h3 class="no-num heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
2138 <dl>
2139 <dt id="biblio-css21"><a class="self-link" href="#biblio-css21"></a>[CSS21]
2140 <dd>Bert Bos; et al. <a href="http://www.w3.org/TR/CSS2">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="http://www.w3.org/TR/CSS2">http://www.w3.org/TR/CSS2</a>
2141 <dt id="biblio-css3cascade"><a class="self-link" href="#biblio-css3cascade"></a>[CSS3CASCADE]
2142 <dd>Elika Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-cascade-3/">CSS Cascading and Inheritance Level 3</a>. 16 April 2015. CR. URL: <a href="http://www.w3.org/TR/css-cascade-3/">http://www.w3.org/TR/css-cascade-3/</a>
2143 <dt id="biblio-css3col"><a class="self-link" href="#biblio-css3col"></a>[CSS3COL]
2144 <dd>HÃ¥kon Wium Lie. <a href="http://www.w3.org/TR/css3-multicol">CSS Multi-column Layout Module</a>. 12 April 2011. CR. URL: <a href="http://www.w3.org/TR/css3-multicol">http://www.w3.org/TR/css3-multicol</a>
2145 <dt id="biblio-html"><a class="self-link" href="#biblio-html"></a>[HTML]
2146 <dd>Ian Hickson. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
2147 <dt id="biblio-select"><a class="self-link" href="#biblio-select"></a>[SELECT]
2148 <dd>Tantek Çelik; et al. <a href="http://www.w3.org/TR/css3-selectors/">Selectors Level 3</a>. 29 September 2011. REC. URL: <a href="http://www.w3.org/TR/css3-selectors/">http://www.w3.org/TR/css3-selectors/</a>
2149 <dt id="biblio-css-backgrounds-3"><a class="self-link" href="#biblio-css-backgrounds-3"></a>[CSS-BACKGROUNDS-3]
2150 <dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a>
2151 <dt id="biblio-css-break-3"><a class="self-link" href="#biblio-css-break-3"></a>[CSS-BREAK-3]
2152 <dd>CSS Fragmentation Module Level 3 URL: <a href="http://www.w3.org/TR/css3-break/">http://www.w3.org/TR/css3-break/</a>
2153 <dt id="biblio-css-cascade-4"><a class="self-link" href="#biblio-css-cascade-4"></a>[CSS-CASCADE-4]
2154 <dd>Elika Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 21 April 2015. WD. URL: <a href="http://www.w3.org/TR/css-cascade-4/">http://www.w3.org/TR/css-cascade-4/</a>
2155 <dt id="biblio-css-content-3"><a class="self-link" href="#biblio-css-content-3"></a>[CSS-CONTENT-3]
2156 <dd>CSS Generated Content Module Level 3 URL: <a href="http://dev.w3.org/csswg/css-content-3/">http://dev.w3.org/csswg/css-content-3/</a>
2157 <dt id="biblio-css-multicol-1"><a class="self-link" href="#biblio-css-multicol-1"></a>[CSS-MULTICOL-1]
2158 <dd>CSS Multi-column Layout Module Level 1 URL: <a href="http://www.w3.org/TR/css3-multicol/">http://www.w3.org/TR/css3-multicol/</a>
2159 <dt id="biblio-css-position-3"><a class="self-link" href="#biblio-css-position-3"></a>[CSS-POSITION-3]
2160 <dd>CSS Positioned Layout Module Level 3 URL: <a href="http://www.w3.org/TR/css3-positioning/">http://www.w3.org/TR/css3-positioning/</a>
2161 <dt id="biblio-css-pseudo-4"><a class="self-link" href="#biblio-css-pseudo-4"></a>[CSS-PSEUDO-4]
2162 <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="http://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 15 January 2015. WD. URL: <a href="http://www.w3.org/TR/css-pseudo-4/">http://www.w3.org/TR/css-pseudo-4/</a>
2163 <dt id="biblio-css-regions-1"><a class="self-link" href="#biblio-css-regions-1"></a>[CSS-REGIONS-1]
2164 <dd>Rossen Atanassov; Alan Stearns. <a href="http://www.w3.org/TR/css-regions-1/">CSS Regions Module Level 1</a>. 9 October 2014. WD. URL: <a href="http://www.w3.org/TR/css-regions-1/">http://www.w3.org/TR/css-regions-1/</a>
2165 <dt id="biblio-css-text-decor-3"><a class="self-link" href="#biblio-css-text-decor-3"></a>[CSS-TEXT-DECOR-3]
2166 <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>. 1 August 2013. CR. URL: <a href="http://www.w3.org/TR/css-text-decor-3/">http://www.w3.org/TR/css-text-decor-3/</a>
2167 <dt id="biblio-css-transforms-1"><a class="self-link" href="#biblio-css-transforms-1"></a>[CSS-TRANSFORMS-1]
2168 <dd>Simon Fraser; et al. <a href="http://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 26 November 2013. WD. URL: <a href="http://www.w3.org/TR/css-transforms-1/">http://www.w3.org/TR/css-transforms-1/</a>
2169 <dt id="biblio-css-ui-3"><a class="self-link" href="#biblio-css-ui-3"></a>[CSS-UI-3]
2170 <dd>CSS Basic User Interface Module Level 3 URL: <a href="http://www.w3.org/TR/css3-ui/">http://www.w3.org/TR/css3-ui/</a>
2171 <dt id="biblio-css-values-3"><a class="self-link" href="#biblio-css-values-3"></a>[CSS-VALUES-3]
2172 <dd>CSS Values and Units Module Level 3 URL: <a href="http://www.w3.org/TR/css3-values/">http://www.w3.org/TR/css3-values/</a>
2173 <dt id="biblio-css-writing-modes-3"><a class="self-link" href="#biblio-css-writing-modes-3"></a>[CSS-WRITING-MODES-3]
2174 <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 20 March 2014. CR. URL: <a href="http://www.w3.org/TR/css-writing-modes-3/">http://www.w3.org/TR/css-writing-modes-3/</a>
2175 <dt id="biblio-css3-break"><a class="self-link" href="#biblio-css3-break"></a>[CSS3-BREAK]
2176 <dd>Rossen Atanassov; Elika Etemad. <a href="http://www.w3.org/TR/css3-break/">CSS Fragmentation Module Level 3</a>. 29 January 2015. WD. URL: <a href="http://www.w3.org/TR/css3-break/">http://www.w3.org/TR/css3-break/</a>
2177 <dt id="biblio-css3-flexbox"><a class="self-link" href="#biblio-css3-flexbox"></a>[CSS3-FLEXBOX]
2178 <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 14 May 2015. LCWD. URL: <a href="http://www.w3.org/TR/css-flexbox-1/">http://www.w3.org/TR/css-flexbox-1/</a>
2179 <dt id="biblio-css3-grid-layout"><a class="self-link" href="#biblio-css3-grid-layout"></a>[CSS3-GRID-LAYOUT]
2180 <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 17 March 2015. WD. URL: <a href="http://www.w3.org/TR/css-grid-1/">http://www.w3.org/TR/css-grid-1/</a>
2181 <dt id="biblio-css3-transforms"><a class="self-link" href="#biblio-css3-transforms"></a>[CSS3-TRANSFORMS]
2182 <dd>Simon Fraser; et al. <a href="http://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 26 November 2013. WD. URL: <a href="http://www.w3.org/TR/css-transforms-1/">http://www.w3.org/TR/css-transforms-1/</a>
2183 <dt id="biblio-mediaqueries-4"><a class="self-link" href="#biblio-mediaqueries-4"></a>[MEDIAQUERIES-4]
2184 <dd>Florian Rivoal; Tab Atkins Jr.. <a href="http://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a>. 5 June 2014. WD. URL: <a href="http://www.w3.org/TR/mediaqueries-4/">http://www.w3.org/TR/mediaqueries-4/</a>
2185 <dt id="biblio-rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[RFC2119]
2186 <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
2187 </dl>
2188 <h3 class="no-num heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
2189 <dl>
2190 <dt id="biblio-css1"><a class="self-link" href="#biblio-css1"></a>[CSS1]
2191 <dd>HÃ¥kon Wium Lie; Bert Bos. <a href="http://www.w3.org/TR/CSS1/">Cascading Style Sheets (CSS1) Level 1 Specification</a>. 11 April 2008. REC. URL: <a href="http://www.w3.org/TR/CSS1/">http://www.w3.org/TR/CSS1/</a>
2192 <dt id="biblio-css3bg"><a class="self-link" href="#biblio-css3bg"></a>[CSS3BG]
2193 <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="http://www.w3.org/TR/css3-background/">CSS Backgrounds and Borders Module Level 3</a>. 9 September 2014. CR. URL: <a href="http://www.w3.org/TR/css3-background/">http://www.w3.org/TR/css3-background/</a>
2194 <dt id="biblio-css3gcpm"><a class="self-link" href="#biblio-css3gcpm"></a>[CSS3GCPM]
2195 <dd>Dave Cramer. <a href="http://www.w3.org/TR/css-gcpm-3/">CSS Generated Content for Paged Media Module</a>. 13 May 2014. WD. URL: <a href="http://www.w3.org/TR/css-gcpm-3/">http://www.w3.org/TR/css-gcpm-3/</a>
2196 <dt id="biblio-css3text"><a class="self-link" href="#biblio-css3text"></a>[CSS3TEXT]
2197 <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 10 October 2013. LCWD. URL: <a href="http://www.w3.org/TR/css-text-3/">http://www.w3.org/TR/css-text-3/</a>
2198 <dt id="biblio-css3-box"><a class="self-link" href="#biblio-css3-box"></a>[CSS3-BOX]
2199 <dd>Bert Bos. <a href="http://www.w3.org/TR/css3-box">CSS basic box model</a>. 9 August 2007. WD. URL: <a href="http://www.w3.org/TR/css3-box">http://www.w3.org/TR/css3-box</a>
2200 <dt id="biblio-css3-marquee"><a class="self-link" href="#biblio-css3-marquee"></a>[CSS3-MARQUEE]
2201 <dd>Bert Bos. <a href="http://www.w3.org/TR/css3-marquee">CSS Marquee Module Level 3</a>. 14 October 2014. NOTE. URL: <a href="http://www.w3.org/TR/css3-marquee">http://www.w3.org/TR/css3-marquee</a>
2202 <dt id="biblio-css3-regions"><a class="self-link" href="#biblio-css3-regions"></a>[CSS3-REGIONS]
2203 <dd>Rossen Atanassov; Alan Stearns. <a href="http://www.w3.org/TR/css-regions-1/">CSS Regions Module Level 1</a>. 9 October 2014. WD. URL: <a href="http://www.w3.org/TR/css-regions-1/">http://www.w3.org/TR/css-regions-1/</a>
2204 <dt id="biblio-cssom-view"><a class="self-link" href="#biblio-cssom-view"></a>[CSSOM-VIEW]
2205 <dd>Simon Pieters; Glenn Adams. <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a>. 17 December 2013. WD. URL: <a href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a>
2206 </dl>
2207 <h2 class="no-num heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
2208 <table class="proptable data">
2209 <thead>
2210 <tr>
2211 <th scope="col">Name
2212 <th scope="col">Value
2213 <th scope="col">Initial
2214 <th scope="col">Applies to
2215 <th scope="col">Inh.
2216 <th scope="col">%ages
2217 <th scope="col">Media
2218 <th scope="col">Animatable
2219 <th scope="col">Canonical order
2220 <th scope="col">Computed value
2221 <tbody>
2222 <tr>
2223 <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-x">overflow-x</a>
2224 <td>visible | hidden | clip | scroll | auto
2225 <td>visible
2226 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
2227 <td>no
2228 <td>N/A
2229 <td>visual
2230 <td>no
2231 <td>per grammar
2232 <td>see below
2233 <tr>
2234 <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-y">overflow-y</a>
2235 <td>visible | hidden | clip | scroll | auto
2236 <td>visible
2237 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
2238 <td>no
2239 <td>N/A
2240 <td>visual
2241 <td>no
2242 <td>per grammar
2243 <td>see below
2244 <tr>
2245 <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow">overflow</a>
2246 <td>visible | hidden | clip | scroll | auto
2247 <td>see individual properties
2248 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
2249 <td>no
2250 <td>N/A
2251 <td>visual
2252 <td>no
2253 <td>per grammar
2254 <td>see individual properties
2255 <tr>
2256 <th scope="row"><a class="css" data-link-type="property" href="#propdef-continue">continue</a>
2257 <td>auto | overflow | paginate | fragments | discard
2258 <td>auto
2259 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
2260 <td>no
2261 <td>N/A
2262 <td>visual
2263 <td>no
2264 <td>per grammar
2265 <td>see below
2266 <tr>
2267 <th scope="row"><a class="css" data-link-type="property" href="#propdef-max-lines">max-lines</a>
2268 <td>none | <integer>
2269 <td>none
2270 <td>fragment boxes
2271 <td>no
2272 <td>N/A
2273 <td>visual
2274 <td>as integer
2275 <td>per grammar
2276 <td>specified value
2277 </table>
2278 <h2 class="no-num heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
2279 <div style="counter-reset:issue">
2280 <div class="issue">undefined term?<a href="#issue-18c1c008"> ↵ </a></div>
2281 <div class="issue">
2282 Should we try to define it at all and just leave pieces undefined?
2283 <a href="#issue-1baddb1e"> ↵ </a></div>
2284 <div class="issue">
2285 The following definition should be rewritten to use
2286 the concept of <a href="http://dev.w3.org/csswg/css-transforms/#3d-rendering-context">3D rendering context</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>
2287 and related terms,
2288 particularly once those concepts stabilize following changes
2289 proposed in the CSS WG meeting on the morning of 2014-01-28.
2290 <a href="#issue-6b232bb5"> ↵ </a></div>
2291 <div class="issue">which belong in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a><a href="#issue-101a26b2"> ↵ </a></div>
2292 <div class="issue">undefined concept!<a href="#issue-1b139c15"> ↵ </a></div>
2293 <div class="issue">undefined term!<a href="#issue-2d1dc4f9"> ↵ </a></div>
2294 <div class="issue">MORE HERE!<a href="#issue-75780f3f"> ↵ </a></div>
2295 <div class="issue">
2296 I wrote this definition off the top of my head,
2297 so it can’t possibly be right.
2298 It’s missing tons of pieces!
2299 <a href="#issue-e889eac0"> ↵ </a></div>
2300 <div class="issue">
2301 The handling of preserve-3d subtrees here is probably wrong;
2302 the elements should probably count
2303 only towards the overflow of the element that flattens them.
2304 <a href="#issue-521d48c7"> ↵ </a></div>
2305 <div class="issue">
2306 This concept has been proposed for some uses, such as for
2307 determining what the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-ui-3/#propdef-outline">outline</a> property goes around, and
2308 as the basis of a coordinate system for specifying clips and masks,
2309 but it’s not clear if it’s needed.
2310 <a href="#issue-3930f393"> ↵ </a></div>
2311 <div class="issue">
2312 If needed, define more formally, as for scrollable overflow above.
2313 (Maybe even share the definitions in an appropriate way!)
2314 <a href="#issue-42ea3c29"> ↵ </a></div>
2315 <div class="issue"> Mozilla implements -moz-hidden-unscrollable,
2316 which is similar to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>,
2317 except that it does not cause the element to establish a BFC.
2318 Should we match that?<a href="#issue-a9ea8890"> ↵ </a></div>
2319 <div class="issue"> import examples from <a data-link-type="biblio" href="#biblio-css3-box">[CSS3-BOX]</a>.<a href="#issue-402eb70c"> ↵ </a></div>
2320 <div class="issue">
2321 Explain which directions allow scrolling and which don’t,
2322 as a function of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a>
2323 (including propagation of <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> to the ICB).
2324 <a href="#issue-c318b1c1"> ↵ </a></div>
2325 <div class="issue">
2326 <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> describes an <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property,
2327 but it has not picked up implementation experience
2328 that the working group is aware of.
2329 Should this document treat <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> as a defunct proposal,
2330 or should this document describe the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property
2331 and attempt to revive it,
2332 despite that implementations have implemented
2333 <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> and <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> instead?
2334 <a href="#issue-52e2a181"> ↵ </a></div>
2335 <div class="issue"> The naming of this property and its values is preliminary.
2336 This was initially proposed as
2337 "fragmentation: auto | none | break | clone | page"
2338 in <a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html</a>,
2339 and there is not yet wide agreement as to which naming is better.<a href="#issue-b2c6e3da"> ↵ </a></div>
2340 <div class="issue"> This property is meant to generalize and replace <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a>.
2341 Once it is sufficiently stable in this specification,
2342 <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-regions-1/#propdef-region-fragment">region-fragment</a> should be removed from the regions specification in favor of this.<a href="#issue-d52b3e3d"> ↵ </a></div>
2343 <div class="issue"> When the element isn’t a <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-break-3/#fragmentation-container">fragmentation container</a> already,
2344 should this work by turning it directly into one,
2345 or by creating a <a data-link-type="dfn" href="#fragment-box">fragment box</a> inside it like <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a> does?<a href="#issue-36be54be"> ↵ </a></div>
2346 <div class="issue"> If we introduce a pseudo element that can select columns in a multicol,
2347 we would need to specify that auto computes to auto on it,
2348 or introduce a new value and have auto compute to that
2349 (but what would that value compute to on things that aren’t columns?).<a href="#issue-53644667"> ↵ </a></div>
2350 <div class="issue"> Write this section<a href="#issue-001d5014"> ↵ </a></div>
2351 <div class="issue"> Pages should be possible to style with @page rules. How does that work for nested pages?<a href="#issue-338ad0f3"> ↵ </a></div>
2352 <div class="issue">
2353 Should traditional pagination (e.g. when printing)
2354 be expressed through some magic in the computed value of <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>,
2355 or by inserting this in the UA stylesheet:
2357 <pre><code class="lang-css highlight"><span class="k">@media</span> <span class="o">(</span><span class="nt">overflow-block</span><span class="o">:</span> <span class="nt">paged</span><span class="o">),</span> <span class="o">(</span><span class="nt">overflow-block</span><span class="o">:</span> <span class="nt">optional-paged</span><span class="o">)</span> <span class="p">{</span>
2358 <span class="nd">:root</span> <span class="p">{</span>
2359 <span class="n">continue</span><span class="o">:</span> <span class="n">paginate</span><span class="p">;</span>
2360 <span class="p">}</span>
2361 <span class="p">}</span></code></pre>
2363 <a href="#issue-67ad77e5"> ↵ </a>
2364 </div>
2365 <div class="issue"> Traditional pagination (e.g. when printing) assumes that
2366 :root is contained in the page box,
2367 rather than having the page box be a pseudo element child of :root.
2368 Can we work around that using something similar to fragment boxes?
2369 Or maybe by having a fragment box (reproducing :root) inside a page box inside :root?<a href="#issue-6eb3c644"> ↵ </a></div>
2370 <div class="issue"> How does the page box model work when it is a child of a regular css box?<a href="#issue-64583cf9"> ↵ </a></div>
2371 <div class="issue"> The initial proposal in <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> and implemantation from Opera
2372 used 4 values instead of <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a>:
2373 "paged-x | paged-y | paged-x-controls | paged-y-controls".
2374 Should this property also include these values,
2375 or are they better handled as separate properties?
2376 (e.g.: "pagination-layout: auto | horizontal | vertical", "pagination-controls: auto | none")<a href="#issue-e9f64b3d"> ↵ </a></div>
2377 <div class="issue"> Ability to display N pages at once
2378 rather than just one page at once?
2379 Could this be a value of "pagination-layout", such as:
2380 "pagination-layout: horizontal 2;"<a href="#issue-55c97ed8"> ↵ </a></div>
2381 <div class="issue"> Brad Kemper has proposed a model for combining pagination and
2382 fragment overflow, which also deals with displaying multiple pages.
2383 <a href="http://www.w3.org/mid/[email protected]">http://www.w3.org/mid/[email protected]</a><a href="#issue-64de292b"> ↵ </a></div>
2384 <div class="issue">
2385 The current implementation of paginated overflow uses
2386 the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a>/<a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a>/<a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> properties
2387 rather than the <a class="property" data-link-type="propdesc" href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property as proposed
2388 in the <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> draft
2389 (which also matches the <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> proposal).
2390 or the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property as described here.
2391 <a href="#issue-360561bd"> ↵ </a></div>
2392 <div class="issue">Or is it as though it’s a next sibling of
2393 the element? Need to figure out exactly how this interacts with
2394 other box-level fixup.<a href="#issue-74f423ed"> ↵ </a></div>
2395 <div class="issue">though it defines <i>multi-column element</i><a href="#issue-928903ce"> ↵ </a></div>
2396 <div class="issue">Should a forced break that breaks to
2397 an outer fragmentation context cause a new fragment of a single
2398 fragment box or a new fragment box?<a href="#issue-060b1de8"> ↵ </a></div>
2399 <div class="issue">Should we find a term other than
2400 <a data-link-type="dfn" href="#fragment-box">fragment box</a> here to make this a little less confusing?<a href="#issue-5b4b087c"> ↵ </a></div>
2401 <div class="issue">
2402 What if we want to be able to style the pieces of an element
2403 split within another type of fragmentation context?
2404 These rules prevent ever using <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> for that,
2405 despite that the name seems the most logical name for such a feature.
2406 <a href="#issue-c4f3aedb"> ↵ </a></div>
2407 <div class="issue">
2408 We should specify that <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> does not apply
2409 to at least some table parts,
2410 and perhaps other elements as well.
2411 We need to determine exactly which ones.
2412 <a href="#issue-25a84ff4"> ↵ </a></div>
2413 <div class="issue">
2414 This specification needs to say which type of
2415 fragmentation context is created
2416 so that it’s clear which values of the <a class="property" data-link-type="propdesc">break-*</a> properties
2417 cause breaks within this context.
2418 We probably want <span class="css">break-*: region</span> to apply.
2419 <a href="#issue-6c1669e3"> ↵ </a></div>
2420 <div class="issue">
2421 This specification needs a processing model
2422 that will apply in cases where the layout containing the
2423 fragments has characteristics that use the intrinsic size of the fragments
2424 to change the amount of space available for them,
2425 such as <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a>.
2426 There has already been some work on such a processing model
2427 in <a data-link-type="biblio" href="#biblio-css3-regions">[CSS3-REGIONS]</a>,
2428 and the work done on a model there,
2429 and the editors of that specification,
2430 should inform what happens in this specification.
2431 <a href="#issue-08d6a80e"> ↵ </a></div>
2432 <div class="issue">
2433 Depending on future discussions,
2434 this <span class="css">::nth-fragment(an+b)</span> syntax
2435 may be replaced with
2436 the new <span class="css">::fragment:nth(an+b)</span> syntax.
2437 <a href="#issue-0e3bec77"> ↵ </a></div>
2438 <div class="issue">
2439 Should this apply to continue:fragments only,
2440 or also to continue:paginate?
2441 (If it applies,
2442 then stricter property restrictions would be needed
2443 for continue:paginate.)
2444 <a href="#issue-6e8f615f"> ↵ </a></div>
2445 <div class="issue">Does this need to be specified in
2446 the cascading module as well?<a href="#issue-8f881f96"> ↵ </a></div>
2447 <div class="issue">Need to specify exactly how this works,
2448 but it depends on
2449 having <a class="property" data-link-type="propdesc">display-inside</a> and <a class="property" data-link-type="propdesc">display-outside</a> specified.<a href="#issue-d98e732d"> ↵ </a></div>
2450 <div class="issue">
2451 This inheritance rule allows specifying styles indirectly
2452 (by using explicit <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-cascade-4/#valdef-all-inherit">inherit</a> or using default inheritance
2453 on properties that don’t apply to <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-pseudo-4/#selectordef-first-letter">::first-letter</a>)
2454 that can’t be specified directly
2455 (based on the rules in the next section).
2456 This is a problem.
2457 The restrictions that apply to styling inside fragments
2458 should also apply to inheritance from fragments.
2459 <a href="#issue-d95b27f9"> ↵ </a></div>
2460 <div class="issue">
2461 Should this apply to continue:fragments only,
2462 or also to continue:paginate?
2463 <a href="#issue-d00a7cbb"> ↵ </a></div>
2464 <div class="issue">
2465 If there are multiple boundaries between this line
2466 and the previous, where exactly (in terms of element
2467 boundaries) is the break forced?
2468 <a href="#issue-9488ec29"> ↵ </a></div>
2469 <div class="issue">Should this apply to fragment overflow only, or also
2470 to pagination?
2471 Given what we’re doing with the continue property,
2472 it should actually apply to any fragmentainer.<a href="#issue-f6e7b6c3"> ↵ </a></div>
2473 <div class="issue"> having max-lines do nothing on regular elements is not ideal.
2474 When applied to non fragmentainers,
2475 it should probably cause <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> to compute to <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a>
2476 so that you only need to reach for one property rather than 2 to get
2477 that effect.<a href="#issue-13fa8ed4"> ↵ </a></div>
2478 <div class="issue">
2479 This specification should define useful behavior
2480 for all values of <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> and <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a>
2481 in static media (such as print).
2482 Current implementation behavior is quite poor and
2483 produces unexpected results when authors have not considered
2484 what will happen when
2485 the content they produce for interactive media
2486 is printed.
2487 <a href="#issue-de91ba9b"> ↵ </a></div>
2488 </div></body>
2489 </html>
