[css-contain] Clarify interaction of layout containment and fragmentation

Closes w3c#2840

Author: frivoal

css-contain-1/Overview.bs

@@ -236,26 +236,68 @@ Layout Containment</h3>
 
 	1. The element [=establishes an independent formatting context=].
 
-	2. If a <a>fragmentation context</a> participates in <a>layout containment</a>,
-		the first element with <a>layout containment</a>
-		affecting the <a>fragmentation context</a>
-		must “trap” the remainder of the <a>fragmented flow</a>.
-		<a>Fragmentation</a> must not continue past the <a>layout containment</a> boundary,
-		and the last <a>fragmentation container</a>
-		within the first <a>layout containment</a> boundary
-		is treated as if it is the last <a>fragmentation container</a>
-		in its <a>fragmentation context</a>.
-
-		If subsequent <a>fragmentation containers</a> in the <a>fragmentation context</a>
-		are only generated when more content remains in the <a>fragmented flow</a>,
+	2. If at least one [=fragmentation container=] of a [=fragmentation context=] has [=layout containment=],
+		or if at least one [=fragmentation container=] of a [=fragmentation context=] is a descendant of an element with layout containment
+		<strong>and</strong> at least one subsequent [=fragmentation container=] of the same [=fragmentation context=]
+		is not a descendant of that same element with layout containment,
+		then the first element with [=layout containment=]
+		which is either a [=fragmentation container=] itself
+		or is an ancestor of a [=fragmentation container=]
+		must “trap” the remainder of the [=fragmented flow=]:
+		[=fragmentation=] must not continue past the [=layout containment=] boundary,
+		and the last [=fragmentation container=]
+		within the first [=layout containment=] boundary
+		is treated as if it is the last [=fragmentation container=]
+		in its [=fragmentation context=].
+
+		If subsequent [=fragmentation containers=] in the [=fragmentation context=]
+		are only generated when more content remains in the [=fragmented flow=],
 		then they are not generated.
 		If they would exist regardless,
-		they remain part of the <a>fragmentation context</a>,
-		but do not receive any content from the <a>fragmented flow</a>.
-
-		Note: [[CSS-REGIONS-1]] has details over how <a>layout containment</a> affects
+		they remain part of the [=fragmentation context=],
+		but do not receive any content from the [=fragmented flow=].
+
+		Note: At the time of writing, no stable specification is affected by this point.
+		Only specifications that would enable some (but not all) fragmentation containers of a fragmentation context
+		to be layout-contained (or descendants of a layout contained element)
+		are concerned.
+		This is not the case of [[CSS-PAGE-3]] nor of [[CSS-MULTICOL-1]].
+		This requirement is nonetheless included because
+		several mechanisms that would make this a possibility have been considered
+		(e.g.: [[CSS-REGIONS-1]], ''::nth-fragment()'', a hypothetical selector for individual columns of a multicol…),
+		and the guarantees that layout containment is intended to offer would not be realized
+		if such mechanisms did not abide by this rule.
+		[[CSS-REGIONS-1]] has details over how <a>layout containment</a> affects
 		regions.
 
+		<div class=example>
+			<pre><code highlight=markup>
+				&lt;article>Lorem ipsum…&lt;/article>
+				&lt;div id=a>&lt;/div>
+				&lt;aside>
+				  &lt;div id=b>&lt;/div>
+				  &lt;div id=c>&lt;/div>
+				&lt;/aside>
+				&lt;aside>
+				  &lt;div id=d>&lt;/div>
+				  &lt;div id=e>&lt;/div>
+				&lt;/aside>
+				&lt;div id=f>&lt;/div>
+			</code></pre>
+			<pre><code highlight=css>
+				article {flow-into: foo;}
+				#a, #b, #c, #d, #e, #f {flow-from: foo;}
+				aside {contain: layout}
+			</code></pre>
+
+			In this [[CSS-REGIONS-1]] example,
+			content can flow from <code>#a</code> to <code>#b</code>,
+			from <code>#b</code> to <code>#c</code>.
+			However as <code>#c</code> is the last fragment container in the first layout-contained element,
+			it traps all the remaining content,
+			and nothing gets flowed into <code>#d</code>, <code>#e</code>, or <code>#f</code>.
+		</div>
+
 	3. If the contents of the element overflow the element,
 		they must be treated as <a>ink overflow</a>.
 

css-contain-1/issues-2018-cr.html

@@ -66,6 +66,14 @@ <h1>CSS Contain Level 1 Disposition of Comments for 2018-05-24 CR</h1>
 Response: <a href='https://github.com/w3c/csswg-drafts/issues/2845#issuecomment-401319909'>https://github.com/w3c/csswg-drafts/issues/2845#issuecomment-401319909</a>
 Closed:   Accepted
 Resolved: Editorial</pre>
+<pre class='a' id='issue-5'>
+Issue 5. <a href='#issue-5'>#</a>
+Summary:  Need clarification on layout containment &amp; fragmentation
+From:     Daniel Holbert
+Comment:  <a href='https://github.com/w3c/csswg-drafts/issues/2840'>https://github.com/w3c/csswg-drafts/issues/2840</a>
+Response: <a href='https://github.com/w3c/csswg-drafts/issues/2840#issuecomment-401249631'>https://github.com/w3c/csswg-drafts/issues/2840#issuecomment-401249631</a>
+Closed:   Accepted
+Resolved: Editorial</pre>
 <script>
 (function () {
     var sheet = document.styleSheets[0];

css-contain-1/issues-2018-cr.txt

@@ -36,3 +36,11 @@ Comment:  https://github.com/w3c/csswg-drafts/issues/2845
 Response: https://github.com/w3c/csswg-drafts/issues/2845#issuecomment-401319909
 Closed:   Accepted
 Resolved: Editorial
+----
+Issue 5.
+Summary:  Need clarification on layout containment & fragmentation
+From:     Daniel Holbert
+Comment:  https://github.com/w3c/csswg-drafts/issues/2840
+Response: https://github.com/w3c/csswg-drafts/issues/2840#issuecomment-401249631
+Closed:   Accepted
+Resolved: Editorial