[html5] r8177 - [e] (0) Revamp how we describe <img> loading for clarity. Affected topics: HTML

whatwg at whatwg.org whatwg at whatwg.org
Wed Sep 11 17:18:07 PDT 2013


Author: ianh
Date: 2013-09-11 17:18:05 -0700 (Wed, 11 Sep 2013)
New Revision: 8177

Modified:
   complete.html
   index
   source
Log:
[e] (0) Revamp how we describe <img> loading for clarity.
Affected topics: HTML

Modified: complete.html
===================================================================
--- complete.html	2013-09-09 22:47:12 UTC (rev 8176)
+++ complete.html	2013-09-12 00:18:05 UTC (rev 8177)
@@ -256,7 +256,7 @@
 
   <header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 9 September 2013</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 12 September 2013</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -22714,104 +22714,135 @@
     described above to mitigate this attack, but unfortunately such policies are typically not
     compatible with existing Web content.</p>
 
-    <p>The first <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
-    task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+    <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>, each <a href=#concept-task title=concept-task>task</a>
+    that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task source</a>
+    while the image is being <a href=#fetch title=fetch>fetched</a> must <a href=#fire-a-progress-event>fire a progress
+    event</a> named <code title=event-progress>progress</code> at the <code><a href=#the-img-element>img</a></code>
+    element.</p>
 
-    <p id=img-load>If the resource is in a supported image format, then each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the
-    <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a>
-    must update the presentation of the image appropriately (e.g. if the image is a progressive
-    JPEG, each packet can improve the resolution of the image). In addition, if the resource is
-    <a href=#cors-same-origin>CORS-same-origin</a>, each such <a href=#concept-task title=concept-task>task</a> must <a href=#fire-a-progress-event>fire
-    a progress event</a> named <code title=event-progress>progress</code> at the
-    <code><a href=#the-img-element>img</a></code> element.</p>
+   </li>
 
-    <p>Furthermore, the last <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
-    task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> must additionally run the steps for the matching entry in the
-    following list:</p>
+   <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the remaining steps asynchronously,
+   but without missing any data from the <a href=#fetch>fetch</a> algorithm.</li>
 
-    <dl class=switch><dt>If the download was successful and the user agent was able to determine the image's width and height</dt>
+   <li>
 
+    <p>As soon as possible, jump to the first applicable entry from the following list:</p>
+
+    <dl class=switch><dt>If the resource type is <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code></dt>
+
      <dd>
 
-      <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely
-       available</a> state.</p>
+      <p>The next <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+      task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
 
-       <li><p>Add the image to the <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>.</li>
+      <p>Each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+      task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must update the presentation of the image, but as each new
+      body part comes in, it must replace the previous image. Once one body part has been completely
+      decoded, the user agent must set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely available</a> state and <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-load>load</code> at the <code><a href=#the-img-element>img</a></code>
+      element.</p>
 
-       <li>
+      <p class=note>The <code title=event-progress>progress</code> and <code title=event-loadend>loadend</code> events are not fired for
+      <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code> image streams.</p>
 
-        <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
-        named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+     </dd>
 
-        <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
-        <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+     <dt>If the resource type and data corresponds to a supported image format, <a href=#img-determine-type>as described below</a></dt>
 
-       </li>
+     <dd>
 
-       <li>
+      <p>The next <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+      task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
 
-        <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
-        named <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+      <p id=img-load>That <a href=#concept-task title=concept-task>task</a>, and each subsequent <a href=#concept-task title=concept-task>task</a>, that is <a href=#queue-a-task title="queue a task">queued</a> by the
+      <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must update the presentation of the image appropriately (e.g. if
+      the image is a progressive JPEG, each packet can improve the resolution of the image).</p>
 
-        <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
-        <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+      <p>Furthermore, the last <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+      task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been
+      <a href=#fetch title=fetch>fetched</a> must additionally run the steps for the matching entry in
+      the following list:</p>
 
-       </li>
+      <dl class=switch><dt>If the download was successful and the user agent was able to determine the image's width and height</dt>
 
-      </ol></dd>
+       <dd>
 
-     <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
+        <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely
+         available</a> state.</p>
 
-     <dt>Otherwise</dt>
+         <li><p>Add the image to the <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>.</li>
 
-     <dd>
+         <li>
 
-      <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a>
-       state.</li>
+          <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
+          named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
-       <li>
+          <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
+          <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
-        <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
-        named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+         </li>
 
