Skip to content

Commit

Permalink
Use the new definition of the insertion steps
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@nox
nox committed Feb 10, 2019
1 parent 775cfc2 commit 6738327
Showing 1 changed file with 50 additions and 29 deletions.
79 changes: 50 additions & 29 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2072,10 +2072,10 @@ 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
Expand All @@ -2088,8 +2088,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
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>
Expand All @@ -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>
Expand Down Expand Up @@ -3195,6 +3196,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<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-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>
Expand Down Expand Up @@ -15043,8 +15045,22 @@ 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 abort those
steps.<p></li>

<li><p>If <var>style</var> is not <span>connected</span>, then abort those steps.</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 -->

Expand All @@ -15053,8 +15069,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>
Expand Down Expand Up @@ -58110,24 +58125,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
abort those steps.<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 abort those steps.</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>
Expand Down

0 comments on commit 6738327

Please sign in to comment.