[css-ui][css-overflow] Move text-overflow from css-ui to css-overflow

This means copying it from CSS-UI-3 (a REC) to css-overflow-3, and
moving it from css-ui-4 to css-overflow-4.

This is done to keep the definitions of text-overflow and block-overflow
together.

Closes #2745

Author: frivoal

css-overflow-3/Overview.bs

@@ -34,11 +34,20 @@ Status Text: <strong>This update trims away most of the experimental new ideas
 spec:css-transforms-2; type:property; text:transform-style
 type: dfn; spec:css-multicol-1; text:overflow column
 type: dfn; spec:css-transforms-2; text:3d rendering context
+spec:css-writing-modes-4; type:dfn; text:end
 </pre>
 <!-- FIXME: the break-* link doesn't actually work! -->
 <pre class="anchors">
 url: https://www.w3.org/TR/2008/CR-css3-marquee-20081205/#the-overflow-style; type: property; text: overflow-style;
 </pre>
+<style>
+.awesome-table td { padding: 5px; }
+.awesome-table {
+	color: #000;
+	background: #fff;
+	margin: auto;
+}
+</style>
 
 <h2 id="intro">
 Introduction</h2>
@@ -65,6 +74,11 @@ Introduction</h2>
 
 	[Something something 'max-lines'.]
 
+	Note: This specification also reproduces the definition of the 'text-overflow' property
+	previously defined in [[CSS-UI-3]],
+	with no addition or modification,
+	in order to present 'text-overflow' and 'block-overflow' toghether.
+
 <!--
 ████████ ██    ██ ████████  ████████  ██████
    ██     ██  ██  ██     ██ ██       ██    ██
