[css-ui] Add the caret-animation property

See w3c#9707

Author: frivoal

css-ui-4/Overview.bs

@@ -1127,13 +1127,12 @@ Coloring the Insertion Caret: the 'caret-color' property</h4>
 	</div>
 
 
-<!--
 <h4 id="caret-animation">
 Animation of the insertion caret: 'caret-animation'</h4>
 
 	<pre class='propdef'>
 	Name: caret-animation
-	Value: auto | blink | none | fade
+	Value: auto | manual
 	Initial: auto
 	Applies to: elements that accept input
 	Inherited: yes
@@ -1145,9 +1144,7 @@ Animation of the insertion caret: 'caret-animation'</h4>
 	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.
-
+	to take control over the way the caret is animated.
 
 	<dl dfn-type=value dfn-for=caret-animation>
 		<dt><dfn>auto</dfn>
@@ -1157,43 +1154,35 @@ Animation of the insertion caret: 'caret-animation'</h4>
 			and may be adjusted based on context.
 
 			Note: This is typically rendered as a blinking caret.
+			Fading in and out instead of blinking is a variant that appears in some environments.
 
-		<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.
-
-		<dt><dfn>none</dfn>
+		<dt><dfn>manual</dfn>
 		<dd>
 			The UA must not animate the caret.
 
 			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.
-
-		<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.
+			When CSS animations are used to animate the caret color,
+			they apply normally.
 	</dl>
 
-	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.
+	The UA determines the speed at which the cursor animates (blinks, fades…).
 	It should follow platform conventions and settings.
 
-	Note: It is recommended to stop the caret from blinking or fading
-	using ''caret-animation: none''
+	Note: It is recommended for authors to stop the caret from blinking or fading
+	using ''caret-animation: manual''
 	when applying custom animations using [[CSS3-ANIMATIONS]],
-	to prevent the blinking or fading and the CSS animation to interfere.
+	to prevent the UA's animation and the CSS animation to interfere.
+
+	<div class=advisement>
+		If a user agent is unwilling to yield control of caret animmations
+		to page authors and would not honor ''caret-animation: manual'',
+		it must not implement the property at all.
+
+		Note:
+		This enables authors to use <code highlight="css">@supports (caret-animation: manual) { … }</code>
+		to gate code that would depend on this functionality.
+		See [[CSS-CONDITIONAL-3]].
+	</div>
 
 	Note: See <a href="https://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]].
 
@@ -1205,10 +1194,10 @@ Animation of the insertion caret: 'caret-animation'</h4>
 
 		<pre><code class="lang-css">
 		/* prevent the caret from blinking/flashing */
-		:read-write { caret-animation: none !important; }
+		:read-write { caret-animation: manual !important; }
 
 		/* prevent changes of caret-color, including animations */
-		:read-write { caret-color:auto !important; }
+		:read-write { caret-color: auto !important; }
 		</code></pre>
 	</div>
 
@@ -1223,11 +1212,11 @@ Animation of the insertion caret: 'caret-animation'</h4>
 	for details.
 
 	<div class=example>
-		Normally, the caret blinks between on and off.
+		Typically, the caret blinks between on and off.
 		This makes it alternate between 2 colors.
 		<pre><code class="lang-css">
 		textarea {
-			caret-animation: none;
+			caret-animation: manual;
 			caret-color: blue;
 			animation: caret-alternate 2s step-end infinite;
 		}
@@ -1258,7 +1247,6 @@ Animation of the insertion caret: 'caret-animation'</h4>
 		            animation: caret-alternate-test 2s step-end infinite;"
 		>Text area with color-alternating caret</div>
 	</div>
--->
 
 
 <h4 id="caret-shape">
@@ -1429,10 +1417,9 @@ Shape of the insertion caret: 'caret-shape'</h4>
 	<h4 id="caret">
 	Insertion caret shorthand: 'caret'</h4>
 
-	<!-- Value: <<'caret-color'>> || <<'caret-animation'>> || <<'caret-shape'>> -->
 	<pre class='propdef shorthand'>
 	Name: caret
-	Value: <<'caret-color'>> || <<'caret-shape'>>
+	Value: <<'caret-color'>> || <<'caret-animation'>> || <<'caret-shape'>>
 	Initial: auto
 	Applies to: elements that accept input
 	Inherited: yes
@@ -1443,7 +1430,6 @@ Shape of the insertion caret: 'caret-shape'</h4>
 	'caret-color' <!--, 'caret-animation'--> and 'caret-shape' in one declaration.
 	Omitted values are set to their initial values.
 
-<!--
 	<div class=example>
 		This example illustrates using the various caret related properties
 		in combination.
@@ -1452,7 +1438,7 @@ Shape of the insertion caret: 'caret-shape'</h4>
 
 		<pre><code class="lang-css">
 		#old-screen {
-			caret: block none;
+			caret: block manual;
 			animation: old-caret 2s infinite;
 			/*styling of the screen omitted for brevity */
 		}
@@ -1475,7 +1461,7 @@ Shape of the insertion caret: 'caret-shape'</h4>
 		.old-screen span {
 			display:inline-block;
 			white-space: pre;
-			caret: block 0s;
+			caret: block manual;
 			animation: caret-old-ref 2s  infinite;
 
 		}
@@ -1489,7 +1475,6 @@ Shape of the insertion caret: 'caret-shape'</h4>
 		Focus the element below to see how your browser renders it.
 		<div class="old-screen" contentEditable="true" style="height: 100px">&gt; </div>
 	</div>
--->
 
 
 <h3 id="keyboard">