[css-text-4] Example for 'discard-inner'

Author: fantasai

css-text-4/Overview.bs

@@ -2614,13 +2614,75 @@ White Space Trimming: the 'white-space-trim' property</h3>
 	can change where [=line breaking opportunities=] occur in the text.
 
 	<div class="example">
-		<p>The following style rules render DT elements as a comma-separated list:
+		<p>The following style rules render DT elements as a comma-separated list,
+		even if they are coded on separate lines of the source document:
 		<pre>
 			dt { display: inline; }
 			dt + dt:before { content: ", "; white-space-trim: discard-before; }
 		</pre>
 	</div>
 
+	<div class="example">
+		<p>The following style rule removes source-formatting white space
+		adjacent to the opening/closing tags of a preformatted block,
+		but not any indentation or interleaved white space
+		applied to the actual contents of the element:
+		<pre>
+			pre { white-space: pre; white-space-trim: discard-inner; }
+		</pre>
+		This results in the following two source-code snippets:
+		<div style="display: flex; flex-flow: wrap; justify-content: space-around">
+		<xmp highlight="html">
+			<pre>
+
+			  some
+			preformatted
+
+			  text
+
+			</pre>
+		</xmp>
+		<xmp highlight="html">
+			<pre>  some
+			preformatted
+
+			  text</pre>
+		</xmp>
+		</div>
+		rendering identically as:
+		<pre class="output" style="margin-inline: auto">
+		  some
+		preformatted
+
+		  text</pre>
+
+		If instead we apply it to an inline element:
+		<pre>
+			span { white-space: normal; white-space-trim: discard-inner; }
+		</pre>
+		<div style="display: flex; flex-flow: wrap; justify-content: space-around">
+		<xmp highlight="html">
+			start[<span>
+
+			  some
+			inline
+			  text
+
+			</span>]end
+		</xmp>
+		<xmp highlight="html">
+			start[<span>  some
+			inline
+			  text</span>]end
+		</xmp>
+		</div>
+		this directs the UA to discard <em>all</em> of the leading/trailing white space
+		before the actual contents of the element:
+		<pre class="output" style="margin-inline: auto">
+			start[some inline text]end
+		</pre>
+	</div>
+
 	White space processing for 'white-space-trim'
 	takes place before [[#white-space-phase-1]].