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