[giow] (1) Tweak the algorithm for <img> loading to avoid multiple ne…

…twork requests when src='' is set multiple times in a row.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=14531

git-svn-id: http://svn.whatwg.org/webapps@6780 340c8d12-0b0e-0410-8428-c7bf67bfef74

complete.html

@@ -22429,24 +22429,48 @@ <h4 id=the-img-element><span class=secno>4.8.1 </span>The <dfn><code>img</code><
    <li><p>If the user agent cannot support images, or its support for
    images has been disabled, then abort these steps.</li>
 
-   <li><p>If the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
-   attribute's value is the empty string, then set the element to the
-   <a href=#img-error title=img-error>broken</a> state, <a href=#queue-a-task>queue a
-   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <code><a href=#the-img-element>img</a></code> element,
-   and abort these steps.</li>
+   <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing
+   the <a href=#concept-task title=concept-task>task</a> that invoked this
+   algorithm to continue. The <a href=#synchronous-section>synchronous section</a>
+   consists of all the remaining steps of this algorithm until the
+   algorithm says the <a href=#synchronous-section>synchronous section</a> has
+   ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous
+   sections</a> are marked with &#8987;.)</li>
 
    <li>
 
-    <p><a href=#resolve-a-url title="resolve a url">Resolve</a> the value
+    <p>&#8987; If another instance of this algorithm for this
+    <code><a href=#the-img-element>img</a></code> element was started after this instance, then
+    abort these steps. Only the last instance takes effect, to avoid
+    multiple requests when the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
+    attribute is set multiple times in a row, or when the <code title=attr-img-src><a href=#attr-img-src>src</a></code> and <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes are
+    both set in succession.</p>
+
+   </li>
+
+   <li>
+
+    <p>&#8987; If the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
+    attribute is missing or its value is the empty string, then set
+    the element to the <a href=#img-error title=img-error>broken</a> state,
+    <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
+    named <code title=event-error>error</code> at the
+    <code><a href=#the-img-element>img</a></code> element, and abort these steps.</p>
+
+   </li>
+
+   <li>
+
+    <p>&#8987; <a href=#resolve-a-url title="resolve a url">Resolve</a> the value
     of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute,
     relative to the element.</p>
 
     <p>If that is not successful, abort these steps.</p>
 
     <p>Otherwise, do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a> of
     the resulting <a href=#absolute-url>absolute URL</a>, with the <i>mode</i>
-    being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content
-    attribute, the <i title="">origin</i> being the <a href=#origin>origin</a> of the
+    being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
+    the <i title="">origin</i> being the <a href=#origin>origin</a> of the
     <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
     <i>default origin behaviour</i> set to <i>taint</i>.</p>
 

index

@@ -22429,24 +22429,48 @@ interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement
    <li><p>If the user agent cannot support images, or its support for
    images has been disabled, then abort these steps.</li>
 
-   <li><p>If the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
-   attribute's value is the empty string, then set the element to the
-   <a href=#img-error title=img-error>broken</a> state, <a href=#queue-a-task>queue a
-   task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error>error</code> at the <code><a href=#the-img-element>img</a></code> element,
-   and abort these steps.</li>
+   <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing
+   the <a href=#concept-task title=concept-task>task</a> that invoked this
+   algorithm to continue. The <a href=#synchronous-section>synchronous section</a>
+   consists of all the remaining steps of this algorithm until the
+   algorithm says the <a href=#synchronous-section>synchronous section</a> has
+   ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous
+   sections</a> are marked with &#8987;.)</li>
 
    <li>
 
-    <p><a href=#resolve-a-url title="resolve a url">Resolve</a> the value
+    <p>&#8987; If another instance of this algorithm for this
+    <code><a href=#the-img-element>img</a></code> element was started after this instance, then
+    abort these steps. Only the last instance takes effect, to avoid
+    multiple requests when the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
+    attribute is set multiple times in a row, or when the <code title=attr-img-src><a href=#attr-img-src>src</a></code> and <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes are
+    both set in succession.</p>
+
+   </li>
+
+   <li>
+
+    <p>&#8987; If the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
+    attribute is missing or its value is the empty string, then set
+    the element to the <a href=#img-error title=img-error>broken</a> state,
+    <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
+    named <code title=event-error>error</code> at the
+    <code><a href=#the-img-element>img</a></code> element, and abort these steps.</p>
+
+   </li>
+
+   <li>
+
+    <p>&#8987; <a href=#resolve-a-url title="resolve a url">Resolve</a> the value
     of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute,
     relative to the element.</p>
 
     <p>If that is not successful, abort these steps.</p>
 
     <p>Otherwise, do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a> of
     the resulting <a href=#absolute-url>absolute URL</a>, with the <i>mode</i>
-    being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content
-    attribute, the <i title="">origin</i> being the <a href=#origin>origin</a> of the
+    being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
+    the <i title="">origin</i> being the <a href=#origin>origin</a> of the
     <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
     <i>default origin behaviour</i> set to <i>taint</i>.</p>
 

source

@@ -23976,16 +23976,41 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
    <li><p>If the user agent cannot support images, or its support for
    images has been disabled, then abort these steps.</p></li>
 
-   <li><p>If the element's <code title="attr-img-src">src</code>
-   attribute's value is the empty string, then set the element to the
-   <span title="img-error">broken</span> state, <span>queue a
-   task</span> to <span>fire a simple event</span> named <code
-   title="event-error">error</code> at the <code>img</code> element,
-   and abort these steps.</p></li>
+   <li><p>Asynchronously <span>await a stable state</span>, allowing
+   the <span title="concept-task">task</span> that invoked this
+   algorithm to continue. The <span>synchronous section</span>
+   consists of all the remaining steps of this algorithm until the
+   algorithm says the <span>synchronous section</span> has
+   ended. (Steps in <span title="synchronous section">synchronous
+   sections</span> are marked with &#x231B;.)</p></li>
 
    <li>
 
-    <p><span title="resolve a url">Resolve</span> the value
+    <p>&#x231B; If another instance of this algorithm for this
+    <code>img</code> element was started after this instance, then
+    abort these steps. Only the last instance takes effect, to avoid
+    multiple requests when the <code title="attr-img-src">src</code>
+    attribute is set multiple times in a row, or when the <code
+    title="attr-img-src">src</code> and <code
+    title="attr-img-crossorigin">crossorigin</code> attributes are
+    both set in succession.</p>
+
+   </li>
+
+   <li>
+
+    <p>&#x231B; If the element's <code title="attr-img-src">src</code>
+    attribute is missing or its value is the empty string, then set
+    the element to the <span title="img-error">broken</span> state,
+    <span>queue a task</span> to <span>fire a simple event</span>
+    named <code title="event-error">error</code> at the
+    <code>img</code> element, and abort these steps.</p>
+
+   </li>
+
+   <li>
+
+    <p>&#x231B; <span title="resolve a url">Resolve</span> the value
     of the element's <code title="attr-img-src">src</code> attribute,
     relative to the element.</p>
 
@@ -23994,8 +24019,8 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
     <p>Otherwise, do a <span>potentially CORS-enabled fetch</span> of
     the resulting <span>absolute URL</span>, with the <i>mode</i>
     being the state of the element's <code
-    title="attr-img-crossorigin">crossorigin</code> content
-    attribute, the <i title="">origin</i> being the <span>origin</span> of the
+    title="attr-img-crossorigin">crossorigin</code> content attribute,
+    the <i title="">origin</i> being the <span>origin</span> of the
     <code>img</code> element's <code>Document</code>, and the
     <i>default origin behaviour</i> set to <i>taint</i>.</p>