w3c
diff --git a/‎css-ui/Overview.bs‎
Lines changed: 139 additions & 29 deletions b/‎css-ui/Overview.bs‎
Lines changed: 139 additions & 29 deletions
@@ -27,6 +27,7 @@ Ignored Terms: outline-top
 Ignored Terms: outline-left
 At Risk: ::value ::choices pseudo-elements
 At Risk: 'box-sizing' property value: padding-box
+At Risk: 'caret-color' property
 At Risk: 'ime-mode' property
 At Risk: 'text-overflow' property value: &lt;string&gt;
 At Risk: 'text-overflow' property 2-value syntax and definition
@@ -88,15 +89,15 @@ introduced several user interface related pseudo-classes, properties and values.
 This Working Draft incorporates and extends them to provide the ability, through CSS,
 to style elements based upon additional user interface states,
 to style fragments of user interface elements, and to alter the
-dynamic presentation of elements in ways previously only available through specific HTML4/XHTML1 elements and attributes.
+dynamic presentation of elements in ways previously only available through specific HTML elements and attributes.
 
 <h3 id="purpose">Purpose</h3>
 
 The purpose of this specification is to achieve the following objectives:
 <ul>
 <li>Extend the user interface features in CSS2.1.
 <li>Provide additional CSS mechanisms to augment or replace other
-dynamic presentation related features in HTML4/XHTML1.
+dynamic presentation related features in HTML.
 <li>Introduce directional navigation properties to assist in the construction of
 user interfaces which make use of a directional navigation model.
 </ul>
@@ -182,8 +183,8 @@ and the currently chosen radio button can be selected with the ''::value'' pseud
 <tr><th>Value:</th><td>
 content-box |
 padding-box |
-border-box |
-inherit</td></tr>
+border-box
+</td></tr>
 <tr><th>Initial:</th><td>content-box</td></tr>
 <tr><th>Applies to:</th><td>all elements that accept width or height</td></tr>
 <tr><th>Inherited:</th><td>no</td></tr>
@@ -280,19 +281,21 @@ ways:
 
 <ol>
 <li>Outlines do not take up space. 
-<li>Outlines may be non-rectangular. 
+<li>Outlines may be non-rectangular.
+<li>UAs often render outlines on elements in the :focus state.
 </ol>
 
 The outline properties control the style of these dynamic outlines.
 
+Keyboard users depend on outline on elements in the :focus state for interaction with the page, thus authors must not make the outline invisible on such elements without making sure an alternative highlighting mechanism is provided.
+
 <h3 id="outline">'outline' property</h3>
 
 <table class="propdef"><tbody>
 <tr><th>Name:</th><td><dfn>outline</dfn></td></tr>
 <tr><th>Value:</th><td>
 [ &lt;'outline-color'&gt; || &lt;'outline-style'&gt; ||
-&lt;'outline-width'&gt; ] |
-inherit
1F0E
+&lt;'outline-width'&gt; ]
 </td></tr>
 <tr><th>Initial:</th><td>see individual properties</td></tr>
 <tr><th>Applies to:</th><td>all elements</td></tr>
@@ -307,7 +310,7 @@ inherit
 
 <table class="propdef"><tbody>
 <tr><th>Name:</th><td><dfn>outline-width</dfn></td></tr>
-<tr><th>Value:</th><td><<'border-width'>> | inherit</td></tr>
+<tr><th>Value:</th><td><<'border-width'>></td></tr>
 <tr><th>Initial:</th><td>medium</td></tr>
 <tr><th>Applies to:</th><td>all elements</td></tr>
 <tr><th>Inherited:</th><td>no</td></tr>
@@ -321,7 +324,7 @@ inherit
 
 <table class="propdef"><tbody>
 <tr><th>Name:</th><td><dfn>outline-style</dfn></td></tr>
-<tr><th>Value:</th><td>auto | <<'border-style'>> | inherit</td></tr>
+<tr><th>Value:</th><td>auto | <<'border-style'>></td></tr>
 <tr><th>Initial:</th><td>none</td></tr>
 <tr><th>Applies to:</th><td>all elements</td></tr>
 <tr><th>Inherited:</th><td>no</td></tr>
@@ -335,7 +338,7 @@ inherit
 
 <table class="propdef"><tbody>
 <tr><th>Name:</th><td><dfn>outline-color</dfn></td></tr>
-<tr><th>Value:</th><td><<color>> | invert | inherit</td></tr>
+<tr><th>Value:</th><td><<color>> | invert</td></tr>
 <tr><th>Initial:</th><td>invert</td></tr>
 <tr><th>Applies to:</th><td>all elements</td></tr>
 <tr><th>Inherited:</th><td>no</td></tr>
@@ -399,8 +402,10 @@ regardless of color background.
 
 Conformant UAs may ignore the ''invert'' value
 on platforms that do not support color inversion of the pixels on the screen.
+
 If the UA does not support the ''invert'' value
