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

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

* Clarification about float clearance in the automatic block size

* Update to only allow clamping after a line

* Apply suggestions from code review

Co-authored-by: Florian Rivoal <[email protected]>

* Update css-overflow-4/Overview.bs

Co-authored-by: Florian Rivoal <[email protected]>

* Update css-overflow-4/Overview.bs

* Update css-overflow-4/Overview.bs

* Update css-overflow-4/Overview.bs

* Update css-overflow-4/Overview.bs

* Update css-overflow-4/Overview.bs

* Update for #10439

* Update for #11962

* Update for #10868

---------

Co-authored-by: Florian Rivoal <[email protected]>
Co-authored-by: Tab Atkins Jr. <[email protected]>

Author: 3 people

css-overflow-4/Overview.bs

@@ -707,12 +707,14 @@ 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 it immediately precedes eiher a [=region break=]
+	or a [=clamp point=] in the [=block formatting context=].
 
 	Note: See [[css-overflow-4#fragmentation]] for a way to generate boxes with such a [=region break=].
 
@@ -777,10 +779,13 @@ 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>.
+	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,
@@ -810,7 +815,7 @@ Limiting Visible Lines: the 'line-clamp' shorthand property</h3>
 
 	<pre class="propdef shorthand">
 		Name: line-clamp
-		Value: none | <<integer [1,∞]>> || <<'block-ellipsis'>>
+		Value: none | [<<integer [1,∞]>> || <<'block-ellipsis'>>] ''-webkit-legacy''?
 		Initial: none
 		Percentages: N/A
 	</pre>
@@ -844,14 +849,21 @@ Limiting Visible Lines: the 'line-clamp' shorthand property</h3>
 		<dt><dfn><<integer [1,∞]>></dfn>
 		<dt><dfn><'block-ellipsis'></dfn>
 		<dd>
-			Sets 'continue' to ''discard''
-			if either or both values ares specified.
+
+			Issue(7708): Whether this should imply ''discard'' or ''collapse'' is an unresolved question.
+
+			Sets 'continue' to ''collapse''
+			if either or both values are specified,
+			unless the ''line-clamp/-webkit-legacy'' keyword is also specified.
 
 			Sets 'max-lines' to the specified <<integer>>
 			or to ''max-lines/none'' if omitted,
 			and 'block-ellipsis' to other component of the value if specified
 			or to ''block-ellipsis/auto'' if omitted.
 
+		<dt><dfn>-webkit-legacy</dfn>
+		<dd>Sets 'continue' to ''continue/-webkit-legacy''.
+
 	</dl>
 
 	See the corresponding longhand properties for details
@@ -901,7 +913,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 ''continue/-webkit-legacy'' value for the 'continue' property.
 
 	<pre class="propdef shorthand">
 		Name: -webkit-line-clamp
@@ -912,17 +924,18 @@ Legacy compatibility</h4>
 
 	<pre class="propdef partial">
 		Name: continue
-		New Values: -webkit-discard
+		New Values: -webkit-legacy
 	</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 ''continue/-webkit-legacy'' instead of ''collapse''
+	    (as if the ''line-clamp/-webkit-legacy'' keyword was set on 'line-clamp')
 	* 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-legacy</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 +960,37 @@ 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=].
-
-	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>
+	If the value of 'max-lines' is not <dfn for=max-lines dfn-type=value>none</dfn>,
+	then, given a [=computed value=] of <var>N</var>:
+
+	- If the box is a [=fragmentation container=] that captures [=region breaks=],
+		a <a>region break</a>
+		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
+		to the first possible clamp point after
+		its <var>N</var>th
+		descendant <a>in-flow</a> <a>line box</a>.
+		If fewer than <var>N</var> line boxes exist,
+		or if there are no clamp points after it,
+		then that line-clamp container has no clamp point.
+
+
+	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 +1026,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 +1036,12 @@ 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,
+	either by 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 +1072,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>
@@ -1114,6 +1147,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,
@@ -1122,7 +1158,7 @@ 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'', ''continue/-webkit-legacy'', or ''discard''
 	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=] becomes ''flow-root'' and
@@ -1139,6 +1175,63 @@ 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 export>line-clamp container</dfn> is an [=independent formatting context|independent=] [=block formatting context=]
+	that additionally follows the rules in this section.
+	Line-clamp containers can have a <dfn>clamp point</dfn>,
+	which is one of the following block-axis positions inside it:
+
+	- The start of the [=line-clamp container=].
+	- A point between two consecutive [=line boxes=]
+		in an [=inline formatting context=]
+		contained by the line-clamp container's [=block formatting context=].
+	- A point between two [=in-flow=] [=block-level=] sibling boxes
+		in the line-clamp container's [=block 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.
+	If the [=block size=] would be infinite,
+	then there is no clamp point.
+
+	Within a [=line-clamp container=],
+	the following boxes and line boxes become [=invisible boxes=]:
+
+	- Any [=in-flow=] or floating boxes
+		that follow the [=clamp point=] in the box tree.
+		This includes [=independent formatting contexts=]
+		and all of their descendants.
+	- Any [=line boxes=] that follow the [=clamp point=]
+		inside an [=inline formatting context=].
+	- Any [=absolutely positioned box=]
+		which has an invisible box within its [=containing block chain=],
+		and all of its descendants.
+
+	Any overflow such invisible 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 invisible boxes.
+	This also applies for the [=line-clamp container=] itself.
+
+	NOTE: If there are any floats before the [=clamp point=],
+	the [=line-clamp container=]'s automatic size must grow to encompass the clearance,
+	just like it would if it were a regular [=block formatting context=] root
+	that only contained its contents before the [=clamp point=].
+	This is regardless of whether this would cause any content after the [=clamp point=]
+	to be within the container's bounds.
+
 <h2 id=sbg-ext class=nonum>
 Appendix A: Possible extensions for ''scrollbar-gutter''</h2>