-        <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
-        <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+         <li>
 
-       </li>
+          <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
+          named <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
-       <li>
+          <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
+          <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
-        <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
-        named <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+         </li>
 
-        <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
-        <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+        </ol></dd>
 
-       </li>
+       <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
 
-      </ol></dd>
+       <dt>Otherwise</dt>
 
-    </dl><p>On the other hand, if the resource type is <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, then each
-    <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the
-    <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a>
-    must also update the presentation of the image, but as each new body part comes in, it must
-    replace the previous image. Once one body part has been completely decoded, the user agent must
-    set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely available</a> state
-    and <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-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+       <dd>
 
-    <p class=note>The <code title=event-progress>progress</code> and <code title=event-loadend>loadend</code> events are not fired for
-    <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code> image streams.</p>
+        <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a>
+         state.</li>
 
-    <p>Otherwise, either the image data is corrupted in some fatal way such that the image
-    dimensions cannot be obtained, or the image data is not in a supported file format; the user
-    agent must set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a> state,
-    abort the <a href=#fetch title=fetch>fetching</a> algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that algorithm, and then <a href=#queue-a-task>queue a
-    task</a> to first <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 then <a href=#fire-a-simple-event>fire a simple
-    event</a> named <code title=event-loadend>loadend</code> at the <code><a href=#the-img-element>img</a></code>
-    element.</p>
+         <li>
 
-   </li>
+          <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
+          named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
+          <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
+          <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+
+         </li>
+
+         <li>
+
+          <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
+          named <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+
+          <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
+          <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+
+         </li>
+
+        </ol></dd>
+
+      </dl></dd>
+
+     <dt>Otherwise</dt>
+
+     <dd>
+
+      <p>Either the image data is corrupted in some fatal way such that the image dimensions cannot
+      be obtained, or the image data is not in a supported file format; the user agent must set the
+      <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a> state, abort the <a href=#fetch title=fetch>fetching</a> algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that algorithm, and then <a href=#queue-a-task>queue a
+      task</a> to first <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 then <a href=#fire-a-simple-event>fire a simple
+      event</a> named <code title=event-loadend>loadend</code> at the <code><a href=#the-img-element>img</a></code>
+      element.</p>
+
+     </dd>
+
+    </dl></li>
+
   </ol><p>While a user agent is running the above algorithm for an element <var title="">x</var>, there
   must be a strong reference from the element's <code><a href=#document>Document</a></code> to the element <var title="">x</var>, even if that element is not <a href=#in-a-document title="in a Document">in</a> its
   <code><a href=#document>Document</a></code>.</p>
@@ -22827,8 +22858,8 @@
   <p class=note>This allows servers to return images with error responses, and have them
   displayed.</p>
 
-  <p>The user agent should apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing
-  rules</a> to determine the type of the image, with the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a> giving the <var title="">official
+  <p id=img-determine-type>The user agent should apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing:
+  image">image sniffing rules</a> to determine the type of the image, with the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a> giving the <var title="">official
   type</var>. If these rules are not applied, then the type of the image must be the type given by
   the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a>.</p>
 

Modified: index
===================================================================
--- index	2013-09-09 22:47:12 UTC (rev 8176)
+++ index	2013-09-12 00:18:05 UTC (rev 8177)
@@ -256,7 +256,7 @@
 
   <header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 9 September 2013</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 12 September 2013</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -22714,104 +22714,135 @@
     described above to mitigate this attack, but unfortunately such policies are typically not
     compatible with existing Web content.</p>
 
-    <p>The first <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
-    task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+    <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>, each <a href=#concept-task title=concept-task>task</a>
+    that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task source</a>
+    while the image is being <a href=#fetch title=fetch>fetched</a> must <a href=#fire-a-progress-event>fire a progress
+    event</a> named <code title=event-progress>progress</code> at the <code><a href=#the-img-element>img</a></code>
+    element.</p>
 
-    <p id=img-load>If the resource is in a supported image format, then each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the
-    <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a>
-    must update the presentation of the image appropriately (e.g. if the image is a progressive
-    JPEG, each packet can improve the resolution of the image). In addition, if the resource is
-    <a href=#cors-same-origin>CORS-same-origin</a>, each such <a href=#concept-task title=concept-task>task</a> must <a href=#fire-a-progress-event>fire
-    a progress event</a> named <code title=event-progress>progress</code> at the
-    <code><a href=#the-img-element>img</a></code> element.</p>
+   </li>
 
