[css-ui-4] Remove caret-blink-time, add caret-animation

Author: frivoal

css-ui-4/Overview.bs

@@ -93,17 +93,17 @@ Abstract: This is a delta specification over CSS-UI Level 3.
 	ensuring good visibility and contrast means not using
 	currentColor.
 
-<h4 id="caret-blink-time">Blinking speed of the insertion caret: 'caret-blink-time'</h4>
+<h4 id="caret-animation">Animation of the insertion caret: 'caret-animation'</h4>
 
 <pre class='propdef'>
-Name: caret-blink-time
-Value: auto | <<time>>{1,2}
+Name: caret-animation
+Value: auto | blink | none | fade
 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.
+Computed value: Same as specified value.
 Animatable: no
 </pre>
 
@@ -113,42 +113,50 @@ This property allows the author
 to control the speed at which it blinks,
 or to turn off blinking entirely.
 
-Issue: Do we actually need fine control over the timing,
-or would "caret-blink: auto | no-blink" be enough?
 
-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.
+<dl dfn-type=value dfn-for=caret-animation>
+        <dt><dfn>auto</dfn>
+        <dd>The UA determines how the caret should be animated, if at all.
+        It should match platform conventions,
+        and may be adjusted based on context.
 
-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.
+        Note: This is typically rendered as a blinking caret.
 
-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]].
+        <dt><dfn>blink</dfn>
+        <dd>The UA must display a blinking caret.
+        For accessibility reasons, and based on user preferences,
+        The UA may display a non animated caret instead.
 
-If the second value is 0,
-or if both values are 0,
-the caret does not blink and is always on.
+        <dt><dfn>none</dfn>
+        <dd>The UA must not animate the caret.
 
-Note: It is recommended to stop the caret from blinking using ''caret-blink-time: 0''
-when applying custom animations using [[CSS3-ANIMATIONS]],
-to prevent the blinking and the animation to interfere.
+        Note: This is only about UA driven animations of the caret.
+        If CSS animations are used to animate the caret color,
+        these should still apply normally.
 
-If the first value is 0 and the second is not,
-the caret is always off,
-making it effectively invisible.
+        <dt><dfn>fade</dfn>
+        <dd>The UA must display a caret repeatedly fading in and out,
+        similarly to ''caret-animation/blink'' except it appears and
+        disappears progressively rather than suddenly.
+        For accessibility reasons, and based on user preferences,
+        The UA may display a non animated caret instead.
+</dl>
 
-<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>
+        Issue: Do we need the accessibility escape hatch on blink and fade?
+        Would it be enough instead to expect the UI to put
+        <code>caret-animation:fixed !important</code> in the
+        user stylesheet when it wants to prevent the caret
+        from blinking?
+
+The UA determines the speed at which the cursor blinks or fades.
+It should follow platform conventions and settings.
+
+Note: It is recommended to stop the caret from blinking or fading
+using ''caret-animation: none''
+when applying custom animations using [[CSS3-ANIMATIONS]],
+to prevent the blinking or fading and the css animation to interfere.
+
+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>
 	A user who is disturbed by or has adverse reactions to blinking or flashing visuals
@@ -158,7 +166,7 @@ input { caret-blink-time: 1s 500ms; }
 
 	<pre><code class="lang-css">
 /* prevent the caret from blinking/flashing */
-:read-write { caret-blink-time: 0 !important; }
+:read-write { caret-animation: none !important; }
 
 /* prevent changes of caret-color, including animations */
 :read-write { caret-color:auto !important; }
@@ -180,7 +188,7 @@ for details.
 	This makes it alternate between 2 colors.
 	<pre><code class="lang-css">
 textarea {
-        caret-blink-time: 0;
+        caret-animation: none;
         caret-color: blue;
         animation: caret-alternate 2s step-end infinite;
 }
@@ -225,7 +233,7 @@ means a character with a non-zero advance measure.
 
 <dl dfn-type=value dfn-for=caret-shape>
 	<dt><dfn>auto</dfn>
-	<dd>The UA determine the shape of the caret.
+	<dd>The UA determines the shape of the caret.
 	It should match platform conventions,
 	and may be adjusted based on context.
 	For example, if a UA switches between insert mode and overtype mode when the
@@ -333,7 +341,7 @@ The stacking position of the caret is left undefined, within the following const
 
 <pre class='propdef'>
 Name: caret
-Value: <<'caret-color'>> || <<'caret-blink-time'>> || <<'caret-shape'>>
+Value: <<'caret-color'>> || <<'caret-animation'>> || <<'caret-shape'>>
 Initial: auto
 Applies to: elements that accept input
 Inherited: yes
@@ -344,7 +352,7 @@ Animatable: See individual properties
 </pre>
 
 This property is a shorthand for setting
-'caret-color', 'caret-blink-time' and 'caret-shape' in one declaration.
+'caret-color', 'caret-animation' and 'caret-shape' in one declaration.
 Omitted values are set to their initial values.
 
 <div class=example>