[css-text-3] Define the hanging behavior of end-of-line pre-wrap spaces (#4095)

Closes #3440

Author: frivoal

css-text-3/Overview.bs

@@ -1635,7 +1635,9 @@ Text Processing</h3>
             </wpt>
 
           <li>If 'white-space' is set to ''pre-wrap'',
-             the UA must [=conditionally hang=] this sequence.
+             the UA must (unconditionally) [=hang=] this sequence,
+             unless the sequence is followed by a [=forced line break=],
+             in which case it must [=conditionally hang=] the sequence is instead.
              It may also visually collapse the character advance widths
              of any that would otherwise overflow.
 
@@ -1712,29 +1714,91 @@ Text Processing</h3>
     </ol>
 
     <div class=example>
-      This example illustrates the consequence of [=hanging=] white space
-      at the end of the line
-      on text alignment.
+      This example shows that [=conditionally hanging=] white space
+      at the end of lines with forced breaks
+      provides symmetry with the start of the line.
+      An underline is added to help visualize the spaces.
       <pre><code class=lang-css>
       p {
         white-space: pre-wrap;
-        text-align: end;
-        width: 20ch;
+        width: 5ch;
         border: solid 1px;
+        font-family: monospace;
+        text-align: center;
       }</code></pre>
       <pre><code class=lang-markup>
-      &lt;p>Lorem ipsum      &lt;/p>
+      &lt;p> 0 &lt;/p>
       </code></pre>
 
-      As the [=preserved=] [=spaces=] at the end of the line must [=hang=],
+      The sample above would be rendered as follows:
+      <div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 5ch; border: solid 1px; white-space: pre;"> <span style="text-decoration: underline; text-decoration: underline orange"> 0 </span> </div>
+
+      Since the final [=space=] is before a forced line break
+      and does not overflow,
+      it does not hang,
+      and centering works as expected.
+    </div>
+
+    <div class=example>
+      This example illustrates the difference
+      between [=hanging=] [=spaces=]
+      at the end of lines without forced breaks,
+      and [=conditionally hanging=] them at the end of lines with forced breaks.
+      An underline is added to help visualize the [=spaces=].
+      <pre><code class=lang-css>
+      p {
+        white-space: pre-wrap;
+        width: 3ch;
+        border: solid 1px;
+        font-family: monospace;
+      }</code></pre>
+      <pre><code class=lang-markup>
+      &lt;p> 0 0 0 0 &lt;/p>
+      </code></pre>
+
+      The sample above would be rendered as follows:
+      <div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre; text-decoration: underline; text-decoration: underline orange"> 0 <br>0 0 <br>0 </div>
+
+      If <code class=lang-css>p { text-align: right; }</code> was added,
+      the result would be as follows:
+      <div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre;"> <span style="text-decoration: underline; text-decoration: underline orange"> 0 </span><br><span style="text-decoration: underline; text-decoration: underline orange">0 0 </span><br> <span style="text-decoration: underline; text-decoration: underline orange">0 </span></div>
+
+      As the [=preserved=] [=spaces=] at the end of lines without a forced break must [=hang=],
       they are not considered when placing the rest of the line during text alignment.
       When aligning towards the end,
       this means any such [=spaces=] will overflow,
       and will not prevent the rest of the line's content from being flush with the edge of the line.
-      The sample above would therefore be rendered as follows:
-      <pre class=output style="width: 20ch; border: solid 1px; text-align: end;">
-      Lorem ipsum
-      </pre>
+      On the other hand,
+      preserved spaces at the end of a line <em>with</em> a forced break
+      [=conditionally hang=].
+      Since the space at the end of the last line would not overflow in this example,
+      it does not [=hang=]
+      and therefore is considered during text alignment.
+    </div>
+
+    <div class=example>
+      In the following example,
+      there is not enough room on any line to fit the end-of-line spaces,
+      so they [=hang=] on all lines:
+      the one on the line without a forced break because it must,
+      as well as the one on the line with a forced break,
+      because it [=conditionally hangs=] and overflows.
+      An underline is added to help visualize the spaces.
+      <pre><code class=lang-css>
+      p {
+        white-space: pre-wrap;
+        width: 3ch;
+        border: solid 1px;
+        font-family: monospace;
+      }</code></pre>
+      <pre><code class=lang-markup>
+      &lt;p>0 0 0 0 &lt;/p>
+      </code></pre>
+      <div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre; text-decoration: underline; text-decoration: underline orange">0 0 <br>0 0 </div>
+
+      The last line is not wrapped before the last <code>0</code>
+      because characters that [=conditionally hang=] are not considered
+      when measuring the line’s contents for fit.
     </div>
 
   <h3 id="tab-size-property" caniuse="css3-tabsize" oldids="tab-size">