Add the autocorrect attribute

Tests: web-platform-tests/wpt#25073.

Fixes #3595.

Co-authored-by: Anne van Kesteren <annevk@annevk.nl>

source

@@ -11790,6 +11790,7 @@ interface <dfn interface>HTMLElement</dfn> : <span>Element</span> {
   [<span>CEReactions</span>] attribute boolean <span data-x="dom-spellcheck">spellcheck</span>;
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-writingSuggestions">writingSuggestions</span>;
   [<span>CEReactions</span>] attribute DOMString <span data-x="dom-autocapitalize">autocapitalize</span>;
+  [<span>CEReactions</span>] attribute boolean <span data-x="dom-autocorrect">autocorrect</span>;
 
   [<span>CEReactions</span>] attribute [<span>LegacyNullToEmptyString</span>] DOMString <span data-x="dom-innerText">innerText</span>;
   [<span>CEReactions</span>] attribute [<span>LegacyNullToEmptyString</span>] DOMString <span data-x="dom-outerText">outerText</span>;
@@ -13035,6 +13036,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
   <ul class="brief">
    <li><code data-x="attr-accesskey">accesskey</code></li>
    <li><code data-x="attr-autocapitalize">autocapitalize</code></li>
+   <li><code data-x="attr-autocorrect">autocorrect</code></li>
    <li><code data-x="attr-fe-autofocus">autofocus</code></li>
    <li><code data-x="attr-contenteditable">contenteditable</code></li>
    <li><code data-x="attr-dir">dir</code></li>
@@ -45698,11 +45700,14 @@ interface <dfn interface>HTMLTableCellElement</dfn> : <span>HTMLElement</span> {
     </ul>
    </dd>
 
-   <dt><dfn data-x="category-autocapitalize">Autocapitalize-inheriting elements</dfn></dt>
+   <dt><dfn id="category-autocapitalize"
+   data-x="category-autocapitalize-and-autocorrect">Autocapitalize-and-autocorrect-inheriting
+   elements</dfn></dt>
 
    <dd>
     <p>Denotes elements that inherit the <code data-x="attr-autocapitalize">autocapitalize</code>
-    attribute from their <span>form owner</span>.</p>
+    and <code data-x="attr-autocorrect">autocorrect</code> attributes from their <span>form
+    owner</span>.</p>
 
     <!-- when updating this also update the category index -->
     <ul class="brief category-list">
@@ -46418,8 +46423,8 @@ interface <dfn interface>HTMLLabelElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dd>If the <code data-x="attr-input-type">type</code> attribute is <em>not</em> in the <span data-x="attr-input-type-hidden">Hidden</span> state: <span>Interactive content</span>.</dd>
-   <dd>If the <code data-x="attr-input-type">type</code> attribute is <em>not</em> in the <span data-x="attr-input-type-hidden">Hidden</span> state: <span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-submit">submittable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize">autocapitalize-inheriting</span> <span>form-associated element</span>.</dd>
-   <dd>If the <code data-x="attr-input-type">type</code> attribute is in the <span data-x="attr-input-type-hidden">Hidden</span> state: <span data-x="category-listed">Listed</span>, <span data-x="category-submit">submittable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize">autocapitalize-inheriting</span> <span>form-associated element</span>.</dd>
+   <dd>If the <code data-x="attr-input-type">type</code> attribute is <em>not</em> in the <span data-x="attr-input-type-hidden">Hidden</span> state: <span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-submit">submittable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting</span> <span>form-associated element</span>.</dd>
+   <dd>If the <code data-x="attr-input-type">type</code> attribute is in the <span data-x="attr-input-type-hidden">Hidden</span> state: <span data-x="category-listed">Listed</span>, <span data-x="category-submit">submittable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting</span> <span>form-associated element</span>.</dd>
    <dd>If the <code data-x="attr-input-type">type</code> attribute is <em>not</em> in the <span data-x="attr-input-type-hidden">Hidden</span> state: <span>Palpable content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
@@ -52995,7 +53000,7 @@ You cannot submit this form when the field is incorrect.</samp></pre>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dd><span>Interactive content</span>.</dd>
-   <dd><span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-submit">submittable</span>, and <span data-x="category-autocapitalize">autocapitalize-inheriting</span> <span>form-associated element</span>.</dd>
+   <dd><span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-submit">submittable</span>, and <span data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting</span> <span>form-associated element</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
@@ -53210,7 +53215,7 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dd><span>Interactive content</span>.</dd>
-   <dd><span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-submit">submittable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize">autocapitalize-inheriting</span> <span>form-associated element</span>.</dd>
+   <dd><span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-submit">submittable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting</span> <span>form-associated element</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
@@ -54308,7 +54313,7 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
    <dd><span>Interactive content</span>.</dd>
-   <dd><span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-submit">submittable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize">autocapitalize-inheriting</span> <span>form-associated element</span>.</dd>
+   <dd><span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-submit">submittable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting</span> <span>form-associated element</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
@@ -54821,7 +54826,7 @@ Daddy">&lt;/textarea></code></pre>
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
-   <dd><span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize">autocapitalize-inheriting</span> <span>form-associated element</span>.</dd>
+   <dd><span data-x="category-listed">Listed</span>, <span data-x="category-label">labelable</span>, <span data-x="category-reset">resettable</span>, and <span data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting</span> <span>form-associated element</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
@@ -55578,7 +55583,7 @@ out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></code></pre>
   <dl class="element">
    <dt><span data-x="concept-element-categories">Categories</span>:</dt>
    <dd><span>Flow content</span>.</dd>
-   <dd><span data-x="category-listed">Listed</span> and <span data-x="category-autocapitalize">autocapitalize-inheriting</span> <span>form-associated element</span>.</dd>
+   <dd><span data-x="category-listed">Listed</span> and <span data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting</span> <span>form-associated element</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
    <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
@@ -81543,8 +81548,9 @@ body { display:none }
   data-x="editing host">editing host</span> to control autocapitalization behavior for the hosted
   editable region, on an <code>input</code> or <code>textarea</code> element to control the behavior
   for inputting text into that element, or on a <code>form</code> element to control the default
-  behavior for all <span data-x="category-autocapitalize">autocapitalize-inheriting elements</span>
-  associated with the <code>form</code> element.
+  behavior for all <span
+  data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting
+  elements</span> associated with the <code>form</code> element.
 
   <p>The <code data-x="attr-autocapitalize">autocapitalize</code> attribute never causes
   autocapitalization to be enabled for <code>input</code> elements whose <code
@@ -81653,9 +81659,9 @@ body { display:none }
    attribute.</p></li>
 
    <li><p>If <var>element</var> is an <span
-   data-x="category-autocapitalize">autocapitalize-inheriting element</span> and has a non-null
-   <span>form owner</span>, return the <span>own autocapitalization hint</span> of
-   <var>element</var>'s <span>form owner</span>.</p></li>
+   data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting
+   element</span> and has a non-null <span>form owner</span>, return the <span>own
+   autocapitalization hint</span> of <var>element</var>'s <span>form owner</span>.</p></li>
 
    <li><p>Return <span data-x="autocap-hint-default">default</span>.</p></li>
   </ol>
@@ -81717,6 +81723,122 @@ body { display:none }
   </div>
 
 
+  <h4>Autocorrection</h4>
+
+  <p>Some methods of entering text assist users by automatically correcting misspelled words while
+  typing, a process also known as autocorrection. User agents can support autocorrection of editable
+  text, either in form controls (such as the value of <code>textarea</code> elements), or in
+  elements in an <span>editing host</span> (e.g., using <code
+  data-x="attr-contenteditable">contenteditable</code>). Autocorrection may be accompanied by user
+  interfaces indicating that text is about to be autocorrected or has been autocorrected, and is
+  commonly performed when inserting punctuation characters, spaces, or new paragraphs after
+  misspelled words. The <code data-x="attr-autocorrect">autocorrect</code> attribute allows authors
+  to control such behavior.</p>
+
+  <p>The <code data-x="attr-autocorrect">autocorrect</code> attribute can be used on an editing host
+  to control autocorrection behavior for the hosted editable region, on an <code>input</code> or
+  <code>textarea</code> element to control the behavior when inserting text into that element, or on
+  a <code>form</code> element to control the default behavior for all <span
+  data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting
+  elements</span> associated with the <code>form</code> element.</p>
+
+  <p>The <code data-x="attr-autocorrect">autocorrect</code> attribute never causes autocorrection to
+  be enabled for <code>input</code> elements whose <code data-x="attr-input-type">type</code>
+  attribute is in one of the <span data-x="attr-input-type-url">URL</span>, <span
+  data-x="attr-input-type-email">E-mail</span>, or <span
+  data-x="attr-input-type-password">Password</span> states.<span w-nodev> (This behavior is included
+  in the <span>used autocorrection state</span> algorithm below.)</span></p>
+
+  <p>The <dfn element-attr for="html-global"><code
+  data-x="attr-autocorrect">autocorrect</code></dfn> attribute is an enumerated attribute with the
+  following keywords and states:</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>Keyword
+     <th>State
+     <th>Brief description
+   <tbody>
+    <tr>
+     <td><dfn attr-value for="html-global/autocorrect"><code
+     data-x="attr-autocorrect-on">on</code></dfn>
+     <td rowspan="2"><dfn data-x="concept-autocorrection-on">on</dfn>
+     <td rowspan="2">The user agent is permitted to automatically correct spelling errors while the user types.
+     Whether spelling is automatically corrected while typing left is for the user agent to decide,
+     and may depend on the element as well as the user's preferences.
+    <tr>
+     <td>(the empty string)
+    <tr>
+     <td><dfn attr-value for="html-global/autocorrect"><code data-x="attr-autocorrect-off">off</code></dfn>
+     <td><dfn data-x="concept-autocorrection-off">off</dfn>
+     <td>The user agent is not allowed to automatically correct spelling while the user types.
+  </table>
+
+  <p>The attribute's <i data-x="invalid value default">invalid value default</i> and <i
+  data-x="missing value default">missing value default</i> are both the <span
+  data-x="concept-autocorrection-on">on</span> state.</p>
+
+  <p>The <dfn attribute for="HTMLElement"><code data-x="dom-autocorrect">autocorrect</code></dfn>
+  getter steps are: return true if the element's <span>used autocorrection state</span> is <span
+  data-x="concept-autocorrection-on">on</span> and false if the element's <span>used autocorrection
+  state</span> is <span data-x="concept-autocorrection-on">off</span>. The setter steps are: if the
+  given value is true, then the element's <code data-x="attr-autocorrect">autocorrect</code>
+  attribute must be set to "<code data-x="">on</code>"; otherwise it must be set to "<code
+  data-x="">off</code>".</p>
+
+  <p>To compute the <dfn>used autocorrection state</dfn> of an element <var>element</var>, run these
+  steps:</p>
+
+  <ol>
+   <li><p>If <var>element</var> is an <code>input</code> element whose <code
+   data-x="attr-input-type">type</code> attribute is in one of the <span
+   data-x="attr-input-type-url">URL</span>, <span data-x="attr-input-type-email">E-mail</span>, or
+   <span data-x="attr-input-type-password">Password</span> states, then return <span
+   data-x="concept-autocorrection-on">off</span>.</p></li>
+
+   <li><p>If the <code data-x="attr-autocorrect">autocorrect</code> content attribute is present on
+   <var>element</var>, then return the state of the attribute.</p></li>
+
+   <li><p>If <var>element</var> is an <span
+   data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting
+   element</span> and has a non-null <span>form owner</span>, then return the state of
+   <var>element</var>'s <span>form owner</span>'s <code data-x="attr-autocorrect">autocorrect</code>
+   attribute.</p></li>
+
+   <li><p>Return <span data-x="concept-autocorrection-on">on</span>.</p></li>
+  </ol>
+
+  <dl class="domintro">
+   <dt><var>element</var> . <code subdfn data-x="dom-autocorrect">autocorrect</code></dt>
+   <dd><p>Returns the autocorrection behavior of the element. Note that for <span
+   data-x="category-autocapitalize-and-autocorrect">autocapitalize-and-autocorrect inheriting
+   elements</span> that inherit their state from a <code>form</code> element, this will return the
+   autocorrection behavior of the <code>form</code> element, but for an element in an editable
+   region, this will not return the autocorrection behavior of the <span>editing host</span> (unless
+   this element is, in fact, the <span>editing host</span>).</p></dd>
+
+   <dt><var>element</var> . <code data-x="dom-autocorrect">autocorrect</code> =
+   <var>value</var></dt>
+   <dd><p>Updates the <code data-x="attr-autocorrect">autocorrect</code> content attribute (and
+   thereby changes the autocorrection behavior of the element).</p></dd>
+  </dl>
+
+  <div class="example">
+   <p>The <code>input</code> element in the following example would not allow autocorrection, since
+   it does not have an <code data-x="attr-autocorrect">autocorrect</code> content attribute and
+   therefore inherits from the <code>form</code> element, which has an attribute of "<code
+   data-x="attr-autocorrect-off">off</code>". However, the <code>textarea</code> element would allow
+   autocorrection, since it has an <code data-x="attr-autocorrect">autocorrect</code> content
+   attribute with a value of "<code data-x="attr-autocorrect-on">on</code>".</p>
+
+   <pre><code class="html" data-x="">&lt;form autocorrect="off"&gt;
+ &lt;input type="search"&gt;
+ &lt;textarea autocorrect="on"&gt;&lt;/textarea&gt;
+&lt;/form&gt;</code></pre>
+  </div>
+
+
   <h4>Input modalities: the <code data-x="attr-inputmode">inputmode</code> attribute</h4>
 
   <p>User agents can support the <code data-x="attr-inputmode">inputmode</code> attribute on form
@@ -140394,7 +140516,8 @@ interface <dfn interface>External</dfn> {
       &mdash;
 
     <tr>
-     <td> <span data-x="category-autocapitalize">Autocapitalize-inheriting elements</span>
+     <td> <span data-x="category-autocapitalize-and-autocorrect">Autocapitalize-and-autocorrect
+     inheriting elements</span>
      <td>
       <code>button</code>;
       <code>fieldset</code>;
@@ -140599,6 +140722,12 @@ interface <dfn interface>External</dfn> {
           <code data-x="attr-fe-autocomplete">textarea</code>
      <td> Hint for form autofill feature
      <td> <span data-x="autofill field">Autofill field</span> name and related tokens*
+    <tr>
+     <th> <code data-x="">autocorrect</code>
+     <td> <span data-x="attr-autocorrect">HTML elements</span>
+     <td> Recommended autocorrection behavior (for supported input methods)
+     <td> "<code data-x="attr-autocorrect-on">on</code>";
+          "<code data-x="attr-autocorrect-off">off</code>"
     <tr>
      <th> <code data-x="">autofocus</code>
      <td> <span data-x="attr-fe-autofocus">HTML elements</span>
@@ -144786,6 +144915,7 @@ INSERT INTERFACES HERE
   Wayne Carr,
   Wayne Pollock,
   Wellington Fernando de Macedo,
+  Wenson Hsieh,
   Weston Ruter,
   Wilhelm Joys Andersen,
   Will Levine,