Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Spec :user-invalid & :user-valid #9047

Merged
merged 6 commits into from
Aug 28, 2023
Merged

Spec :user-invalid & :user-valid #9047

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
58f82bf
Spec :user-invalid & :user-valid
nt1m Mar 17, 2023
cbbe99d
Minor fixes plus rewrite select's reset algorithm
domenic Aug 24, 2023
9a75464
Remove :user-invalid & :user-valid definitions for buttons
nt1m Aug 24, 2023
7cec4aa
editorial nits
annevk Aug 24, 2023
b5e0010
Collapse :user-valid/invalid condition list
nt1m Aug 26, 2023
0bd00c5
correct markup
annevk Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 104 additions & 43 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
nt1m marked this conversation as resolved.
Show resolved Hide resolved

<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>
Expand All @@ -52837,13 +52841,31 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
</ol>

<p>The <span data-x="concept-form-reset-control">reset algorithm</span> for <code>select</code>
elements is to go through all the <code>option</code> elements in the element's <span
data-x="concept-select-option-list">list of options</span>, set their <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>
<p>The <span data-x="concept-form-reset-control">reset algorithm</span> for a <code>select</code>
element <var>selectElement</var> is:</p>

<ol>
<li><p>Set <var>selectElement</var>'s <span>user interacted</span> to false.</p></li>

<li>
nt1m marked this conversation as resolved.
Show resolved Hide resolved
<p><span data-x="list iterate">For each</span> <var>optionElement</var> of
<var>selectElement</var>'s <span data-x="concept-select-option-list">list of
options</span>:</p>

<ol>
<li><p>If <var>optionElement</var> has a <code data-x="attr-option-selected">selected</code>
attribute, then set <var>optionElement</var>'s <span
data-x="concept-option-selectedness">selectedness</span> to true; otherwise set it to
false.</p></li>

<li><p>Set <var>optionElement</var>'s <span data-x="concept-option-dirtiness">dirtiness</span>
to false.</p></li>
</ol>
</li>

<li><p>Run the <span>selectedness setting algorithm</span> given
<var>selectElement</var>.</p></li>
</ol>

</div>

Expand Down Expand Up @@ -53779,9 +53801,10 @@ 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 <span>user interacted</span> to false, <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
Expand Down Expand Up @@ -55169,6 +55192,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 a <dfn>user
interacted</dfn> 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>
Expand Down Expand Up @@ -58863,7 +58889,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 true.</p></li>

<li><p><span>Assert</span>: <var>entry list</var> is not null.</p></li>

Expand Down Expand Up @@ -59237,10 +59263,10 @@ fur
<var>value</var>.</p></li>
</ol>

<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>
<p>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> (default null), an optional <var>encoding</var> (default
<span>UTF-8</span>), and an optional <var>setUserInteracted</var> (default false):

<ol>
<li><p>If <var>form</var>'s <span>constructing entry list</span> is true, then return
Expand All @@ -59257,6 +59283,9 @@ fur
<p>For each element <var>field</var> in <var>controls</var>, in <span>tree order</span>:</p>

<ol>
<li><p>If <var>setUserInteracted</var> is true, then set <var>field</var>'s <span>user
interacted</span> to true.</p></li>

<li>
<p>If any of the following is true:</p>

Expand Down Expand Up @@ -59380,8 +59409,7 @@ fur

<ol>
<li><p>Let <var>charset</var> be the <span data-x="encoding name">name</span> of
<var>encoding</var> if <var>encoding</var> is given, and "<code data-x="">UTF-8</code>"
otherwise.</p></li>
<var>encoding</var>.</p></li>

<li><p><span>Create an entry</span> with <var>name</var> and <var>charset</var>, and <span
data-x="list append">append</span> it to <var>entry list</var>.</p></li>
Expand Down Expand Up @@ -73038,11 +73066,11 @@ Demos:
<ul>
<li><code>input</code> elements that have a <code
data-x="attr-input-placeholder">placeholder</code> attribute whose value is currently being
presented to the user.</li>
presented to the user</li>

<li><code>textarea</code> elements that have a <code
data-x="attr-textarea-placeholder">placeholder</code> attribute whose value is currently being
presented to the user.</li>
presented to the user</li>
</ul>
</dd>

Expand Down Expand Up @@ -73089,6 +73117,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>, <code>textarea</code>, and <code>select</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>
</ul>
</dd>

nt1m marked this conversation as resolved.
Show resolved Hide resolved
<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>, <code>textarea</code>, and <code>select</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>
</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
Expand Down Expand Up @@ -78542,16 +78596,23 @@ 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:</p>

<ol>
<li><p>Set <var>entry</var>'s <span>user interacted</span> to true.</p></li>

<li id="unfocus-causes-change-event"><p><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>
</ol>
</li>

<li>
<p>If <var>entry</var> is an element, let <var>blur event target</var> be
Expand Down