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