CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="icon" href="/drafts/static/hgicon.png" type="image/png" /> <meta name="robots" content="index, nofollow"/> <link rel="stylesheet" href="/drafts/static/style-monoblue.css" type="text/css" /> <script type="text/javascript" src="/drafts/static/mercurial.js"></script> <title>drafts: css-regions-1/Overview.bs@bcfe844a33ca</title> <link rel="alternate" type="application/atom+xml" href="/drafts/atom-log" title="Atom feed for drafts"/> <link rel="alternate" type="application/rss+xml" href="/drafts/rss-log" title="RSS feed for drafts"/> </head> <body> <div id="container"> <div class="page-header"> <h1 class="breadcrumb"><a href="/">Mercurial</a> > <a href="/drafts">drafts</a> / file revision</h1> <form action="/drafts/log"> <dl class="search"> <dt><label>Search: </label></dt> <dd><input type="text" name="rev" /></dd> </dl> </form> <ul class="page-nav"> <li><a href="/drafts/summary">summary</a></li> <li><a href="/drafts/shortlog">shortlog</a></li> <li><a href="/drafts/changelog">changelog</a></li> <li><a href="/drafts/graph/bcfe844a33ca">graph</a></li> <li><a href="/drafts/tags">tags</a></li> <li><a href="/drafts/bookmarks">bookmarks</a></li> <li><a href="/drafts/branches">branches</a></li> <li><a href="/drafts/file/bcfe844a33ca/css-regions-1/">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li class="current">file</li> <li><a href="/drafts/log/bcfe844a33ca/css-regions-1/Overview.bs">revisions</a></li> <li><a href="/drafts/annotate/bcfe844a33ca/css-regions-1/Overview.bs">annotate</a></li> <li><a href="/drafts/diff/bcfe844a33ca/css-regions-1/Overview.bs">diff</a></li> <li><a href="/drafts/comparison/bcfe844a33ca/css-regions-1/Overview.bs">comparison</a></li> <li><a href="/drafts/raw-file/bcfe844a33ca/css-regions-1/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">css-regions-1/Overview.bs@bcfe844a33ca</h2> <h3 class="changeset">css-regions-1/Overview.bs</h3> <p class="changeset-age age">Thu, 21 Mar 2019 17:07:26 +0200</p> <dl class="overview"> <dt>author</dt> <dd>Chris Lilley <chris@w3.org></dd> <dt>date</dt> <dd>Thu, 21 Mar 2019 17:07:26 +0200</dd> <dt>changeset 23064</dt> <dd><a class="list" href="/drafts/rev/bcfe844a33ca">bcfe844a33ca</a></dd> <dt>parent 23056</dt> <dd> <a href="/drafts/file/641e2b800799/css-regions-1/Overview.bs"> 641e2b800799 </a> </dd> <dt>parent 23048</dt> <dd> <a href="/drafts/file/73495dc44eba/css-regions-1/Overview.bs"> 73495dc44eba </a> </dd> <dt>child 23356</dt> <dd> <a href="/drafts/file/2f0f5a557304/css-regions-1/Overview.bs">2f0f5a557304</a> </dd> <dt>permissions</dt> <dd>-rw-r--r--</dd> </dl> <p class="description">Merge pull request #3727 from w3c/xfq/css-regions-1-changes<br/> <br/> [css-regions-1] Update Changes section</p> <div class="source"> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1" id="l1"> 1</a> <pre class='metadata'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2" id="l2"> 2</a> Title: CSS Regions Module Level 1 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3" id="l3"> 3</a> Status: ED </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l4" id="l4"> 4</a> Work Status: Exploring </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l5" id="l5"> 5</a> Shortname: css-regions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l6" id="l6"> 6</a> Level: 1 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l7" id="l7"> 7</a> Group: csswg </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l8" id="l8"> 8</a> TR: https://www.w3.org/TR/css-regions-1/ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l9" id="l9"> 9</a> Previous Version: https://www.w3.org/TR/2014/WD-css-regions-1-20141009/ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l10" id="l10"> 10</a> Previous Version: https://www.w3.org/TR/2014/WD-css3-regions-20140218/ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l11" id="l11"> 11</a> ED: https://drafts.csswg.org/css-regions/ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l12" id="l12"> 12</a> Editor: Rossen Atanassov, Microsoft Corporation, ratan@microsoft.com, w3cid 49885 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l13" id="l13"> 13</a> Editor: Alan Stearns, Adobe Systems&#44; Inc., stearns@adobe.com, w3cid 46659 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l14" id="l14"> 14</a> Former Editor: Vincent Hardy, Adobe Systems&#44; Inc., vhardy@adobe.com </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l15" id="l15"> 15</a> !Issues list: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Regions&amp;resolution=---&amp;cmdtype=doit">In Bugzilla</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l16" id="l16"> 16</a> Abstract: The CSS Regions module allows content from one or more elements to flow through one or more boxes called CSS Regions, fragmented as defined in [[!CSS3-BREAK]]. This module also defines CSSOM to expose both the inputs and outputs of this fragmentation. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l17" id="l17"> 17</a> Link Defaults: css2 (property) max-height, dom-core-ls (interface) range </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l18" id="l18"> 18</a> Ignored Terms: document, element, eventtarget </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l19" id="l19"> 19</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l20" id="l20"> 20</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l21" id="l21"> 21</a> <h2 id="introduction"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l22" id="l22"> 22</a> Introduction</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l23" id="l23"> 23</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l24" id="l24"> 24</a> <em>This section is non-normative.</em> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l25" id="l25"> 25</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l26" id="l26"> 26</a> The core concept behind CSS Regions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l27" id="l27"> 27</a> is the ability to say, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l28" id="l28"> 28</a> "Display <em>this</em> content (a <a>named flow</a>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l29" id="l29"> 29</a> over <em>there</em> (a <a>region chain</a>)." </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l30" id="l30"> 30</a> The simplest example is: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l31" id="l31"> 31</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l32" id="l32"> 32</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l33" id="l33"> 33</a> <pre><code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l34" id="l34"> 34</a> #this { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l35" id="l35"> 35</a> flow-into: my-flow; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l36" id="l36"> 36</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l37" id="l37"> 37</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l38" id="l38"> 38</a> #there { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l39" id="l39"> 39</a> flow-from: my-flow; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l40" id="l40"> 40</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l41" id="l41"> 41</a> </code></pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l42" id="l42"> 42</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l43" id="l43"> 43</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l44" id="l44"> 44</a> These two declarations will take </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l45" id="l45"> 45</a> the element that matches <code>#this</code>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l46" id="l46"> 46</a> put it into a flow named "my-flow", </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l47" id="l47"> 47</a> and display the contents of "my-flow" </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l48" id="l48"> 48</a> in the box from the element that matches <code>#there</code>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l49" id="l49"> 49</a> This example has a single content source for the <a>named flow</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l50" id="l50"> 50</a> and a single box for the <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l51" id="l51"> 51</a> <a>Named flows</a> can also have multiple sources </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l52" id="l52"> 52</a> and use multiple boxes for the <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l53" id="l53"> 53</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l54" id="l54"> 54</a> The <a>named flow</a> mechanism can be used </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l55" id="l55"> 55</a> in several different ways - </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l56" id="l56"> 56</a> some of which are </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l57" id="l57"> 57</a> custom overflow handling, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l58" id="l58"> 58</a> aggregating content, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l59" id="l59"> 59</a> linked display boxes, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l60" id="l60"> 60</a> magazine-style layout, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l61" id="l61"> 61</a> and flowing content through areas in a paginated view. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l62" id="l62"> 62</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l63" id="l63"> 63</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l64" id="l64"> 64</a> Linked display boxes can be created </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l65" id="l65"> 65</a> to display article content above and below </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l66" id="l66"> 66</a> other content on a page. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l67" id="l67"> 67</a> Given markup like this: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l68" id="l68"> 68</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l69" id="l69"> 69</a> <pre><code class="html"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l70" id="l70"> 70</a> &lt;article&gt; ...some content... &lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l71" id="l71"> 71</a> &lt;aside&gt; ad or image content &lt;/aside&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l72" id="l72"> 72</a> </code></pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l73" id="l73"> 73</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l74" id="l74"> 74</a> The &lt;aside&gt; content will be displayed </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l75" id="l75"> 75</a> below all of the article content. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l76" id="l76"> 76</a> On a large screen the page might display without scrolling, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l77" id="l77"> 77</a> but on a small screen the &lt;aside&gt; content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l78" id="l78"> 78</a> might not be visible until the view scrolls. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l79" id="l79"> 79</a> If it's important to show at least some </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l80" id="l80"> 80</a> of the &lt;aside&gt; content in the initial view, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l81" id="l81"> 81</a> CSS Regions can fragment the article content across two boxes - </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l82" id="l82"> 82</a> one above the &lt;aside&gt; and one below. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l83" id="l83"> 83</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l84" id="l84"> 84</a> In this example (for simplicity's sake) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l85" id="l85"> 85</a> we create the boxes with additional elements: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l86" id="l86"> 86</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l87" id="l87"> 87</a> <pre><code class="html"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l88" id="l88"> 88</a> &lt;article&gt; ...some content... &lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l89" id="l89"> 89</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l90" id="l90"> 90</a> &lt;div class="top region"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l91" id="l91"> 91</a> &lt;aside&gt; ad or image content &lt;/aside&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l92" id="l92"> 92</a> &lt;div class="region"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l93" id="l93"> 93</a> </code></pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l94" id="l94"> 94</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l95" id="l95"> 95</a> <pre><code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l96" id="l96"> 96</a> article { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l97" id="l97"> 97</a> flow-into: article-flow; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l98" id="l98"> 98</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l99" id="l99"> 99</a> .region { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l100" id="l100"> 100</a> flow-from: article-flow; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l101" id="l101"> 101</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l102" id="l102"> 102</a> .top { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l103" id="l103"> 103</a> max-height: 80vh; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l104" id="l104"> 104</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l105" id="l105"> 105</a> </code></pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l106" id="l106"> 106</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l107" id="l107"> 107</a> So the top box in the <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l108" id="l108"> 108</a> is limited to 80% of the viewport height. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l109" id="l109"> 109</a> If the article content doesn't fit in that box, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l110" id="l110"> 110</a> the article will continue </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l111" id="l111"> 111</a> in the second box after the &lt;aside&gt; content. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l112" id="l112"> 112</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l113" id="l113"> 113</a> <figure style="float:left; margin:1em;"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l114" id="l114"> 114</a> <img alt="Article and aside rendering without CSS Regions" </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l115" id="l115"> 115</a> src="images/linked-boxes-before.png"/> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l116" id="l116"> 116</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l117" id="l117"> 117</a> Rendering without CSS Regions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l118" id="l118"> 118</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l119" id="l119"> 119</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l120" id="l120"> 120</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l121" id="l121"> 121</a> <figure style="float:left; margin:1em;"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l122" id="l122"> 122</a> <img alt="Article and aside rendering with CSS Regions" </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l123" id="l123"> 123</a> src="images/linked-boxes-after.png"/> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l124" id="l124"> 124</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l125" id="l125"> 125</a> Rendering with CSS Regions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l126" id="l126"> 126</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l127" id="l127"> 127</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l128" id="l128"> 128</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l129" id="l129"> 129</a> <p style="clear:left;">In the images above, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l130" id="l130"> 130</a> the gray area represents </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l131" id="l131"> 131</a> the content below the screen edge </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l132" id="l132"> 132</a> in the initial view. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l133" id="l133"> 133</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l134" id="l134"> 134</a> This example links just two boxes together, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l135" id="l135"> 135</a> but more boxes could be added to the <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l136" id="l136"> 136</a> to regularly interleave other content with the article. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l137" id="l137"> 137</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l138" id="l138"> 138</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l139" id="l139"> 139</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l140" id="l140"> 140</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l141" id="l141"> 141</a> Custom overflow handling can be accomplished by linking a separate overflow box. In this example, the overflow box is nestled inside a menu in the markup, and only displays if the menu is toggled. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l142" id="l142"> 142</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l143" id="l143"> 143</a> <pre><code class="html"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l144" id="l144"> 144</a> &lt;nav&gt; ...some links... &lt;/nav&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l145" id="l145"> 145</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l146" id="l146"> 146</a> &lt;div class="menu"&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l147" id="l147"> 147</a> &lt;nav&gt;&lt;/nav&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l148" id="l148"> 148</a> ...some more links... </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l149" id="l149"> 149</a> &lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l150" id="l150"> 150</a> </code></pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l151" id="l151"> 151</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l152" id="l152"> 152</a> If the links in the main nav element are placed in a <a>named flow</a>, that flow can be directed through both the main nav element and the overflow nav box in the menu: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l153" id="l153"> 153</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l154" id="l154"> 154</a> <pre><code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l155" id="l155"> 155</a> nav a { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l156" id="l156"> 156</a> flow-into: nav-link-flow; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l157" id="l157"> 157</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l158" id="l158"> 158</a> nav { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l159" id="l159"> 159</a> flow-from: nav-link-flow; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l160" id="l160"> 160</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l161" id="l161"> 161</a> </code></pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l162" id="l162"> 162</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l163" id="l163"> 163</a> Then the main nav element and the menu can be arranged with constraints such that when the screen is too narrow for the main nav element to display all of the navigation links, the overflow moves to the menu. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l164" id="l164"> 164</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l165" id="l165"> 165</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l166" id="l166"> 166</a> <img alt="Wide nav bar showing all of the links" </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l167" id="l167"> 167</a> src="images/menu-wide.png"/> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l168" id="l168"> 168</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l169" id="l169"> 169</a> Wide rendering with menu shown </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l170" id="l170"> 170</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l171" id="l171"> 171</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l172" id="l172"> 172</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l173" id="l173"> 173</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l174" id="l174"> 174</a> <img alt="Narrow nav bar with some of the links in the menu" </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l175" id="l175"> 175</a> src="images/menu-narrow.png"/> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l176" id="l176"> 176</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l177" id="l177"> 177</a> Narrow rendering with menu shown </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l178" id="l178"> 178</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l179" id="l179"> 179</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l180" id="l180"> 180</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l181" id="l181"> 181</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l182" id="l182"> 182</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l183" id="l183"> 183</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l184" id="l184"> 184</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l185" id="l185"> 185</a> Since content is assigned to a <a>named flow</a> using a CSS selector, the content can come from multiple sources. The resulting aggregation can be displayed in a single box or flowed through multiple boxes as above. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l186" id="l186"> 186</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l187" id="l187"> 187</a> So given this markup: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l188" id="l188"> 188</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l189" id="l189"> 189</a> <pre><code class="html"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l190" id="l190"> 190</a> &lt;div class="breaking-news"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l191" id="l191"> 191</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l192" id="l192"> 192</a> &lt;article&gt;News story&lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l193" id="l193"> 193</a> &lt;article class="breaking"&gt;Sports story&lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l194" id="l194"> 194</a> &lt;article&gt;News story&lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l195" id="l195"> 195</a> &lt;article class="breaking"&gt;Entertainment story&lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l196" id="l196"> 196</a> &lt;article&gt;Sports story&lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l197" id="l197"> 197</a> </code></pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l198" id="l198"> 198</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l199" id="l199"> 199</a> You can take the "breaking" stories and display them above all the others using two lines of CSS: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l200" id="l200"> 200</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l201" id="l201"> 201</a> <pre><code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l202" id="l202"> 202</a> .breaking { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l203" id="l203"> 203</a> flow-into: breaking-news; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l204" id="l204"> 204</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l205" id="l205"> 205</a> .breaking-news { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l206" id="l206"> 206</a> flow-from: breaking-news; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l207" id="l207"> 207</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l208" id="l208"> 208</a> </code></pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l209" id="l209"> 209</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l210" id="l210"> 210</a> Given more data accessible to CSS selectors, you could rearrange the articles in other ways (sports on top, etc.) depending on the user's preferences. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l211" id="l211"> 211</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l212" id="l212"> 212</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l213" id="l213"> 213</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l214" id="l214"> 214</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l215" id="l215"> 215</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l216" id="l216"> 216</a> <strong><a>CSS Regions</a> are independent from layout</strong> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l217" id="l217"> 217</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l218" id="l218"> 218</a> Any of the CSS layout facilities can be used </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l219" id="l219"> 219</a> to create, position and size boxes that can become <a>CSS Regions</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l220" id="l220"> 220</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l221" id="l221"> 221</a> The CSS Regions module does not </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l222" id="l222"> 222</a> define a layout mechanism </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l223" id="l223"> 223</a> and is meant to integrate </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l224" id="l224"> 224</a> with existing and future CSS layout facilities. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l225" id="l225"> 225</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l226" id="l226"> 226</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l227" id="l227"> 227</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l228" id="l228"> 228</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l229" id="l229"> 229</a> <strong><a>CSS Regions</a> do not have to be elements</strong> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l230" id="l230"> 230</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l231" id="l231"> 231</a> The CSS Regions module is independent </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l232" id="l232"> 232</a> of the layout of boxes and </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l233" id="l233"> 233</a> the mechanisms used to create them. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l234" id="l234"> 234</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l235" id="l235"> 235</a> For simplicity, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l236" id="l236"> 236</a> our examples tend to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l237" id="l237"> 237</a> use elements to define the boxes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l238" id="l238"> 238</a> Any other mechanism available </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l239" id="l239"> 239</a> in markup or style </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l240" id="l240"> 240</a> to create stylable boxes could be used instead, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l241" id="l241"> 241</a> such as pseudo-elements </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l242" id="l242"> 242</a> or the @slot rule proposed </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l243" id="l243"> 243</a> by the CSS Page Template Module [[CSS3-PAGE-TEMPLATE]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l244" id="l244"> 244</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l245" id="l245"> 245</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l246" id="l246"> 246</a> The only requirement </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l247" id="l247"> 247</a> for box to become a <a>CSS Region</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l248" id="l248"> 248</a> is that the 'flow-from' property applies to the box. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l249" id="l249"> 249</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l250" id="l250"> 250</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l251" id="l251"> 251</a> <h2 id="css-regions-concepts"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l252" id="l252"> 252</a> CSS Regions concepts</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l253" id="l253"> 253</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l254" id="l254"> 254</a> <h3 id="regions"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l255" id="l255"> 255</a> Regions</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l256" id="l256"> 256</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l257" id="l257"> 257</a> A <dfn export>CSS Region</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l258" id="l258"> 258</a> is a block container </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l259" id="l259"> 259</a> that has an associated </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l260" id="l260"> 260</a> <em><a>named flow</a></em> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l261" id="l261"> 261</a> (see the 'flow-from' property). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l262" id="l262"> 262</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l263" id="l263"> 263</a> <h3 id="region-chain-section"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l264" id="l264"> 264</a> Region chain</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l265" id="l265"> 265</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l266" id="l266"> 266</a> A <dfn export>region chain</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l267" id="l267"> 267</a> is the sequence of regions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l268" id="l268"> 268</a> that are associated with </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l269" id="l269"> 269</a> a <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l270" id="l270"> 270</a> <a>CSS Regions</a> in a </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l271" id="l271"> 271</a> <a>region chain</a> receive content from the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l272" id="l272"> 272</a> <a>named flow</a> following their order in the chain. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l273" id="l273"> 273</a> <a>CSS Regions</a> are organized </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l274" id="l274"> 274</a> into a <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l275" id="l275"> 275</a> according to the document order. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l276" id="l276"> 276</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l277" id="l277"> 277</a> <h3 id=last-region> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l278" id="l278"> 278</a> Last region</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l279" id="l279"> 279</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l280" id="l280"> 280</a> A <a>CSS region</a> is deemed to be the <dfn lt="last usable region | last usable CSS region">last usable region</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l281" id="l281"> 281</a> in a <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l282" id="l282"> 282</a> if it is the first region in that chain to have <a>layout containment</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l283" id="l283"> 283</a> or the last region in the chain if none of them have <a>layout containment</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l284" id="l284"> 284</a> (See [[!CSS-CONTAIN-1]]). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l285" id="l285"> 285</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l286" id="l286"> 286</a> <h3 id="named-flow-section"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l287" id="l287"> 287</a> Named flows</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l288" id="l288"> 288</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l289" id="l289"> 289</a> A <dfn>named flow</dfn> is the ordered sequence of content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l290" id="l290"> 290</a> associated with a flow with a given identifier. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l291" id="l291"> 291</a> Contents in a <a>named flow</a> are ordered </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l292" id="l292"> 292</a> according to the document order. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l293" id="l293"> 293</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l294" id="l294"> 294</a> Content is placed into a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l295" id="l295"> 295</a> with the 'flow-into' property. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l296" id="l296"> 296</a> The content in a <a>named flow</a> is laid out </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l297" id="l297"> 297</a> in the <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l298" id="l298"> 298</a> that is associated with this <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l299" id="l299"> 299</a> using the 'flow-from' property. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l300" id="l300"> 300</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l301" id="l301"> 301</a> Content from a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l302" id="l302"> 302</a> is broken up between regions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l303" id="l303"> 303</a> according to the regions flow breaking rules. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l304" id="l304"> 304</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l305" id="l305"> 305</a> A <a>named flow</a> is created when </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l306" id="l306"> 306</a> some content is moved </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l307" id="l307"> 307</a> into the flow with the given identifier </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l308" id="l308"> 308</a> or when at least one <a>CSS Region</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l309" id="l309"> 309</a> requests content from that flow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l310" id="l310"> 310</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l311" id="l311"> 311</a> <h3 id="regions-flow-breaking-rules"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l312" id="l312"> 312</a> Regions flow breaking rules</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l313" id="l313"> 313</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l314" id="l314"> 314</a> Breaking a <a>named flow</a> across a <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l315" id="l315"> 315</a> is similar to breaking a document's content across pages </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l316" id="l316"> 316</a> (see [[CSS3PAGE]]) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l317" id="l317"> 317</a> or a multi-column container's content across column boxes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l318" id="l318"> 318</a> (see [[CSS3COL]]). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l319" id="l319"> 319</a> One difference is that page boxes are generated </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l320" id="l320"> 320</a> based on the available content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l321" id="l321"> 321</a> whereas a <a>region chain</a> is a set of recipient boxes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l322" id="l322"> 322</a> for the <a>named flow</a> content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l323" id="l323"> 323</a> whose dynamic generation is not in the scope </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l324" id="l324"> 324</a> of this specification. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l325" id="l325"> 325</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l326" id="l326"> 326</a> Each <a>CSS Region</a> in turn </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l327" id="l327"> 327</a> consumes content from its associated <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l328" id="l328"> 328</a> The <a>named flow</a> content is positioned </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l329" id="l329"> 329</a> in the current region </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l330" id="l330"> 330</a> until a natural or forced region break occurs, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l331" id="l331"> 331</a> at which point the next region </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l332" id="l332"> 332</a> in the <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l333" id="l333"> 333</a> becomes the current region. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l334" id="l334"> 334</a> If there are no more usable <a>CSS Regions</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l335" id="l335"> 335</a> in the <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l336" id="l336"> 336</a> and there is still content in the flow, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l337" id="l337"> 337</a> the positioning of the remaining content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l338" id="l338"> 338</a> is controlled by the 'region-fragment' property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l339" id="l339"> 339</a> on the <a>last usable CSS Region</a> in the chain. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l340" id="l340"> 340</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l341" id="l341"> 341</a> The CSS regions module follows </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l342" id="l342"> 342</a> the fragmentation rules defined </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l343" id="l343"> 343</a> in the CSS Fragmentation Module Level 3 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l344" id="l344"> 344</a> (see [[!CSS3-BREAK]]). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l345" id="l345"> 345</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l346" id="l346"> 346</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l347" id="l347"> 347</a> <h2 id="properties"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l348" id="l348"> 348</a> Properties</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l349" id="l349"> 349</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l350" id="l350"> 350</a> <h3 id="the-flow-into-property"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l351" id="l351"> 351</a> The 'flow-into' property</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l352" id="l352"> 352</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l353" id="l353"> 353</a> <div class="issue-marker wrapper"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l354" id="l354"> 354</a> <div class="issue-marker"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l355" id="l355"> 355</a> <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16527">Issue-16527</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l356" id="l356"> 356</a> <div class="issue-details"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l357" id="l357"> 357</a> <p class="short-desc">[Shadow]: getFlowByName and shadow DOM</p> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l358" id="l358"> 358</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l359" id="l359"> 359</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l360" id="l360"> 360</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l361" id="l361"> 361</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l362" id="l362"> 362</a> The ‘flow-into’ property can place an element </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l363" id="l363"> 363</a> or its contents </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l364" id="l364"> 364</a> into a <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l365" id="l365"> 365</a> Content that belongs to the same flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l366" id="l366"> 366</a> is laid out in the <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l367" id="l367"> 367</a> associated with that flow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l368" id="l368"> 368</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l369" id="l369"> 369</a> <pre class='propdef'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l370" id="l370"> 370</a> Name: flow-into </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l371" id="l371"> 371</a> Value: none | <<ident>> [element|content]? </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l372" id="l372"> 372</a> Initial: none </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l373" id="l373"> 373</a> Applies To: All elements, but not <a href="https://www.w3.org/TR/selectors/#pseudo-elements">pseudo-elements</a> such as <code>::first-line</code>, <code>::first-letter</code>, <code>::before</code> or <code>::after</code>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l374" id="l374"> 374</a> Inherited: no </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l375" id="l375"> 375</a> Computed Value: as specified </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l376" id="l376"> 376</a> Animation type: not animatable </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l377" id="l377"> 377</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l378" id="l378"> 378</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l379" id="l379"> 379</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l380" id="l380"> 380</a> <dt>none</dt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l381" id="l381"> 381</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l382" id="l382"> 382</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l383" id="l383"> 383</a> The element is not moved </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l384" id="l384"> 384</a> to a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l385" id="l385"> 385</a> and normal CSS processing takes place. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l386" id="l386"> 386</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l387" id="l387"> 387</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l388" id="l388"> 388</a> <dt><a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></dt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l389" id="l389"> 389</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l390" id="l390"> 390</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l391" id="l391"> 391</a> If the keyword <dfn>element</dfn> is present </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l392" id="l392"> 392</a> or neither keyword is present, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l393" id="l393"> 393</a> then the element is taken out </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l394" id="l394"> 394</a> of its parent's flow </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l395" id="l395"> 395</a> and placed into the flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l396" id="l396"> 396</a> with the name '<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>'. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l397" id="l397"> 397</a> If the keyword <dfn>content</dfn> is present, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l398" id="l398"> 398</a> then only the element's contents </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l399" id="l399"> 399</a> are placed into the named flow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l400" id="l400"> 400</a> The element or content is said to have </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l401" id="l401"> 401</a> a <dfn id="specified-flow">specified flow</dfn>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l402" id="l402"> 402</a> The values <code class=css>none</code>, <code class=css>inherit</code>, <code class=css>default</code>, <code class=css>auto</code> and <code class=css>initial</code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l403" id="l403"> 403</a> are invalid flow names. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l404" id="l404"> 404</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l405" id="l405"> 405</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l406" id="l406"> 406</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l407" id="l407"> 407</a> The 'flow-into' property affects </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l408" id="l408"> 408</a> the visual formatting of elements or contents </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l409" id="l409"> 409</a> placed into a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l410" id="l410"> 410</a> and of the <a>region chain</a> laying out content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l411" id="l411"> 411</a> from a <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l412" id="l412"> 412</a> The 'flow-into' property does not affect </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l413" id="l413"> 413</a> the CSS cascade and inheritance </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l414" id="l414"> 414</a> for the elements on which it is specified. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l415" id="l415"> 415</a> The 'flow-into' property does not affect the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l416" id="l416"> 416</a> <a href="https://www.w3.org/TR/2012/WD-dom-20120405/#introduction-to-the-dom">DOM</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l417" id="l417"> 417</a> [[!DOM]] position of an element or its contents. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l418" id="l418"> 418</a> The 'flow-into' property does not affect ordering </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l419" id="l419"> 419</a> in non-visual media </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l420" id="l420"> 420</a> (such as <a href="https://www.w3.org/TR/css3-speech/">speech</a>). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l421" id="l421"> 421</a> Likewise, 'flow-into' does not affect </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l422" id="l422"> 422</a> the default traversal order </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l423" id="l423"> 423</a> of sequential navigation modes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l424" id="l424"> 424</a> (such as cycling through links, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l425" id="l425"> 425</a> see e.g. <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> [[HTML]]). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l426" id="l426"> 426</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l427" id="l427"> 427</a> A <a>named flow</a> needs to be associated </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l428" id="l428"> 428</a> with a <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l429" id="l429"> 429</a> (one or more <a>CSS Regions</a>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l430" id="l430"> 430</a> for its content to be visually formatted. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l431" id="l431"> 431</a> If no <a>region chain</a> is associated </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l432" id="l432"> 432</a> with a given <a>named flow</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l433" id="l433"> 433</a> the content in the <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l434" id="l434"> 434</a> is not rendered: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l435" id="l435"> 435</a> it does not generate boxes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l436" id="l436"> 436</a> and is not displayed. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l437" id="l437"> 437</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l438" id="l438"> 438</a> The children of an element or content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l439" id="l439"> 439</a> with a specified flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l440" id="l440"> 440</a> may themselves have a specified flow, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l441" id="l441"> 441</a> in which case they become </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l442" id="l442"> 442</a> the next sibling of the latest element </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l443" id="l443"> 443</a> or content collected in that flow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l444" id="l444"> 444</a> In some cases, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l445" id="l445"> 445</a> the child can become the next sibling </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l446" id="l446"> 446</a> for one of its ancestors in the same flow. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l447" id="l447"> 447</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l448" id="l448"> 448</a> Content in a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l449" id="l449"> 449</a> is sequenced in document order. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l450" id="l450"> 450</a> The visual formatting model </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l451" id="l451"> 451</a> uses the relationships between content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l452" id="l452"> 452</a> in the named flow as input, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l453" id="l453"> 453</a> rather than the contents&rsquo; position </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l454" id="l454"> 454</a> in the DOM. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l455" id="l455"> 455</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l456" id="l456"> 456</a> Each <a>CSS Region</a> in a <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l457" id="l457"> 457</a> establishes a containing block for absolutely positioned </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l458" id="l458"> 458</a> elements in the <a>named flow</a> (see [[!CSS21]]). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l459" id="l459"> 459</a> That first <a>CSS Region</a> in a <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l460" id="l460"> 460</a> establishes the initial containing block for such absolutely </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l461" id="l461"> 461</a> positioned elements. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l462" id="l462"> 462</a> <span>Regions</span> don't establish a containing block for </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l463" id="l463"> 463</a> fixed positioned elements in the <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l464" id="l464"> 464</a> Such fixed positioned elements are still positioned relative </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l465" id="l465"> 465</a> to the viewport or the page area even if they have been </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l466" id="l466"> 466</a> redirected into a named flow </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l467" id="l467"> 467</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l468" id="l468"> 468</a> The first region defines the principal </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l469" id="l469"> 469</a> <a href="https://www.w3.org/TR/css3-writing-modes/#writing-mode">writing mode</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l470" id="l470"> 470</a> for the entire flow. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l471" id="l471"> 471</a> The writing mode </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l472" id="l472"> 472</a> on subsequent regions is ignored. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l473" id="l473"> 473</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l474" id="l474"> 474</a> If an element has <a>style containment</a> (See [[!CSS-CONTAIN-1]]), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l475" id="l475"> 475</a> then the 'flow-into' property must be <a for=property>scoped</a> to that element. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l476" id="l476"> 476</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l477" id="l477"> 477</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l478" id="l478"> 478</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l479" id="l479"> 479</a> The 'flow-into' property moves an element into the flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l480" id="l480"> 480</a> and the interplay with selectors should be considered carefully. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l481" id="l481"> 481</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l482" id="l482"> 482</a> For example, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l483" id="l483"> 483</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l484" id="l484"> 484</a> <pre>table {flow-into: table-content}</pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l485" id="l485"> 485</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l486" id="l486"> 486</a> will move all tables in the "table-content" </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l487" id="l487"> 487</a> <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l488" id="l488"> 488</a> However, the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l489" id="l489"> 489</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l490" id="l490"> 490</a> <pre>table &gt; * {flow-into: table-content} ...</pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l491" id="l491"> 491</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l492" id="l492"> 492</a> selector will move all immediate children </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l493" id="l493"> 493</a> of all table elements </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l494" id="l494"> 494</a> into the "table-content" <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l495" id="l495"> 495</a> (which may be useful as it will usually result, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l496" id="l496"> 496</a> if the immediate children are rows, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l497" id="l497"> 497</a> in merging rows of multiple tables), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l498" id="l498"> 498</a> but the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l499" id="l499"> 499</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l500" id="l500"> 500</a> <pre>table * {flow-into: table-content}</pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l501" id="l501"> 501</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l502" id="l502"> 502</a> selector will move all descendants </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l503" id="l503"> 503</a> of table elements into the "table-content" <a>named flow</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l504" id="l504"> 504</a> transforming the element tree </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l505" id="l505"> 505</a> into a flat list in order of opening tags </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l506" id="l506"> 506</a> (which is probably not intentional). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l507" id="l507"> 507</a> This will make all the descendants </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l508" id="l508"> 508</a> of table elements siblings </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l509" id="l509"> 509</a> in the <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l510" id="l510"> 510</a> Having the descendants become siblings </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l511" id="l511"> 511</a> in the <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l512" id="l512"> 512</a> results in a different processing </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l513" id="l513"> 513</a> (see <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#anonymous-boxes">CSS 2.1's anonymous table objects</a>). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l514" id="l514"> 514</a> This note illustrates how authors must exercise caution </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l515" id="l515"> 515</a> when choosing a particular selector </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l516" id="l516"> 516</a> for setting the 'flow-into' property </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l517" id="l517"> 517</a> to avoid unintended results. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l518" id="l518"> 518</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l519" id="l519"> 519</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l520" id="l520"> 520</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l521" id="l521"> 521</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l522" id="l522"> 522</a> Another consequence of moving elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l523" id="l523"> 523</a> into <a>named flows</a> is that surrounding whitespace </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l524" id="l524"> 524</a> is not moved into the named flow. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l525" id="l525"> 525</a> If you have code like this: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l526" id="l526"> 526</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l527" id="l527"> 527</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l528" id="l528"> 528</a> span {flow-into: span-content} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l529" id="l529"> 529</a> &lt;span&gt;one&lt;/span&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l530" id="l530"> 530</a> &lt;span&gt;two&lt;/span&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l531" id="l531"> 531</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l532" id="l532"> 532</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l533" id="l533"> 533</a> Then the "span-content" named flow contents </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l534" id="l534"> 534</a> will contain this: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l535" id="l535"> 535</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l536" id="l536"> 536</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l537" id="l537"> 537</a> &lt;span&gt;one&lt;/span&gt;&lt;span&gt;two&lt;/span&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l538" id="l538"> 538</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l539" id="l539"> 539</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l540" id="l540"> 540</a> Which will change the display </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l541" id="l541"> 541</a> from "one two" to "onetwo". </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l542" id="l542"> 542</a> If whitespace is significant, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l543" id="l543"> 543</a> then moving the parent </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l544" id="l544"> 544</a> that contains the whitespace </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l545" id="l545"> 545</a> to the named flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l546" id="l546"> 546</a> is required. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l547" id="l547"> 547</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l548" id="l548"> 548</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l549" id="l549"> 549</a> <h3 id="flow-from"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l550" id="l550"> 550</a> The 'flow-from' property</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l551" id="l551"> 551</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l552" id="l552"> 552</a> The 'flow-from' property makes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l553" id="l553"> 553</a> a block container a region </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l554" id="l554"> 554</a> and associates it with </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l555" id="l555"> 555</a> a <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l556" id="l556"> 556</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l557" id="l557"> 557</a> <pre class='propdef'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l558" id="l558"> 558</a> Name: flow-from </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l559" id="l559"> 559</a> Value: <<ident>> | none </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l560" id="l560"> 560</a> Initial: none </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l561" id="l561"> 561</a> Applies To: Non-replaced <a href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes">block containers</a>. <br/> This might be expanded in future versions of the specification to allow other types of containers to receive flow content. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l562" id="l562"> 562</a> Inherited: no </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l563" id="l563"> 563</a> Computed Value: as specified </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l564" id="l564"> 564</a> Animation type: not animatable </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l565" id="l565"> 565</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l566" id="l566"> 566</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l567" id="l567"> 567</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l568" id="l568"> 568</a> <dt><strong>none</strong></dt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l569" id="l569"> 569</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l570" id="l570"> 570</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l571" id="l571"> 571</a> The block container is not a <a>CSS Region</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l572" id="l572"> 572</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l573" id="l573"> 573</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l574" id="l574"> 574</a> <dt><strong><a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></strong></dt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l575" id="l575"> 575</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l576" id="l576"> 576</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l577" id="l577"> 577</a> The block container becomes a <a>CSS Region</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l578" id="l578"> 578</a> (except as detailed in the text below), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l579" id="l579"> 579</a> and is ordered in a <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l580" id="l580"> 580</a> according to its document order. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l581" id="l581"> 581</a> The content from the flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l582" id="l582"> 582</a> with the <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l583" id="l583"> 583</a> name will be <a href="#region-flow-break">broken </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l584" id="l584"> 584</a> into fragments</a> and visually formatted in the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l585" id="l585"> 585</a> <a href="https://www.w3.org/TR/CSS21/visuren.html#principal-box">principal boxes</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l586" id="l586"> 586</a> of the <span>regions</span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l587" id="l587"> 587</a> in the <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l588" id="l588"> 588</a> <br/> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l589" id="l589"> 589</a> If there is no flow with name </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l590" id="l590"> 590</a> <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l591" id="l591"> 591</a> then the block container does not </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l592" id="l592"> 592</a> format any content visually. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l593" id="l593"> 593</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l594" id="l594"> 594</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l595" id="l595"> 595</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l596" id="l596"> 596</a> If the 'content' property computes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l597" id="l597"> 597</a> to something else than ''content/normal'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l598" id="l598"> 598</a> (or ''content/none'' for a pseudo-element), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l599" id="l599"> 599</a> the block container does not become </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l600" id="l600"> 600</a> a <a>CSS Region</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l601" id="l601"> 601</a> If the 'display' property </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l602" id="l602"> 602</a> of the block container </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l603" id="l603"> 603</a> or one of its ancestors </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l604" id="l604"> 604</a> computes to ''display/none'', </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l605" id="l605"> 605</a> the block container does not become </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l606" id="l606"> 606</a> a <a>CSS Region</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l607" id="l607"> 607</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l608" id="l608"> 608</a> A <a>CSS Region</a>&rsquo;s document children </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l609" id="l609"> 609</a> are not visually formatted </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l610" id="l610"> 610</a> unless they are directed </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l611" id="l611"> 611</a> to a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l612" id="l612"> 612</a> with an associated <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l613" id="l613"> 613</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l614" id="l614"> 614</a> Block container pseudo-elements where </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l615" id="l615"> 615</a> the value of 'flow-from' computes to an </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l616" id="l616"> 616</a> <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l617" id="l617"> 617</a> and the value of 'content' computes to ''content/none'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l618" id="l618"> 618</a> are generated as <a>CSS Regions</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l619" id="l619"> 619</a> which is an update to the behavior </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l620" id="l620"> 620</a> described in [[!CSS21]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l621" id="l621"> 621</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l622" id="l622"> 622</a> If an element has <a>style containment</a> (See [[!CSS-CONTAIN-1]]), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l623" id="l623"> 623</a> then the 'flow-from' property must be <a for=property>scoped</a> to that element. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l624" id="l624"> 624</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l625" id="l625"> 625</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l626" id="l626"> 626</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l627" id="l627"> 627</a> A block container becomes a <a>CSS Region</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l628" id="l628"> 628</a> when its 'flow-from' property is set </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l629" id="l629"> 629</a> to a valid <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> value, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l630" id="l630"> 630</a> even if there is no content contributing </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l631" id="l631"> 631</a> to the referenced flow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l632" id="l632"> 632</a> For example: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l633" id="l633"> 633</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l634" id="l634"> 634</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l635" id="l635"> 635</a> &lt;style&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l636" id="l636"> 636</a> .article{ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l637" id="l637"> 637</a> flow-into: thread; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l638" id="l638"> 638</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l639" id="l639"> 639</a> .region{ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l640" id="l640"> 640</a> flow-from: thread; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l641" id="l641"> 641</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l642" id="l642"> 642</a> &lt;/style&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l643" id="l643"> 643</a> &lt;html&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l644" id="l644"> 644</a> &lt;body&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l645" id="l645"> 645</a> &lt;div class=region&gt;div content&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l646" id="l646"> 646</a> &lt;/body&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l647" id="l647"> 647</a> &lt;/html&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l648" id="l648"> 648</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l649" id="l649"> 649</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l650" id="l650"> 650</a> There is no element matching </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l651" id="l651"> 651</a> the <code>.article</code> selector </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l652" id="l652"> 652</a> and therefore no content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l653" id="l653"> 653</a> in the <code>thread</code> flow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l654" id="l654"> 654</a> However, the block container matching </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l655" id="l655"> 655</a> the <code>.region</code> selector </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l656" id="l656"> 656</a> is still associated with </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l657" id="l657"> 657</a> that empty <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l658" id="l658"> 658</a> and, consequently, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l659" id="l659"> 659</a> its children are not formatted visually. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l660" id="l660"> 660</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l661" id="l661"> 661</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l662" id="l662"> 662</a> <div class=note><span class=note-prefix>Note </span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l663" id="l663"> 663</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l664" id="l664"> 664</a> At the time of this note-writing, the <code>display</code> values that </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l665" id="l665"> 665</a> always result in a non-replaced block container include </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l666" id="l666"> 666</a> <code>block</code>, <code>inline-block</code>, <code>table-cell</code>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l667" id="l667"> 667</a> <code>table-caption</code>, and <code>list-item</code>. All of these </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l668" id="l668"> 668</a> display values work as regions with non-replaced elements. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l669" id="l669"> 669</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l670" id="l670"> 670</a> The <code>flex</code> and <code>grid</code> display values do not </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l671" id="l671"> 671</a> result in block containers (they are defined as flex containers and grid </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l672" id="l672"> 672</a> elements, respectively). So ‘<a href="#flow-from"><code </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l673" id="l673"> 673</a> class=property>flow-from</code></a>’ combined with those display values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l674" id="l674"> 674</a> does not result in a <a>CSS Region</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l675" id="l675"> 675</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l676" id="l676"> 676</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l677" id="l677"> 677</a> <a>CSS Regions</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l678" id="l678"> 678</a> create a new </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l679" id="l679"> 679</a> <a href="https://www.w3.org/TR/CSS2/visuren.html#z-index">stacking context</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l680" id="l680"> 680</a> <a>CSS Regions</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l681" id="l681"> 681</a> establish a new </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l682" id="l682"> 682</a> <a href="https://www.w3.org/TR/CSS2/visuren.html#block-formatting">block formatting Context</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l683" id="l683"> 683</a> Exclusions (see [[CSS3-EXCLUSIONS]]) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l684" id="l684"> 684</a> potentially impact the content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l685" id="l685"> 685</a> laid out in <a>region chains</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l686" id="l686"> 686</a> just as for non-regions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l687" id="l687"> 687</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l688" id="l688"> 688</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l689" id="l689"> 689</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l690" id="l690"> 690</a> With <a>region chains</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l691" id="l691"> 691</a> an element may be split across multiple boxes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l692" id="l692"> 692</a> and these boxes may overlap </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l693" id="l693"> 693</a> (for example if they are absolutely positioned). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l694" id="l694"> 694</a> So fragments of the same element </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l695" id="l695"> 695</a> can overlap each other. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l696" id="l696"> 696</a> Since each element has a single z-index, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l697" id="l697"> 697</a> it would be required to find another mechanism </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l698" id="l698"> 698</a> to decide in which order </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l699" id="l699"> 699</a> the fragments are rendered. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l700" id="l700"> 700</a> Since each <a>CSS Region</a> creates </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l701" id="l701"> 701</a> a new stacking context, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l702" id="l702"> 702</a> it is clear that each fragment is rendered separately </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l703" id="l703"> 703</a> and their rendering order follows </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l704" id="l704"> 704</a> the regular CSS rendering model. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l705" id="l705"> 705</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l706" id="l706"> 706</a> Fragments rendering separately </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l707" id="l707"> 707</a> is also relevant to elements that might normally </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l708" id="l708"> 708</a> be rendered as a unit </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l709" id="l709"> 709</a> (for example, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l710" id="l710"> 710</a> an element with its own stacking context, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l711" id="l711"> 711</a> or with transparency). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l712" id="l712"> 712</a> Each fragment of these elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l713" id="l713"> 713</a> is separately contained in the stacking context </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l714" id="l714"> 714</a> created by the <a>CSS Region</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l715" id="l715"> 715</a> so each fragment of these elements </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l716" id="l716"> 716</a> is rendered separately. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l717" id="l717"> 717</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l718" id="l718"> 718</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l719" id="l719"> 719</a> See the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l720" id="l720"> 720</a> <a href="#regions-visual-formatting-details">regions visual formatting details</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l721" id="l721"> 721</a> section for a description of how </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l722" id="l722"> 722</a> 'width' and 'height' values are resolved </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l723" id="l723"> 723</a> for <a>CSS Region</a> boxes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l724" id="l724"> 724</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l725" id="l725"> 725</a> <h4 id="circular-dependencies"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l726" id="l726"> 726</a> Cycle Detection</h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l727" id="l727"> 727</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l728" id="l728"> 728</a> <a>named flows</a> containing elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l729" id="l729"> 729</a> where the value of 'flow-from' computes to an </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l730" id="l730"> 730</a> <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l731" id="l731"> 731</a> can produce nonsensical circular relationships, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l732" id="l732"> 732</a> such as a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l733" id="l733"> 733</a> containing <a>CSS Regions</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l734" id="l734"> 734</a> in its own <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l735" id="l735"> 735</a> These relationships can be easily </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l736" id="l736"> 736</a> and reliably detected and resolved, however, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l737" id="l737"> 737</a> by keeping track of a dependency graph </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l738" id="l738"> 738</a> and using common cycle-detection algorithms. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l739" id="l739"> 739</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l740" id="l740"> 740</a> The dependency graph consists of edges such that: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l741" id="l741"> 741</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l742" id="l742"> 742</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l743" id="l743"> 743</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l744" id="l744"> 744</a> Every <a>named flow</a> depends on its elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l745" id="l745"> 745</a> where the value of 'flow-from' computes to an </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l746" id="l746"> 746</a> <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l747" id="l747"> 747</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l748" id="l748"> 748</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l749" id="l749"> 749</a> Every element in a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l750" id="l750"> 750</a> where the value of 'flow-from' computes to an </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l751" id="l751"> 751</a> <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l752" id="l752"> 752</a> depends on the <a>named flow</a> with the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l753" id="l753"> 753</a> <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l754" id="l754"> 754</a> name. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l755" id="l755"> 755</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l756" id="l756"> 756</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l757" id="l757"> 757</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l758" id="l758"> 758</a> If the graph contains a cycle, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l759" id="l759"> 759</a> any elements where the value of 'flow-from' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l760" id="l760"> 760</a> computes to an </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l761" id="l761"> 761</a> <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l762" id="l762"> 762</a> participating in the cycle </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l763" id="l763"> 763</a> do not become <a>CSS Regions</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l764" id="l764"> 764</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l765" id="l765"> 765</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l766" id="l766"> 766</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l767" id="l767"> 767</a> For example, styling like this: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l768" id="l768"> 768</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l769" id="l769"> 769</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l770" id="l770"> 770</a> #id { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l771" id="l771"> 771</a> flow-into: foolish; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l772" id="l772"> 772</a> flow-from: foolish; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l773" id="l773"> 773</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l774" id="l774"> 774</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l775" id="l775"> 775</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l776" id="l776"> 776</a> would move the <code>#id</code> element to a "foolish" <a>named flow</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l777" id="l777"> 777</a> and try to make the <code>#id</code> element </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l778" id="l778"> 778</a> a <a>CSS Region</a> for the "foolish" <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l779" id="l779"> 779</a> The "foolish" <a>named flow</a> would then contain its own region, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l780" id="l780"> 780</a> creating a cycle. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l781" id="l781"> 781</a> So the <code>#id</code> element does not become a <a>CSS Region</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l782" id="l782"> 782</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l783" id="l783"> 783</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l784" id="l784"> 784</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l785" id="l785"> 785</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l786" id="l786"> 786</a> The content keyword can be used to break cycles in some circumstances: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l787" id="l787"> 787</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l788" id="l788"> 788</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l789" id="l789"> 789</a> #id { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l790" id="l790"> 790</a> flow-into: not-so-foolish content; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l791" id="l791"> 791</a> flow-from: not-so-foolish; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l792" id="l792"> 792</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l793" id="l793"> 793</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l794" id="l794"> 794</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l795" id="l795"> 795</a> Here only the contents of the <code>#id</code> element are moved to the <a>named flow</a>, and the box for the <code>#id</code> element <em>does</em> become a <a>CSS Region</a>. Since the <a>named flow</a> does not contain the element itself, there is no cycle. With this declaration the <code>#id</code> element becomes a single-box <a>region chain</a> for its contents, and other boxes could be added to the chain to customize overflow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l796" id="l796"> 796</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l797" id="l797"> 797</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l798" id="l798"> 798</a> <h4 id="fragmenting-regions"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l799" id="l799"> 799</a> Nested fragmentation contexts</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l800" id="l800"> 800</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l801" id="l801"> 801</a> A <a>CSS Region</a> that contains </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l802" id="l802"> 802</a> a fragment of a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l803" id="l803"> 803</a> can itself be fragmented if it is nested </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l804" id="l804"> 804</a> within a fragmentation context [[!CSS3-BREAK]], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l805" id="l805"> 805</a> such as when a layout </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l806" id="l806"> 806</a> using a <a>region chain</a> is printed. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l807" id="l807"> 807</a> In these cases break opportunities </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l808" id="l808"> 808</a> in the named flow fragment </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l809" id="l809"> 809</a> contained by the <a>CSS Region</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l810" id="l810"> 810</a> are determined using the standard </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l811" id="l811"> 811</a> <a href="https://www.w3.org/TR/css3-break/">fragmentation rules</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l812" id="l812"> 812</a> In other words, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l813" id="l813"> 813</a> each region box and its associated fragment </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l814" id="l814"> 814</a> should break as if it were a simple div </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l815" id="l815"> 815</a> containing the fragment contents. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l816" id="l816"> 816</a> This can be controlled by using </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l817" id="l817"> 817</a> an avoid break value on the <a>CSS Region</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l818" id="l818"> 818</a> if that is desired. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l819" id="l819"> 819</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l820" id="l820"> 820</a> A <a>CSS Region</a> can be part </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l821" id="l821"> 821</a> of the contents of a separate named flow, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l822" id="l822"> 822</a> as long as there are no cycles broken </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l823" id="l823"> 823</a> by the <a href="#circular-dependencies">Cycle Detection</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l824" id="l824"> 824</a> described above. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l825" id="l825"> 825</a> This case is a <dfn>nested region context</dfn>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l826" id="l826"> 826</a> which has an effect </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l827" id="l827"> 827</a> on the <a href="#regions-visual-formatting-steps">Visual Formatting Steps</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l828" id="l828"> 828</a> described below. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l829" id="l829"> 829</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l830" id="l830"> 830</a> <h3 id="region-flow-break"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l831" id="l831"> 831</a> Controlling Region Flow Breaks</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l832" id="l832"> 832</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l833" id="l833"> 833</a> Fragmentation across regions can be controlled with the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l834" id="l834"> 834</a> 'break-inside', 'break-before', and 'break-after' properties: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l835" id="l835"> 835</a> the generic values ''break-before/auto'', ''break-before/always'', and ''break-before/avoid'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l836" id="l836"> 836</a> affect content flowed through regions just as they do content flowed through columns or pages, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l837" id="l837"> 837</a> and the ''break-before/region'' and ''break-before/avoid-region'' values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l838" id="l838"> 838</a> provide region-specific breaking controls. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l839" id="l839"> 839</a> See [[css-break-3]] for details. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l840" id="l840"> 840</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l841" id="l841"> 841</a> <h3 id="the-region-fragment-property"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l842" id="l842"> 842</a> The region-fragment property</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l843" id="l843"> 843</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l844" id="l844"> 844</a> <pre class='propdef'> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l845" id="l845"> 845</a> Name: region-fragment </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l846" id="l846"> 846</a> Value: auto | break </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l847" id="l847"> 847</a> Initial: auto </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l848" id="l848"> 848</a> Applies To: <a>CSS Regions</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l849" id="l849"> 849</a> Inherited: no </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l850" id="l850"> 850</a> Computed Value: specified keyword </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l851" id="l851"> 851</a> Animation type: discrete </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l852" id="l852"> 852</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l853" id="l853"> 853</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l854" id="l854"> 854</a> ISSUE: The 'continue' property in [[css-overflow-3]] is likely to replace this property. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l855" id="l855"> 855</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l856" id="l856"> 856</a> The 'region-fragment' property controls the behavior </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l857" id="l857"> 857</a> of the <a>last usable region</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l858" id="l858"> 858</a> associated with a <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l859" id="l859"> 859</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l860" id="l860"> 860</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l861" id="l861"> 861</a> <dt>auto</dt> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l862" id="l862"> 862</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l863" id="l863"> 863</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l864" id="l864"> 864</a> Content flows as it would in a regular content box. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l865" id="l865"> 865</a> If the content exceeds the container box, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l866" id="l866"> 866</a> it is subject to the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l867" id="l867"> 867</a> <a href= "https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow">overflow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l868" id="l868"> 868</a> property's computed value on the <a>CSS Region</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l869" id="l869"> 869</a> Region breaks must be ignored on the <a>last usable region</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l870" id="l870"> 870</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l871" id="l871"> 871</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l872" id="l872"> 872</a> <dt>break</dt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l873" id="l873"> 873</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l874" id="l874"> 874</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l875" id="l875"> 875</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l876" id="l876"> 876</a> If the content fits within the <a>CSS Region</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l877" id="l877"> 877</a> then this property has no effect. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l878" id="l878"> 878</a> If the content does not fit within the <a>CSS Region</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l879" id="l879"> 879</a> the content breaks as if flow was going to continue in a subsequent region. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l880" id="l880"> 880</a> See the <a href= "#regions-flow-breaking-rules">breaking rules</a> section. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l881" id="l881"> 881</a> A forced region break takes precedence over a natural break point. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l882" id="l882"> 882</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l883" id="l883"> 883</a> Flow content that follows the last break in the <a>last usable region</a> is not rendered. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l884" id="l884"> 884</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l885" id="l885"> 885</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l886" id="l886"> 886</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l887" id="l887"> 887</a> The 'region-fragment' property does not influence </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l888" id="l888"> 888</a> the size of the region it applies to. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l889" id="l889"> 889</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l890" id="l890"> 890</a> The following code sample illustrates </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l891" id="l891"> 891</a> the usage of the 'region-fragment' property. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l892" id="l892"> 892</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l893" id="l893"> 893</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l894" id="l894"> 894</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l895" id="l895"> 895</a> &lt;style&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l896" id="l896"> 896</a> article { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l897" id="l897"> 897</a> flow-into: article-flow; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l898" id="l898"> 898</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l899" id="l899"> 899</a> #region-1, #region-2 { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l900" id="l900"> 900</a> flow-from: article-flow; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l901" id="l901"> 901</a> <strong>region-fragment: break;</strong> /* or auto */ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l902" id="l902"> 902</a> <strong>overflow: visible;</strong> /* or hidden */ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l903" id="l903"> 903</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l904" id="l904"> 904</a> &lt;/style&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l905" id="l905"> 905</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l906" id="l906"> 906</a> &lt;body&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l907" id="l907"> 907</a> &lt;article&gt;...&lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l908" id="l908"> 908</a> &lt;div id="region-1"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l909" id="l909"> 909</a> &lt;div id="region-2"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l910" id="l910"> 910</a> &lt;/body&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l911" id="l911"> 911</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l912" id="l912"> 912</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l913" id="l913"> 913</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l914" id="l914"> 914</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l915" id="l915"> 915</a> <table style="border: 1px solid gray;width: 100%;"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l916" id="l916"> 916</a> <tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l917" id="l917"> 917</a> <td>article with two<br> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l918" id="l918"> 918</a> overflowing lines</td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l919" id="l919"> 919</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l920" id="l920"> 920</a> <td><code>region-fragment: break<br> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l921" id="l921"> 921</a> overflow: visible</code></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l922" id="l922"> 922</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l923" id="l923"> 923</a> <td><code>region-fragment: auto<br> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l924" id="l924"> 924</a> overflow: visible</code></td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l925" id="l925"> 925</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l926" id="l926"> 926</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l927" id="l927"> 927</a> <tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l928" id="l928"> 928</a> <td rowspan="3" style="vertical-align: top;"><img src= </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l929" id="l929"> 929</a> "images/region-overflow-flow.png" alt= </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l930" id="l930"> 930</a> "flow content rendering"></td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l931" id="l931"> 931</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l932" id="l932"> 932</a> <td><img src="images/region-overflow-break-visible.png" alt= </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l933" id="l933"> 933</a> "rendering with region-fragment:break and overflow:visible"></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l934" id="l934"> 934</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l935" id="l935"> 935</a> <td><img src="images/region-overflow-auto-visible.png" </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l936" id="l936"> 936</a> alt="rendering with region-fragment:auto and overflow:visible"></td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l937" id="l937"> 937</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l938" id="l938"> 938</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l939" id="l939"> 939</a> <tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l940" id="l940"> 940</a> <td><code>region-fragment: break<br> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l941" id="l941"> 941</a> overflow: hidden</code></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l942" id="l942"> 942</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l943" id="l943"> 943</a> <td><code>region-fragment: auto<br> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l944" id="l944"> 944</a> overflow: hidden</code></td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l945" id="l945"> 945</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l946" id="l946"> 946</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l947" id="l947"> 947</a> <tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l948" id="l948"> 948</a> <td><img src="images/region-overflow-break-hidden.png" alt= </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l949" id="l949"> 949</a> "rendering with region-fragment:break and overflow:hidden"></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l950" id="l950"> 950</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l951" id="l951"> 951</a> <td><img src="images/region-overflow-auto-hidden.png" </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l952" id="l952"> 952</a> alt="rendering with region-fragment:auto and overflow:hidden"></td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l953" id="l953"> 953</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l954" id="l954"> 954</a> </table> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l955" id="l955"> 955</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l956" id="l956"> 956</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l957" id="l957"> 957</a> Combinations of region-fragment and overflow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l958" id="l958"> 958</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l959" id="l959"> 959</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l960" id="l960"> 960</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l961" id="l961"> 961</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l962" id="l962"> 962</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l963" id="l963"> 963</a> The 'overflow' property is honored on a region: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l964" id="l964"> 964</a> if region content overflows, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l965" id="l965"> 965</a> such as the borders of elements </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l966" id="l966"> 966</a> on the last line, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l967" id="l967"> 967</a> the 'overflow' property controls </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l968" id="l968"> 968</a> the visibility of the overflowing content. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l969" id="l969"> 969</a> See the 'overflow' property definition ([[CSS21]]). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l970" id="l970"> 970</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l971" id="l971"> 971</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l972" id="l972"> 972</a> <h2 id="cssom_view_and_css_regions"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l973" id="l973"> 973</a> CSSOM</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l974" id="l974"> 974</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l975" id="l975"> 975</a> Since content may flow into multiple regions, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l976" id="l976"> 976</a> authors need a way to determine if there are enough regions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l977" id="l977"> 977</a> to flow all the content from a named flow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l978" id="l978"> 978</a> This is especially important considering that the size of regions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l979" id="l979"> 979</a> or the size of the content may change depending on the display context. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l980" id="l980"> 980</a> For example, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l981" id="l981"> 981</a> flowing the same content on a mobile phone with a small screen </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l982" id="l982"> 982</a> may require more regions than on a large desktop display. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l983" id="l983"> 983</a> Another example is the user changing </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l984" id="l984"> 984</a> the font size of text flowing through regions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l985" id="l985"> 985</a> Depending on the change, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l986" id="l986"> 986</a> new regions may be needed to accommodate for the additional space required </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l987" id="l987"> 987</a> to fit the larger text or some regions may need to be removed for smaller text. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l988" id="l988"> 988</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l989" id="l989"> 989</a> <h3 id="the-namedflow-interface"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l990" id="l990"> 990</a> The NamedFlow interface</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l991" id="l991"> 991</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l992" id="l992"> 992</a> The following APIs allow scripts </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l993" id="l993"> 993</a> to reference a <a idl>NamedFlow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l994" id="l994"> 994</a> object representation of a <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l995" id="l995"> 995</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l996" id="l996"> 996</a> An additional attribute on the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l997" id="l997"> 997</a> <a href= "https://www.w3.org/TR/dom/#interface-document"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l998" id="l998"> 998</a> <code class= "idl">Document</code></a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l999" id="l999"> 999</a> interface provide access to <a>named flows</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1000" id="l1000"> 1000</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1001" id="l1001"> 1001</a> <pre class="idl"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1002" id="l1002"> 1002</a> partial interface Document { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1003" id="l1003"> 1003</a> readonly attribute NamedFlowMap namedFlows; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1004" id="l1004"> 1004</a> }; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1005" id="l1005"> 1005</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1006" id="l1006"> 1006</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1007" id="l1007"> 1007</a> The </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1008" id="l1008"> 1008</a> <dfn id="document-namedflows"><code class="idl">namedFlows</code></dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1009" id="l1009"> 1009</a> attribute on the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1010" id="l1010"> 1010</a> <a href= "https://www.w3.org/TR/dom/#interface-document"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1011" id="l1011"> 1011</a> <code class= "idl">Document</code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1012" id="l1012"> 1012</a> </a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1013" id="l1013"> 1013</a> interface returns a static snapshot </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1014" id="l1014"> 1014</a> of all the current <a>named flows</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1015" id="l1015"> 1015</a> in the document. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1016" id="l1016"> 1016</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1017" id="l1017"> 1017</a> The <dfn attribute for="Document"><code class="idl">namedFlows</code></dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1018" id="l1018"> 1018</a> map must include all <a>named flows</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1019" id="l1019"> 1019</a> that are currently in the <code>CREATED</code> state. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1020" id="l1020"> 1020</a> The list must not include <a>named flows</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1021" id="l1021"> 1021</a> that are in the <code>NULL</code> state. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1022" id="l1022"> 1022</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1023" id="l1023"> 1023</a> The </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1024" id="l1024"> 1024</a> {{NamedFlowMap}} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1025" id="l1025"> 1025</a> interface provides a map of current </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1026" id="l1026"> 1026</a> <a idl>NamedFlow</a> instances </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1027" id="l1027"> 1027</a> in the document. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1028" id="l1028"> 1028</a> The <a idl>NamedFlowMap</a> object </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1029" id="l1029"> 1029</a> is a snapshot of the data, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1030" id="l1030"> 1030</a> and is read-only. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1031" id="l1031"> 1031</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1032" id="l1032"> 1032</a> <pre class="idl"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1033" id="l1033"> 1033</a> [Exposed=Window, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1034" id="l1034"> 1034</a> MapClass=(CSSOMString, NamedFlow)] interface NamedFlowMap { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1035" id="l1035"> 1035</a> NamedFlow? get(CSSOMString flowName); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1036" id="l1036"> 1036</a> boolean has(CSSOMString flowName); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1037" id="l1037"> 1037</a> NamedFlowMap set(CSSOMString flowName, NamedFlow flowValue); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1038" id="l1038"> 1038</a> boolean delete(CSSOMString flowName); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1039" id="l1039"> 1039</a> }; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1040" id="l1040"> 1040</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1041" id="l1041"> 1041</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1042" id="l1042"> 1042</a> The map entries in a </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1043" id="l1043"> 1043</a> <a idl>NamedFlowMap</a> object </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1044" id="l1044"> 1044</a> are the named flow idents </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1045" id="l1045"> 1045</a> paired with their </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1046" id="l1046"> 1046</a> <a idl>NamedFlow</a> objects. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1047" id="l1047"> 1047</a> The <dfn method for="NamedFlowMap">get()</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1048" id="l1048"> 1048</a> and <dfn method for="NamedFlowMap">has()</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1049" id="l1049"> 1049</a> methods return null and false respectively </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1050" id="l1050"> 1050</a> if there is no <a idl>NamedFlow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1051" id="l1051"> 1051</a> with the given ident. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1052" id="l1052"> 1052</a> The <dfn method for="NamedFlowMap">set()</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1053" id="l1053"> 1053</a> and <dfn method for="NamedFlowMap">delete()</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1054" id="l1054"> 1054</a> methods always throw an </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1055" id="l1055"> 1055</a> <code>InvalidAccessError</code> exception, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1056" id="l1056"> 1056</a> as this map is read-only. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1057" id="l1057"> 1057</a> The <a idl>NamedFlowMap</a> interface </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1058" id="l1058"> 1058</a> uses the rest of the default map </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1059" id="l1059"> 1059</a> <a href="http://dev.w3.org/2006/webapi/WebIDL/#es-map-members">class methods</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1060" id="l1060"> 1060</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1061" id="l1061"> 1061</a> The {{NamedFlow}} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1062" id="l1062"> 1062</a> interface offers a representation </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1063" id="l1063"> 1063</a> of a <a>named flow</a> instance. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1064" id="l1064"> 1064</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1065" id="l1065"> 1065</a> The <a idl>NamedFlow</a> interface </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1066" id="l1066"> 1066</a> can be used for different purposes. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1067" id="l1067"> 1067</a> For example, the <code>getRegionsByContent()</code> method </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1068" id="l1068"> 1068</a> can help navigate by bookmark: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1069" id="l1069"> 1069</a> a script can find the <a>CSS Regions</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1070" id="l1070"> 1070</a> that display a particular anchor </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1071" id="l1071"> 1071</a> and bring them to view. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1072" id="l1072"> 1072</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1073" id="l1073"> 1073</a> Likewise, the interface allows authors </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1074" id="l1074"> 1074</a> to check if all content has been fitted </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1075" id="l1075"> 1075</a> into existing regions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1076" id="l1076"> 1076</a> If it has, the <a idl>overset</a> attribute </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1077" id="l1077"> 1077</a> would be false. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1078" id="l1078"> 1078</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1079" id="l1079"> 1079</a> <pre class="idl"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1080" id="l1080"> 1080</a> [Exposed=Window] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1081" id="l1081"> 1081</a> interface NamedFlow : EventTarget { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1082" id="l1082"> 1082</a> readonly attribute CSSOMString name; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1083" id="l1083"> 1083</a> readonly attribute boolean overset; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1084" id="l1084"> 1084</a> sequence&lt;Region&gt; getRegions(); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1085" id="l1085"> 1085</a> readonly attribute short firstEmptyRegionIndex; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1086" id="l1086"> 1086</a> sequence&lt;Node&gt; getContent(); </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1087" id="l1087"> 1087</a> sequence&lt;Region&gt; getRegionsByContent(Node node); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1088" id="l1088"> 1088</a> }; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1089" id="l1089"> 1089</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1090" id="l1090"> 1090</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1091" id="l1091"> 1091</a> The <dfn attribute for="NamedFlow"><code class="idl">name</code></dfn> attribute </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1092" id="l1092"> 1092</a> returns the name of the <a idl>NamedFlow</a> instance. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1093" id="l1093"> 1093</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1094" id="l1094"> 1094</a> The <dfn attribute for="NamedFlow"><code class="idl">overset</code></dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1095" id="l1095"> 1095</a> attribute returns true </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1096" id="l1096"> 1096</a> if there are <a>named flow</a> fragments </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1097" id="l1097"> 1097</a> that do not fit </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1098" id="l1098"> 1098</a> in the associated <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1099" id="l1099"> 1099</a> (including the case where </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1100" id="l1100"> 1100</a> there are <a>named flow</a> fragments </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1101" id="l1101"> 1101</a> but no regions in the <a>region chain</a>). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1102" id="l1102"> 1102</a> Otherwise, it returns false. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1103" id="l1103"> 1103</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1104" id="l1104"> 1104</a> The <dfn method for="NamedFlow"><code class="idl">getRegions()</code></dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1105" id="l1105"> 1105</a> method returns the sequence </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1106" id="l1106"> 1106</a> of regions in the <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1107" id="l1107"> 1107</a> associated with the <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1108" id="l1108"> 1108</a> Regions after the <a>last usable region</a>, if any, are included. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1109" id="l1109"> 1109</a> Note that the returned values </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1110" id="l1110"> 1110</a> is a static sequence </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1111" id="l1111"> 1111</a> in document order. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1112" id="l1112"> 1112</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1113" id="l1113"> 1113</a> The <dfn attribute for="NamedFlow">firstEmptyRegionIndex</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1114" id="l1114"> 1114</a> is the index of the first region </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1115" id="l1115"> 1115</a> in the <a>region chain</a> with the <code>regionOverset</code> attribute </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1116" id="l1116"> 1116</a> set to <code>empty</code>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1117" id="l1117"> 1117</a> If all regions have the <code>regionOverset</code> attribute </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1118" id="l1118"> 1118</a> set to <code>fit</code> or <code>overset</code>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1119" id="l1119"> 1119</a> the value for <code>firstEmptyRegionIndex</code> is <code>-1</code>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1120" id="l1120"> 1120</a> If there are no regions in the <a>region chain</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1121" id="l1121"> 1121</a> the value is <code>-1</code> as well. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1122" id="l1122"> 1122</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1123" id="l1123"> 1123</a> The <dfn method for="NamedFlow">getContent()</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1124" id="l1124"> 1124</a> method returns an ordered collection </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1125" id="l1125"> 1125</a> of nodes that constitute the <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1126" id="l1126"> 1126</a> The returned list is a static snapshot </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1127" id="l1127"> 1127</a> of the <a>named flow</a> content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1128" id="l1128"> 1128</a> at the time the method is invoked. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1129" id="l1129"> 1129</a> This list contains the contents </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1130" id="l1130"> 1130</a> that were moved to the <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1131" id="l1131"> 1131</a> by the flow-into property </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1132" id="l1132"> 1132</a> but not any descendants </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1133" id="l1133"> 1133</a> (unless the descendants are themselves </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1134" id="l1134"> 1134</a> moved to the <a>named flow</a>). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1135" id="l1135"> 1135</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1136" id="l1136"> 1136</a> The <dfn method for="NamedFlow">getRegionsByContent()</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1137" id="l1137"> 1137</a> method returns the sequence of regions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1138" id="l1138"> 1138</a> that contain at least part </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1139" id="l1139"> 1139</a> of the target content node </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1140" id="l1140"> 1140</a> if it belongs to the <a>named flow</a> directly </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1141" id="l1141"> 1141</a> or one of its ancestors belongs to the <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1142" id="l1142"> 1142</a> Otherwise, the method returns </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1143" id="l1143"> 1143</a> an empty sequence. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1144" id="l1144"> 1144</a> The returned value </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1145" id="l1145"> 1145</a> is a static sequence </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1146" id="l1146"> 1146</a> in document order. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1147" id="l1147"> 1147</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1148" id="l1148"> 1148</a> The <a>named flow</a> states are : </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1149" id="l1149"> 1149</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1150" id="l1150"> 1150</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1151" id="l1151"> 1151</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1152" id="l1152"> 1152</a> <code class="idl">NULL</code>: the <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1153" id="l1153"> 1153</a> contains no conent and has no <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1154" id="l1154"> 1154</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1155" id="l1155"> 1155</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1156" id="l1156"> 1156</a> <code class="idl">CREATED</code>: the <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1157" id="l1157"> 1157</a> either contains content or has a <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1158" id="l1158"> 1158</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1159" id="l1159"> 1159</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1160" id="l1160"> 1160</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1161" id="l1161"> 1161</a> A <a idl>NamedFlow</a> object is live: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1162" id="l1162"> 1162</a> it always represents the <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1163" id="l1163"> 1163</a> with the corresponding name even if </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1164" id="l1164"> 1164</a> that <a>named flow</a> has transitioned </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1165" id="l1165"> 1165</a> to the <code>NULL</code> state. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1166" id="l1166"> 1166</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1167" id="l1167"> 1167</a> <h3 id="the-region-interface"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1168" id="l1168"> 1168</a> The Region mixin</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1169" id="l1169"> 1169</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1170" id="l1170"> 1170</a> {{Region}} is a </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1171" id="l1171"> 1171</a> <a href="https://heycam.github.io/webidl/#idl-interface-mixins">mixin</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1172" id="l1172"> 1172</a> which must be included by all interfaces </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1173" id="l1173"> 1173</a> (<a href="https://www.w3.org/TR/dom/#interface-element"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1174" id="l1174"> 1174</a> <code class= "idl">Elements</code></a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1175" id="l1175"> 1175</a> pseudo-elements or other CSS constructs </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1176" id="l1176"> 1176</a> such as <a href="https://drafts.csswg.org/css3-page-template/#templates-and-slots">slots</a>) in an implementation which can be <a>CSS Regions</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1177" id="l1177"> 1177</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1178" id="l1178"> 1178</a> <pre class="idl"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1179" id="l1179"> 1179</a> interface mixin Region { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1180" id="l1180"> 1180</a> readonly attribute CSSOMString regionOverset; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1181" id="l1181"> 1181</a> sequence&lt;Range&gt;? getRegionFlowRanges(); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1182" id="l1182"> 1182</a> }; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1183" id="l1183"> 1183</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1184" id="l1184"> 1184</a> Element includes Region; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1185" id="l1185"> 1185</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1186" id="l1186"> 1186</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1187" id="l1187"> 1187</a> The <dfn attribute for="Region"><code class= "idl">regionOverset</code></dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1188" id="l1188"> 1188</a> attribute returns one of the following values: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1189" id="l1189"> 1189</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1190" id="l1190"> 1190</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1191" id="l1191"> 1191</a> <dt>''overset''</dt> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1192" id="l1192"> 1192</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1193" id="l1193"> 1193</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1194" id="l1194"> 1194</a> The region is the <a>last usable region</a> in the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1195" id="l1195"> 1195</a> <a>region chain</a> and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1196" id="l1196"> 1196</a> not able to fit the remaining content from the <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1197" id="l1197"> 1197</a> Note that the region's </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1198" id="l1198"> 1198</a> <a href= "https://www.w3.org/TR/CSS21/visufx.html#overflow"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1199" id="l1199"> 1199</a> <code class= "idl">overflow</code></a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1200" id="l1200"> 1200</a> property value can be used to control the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1201" id="l1201"> 1201</a> visibility of the overflowing content and the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1202" id="l1202"> 1202</a> 'region-fragment' property controls whether or not fragmentation happens </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1203" id="l1203"> 1203</a> on the content that overflows the <a>last usable region</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1204" id="l1204"> 1204</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1205" id="l1205"> 1205</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1206" id="l1206"> 1206</a> <dt>''fit''</dt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1207" id="l1207"> 1207</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1208" id="l1208"> 1208</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1209" id="l1209"> 1209</a> The region's flow fragment content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1210" id="l1210"> 1210</a> fits into the region's </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1211" id="l1211"> 1211</a> <a>content box</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1212" id="l1212"> 1212</a> If the region is the <a>last usable region</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1213" id="l1213"> 1213</a> in the <a>region chain</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1214" id="l1214"> 1214</a> it means that the content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1215" id="l1215"> 1215</a> fits without overflowing. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1216" id="l1216"> 1216</a> If the region is not the <a>last usable region</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1217" id="l1217"> 1217</a> in the <a>region chain</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1218" id="l1218"> 1218</a> that means the <a>named flow</a> content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1219" id="l1219"> 1219</a> may be further fitted in subsequent regions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1220" id="l1220"> 1220</a> In this last case, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1221" id="l1221"> 1221</a> note that the <a>named flow</a> fragment may be empty </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1222" id="l1222"> 1222</a> (for example if the region is too small </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1223" id="l1223"> 1223</a> to accommodate any content). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1224" id="l1224"> 1224</a> This value is returned if the <a idl>Region</a> object </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1225" id="l1225"> 1225</a> is not (or no longer) a region. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1226" id="l1226"> 1226</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1227" id="l1227"> 1227</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1228" id="l1228"> 1228</a> <dt>''empty''</dt> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1229" id="l1229"> 1229</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1230" id="l1230"> 1230</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1231" id="l1231"> 1231</a> All content from the <a>named flow</a> was fitted in prior regions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1232" id="l1232"> 1232</a> </dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1233" id="l1233"> 1233</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1234" id="l1234"> 1234</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1235" id="l1235"> 1235</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1236" id="l1236"> 1236</a> If there is no content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1237" id="l1237"> 1237</a> in the <a>named flow</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1238" id="l1238"> 1238</a> all regions associated </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1239" id="l1239"> 1239</a> with that <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1240" id="l1240"> 1240</a> should have their <a idl>regionOverset</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1241" id="l1241"> 1241</a> attribute return ''empty''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1242" id="l1242"> 1242</a> If there is content in the flow </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1243" id="l1243"> 1243</a> but that content does not </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1244" id="l1244"> 1244</a> generate any box for visual formatting, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1245" id="l1245"> 1245</a> the ''overset'' attribute on the first region </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1246" id="l1246"> 1246</a> in the <a>region chain</a> associated </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1247" id="l1247"> 1247</a> with the flow will return ''fit''. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1248" id="l1248"> 1248</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1249" id="l1249"> 1249</a> The <dfn method for="Region">getRegionFlowRanges()</dfn> method </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1250" id="l1250"> 1250</a> returns an array of <a href= "https://www.w3.org/TR/dom/#interface-range">Range</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1251" id="l1251"> 1251</a> instances corresponding to fragment </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1252" id="l1252"> 1252</a> from the <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1253" id="l1253"> 1253</a> that is laid out in the region. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1254" id="l1254"> 1254</a> If the region has not received a fragment </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1255" id="l1255"> 1255</a> because it is too small to accommodate any, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1256" id="l1256"> 1256</a> the method returns a single <a idl>Range</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1257" id="l1257"> 1257</a> where the <code>startContainer</code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1258" id="l1258"> 1258</a> and <code>startOffset</code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1259" id="l1259"> 1259</a> have the same values as </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1260" id="l1260"> 1260</a> the <code>endContainer</code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1261" id="l1261"> 1261</a> and <code>endOffset</code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1262" id="l1262"> 1262</a> and therefore the collapsed attribute </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1263" id="l1263"> 1263</a> on the <a idl>Range</a> is true. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1264" id="l1264"> 1264</a> In that situation, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1265" id="l1265"> 1265</a> if the region is the first </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1266" id="l1266"> 1266</a> in the <a>region chain</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1267" id="l1267"> 1267</a> the <code>startContainer</code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1268" id="l1268"> 1268</a> is the first <code>Node</code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1269" id="l1269"> 1269</a> in the <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1270" id="l1270"> 1270</a> and the <code>startOffset</code> is zero. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1271" id="l1271"> 1271</a> If the region is the <a>last usable region</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1272" id="l1272"> 1272</a> in the <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1273" id="l1273"> 1273</a> (but not the first and only one), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1274" id="l1274"> 1274</a> the <code>startContainer</code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1275" id="l1275"> 1275</a> and <code>startOffset</code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1276" id="l1276"> 1276</a> are the same values as </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1277" id="l1277"> 1277</a> the <code>endContainer</code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1278" id="l1278"> 1278</a> and <code>endOffset</code> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1279" id="l1279"> 1279</a> on the previous region </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1280" id="l1280"> 1280</a> in the <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1281" id="l1281"> 1281</a> The method returns null </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1282" id="l1282"> 1282</a> if the <span>region</span> object </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1283" id="l1283"> 1283</a> is not (or no longer) a region. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1284" id="l1284"> 1284</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1285" id="l1285"> 1285</a> A <a idl>Region</a> instance </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1286" id="l1286"> 1286</a> may represent an object </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1287" id="l1287"> 1287</a> that is no longer a <span>region</span>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1288" id="l1288"> 1288</a> This may happen for example </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1289" id="l1289"> 1289</a> if the 'flow-from' property </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1290" id="l1290"> 1290</a> on the corresponding pseudo-element, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1291" id="l1291"> 1291</a> element or other construct </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1292" id="l1292"> 1292</a> becomes ''flow-from/none'' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1293" id="l1293"> 1293</a> but a script is still holding </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1294" id="l1294"> 1294</a> a reference to the <a idl>Region</a> object. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1295" id="l1295"> 1295</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1296" id="l1296"> 1296</a> <h3 id="named-flow-events"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1297" id="l1297"> 1297</a> Named flow events</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1298" id="l1298"> 1298</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1299" id="l1299"> 1299</a> <a idl>NamedFlow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1300" id="l1300"> 1300</a> objects are <a href="https://www.w3.org/TR/dom/#interface-eventtarget">EventTargets</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1301" id="l1301"> 1301</a> which dispatch the following events </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1302" id="l1302"> 1302</a> for their respective triggers. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1303" id="l1303"> 1303</a> These events are asynchronous, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1304" id="l1304"> 1304</a> and fire at the end of the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1305" id="l1305"> 1305</a> <a href="#named-flows-layout">regions visual formatting</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1306" id="l1306"> 1306</a> steps. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1307" id="l1307"> 1307</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1308" id="l1308"> 1308</a> The regionfragmentchange event is dispatched </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1309" id="l1309"> 1309</a> on any change to a named flow's fragmentation through its <a>region chain</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1310" id="l1310"> 1310</a> including changes to any overset fragment. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1311" id="l1311"> 1311</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1312" id="l1312"> 1312</a> <table class="event-desc" style="border: 1px solid gray"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1313" id="l1313"> 1313</a> <tbody> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1314" id="l1314"> 1314</a> <tr class="assert must"><th>Type</th> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1315" id="l1315"> 1315</a> <td class="eventname"><strong><code>regionfragmentchange</code></strong></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1316" id="l1316"> 1316</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1317" id="l1317"> 1317</a> <tr class="assert must"><th>Interface</th> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1318" id="l1318"> 1318</a> <td><code><a href="https://www.w3.org/TR/DOM-Level-3-Events/#events-uievents">UIEvent</a></code> (see [[!DOM-LEVEL-3-EVENTS]])</td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1319" id="l1319"> 1319</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1320" id="l1320"> 1320</a> <tr class="assert must"><th>Sync / Async</th> <td>Async</td></tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1321" id="l1321"> 1321</a> <tr class="assert must"><th>Bubbles</th> <td>No</td></tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1322" id="l1322"> 1322</a> <tr class="assert must"><th>Target</th> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1323" id="l1323"> 1323</a> <td><a idl>NamedFlow</a></td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1324" id="l1324"> 1324</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1325" id="l1325"> 1325</a> <tr class="assert must"><th>Cancelable</th> <td>Yes</td></tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1326" id="l1326"> 1326</a> <tr class="assert must"><th>Default action</th> <td>none</td></tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1327" id="l1327"> 1327</a> <tr class="assert must"><th>Context info</th> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1328" id="l1328"> 1328</a> <td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1329" id="l1329"> 1329</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1330" id="l1330"> 1330</a> <li><code class="attribute-name">Event.target</code>: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1331" id="l1331"> 1331</a> <a idl>NamedFlow</a> whose fragmentation has changed. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1332" id="l1332"> 1332</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1333" id="l1333"> 1333</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1334" id="l1334"> 1334</a> </td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1335" id="l1335"> 1335</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1336" id="l1336"> 1336</a> </tbody> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1337" id="l1337"> 1337</a> </table> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1338" id="l1338"> 1338</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1339" id="l1339"> 1339</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1340" id="l1340"> 1340</a> The regionoversetchange event is dispatched </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1341" id="l1341"> 1341</a> if any of the regionOverset values change </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1342" id="l1342"> 1342</a> in a named flow's <a>region chain</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1343" id="l1343"> 1343</a> including when regions are added or removed from the chain. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1344" id="l1344"> 1344</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1345" id="l1345"> 1345</a> <table class="event-desc" style="border: 1px solid gray"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1346" id="l1346"> 1346</a> <tbody> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1347" id="l1347"> 1347</a> <tr class="assert must"><th>Type</th> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1348" id="l1348"> 1348</a> <td class="eventname"><strong><code>regionoversetchange</code></strong></td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1349" id="l1349"> 1349</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1350" id="l1350"> 1350</a> <tr class="assert must"><th>Interface</th> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1351" id="l1351"> 1351</a> <td><code><a href="https://www.w3.org/TR/DOM-Level-3-Events/#events-UIEvent">UIEvent</a></code> (see [[!DOM-LEVEL-3-EVENTS]])</td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1352" id="l1352"> 1352</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1353" id="l1353"> 1353</a> <tr class="assert must"><th>Sync / Async</th> <td>Async</td></tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1354" id="l1354"> 1354</a> <tr class="assert must"><th>Bubbles</th> <td>No</td></tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1355" id="l1355"> 1355</a> <tr class="assert must"><th>Target</th> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1356" id="l1356"> 1356</a> <td><a idl>NamedFlow</a></td> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1357" id="l1357"> 1357</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1358" id="l1358"> 1358</a> <tr class="assert must"><th>Cancelable</th> <td>Yes</td></tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1359" id="l1359"> 1359</a> <tr class="assert must"><th>Default action</th> <td>none</td></tr> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1360" id="l1360"> 1360</a> <tr class="assert must"><th>Context info</th> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1361" id="l1361"> 1361</a> <td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1362" id="l1362"> 1362</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1363" id="l1363"> 1363</a> <li><code class="attribute-name">Event.target</code>: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1364" id="l1364"> 1364</a> <a idl>NamedFlow</a> whose <a>region chain</a> has regionOverset values that have changed. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1365" id="l1365"> 1365</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1366" id="l1366"> 1366</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1367" id="l1367"> 1367</a> </td> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1368" id="l1368"> 1368</a> </tr> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1369" id="l1369"> 1369</a> </tbody> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1370" id="l1370"> 1370</a> </table> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1371" id="l1371"> 1371</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1372" id="l1372"> 1372</a> <h3 id="cssomview-and-regions"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1373" id="l1373"> 1373</a> Clarifications on pre-existing APIs</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1374" id="l1374"> 1374</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1375" id="l1375"> 1375</a> <h4 id="cssomview-getclientrects-and-getboundingclientrect"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1376" id="l1376"> 1376</a> <code class="idl">getClientRects()</code> and <code>getBoundingClientRect()</code></h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1377" id="l1377"> 1377</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1378" id="l1378"> 1378</a> The <a href="https://www.w3.org/TR/cssom-view/">CSSOM View Module</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1379" id="l1379"> 1379</a> defines how user agents compute </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1380" id="l1380"> 1380</a> the bounding client rectangle </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1381" id="l1381"> 1381</a> for an element (<code class="idl">getBoundingClientRect()</code>) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1382" id="l1382"> 1382</a> and its generated boxes (<code class="idl">getClientRects()</code>). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1383" id="l1383"> 1383</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1384" id="l1384"> 1384</a> This definition applies to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1385" id="l1385"> 1385</a> the (possibly) multiple boxes </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1386" id="l1386"> 1386</a> generated for an element in a named flow </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1387" id="l1387"> 1387</a> flowing through a <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1388" id="l1388"> 1388</a> The <code class="idl">getClientRects()</code> method </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1389" id="l1389"> 1389</a> returns the list of boxes generated </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1390" id="l1390"> 1390</a> for each of the element fragments </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1391" id="l1391"> 1391</a> laid out in different regions. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1392" id="l1392"> 1392</a> The <code>getBoundingClientRect()</code> method </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1393" id="l1393"> 1393</a> operates as specified in the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1394" id="l1394"> 1394</a> <a href="https://www.w3.org/TR/cssom-view/">CSSOM View Module</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1395" id="l1395"> 1395</a> as well and is computed </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1396" id="l1396"> 1396</a> from the set of rectangles </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1397" id="l1397"> 1397</a> returned by <code class="idl">getClientRects()</code>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1398" id="l1398"> 1398</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1399" id="l1399"> 1399</a> <h4 id="cssomview-offset-attributes"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1400" id="l1400"> 1400</a> <code class="idl">offsetTop</code>, <code class="idl">offsetLeft</code>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1401" id="l1401"> 1401</a> <code class="idl">offsetWidth</code>, <code class="idl">offsetHeight</code> and <code class="idl">offsetParent</code></h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1402" id="l1402"> 1402</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1403" id="l1403"> 1403</a> The computation of the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1404" id="l1404"> 1404</a> <a href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface">offset attributes</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1405" id="l1405"> 1405</a> for elements laid out in a <a>named flow</a> follow the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1406" id="l1406"> 1406</a> <a href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface">specification</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1407" id="l1407"> 1407</a> [[!CSSOM]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1408" id="l1408"> 1408</a> For the purpose of these algorithms, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1409" id="l1409"> 1409</a> the <em>first CSS layout box</em> associated </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1410" id="l1410"> 1410</a> with an element laid out in a <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1411" id="l1411"> 1411</a> is the first box generated for the first region the element is laid out into. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1412" id="l1412"> 1412</a> In the offsetParent algorithm, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1413" id="l1413"> 1413</a> the nearest ancestor search skips </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1414" id="l1414"> 1414</a> from the topmost named flow elements directly to the body element. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1415" id="l1415"> 1415</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1416" id="l1416"> 1416</a> <h2 id="multi-column-regions"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1417" id="l1417"> 1417</a> Multi-column regions</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1418" id="l1418"> 1418</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1419" id="l1419"> 1419</a> A </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1420" id="l1420"> 1420</a> <a href="https://drafts.csswg.org/css3-multicol/#multi-column-element">multi-column</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1421" id="l1421"> 1421</a> [[CSS3COL]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1422" id="l1422"> 1422</a> element can be </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1423" id="l1423"> 1423</a> assigned to a <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1424" id="l1424"> 1424</a> The element becomes part </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1425" id="l1425"> 1425</a> of the <a>region chain</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1426" id="l1426"> 1426</a> for the associated <a>named flow</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1427" id="l1427"> 1427</a> and flows its content fragments </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1428" id="l1428"> 1428</a> through columns according to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1429" id="l1429"> 1429</a> the multi-column specification </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1430" id="l1430"> 1430</a> [[!CSS3COL]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1431" id="l1431"> 1431</a> In particular, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1432" id="l1432"> 1432</a> when computing the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1433" id="l1433"> 1433</a> <a href="#rfcb-flow-fragment-height-resolution">flow fragment height</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1434" id="l1434"> 1434</a> of a multi-column container </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1435" id="l1435"> 1435</a> that is associated with a <em><a>named flow</a></em>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1436" id="l1436"> 1436</a> the 'column-fill' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1437" id="l1437"> 1437</a> [[!CSS3COL]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1438" id="l1438"> 1438</a> property is honored </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1439" id="l1439"> 1439</a> to balance the fragments of content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1440" id="l1440"> 1440</a> that would flow through </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1441" id="l1441"> 1441</a> its columns. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1442" id="l1442"> 1442</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1443" id="l1443"> 1443</a> Overflow of multicol regions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1444" id="l1444"> 1444</a> is mostly handled </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1445" id="l1445"> 1445</a> according to the same rules </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1446" id="l1446"> 1446</a> as other <a>CSS Regions</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1447" id="l1447"> 1447</a> If the remainder of the named flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1448" id="l1448"> 1448</a> does not fit </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1449" id="l1449"> 1449</a> in the multicol region, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1450" id="l1450"> 1450</a> then the rest </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1451" id="l1451"> 1451</a> of the content flows into </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1452" id="l1452"> 1452</a> the remaining <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1453" id="l1453"> 1453</a> However, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1454" id="l1454"> 1454</a> if a multicol region </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1455" id="l1455"> 1455</a> is the <a>last usable region</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1456" id="l1456"> 1456</a> in a <a>region chain</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1457" id="l1457"> 1457</a> then the multicol region must follow the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1458" id="l1458"> 1458</a> <a href="https://drafts.csswg.org/css3-multicol/#overflow-columns">overflow column rules</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1459" id="l1459"> 1459</a> [[!CSS3COL]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1460" id="l1460"> 1460</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1461" id="l1461"> 1461</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1462" id="l1462"> 1462</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1463" id="l1463"> 1463</a> The following example: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1464" id="l1464"> 1464</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1465" id="l1465"> 1465</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1466" id="l1466"> 1466</a> &lt;style&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1467" id="l1467"> 1467</a> article { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1468" id="l1468"> 1468</a> flow-into: article-flow; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1469" id="l1469"> 1469</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1470" id="l1470"> 1470</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1471" id="l1471"> 1471</a> #multi-col { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1472" id="l1472"> 1472</a> column-count: 2; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1473" id="l1473"> 1473</a> flow-from: article; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1474" id="l1474"> 1474</a> height: 6em; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1475" id="l1475"> 1475</a> column-gap: 1em; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1476" id="l1476"> 1476</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1477" id="l1477"> 1477</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1478" id="l1478"> 1478</a> #remainder { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1479" id="l1479"> 1479</a> flow-from: article; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1480" id="l1480"> 1480</a> height: auto; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1481" id="l1481"> 1481</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1482" id="l1482"> 1482</a> &lt;/style&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1483" id="l1483"> 1483</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1484" id="l1484"> 1484</a> &lt;body&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1485" id="l1485"> 1485</a> &lt;article&gt;...&lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1486" id="l1486"> 1486</a> &lt;div id="multicol"&gt&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1487" id="l1487"> 1487</a> &lt;div id="remainder"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1488" id="l1488"> 1488</a> &lt;/body&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1489" id="l1489"> 1489</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1490" id="l1490"> 1490</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1491" id="l1491"> 1491</a> is equivalent in rendering to, for example: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1492" id="l1492"> 1492</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1493" id="l1493"> 1493</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1494" id="l1494"> 1494</a> &lt;style&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1495" id="l1495"> 1495</a> article { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1496" id="l1496"> 1496</a> flow-into: article-flow; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1497" id="l1497"> 1497</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1498" id="l1498"> 1498</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1499" id="l1499"> 1499</a> #flex { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1500" id="l1500"> 1500</a> display: flex; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1501" id="l1501"> 1501</a> flex-pack: justify; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1502" id="l1502"> 1502</a> height: 6em; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1503" id="l1503"> 1503</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1504" id="l1504"> 1504</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1505" id="l1505"> 1505</a> #flex > div { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1506" id="l1506"> 1506</a> flow-from: article; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1507" id="l1507"> 1507</a> width: calc(50% - 0.5em); </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1508" id="l1508"> 1508</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1509" id="l1509"> 1509</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1510" id="l1510"> 1510</a> #remainder { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1511" id="l1511"> 1511</a> flow-from: article; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1512" id="l1512"> 1512</a> height: auto; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1513" id="l1513"> 1513</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1514" id="l1514"> 1514</a> &lt;/style&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1515" id="l1515"> 1515</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1516" id="l1516"> 1516</a> &lt;body&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1517" id="l1517"> 1517</a> &lt;article&gt;...&lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1518" id="l1518"> 1518</a> &lt;div id="flex"&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1519" id="l1519"> 1519</a> &lt;div /&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1520" id="l1520"> 1520</a> &lt;div /&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1521" id="l1521"> 1521</a> &lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1522" id="l1522"> 1522</a> &lt;div id="remainder"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1523" id="l1523"> 1523</a> &lt;/body&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1524" id="l1524"> 1524</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1525" id="l1525"> 1525</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1526" id="l1526"> 1526</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1527" id="l1527"> 1527</a> <h2 id="pseudo_elements"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1528" id="l1528"> 1528</a> Pseudo-elements</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1529" id="l1529"> 1529</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1530" id="l1530"> 1530</a> It can be useful </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1531" id="l1531"> 1531</a> to visually mark the content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1532" id="l1532"> 1532</a> to highlight that a content thread </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1533" id="l1533"> 1533</a> is flowing through the <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1534" id="l1534"> 1534</a> For example, a marker </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1535" id="l1535"> 1535</a> such as <em>'continued below'</em> clearly indicates, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1536" id="l1536"> 1536</a> at the end of a <a>CSS Region</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1537" id="l1537"> 1537</a> that there is more content in the flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1538" id="l1538"> 1538</a> which can be found by scrolling past </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1539" id="l1539"> 1539</a> whatever content interrupts the <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1540" id="l1540"> 1540</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1541" id="l1541"> 1541</a> The '::before' and '::after' pseudo-elements (see [[!SELECT]]) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1542" id="l1542"> 1542</a> let content authors mark the beginning </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1543" id="l1543"> 1543</a> and end of a region with such markers. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1544" id="l1544"> 1544</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1545" id="l1545"> 1545</a> <h2 id="regions-visual-formatting-details"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1546" id="l1546"> 1546</a> Regions visual formatting details</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1547" id="l1547"> 1547</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1548" id="l1548"> 1548</a> Regions are laid out by CSS and take part in the normal box model and other layout models </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1549" id="l1549"> 1549</a> offered by CSS modules such as flexible boxes ([[CSS3-FLEXBOX]]). However, <span>regions</span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1550" id="l1550"> 1550</a> lay out a fragment of their <a>named flow</a> instead of laying out descendant content as happens with other </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1551" id="l1551"> 1551</a> boxes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1552" id="l1552"> 1552</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1553" id="l1553"> 1553</a> This section describes the model for laying out <span>regions</span> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1554" id="l1554"> 1554</a> and for laying out <a>named flow</a> content into regions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1555" id="l1555"> 1555</a> The descriptions in this section are biased towards a horizontal writing mode, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1556" id="l1556"> 1556</a> using ''width'' for logical width (or measure) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1557" id="l1557"> 1557</a> and ''height'' for logical height (or extent) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1558" id="l1558"> 1558</a> as <a href="https://www.w3.org/TR/css3-writing-modes/#abstract-dimensions">defined</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1559" id="l1559"> 1559</a> in the CSS Writing Modes Module [[!CSS3-WRITING-MODES]]). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1560" id="l1560"> 1560</a> To use this model in a vertical writing mode apply the principles </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1561" id="l1561"> 1561</a> <a href="https://www.w3.org/TR/css3-writing-modes/#vertical-layout">described</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1562" id="l1562"> 1562</a> in that specification. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1563" id="l1563"> 1563</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1564" id="l1564"> 1564</a> <h3 id="processing-model"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1565" id="l1565"> 1565</a> Processing model</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1566" id="l1566"> 1566</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1567" id="l1567"> 1567</a> The '::before' content is laid out </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1568" id="l1568"> 1568</a> in the region prior to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1569" id="l1569"> 1569</a> any other content coming from the flow. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1570" id="l1570"> 1570</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1571" id="l1571"> 1571</a> The '::after' content is laid out </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1572" id="l1572"> 1572</a> in the region after laying out </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1573" id="l1573"> 1573</a> the flow fragment content into the <span>RFCB</span>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1574" id="l1574"> 1574</a> Then, flow content is removed from the fragment </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1575" id="l1575"> 1575</a> to accommodate the '::after' content. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1576" id="l1576"> 1576</a> Accommodating means that the '::after' content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1577" id="l1577"> 1577</a> is laid out without overflowing the region. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1578" id="l1578"> 1578</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1579" id="l1579"> 1579</a> If there is not enough room to accommodate </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1580" id="l1580"> 1580</a> the ::before content, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1581" id="l1581"> 1581</a> the '::after' content after removing all flow fragment content, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1582" id="l1582"> 1582</a> or a combination of the two, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1583" id="l1583"> 1583</a> then the ::before and/or ::after content overflows that region. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1584" id="l1584"> 1584</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1585" id="l1585"> 1585</a> <h3 id="regions-flow-content-box"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1586" id="l1586"> 1586</a> The Region Flow Content Box (RFCB)</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1587" id="l1587"> 1587</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1588" id="l1588"> 1588</a> A region box lays out the following boxes: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1589" id="l1589"> 1589</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1590" id="l1590"> 1590</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1591" id="l1591"> 1591</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1592" id="l1592"> 1592</a> The boxes generated by its <code>::before</code> and </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1593" id="l1593"> 1593</a> <code>::after</code> pseudo-elements, if any. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1594" id="l1594"> 1594</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1595" id="l1595"> 1595</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1596" id="l1596"> 1596</a> The anonymous <dfn>region flow content box</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1597" id="l1597"> 1597</a> (called <dfn>RFCB</dfn> in this document) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1598" id="l1598"> 1598</a> which contains the fragment of the <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1599" id="l1599"> 1599</a> that the region receives. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1600" id="l1600"> 1600</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1601" id="l1601"> 1601</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1602" id="l1602"> 1602</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1603" id="l1603"> 1603</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1604" id="l1604"> 1604</a> <img src="images/RFCB.svg" width=600 alt="The ::before, RFCB and ::after boxes contained in the Region Box"/> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1605" id="l1605"> 1605</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1606" id="l1606"> 1606</a> The Region Flow Content Box (RFCB) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1607" id="l1607"> 1607</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1608" id="l1608"> 1608</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1609" id="l1609"> 1609</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1610" id="l1610"> 1610</a> Laying out a <span>region</span> box follows the same processing rules </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1611" id="l1611"> 1611</a> as for any other <a href="https://www.w3.org/TR/CSS2/visuren.html#block-boxes">block container box</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1612" id="l1612"> 1612</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1613" id="l1613"> 1613</a> The <span>RFCB</span> is a </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1614" id="l1614"> 1614</a> <a href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container box</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1615" id="l1615"> 1615</a> with a computed 'width' of ''width/auto'' and whose used 'height' is resolved as detailed below. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1616" id="l1616"> 1616</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1617" id="l1617"> 1617</a> Since the <span>RFCB</span> is a <a href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes">block container box</a>, the ::before box and ::after box will also be block containers, though the contents of ::before and ::after may be inline within those boxes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1618" id="l1618"> 1618</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1619" id="l1619"> 1619</a> <h4 id="rfcb-width-resolution"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1620" id="l1620"> 1620</a> RFCB 'width' resolution</h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1621" id="l1621"> 1621</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1622" id="l1622"> 1622</a> At various points in the visual formatting of documents containing regions, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1623" id="l1623"> 1623</a> the used 'width' of RFCBs and regions need to be resolved. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1624" id="l1624"> 1624</a> In all cases, the resolution is done following the rules for </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1625" id="l1625"> 1625</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating widths and margins</a> (see [[!CSS21]]). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1626" id="l1626"> 1626</a> Sometimes, resolving the used 'width' value requires </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1627" id="l1627"> 1627</a> measuring the content's <code>min-content</code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1628" id="l1628"> 1628</a> and <code>max-content</code> values </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1629" id="l1629"> 1629</a> (as <a href="https://www.w3.org/TR/css3-writing-modes/#orthogonal-auto">defined</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1630" id="l1630"> 1630</a> in the CSS Writing Modes Module [[!CSS3-WRITING-MODES]]). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1631" id="l1631"> 1631</a> or an RFCB, <strong>these measures are made </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1632" id="l1632"> 1632</a> on the <em>entire</em> associated <a>named flow</a> content</strong>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1633" id="l1633"> 1633</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1634" id="l1634"> 1634</a> As a consequence, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1635" id="l1635"> 1635</a> all <span>RFCBs</span> of <span>regions</span> associated </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1636" id="l1636"> 1636</a> with a given <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1637" id="l1637"> 1637</a> share the same <code>min-content</code> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1638" id="l1638"> 1638</a> and <code>max-content</code> measures. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1639" id="l1639"> 1639</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1640" id="l1640"> 1640</a> This approach is consistent with the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1641" id="l1641"> 1641</a> <a href="https://www.w3.org/TR/css3-break/#varying-size-boxes">box model for breaking</a> ([[!CSS3-BREAK]]). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1642" id="l1642"> 1642</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1643" id="l1643"> 1643</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1644" id="l1644"> 1644</a> <h3 id="regions-visual-formatting-steps"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1645" id="l1645"> 1645</a> Regions visual formatting steps</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1646" id="l1646"> 1646</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1647" id="l1647"> 1647</a> Formatting documents that contain <a>named flows</a> laid out in regions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1648" id="l1648"> 1648</a> is a three-step process: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1649" id="l1649"> 1649</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1650" id="l1650"> 1650</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1651" id="l1651"> 1651</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1652" id="l1652"> 1652</a> <em>Step 1: RFCB <dfn>flow fragment height</dfn> resolution</em>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1653" id="l1653"> 1653</a> In this step, the heights of fragments fitting in the regions' RFCBs are resolved. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1654" id="l1654"> 1654</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1655" id="l1655"> 1655</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1656" id="l1656"> 1656</a> <em>Step 2: document and regions layout</em>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1657" id="l1657"> 1657</a> In this step, the document content and regions are laid out. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1658" id="l1658"> 1658</a> However, <a>named flow</a> content is not laid out in regions yet. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1659" id="l1659"> 1659</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1660" id="l1660"> 1660</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1661" id="l1661"> 1661</a> <em>Step 3: <a>named flow</a> layout</em>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1662" id="l1662"> 1662</a> In this step, the content of <a>named flows</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1663" id="l1663"> 1663</a> is laid out in their respective <a>region chains</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1664" id="l1664"> 1664</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1665" id="l1665"> 1665</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1666" id="l1666"> 1666</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1667" id="l1667"> 1667</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1668" id="l1668"> 1668</a> <img src="images/regions-layout-three-steps.svg" width=600 alt="visual representation of the three-step process"/> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1669" id="l1669"> 1669</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1670" id="l1670"> 1670</a> Regions visual formatting steps </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1671" id="l1671"> 1671</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1672" id="l1672"> 1672</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1673" id="l1673"> 1673</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1674" id="l1674"> 1674</a> <h4 id="rfcb-flow-fragment-height-resolution"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1675" id="l1675"> 1675</a> Step 1: RFCB flow fragment height resolution</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1676" id="l1676"> 1676</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1677" id="l1677"> 1677</a> Conceptually, resolving the flow fragment height is a two phase process. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1678" id="l1678"> 1678</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1679" id="l1679"> 1679</a> <h5 id="rfcb-flow-fragment-height-resolution-phase-1"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1680" id="l1680"> 1680</a> RFCB flow fragment height resolution, Phase 1</h5> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1681" id="l1681"> 1681</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1682" id="l1682"> 1682</a> The document is laid out with a </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1683" id="l1683"> 1683</a> <a href="https://www.w3.org/TR/CSS2/cascade.html#used-value">used</a> height of zero </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1684" id="l1684"> 1684</a> for all <span>RFCB</span>s. In this phase, the content of <a>named flows</a> is not laid out in </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1685" id="l1685"> 1685</a> <span>regions</span>. This phase yields resolved position and sizes for all regions and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1686" id="l1686"> 1686</a> their RFCBs in the document. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1687" id="l1687"> 1687</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1688" id="l1688"> 1688</a> <h5 id="rfcb-flow-fragment-height-resolution-phase-2"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1689" id="l1689"> 1689</a> RFCB flow fragment height resolution, Phase 2</h5> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1690" id="l1690"> 1690</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1691" id="l1691"> 1691</a> <a>named flows</a> are laid out in <span>regions</span>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1692" id="l1692"> 1692</a> The user agent resolves </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1693" id="l1693"> 1693</a> the <em><span>flow fragment height</span></em> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1694" id="l1694"> 1694</a> for the <span>RFCB</span>s </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1695" id="l1695"> 1695</a> using the remainder of the flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1696" id="l1696"> 1696</a> and accounting for <a href="https://www.w3.org/TR/css3-break/">fragmentation rules</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1697" id="l1697"> 1697</a> This process accounts for constraints </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1698" id="l1698"> 1698</a> such as the 'height' or 'max-height' values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1699" id="l1699"> 1699</a> as described in the CSS 2.1 section </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1700" id="l1700"> 1700</a> on <a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">calculating heights and margins</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1701" id="l1701"> 1701</a> (see the <a href="https://www.w3.org/TR/CSS2/visudet.html#normal-block">Block-level non-replaced elements in normal flow...</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1702" id="l1702"> 1702</a> section and the <a href="https://www.w3.org/TR/CSS2/visudet.html#block-root-margin">complicated cases</a> section). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1703" id="l1703"> 1703</a> During this phase, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1704" id="l1704"> 1704</a> generated content is laid out </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1705" id="l1705"> 1705</a> according to the <a href="#processing-model">rules</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1706" id="l1706"> 1706</a> described earlier in this document. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1707" id="l1707"> 1707</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1708" id="l1708"> 1708</a> In a <a>nested region context</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1709" id="l1709"> 1709</a> this phase will trigger </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1710" id="l1710"> 1710</a> the beginning of Step 1 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1711" id="l1711"> 1711</a> for any inner <a>named flows</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1712" id="l1712"> 1712</a> whose regions are contained </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1713" id="l1713"> 1713</a> in the outer <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1714" id="l1714"> 1714</a> All of Step 1 for inner flows </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1715" id="l1715"> 1715</a> must recursively complete before Step 1 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1716" id="l1716"> 1716</a> for an outer flow completes. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1717" id="l1717"> 1717</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1718" id="l1718"> 1718</a> <h4 id="regions-boxes-layout"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1719" id="l1719"> 1719</a> Step 2: region boxes layout</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1720" id="l1720"> 1720</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1721" id="l1721"> 1721</a> In this step, the document is laid out according to the normal CSS layout rules. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1722" id="l1722"> 1722</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1723" id="l1723"> 1723</a> If a measure of the content is required to resolve the used 'width' of the region box, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1724" id="l1724"> 1724</a> the value is resolved as described in the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1725" id="l1725"> 1725</a> <a href="#rfcb-width-resolution">RFCB width resolution</a> section. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1726" id="l1726"> 1726</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1727" id="l1727"> 1727</a> If a measure of the content is required to resolve the used height of the RFCB </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1728" id="l1728"> 1728</a> (for example if the region box is absolutely positioned), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1729" id="l1729"> 1729</a> the <span>flow fragment height</span> resolved in Step 1 is used </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1730" id="l1730"> 1730</a> for the vertical content measure of the RFCB. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1731" id="l1731"> 1731</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1732" id="l1732"> 1732</a> At the end of this step, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1733" id="l1733"> 1733</a> regions are laid out and ready to receive content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1734" id="l1734"> 1734</a> from their associated <a>named flows</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1735" id="l1735"> 1735</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1736" id="l1736"> 1736</a> <h4 id="named-flows-layout"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1737" id="l1737"> 1737</a> Step 3: named flows layout</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1738" id="l1738"> 1738</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1739" id="l1739"> 1739</a> In this final step, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1740" id="l1740"> 1740</a> the content of <a>named flows</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1741" id="l1741"> 1741</a> is laid out in the <span>regions</span>' RFCBs </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1742" id="l1742"> 1742</a> along with the generated content boxes. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1743" id="l1743"> 1743</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1744" id="l1744"> 1744</a> The used 'width' for RFCBs is resolved </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1745" id="l1745"> 1745</a> <a href="#rfcb-width-resolution">as described before</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1746" id="l1746"> 1746</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1747" id="l1747"> 1747</a> The used 'height' of RFCBs is resolved </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1748" id="l1748"> 1748</a> such that none of the boxes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1749" id="l1749"> 1749</a> in the region box's normal flow </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1750" id="l1750"> 1750</a> overflow the region's box. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1751" id="l1751"> 1751</a> In other words, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1752" id="l1752"> 1752</a> the RFCB boxes are stretched vertically </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1753" id="l1753"> 1753</a> to accommodate as much </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1754" id="l1754"> 1754</a> of the flow as possible </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1755" id="l1755"> 1755</a> without overflowing the region box </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1756" id="l1756"> 1756</a> and accounting for </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1757" id="l1757"> 1757</a> <a href="https://www.w3.org/TR/css3-break/">fragmentation rules</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1758" id="l1758"> 1758</a> and generated content boxes. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1759" id="l1759"> 1759</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1760" id="l1760"> 1760</a> During this phase, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1761" id="l1761"> 1761</a> generated content is laid out </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1762" id="l1762"> 1762</a> according to the <a href="#processing-model">rules</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1763" id="l1763"> 1763</a> described earlier in this document. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1764" id="l1764"> 1764</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1765" id="l1765"> 1765</a> In a <a>nested region context</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1766" id="l1766"> 1766</a> this step will trigger Step 2 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1767" id="l1767"> 1767</a> for inner <a>named flows</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1768" id="l1768"> 1768</a> whose regions are contained </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1769" id="l1769"> 1769</a> in the outer <a>named flow</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1770" id="l1770"> 1770</a> Fragmentation of the inner regions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1771" id="l1771"> 1771</a> may result as they are laid out </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1772" id="l1772"> 1772</a> in the outer <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1773" id="l1773"> 1773</a> Once Step 3 for an outer named flow is complete, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1774" id="l1774"> 1774</a> Step 3 for the inner <a>named flows</a> recursively begins. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1775" id="l1775"> 1775</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1776" id="l1776"> 1776</a> Once Step 3 for a named flow is complete, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1777" id="l1777"> 1777</a> The conditions for the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1778" id="l1778"> 1778</a> <a href="#named-flow-events">named flow events</a> are checked, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1779" id="l1779"> 1779</a> and if the triggers are met </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1780" id="l1780"> 1780</a> the events dispatch at this point. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1781" id="l1781"> 1781</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1782" id="l1782"> 1782</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1783" id="l1783"> 1783</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1784" id="l1784"> 1784</a> The model for resolving auto sized regions will cause, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1785" id="l1785"> 1785</a> under certain circumstances, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1786" id="l1786"> 1786</a> the flow content to be overset or underset. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1787" id="l1787"> 1787</a> In other words, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1788" id="l1788"> 1788</a> it will not fit tightly. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1789" id="l1789"> 1789</a> The model prevents having circular dependencies </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1790" id="l1790"> 1790</a> in the layout model. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1791" id="l1791"> 1791</a> Implementations may decide to apply </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1792" id="l1792"> 1792</a> further layout steps </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1793" id="l1793"> 1793</a> to ensure that the whole flow content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1794" id="l1794"> 1794</a> is displayed to the user, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1795" id="l1795"> 1795</a> even in edge cases. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1796" id="l1796"> 1796</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1797" id="l1797"> 1797</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1798" id="l1798"> 1798</a> <h3 id="regions-visual-formatting-implementation-note"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1799" id="l1799"> 1799</a> Regions visual formatting: implementation note</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1800" id="l1800"> 1800</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1801" id="l1801"> 1801</a> The process for resolving an RFCB's 'height' and the three-step process used to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1802" id="l1802"> 1802</a> lay out documents containing regions and <a>named flows</a> are </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1803" id="l1803"> 1803</a> <em>conceptual</em> descriptions of what the layout </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1804" id="l1804"> 1804</a> should yield and implementations should optimize to reduce the number of </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1805" id="l1805"> 1805</a> steps and phases necessary wherever possible. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1806" id="l1806"> 1806</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1807" id="l1807"> 1807</a> <h3 id="regions-visual-formatting-examples"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1808" id="l1808"> 1808</a> Regions visual formatting example</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1809" id="l1809"> 1809</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1810" id="l1810"> 1810</a> This section is non-normative. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1811" id="l1811"> 1811</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1812" id="l1812"> 1812</a> This example considers a document where content flows between three regions, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1813" id="l1813"> 1813</a> and region boxes are intermixed with the normal document content. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1814" id="l1814"> 1814</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1815" id="l1815"> 1815</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1816" id="l1816"> 1816</a> <pre> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1817" id="l1817"> 1817</a> &lt;style&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1818" id="l1818"> 1818</a> article { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1819" id="l1819"> 1819</a> flow-into: article; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1820" id="l1820"> 1820</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1821" id="l1821"> 1821</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1822" id="l1822"> 1822</a> #rA, #rB, #rC { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1823" id="l1823"> 1823</a> flow-from: article; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1824" id="l1824"> 1824</a> height: auto; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1825" id="l1825"> 1825</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1826" id="l1826"> 1826</a> margin: 1em 1em 0em 1em; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1827" id="l1827"> 1827</a> padding: 1em; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1828" id="l1828"> 1828</a> border: 3px solid #46A4E9; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1829" id="l1829"> 1829</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1830" id="l1830"> 1830</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1831" id="l1831"> 1831</a> #rA { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1832" id="l1832"> 1832</a> width: auto; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1833" id="l1833"> 1833</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1834" id="l1834"> 1834</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1835" id="l1835"> 1835</a> #rB { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1836" id="l1836"> 1836</a> float: left; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1837" id="l1837"> 1837</a> width: 15em; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1838" id="l1838"> 1838</a> max-height: 150px; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1839" id="l1839"> 1839</a> } </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1840" id="l1840"> 1840</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1841" id="l1841"> 1841</a> #rC { </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1842" id="l1842"> 1842</a> float: right; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1843" id="l1843"> 1843</a> width: 12em; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1844" id="l1844"> 1844</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1845" id="l1845"> 1845</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1846" id="l1846"> 1846</a> #main-flow { </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1847" id="l1847"> 1847</a> padding: 0em 1em 0em 1em; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1848" id="l1848"> 1848</a> } </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1849" id="l1849"> 1849</a> &lt;/style&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1850" id="l1850"> 1850</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1851" id="l1851"> 1851</a> &lt;body&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1852" id="l1852"> 1852</a> &lt;article&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1853" id="l1853"> 1853</a> &lt;p style="break-after:region;"&gt;I am not a ... &lt;/p&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1854" id="l1854"> 1854</a> &lt;p&gt;...&lt;/p&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1855" id="l1855"> 1855</a> &lt;/article&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1856" id="l1856"> 1856</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1857" id="l1857"> 1857</a> &lt;div id="rA"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1858" id="l1858"> 1858</a> &lt;div id="rB"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1859" id="l1859"> 1859</a> &lt;div id="rC"&gt;&lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1860" id="l1860"> 1860</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1861" id="l1861"> 1861</a> &lt;div id="main-flow"&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1862" id="l1862"> 1862</a> &lt;p&gt;Lorem ipsum dolor ...&lt;/p&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1863" id="l1863"> 1863</a> &lt;/div&gt; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1864" id="l1864"> 1864</a> &lt;/body&gt; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1865" id="l1865"> 1865</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1866" id="l1866"> 1866</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1867" id="l1867"> 1867</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1868" id="l1868"> 1868</a> The following sections and figures illustrate the intermediate results </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1869" id="l1869"> 1869</a> for the visual formatting process. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1870" id="l1870"> 1870</a> In the following, we call RFCB-A, RFCB-B and RFCB-C </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1871" id="l1871"> 1871</a> the <span>RFCBs</span> for regions rA, rB and rC respectively. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1872" id="l1872"> 1872</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1873" id="l1873"> 1873</a> <h4 id="step1-phase1-example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1874" id="l1874"> 1874</a> Step 1 - Phase 1: Laying out RFCBs with used height of zero</h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1875" id="l1875"> 1875</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1876" id="l1876"> 1876</a> Applying the rules for Step 1, Phase 1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1877" id="l1877"> 1877</a> the computed ''width/auto'' 'width' values for the RFCBs are resolved </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1878" id="l1878"> 1878</a> to used values according to the normal </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1879" id="l1879"> 1879</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">CSS layout rules</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1880" id="l1880"> 1880</a> meaning they stretch to the width </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1881" id="l1881"> 1881</a> of their containing block's content box. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1882" id="l1882"> 1882</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1883" id="l1883"> 1883</a> <ol> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1884" id="l1884"> 1884</a> <li>RFCB-A: stretches to fit the rA content box. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1885" id="l1885"> 1885</a> <p>Since rA also has an ''width/auto'' 'width', its own used 'width' is stretched to fit the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1886" id="l1886"> 1886</a> <code>&lt;body&gt;</code> content box.</p> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1887" id="l1887"> 1887</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1888" id="l1888"> 1888</a> <li>RFCB-B: stretches to fit the <code>rB</code> content box.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1889" id="l1889"> 1889</a> <li>RFCB-C: stretches to fit the <code>rC</code> content box.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1890" id="l1890"> 1890</a> </ol> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1891" id="l1891"> 1891</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1892" id="l1892"> 1892</a> Also applying the rules for Step 1, Phase 1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1893" id="l1893"> 1893</a> the used values for the RFCBs 'height' properties are all zero. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1894" id="l1894"> 1894</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1895" id="l1895"> 1895</a> Conceptually, this produces the layout illustrated below. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1896" id="l1896"> 1896</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1897" id="l1897"> 1897</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1898" id="l1898"> 1898</a> <img src="images/flow-fragment-height-phase-1.png" width=500 alt="Step 1 - Phase 1: Layout RFCBs with used heights of 0"/> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1899" id="l1899"> 1899</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1900" id="l1900"> 1900</a> Step 1 - Phase 1: Layout RFCBs with used heights of 0 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1901" id="l1901"> 1901</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1902" id="l1902"> 1902</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1903" id="l1903"> 1903</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1904" id="l1904"> 1904</a> <h4 id="step1-phase2-example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1905" id="l1905"> 1905</a> Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments heights</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1906" id="l1906"> 1906</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1907" id="l1907"> 1907</a> In this second phase of Step 1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1908" id="l1908"> 1908</a> the named flow is laid out in <span>regions</span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1909" id="l1909"> 1909</a> and the height of each fragment falling in each RFCB is computed. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1910" id="l1910"> 1910</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1911" id="l1911"> 1911</a> The user agent lays out as much </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1912" id="l1912"> 1912</a> of the flow into an area with RFCB-A's used 'width'. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1913" id="l1913"> 1913</a> rA's 'height' computes to ''width/auto'' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1914" id="l1914"> 1914</a> and there is no vertical maximum height for RFCA's 'height'. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1915" id="l1915"> 1915</a> However, because there is a break after the first paragraph </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1916" id="l1916"> 1916</a> in the "article" <code>named flow</code>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1917" id="l1917"> 1917</a> only this first paragraph is laid out </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1918" id="l1918"> 1918</a> in RFCB-A and FH-A (the flow fragment height for RFCB-A) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1919" id="l1919"> 1919</a> is resolved by laying out this first paragraph in the used 'width'. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1920" id="l1920"> 1920</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1921" id="l1921"> 1921</a> At this point, the user agent lays out as much </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1922" id="l1922"> 1922</a> of the remaining flow as possible in RFCB-B. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1923" id="l1923"> 1923</a> Because rB's 'max-height' computed value is "150px", </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1924" id="l1924"> 1924</a> the user agent only lays out the "article" named flow </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1925" id="l1925"> 1925</a> using RFCB-B's used 'width' until the point where </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1926" id="l1926"> 1926</a> laying out additional content would cause RFCB-B to overflow rB's box. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1927" id="l1927"> 1927</a> The fragment height for RFCB-B is resolved: FH-B (<code>150px</code>). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1928" id="l1928"> 1928</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1929" id="l1929"> 1929</a> Finally, the user agent lays out the remainder of the flow in RFCB-C. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1930" id="l1930"> 1930</a> Because rC has no other constraints and no region breaks, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1931" id="l1931"> 1931</a> the remaining content is laid out in RFCB-C's used 'width'. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1932" id="l1932"> 1932</a> This results in a resolved flow fragment height: FH-C. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1933" id="l1933"> 1933</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1934" id="l1934"> 1934</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1935" id="l1935"> 1935</a> <img src="images/flow-fragment-height-phase-2.png" width=370 alt="Step 1 - Phase 2: Measure flow fragments heights"/> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1936" id="l1936"> 1936</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1937" id="l1937"> 1937</a> Step 1 - Phase 2: Measure flow fragments heights </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1938" id="l1938"> 1938</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1939" id="l1939"> 1939</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1940" id="l1940"> 1940</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1941" id="l1941"> 1941</a> <h4 id="step2-example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1942" id="l1942"> 1942</a> Step 2: Layout document and regions without named flows</h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1943" id="l1943"> 1943</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1944" id="l1944"> 1944</a> The used 'width' of RFCB-A, RFCB-B and RFCB-C </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1945" id="l1945"> 1945</a> are resolved as in the previous step. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1946" id="l1946"> 1946</a> However, the 'height' is resolved differently. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1947" id="l1947"> 1947</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1948" id="l1948"> 1948</a> Resolving the 'height' of rA </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1949" id="l1949"> 1949</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#normal-block">requires a content measure</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1950" id="l1950"> 1950</a> which is FH-A (the flow fragment height for RFCB-A). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1951" id="l1951"> 1951</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1952" id="l1952"> 1952</a> The 'height' of rB results from first computing its </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1953" id="l1953"> 1953</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#block-root-margin">content measure</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1954" id="l1954"> 1954</a> and then applying the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1955" id="l1955"> 1955</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-heights">rules for max-height</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1956" id="l1956"> 1956</a> Here, the vertical content measure evaluates to FH-B. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1957" id="l1957"> 1957</a> After applying the rules for 'max-height' </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1958" id="l1958"> 1958</a> and accounting for margins, padding and borders, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1959" id="l1959"> 1959</a> the used 'height' of rB is resolved to LH-B </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1960" id="l1960"> 1960</a> (<code>150px</code>). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1961" id="l1961"> 1961</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1962" id="l1962"> 1962</a> The 'height' of rC's box results from </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1963" id="l1963"> 1963</a> <a href="https://www.w3.org/TR/CSS2/visudet.html#block-root-margin">calculating its content measure</a>: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1964" id="l1964"> 1964</a> FH-C becomes rC's used 'height'. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1965" id="l1965"> 1965</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1966" id="l1966"> 1966</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1967" id="l1967"> 1967</a> <img src="images/regions-visual-formatting-step-2.png" width=370 alt="Step 2: Layout document and regions without named flows"/> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1968" id="l1968"> 1968</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1969" id="l1969"> 1969</a> Step 2: Layout document and regions without <a>named flows</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1970" id="l1970"> 1970</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1971" id="l1971"> 1971</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1972" id="l1972"> 1972</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1973" id="l1973"> 1973</a> <h4 id="step3-example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1974" id="l1974"> 1974</a> Step 3: named flows layout</h4> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1975" id="l1975"> 1975</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1976" id="l1976"> 1976</a> In this final step, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1977" id="l1977"> 1977</a> the <code>article</code> <a>named flow</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1978" id="l1978"> 1978</a> is laid out in its <a>region chain</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1979" id="l1979"> 1979</a> The used 'width' for each of the RFCB </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1980" id="l1980"> 1980</a> is resolved as in step 1 above. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1981" id="l1981"> 1981</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1982" id="l1982"> 1982</a> The used 'height' for the RFCB is a result </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1983" id="l1983"> 1983</a> of laying out the as much of the content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1984" id="l1984"> 1984</a> in the <span>region</span> without overflowing its content box </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1985" id="l1985"> 1985</a> and following the <a href="https://www.w3.org/TR/css3-break/">fragmentation rules</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1986" id="l1986"> 1986</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1987" id="l1987"> 1987</a> Because the computed 'width' of the RFCB has not changed </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1988" id="l1988"> 1988</a> and the fragmentation rules applied are the same as in Phase 1, Step 2, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1989" id="l1989"> 1989</a> the used 'height' for RFCB-A, RFCB-B and RFCB-C </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1990" id="l1990"> 1990</a> are LH-A, LH-B and LH-C, respectively. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1991" id="l1991"> 1991</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1992" id="l1992"> 1992</a> There may be situations where the used 'height' </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1993" id="l1993"> 1993</a> of RFCBs resolved in Step 3 are different </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1994" id="l1994"> 1994</a> from the <span>flow fragment height</span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1995" id="l1995"> 1995</a> computed in Step 1 Phase 2. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1996" id="l1996"> 1996</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1997" id="l1997"> 1997</a> <figure> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l1998" id="l1998"> 1998</a> <img src="images/regions-visual-formatting-step-3.png" width=370 alt="Step 3: Final result after laying out named flows in regions"/> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1999" id="l1999"> 1999</a> <figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2000" id="l2000"> 2000</a> Step 3: Final result after laying out <a>named flows</a> in regions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2001" id="l2001"> 2001</a> </figcaption> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2002" id="l2002"> 2002</a> </figure> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2003" id="l2003"> 2003</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2004" id="l2004"> 2004</a> <h2 id="relation-to-document-events"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2005" id="l2005"> 2005</a> Relation to document events</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2006" id="l2006"> 2006</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2007" id="l2007"> 2007</a> The CSS Regions module does not alter </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2008" id="l2008"> 2008</a> the normal processing of events </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2009" id="l2009"> 2009</a> in the document tree. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2010" id="l2010"> 2010</a> In particular, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2011" id="l2011"> 2011</a> if an event occurs on an element </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2012" id="l2012"> 2012</a> that is part of a <a>named flow</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2013" id="l2013"> 2013</a> the <a href= "https://www.w3.org/TR/dom/#events">event's bubble and capture phases</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2014" id="l2014"> 2014</a> happen following the document tree order. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2015" id="l2015"> 2015</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2016" id="l2016"> 2016</a> <div class="note"><span class="note-prefix">Note </span> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2017" id="l2017"> 2017</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2018" id="l2018"> 2018</a> This means that in most cases </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2019" id="l2019"> 2019</a> <a>CSS Regions</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2020" id="l2020"> 2020</a> will not receive user events </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2021" id="l2021"> 2021</a> that trigger on their named flow content. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2022" id="l2022"> 2022</a> Event handlers for named flow content can check </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2023" id="l2023"> 2023</a> <code><a href="https://drafts.csswg.org/cssom-view/#extensions-to-the-document-interface">getElementsFromPoint()</a></code> [[CSSOM-VIEW]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2024" id="l2024"> 2024</a> to find the <a>CSS Region</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2025" id="l2025"> 2025</a> where the user event occurred. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2026" id="l2026"> 2026</a> Future versions of CSS-UI may provide </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2027" id="l2027"> 2027</a> a more general solution for user event bubbling </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2028" id="l2028"> 2028</a> where the stack of elements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2029" id="l2029"> 2029</a> at the event coordinates </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2030" id="l2030"> 2030</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2031" id="l2031"> 2031</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2032" id="l2032"> 2032</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2033" id="l2033"> 2033</a> <h2 id="relation-to-other-specifications"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2034" id="l2034"> 2034</a> Relation to other specifications</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2035" id="l2035"> 2035</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2036" id="l2036"> 2036</a> This specification is related to other specifications </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2037" id="l2037"> 2037</a> as described in the references section. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2038" id="l2038"> 2038</a> In addition, it is related to the following specifications: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2039" id="l2039"> 2039</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2040" id="l2040"> 2040</a> <ol> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2041" id="l2041"> 2041</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2042" id="l2042"> 2042</a> CSS Fragmentation Module Level 3 [[CSS3-BREAK]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2043" id="l2043"> 2043</a> This module defines the rules for fragmenting content over multiple containers </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2044" id="l2044"> 2044</a> and applies to <a>CSS Regions</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2045" id="l2045"> 2045</a> in addition to applying to multi-column and paged media. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2046" id="l2046"> 2046</a> </li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2047" id="l2047"> 2047</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2048" id="l2048"> 2048</a> <li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2049" id="l2049"> 2049</a> CSS Pagination Templates Module Level 3 [[CSS3-PAGE-TEMPLATE]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2050" id="l2050"> 2050</a> This module defines a syntax to define layout templates </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2051" id="l2051"> 2051</a> which can be used when paginating content. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2052" id="l2052"> 2052</a> The page templates use regions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2053" id="l2053"> 2053</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2054" id="l2054"> 2054</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2055" id="l2055"> 2055</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2056" id="l2056"> 2056</a> CSS Exclusions Module [[CSS3-EXCLUSIONS]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2057" id="l2057"> 2057</a> This module defines a generic way to define exclusions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2058" id="l2058"> 2058</a> around which content can flow. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2059" id="l2059"> 2059</a> This can be seen as an extension to CSS floats. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2060" id="l2060"> 2060</a> In advanced layout designs, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2061" id="l2061"> 2061</a> it is expected that the CSS Exclusions module </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2062" id="l2062"> 2062</a> will be commonly combined with the CSS Regions module. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2063" id="l2063"> 2063</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2064" id="l2064"> 2064</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2065" id="l2065"> 2065</a> <li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2066" id="l2066"> 2066</a> CSS Line Grid Module [[CSS3-LINE-GRID]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2067" id="l2067"> 2067</a> This module defines a concept of line grid </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2068" id="l2068"> 2068</a> to align the position of lines in different elements. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2069" id="l2069"> 2069</a> The line grid functionality is related and needed </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2070" id="l2070"> 2070</a> for aligning content flowing in separate regions. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2071" id="l2071"> 2071</a> </li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2072" id="l2072"> 2072</a> </ol> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2073" id="l2073"> 2073</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2074" id="l2074"> 2074</a> <h2 id="usecases"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2075" id="l2075"> 2075</a> Use Cases</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2076" id="l2076"> 2076</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2077" id="l2077"> 2077</a> Use cases are described on </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2078" id="l2078"> 2078</a> <a href="http://wiki.csswg.org/spec/css3-regions/regions-use-cases">these</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2079" id="l2079"> 2079</a> <a href="http://wiki.csswg.org/spec/css3-regions/regions-print-use-cases">pages</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2080" id="l2080"> 2080</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2081" id="l2081"> 2081</a> <h2 id="changes"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2082" id="l2082"> 2082</a> Changes</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2083" id="l2083"> 2083</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2084" id="l2084"> 2084</a> <h3 id="changes_from_Oct_9_2014"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2085" id="l2085"> 2085</a> Changes from <a href="https://www.w3.org/TR/2014/WD-css-regions-1-20141009/">October 9<sup>th</sup> 2014</a> version</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2086" id="l2086"> 2086</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2087" id="l2087"> 2087</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2088" id="l2088"> 2088</a> <li>Add animation type lines</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2089" id="l2089"> 2089</a> <li>Remove definition of break properties, since they're already defined in [[CSS-BREAK-3]].</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2090" id="l2090"> 2090</a> <li>Mention effects of containment on regions.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2091" id="l2091"> 2091</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2092" id="l2092"> 2092</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2093" id="l2093"> 2093</a> <h3 id="changes_from_Feb_18_2014"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2094" id="l2094"> 2094</a> Changes from <a href="https://www.w3.org/TR/2014/WD-css3-regions-20140218/">February 18<sup>th</sup> 2014</a> version</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2095" id="l2095"> 2095</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2096" id="l2096"> 2096</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2097" id="l2097"> 2097</a> <li>Added three simpler examples to the introduction</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2098" id="l2098"> 2098</a> <li>Moved complex example to the <a href="http://wiki.csswg.org/spec/css3-regions/complex-layout-example">CSSWG wiki</a></li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2099" id="l2099"> 2099</a> <li>Moved the effects of CSS containment to this specification from [[CSS-CONTAIN-1]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2100" id="l2100"> 2100</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2101" id="l2101"> 2101</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2102" id="l2102"> 2102</a> <h3 id="changes_from_May_28_2013"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2103" id="l2103"> 2103</a> Changes from <a href="https://www.w3.org/TR/2013/WD-css3-regions-20130528/">May 28<sup>th</sup> 2013</a> version</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2104" id="l2104"> 2104</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2105" id="l2105"> 2105</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2106" id="l2106"> 2106</a> <li>Removed region styling from this level</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2107" id="l2107"> 2107</a> <li>Changed ::region() to ::region</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2108" id="l2108"> 2108</a> <li>display:none elements do not become CSS Regions</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2109" id="l2109"> 2109</a> <li>Clarify accessibility interactions with flow-into</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2110" id="l2110"> 2110</a> <li>Change NamedFlowCollection to NamedFlowMap</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2111" id="l2111"> 2111</a> <li>Remove mention of run-in and clarify ::before and ::after block containers</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2112" id="l2112"> 2112</a> <li>Removed custom element syntax from examples</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2113" id="l2113"> 2113</a> <li>Changed NamedFlowCollection getters back to null when there is no NamedFlow.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2114" id="l2114"> 2114</a> <li>Removed issue on user events and added note describing solution(s)</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2115" id="l2115"> 2115</a> <li>Changed type of NamedFlow.getContent() from NodeList to sequence&lt;Node&gt;</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2116" id="l2116"> 2116</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2117" id="l2117"> 2117</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2118" id="l2118"> 2118</a> <h3 id="changes_from_Aug_28_2012"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2119" id="l2119"> 2119</a> Changes from <a href="https://www.w3.org/TR/2012/WD-css3-regions-20120823/">August 28<sup>th</sup> 2012</a> version</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2120" id="l2120"> 2120</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2121" id="l2121"> 2121</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2122" id="l2122"> 2122</a> <li>Changed @region rule to ::region() functional pseudo-element</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2123" id="l2123"> 2123</a> <li>Removed CSSRegionStyleRule (see above)</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2124" id="l2124"> 2124</a> <li>Tied named flow event triggers to visual processing model</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2125" id="l2125"> 2125</a> <li>Described how visual formatting of nested regions works</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2126" id="l2126"> 2126</a> <li>Added content and element keywords to flow-into</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2127" id="l2127"> 2127</a> <li>Added regionoversetchange event</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2128" id="l2128"> 2128</a> <li>renamed regionlayoutupdate to regionfragmentchange</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2129" id="l2129"> 2129</a> <li>Defined offsetParent interaction</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2130" id="l2130"> 2130</a> <li>Removed implication of DOM manipulation</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2131" id="l2131"> 2131</a> <li>Changed Appendix A to use custom element layout.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2132" id="l2132"> 2132</a> <li>Noted change in pseudo-element generation with flow-from.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2133" id="l2133"> 2133</a> <li>Changed case of regionlayoutupdate to match other events in [[DOM-LEVEL-3-EVENTS]].</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2134" id="l2134"> 2134</a> <li>Added section on fragmenting the fragmenters.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2135" id="l2135"> 2135</a> <li>Added section on handling circular flow-from and flow-into situations.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2136" id="l2136"> 2136</a> <li>Added alignment and justification to region styling properties.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2137" id="l2137"> 2137</a> <li>Added timing for regionLayoutUpdate event.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2138" id="l2138"> 2138</a> <li>Clarified interaction between content and flow-from for pseudo-elements.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2139" id="l2139"> 2139</a> <li>Changed NamedFlowCollection getters to return undefined when there is no NamedFlow.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2140" id="l2140"> 2140</a> <li>Changed region-overflow property to region-fragment.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2141" id="l2141"> 2141</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2142" id="l2142"> 2142</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2143" id="l2143"> 2143</a> <h3 id="changes_from_May_03_2012"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2144" id="l2144"> 2144</a> Changes from <a href="https://www.w3.org/TR/2012/WD-css3-regions-20120503/">May 3<sup>rd</sup> 2012</a> version</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2145" id="l2145"> 2145</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2146" id="l2146"> 2146</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2147" id="l2147"> 2147</a> <li>Removed exceptions from the Region interface.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2148" id="l2148"> 2148</a> <li>Changed NamedFlowCollection from live to a static snapshot.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2149" id="l2149"> 2149</a> <li>Changed NamedFlow to inherit from EventTarget.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2150" id="l2150"> 2150</a> <li>Removed flowFrom from Region interface and changed method name to getComputedRegionStyle().</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2151" id="l2151"> 2151</a> <li>Region interface is now a supplemental interface with the [NoInterfaceObject] extended attribute.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2152" id="l2152"> 2152</a> <li>Added note for regionLayoutUpdate dispatching in nested flows.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2153" id="l2153"> 2153</a> <li>Removed Document.getFlowByName() in favor of NamedFlowCollection.namedItem().</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2154" id="l2154"> 2154</a> <li>Changed to overset:false for NULL NamedFlow.</li> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2155" id="l2155"> 2155</a> <li>Changed regionLayoutUpdate to not bubble.</li> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2156" id="l2156"> 2156</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2157" id="l2157"> 2157</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2158" id="l2158"> 2158</a> <h3 id="older_changes">Older Changes</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2159" id="l2159"> 2159</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2160" id="l2160"> 2160</a> Older changelogs are <a href="http://wiki.csswg.org/spec/css3-regions/older-changelogs">archived</a> on the CSSWG wiki. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2161" id="l2161"> 2161</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2162" id="l2162"> 2162</a> <h2 class="no-num" id="acknowledgments"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2163" id="l2163"> 2163</a> Acknowledgments</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2164" id="l2164"> 2164</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2165" id="l2165"> 2165</a> The editors are grateful to the CSS working group </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2166" id="l2166"> 2166</a> for their feedback and help with the genesis of this specification. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2167" id="l2167"> 2167</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2168" id="l2168"> 2168</a> In addition, the editors would like to thank </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2169" id="l2169"> 2169</a> the following individuals for their contributions, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2170" id="l2170"> 2170</a> either during the conception of CSS Regions </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2171" id="l2171"> 2171</a> or during its development and specification review process: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2172" id="l2172"> 2172</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2173" id="l2173"> 2173</a> Erik Arvidsson, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2174" id="l2174"> 2174</a> Tab Atkins, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2175" id="l2175"> 2175</a> Catalin Badea, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2176" id="l2176"> 2176</a> Mihai Balan, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2177" id="l2177"> 2177</a> Andrei Bucur, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2178" id="l2178"> 2178</a> Razvan Caliman, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2179" id="l2179"> 2179</a> Alexandru Chiculita, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2180" id="l2180"> 2180</a> Phil Cupp, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2181" id="l2181"> 2181</a> Arron Eicholz, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2182" id="l2182"> 2182</a> John Jansen, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2183" id="l2183"> 2183</a> CJ Gammon, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2184" id="l2184"> 2184</a> Dimitri Glazkov, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2185" id="l2185"> 2185</a> Daniel Glazman, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2186" id="l2186"> 2186</a> Arno Gourdol, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2187" id="l2187"> 2187</a> Catalin Grigoroscuta, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2188" id="l2188"> 2188</a> David Hyatt, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2189" id="l2189"> 2189</a> Brian Heuston, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2190" id="l2190"> 2190</a> Ian Hickson, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2191" id="l2191"> 2191</a> Jonathan Hoersch, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2192" id="l2192"> 2192</a> Michael Jolson, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2193" id="l2193"> 2193</a> Brad Kemper, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2194" id="l2194"> 2194</a> Håkon Wium Lie, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2195" id="l2195"> 2195</a> Kang-Hao (Kenny) Lu, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2196" id="l2196"> 2196</a> Mihai Maerean, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2197" id="l2197"> 2197</a> Markus Mielke, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2198" id="l2198"> 2198</a> Robert O'Callahan, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2199" id="l2199"> 2199</a> Theresa O'Connor, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2200" id="l2200"> 2200</a> Mihnea Ovidenie, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2201" id="l2201"> 2201</a> Virgil Palanciuc, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2202" id="l2202"> 2202</a> Olga Popiv, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2203" id="l2203"> 2203</a> Christoph Päper, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2204" id="l2204"> 2204</a> Anton Prowse, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2205" id="l2205"> 2205</a> Florian Rivoal, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2206" id="l2206"> 2206</a> Peter Sorotokin, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2207" id="l2207"> 2207</a> Elliott Sprehn, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2208" id="l2208"> 2208</a> Radu Stavila, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2209" id="l2209"> 2209</a> Christian Stockwell, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2210" id="l2210"> 2210</a> Eugene Veselov, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2211" id="l2211"> 2211</a> Boris Zbarsky, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2212" id="l2212"> 2212</a> Stephen Zilles </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l2213" id="l2213"> 2213</a> and the CSS Working Group members. </pre> </div> </div> <script type="text/javascript">process_dates()</script> <div class="page-footer"> <p>Mercurial Repository: drafts</p> <ul class="rss-logo"> <li><a href="/drafts/rss-log">RSS</a></li> <li><a href="/drafts/atom-log">Atom</a></li> </ul> </div> <div id="powered-by"> <p><a href="http://mercurial.selenic.com/" title="Mercurial"><img src="/drafts/static/hglogo.png" width=75 height=90 border=0 alt="mercurial"></a></p> </div> <div id="corner-top-left"></div> <div id="corner-top-right"></div> <div id="corner-bottom-left"></div> <div id="corner-bottom-right"></div> </div> </body> </html>