css-overflow/Overview.html@bab8c985fbe9
css-overflow/Overview.html
Thu, 04 Feb 2016 09:45:32 +1100
- author
- Florian Rivoal <[email protected]>
- date
- Thu, 04 Feb 2016 09:45:32 +1100
- changeset 17019
- bab8c985fbe9
- parent 16999
- 02a27e98e286
- permissions
- -rw-r--r--
Update affiliation
1 <!doctype html><html lang="en">
2 <head>
3 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
4 <title>CSS Overflow Module Level 4</title>
5 <meta content="width=device-width, initial-scale=1" name="viewport">
6 <meta content="exploring" name="csswg-work-status">
7 <meta content="ED" name="w3c-status">
8 <link href="../default.css" rel="stylesheet" type="text/css">
9 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
10 <style>
11 body {
12 background-image: url("https://www.w3.org/StyleSheets/TR/logo-ED");
13 };
14 </style>
15 <meta content="Bikeshed 1.0.0" name="generator">
16 <style>
17 table.source-demo-pair {
18 width: 100%;
19 }
21 .in-cards-demo {
22 width: 13em;
23 height: 8em;
25 padding: 4px;
26 border: medium solid blue;
27 margin: 6px;
29 font: medium/1.3 Times New Roman, Times, serif;
30 white-space: nowrap;
31 }
33 .bouncy-columns-demo {
34 width: 6em;
35 height: 10em;
36 float: left;
37 margin: 1em;
38 font: medium/1.25 Times New Roman, Times, serif;
39 white-space: nowrap;
40 }
41 .bouncy-columns-demo.one {
42 background: aqua; color: black;
43 transform: rotate(-3deg);
44 }
45 .bouncy-columns-demo.two {
46 background: yellow; color: black;
47 transform: rotate(3deg);
48 }
50 .article-font-inherit-demo {
51 font: 1em/1.25 Times New Roman, Times, serif;
52 white-space: nowrap;
53 }
54 .article-font-inherit-demo.one {
55 width: 12em;
56 font-size: 1.5em;
57 margin-bottom: 1em;
58 height: 4em;
59 }
60 .article-font-inherit-demo.two {
61 width: 11em;
62 margin-left: 5em;
63 margin-right: 2em;
64 }
66 .dark-columns-demo {
67 width: 6em;
68 height: 10em;
69 float: left;
70 margin-right: 1em;
71 font: medium/1.25 Times New Roman, Times, serif;
72 white-space: nowrap;
73 }
74 .dark-columns-demo.one {
75 background: aqua; color: black;
76 }
77 .dark-columns-demo.one :link {
78 color: blue;
79 }
80 .dark-columns-demo.one :visited {
81 color: purple;
82 }
83 .dark-columns-demo.two {
84 background: navy; color: white;
85 }
86 .dark-columns-demo.two :link {
87 color: aqua;
88 }
89 .dark-columns-demo.two :visited {
90 color: fuchsia;
91 }
93 .article-max-lines-demo {
94 font: 1em/1.25 Times New Roman, Times, serif;
95 white-space: nowrap;
96 }
97 .article-max-lines-demo.one::first-letter {
98 font-size: 2em;
99 line-height: 0.9;
100 }
101 .article-max-lines-demo.one {
102 font-size: 1.5em;
103 width: 16em;
104 }
105 .article-max-lines-demo.two {
106 width: 11.5em;
107 float: left; margin-right: 1em;
108 }
109 .article-max-lines-demo.three {
110 width: 11.5em;
111 float: left;
112 }
113 </style>
114 <style>.highlight .hll { background-color: #ffffcc }
115 .highlight { background: #ffffff; }
116 .highlight .c { color: #708090 } /* Comment */
117 .highlight .k { color: #990055 } /* Keyword */
118 .highlight .l { color: #000000 } /* Literal */
119 .highlight .n { color: #0077aa } /* Name */
120 .highlight .o { color: #999999 } /* Operator */
121 .highlight .p { color: #999999 } /* Punctuation */
122 .highlight .cm { color: #708090 } /* Comment.Multiline */
123 .highlight .cp { color: #708090 } /* Comment.Preproc */
124 .highlight .c1 { color: #708090 } /* Comment.Single */
125 .highlight .cs { color: #708090 } /* Comment.Special */
126 .highlight .kc { color: #990055 } /* Keyword.Constant */
127 .highlight .kd { color: #990055 } /* Keyword.Declaration */
128 .highlight .kn { color: #990055 } /* Keyword.Namespace */
129 .highlight .kp { color: #990055 } /* Keyword.Pseudo */
130 .highlight .kr { color: #990055 } /* Keyword.Reserved */
131 .highlight .kt { color: #990055 } /* Keyword.Type */
132 .highlight .ld { color: #000000 } /* Literal.Date */
133 .highlight .m { color: #000000 } /* Literal.Number */
134 .highlight .s { color: #a67f59 } /* Literal.String */
135 .highlight .na { color: #0077aa } /* Name.Attribute */
136 .highlight .nc { color: #0077aa } /* Name.Class */
137 .highlight .no { color: #0077aa } /* Name.Constant */
138 .highlight .nd { color: #0077aa } /* Name.Decorator */
139 .highlight .ni { color: #0077aa } /* Name.Entity */
140 .highlight .ne { color: #0077aa } /* Name.Exception */
141 .highlight .nf { color: #0077aa } /* Name.Function */
142 .highlight .nl { color: #0077aa } /* Name.Label */
143 .highlight .nn { color: #0077aa } /* Name.Namespace */
144 .highlight .py { color: #0077aa } /* Name.Property */
145 .highlight .nt { color: #669900 } /* Name.Tag */
146 .highlight .nv { color: #0077aa } /* Name.Variable */
147 .highlight .ow { color: #999999 } /* Operator.Word */
148 .highlight .mb { color: #000000 } /* Literal.Number.Bin */
149 .highlight .mf { color: #000000 } /* Literal.Number.Float */
150 .highlight .mh { color: #000000 } /* Literal.Number.Hex */
151 .highlight .mi { color: #000000 } /* Literal.Number.Integer */
152 .highlight .mo { color: #000000 } /* Literal.Number.Oct */
153 .highlight .sb { color: #a67f59 } /* Literal.String.Backtick */
154 .highlight .sc { color: #a67f59 } /* Literal.String.Char */
155 .highlight .sd { color: #a67f59 } /* Literal.String.Doc */
156 .highlight .s2 { color: #a67f59 } /* Literal.String.Double */
157 .highlight .se { color: #a67f59 } /* Literal.String.Escape */
158 .highlight .sh { color: #a67f59 } /* Literal.String.Heredoc */
159 .highlight .si { color: #a67f59 } /* Literal.String.Interpol */
160 .highlight .sx { color: #a67f59 } /* Literal.String.Other */
161 .highlight .sr { color: #a67f59 } /* Literal.String.Regex */
162 .highlight .s1 { color: #a67f59 } /* Literal.String.Single */
163 .highlight .ss { color: #a67f59 } /* Literal.String.Symbol */
164 .highlight .vc { color: #0077aa } /* Name.Variable.Class */
165 .highlight .vg { color: #0077aa } /* Name.Variable.Global */
166 .highlight .vi { color: #0077aa } /* Name.Variable.Instance */
167 .highlight .il { color: #000000 } /* Literal.Number.Integer.Long */
168 .highlight { background: hsl(24, 20%, 95%); }
169 code.highlight { padding: .1em; border-radius: .3em; }
170 pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
171 </style>
172 </head>
173 <body class="h-entry">
174 <div class="head">
175 <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> </a> </p>
176 <h1 class="p-name no-ref" id="title">CSS Overflow Module Level 4</h1>
177 <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2016-02-04">4 February 2016</time></span></h2>
178 <div data-fill-with="spec-metadata">
179 <dl>
180 <dt>This version:
181 <dd><a class="u-url" href="https://drafts.csswg.org/css-overflow-4/">https://drafts.csswg.org/css-overflow-4/</a>
182 <dt>Latest version:
183 <dd><a href="https://www.w3.org/TR/css-overflow-4/">https://www.w3.org/TR/css-overflow-4/</a>
184 <dt>Previous Versions:
185 <dd><a href="https://www.w3.org/TR/css-overflow-3/" rel="previous">https://www.w3.org/TR/css-overflow-3/</a>
186 <dt>Feedback:
187 <dd><span><a href="mailto:[email protected]?subject=%5Bcss-overflow%5D%20YOUR%20TOPIC%20HERE">[email protected]</a> with subject line “<kbd>[css-overflow] <i data-lt="">… message topic …</i></kbd>†(<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span>
188 <dt>Issue Tracking:
189 <dd><a href="#issues-index">Inline In Spec</a>
190 <dt class="editor">Editors:
191 <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>)
192 <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">On behalf of Bloomberg</span>) <a class="u-email email" href="mailto:[email protected]">[email protected]</a>
193 <dt>Change Log:
194 <dd><span><a href="https://hg.csswg.org/drafts/log/tip/css-overflow/Overview.bs">from 27 January 2015 to the present</a></span>
195 <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>
196 <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>
197 </dl>
198 </div>
199 <div data-fill-with="warning"></div>
200 <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2016 <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. </p>
201 <hr title="Separator for header">
202 </div>
203 <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
204 <div class="p-summary" data-fill-with="abstract">
205 <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>
206 <a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
207 (such as HTML and XML)
208 on screen, on paper, in speech, etc.
209 </div>
210 <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
211 <div data-fill-with="status">
212 <p> This is a public copy of the editors’ draft.
213 It is provided for discussion only and may change at any moment.
214 Its publication here does not imply endorsement of its contents by W3C.
215 Don’t cite this document other than as work in progress. </p>
216 <p> The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:[email protected]?Subject=%5Bcss-overflow%5D%20PUT%20SUBJECT%20HERE">[email protected]</a> (see <a href="http://www.w3.org/Mail/Request">instructions</a>)
217 is preferred for discussion of this specification.
218 When sending e-mail,
219 please put the text “css-overflow†in the subject,
220 preferably like this:
221 “[css-overflow] <em>…summary of comment…</em>†</p>
222 <p> This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of the <a href="http://www.w3.org/Style/">Style Activity</a>). </p>
223 <p> This document was produced by a group operating under
224 the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>.
225 W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
226 that page also includes instructions for disclosing a patent.
227 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> 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>. </p>
228 <p> This document is governed by the <a href="http://www.w3.org/2015/Process-20150901/" id="w3c_process_revision">1 September 2015 W3C Process Document</a>. </p>
229 <p></p>
230 </div>
231 <div data-fill-with="at-risk"></div>
232 <nav data-fill-with="table-of-contents" id="toc">
233 <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
234 <ol class="toc" role="directory">
235 <li><a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
236 <li>
237 <a href="#overflow-concepts"><span class="secno">2</span> <span class="content">Types of overflow</span></a>
238 <ol class="toc">
239 <li><a href="#ink-overflow"><span class="secno">2.1</span> <span class="content">Ink overflow</span></a>
240 <li><a href="#scrollable-overflow"><span class="secno">2.2</span> <span class="content">Scrollable overflow</span></a>
241 <li><a href="#border-box-overflow"><span class="secno">2.3</span> <span class="content">Border box overflow</span></a>
242 </ol>
243 <li><a href="#overflow-properties"><span class="secno">3</span> <span class="content">Overflow properties</span></a>
244 <li><a href="#fragmentation"><span class="secno">4</span> <span class="content">Fragmentation of overflow</span></a>
245 <li><a href="#paginated-overflow"><span class="secno">5</span> <span class="content">Paginated overflow</span></a>
246 <li>
247 <a href="#fragment-overflow"><span class="secno">6</span> <span class="content">Fragment overflow</span></a>
248 <ol class="toc">
249 <li>
250 <a href="#fragment-styling"><span class="secno">6.1</span> <span class="content">Fragment styling</span></a>
251 <ol class="toc">
252 <li><a href="#fragment-pseudo-element"><span class="secno">6.1.1</span> <span class="content">The ::nth-fragment() pseudo-element</span></a>
253 <li><a href="#style-of-fragments"><span class="secno">6.1.2</span> <span class="content">Styling of fragments</span></a>
254 <li><a href="#style-in-fragments"><span class="secno">6.1.3</span> <span class="content">Styling inside fragments</span></a>
255 </ol>
256 <li><a href="#max-lines"><span class="secno">6.2</span> <span class="content">The <span class="property">max-lines</span> property</span></a>
257 </ol>
258 <li><a href="#static-media"><span class="secno">7</span> <span class="content">Overflow in static media</span></a>
259 <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments</span></a>
260 <li>
261 <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
262 <ol class="toc">
263 <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
264 <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
265 <li>
266 <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
267 <ol class="toc">
268 <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
269 <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
270 <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
271 </ol>
272 </ol>
273 <li>
274 <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
275 <ol class="toc">
276 <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
277 <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
278 </ol>
279 <li>
280 <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
281 <ol class="toc">
282 <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
283 <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
284 </ol>
285 <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
286 <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
287 </ol>
288 </nav>
289 <main>
290 <p></p>
291 <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
292 <p> In CSS Level 1 <a data-link-type="biblio" href="#biblio-css1">[CSS1]</a>, placing more content than would fit
293 inside an element with a specified size
294 was generally an authoring error.
295 Doing so caused the content to extend
296 outside the bounds of the element,
297 which would likely cause
298 that content to overlap with other elements. </p>
299 <p> 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,
300 which allows authors to have overflow be handled by scrolling,
301 which means it is no longer an authoring error.
302 It also allows authors to specify
303 that overflow is handled by clipping,
304 which makes sense when the author’s intent
305 is that the content not be shown. </p>
306 <p> However, scrolling is not the only way
307 to present large amounts of content,
308 and may even not be the optimal way.
309 After all, the codex replaced the scroll
310 as the common format for large written works
311 because of its advantages. </p>
312 <p> This specification introduces
313 a mechanism for Web pages to specify
314 that an element of a page should handle overflow
315 through pagination rather than through scrolling. </p>
316 <p> This specification also extends the concept of overflow
317 in another direction.
318 Instead of requiring that authors specify a single area
319 into which the content of an element must flow,
320 this specification allows authors to specify multiple fragments,
321 each with their own dimensions and styles,
322 so that the content of the element can flow from one to the next,
323 using as many as needed to place the content without overflowing. </p>
324 <p> In both of these cases, implementations must
325 break the content in the block-progression dimension.
326 Implementations must do this is described
327 in the CSS Fragmentation Module <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a>. </p>
328 <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>
329 <p> CSS uses the term <dfn data-dfn-type="dfn" data-noexport="" id="overflow">overflow<a class="self-link" href="#overflow"></a></dfn> to describe
330 the contents of a box
331 that extend outside that one of that box’s edges
332 (i.e., its <i>content edge</i>, <i>padding edge</i>, <i>border edge</i>, or <i>margin edge</i>).
333 The overflow might be described as the elements or features
334 that cause this overflow,
335 the non-rectangular region occupied by these features,
336 or, more commonly,
337 as the minimal rectangle that bounds that region.
338 A box’s overflow is computed based on the boxes and styles
339 of the box and of all its descendants whose containing block chain <span class="issue" id="issue-18c1c008"><a class="self-link" href="#issue-18c1c008"></a>undefined term?</span> includes the box. </p>
340 <p> In most cases, any of these types of overflow
341 can be computed for any box
342 from the bounds and properties of that box,
343 and from the overflow (of that type)
344 of each of its children.
345 However, this is not always the case; for example,
346 when <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/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
347 some of the children, their descendants with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> must also be examined. </p>
348 <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>
349 <p> 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
350 is the part of that box and its contents that
351 creates a visual effect outside of
352 the box’s border box. </p>
353 <p> Since some effects in CSS (for example, the blurs in <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/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="https://drafts.csswg.org/css-backgrounds-3/#box-shadow">box-shadow</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>)
354 do not define what visual extent they cover, the extent
355 of the <a data-link-type="dfn" href="#ink-overflow0">ink overflow</a> is undefined. </p>
356 <p class="issue" id="issue-1baddb1e"><a class="self-link" href="#issue-1baddb1e"></a> Should we try to define it at all and just leave pieces undefined? </p>
357 <p> 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
358 occupied by the <a data-link-type="dfn" href="#ink-overflow0">ink overflow</a>, and the <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
359 the minimal rectangle whose axis is aligned to the box’s axes
360 and contains the <a data-link-type="dfn" href="#ink-overflow-region">ink overflow region</a>.
361 Note that the <a data-link-type="dfn" href="#ink-overflow-rectangle">ink overflow rectangle</a> is a rectangle
362 in the box’s coordinate system, but might be non-rectangular
363 in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. </p>
364 <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>
365 <p> 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
366 set of things extending outside of that box’s padding edge
367 for which a scrolling mechanism needs to be provided. </p>
368 <p class="issue" id="issue-766655c2"><a class="self-link" href="#issue-766655c2"></a> The following definition should be rewritten to use
369 the concept of <a href="https://drafts.csswg.org/css-transforms/#3d-rendering-context">3D rendering context</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> and related terms,
370 particularly once those concepts stabilize following changes
371 proposed in the CSS WG meeting on the morning of 2014-01-28. </p>
372 <p> Given the following definitions <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>: </p>
373 <dl>
374 <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>
375 <dd> A child box B of a containing block C is a 3d-preserving
376 child if it has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-style">transform-style: preserve-3d</a> and the user-agent is not required to flatten it
377 based on the <a href="https://www.w3.org/TR/css3-transforms/#transform-style-property">requirements</a> in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>.
378 <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>
379 <dd> A child C of a box P is a non-3d-preserving-child if
380 it is not a <a data-link-type="dfn" href="#3d-preserving-child">3d-preserving child</a>.
381 <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>
382 <dd> Box D is a 3d-preserving descendant of box A if A is
383 an ancestor of D, and D and all of the boxes (if any)
384 in the containing block chain from D to A
385 are <a data-link-type="dfn" href="#3d-preserving-child">3d-preserving child</a> boxes.
386 </dl>
387 <p>The scrollable overflow of a box is the union of the following things,
388 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>
389 <ul>
390 <li>
391 for the box and all of its <a data-link-type="dfn" href="#3d-preserving-descendant">3d-preserving descendant</a> boxes:
392 <ul>
393 <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)
394 <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
395 <li><span class="issue" id="issue-75780f3f"><a class="self-link" href="#issue-75780f3f"></a>MORE HERE!</span>
396 </ul>
397 <li> for all the <a data-link-type="dfn" href="#non-3d-preserving-child">non-3d-preserving child</a> boxes of the
398 box and its <a data-link-type="dfn" href="#3d-preserving-descendant">3d-preserving descendant</a> boxes,
399 the scrollable overflow of the box
400 </ul>
401 <p class="issue" id="issue-e889eac0"><a class="self-link" href="#issue-e889eac0"></a> I wrote this definition off the top of my head,
402 so it can’t possibly be right.
403 It’s missing tons of pieces! </p>
404 <p class="issue" id="issue-521d48c7"><a class="self-link" href="#issue-521d48c7"></a> The handling of preserve-3d subtrees here is probably wrong;
405 the elements should probably count
406 only towards the overflow of the element that flattens them. </p>
407 <p> 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
408 occupied by the <a data-link-type="dfn" href="#scrollable-overflow0">scrollable overflow</a>, and the <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
409 the minimal rectangle whose axis is aligned to the box’s axes
410 and contains the <a data-link-type="dfn" href="#scrollable-overflow-region">scrollable overflow region</a>.
411 Note that the <a data-link-type="dfn" href="#scrollable-overflow-rectangle">scrollable overflow rectangle</a> is a rectangle
412 in the box’s coordinate system, but might be non-rectangular
413 in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. </p>
414 <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>
415 <p class="issue" id="issue-3930f393"><a class="self-link" href="#issue-3930f393"></a> This concept has been proposed for some uses, such as for
416 determining what the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-3/#propdef-outline">outline</a> property goes around, and
417 as the basis of a coordinate system for specifying clips and masks,
418 but it’s not clear if it’s needed. </p>
419 <p> The <dfn data-dfn-type="dfn" data-noexport="" id="border-box-overflow0">border-box overflow<a class="self-link" href="#border-box-overflow0"></a></dfn> of a box is the
420 union of the box’s border edge and the border edges of
421 the box’s descendants.</p>
422 <p></p>
423 <p class="issue" id="issue-42ea3c29"><a class="self-link" href="#issue-42ea3c29"></a> If needed, define more formally, as for scrollable overflow above.
424 (Maybe even share the definitions in an appropriate way!) </p>
425 <p> 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
426 occupied by the <a data-link-type="dfn" href="#border-box-overflow0">border-box overflow</a>, and the <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
427 the minimal rectangle whose axis is aligned to the box’s axes
428 and contains the <a data-link-type="dfn" href="#border-box-overflow-region">border-box overflow region</a>.
429 Note that the <a data-link-type="dfn" href="#border-box-overflow-rectangle">border-box overflow rectangle</a> is a rectangle
430 in the box’s coordinate system, but might be non-rectangular
431 in other coordinate systems due to transforms <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a>. </p>
432 <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>
433 <p> The <a class="property" data-link-type="propdesc" href="#propdef-overflow-x">overflow-x</a> property specifies
434 the handling of overflow in the horizontal direction
435 (i.e., overflow from the left and right sides of the box),
436 and the <a class="property" data-link-type="propdesc" href="#propdef-overflow-y">overflow-y</a> property specifies the handling
437 of overflow in the vertical direction
438 (i.e., overflow from the top and bottom sides of the box) </p>
439 <table class="def propdef" data-link-for-hint="overflow-x">
440 <tbody>
441 <tr>
442 <th>Name:
443 <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>
444 <tr class="value">
445 <th>Value:
446 <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> <a data-link-type="grammar" href="https://drafts.csswg.org/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="https://drafts.csswg.org/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="https://drafts.csswg.org/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="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>
447 <tr>
448 <th>Initial:
449 <td><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>
450 <tr>
451 <th>Applies to:
452 <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>
453 <tr>
454 <th>Inherited:
455 <td>no
456 <tr>
457 <th>Percentages:
458 <td>N/A
459 <tr>
460 <th>Media:
461 <td>visual
462 <tr>
463 <th>Computed value:
464 <td>see below
465 <tr>
466 <th>Animatable:
467 <td>no
468 <tr>
469 <th>Canonical order:
470 <td><abbr title="follows order of property value definition">per grammar</abbr>
471 </table>
472 <p> The <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property is a shorthand property
473 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> to the value specified for <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a>. </p>
474 <table class="def propdef" data-link-for-hint="overflow">
475 <tbody>
476 <tr>
477 <th>Name:
478 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-overflow">overflow<a class="self-link" href="#propdef-overflow"></a></dfn>
479 <tr class="value">
480 <th>Value:
481 <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> <a data-link-type="grammar" href="https://drafts.csswg.org/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="https://drafts.csswg.org/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="https://drafts.csswg.org/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="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>
482 <tr>
483 <th>Initial:
484 <td>see individual properties
485 <tr>
486 <th>Applies to:
487 <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>
488 <tr>
489 <th>Inherited:
490 <td>no
491 <tr>
492 <th>Percentages:
493 <td>N/A
494 <tr>
495 <th>Media:
496 <td>visual
497 <tr>
498 <th>Computed value:
499 <td>see individual properties
500 <tr>
501 <th>Animatable:
502 <td>no
503 <tr>
504 <th>Canonical order:
505 <td><abbr title="follows order of property value definition">per grammar</abbr>
506 </table>
507 <div id="overflow-computed-values">
508 <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> are determined from the cascaded values <a data-link-type="biblio" href="#biblio-css3cascade">[CSS3CASCADE]</a> based on the following rules:</p>
509 <ol>
510 <li> If one cascaded values is <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> and the other is not,
511 then computed values are the cascaded values
512 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>.
513 <li> Otherwise, if both cascaded values are <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> and the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-containment/#propdef-contain">contain</a> is
514 one that activates <a data-link-type="dfn" href="https://drafts.csswg.org/css-containment/#paint-containment">paint containment</a> (e.g. <span class="css">contain:strict</span> or <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-containment/#propdef-contain">contain: paint</a> or <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-containment/#propdef-contain">contain: layout paint</a>…),
515 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> are changed to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>.
516 <li> Otherwise, the computed values are as specified.
517 </ol>
518 </div>
519 <p>The values of these properties are:</p>
520 <dl>
521 <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>
522 <dd> There is no special handling of overflow, that is, it
523 may be rendered outside the block container.
524 <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>
525 <dd>This value indicates that
526 the content is clipped and that no scrolling user interface should be provided by the UA
527 to view the content outside the clipping region.
528 However, the content may still be scrolled programatically,
529 for example using the mechanisms defined in <a data-link-type="biblio" href="#biblio-cssom-view">[CSSOM-VIEW]</a>.
530 <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>
531 <dd>
532 Like <a class="css" data-link-type="maybe" href="#valdef-overflow-hidden">hidden</a>,
533 this value indicates that
534 the content is clipped
535 and that no scrolling user interface should be provided by the UA
536 to view the content outside the clipping region.
537 In addition, unlike <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: hidden</a> which still allows programmatic scrolling, <a class="css" data-link-type="propdesc" href="#propdef-overflow">overflow: clip</a> forbids scrolling entirely,
538 through any mechanism.
539 <p class="issue" id="issue-a9ea8890"><a class="self-link" href="#issue-a9ea8890"></a> Mozilla implements -moz-hidden-unscrollable,
540 which is similar to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>,
541 except that it does not cause the element to establish a BFC.
542 Should we match that?</p>
543 <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>
544 <dd>This value indicates that the content is clipped
545 and that if the user agent uses a scrolling mechanism
546 that is visible on the screen (such as a scroll bar or a panner),
547 that mechanism should be displayed for a box
548 whether or not any of its content is clipped.
549 This avoids any problem with scrollbars appearing
550 and disappearing in a dynamic environment.
551 When this value is specified and the target medium is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-4/#valdef-media-print">print</a>,
552 overflowing content may be printed.
553 <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>
554 <dd>The behavior of the <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a> value is user agent-dependent,
555 but should cause a scrolling mechanism to be provided for overflowing boxes.
556 </dl>
557 <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>,
558 content may be clipped to a UA’s document window by the native operating environment.</p>
559 <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>,
560 the element creates a block formatting context.</p>
561 <p>UAs must apply the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property
562 set on the root element to the viewport.
563 HTML UAs must instead apply the ‘overflow’ property
564 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
565 if the value on the root element is <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a>.
566 The <a class="css" data-link-type="maybe" href="#valdef-overflow-visible">visible</a> value when used for the viewport
567 must be interpreted as <a class="css" data-link-type="maybe" href="#valdef-overflow-auto">auto</a>.
568 The element from which the value is propagated
569 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>
570 <p>In the case of a scrollbar being placed on an edge of the element’s box,
571 it should be inserted between the inner border edge
572 and the outer padding edge.
573 Any space taken up by the scrollbars should be
574 taken out of (subtracted from the dimensions of)
575 the containing block formed by the element with the scrollbars.</p>
576 <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>
577 <p class="issue" id="issue-c318b1c1"><a class="self-link" href="#issue-c318b1c1"></a> Explain which directions allow scrolling and which don’t,
578 as a function of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> (including propagation of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> to the ICB). </p>
579 <p class="issue" id="issue-52e2a181"><a class="self-link" href="#issue-52e2a181"></a> <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> describes an <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property,
580 but it has not picked up implementation experience
581 that the working group is aware of.
582 Should this document treat <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> as a defunct proposal,
583 or should this document describe the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property
584 and attempt to revive it,
585 despite that implementations have implemented <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? </p>
586 <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>
587 <p>The <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property gives authors the ability
588 to request that content that does not fit inside an element
589 be fragmented (in the sense of <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a>),
590 and provides alternatives
591 for where the remaining content should continue.</p>
592 <p>Notably, this property explains traditional pagination,
593 and extends it further.</p>
594 <table class="def propdef" data-link-for-hint="continue">
595 <tbody>
596 <tr>
597 <th>Name:
598 <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-continue">continue<a class="self-link" href="#propdef-continue"></a></dfn>
599 <tr class="value">
600 <th>Value:
601 <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> <a data-link-type="grammar" href="https://drafts.csswg.org/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="https://drafts.csswg.org/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="https://drafts.csswg.org/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="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-continue-discard">discard</a>
602 <tr>
603 <th>Initial:
604 <td>auto
605 <tr>
606 <th>Applies to:
607 <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>
608 <tr>
609 <th>Inherited:
610 <td>no
611 <tr>
612 <th>Percentages:
613 <td>N/A
614 <tr>
615 <th>Media:
616 <td>visual
617 <tr>
618 <th>Computed value:
619 <td>see below
620 <tr>
621 <th>Animatable:
622 <td>no
623 <tr>
624 <th>Canonical order:
625 <td><abbr title="follows order of property value definition">per grammar</abbr>
626 </table>
627 <p class="issue" id="issue-b2c6e3da"><a class="self-link" href="#issue-b2c6e3da"></a> The naming of this property and its values is preliminary.
628 This was initially proposed as
629 "fragmentation: auto | none | break | clone | page"
630 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>,
631 and there is not yet wide agreement as to which naming is better.</p>
632 <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="https://drafts.csswg.org/css-regions-1/#propdef-region-fragment">region-fragment</a>.
633 Once it is sufficiently stable in this specification, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-regions-1/#propdef-region-fragment">region-fragment</a> should be removed from the regions specification in favor of this.</p>
634 <p class="note" role="note">Note: <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> replaces "overflow:fragments"
635 from earlier versions of this specification,
636 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>
637 <dl>
638 <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>
639 <dd>
640 <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a> may only occur as a computed value
641 if the element is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-regions-1/#css-region">CSS Region</a> other than the last one in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-regions-1/#region-chain">region chain</a>.
642 Content that doesn’t fit is pushed to the next region of the chain.
643 <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>
644 <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>
645 <dd>Content that doesn’t fit overflows, according to the <a class="property" data-link-type="propdesc" href="#propdef-overflow">overflow</a> property
646 <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>
647 <dd>
648 Content that doesn’t fit is discarded at a fragmentation break
649 <p class="note" role="note">Note: generalized from region-fragment: break; on the last region of a region chain</p>
650 <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="https://drafts.csswg.org/css-break-3/#fragmentation-container">fragmentation container</a> already,
651 should this work by turning it directly into one,
652 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>
653 <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>
654 <dd>
655 Content that doesn’t fit paginates.
656 This creates a paginated view inside the element
657 similar to the way that 'overflow: scroll' creates a scrollable view.
658 <p>See <a href="#paginated-overflow">paginated overflow</a></p>
659 <p class="note" role="note">Note: Print is effectively "continue: paginate" on the root.</p>
660 <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>
661 <dd>
662 content that doesn’t fit causes the element to copy itself and continue laying out.
663 <p>See <a href="#fragment-overflow">fragment overflow</a>.</p>
664 </dl>
665 <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>
666 <ol>
667 <li>
668 If the specified value is <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>
669 <ol>
670 <li>On a <a data-link-type="dfn" href="https://drafts.csswg.org/css-regions-1/#css-region">CSS Region</a> other than the last one in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-regions-1/#region-chain">region chain</a>,
671 the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>
672 <li>On a page
673 the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a>
674 <li>On a <a data-link-type="dfn" href="#fragment-box">fragment box</a> the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-fragments">fragments</a>
675 <li>Otherwise, the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-overflow">overflow</a>
676 </ol>
677 <li>
678 If the specified value is <span class="css">framgents</span>
679 <ol>
680 <li>On a page
681 the computed value is <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a>
682 <li>Otherwise, the computed value is the specified value
683 </ol>
684 <li>In all other cases, the computed value is the specified value
685 </ol>
686 <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,
687 we would need to specify that auto computes to auto on it,
688 or introduce a new value and have auto compute to that
689 (but what would that value compute to on things that aren’t columns?).</p>
690 <p class="note" role="note">Note: For background discussions leading to this property, see these threads: <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 <a href="https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html">proposal for a fragmentation property</a></p>
691 <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>
692 <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>
693 <p class="issue" id="issue-001d5014"><a class="self-link" href="#issue-001d5014"></a> Write this section</p>
694 <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>
695 <div class="issue" id="issue-67ad77e5">
696 <a class="self-link" href="#issue-67ad77e5"></a> Should traditional pagination (e.g. when printing)
697 be expressed through some magic in the computed value of <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>,
698 or by inserting this in the UA stylesheet:
699 <pre><code class="lang-css highlight"><span class="n">@media</span> <span class="p">(</span>overflow-block<span class="nt">: paged), (overflow-block: optional-paged) </span><span class="p">{</span>
700 :root {
701 continue: paginate;
702 }
703 }</code></pre>
704 </div>
705 <p class="issue" id="issue-6eb3c644"><a class="self-link" href="#issue-6eb3c644"></a> Traditional pagination (e.g. when printing) assumes that
706 :root is contained in the page box,
707 rather than having the page box be a pseudo element child of :root.
708 Can we work around that using something similar to fragment boxes?
709 Or maybe by having a fragment box (reproducing :root) inside a page box inside :root?</p>
710 <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>
711 <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
712 used 4 values instead of <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a>:
713 "paged-x | paged-y | paged-x-controls | paged-y-controls".
714 Should this property also include these values,
715 or are they better handled as separate properties?
716 (e.g.: "pagination-layout: auto | horizontal | vertical", "pagination-controls: auto | none")</p>
717 <p class="issue" id="issue-55c97ed8"><a class="self-link" href="#issue-55c97ed8"></a> Ability to display N pages at once
718 rather than just one page at once?
719 Could this be a value of "pagination-layout", such as:
720 "pagination-layout: horizontal 2;"</p>
721 <p class="issue" id="issue-64de292b"><a class="self-link" href="#issue-64de292b"></a> Brad Kemper has proposed a model for combining pagination and
722 fragment overflow, which also deals with displaying multiple pages. <a href="http://www.w3.org/mid/[email protected]">http://www.w3.org/mid/[email protected]</a></p>
723 <p class="issue" id="issue-360561bd"><a class="self-link" href="#issue-360561bd"></a> The current implementation of paginated overflow uses
724 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
725 rather than the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property as proposed
726 in the <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> draft
727 (which also matches the <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> proposal).
728 or the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property as described here. </p>
729 <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>
730 <p>This section introduces and defines the meaning of
731 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>
732 <p> 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>,
733 and implementations would otherwise have created a box for the element,
734 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
735 for that element.
736 (It is possible for an element with <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> to generate only one <a data-link-type="dfn" href="#fragment-box">fragment box</a>.
737 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>,
738 then its box is not a <a data-link-type="dfn" href="#fragment-box">fragment box</a>.)
739 Every <a data-link-type="dfn" href="#fragment-box">fragment box</a> is a fragmentation container,
740 and any overflow
741 that would cause that fragmentation container to fragment
742 causes another <a data-link-type="dfn" href="#fragment-box">fragment box</a> created as a next sibling
743 of the previous one. <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
744 the element? Need to figure out exactly how this interacts with
745 other box-level fixup.</span> Additionally, if the <a data-link-type="dfn" href="#fragment-box">fragment box</a> is also
746 a multi-column box (as defined in <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a> <span class="issue" id="issue-928903ce"><a class="self-link" href="#issue-928903ce"></a>though it defines <i>multi-column element</i></span>)
747 any content that would lead to the creation of <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#overflow-columns">overflow columns</a> <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a> instead is flown into an additional fragment box.
748 However, fragment boxes may themselves be broken
749 (due to fragmentation in a fragmentation context outside of them,
750 such as pages, columns, or other fragment boxes);
751 such breaking leads to fragments of the same fragment box
752 rather than multiple fragment boxes.
753 (This matters because fragment boxes may be styled by their index;
754 such breaking leads to multiple fragments of a fragment box
755 with a single index.
756 This design choice is so that
757 breaking a fragment box across pages does not break
758 the association of indices to particular pieces of content.) <span class="issue" id="issue-060b1de8"><a class="self-link" href="#issue-060b1de8"></a>Should a forced break that breaks to
759 an outer fragmentation context cause a new fragment of a single
760 fragment box or a new fragment box?</span> <span class="issue" id="issue-5b4b087c"><a class="self-link" href="#issue-5b4b087c"></a>Should we find a term other than <a data-link-type="dfn" href="#fragment-box">fragment box</a> here to make this a little less confusing?</span> </p>
761 <p class="issue" id="issue-c4f3aedb"><a class="self-link" href="#issue-c4f3aedb"></a> What if we want to be able to style the pieces of an element
762 split within another type of fragmentation context?
763 These rules prevent ever using <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> for that,
764 despite that the name seems the most logical name for such a feature. </p>
765 <div class="example" id="example-17470be2">
766 <a class="self-link" href="#example-17470be2"></a>
767 <table class="source-demo-pair">
768 <tbody>
769 <tr>
770 <td>
771 <pre><!DOCTYPE HTML>
772 <title>Breaking content into
773 equal-sized cards</title>
774 <style>
775 .in-cards {
776 continue: fragments;
778 width: 13em;
779 height: 8em;
781 padding: 4px;
782 border: medium solid blue;
783 margin: 6px;
785 font: medium/1.3 Times New
786 Roman, Times, serif;
787 }
788 </style>
789 <div class="in-cards">
790 In this example, the text in the div
791 is broken into a series of cards.
792 These cards all have the same style.
793 The presence of enough content to
794 overflow one of the cards causes
795 another one to be created. The second
796 card is created just like it’s the
797 next sibling of the first.
798 </div></pre>
799 <td>
800 <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>
801 <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>
802 </table>
803 </div>
804 <p class="issue" id="issue-25a84ff4"><a class="self-link" href="#issue-25a84ff4"></a> We should specify that <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> does not apply
805 to at least some table parts,
806 and perhaps other elements as well.
807 We need to determine exactly which ones. </p>
808 <p class="issue" id="issue-6c1669e3"><a class="self-link" href="#issue-6c1669e3"></a> This specification needs to say which type of
809 fragmentation context is created
810 so that it’s clear which values of the <a class="property" data-link-type="propdesc">break-*</a> properties
811 cause breaks within this context.
812 We probably want <span class="css">break-*: region</span> to apply. </p>
813 <p class="issue" id="issue-08d6a80e"><a class="self-link" href="#issue-08d6a80e"></a> This specification needs a processing model
814 that will apply in cases where the layout containing the
815 fragments has characteristics that use the intrinsic size of the fragments
816 to change the amount of space available for them,
817 such as <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a>.
818 There has already been some work on such a processing model
819 in <a data-link-type="biblio" href="#biblio-css3-regions">[CSS3-REGIONS]</a>,
820 and the work done on a model there,
821 and the editors of that specification,
822 should inform what happens in this specification. </p>
823 <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>
824 <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>
825 <p> 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
826 is a pseudo-element
827 that describes some of the <a data-link-type="dfn" href="#fragment-box">fragment box</a>es generated by an element.
828 The argument to the pseudo-element takes the same syntax
829 as the argument to the :nth-child() pseudo-class
830 defined in <a data-link-type="biblio" href="#biblio-select">[SELECT]</a>, and has the same meaning
831 except that the number is relative to <a data-link-type="dfn" href="#fragment-box">fragment box</a>es generated by the element
832 instead of siblings of the element. </p>
833 <p class="note" role="note"> Selectors that allow addressing fragments
834 by counting from the end rather than the start
835 are intentionally not provided.
836 Such selectors would interfere with determining
837 the number of fragments. </p>
838 <p class="issue" id="issue-0e3bec77"><a class="self-link" href="#issue-0e3bec77"></a> Depending on future discussions,
839 this <span class="css">::nth-fragment(an+b)</span> syntax
840 may be replaced with
841 the new <span class="css">::fragment:nth(an+b)</span> syntax. </p>
842 <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>
843 <p class="issue" id="issue-6e8f615f"><a class="self-link" href="#issue-6e8f615f"></a> Should this apply to continue:fragments only,
844 or also to continue:paginate?
845 (If it applies,
846 then stricter property restrictions would be needed
847 for continue:paginate.) </p>
848 <p> In the absence of rules with <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements,
849 the computed style for each <a data-link-type="dfn" href="#fragment-box">fragment box</a> is the computed style for the element
850 for which the <a data-link-type="dfn" href="#fragment-box">fragment box</a> was created.
851 However, the style for a <a data-link-type="dfn" href="#fragment-box">fragment box</a> is also influenced
852 by rules whose selector’s <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-3/#subject">subject</a> <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> has an <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element,
853 if the 1-based number of the <a data-link-type="dfn" href="#fragment-box">fragment box</a> matches
854 that <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element
855 and the selector (excluding the <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element)
856 matches the element generating the fragments. </p>
857 <p> When determining the style of the <a data-link-type="dfn" href="#fragment-box">fragment box</a>,
858 these rules that match the fragment pseudo-element
859 cascade together with the rules that match the element,
860 with the fragment pseudo-element adding the specificity
861 of a pseudo-class to the specificity calculation. <span class="issue" id="issue-8f881f96"><a class="self-link" href="#issue-8f881f96"></a>Does this need to be specified in
862 the cascading module as well?</span> </p>
863 <div class="example" id="example-17b703f2">
864 <a class="self-link" href="#example-17b703f2"></a>
865 <table class="source-demo-pair">
866 <tbody>
867 <tr>
868 <td>
869 <pre><!DOCTYPE HTML>
870 <style>
871 .bouncy-columns {
872 continue: fragments;
873 width: 6em;
874 height: 10em;
875 float: left;
876 margin: 1em;
877 font: medium/1.25 Times New
878 Roman, Times, serif;
879 }
880 .bouncy-columns::nth-fragment(1) {
881 background: aqua; color: black;
882 transform: rotate(-3deg);
883 }
884 .bouncy-columns::nth-fragment(2) {
885 background: yellow; color: black;
886 transform: rotate(3deg);
887 }
888 </style>
889 <div class="bouncy-columns">
890 <i>...</i>
891 </div></pre>
892 <td>
893 <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>
894 <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>
895 <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>
896 </table>
897 </div>
898 <p> 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> property does take effect;
899 if a <a data-link-type="dfn" href="#fragment-box">fragment box</a> has a
900 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> then that fragment box is the last fragment.
901 However, overriding <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> on the first fragment
902 does not cause the <a data-link-type="dfn" href="#fragment-box">fragment box</a> not to exist;
903 whether there are fragment boxes at all is determined by
904 the computed value of overflow for the element. </p>
905 <p> 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="https://drafts.csswg.org/css-content-3/#propdef-content">content</a> property has no effect;
906 the computed value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-content-3/#propdef-content">content</a> for the fragment box
907 remains the same as the computed value of content for the element. </p>
908 <p> Specifying <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display">display: none</a> for a <a data-link-type="dfn" href="#fragment-box">fragment box</a> causes
909 the fragment box with that index not to be generated.
910 However, in terms of the indices
911 used for matching <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements
912 of later fragment boxes,
913 it still counts as though it was generated.
914 However, since it is not generated, it does not contain any content. </p>
915 <p> Specifying other values of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display">display</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position">position</a>,
916 or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float">float</a> is permitted, but is not allowed to change
917 the computed value of <a class="property" data-link-type="propdesc">display-inside</a>.
918 (Since <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> only
919 applies to block containers, flex containers, and grid containers
920 the computed value of <a class="property" data-link-type="propdesc">display-inside</a> is always <span class="css">block</span>, <span class="css">flex</span>, or <span class="css">grid</span>. <span class="issue" id="issue-d98e732d"><a class="self-link" href="#issue-d98e732d"></a>Need to specify exactly how this works,
921 but it depends on
922 having <a class="property" data-link-type="propdesc">display-inside</a> and <a class="property" data-link-type="propdesc">display-outside</a> specified.</span> </p>
923 <p> To match the model for other pseudo-elements
924 where the pseudo-elements live inside their corresponding element,
925 declarations in <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements override
926 declarations in rules without the pseudo-element.
927 The relative priority within such declarations is determined
928 by normal cascading order (see <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>). </p>
929 <p> Styles specified on <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements
930 do affect inheritance to content within the <a data-link-type="dfn" href="#fragment-box">fragment box</a>.
931 In other words, the content within the <a data-link-type="dfn" href="#fragment-box">fragment box</a> must
932 inherit from the fragment box’s style (i.e., the pseudo-element style)
933 rather than directly from the element.
934 This means that elements split between fragment boxes may
935 have different styles for different parts of the element. </p>
936 <p class="issue" id="issue-d95b27f9"><a class="self-link" href="#issue-d95b27f9"></a> This inheritance rule allows specifying styles indirectly
937 (by using explicit <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">inherit</a> or using default inheritance
938 on properties that don’t apply to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a>)
939 that can’t be specified directly
940 (based on the rules in the next section).
941 This is a problem.
942 The restrictions that apply to styling inside fragments
943 should also apply to inheritance from fragments. </p>
944 <div class="example" id="example-539b7bce">
945 <a class="self-link" href="#example-539b7bce"></a>
946 <table class="source-demo-pair">
947 <tbody>
948 <tr>
949 <td>
950 <pre><!DOCTYPE HTML>
951 <style>
952 .article {
953 continue: fragments;
954 }
955 .article::nth-fragment(1) {
956 font-size: 1.5em;
957 margin-bottom: 1em;
958 height: 4em;
959 }
960 .article::nth-fragment(2) {
961 margin-left: 5em;
962 margin-right: 2em;
963 }
964 </style>
965 <div class="article">
966 The <code>font-size</code> property<i>...</i>
967 </div></pre>
968 <td>
969 <div class="article-font-inherit-demo one">The <code>font-size</code> property<br>specified on the fragment<br>is inherited into the</div>
970 <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>
971 </table>
972 </div>
973 <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>
974 <p class="issue" id="issue-d00a7cbb"><a class="self-link" href="#issue-d00a7cbb"></a> Should this apply to continue:fragments only,
975 or also to continue:paginate? </p>
976 <p> The <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element
977 can also be used to style
978 content inside of a <a data-link-type="dfn" href="#fragment-box">fragment box</a>.
979 Unlike the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line">::first-line</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-elements,
980 the <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element can be applied
981 to parts of the selector other than the subject:
982 in particular, it can match ancestors of the subject.
983 However, the only CSS properties applied
984 by rules with such selectors
985 are those that apply
986 to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-element. </p>
987 <p> To be more precise,
988 when a rule’s selector has <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements
989 attached to parts of the selector other than the subject,
990 the declarations in that rule apply to
991 a fragment (or pseudo-element thereof) when: </p>
992 <ol>
993 <li> the declarations are for properties that apply to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a> pseudo-element,
994 <li> the declarations would apply to
995 that fragment (or pseudo-element thereof)
996 had those <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-elements been removed,
997 with a particular association between
998 each sequence of simple selectors and the element it matched,
999 and
1000 <li> for each removed <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> pseudo-element,
1001 the fragment lives within a <a data-link-type="dfn" href="#fragment-box">fragment box</a> of the element associated in that association
1002 with the selector that the pseudo-element was attached to,
1003 and whose index matches the pseudo-element.
1004 </ol>
1005 <div class="example" id="example-95fb489a">
1006 <a class="self-link" href="#example-95fb489a"></a>
1007 <table class="source-demo-pair">
1008 <tbody>
1009 <tr>
1010 <td>
1011 <pre><!DOCTYPE HTML>
1012 <style>
1013 .dark-columns {
1014 continue: fragments;
1015 width: 6em;
1016 height: 10em;
1017 float: left;
1018 margin-right: 1em;
1019 font: medium/1.25 Times New
1020 Roman, Times, serif;
1021 }
1022 .dark-columns::nth-fragment(1) {
1023 background: aqua; color: black;
1024 }
1025 .dark-columns::nth-fragment(1) :link {
1026 color: blue;
1027 }
1028 .dark-columns::nth-fragment(1) :visited {
1029 color: purple;
1030 }
1031 .dark-columns::nth-fragment(2) {
1032 background: navy; color: white;
1033 }
1034 .dark-columns::nth-fragment(2) :link {
1035 color: aqua;
1036 }
1037 .dark-columns::nth-fragment(2) :visited {
1038 color: fuchsia;
1039 }
1040 </style>
1041 <div class="dark-columns">
1042 <i>...</i>
1043 </div></pre>
1044 <td>
1045 <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>
1046 <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>
1047 </table>
1048 </div>
1049 <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>
1050 <p> Authors may wish to style the opening lines of an element
1051 with different styles
1052 by putting those opening lines in a separate fragment.
1053 However, since it may be difficult to predict the exact height
1054 occupied by those lines
1055 in order to restrict the first fragment to that height,
1056 this specification introduces a <a class="property" data-link-type="propdesc" href="#propdef-max-lines">max-lines</a> property
1057 that forces a fragment to break
1058 after a specified number of lines.
1059 This forces a break after the given number of lines
1060 contained within the element or its descendants,
1061 as long as those lines are in the same block formatting context. </p>
1062 <table class="def propdef" data-link-for-hint="max-lines">
1063 <tbody>
1064 <tr>
1065 <th>Name:
1066 <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>
1067 <tr class="value">
1068 <th>Value:
1069 <td class="prod"><a class="css" data-link-type="maybe" href="#valdef-max-lines-none">none</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="css" data-link-type="maybe" href="#valdef-max-lines-integer"><integer></a>
1070 <tr>
1071 <th>Initial:
1072 <td><a class="css" data-link-type="maybe" href="#valdef-max-lines-none">none</a>
1073 <tr>
1074 <th>Applies to:
1075 <td>fragment boxes
1076 <tr>
1077 <th>Inherited:
1078 <td>no
1079 <tr>
1080 <th>Percentages:
1081 <td>N/A
1082 <tr>
1083 <th>Media:
1084 <td>visual
1085 <tr>
1086 <th>Computed value:
1087 <td>specified value
1088 <tr>
1089 <th>Animatable:
1090 <td>as <a href="https://www.w3.org/TR/css3-transitions/#animatable-types">integer</a>
1091 <tr>
1092 <th>Canonical order:
1093 <td><abbr title="follows order of property value definition">per grammar</abbr>
1094 </table>
1095 <dl>
1096 <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>
1097 <dd>
1098 <p> Breaks occur only as specified elsewhere. </p>
1099 <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="https://drafts.csswg.org/css-values-3/#integer-value"><integer></a><a class="self-link" href="#valdef-max-lines-integer"></a></dfn>
1100 <dd>
1101 <p> In addition to any breaks specified elsewhere,
1102 a break is forced before any line that would exceed
1103 the given number of lines
1104 being placed inside the element
1105 (excluding lines that are in
1106 a different block formatting context from
1107 the block formatting context to which
1108 an unstyled child of the element would belong). </p>
1109 <p class="issue" id="issue-9488ec29"><a class="self-link" href="#issue-9488ec29"></a> If there are multiple boundaries between this line
1110 and the previous, where exactly (in terms of element
1111 boundaries) is the break forced? </p>
1112 <p> Only positive integers are accepted.
1113 Zero or negative integers are a parse error. </p>
1114 </dl>
1115 <p class="issue" id="issue-f6e7b6c3"><a class="self-link" href="#issue-f6e7b6c3"></a>Should this apply to fragment overflow only, or also
1116 to pagination?
1117 Given what we’re doing with the continue property,
1118 it should actually apply to any fragmentainer.</p>
1119 <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.
1120 When applied to non fragmentainers,
1121 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> so that you only need to reach for one property rather than 2 to get
1122 that effect.</p>
1123 <div class="example" id="example-9f00def3">
1124 <a class="self-link" href="#example-9f00def3"></a>
1125 <table class="source-demo-pair">
1126 <tbody>
1127 <tr>
1128 <td>
1129 <pre><!DOCTYPE HTML>
1130 <style>
1131 .article {
1132 continue: fragments;
1133 }
1134 .article::first-letter {
1135 font-size: 2em;
1136 line-height: 0.9;
1137 }
1138 .article::nth-fragment(1) {
1139 font-size: 1.5em;
1140 max-lines: 3;
1141 }
1142 .article::nth-fragment(2) {
1143 column-count: 2;
1144 }
1145 </style>
1146 <div class="article">
1147 <i>...</i>
1148 </div></pre>
1149 <td>
1150 <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>
1151 <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="https://drafts.csswg.org/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>
1152 <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>
1153 </table>
1154 </div>
1155 <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>
1156 <p class="issue" id="issue-de91ba9b"><a class="self-link" href="#issue-de91ba9b"></a> This specification should define useful behavior
1157 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> in static media (such as print).
1158 Current implementation behavior is quite poor and
1159 produces unexpected results when authors have not considered
1160 what will happen when
1161 the content they produce for interactive media
1162 is printed. </p>
1163 <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
1164 <p> Thanks especially to the feedback from
1165 Rossen Atanassov,
1166 Bert Bos,
1167 Tantek Çelik,
1168 John Daggett,
1169 fantasai,
1170 Daniel Glazman,
1171 Vincent Hardy,
1172 HÃ¥kon Wium Lie,
1173 Peter Linss,
1174 Robert O’Callahan,
1175 Florian Rivoal,
1176 Alan Stearns,
1177 Steve Zilles,
1178 and all the rest of the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> community. </p>
1179 </main>
1180 <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
1181 <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
1182 <p>Conformance requirements are expressed with a combination of
1183 descriptive assertions and RFC 2119 terminology. The key words “MUSTâ€,
1184 “MUST NOTâ€, “REQUIREDâ€, “SHALLâ€, “SHALL NOTâ€, “SHOULDâ€, “SHOULD NOTâ€,
1185 “RECOMMENDEDâ€, “MAYâ€, and “OPTIONAL†in the normative parts of this
1186 document are to be interpreted as described in RFC 2119.
1187 However, for readability, these words do not appear in all uppercase
1188 letters in this specification. </p>
1189 <p>All of the text of this specification is normative except sections
1190 explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
1191 <p>Examples in this specification are introduced with the words “for exampleâ€
1192 or are set apart from the normative text with <code>class="example"</code>,
1193 like this: </p>
1194 <div class="example" id="example-52448c84">
1195 <a class="self-link" href="#example-52448c84"></a>
1196 <p>This is an example of an informative example. </p>
1197 </div>
1198 <p>Informative notes begin with the word “Note†and are set apart from the
1199 normative text with <code>class="note"</code>, like this: </p>
1200 <p class="note" role="note">Note, this is an informative note. </p>
1201 <p>Advisements are normative sections styled to evoke special attention and are
1202 set apart from other normative text with <code><strong class="advisement"></code>, like
1203 this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
1204 <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
1205 <p>Conformance to this specification
1206 is defined for three conformance classes: </p>
1207 <dl>
1208 <dt>style sheet
1209 <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
1210 style sheet</a>.
1211 <dt>renderer
1212 <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
1213 documents that use them.
1214 <dt>authoring tool
1215 <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet.
1216 </dl>
1217 <p>A style sheet is conformant to this specification
1218 if all of its statements that use syntax defined in this module are valid
1219 according to the generic CSS grammar and the individual grammars of each
1220 feature defined in this module. </p>
1221 <p>A renderer is conformant to this specification
1222 if, in addition to interpreting the style sheet as defined by the
1223 appropriate specifications, it supports all the features defined
1224 by this specification by parsing them correctly
1225 and rendering the document accordingly. However, the inability of a
1226 UA to correctly render a document due to limitations of the device
1227 does not make the UA non-conformant. (For example, a UA is not
1228 required to render color on a monochrome monitor.) </p>
1229 <p>An authoring tool is conformant to this specification
1230 if it writes style sheets that are syntactically correct according to the
1231 generic CSS grammar and the individual grammars of each feature in
1232 this module, and meet all other conformance requirements of style sheets
1233 as described in this module. </p>
1234 <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
1235 <p>The following sections define several conformance requirements
1236 for implementing CSS responsibly,
1237 in a way that promotes interoperability in the present and future. </p>
1238 <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
1239 <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
1240 (and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
1241 any at-rules, properties, property values, keywords, and other syntactic constructs
1242 for which they have no usable level of support</strong>.
1243 In particular, user agents <em>must not</em> selectively ignore
1244 unsupported property values and honor supported values in a single multi-value property declaration:
1245 if any value is considered invalid (as unsupported values must be),
1246 CSS requires that the entire declaration be ignored. </p>
1247 <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
1248 <p>To avoid clashes with future stable CSS features,
1249 the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
1250 <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
1251 <p>Once a specification reaches the Candidate Recommendation stage,
1252 implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
1253 of any CR-level feature they can demonstrate
1254 to be correctly implemented according to spec,
1255 and should avoid exposing a prefixed variant of that feature. </p>
1256 <p>To establish and maintain the interoperability of CSS across
1257 implementations, the CSS Working Group requests that non-experimental
1258 CSS renderers submit an implementation report (and, if necessary, the
1259 testcases used for that implementation report) to the W3C before
1260 releasing an unprefixed implementation of any CSS features. Testcases
1261 submitted to W3C are subject to review and correction by the CSS
1262 Working Group. </p>
1263 <p>Further information on submitting testcases and implementation reports
1264 can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
1265 Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">[email protected]</a> mailing list. </p>
1266 <h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
1267 <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>
1268 <ul class="index">
1269 <li><a href="#3d-preserving-child">3d-preserving child</a><span>, in §2.2</span>
1270 <li><a href="#3d-preserving-descendant">3d-preserving descendant</a><span>, in §2.2</span>
1271 <li>
1272 auto
1273 <ul>
1274 <li><a href="#valdef-overflow-auto">value for overflow, overflow-x, overflow-y</a><span>, in §3</span>
1275 <li><a href="#valdef-continue-auto">value for continue</a><span>, in §4</span>
1276 </ul>
1277 <li><a href="#border-box-overflow0">border-box overflow</a><span>, in §2.3</span>
1278 <li><a href="#border-box-overflow-rectangle">border-box overflow rectangle</a><span>, in §2.3</span>
1279 <li><a href="#border-box-overflow-region">border-box overflow region</a><span>, in §2.3</span>
1280 <li><a href="#valdef-overflow-clip">clip</a><span>, in §3</span>
1281 <li><a href="#propdef-continue">continue</a><span>, in §4</span>
1282 <li><a href="#valdef-continue-discard">discard</a><span>, in §4</span>
1283 <li><a href="#fragment-box">fragment box</a><span>, in §6</span>
1284 <li><a href="#valdef-continue-fragments">fragments</a><span>, in §4</span>
1285 <li><a href="#valdef-overflow-hidden">hidden</a><span>, in §3</span>
1286 <li><a href="#ink-overflow0">ink overflow</a><span>, in §2.1</span>
1287 <li><a href="#ink-overflow-rectangle">ink overflow rectangle</a><span>, in §2.1</span>
1288 <li><a href="#ink-overflow-region">ink overflow region</a><span>, in §2.1</span>
1289 <li><a href="#valdef-max-lines-integer"><integer></a><span>, in §6.2</span>
1290 <li><a href="#propdef-max-lines">max-lines</a><span>, in §6.2</span>
1291 <li><a href="#non-3d-preserving-child">non-3d-preserving child</a><span>, in §2.2</span>
1292 <li><a href="#valdef-max-lines-none">none</a><span>, in §6.2</span>
1293 <li><a href="#selectordef-nth-fragment">::nth-fragment()</a><span>, in §6.1.1</span>
1294 <li>
1295 overflow
1296 <ul>
1297 <li><a href="#overflow">definition of</a><span>, in §2</span>
1298 <li><a href="#propdef-overflow">(property)</a><span>, in §3</span>
1299 <li><a href="#valdef-continue-overflow">value for continue</a><span>, in §4</span>
1300 </ul>
1301 <li><a href="#propdef-overflow-x">overflow-x</a><span>, in §3</span>
1302 <li><a href="#propdef-overflow-y">overflow-y</a><span>, in §3</span>
1303 <li><a href="#valdef-continue-paginate">paginate</a><span>, in §4</span>
1304 <li><a href="#valdef-overflow-scroll">scroll</a><span>, in §3</span>
1305 <li><a href="#scrollable-overflow0">scrollable overflow</a><span>, in §2.2</span>
1306 <li><a href="#scrollable-overflow-rectangle">scrollable overflow rectangle</a><span>, in §2.2</span>
1307 <li><a href="#scrollable-overflow-region">scrollable overflow region</a><span>, in §2.2</span>
1308 <li><a href="#valdef-overflow-visible">visible</a><span>, in §3</span>
1309 </ul>
1310 <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>
1311 <ul class="index">
1312 <li>
1313 <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> defines the following terms:
1314 <ul>
1315 <li><a href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow">box-shadow</a>
1316 </ul>
1317 <li>
1318 <a data-link-type="biblio" href="#biblio-css-break-3">[css-break-3]</a> defines the following terms:
1319 <ul>
1320 <li><a href="https://drafts.csswg.org/css-break-3/#fragmentation-container">fragmentation container</a>
1321 </ul>
1322 <li>
1323 <a data-link-type="biblio" href="#biblio-css-cascade-4">[css-cascade-4]</a> defines the following terms:
1324 <ul>
1325 <li><a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">inherit</a>
1326 </ul>
1327 <li>
1328 <a data-link-type="biblio" href="#biblio-css-content-3">[css-content-3]</a> defines the following terms:
1329 <ul>
1330 <li><a href="https://drafts.csswg.org/css-content-3/#propdef-content">content</a>
1331 </ul>
1332 <li>
1333 <a data-link-type="biblio" href="#biblio-css-multicol-1">[css-multicol-1]</a> defines the following terms:
1334 <ul>
1335 <li><a href="https://drafts.csswg.org/css-multicol-1/#overflow-columns">overflow columns</a>
1336 </ul>
1337 <li>
1338 <a data-link-type="biblio" href="#biblio-css-position-3">[css-position-3]</a> defines the following terms:
1339 <ul>
1340 <li><a href="https://drafts.csswg.org/css-position-3/#propdef-position">position</a>
1341 </ul>
1342 <li>
1343 <a data-link-type="biblio" href="#biblio-css-pseudo-4">[css-pseudo-4]</a> defines the following terms:
1344 <ul>
1345 <li><a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a>
1346 <li><a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line">::first-line</a>
1347 </ul>
1348 <li>
1349 <a data-link-type="biblio" href="#biblio-css-regions-1">[css-regions-1]</a> defines the following terms:
1350 <ul>
1351 <li><a href="https://drafts.csswg.org/css-regions-1/#css-region">css region</a>
1352 <li><a href="https://drafts.csswg.org/css-regions-1/#region-chain">region chain</a>
1353 <li><a href="https://drafts.csswg.org/css-regions-1/#propdef-region-fragment">region-fragment</a>
1354 </ul>
1355 <li>
1356 <a data-link-type="biblio" href="#biblio-css-text-decor-3">[css-text-decor-3]</a> defines the following terms:
1357 <ul>
1358 <li><a href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow">text-shadow</a>
1359 </ul>
1360 <li>
1361 <a data-link-type="biblio" href="#biblio-css-transforms-1">[css-transforms-1]</a> defines the following terms:
1362 <ul>
1363 <li><a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-style">transform-style</a>
1364 </ul>
1365 <li>
1366 <a data-link-type="biblio" href="#biblio-css-ui-3">[css-ui-3]</a> defines the following terms:
1367 <ul>
1368 <li><a href="https://drafts.csswg.org/css-ui-3/#propdef-outline">outline</a>
1369 </ul>
1370 <li>
1371 <a data-link-type="biblio" href="#biblio-css-values-3">[css-values]</a> defines the following terms:
1372 <ul>
1373 <li><a href="https://drafts.csswg.org/css-values-3/#integer-value"><integer></a>
1374 <li><a href="https://drafts.csswg.org/css-values-3/#comb-one">|</a>
1375 </ul>
1376 <li>
1377 <a data-link-type="biblio" href="#biblio-css-writing-modes-3">[css-writing-modes-3]</a> defines the following terms:
1378 <ul>
1379 <li><a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a>
1380 </ul>
1381 <li>
1382 <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> defines the following terms:
1383 <ul>
1384 <li><a href="https://drafts.csswg.org/css2/visuren.html#propdef-display">display</a>
1385 <li><a href="https://drafts.csswg.org/css2/visuren.html#propdef-float">float</a>
1386 <li><a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>
1387 </ul>
1388 <li>
1389 <a data-link-type="biblio" href="#biblio-html">[HTML]</a> defines the following terms:
1390 <ul>
1391 <li><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-body-element">body</a>
1392 </ul>
1393 <li>
1394 <a data-link-type="biblio" href="#biblio-mediaqueries-4">[mediaqueries-4]</a> defines the following terms:
1395 <ul>
1396 <li><a href="https://drafts.csswg.org/mediaqueries-4/#valdef-media-print">print</a>
1397 </ul>
1398 </ul>
1399 <h2 class="no-num heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
1400 <h3 class="no-num heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
1401 <dl>
1402 <dt id="biblio-css21"><a class="self-link" href="#biblio-css21"></a>[CSS21]
1403 <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>
1404 <dt id="biblio-css3cascade"><a class="self-link" href="#biblio-css3cascade"></a>[CSS3CASCADE]
1405 <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>
1406 <dt id="biblio-css3col"><a class="self-link" href="#biblio-css3col"></a>[CSS3COL]
1407 <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>
1408 <dt id="biblio-html"><a class="self-link" href="#biblio-html"></a>[HTML]
1409 <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>
1410 <dt id="biblio-select"><a class="self-link" href="#biblio-select"></a>[SELECT]
1411 <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>
1412 <dt id="biblio-css-backgrounds-3"><a class="self-link" href="#biblio-css-backgrounds-3"></a>[CSS-BACKGROUNDS-3]
1413 <dd>CSS Backgrounds and Borders Module Level 3 URL: <a href="https://www.w3.org/TR/css3-background/">https://www.w3.org/TR/css3-background/</a>
1414 <dt id="biblio-css-break-3"><a class="self-link" href="#biblio-css-break-3"></a>[CSS-BREAK-3]
1415 <dd>Rossen Atanassov; Elika Etemad. <a href="http://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 14 January 2016. CR. URL: <a href="http://www.w3.org/TR/css-break-3/">http://www.w3.org/TR/css-break-3/</a>
1416 <dt id="biblio-css-cascade-4"><a class="self-link" href="#biblio-css-cascade-4"></a>[CSS-CASCADE-4]
1417 <dd>Elika Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 14 January 2016. CR. URL: <a href="http://www.w3.org/TR/css-cascade-4/">http://www.w3.org/TR/css-cascade-4/</a>
1418 <dt id="biblio-css-content-3"><a class="self-link" href="#biblio-css-content-3"></a>[CSS-CONTENT-3]
1419 <dd>CSS Generated Content Module Level 3 URL: <a href="https://drafts.csswg.org/css-content-3/">https://drafts.csswg.org/css-content-3/</a>
1420 <dt id="biblio-css-multicol-1"><a class="self-link" href="#biblio-css-multicol-1"></a>[CSS-MULTICOL-1]
1421 <dd>CSS Multi-column Layout Module Level 1 URL: <a href="https://www.w3.org/TR/css3-multicol/">https://www.w3.org/TR/css3-multicol/</a>
1422 <dt id="biblio-css-position-3"><a class="self-link" href="#biblio-css-position-3"></a>[CSS-POSITION-3]
1423 <dd>CSS Positioned Layout Module Level 3 URL: <a href="https://www.w3.org/TR/css3-positioning/">https://www.w3.org/TR/css3-positioning/</a>
1424 <dt id="biblio-css-pseudo-4"><a class="self-link" href="#biblio-css-pseudo-4"></a>[CSS-PSEUDO-4]
1425 <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>
1426 <dt id="biblio-css-regions-1"><a class="self-link" href="#biblio-css-regions-1"></a>[CSS-REGIONS-1]
1427 <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>
1428 <dt id="biblio-css-text-decor-3"><a class="self-link" href="#biblio-css-text-decor-3"></a>[CSS-TEXT-DECOR-3]
1429 <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>
1430 <dt id="biblio-css-transforms-1"><a class="self-link" href="#biblio-css-transforms-1"></a>[CSS-TRANSFORMS-1]
1431 <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>
1432 <dt id="biblio-css-ui-3"><a class="self-link" href="#biblio-css-ui-3"></a>[CSS-UI-3]
1433 <dd>Tantek Çelik; Florian Rivoal. <a href="http://www.w3.org/TR/css-ui-3/">CSS Basic User Interface Module Level 3 (CSS3 UI)</a>. 7 July 2015. CR. URL: <a href="http://www.w3.org/TR/css-ui-3/">http://www.w3.org/TR/css-ui-3/</a>
1434 <dt id="biblio-css-values"><a class="self-link" href="#biblio-css-values"></a>[CSS-VALUES]
1435 <dd>Tab Atkins Jr.; Elika Etemad. <a href="http://www.w3.org/TR/css-values/">CSS Values and Units Module Level 3</a>. 11 June 2015. CR. URL: <a href="http://www.w3.org/TR/css-values/">http://www.w3.org/TR/css-values/</a>
1436 <dt id="biblio-css-writing-modes-3"><a class="self-link" href="#biblio-css-writing-modes-3"></a>[CSS-WRITING-MODES-3]
1437 <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 15 December 2015. CR. URL: <a href="http://www.w3.org/TR/css-writing-modes-3/">http://www.w3.org/TR/css-writing-modes-3/</a>
1438 <dt id="biblio-css3-break"><a class="self-link" href="#biblio-css3-break"></a>[CSS3-BREAK]
1439 <dd>Rossen Atanassov; Elika Etemad. <a href="http://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 14 January 2016. CR. URL: <a href="http://www.w3.org/TR/css-break-3/">http://www.w3.org/TR/css-break-3/</a>
1440 <dt id="biblio-css3-flexbox"><a class="self-link" href="#biblio-css3-flexbox"></a>[CSS3-FLEXBOX]
1441 <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>
1442 <dt id="biblio-css3-grid-layout"><a class="self-link" href="#biblio-css3-grid-layout"></a>[CSS3-GRID-LAYOUT]
1443 <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 September 2015. WD. URL: <a href="http://www.w3.org/TR/css-grid-1/">http://www.w3.org/TR/css-grid-1/</a>
1444 <dt id="biblio-css3-transforms"><a class="self-link" href="#biblio-css3-transforms"></a>[CSS3-TRANSFORMS]
1445 <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>
1446 <dt id="biblio-mediaqueries-4"><a class="self-link" href="#biblio-mediaqueries-4"></a>[MEDIAQUERIES-4]
1447 <dd>Florian Rivoal; Tab Atkins Jr.. <a href="http://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a>. 26 January 2016. WD. URL: <a href="http://www.w3.org/TR/mediaqueries-4/">http://www.w3.org/TR/mediaqueries-4/</a>
1448 <dt id="biblio-rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[RFC2119]
1449 <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>
1450 </dl>
1451 <h3 class="no-num heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
1452 <dl>
1453 <dt id="biblio-css1"><a class="self-link" href="#biblio-css1"></a>[CSS1]
1454 <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>
1455 <dt id="biblio-css3bg"><a class="self-link" href="#biblio-css3bg"></a>[CSS3BG]
1456 <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>
1457 <dt id="biblio-css3gcpm"><a class="self-link" href="#biblio-css3gcpm"></a>[CSS3GCPM]
1458 <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>
1459 <dt id="biblio-css3text"><a class="self-link" href="#biblio-css3text"></a>[CSS3TEXT]
1460 <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>
1461 <dt id="biblio-css3-box"><a class="self-link" href="#biblio-css3-box"></a>[CSS3-BOX]
1462 <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>
1463 <dt id="biblio-css3-marquee"><a class="self-link" href="#biblio-css3-marquee"></a>[CSS3-MARQUEE]
1464 <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>
1465 <dt id="biblio-css3-regions"><a class="self-link" href="#biblio-css3-regions"></a>[CSS3-REGIONS]
1466 <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>
1467 <dt id="biblio-cssom-view"><a class="self-link" href="#biblio-cssom-view"></a>[CSSOM-VIEW]
1468 <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>
1469 </dl>
1470 <h2 class="no-num heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
1471 <div class="big-element-wrapper">
1472 <table class="index">
1473 <thead>
1474 <tr>
1475 <th scope="col">Name
1476 <th scope="col">Value
1477 <th scope="col">Initial
1478 <th scope="col">Applies to
1479 <th scope="col">Inh.
1480 <th scope="col">%ages
1481 <th scope="col">Media
1482 <th scope="col">AniÂmatÂable
1483 <th scope="col">Canonical order
1484 <th scope="col">ComÂputed value
1485 <tbody>
1486 <tr>
1487 <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-x">overflow-x</a>
1488 <td>visible | hidden | clip | scroll | auto
1489 <td>visible
1490 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
1491 <td>no
1492 <td>N/A
1493 <td>visual
1494 <td>no
1495 <td>per grammar
1496 <td>see below
1497 <tr>
1498 <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-y">overflow-y</a>
1499 <td>visible | hidden | clip | scroll | auto
1500 <td>visible
1501 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
1502 <td>no
1503 <td>N/A
1504 <td>visual
1505 <td>no
1506 <td>per grammar
1507 <td>see below
1508 <tr>
1509 <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow">overflow</a>
1510 <td>visible | hidden | clip | scroll | auto
1511 <td>see individual properties
1512 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
1513 <td>no
1514 <td>N/A
1515 <td>visual
1516 <td>no
1517 <td>per grammar
1518 <td>see individual properties
1519 <tr>
1520 <th scope="row"><a class="css" data-link-type="property" href="#propdef-continue">continue</a>
1521 <td>auto | overflow | paginate | fragments | discard
1522 <td>auto
1523 <td>block containers [CSS21], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]
1524 <td>no
1525 <td>N/A
1526 <td>visual
1527 <td>no
1528 <td>per grammar
1529 <td>see below
1530 <tr>
1531 <th scope="row"><a class="css" data-link-type="property" href="#propdef-max-lines">max-lines</a>
1532 <td>none | <integer>
1533 <td>none
1534 <td>fragment boxes
1535 <td>no
1536 <td>N/A
1537 <td>visual
1538 <td>as integer
1539 <td>per grammar
1540 <td>specified value
1541 </table>
1542 </div>
1543 <h2 class="no-num heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
1544 <div style="counter-reset:issue">
1545 <div class="issue">undefined term?<a href="#issue-18c1c008"> ↵ </a></div>
1546 <div class="issue"> Should we try to define it at all and just leave pieces undefined? <a href="#issue-1baddb1e"> ↵ </a></div>
1547 <div class="issue"> The following definition should be rewritten to use
1548 the concept of <a href="https://drafts.csswg.org/css-transforms/#3d-rendering-context">3D rendering context</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a> and related terms,
1549 particularly once those concepts stabilize following changes
1550 proposed in the CSS WG meeting on the morning of 2014-01-28. <a href="#issue-766655c2"> ↵ </a></div>
1551 <div class="issue">which belong in <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a><a href="#issue-101a26b2"> ↵ </a></div>
1552 <div class="issue">undefined concept!<a href="#issue-1b139c15"> ↵ </a></div>
1553 <div class="issue">undefined term!<a href="#issue-2d1dc4f9"> ↵ </a></div>
1554 <div class="issue">MORE HERE!<a href="#issue-75780f3f"> ↵ </a></div>
1555 <div class="issue"> I wrote this definition off the top of my head,
1556 so it can’t possibly be right.
1557 It’s missing tons of pieces! <a href="#issue-e889eac0"> ↵ </a></div>
1558 <div class="issue"> The handling of preserve-3d subtrees here is probably wrong;
1559 the elements should probably count
1560 only towards the overflow of the element that flattens them. <a href="#issue-521d48c7"> ↵ </a></div>
1561 <div class="issue"> This concept has been proposed for some uses, such as for
1562 determining what the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-3/#propdef-outline">outline</a> property goes around, and
1563 as the basis of a coordinate system for specifying clips and masks,
1564 but it’s not clear if it’s needed. <a href="#issue-3930f393"> ↵ </a></div>
1565 <div class="issue"> If needed, define more formally, as for scrollable overflow above.
1566 (Maybe even share the definitions in an appropriate way!) <a href="#issue-42ea3c29"> ↵ </a></div>
1567 <div class="issue"> Mozilla implements -moz-hidden-unscrollable,
1568 which is similar to <a class="css" data-link-type="maybe" href="#valdef-overflow-clip">clip</a>,
1569 except that it does not cause the element to establish a BFC.
1570 Should we match that?<a href="#issue-a9ea8890"> ↵ </a></div>
1571 <div class="issue"> import examples from <a data-link-type="biblio" href="#biblio-css3-box">[CSS3-BOX]</a>.<a href="#issue-402eb70c"> ↵ </a></div>
1572 <div class="issue"> Explain which directions allow scrolling and which don’t,
1573 as a function of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> (including propagation of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a> to the ICB). <a href="#issue-c318b1c1"> ↵ </a></div>
1574 <div class="issue"> <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> describes an <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property,
1575 but it has not picked up implementation experience
1576 that the working group is aware of.
1577 Should this document treat <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> as a defunct proposal,
1578 or should this document describe the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property
1579 and attempt to revive it,
1580 despite that implementations have implemented <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? <a href="#issue-52e2a181"> ↵ </a></div>
1581 <div class="issue"> The naming of this property and its values is preliminary.
1582 This was initially proposed as
1583 "fragmentation: auto | none | break | clone | page"
1584 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>,
1585 and there is not yet wide agreement as to which naming is better.<a href="#issue-b2c6e3da"> ↵ </a></div>
1586 <div class="issue"> This property is meant to generalize and replace <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-regions-1/#propdef-region-fragment">region-fragment</a>.
1587 Once it is sufficiently stable in this specification, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/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>
1588 <div class="issue"> When the element isn’t a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragmentation-container">fragmentation container</a> already,
1589 should this work by turning it directly into one,
1590 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>
1591 <div class="issue"> If we introduce a pseudo element that can select columns in a multicol,
1592 we would need to specify that auto computes to auto on it,
1593 or introduce a new value and have auto compute to that
1594 (but what would that value compute to on things that aren’t columns?).<a href="#issue-53644667"> ↵ </a></div>
1595 <div class="issue"> Write this section<a href="#issue-001d5014"> ↵ </a></div>
1596 <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>
1597 <div class="issue">
1598 Should traditional pagination (e.g. when printing)
1599 be expressed through some magic in the computed value of <a class="css" data-link-type="maybe" href="#valdef-continue-auto">auto</a>,
1600 or by inserting this in the UA stylesheet:
1601 <pre><code class="lang-css highlight"><span class="n">@media</span> <span class="p">(</span>overflow-block<span class="nt">: paged), (overflow-block: optional-paged) </span><span class="p">{</span>
1602 :root {
1603 continue: paginate;
1604 }
1605 }</code></pre>
1606 <a href="#issue-67ad77e5"> ↵ </a>
1607 </div>
1608 <div class="issue"> Traditional pagination (e.g. when printing) assumes that
1609 :root is contained in the page box,
1610 rather than having the page box be a pseudo element child of :root.
1611 Can we work around that using something similar to fragment boxes?
1612 Or maybe by having a fragment box (reproducing :root) inside a page box inside :root?<a href="#issue-6eb3c644"> ↵ </a></div>
1613 <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>
1614 <div class="issue"> The initial proposal in <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> and implemantation from Opera
1615 used 4 values instead of <a class="css" data-link-type="maybe" href="#valdef-continue-paginate">paginate</a>:
1616 "paged-x | paged-y | paged-x-controls | paged-y-controls".
1617 Should this property also include these values,
1618 or are they better handled as separate properties?
1619 (e.g.: "pagination-layout: auto | horizontal | vertical", "pagination-controls: auto | none")<a href="#issue-e9f64b3d"> ↵ </a></div>
1620 <div class="issue"> Ability to display N pages at once
1621 rather than just one page at once?
1622 Could this be a value of "pagination-layout", such as:
1623 "pagination-layout: horizontal 2;"<a href="#issue-55c97ed8"> ↵ </a></div>
1624 <div class="issue"> Brad Kemper has proposed a model for combining pagination and
1625 fragment overflow, which also deals with displaying multiple pages. <a href="http://www.w3.org/mid/[email protected]">http://www.w3.org/mid/[email protected]</a><a href="#issue-64de292b"> ↵ </a></div>
1626 <div class="issue"> The current implementation of paginated overflow uses
1627 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
1628 rather than the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style">overflow-style</a> property as proposed
1629 in the <a data-link-type="biblio" href="#biblio-css3gcpm">[CSS3GCPM]</a> draft
1630 (which also matches the <a data-link-type="biblio" href="#biblio-css3-marquee">[CSS3-MARQUEE]</a> proposal).
1631 or the <a class="property" data-link-type="propdesc" href="#propdef-continue">continue</a> property as described here. <a href="#issue-360561bd"> ↵ </a></div>
1632 <div class="issue">Or is it as though it’s a next sibling of
1633 the element? Need to figure out exactly how this interacts with
1634 other box-level fixup.<a href="#issue-74f423ed"> ↵ </a></div>
1635 <div class="issue">though it defines <i>multi-column element</i><a href="#issue-928903ce"> ↵ </a></div>
1636 <div class="issue">Should a forced break that breaks to
1637 an outer fragmentation context cause a new fragment of a single
1638 fragment box or a new fragment box?<a href="#issue-060b1de8"> ↵ </a></div>
1639 <div class="issue">Should we find a term other than <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>
1640 <div class="issue"> What if we want to be able to style the pieces of an element
1641 split within another type of fragmentation context?
1642 These rules prevent ever using <a class="css" data-link-type="maybe" href="#selectordef-nth-fragment">::nth-fragment()</a> for that,
1643 despite that the name seems the most logical name for such a feature. <a href="#issue-c4f3aedb"> ↵ </a></div>
1644 <div class="issue"> We should specify that <a class="css" data-link-type="propdesc" href="#propdef-continue">continue: fragments</a> does not apply
1645 to at least some table parts,
1646 and perhaps other elements as well.
1647 We need to determine exactly which ones. <a href="#issue-25a84ff4"> ↵ </a></div>
1648 <div class="issue"> This specification needs to say which type of
1649 fragmentation context is created
1650 so that it’s clear which values of the <a class="property" data-link-type="propdesc">break-*</a> properties
1651 cause breaks within this context.
1652 We probably want <span class="css">break-*: region</span> to apply. <a href="#issue-6c1669e3"> ↵ </a></div>
1653 <div class="issue"> This specification needs a processing model
1654 that will apply in cases where the layout containing the
1655 fragments has characteristics that use the intrinsic size of the fragments
1656 to change the amount of space available for them,
1657 such as <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a>.
1658 There has already been some work on such a processing model
1659 in <a data-link-type="biblio" href="#biblio-css3-regions">[CSS3-REGIONS]</a>,
1660 and the work done on a model there,
1661 and the editors of that specification,
1662 should inform what happens in this specification. <a href="#issue-08d6a80e"> ↵ </a></div>
1663 <div class="issue"> Depending on future discussions,
1664 this <span class="css">::nth-fragment(an+b)</span> syntax
1665 may be replaced with
1666 the new <span class="css">::fragment:nth(an+b)</span> syntax. <a href="#issue-0e3bec77"> ↵ </a></div>
1667 <div class="issue"> Should this apply to continue:fragments only,
1668 or also to continue:paginate?
1669 (If it applies,
1670 then stricter property restrictions would be needed
1671 for continue:paginate.) <a href="#issue-6e8f615f"> ↵ </a></div>
1672 <div class="issue">Does this need to be specified in
1673 the cascading module as well?<a href="#issue-8f881f96"> ↵ </a></div>
1674 <div class="issue">Need to specify exactly how this works,
1675 but it depends on
1676 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>
1677 <div class="issue"> This inheritance rule allows specifying styles indirectly
1678 (by using explicit <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">inherit</a> or using default inheritance
1679 on properties that don’t apply to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">::first-letter</a>)
1680 that can’t be specified directly
1681 (based on the rules in the next section).
1682 This is a problem.
1683 The restrictions that apply to styling inside fragments
1684 should also apply to inheritance from fragments. <a href="#issue-d95b27f9"> ↵ </a></div>
1685 <div class="issue"> Should this apply to continue:fragments only,
1686 or also to continue:paginate? <a href="#issue-d00a7cbb"> ↵ </a></div>
1687 <div class="issue"> If there are multiple boundaries between this line
1688 and the previous, where exactly (in terms of element
1689 boundaries) is the break forced? <a href="#issue-9488ec29"> ↵ </a></div>
1690 <div class="issue">Should this apply to fragment overflow only, or also
1691 to pagination?
1692 Given what we’re doing with the continue property,
1693 it should actually apply to any fragmentainer.<a href="#issue-f6e7b6c3"> ↵ </a></div>
1694 <div class="issue"> having max-lines do nothing on regular elements is not ideal.
1695 When applied to non fragmentainers,
1696 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> so that you only need to reach for one property rather than 2 to get
1697 that effect.<a href="#issue-13fa8ed4"> ↵ </a></div>
1698 <div class="issue"> This specification should define useful behavior
1699 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> in static media (such as print).
1700 Current implementation behavior is quite poor and
1701 produces unexpected results when authors have not considered
1702 what will happen when
1703 the content they produce for interactive media
1704 is printed. <a href="#issue-de91ba9b"> ↵ </a></div>
1705 </div>
1706 </body>
1707 </html>
