Thu, 04 Oct 2012 16:22:48 -0700
[css-regions] timing for regionLayoutUpdate event
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
4 <html lang=en>
5 <head
6 profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://www.w3.org/2006/03/hcard">
7 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
8 <title>CSS Regions Module Level 3</title>
10 <link href="http://purl.org/dc/terms/" rel=schema.DC>
11 <meta content="CSS Regions Module Level 3" name=DC.title>
12 <meta content=text name=DC.type>
13 <meta content=2012-10-04 name=DC.issued>
14 <meta content="Vincent Hardy" name=DC.creator>
15 <meta content="Alex Mogilevsky" name=DC.creator>
16 <meta content="Alan Stearns" name=DC.creator>
17 <meta content=W3C name=DC.publisher>
18 <meta content="http://www.w3.org/TR/2012/ED-css3-regions-20121004/"
19 name=DC.identifier>
20 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
21 rel=DC.rights>
22 <link href="../shared/style/default.css" rel=stylesheet type="text/css">
23 <script defer=defer
24 src="http://test.csswg.org/harness/annotate.js#CSS3-REGIONS_DEV"
25 type="text/javascript"></script>
26 <style type="text/css">
27 #region-style-example p, #region-style-example pre {
28 clear: both;
29 }
31 #region_styling_illustration {
32 margin: 0px auto;
33 width: 70ex;
34 }
35 </style>
36 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
37 type="text/css">
38 <link href="../shared/style/issues.css" rel=stylesheet type="text/css">
39 <link href="../shared/style/alternate-spec-style.css" id=st rel=stylesheet
40 title="alternate spec style" type="text/css">
42 <body>
43 <div class=head id=div-head>
44 <p><a href="http://www.w3.org/"><img alt=W3C height=53 id=mobile-logo
45 src="http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width=90></a>
46 <!--begin-logo-->
48 <p><a href="http://www.w3.org/"><img alt=W3C height=48
49 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
51 <h1 id=css-regions-module>CSS Regions Module Level 3</h1>
53 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 October 2012</h2>
55 <dl>
56 <dt>This version:
58 <dd><a
59 href="http://www.w3.org/TR/2012/ED-css3-regions-20121004/">http://www.w3.org/csswg/css3-regions</a>
61 <dt>Latest version:
63 <dd><a
64 href="http://www.w3.org/TR/css3-regions/">http://www.w3.org/TR/css3-regions/</a>
66 <dt>Previous version:
68 <dd><a
69 href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">http://www.w3.org/TR/2011/WD-css3-regions-20111129/</a>
71 <dt>Editors:
73 <dd class=vcard><span class=fn>Vincent Hardy</span>, <span
74 class=org>Adobe Systems, Inc.</span>, <span
75 class=email>vhardy@adobe.com</span>
77 <dd class=vcard><span class=fn>Alex Mogilevsky</span>, <span
78 class=org>Microsoft</span>, <span
79 class=email>alexmog@microsoft.com</span>
81 <dd class=vcard><span class=fn>Alan Stearns</span>, <span class=org>Adobe
82 Systems, Inc.</span>, <span class=email>stearns@adobe.com</span>
84 <dt>Issues List:
86 <dd><a
87 href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Regions&resolution=---">Bugzilla
88 Bugs for CSS regions</a>
90 <dt>Discussion:
92 <dd><a
93 href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
94 with subject line "<code>[css3-regions] message topic</code>"
95 </dl>
96 <!--begin-copyright-->
97 <p class=copyright><a
98 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
99 rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr
100 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
101 href="http://www.csail.mit.edu/"><abbr
102 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
103 href="http://www.ercim.eu/"><abbr
104 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
105 <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
106 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
107 <a
108 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
109 and <a
110 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
111 use</a> rules apply.</p>
112 <!--end-copyright-->
113 <hr title="Separator for header">
114 </div>
116 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
118 <p>The CSS regions module allows content to flow across multiple areas
119 called regions. The regions are not necessarily contiguous in the document
120 order. The CSS regions module provides an advanced content flow mechanism,
121 which can be combined with positioning schemes as defined by other CSS
122 modules such as the Multi-Column Module <a href="#CSS3COL"
123 rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> or the Grid Layout Module
124 <a href="#CSS3-GRID-LAYOUT"
125 rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> to
126 position the regions where content flows.
128 <h2 class="no-num no-toc" id=status-of-this-document>Status of this
129 document</h2>
131 <p class="big note"><span class=note-prefix>Note </span>This document uses
132 an experimental style sheet. We welcome your feedback on the styles at <a
133 href="mailto:site-comments@w3.org">site-comments@w3.org</a>.</p>
134 <!--begin-status-->
136 <p>This is a public copy of the editors' draft. It is provided for
137 discussion only and may change at any moment. Its publication here does
138 not imply endorsement of its contents by W3C. Don't cite this document
139 other than as work in progress.
141 <p>The (<a
142 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
143 mailing list <a
144 href="mailto:www-style@w3.org?Subject=%5Bcss3-regions%5D%20PUT%20SUBJECT%20HERE">
145 www-style@w3.org</a> (see <a
146 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
147 discussion of this specification. When sending e-mail, please put the text
148 “css3-regions” in the subject, preferably like this:
149 “[<!---->css3-regions<!---->] <em>…summary of comment…</em>”
151 <p>This document was produced by the <a href="/Style/CSS/members">CSS
152 Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
154 <p>This document was produced by a group operating under the <a
155 href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
156 Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
157 rel=disclosure>public list of any patent disclosures</a> made in
158 connection with the deliverables of the group; that page also includes
159 instructions for disclosing a patent. An individual who has actual
160 knowledge of a patent which the individual believes contains <a
161 href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
162 Claim(s)</a> must disclose the information in accordance with <a
163 href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
164 W3C Patent Policy</a>.</p>
165 <!--end-status-->
167 <p>This draft is related to the drafts about Multi-column Layout <a
168 href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>, Grid
169 Layout <a href="#CSS3GRID"
170 rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a>, Flexible Box Layout <a
171 href="#CSS3-FLEXBOX"
172 rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>, and Template
173 Layout <a href="#CSS3LAYOUT"
174 rel=biblioentry>[CSS3LAYOUT]<!--{{CSS3LAYOUT}}--></a>.
176 <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2>
177 <!--begin-toc-->
179 <ul class=toc>
180 <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
181 <ul class=toc>
182 <li><a href="#named-flows-and-regions"><span class=secno>1.1.
183 </span>Named flows and region chains</a>
185 <li><a href="#region-styling"><span class=secno>1.2. </span>CSS Region
186 names and styling</a>
187 </ul>
189 <li><a href="#css-regions-concepts"><span class=secno>2. </span>CSS
190 regions concepts</a>
191 <ul class=toc>
192 <li><a href="#regions"><span class=secno>2.1. </span>Regions</a>
194 <li><a href="#region-chain"><span class=secno>2.2. </span>Region
195 chain</a>
197 <li><a href="#named-flow"><span class=secno>2.3. </span>Named flows</a>
199 <li><a href="#regions-flow-breaking-rules"><span class=secno>2.4.
200 </span>Regions flow breaking rules</a>
201 </ul>
203 <li><a href="#properties-and-rules"><span class=secno>3. </span>Properties
204 and rules</a>
205 <ul class=toc>
206 <li><a href="#the-flow-into-property"><span class=secno>3.1. </span>The
207 ‘<code class=property>flow-into</code>’ property</a>
209 <li><a href="#the-flow-from-property"><span class=secno>3.2. </span>The
210 ‘<code class=property>flow-from</code>’ property</a>
212 <li><a href="#region-flow-break"><span class=secno>3.3. </span>Region
213 flow break properties: ‘<code class=property>break-before</code>’,
214 ‘<code class=property>break-after</code>’, ‘<code
215 class=property>break-inside</code>’</a>
217 <li><a href="#the-region-fragment-property"><span class=secno>3.4.
218 </span>The region-fragment property</a>
220 <li><a href="#the-at-region-style-rule"><span class=secno>3.5.
221 </span>The @region rule</a>
222 </ul>
224 <li><a href="#multi-column-regions"><span class=secno>4.
225 </span>Multi-column regions</a>
227 <li><a href="#pseudo_elements"><span class=secno>5.
228 </span>Pseudo-elements</a>
229 <ul class=toc>
230 <li><a href="#processing-model"><span class=secno>5.1. </span>Processing
231 model</a>
232 </ul>
234 <li><a href="#cssom_view_and_css_regions"><span class=secno>6.
235 </span>CSSOM</a>
236 <ul class=toc>
237 <li><a href="#the-namedflow-interface"><span class=secno>6.1. </span>The
238 NamedFlow interface</a>
240 <li><a href="#the-region-interface"><span class=secno>6.2. </span>The
241 Region interface</a>
243 <li><a href="#region-style-rule-interface"><span class=secno>6.3.
244 </span>The CSSRegionStyleRule interface</a>
246 <li><a href="#region-flow-layout-events"><span class=secno>6.4.
247 </span>Region flow layout events</a>
249 <li><a href="#cssomview-and-regions"><span class=secno>6.5.
250 </span>Clarifications on pre-existing APIs</a>
251 <ul class=toc>
252 <li><a
253 href="#cssomview-getclientrects-and-getboundingclientrect"><span
254 class=secno>6.5.1. </span><code class=idl>getClientRects()</code> and
255 <code>getBoundingClientRects()</code></a>
257 <li><a href="#cssomview-offset-attributes"><span class=secno>6.5.2.
258 </span><code class=idl>offsetTop</code>, <code
259 class=idl>offsetLeft</code>, <code class=idl>offsetWidth</code> and
260 <code class=idl>offsetWidth</code></a>
261 </ul>
262 </ul>
264 <li><a href="#regions-visual-formatting-details"><span class=secno>7.
265 </span>Regions visual formatting details</a>
266 <ul class=toc>
267 <li><a href="#regions-flow-content-box"><span class=secno>7.1.
268 </span>The Region Flow Content Box (RFBC)</a>
269 <ul class=toc>
270 <li><a href="#rfbc-width-resolution"><span class=secno>7.1.1.
271 </span>RFCB ‘<code class=property>width</code>’ resolution</a>
272 </ul>
274 <li><a href="#regions-visual-formatting-steps"><span class=secno>7.2.
275 </span>Regions visual formatting steps</a>
276 <ul class=toc>
277 <li><a href="#rfcb-flow-fragment-height-resolution"><span
278 class=secno>7.2.1. </span>Step 1: RFCB flow fragment height
279 resolution</a>
280 <ul class=toc>
281 <li><a href="#rfcb-flow-fragment-height-resolution-phase-1"><span
282 class=secno>7.2.1.1. </span>RFCB flow fragment height resolution,
283 Phase 1</a>
285 <li><a href="#rfcb-flow-fragment-height-resolution-phase-2"><span
286 class=secno>7.2.1.2. </span>RFCB flow fragment height resolution,
287 Phase 2</a>
288 </ul>
290 <li><a href="#regions-boxes-layout"><span class=secno>7.2.2.
291 </span>Step 2: region boxes layout</a>
293 <li><a href="#named-flows-layout"><span class=secno>7.2.3. </span>Step
294 3: named flows layout</a>
295 </ul>
297 <li><a href="#regions-visual-formatting-implementation-note"><span
298 class=secno>7.3. </span>Regions visual formatting: implementation
299 note</a>
301 <li><a href="#regions-visual-formatting-examples"><span class=secno>7.4.
302 </span>Regions visual formatting example</a>
303 <ul class=toc>
304 <li><a href="#step-1--phase-1-laying-out-rfcbs-with-us"><span
305 class=secno>7.4.1. </span>Step 1 - Phase 1: Laying out RFCBs with
306 used height of zero</a>
308 <li><a href="#step-1--phase-2-layout-flow-to-compute-t"><span
309 class=secno>7.4.2. </span>Step 1 - Phase 2: Layout flow to compute
310 the RFCBs' flow fragments heights</a>
312 <li><a href="#step-2-layout-document-and-regions-witho"><span
313 class=secno>7.4.3. </span>Step 2: Layout document and regions without
314 named flows</a>
316 <li><a href="#step-3-named-flows-layout"><span class=secno>7.4.4.
317 </span>Step 3: named flows layout</a>
318 </ul>
319 </ul>
321 <li><a href="#relation-to-document-events"><span class=secno>8.
322 </span>Relation to document events</a>
324 <li><a href="#relation-to-other-specifications"><span class=secno>9.
325 </span>Relation to other specifications</a>
327 <li><a href="#usecases"><span class=secno>10. </span>Use Cases</a>
329 <li><a href="#conformance"><span class=secno>11. </span>Conformance</a>
331 <li><a href="#changes"><span class=secno>12. </span>Changes</a>
332 <ul class=toc>
333 <li><a href="#changes_from_Aug_28_2012"><span class=secno>12.1.
334 </span>Changes from August 28<sup>th</sup> 2012 version</a>
336 <li><a href="#changes_from_May_03_2012"><span class=secno>12.2.
337 </span>Changes from May 3<sup>rd</sup> 2012 version</a>
339 <li><a href="#changes_from_November_29_2011"><span class=secno>12.3.
340 </span>Changes from November 29<sup>th</sup> 2011 version</a>
342 <li><a href="#changes_from_June_09_2011"><span class=secno>12.4.
343 </span>Changes from June 09<sup>th</sup> 2011 version</a>
344 </ul>
346 <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
348 <li class=no-num><a href="#intro-example-code">Appendix A. Example Code
349 for Introduction</a>
351 <li class=no-num><a href="#references">References</a>
352 <ul class=toc>
353 <li class=no-num><a href="#normative-references">Normative
354 references</a>
356 <li class=no-num><a href="#other-references">Other references</a>
357 </ul>
359 <li class=no-num><a href="#index">Index</a>
361 <li class=no-num><a href="#property-index">Property index</a>
362 </ul>
363 <!--end-toc-->
365 <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
367 <p><em>This section is non-normative.</em>
369 <p>Displaying the complex layouts of a typical magazine, newspaper, or
370 textbook on the web requires capabilities beyond those available in
371 existing CSS modules. Dynamic magazine layout in particular requires
372 flexibility in placement of boxes for content flows. This is the purpose
373 of the CSS regions module.
375 <div class=issue-marker data-bug_id=15733 data-bug_status=NEW> <a
376 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15733">Issue-15733</a>
378 <div class=issue-details>
379 <p class=short-desc>Should the region specification define a mechanism to
380 create blocks that can be regions with CSS syntax?
381 </div>
382 </div>
384 <p>For more complex layouts, content needs to flow from one area of the
385 page to the next without limitation on the areas' sizes and positions.
386 These arbitrary areas are the target of specific content flows which this
387 document calls <a href="#named-flow0">named flows</a>. Each <a
388 href="#named-flow0">named flow</a> can be associated with a set of CSS
389 Regions called a region chain. CSS Regions are based on the rectangular
390 geometry of the CSS box model. Elements in a <a href="#named-flow0">named
391 flow</a> are taken out of the normal visual formatting and rendered in a
392 chain of CSS Regions.
394 <h3 id=named-flows-and-regions><span class=secno>1.1. </span>Named flows
395 and region chains</h3>
397 <p>Consider the layout illustrated in figure 1.
399 <div class=figure> <img
400 alt="multiple chained regions which should receive content from a flow"
401 src="images/intro-example-layout.svg" width=400>
402 <p class=caption>Layout requiring sophisticated content flow
403 </div>
405 <p>The designer's intent is to position an image in box ‘<code
406 class=property>A</code>’ and to flow an article's content from box
407 ‘<code class=css>1</code>’ through boxes ‘<code
408 class=css>2</code>’, ‘<code class=css>3</code>’ and ‘<code
409 class=css>4</code>’. Note that the second box should have two columns,
410 and the image is not contained in the article. Box ‘<code
411 class=css>4</code>’ should auto-size to render the remainder of the
412 article content that did not fit in the earlier boxes.
414 <p>Figure 2 shows an example of the intended visual rendering of the
415 content.
417 <div class=figure> <img
418 alt="Sample rendering showing a single thread of text flowing through a chain of regions"
419 src="images/regions-intro-rendering.png" width=450>
420 <p class=caption>Sample rendering for desired layout
421 </div>
423 <p>There is no existing mechanism in CSS to associate the content with
424 these boxes arranged in this manner so that content flows as intended. The
425 CSS regions module properties provide that mechanism.
427 <p>The following example illustrates how the content of an
428 <code><article></code> element becomes a <a
429 href="#named-flow0">named flow</a> and how boxes marked with ‘<code
430 class=css>region1</code>’, ‘<code class=css>region2</code>’,
431 ‘<code class=css>region3</code>’ and ‘<code
432 class=css>region4</code>’ IDs become CSS Regions that consume the
433 ‘<code class=css>article_flow</code>’ content.
435 <div class=example>
436 <pre>
437 <style>
438 article {
439 <strong>flow-into: article_flow;</strong>
440 }
442 #region1, #region2, #region3, #region4 {
443 <strong>flow-from: article_flow;</strong>
444 }
445 </style>
446 </pre>
447 </div>
449 <p>The ‘<code class=css>article_flow</code>’ value on the ‘<a
450 href="#flow-into"><code class=property>flow-into</code></a>’ property
451 directs the <code>article</code> element to the ‘<code
452 class=css>article_flow</code>’ <a href="#named-flow0">named flow</a>.
453 Setting the ‘<a href="#flow-from"><code
454 class=property>flow-from</code></a>’ property on block containers to
455 ‘<code class=css>article_flow</code>’ makes them CSS Regions and
456 associates the resulting region chain with the <a
457 href="#named-flow0">named flow</a>: the flow is ‘<code
458 class=css>poured</code>’ into the region chain.
460 <p>See <a href="#intro-example-code">Appendix A</a> for sample code using
461 grid layout that implements this example
463 <div class=issue-marker data-bug_id=16858 data-bug_status=ASSIGNED> <a
464 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16858">Issue-16858</a>
466 <div class=issue-details>
467 <p class=short-desc>Should creation of regions from elements be
468 disallowed?
469 </div>
470 </div>
472 <div class=note><span class=note-prefix>Note </span>
473 <p><strong>CSS Regions are independent from layout</strong>
475 <p>Any of the CSS layout facilities can be used to create, position and
476 size boxes that can become CSS Regions. Using a grid layout <a
477 href="#CSS3-GRID-LAYOUT"
478 rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> is just
479 an example. The example could use a flexible box layout <a
480 href="#CSS3-FLEXBOX"
481 rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a> instead.
483 <p>The CSS regions specification does not define a layout mechanism and is
484 meant to integrate with existing and future CSS layout facilities.
486 <p><strong>CSS Regions do not have to be elements</strong>
488 <p>The CSS regions module is independent of the layout of boxes and the
489 mechanism used to create them. For simplicity, our example code in <a
490 href="#intro-example-code">Appendix A</a> uses elements to define the
491 boxes.
493 <p>While the example uses elements for CSS Regions (since <a
494 href="#CSS3-GRID-LAYOUT"
495 rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>
496 requires elements to create grid items) it is important to note that this
497 is not required. CSS Regions can be pseudo-elements, such as ‘<code
498 class=css>::before</code>’ and ‘<code class=css>::after</code>’.
499 The only requirement for an element or pseudo-element to become a CSS
500 Region is that it needs to be subject to CSS styling to receive the ‘<a
501 href="#flow-from"><code class=property>flow-from</code></a>’ property.
502 The CSS page template module (see <a href="#CSS3-PAGE-TEMPLATE"
503 rel=biblioentry>[CSS3-PAGE-TEMPLATE]<!--{{CSS3-PAGE-TEMPLATE}}--></a>)
504 proposes another mechanism to create stylable boxes that can become CSS
505 Regions with the <code class=css>@slot</code> syntax.
506 </div>
508 <h3 id=region-styling><span class=secno>1.2. </span>CSS Region names and
509 styling</h3>
511 <div class=issue-marker data-bug_id=16859 data-bug_status=NEW> <a
512 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16859">Issue-16859</a>
514 <div class=issue-details>
515 <p class=short-desc>Reconsider using @rule for region styling
516 </div>
517 </div>
519 <p>Content can be styled depending on the CSS Region it flows into. It is
520 an extension of pseudo-element styling such as <a
521 href="http://www.w3.org/TR/css3-selectors/#first-line"> <code
522 class=css>::first-line</code> </a> which applies a particular style to a
523 fragment of content. With CSS Region styling, additional selectors may
524 apply depending on the CSS Region into which content flows.
526 <p>In our example, the designer wants to make text flowing into #region1
527 dark blue and bold.
529 <p>This design can be expressed as shown below.
531 <div class=example>
532 <pre>
533 <style>
534 @region #region1 {
535 p {
536 color: #0C3D5F;
537 font-weight: bold;
538 }
539 </style></pre>
540 </div>
542 <p>The <code class=css>@region #region1</code> rule limits its selectors to
543 content flowing into <code class=css>#region1</code>. The following figure
544 shows how the rendering changes if we apply styling specific to
545 <code>#region1</code>. Note how less text fits into this box now that the
546 ‘<code class=property>font-weight</code>’ is bold instead of normal.
548 <div class=figure> <img
549 alt="Illustrate how changing region styling affects the flow of content."
550 src="images/region-styling.png" width=450>
551 <p class=caption>Different rendering with a different region styling
552 </div>
554 <h2 id=css-regions-concepts><span class=secno>2. </span>CSS regions
555 concepts</h2>
557 <h3 id=regions><span class=secno>2.1. </span>Regions</h3>
559 <div class="issue-marker wrapper">
560 <div class=issue-marker data-bug_id=15186 data-bug_status=NEW> <a
561 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Issue-15186</a>
563 <div class=issue-details>
564 <p class=short-desc>Is a mechanism to auto-generate regions necessary in
565 order to support reusable style sheets?
566 </div>
567 </div>
568 </div>
570 <p id=region> A <dfn id=css-region title=region>CSS Region</dfn> is a block
571 container that has an associated <a href="#named-flow0"><em><span>named
572 flow</span></em></a> (see the ‘<a href="#flow-from"><code
573 class=property>flow-from</code></a>’ property).
575 <h3 id=region-chain><span class=secno>2.2. </span>Region chain</h3>
577 <p>A <dfn id=region-chain0>region chain</dfn> is the sequence of regions
578 that are associated with a <a href="#named-flow0">named flow</a>. <a
579 href="#css-region" title=region>CSS Regions</a> in a region chain receive
580 content from the named flow following their order in the chain. <a
581 href="#css-region" title=region>CSS Regions</a> are organized into a <span
582 title=region-chain>region chain</span> according to the document order.
584 <h3 id=named-flow><span class=secno>2.3. </span>Named flows</h3>
586 <p>A <dfn id=named-flow0>named flow</dfn> is the ordered sequence of
587 elements associated with a flow with a given identifier. Elements in a <a
588 href="#named-flow0">named flow</a> are ordered according to the document
589 order.
591 <p>Elements are placed into a <a href="#named-flow0">named flow</a> with
592 the ‘<a href="#flow-into"><code class=property>flow-into</code></a>’
593 property. The elements in a <a href="#named-flow0">named flow</a> are laid
594 out in the <span title=region-chain>region chain</span> that is associated
595 with this <a href="#named-flow0">named flow</a>.
597 <p>Content from a <a href="#named-flow0">named flow</a> is broken up
598 between regions according to the regions flow breaking rules.
600 <p>A <a href="#named-flow0">named flow</a> is created when at least one
601 element is moved into the flow with the given identifier or when at least
602 one CSS Region requests content from that flow.
604 <h3 id=regions-flow-breaking-rules><span class=secno>2.4. </span>Regions
605 flow breaking rules</h3>
607 <p>Breaking a <a href="#named-flow0">named flow</a> across a region chain
608 is similar to breaking a document's content across pages (see <a
609 href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>) or a
610 multi-column element's content across column boxes (see <a href="#CSS3COL"
611 rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>). One difference is that
612 page boxes are generated based on the available content whereas a region
613 chain is a set of recipient boxes for the <a href="#named-flow0">named
614 flow</a> content whose dynamic generation is not in the scope of this
615 specification.
617 <p>Each CSS Region in turn consumes content from its associated <a
618 href="#named-flow0">named flow</a>. The <a href="#named-flow0">named
619 flow</a> content is positioned in the <dfn id=current-region
620 title=current-region>current region</dfn> until a natural or forced region
621 break occurs, at which point the next region in the <span
622 title=region-chain>region chain</span> becomes the <a
623 href="#current-region" title=current-region>current region</a>. If there
624 are no more <a href="#css-region">region</a>s in the region chain and
625 there is still content in the flow, the positioning of the remaining
626 content is controlled by the ‘<a href="#region-fragment"><code
627 class=property>region-fragment</code></a>’ property on the last <a
628 href="#css-region">region</a> in the chain.
630 <p>The CSS regions module follows the fragmentation rules defined in the
631 CSS Fragmentation Module Level 3 (see <a href="#CSS3-BREAK"
632 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>).
634 <h2 id=properties-and-rules><span class=secno>3. </span>Properties and
635 rules</h2>
637 <h3 id=the-flow-into-property><span class=secno>3.1. </span>The ‘<a
638 href="#flow-into"><code class=property>flow-into</code></a>’ property</h3>
640 <div class="issue-marker wrapper">
641 <div class=issue-marker data-bug_id=15811 data-bug_status=NEW> <a
642 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15811">Issue-15811</a>
644 <div class=issue-details>
645 <p class=short-desc>Creating a named flow from external resource
646 </div>
647 </div>
649 <div class=issue-marker data-bug_id=16527 data-bug_status=ASSIGNED> <a
650 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16527">Issue-16527</a>
652 <div class=issue-details>
653 <p class=short-desc>[Shadow]: getFlowByName and shadow DOM
654 </div>
655 </div>
656 </div>
658 <p>The ‘flow-into’ property can place an element into a <a
659 href="#named-flow0">named flow</a>. Elements that belong to the same flow
660 are laid out in the region chain associated with that flow.
662 <table class=propdef summary="flow property definition">
663 <tbody>
664 <tr>
665 <th>Name:
667 <td><dfn id=flow-into>flow-into</dfn>
669 <tr>
670 <th>Value:
672 <td><ident> | none | inherit
674 <tr>
675 <th>Initial:
677 <td>none
679 <tr>
680 <th>Applies to:
682 <td>any element.
683 <p>The ‘<a href="#flow-into"><code
684 class=property>flow-into</code></a>’ property does not apply to any
685 <a
686 href="http://www.w3.org/TR/selectors/#pseudo-elements">pseudo-element</a>
687 such as <code class=css>::first-line</code>, <code
688 class=css>::first-letter</code>, <code class=css>::before</code> or
689 <code class=css>::after</code>.
691 <tr>
692 <th>Inherited:
694 <td>no
696 <tr>
697 <th>Percentages:
699 <td>N/A
701 <tr>
702 <th>Media:
704 <td>visual
706 <tr>
707 <th>Computed value:
709 <td>as specified
710 </table>
712 <dl>
713 <dt>none
715 <dd>The element is not moved to a <a href="#named-flow0">named flow</a>
716 and normal CSS processing takes place.
718 <dt><a
719 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a>
721 <dd>The element is taken out of its parent's flow and placed into the flow
722 with the name ‘<code class=css><ident></code>’. The element is
723 said to have a <dfn id=specified-flow>specified flow</dfn>. The values
724 ‘<code class=property>none</code>’, ‘<code
725 class=property>inherit</code>’, ‘<code
726 class=property>default</code>’, ‘<code class=property>auto</code>’
727 and ‘<code class=property>initial</code>’ are invalid flow names.
728 </dl>
730 <p>A <a href="#named-flow0">named flow</a> needs to be associated with a
731 region chain (one or more CSS regions) for its elements to be visually
732 formatted. If no region chain is associated with a given <a
733 href="#named-flow0">named flow</a>, the elements in the <a
734 href="#named-flow0">named flow</a> are not rendered: they do not generate
735 boxes and are not displayed.
737 <p>The children of an element with a specified flow may themselves have a
738 specified flow.
740 <p>If an element has the same specified flow as one of its ancestors, it
741 becomes a sibling of its ancestor for the purpose of layout in the region
742 chain laying out content from that flow.
744 <p>The ‘<a href="#flow-into"><code class=property>flow-into</code></a>’
745 property does not affect the CSS cascade and inheritance for the elements
746 on which it is specified. The ‘<a href="#flow-into"><code
747 class=property>flow-into</code></a>’ property affects the visual
748 formatting of elements placed into a <a href="#named-flow0">named flow</a>
749 and of the region chain laying out content from a <a
750 href="#named-flow0">named flow</a>.
752 <p>The edges of the first CSS region in a region chain associated with a <a
753 href="#named-flow0">named flow</a> establish the rectangle that is the <a
754 href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing
755 block</a> used for absolutely positioned elements in the <a
756 href="#named-flow0">named flow</a> which do not have an ancestor with a
757 ‘<code class=property>position</code>’ of ‘<code
758 class=property>absolute</code>’, ‘<code
759 class=property>relative</code>’ or ‘<code
760 class=property>fixed</code>’ (see <a href="#CSS21"
761 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). That first CSS region
762 rectangle is used as the containing block instead of the initial
763 containing block. This does not affect fixed position elements in the <a
764 href="#named-flow0">named flow</a> - they are still positioned relative to
765 the viewport or page area even if they have been redirected to a named
766 flow.
768 <p>The first region defines the <a
769 href="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing
770 mode</a> for the entire flow. The writing mode on subsequent regions is
771 ignored.
773 <p>Elements in a <a href="#named-flow0">named flow</a> are sequenced in
774 document order. The structure of a named flow is equivalent to the result
775 of moving the elements to a common parent. The visual formatting model
776 uses the relationships between elements in the named flow structure as
777 input, rather than the elements’ original positions.
779 <div class=note><span class=note-prefix>Note </span>
780 <p>The ‘<a href="#flow-into"><code
781 class=property>flow-into</code></a>’ property moves an element into the
782 flow and the interplay with selectors should be considered carefully.
784 <p>For example,
786 <pre>table {flow-into: table-content}</pre>
788 <p>will move all tables in the ‘<code
789 class=property>table-content</code>’ <a href="#named-flow0">named
790 flow</a>. However, the
792 <pre>table > * {flow-into: table-content} ...</pre>
794 <p>selector will move all immediate children of all table elements into
795 the ‘table-content’ <a href="#named-flow0">named flow</a> (which may
796 be useful as it will usually result, if the immediate children are rows,
797 in merging rows of multiple tables), but the
799 <pre>table * {flow-into: table-content}</pre>
801 <p>selector will move all descendants of table elements into the
802 ‘table-content’ <a href="#named-flow0">named flow</a>, transforming
803 the element tree into a flat list in order of opening tags (which is
804 probably not intentional). This will make all the descendants of table
805 elements siblings in the <a href="#named-flow0">named flow</a>. Having
806 the descendants become siblings in the <a href="#named-flow0">named
807 flow</a> results in a different processing (see <a
808 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#anonymous-boxes">CSS
809 2.1‘<code class=css>s anonymous table objects</code></a>). This note
810 illustrates how authors must exercise caution when choosing a particular
811 selector for setting the ’flow-into' property to avoid unintended
812 results.
813 </div>
815 <div class=note><span class=note-prefix>Note </span>
816 <p>Another consequence of moving elements into named flows is that
817 surrounding whitespace is not moved into the named flow. If you have code
818 like this:
820 <pre>span {flow-into: span-content}
821 <span>one</span>
822 <span>two</span>
823 </pre>
824 Then the ‘<code class=property>span-content</code>’ named flow
825 contents will contain this:
826 <pre><span>one</span><span>two</span>
827 </pre>
828 Which will change the display from "one two" to "onetwo". If whitespace is
829 significant, then moving the parent that contains the whitespace to the
830 named flow is required.</div>
832 <h3 id=the-flow-from-property><span class=secno>3.2. </span>The ‘<a
833 href="#flow-from"><code class=property>flow-from</code></a>’ property</h3>
835 <p>The ‘<a href="#flow-from"><code class=property>flow-from</code></a>’
836 property makes a block container a region and associates it with a <a
837 href="#named-flow0">named flow</a>.
839 <table class=propdef summary="flow-from property definition">
840 <tbody>
841 <tr>
842 <th>Name:
844 <td><dfn id=flow-from>flow-from</dfn>
846 <tr>
847 <th>Value:
849 <td><ident> | none | inherit
851 <tr>
852 <th>Initial:
854 <td>none
856 <tr>
857 <th>Applies to:
859 <td>Non-replaced <a
860 href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block
861 containers</a>. <br>
862 This might be expanded in future versions of the specification to allow
863 other types of containers to receive flow content.
865 <tr>
866 <th>Inherited:
868 <td>no
870 <tr>
871 <th>Percentages:
873 <td>N/A
875 <tr>
876 <th>Media:
878 <td>visual
880 <tr>
881 <th>Computed value:
883 <td>as specified
884 </table>
886 <dl>
887 <dt><strong>none</strong>
889 <dd>The block container is not a <a href="#css-region"
890 title=region>region</a>.
892 <dt><strong><ident></strong>
894 <dd> If the ‘<code class=property>content</code>’ property computes to
895 something else than ‘<code class=property>normal</code>’ (or ‘<code
896 class=property>none</code>’ for a pseudo-element), the block container
897 does not become a <span>CSS Region</span>. If the ‘<code
898 class=property>content</code>’ property computes to ‘<code
899 class=property>normal</code>’ (or ‘<code
900 class=property>none</code>’ for a pseudo-element), then the block
901 container becomes a <span>CSS Region</span> and is ordered in a <a
902 href="#region-chain0">region chain</a> according to its document order.
903 The content from the flow with the <a
904 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier"><ident></a>
905 name will be <a href="#region-flow-break">broken into fragments</a> and
906 visually formatted in the <a
907 href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal
908 boxes</a> of the <a href="#css-region">regions</a> in the <a
909 href="#region-chain0">region chain</a>. <br>
910 If there is no flow with name <ident>, then the block container
911 does not format any content visually. <br>
912 Likewise, if the block container is part of the flow with name
913 <ident>, then the block container does not format any content
914 visually.
915 </dl>
917 <div class=issue-marker data-bug_id=16819 data-bug_status=ASSIGNED> <a
918 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16819">Issue-16819</a>
920 <div class=issue-details>
921 <p class=short-desc>No display when combining flow-from and flow-into is
922 bad
923 </div>
924 </div>
926 <p>A <span>CSS Region</span>‘<code class=css>s document children are not
927 visually formatted unless they are directed to a <a
928 href="#named-flow0">named flow</a> with an associated <a
929 href="#region-chain0">region chain</a>.</code>
931 <div class=note><span class=note-prefix>Note </span>
932 <p>An block container becomes a <span>CSS Region</span> when its
933 ’flow-from' property is set to a valid <ident> value, even if
934 there is no content contributing to the referenced flow. For example:
936 <pre>
937 <style>
938 .article{
939 flow-into: thread;
940 }
941 .region{
942 flow-from: thread;
943 }
944 </style>
945 <html>
946 <body>
947 <div class=region>div content</div>
948 </body>
949 </html>
950 </pre>
951 There is no element matching the <code>.article</code> selector and
952 therefore no content in the <code>thread</code> flow. However, the block
953 container matching the <a href="#css-region"><code>.region</code></a>
954 selector is still associated with that empty <a href="#named-flow0">named
955 flow</a> and, consequently, its children are not formatted visually.</div>
957 <div class=note><span class=note-prefix>Note </span>
958 <p>At the time of this note-writing, the <code>display</code> values that
959 always result in a non-replaced block container include
960 <code>block</code>, <code>inline-block</code>, <code>table-cell</code>,
961 <code>table-caption</code>, and <code>list-item</code>. All of these
962 display values work as regions with non-replaced elements.
963 </div>
965 <div class="issue-marker wrapper">
966 <div class=issue-marker data-bug_id=15189 data-bug_status=NEW> <a
967 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15189">Issue-15189</a>
969 <div class=issue-details>
970 <p class=short-desc>Should regions be non-breakable?
971 </div>
972 </div>
974 <div class=issue-marker data-bug_id=15824 data-bug_status=NEW> <a
975 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Issue-15824</a>
977 <div class=issue-details>
978 <p class=short-desc>Should regions not create a new stacking context?
979 </div>
980 </div>
982 <div class=issue-marker data-bug_id=15827 data-bug_status=NEW> <a
983 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Issue-15827</a>
985 <div class=issue-details>
986 <p class=short-desc>Specify behavior of stacking contexts that are split
987 between regions
988 </div>
989 </div>
990 </div>
992 <p><a href="#css-region" title=region>CSS Regions</a> create a new <a
993 href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking
994 context</a>. <a href="#css-region" title=region>CSS Regions</a> establish
995 a new <a
996 href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block
997 formatting Context</a>.
999 <div class=note><span class=note-prefix>Note </span>
1000 <p>With <a href="#region-chain0">region chains</a>, an element may be
1001 split across multiple boxes and these boxes may overlap (for example if
1002 they are absolutely positioned). So fragments of the same element can
1003 overlap each other. Since each element has a single z-index, it would be
1004 required to find another mechanism to decide in which order
1005 the fragments are rendered. Since each <span>CSS Region</span> creates a
1006 new stacking context, it is clear that each fragment is rendered
1007 separately and their rendering order follows the regular CSS rendering
1008 model.
1009 </div>
1011 <p>Floats or other exclusions (see <a href="#CSS3-EXCLUSIONS"
1012 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>)
1013 potentially impact the content laid out in region chains, just as for
1014 non-regions.
1016 <p>See the <a href="#regions-visual-formatting-details">regions visual
1017 formatting details</a> section for a description of how ‘<code
1018 class=property>width</code>’ and ‘<code
1019 class=property>height</code>’ values are resolved for <span>CSS
1020 Region</span> boxes.
1022 <h3 id=region-flow-break><span class=secno>3.3. </span>Region flow break
1023 properties: ‘<a href="#break-before"><code
1024 class=property>break-before</code></a>’, ‘<a href="#break-after"><code
1025 class=property>break-after</code></a>’, ‘<a href="#break-inside"><code
1026 class=property>break-inside</code></a>’</h3>
1028 <p>User agents laying out content in multiple regions must determine where
1029 content breaks occur. The problem of breaking content into fragments
1030 fitting in regions is similar to breaking content into pages or columns.
1032 <p>Each break ends layout in the current region and causes remaining pieces
1033 of content from the <a href="#named-flow0">named flow</a> to be visually
1034 formatted in the following region in the region chain, if there is one.
1036 <p>The following extends the ‘<a href="#break-before"><code
1037 class=property>break-before</code></a>’, ‘<a href="#break-after"><code
1038 class=property>break-after</code></a>’ and ‘<a
1039 href="#break-inside"><code class=property>break-inside</code></a>’
1040 properties from the <a href="#CSS3COL"
1041 rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> specification to account
1042 for regions. The additional values are described below.
1044 <table class=propdef summary="break-before property definition">
1045 <tbody>
1046 <tr>
1047 <td><a href="#dom-named-flow-name"><em>Name:</em></a>
1049 <td><dfn id=break-before>break-before</dfn>
1051 <tr>
1052 <td><em>Value:</em>
1054 <td>auto | always | avoid | left | right | page | column | region |
1055 avoid-page | avoid-column | avoid-region
1057 <tr>
1058 <td><em>Initial:</em>
1060 <td>auto
1062 <tr>
1063 <td><em>Applies to:</em>
1065 <td>block-level elements
1067 <tr>
1068 <td><em>Inherited:</em>
1070 <td>no
1072 <tr>
1073 <td><em>Percentages:</em>
1075 <td>N/A
1077 <tr>
1078 <td><em>Media:</em>
1080 <td>visual
1082 <tr>
1083 <td><em>Computed value:</em>
1085 <td>specified value
1086 </table>
1088 <table class=propdef summary="break-after property definition">
1089 <tbody>
1090 <tr>
1091 <td><a href="#dom-named-flow-name"><em>Name:</em></a>
1093 <td><dfn id=break-after>break-after</dfn>
1095 <tr>
1096 <td><em>Value:</em>
1098 <td>auto | always | avoid | left | right | page | column | region |
1099 avoid-page | avoid-column | avoid-region
1101 <tr>
1102 <td><em>Initial:</em>
1104 <td>auto
1106 <tr>
1107 <td><em>Applies to:</em>
1109 <td>block-level elements
1111 <tr>
1112 <td><em>Inherited:</em>
1114 <td>no
1116 <tr>
1117 <td><em>Percentages:</em>
1119 <td>N/A
1121 <tr>
1122 <td><em>Media:</em>
1124 <td>visual
1126 <tr>
1127 <td><em>Computed value:</em>
1129 <td>specified value
1130 </table>
1132 <table class=propdef summary="break-inside property definition">
1133 <tbody>
1134 <tr>
1135 <td><a href="#dom-named-flow-name"><em>Name:</em></a>
1137 <td><dfn id=break-inside>break-inside</dfn>
1139 <tr>
1140 <td><em>Value:</em>
1142 <td>auto | avoid | avoid-page | avoid-column | avoid-region
1144 <tr>
1145 <td><em>Initial:</em>
1147 <td>auto
1149 <tr>
1150 <td><em>Applies to:</em>
1152 <td>block-level elements
1154 <tr>
1155 <td><em>Inherited:</em>
1157 <td>no
1159 <tr>
1160 <td><em>Percentages:</em>
1162 <td>N/A
1164 <tr>
1165 <td><em>Media:</em>
1167 <td>visual
1169 <tr>
1170 <td><em>Computed value:</em>
1172 <td>specified value
1173 </table>
1175 <p>These properties describe page, column and region break behavior
1176 before/after/inside the generated box. These values are normatively
1177 defined in <a href="#CSS3COL"
1178 rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>:
1180 <p>This specification adds the following new values:
1182 <dl>
1183 <dt>region
1185 <dd>Always force a region break before (after) the generated box.
1187 <dt>avoid-region
1189 <dd>Avoid a region break before (after, inside) the generated box.
1190 </dl>
1192 <p>The behavior of region breaks with regards to regions is identical to
1193 the behavior of page breaks with regards to pages, as defined in the <a
1194 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
1196 <h3 id=the-region-fragment-property><span class=secno>3.4. </span>The
1197 region-fragment property</h3>
1199 <table class=propdef summary="break-after property definition">
1200 <tbody>
1201 <tr>
1202 <td><a href="#dom-named-flow-name"><em>Name:</em></a>
1204 <td><dfn id=region-fragment>region-fragment</dfn>
1206 <tr>
1207 <td><em>Value:</em>
1209 <td>auto | break
1211 <tr>
1212 <td><em>Initial:</em>
1214 <td>auto
1216 <tr>
1217 <td><em>Applies to:</em>
1219 <td><em title="region element">CSS Regions</em>
1221 <tr>
1222 <td><em>Inherited:</em>
1224 <td>no
1226 <tr>
1227 <td><em>Percentages:</em>
1229 <td>N/A
1231 <tr>
1232 <td><em>Media:</em>
1234 <td>visual
1236 <tr>
1237 <td><em>Computed value:</em>
1239 <td>specified value
1240 </table>
1242 <p>The ‘<a href="#region-fragment"><code
1243 class=property>region-fragment</code></a>’ property controls the
1244 behavior of the <em id=last-region>last region</em> associated with a <a
1245 href="#named-flow0">named flow</a>.
1247 <dl>
1248 <dt>auto
1250 <dd>Content flows as it would in a regular content box. If the content
1251 exceeds the container box, it is subject to the <a
1252 href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a>
1253 property's computed value on the CSS Region. Region breaks must be
1254 ignored on the last region.
1256 <dt>break
1258 <dd>
1259 <p>If the content fits within the <em>CSS Region</em>, then this property
1260 has no effect. If the content does not fit within the <em>CSS
1261 Region</em>, the content breaks as if flow was going to continue in a
1262 subsequent region. See the <a
1263 href="#regions-flow-breaking-rules">breaking rules</a> section. A forced
1264 region break takes precedence over a natural break point.
1266 <p>Flow content that follows the last break in the last region is not
1267 rendered.
1268 </dl>
1270 <p>The ‘<a href="#region-fragment"><code
1271 class=property>region-fragment</code></a>’ property does not influence
1272 the size of the region it applies to.
1274 <p>The following code sample illustrates the usage of the ‘<a
1275 href="#region-fragment"><code class=property>region-fragment</code></a>’
1276 property.
1278 <div class=example>
1279 <pre>
1280 <style>
1281 article {
1282 flow-into: "article";
1283 }
1285 #region_1, #region_2 {
1286 flow-from: article;
1287 <strong>region-fragment: break;</strong> /* or auto */
1288 <strong>overflow: visible;</strong> /* or hidden */
1289 }
1291 </style>
1293 <article>...</article>
1295 <div id="region_1"></div>
1296 <div id="region_2"></div>
1298 </pre>
1299 </div>
1301 <div class=figure>
1302 <table style="border: 1px solid gray;width: 100%;"
1303 summary="Different values for the region-fragment property - Illustration.">
1304 <tbody>
1305 <tr>
1306 <td>‘<code class=css>flow-into: "article"</code>’
1308 <td><code class=html>region_1</code> and <code
1309 class=html>region_2</code>
1311 <td>‘<code class=css>region-fragment: auto</code>’<br>
1312 ‘<code class=css>overflow:visible</code>’
1314 <tr>
1315 <td rowspan=3 style="vertical-align: top;"><img
1316 alt="regions receiving the flow content"
1317 src="images/region-overflow-flow.png">
1319 <td><img alt="result if region-overflow is set to 'break'"
1320 src="images/region-overflow-regions.png">
1322 <td><img alt="regions receiving the flow content"
1323 src="images/region-overflow-auto-overflow-visible.png">
1325 <tr>
1326 <td>‘<code class=css>region-fragment: break</code>’
1328 <td>‘<code class=css>region-fragment: auto</code>’<br>
1329 ‘<code class=css>overflow:hidden</code>’
1331 <tr>
1332 <td><img alt="result if region-overflow is set to 'break'"
1333 src="images/region-overflow-break.png">
1335 <td><img alt="regions receiving the flow content"
1336 src="images/region-overflow-auto-overflow-hidden.png">
1337 </table>
1339 <p class=caption>Different values for the region-fragment property
1340 </div>
1342 <div class=note><span class=note-prefix>Note </span>
1343 <p>The ‘<code class=property>overflow</code>’ property is honored on a
1344 region: if region content overflows, such as the borders of elements on
1345 the last line, the ‘<code class=property>overflow</code>’ property
1346 controls the visibility of the overflowing content. See the ‘<code
1347 class=property>overflow</code>’ property definition (<a href="#CSS21"
1348 rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>).
1349 </div>
1351 <h3 id=the-at-region-style-rule><span class=secno>3.5. </span>The @region
1352 rule</h3>
1354 <p>An ‘<a href="#css-region"><code class=css>@region</code></a>’ rule
1355 contains style declarations specific to particular regions.
1357 <pre>
1358 @region <selector> {
1359 ... CSS styling rules ...
1360 }
1361 </pre>
1363 <p>The ‘<a href="#css-region"><code class=css>@region</code></a>’ rule
1364 consists of the keyword ‘<a href="#css-region"><code
1365 class=css>@region</code></a>’ followed by a <a
1366 href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
1367 and a block of style rules. The ‘<a href="#css-region"><code
1368 class=css>@region</code></a>’ rule and the selector constitute the
1369 region's ‘<code class=css>flow fragment</code>’ selector. The region's
1370 flow fragment selector specifies which range of elements in the flow are
1371 subject to the style rules in the following block: it applies to the range
1372 (see <a href="#DOM" rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) from the
1373 region's flow that flows in the selected region(s).
1375 <div class=issue-marker data-bug_id=15713 data-bug_status=NEW> <a
1376 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Issue-15713</a>
1378 <div class=issue-details>
1379 <p class=short-desc>Model for styling element fragments
1380 </div>
1381 </div>
1383 <p>Elements that are fully or partially in the ‘<code class=css>flow
1384 fragment</code>’ may match any of the selectors found in the style rule.
1385 However, the style rules only apply to the portion of the element that
1386 falls into the corresponding region.
1388 <p>Only a limited list of properties can be set in a region style rule:
1390 <div class="issue-marker wrapper">
1391 <div class=issue-marker data-bug_id=16921 data-bug_status=REOPENED> <a
1392 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16921">Issue-16921</a>
1394 <div class=issue-details>
1395 <p class=short-desc>Should text-align be added to region styling
1396 properties
1397 </div>
1398 </div>
1399 </div>
1401 <ol>
1402 <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a>
1404 <li><a href="http://www.w3.org/TR/CSS2/colors.html">color property</a>
1406 <li><a href="http://www.w3.org/TR/css3-color/#transparency">opacity
1407 property</a>
1409 <li><a href="http://www.w3.org/TR/css3-background/#backgrounds">background
1410 property</a>
1412 <li><a
1413 href="http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing">‘<code
1414 class=property>word-spacing</code>’</a>
1416 <li><a
1417 href="http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing">‘<code
1418 class=property>letter-spacing</code>’</a>
1420 <li><a
1421 href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">‘<code
1422 class=property>text-decoration</code>’</a>
1424 <li><a
1425 href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">‘<code
1426 class=property>text-transform</code>’</a>
1428 <li><a
1429 href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code
1430 class=property>line-height</code>’</a>
1432 <li><a href="http://www.w3.org/TR/css3-background/#borders">border
1433 properties</a>
1435 <li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner
1436 properties</a>
1438 <li><a href="http://www.w3.org/TR/css3-background/#border-images">border
1439 images properties</a>
1441 <li><a href="http://www.w3.org/TR/CSS2/box.html#margin-properties">margin
1442 properties</a>
1444 <li><a
1445 href="http://www.w3.org/TR/CSS2/box.html#padding-properties">padding
1446 properties</a>
1448 <li><a href="http://www.w3.org/TR/css3-text/#text-shadow">‘<code
1449 class=property>text-shadow</code>’ property</a>
1451 <li><a
1452 href="http://www.w3.org/TR/css3-background/#the-box-shadow">‘<code
1453 class=property>box-shadow</code>’ property</a>
1455 <li><a
1456 href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">‘<code
1457 class=property>box-decoration-break</code>’ property</a>
1459 <li><a
1460 href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">‘<code
1461 class=property>width</code>’ property</a>
1462 </ol>
1464 <div class=example id=region-style-example>
1465 <p>In the following example, the <a href="#named-flow0">named flow</a>
1466 ‘<code class=css>article_flow</code>’ flows through ‘<code
1467 class=css>region_1</code>’ and ‘<code class=css>region_2</code>’.
1469 <pre>
1470 <style>
1471 #div_1 {
1472 <strong>flow-into: article_flow;</strong>
1473 }
1475 #region_1, #region_2 {
1476 <strong>flow-from: article_flow;</strong>
1477 }
1479 /* region style "RSA" */
1480 <strong>@region #region_1, #region_2</strong> {
1481 div {...}
1482 p {...}
1483 }
1485 /* region style "RSB" */
1486 <strong>@region #region_1</strong> {
1487 p {...}
1488 }
1490 </style>
1492 <div id="div_1">
1493 <p id="p_1">...</p>
1494 <p id="p_2">...</p>
1495 </div>
1497 <div id="region_1"></div>
1498 <div id="region_2"></div>
1500 </pre>
1502 <div id="region_styling_illustration"> <img
1503 alt="Illustration showing how a named flow content fits into regions to illustrate the @region styling."
1504 id="region_styling_img_2" name="region_styling_img_2"
1505 src="images/region-styling-2.png">
1506 <ul class=swatch-list>
1507 <li><span class=swatch style="background:#1C75BC"> </span>div div_1
1509 <li><span class=swatch style="background:crimson"> </span>paragraph p_1
1511 <li><span class=swatch style="background:white"> </span>paragraph p_2
1513 <li><span class=swatch style="background:#E6E7E8"> </span>range of flow
1514 that fits into region_1
1516 <li><span class=swatch style="background:#BCBEC0"> </span>range of flow
1517 that fits into region_2
1518 </ul>
1519 </div>
1521 <p>The region style ‘<code class=css>RSA</code>’ applies to flow
1522 content that is laid out in either ‘<code class=css>region_1</code>’
1523 or ‘<code class=css>region_2</code>’.
1525 <p>The first rule set ‘<code class=css>div {...}</code>’ applies to
1526 all <code class=html><div></code> elements that fit partially or
1527 fully into ‘<code class=css>region_1</code>’ or ‘<code
1528 class=css>region_2</code>’. <code class=html>div_1</code> is split
1529 between ‘<code class=css>region_1</code>’ and ‘<code
1530 class=css>region_2</code>’ and gets the style from this style rule.
1532 <p>The second rule set ‘<code class=css>p {...}</code>’ applies to all
1533 <code class=html><p></code> elements that fit into ‘<code
1534 class=css>region_1</code>’ or ‘<code class=css>region_2</code>’. In
1535 our example, both <code class=html>p_1</code> and <code
1536 class=html>p_2</code> are selected.
1538 <p>The region style ‘<code class=css>RSB</code>’ applies to flow
1539 content that fits in ‘<code class=css>region_1</code>’.
1541 <p>The first rule set ‘<code class=css>p {...}</code>’ matches <code
1542 class=html>p_1</code> and <code class=html>p_2</code> because these
1543 paragraphs flow into ‘<code class=css>region_1</code>’. Only the
1544 fragment of <code class=html>p_2</code> that flows into <code
1545 class=html>region_1</code> is styled with this rule.
1546 </div>
1548 <div class=issue-marker data-bug_id=15734 data-bug_status=NEW> <a
1549 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Issue-15734</a>
1551 <div class=issue-details>
1552 <p class=short-desc>@region and specificity
1553 </div>
1554 </div>
1556 <p>The specificity of the selectors in a ‘<a href="#css-region"><code
1557 class=css>@region</code></a>’ rule is calculated as <a
1558 href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in the
1559 CSS Selectors module (see <a href="#SELECT"
1560 rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>). In other words, the ‘<a
1561 href="#css-region"><code class=css>@region</code></a>’ rule adds an
1562 extra condition to the selector's matching, but does not change the
1563 selector's specificity. This is the same behavior as selectors appearing
1564 in ‘<code class=css>@media</code>’ rules declaration blocks (see <a
1565 href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>), where the
1566 rule does not influence the selectors' specificity.
1568 <p>Consequently, selectors that match a given element (as describe above),
1569 participate in the <a
1570 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS
1571 Cascading order</a> as defined in <a href="#CSS21"
1572 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
1574 <div> Region styling does not apply to nested regions. For example, if a
1575 region ‘<code class=property>A</code>’ receives content from a flow
1576 that contains region ‘<code class=property>B</code>’, the content that
1577 flows into ‘<code class=property>B</code>’ does not receive the region
1578 styling specified for region ‘<code class=property>A</code>’.</div>
1580 <h2 id=multi-column-regions><span class=secno>4. </span>Multi-column
1581 regions</h2>
1583 <p>A <a
1584 href="http://dev.w3.org/csswg/css3-multicol/#multi-column-element">multi-column</a>
1585 <a href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> element
1586 can have an assigned <a href="#named-flow0"><em><span>named
1587 flow</span></em></a>. The element becomes part of the region chain for
1588 that named flow, and flows its content fragments through columns according
1589 to the multi-column specification <a href="#CSS3COL"
1590 rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>. In particular, when
1591 computing the <a href="#rfcb-flow-fragment-height-resolution">flow
1592 fragment height</a> of a multi-column element that is associated with a <a
1593 href="#named-flow0"><em><span>named flow</span></em></a>, the <a
1594 href="http://dev.w3.org/csswg/css3-multicol/#column-fill">‘<code
1595 class=property>column-fill</code>’</a> <a href="#CSS3COL"
1596 rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> property is honored to
1597 balance the fragments of content that would flow through its columns.
1599 <div class=example>
1600 <p>The following example:
1602 <pre>
1603 <style>
1604 #multi-col {
1605 column-count: 2;
1606 flow-from: article;
1607 height: 6em;
1608 column-gap: 1em;
1609 }
1611 #remainder {
1612 flow-from: article;
1613 height: auto;
1614 }
1615 </style>
1617 <article>...</article>
1618 <div id="multicol"></div>
1619 <div id="remainder"></div></pre>
1621 <p>is equivalent in rendering to, for example:
1623 <pre>
1624 <style>
1625 #flex {
1626 display: flex;
1627 flex-pack: justify;
1628 height: 6em;
1629 }
1630 #flex > div {
1631 flow-from: article;
1632 width: calc(50% - 0.5em);
1633 }
1635 #remainder {
1636 flow-from: article;
1637 height: auto;
1638 }
1639 </style>
1641 <article>...</article>
1642 <div id="flex">
1643 <div />
1644 <div />
1645 </div>
1646 <div id="remainder"></div></pre>
1647 </div>
1649 <p>Overflow of multicol regions is mostly handled according to the same
1650 rules as other CSS Regions. If the remainder of the named flow does not
1651 fit in the multicol region, then the rest of the content flows into the
1652 remaining region chain. However, if a multicol region is the last region
1653 in a <a href="#region-chain0">region chain</a>, then the multicol region
1654 must follow the <a
1655 href="http://dev.w3.org/csswg/css3-multicol/#overflow-columns">overflow
1656 column rules</a> <a href="#CSS3COL"
1657 rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a>.
1659 <h2 id="pseudo_elements"><span class=secno>5. </span>Pseudo-elements</h2>
1661 <div class=issue-marker data-bug_id=15188 data-bug_status=NEW> <a
1662 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Issue-15188</a>
1664 <div class=issue-details>
1665 <p class=short-desc>add functionality for having textual description like
1666 "continued here" or "continued on page x" to regions.
1667 </div>
1668 </div>
1670 <p>It can be useful to visually mark the content to highlight that a
1671 content thread is flowing through the region chain. For example, a marker
1672 such as <em>‘<code class=css>continued below</code>’</em> clearly
1673 indicates, at the end of a CSS Region, that there is more content in the
1674 flow which can be found by scrolling past whatever content interrupts the
1675 region chain.
1677 <p>The ‘<code class=css>::before</code>’ and ‘<code
1678 class=css>::after</code>’ pseudo-elements (see <a href="#SELECT"
1679 rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>) let content authors mark
1680 the beginning and end of a region with such markers.
1682 <h3 id=processing-model><span class=secno>5.1. </span>Processing model</h3>
1684 <p>The ‘<code class=css>::before</code>’ content is laid out in the
1685 region prior to any other content coming from the flow. Note that it is
1686 possible to set the ‘<code class=css>::before</code>’ pseudo-element's
1687 ‘<code class=property>display</code>’ property to ‘<code
1688 class=property>run-in</code>’ to align it with the content's inline
1689 boxes.
1691 <p>The ‘<code class=css>::after</code>’ content is laid out in the
1692 region after laying out the flow fragment content. Then, flow content is
1693 removed from the fragment to accommodate the ‘<code
1694 class=css>::after</code>’ content. Accommodating means that the ‘<code
1695 class=css>::after</code>’ content is laid out without overflowing the
1696 region. The ‘<code class=property>display</code>’ property of the
1697 ‘<code class=css>::after</code>’ content can be set to ‘<code
1698 class=property>run-in</code>’ to align with the region's content's
1699 inline boxes. In that case, the ‘<code class=css>::after</code>’
1700 content becomes the last inline box of the previous element in the flow
1701 that has some visual rendering in the region and can accommodate for the
1702 ‘<code class=css>::after</code>’ box.
1704 <p>If there is not enough room to accommodate the ::before content, the
1705 ‘<code class=css>::after</code>’ content after removing all flow
1706 fragment content, or a combination of the two, then the ::before and/or
1707 ::after content overflows.
1709 <h2 id="cssom_view_and_css_regions"><span class=secno>6. </span>CSSOM</h2>
1711 <div class=issue-marker-wrapper>
1712 <div class=issue-marker data-bug_id=15679 data-bug_status=NEW> <a
1713 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15679">Issue-15679</a>
1715 <div class=issue-details>
1716 <p class=short-desc>elementFromPoint and CSS regions
1717 </div>
1718 </div>
1720 <div class=issue-marker data-bug_id=15933 data-bug_status=ASSIGNED> <a
1721 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15933">Issue-15933</a>
1723 <div class=issue-details>
1724 <p class=short-desc>Terms in WebIDL snippets inconsistently linked
1725 </div>
1726 </div>
1727 </div>
1729 <p>Since content may flow into multiple regions, authors need a way to
1730 determine if there are enough regions to flow all the content from a named
1731 flow. This is especially important considering that the size of regions or
1732 the size of the content may change depending on the display context. For
1733 example, flowing the same content on a mobile phone with a small screen
1734 may require more regions than on a large desktop display. Another example
1735 is the user changing the font size of text flowing through regions.
1736 Depending on the change, new regions may be needed to accommodate for the
1737 additional space required to fit the larger text or some regions may need
1738 to be removed for smaller text.
1740 <h3 id=the-namedflow-interface><span class=secno>6.1. </span>The NamedFlow
1741 interface</h3>
1743 <p>A <a href="#named-flow0">named flow</a> is created when it becomes
1744 referenced by the ‘<a href="#flow-into"><code
1745 class=property>flow-into</code></a>’ and/or ‘<a
1746 href="#flow-from"><code class=property>flow-from</code></a>’ computed
1747 values. The following APIs allow scripts to reference a <a
1748 href="#dom-named-flow"><code class=idl>NamedFlow</code></a> object
1749 representation of a <a href="#named-flow0">named flow</a>.
1751 <p>An additional method on the <a
1752 href="http://www.w3.org/TR/dom/#interface-document"><code
1753 class=idl>Document</code></a> interface provide access to <a
1754 href="#named-flow0">named flows</a>.
1756 <pre class=idl>
1757 partial interface <a
1758 href="http://www.w3.org/TR/dom/#interface-document">Document</a> {
1759 <a
1760 href="#dom-named-flow-collection">NamedFlowCollection</a> <a
1761 href="#document-getnamedflows">getNamedFlows()</a>;
1762 };
1763 </pre>
1765 <p>The <dfn id=document-getnamedflows><code
1766 class=idl>getNamedFlows()</code></dfn> method on the <a
1767 href="http://www.w3.org/TR/dom/#interface-document"><code
1768 class=idl>Document</code></a> interface returns a static snapshot of all
1769 the current <a href="#named-flow0">named flows</a> in the document.
1771 <p>The <a href="#dom-named-flow"><code class=idl>namedFlows</code></a>
1772 collection must include all <a href="#named-flow0">named flows</a> that
1773 are currently in the <code>CREATED</code> state. The list must not include
1774 <a href="#named-flow0">named flows</a> that are in the <code>NULL</code>
1775 state.
1777 <ul>
1778 <li><code class=idl>NULL</code>: the user agent must return
1779 <code>null</code>.
1781 <li><code class=idl>CREATED</code>: the user agent must return a valid <a
1782 href="#dom-named-flow"><code class=idl>NamedFlow</code></a> instance.
1783 </ul>
1785 <p>The <dfn id=dom-named-flow-collection><code
1786 class=idl>NamedFlowCollection</code></dfn> interface provides a list of
1787 current <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a>
1788 instances in the document. The collection is a snapshot of the data.
1790 <pre class=idl>
1791 interface NamedFlowCollection {
1792 readonly attribute unsigned long <a
1793 href="#dom-named-flow-collection-length">length</a>;
1794 [IndexGetter] <a
1795 href="#dom-named-flow">NamedFlow?</a> <a
1796 href="#dom-named-flow-collection-item">item</a> (unsigned long index);
1797 [NameGetter] <a
1798 href="#dom-named-flow">NamedFlow?</a> <a
1799 href="#dom-named-flow-collection-named-item">namedItem</a> (DOMString name);
1800 };</pre>
1802 <p>The <dfn id=dom-named-flow-collection-length><code
1803 class=idl>length</code></dfn> attribute returns the number of items in the
1804 collection.
1806 <p>The <dfn id=dom-named-flow-collection-item><code
1807 class=idl>item(index)</code></dfn> method returns the <a
1808 href="#dom-named-flow"><code>NamedFlow</code></a> instance at index
1809 <em>index</em> in the collection or <code class=idl>undefined</code> if
1810 <em>index</em> is out of range. An object <code>collection</code>
1811 implementing <a
1812 href="#dom-named-flow-collection"><code>NamedFlowCollection</code></a>
1813 supports indices in the range <code>0 ≤ index <
1814 collection.length</code>.
1816 <p>The <dfn id=dom-named-flow-collection-named-item><code
1817 class=idl>namedItem(name)</code></dfn> method returns the <a
1818 href="#dom-named-flow"><code>NamedFlow</code></a> instance in the
1819 collection whose name attribute matches the supplied <a
1820 href="#dom-named-flow-name"><em>name</em></a>, or <code
1821 class=idl>undefined</code> if there is no match.
1823 <p>The <dfn id=dom-named-flow><code class=idl>NamedFlow</code></dfn>
1824 interface offers a representation of a <a href="#named-flow0">named
1825 flow</a> instance.
1827 <p>The <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a>
1828 interface can be used for different purposes. For example, the <a
1829 href="#dom-named-flow-get-regions-by-content"><code>getRegionsByContent()</code></a>
1830 method can help navigate by bookmark: a script can find the <a
1831 href="#css-region">region</a>s that display a particular anchor and bring
1832 them to view.
1834 <p>Likewise, the interface allows authors to check if all content has been
1835 fitted into existing regions. If it has, the <a
1836 href="#dom-named-flow-overset"><code>overset</code></a> attribute would be
1837 false.
1839 <pre class=idl>
1840 interface <a href="#dom-named-flow">NamedFlow</a> : <a
1841 href="http://www.w3.org/TR/dom/#interface-eventtarget">EventTarget</a> {
1842 readonly attribute DOMString <a
1843 href="#dom-named-flow-name">name</a>;
1844 readonly attribute boolean <a
1845 href="#dom-named-flow-overset">overset</a>;
1846 sequence<<a
1847 href="#region-interface">Region</a>> <a
1848 href="#dom-named-flow-get-regions">getRegions()</a>;
1849 readonly attribute integer <a
1850 href="#dom-named-flow-first-empty-region-index">firstEmptyRegionIndex</a>;
1851 <a
1852 href="http://www.w3.org/TR/dom/#interface-nodelist">NodeList</a> <a
1853 href="#dom-named-flow-get-content">getContent()</a>;
1854 sequence<<a
1855 href="#region-interface">Region</a>> <a
1856 href="#dom-named-flow-get-regions-by-content">getRegionsByContent</a>(<a
1857 href="http://www.w3.org/TR/dom/#interface-node">Node</a> node);
1858 };</pre>
1860 <p>The <dfn id=dom-named-flow-name><code class=idl>name</code></dfn>
1861 attribute returns the name of the <a href="#dom-named-flow"><code
1862 class=idl>NamedFlow</code></a> instance.
1864 <p>The <dfn id=dom-named-flow-overset><code class=idl>overset</code></dfn>
1865 attribute returns true if there are <a href="#named-flow0">named flow</a>
1866 fragments that do not fit in the associated region chain. The attribute
1867 also returns true if there is no associated region chain. Otherwise, it
1868 returns false.
1870 <p>The <dfn id=dom-named-flow-get-regions><code
1871 class=idl>getRegions()</code></dfn> method returns the sequence of regions
1872 in the <a href="#region-chain0">region chain</a> associated with the <a
1873 href="#named-flow0">named flow</a>. Note that the returned values is a
1874 static sequence in document order.
1876 <p>The <dfn
1877 id=dom-named-flow-first-empty-region-index>firstEmptyRegionIndex</dfn> is
1878 the index of the first region in the region chain with the <a
1879 href="#dom-region-regionoverset"><code>regionOverset</code></a> attribute
1880 set to <code>empty</code>. If all regions have the <a
1881 href="#dom-region-regionoverset"><code>regionOverset</code></a> attribute
1882 set to <code>fit</code> or <a
1883 href="#dom-named-flow-overset"><code>overset</code></a>, the value for <a
1884 href="#dom-named-flow-first-empty-region-index"><code>firstEmptyRegionIndex</code></a>
1885 is <code>-1</code>. If there are no regions in the <a
1886 href="#region-chain0">region chain</a>, the value is <code>-1</code> as
1887 well.
1889 <p>The <dfn id=dom-named-flow-get-content>getContent()</dfn> method returns
1890 an ordered collection of nodes that constitute the <a
1891 href="#named-flow0">named flow</a>. The returned list is a static snapshot
1892 of the <a href="#named-flow0">named flow</a> content at the time the
1893 method is invoked. This list contains the elements that were moved to the
1894 <a href="#named-flow0">named flow</a> by their flow-into property but not
1895 their descendants (unless the descendants are themselves moved to the <a
1896 href="#named-flow0">named flow</a>).
1898 <p>The <dfn
1899 id=dom-named-flow-get-regions-by-content>getRegionsByContent()</dfn>
1900 method returns the sequence of regions that contain at least part of the
1901 target content node if it belongs to the <a href="#named-flow0">named
1902 flow</a> directly (i.e., its ‘<a href="#flow-into"><code
1903 class=property>flow-into</code></a>’ computed value is the <a
1904 href="#named-flow0">named flow</a>) or one of its ancestors belongs to the
1905 <a href="#named-flow0">named flow</a>. Otherwise, the method returns an
1906 empty sequence. The returned value is a static sequence in document order.
1908 <p>The <a href="#named-flow0">named flow</a> states are :
1910 <ul>
1911 <li><code class=idl>NULL</code>: the <a href="#named-flow0">named flow</a>
1912 is not referenced by any ‘<a href="#flow-into"><code
1913 class=property>flow-into</code></a>’ or ‘<a href="#flow-from"><code
1914 class=property>flow-from</code></a>’ computed value.
1916 <li><code class=idl>CREATED</code>: the <a href="#named-flow0">named
1917 flow</a> is referenced by at least one ‘<a href="#flow-into"><code
1918 class=property>flow-into</code></a>’ or ‘<a href="#flow-from"><code
1919 class=property>flow-from</code></a>’ computed value.
1920 </ul>
1922 <p>A <a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> object
1923 is live: it always represents the <a href="#named-flow0">named flow</a>
1924 with the corresponding name even if that <a href="#named-flow0">named
1925 flow</a> has transitioned to the <code>NULL</code> state.
1927 <p>If a script holds a reference to a <a href="#dom-named-flow"><code
1928 class=idl>NamedFlow</code></a> instance that has entered the
1929 <code>NULL</code> state, its attributes and methods should behave as
1930 follows:
1932 <ul>
1933 <li>the <a href="#dom-named-flow-name"><code class=idl>name</code></a>
1934 attribute returns its value as normal.
1936 <li>the <a href="#dom-named-flow-overset"><code
1937 class=idl>overset</code></a> attribute returns <code
1938 class=idl>false</code>.
1940 <li>the <a href="#dom-named-flow-get-regions"><code
1941 class=idl>getRegions</code></a> method returns an empty sequence.
1943 <li>the <a href="#dom-named-flow-first-empty-region-index"><code
1944 class=idl>firstEmptyRegionIndex</code></a> attribute returns <code
1945 class=idl>-1</code>.
1947 <li>the <a href="#dom-named-flow-get-content"><code
1948 class=idl>getContent()</code></a> method returns an empty <code
1949 class=idl>NodeList</code> instance.
1951 <li>the <a href="#dom-named-flow-get-regions-by-content"><code
1952 class=idl>getRegionsByContent()</code></a> method retuns an empty
1953 sequence.
1954 </ul>
1956 <div class=issue-marker data-bug_id=16382 data-bug_status=ASSIGNED> <a
1957 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16382">Issue-16382</a>
1959 <div class=issue-details>
1960 <p class=short-desc>Should we have a NamedFlow.getRegionsByFlowRanges?
1961 </div>
1962 </div>
1964 <h3 id=the-region-interface><span class=secno>6.2. </span>The Region
1965 interface</h3>
1967 <p>The <dfn id=region-interface> <code class=idl>Region</code>
1968 interface</dfn> is a <a
1969 href="http://www.w3.org/TR/WebIDL/#idl-implements-statements">supplemental
1970 interface</a> which must be implemented by all objects (<a
1971 href="http://www.w3.org/TR/dom/#interface-element"> <code
1972 class=idl>Elements</code></a>, pseudo-elements or other CSS constructs
1973 such as <a
1974 href="http://dev.w3.org/csswg/css3-page-template/#templates-and-slots">slots</a>)
1975 in an implementation which can be CSS Regions.
1977 <pre class=idl>
1978 [NoInterfaceObject]
1979 interface Region {
1980 readonly attribute DOMString <a
1981 href="#dom-region-regionoverset">regionOverset</a>;
1982 sequence<<a
1983 href="#">Range</a>>? <a
1984 href="#dom-region-getregionflowranges">getRegionFlowRanges()</a>;
1985 <a
1986 href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> <a
1987 href="#dom-region-getComputedRegionStyle">getComputedRegionStyle</a>(Element elt);
1988 <a
1989 href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> <a
1990 href="#dom-region-getComputedRegionStyle">getComputedRegionStyle</a>(Element elt, DOMString pseudoElt);
1991 };
1993 Element implements Region;</pre>
1995 <p>The <dfn id=dom-region-regionoverset><code
1996 class=idl>regionOverset</code></dfn> attribute returns one of the
1997 following values:
1999 <dl>
2000 <dt>‘<a href="#dom-named-flow-overset"><code
2001 class=property>overset</code></a>’
2003 <dd>The region is the last one in the <span title=region-chain>region
2004 chain</span> and not able to fit the remaining content from the <a
2005 href="#named-flow0">named flow</a>. Note that the region's <a
2006 href="http://www.w3.org/TR/CSS21/visufx.html#overflow"><code
2007 class=idl>overflow</code></a> property value can be used to control the
2008 visibility of the overflowing content and the ‘<a
2009 href="#region-fragment"><code
2010 class=property>region-fragment</code></a>’ property controls whether or
2011 not fragmentation happens on the content that overflows the last region.
2013 <dt>‘<code class=property>fit</code>’
2015 <dd>The region's flow fragment content fits into the region's <a
2016 href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">content
2017 box</a>. If the region is the last one in the <span
2018 title=region-chain>region chain</span>, it means that the content fits
2019 without overflowing. If the region is not the last one in the region
2020 chain, that means the <a href="#named-flow0">named flow</a> content is
2021 further fitted in subsequent regions. In this last case, note that the <a
2022 href="#named-flow0">named flow</a> fragment may be empty (for example if
2023 the region is too small to accommodate any content). This value is
2024 returned if the <a href="#css-region">region</a> object is not (or no
2025 longer) a region.
2027 <dt>‘<code class=property>empty</code>’
2029 <dd>All content from the <a href="#named-flow0">named flow</a> was fitted
2030 in prior regions.
2031 </dl>
2033 <p>Note that if there is no content in the <a href="#named-flow0">named
2034 flow</a>, all regions associated with that <a href="#named-flow0">named
2035 flow</a> should have their <a href="#dom-region-regionoverset"><code
2036 class=idl>regionOverset</code></a> attribute return ‘<code
2037 class=property>empty</code>’. If there is content in the flow but that
2038 content does not generate any box for visual formatting, the ‘<a
2039 href="#dom-named-flow-overset"><code class=property>overset</code></a>’
2040 attribute on the first region in the region chain associated with the flow
2041 will return ‘<code class=property>fit</code>’.
2043 <p>The <dfn id=dom-region-getregionflowranges>getRegionFlowRanges</dfn>
2044 method returns an array of <a
2045 href="http://www.w3.org/TR/dom/#interface-range">Range</a> instances
2046 corresponding to fragment from the <a href="#named-flow0">named flow</a>
2047 that is laid out in the region. If the region has not received a fragment
2048 because it is too small to accommodate any, the method returns a single
2049 <code class=idl>Range</code> where the <code>startContainer</code> and
2050 <code>startOffset</code> have the same values as the
2051 <code>endContainer</code> and <code>endOffset</code> and therefore the
2052 collapsed attribute on the <code class=idl>Range</code> is true. In that
2053 situation, if the region is the first in the <a
2054 href="#region-chain0">region chain</a>, the <code>startContainer</code> is
2055 the first <code>Node</code> in the <a href="#named-flow0">named flow</a>
2056 and the <code>startOffset</code> is zero. If the region is the last region
2057 in the region chain (but not the first and only one), the
2058 <code>startContainer</code> and <code>startOffset</code> are the same
2059 values as the <code>endContainer</code> and <code>endOffset</code> on the
2060 previous region in the <a href="#region-chain0">region chain</a>. The
2061 method returns null if the <a href="#css-region">region</a> object is not
2062 (or no longer) a region.
2064 <p>The <dfn
2065 id=dom-region-getComputedRegionStyle>getComputedRegionStyle</dfn> methods
2066 on the Region interface work the same as the <a
2067 href="http://dev.w3.org/csswg/cssom/#extensions-to-the-window-interface"><code
2068 class=idl>getComputedStyle</code></a> <a href="#CSSOM"
2069 rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> methods on the <a
2070 href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window"><code
2071 class=idl>Window</code></a> interface <a href="#HTML5"
2072 rel=biblioentry>[HTML5]<!--{{!HTML5}}--></a> with the following
2073 exceptions. For the <a href="#css-region"><code
2074 class=idl>Region</code></a> interface the <a
2075 href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a>
2076 returned must include the result of <a
2077 href="#the-at-region-style-rule">region styling</a>. If the element is
2078 fragmented across region boundaries, the <a
2079 href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a>
2080 returned must apply only to the fragment that flows through the <span>CSS
2081 Region</span>. The method returns null if the <a
2082 href="#css-region">region</a> object is not (or no longer) a region.
2084 <div class=note>
2085 <p>If the element is not contained in the <span>CSS Region</span> at all,
2086 the method returns the <a href="#the-at-region-style-rule">region
2087 styling</a> that would apply to the element if it were contained in the
2088 <span>CSS Region</span> (following how <a
2089 href="http://dev.w3.org/csswg/cssom/#extensions-to-the-window-interface"><code
2090 class=idl>getComputedStyle</code></a> works with elements not contained
2091 in the window's document).
2092 </div>
2094 <p>A <a href="#css-region"><code class=idl>Region</code></a> instance may
2095 represent an object that is no longer a <a href="#css-region">region</a>.
2096 This may happen for example if the ‘<a href="#flow-from"><code
2097 class=property>flow-from</code></a>’ property on the corresponding
2098 pseudo-element, element or other construct becomes ‘<code
2099 class=property>none</code>’ but a script is still holding a reference to
2100 the <a href="#css-region"><code class=idl>Region</code></a> object.
2102 <h3 id=region-style-rule-interface><span class=secno>6.3. </span>The
2103 CSSRegionStyleRule interface</h3>
2105 <p>The CSSRegionStyleRule interface represents an ‘<a
2106 href="#css-region"><code class=css>@region</code></a>’ rule in a CSS
2107 style sheet. This rule type is added to the <a
2108 href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface"><code>CSSRule</code></a>
2109 <a href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> interface.
2111 <pre class=idl>
2112 partial interface <a
2113 href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface">CSSRule</a> {
2114 const unsigned short <a
2115 href="#region-style-rule-const">REGION_STYLE_RULE</a> = 16;
2116 };
2117 </pre>
2119 <dl>
2120 <dt><dfn id=region-style-rule-const>REGION_STYLE_RULE</dfn>
2122 <dd>The rule is a CSSRegionStyleRule
2123 </dl>
2125 <pre class=idl>
2126 interface CSSRegionStyleRule : <a
2127 href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface">CSSRule</a> {
2128 attribute DOMString <a
2129 href="#region-style-rule-selectorText">selectorText</a>;
2130 readonly attribute <a
2131 href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence">CSSRuleList</a> <a
2132 href="#region-style-rule-cssRules">cssRules</a>;
2133 unsigned long <a
2134 href="#region-style-rule-insertRule">insertRule</a>(DOMString rule, unsigned long index)
2135 raises(<a
2136 href="http://www.w3.org/TR/dom/#exception-domexception">DOMException</a>);
2137 void <a
2138 href="#region-style-rule-deleteRule">deleteRule</a>(unsigned long index)
2139 raises(<a
2140 href="http://www.w3.org/TR/dom/#exception-domexception">DOMException</a>);
2141 };
2142 </pre>
2144 <p>The <dfn id=region-style-rule-selectorText> <code
2145 class=idl>selectorText</code></dfn> attribute gets and sets the associated
2146 selector as defined in section <a
2147 href="http://dev.w3.org/csswg/cssom/#widl-CSSStyleRule-selectorText">6.4.3</a>
2148 of <a href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a>.
2150 <p>The <dfn id=region-style-rule-cssRules> <code
2151 class=idl>cssRules</code></dfn> attribute must return a <a
2152 href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a>
2153 <a href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> object for
2154 the list of <a
2155 href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code
2156 class=idl>CSSStyleRules</code></a> specified in the region style block.
2158 <p>The <dfn id=region-style-rule-insertRule> <code
2159 class=idl>insertRule(rule, index)</code></dfn> method inserts a <a
2160 href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code
2161 class=idl>CSSStyleRule</code></a> into the region style block before the
2162 specified index. If the index is equal to the length of the <a
2163 href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a>
2164 the <a
2165 href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code
2166 class=idl>CSSStyleRule</code></a> is inserted at the end of the list.
2168 <p>Possible exceptions:
2170 <ul>
2171 <li><a
2172 href="http://www.w3.org/TR/dom/#dom-domexception-hierarchy_request_err"><code
2173 class=idl>HIERARCHY_REQUEST_ERR</code></a>: Raised if the rule to insert
2174 is not a <a
2175 href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code
2176 class=idl>CSSStyleRule</code></a>.
2178 <li><a
2179 href="http://www.w3.org/TR/dom/#dom-domexception-index_size_err"><code
2180 class=idl>INDEX_SIZE_ERR</code></a>: Raised if the specified index is not
2181 a valid insertion point.
2183 <li><a href="http://www.w3.org/TR/dom/#dom-domexception-syntax_err"><code
2184 class=idl>SYNTAX_ERR</code></a>: Raised if the specified rule has a
2185 syntax error and is unparsable.
2186 </ul>
2188 <p>The <dfn id=region-style-rule-deleteRule> <code
2189 class=idl>deleteRule(index)</code></dfn> method deletes the <a
2190 href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code
2191 class=idl>CSSStyleRule</code></a> in the <a
2192 href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a>
2193 at the specified index.
2195 <p>Possible exception:
2197 <ul>
2198 <li><a
2199 href="http://www.w3.org/TR/dom/#dom-domexception-index_size_err"><code
2200 class=idl>INDEX_SIZE_ERR</code></a>: Raised if the specified index does
2201 not correspond to a rule in the region style block.
2202 </ul>
2204 <h3 id=region-flow-layout-events><span class=secno>6.4. </span>Region flow
2205 layout events</h3>
2207 <p><a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> objects
2208 are <a
2209 href="http://www.w3.org/TR/dom/#interface-eventtarget">EventTargets</a>
2210 which dispatch <code class=idl>regionLayoutUpdate</code> events when there
2211 is a possible layout change in their region chain. The event is
2212 asynchronous, and fires when <a
2213 href="http://www.w3.org/TR/2012/WD-dom-20120405/#mutation-observers">MutationObservers</a>
2214 <a href="#DOM" rel=biblioentry>[DOM]<!--{{!DOM}}--></a> are invoked.
2216 <p>If region chain nesting occurs (the contents of a <a
2217 href="#dom-named-flow"><code class=idl>NamedFlow</code></a> contains
2218 regions for a different <a href="#dom-named-flow"><code
2219 class=idl>NamedFlow</code></a>) then the <code
2220 class=idl>regionLayoutUpdate</code> event for the nested flow(s) must be
2221 dispatched before the <code class=idl>regionLayoutUpdate</code> event for
2222 the containing flow is dispatched.
2224 <table border=0 cellpadding=2 cellspacing=0 class=event-desc
2225 summary="This table contains information about the semantics of the given event type">
2226 <tbody>
2227 <tr class="assert must">
2228 <th>Type
2230 <td class=eventname><strong><code>regionLayoutUpdate</code></strong>
2232 <tr class="assert must">
2233 <th>Interface
2235 <td><code><a
2236 href="http://www.w3.org/TR/DOM-Level-3-Events/#events-UIEvent">UIEvent</a></code>
2237 (see <a href="#DOM-LEVEL-3-EVENTS"
2238 rel=biblioentry>[DOM-LEVEL-3-EVENTS]<!--{{!DOM-LEVEL-3-EVENTS}}--></a>)
2240 <tr class="assert must">
2241 <th>Sync / Async
2243 <td>Async
2245 <tr class="assert must">
2246 <th>Bubbles
2248 <td>No
2250 <tr class="assert must">
2251 <th>Target
2253 <td><a href="#dom-named-flow"><code class=idl>NamedFlow</code></a>
2255 <tr class="assert must">
2256 <th>Cancelable
2258 <td>Yes
2260 <tr class="assert must">
2261 <th>Default action
2263 <td>none
2265 <tr class="assert must">
2266 <th>Context info
2268 <td>
2269 <ul>
2270 <li><code class=attribute-name>Event.target</code>: <a
2271 href="#dom-named-flow"><code class=idl>NamedFlow</code></a> whose
2272 layout may have changed
2273 </ul>
2274 </table>
2276 <h3 id=cssomview-and-regions><span class=secno>6.5. </span>Clarifications
2277 on pre-existing APIs</h3>
2279 <h4 id=cssomview-getclientrects-and-getboundingclientrect><span
2280 class=secno>6.5.1. </span><code class=idl>getClientRects()</code> and
2281 <code>getBoundingClientRects()</code></h4>
2283 <p>The <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a>
2284 defines how user agents compute the bounding client rectangle for an
2285 element (<code class=idl>getBoundingClientRect()</code>) and its generated
2286 boxes (<code class=idl>getClientRects()</code>).
2288 <p>This definition applies to the (possibly) multiple boxes generated for
2289 an element in a named flow flowing through a region chain. The <code
2290 class=idl>getClientRects()</code> method returns the list of boxes
2291 generated for each of the element fragments laid out in different regions.
2292 The <code>getBoundingClientRect()</code> method operates as specified in
2293 the <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a> as
2294 well and is computed from the set of rectangles returned by <code
2295 class=idl>getClientRects()</code>.
2297 <h4 id=cssomview-offset-attributes><span class=secno>6.5.2. </span><code
2298 class=idl>offsetTop</code>, <code class=idl>offsetLeft</code>, <code
2299 class=idl>offsetWidth</code> and <code class=idl>offsetWidth</code></h4>
2301 <p>The computation of the <a
2302 href="http://dev.w3.org/csswg/cssom-view/#extensions-to-the-htmlelement-interface">offset
2303 attributes</a> for elements laid out in a <a href="#named-flow0">named
2304 flow</a> follow the <a
2305 href="http://dev.w3.org/csswg/cssom-view/#extensions-to-the-htmlelement-interface">specification</a>
2306 <a href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a>. For the
2307 purpose of the algorithm, the <em>first CSS layout box</em> associated
2308 with an element laid out in a <a href="#named-flow0">named flow</a> is the
2309 box generated for the first region the element is laid out into.
2311 <h2 id=regions-visual-formatting-details><span class=secno>7.
2312 </span>Regions visual formatting details</h2>
2314 <p>Regions are laid out by CSS and take part in the normal box model and
2315 other layout models offered by CSS modules such as flexible boxes (<a
2316 href="#CSS3-FLEXBOX"
2317 rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>). However, <a
2318 href="#css-region">regions</a> lay out a fragment of their <a
2319 href="#named-flow0">named flow</a> instead of laying out descendant
2320 content as happens with other boxes.
2322 <p>This section describes the model for laying out <a
2323 href="#css-region">regions</a> and for laying out <a
2324 href="#named-flow0">named flow</a> content into regions. The descriptions
2325 in this section are biased towards a horizontal writing mode, using
2326 <span>width</span> for logical width (or measure) and <span>height</span>
2327 for logical height (or extent) as <a
2328 href="http://www.w3.org/TR/css3-writing-modes/#abstract-dimensions">defined</a>
2329 in the CSS Writing Modes Module <a href="#CSS3-WRITING-MODES"
2330 rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>).
2331 To use this model in a vertical writing mode apply the principles <a
2332 href="http://www.w3.org/TR/css3-writing-modes/#vertical-layout">described</a>
2333 in that specification.
2335 <h3 id=regions-flow-content-box><span class=secno>7.1. </span>The Region
2336 Flow Content Box (RFBC)</h3>
2338 <p>A region box lays out the following boxes:
2340 <ul>
2341 <li>The boxes generated by its <code class=css>::before</code> and <code
2342 class=css>::after</code> pseudo-elements, if any.
2344 <li>The anonymous <dfn id=region-flow-content-box>region flow content
2345 box</dfn> (called <dfn id=rfcb>RFCB</dfn> in this document) which
2346 contains the fragment of the <a href="#named-flow0">named flow</a> that
2347 the region receives.
2348 </ul>
2350 <div class=figure> <img
2351 alt="The ::before, RFCB and ::after boxes contained in the Region Box"
2352 src="images/RFCB.svg" width=600px>
2353 <p class=caption>The Region Flow Content Box (RFCB)
2354 </div>
2356 <p>Laying out a <a href="#css-region">region</a> box follows the same
2357 processing rules as for any other <a
2358 href="http://www.w3.org/TR/CSS2/visuren.html#block-boxes">block container
2359 box</a>.
2361 <p>The <a href="#rfcb">RFCB</a> is a <a
2362 href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container
2363 box</a> with a <a href="">computed</a> ‘<code
2364 class=property>width</code>’ of ‘<code class=property>auto</code>’
2365 and a whose <a href="">used</a> ‘<code class=property>height</code>’
2366 is resolved as detailed below.
2368 <h4 id=rfbc-width-resolution><span class=secno>7.1.1. </span>RFCB ‘<code
2369 class=property>width</code>’ resolution</h4>
2371 <p>At various points in the visual formatting of documents containing
2372 regions, the used ‘<code class=property>width</code>’ of RFCBs and
2373 regions need to be resolved. In all cases, the resolution is done
2374 following the rules for <a
2375 href="http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating
2376 widths and margins</a> (see <a href="#CSS21"
2377 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). Sometimes, resolving the
2378 used ‘<code class=property>width</code>’ value requires measuring the
2379 content's <code class=css>min-content</code> and <code
2380 class=css>max-content</code> values (as <a
2381 href="http://www.w3.org/TR/css3-writing-modes/#intrinsic-sizing">defined</a>
2382 in the CSS Writing Modes Module <a href="#CSS3-WRITING-MODES"
2383 rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>).
2384 For an RFCB, <strong>these measures are made on the <em>entire</em>
2385 associated <a href="#named-flow0">named flow</a> content</strong>.
2387 <p>As a consequence, all <a href="#rfcb">RFCBs</a> of <a
2388 href="#css-region">regions</a> associated with a given <a
2389 href="#named-flow0">named flow</a> share the same <code
2390 class=css>min-content</code> and <code class=css>max-content</code>
2391 measures.
2393 <p>This approach is consistent with the <a
2394 href="http://www.w3.org/TR/css3-break/#varying-size-boxes">box model for
2395 breaking</a> (<a href="#CSS3-BREAK"
2396 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>).
2398 <h3 id=regions-visual-formatting-steps><span class=secno>7.2.
2399 </span>Regions visual formatting steps</h3>
2401 <p>Formatting documents that contain <a href="#named-flow0">named flows</a>
2402 laid out in regions is a three-step process:
2404 <ul>
2405 <li><em>Step 1: RFCB <dfn id=flow-fragment-height>flow fragment
2406 height</dfn> resolution</em>. In this step, the heights of fragments
2407 fitting in the regions' RFCBs are resolved.
2409 <li><em>Step 2: document and regions layout</em>. In this step, the
2410 document content and regions are laid out. However, <a
2411 href="#named-flow0">named flow</a> content is not laid out in regions
2412 yet.
2414 <li><em>Step 3: <a href="#named-flow0">named flow</a> layout</em>. In this
2415 step, the content of <a href="#named-flow0">named flows</a> is laid out
2416 in their respective <a href="#region-chain0">region chains</a>.
2417 </ul>
2419 <div class=figure> <img
2420 alt="visual representation of the three-step process"
2421 src="images/regions-layout-three-steps.svg" width=600px>
2422 <p class=caption>Regions visual formatting steps
2423 </div>
2425 <h4 id=rfcb-flow-fragment-height-resolution><span class=secno>7.2.1.
2426 </span>Step 1: RFCB flow fragment height resolution</h4>
2428 <p>Conceptually, resolving the flow fragment height is a two phase process.
2430 <h5 id=rfcb-flow-fragment-height-resolution-phase-1><span
2431 class=secno>7.2.1.1. </span>RFCB flow fragment height resolution, Phase 1</h5>
2433 <p>The document is laid out with a <a
2434 href="http://www.w3.org/TR/CSS2/cascade.html#used-value">used</a> height
2435 of zero for all <a href="#rfcb">RFCB</a>s. In this phase, the content of
2436 <a href="#named-flow0">named flows</a> is not laid out in <a
2437 href="#css-region">regions</a>. This phase yields resolved position and
2438 sizes for all regions and their RFCBs in the document.
2440 <h5 id=rfcb-flow-fragment-height-resolution-phase-2><span
2441 class=secno>7.2.1.2. </span>RFCB flow fragment height resolution, Phase 2</h5>
2443 <p><a href="#named-flow0">Named flows</a> are laid out in <a
2444 href="#css-region">regions</a>. The user agent resolves the <a
2445 href="#flow-fragment-height"><em><span>flow fragment
2446 height</span></em></a> for the <a href="#rfcb">RFCB</a>s using the
2447 remainder of the flow and accounting for <a
2448 href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>. This
2449 process accounts for constraints such as the ‘<code
2450 class=property>height</code>’ or ‘<code
2451 class=property>max-height</code>’ values, as described in the CSS 2.1
2452 section on <a
2453 href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">calculating
2454 heights and margins</a> (see the <a
2455 href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">Block-level
2456 non-replaced elements in normal flow when ‘<code
2457 class=property>overflow</code>’ computes to ‘<code
2458 class=property>visible</code>’</a> section and the <a
2459 href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">complicated
2460 cases</a> section). During this phase, generated content is laid out
2461 according to the <a href="#processing-model">rules</a> described earlier
2462 in this document.
2464 <h4 id=regions-boxes-layout><span class=secno>7.2.2. </span>Step 2: region
2465 boxes layout</h4>
2467 <p>In this step, the document is laid out according to the normal CSS
2468 layout rules.
2470 <p>If a measure of the content is required to resolve the used ‘<code
2471 class=property>width</code>’ of the region box, the value is resolved as
2472 described in the <a href="#rfbc-width-resolution">RFCB width
2473 resolution</a> section.
2475 <p>If a measure of the content is required to resolve the used height of
2476 the RFCB (for example if the region box is absolutely positioned), the <a
2477 href="#flow-fragment-height">flow fragment height</a> resolved in Step 1
2478 is used for the vertical content measure of the RFCB.
2480 <p>At the end of this step, regions are laid out and ready to receive
2481 content from their associated <a href="#named-flow0">named flows</a>.
2483 <h4 id=named-flows-layout><span class=secno>7.2.3. </span>Step 3: named
2484 flows layout</h4>
2486 <p>In this final step, the content of <a href="#named-flow0">named
2487 flows</a> is laid out in the <a href="#css-region">regions</a>‘<code
2488 class=css> RFCBs along with the generated content boxes.</code>
2490 <p>The used ’width' for RFCBs is resolved <a
2491 href="#rfbc-width-resolution">as described before</a>.
2493 <p>The used ‘<code class=property>height</code>’ of RFCBs is resolved
2494 such that none of the boxes in the region box's normal flow overflow the
2495 region's box. In other words, the RFCB boxes are stretched vertically to
2496 accommodate as much of the flow as possible without overflowing the region
2497 box and accounting for <a
2498 href="http://www.w3.org/TR/css3-break/">fragmentation rules</a> and
2499 generated content boxes.
2501 <p>During this phase, generated content is laid out according to the <a
2502 href="#processing-model">rules</a> described earlier in this document.
2504 <div class=note>
2505 <p>The model for resolving auto sized regions will cause, under certain
2506 circumstances, the flow content to be overset or underset. In other
2507 words, it will not fit tightly. The model prevents having circular
2508 dependencies in the layout model. Implementations may decide to apply
2509 further layout steps to ensure that the whole flow content is displayed
2510 to the user, even in edge cases.
2511 </div>
2513 <h3 id=regions-visual-formatting-implementation-note><span class=secno>7.3.
2514 </span>Regions visual formatting: implementation note</h3>
2516 <p>The process for resolving an RFCB's ‘<code
2517 class=property>height</code>’ and the three-step process used to lay out
2518 documents containing regions and <a href="#named-flow0">named flows</a>
2519 are <em>conceptual</em> descriptions of what the layout should yield and
2520 implementations should optimize to reduce the number of steps and phases
2521 necessary wherever possible.
2523 <h3 id=regions-visual-formatting-examples><span class=secno>7.4.
2524 </span>Regions visual formatting example</h3>
2526 <p>This section is non-normative.
2528 <p>This example considers a document where content flows between three
2529 regions, and region boxes are intermixed with the normal document content.
2531 <div class=example>
2532 <pre>
2533 <style>
2534 article {
2535 flow-into: article;
2536 }
2538 #rA, #rB, #rC {
2539 flow-from: article;
2540 height: auto;
2541 margin: 1em 1em 0em 1em;
2542 padding: 1em;
2543 border: 3px solid #46A4E9;
2544 }
2546 #rA {
2547 width: auto;
2548 height: auto;
2549 }
2551 #rB {
2552 float: left;
2553 width: 15em;
2554 height: auto;
2555 max-height: 150px;
2556 }
2558 #rC {
2559 float: right;
2560 width: 12em;
2561 height: auto;
2562 }
2564 #main-flow {
2565 padding: 0em 1em 0em 1em;
2566 }
2568 </style>
2569 <body>
2570 <article>
2571 <p style="break-after:region;">I am not a ... </p>
2572 <p>...</p>
2573 </article>
2574 <div id="rA"></div>
2575 <div id="rB"></div>
2576 <div id="rC"></div>
2578 <div id="main-flow">
2579 <p>Lorem ipsum dolor ...</p>
2580 </div>
2581 </body>
2582 </pre>
2583 </div>
2585 <p>The following sections and figures illustrate the intermediate results
2586 for the visual formatting process. In the following, we call RFCB-A,
2587 RFCB-B and RFCB-C the <a href="#rfcb">RFCBs</a> for regions rA, rB and rC
2588 respectively.
2590 <h4 id=step-1--phase-1-laying-out-rfcbs-with-us><span class=secno>7.4.1.
2591 </span>Step 1 - Phase 1: Laying out RFCBs with used height of zero</h4>
2593 <p>Applying the rules for Step 1, Phase 1, the computed ‘<code
2594 class=property>auto</code>’ ‘<code class=property>width</code>’
2595 values for the RFCBs are resolved to used values according to the normal
2596 <a
2597 href="http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">CSS
2598 layout rules</a> meaning they stretch to the width of their containing
2599 block's content box.
2601 <ol>
2602 <li>RFCB-A: stretches to fit the rA content box.
2603 <p>Since rA also has an ‘<code class=property>auto</code>’ ‘<code
2604 class=property>width</code>’, its own used ‘<code
2605 class=property>width</code>’ is stretched to fit the
2606 <code><body></code> content box.
2608 <li>RFCB-B: stretches to fit the <code>rB</code> content box.
2610 <li>RFCB-C: stretches to fit the <code>rC</code> content box.
2611 </ol>
2613 <p>Also applying the rules for Step 1, Phase 1, the used values for the
2614 RFCBs ‘<code class=property>height</code>’ properties are all zero.
2616 <p>Conceptually, this produces the layout illustrated below.
2618 <div class=figure> <img
2619 alt="Step 1 - Phase 1: Layout RFBCs with used heights of 0"
2620 src="images/flow-fragment-height-phase-1.png" width=500px>
2621 <p class=caption>Step 1 - Phase 1: Layout RFBCs with used heights of 0
2622 </div>
2624 <h4 id=step-1--phase-2-layout-flow-to-compute-t><span class=secno>7.4.2.
2625 </span>Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments
2626 heights</h4>
2628 <p>In this second phase of Step 1, the named flow is laid out in <a
2629 href="#css-region">regions</a> and the height of each fragment falling in
2630 each RFCB is computed.
2632 <p>The user agent lays out as much of the flow into an area with RFCB-A's
2633 used ‘<code class=property>width</code>’. rA's ‘<code
2634 class=property>height</code>’ computes to ‘<code
2635 class=property>auto</code>’ and there is no vertical maximum height for
2636 RFCA's ‘<code class=property>height</code>’. However, because there is
2637 a break after the first paragraph in the ‘<code
2638 class=property>article</code>’ <a href="#named-flow0"><code>named
2639 flow</code></a>, only this first paragraph is laid out in RFCB-A and FH-A
2640 (the flow fragment height for RFCB-A) is resolved by laying out this first
2641 paragraph in the used ‘<code class=property>width</code>’.
2643 <p>At this point, the user agent lays out as much of the remaining flow as
2644 possible in RFCB-B. Because rB's ‘<code
2645 class=property>max-height</code>’ computed value is ‘<code
2646 class=css>150px</code>’, the user agent only lays out the ‘<code
2647 class=property>article</code>’ named flow using RFCB-B's used ‘<code
2648 class=property>width</code>’ until the point where laying out additional
2649 content would cause RFCB-B to overflow rB's box. The fragment height for
2650 RFCB-B is resolved: FH-B (<code class=css>150px</code>).
2652 <p>Finally, the user agent lays out the remainder of the flow in RFCB-C.
2653 Because rC has no other constraints and no region breaks, the remaining
2654 content is laid out in RFCB-C's used ‘<code
2655 class=property>width</code>’. This results in a resolved flow fragment
2656 height: FH-C.
2658 <div class=figure> <img
2659 alt="Step 1 - Phase 2: Measure flow fragments heights"
2660 src="images/flow-fragment-height-phase-2.png" width=370px>
2661 <p class=caption>Step 1 - Phase 2: Measure flow fragments heights
2662 </div>
2664 <h4 id=step-2-layout-document-and-regions-witho><span class=secno>7.4.3.
2665 </span>Step 2: Layout document and regions without named flows</h4>
2667 <p>The used ‘<code class=property>width</code>’ of RFCB-A, RFCB-B and
2668 RFCB-C are resolved as in the previous step. However, the ‘<code
2669 class=property>height</code>’ is resolved differently.
2671 <p>Resolving the ‘<code class=property>height</code>’ of rA <a
2672 href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">requires a
2673 content measure</a> which is FH-A (the flow fragment height for RFCB-A).
2675 <p>The ‘<code class=property>height</code>’ of rB results from first
2676 computing its <a
2677 href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">content
2678 measure</a> and then applying the <a
2679 href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">rules for
2680 ‘<code class=property>max-height</code>’</a>. Here, the vertical
2681 content measure evaluates to FH-B. After applying the rules for ‘<code
2682 class=property>max-height</code>’ and accounting for margins, padding
2683 and borders, the used ‘<code class=property>height</code>’ of rB is
2684 resolved to LH-B (<code class=css>150px</code>).
2686 <p>The ‘<code class=property>height</code>’ of rC's box results from <a
2687 href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">calculating
2688 its content measure</a>: FH-C becomes rC's used ‘<code
2689 class=property>height</code>’.
2691 <div class=figure> <img
2692 alt="Step 2: Layout document and regions without named flows"
2693 src="images/regions-visual-formatting-step-2.png" width=370px>
2694 <p class=caption>Step 2: Layout document and regions without <a
2695 href="#named-flow0">named flows</a>
2696 </div>
2698 <h4 id=step-3-named-flows-layout><span class=secno>7.4.4. </span>Step 3:
2699 named flows layout</h4>
2701 <p>In this final step, the <code class=css>article</code> <a
2702 href="#named-flow0">named flow</a> is laid out in its <a
2703 href="#region-chain0">region chain</a>. The used ‘<code
2704 class=property>width</code>’ for each of the RFCB is resolved as in step
2705 1 above.
2707 <p>The used ‘<code class=property>height</code>’ for the RFCB is a
2708 result of laying out the as much of the content in the <a
2709 href="#css-region">region</a> without overflowing its content box and
2710 following the <a href="http://www.w3.org/TR/css3-break/">fragmentation
2711 rules</a>.
2713 <p>Because the computed ‘<code class=property>width</code>’ of the RFCB
2714 has not changed and the fragmentation rules applied are the same as in
2715 Phase 1, Step 2, the used ‘<code class=property>height</code>’ for
2716 RFCB-A, RFCB-B and RFCB-C are LH-A, LH-B and LH-C, respectively.
2718 <p>There may be situations where the used ‘<code
2719 class=property>height</code>’ of RFCBs resolved in Step 3 are different
2720 from the <a href="#flow-fragment-height">flow fragment height</a> computed
2721 in Step 1 Phase 2.
2723 <div class=figure> <img
2724 alt="Step 3: Final result after laying out named flows in regions"
2725 src="images/regions-visual-formatting-step-3.png" width=370px>
2726 <p class=caption>Step 3: Final result after laying out named flows in
2727 regions
2728 </div>
2730 <h2 id=relation-to-document-events><span class=secno>8. </span>Relation to
2731 document events</h2>
2733 <p>The CSS regions module does not alter the normal processing of events in
2734 the document tree. In particular, if an event occurs on an element that is
2735 part of a <a href="#named-flow0">named flow</a>, the <a
2736 href="http://www.w3.org/TR/dom/#events">event's bubble and capture
2737 phases</a> happen following the document tree order.
2739 <h2 id=relation-to-other-specifications><span class=secno>9.
2740 </span>Relation to other specifications</h2>
2742 <p>This specification is related to other specifications as described in
2743 the <a href="#references">references</a> section. In addition, it is
2744 related to the following specifications:
2746 <ol>
2747 <li>CSS Fragmentation Module Level 3 <a href="#CSS3-BREAK"
2748 rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>. This module
2749 defines the rules for fragmenting content over multiple containers and
2750 applies to CSS regions in addition to applying to multi-column and paged
2751 media.
2753 <li>CSS Pagination Templates Module Level 3 <a href="#CSS3-PAGE-TEMPLATE"
2754 rel=biblioentry>[CSS3-PAGE-TEMPLATE]<!--{{CSS3-PAGE-TEMPLATE}}--></a>.
2755 This module defines a syntax to define layout templates which can be used
2756 when paginating content. The page templates use regions.
2758 <li>CSS Exclusions Module <a href="#CSS3-EXCLUSIONS"
2759 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{CSS3-EXCLUSIONS}}--></a>. This
2760 module defines a generic way to define arbitrarily shaped exclusions into
2761 which content can flow or around which content can flow. This can be seen
2762 as an extension to the way CSS floats provide rectangular areas into
2763 which content flows and around which content flows. In advanced layout
2764 designs, it is expected that the CSS Exclusions module will be commonly
2765 combined with the CSS regions module.
2767 <li>CSS Line Grid Module <a href="#CSS3-LINE-GRID"
2768 rel=biblioentry>[CSS3-LINE-GRID]<!--{{CSS3-LINE-GRID}}--></a>. This
2769 module defines a concept of line grid to align the position of lines in
2770 different elements. The line grid functionality is related and needed for
2771 aligning content flowing in separate regions.
2772 </ol>
2774 <h2 id=usecases><span class=secno>10. </span>Use Cases</h2>
2776 <p>Use cases are described on <a
2777 href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">these</a>
2778 <a
2779 href="http://wiki.csswg.org/spec/css3-regions/regions-print-use-cases">pages</a>.
2781 <h2 id=conformance><span class=secno>11. </span>Conformance</h2>
2783 <h2 id=changes><span class=secno>12. </span>Changes</h2>
2785 <h3 id="changes_from_Aug_28_2012"><span class=secno>12.1. </span>Changes
2786 from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">August
2787 28<sup>th</sup> 2012</a> version</h3>
2789 <ul>
2790 <li>Added timing for regionLayoutUpdate event
2792 <li>Clarified interaction between content and flow-from for
2793 pseudo-elements
2795 <li>Changed NamedFlowCollection getters to return undefined when there is
2796 no NamedFlow.
2798 <li>Changed region-overflow property to region-fragment.
2799 </ul>
2801 <h3 id="changes_from_May_03_2012"><span class=secno>12.2. </span>Changes
2802 from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120503/">May
2803 3<sup>rd</sup> 2012</a> version</h3>
2805 <ul>
2806 <li>Removed exceptions from the Region interface.
2808 <li>Changed NamedFlowCollection from live to a static snapshot.
2810 <li>Changed NamedFlow to inherit from EventTarget.
2812 <li>Removed flowFrom from Region interface and changed method name to
2813 getComputedRegionStyle().
2815 <li>Region interface is now a supplemental interface with the
2816 [NoInterfaceObject] extended attribute.
2818 <li>Added note for regionLayoutUpdate dispatching in nested flows.
2820 <li>Removed Document.getFlowByName() in favor of
2821 NamedFlowCollection.namedItem().
2823 <li>Changed to overset:false for NULL NamedFlow.
2825 <li>Changed regionLayoutUpdate to not bubble.
2826 </ul>
2828 <h3 id="changes_from_November_29_2011"><span class=secno>12.3.
2829 </span>Changes from <a
2830 href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">November
2831 29<sup>th</sup> 2011</a> version</h3>
2833 <ul>
2834 <li>Modified region styling examples to use element selector instead of of
2835 pseudo-code selectors (this had been omitted in the previous pass at
2836 removing pseudo-code from the examples).
2838 <li>Removed divs with class set to "issue moved", "issue stale" and "issue
2839 resolved" since these divs where not displayed.
2841 <li>Minor updates to the alternate stylesheet.
2843 <li>Removed "This section is normative" paragraphs since in CSS
2844 specifications, sections are normative unless otherwise specified.
2846 <li>Removed "This section is informative" paragraphs since in CSS
2847 specifications notes are always informative.
2849 <li>Reworded the text about flow-into: <ident> and removed obsolete
2850 text about the interaction with the ‘<code
2851 class=property>content</code>’ property.
2853 <li>Removed "this section is non-normative" from the "Regions Concepts"
2854 section.
2856 <li>In the section on region breaks, removed descriptions of break values
2857 normatively defined in external specifications. Removed the section about
2858 split boxes and replaced with paragraph referencing the page breaking
2859 behavior. Removed the discussion about how the ‘<code
2860 class=property>overflow</code>’ property applies to content flown in
2861 regions from the break section, since this is covered in the section on
2862 ‘<code class=property>region-overflow</code>’ already. See <a
2863 href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0477.html">mailing
2864 list feedback.</a>
2866 <li>Clarified that @region style rules only apply to the ‘<code
2867 class=property>portion</code>’ of an element that falls into the
2868 corresponding region and added an issue that the model for ‘<code
2869 class=property>partial</code>’ styling needs to be defined. See <a
2870 href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0480.html">mailing
2871 list feedback</a>.
2873 <li>Clarified that the <code>NodeList</code> returned by
2874 <code>getRegionsByContentNode</code> is live.
2876 <li>Added a name property to the <a
2877 href="#dom-named-flow"><code>NamedFlow</code></a> interface. Added a <a
2878 href="#dom-named-flow-collection"><code>NamedFlowCollection</code></a>
2879 interface and added a <a
2880 href="#document-getnamedflows"><code>getNamedFlows</code></a> method on
2881 the <code>Document</code> interface, as per <a
2882 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug
2883 15828</a>.
2885 <li>Modified wording about containing block resolution for absolutely
2886 positioned elements in a named flow.
2888 <li>Modified initial examples as per <a
2889 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a>
2891 <li>Multiple editorial changes following <a
2892 href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0001.html">mailing
2893 list review comments</a>
2895 <li>Fixed DOM references to now point to the DOM TR
2897 <li>Fixed Web IDL issues as reported in <a
2898 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15931">Issue
2899 15931</a>
2901 <li>Added text to explain support for multi-column elements as required by
2902 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Issue
2903 15191</a> and <a
2904 href="http://www.w3.org/Style/CSS/Tracker/actions/375">Action 375</a>.
2906 <li>Renamed ‘<code class=property>regionOverflow</code>’ to ‘<a
2907 href="#dom-region-regionoverset"><code
2908 class=property>regionOverset</code></a>’ to avoid confusion between
2909 fitting a flow in regions and the concept of visual overflow that the
2910 word ‘<code class=property>overflow</code>’ (and the property) carry.
2912 <li>Reworked the partial document interface following the <a
2913 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14948">Issue
2914 14948</a> on <code>getFlowByName</code>.
2916 <li>Updated the object model section as proposed on the <a
2917 href="http://wiki.csswg.org/spec/css3-regions/css-om">wiki</a> and in
2918 particular:
2919 <ul>
2920 <li>introduced a <a href="#css-region"><code>Region</code></a> interface
2921 to replace the supplemental Element interface
2923 <li>Added a ‘<code class=property>flowFrom</code>’ attribute on the
2924 Region interface
2926 <li>NamedFlow.getRegions() was added
2928 <li>Renamed getContentNode to getContent and getRegionsByContentNode to
2929 getRegionsByContent as per <a
2930 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15879">Isseu
2931 15879</a>
2933 <li>NamedFlow now returns static lists (see <a
2934 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16286">Issue
2935 16286</a>)
2936 </ul>
2938 <li>Modified region layout event to be dispatched on <a
2939 href="#dom-named-flow"><code>NamedFlow</code></a> instead of region as
2940 before. Was requested by <a
2941 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15938">Issue
2942 15938</a> and required in the general effort to have the DOM APIs work
2943 with non-element regions.
2945 <li>Changed paragraph on pseudo-elements to disallow ‘<a
2946 href="#flow-into"><code class=property>flow-into</code></a>’ on all
2947 pseudo-elements because moving a ‘<code class=css>::before</code>’
2948 element (for a example) to a named flow does not seem useful and causes
2949 specification and implementation complexity.
2951 <li>Added section about getClientRects(), getBoundingClientRect(),
2952 offsetWidth, offsetHeight, offsetTop and offsetLeft.
2954 <li>Added ‘<code class=css>Regions visual formatting details</code>’
2955 section to better describe the model for resolving auto sizing on
2956 regions.
2958 <li>Reworked the initial specification example.
2960 <li>Changed break and region-overflow properties to apply to visual media
2961 instead of paged.
2963 <li>Added opacity to region styling.
2965 <li>Added possibility of ::before content contributing to overflow.
2967 <li>Added CSSRegionStyleRule
2968 </ul>
2970 <h3 id="changes_from_June_09_2011"><span class=secno>12.4. </span>Changes
2971 from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">June
2972 09<sup>th</sup> 2011</a> version</h3>
2974 <ul>
2975 <li>Editorial changes (typos, rephrasings).
2977 <li>Made ‘<code class=property>content-order</code>’ a <integer>
2978 and not a <float> following a working group <a
2979 href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html">resolution</a>
2981 <li>Added Alex Mogilevsky as an editor
2983 <li>Flow names became <ident> instead of <string> following a
2984 working group <a
2985 href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>
2987 <li>Removed issue about possibly altering the DOM Events model for region
2988 events following a working group <a
2989 href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>
2991 <li>Made the "relation to document events" section informative following a
2992 working group <a
2993 href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>
2995 <li>Removed issue in section "The NamedFlow interface" following the
2996 working group's <a
2997 href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>
2998 to have both NamedFlow and the Element interface extension
3000 <li>Following a working group <a
3001 href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>:
3003 <ul>
3004 <li>Turned the first issue in the "Extensions to the Element interface"
3005 into a note explaining that the NamedFlow interface can be used when
3006 regions are pseudo-elements.
3008 <li>Added NamedFlowUpdate
3009 </ul>
3011 <li>Excluded ‘<code class=property>none</code>’, ‘<code
3012 class=property>inherit</code>’ and ‘<code
3013 class=property>initial</code>’ from the possible identifier names on
3014 the flow property following <a
3015 href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0583.html">discussion</a>
3016 on the mailing list.
3018 <li>Simplified integration discussion on multi-column layout and just
3019 state that since column boxes are not addressable by selectors, they
3020 cannot be regions.
3022 <li>Added specification of how the ‘<a href="#flow-into"><code
3023 class=property>flow-into</code></a>’ property interacts with object,
3024 embed and iframe elements.
3026 <li>Excluded ‘<code class=property>default</code>’ from the possible
3027 identifier names on the flow property because it <a
3028 href="http://www.w3.org/TR/2006/WD-css3-values-20060919/#keywords">may
3029 get reserved</a>.
3031 <li>Added to the definition of ‘<code class=property>auto</code>’ on
3032 ‘<code class=property>region-overflow</code>’ specifying that region
3033 breaks must be ignored.
3035 <li>Renamed ‘<code class=css>Document.flowWithName</code>’ to ‘<code
3036 class=css>Document.getFlowByName</code>’ since it is not a property.
3038 <li>Added a note that a ‘<a href="#dom-named-flow"><code
3039 class=property>NamedFlow</code></a>’ instance is live.
3041 <li>Added an ‘<code class=property>undefined</code>’ string value to
3042 the regionOverflow property on the Element interface extension.
3044 <li>Renamed NamedFlowEvent to regionLayoutUpdate to avoid having ‘<code
3045 class=property>Event</code>’ in the event name.
3047 <li>Added description for special behavior of iframe/object/embed as flow
3048 source
3050 <li>Removed issue on copying content to a named flow instead of moving
3051 elements to named flow following working group <a
3052 href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.
3054 <li>Removed issue on content:flow-from v.s., flow-from property following
3055 working group <a
3056 href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.
3058 <li>Renamed ‘<code class=property>flow</code>’ to ‘<a
3059 href="#flow-into"><code class=property>flow-into</code></a>’ following
3060 working group <a
3061 href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.
3063 <li>Updated the css3-grid-align example following working group <a
3064 href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>
3065 that it should use <div> instead of grid-cell pseudo elements that
3066 were removed from the CSS Grid Layout specification.
3068 <li>Renamed ‘<code class=property>from-flow</code>’ to ‘<a
3069 href="#flow-from"><code class=property>flow-from</code></a>’ following
3070 a working group <a
3071 href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.
3073 <li>Limited the applicability of ‘<code class=css>content:
3074 flow-from()</code>’ to block container box and added a note that this
3075 might be expanded in the future, following a working group <a
3076 href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.
3078 <li>Removed issue about API to find which region displays an element in a
3079 named flow since <a
3080 href="http://www.w3.org/Style/CSS/Tracker/actions/350">ACTION-350</a> was
3081 created to add this API.
3083 <li>In the ‘<code class=property>flow</code>’ property description,
3084 removed the required wrapper anonymous block as agreed on <a
3085 href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0161.html">mailing
3086 list discussion</a>.
3088 <li>Reworded the paragraph on how regions create a new stacking context,
3089 as per the <a
3090 href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0025.html">mailing
3091 list discussion</a>.
3093 <li>Reworked the "CSS regions Model" section to now be "CSS regions
3094 Layout". Moved the definition of a region as the first sub-section.
3096 <li>Removed the "Visual Formatting Model and Flows" section to match the
3097 new Regions Model (now CSS regions Layout) section.
3099 <li>Moved the sections on allowed region breaks, forced region breaks and
3100 "best" regions breaks to follow the property definitions to follow the
3101 formatting of the paged media section in CSS 2.1.
3103 <li>Added note about why regions create a new stacking context following
3104 the discussion on the <a
3105 href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing
3106 list</a>.
3108 <li>Removed sentence about content:none making elements disconnected
3109 following the discussion on the <a
3110 href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing
3111 list</a>.
3113 <li>Removed sentence about content:none making elements disconnected
3114 following the discussion on the <a
3115 href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing
3116 list</a>.
3118 <li>Added the ::region-before and a ::region-after pseudo-elements.
3120 <li>Added note of caution when using selectors and the ‘<a
3121 href="#flow-into"><code class=property>flow-into</code></a>’ property
3122 following a <a
3123 href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0191.html">mailing
3124 list discussion</a>.
3126 <li>Removed sections about allowed, forced and best region breaks to align
3127 with the multi-column specification approach and until the group agrees
3128 on where and how the general issue of breaks (regions/pages/columns)
3129 should be addressed.
3131 <li>Removed the section on Integration with other specifications since
3132 specifications that was superfluous especially since there is no specific
3133 integration with multi column, grid or template layout.
3135 <li>Added a note that regions establish a new block formatting context.
3137 <li>Renamed content-order to region-order.
3139 <li>Added a note about overflowing content in regions (e.g., for content
3140 with borders).
3142 <li>Added a note that a region cannot layout content it is part of (to
3143 avoid creating a circular dependency) in the flow-from description,
3144 specifying that if flow-from references the flow an element is part of,
3145 then the element does not format anything visually.
3147 <li>Replaced ‘<code class=css>content:flow-from(<ident>)</code>’
3148 with ‘<code class=css>flow-from: <ident></code>’ following a <a
3149 href="http://krijnhoetmer.nl/irc-logs/css/20110824">working group
3150 resolution</a>.
3152 <li>Added more specific wording about auto width and auto height,
3153 following <a
3154 href="http://www.w3.org/Style/CSS/Tracker/actions/351">ACTION 351</a>.
3156 <li>Reworked section on region markers to now use ‘<code
3157 class=css>::before</code>’ and ‘<code class=css>::after</code>’ and
3158 explain how ‘<code class=css>display:run-in</code>’ works with
3159 regions.
3161 <li>Modified the @region style rule to remove the ::region-lines
3162 pseudo-selector.
3164 <li>Removed the ‘<code class=property>region-order</code>’ property
3165 following implementation feedback.
3167 <li>Specified that region-overflow does not influence a region's size.
3169 <li>Specified that the flow's writing mode is defined by the first
3170 region's writing mode following <a
3171 href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0306.html">mailing
3172 list discussion</a>.
3174 <li>Made iframe, object and embed support of flow-into optional following
3175 <a
3176 href="http://lists.w3.org/Archives/Public/www-style/2011Sep/0073.html">mailing
3177 list discussion</a>.
3179 <li>Clarified that flow content following the last break in the last
3180 region is not rendered, following <a
3181 href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0167.html">mailing
3182 list discussions.</a>
3184 <li>Modified the rule for computing the width and height of a region when
3185 they are set to auto, following <a
3186 href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0216.html">a
3187 mailing list discussion.</a>
3189 <li>Added ‘<code class=property>auto</code>’ to the list of invalid
3190 flow identifiers.
3192 <li>Made ‘<code class=property>none</code>’ the initial value for
3193 ‘<a href="#flow-into"><code class=property>flow-into</code></a>’ and
3194 aligned with ‘<a href="#flow-from"><code
3195 class=property>flow-from</code></a>’, as explained in this <a
3196 href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0576.html">email</a>.
3197 Also allowed the ‘<code class=property>inherit</code>’ value on ‘<a
3198 href="#flow-from"><code class=property>flow-from</code></a>’ and ‘<a
3199 href="#flow-into"><code class=property>flow-into</code></a>’ (same
3200 email).
3202 <li>Added note about nested region styling following <a
3203 href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0650.html">a
3204 mailing list discussion</a>.
3206 <li>Added additional DOM interface following <a
3207 href="http://www.w3.org/Style/CSS/Tracker/actions/350">Action 350</a>.
3209 <li>Clarified that a region becomes a region only if its ‘<code
3210 class=property>content</code>’ property computes to normal, following
3211 the resolution of <a
3212 href="http://wiki.csswg.org/spec/css3-regions#issue-22content-vs-flow-from-precedence">Issue
3213 22</a>.
3215 <li>Removed text about special iframe behavior as a result of <a
3216 href="http://www.w3.org/Style/CSS/Tracker/actions/376">ACTION 376</a>.
3218 <li>Made the selectors explicit in the initial section code examples,
3219 following discussion in <a
3220 href="http://krijnhoetmer.nl/irc-logs/css/20111030">San Jose, October
3221 2011</a> face to face meeting.
3223 <li>Added section on use cases following <a
3224 href="http://www.w3.org/Style/CSS/Tracker/actions/377">ACTION-377</a>.
3225 </ul>
3227 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
3229 <p>The editors are grateful to the CSS working group for their feedback and
3230 help with the genesis of this specification.
3232 <p>In addition, the editors would like to thank the following individuals
3233 for their contributions, either during the conception of CSS regions or
3234 during its development and specification review process:
3236 <p>Rossen Atanassov, Tab Atkins, Mihai Balan, Andrei Bucur, Razvan Caliman,
3237 Alexandru Chiculita, Phil Cupp, Arron Eicholz, John Jansen, Dimitri
3238 Glazkov, Daniel Glazman, Arno Gourdol, David Hyatt, Brian Heuston, Ian
3239 Hickson, Jonathan Hoersch, Michael Jolson, Brad Kemper, Håkon Wium Lie,
3240 Markus Mielke, Robert O'Callahan, Edward O'Connor, Mihnea Ovidenie, Virgil
3241 Palanciuc, Olga Popiv, Christoph Päper, Anton Prowse, Peter Sorotokin,
3242 Christian Stockwell, Eugene Veselov, Boris Zbarsky, Stephen Zilles and the
3243 CSS Working Group members.
3245 <h2 class=no-num id=intro-example-code>Appendix A. Example Code for
3246 Introduction</h2>
3248 <p>The following is one possible way to code the example from the <a
3249 href="#introduction">introduction</a>. This code uses grid cells to
3250 define, size and position the region areas but table layout, absolute
3251 positioning, or any other CSS layout facility could be used.
3253 <div class=example>
3254 <pre>
3255 <style>
3256 #grid {
3257 width: 80vw;
3258 height: 60vw;
3259 grid-template: "aaa.d"
3260 "....d"
3261 "bbb.d"
3262 "....d"
3263 "ccc.d";
3264 grid-rows: 52% 4% 20% 4% 20%;
3265 grid-columns: 30% 5% 30% 5% 30%;
3266 }
3267 #region1 { grid-cell: a; }
3268 #region2 { grid-cell: b; }
3269 #boxA { grid-cell: c; }
3270 #region3 { grid-cell: d; }
3272 #region4 {
3273 width: 80vw;
3274 }
3276 #region2 {
3277 column-count: 2;
3278 }
3280 <span
3281 class=highlight>/*
3282 * Creates the named flow
3283 */</span>
3284 article {
3285 <strong>flow-into: article_flow;</strong>
3286 }
3288 <span
3289 class=highlight>/*
3290 * Associate it with the intended CSS Regions.
3291 * This creates a region chain for the named flow.
3292 */</span>
3293 #region1, #region2, #region3, #region4 {
3294 <strong>flow-from: article_flow;</strong>
3295 }
3297 </style>
3299 <span
3300 class=highlight><!--
3301 The following code element is the content to flow
3302 through the region chain.
3303 --></span>
3305 <article>
3306 <h1>Introduction</h1>
3307 <p>This is an example ...</p>
3309 <h2>More Details</h2>
3310 <p>This illustrates ...</p>
3311 <p>Then, the example ...</p>
3312 <p>Finally, this ...</p>
3313 </article>
3315 <span
3316 class=highlight><!--
3317 For this example, we layout the regions with a grid.
3318 Regions could be pseudo-elements and could be laid out
3319 with another layout module (e.g., flexible boxes)
3320 --></span>
3321 <div id="grid">
3322 <div id="region1"></div>
3323 <div id="region2"></div>
3324 <div id="boxA"></div>
3325 <div id="region3"></div>
3326 </div>
3327 <div id="region4"></div>
3328 </pre>
3329 </div>
3331 <div class=note><span class=note-prefix>Note </span>
3332 <p> Note that a multi-column element is used for #region2, which is a bit
3333 gratuitous here (because grid cells could be used). The reason to use a
3334 multi-column element is to illustrate that regions can be multi-column.
3335 </div>
3337 <h2 class=no-num id=references>References</h2>
3339 <div class=issue-marker data-bug_id=16404 data-bug_status=ASSIGNED> <a
3340 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16404">Issue-16404</a>
3342 <div class=issue-details>
3343 <p class=short-desc>Fix specification dependencies
3344 </div>
3345 </div>
3347 <h3 class=no-num id=normative-references>Normative references</h3>
3348 <!--begin-normative-->
3349 <!-- Sorted by label -->
3351 <dl class=bibliography>
3352 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3353 <!---->
3355 <dt id=CSS21>[CSS21]
3357 <dd>Bert Bos; et al. <a
3358 href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
3359 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
3360 2011. W3C Recommendation. URL: <a
3361 href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
3362 </dd>
3363 <!---->
3365 <dt id=CSS3-BREAK>[CSS3-BREAK]
3367 <dd>Rossen Atanassov; Elika J. Etemad. <a
3368 href="http://www.w3.org/TR/2012/WD-css3-break-20120823/"><cite>CSS
3369 Fragmentation Module Level 3.</cite></a> 23 August 2012. W3C Working
3370 Draft. (Work in progress.) URL: <a
3371 href="http://www.w3.org/TR/2012/WD-css3-break-20120823/">http://www.w3.org/TR/2012/WD-css3-break-20120823/</a>
3372 </dd>
3373 <!---->
3375 <dt id=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]
3377 <dd>Elika J. Etemad; Koji Ishii. <a
3378 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/"><cite>CSS
3379 Writing Modes Module Level 3.</cite></a> 1 May 2012. W3C Working Draft.
3380 (Work in progress.) URL: <a
3381 href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/</a>
3382 </dd>
3383 <!---->
3385 <dt id=CSS3COL>[CSS3COL]
3387 <dd>Håkon Wium Lie. <a
3388 href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
3389 Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
3390 Recommendation. (Work in progress.) URL: <a
3391 href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
3392 </dd>
3393 <!---->
3395 <dt id=CSSOM>[CSSOM]
3397 <dd>Anne van Kesteren. <a
3398 href="http://www.w3.org/TR/2011/WD-cssom-20110712/"><cite>CSSOM.</cite></a>
3399 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a
3400 href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a>
3401 </dd>
3402 <!---->
3404 <dt id=DOM>[DOM]
3406 <dd>Anne van Kesteren; Aryeh Gregor; Ms2ger. <a
3407 href="http://www.w3.org/TR/2012/WD-dom-20120405/"><cite>DOM4.</cite></a>
3408 5 April 2012. W3C Working Draft. (Work in progress.) URL: <a
3409 href="http://www.w3.org/TR/2012/WD-dom-20120405/">http://www.w3.org/TR/2012/WD-dom-20120405/</a>
3410 </dd>
3411 <!---->
3413 <dt id=DOM-LEVEL-3-EVENTS>[DOM-LEVEL-3-EVENTS]
3415 <dd>Travis Leithead; et al. <a
3416 href="http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120906/"><cite>Document
3417 Object Model (DOM) Level 3 Events Specification.</cite></a> 6 September
3418 2012. W3C Working Draft. (Work in progress.) URL: <a
3419 href="http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120906/">http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120906/</a>
3420 </dd>
3421 <!---->
3423 <dt id=HTML5>[HTML5]
3425 <dd>Ian Hickson. <a
3426 href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a>
3427 25 May 2011. W3C Working Draft. (Work in progress.) URL: <a
3428 href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a>
3429 </dd>
3430 <!---->
3432 <dt id=SELECT>[SELECT]
3434 <dd>Tantek Çelik; et al. <a
3435 href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors
3436 Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a
3437 href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a>
3438 </dd>
3439 <!---->
3440 </dl>
3441 <!--end-normative-->
3443 <h3 class=no-num id=other-references>Other references</h3>
3444 <!--begin-informative-->
3445 <!-- Sorted by label -->
3447 <dl class=bibliography>
3448 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3449 <!---->
3451 <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]
3453 <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a
3454 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/"><cite>CSS
3455 Exclusions and Shapes Module Level 3.</cite></a> 3 May 2012. W3C Working
3456 Draft. (Work in progress.) URL: <a
3457 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/</a>
3458 </dd>
3459 <!---->
3461 <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX]
3463 <dd>Tab Atkins Jr.; Elika J. Etemad; Alex Mogilevsky. <a
3464 href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/"><cite>CSS
3465 Flexible Box Layout Module.</cite></a> 12 June 2012. W3C Working Draft.
3466 (Work in progress.) URL: <a
3467 href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/</a>
3468 </dd>
3469 <!---->
3471 <dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT]
3473 <dd>Alex Mogilevsky; et al. <a
3474 href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/"><cite>CSS
3475 Grid Layout.</cite></a> 22 March 2012. W3C Working Draft. (Work in
3476 progress.) URL: <a
3477 href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20120322/</a>
3478 </dd>
3479 <!---->
3481 <dt id=CSS3-LINE-GRID>[CSS3-LINE-GRID]
3483 <dd>Koji Ishii. <a href="http://dev.w3.org/csswg/css-line-grid/"><cite>CSS
3484 Line Grid Module.</cite></a> Proposal for a CSS module. (Retrieved 26
3485 October 2011) URL: <a
3486 href="http://dev.w3.org/csswg/css-line-grid/">http://dev.w3.org/csswg/css-line-grid/</a>
3487 </dd>
3488 <!---->
3490 <dt id=CSS3-PAGE-TEMPLATE>[CSS3-PAGE-TEMPLATE]
3492 <dd>Alan Stearns. <a
3493 href="http://dev.w3.org/csswg/css3-page-template/"><cite>CSS Pagination
3494 Templates Module Level 3.</cite></a> Proposal for a CSS module.
3495 (Retrieved 4 April 2012) URL: <a
3496 href="http://dev.w3.org/csswg/css3-page-template/">http://dev.w3.org/csswg/css3-page-template/</a>
3497 </dd>
3498 <!---->
3500 <dt id=CSS3GRID>[CSS3GRID]
3502 <dd>Alex Mogilevsky; Markus Mielke. <a
3503 href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
3504 Positioning Module Level 3.</cite></a> 5 September 2007. W3C Working
3505 Draft. (Work in progress.) URL: <a
3506 href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
3507 </dd>
3508 <!---->
3510 <dt id=CSS3LAYOUT>[CSS3LAYOUT]
3512 <dd>Bert Bos; César Acebal. <a
3513 href="http://www.w3.org/TR/2010/WD-css3-layout-20100429"><cite>CSS
3514 Template Layout Module.</cite></a> 29 April 2010. W3C Working Draft.
3515 (Work in progress.) URL: <a
3516 href="http://www.w3.org/TR/2010/WD-css3-layout-20100429">http://www.w3.org/TR/2010/WD-css3-layout-20100429</a>
3517 </dd>
3518 <!---->
3520 <dt id=CSS3PAGE>[CSS3PAGE]
3522 <dd>Håkon Wium Lie; Melinda Grant. <a
3523 href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
3524 Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
3525 progress.) URL: <a
3526 href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
3527 </dd>
3528 <!---->
3530 <dt id=MEDIAQ>[MEDIAQ]
3532 <dd>Florian Rivoal. <a
3533 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media
3534 Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a
3535 href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a>
3536 </dd>
3537 <!---->
3538 </dl>
3539 <!--end-informative-->
3541 <h2 class=no-num id=index>Index</h2>
3542 <!--begin-index-->
3544 <ul class=indexlist>
3545 <li>break-after, <a href="#break-after"
3546 title=break-after><strong>3.3.</strong></a>
3548 <li>break-before, <a href="#break-before"
3549 title=break-before><strong>3.3.</strong></a>
3551 <li>break-inside, <a href="#break-inside"
3552 title=break-inside><strong>3.3.</strong></a>
3554 <li><a href="#region-style-rule-cssRules"><code
3555 class=idl>cssRules</code></a>, <a href="#region-style-rule-cssRules"
3556 title=cssRules><strong>6.3.</strong></a>
3558 <li>current-region, <a href="#current-region"
3559 title=current-region><strong>2.4.</strong></a>
3561 <li><a href="#region-style-rule-deleteRule"><code
3562 class=idl>deleteRule(index)</code></a>, <a
3563 href="#region-style-rule-deleteRule"
3564 title="deleteRule(index)"><strong>6.3.</strong></a>
3566 <li>firstEmptyRegionIndex, <a
3567 href="#dom-named-flow-first-empty-region-index"
3568 title=firstEmptyRegionIndex><strong>6.1.</strong></a>
3570 <li>flow fragment height, <a href="#flow-fragment-height"
3571 title="flow fragment height"><strong>7.2.</strong></a>
3573 <li>flow-from, <a href="#flow-from"
3574 title=flow-from><strong>3.2.</strong></a>
3576 <li>flow-into, <a href="#flow-into"
3577 title=flow-into><strong>3.1.</strong></a>
3579 <li>getComputedRegionStyle, <a href="#dom-region-getComputedRegionStyle"
3580 title=getComputedRegionStyle><strong>6.2.</strong></a>
3582 <li>getContent(), <a href="#dom-named-flow-get-content"
3583 title="getContent()"><strong>6.1.</strong></a>
3585 <li><a href="#document-getnamedflows"><code
3586 class=idl>getNamedFlows()</code></a>, <a href="#document-getnamedflows"
3587 title="getNamedFlows()"><strong>6.1.</strong></a>
3589 <li>getRegionFlowRanges, <a href="#dom-region-getregionflowranges"
3590 title=getRegionFlowRanges><strong>6.2.</strong></a>
3592 <li><a href="#dom-named-flow-get-regions"><code
3593 class=idl>getRegions()</code></a>, <a href="#dom-named-flow-get-regions"
3594 title="getRegions()"><strong>6.1.</strong></a>
3596 <li>getRegionsByContent(), <a
3597 href="#dom-named-flow-get-regions-by-content"
3598 title="getRegionsByContent()"><strong>6.1.</strong></a>
3600 <li><a href="#region-style-rule-insertRule"><code
3601 class=idl>insertRule(rule, index)</code></a>, <a
3602 href="#region-style-rule-insertRule"
3603 title="insertRule(rule, index)"><strong>6.3.</strong></a>
3605 <li><a href="#dom-named-flow-collection-item"><code
3606 class=idl>item(index)</code></a>, <a
3607 href="#dom-named-flow-collection-item"
3608 title="item(index)"><strong>6.1.</strong></a>
3610 <li><a href="#dom-named-flow-collection-length"><code
3611 class=idl>length</code></a>, <a href="#dom-named-flow-collection-length"
3612 title=length><strong>6.1.</strong></a>
3614 <li><a href="#dom-named-flow-name"><code class=idl>name</code></a>, <a
3615 href="#dom-named-flow-name" title=name><strong>6.1.</strong></a>
3617 <li><a href="#dom-named-flow"><code class=idl>NamedFlow</code></a>, <a
3618 href="#dom-named-flow" title=NamedFlow><strong>6.1.</strong></a>
3620 <li>named flow, <a href="#named-flow0"
3621 title="named flow"><strong>2.3.</strong></a>
3623 <li><a href="#dom-named-flow-collection"><code
3624 class=idl>NamedFlowCollection</code></a>, <a
3625 href="#dom-named-flow-collection"
3626 title=NamedFlowCollection><strong>6.1.</strong></a>
3628 <li><a href="#dom-named-flow-collection-named-item"><code
3629 class=idl>namedItem(name)</code></a>, <a
3630 href="#dom-named-flow-collection-named-item"
3631 title="namedItem(name)"><strong>6.1.</strong></a>
3633 <li><a href="#dom-named-flow-overset"><code class=idl>overset</code></a>,
3634 <a href="#dom-named-flow-overset" title=overset><strong>6.1.</strong></a>
3636 <li>region, <a href="#css-region" title=region><strong>2.1.</strong></a>
3638 <li>region chain, <a href="#region-chain0"
3639 title="region chain"><strong>2.2.</strong></a>
3641 <li>region flow content box, <a href="#region-flow-content-box"
3642 title="region flow content box"><strong>7.1.</strong></a>
3644 <li>region-fragment, <a href="#region-fragment"
3645 title=region-fragment><strong>3.4.</strong></a>
3647 <li><a href="#css-region"><code class=idl>Region</code></a> interface, <a
3648 href="#region-interface"
3649 title="Region interface"><strong>6.2.</strong></a>
3651 <li><a href="#dom-region-regionoverset"><code
3652 class=idl>regionOverset</code></a>, <a href="#dom-region-regionoverset"
3653 title=regionOverset><strong>6.2.</strong></a>
3655 <li>REGION_STYLE_RULE, <a href="#region-style-rule-const"
3656 title="REGION_STYLE_RULE"><strong>6.3.</strong></a>
3658 <li>RFCB, <a href="#rfcb" title=RFCB><strong>7.1.</strong></a>
3660 <li><a href="#region-style-rule-selectorText"><code
3661 class=idl>selectorText</code></a>, <a
3662 href="#region-style-rule-selectorText"
3663 title=selectorText><strong>6.3.</strong></a>
3665 <li>specified flow, <a href="#specified-flow"
3666 title="specified flow"><strong>3.1.</strong></a>
3667 </ul>
3668 <!--end-index-->
3670 <h2 class=no-num id=property-index>Property index</h2>
3671 <!--begin-properties-->
3673 <table class=proptable>
3674 <thead>
3675 <tr>
3676 <th>Property
3678 <th>Values
3680 <th>Initial
3682 <th>Applies to
3684 <th>Inh.
3686 <th>Percentages
3688 <th>Media
3690 <tbody>
3691 <tr>
3692 <th><a class=property href="#break-after">break-after</a>
3694 <td>auto | always | avoid | left | right | page | column | region |
3695 avoid-page | avoid-column | avoid-region
3697 <td>auto
3699 <td>block-level elements
3701 <td>no
3703 <td>N/A
3705 <td>visual
3707 <tr>
3708 <th><a class=property href="#break-before">break-before</a>
3710 <td>auto | always | avoid | left | right | page | column | region |
3711 avoid-page | avoid-column | avoid-region
3713 <td>auto
3715 <td>block-level elements
3717 <td>no
3719 <td>N/A
3721 <td>visual
3723 <tr>
3724 <th><a class=property href="#break-inside">break-inside</a>
3726 <td>auto | avoid | avoid-page | avoid-column | avoid-region
3728 <td>auto
3730 <td>block-level elements
3732 <td>no
3734 <td>N/A
3736 <td>visual
3738 <tr>
3739 <th><a class=property href="#flow-from">flow-from</a>
3741 <td><ident> | none | inherit
3743 <td>none
3745 <td>Non-replaced block containers. This might be expanded in future
3746 versions of the specification to allow other types of containers to
3747 receive flow content.
3749 <td>no
3751 <td>N/A
3753 <td>visual
3755 <tr>
3756 <th><a class=property href="#flow-into">flow-into</a>
3758 <td><ident> | none | inherit
3760 <td>none
3762 <td>any element. The ‘flow-into’ property does not apply to any
3763 pseudo-element such as ::first-line, ::first-letter, ::before or
3764 ::after.
3766 <td>no
3768 <td>N/A
3770 <td>visual
3772 <tr>
3773 <th><a class=property href="#region-fragment">region-fragment</a>
3775 <td>auto | break
3777 <td>auto
3779 <td>CSS Regions
3781 <td>no
3783 <td>N/A
3785 <td>visual
3786 </table>
3787 <!--end-properties-->
3788 <!-- template markup for issues pulled from Bugzilla -->
3789 <!-- template markup for issues pulled from Bugzilla -->
3791 <script id=issue-template type="text/template">
3792 </script>
3793 <div class=issue-marker data-bug_id="{{bug_id}}"
3794 data-bug_status="{{bug_status}}"> <a
3795 href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a>
3797 <div class=issue-details>
3798 <p class=short-desc>{{short_desc}}
3799 </div>
3800 </div>
3802 <script src="../shared/scripts/BugzillaTrackerUtil.js"
3803 type="text/javascript"></script>
3804 <script src="../shared/scripts/BugzillaTracker.js" type="text/javascript"></script>
3805 <script type="text/javascript">
3806 checkSpecificationIssues(‘</script>
3807 <p><code class=property>CSS</code>’, ‘<a href="#css-region"><code
3808 class=property>Regions</code></a>’);
3809 </html>
3810 <!-- Keep this comment at the end of the file
3811 Local variables:
3812 mode: sgml
3813 sgml-declaration:"~/SGML/HTML4.decl"
3814 sgml-default-doctype-name:"html"
3815 sgml-minimize-attributes:t
3816 sgml-nofill-elements:("pre" "style" "br")
3817 sgml-live-element-indicator:t
3818 sgml-omittag:nil
3819 sgml-shorttag:nil
3820 sgml-namecase-general:t
3821 sgml-general-insert-case:lower
3822 sgml-always-quote-attributes:t
3823 sgml-indent-step:nil
3824 sgml-indent-data:t
3825 sgml-parent-document:nil
3826 sgml-exposed-tags:nil
3827 sgml-local-catalogs:nil
3828 sgml-local-ecat-files:nil
3829 End:
3830 -->