Spec :user-invalid & :user-valid

Fixes whatwg#8452

Author: nt1m

source

@@ -51780,17 +51780,18 @@ You cannot submit this form when the field is incorrect.</samp></pre>
 
   <p>For <code>input</code> elements without a defined <span>input activation behavior</span>, but
   to which these events <span data-x="concept-input-apply">apply</span>, and for which the user
-  interface involves both interactive manipulation and an explicit commit action, then when the user
-  changes the element's <span data-x="concept-fe-value">value</span>, the user agent must
+  interface involves both interactive manipulation and an explicit commit action, then when the
+  user changes the element's <span data-x="concept-fe-value">value</span>, the user agent must
   <span>queue an element task</span> on the <span>user interaction task source</span> given the
   <code>input</code> element to <span data-x="concept-event-fire">fire an event</span> named <code
   data-x="event-input">input</code> at the <code>input</code> element, with the <code
   data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
   attributes initialized to true, and any time the user commits the change, the user agent must
   <span>queue an element task</span> on the <span>user interaction task source</span> given the
-  <code>input</code> element to <span data-x="concept-event-fire">fire an event</span> named <code
-  data-x="event-change">change</code> at the <code>input</code> element, with the <code
-  data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p>
+  <code>input</code> element to set its <span>user-interacted flag</span> to true and <span
+  data-x="concept-event-fire">fire an event</span> named <code data-x="event-change">change</code>
+  at the <code>input</code> element, with the <code data-x="dom-Event-bubbles">bubbles</code>
+  attribute initialized to true.</p>
 
   <p class="example">An example of a user interface involving both interactive manipulation and a
   commit action would be a <span data-x="attr-input-type-range">Range</span> controls that use a
@@ -54673,6 +54674,10 @@ interface <dfn interface>HTMLLegendElement</dfn> : <span>HTMLElement</span> {
   default value. If it is false, <span data-x="concept-fe-value">value</span> mirrors the default
   value. If it is true, the default value is ignored.</p>
 
+  <p id="concept-input-value-user-interacted-flag"><span id="concept-textarea-user-interacted"></span><code>input</code>
+  and <code>textarea</code> elements have a <dfn>user-interacted flag</dfn>.
+  It is initially set to false.</p>
+
   <p>To define the behavior of constraint validation in the face of the <code>input</code>
   element's <code data-x="attr-input-multiple">multiple</code> attribute, <code>input</code> elements
   can also have separately defined <dfn data-x="concept-fe-values">value<em>s</em></dfn>.</p>
@@ -58749,6 +58754,8 @@ fur
     <p>For each element <var>field</var> in <var>controls</var>, in <span>tree order</span>:</p>
 
     <ol>
+     <li>Set <var>field</var>'s <span>user-interacted flag</span> to false.</li>
+
      <li>
       <p>If any of the following is true:</p>
 
@@ -72549,6 +72556,22 @@ Demos:
     </ul>
    </dd>
 
+   <dt><dfn selector noexport><code data-x="selector-user-valid">:user-valid</code></dfn></dt>
+   <dd>
+    <p>The <code data-x="selector-user-valid">:user-valid</code> <span>pseudo-class</span> must
+    match elements that have their <span>user-interacted flag</span> set to true, are <span
+    data-x="candidate for constraint validation">candidates for constraint validation</span> and
+    that <span data-x="concept-fv-valid">satisfy their constraints</span>.</p>
+   </dd>
+
+   <dt><dfn selector noexport><code data-x="selector-user-invalid">:user-invalid</code></dfn></dt>
+   <dd>
+    <p>The <code data-x="selector-user-invalid">:user-invalid</code> <span>pseudo-class</span> must
+    match elements that have their <span>user-interacted flag</span> set to true and are <span
+    data-x="candidate for constraint validation">candidates for constraint validation</span> but do
+    not <span data-x="concept-fv-valid">satisfy their constraints</span>.</p>
+   </dd>
+
    <dt><dfn selector noexport><code data-x="selector-in-range">:in-range</code></dfn></dt>
    <dd>
     <p>The <code data-x="selector-in-range">:in-range</code> <span>pseudo-class</span> must match
@@ -77870,16 +77893,24 @@ partial interface <span id="NavigatorUserActivation-partial">Navigator</span> {
     these substeps:</p>
 
     <ol>
-     <li id="unfocus-causes-change-event"><p>If <var>entry</var> is an <code>input</code>
-     element, and the <code data-x="event-change">change</code> event <span
-     data-x="concept-input-apply">applies</span> to the element, and the element does not have a
-     defined <span>activation behavior</span>, and the user has changed the element's <span
-     data-x="concept-fe-value">value</span> or its list of <span
-     data-x="concept-input-type-file-selected">selected files</span> while the control was focused
-     without committing that change (such that it is different to what it was when the control was
-     first focused), then <span data-x="concept-event-fire">fire an event</span> named <code
-     data-x="event-change">change</code> at the element, with the <code
-     data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p>
+     <li>
+      <p>If <var>entry</var> is an <code>input</code>
+      element, and the <code data-x="event-change">change</code> event <span
+      data-x="concept-input-apply">applies</span> to the element, and the element does not have a
+      defined <span>activation behavior</span>, and the user has changed the element's <span
+      data-x="concept-fe-value">value</span> or its list of <span
+      data-x="concept-input-type-file-selected">selected files</span> while the control was focused
+      without committing that change (such that it is different to what it was when the control was
+      first focused), then:
+
+      <ol>
+       <li>Change <var>entry</var>'s <span>user-interacted flag</span> to true.</li>
+
+       <li id="unfocus-causes-change-event"><span data-x="concept-event-fire">Fire an event</span> named <code
+       data-x="event-change">change</code> at the element, with the <code
+       data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</li>
+      </ol>
+     </li>
 
      <li>
       <p>If <var>entry</var> is an element, let <var>blur event target</var> be