-    <p>Furthermore, the last <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
-    task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> must additionally run the steps for the matching entry in the
-    following list:</p>
+   <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the remaining steps asynchronously,
+   but without missing any data from the <a href=#fetch>fetch</a> algorithm.</li>
 
-    <dl class=switch><dt>If the download was successful and the user agent was able to determine the image's width and height</dt>
+   <li>
 
+    <p>As soon as possible, jump to the first applicable entry from the following list:</p>
+
+    <dl class=switch><dt>If the resource type is <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code></dt>
+
      <dd>
 
-      <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely
-       available</a> state.</p>
+      <p>The next <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+      task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
 
-       <li><p>Add the image to the <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>.</li>
+      <p>Each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+      task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must update the presentation of the image, but as each new
+      body part comes in, it must replace the previous image. Once one body part has been completely
+      decoded, the user agent must set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely available</a> state and <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-load>load</code> at the <code><a href=#the-img-element>img</a></code>
+      element.</p>
 
-       <li>
+      <p class=note>The <code title=event-progress>progress</code> and <code title=event-loadend>loadend</code> events are not fired for
+      <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code> image streams.</p>
 
-        <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
-        named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+     </dd>
 
-        <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
-        <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+     <dt>If the resource type and data corresponds to a supported image format, <a href=#img-determine-type>as described below</a></dt>
 
-       </li>
+     <dd>
 
-       <li>
+      <p>The next <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+      task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
 
-        <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
-        named <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+      <p id=img-load>That <a href=#concept-task title=concept-task>task</a>, and each subsequent <a href=#concept-task title=concept-task>task</a>, that is <a href=#queue-a-task title="queue a task">queued</a> by the
+      <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must update the presentation of the image appropriately (e.g. if
+      the image is a progressive JPEG, each packet can improve the resolution of the image).</p>
 
-        <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
-        <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+      <p>Furthermore, the last <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+      task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been
+      <a href=#fetch title=fetch>fetched</a> must additionally run the steps for the matching entry in
+      the following list:</p>
 
-       </li>
+      <dl class=switch><dt>If the download was successful and the user agent was able to determine the image's width and height</dt>
 
-      </ol></dd>
+       <dd>
 
-     <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
+        <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely
+         available</a> state.</p>
 
-     <dt>Otherwise</dt>
+         <li><p>Add the image to the <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>.</li>
 
-     <dd>
+         <li>
 
-      <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a>
-       state.</li>
+          <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
+          named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
-       <li>
+          <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
+          <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
-        <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
-        named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+         </li>
 
-        <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
-        <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+         <li>
 
-       </li>
+          <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
+          named <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
-       <li>
+          <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
+          <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
-        <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
-        named <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+         </li>
 
-        <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
-        <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+        </ol></dd>
 
-       </li>
+       <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
 
-      </ol></dd>
+       <dt>Otherwise</dt>
 
-    </dl><p>On the other hand, if the resource type is <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, then each
-    <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the
-    <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a>
-    must also update the presentation of the image, but as each new body part comes in, it must
-    replace the previous image. Once one body part has been completely decoded, the user agent must
-    set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely available</a> state
-    and <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-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+       <dd>
 
-    <p class=note>The <code title=event-progress>progress</code> and <code title=event-loadend>loadend</code> events are not fired for
-    <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code> image streams.</p>
+        <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a>
+         state.</li>
 
-    <p>Otherwise, either the image data is corrupted in some fatal way such that the image
-    dimensions cannot be obtained, or the image data is not in a supported file format; the user
-    agent must set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a> state,
-    abort the <a href=#fetch title=fetch>fetching</a> algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that algorithm, and then <a href=#queue-a-task>queue a
-    task</a> to first <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 then <a href=#fire-a-simple-event>fire a simple
-    event</a> named <code title=event-loadend>loadend</code> at the <code><a href=#the-img-element>img</a></code>
-    element.</p>
+         <li>
 
-   </li>
+          <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
+          named <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
 
