[css-ui-4] let authors control the speed at which the caret blinks

Author: frivoal

css-ui-4/Overview.bs

@@ -87,6 +87,102 @@ Abstract: This is a delta specification over CSS-UI Level 3.
 
 	Issue: Add final level 3 content
 
+<h4 id="caret-blink-time">Blinking speed of the insertion caret: 'caret-blink-time'</h4>
+
+<pre class='propdef'>
+Name: caret-blink-time
+Value: auto | <<time>>{1,2}
+initial: auto
+Applies to: elements that accept input 
+Inherited: yes 
+Percentages: N/A 
+Media: interactive 
+Computed value: Same as specified value, except if only 1 <<time>> is specified, in which case the computed value has 2 instances of <<time>>, both with the same value as the one which was specified.
+Animatable: no 
+</pre>
+
+On most platforms and in most UAs,
+the text insertion caret blinks.
+This property allows the author
+to control the speed at which it blinks,
+or to turn off blinking entirely.
+
+When the computed value is ''caret-blink-time/auto'',
+the UA determines the speed at which the cursor blinks,
+if at all. It should follow platform conventions and settings.
+
+If two <<time>> values are specified,
+the caret blinks.
+The first value indicates how long the caret stays on,
+and the second value how long the caret stays off.
+If the second value is ommitted,
+it defaults to the same as the first one.
+Both values must be zero or more.
+
+If the second value is 0,
+or if both values are 0,
+the caret does not blink and is always on.
+
+If the first value is 0 and the second is not,
+the caret is always off,
+making it effectively invisible.
+
+Note: See <a href="http://www.w3.org/TR/WCAG20/#seizure">Guideline 2.3: Seizures: Do not design content in a way that is known to cause seizures</a> [[WCAG20]]. 
+
+<div class=example>
+	The following rule gives a caret that stays on for 1 second,
+	and off for half a second.
+	<pre><code class="lang-css">
+input { caret-blink-time: 1s 500ms; }
+	</code></pre>
+</div>
+
+<div class=example>
+	A user who is disturbed by or has adverse reactions to blinking visuals
+	may want to make all carets static and non-blinking,
+	regardless of platform defaults or author settings.
+	This can be accomplished by with the folliwing rule in the user stylesheet.
+
+	<pre><code class="lang-css">
+:read-write { caret-blink-time: 0 !important; }
+	</code></pre>
+</div>
+
+<div class=example>
+	Normally, the caret blinks between on and off.
+	This makes it alternate between 2 colors.
+	<pre><code class="lang-css">
+textarea {
+        caret-blink-time: 0;
+        caret-color: blue;
+        animation: caret-alternate 2s step-end infinite;
+}
+@keyframes caret-alternate {
+	from { caret-color: blue; }
+	50% { caret-color: red; }
+}
+	</code></pre>
+
+	The simulated rendering below illustrates how this would look.
+	<style>
+@keyframes caret-alternate {
+	from { border-color: blue; }
+	50% { border-color: red; }
+}
+	</style>
+	<div style="border:inset; background: white; width: 10em;">
+		Text area
+		with color-alternating caret<span style="border-right: 2px solid blue;animation: caret-alternate 2s step-end infinite;"></span>
+	</div>
+
+	Issue: This example does not work
+	because caret-color is currently marked as not annimatable.
+	This is probably wrong.
+</div>
+
+
+
+
 <h3 id="keyboard">Keyboard control</h3>
 
 <h4 id="nav-dir">Directional focus navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties</h4>