Spec :user-invalid & :user-valid

Fixes whatwg#8452

Author: nt1m

source

@@ -47331,15 +47331,16 @@ interface <dfn interface>HTMLInputElement</dfn> : <span>HTMLElement</span> {
   <div w-nodev>
 
   <p>The <span data-x="concept-form-reset-control">reset algorithm</span> for <code>input</code>
-  elements is to set the <span data-x="concept-fe-dirty">dirty value flag</span> and <span
-  data-x="concept-input-checked-dirty-flag">dirty checkedness flag</span> back to false, set the
-  <span data-x="concept-fe-value">value</span> of the element to the value of the <code
-  data-x="attr-input-value">value</code> content attribute, if there is one, or the empty string
-  otherwise, set the <span data-x="concept-fe-checked">checkedness</span> of the element to true if
-  the element has a <code data-x="attr-input-checked">checked</code> content attribute and false if
-  it does not, empty the list of <span data-x="concept-input-type-file-selected">selected
-  files</span>, and then invoke the <span>value sanitization algorithm</span>, if the <code
-  data-x="attr-input-type">type</code> attribute's current state defines one.</p>
+  elements is to set the <span>user interacted</span>, <span data-x="concept-fe-dirty">dirty value
+  flag</span> and <span data-x="concept-input-checked-dirty-flag">dirty checkedness flag</span>
+  back to false, set the <span data-x="concept-fe-value">value</span> of the element to the value
+  of the <code data-x="attr-input-value">value</code> content attribute, if there is one, or the
+  empty string otherwise, set the <span data-x="concept-fe-checked">checkedness</span> of the
+  element to true if the element has a <code data-x="attr-input-checked">checked</code> content
+  attribute and false if it does not, empty the list of <span
+  data-x="concept-input-type-file-selected">selected files</span>, and then invoke the <span>value
+  sanitization algorithm</span>, if the <code data-x="attr-input-type">type</code> attribute's
+  current state defines one.</p>
 
   <p>Each <code>input</code> element can be <i data-x="concept-fe-mutable">mutable</i>. Except where
   otherwise specified, an <code>input</code> element is always <i
@@ -52260,17 +52261,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</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
@@ -52827,6 +52829,8 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   element to run these steps:</p>
 
   <ol>
+   <li>Set the <code>select</code> element's <span>user interacted</span> to true.</li>
+
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
    data-x="event-input">input</code> at the <code>select</code> element, with the <code
    data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
@@ -52843,7 +52847,8 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   data-x="concept-option-selectedness">selectedness</span> to true if the <code>option</code>
   element has a <code data-x="attr-option-selected">selected</code> attribute, and false otherwise,
   set their <span data-x="concept-option-dirtiness">dirtiness</span> to false, and then have the
-  <code>option</code> elements <span>ask for a reset</span>.</p>
+  <code>option</code> elements <span>ask for a reset</span>. The element should also set the
+  <span>user interacted</span> to false.</p>
 
   </div>
 
@@ -53779,9 +53784,9 @@ interface <dfn interface>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {
   content</span>.</p>
 
   <p>The <span data-x="concept-form-reset-control">reset algorithm</span> for <code>textarea</code>
-  elements is to set the <span data-x="concept-fe-dirty">dirty value flag</span> back to false, and
-  set the <span data-x="concept-textarea-raw-value">raw value</span> of element to its <span>child
-  text content</span>.</p>
+  elements is to set the user interacted, <span data-x="concept-fe-dirty">dirty value flag</span>
+  back to false, and set the <span data-x="concept-textarea-raw-value">raw value</span> of element
+  to its <span>child text content</span>.</p>
 
   <p>When a <code>textarea</code> element is popped off the <span>stack of open elements</span> of
   an <span>HTML parser</span> or <span>XML parser</span>, then the user agent must invoke the
@@ -55169,6 +55174,9 @@ 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><code>input</code>, <code>textarea</code> and <code>select</code> elements have an
+  <dfn>user interacted</dfn> (a boolean). 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>
@@ -58863,7 +58871,7 @@ fur
    form</span>.</p>
 
    <li><p>Let <var>entry list</var> be the result of <span>constructing the entry list</span> with
-   <var>form</var>, <var>submitter</var>, and <var>encoding</var>.</p></li>
+   <var>form</var>, <var>submitter</var>, <var>encoding</var> and <var>true</var>.</p></li>
 
    <li><p><span>Assert</span>: <var>entry list</var> is not null.</p></li>
 
@@ -59239,8 +59247,8 @@ fur
 
   <p>The algorithm to <dfn id="constructing-the-form-data-set" export data-lt="constructing the
   entry list" data-x="constructing the entry list">construct the entry list</dfn> given a
-  <var>form</var>, an optional <var>submitter</var>, and an optional <var>encoding</var>, is as
-  follows. If not specified otherwise, <var>submitter</var> is null.</p>
+  <var>form</var>, an optional <var>submitter</var>, an optional <var>setUserInteracted</var>
+  and an optional <var>encoding</var>, is as follows. If not specified otherwise, <var>submitter</var> is null.</p>
 
   <ol>
    <li><p>If <var>form</var>'s <span>constructing entry list</span> is true, then return
@@ -59257,6 +59265,8 @@ fur
     <p>For each element <var>field</var> in <var>controls</var>, in <span>tree order</span>:</p>
 
     <ol>
+     <li>If <var>setUserInteracted</var> is true, set <var>field</var>'s <span>user interacted</span> to true.</li>
+
      <li>
       <p>If any of the following is true:</p>
 
@@ -73089,6 +73099,32 @@ 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
+      any element falling into one of the following categories:</p>
+    <ul>
+      <li><code>input</code> and <code>textarea</code> elements that have their <span>user interacted</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>.</li>
+      <li><span data-x="concept-button">Buttons</span> and other built-in elements that 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>.</li>
+    </ul>
+   </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
+      any element falling into one of the following categories:</p>
+    <ul>
+      <li><code>input</code> and <code>textarea</code> elements that have their <span>user interacted</span>
+      set to true, 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>.</li>
+      <li><span data-x="concept-button">Buttons</span> and other built-in elements that 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>.</li>
+    </ul>
+   </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
@@ -78542,16 +78578,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>Set <var>entry</var>'s <span>user interacted</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