+          <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
+          <code title=event-load>load</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+
+         </li>
+
+         <li>
+
+          <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
+          named <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+
+          <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
+          <code title=event-load>loadend</code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+
+         </li>
+
+        </ol></dd>
+
+      </dl></dd>
+
+     <dt>Otherwise</dt>
+
+     <dd>
+
+      <p>Either the image data is corrupted in some fatal way such that the image dimensions cannot
+      be obtained, or the image data is not in a supported file format; the user agent must set the
+      <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a> state, abort the <a href=#fetch title=fetch>fetching</a> algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that algorithm, and then <a href=#queue-a-task>queue a
+      task</a> to first <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 then <a href=#fire-a-simple-event>fire a simple
+      event</a> named <code title=event-loadend>loadend</code> at the <code><a href=#the-img-element>img</a></code>
+      element.</p>
+
+     </dd>
+
+    </dl></li>
+
   </ol><p>While a user agent is running the above algorithm for an element <var title="">x</var>, there
   must be a strong reference from the element's <code><a href=#document>Document</a></code> to the element <var title="">x</var>, even if that element is not <a href=#in-a-document title="in a Document">in</a> its
   <code><a href=#document>Document</a></code>.</p>
@@ -22827,8 +22858,8 @@
   <p class=note>This allows servers to return images with error responses, and have them
   displayed.</p>
 
-  <p>The user agent should apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing
-  rules</a> to determine the type of the image, with the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a> giving the <var title="">official
+  <p id=img-determine-type>The user agent should apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing:
+  image">image sniffing rules</a> to determine the type of the image, with the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a> giving the <var title="">official
   type</var>. If these rules are not applied, then the type of the image must be the type given by
   the image's <a href=#content-type title=Content-Type>associated Content-Type headers</a>.</p>
 

Modified: source
===================================================================
--- source	2013-09-09 22:47:12 UTC (rev 8176)
+++ source	2013-09-12 00:18:05 UTC (rev 8177)
@@ -23757,123 +23757,163 @@
     described above to mitigate this attack, but unfortunately such policies are typically not
     compatible with existing Web content.</p>
 
-    <p>The first <span title="concept-task">task</span> that is <span title="queue a
-    task">queued</span> by the <span>networking task source</span> while the image is being <span
-    title="fetch">fetched</span> must set the <code>img</code> element's state to <span
-    title="img-inc">partially available</span>.</p>
+    <p>If the resource is <span>CORS-same-origin</span>, each <span title="concept-task">task</span>
+    that is <span title="queue a task">queued</span> by the <span>networking task source</span>
+    while the image is being <span title="fetch">fetched</span> must <span>fire a progress
+    event</span> named <code title="event-progress">progress</code> at the <code>img</code>
+    element.</p>
 
-    <p id="img-load">If the resource is in a supported image format, then each <span
-    title="concept-task">task</span> that is <span title="queue a task">queued</span> by the
-    <span>networking task source</span> while the image is being <span title="fetch">fetched</span>
-    must update the presentation of the image appropriately (e.g. if the image is a progressive
-    JPEG, each packet can improve the resolution of the image). In addition, if the resource is
-    <span>CORS-same-origin</span>, each such <span title="concept-task">task</span> must <span>fire
-    a progress event</span> named <code title="event-progress">progress</code> at the
-    <code>img</code> element.</p>
+   </li>
 
-    <p>Furthermore, the last <span title="concept-task">task</span> that is <span title="queue a
-    task">queued</span> by the <span>networking task source</span> once the resource has been <span
-    title="fetch">fetched</span> must additionally run the steps for the matching entry in the
-    following list:</p>
+   <li><p>End the <span>synchronous section</span>, continuing the remaining steps asynchronously,
+   but without missing any data from the <span>fetch</span> algorithm.</p></li>
 
+   <li>
+
+    <p>As soon as possible, jump to the first applicable entry from the following list:</p>
+
     <dl class="switch">
 
-     <dt>If the download was successful and the user agent was able to determine the image's width and height</dt>
+     <dt>If the resource type is <code>multipart/x-mixed-replace</code></dt>
 
      <dd>
 
-      <ol>
+      <p>The next <span title="concept-task">task</span> that is <span title="queue a
+      task">queued</span> by the <span>networking task source</span> while the image is being <span
+      title="fetch">fetched</span> must set the <code>img</code> element's state to <span
+      title="img-inc">partially available</span>.</p>
 
-       <li><p>Set the <code>img</code> element to the <span title="img-all">completely
-       available</span> state.</p>
+      <p>Each <span title="concept-task">task</span> that is <span title="queue a
+      task">queued</span> by the <span>networking task source</span> while the image is being <span
+      title="fetch">fetched</span> must update the presentation of the image, but as each new
+      body part comes in, it must replace the previous image. Once one body part has been completely
+      decoded, the user agent must set the <code>img</code> element to the <span
+      title="img-all">completely available</span> state and <span>queue a task</span> to <span>fire
+      a simple event</span> named <code title="event-load">load</code> at the <code>img</code>
+      element.</p>
 