-then the initial value of the 'outline-color' property
+then it must reject that value at parse-time, and
+the initial value of the 'outline-color' property
 is the ''currentColor'' [[!CSS3COLOR]] keyword.
 
 The 'outline' property is a shorthand property,
@@ -452,7 +457,7 @@ However, it is possible to offset the outline and draw it beyond the border edge
 
 <table class="propdef"><tbody>
 <tr><th>Name:</th><td><dfn>outline-offset</dfn></td></tr>
-<tr><th>Value:</th><td>&lt;length&gt; | inherit</td></tr>
+<tr><th>Value:</th><td>&lt;length&gt;</td></tr>
 <tr><th>Initial:</th><td>0</td></tr>
 <tr><th>Applies to:</th><td>all elements</td></tr>
 <tr><th>Inherited:</th><td>no</td></tr>
@@ -494,7 +499,7 @@ and if so, along which axis/axes.
 
 <table class="propdef"><tbody>
 <tr><th>Name:</th><td><dfn>resize</dfn></td></tr>
-<tr><th>Value: </th><td>none | both | horizontal | vertical | inherit</td></tr>
+<tr><th>Value: </th><td>none | both | horizontal | vertical</td></tr>
 <tr><th>Initial:</th><td>none</td></tr>
 <tr><th>Applies to:</th><td>elements with 'overflow' other than visible</td></tr>
 <tr><th>Inherited:</th><td>no</td></tr>
@@ -610,12 +615,11 @@ too bad we don't have @viewport yet. otherwise this would be cool:
 <tr><th>Name:</th>
     <td><dfn>text-overflow</dfn></td></tr>
 <tr><th>Value:</th>
-    <td> (
+    <td> [
 clip |
 ellipsis |
 <<string>>
-){1,2} |
-inherit
+]{1,2}
 </td></tr>
 <tr><th>Initial:</th>
     <td>clip</td></tr>
@@ -854,11 +858,47 @@ 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 -->
+
 As some content is scrolled into view,
 it is likely that other content may scroll out of view on the other side.
 If that content's block container element is the same
 that's doing the scrolling,
-then implementations should render an ellipsis/string in place of
+and the computed value of 'text-overflow' has two values, with
+the first a non-clip value,
+then implementations must render an ellipsis/string in place of
 the clipped content,
 with the same details as described in the value definition above,
 except that the ellipsis/string is drawn in the <a>start</a>
@@ -869,6 +909,17 @@ While the content is being scrolled,
 implementations may adjust their rendering of ellipses/strings
 (e.g. align to the box edges rather than line edges).
 
+<div class="example"><p style="display:none">Example(s):
+
+Same as previous example except with <code>text-overflow: ellipsis ellipsis</code>, demonstrated:
+
+<div style="text-overflow: ellipsis 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 -->
+
 If there is insufficient space for both start
 and end ellipses/strings,
 then only the end ellipsis/string should be rendered.
@@ -892,7 +943,7 @@ then only the end ellipsis/string should be rendered.
  all-scroll
 | zoom-in | zoom-out
 <br>
-] ] | inherit </td></tr>
+] ] </td></tr>
 <tr><th>Initial:</th><td>auto</td></tr>
 <tr><th>Applies to:</th><td>all elements</td></tr>
 <tr><th>Inherited:</th><td>yes</td></tr>
@@ -915,6 +966,7 @@ If the user agent cannot handle the first cursor of a list of cursors,
 it must attempt to handle the second, etc.
 If the user agent cannot handle any user-defined cursor,
 it must use the cursor keyword at the end of the list.
+Conforming User Agents may, instead of &lt;uri&gt;, support &lt;image&gt; which is a superset.
 The optional &lt;x&gt; and &lt;y&gt; coordinates
 identify the exact position within the image which is the pointer position (i.e., the hotspot).
 </dd>
@@ -1087,16 +1139,71 @@ to the next value and attempt to use the "hyper.cur" cursor.
 If that cursor format was also not supported,
 the UA could attempt to use the "hyper.png" cursor with the explicit hot spot.
 Finally if the UA does not support any of those image cursor formats, the UA would skip to the last value
-and simply render the ''pointer'' cursor.
+and render the ''pointer'' cursor.
 </div>
 
