Use the new definition of the insertion steps

whatwg/dom#732

We defer preparing scripts and updating style blocks during insertion to
make sure all DOM mutations are finished before executing scripts.

This is what Chrome and Firefox seem to already do anyway.

Author: nox

source

@@ -2072,24 +2072,24 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
   <p>A <dfn data-x="nodes are inserted">node <var>A</var> is inserted</dfn> into a node <var>B</var>
   when the <span data-x="concept-node-insert-ext">insertion steps</span> are invoked with
-  <var>A</var> as the argument and <var>A</var>'s new parent is <var>B</var>. Similarly, a <dfn
-  data-x="nodes are removed">node <var>A</var> is removed</dfn> from a node <var>B</var> when the
-  <span data-x="concept-node-remove-ext">removing steps</span> are invoked with <var>A</var> as the
-  <var>removedNode</var> argument and <var>B</var> as the <var>oldParent</var> argument.</p>
+  <var>A</var> as the first argument and <var>A</var>'s new parent is <var>B</var>. Similarly, a
+  <dfn data-x="nodes are removed">node <var>A</var> is removed</dfn> from a node <var>B</var> when
+  the <span data-x="concept-node-remove-ext">removing steps</span> are invoked with <var>A</var> as
+  the <var>removedNode</var> argument and <var>B</var> as the <var>oldParent</var> argument.</p>
 
   <p>A <dfn id="insert-an-element-into-a-document" data-x="node is inserted into a document"
   data-lt="inserted into a document|node is inserted into a document" data-export="">node is
   inserted into a document</dfn> when the <span data-x="concept-node-insert-ext">insertion
-  steps</span> are invoked with it as the argument and it is now <span>in a document tree</span>.
-  Analogously, a <dfn id="remove-an-element-from-a-document" data-x="node is removed from a
-  document" data-lt="removed from a document|node is removed from a document" data-export="">node is
-  removed from a document</dfn> when the <span data-x="concept-node-remove-ext">removing
-  steps</span> are invoked with it as the argument and it is now no longer <span>in a document
-  tree</span>.</p>
+  steps</span> are invoked with it as the first argument and it is now <span>in a document
+  tree</span>. Analogously, a <dfn id="remove-an-element-from-a-document" data-x="node is removed
+  from a document" data-lt="removed from a document|node is removed from a document"
+  data-export="">node is removed from a document</dfn> when the <span
+  data-x="concept-node-remove-ext">removing steps</span> are invoked with it as the argument and it
+  is now no longer <span>in a document tree</span>.</p>
 
   <p>A node <dfn data-export="">becomes connected</dfn> when the <span
-  data-x="concept-node-insert-ext">insertion steps</span> are invoked with it as the argument and it
-  is now <span>connected</span>. Analogously, a node <dfn data-lt="become disconnected"
+  data-x="concept-node-insert-ext">insertion steps</span> are invoked with it as the first argument
+  and it is now <span>connected</span>. Analogously, a node <dfn data-lt="become disconnected"
   data-export="">becomes disconnected</dfn> when the <span data-x="concept-node-remove-ext">removing
   steps</span> are invoked with it as the argument and it is now no longer
   <span>connected</span>.</p>
@@ -2098,12 +2098,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
   <span>connected</span> and its <span data-x="shadow-including root">shadow-including root</span>
   has a <span data-x="concept-document-bc">browsing context</span>. A node <dfn data-lt="become
   browsing-context connected" data-export="">becomes browsing-context connected</dfn> when the <span
-  data-x="concept-node-insert-ext">insertion steps</span> are invoked with it as the argument and it
-  is now <span>browsing-context connected</span>. A node <dfn data-lt="become browsing-context
-  disconnected" data-export="">becomes browsing-context disconnected</dfn> either when the <span
-  data-x="concept-node-remove-ext">removing steps</span> are invoked with it as the argument and it
-  is now no longer <span>browsing-context connected</span>, or when its <span>shadow-including
-  root</span> no longer has a <span data-x="concept-document-bc">browsing context</span>.
+  data-x="concept-node-insert-ext">insertion steps</span> are invoked with it as the first argument
+  and it is now <span>browsing-context connected</span>. A node <dfn data-lt="become
+  browsing-context disconnected" data-export="">becomes browsing-context disconnected</dfn> either
+  when the <span data-x="concept-node-remove-ext">removing steps</span> are invoked with it as the
+  argument and it is now no longer <span>browsing-context connected</span>, or when its
+  <span>shadow-including root</span> no longer has a <span data-x="concept-document-bc">browsing
+  context</span>.
 
 
   <h4>Scripting</h4>
@@ -3194,7 +3195,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-pre-insert">pre-insert</dfn>, <dfn data-x="concept-node-insert" data-x-href="https://dom.spec.whatwg.org/#concept-node-insert">insert</dfn>, <dfn data-x="concept-node-append" data-x-href="https://dom.spec.whatwg.org/#concept-node-append">append</dfn>, <dfn data-x="concept-node-replace" data-x-href="https://dom.spec.whatwg.org/#concept-node-replace">replace</dfn>, <dfn data-x="concept-node-replace-all" data-x-href="https://dom.spec.whatwg.org/#concept-node-replace-all">replace all</dfn>, <dfn data-x="concept-node-remove" data-x-href="https://dom.spec.whatwg.org/#concept-node-remove">remove</dfn>, and <dfn data-x="concept-node-adopt" data-x-href="https://dom.spec.whatwg.org/#concept-node-adopt">adopt</dfn> algorithms for nodes</li>
      <li>The <dfn data-x="concept-node-insert-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-insert-ext">insertion steps</dfn>,
              <dfn data-x="concept-node-remove-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-remove-ext">removing steps</dfn>,
