css3-regions/Overview.src.html

Fri, 12 Oct 2012 15:30:09 -0700

author
Alan Stearns <stearns@adobe.com>
date
Fri, 12 Oct 2012 15:30:09 -0700
changeset 6847
09b933bd65e2
parent 6841
d99a9a222d1d
child 6903
a11e43b48600
permissions
-rwxr-xr-x

[css-regions] defer named flows from external resources

stearns@5447 1 <!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN'
vhardy@3547 2 'http://www.w3.org/TR/html4/strict.dtd'>
vhardy@3547 3 <html lang="en">
vhardy@3547 4 <head profile="http://www.w3.org/2006/03/hcard">
vhardy@3547 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
vhardy@3548 6 <title>CSS Regions Module Level 3</title>
vhardy@5539 7 <link rel="stylesheet" type="text/css" href="../shared/style/default.css">
stearns@5893 8 <script src='http://test.csswg.org/harness/annotate.js#CSS3-REGIONS_DEV' type='text/javascript' defer></script>
vhardy@2779 9
vhardy@3660 10 <style type="text/css">
vhardy@3973 11 #region-style-example p, #region-style-example pre {
vhardy@3973 12 clear: both;
vhardy@3973 13 }
vhardy@3973 14
vhardy@3973 15 #region_styling_illustration {
vhardy@3973 16 margin: 0px auto;
vhardy@3973 17 width: 70ex;
vhardy@3973 18 }
vhardy@3660 19 </style>
vhardy@3973 20
vhardy@3973 21 <link rel="stylesheet" type="text/css"
bert@3953 22 href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
vhardy@3972 23
vhardy@5556 24 <link rel="stylesheet" type="text/css"
vhardy@5556 25 href="../shared/style/issues.css">
vhardy@5556 26
vhardy@5539 27 <link id="st" href="../shared/style/alternate-spec-style.css" rel="stylesheet"
vhardy@4119 28 type="text/css" title="alternate spec style">
vhardy@2779 29 </head>
vhardy@2779 30
vhardy@3547 31
vhardy@2779 32 <body>
vhardy@2779 33 <div class="head" id="div-head">
vhardy@4119 34 <p><a href="http://www.w3.org/"><img id="mobile-logo" alt="W3C" height="53" src=
vhardy@4119 35 "http://www.w3.org/2008/site/images/logo-w3c-mobile-lg" width="90"></a>
vhardy@4119 36
vhardy@4119 37
vhardy@2779 38 <!--begin-logo-->
vhardy@2779 39
vhardy@4119 40 <p><a href="http://www.w3.org/"><img id="logo" alt="W3C" height="48" src=
vhardy@2779 41 "http://www.w3.org/Icons/w3c_home" width="72"></a> <!--end-logo--></p>
vhardy@2779 42
bert@3938 43 <h1 id="css-regions-module">CSS Regions Module Level 3</h1>
vhardy@2779 44
bert@3938 45 <h2 class="no-num no-toc" id="longstatus-date">[LONGSTATUS]
vhardy@2779 46 [DATE]</h2>
vhardy@2779 47
vhardy@2779 48 <dl>
vhardy@2779 49 <dt>This version:</dt>
vhardy@2779 50
vhardy@2779 51 <dd><a href=
vhardy@3073 52 "[VERSION]">http://www.w3.org/csswg/css3-regions</a></dd>
vhardy@2779 53
vhardy@2779 54 <dt>Latest version:</dt>
vhardy@2779 55
vhardy@2779 56 <dd><a href=
bert@3938 57 "http://www.w3.org/TR/css3-regions/">http://www.w3.org/TR/css3-regions/</a></dd>
vhardy@2779 58
vhardy@2779 59 <dt>Previous version:</dt>
vhardy@2779 60
vhardy@4397 61 <dd><a href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">http://www.w3.org/TR/2011/WD-css3-regions-20111129/</a></dd>
vhardy@4395 62
vhardy@2779 63 <dt>Editors:</dt>
vhardy@2779 64
vhardy@2779 65 <dd class="vcard"><span class="fn">Vincent Hardy</span>,
vhardy@2779 66 <span class="org">Adobe Systems, Inc.</span>, <span class=
vhardy@2779 67 "email">vhardy@adobe.com</span></dd>
vhardy@3073 68 <dd class="vcard"><span class="fn">Alex Mogilevsky</span>,
vhardy@3073 69 <span class="org">Microsoft</span>, <span class=
vhardy@3073 70 "email">alexmog@microsoft.com</span></dd>
stearns@5629 71 <dd class="vcard"><span class="fn">Alan Stearns</span>,
stearns@5629 72 <span class="org">Adobe Systems, Inc.</span>, <span class=
stearns@5629 73 "email">stearns@adobe.com</span></dd>
vhardy@4679 74
vhardy@4679 75 <dt>Issues List:</dt>
stearns@5604 76 <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Regions&amp;resolution=---">Bugzilla Bugs for CSS regions</a></dd>
vhardy@4679 77 <dt>Discussion:</dt>
vhardy@4679 78 <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> with subject line "<code>[css3-regions] message topic</code>"</dd>
vhardy@2779 79 </dl><!--begin-copyright--><!--end-copyright-->
vhardy@2779 80 <hr title="Separator for header">
vhardy@2779 81 </div>
vhardy@4395 82
vhardy@2779 83 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
vhardy@3277 84
vhardy@3301 85 <p>The CSS regions module allows content to flow across multiple areas
vhardy@3549 86 called regions. The regions are not necessarily contiguous in the document order.
vhardy@3301 87 The CSS regions module provides an advanced content flow mechanism, which
vhardy@2791 88 can be combined with positioning schemes as defined by other CSS modules
vhardy@3073 89 such as the Multi-Column Module [[CSS3COL]] or the Grid Layout Module
vhardy@2791 90 [[CSS3-GRID-LAYOUT]] to position the regions where content flows.</p>
vhardy@2779 91
vhardy@2945 92 <h2 class="no-num no-toc" id="status-of-this-document">Status of this
vhardy@3977 93 document</h2>
vhardy@3977 94
vhardy@4314 95 <p class="big note"><span class="note-prefix">Note </span>This document uses an experimental style
vhardy@3977 96 sheet. We welcome your feedback on the styles at
vhardy@3977 97 <a href="mailto:site-comments@w3.org">site-comments@w3.org</a>.</p>
vhardy@3977 98
stearns@5645 99 <!--status-->
vhardy@2779 100
bert@3953 101 <p>This draft is related to the drafts about Multi-column Layout
bert@3953 102 [[CSS3COL]], Grid Layout [[CSS3GRID]], Flexible Box Layout
bert@3953 103 [[CSS3-FLEXBOX]], and Template Layout [[CSS3LAYOUT]].</p>
vhardy@2779 104
vhardy@2945 105 <h2 class="no-num no-toc" id="table-of-contents">Table of contents</h2>
vhardy@2779 106 <!--begin-toc--><!--end-toc-->
vhardy@2779 107
vhardy@2779 108 <h2 id="introduction">Introduction</h2>
vhardy@2779 109
vhardy@3073 110 <p><em>This section is non-normative.</em></p>
vhardy@4395 111
stearns@5445 112 <p>Displaying the complex layouts
stearns@5445 113 of a typical magazine, newspaper, or textbook on the web
stearns@5445 114 requires capabilities beyond those available in existing CSS modules.
stearns@5445 115 Dynamic magazine layout in particular requires flexibility
stearns@5445 116 in placement of boxes for content flows.
stearns@5445 117 This is the purpose of the CSS regions module.</p>
vhardy@4395 118
vhardy@4412 119 <div class="issue-marker" data-bug_id="15733" data-bug_status="NEW">
vhardy@4395 120 <a href=
vhardy@5750 121 "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15733">Issue-15733</a>
vhardy@2779 122
vhardy@4395 123 <div class="issue-details">
vhardy@4395 124 <p class="short-desc">Should the region specification define a
vhardy@4395 125 mechanism to create blocks that can be regions with CSS
vhardy@4395 126 syntax?</p>
vhardy@4395 127 </div>
vhardy@4395 128 </div>
vhardy@2779 129
stearns@5445 130 <p>For more complex layouts,
stearns@5445 131 content needs to flow from one area of the page to the next
stearns@5445 132 without limitation on the areas' sizes and positions.
stearns@5445 133 These arbitrary areas are the target of specific content flows
stearns@5445 134 which this document calls <span>named flows</span>.
stearns@5445 135 Each <span>named flow</span> can be associated
stearns@5445 136 with a set of CSS Regions called a region chain.
stearns@5445 137 CSS Regions are based on the rectangular geometry
stearns@5445 138 of the CSS box model.
stearns@5445 139 Elements in a <span>named flow</span>
stearns@5445 140 are taken out of the normal visual formatting
stearns@5445 141 and rendered in a chain of CSS Regions.</p>
stearns@5445 142
stearns@5445 143 <h3 id="named-flows-and-regions">Named flows and region chains</h3>
vhardy@2779 144
vhardy@2779 145 <p>Consider the layout illustrated in figure 1.</p>
vhardy@2779 146
vhardy@4395 147
vhardy@2779 148 <div class="figure">
vhardy@5373 149 <img src="images/intro-example-layout.svg" width="400" alt=
vhardy@2779 150 "multiple chained regions which should receive content from a flow">
vhardy@2779 151
vhardy@2779 152 <p class="caption">Layout requiring sophisticated content flow</p>
vhardy@2779 153 </div>
vhardy@4395 154
stearns@5445 155 <p>The designer's intent is
stearns@5445 156 to position an image in box 'A'
stearns@5445 157 and to flow an article's content
stearns@5445 158 from box '1' through boxes '2', '3' and '4'.
stearns@5445 159 Note that the second box should have two columns,
stearns@5445 160 and the image is not contained in the article.
stearns@5445 161 Box '4' should auto-size to render
stearns@5445 162 the remainder of the article content
stearns@5445 163 that did not fit in the earlier boxes.</p>
vhardy@2779 164
stearns@5423 165 <p>Figure 2 shows an example
stearns@5423 166 of the intended visual rendering
stearns@5423 167 of the content.</p>
alexmog@2565 168
vhardy@2779 169 <div class="figure">
vhardy@2779 170 <img src="images/regions-intro-rendering.png" width="450" alt=
vhardy@2779 171 "Sample rendering showing a single thread of text flowing through a chain of regions">
alexmog@2565 172
vhardy@2779 173 <p class="caption">Sample rendering for desired layout</p>
vhardy@2779 174 </div>
alexmog@2565 175
vhardy@3940 176
stearns@5445 177 <p>There is no existing mechanism in CSS
stearns@5445 178 to associate the content with these boxes
stearns@5445 179 arranged in this manner
stearns@5423 180 so that content flows as intended.
stearns@5423 181 The CSS regions module properties provide that mechanism.</p>
vhardy@4413 182
stearns@5445 183 <p>The following example illustrates
vhardy@5490 184 how the content of an <code>&lt;article&gt;</code> element
stearns@5445 185 becomes a <span>named flow</span>
stearns@5445 186 and how boxes marked with 'region1', 'region2', 'region3' and 'region4' IDs
stearns@5445 187 become CSS Regions that consume the 'article_flow' content.</p>
alexmog@2565 188
vhardy@2779 189 <div class="example">
stearns@5423 190 <pre>
vhardy@2779 191 &lt;style&gt;
vhardy@5490 192 article {
stearns@5445 193 <strong>flow-into: article_flow;</strong>
stearns@5445 194 }
alexmog@2565 195
stearns@5445 196 #region1, #region2, #region3, #region4 {
stearns@5445 197 <strong>flow-from: article_flow;</strong>
stearns@5445 198 }
vhardy@2779 199 &lt;/style&gt;
stearns@5423 200 </pre>
vhardy@2779 201 </div>
vhardy@3301 202
stearns@5423 203 <p>The 'article_flow' value on the 'flow-into' property
stearns@5445 204 directs the <code>article</code> element
stearns@5423 205 to the 'article_flow' <span>named flow</span>.
stearns@5575 206 Setting the 'flow-from' property on block containers
stearns@5445 207 to 'article_flow' makes them CSS Regions
stearns@5445 208 and associates the resulting region chain
stearns@5423 209 with the <span>named flow</span>:
stearns@5423 210 the flow is ''poured''
stearns@5445 211 into the region chain.</p>
alexmog@2565 212
stearns@5445 213 <p>See <a href="#intro-example-code">Appendix A</a>
stearns@5445 214 for sample code using grid layout
stearns@5445 215 that implements this example</p>
vhardy@5373 216
stearns@5631 217 <div class="issue-marker" data-bug_id="16858" data-bug_status="ASSIGNED">
vhardy@5750 218 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16858">Issue-16858</a>
stearns@5631 219 <div class="issue-details">
stearns@5631 220 <p class="short-desc">Should creation of regions from elements be disallowed?</p>
stearns@5631 221 </div>
stearns@5631 222 </div>
stearns@5631 223
stearns@5445 224 <div class="note"><span class="note-prefix">Note </span>
stearns@5445 225 <p><strong>CSS Regions are independent from layout</strong></p>
stearns@5445 226
stearns@5445 227 <p>Any of the CSS layout facilities can be used
stearns@5445 228 to create, position and size boxes that can become CSS Regions.
stearns@5445 229 Using a grid layout [[CSS3-GRID-LAYOUT]] is just an example.
stearns@5445 230 The example could use
stearns@5445 231 a flexible box layout [[CSS3-FLEXBOX]] instead.</p>
stearns@5445 232 <p>The CSS regions specification does not
stearns@5445 233 define a layout mechanism
stearns@5445 234 and is meant to integrate
stearns@5445 235 with existing and future CSS layout facilities.</p>
vhardy@5373 236
stearns@5445 237 <p><strong>CSS Regions do not have to be elements</strong></p>
stearns@5445 238
stearns@5445 239 <p>The CSS regions module is independent
stearns@5445 240 of the layout of boxes and
stearns@5445 241 the mechanism used to create them.
stearns@5445 242 For simplicity,
stearns@5445 243 our example code in <a href="#intro-example-code">Appendix A</a>
stearns@5445 244 uses elements to define the boxes.</p>
vhardy@5373 245
vhardy@5373 246
stearns@5445 247 <p>While the example uses elements for CSS Regions
stearns@5445 248 (since [[CSS3-GRID-LAYOUT]] requires elements to create grid items)
stearns@5445 249 it is important to note that
stearns@5445 250 this is not required.
stearns@5445 251 CSS Regions can be pseudo-elements,
stearns@5445 252 such as '::before' and '::after'.
stearns@5445 253 The only requirement
stearns@5445 254 for an element or pseudo-element
stearns@5445 255 to become a CSS Region
stearns@5445 256 is that it needs to be subject
stearns@5445 257 to CSS styling
stearns@5445 258 to receive the 'flow-from' property.
stearns@5445 259 The CSS page template module
stearns@5445 260 (see [[CSS3-PAGE-TEMPLATE]])
stearns@5445 261 proposes another mechanism
stearns@5445 262 to create stylable boxes that can become CSS Regions
stearns@5445 263 with the <code class="css">@slot</code> syntax.</p>
vhardy@5373 264 </div>
stearns@5631 265
stearns@5445 266 <h3 id="region-styling">CSS Region names and styling</h3>
alexmog@2565 267
stearns@5631 268 <div class="issue-marker" data-bug_id="16859" data-bug_status="NEW">
vhardy@5750 269 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16859">Issue-16859</a>
stearns@5631 270 <div class="issue-details">
stearns@5631 271 <p class="short-desc">Reconsider using @rule for region styling</p>
stearns@5631 272 </div>
stearns@5631 273 </div>
stearns@5631 274
stearns@5445 275 <p>Content can be styled depending on
stearns@5445 276 the CSS Region it flows into.
stearns@5445 277 It is an extension
stearns@5423 278 of pseudo-element styling such as
stearns@5423 279 <a href="http://www.w3.org/TR/css3-selectors/#first-line">
stearns@5423 280 <code class="css">::first-line</code>
stearns@5423 281 </a>
stearns@5445 282 which applies a particular style
stearns@5423 283 to a fragment of content.
stearns@5445 284 With CSS Region styling,
stearns@5423 285 additional selectors may apply
stearns@5445 286 depending on the CSS Region
stearns@5423 287 into which content flows.</p>
alexmog@2565 288
stearns@5423 289 <p>In our example,
stearns@5423 290 the designer wants to make
stearns@5445 291 text flowing into #region1
stearns@5423 292 dark blue and bold.</p>
alexmog@2565 293
stearns@5445 294 <p>This design can be expressed as shown below.</p>
alexmog@2565 295
vhardy@2779 296 <div class="example">
vhardy@2779 297 <pre>
vhardy@2779 298 &lt;style&gt;
vhardy@5489 299 @region #region1 {
vhardy@5489 300 p {
vhardy@5489 301 color: #0C3D5F;
vhardy@5489 302 font-weight: bold;
vhardy@5489 303 }
vhardy@5489 304 &lt;/style&gt;</pre>
vhardy@2779 305 </div>
alexmog@2565 306
vhardy@5489 307 <p>The <code class="css">@region #region1</code> rule
stearns@5423 308 limits its selectors to content
vhardy@5489 309 flowing into <code class="css">#region1</code>.
stearns@5423 310 The following figure shows how
stearns@5423 311 the rendering changes
vhardy@5489 312 if we apply styling specific to <code>#region1</code>.
stearns@5445 313 Note how less text fits into this box
stearns@5423 314 now that the 'font-weight' is
stearns@5423 315 bold instead of normal.</p>
vhardy@2945 316
vhardy@2779 317 <div class="figure">
vhardy@2779 318 <img src="images/region-styling.png" width="450" alt=
vhardy@2779 319 "Illustrate how changing region styling affects the flow of content.">
alexmog@2565 320
vhardy@2779 321 <p class="caption">Different rendering with a different region
vhardy@2779 322 styling</p>
vhardy@2779 323 </div>
alexmog@2565 324
vhardy@3272 325 <h2 id="css-regions-concepts">CSS regions concepts</h2>
alexmog@2565 326
vhardy@3267 327 <h3 id="regions">Regions</h3>
alexmog@2565 328
vhardy@4412 329 <div class="issue-marker wrapper">
vhardy@4412 330 <div class="issue-marker" data-bug_id="15186" data-bug_status="NEW">
vhardy@4395 331 <a href=
vhardy@5750 332 "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15186">Issue-15186</a>
vhardy@4395 333
vhardy@4395 334 <div class="issue-details">
vhardy@4395 335 <p class="short-desc">Is a mechanism to auto-generate regions
vhardy@4395 336 necessary in order to support reusable style sheets?</p>
vhardy@4395 337 </div>
vhardy@4395 338 </div>
vhardy@4412 339 </div>
vhardy@4412 340
vhardy@5489 341 <p id="region">
stearns@5579 342 A <dfn title="region">CSS Region</dfn>
stearns@5579 343 is a block container
stearns@5579 344 that has an associated
stearns@5579 345 <em><span>named flow</span></em>
stearns@5579 346 (see the 'flow-from' property).</p>
vhardy@4395 347
vhardy@5489 348 <h3 id="region-chain">Region chain</h3>
vhardy@5489 349
vhardy@5489 350 <p>A <dfn>region chain</dfn> is the sequence of regions that are associated with
vhardy@5489 351 a <span>named flow</span>. <span title="region">CSS Regions</span> in a
vhardy@5489 352 region chain receive content from the
vhardy@5489 353 named flow following their order in the chain. <span title="region">CSS Regions</span> are organized
vhardy@5489 354 into a <span title="region-chain">region chain</span>
vhardy@5489 355 according to the document order.</p>
vhardy@5489 356
stearns@5445 357 <h3 id="named-flow">Named flows</h3>
vhardy@3267 358
bert@3938 359 <p>A <dfn>named flow</dfn> is the ordered sequence of elements
stearns@5445 360 associated with a flow with a given identifier.
stearns@5445 361 Elements in a <span>named flow</span> are ordered
vhardy@3267 362 according to the document order.</p>
vhardy@3267 363
stearns@5445 364 <p>Elements are placed into a <span>named flow</span>
stearns@5445 365 with the 'flow-into' property.
stearns@5445 366 The elements in a <span>named flow</span> are laid out
stearns@5445 367 in the <span title="region-chain">region chain</span>
stearns@5445 368 that is associated with this <span>named flow</span>.
vhardy@5489 369 </p>
vhardy@3267 370
stearns@5445 371 <p>Content from a <span>named flow</span>
stearns@5445 372 is broken up between regions
stearns@5445 373 according to the regions flow breaking rules.</p>
vhardy@3267 374
stearns@6109 375 <p>A <span>named flow</span> is created when
stearns@6109 376 at least one element is moved
stearns@6109 377 into the flow with the given identifier
stearns@6109 378 or when at least one CSS Region
stearns@6109 379 requests content from that flow.</p>
alexmog@2565 380
vhardy@3272 381 <h3 id="regions-flow-breaking-rules">Regions flow breaking rules</h3>
alexmog@2565 382
stearns@5445 383 <p>Breaking a <span>named flow</span> across a region chain
stearns@5445 384 is similar to breaking a document's content across pages
stearns@5445 385 (see [[CSS3PAGE]])
stearns@5445 386 or a multi-column element's content across column boxes
stearns@5445 387 (see [[CSS3COL]]).
stearns@5445 388 One difference is that page boxes are generated
stearns@5445 389 based on the available content
stearns@5445 390 whereas a region chain is a set of recipient boxes
stearns@5445 391 for the <span>named flow</span> content
stearns@5445 392 whose dynamic generation is not in the scope
stearns@5445 393 of this specification.</p>
alexmog@2565 394
stearns@5445 395 <p>Each CSS Region in turn
stearns@5445 396 consumes content from its associated <span>named flow</span>.
stearns@5445 397 The <span>named flow</span> content is positioned
stearns@5445 398 in the <dfn title="current-region">current region</dfn>
stearns@5445 399 until a natural or forced region break occurs,
stearns@5445 400 at which point the next region
stearns@5445 401 in the <span title="region-chain">region chain</span>
stearns@5445 402 becomes the <span title="current-region">current region</span>.
stearns@5445 403 If there are no more <span>region</span>s
stearns@5445 404 in the region chain
stearns@5445 405 and there is still content in the flow,
stearns@5445 406 the positioning of the remaining content
stearns@6796 407 is controlled by the 'region-fragment' property
stearns@5445 408 on the last <span>region</span> in the chain.</p>
vhardy@5373 409
stearns@5445 410 <p>The CSS regions module follows
stearns@5445 411 the fragmentation rules defined
stearns@5445 412 in the CSS Fragmentation Module Level 3
stearns@5445 413 (see [[!CSS3-BREAK]]).</p>
vhardy@2945 414
alexmog@2565 415
vhardy@3272 416 <h2 id="properties-and-rules">Properties and rules</h2>
alexmog@2565 417
vhardy@3262 418 <h3 id="the-flow-into-property">The 'flow-into' property</h3>
alexmog@2565 419
stearns@5576 420 <div class="issue-marker wrapper">
stearns@5576 421 <div class="issue-marker" data-bug_id="16527" data-bug_status="ASSIGNED">
vhardy@5750 422 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16527">Issue-16527</a>
stearns@5576 423 <div class="issue-details">
stearns@5576 424 <p class="short-desc">[Shadow]: getFlowByName and shadow DOM</p>
stearns@5576 425 </div>
stearns@5576 426 </div>
stearns@5576 427 </div>
vhardy@4398 428
stearns@5453 429 <p>The ‘flow-into’ property can place an element
stearns@5453 430 into a <span>named flow</span>.
stearns@5453 431 Elements that belong to the same flow
stearns@5453 432 are laid out in the region chain
stearns@5453 433 associated with that flow.</p>
alexmog@2565 434
vhardy@2779 435 <table class="propdef" summary="flow property definition">
vhardy@2779 436 <tr>
vhardy@2779 437 <th>Name:</th>
alexmog@2565 438
vhardy@3272 439 <td><dfn id="flow-into">flow-into</dfn></td>
vhardy@2779 440 </tr>
alexmog@2565 441
vhardy@2779 442 <tr>
vhardy@2779 443 <th>Value:</th>
alexmog@2565 444
vhardy@3660 445 <td>&lt;ident&gt; | none | inherit</td>
vhardy@2779 446 </tr>
alexmog@2565 447
vhardy@2779 448 <tr>
vhardy@2779 449 <th>Initial:</th>
alexmog@2565 450
vhardy@3660 451 <td>none</td>
vhardy@2779 452 </tr>
alexmog@2565 453
vhardy@2779 454 <tr>
vhardy@2779 455 <th>Applies to:</th>
alexmog@2565 456
vhardy@5267 457 <td>any element. <p>The 'flow-into' property does not apply to any <a href="http://www.w3.org/TR/selectors/#pseudo-elements">pseudo-element</a> such as
vhardy@5267 458 <code class="css">::first-line</code>, <code class="css">::first-letter</code>,
vhardy@5267 459 <code class="css">::before</code> or <code class="css">::after</code>.</p></td>
vhardy@2779 460 </tr>
alexmog@2565 461
vhardy@2779 462 <tr>
vhardy@2779 463 <th>Inherited:</th>
alexmog@2565 464
vhardy@2779 465 <td>no</td>
vhardy@2779 466 </tr>
alexmog@2565 467
vhardy@2779 468 <tr>
vhardy@2779 469 <th>Percentages:</th>
alexmog@2565 470
vhardy@2779 471 <td>N/A</td>
vhardy@2779 472 </tr>
alexmog@2565 473
vhardy@2779 474 <tr>
vhardy@2779 475 <th>Media:</th>
alexmog@2565 476
vhardy@2779 477 <td>visual</td>
vhardy@2779 478 </tr>
alexmog@2565 479
vhardy@2779 480 <tr>
vhardy@2779 481 <th>Computed&nbsp;value:</th>
alexmog@2565 482
vhardy@2779 483 <td>as specified</td>
vhardy@2779 484 </tr>
vhardy@2779 485 </table>
alexmog@2565 486
vhardy@2779 487 <dl>
vhardy@3660 488 <dt>none</dt>
alexmog@2565 489
vhardy@5352 490 <dd>The element is not moved to a <span>named flow</span> and normal CSS processing takes place.</dd>
alexmog@2565 491
vhardy@3073 492 <dt><a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></dt>
alexmog@2565 493
stearns@5453 494 <dd>The element is taken out
stearns@5453 495 of its parent's flow
stearns@5453 496 and placed into the flow
stearns@6840 497 with the name '<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>'.
stearns@5453 498 The element is said to have
stearns@5453 499 a <dfn id="specified-flow">specified flow</dfn>.
stearns@5453 500 The values 'none', 'inherit', 'default', 'auto' and 'initial'
stearns@5453 501 are invalid flow names.</dd>
vhardy@2779 502 </dl>
alexmog@2565 503
stearns@5453 504 <p>A <span>named flow</span> needs to be associated
stearns@5453 505 with a region chain
stearns@5453 506 (one or more CSS regions)
stearns@5453 507 for its elements to be visually formatted.
stearns@5453 508 If no region chain is associated
stearns@5453 509 with a given <span>named flow</span>,
stearns@5453 510 the elements in the <span>named flow</span>
stearns@5453 511 are not rendered:
stearns@5453 512 they do not generate boxes
stearns@5453 513 and are not displayed.</p>
alexmog@2565 514
stearns@5453 515 <p>The children of an element
stearns@5453 516 with a specified flow
stearns@5453 517 may themselves have a specified flow.</p>
alexmog@2565 518
stearns@5453 519 <p>If an element has the same specified flow
stearns@5453 520 as one of its ancestors,
stearns@5453 521 it becomes a sibling of its ancestor
stearns@5453 522 for the purpose of layout
stearns@5453 523 in the region chain
stearns@5453 524 laying out content
stearns@5453 525 from that flow.</p>
alexmog@2565 526
stearns@5453 527 <p>The 'flow-into' property does not affect
stearns@5453 528 the CSS cascade and inheritance
stearns@5453 529 for the elements on which it is specified.
stearns@5453 530 The 'flow-into' property affects
stearns@5453 531 the visual formatting of elements
stearns@5453 532 placed into a <span>named flow</span>
stearns@5453 533 and of the region chain laying out content
stearns@5453 534 from a <span>named flow</span>.</p>
vhardy@3301 535
stearns@5574 536 <p>The edges of the first CSS region in a region chain
stearns@5453 537 associated with a <span>named flow</span>
stearns@5453 538 establish the rectangle that is the
stearns@5453 539 <a href="http://www.w3.org/TR/CSS2/visudet.html#containing-block-details">containing block</a>
stearns@5453 540 used for absolutely positioned elements
stearns@5453 541 in the <span>named flow</span>
stearns@5453 542 which do not have an ancestor
stearns@5453 543 with a 'position' of 'absolute', 'relative' or 'fixed'
stearns@5453 544 (see [[!CSS21]]).
stearns@5574 545 That first CSS region rectangle is used
stearns@5453 546 as the containing block
stearns@6079 547 instead of the initial containing block.
stearns@6079 548 This does not affect
stearns@6079 549 fixed position elements
stearns@6079 550 in the <span>named flow</span> -
stearns@6079 551 they are still positioned relative
stearns@6079 552 to the viewport or page area even if
stearns@6079 553 they have been redirected
stearns@6079 554 to a named flow.</p>
vhardy@3301 555
stearns@5453 556 <p>The first region defines the
stearns@5453 557 <a href="http://www.w3.org/TR/css3-writing-modes/#writing-mode">writing mode</a>
stearns@5453 558 for the entire flow.
stearns@5453 559 The writing mode
stearns@5453 560 on subsequent regions is ignored.</p>
vhardy@3660 561
stearns@5453 562 <p>Elements in a <span>named flow</span>
stearns@6812 563 are sequenced in document order.
stearns@6812 564 The structure of a named flow
stearns@6812 565 is equivalent to the result
stearns@6812 566 of moving the elements to a common parent.
stearns@6812 567 The visual formatting model
stearns@6812 568 uses the relationships between elements
stearns@6812 569 in the named flow structure as input,
stearns@6812 570 rather than the elements&rsquo; original positions.
stearns@6812 571 </p>
vhardy@3301 572
vhardy@4314 573 <div class="note"><span class="note-prefix">Note </span>
stearns@5453 574 <p>The 'flow-into' property moves an element into the flow
stearns@5453 575 and the interplay with selectors should be considered carefully.</p>
vhardy@3301 576 <p>For example, </p>
vhardy@3272 577 <pre>table {flow-into: table-content}</pre>
stearns@5453 578 <p>will move all tables in the 'table-content'
stearns@5453 579 <span>named flow</span>.
stearns@5453 580 However, the</p>
vhardy@4415 581 <pre>table &gt; * {flow-into: table-content} ...</pre>
stearns@5453 582 <p>selector will move all immediate children
stearns@5453 583 of all table elements
stearns@5453 584 into the ‘table-content’ <span>named flow</span>
stearns@5453 585 (which may be useful as it will usually result,
stearns@5453 586 if the immediate children are rows,
stearns@5453 587 in merging rows of multiple tables),
stearns@5453 588 but the</p>
vhardy@3272 589 <pre>table * {flow-into: table-content}</pre>
stearns@5453 590 <p>selector will move all descendants
stearns@5453 591 of table elements into the ‘table-content’ <span>named flow</span>,
stearns@5453 592 transforming the element tree
stearns@5453 593 into a flat list in order of opening tags
stearns@5453 594 (which is probably not intentional).
stearns@5453 595 This will make all the descendants
stearns@5453 596 of table elements siblings
stearns@5453 597 in the <span>named flow</span>.
stearns@5453 598 Having the descendants become siblings
stearns@5453 599 in the <span>named flow</span>
stearns@5453 600 results in a different processing
stearns@5453 601 (see <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#anonymous-boxes">CSS 2.1's anonymous table objects</a>).
stearns@5453 602 This note illustrates how authors must exercise caution
stearns@5453 603 when choosing a particular selector
stearns@5453 604 for setting the 'flow-into' property
stearns@5453 605 to avoid unintended results.</p>
vhardy@2945 606 </div>
vhardy@3272 607
stearns@6811 608 <div class="note"><span class="note-prefix">Note </span>
stearns@6811 609 <p>Another consequence of moving elements
stearns@6811 610 into named flows is that surrounding whitespace
stearns@6811 611 is not moved into the named flow.
stearns@6811 612 If you have code like this:
stearns@6811 613 <pre>span {flow-into: span-content}
stearns@6811 614 &lt;span&gt;one&lt;/span&gt;
stearns@6811 615 &lt;span&gt;two&lt;/span&gt;
stearns@6811 616 </pre>
stearns@6811 617 Then the 'span-content' named flow contents
stearns@6811 618 will contain this:
stearns@6811 619 <pre>&lt;span&gt;one&lt;/span&gt;&lt;span&gt;two&lt;/span&gt;
stearns@6811 620 </pre>
stearns@6811 621 Which will change the display
stearns@6811 622 from "one two" to "onetwo".
stearns@6811 623 If whitespace is significant,
stearns@6811 624 then moving the parent
stearns@6811 625 that contains the whitespace
stearns@6811 626 to the named flow
stearns@6811 627 is required.
stearns@6811 628 </div>
vhardy@3302 629
stearns@6847 630 <div class="note"><span class="note-prefix">Note </span>
stearns@6847 631 <p>A future CSS Regions module level
stearns@6847 632 will define a mechanism
stearns@6847 633 for creating a named flow
stearns@6847 634 from an external resource.</p>
stearns@6847 635 </div>
vhardy@3302 636
vhardy@3547 637 <h3 id="the-flow-from-property">The 'flow-from' property</h3>
alexmog@2565 638
stearns@5579 639 <p>The 'flow-from' property makes
stearns@5579 640 a block container a region
stearns@5579 641 and associates it with
stearns@5579 642 a <span>named flow</span>.</p>
stearns@5579 643
vhardy@3547 644 <table class="propdef" summary="flow-from property definition">
vhardy@2779 645 <tr>
vhardy@2779 646 <th>Name:</th>
alexmog@2565 647
vhardy@3547 648 <td><dfn id="flow-from">flow-from</dfn></td>
vhardy@2779 649 </tr>
alexmog@2565 650
vhardy@2779 651 <tr>
vhardy@2779 652 <th>Value:</th>
alexmog@2565 653
vhardy@3660 654 <td>&lt;ident&gt; | none | inherit</td>
vhardy@2779 655 </tr>
alexmog@2565 656
vhardy@2779 657 <tr>
vhardy@2779 658 <th>Initial:</th>
alexmog@2565 659
vhardy@3547 660 <td>none</td>
vhardy@2779 661 </tr>
alexmog@2565 662
vhardy@2779 663 <tr>
vhardy@2779 664 <th>Applies to:</th>
alexmog@2565 665
stearns@5575 666 <td>Non-replaced <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block containers</a>.
stearns@6525 667 <br/>
vhardy@3547 668 This might be expanded in future versions of the specification
vhardy@3547 669 to allow other types of containers to receive flow content.</td>
vhardy@2779 670 </tr>
alexmog@2565 671
vhardy@2779 672 <tr>
vhardy@2779 673 <th>Inherited:</th>
vhardy@2779 674
vhardy@2779 675 <td>no</td>
vhardy@2779 676 </tr>
vhardy@2779 677
vhardy@2779 678 <tr>
vhardy@2779 679 <th>Percentages:</th>
vhardy@2779 680
vhardy@2779 681 <td>N/A</td>
vhardy@2779 682 </tr>
vhardy@2779 683
vhardy@2779 684 <tr>
vhardy@2779 685 <th>Media:</th>
vhardy@2779 686
vhardy@2779 687 <td>visual</td>
vhardy@2779 688 </tr>
vhardy@2779 689
vhardy@2779 690 <tr>
vhardy@2779 691 <th>Computed&nbsp;value:</th>
vhardy@2779 692
vhardy@2779 693 <td>as specified</td>
vhardy@2779 694 </tr>
vhardy@2779 695 </table>
vhardy@2779 696
vhardy@2779 697 <dl>
vhardy@3547 698 <dt><strong>none</strong></dt>
vhardy@2779 699
stearns@5575 700 <dd>The block container is not a <span title="region">region</span>.</dd>
vhardy@2779 701
stearns@6840 702 <dt><strong><a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></strong></dt>
vhardy@2779 703
vhardy@3547 704 <dd>
stearns@5453 705 If the 'content' property computes
stearns@6810 706 to something else than 'normal'
stearns@6810 707 (or 'none' for a pseudo-element),
stearns@5575 708 the block container does not become a <span>CSS Region</span>.
stearns@6810 709 If the 'content' property computes to 'normal'
stearns@6810 710 (or 'none' for a pseudo-element),
stearns@5575 711 then the block container becomes a <span>CSS Region</span>
stearns@5453 712 and is ordered in a <span>region chain</span>
stearns@5453 713 according to its document order.
stearns@5453 714 The content from the flow
stearns@5453 715 with the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
stearns@5453 716 name will be <a href="#region-flow-break">broken
stearns@5453 717 into fragments</a> and visually formatted in the
stearns@5453 718 <a href="http://www.w3.org/TR/CSS21/visuren.html#principal-box">principal boxes</a>
stearns@5453 719 of the <span>regions</span>
stearns@5453 720 in the <span>region chain</span>.
stearns@5453 721 <br/>
stearns@6840 722 If there is no flow with name
stearns@6840 723 <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>,
stearns@5575 724 then the block container does not
stearns@5453 725 format any content visually.
vhardy@3262 726 </dd>
vhardy@2779 727 </dl>
vhardy@2779 728
stearns@5453 729 <p>A <span>CSS Region</span>'s document children
stearns@5453 730 are not visually formatted
stearns@5453 731 unless they are directed
stearns@5453 732 to a <span>named flow</span>
stearns@5453 733 with an associated <span>region chain</span>.</p>
vhardy@3267 734
stearns@5453 735 <div class="note"><span class="note-prefix">Note </span>
stearns@5575 736 <p>An block container becomes a <span>CSS Region</span>
stearns@5453 737 when its 'flow-from' property is set
stearns@6840 738 to a valid <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> value,
stearns@5453 739 even if there is no content contributing
stearns@5453 740 to the referenced flow.
vhardy@3728 741 For example:</p>
bert@3938 742 <pre>
vhardy@3728 743 &lt;style&gt;
vhardy@3728 744 .article{
vhardy@3728 745 flow-into: thread;
vhardy@3728 746 }
vhardy@3728 747 .region{
vhardy@3728 748 flow-from: thread;
vhardy@3728 749 }
vhardy@3728 750 &lt;/style&gt;
vhardy@3728 751 &lt;html&gt;
vhardy@3728 752 &lt;body&gt;
vhardy@3728 753 &lt;div class=region&gt;div content&lt;/div&gt;
vhardy@3728 754 &lt;/body&gt;
vhardy@3728 755 &lt;/html&gt;
bert@3938 756 </pre>
vhardy@3728 757
stearns@6041 758 There is no element matching
stearns@6041 759 the <code>.article</code> selector
stearns@5453 760 and therefore no content
stearns@5453 761 in the <code>thread</code> flow.
stearns@6041 762 However, the block container matching
stearns@6041 763 the <code>.region</code> selector
stearns@6041 764 is still associated with
stearns@6041 765 that empty <span>named flow</span>
stearns@5453 766 and, consequently,
stearns@5453 767 its children are not formatted visually.
stearns@6041 768 </div>
stearns@6041 769
stearns@6041 770 <div class="note"><span class="note-prefix">Note </span>
stearns@6041 771 <p>At the time of this note-writing,
stearns@6041 772 the <code>display</code> values that always result
stearns@6041 773 in a non-replaced block container include
stearns@6041 774 <code>block</code>,
stearns@6041 775 <code>inline-block</code>,
stearns@6041 776 <code>table-cell</code>,
stearns@6041 777 <code>table-caption</code>,
stearns@6041 778 and <code>list-item</code>.
stearns@6041 779 All of these display values
stearns@6041 780 work as regions with
stearns@6041 781 non-replaced elements.
stearns@6041 782 </div>
stearns@6041 783
vhardy@4412 784 <div class="issue-marker wrapper">
vhardy@4412 785 <div class="issue-marker" data-bug_id="15824" data-bug_status="NEW">
vhardy@4400 786
vhardy@4400 787 <a href=
vhardy@5750 788 "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Issue-15824</a>
vhardy@4400 789
vhardy@4400 790 <div class="issue-details">
vhardy@4400 791 <p class="short-desc">Should regions not create a new stacking context?</p>
vhardy@4412 792 </div>
vhardy@4412 793 </div>
vhardy@4412 794 <div class="issue-marker" data-bug_id="15827" data-bug_status="NEW">
vhardy@4400 795
vhardy@4400 796 <a href=
vhardy@5750 797 "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15824">Issue-15827</a>
vhardy@4400 798
vhardy@4400 799 <div class="issue-details">
vhardy@4400 800 <p class="short-desc">Specify behavior of stacking contexts that are split between regions</p>
vhardy@4400 801 </div>
vhardy@4412 802 </div>
stearns@5469 803 </div>
vhardy@2779 804
stearns@5453 805 <p><span title="region">CSS Regions</span> create a new <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">stacking context</a>. <span title="region">CSS Regions</span> establish a new <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting">block formatting Context</a>.</p>
vhardy@3301 806
vhardy@4314 807 <div class="note"><span class="note-prefix">Note </span>
stearns@5453 808 <p>With <span>region chains</span>,
stearns@5453 809 an element may be split across multiple boxes
stearns@5453 810 and these boxes may overlap
stearns@5453 811 (for example if they are absolutely positioned).
stearns@5453 812 So fragments of the same element
stearns@5453 813 can overlap each other.
stearns@5453 814 Since each element has a single z-index,
stearns@5453 815 it would be required to find another mechanism
stearns@5453 816 to decide in which order
stearns@5453 817 the fragments are rendered.
stearns@5453 818 Since each <span>CSS Region</span> creates
stearns@5453 819 a new stacking context,
stearns@5453 820 it is clear that each fragment is rendered separately
stearns@5453 821 and their rendering order follows
stearns@5453 822 the regular CSS rendering model.</p>
vhardy@3301 823 </div>
vhardy@3301 824
stearns@5453 825 <p>Floats or other exclusions
stearns@5453 826 (see [[CSS3-EXCLUSIONS]])
stearns@5453 827 potentially impact the content
stearns@5453 828 laid out in region chains,
stearns@5453 829 just as for non-regions.</p>
vhardy@3301 830
stearns@5453 831 <p>See the
stearns@5453 832 <a href="#regions-visual-formatting-details">regions visual formatting details</a>
stearns@5453 833 section for a description of how
stearns@5453 834 'width' and 'height' values are resolved
stearns@5453 835 for <span>CSS Region</span> boxes.</p>
stearns@5469 836
stearns@6840 837 <h4 id="circular-dependencies">Cycle Detection</h4>
stearns@6840 838
stearns@6840 839 <p><span>Named flows</span> containing elements
stearns@6840 840 where the value of 'flow-from' computes to an
stearns@6840 841 <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
stearns@6840 842 can produce nonsensical circular relationships,
stearns@6840 843 such as a <span>named flow</span> containing <span>CSS Regions</span>
stearns@6840 844 in its own <span>region chain</span>.
stearns@6840 845 These relationships can be easily
stearns@6840 846 and reliably detected and resolved, however,
stearns@6840 847 by keeping track of a dependency graph
stearns@6840 848 and using common cycle-detection algorithms.</p>
stearns@6840 849
stearns@6840 850 <p>The dependency graph consists of edges such that:</p>
stearns@6840 851
stearns@6840 852 <ul>
stearns@6840 853 <li>Every <span>named flow</span> depends on its elements
stearns@6840 854 where the value of 'flow-from' computes to an
stearns@6840 855 <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
stearns@6840 856 .</li>
stearns@6840 857 <li>Every element in a <span>named flow</span>
stearns@6840 858 where the value of 'flow-from' computes to an
stearns@6840 859 <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
stearns@6840 860 depends on the <span>named flow</span> with the
stearns@6840 861 <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
stearns@6840 862 name.</li>
stearns@6840 863 </ul>
stearns@6840 864
stearns@6840 865 <p>If the graph contains a cycle,
stearns@6840 866 any elements where the value of 'flow-from'
stearns@6840 867 computes to an
stearns@6840 868 <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
stearns@6840 869 participating in the cycle
stearns@6840 870 do not become <span>CSS Regions</span>.</p>
stearns@6840 871
stearns@6841 872 <h4 id="fragmenting-regions">Nested fragmentation contexts</h4>
stearns@6841 873
stearns@6841 874 <p>A <span>CSS Region</span> that contains
stearns@6841 875 a fragment of a <span>named flow</span>
stearns@6841 876 can itself be fragmented if it is nested
stearns@6841 877 within a fragmentation context [[!CSS3-BREAK]],
stearns@6841 878 such as when a layout
stearns@6841 879 using a region chain is printed.
stearns@6841 880 In these cases break opportunities
stearns@6841 881 in the named flow fragment
stearns@6841 882 contained by the <span>CSS Region</span>
stearns@6841 883 are determined using the standard
stearns@6841 884 <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>.
stearns@6841 885 In other words,
stearns@6841 886 each region box and its associated fragment
stearns@6841 887 should break as if it were a simple div
stearns@6841 888 containing the fragment contents.
stearns@6841 889 This can be controlled by using
stearns@6841 890 an avoid break value on the <span>CSS Region</span>,
stearns@6841 891 if that is desired.</p>
stearns@6841 892
vhardy@2945 893 <h3 id=
vhardy@3377 894 "region-flow-break">Region
vhardy@2945 895 flow break properties: 'break-before', 'break-after', 'break-inside'</h3>
vhardy@2779 896
vhardy@3547 897 <p>User agents laying out content in multiple regions must
vhardy@2819 898 determine where content breaks occur. The problem of breaking content into
vhardy@5353 899 fragments fitting in regions is similar to breaking content into pages or
vhardy@2779 900 columns.</p>
vhardy@2779 901
vhardy@2779 902 <p>Each break ends layout in the current region and causes remaining pieces
vhardy@5352 903 of content from the <span>named flow</span> to be visually formatted in the following
vhardy@4415 904 region in the region chain, if there is one.</p>
vhardy@2779 905
vhardy@2779 906 <p>The following extends the 'break-before', 'break-after' and
vhardy@2779 907 'break-inside' properties from the [[!CSS3COL]] specification to account
vhardy@2779 908 for regions. The additional values are described below.</p>
vhardy@2779 909
vhardy@2779 910 <table class="propdef" summary="break-before property definition">
vhardy@2779 911 <tr>
vhardy@2779 912 <td><em>Name:</em></td>
vhardy@2779 913
vhardy@2779 914 <td><dfn>break-before</dfn></td>
vhardy@2779 915 </tr>
vhardy@2779 916
vhardy@2779 917 <tr>
vhardy@2779 918 <td><em>Value:</em></td>
vhardy@2779 919
vhardy@2779 920 <td>auto | always | avoid | left | right | page | column | region |
vhardy@2779 921 avoid-page | avoid-column | avoid-region</td>
vhardy@2779 922 </tr>
vhardy@2779 923
vhardy@2779 924 <tr>
vhardy@2779 925 <td><em>Initial:</em></td>
vhardy@2779 926
vhardy@2779 927 <td>auto</td>
vhardy@2779 928 </tr>
vhardy@2779 929
vhardy@2779 930 <tr>
vhardy@2779 931 <td><em>Applies to:</em></td>
vhardy@2779 932
vhardy@2779 933 <td>block-level elements</td>
vhardy@2779 934 </tr>
vhardy@2779 935
vhardy@2779 936 <tr>
vhardy@2779 937 <td><em>Inherited:</em></td>
vhardy@2779 938
vhardy@2779 939 <td>no</td>
vhardy@2779 940 </tr>
vhardy@2779 941
vhardy@2779 942 <tr>
vhardy@2779 943 <td><em>Percentages:</em></td>
vhardy@2779 944
vhardy@2779 945 <td>N/A</td>
vhardy@2779 946 </tr>
vhardy@2779 947
vhardy@2779 948 <tr>
vhardy@2779 949 <td><em>Media:</em></td>
vhardy@2779 950
stearns@5453 951 <td>visual</td>
vhardy@2779 952 </tr>
vhardy@2779 953
vhardy@2779 954 <tr>
vhardy@2779 955 <td><em>Computed&nbsp;value:</em></td>
vhardy@2779 956
vhardy@2779 957 <td>specified value</td>
vhardy@2779 958 </tr>
vhardy@2779 959 </table>
vhardy@2779 960
vhardy@2779 961 <table class="propdef" summary="break-after property definition">
vhardy@2779 962 <tr>
vhardy@2779 963 <td><em>Name:</em></td>
vhardy@2779 964
vhardy@2779 965 <td><dfn>break-after</dfn></td>
vhardy@2779 966 </tr>
vhardy@2779 967
vhardy@2779 968 <tr>
vhardy@2779 969 <td><em>Value:</em></td>
vhardy@2779 970
vhardy@2779 971 <td>auto | always | avoid | left | right | page | column | region |
vhardy@2779 972 avoid-page | avoid-column | avoid-region</td>
vhardy@2779 973 </tr>
vhardy@2779 974
vhardy@2779 975 <tr>
vhardy@2779 976 <td><em>Initial:</em></td>
vhardy@2779 977
vhardy@2779 978 <td>auto</td>
vhardy@2779 979 </tr>
vhardy@2779 980
vhardy@2779 981 <tr>
vhardy@2779 982 <td><em>Applies to:</em></td>
vhardy@2779 983
vhardy@2779 984 <td>block-level elements</td>
vhardy@2779 985 </tr>
vhardy@2779 986
vhardy@2779 987 <tr>
vhardy@2779 988 <td><em>Inherited:</em></td>
vhardy@2779 989
vhardy@2779 990 <td>no</td>
vhardy@2779 991 </tr>
vhardy@2779 992
vhardy@2779 993 <tr>
vhardy@2779 994 <td><em>Percentages:</em></td>
vhardy@2779 995
vhardy@2779 996 <td>N/A</td>
vhardy@2779 997 </tr>
vhardy@2779 998
vhardy@2779 999 <tr>
vhardy@2779 1000 <td><em>Media:</em></td>
vhardy@2779 1001
stearns@5453 1002 <td>visual</td>
vhardy@2779 1003 </tr>
vhardy@2779 1004
vhardy@2779 1005 <tr>
vhardy@2779 1006 <td><em>Computed&nbsp;value:</em></td>
vhardy@2779 1007
vhardy@2779 1008 <td>specified value</td>
vhardy@2779 1009 </tr>
vhardy@2779 1010 </table>
vhardy@2779 1011
vhardy@2779 1012 <table class="propdef" summary="break-inside property definition">
vhardy@2779 1013 <tr>
vhardy@2779 1014 <td><em>Name:</em></td>
vhardy@2779 1015
vhardy@2779 1016 <td><dfn>break-inside</dfn></td>
vhardy@2779 1017 </tr>
vhardy@2779 1018
vhardy@2779 1019 <tr>
vhardy@2779 1020 <td><em>Value:</em></td>
vhardy@2779 1021
vhardy@2779 1022 <td>auto | avoid | avoid-page | avoid-column | avoid-region</td>
vhardy@2779 1023 </tr>
vhardy@2779 1024
vhardy@2779 1025 <tr>
vhardy@2779 1026 <td><em>Initial:</em></td>
vhardy@2779 1027
vhardy@2779 1028 <td>auto</td>
vhardy@2779 1029 </tr>
vhardy@2779 1030
vhardy@2779 1031 <tr>
vhardy@2779 1032 <td><em>Applies to:</em></td>
vhardy@2779 1033
vhardy@2779 1034 <td>block-level elements</td>
vhardy@2779 1035 </tr>
vhardy@2779 1036
vhardy@2779 1037 <tr>
vhardy@2779 1038 <td><em>Inherited:</em></td>
vhardy@2779 1039
vhardy@2779 1040 <td>no</td>
vhardy@2779 1041 </tr>
vhardy@2779 1042
vhardy@2779 1043 <tr>
vhardy@2779 1044 <td><em>Percentages:</em></td>
vhardy@2779 1045
vhardy@2779 1046 <td>N/A</td>
vhardy@2779 1047 </tr>
vhardy@2779 1048
vhardy@2779 1049 <tr>
vhardy@2779 1050 <td><em>Media:</em></td>
vhardy@2779 1051
stearns@5453 1052 <td>visual</td>
vhardy@2779 1053 </tr>
vhardy@2779 1054
vhardy@2779 1055 <tr>
vhardy@2779 1056 <td><em>Computed&nbsp;value:</em></td>
vhardy@2779 1057
vhardy@2779 1058 <td>specified value</td>
vhardy@2779 1059 </tr>
vhardy@2779 1060 </table>
vhardy@2779 1061
vhardy@2779 1062 <p>These properties describe page, column and region break behavior
vhardy@2779 1063 before/after/inside the generated box. These values are normatively defined
vhardy@2779 1064 in [[!CSS3COL]]:</p>
vhardy@2779 1065
vhardy@2779 1066 <p>This specification adds the following new values:</p>
vhardy@2779 1067
vhardy@2779 1068 <dl>
vhardy@2779 1069 <dt>region</dt>
vhardy@2779 1070
vhardy@2779 1071 <dd>Always force a region break before (after) the generated box.</dd>
vhardy@2779 1072
vhardy@2779 1073 <dt>avoid-region</dt>
vhardy@2779 1074
vhardy@2779 1075 <dd>Avoid a region break before (after, inside) the generated box.</dd>
vhardy@2779 1076 </dl>
vhardy@2779 1077
vhardy@4336 1078 <p>The behavior of region breaks with regards to regions is identical to the behavior
vhardy@4336 1079 of page breaks with regards to pages, as defined in the [[!CSS21]].</p>
vhardy@3267 1080
stearns@6796 1081 <h3 id="the-region-fragment-property">The region-fragment property</h3>
vhardy@2779 1082
vhardy@2945 1083 <table class="propdef" summary="break-after property definition">
vhardy@2945 1084 <tr>
vhardy@2945 1085 <td><em>Name:</em></td>
vhardy@2779 1086
stearns@6796 1087 <td><dfn>region-fragment</dfn></td>
vhardy@2945 1088 </tr>
vhardy@2945 1089
vhardy@2945 1090 <tr>
vhardy@2945 1091 <td><em>Value:</em></td>
vhardy@2945 1092
vhardy@2945 1093 <td>auto | break</td>
vhardy@2945 1094 </tr>
vhardy@2945 1095
vhardy@2945 1096 <tr>
vhardy@2945 1097 <td><em>Initial:</em></td>
vhardy@2945 1098
vhardy@2945 1099 <td>auto</td>
vhardy@2945 1100 </tr>
vhardy@2945 1101
vhardy@2945 1102 <tr>
vhardy@2945 1103 <td><em>Applies to:</em></td>
vhardy@2945 1104
stearns@5574 1105 <td><em title="region element">CSS Regions</em></td>
vhardy@2945 1106 </tr>
vhardy@2945 1107
vhardy@2945 1108 <tr>
vhardy@2945 1109 <td><em>Inherited:</em></td>
vhardy@2945 1110
vhardy@2945 1111 <td>no</td>
vhardy@2945 1112 </tr>
vhardy@2945 1113
vhardy@2945 1114 <tr>
vhardy@2945 1115 <td><em>Percentages:</em></td>
vhardy@2945 1116
vhardy@2945 1117 <td>N/A</td>
vhardy@2945 1118 </tr>
vhardy@2945 1119
vhardy@2945 1120 <tr>
vhardy@2945 1121 <td><em>Media:</em></td>
vhardy@2945 1122
stearns@5453 1123 <td>visual</td>
vhardy@2945 1124 </tr>
vhardy@2945 1125
vhardy@2945 1126 <tr>
vhardy@2945 1127 <td><em>Computed&nbsp;value:</em></td>
vhardy@2945 1128
vhardy@2945 1129 <td>specified value</td>
vhardy@2945 1130 </tr>
vhardy@2945 1131 </table>
vhardy@4404 1132
stearns@6796 1133 <p>The 'region-fragment' property controls the behavior of the <em id=
vhardy@2945 1134 "last-region">last region</em> associated with a <span>named
vhardy@2945 1135 flow</span>.</p>
vhardy@2945 1136
vhardy@2945 1137 <dl>
vhardy@2945 1138 <dt>auto</dt>
vhardy@2945 1139
stearns@5574 1140 <dd>Content flows as it would in a regular content box. If the
vhardy@2945 1141 content exceeds the container box, it is subject to the <a href=
vhardy@3073 1142 "http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a>
stearns@5574 1143 property's computed value on the CSS Region. Region breaks must be
vhardy@3138 1144 ignored on the last region.</dd>
vhardy@2945 1145
vhardy@2945 1146 <dt>break</dt>
vhardy@2945 1147
stearns@5574 1148 <dd><p>If the content fits within the <em>CSS Region</em>, then this
vhardy@2945 1149 property has no effect. If the content does not fit within the
stearns@5574 1150 <em>CSS Region</em>, the content breaks as if flow was going to
vhardy@3073 1151 continue in a subsequent region. See the <a href=
bert@3938 1152 "#regions-flow-breaking-rules">breaking rules</a> section. A forced region break takes precedence over
vhardy@3660 1153 a natural break point.</p>
vhardy@3660 1154
stearns@6796 1155 <p>Flow content that follows the last break in the last region is not rendered.</p>
vhardy@3660 1156
vhardy@3660 1157
vhardy@3660 1158 </dd>
vhardy@2945 1159 </dl>
vhardy@2945 1160
stearns@6796 1161 <p>The 'region-fragment' property does not influence
stearns@5423 1162 the size of the region it applies to.</p>
vhardy@3660 1163
stearns@5423 1164 <p>The following code sample illustrates
stearns@6796 1165 the usage of the 'region-fragment' property.</p>
vhardy@2779 1166
vhardy@2779 1167 <div class="example">
stearns@5423 1168 <pre>
alexmog@2565 1169 &lt;style&gt;
vhardy@5490 1170 article {
stearns@5423 1171 flow-into: "article";
vhardy@2779 1172 }
vhardy@2779 1173
vhardy@2945 1174 #region_1, #region_2 {
stearns@5423 1175 flow-from: article;
stearns@6796 1176 <strong>region-fragment: break;</strong> /* or auto */
stearns@5423 1177 <strong>overflow: visible;</strong> /* or hidden */
vhardy@2779 1178 }
vhardy@2779 1179
vhardy@2779 1180 &lt;/style&gt;
vhardy@2945 1181
vhardy@5490 1182 &lt;article&gt;...&lt;/article&gt;
vhardy@2945 1183
vhardy@2945 1184 &lt;div id="region_1"&gt;&lt;/div&gt;
vhardy@2945 1185 &lt;div id="region_2"&gt;&lt;/div&gt;
vhardy@2945 1186
stearns@5423 1187 </pre>
vhardy@2779 1188 </div>
vhardy@2779 1189
vhardy@2945 1190 <div class="figure">
vhardy@2945 1191 <table style="border: 1px solid gray;width: 100%;" summary=
stearns@6796 1192 "Different values for the region-fragment property - Illustration.">
vhardy@2945 1193 <tr>
vhardy@3262 1194 <td>''flow-into: "article"''</td>
vhardy@2945 1195
vhardy@2945 1196 <td><code class="html">region_1</code> and <code class=
vhardy@2945 1197 "html">region_2</code></td>
vhardy@2945 1198
stearns@6796 1199 <td>''region-fragment: auto''<br>
vhardy@2945 1200 ''overflow:visible''</td>
vhardy@2945 1201 </tr>
vhardy@2945 1202
vhardy@2945 1203 <tr>
vhardy@2945 1204 <td rowspan="3" style="vertical-align: top;"><img src=
vhardy@2945 1205 "images/region-overflow-flow.png" alt=
vhardy@2945 1206 "regions receiving the flow content"></td>
vhardy@2945 1207
vhardy@2945 1208 <td><img src="images/region-overflow-regions.png" alt=
vhardy@2945 1209 "result if region-overflow is set to 'break'"></td>
vhardy@2945 1210
vhardy@2945 1211 <td><img src="images/region-overflow-auto-overflow-visible.png"
vhardy@2945 1212 alt="regions receiving the flow content"></td>
vhardy@2945 1213 </tr>
vhardy@2945 1214
vhardy@2945 1215 <tr>
stearns@6796 1216 <td>''region-fragment: break''</td>
vhardy@2945 1217
stearns@6796 1218 <td>''region-fragment: auto''<br>
vhardy@2945 1219 ''overflow:hidden''</td>
vhardy@2945 1220 </tr>
vhardy@2945 1221
vhardy@2945 1222 <tr>
vhardy@2945 1223 <td><img src="images/region-overflow-break.png" alt=
vhardy@2945 1224 "result if region-overflow is set to 'break'"></td>
vhardy@2945 1225
vhardy@2945 1226 <td><img src="images/region-overflow-auto-overflow-hidden.png"
vhardy@2945 1227 alt="regions receiving the flow content"></td>
vhardy@2945 1228 </tr>
vhardy@2945 1229 </table>
vhardy@2945 1230
stearns@6796 1231 <p class="caption">Different values for the region-fragment
vhardy@2945 1232 property</p>
vhardy@2945 1233 </div>
vhardy@3377 1234
vhardy@4314 1235 <div class="note"><span class="note-prefix">Note </span>
vhardy@3377 1236 <p>The 'overflow' property is honored on a region: if region content overflows,
vhardy@3377 1237 such as the borders of elements on the
vhardy@3377 1238 last line, the 'overflow' property controls the visibility of the overflowing
vhardy@3377 1239 content. See the 'overflow' property definition
vhardy@3377 1240 ([[CSS21]]).</p>
vhardy@3377 1241 </div>
vhardy@2945 1242
vhardy@2945 1243 <h3 id="the-at-region-style-rule">The @region rule</h3>
vhardy@4412 1244
vhardy@2945 1245 <p>An '@region' rule contains style declarations specific to particular
vhardy@2945 1246 regions.</p>
vhardy@2945 1247
vhardy@3660 1248 <pre>
vhardy@3660 1249 @region &lt;selector&gt; {
vhardy@3660 1250 ... CSS styling rules ...
vhardy@3660 1251 }
vhardy@3660 1252 </pre>
vhardy@3660 1253
vhardy@2945 1254 <p>The '@region' rule consists of the keyword '@region' followed by a
vhardy@2945 1255 <a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a>
vhardy@4314 1256 and a block of style rules. The '@region' rule and the selector constitute
vhardy@5353 1257 the region's 'flow fragment' selector. The region's flow fragment selector
vhardy@4314 1258 specifies which range of elements in the flow are subject to the style rules in the
vhardy@4314 1259 following block: it applies to the range (see
vhardy@5094 1260 [[!DOM]]) from the region's flow that flows in the
vhardy@2945 1261 selected region(s).</p>
vhardy@2945 1262
vhardy@4412 1263 <div class="issue-marker" data-bug_id="15713" data-bug_status="NEW">
vhardy@4395 1264 <a href=
vhardy@5750 1265 "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Issue-15713</a>
vhardy@4395 1266
vhardy@4395 1267 <div class="issue-details">
vhardy@4395 1268 <p class="short-desc">Model for styling element fragments</p>
vhardy@4395 1269 </div>
vhardy@4395 1270 </div>
vhardy@4395 1271
vhardy@5353 1272 <p>Elements that are fully or partially in the 'flow fragment' may match any of the
vhardy@4338 1273 selectors found in the style rule. However, the style rules only apply to the
vhardy@4338 1274 portion of the element that falls into the corresponding region.</p>
vhardy@4338 1275
vhardy@4338 1276
vhardy@2945 1277
vhardy@3547 1278 <p>Only a limited list of properties can be set in a region style rule:</p>
stearns@5894 1279
vhardy@3547 1280 <ol>
bert@3938 1281 <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li>
bert@3938 1282 <li><a href="http://www.w3.org/TR/CSS2/colors.html">color property</a></li>
stearns@5453 1283 <li><a href="http://www.w3.org/TR/css3-color/#transparency">opacity property</a></li>
bert@3938 1284 <li><a href="http://www.w3.org/TR/css3-background/#backgrounds">background property</a></li>
bert@3938 1285 <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-word-spacing">'word-spacing'</a></li>
bert@3938 1286 <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing">'letter-spacing'</a></li>
bert@3938 1287 <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration">'text-decoration'</a></li>
bert@3938 1288 <li><a href="http://www.w3.org/TR/CSS2/text.html#propdef-text-transform">'text-transform'</a></li>
bert@3938 1289 <li><a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a></li>
stearns@6833 1290 <li><a href="http://www.w3.org/TR/css3-text/#justification">alignment and justification properties</a></li>
bert@3938 1291 <li><a href="http://www.w3.org/TR/css3-background/#borders">border properties</a></li>
bert@3938 1292 <li><a href="http://www.w3.org/TR/css3-background/#corners">rounded corner properties</a></li>
bert@3938 1293 <li><a href="http://www.w3.org/TR/css3-background/#border-images">border images properties</a></li>
bert@3938 1294 <li><a href="http://www.w3.org/TR/CSS2/box.html#margin-properties">margin properties</a></li>
bert@3938 1295 <li><a href="http://www.w3.org/TR/CSS2/box.html#padding-properties">padding properties</a></li>
bert@3938 1296 <li><a href="http://www.w3.org/TR/css3-text/#text-shadow">'text-shadow' property</a></li>
bert@3938 1297 <li><a href="http://www.w3.org/TR/css3-background/#the-box-shadow">'box-shadow' property</a></li>
bert@3938 1298 <li><a href="http://www.w3.org/TR/css3-background/#the-box-decoration-break">'box-decoration-break' property</a></li>
vhardy@3547 1299 <li><a href="http://www.w3.org/TR/CSS2/visudet.html#the-width-property">'width' property</a></li>
vhardy@3547 1300 </ol>
vhardy@3547 1301
vhardy@3547 1302
vhardy@2945 1303
vhardy@2945 1304 <div class="example" id="region-style-example">
vhardy@5352 1305 <p>In the following example, the <span>named flow</span> 'article_flow' flows
vhardy@2945 1306 through 'region_1' and 'region_2'.</p>
vhardy@2945 1307 <pre>
vhardy@2945 1308 &lt;style&gt;
vhardy@2945 1309 #div_1 {
vhardy@3262 1310 <strong>flow-into: article_flow;</strong>
vhardy@2945 1311 }
vhardy@2945 1312
stearns@5710 1313 #region_1, #region_2 {
vhardy@3547 1314 <strong>flow-from: article_flow;</strong>
vhardy@2945 1315 }
vhardy@2945 1316
vhardy@4119 1317 /* region style "RSA" */
stearns@5710 1318 <strong>@region #region_1, #region_2</strong> {
vhardy@2945 1319 div {...}
vhardy@2945 1320 p {...}
vhardy@2945 1321 }
vhardy@2945 1322
vhardy@4119 1323 /* region style "RSB" */
stearns@5710 1324 <strong>@region #region_1</strong> {
vhardy@2945 1325 p {...}
vhardy@2945 1326 }
vhardy@2945 1327
vhardy@2945 1328 &lt;/style&gt;
vhardy@2945 1329
vhardy@2945 1330 &lt;div id="div_1"&gt;
vhardy@2945 1331 &lt;p id="p_1"&gt;...&lt;/p&gt;
vhardy@2945 1332 &lt;p id="p_2"&gt;...&lt;/p&gt;
vhardy@2945 1333 &lt;/div&gt;
vhardy@2945 1334
stearns@5710 1335 &lt;div id="region_1"&gt;&lt;/div&gt;
stearns@5710 1336 &lt;div id="region_2"&gt;&lt;/div&gt;
vhardy@2945 1337
vhardy@2945 1338 </pre>
vhardy@2945 1339
vhardy@2945 1340 <div id="region_styling_illustration">
vhardy@2945 1341 <img id="region_styling_img_2" src="images/region-styling-2.png"
vhardy@2945 1342 alt=
vhardy@2945 1343 "Illustration showing how a named flow content fits into regions to illustrate the @region styling."
vhardy@2945 1344 name="region_styling_img_2">
vhardy@2945 1345
vhardy@2945 1346 <ul class="swatch-list">
vhardy@2945 1347 <li><span class="swatch" style=
vhardy@2945 1348 "background:#1C75BC">&nbsp;</span>div div_1</li>
vhardy@2945 1349
vhardy@2945 1350 <li><span class="swatch" style=
vhardy@2945 1351 "background:crimson">&nbsp;</span>paragraph p_1</li>
vhardy@2945 1352
vhardy@2945 1353 <li><span class="swatch" style=
vhardy@2945 1354 "background:white">&nbsp;</span>paragraph p_2</li>
vhardy@2945 1355
vhardy@2945 1356 <li><span class="swatch" style=
vhardy@2945 1357 "background:#E6E7E8">&nbsp;</span>range of flow that fits into
vhardy@2945 1358 region_1</li>
vhardy@2945 1359
vhardy@2945 1360 <li><span class="swatch" style=
vhardy@2945 1361 "background:#BCBEC0">&nbsp;</span>range of flow that fits into
vhardy@2945 1362 region_2</li>
vhardy@2945 1363 </ul>
vhardy@2945 1364 </div>
vhardy@2945 1365
vhardy@3547 1366 <p>The region style ''RSA'' applies to flow content that is laid out in either
vhardy@2945 1367 'region_1' or 'region_2'.</p>
vhardy@2945 1368
vhardy@3547 1369 <p>The first rule set ''div {...}'' applies to all <code class=
vhardy@3547 1370 "html">&lt;div&gt;</code> elements that fit partially or fully into 'region_1' or
vhardy@3547 1371 'region_2'. <code class="html">div_1</code> is split between 'region_1' and
vhardy@3547 1372 'region_2' and gets the style from this style rule.</p>
vhardy@2945 1373
vhardy@3547 1374 <p>The second rule set ''p {...}'' applies to all <code class=
vhardy@3547 1375 "html">&lt;p&gt;</code> elements that fit into 'region_1' or
vhardy@3547 1376 'region_2'. In our example, both <code class="html">p_1</code>
vhardy@3547 1377 and <code class="html">p_2</code> are selected.</p>
vhardy@2945 1378
vhardy@2945 1379 <p>The region style ''RSB'' applies to flow content that fits in
vhardy@2945 1380 'region_1'.</p>
vhardy@2945 1381
vhardy@2945 1382 <p>The first rule set ''p {...}'' matches <code class="html">p_1</code>
vhardy@3547 1383 and <code class="html">p_2</code>
vhardy@5353 1384 because these paragraphs flow into 'region_1'. Only the fragment of
vhardy@3547 1385 <code class="html">p_2</code> that flows into <code class="html">region_1</code>
vhardy@3547 1386 is styled with this rule.</p>
vhardy@2945 1387 </div>
vhardy@2945 1388
vhardy@2779 1389
vhardy@2779 1390
vhardy@4412 1391 <div class="issue-marker" data-bug_id="15734" data-bug_status="NEW">
vhardy@4395 1392 <a href=
vhardy@5750 1393 "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Issue-15734</a>
vhardy@4395 1394
vhardy@4395 1395 <div class="issue-details">
vhardy@4395 1396 <p class="short-desc">@region and specificity</p>
vhardy@4395 1397 </div>
vhardy@4395 1398 </div>
vhardy@4395 1399
vhardy@2945 1400 <p>The specificity of the selectors in a '@region' rule is calculated as
vhardy@2945 1401 <a href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in
vhardy@3073 1402 the CSS Selectors module (see [[SELECT]]). In other words, the '@region'
vhardy@2945 1403 rule adds an extra condition to the selector's matching, but does not
vhardy@2945 1404 change the selector's specificity. This is the same behavior as selectors
vhardy@2945 1405 appearing in '@media' rules declaration blocks (see [[MEDIAQ]]), where the
vhardy@2945 1406 rule does not influence the selectors' specificity.</p>
vhardy@2779 1407
vhardy@2779 1408 <p>Consequently, selectors that match a given element (as describe above),
bert@3938 1409 participate in the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS Cascading
vhardy@3073 1410 order</a> as defined in [[!CSS21]].</p>
vhardy@3660 1411
vhardy@4314 1412 <div>
vhardy@4314 1413 Region styling does not apply to nested regions. For example, if a region
vhardy@3660 1414 'A' receives content from a flow that contains region 'B', the content that
vhardy@3660 1415 flows into 'B' does not receive the region styling specified for region 'A'.
vhardy@3660 1416 </div>
vhardy@5131 1417
vhardy@5131 1418 <h2 id="multi-column-regions">Multi-column regions</h2>
vhardy@5131 1419
stearns@5579 1420 <p>A
stearns@5469 1421 <a href="http://dev.w3.org/csswg/css3-multicol/#multi-column-element">multi-column</a>
stearns@5579 1422 [[CSS3COL]]
stearns@5579 1423 element can have
stearns@5579 1424 an assigned <em><span>named flow</span></em>.
stearns@5579 1425 The element becomes part
stearns@5579 1426 of the region chain
stearns@5579 1427 for that named flow,
stearns@5579 1428 and flows its content fragments
stearns@5579 1429 through columns according to
stearns@5579 1430 the multi-column specification
stearns@5579 1431 [[!CSS3COL]].
stearns@5469 1432 In particular,
stearns@5579 1433 when computing the
stearns@5609 1434 <a href="#rfcb-flow-fragment-height-resolution">flow fragment height</a>
stearns@5469 1435 of a multi-column element
stearns@5469 1436 that is associated with a <em><span>named flow</span></em>,
stearns@5469 1437 the <a href="http://dev.w3.org/csswg/css3-multicol/#column-fill">'column-fill'</a>
stearns@5579 1438 [[!CSS3COL]]
stearns@5469 1439 property is honored
stearns@5469 1440 to balance the fragments of content
stearns@5579 1441 that would flow through
stearns@5579 1442 its columns.</p>
vhardy@2779 1443
vhardy@5131 1444 <div class="example">
vhardy@5131 1445 <p>The following example:</p>
vhardy@5131 1446 <pre>
vhardy@5131 1447 &lt;style&gt;
vhardy@5131 1448 #multi-col {
vhardy@5131 1449 column-count: 2;
vhardy@5131 1450 flow-from: article;
vhardy@5131 1451 height: 6em;
vhardy@5131 1452 column-gap: 1em;
vhardy@5131 1453 }
vhardy@5131 1454
vhardy@5131 1455 #remainder {
vhardy@5131 1456 flow-from: article;
vhardy@5131 1457 height: auto;
vhardy@5131 1458 }
vhardy@5131 1459 &lt;/style&gt;
vhardy@5131 1460
vhardy@5490 1461 &lt;article&gt;...&lt;/article&gt;
vhardy@5131 1462 &lt;div id="multicol"&gt&lt;/div&gt;
vhardy@5131 1463 &lt;div id="remainder"&gt;&lt;/div&gt;</pre>
stearns@5469 1464 <p>is equivalent in rendering to, for example:</p>
vhardy@5131 1465 <pre>
vhardy@5131 1466 &lt;style&gt;
vhardy@5131 1467 #flex {
vhardy@5131 1468 display: flex;
vhardy@5131 1469 flex-pack: justify;
stearns@5469 1470 height: 6em;
vhardy@5131 1471 }
vhardy@5131 1472 #flex > div {
vhardy@5131 1473 flow-from: article;
vhardy@5131 1474 width: calc(50% - 0.5em);
vhardy@5131 1475 }
vhardy@5131 1476
vhardy@5131 1477 #remainder {
vhardy@5131 1478 flow-from: article;
vhardy@5131 1479 height: auto;
vhardy@5131 1480 }
vhardy@5131 1481 &lt;/style&gt;
vhardy@5131 1482
vhardy@5490 1483 &lt;article&gt;...&lt;/article&gt;
vhardy@5131 1484 &lt;div id="flex"&gt;
vhardy@5131 1485 &lt;div /&gt;
vhardy@5131 1486 &lt;div /&gt;
vhardy@5131 1487 &lt;/div&gt;
vhardy@5131 1488 &lt;div id="remainder"&gt;&lt;/div&gt;</pre>
vhardy@5131 1489
vhardy@5131 1490
vhardy@5131 1491
vhardy@5131 1492 </div>
vhardy@5131 1493
stearns@5579 1494 <p>Overflow of multicol regions
stearns@5579 1495 is mostly handled
stearns@5579 1496 according to the same rules
stearns@5579 1497 as other CSS Regions.
stearns@5579 1498 If the remainder of the named flow
stearns@5579 1499 does not fit
stearns@5579 1500 in the multicol region,
stearns@5579 1501 then the rest
stearns@5579 1502 of the content flows into
stearns@5579 1503 the remaining region chain.
stearns@5579 1504 However,
stearns@5579 1505 if a multicol region
stearns@5579 1506 is the last region
stearns@6525 1507 in a <span>region chain</span>,
stearns@5579 1508 then the multicol region must follow the
stearns@5579 1509 <a href="http://dev.w3.org/csswg/css3-multicol/#overflow-columns">overflow column rules</a>
stearns@5579 1510 [[!CSS3COL]].</p>
vhardy@5131 1511
vhardy@3272 1512 <h2 id="pseudo_elements">Pseudo-elements</h2>
vhardy@3558 1513
vhardy@4412 1514 <div class="issue-marker" data-bug_id="15188" data-bug_status="NEW">
vhardy@4395 1515 <a href=
vhardy@5750 1516 "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15188">Issue-15188</a>
vhardy@4395 1517
vhardy@4395 1518 <div class="issue-details">
vhardy@4412 1519 <p class="short-desc">add functionality for having textual description like "continued here" or "continued on page x" to regions.</p>
vhardy@4395 1520 </div>
vhardy@4395 1521 </div>
vhardy@3272 1522
stearns@5470 1523 <p>It can be useful
stearns@5470 1524 to visually mark the content
stearns@5470 1525 to highlight that a content thread
stearns@5470 1526 is flowing through the region chain.
stearns@5470 1527 For example, a marker
stearns@5470 1528 such as <em>'continued below'</em> clearly indicates,
stearns@5470 1529 at the end of a CSS Region,
stearns@5470 1530 that there is more content in the flow
stearns@5470 1531 which can be found by scrolling past
stearns@5470 1532 whatever content interrupts the region chain.</p>
vhardy@3272 1533
stearns@5470 1534 <p>The '::before' and '::after' pseudo-elements (see [[!SELECT]])
stearns@5470 1535 let content authors mark the beginning
stearns@5470 1536 and end of a region with such markers.</p>
vhardy@3272 1537
vhardy@3547 1538 <h3 id="processing-model">Processing model</h3>
vhardy@3272 1539
stearns@5470 1540 <p>The '::before' content is laid out
stearns@5470 1541 in the region prior to
stearns@5470 1542 any other content coming from the flow.
stearns@5470 1543 Note that it is possible
stearns@5470 1544 to set the '::before' pseudo-element's 'display' property
stearns@5470 1545 to 'run-in' to align it
stearns@5470 1546 with the content's inline boxes.</p>
vhardy@3547 1547
stearns@5470 1548 <p>The '::after' content is laid out
stearns@5470 1549 in the region after laying out
stearns@5470 1550 the flow fragment content.
stearns@5470 1551 Then, flow content is removed from the fragment
stearns@5470 1552 to accommodate the '::after' content.
stearns@5470 1553 Accommodating means that the '::after' content
stearns@5470 1554 is laid out without overflowing the region.
stearns@5470 1555 The 'display' property of the '::after' content
stearns@5470 1556 can be set to 'run-in' to align
stearns@5470 1557 with the region's content's inline boxes.
stearns@5470 1558 In that case, the '::after' content becomes
stearns@5470 1559 the last inline box of the previous element
stearns@5470 1560 in the flow that has some visual rendering
stearns@5470 1561 in the region and can accommodate for the '::after' box.</p>
stearns@5470 1562
stearns@5470 1563 <p>If there is not enough room to accommodate
stearns@5470 1564 the ::before content,
stearns@5470 1565 the '::after' content after removing all flow fragment content,
stearns@5470 1566 or a combination of the two,
stearns@5470 1567 then the ::before and/or ::after content overflows.</p>
vhardy@3272 1568
stearns@5472 1569 <h2 id="cssom_view_and_css_regions">CSSOM</h2>
vhardy@2779 1570
stearns@5576 1571 <div class="issue-marker-wrapper">
vhardy@4412 1572 <div class="issue-marker" data-bug_id="15679" data-bug_status="NEW">
vhardy@4395 1573 <a href=
vhardy@5750 1574 "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15679">Issue-15679</a>
vhardy@4395 1575
vhardy@4395 1576 <div class="issue-details">
vhardy@4395 1577 <p class="short-desc">elementFromPoint and CSS regions</p>
vhardy@4395 1578 </div>
vhardy@4395 1579 </div>
stearns@5576 1580 </div>
stearns@5576 1581 </div>
vhardy@3558 1582
vhardy@2779 1583 <p>Since content may flow into multiple regions, authors need a way to
vhardy@2945 1584 determine if there are enough regions to flow all the content from a named
vhardy@5349 1585 flow. This is especially important considering that the size of regions or
vhardy@5349 1586 the size of the content may change depending on the display context. For
vhardy@5349 1587 example, flowing the same content on a mobile phone with a small screen may
vhardy@5349 1588 require more regions than on a large desktop display. Another example is the
vhardy@5349 1589 user changing the font size of text flowing through regions. Depending on
vhardy@5349 1590 the change, new regions may be needed to accommodate for the additional
vhardy@5349 1591 space required to fit the larger text or some regions may need to be removed
vhardy@5349 1592 for smaller text.
vhardy@5349 1593 </p>
vhardy@4395 1594
vhardy@2945 1595 <h3 id="the-namedflow-interface">The NamedFlow interface</h3>
vhardy@5232 1596
vhardy@5232 1597 <p>A <span>named flow</span> is created when it becomes referenced by the
vhardy@5349 1598 'flow-into' and/or 'flow-from' computed values. The following APIs allow
vhardy@5232 1599 scripts to reference a <code class="idl">NamedFlow</code> object representation
vhardy@5232 1600 of a <span>named flow</span>.</p>
vhardy@5232 1601
stearns@6466 1602 <p>An additional method on the <a href=
vhardy@5094 1603 "http://www.w3.org/TR/dom/#interface-document"><code class=
vhardy@5352 1604 "idl">Document</code></a> interface provide access to <span>named flows</span>.</p>
vhardy@4400 1605
vhardy@4400 1606 <pre class="idl">
vhardy@5095 1607 partial interface <a href=
vhardy@5094 1608 "http://www.w3.org/TR/dom/#interface-document">Document</a> {
stearns@6466 1609 <a href="#dom-named-flow-collection">NamedFlowCollection</a> <a href="#document-getnamedflows">getNamedFlows()</a>;
vhardy@4400 1610 };
vhardy@4400 1611 </pre>
vhardy@4400 1612
stearns@6466 1613 <p>The <dfn id="document-getnamedflows"><code class="idl">getNamedFlows()</code></dfn> method on the <a href=
vhardy@5094 1614 "http://www.w3.org/TR/dom/#interface-document"><code class=
stearns@6466 1615 "idl">Document</code></a> interface returns a static snapshot of all the current <span>named
vhardy@5537 1616 flows</span> in the document. </p>
vhardy@4400 1617
vhardy@5352 1618 <p>The <code class="idl">namedFlows</code> collection must include all <span>named flows</span>
vhardy@5537 1619 that are currently in the <code>CREATED</code> state.
vhardy@5537 1620 The list must not include <span>named flows</span> that are in the <code>NULL</code> state. </p>
vhardy@5232 1621
vhardy@5232 1622 <ul>
vhardy@5255 1623 <li><code class="idl">NULL</code>: the user agent must return <code>null</code>.</li>
vhardy@5537 1624 <li><code class="idl">CREATED</code>: the user agent must return a valid
vhardy@5537 1625 <code class="idl">NamedFlow</code> instance.</li>
vhardy@5232 1626 </ul>
vhardy@5537 1627
vhardy@4400 1628
stearns@6466 1629 <p>The <dfn id="dom-named-flow-collection"><code class="idl">NamedFlowCollection</code></dfn>
stearns@6466 1630 interface provides a list of current
stearns@6466 1631 <code class="idl">NamedFlow</code> instances
stearns@6466 1632 in the document.
stearns@6466 1633 The collection is
stearns@6466 1634 a snapshot of the data.</p>
vhardy@4400 1635
vhardy@2945 1636 <pre class="idl">
stearns@6817 1637 interface <a href="#dom-named-flow-collection">NamedFlowCollection</a> {
stearns@5423 1638 readonly attribute unsigned long <a href="#dom-named-flow-collection-length">length</a>;
stearns@6080 1639 [IndexGetter] <a href="#dom-named-flow">NamedFlow?</a> <a href="#dom-named-flow-collection-item">item</a> (unsigned long index);
stearns@6080 1640 [NameGetter] <a href="#dom-named-flow">NamedFlow?</a> <a href="#dom-named-flow-collection-named-item">namedItem</a> (DOMString name);
stearns@5423 1641 };</pre>
vhardy@4400 1642
vhardy@5349 1643 <p>The <dfn id="dom-named-flow-collection-length"><code class="idl">length</code></dfn>
stearns@6080 1644 attribute returns
stearns@6080 1645 the number of items
stearns@6080 1646 in the collection.</p>
vhardy@5349 1647 <p>The <dfn id="dom-named-flow-collection-item"><code class="idl">item(index)</code></dfn>
stearns@6080 1648 method returns
stearns@6080 1649 the <code>NamedFlow</code> instance
stearns@6080 1650 at index <em>index</em>
stearns@6080 1651 in the collection
stearns@6606 1652 or <code class="idl">undefined</code>
stearns@6080 1653 if <em>index</em> is out of range.
stearns@6080 1654 An object <code>collection</code>
stearns@6080 1655 implementing <code>NamedFlowCollection</code>
stearns@6080 1656 supports indices in the range
stearns@6080 1657 <code>0 ≤ index < collection.length</code>.</p>
vhardy@2945 1658
stearns@6080 1659 <p>The <dfn id="dom-named-flow-collection-named-item"><code class="idl">namedItem(name)</code></dfn>
stearns@6080 1660 method returns the <code>NamedFlow</code> instance
stearns@6080 1661 in the collection
stearns@6080 1662 whose name attribute
stearns@6080 1663 matches the supplied <em>name</em>,
stearns@6606 1664 or <code class="idl">undefined</code>
stearns@6080 1665 if there is no match.
vhardy@5537 1666
stearns@6080 1667 <p>The <dfn id="dom-named-flow"><code class="idl">NamedFlow</code></dfn>
stearns@6080 1668 interface offers a representation
stearns@6080 1669 of a <span>named flow</span> instance.</p>
stearns@6080 1670
stearns@6080 1671 <p>The <code class="idl">NamedFlow</code> interface
vhardy@5537 1672 can be used for different purposes.
vhardy@5537 1673 For example, the <code>getRegionsByContent()</code> method
vhardy@5537 1674 can help navigate by bookmark:
vhardy@5537 1675 a script can find the <span>region</span>s
vhardy@5537 1676 that display a particular anchor
vhardy@5537 1677 and bring them to view.</p>
vhardy@5537 1678
vhardy@5537 1679 <p>Likewise, the interface allows authors
vhardy@5537 1680 to check if all content has been fitted
vhardy@5537 1681 into existing regions.
vhardy@5537 1682 If it has, the <code>overset</code> attribute
vhardy@5537 1683 would be false.</p>
vhardy@5537 1684
vhardy@2945 1685 <pre class="idl">
stearns@6423 1686 interface <a href="#dom-named-flow">NamedFlow</a> : <a href="http://www.w3.org/TR/dom/#interface-eventtarget">EventTarget</a> {
vhardy@5349 1687 readonly attribute DOMString <a href="#dom-named-flow-name">name</a>;
vhardy@5349 1688 readonly attribute boolean <a href="#dom-named-flow-overset">overset</a>;
vhardy@5349 1689 sequence&lt;<a href="#region-interface">Region</a>&gt; <a href="#dom-named-flow-get-regions">getRegions()</a>;
vhardy@5349 1690 readonly attribute integer <a href="#dom-named-flow-first-empty-region-index">firstEmptyRegionIndex</a>;
vhardy@5349 1691 <a href="http://www.w3.org/TR/dom/#interface-nodelist">NodeList</a> <a href="#dom-named-flow-get-content">getContent()</a>;
stearns@6525 1692 sequence&lt;<a href="#region-interface">Region</a>&gt; <a href="#dom-named-flow-get-regions-by-content">getRegionsByContent</a>(<a href="http://www.w3.org/TR/dom/#interface-node">Node</a> node);
vhardy@3681 1693 };</pre>
vhardy@2945 1694
vhardy@5349 1695 <p>The <dfn id="dom-named-flow-name"><code class="idl">name</code></dfn> attribute
vhardy@4415 1696 returns the name of the <code class="idl">NamedFlow</code> instance.</p>
vhardy@4400 1697
stearns@5472 1698 <p>The <dfn id="dom-named-flow-overset"><code class= "idl">overset</code></dfn>
stearns@5472 1699 attribute returns true
stearns@5472 1700 if there are <span>named flow</span> fragments
stearns@5472 1701 that do not fit in the associated region chain.
stearns@5472 1702 The attribute also returns true
stearns@5472 1703 if there is no associated region chain.
stearns@5472 1704 Otherwise, it returns false. </p>
vhardy@3681 1705
stearns@5472 1706 <p>The <dfn id="dom-named-flow-get-regions"><code class="idl">getRegions()</code></dfn>
stearns@5472 1707 method returns the sequence
stearns@5472 1708 of regions in the <span>region chain</span>
stearns@5472 1709 associated with the <span>named flow</span>.
stearns@5472 1710 Note that the returned values
stearns@5472 1711 is a static sequence
stearns@5472 1712 in document order.</p>
vhardy@5255 1713
stearns@5472 1714 <p>The <dfn id="dom-named-flow-first-empty-region-index">firstEmptyRegionIndex</dfn>
stearns@5472 1715 is the index of the first region
stearns@5472 1716 in the region chain with the <code>regionOverset</code> attribute
stearns@5472 1717 set to <code>empty</code>.
stearns@5472 1718 If all regions have the <code>regionOverset</code> attribute
stearns@5472 1719 set to <code>fit</code> or <code>overset</code>,
stearns@5472 1720 the value for <code>firstEmptyRegionIndex</code> is <code>-1</code>.
stearns@5472 1721 If there are no regions in the <span>region chain</span>,
stearns@5472 1722 the value is <code>-1</code> as well. </p>
vhardy@5264 1723
stearns@5472 1724 <p>The <dfn id="dom-named-flow-get-content">getContent()</dfn>
stearns@5472 1725 method returns an ordered collection
stearns@5472 1726 of nodes that constitute the <span>named flow</span>.
stearns@5472 1727 The returned list is a static snapshot
stearns@5472 1728 of the <span>named flow</span> content
stearns@5472 1729 at the time the method is invoked.
stearns@5472 1730 This list contains the elements
stearns@5472 1731 that were moved to the <span>named flow</span>
stearns@6079 1732 by their flow-into property
stearns@5472 1733 but not their descendants
stearns@5472 1734 (unless the descendants are themselves
stearns@5472 1735 moved to the <span>named flow</span>).
vhardy@3681 1736 </p>
vhardy@3681 1737
stearns@5472 1738 <p>The <dfn id="dom-named-flow-get-regions-by-content">getRegionsByContent()</dfn>
stearns@5472 1739 method returns the sequence of regions
stearns@5472 1740 that contain at least part
vhardy@5768 1741 of the target content node if it belongs to the <span>named flow</span> directly
vhardy@5768 1742 (i.e., its 'flow-into' computed value is the <span>named flow</span>) or one of its
vhardy@5768 1743 ancestors belongs to the <span>named flow</span>. Otherwise, the method returns an
vhardy@5768 1744 empty sequence. The returned value
vhardy@5768 1745 is a static sequence in document order.</p>
vhardy@5255 1746
vhardy@5537 1747
vhardy@5537 1748 <p>The <span>named flow</span> states are :</p>
vhardy@5537 1749
vhardy@5537 1750 <ul>
vhardy@5537 1751 <li><code class="idl">NULL</code>: the <span>named flow</span> is not referenced
vhardy@5537 1752 by any 'flow-into' or 'flow-from' computed value.</li>
vhardy@5537 1753 <li><code class="idl">CREATED</code>: the <span>named flow</span> is referenced by
vhardy@5537 1754 at least one 'flow-into' or 'flow-from' computed value.</li>
vhardy@5537 1755 </ul>
vhardy@5537 1756
vhardy@5537 1757 <p>A <code class="idl">NamedFlow</code>
vhardy@5537 1758 object is live: it always represents the <span>named flow</span> with the corresponding
vhardy@5537 1759 name even if that <span>named flow</span> has transitioned to the <code>NULL</code> state.</p>
vhardy@5537 1760
vhardy@5537 1761 <p>If a script holds a reference to a <code class="idl">NamedFlow</code> instance that
vhardy@5537 1762 has entered the <code>NULL</code> state, its attributes and methods should behave
vhardy@5537 1763 as follows:</p>
vhardy@5537 1764
vhardy@5537 1765 <ul>
vhardy@5537 1766 <li>the <code class="idl">name</code> attribute returns its value as normal.</li>
stearns@5966 1767 <li>the <code class="idl">overset</code> attribute returns <code class="idl">false</code>.</li>
vhardy@5537 1768 <li>the <code class="idl">getRegions</code> method returns an empty sequence.</li>
vhardy@5537 1769 <li>the <code class="idl">firstEmptyRegionIndex</code> attribute returns <code class="idl">-1</code>.</li>
vhardy@5537 1770 <li>the <code class="idl">getContent()</code> method returns an empty <code class="idl">NodeList</code> instance.</li>
vhardy@5768 1771 <li>the <code class="idl">getRegionsByContent()</code> method retuns an empty sequence.</li>
vhardy@5537 1772 </ul>
stearns@5576 1773
vhardy@5255 1774 <h3 id="the-region-interface">The Region interface</h3>
vhardy@2945 1775
stearns@6284 1776 <p>The <dfn id='region-interface'>
stearns@6284 1777 <code class="idl">Region</code>
stearns@6284 1778 interface</dfn> is a
stearns@6284 1779 <a href="http://www.w3.org/TR/WebIDL/#idl-implements-statements">supplemental interface</a>
stearns@6284 1780 which must be implemented by all objects
stearns@6284 1781 (<a href="http://www.w3.org/TR/dom/#interface-element">
stearns@6284 1782 <code class= "idl">Elements</code></a>,
stearns@6284 1783 pseudo-elements or other CSS constructs
stearns@6298 1784 such as <a href="http://dev.w3.org/csswg/css3-page-template/#templates-and-slots">slots</a>) in an implementation which can be CSS Regions.</p>
vhardy@5255 1785
vhardy@5255 1786 <pre class="idl">
stearns@6298 1787 [NoInterfaceObject]
stearns@6817 1788 interface <a href="#region-interface">Region</a> {
stearns@5423 1789 readonly attribute DOMString <a href="#dom-region-regionoverset">regionOverset</a>;
stearns@5423 1790 sequence&lt;<a href="#">Range</a>&gt;? <a href=
stearns@5423 1791 "#dom-region-getregionflowranges">getRegionFlowRanges()</a>;
stearns@6522 1792 <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> <a href="#dom-region-getComputedRegionStyle">getComputedRegionStyle</a>(Element elt);
stearns@6522 1793 <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> <a href="#dom-region-getComputedRegionStyle">getComputedRegionStyle</a>(Element elt, DOMString pseudoElt);
stearns@6284 1794 };
stearns@6284 1795
stearns@6298 1796 Element implements Region;</pre>
vhardy@2945 1797
vhardy@5255 1798 <p>The <dfn id="dom-region-regionoverset"><code class=
vhardy@5255 1799 "idl">regionOverset</code></dfn> attribute returns one of the following
vhardy@5255 1800 values:</p>
vhardy@2945 1801
vhardy@5255 1802 <dl>
vhardy@5255 1803 <dt>'overset'</dt>
vhardy@2945 1804
vhardy@5349 1805 <dd>The region is the last one in the
vhardy@5255 1806 <span title="region-chain">region chain</span> and
vhardy@5255 1807 not able to fit the remaining content from the <span>named flow</span>.
vhardy@5255 1808 Note that the region's <a href=
vhardy@5255 1809 "http://www.w3.org/TR/CSS21/visufx.html#overflow"><code class=
vhardy@5255 1810 "idl">overflow</code></a> property value can be used to control the
vhardy@5255 1811 visibility of the overflowing content and the
stearns@6796 1812 'region-fragment' property controls whether or not fragmentation happens
vhardy@5349 1813 on the content that overflows the last region.</dd>
vhardy@2945 1814
vhardy@5255 1815 <dt>'fit'</dt>
vhardy@2945 1816
stearns@6467 1817 <dd>The region's flow fragment content
stearns@6467 1818 fits into the region's
stearns@6467 1819 <a href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">content box</a>.
stearns@6467 1820 If the region is the last one
stearns@6467 1821 in the <span title="region-chain">region chain</span>,
stearns@6467 1822 it means that the content
stearns@6467 1823 fits without overflowing.
stearns@6467 1824 If the region is not the last one
stearns@6467 1825 in the region chain,
stearns@6467 1826 that means the <span>named flow</span> content
stearns@6467 1827 is further fitted in subsequent regions.
stearns@6467 1828 In this last case,
stearns@6467 1829 note that the <span>named flow</span> fragment may be empty
stearns@6467 1830 (for example if the region is too small
stearns@6467 1831 to accommodate any content).
stearns@6467 1832 This value is returned if the <span>region</span> object
stearns@6467 1833 is not (or no longer) a region.</dd>
vhardy@2945 1834
vhardy@5255 1835 <dt>'empty'</dt>
vhardy@2945 1836
vhardy@5349 1837 <dd>All content from the <span>named flow</span> was fitted in prior regions.</dd>
vhardy@5255 1838
vhardy@5255 1839 </dl>
vhardy@2945 1840
vhardy@5352 1841 <p>Note that if there is no content in the <span>named flow</span>, all regions associated
vhardy@5352 1842 with that <span>named flow</span> should have their <code class="idl">regionOverset</code>
vhardy@5255 1843 attribute return 'empty'.
vhardy@5255 1844 If there is content in the flow but that content does not generate any box
vhardy@5255 1845 for visual formatting, the 'overset' attribute on the first region in the
vhardy@5255 1846 region chain associated with the flow will return 'fit'.</p>
vhardy@5255 1847
stearns@5472 1848 <p>The <dfn id="dom-region-getregionflowranges">getRegionFlowRanges</dfn> method
stearns@5472 1849 returns an array of <a href= "http://www.w3.org/TR/dom/#interface-range">Range</a>
stearns@5472 1850 instances corresponding to fragment
stearns@5472 1851 from the <span>named flow</span>
stearns@5472 1852 that is laid out in the region.
stearns@5472 1853 If the region has not received a fragment
stearns@5472 1854 because it is too small to accommodate any,
stearns@5472 1855 the method returns a single <code class="idl">Range</code>
stearns@5472 1856 where the <code>startContainer</code>
stearns@5472 1857 and <code>startOffset</code>
stearns@5472 1858 have the same values as
stearns@5472 1859 the <code>endContainer</code>
stearns@5472 1860 and <code>endOffset</code>
stearns@5472 1861 and therefore the collapsed attribute
stearns@5472 1862 on the <code class="idl">Range</code> is true.
stearns@5472 1863 In that situation,
stearns@5472 1864 if the region is the first
stearns@5472 1865 in the <span>region chain</span>,
stearns@5472 1866 the <code>startContainer</code>
stearns@5472 1867 is the first <code>Node</code>
stearns@5472 1868 in the <span>named flow</span>
stearns@5472 1869 and the <code>startOffset</code> is zero.
stearns@5472 1870 If the region is the last region
stearns@5472 1871 in the region chain
stearns@5472 1872 (but not the first and only one),
stearns@5472 1873 the <code>startContainer</code>
stearns@5472 1874 and <code>startOffset</code>
stearns@5472 1875 are the same values as
stearns@5472 1876 the <code>endContainer</code>
stearns@5472 1877 and <code>endOffset</code>
stearns@5472 1878 on the previous region
stearns@5472 1879 in the <span>region chain</span>.
stearns@5472 1880 The method returns null
stearns@5472 1881 if the <span>region</span> object
stearns@5472 1882 is not (or no longer) a region.</p>
vhardy@2945 1883
stearns@6400 1884 <p>The <dfn id="dom-region-getComputedRegionStyle">getComputedRegionStyle</dfn>
stearns@5602 1885 methods on the Region interface work the same as the
stearns@6522 1886 <a href="http://dev.w3.org/csswg/cssom/#extensions-to-the-window-interface"><code class="idl">getComputedStyle</code></a> [[!CSSOM]]
stearns@5602 1887 methods on the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#window"><code class="idl">Window</code></a>
stearns@5603 1888 interface [[!HTML5]] with the following exceptions.
stearns@5602 1889 For the <code class="idl">Region</code> interface
stearns@6522 1890 the <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a>
stearns@5602 1891 returned must include the result of
stearns@5602 1892 <a href="#the-at-region-style-rule">region styling</a>.
stearns@5602 1893 If the element is fragmented across region boundaries,
stearns@6522 1894 the <a href="http://dev.w3.org/csswg/cssom/#the-cssstyledeclaration-interface">CSSStyleDeclaration</a> returned must apply only
stearns@5602 1895 to the fragment that flows through
stearns@6467 1896 the <span>CSS Region</span>.
stearns@6467 1897 The method returns null
stearns@6467 1898 if the <span>region</span> object
stearns@6467 1899 is not (or no longer) a region.</p>
stearns@5602 1900
vhardy@5255 1901 <div class="note">
stearns@6285 1902 <p>If the element is not contained
stearns@6285 1903 in the <span>CSS Region</span> at all,
stearns@6285 1904 the method returns
stearns@6285 1905 the <a href="#the-at-region-style-rule">region styling</a>
stearns@6285 1906 that would apply to the element
stearns@6298 1907 if it were contained in the <span>CSS Region</span>
stearns@6522 1908 (following how <a href="http://dev.w3.org/csswg/cssom/#extensions-to-the-window-interface"><code class="idl">getComputedStyle</code></a> works
stearns@6285 1909 with elements not contained
stearns@6285 1910 in the window's document).</p>
vhardy@5350 1911 </div>
stearns@6285 1912
stearns@6285 1913 <p>A <code class="idl">Region</code> instance
stearns@6285 1914 may represent an object
stearns@6285 1915 that is no longer a <span>region</span>.
stearns@6285 1916 This may happen for example
stearns@6285 1917 if the 'flow-from' property
stearns@6285 1918 on the corresponding pseudo-element,
stearns@6285 1919 element or other construct
stearns@6285 1920 becomes 'none'
stearns@6285 1921 but a script is still holding
stearns@6525 1922 a reference to the <code class="idl">Region</code> object.</p>
stearns@5598 1923
stearns@5598 1924 <h3 id="region-style-rule-interface">The CSSRegionStyleRule interface</h3>
stearns@5598 1925
stearns@6817 1926 <p>The <dfn id='dom-region-style-rule-interface'>
stearns@6817 1927 <code class="idl">CSSRegionStyleRule</code>
stearns@6817 1928 interface</dfn> represents
stearns@5598 1929 an '@region' rule
stearns@5598 1930 in a CSS style sheet.
stearns@5598 1931 This rule type is added
stearns@6522 1932 to the <a href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface"><code>CSSRule</code></a> [[!CSSOM]] interface.</p>
stearns@5598 1933
stearns@5598 1934 <pre class="idl">
stearns@6522 1935 partial interface <a href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface">CSSRule</a> {
stearns@5600 1936 const unsigned short <a href="#region-style-rule-const">REGION_STYLE_RULE</a> = 16;
stearns@5600 1937 };
stearns@5598 1938 </pre>
stearns@6525 1939 <dl>
stearns@6525 1940 <dt><dfn id="region-style-rule-const">REGION_STYLE_RULE</dfn></dt>
stearns@6525 1941 <dd>The rule is a CSSRegionStyleRule</dd>
stearns@6525 1942 </dl>
stearns@5598 1943 <pre class="idl">
stearns@6817 1944 interface <a href="#dom-region-style-rule-interface">CSSRegionStyleRule</a> : <a href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface">CSSRule</a> {
stearns@5600 1945 attribute DOMString <a href="#region-style-rule-selectorText">selectorText</a>;
stearns@6522 1946 readonly attribute <a href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence">CSSRuleList</a> <a href="#region-style-rule-cssRules">cssRules</a>;
stearns@5600 1947 unsigned long <a href="#region-style-rule-insertRule">insertRule</a>(DOMString rule, unsigned long index)
stearns@5609 1948 raises(<a href="http://www.w3.org/TR/dom/#exception-domexception">DOMException</a>);
stearns@5600 1949 void <a href="#region-style-rule-deleteRule">deleteRule</a>(unsigned long index)
stearns@5609 1950 raises(<a href="http://www.w3.org/TR/dom/#exception-domexception">DOMException</a>);
stearns@5598 1951 };
stearns@5598 1952 </pre>
stearns@5598 1953
stearns@5598 1954 <p>The <dfn id="region-style-rule-selectorText">
stearns@5598 1955 <code class="idl">selectorText</code></dfn>
stearns@5598 1956 attribute gets and sets
stearns@5598 1957 the associated selector
stearns@6522 1958 as defined in section <a href="http://dev.w3.org/csswg/cssom/#widl-CSSStyleRule-selectorText">6.4.3</a> of [[!CSSOM]].
stearns@5598 1959
stearns@5598 1960 <p>The <dfn id="region-style-rule-cssRules">
stearns@5598 1961 <code class="idl">cssRules</code></dfn>
stearns@5598 1962 attribute must return a
stearns@6522 1963 <a href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a> [[!CSSOM]]
stearns@5598 1964 object for the list of
stearns@5598 1965 <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRules</code></a>
stearns@5598 1966 specified in the region style block.</p>
stearns@5598 1967
stearns@5598 1968 <p>The <dfn id="region-style-rule-insertRule">
stearns@5598 1969 <code class="idl">insertRule(rule, index)</code></dfn>
stearns@5598 1970 method inserts a
stearns@5598 1971 <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRule</code></a>
stearns@5598 1972 into the region style block
stearns@5598 1973 before the specified index.
stearns@5598 1974 If the index is equal to the length
stearns@6522 1975 of the <a href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a> the
stearns@5598 1976 <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRule</code></a>
stearns@5598 1977 is inserted at the end of the list.</p>
stearns@5598 1978
stearns@5598 1979 <p>Possible exceptions:</p>
stearns@5598 1980 <ul>
stearns@5600 1981 <li><a href="http://www.w3.org/TR/dom/#dom-domexception-hierarchy_request_err"><code class="idl">HIERARCHY_REQUEST_ERR</code></a>:
stearns@5598 1982 Raised if the rule to insert is not a
stearns@5598 1983 <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRule</code></a>.</li>
stearns@5600 1984 <li><a href="http://www.w3.org/TR/dom/#dom-domexception-index_size_err"><code class="idl">INDEX_SIZE_ERR</code></a>:
stearns@5598 1985 Raised if the specified index
stearns@5598 1986 is not a valid insertion point.</li>
stearns@5600 1987 <li><a href="http://www.w3.org/TR/dom/#dom-domexception-syntax_err"><code class="idl">SYNTAX_ERR</code></a>:
stearns@5598 1988 Raised if the specified rule
stearns@5598 1989 has a syntax error
stearns@5598 1990 and is unparsable.</li>
stearns@5598 1991 </ul>
stearns@5598 1992 <p>The <dfn id="region-style-rule-deleteRule">
stearns@5598 1993 <code class="idl">deleteRule(index)</code></dfn>
stearns@5600 1994 method deletes the <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRule</code></a>
stearns@6522 1995 in the <a href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a>
stearns@5598 1996 at the specified index.</p>
stearns@5598 1997
stearns@5600 1998 <p>Possible exception:</p>
stearns@5598 1999 <ul>
stearns@5600 2000 <li><a href="http://www.w3.org/TR/dom/#dom-domexception-index_size_err"><code class="idl">INDEX_SIZE_ERR</code></a>:
stearns@5598 2001 Raised if the specified index
stearns@5598 2002 does not correspond to a rule
stearns@5598 2003 in the region style block.</li>
stearns@5598 2004 </ul>
stearns@5598 2005
vhardy@3272 2006 <h3 id="region-flow-layout-events">Region flow layout events</h3>
vhardy@4395 2007
stearns@6079 2008 <p><a href="#dom-named-flow"><code class="idl">NamedFlow</code></a>
stearns@6423 2009 objects are <a href="http://www.w3.org/TR/dom/#interface-eventtarget">EventTargets</a>
stearns@6079 2010 which dispatch <code class="idl">regionLayoutUpdate</code> events
stearns@6079 2011 when there is a possible layout change
stearns@6079 2012 in their region chain.
stearns@6816 2013 The event is asynchronous,
stearns@6824 2014 and fires in the same step of the
stearns@6824 2015 <a href="http://www.w3.org/TR/html5/webappapis.html#processing-model-2">event loop</a>
stearns@6824 2016 [[!HTML5]] as when
stearns@6816 2017 <a href="http://www.w3.org/TR/2012/WD-dom-20120405/#mutation-observers">MutationObservers</a>
stearns@6824 2018 [[!DOM]] are invoked.</p>
stearns@6816 2019 <p>If region chain nesting occurs
stearns@6105 2020 (the contents of a <a href="#dom-named-flow"><code class="idl">NamedFlow</code></a>
stearns@6105 2021 contains regions
stearns@6105 2022 for a different <a href="#dom-named-flow"><code class="idl">NamedFlow</code></a>)
stearns@6105 2023 then the <code class="idl">regionLayoutUpdate</code> event
stearns@6105 2024 for the nested flow(s)
stearns@6105 2025 must be dispatched
stearns@6105 2026 before the <code class="idl">regionLayoutUpdate</code> event
stearns@6105 2027 for the containing flow
stearns@6105 2028 is dispatched.</p>
vhardy@3073 2029
vhardy@3073 2030 <table class="event-desc" border="0" summary="This table contains information about the semantics of the given event type" cellpadding="2" cellspacing="0">
vhardy@3073 2031 <tbody><tr class="assert must"><th>Type</th>
vhardy@3272 2032 <td class="eventname"><strong><code>regionLayoutUpdate</code></strong></td></tr>
stearns@6522 2033 <tr class="assert must"><th>Interface</th> <td><code><a href="http://www.w3.org/TR/DOM-Level-3-Events/#events-UIEvent">UIEvent</a></code> (see [[!DOM-LEVEL-3-EVENTS]])</td></tr>
vhardy@3302 2034 <tr class="assert must"><th>Sync / Async</th> <td>Async</td></tr>
stearns@6000 2035 <tr class="assert must"><th>Bubbles</th> <td>No</td></tr>
vhardy@5349 2036 <tr class="assert must"><th>Target</th> <td><a href="#dom-named-flow"><code class="idl">NamedFlow</code></a></td></tr>
vhardy@3073 2037 <tr class="assert must"><th>Cancelable</th> <td>Yes</td></tr>
vhardy@3073 2038 <tr class="assert must"><th>Default action</th> <td>none</td></tr>
vhardy@3073 2039 <tr class="assert must"><th>Context info</th>
vhardy@3073 2040 <td>
vhardy@3073 2041 <ul>
vhardy@5264 2042 <li><code class="attribute-name">Event.target</code>:
vhardy@5349 2043 <a href="#dom-named-flow"><code class="idl">NamedFlow</code></a> whose layout may have changed</li>
vhardy@3073 2044 </ul>
vhardy@3073 2045 </td>
vhardy@3073 2046 </tr>
vhardy@3073 2047 </tbody></table>
vhardy@2819 2048
stearns@5472 2049 <h3 id="cssomview-and-regions">Clarifications on pre-existing APIs</h3>
vhardy@5270 2050
vhardy@5270 2051
vhardy@5270 2052 <h4 id="cssomview-getclientrects-and-getboundingclientrect"><code class="idl">getClientRects()</code> and <code>getBoundingClientRects()</code></h4>
vhardy@5270 2053
stearns@5472 2054 <p>The <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a>
stearns@5472 2055 defines how user agents compute
stearns@5472 2056 the bounding client rectangle
stearns@5472 2057 for an element (<code class="idl">getBoundingClientRect()</code>)
stearns@5472 2058 and its generated boxes (<code class="idl">getClientRects()</code>).</p>
vhardy@5270 2059
stearns@5472 2060 <p>This definition applies to
stearns@5472 2061 the (possibly) multiple boxes
stearns@5472 2062 generated for an element in a named flow
stearns@5472 2063 flowing through a region chain.
stearns@5472 2064 The <code class="idl">getClientRects()</code> method
stearns@5472 2065 returns the list of boxes generated
stearns@5472 2066 for each of the element fragments
stearns@5472 2067 laid out in different regions.
stearns@5472 2068 The <code>getBoundingClientRect()</code> method
stearns@5472 2069 operates as specified in the
stearns@5472 2070 <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a>
stearns@5472 2071 as well and is computed
stearns@5472 2072 from the set of rectangles
stearns@5472 2073 returned by <code class="idl">getClientRects()</code>.</p>
vhardy@5270 2074
vhardy@5270 2075 <h4 id="cssomview-offset-attributes"><code class="idl">offsetTop</code>, <code class="idl">offsetLeft</code>,
vhardy@5270 2076 <code class="idl">offsetWidth</code> and <code class="idl">offsetWidth</code></h4>
vhardy@5270 2077
stearns@5609 2078 <p>The computation of the <a href="http://dev.w3.org/csswg/cssom-view/#extensions-to-the-htmlelement-interface">offset attributes</a>
stearns@5710 2079 for elements laid out in a <span>named flow</span> follow the <a href="http://dev.w3.org/csswg/cssom-view/#extensions-to-the-htmlelement-interface">specification</a> [[!CSSOM]]. For the purpose of the
vhardy@5270 2080 algorithm, the <em>first CSS layout box</em> associated
vhardy@5270 2081 with an element laid out in a <span>named flow</span> is the box generated for the first region
vhardy@5270 2082 the element is laid out into.</p>
vhardy@5270 2083
vhardy@5289 2084 <h2 id="regions-visual-formatting-details">Regions visual formatting details</h2>
vhardy@5289 2085
vhardy@5377 2086 <p>Regions are laid out by CSS and take part in the normal box model and other layout models
vhardy@5335 2087 offered by CSS modules such as flexible boxes ([[CSS3-FLEXBOX]]). However, <span>regions</span>
vhardy@5378 2088 lay out a fragment of their <span>named flow</span> instead of laying out descendant content as happens with other
vhardy@5335 2089 boxes.</p>
vhardy@5289 2090
stearns@5423 2091 <p>This section describes the model for laying out <span>regions</span>
stearns@5423 2092 and for laying out <span>named flow</span> content into regions.
stearns@5423 2093 The descriptions in this section are biased towards a horizontal writing mode,
stearns@5423 2094 using <span>width</span> for logical width (or measure)
stearns@5423 2095 and <span>height</span> for logical height (or extent)
stearns@5423 2096 as <a href="http://www.w3.org/TR/css3-writing-modes/#abstract-dimensions">defined</a>
stearns@5423 2097 in the CSS Writing Modes Module [[!CSS3-WRITING-MODES]]).
stearns@5423 2098 To use this model in a vertical writing mode apply the principles
stearns@5423 2099 <a href="http://www.w3.org/TR/css3-writing-modes/#vertical-layout">described</a>
stearns@5423 2100 in that specification.</p>
vhardy@5335 2101
vhardy@5289 2102 <h3 id="regions-flow-content-box">The Region Flow Content Box (RFBC)</h3>
vhardy@5289 2103
vhardy@5289 2104 <p>A region box lays out the following boxes:</p>
vhardy@5289 2105
vhardy@5289 2106 <ul>
vhardy@5289 2107 <li>The boxes generated by its <code class="css">::before</code> and
stearns@6525 2108 <code class="css">::after</code> pseudo-elements, if any.</li>
stearns@5604 2109 <li>The anonymous <dfn>region flow content box</dfn> (called <dfn>RFCB</dfn> in this document) which
vhardy@5352 2110 contains the fragment of the <span>named flow</span> that the region receives.</li>
vhardy@5289 2111 </ul>
vhardy@5289 2112
vhardy@5289 2113 <div class="figure">
stearns@5604 2114 <img src="images/RFCB.svg" width="600px" alt="The ::before, RFCB and ::after boxes contained in the Region Box"/>
vhardy@5289 2115 <p class="caption">The Region Flow Content Box (RFCB)</p>
vhardy@5289 2116 </div>
vhardy@5289 2117
vhardy@5366 2118 <p>Laying out a <span>region</span> box follows the same processing rules as for any other
vhardy@5335 2119 <a href="http://www.w3.org/TR/CSS2/visuren.html#block-boxes">block container box</a>.</p>
vhardy@5289 2120
vhardy@5354 2121 <p>The <span>RFCB</span> is a <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container box</a>
vhardy@5354 2122 with a <a href="">computed</a> 'width' of 'auto' and a whose <a href="">used</a> 'height' is
stearns@6525 2123 resolved as detailed below.</p>
vhardy@5335 2124
vhardy@5354 2125 <h4 id="rfbc-width-resolution">RFCB 'width' resolution</h4>
vhardy@5335 2126
vhardy@5335 2127 <p>At various points in the visual formatting of documents containing regions, the
vhardy@5366 2128 used 'width' of RFCBs and regions need to be resolved. In all cases, the resolution is done following the
vhardy@5354 2129 rules for <a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating
vhardy@5366 2130 widths and margins</a> (see [[!CSS21]]). Sometimes, resolving the used 'width' value
vhardy@5366 2131 requires measuring the content's
vhardy@5366 2132 <code class="css">min-content</code> and <code class="css">max-content</code> values (as
vhardy@5366 2133 <a href="http://www.w3.org/TR/css3-writing-modes/#intrinsic-sizing">defined</a> in the CSS Writing Modes Module [[!CSS3-WRITING-MODES]]). For an RFCB, <strong>these measures are
vhardy@5366 2134 made on the <em>entire</em> associated <span>named flow</span> content</strong>.</p>
vhardy@5335 2135
vhardy@5366 2136 <p>As a consequence, all <span>RFCBs</span> of <span>regions</span> associated with a given
vhardy@5366 2137 <span>named flow</span> share the
vhardy@5366 2138 same <code class="css">min-content</code> and <code class="css">max-content</code> measures.</p>
vhardy@5366 2139
vhardy@5366 2140 <p>This approach is consistent with the <a href="http://www.w3.org/TR/css3-break/#varying-size-boxes">box model for breaking</a> ([[!CSS3-BREAK]]).</p>
vhardy@5335 2141
vhardy@5335 2142
vhardy@5335 2143 <h3 id="regions-visual-formatting-steps">Regions visual formatting steps</h3>
vhardy@5289 2144
vhardy@5377 2145 <p>Formatting documents that contain <span>named flows</span> laid out in regions is a three-step
vhardy@5335 2146 process:</p>
vhardy@5335 2147
vhardy@5335 2148 <ul>
stearns@5604 2149 <li><em>Step 1: RFCB <dfn>flow fragment height</dfn> resolution</em>. In this step, the heights of fragments
vhardy@5377 2150 fitting in the regions' RFCBs are resolved.</li>
vhardy@5366 2151 <li><em>Step 2: document and regions layout</em>. In this step, the document content and regions are
vhardy@5366 2152 laid out. However, <span>named flow</span> content is not laid out in regions yet.</li>
vhardy@5352 2153 <li><em>Step 3: <span>named flow</span> layout</em>. In this step, the content of <span>named flows</span> is laid
vhardy@5335 2154 out in their respective <span>region chains</span>.</li>
vhardy@5335 2155 </ul>
vhardy@5291 2156
vhardy@5335 2157 <div class="figure">
stearns@5604 2158 <img src="images/regions-layout-three-steps.svg" width="600px" alt="visual representation of the three-step process"/>
vhardy@5335 2159 <p class="caption">Regions visual formatting steps</p>
vhardy@5335 2160 </div>
vhardy@5335 2161
vhardy@5289 2162
vhardy@5354 2163 <h4 id="rfcb-flow-fragment-height-resolution">Step 1: RFCB flow fragment height resolution</h4>
vhardy@5335 2164
vhardy@5354 2165 <p>Conceptually, resolving the flow fragment height is a two phase process.</p>
vhardy@5289 2166
vhardy@5354 2167 <h5 id="rfcb-flow-fragment-height-resolution-phase-1">RFCB flow fragment height resolution, Phase 1</h5>
vhardy@5289 2168
vhardy@5291 2169 <p>The document is laid out with a
vhardy@5289 2170 <a href="http://www.w3.org/TR/CSS2/cascade.html#used-value">used</a> height of zero
vhardy@5289 2171 for all <span>RFCB</span>s. In this phase, the content of <span>named flows</span> is not laid out in
vhardy@5291 2172 <span>regions</span>. This phase yields resolved position and sizes for all regions and
vhardy@5289 2173 their RFCBs in the document.</p>
vhardy@5289 2174
vhardy@5366 2175 <h5 id="rfcb-flow-fragment-height-resolution-phase-2">RFCB flow fragment height resolution, Phase 2</h5>
vhardy@5289 2176
vhardy@5354 2177 <p><span>Named flows</span> are laid out in <span>regions</span>. The
vhardy@5378 2178 user agent resolves the <em><span>flow fragment height</span></em> for
vhardy@5354 2179 the <span>RFCB</span>s using the remainder of the flow and accounting for
vhardy@5354 2180 <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>.
vhardy@5378 2181 This process accounts for constraints such as the 'height' or 'max-height' values, as described
vhardy@5289 2182 in the CSS 2.1 section on
vhardy@5289 2183 <a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">calculating heights
vhardy@5302 2184 and margins</a> (see the <a href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">Block-level
vhardy@5302 2185 non-replaced elements in normal flow when 'overflow' computes to 'visible'</a> section and the
vhardy@5335 2186 <a href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">complicated cases</a> section).
vhardy@5335 2187 During this phase, generated content is laid out according to the
vhardy@5378 2188 <a href="#processing-model">rules</a> described earlier in this document.
vhardy@5335 2189 </p>
vhardy@5302 2190
stearns@5579 2191 <h4 id="regions-boxes-layout">Step 2: region boxes layout</h4>
vhardy@5335 2192
vhardy@5366 2193 <p>In this step, the document is laid out according to the normal CSS layout rules.</p>
vhardy@5366 2194
vhardy@5366 2195 <p>If a measure of the content is required to resolve the used 'width' of the region box, the value
vhardy@5366 2196 is resolved as described in the
vhardy@5366 2197 <a href="#rfbc-width-resolution">RFCB width resolution</a> section.</p>
vhardy@5366 2198
vhardy@5366 2199 <p>If a measure of the content
vhardy@5413 2200 is required to resolve the used height of the RFCB (for example if the region box is absolutely positioned),
vhardy@5366 2201 the <span>flow fragment height</span> resolved in Step 1 is used for the vertical content measure of the
vhardy@5413 2202 RFCB.</p>
vhardy@5366 2203
vhardy@5335 2204 <p>At the end of this step, regions are laid out and ready to receive
vhardy@5352 2205 content from their associated <span>named flows</span>.</p>
vhardy@5335 2206
vhardy@5335 2207 <h4 id="named-flows-layout">Step 3: named flows layout</h4>
vhardy@5335 2208
vhardy@5352 2209 <p>In this final step, the content of <span>named flows</span> is laid out in the <span>regions</span>' RFCBs
vhardy@5335 2210 along with the generated content boxes.</p>
vhardy@5335 2211
vhardy@5366 2212 <p>The used 'width' for RFCBs is resolved <a href="#rfbc-width-resolution">as described before</a>.</p>
vhardy@5366 2213
vhardy@5366 2214 <p>The used 'height' of RFCBs is resolved such that none of the boxes in the region box's normal flow
vhardy@5366 2215 overflow the region's box. In other words, the RFCB boxes are stretched vertically
vhardy@5366 2216 to accommodate as much of the flow as possible without overflowing the region box and
vhardy@5366 2217 accounting for <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a> and
vhardy@5366 2218 generated content boxes.</p>
vhardy@5366 2219
vhardy@5366 2220 <p>During this phase, generated content is laid out according to the
vhardy@5378 2221 <a href="#processing-model">rules</a>
vhardy@5366 2222 described earlier in this document.</p>
vhardy@5366 2223
vhardy@5413 2224 <div class="note">
vhardy@5413 2225 <p>The model for resolving auto sized regions will cause, under certain circumstances,
vhardy@5413 2226 the flow content to be overset or underset. In other words, it will not fit tightly.
vhardy@5413 2227 The model prevents having circular dependencies in the layout model. Implementations
vhardy@5413 2228 may decide to apply further layout steps to ensure that the whole flow content is
vhardy@5413 2229 displayed to the user, even in edge cases.</p>
vhardy@5413 2230 </div>
vhardy@5413 2231
vhardy@5335 2232 <h3 id="regions-visual-formatting-implementation-note">Regions visual formatting: implementation note</h3>
vhardy@5335 2233
vhardy@5377 2234 <p>The process for resolving an RFCB's 'height' and the three-step process used to
vhardy@5378 2235 lay out documents containing regions and <span>named flows</span> are
vhardy@5335 2236 <em>conceptual</em> descriptions of what the layout
vhardy@5335 2237 should yield and implementations should optimize to reduce the number of
vhardy@5335 2238 steps and phases necessary wherever possible.</p>
vhardy@5335 2239
vhardy@5335 2240 <h3 id="regions-visual-formatting-examples">Regions visual formatting example</h3>
vhardy@5335 2241
vhardy@5335 2242 <p>This section is non-normative.</p>
vhardy@5335 2243
vhardy@5335 2244 <p>This example considers a document where content flows between three regions,
vhardy@5335 2245 and region boxes are intermixed with the normal document content.</p>
vhardy@5335 2246
vhardy@5335 2247 <div class="example">
vhardy@5335 2248 <pre>
vhardy@5336 2249 &lt;style&gt;
vhardy@5490 2250 article {
stearns@5422 2251 flow-into: article;
vhardy@5336 2252 }
vhardy@5336 2253
vhardy@5336 2254 #rA, #rB, #rC {
stearns@5445 2255 flow-from: article;
vhardy@5336 2256 height: auto;
vhardy@5366 2257 margin: 1em 1em 0em 1em;
vhardy@5366 2258 padding: 1em;
vhardy@5366 2259 border: 3px solid #46A4E9;
vhardy@5336 2260 }
vhardy@5336 2261
vhardy@5336 2262 #rA {
vhardy@5336 2263 width: auto;
vhardy@5336 2264 height: auto;
vhardy@5336 2265 }
vhardy@5336 2266
vhardy@5336 2267 #rB {
vhardy@5336 2268 float: left;
vhardy@5366 2269 width: 15em;
vhardy@5336 2270 height: auto;
vhardy@5336 2271 max-height: 150px;
vhardy@5336 2272 }
vhardy@5336 2273
vhardy@5336 2274 #rC {
vhardy@5336 2275 float: right;
vhardy@5366 2276 width: 12em;
vhardy@5336 2277 height: auto;
vhardy@5336 2278 }
vhardy@5336 2279
vhardy@5336 2280 #main-flow {
vhardy@5366 2281 padding: 0em 1em 0em 1em;
vhardy@5336 2282 }
vhardy@5336 2283
vhardy@5336 2284 &lt;/style&gt;
vhardy@5336 2285 &lt;body&gt;
vhardy@5490 2286 &lt;article&gt;
stearns@5894 2287 &lt;p style="break-after:region;"&gt;I am not a ... &lt;/p&gt;
vhardy@5336 2288 &lt;p&gt;...&lt;/p&gt;
vhardy@5490 2289 &lt;/article&gt;
vhardy@5336 2290 &lt;div id="rA"&gt;&lt;/div&gt;
vhardy@5336 2291 &lt;div id="rB"&gt;&lt;/div&gt;
vhardy@5336 2292 &lt;div id="rC"&gt;&lt;/div&gt;
vhardy@5336 2293
vhardy@5336 2294 &lt;div id="main-flow"&gt;
vhardy@5336 2295 &lt;p&gt;Lorem ipsum dolor ...&lt;/p&gt;
vhardy@5336 2296 &lt;/div&gt;
vhardy@5336 2297 &lt;/body&gt;
vhardy@5335 2298 </pre>
vhardy@5335 2299 </div>
vhardy@5335 2300
vhardy@5366 2301 <p>The following sections and figures illustrate the intermediate results for the visual formatting process.
vhardy@5366 2302 In the following, we call RFCB-A, RFCB-B and RFCB-C the <span>RFCBs</span> for
vhardy@5366 2303 regions rA, rB and rC respectively. </p>
vhardy@5366 2304
vhardy@5366 2305 <h4>Step 1 - Phase 1: Laying out RFCBs with used height of zero</h4>
vhardy@5366 2306
vhardy@5366 2307 <p>Applying the rules for Step 1, Phase 1, the computed 'auto' 'width' values for the RFCBs are resolved
vhardy@5366 2308 to used values according to the normal
vhardy@5366 2309 <a href="http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">CSS layout rules</a> meaning they
vhardy@5366 2310 stretch to the width of their containing block's content box.</p>
vhardy@5366 2311
vhardy@5366 2312 <ol>
stearns@6525 2313 <li>RFCB-A: stretches to fit the rA content box.
stearns@6525 2314 <p>Since rA also has an 'auto' 'width', its own used 'width' is stretched to fit the
stearns@6525 2315 <code>&lt;body&gt;</code> content box.</p></li>
vhardy@5366 2316 <li>RFCB-B: stretches to fit the <code>rB</code> content box.</li>
vhardy@5366 2317 <li>RFCB-C: stretches to fit the <code>rC</code> content box.</li>
vhardy@5366 2318 </ol>
vhardy@5366 2319
vhardy@5366 2320 <p>Also applying the rules for Step 1, Phase 1, the used values for the RFCBs 'height' properties are all zero.</p>
vhardy@5366 2321
vhardy@5366 2322 <p>Conceptually, this produces the layout illustrated below.</p>
vhardy@5335 2323
vhardy@5335 2324 <div class="figure">
vhardy@5366 2325 <img src="images/flow-fragment-height-phase-1.png" width="500px" alt="Step 1 - Phase 1: Layout RFBCs with used heights of 0"/>
vhardy@5366 2326 <p class="caption">Step 1 - Phase 1: Layout RFBCs with used heights of 0</p>
vhardy@5335 2327 </div>
vhardy@5366 2328
vhardy@5366 2329 <h4>Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments heights</h4>
vhardy@5335 2330
vhardy@5366 2331 <p>In this second phase of Step 1, the named flow is laid out in <span>regions</span>
vhardy@5366 2332 and the height of each fragment falling in each RFCB is computed.</p>
vhardy@5366 2333
vhardy@5366 2334 <p>The user agent lays out as much of the flow into an area
vhardy@5366 2335 with RFCB-A's used 'width'. rA's 'height' computes to 'auto' and there is no vertical maximum
vhardy@5366 2336 height for RFCA's 'height'. However, because there is a break after the
vhardy@5366 2337 first paragraph in the 'article' <code>named flow</code>, only this first paragraph is
vhardy@5366 2338 laid out in RFCB-A and FH-A (the flow fragment height for RFCB-A) is resolved by laying out
vhardy@5366 2339 this first paragraph in the used 'width'.</p>
vhardy@5366 2340
vhardy@5366 2341 <p>At this point, the user agent lays out as much of the remaining flow as possible in RFCB-B.
vhardy@5366 2342 Because rB's 'max-height' computed value is '150px', the user agent only lays out
vhardy@5366 2343 the 'article' named flow using RFCB-B's used 'width' until the point where
vhardy@5366 2344 laying out additional content would cause RFCB-B to overflow rB's box.
vhardy@5366 2345 The fragment height for RFCB-B is resolved: FH-B (<code class="css">150px</code>).</p>
vhardy@5366 2346
vhardy@5366 2347 <p>Finally, the user agent lays out the remainder of the flow in RFCB-C.
vhardy@5366 2348 Because rC has no other constraints and no region breaks, the remaining content is
vhardy@5366 2349 laid out in RFCB-C's used 'width'. This results in a resolved flow fragment height: FH-C.</p>
vhardy@5366 2350
vhardy@5335 2351 <div class="figure">
vhardy@5366 2352 <img src="images/flow-fragment-height-phase-2.png" width="370px" alt="Step 1 - Phase 2: Measure flow fragments heights"/>
vhardy@5354 2353 <p class="caption">Step 1 - Phase 2: Measure flow fragments heights</p>
vhardy@5335 2354 </div>
vhardy@5335 2355
vhardy@5366 2356 <h4>Step 2: Layout document and regions without named flows</h4>
vhardy@5366 2357
vhardy@5366 2358 <p>The used 'width' of RFCB-A, RFCB-B and RFCB-C are resolved as in the previous step. However, the
vhardy@5366 2359 'height' is resolved differently.</p>
vhardy@5366 2360
vhardy@5366 2361 <p>Resolving the 'height' of rA <a href="http://www.w3.org/TR/CSS2/visudet.html#normal-block">requires a content measure</a>
vhardy@5366 2362 which is FH-A (the flow fragment height for RFCB-A).</p>
vhardy@5366 2363
stearns@6526 2364 <p>The 'height' of rB results from first computing its
vhardy@5366 2365 <a href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">content measure</a> and then applying the
vhardy@5366 2366 <a href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">rules for 'max-height'</a>. Here, the
vhardy@5366 2367 vertical content measure evaluates to FH-B. After applying the
vhardy@5366 2368 rules for 'max-height' and accounting for margins, padding and borders, the used 'height' of rB
stearns@6526 2369 is resolved to LH-B (<code class="css">150px</code>).</p>
vhardy@5366 2370
vhardy@5366 2371 <p>The 'height' of rC's box results from
vhardy@5366 2372 <a href="http://www.w3.org/TR/CSS2/visudet.html#block-root-margin">calculating
stearns@6525 2373 its content measure</a>: FH-C becomes rC's used 'height'.</p>
vhardy@5366 2374
vhardy@5335 2375 <div class="figure">
vhardy@5335 2376 <img src="images/regions-visual-formatting-step-2.png" width="370px" alt="Step 2: Layout document and regions without named flows"/>
vhardy@5352 2377 <p class="caption">Step 2: Layout document and regions without <span>named flows</span></p>
vhardy@5335 2378 </div>
vhardy@5335 2379
vhardy@5366 2380 <h4>Step 3: named flows layout</h4>
vhardy@5366 2381
vhardy@5366 2382 <p>In this final step, the <code class="css">article</code> <span>named flow</span> is laid out in its
vhardy@5366 2383 <span>region chain</span>. The used 'width' for each of the RFCB is resolved as in step 1 above.</p>
vhardy@5366 2384
vhardy@5366 2385 <p>The used 'height' for the RFCB is a result of laying out the as much of the content in the
vhardy@5366 2386 <span>region</span> without overflowing its content box and following the
vhardy@5366 2387 <a href="http://www.w3.org/TR/css3-break/">fragmentation rules</a>.</p>
vhardy@5366 2388
vhardy@5366 2389 <p>Because the computed 'width' of the RFCB has not changed and the fragmentation rules applied are
vhardy@5366 2390 the same as in Phase 1, Step 2, the used 'height' for RFCB-A, RFCB-B and RFCB-C are
vhardy@5366 2391 LH-A, LH-B and LH-C, respectively.</p>
vhardy@5366 2392
vhardy@5366 2393 <p>There may be situations where the used 'height' of RFCBs resolved in Step 3 are different from the
vhardy@5366 2394 <span>flow fragment height</span> computed in Step 1 Phase 2.</p>
vhardy@5366 2395
vhardy@5354 2396 <div class="figure">
vhardy@5366 2397 <img src="images/regions-visual-formatting-step-3.png" width="370px" alt="Step 3: Final result after laying out named flows in regions"/>
vhardy@5354 2398 <p class="caption">Step 3: Final result after laying out named flows in regions</p>
vhardy@5354 2399 </div>
vhardy@5354 2400
vhardy@5335 2401
vhardy@5289 2402 <h2 id="relation-to-document-events">Relation to document events</h2>
vhardy@5289 2403
vhardy@5289 2404 <p>The CSS regions module does not alter the normal processing of
vhardy@5289 2405 events in the document tree. In particular, if an event occurs on an
vhardy@5352 2406 element that is part of a <span>named flow</span>, the <a href=
vhardy@5289 2407 "http://www.w3.org/TR/dom/#events">event's
vhardy@5289 2408 bubble and capture phases</a> happen following the document tree order.</p>
vhardy@5289 2409
vhardy@5289 2410
vhardy@2945 2411 <h2 id="relation-to-other-specifications">Relation to other
vhardy@2945 2412 specifications</h2>
alexmog@2565 2413
vhardy@2779 2414 <p>This specification is related to other specifications as described in
vhardy@2779 2415 the <a href='#references'>references</a> section. In addition, it is
vhardy@2779 2416 related to the following specifications:</p>
alexmog@2565 2417
vhardy@2779 2418 <ol>
vhardy@5373 2419 <li>CSS Fragmentation Module Level 3 [[CSS3-BREAK]]. This module defines the
vhardy@5373 2420 rules for fragmenting content over multiple containers and applies to
vhardy@5373 2421 CSS regions in addition to applying to multi-column and paged media.</li>
vhardy@5373 2422
vhardy@5390 2423 <li>CSS Pagination Templates Module Level 3 [[CSS3-PAGE-TEMPLATE]]. This module
vhardy@5373 2424 defines a syntax to define layout templates which can be used
vhardy@5373 2425 when paginating content. The page templates use regions.</li>
vhardy@5373 2426
bert@3938 2427 <li>CSS Exclusions Module [[CSS3-EXCLUSIONS]]. This module defines a
vhardy@2779 2428 generic way to define arbitrarily shaped exclusions into which content
vhardy@2779 2429 can flow or around which content can flow. This can be seen as an
vhardy@2791 2430 extension to the way CSS floats provide rectangular areas into which
vhardy@2779 2431 content flows and around which content flows. In advanced layout
vhardy@2791 2432 designs, it is expected that the CSS Exclusions module will be commonly
vhardy@3301 2433 combined with the CSS regions module.</li>
alexmog@2565 2434
bert@3938 2435 <li>CSS Line Grid Module [[CSS3-LINE-GRID]]. This module defines a
vhardy@2779 2436 concept of line grid to align the position of lines in different
vhardy@2779 2437 elements. The line grid functionality is related and needed for
vhardy@2779 2438 aligning content flowing in separate regions.</li>
vhardy@2779 2439 </ol>
vhardy@3940 2440
vhardy@3940 2441 <h2 id="usecases">Use Cases</h2>
vhardy@3940 2442
stearns@6816 2443 <p>Use cases are described on
stearns@6816 2444 <a href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">these</a>
stearns@6816 2445 <a href="http://wiki.csswg.org/spec/css3-regions/regions-print-use-cases">pages</a>.</p>
alexmog@2565 2446
vhardy@2779 2447 <h2 id="conformance">Conformance</h2>
vhardy@3073 2448
vhardy@3073 2449 <h2 id="changes">Changes</h2>
alexmog@2565 2450
stearns@6606 2451 <h3 id="changes_from_Aug_28_2012">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">August 28<sup>th</sup> 2012</a> version</h3>
stearns@6606 2452
stearns@6606 2453 <ul>
stearns@6841 2454 <li>Added section on fragmenting the fragmenters</li>
stearns@6840 2455 <li>Added section on handling circular flow-from and flow-into situations</li>
stearns@6833 2456 <li>Added alignment and justification to region styling properties</li>
stearns@6816 2457 <li>Added timing for regionLayoutUpdate event</li>
stearns@6816 2458 <li>Clarified interaction between content and flow-from for pseudo-elements</li>
stearns@6606 2459 <li>Changed NamedFlowCollection getters to return undefined when there is no NamedFlow.</li>
stearns@6796 2460 <li>Changed region-overflow property to region-fragment.</li>
stearns@6606 2461 </ul>
stearns@6606 2462
stearns@5966 2463 <h3 id="changes_from_May_03_2012">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120503/">May 3<sup>rd</sup> 2012</a> version</h3>
stearns@5966 2464
stearns@5966 2465 <ul>
stearns@6606 2466 <li>Removed exceptions from the Region interface.</li>
stearns@6606 2467 <li>Changed NamedFlowCollection from live to a static snapshot.</li>
stearns@6606 2468 <li>Changed NamedFlow to inherit from EventTarget.</li>
stearns@6400 2469 <li>Removed flowFrom from Region interface and changed method name to getComputedRegionStyle().</li>
stearns@6298 2470 <li>Region interface is now a supplemental interface with the [NoInterfaceObject] extended attribute.</li>
stearns@6105 2471 <li>Added note for regionLayoutUpdate dispatching in nested flows.</li>
stearns@6105 2472 <li>Removed Document.getFlowByName() in favor of NamedFlowCollection.namedItem().</li>
stearns@6105 2473 <li>Changed to overset:false for NULL NamedFlow.</li>
stearns@6105 2474 <li>Changed regionLayoutUpdate to not bubble.</li>
stearns@5966 2475 </ul>
stearns@5966 2476
stearns@5470 2477 <h3 id="changes_from_November_29_2011">Changes from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20111129/">November 29<sup>th</sup> 2011</a> version</h3>
vhardy@4119 2478
vhardy@4119 2479 <ul>
vhardy@4119 2480 <li>Modified region styling examples to use element selector instead of of pseudo-code selectors (this had been omitted in the
vhardy@4119 2481 previous pass at removing pseudo-code from the examples).</li>
vhardy@4119 2482 <li>Removed divs with class set to "issue moved", "issue stale" and "issue resolved" since these divs where not displayed.
vhardy@4119 2483 <li>Minor updates to the alternate stylesheet.</li>
vhardy@4314 2484 <li>Removed "This section is normative" paragraphs since in CSS specifications, sections are normative unless
vhardy@4314 2485 otherwise specified.</li>
vhardy@4314 2486 <li>Removed "This section is informative" paragraphs since in CSS specifications notes are always informative.</li>
vhardy@4318 2487 <li>Reworded the text about flow-into: &lt;ident&gt; and removed obsolete text about the interaction with the
vhardy@4318 2488 'content' property.</li>
vhardy@4331 2489 <li>Removed "this section is non-normative" from the "Regions Concepts" section.</li>
vhardy@4336 2490 <li>In the section on region breaks, removed descriptions of break values normatively defined in external specifications.
vhardy@4336 2491 Removed the section about split boxes and replaced with paragraph referencing the page breaking behavior.
vhardy@4336 2492 Removed the discussion about how the 'overflow' property applies to content flown in regions from the
vhardy@4336 2493 break section, since this is covered in the section on 'region-overflow' already. See <a href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0477.html">mailing list feedback.</a></li>
vhardy@4338 2494 <li>Clarified that @region style rules only apply to the 'portion' of an element that falls into
vhardy@4338 2495 the corresponding region and added an issue that the model for 'partial' styling needs to
vhardy@4338 2496 be defined. See <a href="http://lists.w3.org/Archives/Public/www-style/2011Dec/0480.html">mailing list feedback</a>.</li>
vhardy@4395 2497 <li>Clarified that the <code>NodeList</code> returned by <code>getRegionsByContentNode</code> is live.</li>
vhardy@4400 2498 <li>Added a name property to the <code>NamedFlow</code> interface. Added a <code>NamedFlowCollection</code>
vhardy@4400 2499 interface and added a <code>getNamedFlows</code> method on the <code>Document</code> interface, as
vhardy@4400 2500 per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug 15828</a>.</li>
vhardy@4409 2501 <li>Modified wording about containing block resolution for absolutely positioned elements in a
vhardy@4409 2502 named flow.</li>
vhardy@4413 2503 <li>Modified initial examples as per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a></li>
vhardy@4415 2504 <li>Multiple editorial changes following
vhardy@4415 2505 <a href="http://lists.w3.org/Archives/Public/www-style/2012Feb/0001.html">mailing list review comments</a></li>
vhardy@5094 2506 <li>Fixed DOM references to now point to the DOM TR</li>
vhardy@5095 2507 <li>Fixed Web IDL issues as reported in <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15931">Issue 15931</a></li>
vhardy@5131 2508 <li>Added text to explain support for multi-column elements as required by <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15191">Issue 15191</a> and <a href="http://www.w3.org/Style/CSS/Tracker/actions/375">Action 375</a>.</li>
vhardy@5232 2509 <li>Renamed 'regionOverflow' to 'regionOverset' to avoid confusion between fitting a flow in
vhardy@5232 2510 regions and the concept of visual overflow that the word 'overflow' (and the property) carry.</li>
vhardy@5232 2511 <li>Reworked the partial document interface following the <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14948">Issue 14948</a> on <code>getFlowByName</code>.</li>
vhardy@5255 2512 <li>Updated the object model section as proposed on the <a href="http://wiki.csswg.org/spec/css3-regions/css-om">wiki</a> and in particular:
vhardy@5255 2513 <ul>
vhardy@5255 2514 <li>introduced a <code>Region</code> interface to replace the supplemental Element interface</li>
vhardy@5255 2515 <li>Added a 'flowFrom' attribute on the Region interface</li>
vhardy@5255 2516 <li>NamedFlow.getRegions() was added</li>
vhardy@5255 2517 <li>Renamed getContentNode to getContent and getRegionsByContentNode to getRegionsByContent as
vhardy@5255 2518 per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15879">Isseu 15879</a></li>
vhardy@5255 2519 <li>NamedFlow now returns static lists (see <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16286">Issue 16286</a>)</li>
vhardy@5255 2520
vhardy@5255 2521 </ul>
vhardy@5255 2522 </li>
vhardy@5264 2523 <li>Modified region layout event to be dispatched on <code>NamedFlow</code> instead of region
vhardy@5264 2524 as before. Was requested by <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15938">Issue 15938</a>
vhardy@5264 2525 and required in the general effort to have the DOM APIs work with non-element regions.</li>
vhardy@5267 2526 <li>Changed paragraph on pseudo-elements to disallow 'flow-into' on all pseudo-elements because
vhardy@5267 2527 moving a '::before' element (for a example) to a named flow does not seem useful and causes specification
vhardy@5267 2528 and implementation complexity.</li>
vhardy@5270 2529 <li>Added section about getClientRects(), getBoundingClientRect(), offsetWidth, offsetHeight, offsetTop and
vhardy@5270 2530 offsetLeft.</li>
vhardy@5290 2531 <li>Added 'Regions visual formatting details' section to better describe the model for
vhardy@5290 2532 resolving auto sizing on regions.</li>
vhardy@5373 2533 <li>Reworked the initial specification example.</li>
stearns@5453 2534 <li>Changed break and region-overflow properties to apply to visual media instead of paged.</li>
stearns@5453 2535 <li>Added opacity to region styling.</li>
stearns@5470 2536 <li>Added possibility of ::before content contributing to overflow.</li>
stearns@5598 2537 <li>Added CSSRegionStyleRule</li>
vhardy@4119 2538 </ul>
vhardy@4119 2539
vhardy@4119 2540
vhardy@3073 2541 <h3 id="changes_from_June_09_2011">Changes from <a href="http://www.w3.org/TR/2011/WD-css3-regions-20110609/">June 09<sup>th</sup> 2011</a> version</h3>
vhardy@3073 2542
vhardy@3073 2543 <ul>
vhardy@3301 2544 <li>Editorial changes (typos, rephrasings).</li>
vhardy@3547 2545 <li>Made 'content-order' a &lt;integer&gt; and not a &lt;float&gt; following a working group
vhardy@3073 2546 <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0329.html">resolution</a></li>
vhardy@3073 2547 <li>Added Alex Mogilevsky as an editor</li>
vhardy@3558 2548 <li>Flow names became &lt;ident&gt; instead of &lt;string&gt; following a working group
vhardy@3073 2549 <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a></li>
vhardy@3073 2550 <li>Removed issue about possibly altering the DOM Events model for region events following
vhardy@3073 2551 a working group
vhardy@3073 2552 <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a></li>
vhardy@3073 2553 <li>Made the "relation to document events" section informative following a working group
vhardy@3073 2554 <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a></li>
vhardy@3073 2555 <li>Removed issue in section "The NamedFlow interface" following the working group's
vhardy@3073 2556 <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a> to
vhardy@3073 2557 have both NamedFlow and the Element interface extension</li>
vhardy@3073 2558 <li>Following a working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0413.html">resolution</a>:
vhardy@3073 2559 <ul>
vhardy@3073 2560 <li>Turned the first issue in the "Extensions to the Element interface" into a note
vhardy@3073 2561 explaining that the NamedFlow interface can be used when regions are pseudo-elements.</li>
vhardy@3138 2562 <li>Added NamedFlowUpdate</li>
vhardy@3073 2563 </ul>
vhardy@3073 2564 </li>
vhardy@3073 2565 <li>Excluded 'none', 'inherit' and 'initial' from the possible identifier names on
vhardy@3073 2566 the flow property following <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0583.html">discussion</a> on the mailing list.</li>
vhardy@3073 2567 <li>Simplified integration discussion on multi-column layout and just state that since
vhardy@3073 2568 column boxes are not addressable by selectors, they cannot be regions.</li>
vhardy@3262 2569 <li>Added specification of how the 'flow-into' property interacts with object, embed and iframe
vhardy@3073 2570 elements.</li>
vhardy@3138 2571 <li>Excluded 'default' from the possible identifier names on the flow property because it
vhardy@3138 2572 <a href="http://www.w3.org/TR/2006/WD-css3-values-20060919/#keywords">may get reserved</a>.</li>
vhardy@3138 2573 <li>Added to the definition of 'auto' on 'region-overflow' specifying that region breaks must
vhardy@3138 2574 be ignored.</li>
vhardy@3138 2575 <li>Renamed 'Document.flowWithName' to 'Document.getFlowByName' since it is not a property.</li>
vhardy@3138 2576 <li>Added a note that a 'NamedFlow' instance is live.</li>
vhardy@3138 2577 <li>Added an 'undefined' string value to the regionOverflow property on the Element interface
vhardy@3138 2578 extension.</li>
vhardy@3272 2579 <li>Renamed NamedFlowEvent to regionLayoutUpdate to avoid having 'Event' in the event name.</li>
alexmog@3156 2580 <li>Added description for special behavior of iframe/object/embed as
alexmog@3156 2581 flow source</li>
vhardy@3262 2582 <li>Removed issue on copying content to a named flow instead of moving elements to named
vhardy@3262 2583 flow following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
vhardy@3262 2584 <li>Removed issue on content:flow-from v.s., flow-from property following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
vhardy@3262 2585 <li>Renamed 'flow' to 'flow-into' following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
vhardy@3262 2586 <li>Updated the css3-grid-align example following working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a> that
vhardy@3262 2587 it should use &lt;div&gt; instead of grid-cell pseudo elements that were removed
vhardy@3262 2588 from the CSS Grid Layout specification.</li>
vhardy@3262 2589 <li>Renamed 'from-flow' to 'flow-from' following a working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
vhardy@3262 2590 <li>Limited the applicability of 'content: flow-from()' to block container box and added
vhardy@3262 2591 a note that this might be expanded in the future, following a working group <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0069.html">resolution</a>.</li>
vhardy@3262 2592 <li>Removed issue about API to find which region displays an element in a named flow
vhardy@3262 2593 since <a href="http://www.w3.org/Style/CSS/Tracker/actions/350">ACTION-350</a> was
vhardy@3262 2594 created to add this API.</li>
vhardy@3267 2595 <li>In the 'flow' property description, removed the required wrapper anonymous
vhardy@3267 2596 block as agreed on <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0161.html">mailing list discussion</a>.</li>
vhardy@3267 2597 <li>Reworded the paragraph on how regions create a new stacking context, as
vhardy@3302 2598 per the <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0025.html">mailing list discussion</a>.</li>
vhardy@3301 2599 <li>Reworked the "CSS regions Model" section to now be "CSS regions Layout". Moved the
vhardy@3267 2600 definition of a region as the first sub-section.</li>
vhardy@3267 2601 <li>Removed the "Visual Formatting Model and Flows" section to match the new Regions Model
vhardy@3301 2602 (now CSS regions Layout) section.</li>
vhardy@3267 2603 <li>Moved the sections on allowed region breaks, forced region breaks and "best" regions
vhardy@3267 2604 breaks to follow the property definitions to follow the formatting of the paged
vhardy@3267 2605 media section in CSS 2.1.</li>
vhardy@3267 2606 <li>Added note about why regions create a new stacking context following the discussion
vhardy@3267 2607 on the <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing list</a>.</li>
vhardy@3267 2608 <li>Removed sentence about content:none making elements disconnected following the
vhardy@3267 2609 discussion on the <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing list</a>.</li>
vhardy@3267 2610 <li>Removed sentence about content:none making elements disconnected following the
vhardy@3267 2611 discussion on the <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0158.html">mailing list</a>.</li>
vhardy@3272 2612 <li>Added the ::region-before and a ::region-after pseudo-elements.</li>
vhardy@3272 2613 <li>Added note of caution when using selectors and the 'flow-into' property following
vhardy@3272 2614 a <a href="http://lists.w3.org/Archives/Public/www-style/2011Jul/0191.html">mailing list discussion</a>.</li>
vhardy@3301 2615 <li>Removed sections about allowed, forced and best region breaks to align with the
vhardy@3301 2616 multi-column specification approach and until the group agrees on where and how the
vhardy@3301 2617 general issue of breaks (regions/pages/columns) should be addressed.</li>
vhardy@3301 2618 <li>Removed the section on Integration with other specifications since specifications that
vhardy@3301 2619 was superfluous especially since there is no specific integration with multi column,
vhardy@3301 2620 grid or template layout.</li>
vhardy@3377 2621 <li>Added a note that regions establish a new block formatting context.</li>
vhardy@3377 2622 <li>Renamed content-order to region-order.</li>
vhardy@3377 2623 <li>Added a note about overflowing content in regions (e.g., for content with borders).</li>
vhardy@3377 2624 <li>Added a note that a region cannot layout content it is part of (to avoid creating a
vhardy@3377 2625 circular dependency) in the flow-from description, specifying that if flow-from
vhardy@3377 2626 references the flow an element is part of, then the element does not format
vhardy@3377 2627 anything visually.</li>
vhardy@3547 2628 <li>Replaced 'content:flow-from(&lt;ident&gt;)' with 'flow-from: &lt;ident&gt;' following a
vhardy@3547 2629 <a href="http://krijnhoetmer.nl/irc-logs/css/20110824">working group resolution</a>.</li>
vhardy@3547 2630 <li>Added more specific wording about auto width and auto height, following
vhardy@3547 2631 <a href="http://www.w3.org/Style/CSS/Tracker/actions/351">ACTION 351</a>.</li>
vhardy@3547 2632 <li>Reworked section on region markers to now use '::before' and '::after' and explain
vhardy@3547 2633 how 'display:run-in' works with regions.</li>
vhardy@3547 2634 <li>Modified the @region style rule to remove the ::region-lines pseudo-selector.</li>
vhardy@3547 2635 <li>Removed the 'region-order' property following implementation feedback.</li>
vhardy@3660 2636 <li>Specified that region-overflow does not influence a region's size.</li>
vhardy@3660 2637 <li>Specified that the flow's writing mode is defined by the first region's writing mode
vhardy@3660 2638 following <a href="http://lists.w3.org/Archives/Public/www-style/2011Aug/0306.html">mailing list discussion</a>.</li>
vhardy@3660 2639 <li>Made iframe, object and embed support of flow-into optional following
vhardy@3660 2640 <a href="http://lists.w3.org/Archives/Public/www-style/2011Sep/0073.html">mailing list discussion</a>.</li>
vhardy@3660 2641 <li>Clarified that flow content following the last break in the last region is not rendered,
vhardy@3660 2642 following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0167.html">mailing list
bert@3938 2643 discussions.</a></li>
vhardy@3660 2644 <li>Modified the rule for computing the width and height of a region when they are set to auto,
vhardy@3660 2645 following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0216.html">a mailing list
vhardy@3660 2646 discussion.</a></li>
vhardy@3660 2647 <li>Added 'auto' to the list of invalid flow identifiers.</li>
vhardy@3660 2648 <li>Made 'none' the initial value for 'flow-into' and aligned with 'flow-from', as
vhardy@3660 2649 explained in this <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0576.html">email</a>.
vhardy@3660 2650 Also allowed the 'inherit' value on 'flow-from' and 'flow-into' (same email).</li>
vhardy@3660 2651 <li>Added note about nested region styling following <a href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0650.html">a mailing list discussion</a>.</li>
vhardy@3681 2652 <li>Added additional DOM interface following <a href="http://www.w3.org/Style/CSS/Tracker/actions/350">Action 350</a>.</li>
vhardy@3940 2653 <li>Clarified that a region becomes a region only if its 'content' property computes to
vhardy@3940 2654 normal, following the resolution of <a href="http://wiki.csswg.org/spec/css3-regions#issue-22content-vs-flow-from-precedence">Issue 22</a>.</li>
vhardy@3940 2655 <li>Removed text about special iframe behavior as a result of
vhardy@3940 2656 <a href="http://www.w3.org/Style/CSS/Tracker/actions/376">ACTION 376</a>.</li>
vhardy@3940 2657 <li>Made the selectors explicit in the initial section code examples, following
vhardy@3940 2658 discussion in <a href="http://krijnhoetmer.nl/irc-logs/css/20111030">San Jose, October 2011</a> face to face meeting.</li>
vhardy@3940 2659 <li>Added section on use cases following <a href="http://www.w3.org/Style/CSS/Tracker/actions/377">ACTION-377</a>.</li>
vhardy@3073 2660 </ul>
vhardy@3073 2661
vhardy@2779 2662 <h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
alexmog@2565 2663
vhardy@3547 2664 <p>The editors are grateful to the CSS working group for their feedback and help with
vhardy@3547 2665 the genesis of this specification.</p>
vhardy@3547 2666
vhardy@3547 2667 <p>In addition, the editors would like to thank the following individuals for their contributions,
vhardy@3547 2668 either during the conception of CSS regions or during its development and specification review
vhardy@3547 2669 process:</p>
stearns@5634 2670 <p>Rossen Atanassov,
stearns@5634 2671 Tab Atkins,
stearns@6400 2672 Mihai Balan,
stearns@5634 2673 Andrei Bucur,
stearns@6400 2674 Razvan Caliman,
stearns@5634 2675 Alexandru Chiculita,
stearns@5634 2676 Phil Cupp,
stearns@5634 2677 Arron Eicholz,
stearns@5634 2678 John Jansen,
stearns@6522 2679 Dimitri Glazkov,
stearns@5634 2680 Daniel Glazman,
stearns@5634 2681 Arno Gourdol,
stearns@5634 2682 David Hyatt,
stearns@5634 2683 Brian Heuston,
stearns@5634 2684 Ian Hickson,
stearns@5634 2685 Jonathan Hoersch,
stearns@5634 2686 Michael Jolson,
stearns@5634 2687 Brad Kemper,
stearns@5634 2688 Håkon Wium Lie,
stearns@5634 2689 Markus Mielke,
stearns@5634 2690 Robert O'Callahan,
stearns@5634 2691 Edward O'Connor,
stearns@5634 2692 Mihnea Ovidenie,
stearns@5634 2693 Virgil Palanciuc,
stearns@5634 2694 Olga Popiv,
stearns@5634 2695 Christoph Päper,
stearns@5634 2696 Anton Prowse,
stearns@5634 2697 Peter Sorotokin,
stearns@5634 2698 Christian Stockwell,
stearns@5634 2699 Eugene Veselov,
stearns@5634 2700 Boris Zbarsky,
stearns@5634 2701 Stephen Zilles
stearns@5634 2702 and the CSS Working Group members.
stearns@5634 2703 </p>
stearns@5445 2704
stearns@5445 2705 <h2 id="intro-example-code" class="no-num">Appendix A. Example Code for Introduction</h2>
stearns@5445 2706 <p>The following is one possible way
stearns@5445 2707 to code the example from
stearns@5445 2708 the <a href="#introduction">introduction</a>.
stearns@5445 2709 This code uses grid cells
stearns@5445 2710 to define, size and position the region areas
stearns@5445 2711 but table layout, absolute positioning,
stearns@5445 2712 or any other CSS layout facility could be used.</p>
stearns@5445 2713
vhardy@5489 2714 <div class="example"><pre>
stearns@5445 2715 &lt;style&gt;
stearns@5445 2716 #grid {
stearns@5445 2717 width: 80vw;
stearns@5445 2718 height: 60vw;
stearns@5445 2719 grid-template: "aaa.d"
stearns@5445 2720 "....d"
stearns@5445 2721 "bbb.d"
stearns@5445 2722 "....d"
stearns@5445 2723 "ccc.d";
stearns@5445 2724 grid-rows: 52% 4% 20% 4% 20%;
stearns@5445 2725 grid-columns: 30% 5% 30% 5% 30%;
stearns@5445 2726 }
stearns@5445 2727 #region1 { grid-cell: a; }
stearns@5445 2728 #region2 { grid-cell: b; }
stearns@5445 2729 #boxA { grid-cell: c; }
stearns@5445 2730 #region3 { grid-cell: d; }
stearns@5445 2731
stearns@5445 2732 #region4 {
stearns@5445 2733 width: 80vw;
stearns@5445 2734 }
stearns@5445 2735
stearns@5445 2736 #region2 {
stearns@5445 2737 column-count: 2;
stearns@5445 2738 }
vhardy@5489 2739
vhardy@5489 2740 <span class="highlight">/*
vhardy@5489 2741 * Creates the named flow
vhardy@5489 2742 */</span>
vhardy@5490 2743 article {
vhardy@5489 2744 <strong>flow-into: article_flow;</strong>
vhardy@5489 2745 }
vhardy@5489 2746
vhardy@5489 2747 <span class="highlight">/*
vhardy@5489 2748 * Associate it with the intended CSS Regions.
vhardy@5489 2749 * This creates a region chain for the named flow.
vhardy@5489 2750 */</span>
vhardy@5489 2751 #region1, #region2, #region3, #region4 {
vhardy@5489 2752 <strong>flow-from: article_flow;</strong>
vhardy@5489 2753 }
vhardy@5489 2754
stearns@5445 2755 &lt;/style&gt;
stearns@5445 2756
vhardy@5489 2757 <span class="highlight">&lt;!--
vhardy@5489 2758 The following code element is the content to flow
vhardy@5489 2759 through the region chain.
vhardy@5489 2760 --&gt;</span>
vhardy@5489 2761
stearns@6525 2762 &lt;article&gt;
vhardy@5489 2763 &lt;h1&gt;Introduction&lt;/h1&gt;
vhardy@5489 2764 &lt;p&gt;This is an example ...&lt;/p&gt;
vhardy@5489 2765
vhardy@5489 2766 &lt;h2&gt;More Details&lt;/h2&gt;
vhardy@5489 2767 &lt;p&gt;This illustrates ...&lt;/p&gt;
vhardy@5489 2768 &lt;p&gt;Then, the example ...&lt;/p&gt;
vhardy@5489 2769 &lt;p&gt;Finally, this ...&lt;/p&gt;
vhardy@5490 2770 &lt;/article&gt;
vhardy@5489 2771
vhardy@5489 2772 <span class="highlight">&lt;!--
vhardy@5489 2773 For this example, we layout the regions with a grid.
vhardy@5489 2774 Regions could be pseudo-elements and could be laid out
vhardy@5489 2775 with another layout module (e.g., flexible boxes)
vhardy@5489 2776 --&gt;</span>
stearns@5445 2777 &lt;div id="grid"&gt;
stearns@5445 2778 &lt;div id="region1"&gt;&lt;/div&gt;
stearns@5445 2779 &lt;div id="region2"&gt;&lt;/div&gt;
stearns@5445 2780 &lt;div id="boxA"&gt;&lt;/div&gt;
stearns@5445 2781 &lt;div id="region3"&gt;&lt;/div&gt;
stearns@5445 2782 &lt;/div&gt;
stearns@5445 2783 &lt;div id="region4"&gt;&lt;/div&gt;
vhardy@5489 2784 </pre></div>
stearns@5445 2785
stearns@5445 2786
stearns@5445 2787
stearns@5445 2788 <div class="note"><span class="note-prefix">Note </span>
stearns@5445 2789 <p>
stearns@5445 2790 Note that a multi-column element is used for #region2,
stearns@5445 2791 which is a bit gratuitous here
stearns@5445 2792 (because grid cells could be used).
stearns@5445 2793 The reason to use a multi-column element
stearns@5445 2794 is to illustrate that
stearns@5445 2795 regions can be multi-column.</p>
stearns@5445 2796 </div>
stearns@5445 2797
stearns@5445 2798
vhardy@2779 2799 <h2 class="no-num" id="references">References</h2>
alexmog@2565 2800
stearns@6818 2801 <div class="issue-marker wrapper">
stearns@6818 2802 <div class="issue-marker" data-bug_id="18767" data-bug_status="NEW">
stearns@6818 2803 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=18767">Issue-18767</a>
stearns@6818 2804 <div class="issue-details">
stearns@6818 2805 <p class="short-desc">Something appears to be wrong with the checkSpecificationIssues() call</p>
stearns@6818 2806 </div>
stearns@6818 2807 </div>
stearns@6818 2808 </div>
stearns@5576 2809
vhardy@2779 2810 <h3 class="no-num" id="normative-references">Normative references</h3>
vhardy@2779 2811 <!--begin-normative--><!--end-normative-->
alexmog@2565 2812
vhardy@2779 2813 <h3 class="no-num" id="other-references">Other references</h3>
vhardy@2779 2814 <!--begin-informative--><!--end-informative-->
alexmog@2565 2815
stearns@6584 2816 <h2 class="no-num" id="index">Index</h2>
stearns@6584 2817 <!--index-->
alexmog@2565 2818
vhardy@2779 2819 <h2 class="no-num" id="property-index">Property index</h2>
stearns@6584 2820 <!-- properties -->
vhardy@4412 2821
vhardy@5747 2822 <!-- template markup for issues pulled from Bugzilla --> <!-- template markup for issues pulled from Bugzilla -->
stearns@6584 2823 <script type="text/template" id="issue-template">
vhardy@5747 2824 <div class="issue-marker" data-bug_id="{{bug_id}}" data-bug_status="{{bug_status}}">
vhardy@5749 2825 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id={{bug_id}}">Issue-{{bug_id}}</a>
vhardy@5747 2826 <div class="issue-details">
vhardy@5747 2827 <p class="short-desc">{{short_desc}}</p>
vhardy@5747 2828 </div>
vhardy@5747 2829 </div>
vhardy@4412 2830 </script>
vhardy@5747 2831
vhardy@5539 2832 <script type="text/javascript" src="../shared/scripts/BugzillaTrackerUtil.js"></script>
vhardy@5539 2833 <script type="text/javascript" src="../shared/scripts/BugzillaTracker.js"></script>
vhardy@5539 2834 <script type="text/javascript">
vhardy@5747 2835 checkSpecificationIssues('CSS', 'Regions');
vhardy@5539 2836 </script>
vhardy@4412 2837
vhardy@3547 2838 </body>
vhardy@3547 2839 </html>
vhardy@3547 2840 <!-- Keep this comment at the end of the file
alexmog@2565 2841 Local variables:
alexmog@2565 2842 mode: sgml
alexmog@2565 2843 sgml-declaration:"~/SGML/HTML4.decl"
alexmog@2565 2844 sgml-default-doctype-name:"html"
alexmog@2565 2845 sgml-minimize-attributes:t
alexmog@2565 2846 sgml-nofill-elements:("pre" "style" "br")
alexmog@2565 2847 sgml-live-element-indicator:t
alexmog@2565 2848 sgml-omittag:nil
alexmog@2565 2849 sgml-shorttag:nil
alexmog@2565 2850 sgml-namecase-general:t
alexmog@2565 2851 sgml-general-insert-case:lower
alexmog@2565 2852 sgml-always-quote-attributes:t
alexmog@2565 2853 sgml-indent-step:nil
alexmog@2565 2854 sgml-indent-data:t
alexmog@2565 2855 sgml-parent-document:nil
alexmog@2565 2856 sgml-exposed-tags:nil
alexmog@2565 2857 sgml-local-catalogs:nil
alexmog@2565 2858 sgml-local-ecat-files:nil
alexmog@2565 2859 End:
vhardy@2779 2860 -->
vhardy@3547 2861

mercurial