[css-overflow-4] Draft spec for continue: collapse (#7708)

Author: andreubotella

css-overflow-4/Overview.bs

@@ -707,12 +707,15 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property</h3>
 	</pre>
 
 	This property allows inserting content into the last line box
-	before a (forced <em>or</em> unforced) <a>region break</a>
-	to indicate the continuity of truncated/interrupted content.
+	before a (forced <em>or</em> unforced) <a>region break</a> or a [=clamp point=]
+	to indicate the continuity of truncated / interrupted content.
 	It only affects line boxes contained directly by the <a>block container</a> itself,
 	but as it inherits, will have an effect on descendants’ line boxes unless overridden.
-	If the box contains no line box immediately preceding a <a>region break</a>,
-	then this property has no effect.
+
+	This property only affects a line box if there is eiher a [=region break=] or a [=clamp point=]
+	after it in the [=block formatting context=], and there are no boxes or line boxes in between.
+	If the [=clamp point=] is placed at the end of the [=line-clamp container=], then the line will
+	not be affected.
 
 	Note: See [[css-overflow-4#fragmentation]] for a way to generate boxes with such a [=region break=].
 
@@ -777,10 +780,12 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property</h3>
 	The [=block overflow ellipsis=] must not be included
 	in either the ''::first-letter'' nor the ''::first-line'' pseudo-elements.
 
-	If there is a subsequent <a>fragmentation container</a> in the [=fragmentation context=]
+	If the [=block overflow ellipsis=] is placed before a [=region break=] and
+	there is a subsequent <a>fragmentation container</a> in the [=fragmentation context=]
 	that would receive subsequent content,
 	then the content displaced by the <a>block overflow ellipsis</a>
-	must be pushed to that <a>fragmentation container</a>.
+	must be pushed to that <a>fragmentation container</a>. If it is placed before a [=clamp point=],
+	then the displaced content must be pushed to the remainder of the [=inline formatting context=].
 
 	The UA must treat the <a>block overflow ellipsis</a> as an unbreakable string,
 	If any part of the [=block overflow ellipsis=] overflows,
@@ -844,7 +849,7 @@ Limiting Visible Lines: the 'line-clamp' shorthand property</h3>
 		<dt><dfn><<integer [1,∞]>></dfn>
 		</dt><dfn><'block-ellipsis'></dfn>
 		<dd>
-			Sets 'continue' to ''discard''
+			Sets 'continue' to ''collapse''
 			if either or both values ares specified.
 
 			Sets 'max-lines' to the specified <<integer>>
@@ -901,7 +906,7 @@ Legacy compatibility</h4>
 
 	For compatibility with legacy content,
 	UAs that support 'line-clamp' must also support the '-webkit-line-clamp' property
-	and the additional ''-webkit-discard'' value for the 'continue' property.
+	and the additional ''-webkit-collapse'' value for the 'continue' property.
 
 	<pre class="propdef shorthand">
 		Name: -webkit-line-clamp
@@ -912,17 +917,17 @@ Legacy compatibility</h4>
 
 	<pre class="propdef partial">
 		Name: continue
-		New Values: -webkit-discard
+		New Values: -webkit-collapse
 	</pre>
 
 	Like 'line-clamp', '-webkit-line-clamp' is a shorthand of 'max-lines', 'continue', and 'block-ellipsis',
 	except that:
 
 	* its syntax is ''line-clamp/none'' | <<integer [1,∞]>>
-	* it sets 'continue' to ''-webkit-discard'' instead of ''discard''
+	* it sets 'continue' to ''-webkit-collapse'' instead of ''collapse''
 	* it unconditionally sets 'block-ellipsis' to ''block-ellipsis/auto''
 
-	The <dfn value for=continue>-webkit-discard</dfn> value behaves identically to ''discard'',
+	The <dfn value for=continue>-webkit-collapse</dfn> value behaves identically to ''collapse'',
 	except that it only takes effect
 	if the [=specified value=] of the 'display' property
 	is ''-webkit-box'' or ''-webkit-inline-box''
@@ -947,28 +952,33 @@ Forcing a Break After a Set Number of Lines: the 'max-lines' property</h3>
 		Name: max-lines
 		Value: ''none'' | <<integer [1,∞]>>
 		Initial: ''none''
-		Applies to: <a>block containers</a> which are also [=fragmentation containers=] that capture [=region breaks=]
+		Applies to: <a>block containers</a> which are also either [=fragmentation containers=] that capture [=region breaks=] or [=line-clamp containers=]
 		Inherited: no
 		Percentages: N/A
 		Computed value: the keyword ''max-lines/none'' or an integer
 		Animation type: by computed value type
 	</pre>
 
-	This property only has an effect on boxes that are [=fragmentation containers=] that capture [=region breaks=].
+	If the value of 'max-lines' is not <dfn for=max-lines dfn-type=value>none</dfn>, then, where
+	<var>N</var> is the computed value of 'max-lines':
+
+	- If the box is a [=fragmentation container=] that captures [=region breaks=],
+	    a <a>region break</a> or
+	    is forced after its <var>N</var>th
+	    descendant <a>in-flow</a> <a>line box</a>.
+	    If fewer than <var>N</var> line boxes exist,
+	    then 'max-lines' introduces no <a>region break</a>.
+	- If the box is a [=line-clamp container=], its [=clamp point=] is set after its <var>N</var>th
+	    descendant <a>in-flow</a> <a>line box</a>.
+	    If fewer than <var>N</var> line boxes exist, then the clamp point is set to the end of the
+	    line-clamp container.
 
-	Also, if the value of 'max-lines' is not <dfn for=max-lines dfn-type=value>none</dfn>,
-	a <a>region break</a>
-	is forced after its <var>N</var>th
-	descendant <a>in-flow</a> <a>line box</a>,
-	where <var>N</var> is the specified value of 'max-lines'.
-	Only lines boxes in the same <a>Block Formatting Context</a>
+
+	Only line boxes in the same <a>Block Formatting Context</a>
 	are counted:
 	the contents of descendants that establish <a>independent formatting contexts</a>
 	are skipped over while counting line boxes.
 
-	If fewer than <var>N</var> line boxes exist,
-	then 'max-lines' introduces no <a>region break</a>.
-
 	Note: This implies that 'max-lines' has no effect when applied to [=multi-column containers=],
 	since any line box they contain are nested into [=independent formatting contexts=].
 
@@ -1004,7 +1014,7 @@ Fragmentation of Overflow: the 'continue' property</h3>
 
 	<pre class=propdef>
 		Name: continue
-		Value: auto | discard
+		Value: auto | discard | collapse
 		Initial: ''continue/auto''
 		Applies to: [=block containers=] and [=multicol containers=]
 		Inherited: no
@@ -1014,10 +1024,11 @@ Fragmentation of Overflow: the 'continue' property</h3>
 	</pre>
 
 	The 'continue' property gives authors the ability
-	to turn a box into a [=fragmentation container=] (see [[!CSS-BREAK-3]])
-	and to specify that content after the [=fragmentation break=] must be discarded.
+	to truncate/interrupt the content inside a box, by either visually hiding
+	the remaining content, or by turning the box into a [=fragmentation container=] (see [[!CSS-BREAK-3]])
+	and discarding the content after the [=fragmentation break=].
 
-	Issue: This property is meant to generalize and replace the <code>region-fragment</code> property from [[CSS-REGIONS-1]].
+	Issue: ''continue: discard'' is meant to generalize and replace the <code>region-fragment</code> property from [[CSS-REGIONS-1]].
 	Once it is sufficiently stable in this specification,
 	<code>region-fragment</code> should be removed from the regions specification in favor of this.
 
@@ -1048,6 +1059,15 @@ Fragmentation of Overflow: the 'continue' property</h3>
 			Breaks applying to other [=fragmentation contexts=]
 			(such as pagination of this box itself)
 			do not cause any content to be discarded.
+
+		<dt><dfn>collapse</dfn>
+		<dd>
+			If the box is a [=block container=], then it must
+			[=establish an independent formatting context=] that also becomes a [=line-clamp container=].
+			This causes all content after the [=clamp point=] to be visually hidden, and to not be
+			taken into account for the box's [=automatic block size=].
+
+			This keyword has no effect on [=multicol containers=].
 	</dl>
 
 	<div class=example>
@@ -1115,6 +1135,9 @@ Fragmentation of Overflow: the 'continue' property</h3>
 	would cause intrinsic sizes to depend on layout, which would cause circularities.
 -->
 
+	Note: This differs from the ''visibility: hidden''-like behavior of content after the [=clamp
+	point=] with ''continue: collapse''.
+
 	Note: In the case of <a href="https://www.w3.org/TR/css-break-3/#parallel-flows">parallel fragmentation flows</a>,
 	content occurring after the <a>fragmentation break</a> in the box tree
 	could still be rendered,
@@ -1123,13 +1146,13 @@ Fragmentation of Overflow: the 'continue' property</h3>
 
 	Additionaliy,
 	for compatibility (see [[#webkit-line-clamp]]),
-	when the [=computed value=] of the 'continue' property is ''discard''
+	when the [=computed value=] of the 'continue' property is ''collapse'' or ''-webkit-collapse''
 	and the [=computed value=] of the '-webkit-box-orient' property is ''vertical'':
 	* If the [=specified value=] of the 'display' property is ''-webkit-box'',
-		the [=computed value=] is becomes ''flow-root'' and
+		the [=computed value=] becomes ''flow-root'' and
 		the box establishes a [=BFC=].
-	* If the [=specified value=] of the 'display property is ''-webkit-inline-box'',
-		the [=computed value=] is becomes ''inline-block'' and
+	* If the [=specified value=] of the 'display' property is ''-webkit-inline-box'',
+		the [=computed value=] becomes ''inline-block'' and
 		the box establishes a [=BFC=].
 
 	Note: This means that 'line-clamp' will work
@@ -1140,6 +1163,46 @@ Fragmentation of Overflow: the 'continue' property</h3>
 	as the box would be a [=flex container=] rather than a [=block container=],
 	and thus the 'continue' property would not apply.
 
+<h4 id=line-clamp-containers>Line-clamp containers</h4>
+
+	A <dfn>line-clamp container</dfn> is an [=independent formatting context|independent=] [=block formatting context=] that
+	additionally follows the rules in this section. All line-clamp containers contain a
+	<dfn>clamp point</dfn>, which is one of the following positions inside it:
+
+	- The start of the line-clamp container.
+	- A point between two [=in-flow=] sibling boxes in the line-clamp
+		container's [=block formatting context=].
+	- A point between two [=line boxes=] in an in-flow [=inline formatting
+		context=] inside the line-clamp container's [=block formatting context=].
+	- The end of the line-clamp container.
+
+	Note: The [=clamp point=] can never be before a parent box's first child, or
+	after a parent box's last child, unless that parent box is the line-clamp
+	container. Similarly, the clamp point can never be before the first line or
+	after the first line of an [=inline formatting context=]. It can also never
+	be in [=out-of-flow=] content, or inside an [=independent formatting
+	context=].
+
+	If the [=line-clamp container=]'s [=block formatting context root=] has a [=computed value=] of
+	'max-lines' other than ''max-lines/none'', then that property will determine the [=clamp point=].
+	Otherwise, the clamp point will be set to the last possible clamp point such that, for it and
+	all previous possible clamp points, the line-clamp container's [=automatic block size=] (as
+	determined below) is not greater than the [=block size=] the box would have if its automatic
+	block size were infinite.
+
+	Any boxes in a [=line-clamp container=] that follow its [=clamp point=] in the box tree, as well
+	as any [=line boxes=] that follow it inside an [=inline formatting context=], will be invisible
+	(behaving like ''visibility: hidden''). This includes [=independent formatting contexts=] as
+	well as [=out-of-flow=] boxes, and all of their descendants. Any overflow such boxes and line
+	boxes might have is always counted as [=ink overflow=] rather than [=scrollable overflow=].
+
+	NOTE: This differs from the ''display: none''-like behavior of not rendered content with
+	''continue: discard''.
+
+	If a [=block container=] contains a [=clamp point=], within itself or in any of its descendants,
+	its [=automatic block size=] will not take into account any of its children after the clamp point.
+	This also applies for the [=line-clamp container=] itself.
+
 <h2 id=sbg-ext class=nonum>
 Appendix A: Possible extensions for ''scrollbar-gutter''</h2>