[css-ui-4] Add text-overflow:fade and text-overflow:fade()

Author: frivoal

css-ui-4/Overview.bs

@@ -70,6 +70,78 @@ Abstract: This is a delta specification over CSS-UI Level 3.
 
 	Issue: Add final level 3 content
 
+This specification introduces a new value to the 'text-overflow' property:
+''text-overflow/fade'', as well as its functional notation variant ''fade()''.
+
+<pre class='partial propdef'>
+    Name: text-overflow
+    New values: ''fade'' | <<fade()>>
+    Computed value: As specified, with <<length>> converted to absolute units
+    </pre>
+
+<dl dfn-type=value dfn-for=text-overflow>
+    <dt dfn-type=function><dfn>fade( <<length>> | <<percentage>> )</dfn></dt>
+    <dd>Clip inline content that overflows its line box.
+    Characters may be only partially rendered.
+    In addition, the UA must apply a fade out effect
+    near the edge of the line box,
+    reaching complete transparency at the edge.
+
+    Issue: Do we need to define the way
+    the fade out is calculated
+    so that the fading is identical across browsers?
+    It should probably be something like
+    ''mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))'',
+    except applied to the relevant portion of the line only.
+    
+    The argument determines the distance
+    over which the fade effect is applied.
+    The <<percentage>> is resolved against the width of the line box.
+    Values lower than 0 are clipped to 0.
+    Values greater than the width of the line box are clipped to the width of the line box.
+
+    Issue: If the line box is too short
+    to display the fade effect at the desired length,
+    should we drop the effect,
+    or shrink the distance it is applied over until it fits,
+    or clip the end of the fade?
+
+    <dt><dfn>fade</dfn></dt>
+    <dd>Same as ''fade()'',
+    but the distance over which the fading effect is applied
+    is determined by the UA.
+    ''1em'' is suggested as a reasonable value.
+</dl>
+
+<div class="example">
+
+	<style>
+</style>
+<table style="color:#000;background:#fff" id="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 style="<strong>text-overflow:fade;</strong> overflow:hidden"&gt;
+CSS IS AWESOME, YES
+&lt;/div&gt;
+</code></pre></td>
+
+<td>
+<object type="image/png" data="images/cssisfade.png">
+a box with the text fading out on overflow.
+</object></td>
+
+<td>
+<div style="width:3.1em; border:solid .1em black; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:clip;">CSS IS AWESOME, YES</div>
+</td>
+</tr>
+</table>
+
+</div>
+ 
+
+
+
 <h2 id="pointing-keyboard">Pointing Devices and Keyboards</h2>
 
 <h3 id="pointer-interaction">Pointer interaction</h3>