css3-regions/Overview.html

Thu, 04 Oct 2012 16:22:48 -0700

author
Alan Stearns <stearns@adobe.com>
date
Thu, 04 Oct 2012 16:22:48 -0700
changeset 6816
d5407e5d40c8
parent 6812
b76903becabe
child 6817
afc7818f1791
permissions
-rwxr-xr-x

[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&amp;component=Regions&amp;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>&lt;article&gt;</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 &lt;style&gt;
   438   article {
   439     <strong>flow-into: article_flow;</strong>
   440   }
   442   #region1, #region2, #region3, #region4 {
   443     <strong>flow-from: article_flow;</strong>
   444   }
   445 &lt;/style&gt;
   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 &lt;style&gt;
   534   @region #region1 {
   535       p {
   536           color: #0C3D5F;
   537           font-weight: bold;
   538       }
   539 &lt;/style&gt;</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>&lt;ident&gt; | 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">&lt;ident&gt;</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>&lt;ident&gt;</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 &gt; * {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 &lt;span&gt;one&lt;/span&gt;
   822 &lt;span&gt;two&lt;/span&gt;
   823 </pre>
   824    Then the ‘<code class=property>span-content</code>’ named flow
   825    contents will contain this:
   826    <pre>&lt;span&gt;one&lt;/span&gt;&lt;span&gt;two&lt;/span&gt;
   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>&lt;ident&gt; | 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>&lt;ident&gt;</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">&lt;ident&gt;</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 &lt;ident&gt;, 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     &lt;ident&gt;, 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 &lt;ident&gt; value, even if
   934     there is no content contributing to the referenced flow. For example:
   936    <pre>
   937 &lt;style&gt;
   938   .article{
   939     flow-into: thread;
   940   }
   941   .region{
   942     flow-from: thread;
   943   }
   944 &lt;/style&gt;
   945 &lt;html&gt;
   946   &lt;body&gt;
   947     &lt;div class=region&gt;div content&lt;/div&gt;
   948   &lt;/body&gt;
   949 &lt;/html&gt;
   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 &lt;style&gt;
  1281 article {
  1282   flow-into: "article";
  1285 #region_1, #region_2 {
  1286   flow-from: article;
  1287   <strong>region-fragment: break;</strong> /* or auto */
  1288   <strong>overflow: visible;</strong> /* or hidden */
  1291 &lt;/style&gt;
  1293 &lt;article&gt;...&lt;/article&gt;
  1295 &lt;div id="region_1"&gt;&lt;/div&gt;
  1296 &lt;div id="region_2"&gt;&lt;/div&gt;
  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 &lt;selector&gt; {
  1359     ... CSS styling rules ...
  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 &lt;style&gt;
  1471     #div_1 {
  1472         <strong>flow-into: article_flow;</strong>
  1475     #region_1, #region_2 {
  1476         <strong>flow-from: article_flow;</strong>
  1479     /* region style "RSA" */
  1480     <strong>@region #region_1, #region_2</strong> {
  1481         div {...}
  1482         p {...}
  1485     /* region style "RSB" */
  1486     <strong>@region #region_1</strong> {
  1487         p {...}
  1490 &lt;/style&gt;
  1492 &lt;div id="div_1"&gt;
  1493     &lt;p id="p_1"&gt;...&lt;/p&gt;
  1494     &lt;p id="p_2"&gt;...&lt;/p&gt;
  1495 &lt;/div&gt;
  1497 &lt;div id="region_1"&gt;&lt;/div&gt;
  1498 &lt;div id="region_2"&gt;&lt;/div&gt;
  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>&lt;div&gt;</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>&lt;p&gt;</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 &lt;style&gt;    
  1604    #multi-col {
  1605        column-count: 2;
  1606        flow-from: article;
  1607        height: 6em;
  1608        column-gap: 1em; 
  1611    #remainder {
  1612        flow-from: article;
  1613        height: auto;
  1615 &lt;/style&gt;
  1617 &lt;article&gt;...&lt;/article&gt;
  1618 &lt;div id="multicol"&gt;&lt;/div&gt;
  1619 &lt;div id="remainder"&gt;&lt;/div&gt;</pre>
  1621    <p>is equivalent in rendering to, for example:
  1623    <pre>
  1624 &lt;style&gt;    
  1625    #flex {
  1626        display: flex;
  1627        flex-pack: justify;
  1628        height: 6em;
  1630    #flex > div {
  1631        flow-from: article;
  1632        width: calc(50% - 0.5em);
  1635    #remainder {
  1636        flow-from: article;
  1637        height: auto;
  1639 &lt;/style&gt;
  1641 &lt;article&gt;...&lt;/article&gt;
  1642 &lt;div id="flex"&gt;
  1643    &lt;div /&gt;
  1644    &lt;div /&gt;
  1645 &lt;/div&gt;
  1646 &lt;div id="remainder"&gt;&lt;/div&gt;</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&lt;<a
  1847    href="#region-interface">Region</a>&gt; <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&lt;<a
  1855    href="#region-interface">Region</a>&gt; <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&lt;<a
  1983    href="#">Range</a>&gt;? <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 &lt;style&gt;
  2534 article {
  2535     flow-into: article;
  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;
  2546 #rA {
  2547     width: auto;
  2548     height: auto;
  2551 #rB {
  2552     float: left;
  2553     width: 15em;
  2554     height: auto;
  2555     max-height: 150px;
  2558 #rC {
  2559     float: right;
  2560     width: 12em;
  2561     height: auto;
  2564 #main-flow {
  2565     padding: 0em 1em 0em 1em;
  2568 &lt;/style&gt;       
  2569 &lt;body&gt;
  2570     &lt;article&gt;
  2571         &lt;p style="break-after:region;"&gt;I am not a ... &lt;/p&gt;
  2572         &lt;p&gt;...&lt;/p&gt;
  2573     &lt;/article&gt;
  2574     &lt;div id="rA"&gt;&lt;/div&gt;
  2575     &lt;div id="rB"&gt;&lt;/div&gt;
  2576     &lt;div id="rC"&gt;&lt;/div&gt;
  2578     &lt;div id="main-flow"&gt;
  2579         &lt;p&gt;Lorem ipsum dolor ...&lt;/p&gt;
  2580     &lt;/div&gt;
  2581 &lt;/body&gt;            
  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>&lt;body&gt;</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: &lt;ident&gt; 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 &lt;integer&gt;
  2978     and not a &lt;float&gt; 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 &lt;ident&gt; instead of &lt;string&gt; 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 &lt;div&gt; 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(&lt;ident&gt;)</code>’
  3148     with ‘<code class=css>flow-from: &lt;ident&gt;</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 &lt;style&gt;
  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%;
  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;
  3276   #region2 {
  3277     column-count: 2;
  3280   <span
  3281     class=highlight>/*
  3282    * Creates the named flow 
  3283    */</span>
  3284   article {
  3285     <strong>flow-into: article_flow;</strong>
  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>
  3297 &lt;/style&gt;
  3299 <span
  3300     class=highlight>&lt;!-- 
  3301      The following code element is the content to flow 
  3302      through the region chain. 
  3303 --&gt;</span>
  3305 &lt;article&gt;
  3306   &lt;h1&gt;Introduction&lt;/h1&gt;
  3307   &lt;p&gt;This is an example ...&lt;/p&gt;
  3309   &lt;h2&gt;More Details&lt;/h2&gt;
  3310   &lt;p&gt;This illustrates ...&lt;/p&gt;
  3311   &lt;p&gt;Then, the example ...&lt;/p&gt;
  3312   &lt;p&gt;Finally, this ...&lt;/p&gt;
  3313 &lt;/article&gt;
  3315 <span
  3316     class=highlight>&lt;!--
  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 --&gt;</span>
  3321 &lt;div id="grid"&gt;
  3322   &lt;div id="region1"&gt;&lt;/div&gt;
  3323   &lt;div id="region2"&gt;&lt;/div&gt;
  3324   &lt;div id="boxA"&gt;&lt;/div&gt;
  3325   &lt;div id="region3"&gt;&lt;/div&gt;
  3326 &lt;/div&gt;
  3327 &lt;div id="region4"&gt;&lt;/div&gt;
  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>&lt;ident&gt; | 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>&lt;ident&gt; | 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 -->

mercurial