-             <dfn data-x="concept-node-adopt-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-adopt-ext">adopting steps</dfn>, and
+             <dfn data-x="concept-node-adopt-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-adopt-ext">adopting steps</dfn>,
+             <dfn data-x="concept-node-children-added" data-x-href="https://dom.spec.whatwg.org/#concept-node-children-added-ext">children added steps</dfn>, and
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-text-change-ext">child text content change steps</dfn> hooks for elements</li>
      <li>The <dfn data-x="concept-element-attributes-change" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-change">change</dfn>, <dfn data-x="concept-element-attributes-append" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-append">append</dfn>, <dfn data-x="concept-element-attributes-remove" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-remove">remove</dfn>, <dfn data-x="concept-element-attributes-replace" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-replace">replace</dfn>, and <dfn data-x="concept-element-attributes-set-value" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-set-value">set value</dfn> algorithms for attributes</li>
      <li>The <dfn data-x="concept-element-attributes-change-ext" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-change-ext">attribute change steps</dfn> hook for attributes</li>
@@ -15043,8 +15045,21 @@ interface <dfn>HTMLStyleElement</dfn> : <span>HTMLElement</span> {
 
   <div w-nodev>
 
-  <p>The user agent must run the <span>update a <code>style</code> block</span> algorithm whenever
-  one of the following conditions occur:</p>
+  <p>To run the <span data-x="concept-node-insert-ext">insertion steps</span> for a
+  <code>style</code> element with <var>style</var> and <var>deferredStepsQueue</var>, the user
+  agent must act as follows:</p>
+
+  <ol>
+   <li><p>If <var>style</var> is on the <span>stack of open elements</span>, then return.<p></li>
+
+   <li><p>If <var>style</var> is not <span>connected</span>, then return.</p></li>
+
+   <li><p><span>Enqueue</span> the steps to <span data-x="update a style block">update</span>
+   <var>style</var> to <var>deferredStepsQueue</var>.</p></li>
+  </ol>
+
+  <p>Additionally, the user agent must run the <span>update a <code>style</code> block</span>
+  algorithm whenever one of the following conditions occur:</p>
   <!-- note that a browsing context isn't needed:
        https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2739 -->
 
@@ -15053,8 +15068,7 @@ interface <dfn>HTMLStyleElement</dfn> : <span>HTMLElement</span> {
    parser</span> or <span>XML parser</span>.</p></li>
 
    <li><p>The element is not on the <span>stack of open elements</span> of an <span>HTML
-   parser</span> or <span>XML parser</span>, and it <span>becomes connected</span> or <span
-   data-x="becomes disconnected">disconnected</span>.</p></li>
+   parser</span> or <span>XML parser</span>, and it <span>becomes disconnected</span>.</p></li>
 
    <li><p>The element's <span>child text content change steps</span> run.</p></li>
   </ul>
@@ -58110,24 +58124,30 @@ o............A....e
 
   <hr>
 
-  <p>When a <code>script</code> element that is not marked as being <span>"parser-inserted"</span>
-  experiences one of the events listed in the following list, the user agent must
-  <span>immediately</span> <span data-x="prepare a script">prepare</span> the <code>script</code>
-  element:</p>
+  <p>To run the <span data-x="concept-node-insert-ext">insertion steps</span> for a
+  <code>script</code> element with <var>script</var> and <var>deferredStepsQueue</var>, the user
+  agent must act as follows:</p>
 
-  <ul>
+  <ol>
+   <li><p>If <var>script</var> is marked as being <span>"parser-inserted"</span>, then
+   return.<p></li>
 
-   <li>The <code>script</code> element <span>becomes connected</span>.</li>
+   <li><p>If <var>script</var> is not <span>connected</span>, then return.</p></li>
 
-   <li>The <code>script</code> element is <span>connected</span> and a node or document fragment is
-   <span data-x="nodes are inserted">inserted</span> into the <code>script</code> element, after any
-   <code>script</code> elements <span data-x="nodes are inserted">inserted</span> at that time.</li>
+   <li><p><span>Enqueue</span> the steps to <span data-x="prepare a script">prepare</span>
+   <var>script</var> to <var>deferredStepsQueue</var>.</p></li>
+  </ol>
 
-   <li>The <code>script</code> element is <span>connected</span> and has a <code
-   data-x="attr-script-src">src</code> attribute set where previously the element had no such
-   attribute.</li>
+  <p>To run the <span data-x="concept-node-children-added">children added steps</span> for a
+  <code>script</code> element with <var>script</var> and <var>deferredStepsQueue</var>, the user
+  agent must run the <span data-x="concept-node-insert-ext">insertion steps</span> with
+  <var>script</var> and <var>deferredStepsQueue</var>.</p>
 
-  </ul>
+  <p>Additionally, when a <code>script</code> element that is not marked as being
+  <span>"parser-inserted"</span> is <span>connected</span> and has a <code
+  data-x="attr-script-src">src</code> attribute set where previously the element had no such
+  attribute, the user agent must <span>immediately</span> <span
+  data-x="prepare a script">prepare</span> the <code>script</code> element.</p>
 
   <p>To <dfn data-x="prepare a script" data-export="">prepare a script</dfn>, the user agent must
   act as follows:</p>