[selectors-4] Align :user-invalid/valid with HTML spec #9308 #9257

Author: fantasai

selectors-4/Overview.bs

@@ -2874,29 +2874,36 @@ The User-interaction Pseudo-classes: '':user-valid'' and '':user-invalid''</h4>
 	and the <dfn id="user-valid-pseudo">:user-valid</dfn> pseudo-classes
 	represent an element with incorrect or correct input, respectively,
 	but only <em>after</em> the user has significantly interacted with it.
+	Their purpose is to help the user identify mistakes in their input.
 
-	The '':user-invalid'' pseudo-class
-	must match an '':invalid'', '':out-of-range'', or
-	blank-but-'':required'' elements between the time the user has attempted
-	to submit the form and before the user has interacted again with the
-	form element.
-
-	The '':user-valid'' pseudo-class must match a '':valid'' element between the
-	time the user has attempted to submit the form and before the user has
-	interacted again with the form element.
-
-	User-agents may allow them to match such elements at other times,
+	These pseudo-classes must at least match their respective elements
+	after the user has attempted to submit the form
+	and before the user has interacted again with the input element
+	or reset the form.
+	They may also match at other times,
 	as would be appropriate for highlighting an error to the user.
-	For example, a UA may choose to have '':user-invalid'' match an
-	'':invalid'' element once the user has typed some text into it and
-	changed the focus to another element, and to stop matching only after
+	For example, '':user-invalid''
+	could start matching an '':invalid'' input element
+	once the user has changed its value
+	and focus has moved to another element;
+	or stop matching only after
 	the user has successfully corrected the input.
 
+	Host languages may define more precise matching rules
+	or defer to platform conventions;
+	otherwise the exact behavior is UA-defined.
+	Regardless,
+	the '':user-invalid'' pseudo-class must only match '':invalid'' elements;
+	and the '':user-valid'' pseudo-class must only match '':valid'' elements.
+	See the <a spec=html lt=":user-invalid" selector>HTML specification</a>
+	for the specific rules pertaining to HTML elements. [[!HTML]]
+
 	<div class='example'>
-		For example, the input in the following document fragment
+		For example, the <{input}> element in the following document fragment
 		would match '':invalid'' as soon as the page is loaded
-		(because it the initial value violates the max-constraint),
-		but it won't match '':user-invalid'' until the user significantly interacts with the element,
+		(because the <{input}>'s initial value violates its max constraint)
+		but it won't match '':user-invalid''
+		until the user significantly interacts with the input field
 		or attempts to submit the form it's part of.
 
 		<pre>
@@ -2910,12 +2917,6 @@ The User-interaction Pseudo-classes: '':user-valid'' and '':user-invalid''</h4>
 		</pre>
 	</div>
 
-	Issue: Cross-check with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3A-moz-ui-invalid">'':-moz-ui-invalid''</a>.
-
-	Issue: Evaluate proposed <a href="https://lists.w3.org/Archives/Public/www-style/2014Feb/0511.html">:dirty pseudo-class</a>
-
-	Issue: Clarify that this (and '':invalid''/'':valid'') can apply to form and fieldset elements.
-
 <h2 id="structural-pseudos">
 Tree-Structural pseudo-classes</h2>