-       <li><p>Add the image to the <span>list of available images</span> using the key <var
-       title="">key</var>.</p></li>
+      <p class="note">The <code title="event-progress">progress</code> and <code
+      title="event-loadend">loadend</code> events are not fired for
+      <code>multipart/x-mixed-replace</code> image streams.</p>
 
-       <li>
+     </dd>
 
-        <p>If the resource is <span>CORS-same-origin</span>: <span>fire a progress event</span>
-        named <code title="event-load">load</code> at the <code>img</code> element.</p>
+     <dt>If the resource type and data corresponds to a supported image format, <a
+     href="#img-determine-type">as described below</a></dt>
 
-        <p>If the resource is <span>CORS-cross-origin</span>: <span>fire a simple event</span> named
-        <code title="event-load">load</code> at the <code>img</code> element.</p>
+     <dd>
 
-       </li>
+      <p>The next <span title="concept-task">task</span> that is <span title="queue a
+      task">queued</span> by the <span>networking task source</span> while the image is being <span
+      title="fetch">fetched</span> must set the <code>img</code> element's state to <span
+      title="img-inc">partially available</span>.</p>
 
-       <li>
+      <p id="img-load">That <span title="concept-task">task</span>, and each subsequent <span
+      title="concept-task">task</span>, that is <span title="queue a task">queued</span> by the
+      <span>networking task source</span> while the image is being <span
+      title="fetch">fetched</span> must update the presentation of the image appropriately (e.g. if
+      the image is a progressive JPEG, each packet can improve the resolution of the image).</p>
 
-        <p>If the resource is <span>CORS-same-origin</span>: <span>fire a progress event</span>
-        named <code title="event-load">loadend</code> at the <code>img</code> element.</p>
+      <p>Furthermore, the last <span title="concept-task">task</span> that is <span title="queue a
+      task">queued</span> by the <span>networking task source</span> once the resource has been
+      <span title="fetch">fetched</span> must additionally run the steps for the matching entry in
+      the following list:</p>
 
-        <p>If the resource is <span>CORS-cross-origin</span>: <span>fire a simple event</span> named
-        <code title="event-load">loadend</code> at the <code>img</code> element.</p>
+      <dl class="switch">
 
-       </li>
+       <dt>If the download was successful and the user agent was able to determine the image's width and height</dt>
 
-      </ol>
+       <dd>
 
-     </dd>
+        <ol>
 
-     <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
+         <li><p>Set the <code>img</code> element to the <span title="img-all">completely
+         available</span> state.</p>
 
-     <dt>Otherwise</dt>
+         <li><p>Add the image to the <span>list of available images</span> using the key <var
+         title="">key</var>.</p></li>
 
-     <dd>
+         <li>
 
-      <ol>
+          <p>If the resource is <span>CORS-same-origin</span>: <span>fire a progress event</span>
+          named <code title="event-load">load</code> at the <code>img</code> element.</p>
 
-       <li><p>Set the <code>img</code> element to the <span title="img-error">broken</span>
-       state.</p></li>
+          <p>If the resource is <span>CORS-cross-origin</span>: <span>fire a simple event</span> named
+          <code title="event-load">load</code> at the <code>img</code> element.</p>
 
-       <li>
+         </li>
 
-        <p>If the resource is <span>CORS-same-origin</span>: <span>fire a progress event</span>
-        named <code title="event-load">load</code> at the <code>img</code> element.</p>
+         <li>
 
-        <p>If the resource is <span>CORS-cross-origin</span>: <span>fire a simple event</span> named
-        <code title="event-load">load</code> at the <code>img</code> element.</p>
+          <p>If the resource is <span>CORS-same-origin</span>: <span>fire a progress event</span>
+          named <code title="event-load">loadend</code> at the <code>img</code> element.</p>
 
-       </li>
+          <p>If the resource is <span>CORS-cross-origin</span>: <span>fire a simple event</span> named
+          <code title="event-load">loadend</code> at the <code>img</code> element.</p>
 
-       <li>
+         </li>
 
-        <p>If the resource is <span>CORS-same-origin</span>: <span>fire a progress event</span>
-        named <code title="event-load">loadend</code> at the <code>img</code> element.</p>
+        </ol>
 