+<h5 id="canvas_cursor">Cursor of the canvas</h5>
+
+The document <a href="http://www.w3.org/TR/CSS21/intro.html#the-canvas">canvas</a>
+is the infinite surface over which the document is rendered [[!CSS21]].
+Since no element corresponds to the canvas,
+in order to allow styling of the cursor when not over any element,
+the canvas cursor re-uses the root element's cursor.
+However, if no boxes are generated for the root element
+(for example, if the root element has ''display: none''),
+then the canvas cursor is the platform-dependent default cursor.
+
+Note: An element might be invisible,
+but still generate boxes. For example,
+if the element has ''visibility: hidden'' but not ''display: none'',
+boxes are generated for it and its cursor is used for the canvas.
+
+
+<h3 id="insertion-caret">Insertion caret</h3>
+
+<h4 id="caret-color">Coloring the insertion caret: caret-color</h4>
+<table class="propdef"><tbody>
+<tr><th>Name: </th><td><dfn>caret-color</dfn></td></tr>
+<tr><th>Value: </th><td>auto | &lt;color&gt;</td></tr>
+<tr><th>Initial:</th><td>auto</td></tr>
+<tr><th>Applies to:</th><td>elements that accept input</td></tr>
+<tr><th>Inherited:</th><td>no</td></tr>
+<tr><th>Percentages:</th><td>N/A</td></tr>
+<tr><th>Media:</th><td>interactive</td></tr>
+<tr><th>Computed&nbsp;value:</th><td>The computed value for ''auto'' is ''currentColor''. For &lt;color&gt; values, the computed value is as defined for the [[!CSS3COLOR]] 'color' property.</td></tr>
+<tr><th>Animatable:</th><td>no</td></tr>
+</tbody></table>
+
+<dl>
+<dt>auto</dt>
+<dd>the color of the element.</dd>
+<dt>&lt;color&gt;</dt>
+<dd>the insertion caret is colored with the specified color.</dd>
+</dl>
+
+The caret is a visible indicator of the insertion point in an element where text (and potentially other content) is inserted by the user. This property controls the color of that visible indicator.
+
+Note: caret shape and blinking is outside the scope of this feature and thus unspecified.
+
+<div class="example">
+Example: a textarea with 
+<code class="lang-css">caret-color:#00aacc;</code>
+
+<textarea style="caret-color:#00aacc;">
+caret-color:#00aacc
+</textarea>
+
+</div><!-- example -->
+
+Note: The caret-color property is at risk.
+
 
 <h3 id="keyboard">Keyboard control</h3>
 
 <h4 id="nav-dir">Directional focus navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties</h4>
 <table class="propdef"><tbody>
 <tr><th>Name: </th><td><dfn>nav-up</dfn>, <dfn>nav-right</dfn>, <dfn>nav-down</dfn>, <dfn>nav-left</dfn></td></tr>
-<tr><th>Value: </th><td>auto | &lt;id&gt; [ current | root | &lt;target-name&gt; ]?  | inherit</td></tr>
+<tr><th>Value: </th><td>auto | &lt;id&gt; [ current | root | &lt;target-name&gt; ]? </td></tr>
 <tr><th>Initial:</th><td>auto</td></tr>
 <tr><th>Applies to:</th><td>all enabled elements</td></tr>
 <tr><th>Inherited:</th><td>no</td></tr>
@@ -1124,7 +1231,7 @@ the user agent automatically determines which element to navigate the focus to.
 <dt>&lt;target-name&gt;</dt>
 <dd>
 The &lt;target-name&gt; parameter indicates the target frame for the focus navigation.
-It is a string and it cannot start with the underscore "_" character.
+It is a &lt;string&gt; and it cannot start with the underscore "_" character.
 If the specified target frame does not exist,
 the parameter will be treated as the keyword ''current'',
 which means to simply use the frame that the element is in.
@@ -1188,7 +1295,8 @@ it is still important to ensure focus navigation behaviors which relate reasonab
 
 <table class="propdef"><tbody>
 <tr><th>Name: </th><td><dfn>ime-mode</dfn></td></tr>
-<tr><th>Value: </th><td>auto | normal | active | inactive | disabled | inherit</td></tr>
+<tr><th>Value: </th><td>auto | normal | active | inactive | disabled
+</td></tr>
 <tr><th>Initial:</th><td>auto</td></tr>
 <tr><th>Applies to:</th><td>text fields</td></tr>
 <tr><th>Inherited:</th><td>no</td></tr>
@@ -1378,23 +1486,25 @@ button
  white-space:normal;
 }
 
-input[type=reset]
+input[type=reset]:lang(en)
 {
-/* default content of HTML4/XHTML1 input type=reset button */
+/* default content of HTML input type=reset button, per language */
  content: "Reset";
 }
 
-input[type=submit]
+input[type=submit]:lang(en)
 {
-/* default content of HTML4/XHTML1 input type=submit button */
+/* default content of HTML input type=submit button, per language */
  content: "Submit";
 }
 
+/* UAs should use language-specific Reset/Submit rules for others. */
+
 input[type=button],
 input[type=reset][value],
 input[type=submit][value]
 {
-/* text content/labels of HTML4/XHTML1 "input" buttons */
+/* text content/labels of HTML "input" buttons */
  content: attr(value);
 }
 
@@ -1406,7 +1516,7 @@ textarea
 
 input[type=hidden]
 {
-/* appearance of the HTML4/XHTML1 hidden text field in particular */
+/* appearance of the HTML hidden text field in particular */
  display: none;
 }
 
@@ -1434,7 +1544,7 @@ select,select[size=1]
 
 select[size]:active
 {
-/* active HTML4/XHTML &lt;select&gt; w/ size more than 1 - appearance of active list */
+/* active HTML &lt;select&gt; w/ size more than 1 - appearance of active list */
  display: inline-block;
 }