Make forms work in shadow trees

This commit changes the behavior of a number of form features to ensure they still work correctly inside shadow trees. Fixes #283, closes #1160 (we decided that events are scoped by default to the tree they are dispatched in and only "global" user interaction events cross the boundary), and closes #762 (per the previous listed closure).
whatwg · May 11, 2016 · 927fda0 · 927fda0
1 parent 4e2b006
commit 927fda0
Showing 1 changed file with 55 additions and 69 deletions.
diff --git a/source b/source
@@ -14210,7 +14210,6 @@ c-end         = "-->"</pre>
   the <code>style</code> element. Non-network errors in processing the style sheet or its
   subresources (e.g. CSS parse errors, PNG decoding errors) are not failures for the purposes of
   this paragraph.</p>
-  <!-- Shadow TODO: events need to be scoped -->
 
   <p>The <span>task source</span> for these <span data-x="concept-task">tasks</span> is the <span>DOM
   manipulation task source</span>.</p>
@@ -42172,7 +42171,7 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {
     <p>Once an element has been referenced using a particular name, that name will continue being
     available as a way to reference that element in this method, even if the element's actual <span
     data-x="concept-id">ID</span> or <code data-x="attr-fe-name">name</code> changes, for as long as
-    the element remains in the <code>Document</code>.</p>
+    the element remains in the <span>tree</span>.</p>
 
     <p>If there are multiple matching items, then a <code>RadioNodeList</code> object containing all
     those elements is returned.</p>
@@ -42515,12 +42514,12 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {
   <p>The <dfn><code data-x="attr-label-for">for</code></dfn> attribute may be specified to indicate a
   form control with which the caption is to be associated. If the attribute is specified, the
   attribute's value must be the <span data-x="concept-id">ID</span> of a <span
-  data-x="category-label">labelable element</span> in the same <code>Document</code> as the
+  data-x="category-label">labelable element</span> in the same <span>tree</span> as the
   <code>label</code> element. <span w-nodev>If the attribute is specified and there is an
-  element in the <code>Document</code> whose <span data-x="concept-id">ID</span> is equal to the
-  value of the <code data-x="attr-label-for">for</code> attribute, and the first such element is a
-  <span data-x="category-label">labelable element</span>, then that element is the <code>label</code>
-  element's <span>labeled control</span>.</span></p>
+  element in the <span>tree</span> whose <span data-x="concept-id">ID</span> is equal to the value
+  of the <code data-x="attr-label-for">for</code> attribute, and the first such element in
+  <span>tree order</span> is a <span data-x="category-label">labelable element</span>, then that
+  element is the <code>label</code> element's <span>labeled control</span>.</span></p>
 
   <div w-nodev>
 
@@ -46764,8 +46763,8 @@ ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
 
   </ul>
 
-  <p>A document must not contain an <code>input</code> element whose <i data-x="radio button group">radio button group</i>
-  contains only that element.</p>
+  <p>A <span>tree</span> must not contain an <code>input</code> element whose <i data-x="radio
+  button group">radio button group</i> contains only that element.</p>
 
   <div w-nodev>
 
@@ -46821,9 +46820,9 @@ ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
 
   </div>
 
-  <p class="note">If none of the radio buttons in a <span>radio button group</span> are checked when
-  they are inserted into the document, then they will all be initially unchecked in the interface,
-  until such time as one of them is checked (either by the user or by script).</p>
+  <p class="note">If none of the radio buttons in a <span>radio button group</span> are checked,
+  then they will all be initially unchecked in the interface, until such time as one of them is
+  checked (either by the user or by script).</p>
 
   <div class="bookkeeping">
 
@@ -47320,10 +47319,9 @@ ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
    <li><p>Let <var>request</var> be a new <span data-x="concept-request">request</span> whose
    <span data-x="concept-request-url">url</span> is the <span>resulting URL record</span>,
    <span data-x="concept-request-client">client</span> is the element's <span>node document</span>'s
-   <code>Window</code> object's <span>environment settings object</span>, <span
-   data-x="concept-request-type">type</span> is "<code data-x="">image</code>", <span
-   data-x="concept-request-destination">destination</span> is "<code data-x="">subresource</code>",
-   <span>omit-<code>Origin</code>-header flag</span> is set, <span
+   <span>relevant settings object</span>, <span data-x="concept-request-type">type</span> is "<code
+   data-x="">image</code>", <span data-x="concept-request-destination">destination</span> is "<code
+   data-x="">subresource</code>", <span>omit-<code>Origin</code>-header flag</span> is set, <span
    data-x="concept-request-credentials-mode">credentials mode</span> is "<code
    data-x="">include</code>", and whose <span>use-URL-credentials flag</span> is set.</p></li>
 
@@ -48430,17 +48428,17 @@ You cannot submit this form when the field is incorrect.</samp></pre>
   element that lists predefined options suggested to the user.</p>
 
   <p>If present, its value must be the <span data-x="concept-id">ID</span> of a <code>datalist</code>
-  element in the same document.</p>
+  element in the same <span>tree</span>.</p>
 
   <div w-nodev>
 
   <p>The <dfn data-x="concept-input-list">suggestions source element</dfn> is the first element in
-  the document in <span>tree order</span> to have an <span data-x="concept-id">ID</span> equal to the
-  value of the <code data-x="attr-input-list">list</code> attribute, if that element is a
-  <code>datalist</code> element. If there is no <code data-x="attr-input-list">list</code> attribute,
-  or if there is no element with that <span data-x="concept-id">ID</span>, or if the first element
-  with that <span data-x="concept-id">ID</span> is not a <code>datalist</code> element, then there is
-  no <span data-x="concept-input-list">suggestions source element</span>.</p>
+  the <span>tree</span> in <span>tree order</span> to have an <span data-x="concept-id">ID</span>
+  equal to the value of the <code data-x="attr-input-list">list</code> attribute, if that element is
+  a <code>datalist</code> element. If there is no <code data-x="attr-input-list">list</code>
+  attribute, or if there is no element with that <span data-x="concept-id">ID</span>, or if the
+  first element with that <span data-x="concept-id">ID</span> is not a <code>datalist</code>
+  element, then there is no <span data-x="concept-input-list">suggestions source element</span>.</p>
 
   <p>If there is a <span data-x="concept-input-list">suggestions source element</span>, then, when
   the user agent is allowing the user to edit the <code>input</code> element's <span
@@ -51289,7 +51287,7 @@ Daddy">&lt;/textarea></pre>
   data-x="attr-output-for">for</code> attribute, if specified, must contain a string consisting of
   an <span>unordered set of unique space-separated tokens</span> that are
   <span>case-sensitive</span>, each of which must have the value of an <span
-  data-x="concept-id">ID</span> of an element in the same <code>Document</code>.</p>
+  data-x="concept-id">ID</span> of an element in the same <span>tree</span>.</p>
 
   <p>The <code data-x="attr-fae-form">form</code> attribute is used to explicitly associate the
   <code>output</code> element with its <span>form owner</span>. The <code
@@ -52267,17 +52265,17 @@ out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></pre>
 
   <p>If a <span data-x="category-listed">listed</span> <span>form-associated element</span> has a
   <code data-x="attr-fae-form">form</code> attribute specified, then that attribute's value must be
-  the <span data-x="concept-id">ID</span> of a <code>form</code> element in the element's owner
-  <code>Document</code>.</p>
+  the <span data-x="concept-id">ID</span> of a <code>form</code> element in the element's
+  <span>tree</span>.</p>
 
   <div w-nodev>
 
   <p class="note">The rules in this section are complicated by the fact that although conforming
-  documents will never contain nested <code>form</code> elements, it is quite possible (e.g. using a
-  script that performs DOM manipulation) to generate documents that have such nested elements. They
-  are also complicated by rules in the HTML parser that, for historical reasons, can result in a
-  <span>form-associated element</span> being associated with a <code>form</code> element that is not
-  its ancestor.</p>
+  documents or <span data-x="tree">trees</span> will never contain nested <code>form</code>
+  elements, it is quite possible (e.g., using a script that performs DOM manipulation) to generate
+  <span data-x="tree">trees</span> that have such nested elements. They are also complicated by
+  rules in the HTML parser that, for historical reasons, can result in a <span>form-associated
+  element</span> being associated with a <code>form</code> element that is not its ancestor.</p>
 
   <p>When a <span>form-associated element</span> is created, its <span>form owner</span> must be
   initialised to null (no owner).</p>
@@ -52287,10 +52285,9 @@ out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></pre>
   be set to that form.</p>
 
   <p>When a <span>form-associated element</span> or one of its ancestors is <span data-x="node is
-  inserted into a document">inserted into a <code>Document</code></span>, then the user agent must
-  <span>reset the form owner</span> of that <span>form-associated element</span>. <span
-  class="note">The <span>HTML parser</span> overrides this requirement when inserting form
-  controls.</span></p>
+  connected">connected</span>, then the user agent must <span>reset the form owner</span> of that
+  <span>form-associated element</span>. <span class="note">The <span>HTML parser</span> overrides
+  this requirement when inserting form controls.</span></p>
 
   <p>When an element changes its parent node resulting in a <span>form-associated element</span> and
   its <span>form owner</span> (if any) no longer being in the same <span>tree</span>, then the user
@@ -52302,7 +52299,7 @@ out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></pre>
 
   <p>When a <span data-x="category-listed">listed</span> <span>form-associated element</span> has a
   <code data-x="attr-fae-form">form</code> attribute and the <span data-x="concept-id">ID</span> of
-  any of the elements in the <code>Document</code> changes, then the user agent must <span>reset the
+  any of the elements in the <span>tree</span> changes, then the user agent must <span>reset the
   form owner</span> of that <span>form-associated element</span>.</p>
 
   <p>When a <span data-x="category-listed">listed</span> <span>form-associated element</span> has a
@@ -52313,56 +52310,46 @@ out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></pre>
   <span>form-associated element</span>.</p>
 
   <p>When the user agent is to <dfn>reset the form owner</dfn> of a <span>form-associated
-  element</span>, it must run the following steps:</p>
+  element</span> <var>element</var>, it must run the following steps:</p>
 
   <ol>
 
    <li>
     <p>If all of the following conditions are true
 
     <ul class="brief">
-     <li>the element's <span>form owner</span> is not null
-     <li>the element is not <span data-x="category-listed">listed</span> or its
-     <code data-x="attr-fae-form">form</code> content attribute is not present
-     <li>the element's <span>form owner</span> is its nearest <code>form</code> element ancestor
-     after the change to the ancestor chain
+     <li><var>element</var>'s <span>form owner</span> is not null
+     <li><var>element</var> is not <span data-x="category-listed">listed</span> or its <code
+     data-x="attr-fae-form">form</code> content attribute is not present
+     <li><var>element</var>'s <span>form owner</span> is its nearest <code>form</code> element
+     ancestor after the change to the ancestor chain
     </ul>
 
     <p>then do nothing, and abort these steps.</p>
    </li>
 
-   <li><p>Let the element's <span>form owner</span> be null.</p></li>
+   <li><p>Set <var>element</var>'s <span>form owner</span> to null.</p></li>
 
    <li>
-
-    <p>If the element is <span data-x="category-listed">listed</span>, has a <code
-    data-x="attr-fae-form">form</code> content attribute, and is itself <span data-x="in a
-    Document">in a <code>Document</code></span>, then run these substeps:</p>
+    <p>If <var>element</var> is <span data-x="category-listed">listed</span>, has a <code
+    data-x="attr-fae-form">form</code> content attribute, and is itself <span>in a shadow-including
+    document</span>, then run this substep:</p>
 
     <ol>
-
+     <li><p>If the first element in <var>element</var>'s <span>tree</span>, in <span>tree
+     order</span>, to have an <span data-x="concept-id">ID</span> that is <span
+     data-x="case-sensitive">case-sensitively</span> equal to <var>element</var>'s <code
+     data-x="attr-fae-form">form</code> content attribute's value, is a <code>form</code> element,
+     then <span data-x="concept-form-association">associate</span> the <var>element</var> with that
+     <code>form</code> element.</p></li>
      <!-- note that this ignores the name="" attribute and is unaffected by quirks mode (it's always
-     case sensitive) -->
-     <li><p>If the first element <span data-x="in a Document">in the <code>Document</code></span> to
-     have an <span data-x="concept-id">ID</span> that is <span
-     data-x="case-sensitive">case-sensitively</span> equal to the element's <code
-     data-x="attr-fae-form">form</code> content attribute's value is a <code>form</code> element,
-     then <span data-x="concept-form-association">associate</span> the <span>form-associated
-     element</span> with that <code>form</code> element.</p></li>
-
-     <li><p>Abort the "reset the form owner" steps.</p></li>
-
+          case sensitive) -->
     </ol>
-
    </li>
 
-   <li><p>Otherwise, if the <span>form-associated element</span> in question has an ancestor
-   <code>form</code> element, then <span data-x="concept-form-association">associate</span> the
-   <span>form-associated element</span> with the nearest such ancestor <code>form</code>
-   element.</p></li>
-
-   <li><p>Otherwise, the element is left unassociated.</p></li>
-
+   <li><p>Otherwise, if <var>element</var> has an ancestor <code>form</code> element, then <span
+   data-x="concept-form-association">associate</span> <var>element</var> with the nearest such
+   ancestor <code>form</code> element.</p></li>
   </ol>
 
   <div class="example">
@@ -54377,8 +54364,8 @@ MIT Room 32-G524
     <p>When the <span>autofill field name</span> is "<code
     data-x="attr-fe-autocomplete-on">on</code>", the user agent should attempt to use heuristics to
     determine the most appropriate values to offer the user, e.g. based on the element's <code
-    data-x="attr-fe-name">name</code> value, the position of the element in the document's DOM, what
-    other fields exist in the form, and so forth.</p>
+    data-x="attr-fe-name">name</code> value, the position of the element in its <span>tree</span>,
+    what other fields exist in the form, and so forth.</p>
 
     <p>When the <span>autofill field name</span> is one of the names of the <span data-x="autofill
     field">autofill fields</span> described above, the user agent should provide suggestions that
@@ -59599,7 +59586,6 @@ o............A....e
 
     <p>Otherwise <span>queue a task</span> to <span>fire a simple event</span> named <code
     data-x="event-load">load</code> at the <code>script</code> element.</p>
-    <!-- Shadow TODO: this event needs to be scoped -->
 
    </li>