-        <p>If the resource is <span>CORS-cross-origin</span>: <span>fire a simple event</span> named
-        <code title="event-load">loadend</code> at the <code>img</code> element.</p>
+       </dd>
 
-       </li>
+       <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
 
-      </ol>
+       <dt>Otherwise</dt>
 
+       <dd>
+
+        <ol>
+
+         <li><p>Set the <code>img</code> element to the <span title="img-error">broken</span>
+         state.</p></li>
+
+         <li>
+
+          <p>If the resource is <span>CORS-same-origin</span>: <span>fire a progress event</span>
+          named <code title="event-load">load</code> at the <code>img</code> element.</p>
+
+          <p>If the resource is <span>CORS-cross-origin</span>: <span>fire a simple event</span> named
+          <code title="event-load">load</code> at the <code>img</code> element.</p>
+
+         </li>
+
+         <li>
+
+          <p>If the resource is <span>CORS-same-origin</span>: <span>fire a progress event</span>
+          named <code title="event-load">loadend</code> at the <code>img</code> element.</p>
+
+          <p>If the resource is <span>CORS-cross-origin</span>: <span>fire a simple event</span> named
+          <code title="event-load">loadend</code> at the <code>img</code> element.</p>
+
+         </li>
+
+        </ol>
+
+       </dd>
+
+      </dl>
+
      </dd>
 
-    </dl>
+     <dt>Otherwise</dt>
 
-    <p>On the other hand, if the resource type is <code>multipart/x-mixed-replace</code>, then each
-    <span title="concept-task">task</span> that is <span title="queue a task">queued</span> by the
-    <span>networking task source</span> while the image is being <span title="fetch">fetched</span>
-    must also update the presentation of the image, but as each new body part comes in, it must
-    replace the previous image. Once one body part has been completely decoded, the user agent must
-    set the <code>img</code> element to the <span title="img-all">completely available</span> state
-    and <span>queue a task</span> to <span>fire a simple event</span> named <code
-    title="event-load">load</code> at the <code>img</code> element.</p>
+     <dd>
 
-    <p class="note">The <code title="event-progress">progress</code> and <code
-    title="event-loadend">loadend</code> events are not fired for
-    <code>multipart/x-mixed-replace</code> image streams.</p>
+      <p>Either the image data is corrupted in some fatal way such that the image dimensions cannot
+      be obtained, or the image data is not in a supported file format; the user agent must set the
+      <code>img</code> element to the <span title="img-error">broken</span> state, abort the <span
+      title="fetch">fetching</span> algorithm, discarding any pending <span
+      title="concept-task">tasks</span> generated by that algorithm, and then <span>queue a
+      task</span> to first <span>fire a simple event</span> named <code
+      title="event-error">error</code> at the <code>img</code> element and then <span>fire a simple
+      event</span> named <code title="event-loadend">loadend</code> at the <code>img</code>
+      element.</p>
 
-    <p>Otherwise, either the image data is corrupted in some fatal way such that the image
-    dimensions cannot be obtained, or the image data is not in a supported file format; the user
-    agent must set the <code>img</code> element to the <span title="img-error">broken</span> state,
-    abort the <span title="fetch">fetching</span> algorithm, discarding any pending <span
-    title="concept-task">tasks</span> generated by that algorithm, and then <span>queue a
-    task</span> to first <span>fire a simple event</span> named <code
-    title="event-error">error</code> at the <code>img</code> element and then <span>fire a simple
-    event</span> named <code title="event-loadend">loadend</code> at the <code>img</code>
-    element.</p>
+     </dd>
 
+    </dl>
+
    </li>
 
   </ol>
@@ -23894,8 +23934,8 @@
   <p class="note">This allows servers to return images with error responses, and have them
   displayed.</p>
 
-  <p>The user agent should apply the <span title="Content-Type sniffing: image">image sniffing
-  rules</span> to determine the type of the image, with the image's <span
+  <p id="img-determine-type">The user agent should apply the <span title="Content-Type sniffing:
+  image">image sniffing rules</span> to determine the type of the image, with the image's <span
   title="Content-Type">associated Content-Type headers</span> giving the <var title="">official
   type</var>. If these rules are not applied, then the type of the image must be the type given by
   the image's <span title="Content-Type">associated Content-Type headers</span>.</p>




More information about the Commit-Watchers mailing list