From d615f220fc5c2e0b54576a8ad3e25780e83d72f7 Mon Sep 17 00:00:00 2001
From: Stephen Chenney <schenney@chromium.org>
Date: Wed, 30 Oct 2024 18:21:47 -0400
Subject: [PATCH] Clarify which element caret properties come from

THe spec is not clear as to which element's properties should be used to style the caret. Try to clarify that.
---
 css-ui-4/Overview.bs | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index a050804750c..d772f635702 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -1079,6 +1079,18 @@ Cursor of the canvas</h5>
 <h3 id="insertion-caret">
 Insertion caret</h3>
 
+The caret is a visible indicator of the insertion point in an element where text (and potentially other content) is inserted by the user. The properties here control the caret when within the <a href="https://w3c.github.io/contentEditable/#dfn-editing-host">editing host</a> element or <a spec=html>mutable</a> form control, such as <{textarea}>.
+
+Note: UAs might have additional things that count as “carets”.
+For example, some UAs can show a “navigation caret”,
+which acts similarly to an insertion caret
+but can be moved around in non-editable text
+and is functionally a caret.
+On the other hand, the cursor image shown
+when hovering over text when the 'cursor' property is ''cursor/auto'',
+or when hovering over an element where the 'cursor' property is ''cursor/text'' or ''cursor/vertical-text'',
+though it sometimes resembles a caret, is not a caret (it's a cursor).
+
 <h4 id="caret-color" caniuse="css-caret-color">
 Coloring the Insertion Caret: the 'caret-color' property</h4>
 
@@ -1111,17 +1123,7 @@ Coloring the Insertion Caret: the 'caret-color' property</h4>
 			The insertion caret is colored with the specified color.
 	</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: UAs might have additional things that count as “carets”.
-	For example, some UAs can show a “navigation caret”,
-	which acts similarly to an insertion caret
-	but can be moved around in non-editable text
-	and is functionally a caret.
-	On the other hand, the cursor image shown
-	when hovering over text when the 'cursor' property is ''cursor/auto'',
-	or when hovering over an element where the 'cursor' property is ''cursor/text'' or ''cursor/vertical-text'',
-	though it sometimes resembles a caret, is not a caret (it's a cursor).
+	This property controls the color of the caret.
 
 	<div class="example">
 		Example: a textarea with