[html5] r5639 - [giow] (2) Revamp how <img> loading works. Fixing http://www.w3.org/Bugs/Public/ [...]
whatwg at whatwg.org
whatwg at whatwg.org
Mon Oct 18 17:09:39 PDT 2010
Author: ianh
Date: 2010-10-18 17:09:38 -0700 (Mon, 18 Oct 2010)
New Revision: 5639
Modified:
complete.html
index
source
Log:
[giow] (2) Revamp how <img> loading works.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=9895
Modified: complete.html
===================================================================
--- complete.html 2010-10-15 22:56:11 UTC (rev 5638)
+++ complete.html 2010-10-19 00:09:38 UTC (rev 5639)
@@ -214,7 +214,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1>Web Applications 1.0</h1>
- <h2 class="no-num no-toc">Draft Standard — 15 October 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 19 October 2010</h2>
</hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -20553,8 +20553,7 @@
<p>The requirements on the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
attribute's value are described <a href=#alt>in the next
- section</a>.
- </p>
+ section</a>.</p>
<p>The <code><a href=#the-img-element>img</a></code> must not be used as a layout tool. In
particular, <code><a href=#the-img-element>img</a></code> elements should not be used to display
@@ -20563,24 +20562,80 @@
<div class=impl>
- <hr><p>Unless the user agent cannot support images, or its support for
- images has been disabled, or the user agent only fetches elements on
- demand, then, when an <code><a href=#the-img-element>img</a></code> is created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and whenever the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set subsequently, the
- user agent must run the following steps:</p> <!-- Note how this does
- NOT happen when the base URL changes. -->
+ <hr><p>An <code><a href=#the-img-element>img</a></code> is always in one of the following states:</p>
- <ol><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 <a href=#queue-a-task>queue a
+ <dl><dt><dfn id=img-none title=img-none>Unavailable</dfn></dt>
+ <dd>The user agent hasn't obtained any image data.</dd>
+
+ <dt><dfn id=img-inc title=img-inc>Partially available</dfn></dt>
+ <dd>The user agent has obtained some of the image data.</dd>
+
+ <dt><dfn id=img-all title=img-all>Completely available</dfn></dt>
+ <dd>The user agent has obtained all of the image data.</dd>
+
+ <dt><dfn id=img-error title=img-error>Broken</dfn></dt>
+ <dd>The user agent has obtained all of the image data that it can,
+ but it cannot decode the image (e.g. the image is corrupted, or the
+ format is not supported, or no data could be obtained).</dd>
+
+ </dl><p>When an <code><a href=#the-img-element>img</a></code> element is either in the <a href=#img-inc title=img-inc>partially available</a> state or in the <a href=#img-all title=img-all>completely available</a> state, it is said to be
+ <dfn id=img-yes title=img-yes>available</dfn>.</p>
+
+ <p>An <code><a href=#the-img-element>img</a></code> element is initially <a href=#img-none title=img-none>unavailable</a>.</p>
+
+ <p>User agents may obtain images immediately or on demand.</p>
+
+ <p>A user agent that obtains images immediately must synchronously
+ <a href=#update-the-image-data>update the image data</a> of an <code><a href=#the-img-element>img</a></code> element
+ whenever that element is either created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, or has its <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute set, changed, or
+ removed.</p> <!-- Note how this does NOT happen when the base URL
+ changes. -->
+
+ <p>A user agent that obtains images on demand must <a href=#update-the-image-data>update the
+ image data</a> of an <code><a href=#the-img-element>img</a></code> element whenever it needs
+ the image data (i.e. on demand), but only if the <code><a href=#the-img-element>img</a></code>
+ element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and
+ if it has not <a href=#update-the-image-data title="update the image data">updated the image
+ data</a> since the last time the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute was set. When an
+ <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
+ attribute is changed or removed, if the user agent only obtains
+ images on demand, the <code><a href=#the-img-element>img</a></code> element must return to the
+ <a href=#img-none title=img-none>unavailable</a> state.</p> <!-- Note how
+ this does NOT happen when the base URL changes. -->
+
+ <p>When the user agent is to <dfn id=update-the-image-data>update the image data</dfn> of an
+ <code><a href=#the-img-element>img</a></code> element, it must run the following steps:</p>
+
+ <ol><li><p>Return the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-none title=img-none>unavailable</a> state.</p>
+
+ <li><p>If an instance of the <a href=#fetch title=fetch>fetching</a>
+ algorithm is still running for this element, then abort that
+ algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that
+ algorithm.</li>
+
+ <li><p>Forget the <code><a href=#the-img-element>img</a></code> element's current image data, if
+ any.</li>
+
+ <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>Otherwise, <a href=#resolve-a-url title="resolve a url">resolve</a> the value
- of that attribute, relative to the element, and if that is
- successful must then <a href=#fetch>fetch</a> that resource.</p> <!--
- http-origin privacy sensitive -->
+ of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute,
+ relative to the element, and, if that is successful,
+ <a href=#fetch>fetch</a> that resource.</p> <!-- http-origin privacy
+ sensitive -->
+ <p>The resouce obtained in this fashion is the <code><a href=#the-img-element>img</a></code>
+ element's image data.</p>
+
<!-- same text in <input type=image> section and similar text
elsewhere --> <p>Fetching the image must <a href=#delay-the-load-event>delay the load
event</a> of the element's document until the <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
@@ -20592,26 +20647,49 @@
conjunction with scripting, though scripting isn't actually
necessary to carry out such an attack). User agents may implement
<a href=#origin title=origin>cross-origin</a> access control policies
- that mitigate this attack.</p>
+ that mitigate this attack, but unfortunately such policies are
+ typically not compatible with existing Web content.</p>
</li>
- </ol><p>If the image is in a supported image type and its dimensions are
- known, then the image is said to be <dfn id=img-available title=img-available><i>available</i></dfn> (this affects exactly
- what the element represents, as defined below). This can be true
- even before the image is completely downloaded, if the user agent
- supports incremental rendering of images; in such cases, 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. It can also stop being
- true, e.g. if the user agent finds, after obtaining the image's
- dimensions, that the image data is actually fatally corrupted.</p>
+ </ol><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 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> and update
+ the presentation of the image appropriately.</p>
- <p>If the image was not fetched (e.g. because the UA's image support
- is disabled, or because the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
- attribute's value is the empty string, or if the conditions in the
- previous paragraph are not met), then the image is <em>not</em> <i title=img-available><a href=#img-available>available</a></i>.</p>
+ <p id=img-load>The <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 act as appropriate given the
+ following alternatives:</p>
+ <dl class=switch><dt>If the download was successful</dt>
+
+ <dd>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, update the
+ presentation of the image appropriately, 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.</dd>
+
+ <dt>Otherwise</dt>
+
+ <dd>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</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-error>error</code> at the <code><a href=#the-img-element>img</a></code>
+ element.</dd>
+
+ </dl><p>If at any point the user agent discovers that the image data is
+ corrupted in some fatal way, or that the image is not in a supported
+ file format, then 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. If the
+ <a href=#fetch title=fetch>fetching</a> algorithm is still running for
+ this element, then the user agent must also abort that 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
+ <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.</p>
+
+ <p>When an <code><a href=#the-img-element>img</a></code> element is in the <a href=#img-all title=img-all>completely available</a> state <em>and</em> the
+ user agent can completely decode the media data without errors, then
+ the <code><a href=#the-img-element>img</a></code> element is said to be <dfn id=img-good title=img-good>fully decodable</dfn>.</p>
+
<p>Whether the image is fetched successfully or not (e.g. whether
the response code was a 2xx code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>) must be
ignored when determining the image's type and whether it is a valid
@@ -20639,27 +20717,7 @@
<p>This specification does not specify which image types are to be
supported.</p>
- <p id=img-load>The <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 act as appropriate given the
- following alternatives:</p>
-
- <dl class=switch><dt>If the download was successful and the image is <i title=img-available><a href=#img-available>available</a></i></dt>
-
- <dd><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 (this happens after <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> starts returning
- true).</dd>
-
- <dt>Otherwise (the fetching process failed without a response from
- the remote server, or completed but the image is not a supported
- image)</dt>
-
- <dd><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> on the
- <code><a href=#the-img-element>img</a></code> element.</dd>
-
- </dl><p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation
+ <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation
task source</a>.</p>
<hr><p>What an <code><a href=#the-img-element>img</a></code> element represents depends on the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>
@@ -20674,9 +20732,9 @@
the content, redundant with some other information in the
document.</p>
- <p>If the image is <i title=img-available><a href=#img-available>available</a></i> and the
+ <p>If the image is <a href=#img-yes title=img-yes>available</a> and the
user agent is configured to display that image, then the element
- <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
+ <a href=#represents>represents</a> the element's image data.</p>
<p>Otherwise, the element <a href=#represents>represents</a> nothing, and may
be omitted completely from the rendering. User agents may provide
@@ -20694,9 +20752,9 @@
<p>The image is a key part of the content; the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute gives a textual
equivalent or replacement for the image.</p>
- <p>If the image is <i title=img-available><a href=#img-available>available</a></i> and the
+ <p>If the image is <a href=#img-yes title=img-yes>available</a> and the
user agent is configured to display that image, then the element
- <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
+ <a href=#represents>represents</a> the element's image data.</p>
<p>Otherwise, the element <a href=#represents>represents</a> the text given
by the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute. User
@@ -20717,16 +20775,15 @@
is a key part of the content but that a textual replacement for
the image was not available when the image was generated.</p>
- <p>If the image is <i title=img-available><a href=#img-available>available</a></i>, the
- element <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
+ <p>If the image is <a href=#img-yes title=img-yes>available</a> and the
+ user agent is configured to display that image, then the element
+ <a href=#represents>represents</a> the element's image data.</p>
- <p>If the image is not <i title=img-available><a href=#img-available>available</a></i> or
- if the user agent is not configured to display the image, then the
- user agent should display some sort of indicator that there is an
- image that is not being rendered, and may, if requested by the
- user, or if so configured, or when required to provide contextual
- information in response to navigation, provide caption information
- for the image, derived as follows:</p>
+ <p>Otherwise, the user agent should display some sort of indicator
+ that there is an image that is not being rendered, and may, if
+ requested by the user, or if so configured, or when required to
+ provide contextual information in response to navigation, provide
+ caption information for the image, derived as follows:</p>
<ol><!-- when editing this list, search for the two other occurrences
of 'critical-no-alt' --><li><p>If the image has a <code title=attr-title><a href=#the-title-attribute>title</a></code>
@@ -20849,9 +20906,8 @@
<dd>
- <p>Returns true if the image has been downloaded, decoded, and
- found to be valid, or if no image is specified; otherwise, returns
- false.</p>
+ <p>Returns true if the image has been completely downloaded or if
+ no image is specified; otherwise, returns false.</p>
</dd>
@@ -20870,9 +20926,9 @@
rendered width and height of the image, in CSS pixels, if the image
is <a href=#being-rendered>being rendered</a>, and is being rendered to a visual
medium; or else the intrinsic width and height of the image, in CSS
- pixels, if the image is <i title=img-available><a href=#img-available>available</a></i> but
+ pixels, if the image is <i title=img-available>available</i> but
not being rendered to a visual medium; or else 0, if the image is
- not <i title=img-available><a href=#img-available>available</a></i>. <a href=#refsCSS>[CSS]</a></p>
+ not <i title=img-available>available</i>. <a href=#refsCSS>[CSS]</a></p>
<p>On setting, they must act as if they <a href=#reflect title=reflect>reflected</a> the respective content attributes
of the same name.</p>
@@ -20880,17 +20936,16 @@
<p>The IDL attributes <dfn id=dom-img-naturalwidth title=dom-img-naturalWidth><code>naturalWidth</code></dfn> and
<dfn id=dom-img-naturalheight title=dom-img-naturalHeight><code>naturalHeight</code></dfn>
must return the intrinsic width and height of the image, in CSS
- pixels, if the image is <i title=img-available><a href=#img-available>available</a></i>, or
+ pixels, if the image is <i title=img-available>available</i>, or
else 0. <a href=#refsCSS>[CSS]</a></p>
<p>The IDL attribute <dfn id=dom-img-complete title=dom-img-complete><code>complete</code></dfn> must return
- true if either the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute
- is omitted, or its value is the empty string, or if the user agent
- has fetched the image specified in the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and it is in a supported
- image type (i.e. it was decoded without fatal errors), even if the
- final <a href=#concept-task title=concept-task>task</a> queued by the
- <a href=#networking-task-source>networking task source</a> for the <a href=#fetch title=fetch>fetching</a> of the image resource has not yet been
- processed. Otherwise, the attribute must return false.</p>
+ true if any of the following conditions is true:</p>
+ <ul class=brief><li>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is omitted.
+ <li>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute's value is the empty string.
+ <li>The final <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> has been <a href=#queue-a-task title="queue a task">queued</a>, but has not yet been run, and the <code><a href=#the-img-element>img</a></code> element is not in the <a href=#img-error title=img-error>broken</a> state.
+ <li>The <code><a href=#the-img-element>img</a></code> element is <a href=#img-all title=img-all>completely available</a>.
+ </ul><p>Otherwise, the attribute must return false.</p>
<p class=note>The value of <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> can thus change while a
<a href=#concept-script title=concept-script>script</a> is executing.</p>
@@ -21298,7 +21353,7 @@
at least that would look good on the cover of a blue book.</p></pre>
<p>This example shows how the alternative text should be written
- such that if the image isn't <i title=img-available><a href=#img-available>available</a></i>, and the text is used instead,
+ such that if the image isn't <i title=img-available>available</i>, and the text is used instead,
the text flows seamlessly into the surrounding text, as if the
image had never been there in the first place.</p>
@@ -31516,11 +31571,9 @@
exception.</p> <!-- drawImage() has an equivalent paragraph -->
<p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object whose <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> attribute is false or whose
- <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is omitted or empty,
- or if the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
- <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
+ object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
+ attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
implementation must return null.</p> <!-- drawImage() has an
equivalent paragraph -->
@@ -32999,11 +33052,9 @@
exception.</p> <!-- createPattern() has an equivalent paragraph -->
<p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object whose <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> attribute is false or whose
- <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is omitted or empty,
- or if the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
- <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
+ object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
+ attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
implementation must return without drawing anything.</p> <!--
createPattern() has an equivalent paragraph -->
@@ -48297,10 +48348,9 @@
</li>
<li><p>If the <var title="">icon</var> argument is present and not
- null, but the given <code>img</code> element's <code
- title="dom-img-complete">complete</code> attribute is false or its
- <code title="attr-img-src">src</code> attribute is omitted or
- empty, then let <var title="">icon</var> be null.</p></li>
+ null, but the given <code>img</code> element is not in the <span
+ title="img-all">completely available</span> state, then let <var
+ title="">icon</var> be null.</p></li>
<li><p>If the <var title="">icon</var> argument is present and not
null, then copy the image data from that <code>img</code> element,
@@ -48974,10 +49024,8 @@
only two entries, or there are three, and the third entry is
an <code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -48990,10 +49038,8 @@
entries, or there are four, and the fourth entry is an
<code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -49006,10 +49052,8 @@
entries, or there are five, and the fifth entry is an
<code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -49021,10 +49065,8 @@
entries, or there are four, and the fourth entry is an
<code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -86438,7 +86480,7 @@
does not <a href=#represents title=represents>represent</a> an image, but the
element already has intrinsic dimensions (e.g. from the
<a href=#dimension-attributes>dimension attributes</a> or CSS rules), and either the user
- agent has reason to believe that the image will become <i title=img-available><a href=#img-available>available</a></i><!--input-img-available also-->
+ agent has reason to believe that the image will become <i title=img-available>available</i><!--input-img-available also-->
and be rendered in due course or the <code><a href=#document>Document</a></code> is in
<a href=#quirks-mode>quirks mode</a>, the element is expected to be treated as a
replaced element whose content is the text that the element
Modified: index
===================================================================
--- index 2010-10-15 22:56:11 UTC (rev 5638)
+++ index 2010-10-19 00:09:38 UTC (rev 5639)
@@ -218,7 +218,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1>HTML5 (including next generation additions still in development)</h1>
- <h2 class="no-num no-toc">Draft Standard — 15 October 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 19 October 2010</h2>
</hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -20530,8 +20530,7 @@
<p>The requirements on the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
attribute's value are described <a href=#alt>in the next
- section</a>.
- </p>
+ section</a>.</p>
<p>The <code><a href=#the-img-element>img</a></code> must not be used as a layout tool. In
particular, <code><a href=#the-img-element>img</a></code> elements should not be used to display
@@ -20540,24 +20539,80 @@
<div class=impl>
- <hr><p>Unless the user agent cannot support images, or its support for
- images has been disabled, or the user agent only fetches elements on
- demand, then, when an <code><a href=#the-img-element>img</a></code> is created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and whenever the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set subsequently, the
- user agent must run the following steps:</p> <!-- Note how this does
- NOT happen when the base URL changes. -->
+ <hr><p>An <code><a href=#the-img-element>img</a></code> is always in one of the following states:</p>
- <ol><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 <a href=#queue-a-task>queue a
+ <dl><dt><dfn id=img-none title=img-none>Unavailable</dfn></dt>
+ <dd>The user agent hasn't obtained any image data.</dd>
+
+ <dt><dfn id=img-inc title=img-inc>Partially available</dfn></dt>
+ <dd>The user agent has obtained some of the image data.</dd>
+
+ <dt><dfn id=img-all title=img-all>Completely available</dfn></dt>
+ <dd>The user agent has obtained all of the image data.</dd>
+
+ <dt><dfn id=img-error title=img-error>Broken</dfn></dt>
+ <dd>The user agent has obtained all of the image data that it can,
+ but it cannot decode the image (e.g. the image is corrupted, or the
+ format is not supported, or no data could be obtained).</dd>
+
+ </dl><p>When an <code><a href=#the-img-element>img</a></code> element is either in the <a href=#img-inc title=img-inc>partially available</a> state or in the <a href=#img-all title=img-all>completely available</a> state, it is said to be
+ <dfn id=img-yes title=img-yes>available</dfn>.</p>
+
+ <p>An <code><a href=#the-img-element>img</a></code> element is initially <a href=#img-none title=img-none>unavailable</a>.</p>
+
+ <p>User agents may obtain images immediately or on demand.</p>
+
+ <p>A user agent that obtains images immediately must synchronously
+ <a href=#update-the-image-data>update the image data</a> of an <code><a href=#the-img-element>img</a></code> element
+ whenever that element is either created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, or has its <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute set, changed, or
+ removed.</p> <!-- Note how this does NOT happen when the base URL
+ changes. -->
+
+ <p>A user agent that obtains images on demand must <a href=#update-the-image-data>update the
+ image data</a> of an <code><a href=#the-img-element>img</a></code> element whenever it needs
+ the image data (i.e. on demand), but only if the <code><a href=#the-img-element>img</a></code>
+ element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and
+ if it has not <a href=#update-the-image-data title="update the image data">updated the image
+ data</a> since the last time the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute was set. When an
+ <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
+ attribute is changed or removed, if the user agent only obtains
+ images on demand, the <code><a href=#the-img-element>img</a></code> element must return to the
+ <a href=#img-none title=img-none>unavailable</a> state.</p> <!-- Note how
+ this does NOT happen when the base URL changes. -->
+
+ <p>When the user agent is to <dfn id=update-the-image-data>update the image data</dfn> of an
+ <code><a href=#the-img-element>img</a></code> element, it must run the following steps:</p>
+
+ <ol><li><p>Return the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-none title=img-none>unavailable</a> state.</p>
+
+ <li><p>If an instance of the <a href=#fetch title=fetch>fetching</a>
+ algorithm is still running for this element, then abort that
+ algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that
+ algorithm.</li>
+
+ <li><p>Forget the <code><a href=#the-img-element>img</a></code> element's current image data, if
+ any.</li>
+
+ <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>Otherwise, <a href=#resolve-a-url title="resolve a url">resolve</a> the value
- of that attribute, relative to the element, and if that is
- successful must then <a href=#fetch>fetch</a> that resource.</p> <!--
- http-origin privacy sensitive -->
+ of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute,
+ relative to the element, and, if that is successful,
+ <a href=#fetch>fetch</a> that resource.</p> <!-- http-origin privacy
+ sensitive -->
+ <p>The resouce obtained in this fashion is the <code><a href=#the-img-element>img</a></code>
+ element's image data.</p>
+
<!-- same text in <input type=image> section and similar text
elsewhere --> <p>Fetching the image must <a href=#delay-the-load-event>delay the load
event</a> of the element's document until the <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
@@ -20569,26 +20624,49 @@
conjunction with scripting, though scripting isn't actually
necessary to carry out such an attack). User agents may implement
<a href=#origin title=origin>cross-origin</a> access control policies
- that mitigate this attack.</p>
+ that mitigate this attack, but unfortunately such policies are
+ typically not compatible with existing Web content.</p>
</li>
- </ol><p>If the image is in a supported image type and its dimensions are
- known, then the image is said to be <dfn id=img-available title=img-available><i>available</i></dfn> (this affects exactly
- what the element represents, as defined below). This can be true
- even before the image is completely downloaded, if the user agent
- supports incremental rendering of images; in such cases, 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. It can also stop being
- true, e.g. if the user agent finds, after obtaining the image's
- dimensions, that the image data is actually fatally corrupted.</p>
+ </ol><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 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> and update
+ the presentation of the image appropriately.</p>
- <p>If the image was not fetched (e.g. because the UA's image support
- is disabled, or because the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
- attribute's value is the empty string, or if the conditions in the
- previous paragraph are not met), then the image is <em>not</em> <i title=img-available><a href=#img-available>available</a></i>.</p>
+ <p id=img-load>The <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 act as appropriate given the
+ following alternatives:</p>
+ <dl class=switch><dt>If the download was successful</dt>
+
+ <dd>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, update the
+ presentation of the image appropriately, 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.</dd>
+
+ <dt>Otherwise</dt>
+
+ <dd>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</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-error>error</code> at the <code><a href=#the-img-element>img</a></code>
+ element.</dd>
+
+ </dl><p>If at any point the user agent discovers that the image data is
+ corrupted in some fatal way, or that the image is not in a supported
+ file format, then 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. If the
+ <a href=#fetch title=fetch>fetching</a> algorithm is still running for
+ this element, then the user agent must also abort that 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
+ <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.</p>
+
+ <p>When an <code><a href=#the-img-element>img</a></code> element is in the <a href=#img-all title=img-all>completely available</a> state <em>and</em> the
+ user agent can completely decode the media data without errors, then
+ the <code><a href=#the-img-element>img</a></code> element is said to be <dfn id=img-good title=img-good>fully decodable</dfn>.</p>
+
<p>Whether the image is fetched successfully or not (e.g. whether
the response code was a 2xx code <a href=#concept-http-equivalent-codes title=concept-http-equivalent-codes>or equivalent</a>) must be
ignored when determining the image's type and whether it is a valid
@@ -20616,27 +20694,7 @@
<p>This specification does not specify which image types are to be
supported.</p>
- <p id=img-load>The <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 act as appropriate given the
- following alternatives:</p>
-
- <dl class=switch><dt>If the download was successful and the image is <i title=img-available><a href=#img-available>available</a></i></dt>
-
- <dd><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 (this happens after <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> starts returning
- true).</dd>
-
- <dt>Otherwise (the fetching process failed without a response from
- the remote server, or completed but the image is not a supported
- image)</dt>
-
- <dd><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> on the
- <code><a href=#the-img-element>img</a></code> element.</dd>
-
- </dl><p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation
+ <p>The <a href=#task-source>task source</a> for these <a href=#concept-task title=concept-task>tasks</a> is the <a href=#dom-manipulation-task-source>DOM manipulation
task source</a>.</p>
<hr><p>What an <code><a href=#the-img-element>img</a></code> element represents depends on the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>
@@ -20651,9 +20709,9 @@
the content, redundant with some other information in the
document.</p>
- <p>If the image is <i title=img-available><a href=#img-available>available</a></i> and the
+ <p>If the image is <a href=#img-yes title=img-yes>available</a> and the
user agent is configured to display that image, then the element
- <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
+ <a href=#represents>represents</a> the element's image data.</p>
<p>Otherwise, the element <a href=#represents>represents</a> nothing, and may
be omitted completely from the rendering. User agents may provide
@@ -20671,9 +20729,9 @@
<p>The image is a key part of the content; the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute gives a textual
equivalent or replacement for the image.</p>
- <p>If the image is <i title=img-available><a href=#img-available>available</a></i> and the
+ <p>If the image is <a href=#img-yes title=img-yes>available</a> and the
user agent is configured to display that image, then the element
- <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
+ <a href=#represents>represents</a> the element's image data.</p>
<p>Otherwise, the element <a href=#represents>represents</a> the text given
by the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute. User
@@ -20694,16 +20752,15 @@
is a key part of the content but that a textual replacement for
the image was not available when the image was generated.</p>
- <p>If the image is <i title=img-available><a href=#img-available>available</a></i>, the
- element <a href=#represents>represents</a> the image specified by the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
+ <p>If the image is <a href=#img-yes title=img-yes>available</a> and the
+ user agent is configured to display that image, then the element
+ <a href=#represents>represents</a> the element's image data.</p>
- <p>If the image is not <i title=img-available><a href=#img-available>available</a></i> or
- if the user agent is not configured to display the image, then the
- user agent should display some sort of indicator that there is an
- image that is not being rendered, and may, if requested by the
- user, or if so configured, or when required to provide contextual
- information in response to navigation, provide caption information
- for the image, derived as follows:</p>
+ <p>Otherwise, the user agent should display some sort of indicator
+ that there is an image that is not being rendered, and may, if
+ requested by the user, or if so configured, or when required to
+ provide contextual information in response to navigation, provide
+ caption information for the image, derived as follows:</p>
<ol><!-- when editing this list, search for the two other occurrences
of 'critical-no-alt' --><li><p>If the image has a <code title=attr-title><a href=#the-title-attribute>title</a></code>
@@ -20826,9 +20883,8 @@
<dd>
- <p>Returns true if the image has been downloaded, decoded, and
- found to be valid, or if no image is specified; otherwise, returns
- false.</p>
+ <p>Returns true if the image has been completely downloaded or if
+ no image is specified; otherwise, returns false.</p>
</dd>
@@ -20847,9 +20903,9 @@
rendered width and height of the image, in CSS pixels, if the image
is <a href=#being-rendered>being rendered</a>, and is being rendered to a visual
medium; or else the intrinsic width and height of the image, in CSS
- pixels, if the image is <i title=img-available><a href=#img-available>available</a></i> but
+ pixels, if the image is <i title=img-available>available</i> but
not being rendered to a visual medium; or else 0, if the image is
- not <i title=img-available><a href=#img-available>available</a></i>. <a href=#refsCSS>[CSS]</a></p>
+ not <i title=img-available>available</i>. <a href=#refsCSS>[CSS]</a></p>
<p>On setting, they must act as if they <a href=#reflect title=reflect>reflected</a> the respective content attributes
of the same name.</p>
@@ -20857,17 +20913,16 @@
<p>The IDL attributes <dfn id=dom-img-naturalwidth title=dom-img-naturalWidth><code>naturalWidth</code></dfn> and
<dfn id=dom-img-naturalheight title=dom-img-naturalHeight><code>naturalHeight</code></dfn>
must return the intrinsic width and height of the image, in CSS
- pixels, if the image is <i title=img-available><a href=#img-available>available</a></i>, or
+ pixels, if the image is <i title=img-available>available</i>, or
else 0. <a href=#refsCSS>[CSS]</a></p>
<p>The IDL attribute <dfn id=dom-img-complete title=dom-img-complete><code>complete</code></dfn> must return
- true if either the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute
- is omitted, or its value is the empty string, or if the user agent
- has fetched the image specified in the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and it is in a supported
- image type (i.e. it was decoded without fatal errors), even if the
- final <a href=#concept-task title=concept-task>task</a> queued by the
- <a href=#networking-task-source>networking task source</a> for the <a href=#fetch title=fetch>fetching</a> of the image resource has not yet been
- processed. Otherwise, the attribute must return false.</p>
+ true if any of the following conditions is true:</p>
+ <ul class=brief><li>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is omitted.
+ <li>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute's value is the empty string.
+ <li>The final <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> has been <a href=#queue-a-task title="queue a task">queued</a>, but has not yet been run, and the <code><a href=#the-img-element>img</a></code> element is not in the <a href=#img-error title=img-error>broken</a> state.
+ <li>The <code><a href=#the-img-element>img</a></code> element is <a href=#img-all title=img-all>completely available</a>.
+ </ul><p>Otherwise, the attribute must return false.</p>
<p class=note>The value of <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> can thus change while a
<a href=#concept-script title=concept-script>script</a> is executing.</p>
@@ -21275,7 +21330,7 @@
at least that would look good on the cover of a blue book.</p></pre>
<p>This example shows how the alternative text should be written
- such that if the image isn't <i title=img-available><a href=#img-available>available</a></i>, and the text is used instead,
+ such that if the image isn't <i title=img-available>available</i>, and the text is used instead,
the text flows seamlessly into the surrounding text, as if the
image had never been there in the first place.</p>
@@ -31496,11 +31551,9 @@
exception.</p> <!-- drawImage() has an equivalent paragraph -->
<p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object whose <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> attribute is false or whose
- <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is omitted or empty,
- or if the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
- <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
+ object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
+ attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
implementation must return null.</p> <!-- drawImage() has an
equivalent paragraph -->
@@ -32979,11 +33032,9 @@
exception.</p> <!-- createPattern() has an equivalent paragraph -->
<p>If the <var title="">image</var> argument is an
- <code><a href=#htmlimageelement>HTMLImageElement</a></code> object whose <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> attribute is false or whose
- <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is omitted or empty,
- or if the <var title="">image</var> argument is an
- <code><a href=#htmlvideoelement>HTMLVideoElement</a></code> object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code> attribute is either
- <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
+ <code><a href=#htmlimageelement>HTMLImageElement</a></code> object that is not <a href=#img-good title=img-good>fully decodable</a>, or if the <var title="">image</var> argument is an <code><a href=#htmlvideoelement>HTMLVideoElement</a></code>
+ object whose <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code>
+ attribute is either <code title=dom-media-HAVE_NOTHING><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> or <code title=dom-media-HAVE_METADATA><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, then the
implementation must return without drawing anything.</p> <!--
createPattern() has an equivalent paragraph -->
@@ -48277,10 +48328,9 @@
</li>
<li><p>If the <var title="">icon</var> argument is present and not
- null, but the given <code>img</code> element's <code
- title="dom-img-complete">complete</code> attribute is false or its
- <code title="attr-img-src">src</code> attribute is omitted or
- empty, then let <var title="">icon</var> be null.</p></li>
+ null, but the given <code>img</code> element is not in the <span
+ title="img-all">completely available</span> state, then let <var
+ title="">icon</var> be null.</p></li>
<li><p>If the <var title="">icon</var> argument is present and not
null, then copy the image data from that <code>img</code> element,
@@ -48954,10 +49004,8 @@
only two entries, or there are three, and the third entry is
an <code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -48970,10 +49018,8 @@
entries, or there are four, and the fourth entry is an
<code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -48986,10 +49032,8 @@
entries, or there are five, and the fifth entry is an
<code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -49001,10 +49045,8 @@
entries, or there are four, and the fourth entry is an
<code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -82352,7 +82394,7 @@
does not <a href=#represents title=represents>represent</a> an image, but the
element already has intrinsic dimensions (e.g. from the
<a href=#dimension-attributes>dimension attributes</a> or CSS rules), and either the user
- agent has reason to believe that the image will become <i title=img-available><a href=#img-available>available</a></i><!--input-img-available also-->
+ agent has reason to believe that the image will become <i title=img-available>available</i><!--input-img-available also-->
and be rendered in due course or the <code><a href=#document>Document</a></code> is in
<a href=#quirks-mode>quirks mode</a>, the element is expected to be treated as a
replaced element whose content is the text that the element
Modified: source
===================================================================
--- source 2010-10-15 22:56:11 UTC (rev 5638)
+++ source 2010-10-19 00:09:38 UTC (rev 5639)
@@ -21931,8 +21931,7 @@
<p>The requirements on the <code title="attr-img-alt">alt</code>
attribute's value are described <a href="#alt">in the next
- section</a>.
- </p>
+ section</a>.</p>
<p>The <code>img</code> must not be used as a layout tool. In
particular, <code>img</code> elements should not be used to display
@@ -21943,18 +21942,80 @@
<hr>
- <p>Unless the user agent cannot support images, or its support for
- images has been disabled, or the user agent only fetches elements on
- demand, then, when an <code>img</code> is created with a <code
- title="attr-img-src">src</code> attribute, and whenever the <code
- title="attr-img-src">src</code> attribute is set subsequently, the
- user agent must run the following steps:</p> <!-- Note how this does
- NOT happen when the base URL changes. -->
+ <p>An <code>img</code> is always in one of the following states:</p>
+ <dl>
+
+ <dt><dfn title="img-none">Unavailable</dfn></dt>
+ <dd>The user agent hasn't obtained any image data.</dd>
+
+ <dt><dfn title="img-inc">Partially available</dfn></dt>
+ <dd>The user agent has obtained some of the image data.</dd>
+
+ <dt><dfn title="img-all">Completely available</dfn></dt>
+ <dd>The user agent has obtained all of the image data.</dd>
+
+ <dt><dfn title="img-error">Broken</dfn></dt>
+ <dd>The user agent has obtained all of the image data that it can,
+ but it cannot decode the image (e.g. the image is corrupted, or the
+ format is not supported, or no data could be obtained).</dd>
+
+ </dl>
+
+ <p>When an <code>img</code> element is either in the <span
+ title="img-inc">partially available</span> state or in the <span
+ title="img-all">completely available</span> state, it is said to be
+ <dfn title="img-yes">available</dfn>.</p>
+
+ <p>An <code>img</code> element is initially <span
+ title="img-none">unavailable</span>.</p>
+
+ <p>User agents may obtain images immediately or on demand.</p>
+
+ <p>A user agent that obtains images immediately must synchronously
+ <span>update the image data</span> of an <code>img</code> element
+ whenever that element is either created with a <code
+ title="attr-img-src">src</code> attribute, or has its <code
+ title="attr-img-src">src</code> attribute set, changed, or
+ removed.</p> <!-- Note how this does NOT happen when the base URL
+ changes. -->
+
+ <p>A user agent that obtains images on demand must <span>update the
+ image data</span> of an <code>img</code> element whenever it needs
+ the image data (i.e. on demand), but only if the <code>img</code>
+ element has a <code title="attr-img-src">src</code> attribute, and
+ if it has not <span title="update the image data">updated the image
+ data</span> since the last time the <code
+ title="attr-img-src">src</code> attribute was set. When an
+ <code>img</code> element's <code title="attr-img-src">src</code>
+ attribute is changed or removed, if the user agent only obtains
+ images on demand, the <code>img</code> element must return to the
+ <span title="img-none">unavailable</span> state.</p> <!-- Note how
+ this does NOT happen when the base URL changes. -->
+
+ <p>When the user agent is to <dfn>update the image data</dfn> of an
+ <code>img</code> element, it must run the following steps:</p>
+
<ol>
+ <li><p>Return the <code>img</code> element to the <span
+ title="img-none">unavailable</span> state.</p>
+
+ <li><p>If an instance of the <span title="fetch">fetching</span>
+ algorithm is still running for this element, then abort that
+ algorithm, discarding any pending <span
+ title="concept-task">tasks</span> generated by that
+ algorithm.</p></li>
+
+ <li><p>Forget the <code>img</code> element's current image data, if
+ any.</p></li>
+
+ <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 <span>queue a
+ 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>
@@ -21962,10 +22023,14 @@
<li>
<p>Otherwise, <span title="resolve a url">resolve</span> the value
- of that attribute, relative to the element, and if that is
- successful must then <span>fetch</span> that resource.</p> <!--
- http-origin privacy sensitive -->
+ of the element's <code title="attr-img-src">src</code> attribute,
+ relative to the element, and, if that is successful,
+ <span>fetch</span> that resource.</p> <!-- http-origin privacy
+ sensitive -->
+ <p>The resouce obtained in this fashion is the <code>img</code>
+ element's image data.</p>
+
<!-- same text in <input type=image> section and similar text
elsewhere --> <p>Fetching the image must <span>delay the load
event</span> of the element's document until the <span
@@ -21979,31 +22044,65 @@
conjunction with scripting, though scripting isn't actually
necessary to carry out such an attack). User agents may implement
<span title="origin">cross-origin</span> access control policies
- that mitigate this attack.</p>
+ that mitigate this attack, but unfortunately such policies are
+ typically not compatible with existing Web content.</p>
</li>
</ol>
- <p>If the image is in a supported image type and its dimensions are
- known, then the image is said to be <dfn
- title="img-available"><i>available</i></dfn> (this affects exactly
- what the element represents, as defined below). This can be true
- even before the image is completely downloaded, if the user agent
- supports incremental rendering of images; in such cases, 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. It can also stop being
- true, e.g. if the user agent finds, after obtaining the image's
- dimensions, that the image data is actually fatally corrupted.</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 set the <code>img</code> element's
+ state to <span title="img-inc">partially available</span> and update
+ the presentation of the image appropriately.</p>
- <p>If the image was not fetched (e.g. because the UA's image support
- is disabled, or because the <code title="attr-img-src">src</code>
- attribute's value is the empty string, or if the conditions in the
- previous paragraph are not met), then the image is <em>not</em> <i
- title="img-available">available</i>.</p>
+ <p id="img-load">The <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 act as appropriate given the
+ following alternatives:</p>
+ <dl class="switch">
+
+ <dt>If the download was successful</dt>
+
+ <dd>Set the <code>img</code> element to the <span
+ title="img-all">completely available</span> state, update the
+ presentation of the image appropriately, 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.</dd>
+
+ <dt>Otherwise</dt>
+
+ <dd>Set the <code>img</code> element to the <span
+ title="img-error">broken</span> state, and <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.</dd>
+
+ </dl>
+
+ <p>If at any point the user agent discovers that the image data is
+ corrupted in some fatal way, or that the image is not in a supported
+ file format, then the user agent must set the <code>img</code>
+ element to the <span title="img-error">broken</span> state. If the
+ <span title="fetch">fetching</span> algorithm is still running for
+ this element, then the user agent must also abort that algorithm,
+ discarding any pending <span title="concept-task">tasks</span>
+ generated by that algorithm, and then <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.</p>
+
+ <p>When an <code>img</code> element is in the <span
+ title="img-all">completely available</span> state <em>and</em> the
+ user agent can completely decode the media data without errors, then
+ the <code>img</code> element is said to be <dfn
+ title="img-good">fully decodable</dfn>.</p>
+
<p>Whether the image is fetched successfully or not (e.g. whether
the response code was a 2xx code <span
title="concept-http-equivalent-codes">or equivalent</span>) must be
@@ -22033,33 +22132,6 @@
<p>This specification does not specify which image types are to be
supported.</p>
- <p id="img-load">The <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 act as appropriate given the
- following alternatives:</p>
-
- <dl class="switch">
-
- <dt>If the download was successful and the image is <i
- title="img-available">available</i></dt>
-
- <dd><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 (this happens after <code
- title="dom-img-complete">complete</code> starts returning
- true).</dd>
-
- <dt>Otherwise (the fetching process failed without a response from
- the remote server, or completed but the image is not a supported
- image)</dt>
-
- <dd><span>Queue a task</span> to <span>fire a simple event</span>
- named <code title="event-error">error</code> on the
- <code>img</code> element.</dd>
-
- </dl>
-
<p>The <span>task source</span> for these <span
title="concept-task">tasks</span> is the <span>DOM manipulation
task source</span>.</p>
@@ -22082,10 +22154,9 @@
the content, redundant with some other information in the
document.</p>
- <p>If the image is <i title="img-available">available</i> and the
+ <p>If the image is <span title="img-yes">available</span> and the
user agent is configured to display that image, then the element
- <span>represents</span> the image specified by the <code
- title="attr-img-src">src</code> attribute.</p>
+ <span>represents</span> the element's image data.</p>
<p>Otherwise, the element <span>represents</span> nothing, and may
be omitted completely from the rendering. User agents may provide
@@ -22104,10 +22175,9 @@
title="attr-img-alt">alt</code> attribute gives a textual
equivalent or replacement for the image.</p>
- <p>If the image is <i title="img-available">available</i> and the
+ <p>If the image is <span title="img-yes">available</span> and the
user agent is configured to display that image, then the element
- <span>represents</span> the image specified by the <code
- title="attr-img-src">src</code> attribute.</p>
+ <span>represents</span> the element's image data.</p>
<p>Otherwise, the element <span>represents</span> the text given
by the <code title="attr-img-alt">alt</code> attribute. User
@@ -22129,17 +22199,15 @@
is a key part of the content but that a textual replacement for
the image was not available when the image was generated.</p>
- <p>If the image is <i title="img-available">available</i>, the
- element <span>represents</span> the image specified by the <code
- title="attr-img-src">src</code> attribute.</p>
+ <p>If the image is <span title="img-yes">available</span> and the
+ user agent is configured to display that image, then the element
+ <span>represents</span> the element's image data.</p>
- <p>If the image is not <i title="img-available">available</i> or
- if the user agent is not configured to display the image, then the
- user agent should display some sort of indicator that there is an
- image that is not being rendered, and may, if requested by the
- user, or if so configured, or when required to provide contextual
- information in response to navigation, provide caption information
- for the image, derived as follows:</p>
+ <p>Otherwise, the user agent should display some sort of indicator
+ that there is an image that is not being rendered, and may, if
+ requested by the user, or if so configured, or when required to
+ provide contextual information in response to navigation, provide
+ caption information for the image, derived as follows:</p>
<ol>
@@ -22281,9 +22349,8 @@
<dd>
- <p>Returns true if the image has been downloaded, decoded, and
- found to be valid, or if no image is specified; otherwise, returns
- false.</p>
+ <p>Returns true if the image has been completely downloaded or if
+ no image is specified; otherwise, returns false.</p>
</dd>
@@ -22326,15 +22393,14 @@
<p>The IDL attribute <dfn
title="dom-img-complete"><code>complete</code></dfn> must return
- true if either the <code title="attr-img-src">src</code> attribute
- is omitted, or its value is the empty string, or if the user agent
- has fetched the image specified in the <code
- title="attr-img-src">src</code> attribute and it is in a supported
- image type (i.e. it was decoded without fatal errors), even if the
- final <span title="concept-task">task</span> queued by the
- <span>networking task source</span> for the <span
- title="fetch">fetching</span> of the image resource has not yet been
- processed. Otherwise, the attribute must return false.</p>
+ true if any of the following conditions is true:</p>
+ <ul class="brief">
+ <li>The <code title="attr-img-src">src</code> attribute is omitted.
+ <li>The <code title="attr-img-src">src</code> attribute's value is the empty string.
+ <li>The final <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> has been <span title="queue a task">queued</span>, but has not yet been run, and the <code>img</code> element is not in the <span title="img-error">broken</span> state.
+ <li>The <code>img</code> element is <span title="img-all">completely available</span>.
+ </ul>
+ <p>Otherwise, the attribute must return false.</p>
<p class="note">The value of <code
title="dom-img-complete">complete</code> can thus change while a
@@ -34664,13 +34730,12 @@
exception.</p> <!-- drawImage() has an equivalent paragraph -->
<p>If the <var title="">image</var> argument is an
- <code>HTMLImageElement</code> object whose <code
- title="dom-img-complete">complete</code> attribute is false or whose
- <code title="attr-img-src">src</code> attribute is omitted or empty,
- or if the <var title="">image</var> argument is an
- <code>HTMLVideoElement</code> object whose <code
- title="dom-media-readyState">readyState</code> attribute is either
- <code title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
+ <code>HTMLImageElement</code> object that is not <span
+ title="img-good">fully decodable</span>, or if the <var
+ title="">image</var> argument is an <code>HTMLVideoElement</code>
+ object whose <code title="dom-media-readyState">readyState</code>
+ attribute is either <code
+ title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then the
implementation must return null.</p> <!-- drawImage() has an
equivalent paragraph -->
@@ -36420,13 +36485,12 @@
exception.</p> <!-- createPattern() has an equivalent paragraph -->
<p>If the <var title="">image</var> argument is an
- <code>HTMLImageElement</code> object whose <code
- title="dom-img-complete">complete</code> attribute is false or whose
- <code title="attr-img-src">src</code> attribute is omitted or empty,
- or if the <var title="">image</var> argument is an
- <code>HTMLVideoElement</code> object whose <code
- title="dom-media-readyState">readyState</code> attribute is either
- <code title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
+ <code>HTMLImageElement</code> object that is not <span
+ title="img-good">fully decodable</span>, or if the <var
+ title="">image</var> argument is an <code>HTMLVideoElement</code>
+ object whose <code title="dom-media-readyState">readyState</code>
+ attribute is either <code
+ title="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
title="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then the
implementation must return without drawing anything.</p> <!--
createPattern() has an equivalent paragraph -->
@@ -54246,10 +54310,9 @@
</li>
<li><p>If the <var title="">icon</var> argument is present and not
- null, but the given <code>img</code> element's <code
- title="dom-img-complete">complete</code> attribute is false or its
- <code title="attr-img-src">src</code> attribute is omitted or
- empty, then let <var title="">icon</var> be null.</p></li>
+ null, but the given <code>img</code> element is not in the <span
+ title="img-all">completely available</span> state, then let <var
+ title="">icon</var> be null.</p></li>
<li><p>If the <var title="">icon</var> argument is present and not
null, then copy the image data from that <code>img</code> element,
@@ -54923,10 +54986,8 @@
only two entries, or there are three, and the third entry is
an <code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -54939,10 +55000,8 @@
entries, or there are four, and the fourth entry is an
<code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -54955,10 +55014,8 @@
entries, or there are five, and the fifth entry is an
<code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
@@ -54970,10 +55027,8 @@
entries, or there are four, and the fourth entry is an
<code>img</code> element.</p>
- <p>If there is an <code>img</code> element specified, its <code
- title="dom-img-complete">complete</code> attribute is true and
- its <code title="attr-img-src">src</code> attribute is neither
- omitted nor empty.</p>
+ <p>If there is an <code>img</code> element specified, it is in
+ the <span title="img-all">completely available</span> state.</p>
</dd>
More information about the Commit-Watchers
mailing list