@@ -488,6 +502,288 @@ as the Flow-Relative box model properties defined in [[css-logical-1#box]].
   'overflow-x' and 'overflow-y' properties.
   The mapping depends on the element's 'writing-mode'.
 
+<h2 id="text-overflow" caniuse="text-overflow">
+    Overflow Ellipsis: the 'text-overflow' property</h2>
+
+<pre class="propdef">
+Name: text-overflow
+Value: clip | ellipsis
+Initial: clip
+Applies to: block containers
+Inherited: no
+Percentages: N/A
+Media: visual
+Computed value: as specified
+</pre>
+
+This property specifies rendering when inline content overflows
+its <a>end</a> line box edge
+in the inline progression direction of its block container element ("the block")
+that has 'overflow'
+other than ''visible''.
+
+Text can overflow for example when it is prevented from wrapping
+(e.g. due to <code class="lang-css">white-space: nowrap</code>
+or a single word is too long to fit).
+Values have the following meanings:
+
+<dl data-dfn-for="text-overflow" class="valuedef">
+  <dt><dfn id=overflow-clip dfn-type=value>clip</dfn></dt>
+    <dd>Clip inline content that overflows its block container element. Characters may be only partially rendered.</dd>
+
+  <dt><dfn id=overflow-ellipsis dfn-type=value>ellipsis</dfn></dt>
+    <dd>
+Render an ellipsis character (U+2026)
+to represent clipped inline content.
+Implementations may substitute a more language, script, or writing-mode appropriate
+ellipsis character,
+or three dots "..." if the ellipsis character is unavailable.
+</dd>
+</dl>
+
+The term "character" is used in this property definition
+for better readability and means "grapheme cluster" [[!UAX29]]
+for implementation purposes.
+
+For the ellipsis value
+implementations must hide characters and
+<a href="https://www.w3.org/TR/CSS2/visuren.html#inline-boxes">
+atomic inline-level elements</a>
+at the <a>end</a> edge of the line as necessary to fit the ellipsis, and
+place the ellipsis immediately adjacent
+to the <a>end</a> edge of the remaining inline content.
+The first character or
+<a href="https://www.w3.org/TR/CSS2/visuren.html#inline-boxes">
+atomic inline-level element</a>
+on a line
+must be clipped rather than ellipsed.
+
+<div class=example>
+<h3 id="bidi-ellipsis" class="no-num no-toc">Bidi ellipsis examples</h3>
+These examples demonstrate which characters get hidden
+to make room for the ellipsis in a bidi situation:
+those visually at the end edge of the line.
+
+Sample CSS:
+<pre><code highlight=css>
+div {
+  font-family: monospace;
+  white-space: pre;
+  overflow: hidden;
+  width: 9ch;
+  text-overflow: ellipsis;
+}
+</code></pre>
+
+Sample HTML fragments, renderings, and your browser:
+<table class="awesome-table data">
+<thead><th>HTML<th>Reference rendering<th>Your Browser</thead>
+<tr>
+<td><code highlight=html>&ltdiv>שלום 123456&lt;/div></code><td><div style="font-family:monospace">123456 ם…</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis">שלום 123456</div>
+<tr><td><code highlight=html>&ltdiv dir=rtl>שלום 123456&lt;/div></code><td><div style="font-family:monospace">…456 שלום</div><td><div style="font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis" dir=rtl>שלום 123456</div>
+
+</table>
+
+
+</div>
+
+<h3 id="ellipsing-details" class="no-num no-toc">ellipsing details</h3>
+<ul>
+<li>
+Ellipsing only affects rendering and must not affect layout
+nor dispatching of pointer events:
+The UA should dispatch any pointer event on the ellipsis to the elided element,
+as if 'text-overflow' had been ''text-overflow/none''.
+<li>
+The ellipsis is styled and baseline-aligned according to
+the block.
+<li>
+Ellipsing occurs after relative positioning and other graphical transformations.
+<li>
+If there is insufficient space for the ellipsis,
+then clip the rendering of the ellipsis itself
+(on the same side that neutral characters on the line
+would have otherwise been clipped with the ''text-overflow:clip'' value).
+</ul>
+
+<h3 id="ellipsis-interaction" class="no-num no-toc">user interaction with ellipsis</h3>
+<ul>
+<li>When the user is interacting with content
+(e.g. editing, selecting, scrolling),
+the user agent may treat ''text-overflow: ellipsis'' as ''text-overflow: clip''.
+
+<li>Selecting the ellipsis should select the ellipsed text.
+If all of the ellipsed text is selected,
+UAs should show selection of the ellipsis.
+Behavior of partially-selected ellipsed text is up to the UA.
+
+</ul>
+
+<div class="example"><p style="display:none">Example(s):
+<h3 id="text-overflow-examples" class="no-num no-toc">text-overflow examples</h3>
+
+These examples demonstrate setting the text-overflow of a block container element
+that has text which overflows its dimensions:
+
+sample CSS for a div:
+<pre><code class="lang-css">div {
+  font-family:Helvetica,sans-serif; line-height:1.1;
+  width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0;
+}</code></pre>
+
+sample HTML fragments, renderings, and your browser:
+<table class="awesome-table"><tbody>
+<tr><th>HTML</th><th>sample rendering</th><th>your browser</th></tr>
+<tr>
+<td><pre><code class="lang-markup">&lt;div&gt;
+CSS IS AWESOME, YES
+&lt;/div&gt;
+</code></pre></td>
+
+
+<td>
+<object type="image/png" data="images/cssisawesome.png">
+First, a box with text drawing outside of it.
+</object>
+</td>
+
+<td>
+<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1;">CSS IS AWESOME, YES</div>
+</td>
+</tr>
+
+<tr>
+<td><pre><code class="lang-markup">&lt;div style="<strong>text-overflow:clip;</strong> overflow:hidden"&gt;
+CSS IS AWESOME, YES
+&lt;/div&gt;
+</code></pre></td>
+
+<td>
+<object type="image/png" data="images/cssisaweso.png">
+Second, a similar box with the text clipped outside the box.
+</object></td>
+
+<td>
+<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:clip;">CSS IS AWESOME, YES</div>
+</td>
+</tr>
+
+<tr>
+<td><pre><code class="lang-markup">&lt;div style="<strong>text-overflow:ellipsis;</strong> overflow:hidden"&gt;
+CSS IS AWESOME, YES
+&lt;/div&gt;
+</code></pre></td>
+
+<td>
+<object type="image/png" data="images/cssisaw.png">
+Third, a similar box with an ellipsis representing the clipped text.
+</object>
+</td>
+
+<td>
+<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em;  font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;">CSS IS AWESOME, YES</div>
+</td>
+</tr>
+
+
+<tr>
+<td><pre><code class="lang-markup">&lt;div style="<strong>text-overflow:ellipsis;</strong> overflow:hidden"&gt;
+NESTED
+ &lt;p&gt;PARAGRAPH&lt;/p&gt;
+WON'T ELLIPSE.
+&lt;/div&gt;
+</code></pre></td>
+
+<td>
+<object type="image/png" data="images/nes.png">
+Fourth, a box with a nested paragraph demonstrating anonymous block boxes equivalency and non-inheritance into a nested element.
+</object>
+</td>
+
+<td>
+<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em;  font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;">NESTED
+ <p>PARAGRAPH</p>
+WON'T ELLIPSE.</div>
+</td>
+
+</tr>
+</tbody></table>
+
+</div>
+
+Note: the side of the line that the ellipsis is placed depends on the 'direction' of the block.
+E.g. an overflow hidden right-to-left
+(<code class="lang-css">direction: rtl</code>)
+block clips inline content on the <a spec=css-writing-modes-3>left</a> side,
+thus would place a text-overflow ellipsis on the <a spec=css-writing-modes-3>left</a>
+to represent that clipped content.
+
+<!-- insert RTL example diagram here to illustrate note. -->
+
+<h3 id="ellipsis-scrolling" class="no-num no-toc">ellipsis interaction with scrolling interfaces</h3>
+
+This section applies to elements with text-overflow other than ''text-overflow:clip''
+(non-clip text-overflow)
+and overflow:scroll.
+
+When an element with non-clip text-overflow has overflow of scroll
+in the inline progression dimension of the text,
+and the browser provides a mechanism for scrolling
+(e.g. a scrollbar on the element,
+or a touch interface to swipe-scroll, etc.),
+there are additional implementation details that provide a better user experience:
+
+When an element is scrolled (e.g. by the user, DOM manipulation),
+more of the element's content is shown.
+The value of text-overflow should not affect
+whether more of the element's content is shown or not.
+If a non-clip text-overflow is set,
+then as more content is scrolled into view,
+implementations should show whatever additional content fits,
+only truncating content which would otherwise be clipped
+(or is necessary to make room for the ellipsis/string),
+until the element is scrolled far enough
+to display the edge of the content
+at which point that content should be displayed
+rather than an ellipsis/string.
+
+<div class="example"><p style="display:none">Example(s):
+
+This example uses text-overflow on an element with overflow scroll
+to demonstrate the above described behavior.
+
+sample CSS:
+<pre><code class="lang-css">
+div.crawlbar {
+	text-overflow: ellipsis;
+	height: 2em;
+	overflow: scroll;
+	white-space: nowrap;
+	width: 15em;
+	border:1em solid black;
+}
+</code></pre>
+
+sample HTML fragment:
+<pre><code class="lang-markup">
+&lt;div class="crawlbar"&gt;
+CSS is awesome, especially when you can scroll
+to see extra text instead of just
+having it overlap other text by default.
+&lt;/div&gt;
+</code></pre>
+
+demonstration of sample CSS and HTML:
+<div style="text-overflow: ellipsis; height: 2em; overflow: scroll; white-space: nowrap; width: 15em; border:1em solid black;">
+CSS is awesome, especially when you can scroll
+to see extra text instead of just
+having it overlap other text by default.
+</div>
+</div> <!-- example -->
+
+While the content is being scrolled, implementations may adjust their rendering of ellipses (e.g. align to the box edge rather than line edge).
+
+
 <h2 id="max-lines">
 Limiting Visible Lines: the 'max-lines' property</h2>