[html5] r7654 - [e] (0) Cleanup Affected topics: HTML
whatwg at whatwg.org
whatwg at whatwg.org
Fri Jan 25 17:05:12 PST 2013
Author: ianh
Date: 2013-01-25 17:05:11 -0800 (Fri, 25 Jan 2013)
New Revision: 7654
Modified:
complete.html
index
source
Log:
[e] (0) Cleanup
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2013-01-26 01:00:42 UTC (rev 7653)
+++ complete.html 2013-01-26 01:05:11 UTC (rev 7654)
@@ -13974,75 +13974,61 @@
};
<a href=#htmllinkelement>HTMLLinkElement</a> implements <a href=#linkstyle>LinkStyle</a>;</pre>
</dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-link-element>link</a></code> element allows authors to link their
- document to other resources.</p>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-link-element>link</a></code> element allows authors to link their document to other resources.</p>
- <p>The destination of the link(s) is given by the <dfn id=attr-link-href title=attr-link-href><code>href</code></dfn> attribute, which must
- be present and must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
- surrounded by spaces</a>. <span class=impl>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute is absent, then the
- element does not define a link.</span></p>
+ <p>The destination of the link(s) is given by the <dfn id=attr-link-href title=attr-link-href><code>href</code></dfn> attribute, which must be present and must contain a
+ <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>. <span class=impl>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute is absent, then the element does not define a
+ link.</span></p>
- <p>A <code><a href=#the-link-element>link</a></code> element must have either a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute or an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, but not both.</p>
+ <p>A <code><a href=#the-link-element>link</a></code> element must have either a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute
+ or an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, but not both.</p>
- <p class=note>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code>
- attribute is used, the element is restricted to the
- <code><a href=#the-head-element>head</a></code> element. When used with the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, the element can be
- used both in the <code><a href=#the-head-element>head</a></code> element and in the
- <code><a href=#the-body-element>body</a></code> of the page, subject to the constraints of the
- microdata model.</p>
+ <p class=note>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute is used, the element is
+ restricted to the <code><a href=#the-head-element>head</a></code> element. When used with the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, the element can be used both in the
+ <code><a href=#the-head-element>head</a></code> element and in the <code><a href=#the-body-element>body</a></code> of the page, subject to the constraints of
+ the microdata model.</p>
- <p>The types of link indicated (the relationships) are given by the
- value of the <dfn id=attr-link-rel title=attr-link-rel><code>rel</code></dfn>
- attribute, which, if present, must have a value that is a <a href=#set-of-space-separated-tokens>set
- of space-separated tokens</a>. The <a href=#linkTypes>allowed
- keywords and their meanings</a> are defined in a later
- section. <span class=impl>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute is absent, has no
- keywords, or if none of the keywords used are allowed according to
- the definitions in this specification, then the element does not
+ <p>The types of link indicated (the relationships) are given by the value of the <dfn id=attr-link-rel title=attr-link-rel><code>rel</code></dfn> attribute, which, if present, must have a value that
+ is a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a>. The <a href=#linkTypes>allowed keywords and
+ their meanings</a> are defined in a later section. <span class=impl>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute is absent, has no keywords, or if none of the keywords
+ used are allowed according to the definitions in this specification, then the element does not
create any links.</span></p>
- <p>Two categories of links can be created using the
- <code><a href=#the-link-element>link</a></code> element: <a href=#external-resource-link title="external resource
- link">Links to external resources</a> and <a href=#hyperlink title=hyperlink>hyperlinks</a>. The <a href=#linkTypes>link
- types section</a> defines whether a particular link type is an
- external resource or a hyperlink. One <code><a href=#the-link-element>link</a></code> element can
- create multiple links (of which some might be external resource
- links and some might be hyperlinks); exactly which and how many
- links are created depends on the keywords given in the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute. User agents must process
- the links on a per-link basis, not a per-element basis.</p>
+ <p>Two categories of links can be created using the <code><a href=#the-link-element>link</a></code> element: <a href=#external-resource-link title="external resource link">Links to external resources</a> and <a href=#hyperlink title=hyperlink>hyperlinks</a>. The <a href=#linkTypes>link types section</a> defines
+ whether a particular link type is an external resource or a hyperlink. One <code><a href=#the-link-element>link</a></code>
+ element can create multiple links (of which some might be external resource links and some might
+ be hyperlinks); exactly which and how many links are created depends on the keywords given in the
+ <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute. User agents must process the links on a per-link
+ basis, not a per-element basis.</p>
- <p class=note>Each link created for a <code><a href=#the-link-element>link</a></code> element is
- handled separately. For instance, if there are two <code><a href=#the-link-element>link</a></code>
- elements with <code title="">rel="stylesheet"</code>, they each
- count as a separate external resource, and each is affected by its
- own attributes independently. Similarly, if a single
- <code><a href=#the-link-element>link</a></code> element has a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute with the value <code title="">next stylesheet</code>, it creates both a
- <a href=#hyperlink>hyperlink</a> (for the <code title=rel-next><a href=#link-type-next>next</a></code>
- keyword) and an <a href=#external-resource-link>external resource link</a> (for the <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword), and they are
- affected by other attributes (such as <code title=attr-link-media><a href=#attr-link-media>media</a></code> or <code title=attr-link-title><a href=#attr-link-title>title</a></code>) differently.</p>
+ <p class=note>Each link created for a <code><a href=#the-link-element>link</a></code> element is handled separately. For
+ instance, if there are two <code><a href=#the-link-element>link</a></code> elements with <code title="">rel="stylesheet"</code>,
+ they each count as a separate external resource, and each is affected by its own attributes
+ independently. Similarly, if a single <code><a href=#the-link-element>link</a></code> element has a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute with the value <code title="">next stylesheet</code>,
+ it creates both a <a href=#hyperlink>hyperlink</a> (for the <code title=rel-next><a href=#link-type-next>next</a></code> keyword) and
+ an <a href=#external-resource-link>external resource link</a> (for the <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code>
+ keyword), and they are affected by other attributes (such as <code title=attr-link-media><a href=#attr-link-media>media</a></code> or <code title=attr-link-title><a href=#attr-link-title>title</a></code>)
+ differently.</p>
<div class=example>
- <p>For example, the following <code><a href=#the-link-element>link</a></code> element creates two
- hyperlinks (to the same page):</p>
+ <p>For example, the following <code><a href=#the-link-element>link</a></code> element creates two hyperlinks (to the same
+ page):</p>
<pre><link rel="author license" href="/about"></pre>
- <p>The two links created by this element are one whose semantic is
- that the target page has information about the current page's
- author, and one whose semantic is that the target page has
- information regarding the license under which the current page is
- provided.</p>
+ <p>The two links created by this element are one whose semantic is that the target page has
+ information about the current page's author, and one whose semantic is that the target page has
+ information regarding the license under which the current page is provided.</p>
</div>
<p>The <dfn id=attr-link-crossorigin title=attr-link-crossorigin><code>crossorigin</code></dfn> attribute is a <a href=#cors-settings-attribute>CORS
settings attribute</a>. It is intended for use with external resource links.</p>
- <p>The exact behavior for links to external resources depends on the
- exact relationship, as defined for the relevant link type. Some of
- the attributes control whether or not the external resource is to be
- applied (as defined below).</p>
+ <p>The exact behavior for links to external resources depends on the exact relationship, as
+ defined for the relevant link type. Some of the attributes control whether or not the external
+ resource is to be applied (as defined below).</p>
<div class=impl>
@@ -14051,12 +14037,10 @@
not applied. To <dfn id=concept-link-obtain title=concept-link-obtain>obtain the resource</dfn>, the user agent must
run the following steps:</p>
- <ol><li><p>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute's
- value is the empty string, then abort these steps.</li>
+ <ol><li><p>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute's value is the empty string,
+ then abort these steps.</li>
- <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the
- <a href=#url>URL</a> given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute, relative to the
- element.</li>
+ <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the <a href=#url>URL</a> given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute, relative to the element.</li>
<li><p>If the previous step fails, then abort these steps.</li>
@@ -14072,161 +14056,133 @@
</li>
- </ol><p>User agents may opt to only try to obtain such resources when
- they are needed, instead of pro-actively <a href=#fetch title=fetch>fetching</a> all the external resources that are
- not applied.</p>
+ </ol><p>User agents may opt to only try to obtain such resources when they are needed, instead of
+ pro-actively <a href=#fetch title=fetch>fetching</a> all the external resources that are not
+ applied.</p>
- <p>The semantics of the protocol used (e.g. HTTP) must be followed
- when fetching external resources. (For example, redirects will be
- followed and 404 responses will cause the external resource to not
- be applied.)</p>
+ <p>The semantics of the protocol used (e.g. HTTP) must be followed when fetching external
+ resources. (For example, redirects will be followed and 404 responses will cause the external
+ resource to not be applied.)</p>
<!-- the next few paragraph are similar to text in the <style> section -->
- <p>Once the attempts to obtain the resource and its <a href=#critical-subresources>critical
- subresources</a> are complete, the user agent must, if the loads
- were successful, <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-link-element>link</a></code> element, or, if the resource or one of its
- <a href=#critical-subresources>critical subresources</a> failed to completely load for any
- reason (e.g. DNS error, HTTP 404 response, a connection being
- prematurely closed, unsupported Content-Type), <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-link-element>link</a></code>
- element. Non-network errors in processing the resource or its
- subresources (e.g. CSS parse errors, PNG decoding errors) are not
- failures for the purposes of this paragraph.</p>
+ <p>Once the attempts to obtain the resource and its <a href=#critical-subresources>critical subresources</a> are
+ complete, the user agent must, if the loads were successful, <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-link-element>link</a></code> element, or, if the resource or one of its <a href=#critical-subresources>critical subresources</a>
+ failed to completely load for any reason (e.g. DNS error, HTTP 404 response, a connection being
+ prematurely closed, unsupported Content-Type), <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-link-element>link</a></code> element.
+ Non-network errors in processing the resource or its subresources (e.g. CSS parse errors, PNG
+ decoding errors) are not failures for the purposes of this paragraph.</p>
- <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>
+ <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>
- <p>The element must <a href=#delay-the-load-event>delay the load event</a> of the
- element's document until all the attempts to obtain the resource and
- its <a href=#critical-subresources>critical subresources</a> are complete. (Resources that
- the user agent has not yet attempted to obtain, e.g. because it is
- waiting for the resource to be needed, do not <a href=#delay-the-load-event>delay the load
- event</a>.)</p>
+ <p>The element must <a href=#delay-the-load-event>delay the load event</a> of the element's document until all the
+ attempts to obtain the resource and its <a href=#critical-subresources>critical subresources</a> are complete.
+ (Resources that the user agent has not yet attempted to obtain, e.g. because it is waiting for the
+ resource to be needed, do not <a href=#delay-the-load-event>delay the load event</a>.)</p>
- <hr><p id=linkui>Interactive user agents may provide users with a
- means to <a href=#following-hyperlinks title="following hyperlinks">follow the
- hyperlinks</a> created using the <code><a href=#the-link-element>link</a></code> element,
- somewhere within their user interface. The exact interface is not
- defined by this specification, but it could include the following
- information (obtained from the element's attributes, again as
- defined below), in some form or another (possibly simplified), for
- each hyperlink created with each <code><a href=#the-link-element>link</a></code> element in the
- document:</p>
+ <hr><p id=linkui>Interactive user agents may provide users with a means to <a href=#following-hyperlinks title="following
+ hyperlinks">follow the hyperlinks</a> created using the <code><a href=#the-link-element>link</a></code> element, somewhere
+ within their user interface. The exact interface is not defined by this specification, but it
+ could include the following information (obtained from the element's attributes, again as defined
+ below), in some form or another (possibly simplified), for each hyperlink created with each
+ <code><a href=#the-link-element>link</a></code> element in the document:</p>
- <ul><!-- the order here is the order that makes most sense for a UI --><li>The relationship between this document and the resource (given
- by the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute)</li>
+ <ul><!-- the order here is the order that makes most sense for a UI --><li>The relationship between this document and the resource (given by the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute)</li>
- <li>The title of the resource (given by the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute).</li>
+ <li>The title of the resource (given by the <code title=attr-link-title><a href=#attr-link-title>title</a></code>
+ attribute).</li>
- <li>The address of the resource (given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute).</li>
+ <li>The address of the resource (given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code>
+ attribute).</li>
- <li>The language of the resource (given by the <code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code> attribute).</li>
+ <li>The language of the resource (given by the <code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code>
+ attribute).</li>
- <li>The optimum media for the resource (given by the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute).</li>
+ <li>The optimum media for the resource (given by the <code title=attr-link-media><a href=#attr-link-media>media</a></code>
+ attribute).</li>
- </ul><p>User agents could also include other information, such as the
- type of the resource (as given by the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute).</p>
+ </ul><p>User agents could also include other information, such as the type of the resource (as given by
+ the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute).</p>
</div>
- <p class=note>Hyperlinks created with the <code><a href=#the-link-element>link</a></code>
- element and its <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute
- apply to the whole page. This contrasts with the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute of <code><a href=#the-a-element>a</a></code>
- and <code><a href=#the-area-element>area</a></code> elements, which indicates the type of a link
- whose context is given by the link's location within the
+ <p class=note>Hyperlinks created with the <code><a href=#the-link-element>link</a></code> element and its <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute apply to the whole page. This contrasts with the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute of <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements,
+ which indicates the type of a link whose context is given by the link's location within the
document.</p>
- <p>The <dfn id=attr-link-media title=attr-link-media><code>media</code></dfn>
- attribute says which media the resource applies to. The value must
- be a <a href=#valid-media-query>valid media query</a>.</p>
+ <p>The <dfn id=attr-link-media title=attr-link-media><code>media</code></dfn> attribute says which media the
+ resource applies to. The value must be a <a href=#valid-media-query>valid media query</a>.</p>
<div class=impl>
- <p>If the link is a <a href=#hyperlink>hyperlink</a> then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is purely advisory,
- and describes for which media the document in question was
+ <p>If the link is a <a href=#hyperlink>hyperlink</a> then the <code title=attr-link-media><a href=#attr-link-media>media</a></code>
+ attribute is purely advisory, and describes for which media the document in question was
designed.</p>
- <p>However, if the link is an <a href=#external-resource-link>external resource link</a>,
- then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is
- prescriptive. The user agent must apply the external resource when
- the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute's value
- <a href=#matches-the-environment>matches the environment</a> and the other relevant
- conditions apply, and must not apply it otherwise.</p><!-- note
- similar text in <style> section -->
+ <p>However, if the link is an <a href=#external-resource-link>external resource link</a>, then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is prescriptive. The user agent must apply the
+ external resource when the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute's value
+ <a href=#matches-the-environment>matches the environment</a> and the other relevant conditions apply, and must not apply
+ it otherwise.</p><!-- note similar text in <style> section -->
- <p class=note>The external resource might have further
- restrictions defined within that limit its applicability. For
- example, a CSS style sheet might have some <code title="">@media</code> blocks. This specification does not override
- such further restrictions or requirements.</p><!-- note similar text
- in <style> section -->
+ <p class=note>The external resource might have further restrictions defined within that limit
+ its applicability. For example, a CSS style sheet might have some <code title="">@media</code>
+ blocks. This specification does not override such further restrictions or requirements.</p><!--
+ note similar text in <style> section -->
</div>
- <p id=default-media>The default, if the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is omitted, is "<code title="">all</code>", meaning that by default links apply to all
- media.</p>
+ <p id=default-media>The default, if the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is
+ omitted, is "<code title="">all</code>", meaning that by default links apply to all media.</p>
- <p>The <dfn id=attr-link-hreflang title=attr-link-hreflang><code>hreflang</code></dfn>
- attribute on the <code><a href=#the-link-element>link</a></code> element has the same semantics as
- the <a href=#attr-hyperlink-hreflang title=attr-hyperlink-hreflang><code>hreflang</code>
- attribute on <code>a</code> and <code>area</code>
- elements</a>.</p>
+ <p>The <dfn id=attr-link-hreflang title=attr-link-hreflang><code>hreflang</code></dfn> attribute on the
+ <code><a href=#the-link-element>link</a></code> element has the same semantics as the <a href=#attr-hyperlink-hreflang title=attr-hyperlink-hreflang><code>hreflang</code> attribute on <code>a</code> and
+ <code>area</code> elements</a>.</p>
- <p>The <dfn id=attr-link-type title=attr-link-type><code>type</code></dfn> attribute
- gives the <a href=#mime-type>MIME type</a> of the linked resource. It is
- purely advisory. The value must be a <a href=#valid-mime-type>valid MIME
+ <p>The <dfn id=attr-link-type title=attr-link-type><code>type</code></dfn> attribute gives the <a href=#mime-type>MIME
+ type</a> of the linked resource. It is purely advisory. The value must be a <a href=#valid-mime-type>valid MIME
type</a>.</p>
- <p>For <a href=#external-resource-link title="external resource link">external resource
- links</a>, the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute
- is used as a hint to user agents so that they can avoid fetching
- resources they do not support. <span class=impl>If the attribute
- is present, then the user agent must assume that the resource is of
- the given type (even if that is not a <a href=#valid-mime-type>valid MIME type</a>,
- e.g. the empty string). If the attribute is omitted, but the
- external resource link type has a default type defined, then the
- user agent must assume that the resource is of that type. If the UA
- does not support the given <a href=#mime-type>MIME type</a> for the given link
- relationship, then the UA should not <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource; if the UA
- does support the given <a href=#mime-type>MIME type</a> for the given link
- relationship, then the UA should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource at the
- appropriate time as specified for the <a href=#external-resource-link>external resource
- link</a>'s particular type. If the attribute is omitted, and the
- external resource link type does not have a default type defined,
- but the user agent would <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource if the type
- was known and supported, then the user agent should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource under the
- assumption that it will be supported.</span></p>
+ <p>For <a href=#external-resource-link title="external resource link">external resource links</a>, the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute is used as a hint to user agents so that they can
+ avoid fetching resources they do not support. <span class=impl>If the attribute is present, then
+ the user agent must assume that the resource is of the given type (even if that is not a
+ <a href=#valid-mime-type>valid MIME type</a>, e.g. the empty string). If the attribute is omitted, but the
+ external resource link type has a default type defined, then the user agent must assume that the
+ resource is of that type. If the UA does not support the given <a href=#mime-type>MIME type</a> for the
+ given link relationship, then the UA should not <a href=#concept-link-obtain title=concept-link-obtain>obtain</a>
+ the resource; if the UA does support the given <a href=#mime-type>MIME type</a> for the given link
+ relationship, then the UA should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource at
+ the appropriate time as specified for the <a href=#external-resource-link>external resource link</a>'s particular type.
+ If the attribute is omitted, and the external resource link type does not have a default type
+ defined, but the user agent would <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource if
+ the type was known and supported, then the user agent should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource under the assumption that it will be
+ supported.</span></p>
<div class=impl>
- <p>User agents must not consider the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute authoritative —
- upon fetching the resource, user agents must not use the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute to determine its actual
- type. Only the actual type (as defined in the next paragraph) is
- used to determine whether to <em>apply</em> the resource, not the
- aforementioned assumed type.</p>
+ <p>User agents must not consider the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute
+ authoritative — upon fetching the resource, user agents must not use the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute to determine its actual type. Only the actual type
+ (as defined in the next paragraph) is used to determine whether to <em>apply</em> the resource,
+ not the aforementioned assumed type.</p>
- <p id=concept-link-type-sniffing>If the external resource link
- type defines rules for processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, then those rules
- apply. Otherwise, if the resource is expected to be an image, user
- agents may apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing:
- image">image sniffing rules</a>, with the <var title="">official
- type</var> being the type determined from the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, and use the
- resulting sniffed type of the resource as if it was the actual
- type. Otherwise, if neither of these conditions apply or if the user
- agent opts not to apply the image sniffing rules, then the user
- agent must use the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a> to determine the
- type of the resource. If there is no type metadata, but the external
- resource link type has a default type defined, then the user agent
- must assume that the resource is of that type.</p>
+ <p id=concept-link-type-sniffing>If the external resource link type defines rules for processing
+ the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, then those rules apply.
+ Otherwise, if the resource is expected to be an image, user agents may apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a>, with the <var title="">official
+ type</var> being the type determined from the resource's <a href=#content-type title=Content-Type>Content-Type
+ metadata</a>, and use the resulting sniffed type of the resource as if it was the actual type.
+ Otherwise, if neither of these conditions apply or if the user agent opts not to apply the image
+ sniffing rules, then the user agent must use the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a> to determine the type of the resource. If there
+ is no type metadata, but the external resource link type has a default type defined, then the user
+ agent must assume that the resource is of that type.</p>
- <p class=note>The <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code>
- link type defines rules for processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>.</p>
+ <p class=note>The <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> link type defines rules for
+ processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>.</p>
- <p>Once the user agent has established the type of the resource, the
- user agent must apply the resource if it is of a supported type and
- the other relevant conditions apply, and must ignore the resource
- otherwise.</p>
+ <p>Once the user agent has established the type of the resource, the user agent must apply the
+ resource if it is of a supported type and the other relevant conditions apply, and must ignore the
+ resource otherwise.</p>
<div class=example>
@@ -14236,64 +14192,53 @@
<link rel="stylesheet" href="B" type="text/css">
<link rel="stylesheet" href="C"></pre>
- <p>...then a compliant UA that supported only CSS style sheets
- would fetch the B and C files, and skip the A file (since
- <code>text/plain</code> is not the <a href=#mime-type>MIME type</a> for CSS style
+ <p>...then a compliant UA that supported only CSS style sheets would fetch the B and C files, and
+ skip the A file (since <code>text/plain</code> is not the <a href=#mime-type>MIME type</a> for CSS style
sheets).</p>
- <p>For files B and C, it would then check the actual types returned
- by the server. For those that are sent as <code>text/css</code>, it
- would apply the styles, but for those labeled as
+ <p>For files B and C, it would then check the actual types returned by the server. For those that
+ are sent as <code>text/css</code>, it would apply the styles, but for those labeled as
<code>text/plain</code>, or any other type, it would not.</p>
- <p>If one of the two files was returned without a
- <a href=#content-type>Content-Type</a> metadata, or with a syntactically
- incorrect type like <code title="">Content-Type: "null"</code>, then the default type
- for <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> links would kick
- in. Since that default type is <code title="">text/css</code>, the
- style sheet <em>would</em> nonetheless be applied.</p>
+ <p>If one of the two files was returned without a <a href=#content-type>Content-Type</a> metadata, or with a
+ syntactically incorrect type like <code title="">Content-Type: "null"</code>, then the
+ default type for <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> links would kick in. Since that
+ default type is <code title="">text/css</code>, the style sheet <em>would</em> nonetheless be
+ applied.</p>
</div>
</div>
- <p>The <dfn id=attr-link-title title=attr-link-title><code>title</code></dfn>
- attribute gives the title of the link. With one exception, it is
- purely advisory. The value is text. The exception is for style sheet
- links, where the <code title=attr-link-title><a href=#attr-link-title>title</a></code>
- attribute defines <a href=#alternative-style-sheet-sets>alternative style sheet sets</a>.</p>
+ <p>The <dfn id=attr-link-title title=attr-link-title><code>title</code></dfn> attribute gives the title of the
+ link. With one exception, it is purely advisory. The value is text. The exception is for style
+ sheet links, where the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute defines
+ <a href=#alternative-style-sheet-sets>alternative style sheet sets</a>.</p>
- <p class=note>The <code title=attr-link-title><a href=#attr-link-title>title</a></code>
- attribute on <code><a href=#the-link-element>link</a></code> elements differs from the global
- <code title=attr-title><a href=#attr-title>title</a></code> attribute of most other
- elements in that a link without a title does not inherit the title
- of the parent element: it merely has no title.</p>
+ <p class=note>The <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute on <code><a href=#the-link-element>link</a></code>
+ elements differs from the global <code title=attr-title><a href=#attr-title>title</a></code> attribute of most other
+ elements in that a link without a title does not inherit the title of the parent element: it
+ merely has no title.</p>
- <p>The <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attribute is used
- with the <code title=rel-icon><a href=#rel-icon>icon</a></code> link type. The attribute
- must not be specified on <code><a href=#the-link-element>link</a></code> elements that do not have
- a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute that specifies
- the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword.</p>
+ <p>The <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attribute is used with the <code title=rel-icon><a href=#rel-icon>icon</a></code> link type. The attribute must not be specified on <code><a href=#the-link-element>link</a></code>
+ elements that do not have a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute that specifies the
+ <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword.</p>
<div class=impl>
<!--!--><!-- s/header fields/headers/ for consistency with the rest of the spec -->
- <p>HTTP <code title=http-link>Link:</code> header fields, if
- supported, must be assumed to come before any links in the document,
- in the order that they were given in the HTTP message. These header
- fields are to be processed according to the rules given in the
- relevant specifications. <a href=#refsHTTP>[HTTP]</a> <a href=#refsWEBLINK>[WEBLINK]</a></p> <!-- WEBLINK is ref for Link:
+ <p>HTTP <code title=http-link>Link:</code> header fields, if supported, must be assumed to come
+ before any links in the document, in the order that they were given in the HTTP message. These
+ header fields are to be processed according to the rules given in the relevant specifications. <a href=#refsHTTP>[HTTP]</a> <a href=#refsWEBLINK>[WEBLINK]</a></p> <!-- WEBLINK is ref for Link:
header -->
- <p class=note>Registration of relation types in HTTP Link: header
- fields is distinct from <a href=#linkTypes>HTML link types</a>,
- and thus their semantics can be different from same-named HTML
- types.</p>
+ <p class=note>Registration of relation types in HTTP Link: header fields is distinct from <a href=#linkTypes>HTML link types</a>, and thus their semantics can be different from same-named
+ HTML types.</p>
- <p>The IDL attributes <dfn id=dom-link-href title=dom-link-href><code>href</code></dfn>, <dfn id=dom-link-rel title=dom-link-rel><code>rel</code></dfn>, <dfn id=dom-link-media title=dom-link-media><code>media</code></dfn>, <dfn id=dom-link-hreflang title=dom-link-hreflang><code>hreflang</code></dfn>, <dfn id=dom-link-type title=dom-link-type><code>type</code></dfn>, and <dfn id=dom-link-sizes title=dom-link-sizes><code>sizes</code></dfn> each must
- <a href=#reflect>reflect</a> the respective content attributes of the same
- name.</p>
+ <p>The IDL attributes <dfn id=dom-link-href title=dom-link-href><code>href</code></dfn>, <dfn id=dom-link-rel title=dom-link-rel><code>rel</code></dfn>, <dfn id=dom-link-media title=dom-link-media><code>media</code></dfn>,
+ <dfn id=dom-link-hreflang title=dom-link-hreflang><code>hreflang</code></dfn>, <dfn id=dom-link-type title=dom-link-type><code>type</code></dfn>, and <dfn id=dom-link-sizes title=dom-link-sizes><code>sizes</code></dfn> each must <a href=#reflect>reflect</a> the respective
+ content attributes of the same name.</p>
<p>The <dfn id=dom-link-crossorigin title=dom-link-crossOrigin><code>crossOrigin</code></dfn> IDL attribute must
<a href=#reflect>reflect</a> the <code title=attr-link-crossorigin><a href=#attr-link-crossorigin>crossorigin</a></code> content
@@ -14303,17 +14248,13 @@
</div>
- <p>The IDL attribute <dfn id=dom-link-disabled title=dom-link-disabled><code>disabled</code></dfn> only applies
- to style sheet links. When the <code><a href=#the-link-element>link</a></code> element defines a
- style sheet link, then the <code title=dom-link-disabled><a href=#dom-link-disabled>disabled</a></code> attribute behaves as
- defined <a href=#dom-linkstyle-disabled title=dom-linkstyle-disabled>for the alternative
- style sheets DOM</a>. For all other <code><a href=#the-link-element>link</a></code> elements it
- always return false and does nothing on setting.</p> <!-- that is
+ <p>The IDL attribute <dfn id=dom-link-disabled title=dom-link-disabled><code>disabled</code></dfn> only applies to
+ style sheet links. When the <code><a href=#the-link-element>link</a></code> element defines a style sheet link, then the <code title=dom-link-disabled><a href=#dom-link-disabled>disabled</a></code> attribute behaves as defined <a href=#dom-linkstyle-disabled title=dom-linkstyle-disabled>for the alternative style sheets DOM</a>. For all other
+ <code><a href=#the-link-element>link</a></code> elements it always return false and does nothing on setting.</p> <!-- that is
normatively required in the definition of dom-linkstyle-disabled -->
- <p>The <code><a href=#linkstyle>LinkStyle</a></code> interface is also implemented by
- this element; the <a href=#styling>styling processing model</a> defines
- how. <a href=#refsCSSOM>[CSSOM]</a></p>
+ <p>The <code><a href=#linkstyle>LinkStyle</a></code> interface is also implemented by this element; the <a href=#styling>styling
+ processing model</a> defines how. <a href=#refsCSSOM>[CSSOM]</a></p>
<div class=example>
@@ -14335,9 +14276,8 @@
<div class=example>
- <p>The following example shows how you can specify versions of the
- page that use alternative formats, are aimed at other languages,
- and that are intended for other media:</p>
+ <p>The following example shows how you can specify versions of the page that use alternative
+ formats, are aimed at other languages, and that are intended for other media:</p>
<pre><link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
@@ -14381,66 +14321,51 @@
attribute DOMString <a href=#dom-meta-content title=dom-meta-content>content</a>;
};</pre>
</dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-meta-element>meta</a></code> element <a href=#represents>represents</a> various
- kinds of metadata that cannot be expressed using the
- <code><a href=#the-title-element>title</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-link-element>link</a></code>,
- <code><a href=#the-style-element>style</a></code>, and <code><a href=#the-script-element>script</a></code> elements.</p>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-meta-element>meta</a></code> element <a href=#represents>represents</a> various kinds of metadata that cannot be
+ expressed using the <code><a href=#the-title-element>title</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#the-style-element>style</a></code>,
+ and <code><a href=#the-script-element>script</a></code> elements.</p>
- <p>The <code><a href=#the-meta-element>meta</a></code> element can represent document-level
- metadata with the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>
- attribute, pragma directives with the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute, and the
- file's <a href=#character-encoding-declaration>character encoding declaration</a> when an HTML
- document is serialized to string form (e.g. for transmission over
- the network or for disk storage) with the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute.</p>
+ <p>The <code><a href=#the-meta-element>meta</a></code> element can represent document-level metadata with the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute, pragma directives with the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute, and the file's <a href=#character-encoding-declaration>character encoding
+ declaration</a> when an HTML document is serialized to string form (e.g. for transmission over
+ the network or for disk storage) with the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>
+ attribute.</p>
- <p>Exactly one of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>,
- <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>, and <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attributes must be
- specified.</p>
+ <p>Exactly one of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>, <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>,
+ and <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attributes must be specified.</p>
- <p>If either <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>, <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, or <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> is specified, then the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must also be
+ <p>If either <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>, <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, or <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> is
+ specified, then the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must also be
specified. Otherwise, it must be omitted.</p>
- <p>The <dfn id=attr-meta-charset title=attr-meta-charset><code>charset</code></dfn>
- attribute specifies the character encoding used by the
- document. This is a <a href=#character-encoding-declaration>character encoding declaration</a>. If
- the attribute is present in an <a href=#xml-documents title="XML documents">XML
- document</a>, its value must be an <a href=#ascii-case-insensitive>ASCII
- case-insensitive</a> match for the string "<code title="">UTF-8</code>" (and the document is therefore forced to use
- UTF-8 as its encoding).</p>
+ <p>The <dfn id=attr-meta-charset title=attr-meta-charset><code>charset</code></dfn> attribute specifies the character
+ encoding used by the document. This is a <a href=#character-encoding-declaration>character encoding declaration</a>. If the
+ attribute is present in an <a href=#xml-documents title="XML documents">XML document</a>, its value must be an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">UTF-8</code>" (and the
+ document is therefore forced to use UTF-8 as its encoding).</p>
- <p class=note>The <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>
- attribute on the <code><a href=#the-meta-element>meta</a></code> element has no effect in XML
- documents, and is only allowed in order to facilitate migration to
- and from XHTML.</p>
+ <p class=note>The <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute on the
+ <code><a href=#the-meta-element>meta</a></code> element has no effect in XML documents, and is only allowed in order to
+ facilitate migration to and from XHTML.</p>
- <p>There must not be more than one <code><a href=#the-meta-element>meta</a></code> element with a
- <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute per
- document.</p>
+ <p>There must not be more than one <code><a href=#the-meta-element>meta</a></code> element with a <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute per document.</p>
- <p>The <dfn id=attr-meta-content title=attr-meta-content><code>content</code></dfn>
- attribute gives the value of the document metadata or pragma
- directive when the element is used for those purposes. The allowed
- values depend on the exact context, as described in subsequent
- sections of this specification.</p>
+ <p>The <dfn id=attr-meta-content title=attr-meta-content><code>content</code></dfn> attribute gives the value of the
+ document metadata or pragma directive when the element is used for those purposes. The allowed
+ values depend on the exact context, as described in subsequent sections of this specification.</p>
- <p>If a <code><a href=#the-meta-element>meta</a></code> element has a <dfn id=attr-meta-name title=attr-meta-name><code>name</code></dfn> attribute, it sets
- document metadata. Document metadata is expressed in terms of
- name-value pairs, the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>
- attribute on the <code><a href=#the-meta-element>meta</a></code> element giving the name, and the
- <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute on the same
- element giving the value. The name specifies what aspect of metadata
- is being set; valid names and the meaning of their values are
- described in the following sections. If a <code><a href=#the-meta-element>meta</a></code> element
- has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute,
- then the value part of the metadata name-value pair is the empty
- string.</p>
+ <p>If a <code><a href=#the-meta-element>meta</a></code> element has a <dfn id=attr-meta-name title=attr-meta-name><code>name</code></dfn>
+ attribute, it sets document metadata. Document metadata is expressed in terms of name-value pairs,
+ the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute on the <code><a href=#the-meta-element>meta</a></code> element giving the
+ name, and the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute on the same element giving
+ the value. The name specifies what aspect of metadata is being set; valid names and the meaning of
+ their values are described in the following sections. If a <code><a href=#the-meta-element>meta</a></code> element has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, then the value part of the metadata name-value
+ pair is the empty string.</p>
<div class=impl>
- <p>The <dfn id=dom-meta-name title=dom-meta-name><code>name</code></dfn> and <dfn id=dom-meta-content title=dom-meta-content><code>content</code></dfn> IDL attributes
- must <a href=#reflect>reflect</a> the respective content attributes of the
- same name. The IDL attribute <dfn id=dom-meta-httpequiv title=dom-meta-httpEquiv><code>httpEquiv</code></dfn> must
- <a href=#reflect>reflect</a> the content attribute <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>.</p>
+ <p>The <dfn id=dom-meta-name title=dom-meta-name><code>name</code></dfn> and <dfn id=dom-meta-content title=dom-meta-content><code>content</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ respective content attributes of the same name. The IDL attribute <dfn id=dom-meta-httpequiv title=dom-meta-httpEquiv><code>httpEquiv</code></dfn> must <a href=#reflect>reflect</a> the content
+ attribute <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>.</p>
</div>
@@ -23365,107 +23290,82 @@
-->
- <p>The image given by the <dfn id=attr-img-src title=attr-img-src><code>src</code></dfn> and <dfn id=attr-img-srcset title=attr-img-srcset><code>srcset</code></dfn> attributes is the
- embedded content; the value of the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute provides
- equivalent content for those who cannot process images or who have
- image loading disabled (i.e. it is the <code><a href=#the-img-element>img</a></code> element's
- <a href=#fallback-content>fallback content</a>).</p>
+ <p>The image given by the <dfn id=attr-img-src title=attr-img-src><code>src</code></dfn> and <dfn id=attr-img-srcset title=attr-img-srcset><code>srcset</code></dfn> attributes is the embedded content; the value of
+ the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute provides equivalent content for
+ those who cannot process images or who have image loading disabled (i.e. it is the
+ <code><a href=#the-img-element>img</a></code> element's <a href=#fallback-content>fallback content</a>).</p>
- <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>
+ <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>
- <p>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute must be
- present, and must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
- surrounded by spaces</a> referencing a non-interactive,
- optionally animated, image resource that is neither paged nor
- scripted.</p>
+ <p>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute must be present, and must contain a
+ <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a> referencing a non-interactive,
+ optionally animated, image resource that is neither paged nor scripted.</p>
- <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute may
- also be present. If present, its value must consist of one or more
- <a href=#image-candidate-string title="image candidate string">image candidate strings</a>,
- each separated from the next by a U+002C COMMA character (,). This
- attribute allows authors to provide alternative images for
- environments with smaller screens or screens with higher pixel
- densities.</p>
+ <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute may also be present. If present, its
+ value must consist of one or more <a href=#image-candidate-string title="image candidate string">image candidate
+ strings</a>, each separated from the next by a U+002C COMMA character (,). This attribute
+ allows authors to provide alternative images for environments with smaller screens or screens with
+ higher pixel densities.</p>
<div class=note>
- <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute allows
- authors to provide a set of images to handle graphical displays of
- varying dimensions and pixel densities.</p>
+ <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute allows authors to provide a set of
+ images to handle graphical displays of varying dimensions and pixel densities.</p>
- <p>The attribute essentially takes a comma-separated list of URLs
- each with one or more descriptors giving the maximum viewport
- dimensions and pixel density allowed to use the image. From the
- available options, the user agent then picks the most appropriate
- image. If the viewport dimensions or pixel density changes, the
- user agent can replace the image data with a new image on the
- fly.</p>
+ <p>The attribute essentially takes a comma-separated list of URLs each with one or more
+ descriptors giving the maximum viewport dimensions and pixel density allowed to use the image.
+ From the available options, the user agent then picks the most appropriate image. If the viewport
+ dimensions or pixel density changes, the user agent can replace the image data with a new image
+ on the fly.</p>
- <p>To specify an image, give first a URL, then one or more
- descriptors of the form 100w, 100h, or 2x, where "100w" means
- "maximum viewport width of 100 CSS pixels", "100h" is the same but
- for height, and "2x" means "maximum pixel density of 2 device
- pixels per CSS pixel".</p>
+ <p>To specify an image, give first a URL, then one or more descriptors of the form 100w, 100h, or
+ 2x, where "100w" means "maximum viewport width of 100 CSS pixels", "100h" is the same but for
+ height, and "2x" means "maximum pixel density of 2 device pixels per CSS pixel".</p>
</div>
- <p>An <dfn id=image-candidate-string>image candidate string</dfn> consists of the following
- components, in order, with the further restrictions described below
- this list:</p>
+ <p>An <dfn id=image-candidate-string>image candidate string</dfn> consists of the following components, in order, with the
+ further restrictions described below this list:</p>
- <ol><li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <ol><li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- <li>A <a href=#valid-non-empty-url>valid non-empty URL</a> referencing a
- non-interactive, optionally animated, image resource that is
- neither paged nor scripted.</li>
+ <li>A <a href=#valid-non-empty-url>valid non-empty URL</a> referencing a non-interactive, optionally animated, image
+ resource that is neither paged nor scripted.</li>
- <li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- <li>Optionally a <i>width descriptor</i>, consisting of: a
- <a href=#space-character>space character</a>, a <a href=#valid-non-negative-integer>valid non-negative
- integer</a> representing the <i>width descriptor value</i>, and
- a U+0077 LATIN SMALL LETTER W character.</li>
+ <li>Optionally a <i>width descriptor</i>, consisting of: a <a href=#space-character>space character</a>, a
+ <a href=#valid-non-negative-integer>valid non-negative integer</a> representing the <i>width descriptor value</i>, and a
+ U+0077 LATIN SMALL LETTER W character.</li>
- <li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- <li>Optionally a <i>height descriptor</i>, consisting of: a
- <a href=#space-character>space character</a>, a <a href=#valid-non-negative-integer>valid non-negative
- integer</a> representing the <i>height descriptor value</i>, and
- a U+0068 LATIN SMALL LETTER H character.</li>
+ <li>Optionally a <i>height descriptor</i>, consisting of: a <a href=#space-character>space character</a>, a
+ <a href=#valid-non-negative-integer>valid non-negative integer</a> representing the <i>height descriptor value</i>, and a
+ U+0068 LATIN SMALL LETTER H character.</li>
- <li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- <li>Optionally a <i>pixel density descriptor</i>, consisting of: a
- <a href=#space-character>space character</a>, a <a href=#valid-floating-point-number>valid floating-point
- number</a> giving a number greater than zero representing the
- <i>pixel density descriptor value</i>, and a U+0078 LATIN SMALL
- LETTER X character.</li>
+ <li>Optionally a <i>pixel density descriptor</i>, consisting of: a <a href=#space-character>space character</a>,
+ a <a href=#valid-floating-point-number>valid floating-point number</a> giving a number greater than zero representing the
+ <i>pixel density descriptor value</i>, and a U+0078 LATIN SMALL LETTER X character.</li>
- <li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- </ol><p>Each <a href=#image-candidate-string>image candidate string</a> must have at least one
- of the three optional descriptors. There must not be two <a href=#image-candidate-string title="image candidate string">image candidate strings</a> in a
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute whose <i>width
- descriptor value</i>, <i>height descriptor value</i>, and <i>pixel
- density descriptor value</i> are each identical to their counterpart
- in the other <a href=#image-candidate-string>image candidate string</a>; for the purposes
- of this requirement, omitted <i>width descriptors</i> and <i>height
- descriptors</i> are considered to have the value "Infinity", and
- omitted <i>pixel density descriptors</i> are considered to have the
- value 1.</p>
+ </ol><p>Each <a href=#image-candidate-string>image candidate string</a> must have at least one of the three optional
+ descriptors. There must not be two <a href=#image-candidate-string title="image candidate string">image candidate
+ strings</a> in a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute whose <i>width
+ descriptor value</i>, <i>height descriptor value</i>, and <i>pixel density descriptor value</i>
+ are each identical to their counterpart in the other <a href=#image-candidate-string>image candidate string</a>; for the
+ purposes of this requirement, omitted <i>width descriptors</i> and <i>height descriptors</i> are
+ considered to have the value "Infinity", and omitted <i>pixel density descriptors</i> are
+ considered to have the value 1.</p>
<div class=example>
- <p>In this example, a banner that takes half the viewport is
- provided in two versions, one for wide screen and one for narrow
- screens.</p>
+ <p>In this example, a banner that takes half the viewport is provided in two versions, one for
+ wide screen and one for narrow screens.</p>
<pre><h1><img alt="The Breakfast Combo"
src="banner.jpeg"
@@ -23473,34 +23373,21 @@
</div>
- <p class=note>The requirements above imply that images can be
- static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector
- documents (single-page PDFs, XML files with an SVG root element),
- animated bitmaps (APNGs, animated GIFs), animated vector graphics
- (XML files with an SVG root element that use declarative SMIL
- animation), and so forth. However, these definitions preclude SVG
- files with script, multipage PDF files, interactive MNG files, HTML
- documents, plain text documents, and so forth.
- <a href=#refsPNG>[PNG]</a>
- <a href=#refsGIF>[GIF]</a>
- <a href=#refsJPEG>[JPEG]</a>
- <a href=#refsPDF>[PDF]</a>
- <a href=#refsXML>[XML]</a>
- <a href=#refsAPNG>[APNG]</a>
- <!-- <a href="#refsAGIF">[AGIF]</a> -->
- <a href=#refsSVG>[SVG]</a>
- <a href=#refsMNG>[MNG]</a>
- </p>
+ <p class=note>The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs,
+ JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element),
+ animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root
+ element that use declarative SMIL animation), and so forth. However, these definitions preclude
+ SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text
+ documents, and so forth. <a href=#refsPNG>[PNG]</a> <a href=#refsGIF>[GIF]</a> <a href=#refsJPEG>[JPEG]</a> <a href=#refsPDF>[PDF]</a> <a href=#refsXML>[XML]</a> <a href=#refsAPNG>[APNG]</a> <!-- <a href="#refsAGIF">[AGIF]</a> --> <a href=#refsSVG>[SVG]</a>
+ <a href=#refsMNG>[MNG]</a> </p>
- <p>The <code><a href=#the-img-element>img</a></code> element 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 transparent images, as they rarely convey meaning and rarely
- add anything useful to the document.</p>
+ <p>The <code><a href=#the-img-element>img</a></code> element 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 transparent images, as they rarely convey meaning and
+ rarely add anything useful to the document.</p>
- <hr><p>The <dfn id=attr-img-crossorigin title=attr-img-crossorigin><code>crossorigin</code></dfn>
- attribute is a <a href=#cors-settings-attribute>CORS settings attribute</a>. Its purpose is
- to allow images from third-party sites that allow cross-origin
- access to be used with <code><a href=#the-canvas-element>canvas</a></code>.</p>
+ <hr><p>The <dfn id=attr-img-crossorigin title=attr-img-crossorigin><code>crossorigin</code></dfn> attribute is a <a href=#cors-settings-attribute>CORS
+ settings attribute</a>. Its purpose is to allow images from third-party sites that allow
+ cross-origin access to be used with <code><a href=#the-canvas-element>canvas</a></code>.</p>
<div class=impl>
@@ -23522,157 +23409,122 @@
dimensions (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-available title=img-available>available</dfn>.</p>
+ </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-available title=img-available>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>When an <code><a href=#the-img-element>img</a></code> element is <a href=#img-available title=img-available>available</a>, it <a href=#provides-a-paint-source>provides a paint
- source</a> whose width is the image's intrinsic width, whose
- height is the image's intrinsic height, and whose appearance is the
- intrinsic appearance of the image.</p>
+ <p>When an <code><a href=#the-img-element>img</a></code> element is <a href=#img-available title=img-available>available</a>, it
+ <a href=#provides-a-paint-source>provides a paint source</a> whose width is the image's intrinsic width, whose height is
+ the image's intrinsic height, and whose appearance is the intrinsic appearance of the image.</p>
<p>In a <a href=#browsing-context>browsing context</a> where <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is
disabled</a>, user agents may obtain images immediately or on demand. In a <a href=#browsing-context>browsing
context</a> where <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is enabled</a>, user agents
must obtain images immediately.</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 created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute,
- a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, or both.
- A user agent that obtains images immediately must also 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 has its
- <code title=attr-img-src><a href=#attr-img-src>src</a></code>,
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or
- <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</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 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 created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>
+ attribute, or both. A user agent that obtains images immediately must also 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 has its
+ <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</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>
- or <code title=attr-img-src><a href=#attr-img-src>srcset</a></code>
- attribute, and only if the <code><a href=#the-img-element>img</a></code> element is in the <a href=#img-none title=img-none>unavailable</a> state. 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>,
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or
- <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute set,
- 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>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> or <code title=attr-img-src><a href=#attr-img-src>srcset</a></code> attribute, and only if the <code><a href=#the-img-element>img</a></code> element is in the
+ <a href=#img-none title=img-none>unavailable</a> state. 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>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute set, 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>Each <code><a href=#the-img-element>img</a></code> element has a <dfn id=last-selected-source>last selected
- source</dfn>, which must initially be null, and a <dfn id=current-pixel-density>current pixel
- density</dfn>, which must initially be undefined.</p>
+ <p>Each <code><a href=#the-img-element>img</a></code> element has a <dfn id=last-selected-source>last selected source</dfn>, which must initially be
+ null, and a <dfn id=current-pixel-density>current pixel density</dfn>, which must initially be undefined.</p>
- <p>When an <code><a href=#the-img-element>img</a></code> element has a <a href=#current-pixel-density>current pixel
- density</a> that is not 1.0, the element's image data must be
- treated as if its resolution, in device pixels per CSS pixels, was
+ <p>When an <code><a href=#the-img-element>img</a></code> element has a <a href=#current-pixel-density>current pixel density</a> that is not 1.0, the
+ element's image data must be treated as if its resolution, in device pixels per CSS pixels, was
the <a href=#current-pixel-density>current pixel density</a>.</p>
- <p class=example>For example, if the <a href=#current-pixel-density>current pixel
- density</a> is 3.125, that means that there are 300 device pixels
- per CSS inch, and thus if the image data is 300x600, it has an
+ <p class=example>For example, if the <a href=#current-pixel-density>current pixel density</a> is 3.125, that means
+ that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has an
intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</p>
- <p>Each <code><a href=#document>Document</a></code> object must have a <dfn id=list-of-available-images>list of
- available images</dfn>. Each image in this list is identified by a
- tuple consisting of an <a href=#absolute-url>absolute URL</a>, a <a href=#cors-settings-attribute>CORS
- settings attribute</a> mode, and, if the mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>, an
- <a href=#origin>origin</a>. User agents may copy entries from one
- <code><a href=#document>Document</a></code> object's <a href=#list-of-available-images>list of available images</a>
- to another at any time (e.g. when the <code><a href=#document>Document</a></code> is
- created, user agents can add to it all the images that are loaded in
- other <code><a href=#document>Document</a></code>s), but must not change the keys of
- entries copied in this way when doing so. User agents may also
- remove images from such lists at any time (e.g. to save memory).</p>
+ <p>Each <code><a href=#document>Document</a></code> object must have a <dfn id=list-of-available-images>list of available images</dfn>. Each image
+ in this list is identified by a tuple consisting of an <a href=#absolute-url>absolute URL</a>, a <a href=#cors-settings-attribute>CORS
+ settings attribute</a> mode, and, if the mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No
+ CORS</a>, an <a href=#origin>origin</a>. User agents may copy entries from one <code><a href=#document>Document</a></code>
+ object's <a href=#list-of-available-images>list of available images</a> to another at any time (e.g. when the
+ <code><a href=#document>Document</a></code> is created, user agents can add to it all the images that are loaded in
+ other <code><a href=#document>Document</a></code>s), but must not change the keys of entries copied in this way when
+ doing so. User agents may also remove images from such lists at any time (e.g. to save
+ memory).</p>
- <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>
+ <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>
+ <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>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>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 user agent cannot support images, or its support for images has been disabled, then
+ abort these steps.</li>
<li>
<p>If the element has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, then
- let <var title="">selected source</var> and <var title="">selected
- pixel density</var> be the URL and pixel density that results from
- <a href=#processing-the-image-candidates>processing the image candidates</a>, respectively.
+ let <var title="">selected source</var> and <var title="">selected pixel density</var> be the
+ URL and pixel density that results from <a href=#processing-the-image-candidates>processing the image candidates</a>,
+ respectively.
- Otherwise, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute specified and its value
- is not the empty string, let <var title="">selected source</var>
- be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and <var title="">selected pixel density</var> be 1.0. Otherwise, let <var title="">selected source</var> be null and <var title="">selected
- pixel density</var> be undefined.</p>
+ Otherwise, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute specified and
+ its value is not the empty string, let <var title="">selected source</var> be the value of the
+ element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and <var title="">selected pixel
+ density</var> be 1.0. Otherwise, let <var title="">selected source</var> be null and <var title="">selected pixel density</var> be undefined.</p>
</li>
- <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected
- source</a> be <var title="">selected source</var> and the
- <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel density</a> be
- <var title="">selected pixel density</var>.</li>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var> and the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel
+ density</a> be <var title="">selected pixel density</var>.</li>
- <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element. If that is
- not successful, abort these steps.</li>
+ <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative
+ to the element. If that is not successful, abort these steps.</li>
- <li><p>Let <var title="">key</var> be a tuple consisting of the
- resulting <a href=#absolute-url>absolute URL</a>, the <code><a href=#the-img-element>img</a></code> element's
- <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute's
- mode, and, if that mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>, the
- <code><a href=#document>Document</a></code> object's <a href=#origin>origin</a>.</li>
+ <li><p>Let <var title="">key</var> be a tuple consisting of the resulting <a href=#absolute-url>absolute
+ URL</a>, the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
+ attribute's mode, and, if that mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>,
+ the <code><a href=#document>Document</a></code> object's <a href=#origin>origin</a>.</li>
- <li><p>If the <a href=#list-of-available-images>list of available images</a>, contains an
- entry for <var title="">key</var>, then 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,
- <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, and abort these steps.</li>
+ <li><p>If the <a href=#list-of-available-images>list of available images</a>, contains an entry for <var title="">key</var>, then 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, <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, and abort these steps.</li>
- <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing
- the <a href=#concept-task title=concept-task>task</a> that invoked this
- algorithm to continue. The <a href=#synchronous-section>synchronous section</a>
- consists of all the remaining steps of this algorithm until the
- algorithm says the <a href=#synchronous-section>synchronous section</a> has
- ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous
- sections</a> are marked with ⌛.)</li>
+ <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing the <a href=#concept-task title=concept-task>task</a> that invoked this algorithm to continue. The <a href=#synchronous-section>synchronous
+ section</a> consists of all the remaining steps of this algorithm until the algorithm says the
+ <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous
+ section">synchronous sections</a> are marked with ⌛.)</li>
<li>
- <p>⌛ If another instance of this algorithm for this
- <code><a href=#the-img-element>img</a></code> element was started after this instance (even if
- it aborted and is no longer running), then abort these steps.</p>
+ <p>⌛ If another instance of this algorithm for this <code><a href=#the-img-element>img</a></code> element was started
+ after this instance (even if it aborted and is no longer running), then abort these steps.</p>
- <p class=note>Only the last instance takes effect, to avoid
- multiple requests when, for example, the
- <code title=attr-img-src><a href=#attr-img-src>src</a></code>,
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, and
- <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes
- are all set in succession.</p>
+ <p class=note>Only the last instance takes effect, to avoid multiple requests when, for
+ example, the <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>,
+ and <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes are all set in
+ succession.</p>
</li>
<li>
- <p>⌛ If <var title="">selected source</var> is null, then
- set the element to the <a href=#img-error title=img-error>broken</a>
- state, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
- event</a> named <code title=event-error>error</code> at the
- <code><a href=#the-img-element>img</a></code> element, and abort these steps.</p>
+ <p>⌛ If <var title="">selected source</var> is null, then set the element to the <a href=#img-error title=img-error>broken</a> state, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
+ event</a> named <code title=event-error>error</code> at the <code><a href=#the-img-element>img</a></code> element, and
+ abort these steps.</p>
</li>
@@ -23685,37 +23537,28 @@
<li>
- <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of
- the <a href=#absolute-url>absolute URL</a> that resulted from the earlier step,
- with the <i>mode</i> being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
- the <i title="">origin</i> being the <a href=#origin>origin</a> of the
- <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
+ <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of the <a href=#absolute-url>absolute URL</a>
+ that resulted from the earlier step, with the <i>mode</i> being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute, the <i title="">origin</i>
+ being the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
<i>default origin behaviour</i> set to <i>taint</i>.</p>
- <p>The resource obtained in this fashion, if any, is the
- <code><a href=#the-img-element>img</a></code> element's image data. It can be either
- <a href=#cors-same-origin>CORS-same-origin</a> or <a href=#cors-cross-origin>CORS-cross-origin</a>;
- this affects the <a href=#origin>origin</a> of the image itself (e.g.
- when used on a <code><a href=#the-canvas-element>canvas</a></code>).</p>
+ <p>The resource obtained in this fashion, if any, is the <code><a href=#the-img-element>img</a></code> element's image data.
+ It can be either <a href=#cors-same-origin>CORS-same-origin</a> or <a href=#cors-cross-origin>CORS-cross-origin</a>; this affects
+ the <a href=#origin>origin</a> of the image itself (e.g. when used on a <code><a href=#the-canvas-element>canvas</a></code>).</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
- 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> (<a href=#img-load>defined below</a>) has been run.</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 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> (<a href=#img-load>defined below</a>) has been run.</p>
- <p class=warning>This, unfortunately, can be used to perform a
- rudimentary port scan of the user's local network (especially in
- 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 are stricter than those described above to mitigate this
- attack, but unfortunately such policies are typically not
+ <p class=warning>This, unfortunately, can be used to perform a rudimentary port scan of the
+ user's local network (especially in 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 are stricter than those
+ 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>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 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>
@@ -23791,17 +23634,13 @@
</ol></dd>
- </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>
+ </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>
<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>
@@ -23816,102 +23655,81 @@
</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>
+ </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>
- <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 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>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 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
- image.</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 image.</p>
- <p class=note>This allows servers to return images with error
- responses, and have them displayed.</p>
+ <p class=note>This allows servers to return images with error responses, and have them
+ displayed.</p>
- <p>The user agents 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>
+ <p>The user agents 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>
- <p>User agents must not support non-image resources with the
- <code><a href=#the-img-element>img</a></code> element (e.g. XML files whose root element is an
- HTML element). User agents must not run executable code
- (e.g. scripts) embedded in the image resource. User agents must only
- display the first page of a multipage resource (e.g. a PDF
- file). User agents must not allow the resource to act in an
- interactive fashion, but should honor any animation in the
- resource.</p>
+ <p>User agents must not support non-image resources with the <code><a href=#the-img-element>img</a></code> element (e.g. XML
+ files whose root element is an HTML element). User agents must not run executable code (e.g.
+ scripts) embedded in the image resource. User agents must only display the first page of a
+ multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an
+ interactive fashion, but should honor any animation in the resource.</p>
- <p>This specification does not specify which image types are to be
- supported.</p>
+ <p>This specification does not specify which image types are to be supported.</p>
- <hr><p>When the user agent is required to <dfn id=processing-the-image-candidates title="processing the
- image candidates">process the image candidates</dfn> of an
- <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, the user agent must
- run the following steps, which return a URL and pixel density (null
- and undefined respectively if no selection can be made):</p>
+ <hr><p>When the user agent is required to <dfn id=processing-the-image-candidates title="processing the image candidates">process the
+ image candidates</dfn> of an <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, the user agent must run the following steps,
+ which return a URL and pixel density (null and undefined respectively if no selection can be
+ made):</p>
- <ol><li><p>Let <var title="">input</var> be the value of the
- <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute.</li>
+ <ol><li><p>Let <var title="">input</var> be the value of the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute.</li>
- <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
- string.</li>
+ <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially
+ pointing at the start of the string.</li>
- <li><p>Let <var title="">raw candidates</var> be an initially empty
- ordered list of <a href=#url title=URL>URLs</a> with associated
- unparsed descriptors. The order of entries in the list is the
- order in which entries are added to the list.</li>
+ <li><p>Let <var title="">raw candidates</var> be an initially empty ordered list of <a href=#url title=URL>URLs</a> with associated unparsed descriptors. The order of entries in the list is
+ the order in which entries are added to the list.</li>
- <li><p><i>Splitting loop</i>: <a href=#skip-whitespace>Skip
- whitespace</a>.</li>
+ <li><p><i>Splitting loop</i>: <a href=#skip-whitespace>Skip whitespace</a>.</li>
- <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not
- <a href=#space-character title="space character">space characters</a>, and let that
- be <var title="">url</var>.</li>
- <!-- if /url/ is empty, we're at the end of the string -->
+ <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not <a href=#space-character title="space
+ character">space characters</a>, and let that be <var title="">url</var>.</li> <!-- if
+ /url/ is empty, we're at the end of the string -->
- <li><p>If <var title="">url</var> is empty, then jump to the step
- labeled <i>descriptor parser</i>.</li>
+ <li><p>If <var title="">url</var> is empty, then jump to the step labeled <i>descriptor
+ parser</i>.</li>
- <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not
- U+002C COMMA characters (,), and let that be <var title="">descriptors</var>.</li>
+ <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not U+002C COMMA characters (,),
+ and let that be <var title="">descriptors</var>.</li>
- <li><p>Add <var title="">url</var> to <var title="">raw
- candidates</var>, associated with <var title="">descriptors</var>.</li>
+ <li><p>Add <var title="">url</var> to <var title="">raw candidates</var>, associated with <var title="">descriptors</var>.</li>
- <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled <i>descriptor
- parser</i>.</li>
+ <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to
+ the step labeled <i>descriptor parser</i>.</li>
- <li><p>Advance <var title="">position</var> to the next character
- in <var title="">input</var> (skipping past the U+002C COMMA
- character (,) separating this candidate from the next).</li>
+ <li><p>Advance <var title="">position</var> to the next character in <var title="">input</var>
+ (skipping past the U+002C COMMA character (,) separating this candidate from the next).</li>
<li><p>Return to the step labeled <i>splitting loop</i>.</li>
- <li><p><i>Descriptor parser</i>: Let <var title="">candidates</var>
- be an initially empty ordered list of <a href=#url title=URL>URLs</a>
- each with an associated pixel density, and optionally an associated
- width, height, or both. The order of entries in the list is the order
- in which entries are added to the list.</p>
+ <li><p><i>Descriptor parser</i>: Let <var title="">candidates</var> be an initially empty ordered
+ list of <a href=#url title=URL>URLs</a> each with an associated pixel density, and optionally an
+ associated width, height, or both. The order of entries in the list is the order in which entries
+ are added to the list.</p>
<li>
- <p>For each entry in <var title="">raw candidates</var> with
- <a href=#url>URL</a> <var title="">url</var> associated with the
- unparsed descriptors <var title="">unparsed descriptors</var>, in
- the order they were originally added to the list, run these
- substeps:</p>
+ <p>For each entry in <var title="">raw candidates</var> with <a href=#url>URL</a> <var title="">url</var> associated with the unparsed descriptors <var title="">unparsed
+ descriptors</var>, in the order they were originally added to the list, run these substeps:</p>
- <ol><li><p>Let <var title="">descriptor list</var> be the result of
- <a href=#split-a-string-on-spaces title="split a string on spaces">splitting <var title="">unparsed descriptors</var> on spaces</a>.</li>
+ <ol><li><p>Let <var title="">descriptor list</var> be the result of <a href=#split-a-string-on-spaces title="split a string on
+ spaces">splitting <var title="">unparsed descriptors</var> on spaces</a>.</li>
<li><p>Let <var title="">error</var> be <i>no</i>.</li>
@@ -23923,19 +23741,17 @@
<li>
- <p>For each token in <var title="">descriptor list</var>, run
- the appropriate set of steps from the following list:</p>
+ <p>For each token in <var title="">descriptor list</var>, run the appropriate set of steps
+ from the following list:</p>
<dl class=switch><dt>If the token consists of a <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a U+0077 LATIN SMALL LETTER W character</dt>
<dd>
- <ol><li><p>If <var title="">width</var> is not <i>absent</i>,
- then let <var title="">error</var> be <i>yes</i>.</li>
+ <ol><li><p>If <var title="">width</var> is not <i>absent</i>, then let <var title="">error</var> be <i>yes</i>.</li>
- <li><p>Apply the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
- integers</a> to the token. Let <var title="">width</var>
- be the result.</li>
+ <li><p>Apply the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to the token. Let
+ <var title="">width</var> be the result.</li>
</ol></dd>
@@ -23958,44 +23774,35 @@
<dd>
- <ol><li><p>If <var title="">density</var> is not <i>absent</i>,
- then let <var title="">error</var> be <i>yes</i>.</li>
+ <ol><li><p>If <var title="">density</var> is not <i>absent</i>, then let <var title="">error</var> be <i>yes</i>.</li>
- <li><p>Apply the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating-point
- number values</a> to the token. Let <var title="">density</var> be the result.</li>
+ <li><p>Apply the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values</a> to the token.
+ Let <var title="">density</var> be the result.</li>
</ol></dd>
</dl></li>
- <li><p>If <var title="">width</var> is still <i>absent</i>, set
- it to Infinity.</li>
+ <li><p>If <var title="">width</var> is still <i>absent</i>, set it to Infinity.</li>
- <li><p>If <var title="">height</var> is still <i>absent</i>, set
- it to Infinity.</li>
+ <li><p>If <var title="">height</var> is still <i>absent</i>, set it to Infinity.</li>
- <li><p>If <var title="">density</var> is still <i>absent</i>, set
- it to 1.0.</li>
+ <li><p>If <var title="">density</var> is still <i>absent</i>, set it to 1.0.</li>
- <li><p>If <var title="">error</var> is still <i>no</i>, then add
- an entry to <var title="">candidates</var> whose <a href=#url>URL</a>
- is <var title="">url</var>, associated with a width <var title="">width</var>, a height <var title="">height</var>, and a
- pixel density <var title="">density</var>.</li>
+ <li><p>If <var title="">error</var> is still <i>no</i>, then add an entry to <var title="">candidates</var> whose <a href=#url>URL</a> is <var title="">url</var>, associated with a
+ width <var title="">width</var>, a height <var title="">height</var>, and a pixel density <var title="">density</var>.</li>
</ol></li>
<li>
- <p>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 whose value is not the
- empty string, then run the following substeps:</p>
+ <p>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 whose
+ value is not the empty string, then run the following substeps:</p>
- <ol><li><p>Let <var title="">url</var> be the value of the element's
- <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</li>
+ <ol><li><p>Let <var title="">url</var> be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</li>
- <li><p>Add an entry to <var title="">candidates</var> whose
- <a href=#url>URL</a> is <var title="">url</var>, associated with a
- width Infinity, a height Infinity, and a pixel density
+ <li><p>Add an entry to <var title="">candidates</var> whose <a href=#url>URL</a> is <var title="">url</var>, associated with a width Infinity, a height Infinity, and a pixel density
1.0.</li>
</ol></li>
@@ -24003,140 +23810,115 @@
<li><p>If <var title="">candidates</var> is empty, return null as the URL and undefined as the
pixel density and abort these steps.</li>
- <li><p>If an entry <var title="">b</var> in <var title="">candidates</var> has the same associated width, height,
- and pixel density as an earlier entry <var title="">a</var> in <var title="">candidates</var>, then remove entry <var title="">b</var>.
- Repeat this step until none of the entries in <var title="">candidates</var> have the same associated width, height,
- and pixel density as an earlier entry.</li>
+ <li><p>If an entry <var title="">b</var> in <var title="">candidates</var> has the same
+ associated width, height, and pixel density as an earlier entry <var title="">a</var> in <var title="">candidates</var>, then remove entry <var title="">b</var>. Repeat this step until none
+ of the entries in <var title="">candidates</var> have the same associated width, height, and
+ pixel density as an earlier entry.</li>
<li>
- <p>Optionally, return the <a href=#url>URL</a> of an entry in <var title="">candidates</var> chosen by the user agent, and that
- entry's associated pixel density, and then abort these steps. The
- user agent may apply any algorithm or heuristic in its selection
- of an entry for the purposes of this step.</p>
+ <p>Optionally, return the <a href=#url>URL</a> of an entry in <var title="">candidates</var> chosen
+ by the user agent, and that entry's associated pixel density, and then abort these steps. The
+ user agent may apply any algorithm or heuristic in its selection of an entry for the purposes of
+ this step.</p>
- <p class=note>This allows a user agent to override the default
- algorithm (as described in subsequent steps) in case the user
- agent has a reason to do so. For example, it would allow the user
- agent in highly bandwidth-constrained conditions to intentionally
- opt to use an image intended for a smaller screen size, on the
- assumption that it'll probably be good enough. Implementors are
- urged to avoid doing this if at all possible, to let authors have
- predictable results. The results of using an image intended for a
- different viewport size can be, at a minimum, aesthetically
- displeasing.</p>
+ <p class=note>This allows a user agent to override the default algorithm (as described in
+ subsequent steps) in case the user agent has a reason to do so. For example, it would allow the
+ user agent in highly bandwidth-constrained conditions to intentionally opt to use an image
+ intended for a smaller screen size, on the assumption that it'll probably be good enough.
+ Implementors are urged to avoid doing this if at all possible, to let authors have predictable
+ results. The results of using an image intended for a different viewport size can be, at a
+ minimum, aesthetically displeasing.</p>
- <p class=note>This clause is not necessary to select images that
- are of lower pixel density than the display can handle, because
- the definition of pixel density below is also left up to the user
- agent. This step is only needed to allow user agents to pick
- images intended for viewports with other dimensions.</p>
+ <p class=note>This clause is not necessary to select images that are of lower pixel density
+ than the display can handle, because the definition of pixel density below is also left up to
+ the user agent. This step is only needed to allow user agents to pick images intended for
+ viewports with other dimensions.</p>
</li>
- <li><p>Let <var title="">max width</var> be the width of the
- viewport, and let <var title="">max height</var> be the height of
- the viewport. <a href=#refsCSS>[CSS]</a></li>
+ <li><p>Let <var title="">max width</var> be the width of the viewport, and let <var title="">max
+ height</var> be the height of the viewport. <a href=#refsCSS>[CSS]</a></li>
- <li><p>If there are any entries in <var title="">candidates</var>
- that have an associated width that is less than <var title="">max width</var>, then remove them, unless that would
- remove all the entries, in which case remove only the entries whose
- associated width is less than the greatest such width.</li>
+ <li><p>If there are any entries in <var title="">candidates</var> that have an associated width
+ that is less than <var title="">max width</var>, then remove them, unless that would remove all
+ the entries, in which case remove only the entries whose associated width is less than the
+ greatest such width.</li>
- <li><p>If there are any entries in <var title="">candidates</var>
- that have an associated height that is less than <var title="">max height</var>, then remove them, unless that would
- remove all the entries, in which case remove only the entries whose
- associated height is less than the greatest such height.</li>
+ <li><p>If there are any entries in <var title="">candidates</var> that have an associated height
+ that is less than <var title="">max height</var>, then remove them, unless that would remove all
+ the entries, in which case remove only the entries whose associated height is less than the
+ greatest such height.</li>
- <li><p>If there are any entries in <var title="">candidates</var>
- that have an associated pixel density that is less than a
- user-agent-defined value giving the nominal pixel density of the
- display, then remove them, unless that would remove all the
- entries, in which case remove only the entries whose associated
- pixel density is less than the greatest such pixel density.</li>
+ <li><p>If there are any entries in <var title="">candidates</var> that have an associated pixel
+ density that is less than a user-agent-defined value giving the nominal pixel density of the
+ display, then remove them, unless that would remove all the entries, in which case remove only
+ the entries whose associated pixel density is less than the greatest such pixel density.</li>
- <li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated width that is greater than the smallest
- such width.</li>
+ <li><p>Remove all the entries in <var title="">candidates</var> that have an associated width
+ that is greater than the smallest such width.</li>
- <li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated height that is greater than the smallest
- such height.</li>
+ <li><p>Remove all the entries in <var title="">candidates</var> that have an associated height
+ that is greater than the smallest such height.</li>
- <li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated pixel density that is greater than the
- smallest such pixel density.</li>
+ <li><p>Remove all the entries in <var title="">candidates</var> that have an associated pixel
+ density that is greater than the smallest such pixel density.</li>
- <li><p>Return the <a href=#url>URL</a> of the sole remaining entry in
- <var title="">candidates</var>, and that entry's associated pixel
- density.</li>
+ <li><p>Return the <a href=#url>URL</a> of the sole remaining entry in <var title="">candidates</var>,
+ and that entry's associated pixel density.</li>
- </ol><p>The user agent may at any time run the following algorithm to
- update an <code><a href=#the-img-element>img</a></code> element's image in order to react to
- changes in the environment. (User agents are <em>not required</em>
- to ever run this algorithm.)</p>
+ </ol><p>The user agent may at any time run the following algorithm to update an <code><a href=#the-img-element>img</a></code>
+ element's image in order to react to changes in the environment. (User agents are <em>not
+ required</em> to ever run this algorithm.)</p>
- <ol><li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>. The
- <a href=#synchronous-section>synchronous section</a> consists of all the remaining
- steps of this algorithm until the algorithm says the
- <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous sections</a> are marked
- with ⌛.)</li>
+ <ol><li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>. The <a href=#synchronous-section>synchronous section</a>
+ consists of all the remaining steps of this algorithm until the algorithm says the
+ <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous
+ section">synchronous sections</a> are marked with ⌛.)</li>
- <li><p>⌛ If the <code><a href=#the-img-element>img</a></code> element does not have a
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, is
- not in the <a href=#img-all title=img-all>completely available</a> state,
- has image data whose resource type is
- <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, or if its <a href=#update-the-image-data>update the
- image data</a> algorithm is running, then abort this
- algorithm.</li> <!-- we don't support replacing push-JPEG
- images because defining what happens with the tasks and events and
- so on in that case would become implausibly complicated. -->
+ <li><p>⌛ If the <code><a href=#the-img-element>img</a></code> element does not have a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, is not in the <a href=#img-all title=img-all>completely available</a> state, has image data whose resource type is
+ <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, or if its <a href=#update-the-image-data>update the image data</a> algorithm is
+ running, then abort this algorithm.</li> <!-- we don't support replacing push-JPEG images
+ because defining what happens with the tasks and events and so on in that case would become
+ implausibly complicated. -->
- <li><p>⌛ Let <var title="">selected source</var> and <var title="">selected pixel density</var> be the URL and pixel density
- that results from <a href=#processing-the-image-candidates>processing the image candidates</a>,
- respectively.</li>
+ <li><p>⌛ Let <var title="">selected source</var> and <var title="">selected pixel
+ density</var> be the URL and pixel density that results from <a href=#processing-the-image-candidates>processing the image
+ candidates</a>, respectively.</li>
- <li><p>⌛ If <var title="">selected source</var> is null,
- then abort these steps.</li> <!-- not sure this can ever
- actually happen -->
+ <li><p>⌛ If <var title="">selected source</var> is null, then abort these steps.</li>
+ <!-- not sure this can ever actually happen -->
- <li><p>⌛ If <var title="">selected source</var> and <var title="">selected pixel density</var> are the same as the element's
- <a href=#last-selected-source>last selected source</a> and <a href=#current-pixel-density>current pixel
- density</a>, then abort these steps.</li> <!-- note that
- this check happens before base URL resolution, so changing the base
- URL doesn't trigger an update if nothing else changed -->
+ <li><p>⌛ If <var title="">selected source</var> and <var title="">selected pixel
+ density</var> are the same as the element's <a href=#last-selected-source>last selected source</a> and <a href=#current-pixel-density>current
+ pixel density</a>, then abort these steps.</li> <!-- note that this check happens before
+ base URL resolution, so changing the base URL doesn't trigger an update if nothing else changed
+ -->
- <li><p>⌛ <a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element.</li>
+ <li><p>⌛ <a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>,
+ relative to the element.</li>
- <li><p>⌛ Let <var title="">CORS mode</var> be the state of
- the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
- content attribute.</li>
+ <li><p>⌛ Let <var title="">CORS mode</var> be the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute.</li>
- <li><p>⌛ If the <a href=#resolve-a-url>resolve a URL</a> algorithm is not
- successful, abort these steps.</p>
+ <li><p>⌛ If the <a href=#resolve-a-url>resolve a URL</a> algorithm is not successful, abort these
+ steps.</p>
- <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the
- remaining steps asynchronously.</li>
+ <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the remaining steps
+ asynchronously.</li>
<li>
- <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of
- the resulting <a href=#absolute-url>absolute URL</a>, with the <i>mode</i>
- being <var title="">CORS mode</var>, the <i title="">origin</i>
- being the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's
- <code><a href=#document>Document</a></code>, and the <i>default origin behaviour</i> set
- to <i>taint</i>.</p>
+ <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of the resulting <a href=#absolute-url>absolute
+ URL</a>, with the <i>mode</i> being <var title="">CORS mode</var>, the <i title="">origin</i>
+ being the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
+ <i>default origin behaviour</i> set to <i>taint</i>.</p>
- <p>If this download fails in any way (other than the response code
- not being a 2xx code, as mentioned earlier), or if the image
- format is unsupported (as determined by applying the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a>,
- again as mentioned earlier), or if the resource type is
- <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, then abort these
- steps.</p>
+ <p>If this download fails in any way (other than the response code not being a 2xx code, as
+ mentioned earlier), or if the image format is unsupported (as determined by applying the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a>, again as mentioned earlier),
+ or if the resource type is <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, then abort these steps.</p>
- <p>Otherwise, wait for the <a href=#fetch>fetch</a> algorithm to queue
- its last task, and then continue with these steps. The data
- obtained in this way is used in the steps below.</p>
+ <p>Otherwise, wait for the <a href=#fetch>fetch</a> algorithm to queue its last task, and then
+ continue with these steps. The data obtained in this way is used in the steps below.</p>
</li>
@@ -24144,119 +23926,96 @@
<p><a href=#queue-a-task>Queue a task</a> to run the following substeps:</p>
- <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes have
- been set, changed, or removed since this algorithm started, then
- abort these steps.</p>
+ <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
+ attributes have been set, changed, or removed since this algorithm started, then abort these
+ steps.</p>
- <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected
- source</a> be <var title="">selected source</var> and the
- <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel density</a> be
- <var title="">selected pixel density</var>.</li>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var> and the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel
+ density</a> be <var title="">selected pixel density</var>.</li>
- <li><p>Replace the <code><a href=#the-img-element>img</a></code> element's image data with the
- resource obtained by the earlier step of this algorithm. It can
- be either <a href=#cors-same-origin>CORS-same-origin</a> or
- <a href=#cors-cross-origin>CORS-cross-origin</a>; this affects the
- <a href=#origin>origin</a> of the image itself (e.g. when used on a
- <code><a href=#the-canvas-element>canvas</a></code>).</li>
+ <li><p>Replace the <code><a href=#the-img-element>img</a></code> element's image data with the resource obtained by the
+ earlier step of this algorithm. It can be either <a href=#cors-same-origin>CORS-same-origin</a> or
+ <a href=#cors-cross-origin>CORS-cross-origin</a>; this affects the <a href=#origin>origin</a> of the image itself (e.g.
+ when used on a <code><a href=#the-canvas-element>canvas</a></code>).</li>
- <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title="">load</code> at the <code><a href=#the-img-element>img</a></code> element.</li>
+ <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title="">load</code> at the
+ <code><a href=#the-img-element>img</a></code> element.</li>
</ol></li>
- </ol><hr><p>The <a href=#task-source>task source</a> for the <a href=#concept-task title=concept-task>tasks</a> <a href=#queue-a-task title="queue a
- task">queued</a> by algorithms in this section is the <a href=#dom-manipulation-task-source>DOM
- manipulation task source</a>.</p>
+ </ol><hr><p>The <a href=#task-source>task source</a> for the <a href=#concept-task title=concept-task>tasks</a> <a href=#queue-a-task title="queue
+ a task">queued</a> by algorithms in this section 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>
+ <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>
- <dl class=switch><dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
- and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to
- the empty string</dt>
+ <dl class=switch><dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to the empty string</dt>
<dd>
- <p>The image is either decorative or supplemental to the rest of
- the content, redundant with some other information in the
- document.</p>
+ <p>The image is either decorative or supplemental to the rest of the content, redundant with
+ some other information in the document.</p>
- <p>If the image is <a href=#img-available title=img-available>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 <a href=#img-available title=img-available>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>Otherwise, the element <a href=#represents>represents</a> nothing, and may
- be omitted completely from the rendering. User agents may provide
- the user with a notification that an image is present but has been
- omitted from the rendering.</p>
+ <p>Otherwise, the element <a href=#represents>represents</a> nothing, and may be omitted completely from
+ the rendering. User agents may provide the user with a notification that an image is present but
+ has been omitted from the rendering.</p>
</dd>
- <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
- and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to a
- value that isn't empty</dt>
+ <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to a value that isn't empty</dt>
<dd>
- <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>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 <a href=#img-available title=img-available>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 <a href=#img-available title=img-available>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>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
- agents may provide the user with a notification that an image is
- present but has been omitted from the rendering.</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 agents may provide the user with a notification
+ that an image is present but has been omitted from the rendering.</p>
</dd>
- <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
- and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not</dt>
+ <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not</dt>
<dd>
- <p>The image might be a key part of the content, and there is no
- textual equivalent of the image available.</p>
+ <p>The image might be a key part of the content, and there is no textual equivalent of the image
+ available.</p>
- <p class=note>In a conforming document, the absence of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute indicates that the image
- 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 class=note>In a conforming document, the absence of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute indicates that the image 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 <a href=#img-available title=img-available>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 <a href=#img-available title=img-available>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>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>
+ <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' --><!-- NOTE: the order of these steps is important; it's intended
- to make the innermost caption override the outer ones --><li><p>If the image has a <code title=attr-title><a href=#attr-title>title</a></code>
- attribute whose value is not the empty string, then the value of
- that attribute is the caption information; abort these
+ <ol><!-- when editing this list, search for the two other occurrences of 'critical-no-alt' --><!-- NOTE: the order of these steps is important; it's intended to make the innermost caption
+ override the outer ones --><li><p>If the image has a <code title=attr-title><a href=#attr-title>title</a></code> attribute whose value is not
+ the empty string, then the value of that attribute is the caption information; abort these
steps.</li>
- <li><p>If the image is a descendant of a <code><a href=#the-figure-element>figure</a></code>
- element that has a child <code><a href=#the-figcaption-element>figcaption</a></code> element, and,
- ignoring the <code><a href=#the-figcaption-element>figcaption</a></code> element and its descendants,
- the <code><a href=#the-figure-element>figure</a></code> element has no <code><a href=#text>Text</a></code> node
- descendants other than <a href=#inter-element-whitespace>inter-element whitespace</a>, and
- no <a href=#embedded-content>embedded content</a> descendant other than the
- <code><a href=#the-img-element>img</a></code> element, then the contents of the first such
- <code><a href=#the-figcaption-element>figcaption</a></code> element are the caption information;
- abort these steps.</li>
+ <li><p>If the image is a descendant of a <code><a href=#the-figure-element>figure</a></code> element that has a child
+ <code><a href=#the-figcaption-element>figcaption</a></code> element, and, ignoring the <code><a href=#the-figcaption-element>figcaption</a></code> element and its
+ descendants, the <code><a href=#the-figure-element>figure</a></code> element has no <code><a href=#text>Text</a></code> node descendants other
+ than <a href=#inter-element-whitespace>inter-element whitespace</a>, and no <a href=#embedded-content>embedded content</a> descendant
+ other than the <code><a href=#the-img-element>img</a></code> element, then the contents of the first such
+ <code><a href=#the-figcaption-element>figcaption</a></code> element are the caption information; abort these steps.</li>
<li><p>There is no caption information.</li>
</ol></dd>
- <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is not
- set and either the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
- is set to the empty string or the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not set at all</dt>
+ <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is not set and either the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to the empty string or the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not set at all</dt>
<dd>
@@ -24272,32 +24031,21 @@
</dd>
- </dl><p>The <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute does not
- represent advisory information. User agents must not present the
- contents of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute in
- the same way as content of the <code title=attr-title><a href=#attr-title>title</a></code>
- attribute.</p>
+ </dl><p>The <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute does not represent advisory information.
+ User agents must not present the contents of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
+ in the same way as content of the <code title=attr-title><a href=#attr-title>title</a></code> attribute.</p>
- <p>User agents may always provide the user with the option to
- display any image, or to prevent any image from being
- displayed.
+ <p>User agents may always provide the user with the option to display any image, or to prevent any
+ image from being displayed. User agents may also apply heuristics to help the user make use of the
+ image when the user is unable to see it, e.g. due to a visual disability or because they are using
+ a text terminal with no graphics capabilities. Such heuristics could include, for instance,
+ optical character recognition (OCR) of text found within the image.</p>
- User agents may also apply heuristics to help the user make use of
- the image when the user is unable to see it, e.g. due to a visual
- disability or because they are using a text terminal with no
- graphics capabilities. Such heuristics could include, for instance,
- optical character recognition (OCR) of text found within the image.
-
- </p>
-
- <p class=warning>While user agents are encouraged to repair cases
- of missing <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes, authors
- must not rely on such behavior. <a href=#alt>Requirements for
- providing text to act as an alternative for images</a> are described
+ <p class=warning>While user agents are encouraged to repair cases of missing <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes, authors must not rely on such behavior. <a href=#alt>Requirements for providing text to act as an alternative for images</a> are described
in detail below.</p>
- <p>The <em>contents</em> of <code><a href=#the-img-element>img</a></code> elements, if any, are
- ignored for the purposes of rendering.</p>
+ <p>The <em>contents</em> of <code><a href=#the-img-element>img</a></code> elements, if any, are ignored for the purposes of
+ rendering.</p>
</div>
@@ -24322,20 +24070,18 @@
<div class=impl>
- <p>The <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn>, <dfn id=dom-img-src title=dom-img-src><code>src</code></dfn>,
- and <dfn id=dom-img-srcset title=dom-img-srcset><code>srcset</code></dfn>
- IDL attributes must <a href=#reflect>reflect</a> the respective content
- attributes of the same name.</p>
+ <p>The <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn>, <dfn id=dom-img-src title=dom-img-src><code>src</code></dfn>, and <dfn id=dom-img-srcset title=dom-img-srcset><code>srcset</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ respective content attributes of the same name.</p>
- <p>The <dfn id=dom-img-crossorigin title=dom-img-crossOrigin><code>crossOrigin</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content
- attribute, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
+ <p>The <dfn id=dom-img-crossorigin title=dom-img-crossOrigin><code>crossOrigin</code></dfn> IDL attribute must
+ <a href=#reflect>reflect</a> the <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
+ <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
- <p>The <dfn id=dom-img-usemap title=dom-img-useMap><code>useMap</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the <code title=attr-img-usemap>usemap</code> content attribute.</p>
+ <p>The <dfn id=dom-img-usemap title=dom-img-useMap><code>useMap</code></dfn> IDL attribute must
+ <a href=#reflect>reflect</a> the <code title=attr-img-usemap>usemap</code> content attribute.</p>
- <p>The <dfn id=dom-img-ismap title=dom-img-isMap><code>isMap</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> content attribute.</p>
+ <p>The <dfn id=dom-img-ismap title=dom-img-isMap><code>isMap</code></dfn> IDL attribute must <a href=#reflect>reflect</a>
+ the <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> content attribute.</p>
</div>
Modified: index
===================================================================
--- index 2013-01-26 01:00:42 UTC (rev 7653)
+++ index 2013-01-26 01:05:11 UTC (rev 7654)
@@ -13974,75 +13974,61 @@
};
<a href=#htmllinkelement>HTMLLinkElement</a> implements <a href=#linkstyle>LinkStyle</a>;</pre>
</dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-link-element>link</a></code> element allows authors to link their
- document to other resources.</p>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-link-element>link</a></code> element allows authors to link their document to other resources.</p>
- <p>The destination of the link(s) is given by the <dfn id=attr-link-href title=attr-link-href><code>href</code></dfn> attribute, which must
- be present and must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
- surrounded by spaces</a>. <span class=impl>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute is absent, then the
- element does not define a link.</span></p>
+ <p>The destination of the link(s) is given by the <dfn id=attr-link-href title=attr-link-href><code>href</code></dfn> attribute, which must be present and must contain a
+ <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>. <span class=impl>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute is absent, then the element does not define a
+ link.</span></p>
- <p>A <code><a href=#the-link-element>link</a></code> element must have either a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute or an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, but not both.</p>
+ <p>A <code><a href=#the-link-element>link</a></code> element must have either a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute
+ or an <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, but not both.</p>
- <p class=note>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code>
- attribute is used, the element is restricted to the
- <code><a href=#the-head-element>head</a></code> element. When used with the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, the element can be
- used both in the <code><a href=#the-head-element>head</a></code> element and in the
- <code><a href=#the-body-element>body</a></code> of the page, subject to the constraints of the
- microdata model.</p>
+ <p class=note>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute is used, the element is
+ restricted to the <code><a href=#the-head-element>head</a></code> element. When used with the <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attribute, the element can be used both in the
+ <code><a href=#the-head-element>head</a></code> element and in the <code><a href=#the-body-element>body</a></code> of the page, subject to the constraints of
+ the microdata model.</p>
- <p>The types of link indicated (the relationships) are given by the
- value of the <dfn id=attr-link-rel title=attr-link-rel><code>rel</code></dfn>
- attribute, which, if present, must have a value that is a <a href=#set-of-space-separated-tokens>set
- of space-separated tokens</a>. The <a href=#linkTypes>allowed
- keywords and their meanings</a> are defined in a later
- section. <span class=impl>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute is absent, has no
- keywords, or if none of the keywords used are allowed according to
- the definitions in this specification, then the element does not
+ <p>The types of link indicated (the relationships) are given by the value of the <dfn id=attr-link-rel title=attr-link-rel><code>rel</code></dfn> attribute, which, if present, must have a value that
+ is a <a href=#set-of-space-separated-tokens>set of space-separated tokens</a>. The <a href=#linkTypes>allowed keywords and
+ their meanings</a> are defined in a later section. <span class=impl>If the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute is absent, has no keywords, or if none of the keywords
+ used are allowed according to the definitions in this specification, then the element does not
create any links.</span></p>
- <p>Two categories of links can be created using the
- <code><a href=#the-link-element>link</a></code> element: <a href=#external-resource-link title="external resource
- link">Links to external resources</a> and <a href=#hyperlink title=hyperlink>hyperlinks</a>. The <a href=#linkTypes>link
- types section</a> defines whether a particular link type is an
- external resource or a hyperlink. One <code><a href=#the-link-element>link</a></code> element can
- create multiple links (of which some might be external resource
- links and some might be hyperlinks); exactly which and how many
- links are created depends on the keywords given in the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute. User agents must process
- the links on a per-link basis, not a per-element basis.</p>
+ <p>Two categories of links can be created using the <code><a href=#the-link-element>link</a></code> element: <a href=#external-resource-link title="external resource link">Links to external resources</a> and <a href=#hyperlink title=hyperlink>hyperlinks</a>. The <a href=#linkTypes>link types section</a> defines
+ whether a particular link type is an external resource or a hyperlink. One <code><a href=#the-link-element>link</a></code>
+ element can create multiple links (of which some might be external resource links and some might
+ be hyperlinks); exactly which and how many links are created depends on the keywords given in the
+ <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute. User agents must process the links on a per-link
+ basis, not a per-element basis.</p>
- <p class=note>Each link created for a <code><a href=#the-link-element>link</a></code> element is
- handled separately. For instance, if there are two <code><a href=#the-link-element>link</a></code>
- elements with <code title="">rel="stylesheet"</code>, they each
- count as a separate external resource, and each is affected by its
- own attributes independently. Similarly, if a single
- <code><a href=#the-link-element>link</a></code> element has a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute with the value <code title="">next stylesheet</code>, it creates both a
- <a href=#hyperlink>hyperlink</a> (for the <code title=rel-next><a href=#link-type-next>next</a></code>
- keyword) and an <a href=#external-resource-link>external resource link</a> (for the <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> keyword), and they are
- affected by other attributes (such as <code title=attr-link-media><a href=#attr-link-media>media</a></code> or <code title=attr-link-title><a href=#attr-link-title>title</a></code>) differently.</p>
+ <p class=note>Each link created for a <code><a href=#the-link-element>link</a></code> element is handled separately. For
+ instance, if there are two <code><a href=#the-link-element>link</a></code> elements with <code title="">rel="stylesheet"</code>,
+ they each count as a separate external resource, and each is affected by its own attributes
+ independently. Similarly, if a single <code><a href=#the-link-element>link</a></code> element has a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute with the value <code title="">next stylesheet</code>,
+ it creates both a <a href=#hyperlink>hyperlink</a> (for the <code title=rel-next><a href=#link-type-next>next</a></code> keyword) and
+ an <a href=#external-resource-link>external resource link</a> (for the <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code>
+ keyword), and they are affected by other attributes (such as <code title=attr-link-media><a href=#attr-link-media>media</a></code> or <code title=attr-link-title><a href=#attr-link-title>title</a></code>)
+ differently.</p>
<div class=example>
- <p>For example, the following <code><a href=#the-link-element>link</a></code> element creates two
- hyperlinks (to the same page):</p>
+ <p>For example, the following <code><a href=#the-link-element>link</a></code> element creates two hyperlinks (to the same
+ page):</p>
<pre><link rel="author license" href="/about"></pre>
- <p>The two links created by this element are one whose semantic is
- that the target page has information about the current page's
- author, and one whose semantic is that the target page has
- information regarding the license under which the current page is
- provided.</p>
+ <p>The two links created by this element are one whose semantic is that the target page has
+ information about the current page's author, and one whose semantic is that the target page has
+ information regarding the license under which the current page is provided.</p>
</div>
<p>The <dfn id=attr-link-crossorigin title=attr-link-crossorigin><code>crossorigin</code></dfn> attribute is a <a href=#cors-settings-attribute>CORS
settings attribute</a>. It is intended for use with external resource links.</p>
- <p>The exact behavior for links to external resources depends on the
- exact relationship, as defined for the relevant link type. Some of
- the attributes control whether or not the external resource is to be
- applied (as defined below).</p>
+ <p>The exact behavior for links to external resources depends on the exact relationship, as
+ defined for the relevant link type. Some of the attributes control whether or not the external
+ resource is to be applied (as defined below).</p>
<div class=impl>
@@ -14051,12 +14037,10 @@
not applied. To <dfn id=concept-link-obtain title=concept-link-obtain>obtain the resource</dfn>, the user agent must
run the following steps:</p>
- <ol><li><p>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute's
- value is the empty string, then abort these steps.</li>
+ <ol><li><p>If the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute's value is the empty string,
+ then abort these steps.</li>
- <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the
- <a href=#url>URL</a> given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute, relative to the
- element.</li>
+ <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> the <a href=#url>URL</a> given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute, relative to the element.</li>
<li><p>If the previous step fails, then abort these steps.</li>
@@ -14072,161 +14056,133 @@
</li>
- </ol><p>User agents may opt to only try to obtain such resources when
- they are needed, instead of pro-actively <a href=#fetch title=fetch>fetching</a> all the external resources that are
- not applied.</p>
+ </ol><p>User agents may opt to only try to obtain such resources when they are needed, instead of
+ pro-actively <a href=#fetch title=fetch>fetching</a> all the external resources that are not
+ applied.</p>
- <p>The semantics of the protocol used (e.g. HTTP) must be followed
- when fetching external resources. (For example, redirects will be
- followed and 404 responses will cause the external resource to not
- be applied.)</p>
+ <p>The semantics of the protocol used (e.g. HTTP) must be followed when fetching external
+ resources. (For example, redirects will be followed and 404 responses will cause the external
+ resource to not be applied.)</p>
<!-- the next few paragraph are similar to text in the <style> section -->
- <p>Once the attempts to obtain the resource and its <a href=#critical-subresources>critical
- subresources</a> are complete, the user agent must, if the loads
- were successful, <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-link-element>link</a></code> element, or, if the resource or one of its
- <a href=#critical-subresources>critical subresources</a> failed to completely load for any
- reason (e.g. DNS error, HTTP 404 response, a connection being
- prematurely closed, unsupported Content-Type), <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-link-element>link</a></code>
- element. Non-network errors in processing the resource or its
- subresources (e.g. CSS parse errors, PNG decoding errors) are not
- failures for the purposes of this paragraph.</p>
+ <p>Once the attempts to obtain the resource and its <a href=#critical-subresources>critical subresources</a> are
+ complete, the user agent must, if the loads were successful, <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-link-element>link</a></code> element, or, if the resource or one of its <a href=#critical-subresources>critical subresources</a>
+ failed to completely load for any reason (e.g. DNS error, HTTP 404 response, a connection being
+ prematurely closed, unsupported Content-Type), <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-link-element>link</a></code> element.
+ Non-network errors in processing the resource or its subresources (e.g. CSS parse errors, PNG
+ decoding errors) are not failures for the purposes of this paragraph.</p>
- <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>
+ <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>
- <p>The element must <a href=#delay-the-load-event>delay the load event</a> of the
- element's document until all the attempts to obtain the resource and
- its <a href=#critical-subresources>critical subresources</a> are complete. (Resources that
- the user agent has not yet attempted to obtain, e.g. because it is
- waiting for the resource to be needed, do not <a href=#delay-the-load-event>delay the load
- event</a>.)</p>
+ <p>The element must <a href=#delay-the-load-event>delay the load event</a> of the element's document until all the
+ attempts to obtain the resource and its <a href=#critical-subresources>critical subresources</a> are complete.
+ (Resources that the user agent has not yet attempted to obtain, e.g. because it is waiting for the
+ resource to be needed, do not <a href=#delay-the-load-event>delay the load event</a>.)</p>
- <hr><p id=linkui>Interactive user agents may provide users with a
- means to <a href=#following-hyperlinks title="following hyperlinks">follow the
- hyperlinks</a> created using the <code><a href=#the-link-element>link</a></code> element,
- somewhere within their user interface. The exact interface is not
- defined by this specification, but it could include the following
- information (obtained from the element's attributes, again as
- defined below), in some form or another (possibly simplified), for
- each hyperlink created with each <code><a href=#the-link-element>link</a></code> element in the
- document:</p>
+ <hr><p id=linkui>Interactive user agents may provide users with a means to <a href=#following-hyperlinks title="following
+ hyperlinks">follow the hyperlinks</a> created using the <code><a href=#the-link-element>link</a></code> element, somewhere
+ within their user interface. The exact interface is not defined by this specification, but it
+ could include the following information (obtained from the element's attributes, again as defined
+ below), in some form or another (possibly simplified), for each hyperlink created with each
+ <code><a href=#the-link-element>link</a></code> element in the document:</p>
- <ul><!-- the order here is the order that makes most sense for a UI --><li>The relationship between this document and the resource (given
- by the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute)</li>
+ <ul><!-- the order here is the order that makes most sense for a UI --><li>The relationship between this document and the resource (given by the <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute)</li>
- <li>The title of the resource (given by the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute).</li>
+ <li>The title of the resource (given by the <code title=attr-link-title><a href=#attr-link-title>title</a></code>
+ attribute).</li>
- <li>The address of the resource (given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute).</li>
+ <li>The address of the resource (given by the <code title=attr-link-href><a href=#attr-link-href>href</a></code>
+ attribute).</li>
- <li>The language of the resource (given by the <code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code> attribute).</li>
+ <li>The language of the resource (given by the <code title=attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code>
+ attribute).</li>
- <li>The optimum media for the resource (given by the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute).</li>
+ <li>The optimum media for the resource (given by the <code title=attr-link-media><a href=#attr-link-media>media</a></code>
+ attribute).</li>
- </ul><p>User agents could also include other information, such as the
- type of the resource (as given by the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute).</p>
+ </ul><p>User agents could also include other information, such as the type of the resource (as given by
+ the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute).</p>
</div>
- <p class=note>Hyperlinks created with the <code><a href=#the-link-element>link</a></code>
- element and its <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute
- apply to the whole page. This contrasts with the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute of <code><a href=#the-a-element>a</a></code>
- and <code><a href=#the-area-element>area</a></code> elements, which indicates the type of a link
- whose context is given by the link's location within the
+ <p class=note>Hyperlinks created with the <code><a href=#the-link-element>link</a></code> element and its <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute apply to the whole page. This contrasts with the <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code> attribute of <code><a href=#the-a-element>a</a></code> and <code><a href=#the-area-element>area</a></code> elements,
+ which indicates the type of a link whose context is given by the link's location within the
document.</p>
- <p>The <dfn id=attr-link-media title=attr-link-media><code>media</code></dfn>
- attribute says which media the resource applies to. The value must
- be a <a href=#valid-media-query>valid media query</a>.</p>
+ <p>The <dfn id=attr-link-media title=attr-link-media><code>media</code></dfn> attribute says which media the
+ resource applies to. The value must be a <a href=#valid-media-query>valid media query</a>.</p>
<div class=impl>
- <p>If the link is a <a href=#hyperlink>hyperlink</a> then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is purely advisory,
- and describes for which media the document in question was
+ <p>If the link is a <a href=#hyperlink>hyperlink</a> then the <code title=attr-link-media><a href=#attr-link-media>media</a></code>
+ attribute is purely advisory, and describes for which media the document in question was
designed.</p>
- <p>However, if the link is an <a href=#external-resource-link>external resource link</a>,
- then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is
- prescriptive. The user agent must apply the external resource when
- the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute's value
- <a href=#matches-the-environment>matches the environment</a> and the other relevant
- conditions apply, and must not apply it otherwise.</p><!-- note
- similar text in <style> section -->
+ <p>However, if the link is an <a href=#external-resource-link>external resource link</a>, then the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is prescriptive. The user agent must apply the
+ external resource when the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute's value
+ <a href=#matches-the-environment>matches the environment</a> and the other relevant conditions apply, and must not apply
+ it otherwise.</p><!-- note similar text in <style> section -->
- <p class=note>The external resource might have further
- restrictions defined within that limit its applicability. For
- example, a CSS style sheet might have some <code title="">@media</code> blocks. This specification does not override
- such further restrictions or requirements.</p><!-- note similar text
- in <style> section -->
+ <p class=note>The external resource might have further restrictions defined within that limit
+ its applicability. For example, a CSS style sheet might have some <code title="">@media</code>
+ blocks. This specification does not override such further restrictions or requirements.</p><!--
+ note similar text in <style> section -->
</div>
- <p id=default-media>The default, if the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is omitted, is "<code title="">all</code>", meaning that by default links apply to all
- media.</p>
+ <p id=default-media>The default, if the <code title=attr-link-media><a href=#attr-link-media>media</a></code> attribute is
+ omitted, is "<code title="">all</code>", meaning that by default links apply to all media.</p>
- <p>The <dfn id=attr-link-hreflang title=attr-link-hreflang><code>hreflang</code></dfn>
- attribute on the <code><a href=#the-link-element>link</a></code> element has the same semantics as
- the <a href=#attr-hyperlink-hreflang title=attr-hyperlink-hreflang><code>hreflang</code>
- attribute on <code>a</code> and <code>area</code>
- elements</a>.</p>
+ <p>The <dfn id=attr-link-hreflang title=attr-link-hreflang><code>hreflang</code></dfn> attribute on the
+ <code><a href=#the-link-element>link</a></code> element has the same semantics as the <a href=#attr-hyperlink-hreflang title=attr-hyperlink-hreflang><code>hreflang</code> attribute on <code>a</code> and
+ <code>area</code> elements</a>.</p>
- <p>The <dfn id=attr-link-type title=attr-link-type><code>type</code></dfn> attribute
- gives the <a href=#mime-type>MIME type</a> of the linked resource. It is
- purely advisory. The value must be a <a href=#valid-mime-type>valid MIME
+ <p>The <dfn id=attr-link-type title=attr-link-type><code>type</code></dfn> attribute gives the <a href=#mime-type>MIME
+ type</a> of the linked resource. It is purely advisory. The value must be a <a href=#valid-mime-type>valid MIME
type</a>.</p>
- <p>For <a href=#external-resource-link title="external resource link">external resource
- links</a>, the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute
- is used as a hint to user agents so that they can avoid fetching
- resources they do not support. <span class=impl>If the attribute
- is present, then the user agent must assume that the resource is of
- the given type (even if that is not a <a href=#valid-mime-type>valid MIME type</a>,
- e.g. the empty string). If the attribute is omitted, but the
- external resource link type has a default type defined, then the
- user agent must assume that the resource is of that type. If the UA
- does not support the given <a href=#mime-type>MIME type</a> for the given link
- relationship, then the UA should not <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource; if the UA
- does support the given <a href=#mime-type>MIME type</a> for the given link
- relationship, then the UA should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource at the
- appropriate time as specified for the <a href=#external-resource-link>external resource
- link</a>'s particular type. If the attribute is omitted, and the
- external resource link type does not have a default type defined,
- but the user agent would <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource if the type
- was known and supported, then the user agent should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource under the
- assumption that it will be supported.</span></p>
+ <p>For <a href=#external-resource-link title="external resource link">external resource links</a>, the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute is used as a hint to user agents so that they can
+ avoid fetching resources they do not support. <span class=impl>If the attribute is present, then
+ the user agent must assume that the resource is of the given type (even if that is not a
+ <a href=#valid-mime-type>valid MIME type</a>, e.g. the empty string). If the attribute is omitted, but the
+ external resource link type has a default type defined, then the user agent must assume that the
+ resource is of that type. If the UA does not support the given <a href=#mime-type>MIME type</a> for the
+ given link relationship, then the UA should not <a href=#concept-link-obtain title=concept-link-obtain>obtain</a>
+ the resource; if the UA does support the given <a href=#mime-type>MIME type</a> for the given link
+ relationship, then the UA should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource at
+ the appropriate time as specified for the <a href=#external-resource-link>external resource link</a>'s particular type.
+ If the attribute is omitted, and the external resource link type does not have a default type
+ defined, but the user agent would <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource if
+ the type was known and supported, then the user agent should <a href=#concept-link-obtain title=concept-link-obtain>obtain</a> the resource under the assumption that it will be
+ supported.</span></p>
<div class=impl>
- <p>User agents must not consider the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute authoritative —
- upon fetching the resource, user agents must not use the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute to determine its actual
- type. Only the actual type (as defined in the next paragraph) is
- used to determine whether to <em>apply</em> the resource, not the
- aforementioned assumed type.</p>
+ <p>User agents must not consider the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute
+ authoritative — upon fetching the resource, user agents must not use the <code title=attr-link-type><a href=#attr-link-type>type</a></code> attribute to determine its actual type. Only the actual type
+ (as defined in the next paragraph) is used to determine whether to <em>apply</em> the resource,
+ not the aforementioned assumed type.</p>
- <p id=concept-link-type-sniffing>If the external resource link
- type defines rules for processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, then those rules
- apply. Otherwise, if the resource is expected to be an image, user
- agents may apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing:
- image">image sniffing rules</a>, with the <var title="">official
- type</var> being the type determined from the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, and use the
- resulting sniffed type of the resource as if it was the actual
- type. Otherwise, if neither of these conditions apply or if the user
- agent opts not to apply the image sniffing rules, then the user
- agent must use the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a> to determine the
- type of the resource. If there is no type metadata, but the external
- resource link type has a default type defined, then the user agent
- must assume that the resource is of that type.</p>
+ <p id=concept-link-type-sniffing>If the external resource link type defines rules for processing
+ the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>, then those rules apply.
+ Otherwise, if the resource is expected to be an image, user agents may apply the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a>, with the <var title="">official
+ type</var> being the type determined from the resource's <a href=#content-type title=Content-Type>Content-Type
+ metadata</a>, and use the resulting sniffed type of the resource as if it was the actual type.
+ Otherwise, if neither of these conditions apply or if the user agent opts not to apply the image
+ sniffing rules, then the user agent must use the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a> to determine the type of the resource. If there
+ is no type metadata, but the external resource link type has a default type defined, then the user
+ agent must assume that the resource is of that type.</p>
- <p class=note>The <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code>
- link type defines rules for processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>.</p>
+ <p class=note>The <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> link type defines rules for
+ processing the resource's <a href=#content-type title=Content-Type>Content-Type metadata</a>.</p>
- <p>Once the user agent has established the type of the resource, the
- user agent must apply the resource if it is of a supported type and
- the other relevant conditions apply, and must ignore the resource
- otherwise.</p>
+ <p>Once the user agent has established the type of the resource, the user agent must apply the
+ resource if it is of a supported type and the other relevant conditions apply, and must ignore the
+ resource otherwise.</p>
<div class=example>
@@ -14236,64 +14192,53 @@
<link rel="stylesheet" href="B" type="text/css">
<link rel="stylesheet" href="C"></pre>
- <p>...then a compliant UA that supported only CSS style sheets
- would fetch the B and C files, and skip the A file (since
- <code>text/plain</code> is not the <a href=#mime-type>MIME type</a> for CSS style
+ <p>...then a compliant UA that supported only CSS style sheets would fetch the B and C files, and
+ skip the A file (since <code>text/plain</code> is not the <a href=#mime-type>MIME type</a> for CSS style
sheets).</p>
- <p>For files B and C, it would then check the actual types returned
- by the server. For those that are sent as <code>text/css</code>, it
- would apply the styles, but for those labeled as
+ <p>For files B and C, it would then check the actual types returned by the server. For those that
+ are sent as <code>text/css</code>, it would apply the styles, but for those labeled as
<code>text/plain</code>, or any other type, it would not.</p>
- <p>If one of the two files was returned without a
- <a href=#content-type>Content-Type</a> metadata, or with a syntactically
- incorrect type like <code title="">Content-Type: "null"</code>, then the default type
- for <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> links would kick
- in. Since that default type is <code title="">text/css</code>, the
- style sheet <em>would</em> nonetheless be applied.</p>
+ <p>If one of the two files was returned without a <a href=#content-type>Content-Type</a> metadata, or with a
+ syntactically incorrect type like <code title="">Content-Type: "null"</code>, then the
+ default type for <code title=rel-stylesheet><a href=#link-type-stylesheet>stylesheet</a></code> links would kick in. Since that
+ default type is <code title="">text/css</code>, the style sheet <em>would</em> nonetheless be
+ applied.</p>
</div>
</div>
- <p>The <dfn id=attr-link-title title=attr-link-title><code>title</code></dfn>
- attribute gives the title of the link. With one exception, it is
- purely advisory. The value is text. The exception is for style sheet
- links, where the <code title=attr-link-title><a href=#attr-link-title>title</a></code>
- attribute defines <a href=#alternative-style-sheet-sets>alternative style sheet sets</a>.</p>
+ <p>The <dfn id=attr-link-title title=attr-link-title><code>title</code></dfn> attribute gives the title of the
+ link. With one exception, it is purely advisory. The value is text. The exception is for style
+ sheet links, where the <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute defines
+ <a href=#alternative-style-sheet-sets>alternative style sheet sets</a>.</p>
- <p class=note>The <code title=attr-link-title><a href=#attr-link-title>title</a></code>
- attribute on <code><a href=#the-link-element>link</a></code> elements differs from the global
- <code title=attr-title><a href=#attr-title>title</a></code> attribute of most other
- elements in that a link without a title does not inherit the title
- of the parent element: it merely has no title.</p>
+ <p class=note>The <code title=attr-link-title><a href=#attr-link-title>title</a></code> attribute on <code><a href=#the-link-element>link</a></code>
+ elements differs from the global <code title=attr-title><a href=#attr-title>title</a></code> attribute of most other
+ elements in that a link without a title does not inherit the title of the parent element: it
+ merely has no title.</p>
- <p>The <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attribute is used
- with the <code title=rel-icon><a href=#rel-icon>icon</a></code> link type. The attribute
- must not be specified on <code><a href=#the-link-element>link</a></code> elements that do not have
- a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute that specifies
- the <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword.</p>
+ <p>The <code title=attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> attribute is used with the <code title=rel-icon><a href=#rel-icon>icon</a></code> link type. The attribute must not be specified on <code><a href=#the-link-element>link</a></code>
+ elements that do not have a <code title=attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute that specifies the
+ <code title=rel-icon><a href=#rel-icon>icon</a></code> keyword.</p>
<div class=impl>
<!--!--><!-- s/header fields/headers/ for consistency with the rest of the spec -->
- <p>HTTP <code title=http-link>Link:</code> header fields, if
- supported, must be assumed to come before any links in the document,
- in the order that they were given in the HTTP message. These header
- fields are to be processed according to the rules given in the
- relevant specifications. <a href=#refsHTTP>[HTTP]</a> <a href=#refsWEBLINK>[WEBLINK]</a></p> <!-- WEBLINK is ref for Link:
+ <p>HTTP <code title=http-link>Link:</code> header fields, if supported, must be assumed to come
+ before any links in the document, in the order that they were given in the HTTP message. These
+ header fields are to be processed according to the rules given in the relevant specifications. <a href=#refsHTTP>[HTTP]</a> <a href=#refsWEBLINK>[WEBLINK]</a></p> <!-- WEBLINK is ref for Link:
header -->
- <p class=note>Registration of relation types in HTTP Link: header
- fields is distinct from <a href=#linkTypes>HTML link types</a>,
- and thus their semantics can be different from same-named HTML
- types.</p>
+ <p class=note>Registration of relation types in HTTP Link: header fields is distinct from <a href=#linkTypes>HTML link types</a>, and thus their semantics can be different from same-named
+ HTML types.</p>
- <p>The IDL attributes <dfn id=dom-link-href title=dom-link-href><code>href</code></dfn>, <dfn id=dom-link-rel title=dom-link-rel><code>rel</code></dfn>, <dfn id=dom-link-media title=dom-link-media><code>media</code></dfn>, <dfn id=dom-link-hreflang title=dom-link-hreflang><code>hreflang</code></dfn>, <dfn id=dom-link-type title=dom-link-type><code>type</code></dfn>, and <dfn id=dom-link-sizes title=dom-link-sizes><code>sizes</code></dfn> each must
- <a href=#reflect>reflect</a> the respective content attributes of the same
- name.</p>
+ <p>The IDL attributes <dfn id=dom-link-href title=dom-link-href><code>href</code></dfn>, <dfn id=dom-link-rel title=dom-link-rel><code>rel</code></dfn>, <dfn id=dom-link-media title=dom-link-media><code>media</code></dfn>,
+ <dfn id=dom-link-hreflang title=dom-link-hreflang><code>hreflang</code></dfn>, <dfn id=dom-link-type title=dom-link-type><code>type</code></dfn>, and <dfn id=dom-link-sizes title=dom-link-sizes><code>sizes</code></dfn> each must <a href=#reflect>reflect</a> the respective
+ content attributes of the same name.</p>
<p>The <dfn id=dom-link-crossorigin title=dom-link-crossOrigin><code>crossOrigin</code></dfn> IDL attribute must
<a href=#reflect>reflect</a> the <code title=attr-link-crossorigin><a href=#attr-link-crossorigin>crossorigin</a></code> content
@@ -14303,17 +14248,13 @@
</div>
- <p>The IDL attribute <dfn id=dom-link-disabled title=dom-link-disabled><code>disabled</code></dfn> only applies
- to style sheet links. When the <code><a href=#the-link-element>link</a></code> element defines a
- style sheet link, then the <code title=dom-link-disabled><a href=#dom-link-disabled>disabled</a></code> attribute behaves as
- defined <a href=#dom-linkstyle-disabled title=dom-linkstyle-disabled>for the alternative
- style sheets DOM</a>. For all other <code><a href=#the-link-element>link</a></code> elements it
- always return false and does nothing on setting.</p> <!-- that is
+ <p>The IDL attribute <dfn id=dom-link-disabled title=dom-link-disabled><code>disabled</code></dfn> only applies to
+ style sheet links. When the <code><a href=#the-link-element>link</a></code> element defines a style sheet link, then the <code title=dom-link-disabled><a href=#dom-link-disabled>disabled</a></code> attribute behaves as defined <a href=#dom-linkstyle-disabled title=dom-linkstyle-disabled>for the alternative style sheets DOM</a>. For all other
+ <code><a href=#the-link-element>link</a></code> elements it always return false and does nothing on setting.</p> <!-- that is
normatively required in the definition of dom-linkstyle-disabled -->
- <p>The <code><a href=#linkstyle>LinkStyle</a></code> interface is also implemented by
- this element; the <a href=#styling>styling processing model</a> defines
- how. <a href=#refsCSSOM>[CSSOM]</a></p>
+ <p>The <code><a href=#linkstyle>LinkStyle</a></code> interface is also implemented by this element; the <a href=#styling>styling
+ processing model</a> defines how. <a href=#refsCSSOM>[CSSOM]</a></p>
<div class=example>
@@ -14335,9 +14276,8 @@
<div class=example>
- <p>The following example shows how you can specify versions of the
- page that use alternative formats, are aimed at other languages,
- and that are intended for other media:</p>
+ <p>The following example shows how you can specify versions of the page that use alternative
+ formats, are aimed at other languages, and that are intended for other media:</p>
<pre><link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
@@ -14381,66 +14321,51 @@
attribute DOMString <a href=#dom-meta-content title=dom-meta-content>content</a>;
};</pre>
</dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-meta-element>meta</a></code> element <a href=#represents>represents</a> various
- kinds of metadata that cannot be expressed using the
- <code><a href=#the-title-element>title</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-link-element>link</a></code>,
- <code><a href=#the-style-element>style</a></code>, and <code><a href=#the-script-element>script</a></code> elements.</p>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-meta-element>meta</a></code> element <a href=#represents>represents</a> various kinds of metadata that cannot be
+ expressed using the <code><a href=#the-title-element>title</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#the-style-element>style</a></code>,
+ and <code><a href=#the-script-element>script</a></code> elements.</p>
- <p>The <code><a href=#the-meta-element>meta</a></code> element can represent document-level
- metadata with the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>
- attribute, pragma directives with the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute, and the
- file's <a href=#character-encoding-declaration>character encoding declaration</a> when an HTML
- document is serialized to string form (e.g. for transmission over
- the network or for disk storage) with the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute.</p>
+ <p>The <code><a href=#the-meta-element>meta</a></code> element can represent document-level metadata with the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute, pragma directives with the <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute, and the file's <a href=#character-encoding-declaration>character encoding
+ declaration</a> when an HTML document is serialized to string form (e.g. for transmission over
+ the network or for disk storage) with the <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>
+ attribute.</p>
- <p>Exactly one of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>,
- <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>, and <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attributes must be
- specified.</p>
+ <p>Exactly one of the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>, <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>,
+ and <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> attributes must be specified.</p>
- <p>If either <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>, <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, or <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> is specified, then the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must also be
+ <p>If either <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>, <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, or <code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code> is
+ specified, then the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must also be
specified. Otherwise, it must be omitted.</p>
- <p>The <dfn id=attr-meta-charset title=attr-meta-charset><code>charset</code></dfn>
- attribute specifies the character encoding used by the
- document. This is a <a href=#character-encoding-declaration>character encoding declaration</a>. If
- the attribute is present in an <a href=#xml-documents title="XML documents">XML
- document</a>, its value must be an <a href=#ascii-case-insensitive>ASCII
- case-insensitive</a> match for the string "<code title="">UTF-8</code>" (and the document is therefore forced to use
- UTF-8 as its encoding).</p>
+ <p>The <dfn id=attr-meta-charset title=attr-meta-charset><code>charset</code></dfn> attribute specifies the character
+ encoding used by the document. This is a <a href=#character-encoding-declaration>character encoding declaration</a>. If the
+ attribute is present in an <a href=#xml-documents title="XML documents">XML document</a>, its value must be an
+ <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code title="">UTF-8</code>" (and the
+ document is therefore forced to use UTF-8 as its encoding).</p>
- <p class=note>The <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code>
- attribute on the <code><a href=#the-meta-element>meta</a></code> element has no effect in XML
- documents, and is only allowed in order to facilitate migration to
- and from XHTML.</p>
+ <p class=note>The <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute on the
+ <code><a href=#the-meta-element>meta</a></code> element has no effect in XML documents, and is only allowed in order to
+ facilitate migration to and from XHTML.</p>
- <p>There must not be more than one <code><a href=#the-meta-element>meta</a></code> element with a
- <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute per
- document.</p>
+ <p>There must not be more than one <code><a href=#the-meta-element>meta</a></code> element with a <code title=attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute per document.</p>
- <p>The <dfn id=attr-meta-content title=attr-meta-content><code>content</code></dfn>
- attribute gives the value of the document metadata or pragma
- directive when the element is used for those purposes. The allowed
- values depend on the exact context, as described in subsequent
- sections of this specification.</p>
+ <p>The <dfn id=attr-meta-content title=attr-meta-content><code>content</code></dfn> attribute gives the value of the
+ document metadata or pragma directive when the element is used for those purposes. The allowed
+ values depend on the exact context, as described in subsequent sections of this specification.</p>
- <p>If a <code><a href=#the-meta-element>meta</a></code> element has a <dfn id=attr-meta-name title=attr-meta-name><code>name</code></dfn> attribute, it sets
- document metadata. Document metadata is expressed in terms of
- name-value pairs, the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code>
- attribute on the <code><a href=#the-meta-element>meta</a></code> element giving the name, and the
- <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute on the same
- element giving the value. The name specifies what aspect of metadata
- is being set; valid names and the meaning of their values are
- described in the following sections. If a <code><a href=#the-meta-element>meta</a></code> element
- has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute,
- then the value part of the metadata name-value pair is the empty
- string.</p>
+ <p>If a <code><a href=#the-meta-element>meta</a></code> element has a <dfn id=attr-meta-name title=attr-meta-name><code>name</code></dfn>
+ attribute, it sets document metadata. Document metadata is expressed in terms of name-value pairs,
+ the <code title=attr-meta-name><a href=#attr-meta-name>name</a></code> attribute on the <code><a href=#the-meta-element>meta</a></code> element giving the
+ name, and the <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute on the same element giving
+ the value. The name specifies what aspect of metadata is being set; valid names and the meaning of
+ their values are described in the following sections. If a <code><a href=#the-meta-element>meta</a></code> element has no <code title=attr-meta-content><a href=#attr-meta-content>content</a></code> attribute, then the value part of the metadata name-value
+ pair is the empty string.</p>
<div class=impl>
- <p>The <dfn id=dom-meta-name title=dom-meta-name><code>name</code></dfn> and <dfn id=dom-meta-content title=dom-meta-content><code>content</code></dfn> IDL attributes
- must <a href=#reflect>reflect</a> the respective content attributes of the
- same name. The IDL attribute <dfn id=dom-meta-httpequiv title=dom-meta-httpEquiv><code>httpEquiv</code></dfn> must
- <a href=#reflect>reflect</a> the content attribute <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>.</p>
+ <p>The <dfn id=dom-meta-name title=dom-meta-name><code>name</code></dfn> and <dfn id=dom-meta-content title=dom-meta-content><code>content</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ respective content attributes of the same name. The IDL attribute <dfn id=dom-meta-httpequiv title=dom-meta-httpEquiv><code>httpEquiv</code></dfn> must <a href=#reflect>reflect</a> the content
+ attribute <code title=attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>.</p>
</div>
@@ -23365,107 +23290,82 @@
-->
- <p>The image given by the <dfn id=attr-img-src title=attr-img-src><code>src</code></dfn> and <dfn id=attr-img-srcset title=attr-img-srcset><code>srcset</code></dfn> attributes is the
- embedded content; the value of the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute provides
- equivalent content for those who cannot process images or who have
- image loading disabled (i.e. it is the <code><a href=#the-img-element>img</a></code> element's
- <a href=#fallback-content>fallback content</a>).</p>
+ <p>The image given by the <dfn id=attr-img-src title=attr-img-src><code>src</code></dfn> and <dfn id=attr-img-srcset title=attr-img-srcset><code>srcset</code></dfn> attributes is the embedded content; the value of
+ the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute provides equivalent content for
+ those who cannot process images or who have image loading disabled (i.e. it is the
+ <code><a href=#the-img-element>img</a></code> element's <a href=#fallback-content>fallback content</a>).</p>
- <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>
+ <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>
- <p>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute must be
- present, and must contain a <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially
- surrounded by spaces</a> referencing a non-interactive,
- optionally animated, image resource that is neither paged nor
- scripted.</p>
+ <p>The <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute must be present, and must contain a
+ <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a> referencing a non-interactive,
+ optionally animated, image resource that is neither paged nor scripted.</p>
- <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute may
- also be present. If present, its value must consist of one or more
- <a href=#image-candidate-string title="image candidate string">image candidate strings</a>,
- each separated from the next by a U+002C COMMA character (,). This
- attribute allows authors to provide alternative images for
- environments with smaller screens or screens with higher pixel
- densities.</p>
+ <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute may also be present. If present, its
+ value must consist of one or more <a href=#image-candidate-string title="image candidate string">image candidate
+ strings</a>, each separated from the next by a U+002C COMMA character (,). This attribute
+ allows authors to provide alternative images for environments with smaller screens or screens with
+ higher pixel densities.</p>
<div class=note>
- <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute allows
- authors to provide a set of images to handle graphical displays of
- varying dimensions and pixel densities.</p>
+ <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute allows authors to provide a set of
+ images to handle graphical displays of varying dimensions and pixel densities.</p>
- <p>The attribute essentially takes a comma-separated list of URLs
- each with one or more descriptors giving the maximum viewport
- dimensions and pixel density allowed to use the image. From the
- available options, the user agent then picks the most appropriate
- image. If the viewport dimensions or pixel density changes, the
- user agent can replace the image data with a new image on the
- fly.</p>
+ <p>The attribute essentially takes a comma-separated list of URLs each with one or more
+ descriptors giving the maximum viewport dimensions and pixel density allowed to use the image.
+ From the available options, the user agent then picks the most appropriate image. If the viewport
+ dimensions or pixel density changes, the user agent can replace the image data with a new image
+ on the fly.</p>
- <p>To specify an image, give first a URL, then one or more
- descriptors of the form 100w, 100h, or 2x, where "100w" means
- "maximum viewport width of 100 CSS pixels", "100h" is the same but
- for height, and "2x" means "maximum pixel density of 2 device
- pixels per CSS pixel".</p>
+ <p>To specify an image, give first a URL, then one or more descriptors of the form 100w, 100h, or
+ 2x, where "100w" means "maximum viewport width of 100 CSS pixels", "100h" is the same but for
+ height, and "2x" means "maximum pixel density of 2 device pixels per CSS pixel".</p>
</div>
- <p>An <dfn id=image-candidate-string>image candidate string</dfn> consists of the following
- components, in order, with the further restrictions described below
- this list:</p>
+ <p>An <dfn id=image-candidate-string>image candidate string</dfn> consists of the following components, in order, with the
+ further restrictions described below this list:</p>
- <ol><li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <ol><li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- <li>A <a href=#valid-non-empty-url>valid non-empty URL</a> referencing a
- non-interactive, optionally animated, image resource that is
- neither paged nor scripted.</li>
+ <li>A <a href=#valid-non-empty-url>valid non-empty URL</a> referencing a non-interactive, optionally animated, image
+ resource that is neither paged nor scripted.</li>
- <li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- <li>Optionally a <i>width descriptor</i>, consisting of: a
- <a href=#space-character>space character</a>, a <a href=#valid-non-negative-integer>valid non-negative
- integer</a> representing the <i>width descriptor value</i>, and
- a U+0077 LATIN SMALL LETTER W character.</li>
+ <li>Optionally a <i>width descriptor</i>, consisting of: a <a href=#space-character>space character</a>, a
+ <a href=#valid-non-negative-integer>valid non-negative integer</a> representing the <i>width descriptor value</i>, and a
+ U+0077 LATIN SMALL LETTER W character.</li>
- <li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- <li>Optionally a <i>height descriptor</i>, consisting of: a
- <a href=#space-character>space character</a>, a <a href=#valid-non-negative-integer>valid non-negative
- integer</a> representing the <i>height descriptor value</i>, and
- a U+0068 LATIN SMALL LETTER H character.</li>
+ <li>Optionally a <i>height descriptor</i>, consisting of: a <a href=#space-character>space character</a>, a
+ <a href=#valid-non-negative-integer>valid non-negative integer</a> representing the <i>height descriptor value</i>, and a
+ U+0068 LATIN SMALL LETTER H character.</li>
- <li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- <li>Optionally a <i>pixel density descriptor</i>, consisting of: a
- <a href=#space-character>space character</a>, a <a href=#valid-floating-point-number>valid floating-point
- number</a> giving a number greater than zero representing the
- <i>pixel density descriptor value</i>, and a U+0078 LATIN SMALL
- LETTER X character.</li>
+ <li>Optionally a <i>pixel density descriptor</i>, consisting of: a <a href=#space-character>space character</a>,
+ a <a href=#valid-floating-point-number>valid floating-point number</a> giving a number greater than zero representing the
+ <i>pixel density descriptor value</i>, and a U+0078 LATIN SMALL LETTER X character.</li>
- <li>Zero or more <a href=#space-character title="space character">space
- characters</a>.</li>
+ <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- </ol><p>Each <a href=#image-candidate-string>image candidate string</a> must have at least one
- of the three optional descriptors. There must not be two <a href=#image-candidate-string title="image candidate string">image candidate strings</a> in a
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute whose <i>width
- descriptor value</i>, <i>height descriptor value</i>, and <i>pixel
- density descriptor value</i> are each identical to their counterpart
- in the other <a href=#image-candidate-string>image candidate string</a>; for the purposes
- of this requirement, omitted <i>width descriptors</i> and <i>height
- descriptors</i> are considered to have the value "Infinity", and
- omitted <i>pixel density descriptors</i> are considered to have the
- value 1.</p>
+ </ol><p>Each <a href=#image-candidate-string>image candidate string</a> must have at least one of the three optional
+ descriptors. There must not be two <a href=#image-candidate-string title="image candidate string">image candidate
+ strings</a> in a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute whose <i>width
+ descriptor value</i>, <i>height descriptor value</i>, and <i>pixel density descriptor value</i>
+ are each identical to their counterpart in the other <a href=#image-candidate-string>image candidate string</a>; for the
+ purposes of this requirement, omitted <i>width descriptors</i> and <i>height descriptors</i> are
+ considered to have the value "Infinity", and omitted <i>pixel density descriptors</i> are
+ considered to have the value 1.</p>
<div class=example>
- <p>In this example, a banner that takes half the viewport is
- provided in two versions, one for wide screen and one for narrow
- screens.</p>
+ <p>In this example, a banner that takes half the viewport is provided in two versions, one for
+ wide screen and one for narrow screens.</p>
<pre><h1><img alt="The Breakfast Combo"
src="banner.jpeg"
@@ -23473,34 +23373,21 @@
</div>
- <p class=note>The requirements above imply that images can be
- static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector
- documents (single-page PDFs, XML files with an SVG root element),
- animated bitmaps (APNGs, animated GIFs), animated vector graphics
- (XML files with an SVG root element that use declarative SMIL
- animation), and so forth. However, these definitions preclude SVG
- files with script, multipage PDF files, interactive MNG files, HTML
- documents, plain text documents, and so forth.
- <a href=#refsPNG>[PNG]</a>
- <a href=#refsGIF>[GIF]</a>
- <a href=#refsJPEG>[JPEG]</a>
- <a href=#refsPDF>[PDF]</a>
- <a href=#refsXML>[XML]</a>
- <a href=#refsAPNG>[APNG]</a>
- <!-- <a href="#refsAGIF">[AGIF]</a> -->
- <a href=#refsSVG>[SVG]</a>
- <a href=#refsMNG>[MNG]</a>
- </p>
+ <p class=note>The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs,
+ JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element),
+ animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root
+ element that use declarative SMIL animation), and so forth. However, these definitions preclude
+ SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text
+ documents, and so forth. <a href=#refsPNG>[PNG]</a> <a href=#refsGIF>[GIF]</a> <a href=#refsJPEG>[JPEG]</a> <a href=#refsPDF>[PDF]</a> <a href=#refsXML>[XML]</a> <a href=#refsAPNG>[APNG]</a> <!-- <a href="#refsAGIF">[AGIF]</a> --> <a href=#refsSVG>[SVG]</a>
+ <a href=#refsMNG>[MNG]</a> </p>
- <p>The <code><a href=#the-img-element>img</a></code> element 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 transparent images, as they rarely convey meaning and rarely
- add anything useful to the document.</p>
+ <p>The <code><a href=#the-img-element>img</a></code> element 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 transparent images, as they rarely convey meaning and
+ rarely add anything useful to the document.</p>
- <hr><p>The <dfn id=attr-img-crossorigin title=attr-img-crossorigin><code>crossorigin</code></dfn>
- attribute is a <a href=#cors-settings-attribute>CORS settings attribute</a>. Its purpose is
- to allow images from third-party sites that allow cross-origin
- access to be used with <code><a href=#the-canvas-element>canvas</a></code>.</p>
+ <hr><p>The <dfn id=attr-img-crossorigin title=attr-img-crossorigin><code>crossorigin</code></dfn> attribute is a <a href=#cors-settings-attribute>CORS
+ settings attribute</a>. Its purpose is to allow images from third-party sites that allow
+ cross-origin access to be used with <code><a href=#the-canvas-element>canvas</a></code>.</p>
<div class=impl>
@@ -23522,157 +23409,122 @@
dimensions (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-available title=img-available>available</dfn>.</p>
+ </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-available title=img-available>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>When an <code><a href=#the-img-element>img</a></code> element is <a href=#img-available title=img-available>available</a>, it <a href=#provides-a-paint-source>provides a paint
- source</a> whose width is the image's intrinsic width, whose
- height is the image's intrinsic height, and whose appearance is the
- intrinsic appearance of the image.</p>
+ <p>When an <code><a href=#the-img-element>img</a></code> element is <a href=#img-available title=img-available>available</a>, it
+ <a href=#provides-a-paint-source>provides a paint source</a> whose width is the image's intrinsic width, whose height is
+ the image's intrinsic height, and whose appearance is the intrinsic appearance of the image.</p>
<p>In a <a href=#browsing-context>browsing context</a> where <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is
disabled</a>, user agents may obtain images immediately or on demand. In a <a href=#browsing-context>browsing
context</a> where <a href=#concept-bc-noscript title=concept-bc-noscript>scripting is enabled</a>, user agents
must obtain images immediately.</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 created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute,
- a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, or both.
- A user agent that obtains images immediately must also 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 has its
- <code title=attr-img-src><a href=#attr-img-src>src</a></code>,
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or
- <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</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 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 created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>
+ attribute, or both. A user agent that obtains images immediately must also 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 has its
+ <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</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>
- or <code title=attr-img-src><a href=#attr-img-src>srcset</a></code>
- attribute, and only if the <code><a href=#the-img-element>img</a></code> element is in the <a href=#img-none title=img-none>unavailable</a> state. 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>,
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or
- <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute set,
- 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>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> or <code title=attr-img-src><a href=#attr-img-src>srcset</a></code> attribute, and only if the <code><a href=#the-img-element>img</a></code> element is in the
+ <a href=#img-none title=img-none>unavailable</a> state. 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>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute set, 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>Each <code><a href=#the-img-element>img</a></code> element has a <dfn id=last-selected-source>last selected
- source</dfn>, which must initially be null, and a <dfn id=current-pixel-density>current pixel
- density</dfn>, which must initially be undefined.</p>
+ <p>Each <code><a href=#the-img-element>img</a></code> element has a <dfn id=last-selected-source>last selected source</dfn>, which must initially be
+ null, and a <dfn id=current-pixel-density>current pixel density</dfn>, which must initially be undefined.</p>
- <p>When an <code><a href=#the-img-element>img</a></code> element has a <a href=#current-pixel-density>current pixel
- density</a> that is not 1.0, the element's image data must be
- treated as if its resolution, in device pixels per CSS pixels, was
+ <p>When an <code><a href=#the-img-element>img</a></code> element has a <a href=#current-pixel-density>current pixel density</a> that is not 1.0, the
+ element's image data must be treated as if its resolution, in device pixels per CSS pixels, was
the <a href=#current-pixel-density>current pixel density</a>.</p>
- <p class=example>For example, if the <a href=#current-pixel-density>current pixel
- density</a> is 3.125, that means that there are 300 device pixels
- per CSS inch, and thus if the image data is 300x600, it has an
+ <p class=example>For example, if the <a href=#current-pixel-density>current pixel density</a> is 3.125, that means
+ that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has an
intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</p>
- <p>Each <code><a href=#document>Document</a></code> object must have a <dfn id=list-of-available-images>list of
- available images</dfn>. Each image in this list is identified by a
- tuple consisting of an <a href=#absolute-url>absolute URL</a>, a <a href=#cors-settings-attribute>CORS
- settings attribute</a> mode, and, if the mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>, an
- <a href=#origin>origin</a>. User agents may copy entries from one
- <code><a href=#document>Document</a></code> object's <a href=#list-of-available-images>list of available images</a>
- to another at any time (e.g. when the <code><a href=#document>Document</a></code> is
- created, user agents can add to it all the images that are loaded in
- other <code><a href=#document>Document</a></code>s), but must not change the keys of
- entries copied in this way when doing so. User agents may also
- remove images from such lists at any time (e.g. to save memory).</p>
+ <p>Each <code><a href=#document>Document</a></code> object must have a <dfn id=list-of-available-images>list of available images</dfn>. Each image
+ in this list is identified by a tuple consisting of an <a href=#absolute-url>absolute URL</a>, a <a href=#cors-settings-attribute>CORS
+ settings attribute</a> mode, and, if the mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No
+ CORS</a>, an <a href=#origin>origin</a>. User agents may copy entries from one <code><a href=#document>Document</a></code>
+ object's <a href=#list-of-available-images>list of available images</a> to another at any time (e.g. when the
+ <code><a href=#document>Document</a></code> is created, user agents can add to it all the images that are loaded in
+ other <code><a href=#document>Document</a></code>s), but must not change the keys of entries copied in this way when
+ doing so. User agents may also remove images from such lists at any time (e.g. to save
+ memory).</p>
- <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>
+ <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>
+ <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>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>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 user agent cannot support images, or its support for images has been disabled, then
+ abort these steps.</li>
<li>
<p>If the element has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, then
- let <var title="">selected source</var> and <var title="">selected
- pixel density</var> be the URL and pixel density that results from
- <a href=#processing-the-image-candidates>processing the image candidates</a>, respectively.
+ let <var title="">selected source</var> and <var title="">selected pixel density</var> be the
+ URL and pixel density that results from <a href=#processing-the-image-candidates>processing the image candidates</a>,
+ respectively.
- Otherwise, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute specified and its value
- is not the empty string, let <var title="">selected source</var>
- be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and <var title="">selected pixel density</var> be 1.0. Otherwise, let <var title="">selected source</var> be null and <var title="">selected
- pixel density</var> be undefined.</p>
+ Otherwise, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute specified and
+ its value is not the empty string, let <var title="">selected source</var> be the value of the
+ element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, and <var title="">selected pixel
+ density</var> be 1.0. Otherwise, let <var title="">selected source</var> be null and <var title="">selected pixel density</var> be undefined.</p>
</li>
- <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected
- source</a> be <var title="">selected source</var> and the
- <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel density</a> be
- <var title="">selected pixel density</var>.</li>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var> and the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel
+ density</a> be <var title="">selected pixel density</var>.</li>
- <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element. If that is
- not successful, abort these steps.</li>
+ <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative
+ to the element. If that is not successful, abort these steps.</li>
- <li><p>Let <var title="">key</var> be a tuple consisting of the
- resulting <a href=#absolute-url>absolute URL</a>, the <code><a href=#the-img-element>img</a></code> element's
- <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute's
- mode, and, if that mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>, the
- <code><a href=#document>Document</a></code> object's <a href=#origin>origin</a>.</li>
+ <li><p>Let <var title="">key</var> be a tuple consisting of the resulting <a href=#absolute-url>absolute
+ URL</a>, the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
+ attribute's mode, and, if that mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>,
+ the <code><a href=#document>Document</a></code> object's <a href=#origin>origin</a>.</li>
- <li><p>If the <a href=#list-of-available-images>list of available images</a>, contains an
- entry for <var title="">key</var>, then 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,
- <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, and abort these steps.</li>
+ <li><p>If the <a href=#list-of-available-images>list of available images</a>, contains an entry for <var title="">key</var>, then 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, <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, and abort these steps.</li>
- <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing
- the <a href=#concept-task title=concept-task>task</a> that invoked this
- algorithm to continue. The <a href=#synchronous-section>synchronous section</a>
- consists of all the remaining steps of this algorithm until the
- algorithm says the <a href=#synchronous-section>synchronous section</a> has
- ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous
- sections</a> are marked with ⌛.)</li>
+ <li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing the <a href=#concept-task title=concept-task>task</a> that invoked this algorithm to continue. The <a href=#synchronous-section>synchronous
+ section</a> consists of all the remaining steps of this algorithm until the algorithm says the
+ <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous
+ section">synchronous sections</a> are marked with ⌛.)</li>
<li>
- <p>⌛ If another instance of this algorithm for this
- <code><a href=#the-img-element>img</a></code> element was started after this instance (even if
- it aborted and is no longer running), then abort these steps.</p>
+ <p>⌛ If another instance of this algorithm for this <code><a href=#the-img-element>img</a></code> element was started
+ after this instance (even if it aborted and is no longer running), then abort these steps.</p>
- <p class=note>Only the last instance takes effect, to avoid
- multiple requests when, for example, the
- <code title=attr-img-src><a href=#attr-img-src>src</a></code>,
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, and
- <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes
- are all set in succession.</p>
+ <p class=note>Only the last instance takes effect, to avoid multiple requests when, for
+ example, the <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>,
+ and <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes are all set in
+ succession.</p>
</li>
<li>
- <p>⌛ If <var title="">selected source</var> is null, then
- set the element to the <a href=#img-error title=img-error>broken</a>
- state, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
- event</a> named <code title=event-error>error</code> at the
- <code><a href=#the-img-element>img</a></code> element, and abort these steps.</p>
+ <p>⌛ If <var title="">selected source</var> is null, then set the element to the <a href=#img-error title=img-error>broken</a> state, <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple
+ event</a> named <code title=event-error>error</code> at the <code><a href=#the-img-element>img</a></code> element, and
+ abort these steps.</p>
</li>
@@ -23685,37 +23537,28 @@
<li>
- <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of
- the <a href=#absolute-url>absolute URL</a> that resulted from the earlier step,
- with the <i>mode</i> being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
- the <i title="">origin</i> being the <a href=#origin>origin</a> of the
- <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
+ <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of the <a href=#absolute-url>absolute URL</a>
+ that resulted from the earlier step, with the <i>mode</i> being the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute, the <i title="">origin</i>
+ being the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
<i>default origin behaviour</i> set to <i>taint</i>.</p>
- <p>The resource obtained in this fashion, if any, is the
- <code><a href=#the-img-element>img</a></code> element's image data. It can be either
- <a href=#cors-same-origin>CORS-same-origin</a> or <a href=#cors-cross-origin>CORS-cross-origin</a>;
- this affects the <a href=#origin>origin</a> of the image itself (e.g.
- when used on a <code><a href=#the-canvas-element>canvas</a></code>).</p>
+ <p>The resource obtained in this fashion, if any, is the <code><a href=#the-img-element>img</a></code> element's image data.
+ It can be either <a href=#cors-same-origin>CORS-same-origin</a> or <a href=#cors-cross-origin>CORS-cross-origin</a>; this affects
+ the <a href=#origin>origin</a> of the image itself (e.g. when used on a <code><a href=#the-canvas-element>canvas</a></code>).</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
- 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> (<a href=#img-load>defined below</a>) has been run.</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 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> (<a href=#img-load>defined below</a>) has been run.</p>
- <p class=warning>This, unfortunately, can be used to perform a
- rudimentary port scan of the user's local network (especially in
- 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 are stricter than those described above to mitigate this
- attack, but unfortunately such policies are typically not
+ <p class=warning>This, unfortunately, can be used to perform a rudimentary port scan of the
+ user's local network (especially in 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 are stricter than those
+ 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>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 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>
@@ -23791,17 +23634,13 @@
</ol></dd>
- </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>
+ </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>
<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>
@@ -23816,102 +23655,81 @@
</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>
+ </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>
- <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 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>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 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
- image.</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 image.</p>
- <p class=note>This allows servers to return images with error
- responses, and have them displayed.</p>
+ <p class=note>This allows servers to return images with error responses, and have them
+ displayed.</p>
- <p>The user agents 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>
+ <p>The user agents 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>
- <p>User agents must not support non-image resources with the
- <code><a href=#the-img-element>img</a></code> element (e.g. XML files whose root element is an
- HTML element). User agents must not run executable code
- (e.g. scripts) embedded in the image resource. User agents must only
- display the first page of a multipage resource (e.g. a PDF
- file). User agents must not allow the resource to act in an
- interactive fashion, but should honor any animation in the
- resource.</p>
+ <p>User agents must not support non-image resources with the <code><a href=#the-img-element>img</a></code> element (e.g. XML
+ files whose root element is an HTML element). User agents must not run executable code (e.g.
+ scripts) embedded in the image resource. User agents must only display the first page of a
+ multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an
+ interactive fashion, but should honor any animation in the resource.</p>
- <p>This specification does not specify which image types are to be
- supported.</p>
+ <p>This specification does not specify which image types are to be supported.</p>
- <hr><p>When the user agent is required to <dfn id=processing-the-image-candidates title="processing the
- image candidates">process the image candidates</dfn> of an
- <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, the user agent must
- run the following steps, which return a URL and pixel density (null
- and undefined respectively if no selection can be made):</p>
+ <hr><p>When the user agent is required to <dfn id=processing-the-image-candidates title="processing the image candidates">process the
+ image candidates</dfn> of an <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, the user agent must run the following steps,
+ which return a URL and pixel density (null and undefined respectively if no selection can be
+ made):</p>
- <ol><li><p>Let <var title="">input</var> be the value of the
- <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute.</li>
+ <ol><li><p>Let <var title="">input</var> be the value of the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute.</li>
- <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
- string.</li>
+ <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially
+ pointing at the start of the string.</li>
- <li><p>Let <var title="">raw candidates</var> be an initially empty
- ordered list of <a href=#url title=URL>URLs</a> with associated
- unparsed descriptors. The order of entries in the list is the
- order in which entries are added to the list.</li>
+ <li><p>Let <var title="">raw candidates</var> be an initially empty ordered list of <a href=#url title=URL>URLs</a> with associated unparsed descriptors. The order of entries in the list is
+ the order in which entries are added to the list.</li>
- <li><p><i>Splitting loop</i>: <a href=#skip-whitespace>Skip
- whitespace</a>.</li>
+ <li><p><i>Splitting loop</i>: <a href=#skip-whitespace>Skip whitespace</a>.</li>
- <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not
- <a href=#space-character title="space character">space characters</a>, and let that
- be <var title="">url</var>.</li>
- <!-- if /url/ is empty, we're at the end of the string -->
+ <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not <a href=#space-character title="space
+ character">space characters</a>, and let that be <var title="">url</var>.</li> <!-- if
+ /url/ is empty, we're at the end of the string -->
- <li><p>If <var title="">url</var> is empty, then jump to the step
- labeled <i>descriptor parser</i>.</li>
+ <li><p>If <var title="">url</var> is empty, then jump to the step labeled <i>descriptor
+ parser</i>.</li>
- <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not
- U+002C COMMA characters (,), and let that be <var title="">descriptors</var>.</li>
+ <li><p><a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a> that are not U+002C COMMA characters (,),
+ and let that be <var title="">descriptors</var>.</li>
- <li><p>Add <var title="">url</var> to <var title="">raw
- candidates</var>, associated with <var title="">descriptors</var>.</li>
+ <li><p>Add <var title="">url</var> to <var title="">raw candidates</var>, associated with <var title="">descriptors</var>.</li>
- <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to the step labeled <i>descriptor
- parser</i>.</li>
+ <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to
+ the step labeled <i>descriptor parser</i>.</li>
- <li><p>Advance <var title="">position</var> to the next character
- in <var title="">input</var> (skipping past the U+002C COMMA
- character (,) separating this candidate from the next).</li>
+ <li><p>Advance <var title="">position</var> to the next character in <var title="">input</var>
+ (skipping past the U+002C COMMA character (,) separating this candidate from the next).</li>
<li><p>Return to the step labeled <i>splitting loop</i>.</li>
- <li><p><i>Descriptor parser</i>: Let <var title="">candidates</var>
- be an initially empty ordered list of <a href=#url title=URL>URLs</a>
- each with an associated pixel density, and optionally an associated
- width, height, or both. The order of entries in the list is the order
- in which entries are added to the list.</p>
+ <li><p><i>Descriptor parser</i>: Let <var title="">candidates</var> be an initially empty ordered
+ list of <a href=#url title=URL>URLs</a> each with an associated pixel density, and optionally an
+ associated width, height, or both. The order of entries in the list is the order in which entries
+ are added to the list.</p>
<li>
- <p>For each entry in <var title="">raw candidates</var> with
- <a href=#url>URL</a> <var title="">url</var> associated with the
- unparsed descriptors <var title="">unparsed descriptors</var>, in
- the order they were originally added to the list, run these
- substeps:</p>
+ <p>For each entry in <var title="">raw candidates</var> with <a href=#url>URL</a> <var title="">url</var> associated with the unparsed descriptors <var title="">unparsed
+ descriptors</var>, in the order they were originally added to the list, run these substeps:</p>
- <ol><li><p>Let <var title="">descriptor list</var> be the result of
- <a href=#split-a-string-on-spaces title="split a string on spaces">splitting <var title="">unparsed descriptors</var> on spaces</a>.</li>
+ <ol><li><p>Let <var title="">descriptor list</var> be the result of <a href=#split-a-string-on-spaces title="split a string on
+ spaces">splitting <var title="">unparsed descriptors</var> on spaces</a>.</li>
<li><p>Let <var title="">error</var> be <i>no</i>.</li>
@@ -23923,19 +23741,17 @@
<li>
- <p>For each token in <var title="">descriptor list</var>, run
- the appropriate set of steps from the following list:</p>
+ <p>For each token in <var title="">descriptor list</var>, run the appropriate set of steps
+ from the following list:</p>
<dl class=switch><dt>If the token consists of a <a href=#valid-non-negative-integer>valid non-negative integer</a> followed by a U+0077 LATIN SMALL LETTER W character</dt>
<dd>
- <ol><li><p>If <var title="">width</var> is not <i>absent</i>,
- then let <var title="">error</var> be <i>yes</i>.</li>
+ <ol><li><p>If <var title="">width</var> is not <i>absent</i>, then let <var title="">error</var> be <i>yes</i>.</li>
- <li><p>Apply the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
- integers</a> to the token. Let <var title="">width</var>
- be the result.</li>
+ <li><p>Apply the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to the token. Let
+ <var title="">width</var> be the result.</li>
</ol></dd>
@@ -23958,44 +23774,35 @@
<dd>
- <ol><li><p>If <var title="">density</var> is not <i>absent</i>,
- then let <var title="">error</var> be <i>yes</i>.</li>
+ <ol><li><p>If <var title="">density</var> is not <i>absent</i>, then let <var title="">error</var> be <i>yes</i>.</li>
- <li><p>Apply the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating-point
- number values</a> to the token. Let <var title="">density</var> be the result.</li>
+ <li><p>Apply the <a href=#rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values</a> to the token.
+ Let <var title="">density</var> be the result.</li>
</ol></dd>
</dl></li>
- <li><p>If <var title="">width</var> is still <i>absent</i>, set
- it to Infinity.</li>
+ <li><p>If <var title="">width</var> is still <i>absent</i>, set it to Infinity.</li>
- <li><p>If <var title="">height</var> is still <i>absent</i>, set
- it to Infinity.</li>
+ <li><p>If <var title="">height</var> is still <i>absent</i>, set it to Infinity.</li>
- <li><p>If <var title="">density</var> is still <i>absent</i>, set
- it to 1.0.</li>
+ <li><p>If <var title="">density</var> is still <i>absent</i>, set it to 1.0.</li>
- <li><p>If <var title="">error</var> is still <i>no</i>, then add
- an entry to <var title="">candidates</var> whose <a href=#url>URL</a>
- is <var title="">url</var>, associated with a width <var title="">width</var>, a height <var title="">height</var>, and a
- pixel density <var title="">density</var>.</li>
+ <li><p>If <var title="">error</var> is still <i>no</i>, then add an entry to <var title="">candidates</var> whose <a href=#url>URL</a> is <var title="">url</var>, associated with a
+ width <var title="">width</var>, a height <var title="">height</var>, and a pixel density <var title="">density</var>.</li>
</ol></li>
<li>
- <p>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 whose value is not the
- empty string, then run the following substeps:</p>
+ <p>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 whose
+ value is not the empty string, then run the following substeps:</p>
- <ol><li><p>Let <var title="">url</var> be the value of the element's
- <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</li>
+ <ol><li><p>Let <var title="">url</var> be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</li>
- <li><p>Add an entry to <var title="">candidates</var> whose
- <a href=#url>URL</a> is <var title="">url</var>, associated with a
- width Infinity, a height Infinity, and a pixel density
+ <li><p>Add an entry to <var title="">candidates</var> whose <a href=#url>URL</a> is <var title="">url</var>, associated with a width Infinity, a height Infinity, and a pixel density
1.0.</li>
</ol></li>
@@ -24003,140 +23810,115 @@
<li><p>If <var title="">candidates</var> is empty, return null as the URL and undefined as the
pixel density and abort these steps.</li>
- <li><p>If an entry <var title="">b</var> in <var title="">candidates</var> has the same associated width, height,
- and pixel density as an earlier entry <var title="">a</var> in <var title="">candidates</var>, then remove entry <var title="">b</var>.
- Repeat this step until none of the entries in <var title="">candidates</var> have the same associated width, height,
- and pixel density as an earlier entry.</li>
+ <li><p>If an entry <var title="">b</var> in <var title="">candidates</var> has the same
+ associated width, height, and pixel density as an earlier entry <var title="">a</var> in <var title="">candidates</var>, then remove entry <var title="">b</var>. Repeat this step until none
+ of the entries in <var title="">candidates</var> have the same associated width, height, and
+ pixel density as an earlier entry.</li>
<li>
- <p>Optionally, return the <a href=#url>URL</a> of an entry in <var title="">candidates</var> chosen by the user agent, and that
- entry's associated pixel density, and then abort these steps. The
- user agent may apply any algorithm or heuristic in its selection
- of an entry for the purposes of this step.</p>
+ <p>Optionally, return the <a href=#url>URL</a> of an entry in <var title="">candidates</var> chosen
+ by the user agent, and that entry's associated pixel density, and then abort these steps. The
+ user agent may apply any algorithm or heuristic in its selection of an entry for the purposes of
+ this step.</p>
- <p class=note>This allows a user agent to override the default
- algorithm (as described in subsequent steps) in case the user
- agent has a reason to do so. For example, it would allow the user
- agent in highly bandwidth-constrained conditions to intentionally
- opt to use an image intended for a smaller screen size, on the
- assumption that it'll probably be good enough. Implementors are
- urged to avoid doing this if at all possible, to let authors have
- predictable results. The results of using an image intended for a
- different viewport size can be, at a minimum, aesthetically
- displeasing.</p>
+ <p class=note>This allows a user agent to override the default algorithm (as described in
+ subsequent steps) in case the user agent has a reason to do so. For example, it would allow the
+ user agent in highly bandwidth-constrained conditions to intentionally opt to use an image
+ intended for a smaller screen size, on the assumption that it'll probably be good enough.
+ Implementors are urged to avoid doing this if at all possible, to let authors have predictable
+ results. The results of using an image intended for a different viewport size can be, at a
+ minimum, aesthetically displeasing.</p>
- <p class=note>This clause is not necessary to select images that
- are of lower pixel density than the display can handle, because
- the definition of pixel density below is also left up to the user
- agent. This step is only needed to allow user agents to pick
- images intended for viewports with other dimensions.</p>
+ <p class=note>This clause is not necessary to select images that are of lower pixel density
+ than the display can handle, because the definition of pixel density below is also left up to
+ the user agent. This step is only needed to allow user agents to pick images intended for
+ viewports with other dimensions.</p>
</li>
- <li><p>Let <var title="">max width</var> be the width of the
- viewport, and let <var title="">max height</var> be the height of
- the viewport. <a href=#refsCSS>[CSS]</a></li>
+ <li><p>Let <var title="">max width</var> be the width of the viewport, and let <var title="">max
+ height</var> be the height of the viewport. <a href=#refsCSS>[CSS]</a></li>
- <li><p>If there are any entries in <var title="">candidates</var>
- that have an associated width that is less than <var title="">max width</var>, then remove them, unless that would
- remove all the entries, in which case remove only the entries whose
- associated width is less than the greatest such width.</li>
+ <li><p>If there are any entries in <var title="">candidates</var> that have an associated width
+ that is less than <var title="">max width</var>, then remove them, unless that would remove all
+ the entries, in which case remove only the entries whose associated width is less than the
+ greatest such width.</li>
- <li><p>If there are any entries in <var title="">candidates</var>
- that have an associated height that is less than <var title="">max height</var>, then remove them, unless that would
- remove all the entries, in which case remove only the entries whose
- associated height is less than the greatest such height.</li>
+ <li><p>If there are any entries in <var title="">candidates</var> that have an associated height
+ that is less than <var title="">max height</var>, then remove them, unless that would remove all
+ the entries, in which case remove only the entries whose associated height is less than the
+ greatest such height.</li>
- <li><p>If there are any entries in <var title="">candidates</var>
- that have an associated pixel density that is less than a
- user-agent-defined value giving the nominal pixel density of the
- display, then remove them, unless that would remove all the
- entries, in which case remove only the entries whose associated
- pixel density is less than the greatest such pixel density.</li>
+ <li><p>If there are any entries in <var title="">candidates</var> that have an associated pixel
+ density that is less than a user-agent-defined value giving the nominal pixel density of the
+ display, then remove them, unless that would remove all the entries, in which case remove only
+ the entries whose associated pixel density is less than the greatest such pixel density.</li>
- <li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated width that is greater than the smallest
- such width.</li>
+ <li><p>Remove all the entries in <var title="">candidates</var> that have an associated width
+ that is greater than the smallest such width.</li>
- <li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated height that is greater than the smallest
- such height.</li>
+ <li><p>Remove all the entries in <var title="">candidates</var> that have an associated height
+ that is greater than the smallest such height.</li>
- <li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated pixel density that is greater than the
- smallest such pixel density.</li>
+ <li><p>Remove all the entries in <var title="">candidates</var> that have an associated pixel
+ density that is greater than the smallest such pixel density.</li>
- <li><p>Return the <a href=#url>URL</a> of the sole remaining entry in
- <var title="">candidates</var>, and that entry's associated pixel
- density.</li>
+ <li><p>Return the <a href=#url>URL</a> of the sole remaining entry in <var title="">candidates</var>,
+ and that entry's associated pixel density.</li>
- </ol><p>The user agent may at any time run the following algorithm to
- update an <code><a href=#the-img-element>img</a></code> element's image in order to react to
- changes in the environment. (User agents are <em>not required</em>
- to ever run this algorithm.)</p>
+ </ol><p>The user agent may at any time run the following algorithm to update an <code><a href=#the-img-element>img</a></code>
+ element's image in order to react to changes in the environment. (User agents are <em>not
+ required</em> to ever run this algorithm.)</p>
- <ol><li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>. The
- <a href=#synchronous-section>synchronous section</a> consists of all the remaining
- steps of this algorithm until the algorithm says the
- <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous section">synchronous sections</a> are marked
- with ⌛.)</li>
+ <ol><li><p>Asynchronously <a href=#await-a-stable-state>await a stable state</a>. The <a href=#synchronous-section>synchronous section</a>
+ consists of all the remaining steps of this algorithm until the algorithm says the
+ <a href=#synchronous-section>synchronous section</a> has ended. (Steps in <a href=#synchronous-section title="synchronous
+ section">synchronous sections</a> are marked with ⌛.)</li>
- <li><p>⌛ If the <code><a href=#the-img-element>img</a></code> element does not have a
- <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, is
- not in the <a href=#img-all title=img-all>completely available</a> state,
- has image data whose resource type is
- <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, or if its <a href=#update-the-image-data>update the
- image data</a> algorithm is running, then abort this
- algorithm.</li> <!-- we don't support replacing push-JPEG
- images because defining what happens with the tasks and events and
- so on in that case would become implausibly complicated. -->
+ <li><p>⌛ If the <code><a href=#the-img-element>img</a></code> element does not have a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, is not in the <a href=#img-all title=img-all>completely available</a> state, has image data whose resource type is
+ <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, or if its <a href=#update-the-image-data>update the image data</a> algorithm is
+ running, then abort this algorithm.</li> <!-- we don't support replacing push-JPEG images
+ because defining what happens with the tasks and events and so on in that case would become
+ implausibly complicated. -->
- <li><p>⌛ Let <var title="">selected source</var> and <var title="">selected pixel density</var> be the URL and pixel density
- that results from <a href=#processing-the-image-candidates>processing the image candidates</a>,
- respectively.</li>
+ <li><p>⌛ Let <var title="">selected source</var> and <var title="">selected pixel
+ density</var> be the URL and pixel density that results from <a href=#processing-the-image-candidates>processing the image
+ candidates</a>, respectively.</li>
- <li><p>⌛ If <var title="">selected source</var> is null,
- then abort these steps.</li> <!-- not sure this can ever
- actually happen -->
+ <li><p>⌛ If <var title="">selected source</var> is null, then abort these steps.</li>
+ <!-- not sure this can ever actually happen -->
- <li><p>⌛ If <var title="">selected source</var> and <var title="">selected pixel density</var> are the same as the element's
- <a href=#last-selected-source>last selected source</a> and <a href=#current-pixel-density>current pixel
- density</a>, then abort these steps.</li> <!-- note that
- this check happens before base URL resolution, so changing the base
- URL doesn't trigger an update if nothing else changed -->
+ <li><p>⌛ If <var title="">selected source</var> and <var title="">selected pixel
+ density</var> are the same as the element's <a href=#last-selected-source>last selected source</a> and <a href=#current-pixel-density>current
+ pixel density</a>, then abort these steps.</li> <!-- note that this check happens before
+ base URL resolution, so changing the base URL doesn't trigger an update if nothing else changed
+ -->
- <li><p>⌛ <a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element.</li>
+ <li><p>⌛ <a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>,
+ relative to the element.</li>
- <li><p>⌛ Let <var title="">CORS mode</var> be the state of
- the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
- content attribute.</li>
+ <li><p>⌛ Let <var title="">CORS mode</var> be the state of the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute.</li>
- <li><p>⌛ If the <a href=#resolve-a-url>resolve a URL</a> algorithm is not
- successful, abort these steps.</p>
+ <li><p>⌛ If the <a href=#resolve-a-url>resolve a URL</a> algorithm is not successful, abort these
+ steps.</p>
- <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the
- remaining steps asynchronously.</li>
+ <li><p>End the <a href=#synchronous-section>synchronous section</a>, continuing the remaining steps
+ asynchronously.</li>
<li>
- <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of
- the resulting <a href=#absolute-url>absolute URL</a>, with the <i>mode</i>
- being <var title="">CORS mode</var>, the <i title="">origin</i>
- being the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's
- <code><a href=#document>Document</a></code>, and the <i>default origin behaviour</i> set
- to <i>taint</i>.</p>
+ <p>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of the resulting <a href=#absolute-url>absolute
+ URL</a>, with the <i>mode</i> being <var title="">CORS mode</var>, the <i title="">origin</i>
+ being the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>, and the
+ <i>default origin behaviour</i> set to <i>taint</i>.</p>
- <p>If this download fails in any way (other than the response code
- not being a 2xx code, as mentioned earlier), or if the image
- format is unsupported (as determined by applying the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a>,
- again as mentioned earlier), or if the resource type is
- <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, then abort these
- steps.</p>
+ <p>If this download fails in any way (other than the response code not being a 2xx code, as
+ mentioned earlier), or if the image format is unsupported (as determined by applying the <a href=#content-type-sniffing:-image title="Content-Type sniffing: image">image sniffing rules</a>, again as mentioned earlier),
+ or if the resource type is <code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code>, then abort these steps.</p>
- <p>Otherwise, wait for the <a href=#fetch>fetch</a> algorithm to queue
- its last task, and then continue with these steps. The data
- obtained in this way is used in the steps below.</p>
+ <p>Otherwise, wait for the <a href=#fetch>fetch</a> algorithm to queue its last task, and then
+ continue with these steps. The data obtained in this way is used in the steps below.</p>
</li>
@@ -24144,119 +23926,96 @@
<p><a href=#queue-a-task>Queue a task</a> to run the following substeps:</p>
- <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes have
- been set, changed, or removed since this algorithm started, then
- abort these steps.</p>
+ <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
+ attributes have been set, changed, or removed since this algorithm started, then abort these
+ steps.</p>
- <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected
- source</a> be <var title="">selected source</var> and the
- <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel density</a> be
- <var title="">selected pixel density</var>.</li>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var> and the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel
+ density</a> be <var title="">selected pixel density</var>.</li>
- <li><p>Replace the <code><a href=#the-img-element>img</a></code> element's image data with the
- resource obtained by the earlier step of this algorithm. It can
- be either <a href=#cors-same-origin>CORS-same-origin</a> or
- <a href=#cors-cross-origin>CORS-cross-origin</a>; this affects the
- <a href=#origin>origin</a> of the image itself (e.g. when used on a
- <code><a href=#the-canvas-element>canvas</a></code>).</li>
+ <li><p>Replace the <code><a href=#the-img-element>img</a></code> element's image data with the resource obtained by the
+ earlier step of this algorithm. It can be either <a href=#cors-same-origin>CORS-same-origin</a> or
+ <a href=#cors-cross-origin>CORS-cross-origin</a>; this affects the <a href=#origin>origin</a> of the image itself (e.g.
+ when used on a <code><a href=#the-canvas-element>canvas</a></code>).</li>
- <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title="">load</code> at the <code><a href=#the-img-element>img</a></code> element.</li>
+ <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title="">load</code> at the
+ <code><a href=#the-img-element>img</a></code> element.</li>
</ol></li>
- </ol><hr><p>The <a href=#task-source>task source</a> for the <a href=#concept-task title=concept-task>tasks</a> <a href=#queue-a-task title="queue a
- task">queued</a> by algorithms in this section is the <a href=#dom-manipulation-task-source>DOM
- manipulation task source</a>.</p>
+ </ol><hr><p>The <a href=#task-source>task source</a> for the <a href=#concept-task title=concept-task>tasks</a> <a href=#queue-a-task title="queue
+ a task">queued</a> by algorithms in this section 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>
+ <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>
- <dl class=switch><dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
- and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to
- the empty string</dt>
+ <dl class=switch><dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to the empty string</dt>
<dd>
- <p>The image is either decorative or supplemental to the rest of
- the content, redundant with some other information in the
- document.</p>
+ <p>The image is either decorative or supplemental to the rest of the content, redundant with
+ some other information in the document.</p>
- <p>If the image is <a href=#img-available title=img-available>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 <a href=#img-available title=img-available>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>Otherwise, the element <a href=#represents>represents</a> nothing, and may
- be omitted completely from the rendering. User agents may provide
- the user with a notification that an image is present but has been
- omitted from the rendering.</p>
+ <p>Otherwise, the element <a href=#represents>represents</a> nothing, and may be omitted completely from
+ the rendering. User agents may provide the user with a notification that an image is present but
+ has been omitted from the rendering.</p>
</dd>
- <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
- and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to a
- value that isn't empty</dt>
+ <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to a value that isn't empty</dt>
<dd>
- <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>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 <a href=#img-available title=img-available>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 <a href=#img-available title=img-available>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>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
- agents may provide the user with a notification that an image is
- present but has been omitted from the rendering.</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 agents may provide the user with a notification
+ that an image is present but has been omitted from the rendering.</p>
</dd>
- <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set
- and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not</dt>
+ <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set and the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not</dt>
<dd>
- <p>The image might be a key part of the content, and there is no
- textual equivalent of the image available.</p>
+ <p>The image might be a key part of the content, and there is no textual equivalent of the image
+ available.</p>
- <p class=note>In a conforming document, the absence of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute indicates that the image
- 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 class=note>In a conforming document, the absence of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute indicates that the image 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 <a href=#img-available title=img-available>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 <a href=#img-available title=img-available>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>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>
+ <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' --><!-- NOTE: the order of these steps is important; it's intended
- to make the innermost caption override the outer ones --><li><p>If the image has a <code title=attr-title><a href=#attr-title>title</a></code>
- attribute whose value is not the empty string, then the value of
- that attribute is the caption information; abort these
+ <ol><!-- when editing this list, search for the two other occurrences of 'critical-no-alt' --><!-- NOTE: the order of these steps is important; it's intended to make the innermost caption
+ override the outer ones --><li><p>If the image has a <code title=attr-title><a href=#attr-title>title</a></code> attribute whose value is not
+ the empty string, then the value of that attribute is the caption information; abort these
steps.</li>
- <li><p>If the image is a descendant of a <code><a href=#the-figure-element>figure</a></code>
- element that has a child <code><a href=#the-figcaption-element>figcaption</a></code> element, and,
- ignoring the <code><a href=#the-figcaption-element>figcaption</a></code> element and its descendants,
- the <code><a href=#the-figure-element>figure</a></code> element has no <code><a href=#text>Text</a></code> node
- descendants other than <a href=#inter-element-whitespace>inter-element whitespace</a>, and
- no <a href=#embedded-content>embedded content</a> descendant other than the
- <code><a href=#the-img-element>img</a></code> element, then the contents of the first such
- <code><a href=#the-figcaption-element>figcaption</a></code> element are the caption information;
- abort these steps.</li>
+ <li><p>If the image is a descendant of a <code><a href=#the-figure-element>figure</a></code> element that has a child
+ <code><a href=#the-figcaption-element>figcaption</a></code> element, and, ignoring the <code><a href=#the-figcaption-element>figcaption</a></code> element and its
+ descendants, the <code><a href=#the-figure-element>figure</a></code> element has no <code><a href=#text>Text</a></code> node descendants other
+ than <a href=#inter-element-whitespace>inter-element whitespace</a>, and no <a href=#embedded-content>embedded content</a> descendant
+ other than the <code><a href=#the-img-element>img</a></code> element, then the contents of the first such
+ <code><a href=#the-figcaption-element>figcaption</a></code> element are the caption information; abort these steps.</li>
<li><p>There is no caption information.</li>
</ol></dd>
- <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is not
- set and either the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
- is set to the empty string or the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not set at all</dt>
+ <dt>If the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is not set and either the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is set to the empty string or the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute is not set at all</dt>
<dd>
@@ -24272,32 +24031,21 @@
</dd>
- </dl><p>The <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute does not
- represent advisory information. User agents must not present the
- contents of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute in
- the same way as content of the <code title=attr-title><a href=#attr-title>title</a></code>
- attribute.</p>
+ </dl><p>The <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute does not represent advisory information.
+ User agents must not present the contents of the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute
+ in the same way as content of the <code title=attr-title><a href=#attr-title>title</a></code> attribute.</p>
- <p>User agents may always provide the user with the option to
- display any image, or to prevent any image from being
- displayed.
+ <p>User agents may always provide the user with the option to display any image, or to prevent any
+ image from being displayed. User agents may also apply heuristics to help the user make use of the
+ image when the user is unable to see it, e.g. due to a visual disability or because they are using
+ a text terminal with no graphics capabilities. Such heuristics could include, for instance,
+ optical character recognition (OCR) of text found within the image.</p>
- User agents may also apply heuristics to help the user make use of
- the image when the user is unable to see it, e.g. due to a visual
- disability or because they are using a text terminal with no
- graphics capabilities. Such heuristics could include, for instance,
- optical character recognition (OCR) of text found within the image.
-
- </p>
-
- <p class=warning>While user agents are encouraged to repair cases
- of missing <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes, authors
- must not rely on such behavior. <a href=#alt>Requirements for
- providing text to act as an alternative for images</a> are described
+ <p class=warning>While user agents are encouraged to repair cases of missing <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes, authors must not rely on such behavior. <a href=#alt>Requirements for providing text to act as an alternative for images</a> are described
in detail below.</p>
- <p>The <em>contents</em> of <code><a href=#the-img-element>img</a></code> elements, if any, are
- ignored for the purposes of rendering.</p>
+ <p>The <em>contents</em> of <code><a href=#the-img-element>img</a></code> elements, if any, are ignored for the purposes of
+ rendering.</p>
</div>
@@ -24322,20 +24070,18 @@
<div class=impl>
- <p>The <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn>, <dfn id=dom-img-src title=dom-img-src><code>src</code></dfn>,
- and <dfn id=dom-img-srcset title=dom-img-srcset><code>srcset</code></dfn>
- IDL attributes must <a href=#reflect>reflect</a> the respective content
- attributes of the same name.</p>
+ <p>The <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn>, <dfn id=dom-img-src title=dom-img-src><code>src</code></dfn>, and <dfn id=dom-img-srcset title=dom-img-srcset><code>srcset</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ respective content attributes of the same name.</p>
- <p>The <dfn id=dom-img-crossorigin title=dom-img-crossOrigin><code>crossOrigin</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content
- attribute, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
+ <p>The <dfn id=dom-img-crossorigin title=dom-img-crossOrigin><code>crossOrigin</code></dfn> IDL attribute must
+ <a href=#reflect>reflect</a> the <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute,
+ <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
- <p>The <dfn id=dom-img-usemap title=dom-img-useMap><code>useMap</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the <code title=attr-img-usemap>usemap</code> content attribute.</p>
+ <p>The <dfn id=dom-img-usemap title=dom-img-useMap><code>useMap</code></dfn> IDL attribute must
+ <a href=#reflect>reflect</a> the <code title=attr-img-usemap>usemap</code> content attribute.</p>
- <p>The <dfn id=dom-img-ismap title=dom-img-isMap><code>isMap</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> content attribute.</p>
+ <p>The <dfn id=dom-img-ismap title=dom-img-isMap><code>isMap</code></dfn> IDL attribute must <a href=#reflect>reflect</a>
+ the <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> content attribute.</p>
</div>
Modified: source
===================================================================
--- source 2013-01-26 01:00:42 UTC (rev 7653)
+++ source 2013-01-26 01:05:11 UTC (rev 7654)
@@ -14525,88 +14525,70 @@
</dd>
</dl><!--TOPIC:HTML-->
- <p>The <code>link</code> element allows authors to link their
- document to other resources.</p>
+ <p>The <code>link</code> element allows authors to link their document to other resources.</p>
<p>The destination of the link(s) is given by the <dfn
- title="attr-link-href"><code>href</code></dfn> attribute, which must
- be present and must contain a <span>valid non-empty URL potentially
- surrounded by spaces</span>. <span class="impl">If the <code
- title="attr-link-href">href</code> attribute is absent, then the
- element does not define a link.</span></p>
+ title="attr-link-href"><code>href</code></dfn> attribute, which must be present and must contain a
+ <span>valid non-empty URL potentially surrounded by spaces</span>. <span class="impl">If the <code
+ title="attr-link-href">href</code> attribute is absent, then the element does not define a
+ link.</span></p>
- <p>A <code>link</code> element must have either a <code
- title="attr-link-rel">rel</code> attribute or an <code
- title="attr-itemprop">itemprop</code> attribute, but not both.</p>
+ <p>A <code>link</code> element must have either a <code title="attr-link-rel">rel</code> attribute
+ or an <code title="attr-itemprop">itemprop</code> attribute, but not both.</p>
- <p class="note">If the <code title="attr-link-rel">rel</code>
- attribute is used, the element is restricted to the
- <code>head</code> element. When used with the <code
- title="attr-itemprop">itemprop</code> attribute, the element can be
- used both in the <code>head</code> element and in the
- <code>body</code> of the page, subject to the constraints of the
- microdata model.</p>
+ <p class="note">If the <code title="attr-link-rel">rel</code> attribute is used, the element is
+ restricted to the <code>head</code> element. When used with the <code
+ title="attr-itemprop">itemprop</code> attribute, the element can be used both in the
+ <code>head</code> element and in the <code>body</code> of the page, subject to the constraints of
+ the microdata model.</p>
- <p>The types of link indicated (the relationships) are given by the
- value of the <dfn title="attr-link-rel"><code>rel</code></dfn>
- attribute, which, if present, must have a value that is a <span>set
- of space-separated tokens</span>. The <a href="#linkTypes">allowed
- keywords and their meanings</a> are defined in a later
- section. <span class="impl">If the <code
- title="attr-link-rel">rel</code> attribute is absent, has no
- keywords, or if none of the keywords used are allowed according to
- the definitions in this specification, then the element does not
+ <p>The types of link indicated (the relationships) are given by the value of the <dfn
+ title="attr-link-rel"><code>rel</code></dfn> attribute, which, if present, must have a value that
+ is a <span>set of space-separated tokens</span>. The <a href="#linkTypes">allowed keywords and
+ their meanings</a> are defined in a later section. <span class="impl">If the <code
+ title="attr-link-rel">rel</code> attribute is absent, has no keywords, or if none of the keywords
+ used are allowed according to the definitions in this specification, then the element does not
create any links.</span></p>
- <p>Two categories of links can be created using the
- <code>link</code> element: <span title="external resource
- link">Links to external resources</span> and <span
- title="hyperlink">hyperlinks</span>. The <a href="#linkTypes">link
- types section</a> defines whether a particular link type is an
- external resource or a hyperlink. One <code>link</code> element can
- create multiple links (of which some might be external resource
- links and some might be hyperlinks); exactly which and how many
- links are created depends on the keywords given in the <code
- title="attr-link-rel">rel</code> attribute. User agents must process
- the links on a per-link basis, not a per-element basis.</p>
+ <p>Two categories of links can be created using the <code>link</code> element: <span
+ title="external resource link">Links to external resources</span> and <span
+ title="hyperlink">hyperlinks</span>. The <a href="#linkTypes">link types section</a> defines
+ whether a particular link type is an external resource or a hyperlink. One <code>link</code>
+ element can create multiple links (of which some might be external resource links and some might
+ be hyperlinks); exactly which and how many links are created depends on the keywords given in the
+ <code title="attr-link-rel">rel</code> attribute. User agents must process the links on a per-link
+ basis, not a per-element basis.</p>
- <p class="note">Each link created for a <code>link</code> element is
- handled separately. For instance, if there are two <code>link</code>
- elements with <code title="">rel="stylesheet"</code>, they each
- count as a separate external resource, and each is affected by its
- own attributes independently. Similarly, if a single
- <code>link</code> element has a <code
- title="attr-link-rel">rel</code> attribute with the value <code
- title="">next stylesheet</code>, it creates both a
- <span>hyperlink</span> (for the <code title="rel-next">next</code>
- keyword) and an <span>external resource link</span> (for the <code
- title="rel-stylesheet">stylesheet</code> keyword), and they are
- affected by other attributes (such as <code
- title="attr-link-media">media</code> or <code
- title="attr-link-title">title</code>) differently.</p>
+ <p class="note">Each link created for a <code>link</code> element is handled separately. For
+ instance, if there are two <code>link</code> elements with <code title="">rel="stylesheet"</code>,
+ they each count as a separate external resource, and each is affected by its own attributes
+ independently. Similarly, if a single <code>link</code> element has a <code
+ title="attr-link-rel">rel</code> attribute with the value <code title="">next stylesheet</code>,
+ it creates both a <span>hyperlink</span> (for the <code title="rel-next">next</code> keyword) and
+ an <span>external resource link</span> (for the <code title="rel-stylesheet">stylesheet</code>
+ keyword), and they are affected by other attributes (such as <code
+ title="attr-link-media">media</code> or <code title="attr-link-title">title</code>)
+ differently.</p>
<div class="example">
- <p>For example, the following <code>link</code> element creates two
- hyperlinks (to the same page):</p>
+ <p>For example, the following <code>link</code> element creates two hyperlinks (to the same
+ page):</p>
<pre><link rel="author license" href="/about"></pre>
- <p>The two links created by this element are one whose semantic is
- that the target page has information about the current page's
- author, and one whose semantic is that the target page has
- information regarding the license under which the current page is
- provided.</p>
+ <p>The two links created by this element are one whose semantic is that the target page has
+ information about the current page's author, and one whose semantic is that the target page has
+ information regarding the license under which the current page is provided.</p>
</div>
<p>The <dfn title="attr-link-crossorigin"><code>crossorigin</code></dfn> attribute is a <span>CORS
settings attribute</span>. It is intended for use with external resource links.</p>
- <p>The exact behavior for links to external resources depends on the
- exact relationship, as defined for the relevant link type. Some of
- the attributes control whether or not the external resource is to be
- applied (as defined below).</p>
+ <p>The exact behavior for links to external resources depends on the exact relationship, as
+ defined for the relevant link type. Some of the attributes control whether or not the external
+ resource is to be applied (as defined below).</p>
<div class="impl">
@@ -14617,13 +14599,11 @@
<ol>
- <li><p>If the <code title="attr-link-href">href</code> attribute's
- value is the empty string, then abort these steps.</p></li>
+ <li><p>If the <code title="attr-link-href">href</code> attribute's value is the empty string,
+ then abort these steps.</p></li>
- <li><p><span title="resolve a url">Resolve</span> the
- <span>URL</span> given by the <code
- title="attr-link-href">href</code> attribute, relative to the
- element.</li>
+ <li><p><span title="resolve a url">Resolve</span> the <span>URL</span> given by the <code
+ title="attr-link-href">href</code> attribute, relative to the element.</li>
<li><p>If the previous step fails, then abort these steps.</p></li>
@@ -14642,190 +14622,149 @@
</ol>
- <p>User agents may opt to only try to obtain such resources when
- they are needed, instead of pro-actively <span
- title="fetch">fetching</span> all the external resources that are
- not applied.</p>
+ <p>User agents may opt to only try to obtain such resources when they are needed, instead of
+ pro-actively <span title="fetch">fetching</span> all the external resources that are not
+ applied.</p>
- <p>The semantics of the protocol used (e.g. HTTP) must be followed
- when fetching external resources. (For example, redirects will be
- followed and 404 responses will cause the external resource to not
- be applied.)</p>
+ <p>The semantics of the protocol used (e.g. HTTP) must be followed when fetching external
+ resources. (For example, redirects will be followed and 404 responses will cause the external
+ resource to not be applied.)</p>
<!-- the next few paragraph are similar to text in the <style> section -->
- <p>Once the attempts to obtain the resource and its <span>critical
- subresources</span> are complete, the user agent must, if the loads
- were successful, <span>queue a task</span> to <span>fire a simple
- event</span> named <code title="event-load">load</code> at the
- <code>link</code> element, or, if the resource or one of its
- <span>critical subresources</span> failed to completely load for any
- reason (e.g. DNS error, HTTP 404 response, a connection being
- prematurely closed, unsupported Content-Type), <span>queue a
- task</span> to <span>fire a simple event</span> named <code
- title="event-error">error</code> at the <code>link</code>
- element. Non-network errors in processing the resource or its
- subresources (e.g. CSS parse errors, PNG decoding errors) are not
- failures for the purposes of this paragraph.</p>
+ <p>Once the attempts to obtain the resource and its <span>critical subresources</span> are
+ complete, the user agent must, if the loads were successful, <span>queue a task</span> to
+ <span>fire a simple event</span> named <code title="event-load">load</code> at the
+ <code>link</code> element, or, if the resource or one of its <span>critical subresources</span>
+ failed to completely load for any reason (e.g. DNS error, HTTP 404 response, a connection being
+ prematurely closed, unsupported Content-Type), <span>queue a task</span> to <span>fire a simple
+ event</span> named <code title="event-error">error</code> at the <code>link</code> element.
+ Non-network errors in processing the resource or its subresources (e.g. CSS parse errors, PNG
+ decoding errors) are not failures for the purposes of this paragraph.</p>
- <p>The <span>task source</span> for these <span
- title="concept-task">tasks</span> is the <span>DOM manipulation task
- source</span>.</p>
+ <p>The <span>task source</span> for these <span title="concept-task">tasks</span> is the <span>DOM
+ manipulation task source</span>.</p>
- <p>The element must <span>delay the load event</span> of the
- element's document until all the attempts to obtain the resource and
- its <span>critical subresources</span> are complete. (Resources that
- the user agent has not yet attempted to obtain, e.g. because it is
- waiting for the resource to be needed, do not <span>delay the load
- event</span>.)</p>
+ <p>The element must <span>delay the load event</span> of the element's document until all the
+ attempts to obtain the resource and its <span>critical subresources</span> are complete.
+ (Resources that the user agent has not yet attempted to obtain, e.g. because it is waiting for the
+ resource to be needed, do not <span>delay the load event</span>.)</p>
<hr>
- <p id="linkui">Interactive user agents may provide users with a
- means to <span title="following hyperlinks">follow the
- hyperlinks</span> created using the <code>link</code> element,
- somewhere within their user interface. The exact interface is not
- defined by this specification, but it could include the following
- information (obtained from the element's attributes, again as
- defined below), in some form or another (possibly simplified), for
- each hyperlink created with each <code>link</code> element in the
- document:</p>
+ <p id="linkui">Interactive user agents may provide users with a means to <span title="following
+ hyperlinks">follow the hyperlinks</span> created using the <code>link</code> element, somewhere
+ within their user interface. The exact interface is not defined by this specification, but it
+ could include the following information (obtained from the element's attributes, again as defined
+ below), in some form or another (possibly simplified), for each hyperlink created with each
+ <code>link</code> element in the document:</p>
<ul> <!-- the order here is the order that makes most sense for a UI -->
- <li>The relationship between this document and the resource (given
- by the <code title="attr-link-rel">rel</code> attribute)</li>
+ <li>The relationship between this document and the resource (given by the <code
+ title="attr-link-rel">rel</code> attribute)</li>
- <li>The title of the resource (given by the <code
- title="attr-link-title">title</code> attribute).</li>
+ <li>The title of the resource (given by the <code title="attr-link-title">title</code>
+ attribute).</li>
- <li>The address of the resource (given by the <code
- title="attr-link-href">href</code> attribute).</li>
+ <li>The address of the resource (given by the <code title="attr-link-href">href</code>
+ attribute).</li>
- <li>The language of the resource (given by the <code
- title="attr-link-hreflang">hreflang</code> attribute).</li>
+ <li>The language of the resource (given by the <code title="attr-link-hreflang">hreflang</code>
+ attribute).</li>
- <li>The optimum media for the resource (given by the <code
- title="attr-link-media">media</code> attribute).</li>
+ <li>The optimum media for the resource (given by the <code title="attr-link-media">media</code>
+ attribute).</li>
</ul>
- <p>User agents could also include other information, such as the
- type of the resource (as given by the <code
- title="attr-link-type">type</code> attribute).</p>
+ <p>User agents could also include other information, such as the type of the resource (as given by
+ the <code title="attr-link-type">type</code> attribute).</p>
</div>
- <p class="note">Hyperlinks created with the <code>link</code>
- element and its <code title="attr-link-rel">rel</code> attribute
- apply to the whole page. This contrasts with the <code
- title="attr-hyperlink-rel">rel</code> attribute of <code>a</code>
- and <code>area</code> elements, which indicates the type of a link
- whose context is given by the link's location within the
+ <p class="note">Hyperlinks created with the <code>link</code> element and its <code
+ title="attr-link-rel">rel</code> attribute apply to the whole page. This contrasts with the <code
+ title="attr-hyperlink-rel">rel</code> attribute of <code>a</code> and <code>area</code> elements,
+ which indicates the type of a link whose context is given by the link's location within the
document.</p>
- <p>The <dfn title="attr-link-media"><code>media</code></dfn>
- attribute says which media the resource applies to. The value must
- be a <span>valid media query</span>.</p>
+ <p>The <dfn title="attr-link-media"><code>media</code></dfn> attribute says which media the
+ resource applies to. The value must be a <span>valid media query</span>.</p>
<div class="impl">
- <p>If the link is a <span>hyperlink</span> then the <code
- title="attr-link-media">media</code> attribute is purely advisory,
- and describes for which media the document in question was
+ <p>If the link is a <span>hyperlink</span> then the <code title="attr-link-media">media</code>
+ attribute is purely advisory, and describes for which media the document in question was
designed.</p>
- <p>However, if the link is an <span>external resource link</span>,
- then the <code title="attr-link-media">media</code> attribute is
- prescriptive. The user agent must apply the external resource when
- the <code title="attr-link-media">media</code> attribute's value
- <span>matches the environment</span> and the other relevant
- conditions apply, and must not apply it otherwise.</p><!-- note
- similar text in <style> section -->
+ <p>However, if the link is an <span>external resource link</span>, then the <code
+ title="attr-link-media">media</code> attribute is prescriptive. The user agent must apply the
+ external resource when the <code title="attr-link-media">media</code> attribute's value
+ <span>matches the environment</span> and the other relevant conditions apply, and must not apply
+ it otherwise.</p><!-- note similar text in <style> section -->
- <p class="note">The external resource might have further
- restrictions defined within that limit its applicability. For
- example, a CSS style sheet might have some <code
- title="">@media</code> blocks. This specification does not override
- such further restrictions or requirements.</p><!-- note similar text
- in <style> section -->
+ <p class="note">The external resource might have further restrictions defined within that limit
+ its applicability. For example, a CSS style sheet might have some <code title="">@media</code>
+ blocks. This specification does not override such further restrictions or requirements.</p><!--
+ note similar text in <style> section -->
</div>
- <p id="default-media">The default, if the <code
- title="attr-link-media">media</code> attribute is omitted, is "<code
- title="">all</code>", meaning that by default links apply to all
- media.</p>
+ <p id="default-media">The default, if the <code title="attr-link-media">media</code> attribute is
+ omitted, is "<code title="">all</code>", meaning that by default links apply to all media.</p>
- <p>The <dfn title="attr-link-hreflang"><code>hreflang</code></dfn>
- attribute on the <code>link</code> element has the same semantics as
- the <span title="attr-hyperlink-hreflang"><code>hreflang</code>
- attribute on <code>a</code> and <code>area</code>
- elements</span>.</p>
+ <p>The <dfn title="attr-link-hreflang"><code>hreflang</code></dfn> attribute on the
+ <code>link</code> element has the same semantics as the <span
+ title="attr-hyperlink-hreflang"><code>hreflang</code> attribute on <code>a</code> and
+ <code>area</code> elements</span>.</p>
- <p>The <dfn title="attr-link-type"><code>type</code></dfn> attribute
- gives the <span>MIME type</span> of the linked resource. It is
- purely advisory. The value must be a <span>valid MIME
+ <p>The <dfn title="attr-link-type"><code>type</code></dfn> attribute gives the <span>MIME
+ type</span> of the linked resource. It is purely advisory. The value must be a <span>valid MIME
type</span>.</p>
- <p>For <span title="external resource link">external resource
- links</span>, the <code title="attr-link-type">type</code> attribute
- is used as a hint to user agents so that they can avoid fetching
- resources they do not support. <span class="impl">If the attribute
- is present, then the user agent must assume that the resource is of
- the given type (even if that is not a <span>valid MIME type</span>,
- e.g. the empty string). If the attribute is omitted, but the
- external resource link type has a default type defined, then the
- user agent must assume that the resource is of that type. If the UA
- does not support the given <span>MIME type</span> for the given link
- relationship, then the UA should not <span
- title="concept-link-obtain">obtain</span> the resource; if the UA
- does support the given <span>MIME type</span> for the given link
- relationship, then the UA should <span
- title="concept-link-obtain">obtain</span> the resource at the
- appropriate time as specified for the <span>external resource
- link</span>'s particular type. If the attribute is omitted, and the
- external resource link type does not have a default type defined,
- but the user agent would <span
- title="concept-link-obtain">obtain</span> the resource if the type
- was known and supported, then the user agent should <span
- title="concept-link-obtain">obtain</span> the resource under the
- assumption that it will be supported.</span></p>
+ <p>For <span title="external resource link">external resource links</span>, the <code
+ title="attr-link-type">type</code> attribute is used as a hint to user agents so that they can
+ avoid fetching resources they do not support. <span class="impl">If the attribute is present, then
+ the user agent must assume that the resource is of the given type (even if that is not a
+ <span>valid MIME type</span>, e.g. the empty string). If the attribute is omitted, but the
+ external resource link type has a default type defined, then the user agent must assume that the
+ resource is of that type. If the UA does not support the given <span>MIME type</span> for the
+ given link relationship, then the UA should not <span title="concept-link-obtain">obtain</span>
+ the resource; if the UA does support the given <span>MIME type</span> for the given link
+ relationship, then the UA should <span title="concept-link-obtain">obtain</span> the resource at
+ the appropriate time as specified for the <span>external resource link</span>'s particular type.
+ If the attribute is omitted, and the external resource link type does not have a default type
+ defined, but the user agent would <span title="concept-link-obtain">obtain</span> the resource if
+ the type was known and supported, then the user agent should <span
+ title="concept-link-obtain">obtain</span> the resource under the assumption that it will be
+ supported.</span></p>
<div class="impl">
- <p>User agents must not consider the <code
- title="attr-link-type">type</code> attribute authoritative —
- upon fetching the resource, user agents must not use the <code
- title="attr-link-type">type</code> attribute to determine its actual
- type. Only the actual type (as defined in the next paragraph) is
- used to determine whether to <em>apply</em> the resource, not the
- aforementioned assumed type.</p>
+ <p>User agents must not consider the <code title="attr-link-type">type</code> attribute
+ authoritative — upon fetching the resource, user agents must not use the <code
+ title="attr-link-type">type</code> attribute to determine its actual type. Only the actual type
+ (as defined in the next paragraph) is used to determine whether to <em>apply</em> the resource,
+ not the aforementioned assumed type.</p>
- <p id="concept-link-type-sniffing">If the external resource link
- type defines rules for processing the resource's <span
- title="Content-Type">Content-Type metadata</span>, then those rules
- apply. Otherwise, if the resource is expected to be an image, user
- agents may apply the <span title="Content-Type sniffing:
- image">image sniffing rules</span>, with the <var title="">official
- type</var> being the type determined from the resource's <span
- title="Content-Type">Content-Type metadata</span>, and use the
- resulting sniffed type of the resource as if it was the actual
- type. Otherwise, if neither of these conditions apply or if the user
- agent opts not to apply the image sniffing rules, then the user
- agent must use the resource's <span
- title="Content-Type">Content-Type metadata</span> to determine the
- type of the resource. If there is no type metadata, but the external
- resource link type has a default type defined, then the user agent
- must assume that the resource is of that type.</p>
+ <p id="concept-link-type-sniffing">If the external resource link type defines rules for processing
+ the resource's <span title="Content-Type">Content-Type metadata</span>, then those rules apply.
+ Otherwise, if the resource is expected to be an image, user agents may apply the <span
+ title="Content-Type sniffing: image">image sniffing rules</span>, with the <var title="">official
+ type</var> being the type determined from the resource's <span title="Content-Type">Content-Type
+ metadata</span>, and use the resulting sniffed type of the resource as if it was the actual type.
+ Otherwise, if neither of these conditions apply or if the user agent opts not to apply the image
+ sniffing rules, then the user agent must use the resource's <span
+ title="Content-Type">Content-Type metadata</span> to determine the type of the resource. If there
+ is no type metadata, but the external resource link type has a default type defined, then the user
+ agent must assume that the resource is of that type.</p>
- <p class="note">The <code title="rel-stylesheet">stylesheet</code>
- link type defines rules for processing the resource's <span
- title="Content-Type">Content-Type metadata</span>.</p>
+ <p class="note">The <code title="rel-stylesheet">stylesheet</code> link type defines rules for
+ processing the resource's <span title="Content-Type">Content-Type metadata</span>.</p>
- <p>Once the user agent has established the type of the resource, the
- user agent must apply the resource if it is of a supported type and
- the other relevant conditions apply, and must ignore the resource
- otherwise.</p>
+ <p>Once the user agent has established the type of the resource, the user agent must apply the
+ resource if it is of a supported type and the other relevant conditions apply, and must ignore the
+ resource otherwise.</p>
<div class="example">
@@ -14835,97 +14774,79 @@
<link rel="stylesheet" href="B" type="text/css">
<link rel="stylesheet" href="C"></pre>
- <p>...then a compliant UA that supported only CSS style sheets
- would fetch the B and C files, and skip the A file (since
- <code>text/plain</code> is not the <span>MIME type</span> for CSS style
+ <p>...then a compliant UA that supported only CSS style sheets would fetch the B and C files, and
+ skip the A file (since <code>text/plain</code> is not the <span>MIME type</span> for CSS style
sheets).</p>
- <p>For files B and C, it would then check the actual types returned
- by the server. For those that are sent as <code>text/css</code>, it
- would apply the styles, but for those labeled as
+ <p>For files B and C, it would then check the actual types returned by the server. For those that
+ are sent as <code>text/css</code>, it would apply the styles, but for those labeled as
<code>text/plain</code>, or any other type, it would not.</p>
- <p>If one of the two files was returned without a
- <span>Content-Type</span> metadata, or with a syntactically
- incorrect type like <code
- title="">Content-Type: "null"</code>, then the default type
- for <code title="rel-stylesheet">stylesheet</code> links would kick
- in. Since that default type is <code title="">text/css</code>, the
- style sheet <em>would</em> nonetheless be applied.</p>
+ <p>If one of the two files was returned without a <span>Content-Type</span> metadata, or with a
+ syntactically incorrect type like <code title="">Content-Type: "null"</code>, then the
+ default type for <code title="rel-stylesheet">stylesheet</code> links would kick in. Since that
+ default type is <code title="">text/css</code>, the style sheet <em>would</em> nonetheless be
+ applied.</p>
</div>
</div>
- <p>The <dfn title="attr-link-title"><code>title</code></dfn>
- attribute gives the title of the link. With one exception, it is
- purely advisory. The value is text. The exception is for style sheet
- links, where the <code title="attr-link-title">title</code>
- attribute defines <span>alternative style sheet sets</span>.</p>
+ <p>The <dfn title="attr-link-title"><code>title</code></dfn> attribute gives the title of the
+ link. With one exception, it is purely advisory. The value is text. The exception is for style
+ sheet links, where the <code title="attr-link-title">title</code> attribute defines
+ <span>alternative style sheet sets</span>.</p>
- <p class="note">The <code title="attr-link-title">title</code>
- attribute on <code>link</code> elements differs from the global
- <code title="attr-title">title</code> attribute of most other
- elements in that a link without a title does not inherit the title
- of the parent element: it merely has no title.</p>
+ <p class="note">The <code title="attr-link-title">title</code> attribute on <code>link</code>
+ elements differs from the global <code title="attr-title">title</code> attribute of most other
+ elements in that a link without a title does not inherit the title of the parent element: it
+ merely has no title.</p>
- <p>The <code title="attr-link-sizes">sizes</code> attribute is used
- with the <code title="rel-icon">icon</code> link type. The attribute
- must not be specified on <code>link</code> elements that do not have
- a <code title="attr-link-rel">rel</code> attribute that specifies
- the <code title="rel-icon">icon</code> keyword.</p>
+ <p>The <code title="attr-link-sizes">sizes</code> attribute is used with the <code
+ title="rel-icon">icon</code> link type. The attribute must not be specified on <code>link</code>
+ elements that do not have a <code title="attr-link-rel">rel</code> attribute that specifies the
+ <code title="rel-icon">icon</code> keyword.</p>
<div class="impl">
<!--!--><!-- s/header fields/headers/ for consistency with the rest of the spec -->
- <p>HTTP <code title="http-link">Link:</code> header fields, if
- supported, must be assumed to come before any links in the document,
- in the order that they were given in the HTTP message. These header
- fields are to be processed according to the rules given in the
- relevant specifications. <a href="#refsHTTP">[HTTP]</a> <a
- href="#refsWEBLINK">[WEBLINK]</a></p> <!-- WEBLINK is ref for Link:
+ <p>HTTP <code title="http-link">Link:</code> header fields, if supported, must be assumed to come
+ before any links in the document, in the order that they were given in the HTTP message. These
+ header fields are to be processed according to the rules given in the relevant specifications. <a
+ href="#refsHTTP">[HTTP]</a> <a href="#refsWEBLINK">[WEBLINK]</a></p> <!-- WEBLINK is ref for Link:
header -->
- <p class="note">Registration of relation types in HTTP Link: header
- fields is distinct from <a href="#linkTypes">HTML link types</a>,
- and thus their semantics can be different from same-named HTML
- types.</p>
+ <p class="note">Registration of relation types in HTTP Link: header fields is distinct from <a
+ href="#linkTypes">HTML link types</a>, and thus their semantics can be different from same-named
+ HTML types.</p>
- <p>The IDL attributes <dfn
- title="dom-link-href"><code>href</code></dfn>, <dfn
- title="dom-link-rel"><code>rel</code></dfn>, <dfn
- title="dom-link-media"><code>media</code></dfn>, <dfn
- title="dom-link-hreflang"><code>hreflang</code></dfn>, <dfn
+ <p>The IDL attributes <dfn title="dom-link-href"><code>href</code></dfn>, <dfn
+ title="dom-link-rel"><code>rel</code></dfn>, <dfn title="dom-link-media"><code>media</code></dfn>,
+ <dfn title="dom-link-hreflang"><code>hreflang</code></dfn>, <dfn
title="dom-link-type"><code>type</code></dfn>, and <dfn
- title="dom-link-sizes"><code>sizes</code></dfn> each must
- <span>reflect</span> the respective content attributes of the same
- name.</p>
+ title="dom-link-sizes"><code>sizes</code></dfn> each must <span>reflect</span> the respective
+ content attributes of the same name.</p>
<p>The <dfn title="dom-link-crossOrigin"><code>crossOrigin</code></dfn> IDL attribute must
<span>reflect</span> the <code title="attr-link-crossorigin">crossorigin</code> content
attribute, <span>limited to only known values</span>.</p>
- <p>The IDL attribute <dfn
- title="dom-link-rellist"><code>relList</code></dfn> <span
+ <p>The IDL attribute <dfn title="dom-link-rellist"><code>relList</code></dfn> <span
class="impl">must</span> <span title="reflect">reflect</span> the <code
title="attr-link-rel">rel</code> content attribute.</p>
</div>
- <p>The IDL attribute <dfn
- title="dom-link-disabled"><code>disabled</code></dfn> only applies
- to style sheet links. When the <code>link</code> element defines a
- style sheet link, then the <code
- title="dom-link-disabled">disabled</code> attribute behaves as
- defined <span title="dom-linkstyle-disabled">for the alternative
- style sheets DOM</span>. For all other <code>link</code> elements it
- always return false and does nothing on setting.</p> <!-- that is
+ <p>The IDL attribute <dfn title="dom-link-disabled"><code>disabled</code></dfn> only applies to
+ style sheet links. When the <code>link</code> element defines a style sheet link, then the <code
+ title="dom-link-disabled">disabled</code> attribute behaves as defined <span
+ title="dom-linkstyle-disabled">for the alternative style sheets DOM</span>. For all other
+ <code>link</code> elements it always return false and does nothing on setting.</p> <!-- that is
normatively required in the definition of dom-linkstyle-disabled -->
- <p>The <code>LinkStyle</code> interface is also implemented by
- this element; the <span>styling processing model</span> defines
- how. <a href="#refsCSSOM">[CSSOM]</a></p>
+ <p>The <code>LinkStyle</code> interface is also implemented by this element; the <span>styling
+ processing model</span> defines how. <a href="#refsCSSOM">[CSSOM]</a></p>
<div class="example">
@@ -14947,9 +14868,8 @@
<div class="example">
- <p>The following example shows how you can specify versions of the
- page that use alternative formats, are aimed at other languages,
- and that are intended for other media:</p>
+ <p>The following example shows how you can specify versions of the page that use alternative
+ formats, are aimed at other languages, and that are intended for other media:</p>
<pre><link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
@@ -14996,78 +14916,59 @@
</dd>
</dl><!--TOPIC:HTML-->
- <p>The <code>meta</code> element <span>represents</span> various
- kinds of metadata that cannot be expressed using the
- <code>title</code>, <code>base</code>, <code>link</code>,
- <code>style</code>, and <code>script</code> elements.</p>
+ <p>The <code>meta</code> element <span>represents</span> various kinds of metadata that cannot be
+ expressed using the <code>title</code>, <code>base</code>, <code>link</code>, <code>style</code>,
+ and <code>script</code> elements.</p>
- <p>The <code>meta</code> element can represent document-level
- metadata with the <code title="attr-meta-name">name</code>
- attribute, pragma directives with the <code
- title="attr-meta-http-equiv">http-equiv</code> attribute, and the
- file's <span>character encoding declaration</span> when an HTML
- document is serialized to string form (e.g. for transmission over
- the network or for disk storage) with the <code
- title="attr-meta-charset">charset</code> attribute.</p>
+ <p>The <code>meta</code> element can represent document-level metadata with the <code
+ title="attr-meta-name">name</code> attribute, pragma directives with the <code
+ title="attr-meta-http-equiv">http-equiv</code> attribute, and the file's <span>character encoding
+ declaration</span> when an HTML document is serialized to string form (e.g. for transmission over
+ the network or for disk storage) with the <code title="attr-meta-charset">charset</code>
+ attribute.</p>
- <p>Exactly one of the <code title="attr-meta-name">name</code>,
- <code title="attr-meta-http-equiv">http-equiv</code>, <code
- title="attr-meta-charset">charset</code>, and <code
- title="attr-itemprop">itemprop</code> attributes must be
- specified.</p>
+ <p>Exactly one of the <code title="attr-meta-name">name</code>, <code
+ title="attr-meta-http-equiv">http-equiv</code>, <code title="attr-meta-charset">charset</code>,
+ and <code title="attr-itemprop">itemprop</code> attributes must be specified.</p>
<p>If either <code title="attr-meta-name">name</code>, <code
- title="attr-meta-http-equiv">http-equiv</code>, or <code
- title="attr-itemprop">itemprop</code> is specified, then the <code
- title="attr-meta-content">content</code> attribute must also be
+ title="attr-meta-http-equiv">http-equiv</code>, or <code title="attr-itemprop">itemprop</code> is
+ specified, then the <code title="attr-meta-content">content</code> attribute must also be
specified. Otherwise, it must be omitted.</p>
- <p>The <dfn title="attr-meta-charset"><code>charset</code></dfn>
- attribute specifies the character encoding used by the
- document. This is a <span>character encoding declaration</span>. If
- the attribute is present in an <span title="XML documents">XML
- document</span>, its value must be an <span>ASCII
- case-insensitive</span> match for the string "<code
- title="">UTF-8</code>" (and the document is therefore forced to use
- UTF-8 as its encoding).</p>
+ <p>The <dfn title="attr-meta-charset"><code>charset</code></dfn> attribute specifies the character
+ encoding used by the document. This is a <span>character encoding declaration</span>. If the
+ attribute is present in an <span title="XML documents">XML document</span>, its value must be an
+ <span>ASCII case-insensitive</span> match for the string "<code title="">UTF-8</code>" (and the
+ document is therefore forced to use UTF-8 as its encoding).</p>
- <p class="note">The <code title="attr-meta-charset">charset</code>
- attribute on the <code>meta</code> element has no effect in XML
- documents, and is only allowed in order to facilitate migration to
- and from XHTML.</p>
+ <p class="note">The <code title="attr-meta-charset">charset</code> attribute on the
+ <code>meta</code> element has no effect in XML documents, and is only allowed in order to
+ facilitate migration to and from XHTML.</p>
- <p>There must not be more than one <code>meta</code> element with a
- <code title="attr-meta-charset">charset</code> attribute per
- document.</p>
+ <p>There must not be more than one <code>meta</code> element with a <code
+ title="attr-meta-charset">charset</code> attribute per document.</p>
- <p>The <dfn title="attr-meta-content"><code>content</code></dfn>
- attribute gives the value of the document metadata or pragma
- directive when the element is used for those purposes. The allowed
- values depend on the exact context, as described in subsequent
- sections of this specification.</p>
+ <p>The <dfn title="attr-meta-content"><code>content</code></dfn> attribute gives the value of the
+ document metadata or pragma directive when the element is used for those purposes. The allowed
+ values depend on the exact context, as described in subsequent sections of this specification.</p>
- <p>If a <code>meta</code> element has a <dfn
- title="attr-meta-name"><code>name</code></dfn> attribute, it sets
- document metadata. Document metadata is expressed in terms of
- name-value pairs, the <code title="attr-meta-name">name</code>
- attribute on the <code>meta</code> element giving the name, and the
- <code title="attr-meta-content">content</code> attribute on the same
- element giving the value. The name specifies what aspect of metadata
- is being set; valid names and the meaning of their values are
- described in the following sections. If a <code>meta</code> element
- has no <code title="attr-meta-content">content</code> attribute,
- then the value part of the metadata name-value pair is the empty
- string.</p>
+ <p>If a <code>meta</code> element has a <dfn title="attr-meta-name"><code>name</code></dfn>
+ attribute, it sets document metadata. Document metadata is expressed in terms of name-value pairs,
+ the <code title="attr-meta-name">name</code> attribute on the <code>meta</code> element giving the
+ name, and the <code title="attr-meta-content">content</code> attribute on the same element giving
+ the value. The name specifies what aspect of metadata is being set; valid names and the meaning of
+ their values are described in the following sections. If a <code>meta</code> element has no <code
+ title="attr-meta-content">content</code> attribute, then the value part of the metadata name-value
+ pair is the empty string.</p>
<div class="impl">
<p>The <dfn title="dom-meta-name"><code>name</code></dfn> and <dfn
- title="dom-meta-content"><code>content</code></dfn> IDL attributes
- must <span>reflect</span> the respective content attributes of the
- same name. The IDL attribute <dfn
- title="dom-meta-httpEquiv"><code>httpEquiv</code></dfn> must
- <span>reflect</span> the content attribute <code
- title="attr-meta-http-equiv">http-equiv</code>.</p>
+ title="dom-meta-content"><code>content</code></dfn> IDL attributes must <span>reflect</span> the
+ respective content attributes of the same name. The IDL attribute <dfn
+ title="dom-meta-httpEquiv"><code>httpEquiv</code></dfn> must <span>reflect</span> the content
+ attribute <code title="attr-meta-http-equiv">http-equiv</code>.</p>
</div>
@@ -24795,115 +24696,87 @@
-->
- <p>The image given by the <dfn
- title="attr-img-src"><code>src</code></dfn> and <dfn
- title="attr-img-srcset"><code>srcset</code></dfn> attributes is the
- embedded content; the value of the <dfn
- title="attr-img-alt"><code>alt</code></dfn> attribute provides
- equivalent content for those who cannot process images or who have
- image loading disabled (i.e. it is the <code>img</code> element's
- <span>fallback content</span>).</p>
+ <p>The image given by the <dfn title="attr-img-src"><code>src</code></dfn> and <dfn
+ title="attr-img-srcset"><code>srcset</code></dfn> attributes is the embedded content; the value of
+ the <dfn title="attr-img-alt"><code>alt</code></dfn> attribute provides equivalent content for
+ those who cannot process images or who have image loading disabled (i.e. it is the
+ <code>img</code> element's <span>fallback content</span>).</p>
- <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>
+ <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>
- <p>The <code title="attr-img-src">src</code> attribute must be
- present, and must contain a <span>valid non-empty URL potentially
- surrounded by spaces</span> referencing a non-interactive,
- optionally animated, image resource that is neither paged nor
- scripted.</p>
+ <p>The <code title="attr-img-src">src</code> attribute must be present, and must contain a
+ <span>valid non-empty URL potentially surrounded by spaces</span> referencing a non-interactive,
+ optionally animated, image resource that is neither paged nor scripted.</p>
- <p>The <code title="attr-img-srcset">srcset</code> attribute may
- also be present. If present, its value must consist of one or more
- <span title="image candidate string">image candidate strings</span>,
- each separated from the next by a U+002C COMMA character (,). This
- attribute allows authors to provide alternative images for
- environments with smaller screens or screens with higher pixel
- densities.</p>
+ <p>The <code title="attr-img-srcset">srcset</code> attribute may also be present. If present, its
+ value must consist of one or more <span title="image candidate string">image candidate
+ strings</span>, each separated from the next by a U+002C COMMA character (,). This attribute
+ allows authors to provide alternative images for environments with smaller screens or screens with
+ higher pixel densities.</p>
<div class="note">
- <p>The <code title="attr-img-srcset">srcset</code> attribute allows
- authors to provide a set of images to handle graphical displays of
- varying dimensions and pixel densities.</p>
+ <p>The <code title="attr-img-srcset">srcset</code> attribute allows authors to provide a set of
+ images to handle graphical displays of varying dimensions and pixel densities.</p>
- <p>The attribute essentially takes a comma-separated list of URLs
- each with one or more descriptors giving the maximum viewport
- dimensions and pixel density allowed to use the image. From the
- available options, the user agent then picks the most appropriate
- image. If the viewport dimensions or pixel density changes, the
- user agent can replace the image data with a new image on the
- fly.</p>
+ <p>The attribute essentially takes a comma-separated list of URLs each with one or more
+ descriptors giving the maximum viewport dimensions and pixel density allowed to use the image.
+ From the available options, the user agent then picks the most appropriate image. If the viewport
+ dimensions or pixel density changes, the user agent can replace the image data with a new image
+ on the fly.</p>
- <p>To specify an image, give first a URL, then one or more
- descriptors of the form 100w, 100h, or 2x, where "100w" means
- "maximum viewport width of 100 CSS pixels", "100h" is the same but
- for height, and "2x" means "maximum pixel density of 2 device
- pixels per CSS pixel".</p>
+ <p>To specify an image, give first a URL, then one or more descriptors of the form 100w, 100h, or
+ 2x, where "100w" means "maximum viewport width of 100 CSS pixels", "100h" is the same but for
+ height, and "2x" means "maximum pixel density of 2 device pixels per CSS pixel".</p>
</div>
- <p>An <dfn>image candidate string</dfn> consists of the following
- components, in order, with the further restrictions described below
- this list:</p>
+ <p>An <dfn>image candidate string</dfn> consists of the following components, in order, with the
+ further restrictions described below this list:</p>
<ol>
- <li>Zero or more <span title="space character">space
- characters</span>.</li>
+ <li>Zero or more <span title="space character">space characters</span>.</li>
- <li>A <span>valid non-empty URL</span> referencing a
- non-interactive, optionally animated, image resource that is
- neither paged nor scripted.</li>
+ <li>A <span>valid non-empty URL</span> referencing a non-interactive, optionally animated, image
+ resource that is neither paged nor scripted.</li>
- <li>Zero or more <span title="space character">space
- characters</span>.</li>
+ <li>Zero or more <span title="space character">space characters</span>.</li>
- <li>Optionally a <i>width descriptor</i>, consisting of: a
- <span>space character</span>, a <span>valid non-negative
- integer</span> representing the <i>width descriptor value</i>, and
- a U+0077 LATIN SMALL LETTER W character.</li>
+ <li>Optionally a <i>width descriptor</i>, consisting of: a <span>space character</span>, a
+ <span>valid non-negative integer</span> representing the <i>width descriptor value</i>, and a
+ U+0077 LATIN SMALL LETTER W character.</li>
- <li>Zero or more <span title="space character">space
- characters</span>.</li>
+ <li>Zero or more <span title="space character">space characters</span>.</li>
- <li>Optionally a <i>height descriptor</i>, consisting of: a
- <span>space character</span>, a <span>valid non-negative
- integer</span> representing the <i>height descriptor value</i>, and
- a U+0068 LATIN SMALL LETTER H character.</li>
+ <li>Optionally a <i>height descriptor</i>, consisting of: a <span>space character</span>, a
+ <span>valid non-negative integer</span> representing the <i>height descriptor value</i>, and a
+ U+0068 LATIN SMALL LETTER H character.</li>
- <li>Zero or more <span title="space character">space
- characters</span>.</li>
+ <li>Zero or more <span title="space character">space characters</span>.</li>
- <li>Optionally a <i>pixel density descriptor</i>, consisting of: a
- <span>space character</span>, a <span>valid floating-point
- number</span> giving a number greater than zero representing the
- <i>pixel density descriptor value</i>, and a U+0078 LATIN SMALL
- LETTER X character.</li>
+ <li>Optionally a <i>pixel density descriptor</i>, consisting of: a <span>space character</span>,
+ a <span>valid floating-point number</span> giving a number greater than zero representing the
+ <i>pixel density descriptor value</i>, and a U+0078 LATIN SMALL LETTER X character.</li>
- <li>Zero or more <span title="space character">space
- characters</span>.</li>
+ <li>Zero or more <span title="space character">space characters</span>.</li>
</ol>
- <p>Each <span>image candidate string</span> must have at least one
- of the three optional descriptors. There must not be two <span
- title="image candidate string">image candidate strings</span> in a
- <code title="attr-img-srcset">srcset</code> attribute whose <i>width
- descriptor value</i>, <i>height descriptor value</i>, and <i>pixel
- density descriptor value</i> are each identical to their counterpart
- in the other <span>image candidate string</span>; for the purposes
- of this requirement, omitted <i>width descriptors</i> and <i>height
- descriptors</i> are considered to have the value "Infinity", and
- omitted <i>pixel density descriptors</i> are considered to have the
- value 1.</p>
+ <p>Each <span>image candidate string</span> must have at least one of the three optional
+ descriptors. There must not be two <span title="image candidate string">image candidate
+ strings</span> in a <code title="attr-img-srcset">srcset</code> attribute whose <i>width
+ descriptor value</i>, <i>height descriptor value</i>, and <i>pixel density descriptor value</i>
+ are each identical to their counterpart in the other <span>image candidate string</span>; for the
+ purposes of this requirement, omitted <i>width descriptors</i> and <i>height descriptors</i> are
+ considered to have the value "Infinity", and omitted <i>pixel density descriptors</i> are
+ considered to have the value 1.</p>
<div class="example">
- <p>In this example, a banner that takes half the viewport is
- provided in two versions, one for wide screen and one for narrow
- screens.</p>
+ <p>In this example, a banner that takes half the viewport is provided in two versions, one for
+ wide screen and one for narrow screens.</p>
<pre><h1><img alt="The Breakfast Combo"
src="banner.jpeg"
@@ -24911,37 +24784,25 @@
</div>
- <p class="note">The requirements above imply that images can be
- static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector
- documents (single-page PDFs, XML files with an SVG root element),
- animated bitmaps (APNGs, animated GIFs), animated vector graphics
- (XML files with an SVG root element that use declarative SMIL
- animation), and so forth. However, these definitions preclude SVG
- files with script, multipage PDF files, interactive MNG files, HTML
- documents, plain text documents, and so forth.
- <a href="#refsPNG">[PNG]</a>
- <a href="#refsGIF">[GIF]</a>
- <a href="#refsJPEG">[JPEG]</a>
- <a href="#refsPDF">[PDF]</a>
- <a href="#refsXML">[XML]</a>
- <a href="#refsAPNG">[APNG]</a>
- <!-- <a href="#refsAGIF">[AGIF]</a> -->
- <a href="#refsSVG">[SVG]</a>
- <a href="#refsMNG">[MNG]</a>
- </p>
+ <p class="note">The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs,
+ JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element),
+ animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root
+ element that use declarative SMIL animation), and so forth. However, these definitions preclude
+ SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text
+ documents, and so forth. <a href="#refsPNG">[PNG]</a> <a href="#refsGIF">[GIF]</a> <a
+ href="#refsJPEG">[JPEG]</a> <a href="#refsPDF">[PDF]</a> <a href="#refsXML">[XML]</a> <a
+ href="#refsAPNG">[APNG]</a> <!-- <a href="#refsAGIF">[AGIF]</a> --> <a href="#refsSVG">[SVG]</a>
+ <a href="#refsMNG">[MNG]</a> </p>
- <p>The <code>img</code> element must not be used as a layout tool.
- In particular, <code>img</code> elements should not be used to
- display transparent images, as they rarely convey meaning and rarely
- add anything useful to the document.</p>
+ <p>The <code>img</code> element must not be used as a layout tool. In particular, <code>img</code>
+ elements should not be used to display transparent images, as they rarely convey meaning and
+ rarely add anything useful to the document.</p>
<hr>
- <p>The <dfn
- title="attr-img-crossorigin"><code>crossorigin</code></dfn>
- attribute is a <span>CORS settings attribute</span>. Its purpose is
- to allow images from third-party sites that allow cross-origin
- access to be used with <code>canvas</code>.</p>
+ <p>The <dfn title="attr-img-crossorigin"><code>crossorigin</code></dfn> attribute is a <span>CORS
+ settings attribute</span>. Its purpose is to allow images from third-party sites that allow
+ cross-origin access to be used with <code>canvas</code>.</p>
<div class="impl">
@@ -24969,176 +24830,136 @@
</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-available">available</dfn>.</p>
+ <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-available">available</dfn>.</p>
- <p>An <code>img</code> element is initially <span
- title="img-none">unavailable</span>.</p>
+ <p>An <code>img</code> element is initially <span title="img-none">unavailable</span>.</p>
- <p>When an <code>img</code> element is <span
- title="img-available">available</span>, it <span>provides a paint
- source</span> whose width is the image's intrinsic width, whose
- height is the image's intrinsic height, and whose appearance is the
- intrinsic appearance of the image.</p>
+ <p>When an <code>img</code> element is <span title="img-available">available</span>, it
+ <span>provides a paint source</span> whose width is the image's intrinsic width, whose height is
+ the image's intrinsic height, and whose appearance is the intrinsic appearance of the image.</p>
<p>In a <span>browsing context</span> where <span title="concept-bc-noscript">scripting is
disabled</span>, user agents may obtain images immediately or on demand. In a <span>browsing
context</span> where <span title="concept-bc-noscript">scripting is enabled</span>, user agents
must obtain images immediately.</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 created with a <code
- title="attr-img-src">src</code> attribute,
- a <code title="attr-img-srcset">srcset</code> attribute, or both.
- A user agent that obtains images immediately must also synchronously
- <span>update the image data</span> of an <code>img</code> element
- whenever that element has its
- <code title="attr-img-src">src</code>,
- <code title="attr-img-srcset">srcset</code>, or
- <code title="attr-img-crossorigin">crossorigin</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 immediately must synchronously <span>update the image
+ data</span> of an <code>img</code> element whenever that element is created with a <code
+ title="attr-img-src">src</code> attribute, a <code title="attr-img-srcset">srcset</code>
+ attribute, or both. A user agent that obtains images immediately must also synchronously
+ <span>update the image data</span> of an <code>img</code> element whenever that element has its
+ <code title="attr-img-src">src</code>, <code title="attr-img-srcset">srcset</code>, or <code
+ title="attr-img-crossorigin">crossorigin</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>
- or <code title="attr-img-src">srcset</code>
- attribute, and only if the <code>img</code> element is in the <span
- title="img-none">unavailable</span> state. When an <code>img</code>
- element's
- <code title="attr-img-src">src</code>,
- <code title="attr-img-srcset">srcset</code>, or
- <code title="attr-img-crossorigin">crossorigin</code> attribute set,
- 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>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> or <code
+ title="attr-img-src">srcset</code> attribute, and only if the <code>img</code> element is in the
+ <span title="img-none">unavailable</span> state. When an <code>img</code> element's <code
+ title="attr-img-src">src</code>, <code title="attr-img-srcset">srcset</code>, or <code
+ title="attr-img-crossorigin">crossorigin</code> attribute set, 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>Each <code>img</code> element has a <dfn>last selected
- source</dfn>, which must initially be null, and a <dfn>current pixel
- density</dfn>, which must initially be undefined.</p>
+ <p>Each <code>img</code> element has a <dfn>last selected source</dfn>, which must initially be
+ null, and a <dfn>current pixel density</dfn>, which must initially be undefined.</p>
- <p>When an <code>img</code> element has a <span>current pixel
- density</span> that is not 1.0, the element's image data must be
- treated as if its resolution, in device pixels per CSS pixels, was
+ <p>When an <code>img</code> element has a <span>current pixel density</span> that is not 1.0, the
+ element's image data must be treated as if its resolution, in device pixels per CSS pixels, was
the <span>current pixel density</span>.</p>
- <p class="example">For example, if the <span>current pixel
- density</span> is 3.125, that means that there are 300 device pixels
- per CSS inch, and thus if the image data is 300x600, it has an
+ <p class="example">For example, if the <span>current pixel density</span> is 3.125, that means
+ that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has an
intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</p>
- <p>Each <code>Document</code> object must have a <dfn>list of
- available images</dfn>. Each image in this list is identified by a
- tuple consisting of an <span>absolute URL</span>, a <span>CORS
- settings attribute</span> mode, and, if the mode is not <span
- title="attr-crossorigin-none">No CORS</span>, an
- <span>origin</span>. User agents may copy entries from one
- <code>Document</code> object's <span>list of available images</span>
- to another at any time (e.g. when the <code>Document</code> is
- created, user agents can add to it all the images that are loaded in
- other <code>Document</code>s), but must not change the keys of
- entries copied in this way when doing so. User agents may also
- remove images from such lists at any time (e.g. to save memory).</p>
+ <p>Each <code>Document</code> object must have a <dfn>list of available images</dfn>. Each image
+ in this list is identified by a tuple consisting of an <span>absolute URL</span>, a <span>CORS
+ settings attribute</span> mode, and, if the mode is not <span title="attr-crossorigin-none">No
+ CORS</span>, an <span>origin</span>. User agents may copy entries from one <code>Document</code>
+ object's <span>list of available images</span> to another at any time (e.g. when the
+ <code>Document</code> is created, user agents can add to it all the images that are loaded in
+ other <code>Document</code>s), but must not change the keys of entries copied in this way when
+ doing so. User agents may also remove images from such lists at any time (e.g. to save
+ memory).</p>
- <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>
+ <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>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>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>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 user agent cannot support images, or its support for images has been disabled, then
+ abort these steps.</p></li>
<li>
- <p>If the element has a <code
- title="attr-img-srcset">srcset</code> attribute specified, then
- let <var title="">selected source</var> and <var title="">selected
- pixel density</var> be the URL and pixel density that results from
- <span>processing the image candidates</span>, respectively.
+ <p>If the element has a <code title="attr-img-srcset">srcset</code> attribute specified, then
+ let <var title="">selected source</var> and <var title="">selected pixel density</var> be the
+ URL and pixel density that results from <span>processing the image candidates</span>,
+ respectively.
- Otherwise, if the element has a <code
- title="attr-img-src">src</code> attribute specified and its value
- is not the empty string, let <var title="">selected source</var>
- be the value of the element's <code
- title="attr-img-src">src</code> attribute, and <var
- title="">selected pixel density</var> be 1.0. Otherwise, let <var
- title="">selected source</var> be null and <var title="">selected
- pixel density</var> be undefined.</p>
+ Otherwise, if the element has a <code title="attr-img-src">src</code> attribute specified and
+ its value is not the empty string, let <var title="">selected source</var> be the value of the
+ element's <code title="attr-img-src">src</code> attribute, and <var title="">selected pixel
+ density</var> be 1.0. Otherwise, let <var title="">selected source</var> be null and <var
+ title="">selected pixel density</var> be undefined.</p>
</li>
- <li><p>Let the <code>img</code> element's <span>last selected
- source</span> be <var title="">selected source</var> and the
- <code>img</code> element's <span>current pixel density</span> be
- <var title="">selected pixel density</var>.</p></li>
+ <li><p>Let the <code>img</code> element's <span>last selected source</span> be <var
+ title="">selected source</var> and the <code>img</code> element's <span>current pixel
+ density</span> be <var title="">selected pixel density</var>.</p></li>
- <li><p><span title="resolve a url">Resolve</span> <var
- title="">selected source</var>, relative to the element. If that is
- not successful, abort these steps.</p></li>
+ <li><p><span title="resolve a url">Resolve</span> <var title="">selected source</var>, relative
+ to the element. If that is not successful, abort these steps.</p></li>
- <li><p>Let <var title="">key</var> be a tuple consisting of the
- resulting <span>absolute URL</span>, the <code>img</code> element's
- <code title="attr-img-crossorigin">crossorigin</code> attribute's
- mode, and, if that mode is not <span
- title="attr-crossorigin-none">No CORS</span>, the
- <code>Document</code> object's <span>origin</span>.</p></li>
+ <li><p>Let <var title="">key</var> be a tuple consisting of the resulting <span>absolute
+ URL</span>, the <code>img</code> element's <code title="attr-img-crossorigin">crossorigin</code>
+ attribute's mode, and, if that mode is not <span title="attr-crossorigin-none">No CORS</span>,
+ the <code>Document</code> object's <span>origin</span>.</p></li>
- <li><p>If the <span>list of available images</span>, contains an
- entry for <var title="">key</var>, then set the <code>img</code>
- element to the <span title="img-all">completely available</span>
- state, update the presentation of the image appropriately,
- <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, and abort these steps.</p></li>
+ <li><p>If the <span>list of available images</span>, contains an entry for <var
+ title="">key</var>, then set the <code>img</code> element to the <span title="img-all">completely
+ available</span> state, update the presentation of the image appropriately, <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, and abort these steps.</p></li>
- <li><p>Asynchronously <span>await a stable state</span>, allowing
- the <span title="concept-task">task</span> that invoked this
- algorithm to continue. The <span>synchronous section</span>
- consists of all the remaining steps of this algorithm until the
- algorithm says the <span>synchronous section</span> has
- ended. (Steps in <span title="synchronous section">synchronous
- sections</span> are marked with ⌛.)</p></li>
+ <li><p>Asynchronously <span>await a stable state</span>, allowing the <span
+ title="concept-task">task</span> that invoked this algorithm to continue. The <span>synchronous
+ section</span> consists of all the remaining steps of this algorithm until the algorithm says the
+ <span>synchronous section</span> has ended. (Steps in <span title="synchronous
+ section">synchronous sections</span> are marked with ⌛.)</p></li>
<li>
- <p>⌛ If another instance of this algorithm for this
- <code>img</code> element was started after this instance (even if
- it aborted and is no longer running), then abort these steps.</p>
+ <p>⌛ If another instance of this algorithm for this <code>img</code> element was started
+ after this instance (even if it aborted and is no longer running), then abort these steps.</p>
- <p class="note">Only the last instance takes effect, to avoid
- multiple requests when, for example, the
- <code title="attr-img-src">src</code>,
- <code title="attr-img-srcset">srcset</code>, and
- <code title="attr-img-crossorigin">crossorigin</code> attributes
- are all set in succession.</p>
+ <p class="note">Only the last instance takes effect, to avoid multiple requests when, for
+ example, the <code title="attr-img-src">src</code>, <code title="attr-img-srcset">srcset</code>,
+ and <code title="attr-img-crossorigin">crossorigin</code> attributes are all set in
+ succession.</p>
</li>
<li>
- <p>⌛ If <var title="">selected source</var> is null, 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>
+ <p>⌛ If <var title="">selected source</var> is null, 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>
@@ -25151,42 +24972,33 @@
<li>
- <p>Do a <span>potentially CORS-enabled fetch</span><!--FETCH--> of
- the <span>absolute URL</span> that resulted from the earlier step,
- with the <i>mode</i> being the state of the element's <code
- title="attr-img-crossorigin">crossorigin</code> content attribute,
- the <i title="">origin</i> being the <span>origin</span> of the
- <code>img</code> element's <code>Document</code>, and the
+ <p>Do a <span>potentially CORS-enabled fetch</span><!--FETCH--> of the <span>absolute URL</span>
+ that resulted from the earlier step, with the <i>mode</i> being the state of the element's <code
+ title="attr-img-crossorigin">crossorigin</code> content attribute, the <i title="">origin</i>
+ being the <span>origin</span> of the <code>img</code> element's <code>Document</code>, and the
<i>default origin behaviour</i> set to <i>taint</i>.</p>
- <p>The resource obtained in this fashion, if any, is the
- <code>img</code> element's image data. It can be either
- <span>CORS-same-origin</span> or <span>CORS-cross-origin</span>;
- this affects the <span>origin</span> of the image itself (e.g.
- when used on a <code>canvas</code>).</p>
+ <p>The resource obtained in this fashion, if any, is the <code>img</code> element's image data.
+ It can be either <span>CORS-same-origin</span> or <span>CORS-cross-origin</span>; this affects
+ the <span>origin</span> of the image itself (e.g. when used on a <code>canvas</code>).</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
- 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> (<a
- href="#img-load">defined below</a>) has been run.</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 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> (<a href="#img-load">defined below</a>) has been run.</p>
- <p class="warning">This, unfortunately, can be used to perform a
- rudimentary port scan of the user's local network (especially in
- 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 are stricter than those described above to mitigate this
- attack, but unfortunately such policies are typically not
+ <p class="warning">This, unfortunately, can be used to perform a rudimentary port scan of the
+ user's local network (especially in 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 are stricter than those
+ 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>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 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
@@ -25277,18 +25089,14 @@
</dl>
- <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>
+ <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>
<p class="note">The <code title="event-progress">progress</code> and <code
title="event-loadend">loadend</code> events are not fired for
@@ -25308,119 +25116,94 @@
</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>Document</code> to the element <var
- title="">x</var>, even if that element is not <span title="in a
- Document">in</span> its <code>Document</code>.</p>
+ <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>Document</code> to the element <var
+ title="">x</var>, even if that element is not <span title="in a Document">in</span> its
+ <code>Document</code>.</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 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>When an <code>img</code> element is in the <span title="img-all">completely available</span>
+ state <em>and</em> the user agent can 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
- ignored when determining the image's type and whether it is a valid
- image.</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 ignored when determining
+ the image's type and whether it is a valid image.</p>
- <p class="note">This allows servers to return images with error
- responses, and have them displayed.</p>
+ <p class="note">This allows servers to return images with error responses, and have them
+ displayed.</p>
- <p>The user agents 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>
+ <p>The user agents 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>
- <p>User agents must not support non-image resources with the
- <code>img</code> element (e.g. XML files whose root element is an
- HTML element). User agents must not run executable code
- (e.g. scripts) embedded in the image resource. User agents must only
- display the first page of a multipage resource (e.g. a PDF
- file). User agents must not allow the resource to act in an
- interactive fashion, but should honor any animation in the
- resource.</p>
+ <p>User agents must not support non-image resources with the <code>img</code> element (e.g. XML
+ files whose root element is an HTML element). User agents must not run executable code (e.g.
+ scripts) embedded in the image resource. User agents must only display the first page of a
+ multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an
+ interactive fashion, but should honor any animation in the resource.</p>
- <p>This specification does not specify which image types are to be
- supported.</p>
+ <p>This specification does not specify which image types are to be supported.</p>
<hr>
- <p>When the user agent is required to <dfn title="processing the
- image candidates">process the image candidates</dfn> of an
- <code>img</code> element's <code
- title="attr-img-srcset">srcset</code> attribute, the user agent must
- run the following steps, which return a URL and pixel density (null
- and undefined respectively if no selection can be made):</p>
+ <p>When the user agent is required to <dfn title="processing the image candidates">process the
+ image candidates</dfn> of an <code>img</code> element's <code
+ title="attr-img-srcset">srcset</code> attribute, the user agent must run the following steps,
+ which return a URL and pixel density (null and undefined respectively if no selection can be
+ made):</p>
<ol>
- <li><p>Let <var title="">input</var> be the value of the
- <code>img</code> element's <code
+ <li><p>Let <var title="">input</var> be the value of the <code>img</code> element's <code
title="attr-img-srcset">srcset</code> attribute.</p></li>
- <li><p>Let <var title="">position</var> be a pointer into <var
- title="">input</var>, initially pointing at the start of the
- string.</p></li>
+ <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially
+ pointing at the start of the string.</p></li>
- <li><p>Let <var title="">raw candidates</var> be an initially empty
- ordered list of <span title="URL">URLs</span> with associated
- unparsed descriptors. The order of entries in the list is the
- order in which entries are added to the list.</p></li>
+ <li><p>Let <var title="">raw candidates</var> be an initially empty ordered list of <span
+ title="URL">URLs</span> with associated unparsed descriptors. The order of entries in the list is
+ the order in which entries are added to the list.</p></li>
- <li><p><i>Splitting loop</i>: <span>Skip
- whitespace</span>.</p></li>
+ <li><p><i>Splitting loop</i>: <span>Skip whitespace</span>.</p></li>
- <li><p><span>Collect a sequence of characters</span> that are not
- <span title="space character">space characters</span>, and let that
- be <var title="">url</var>.</p></li>
- <!-- if /url/ is empty, we're at the end of the string -->
+ <li><p><span>Collect a sequence of characters</span> that are not <span title="space
+ character">space characters</span>, and let that be <var title="">url</var>.</p></li> <!-- if
+ /url/ is empty, we're at the end of the string -->
- <li><p>If <var title="">url</var> is empty, then jump to the step
- labeled <i>descriptor parser</i>.</p></li>
+ <li><p>If <var title="">url</var> is empty, then jump to the step labeled <i>descriptor
+ parser</i>.</p></li>
- <li><p><span>Collect a sequence of characters</span> that are not
- U+002C COMMA characters (,), and let that be <var
- title="">descriptors</var>.</p></li>
+ <li><p><span>Collect a sequence of characters</span> that are not U+002C COMMA characters (,),
+ and let that be <var title="">descriptors</var>.</p></li>
- <li><p>Add <var title="">url</var> to <var title="">raw
- candidates</var>, associated with <var
+ <li><p>Add <var title="">url</var> to <var title="">raw candidates</var>, associated with <var
title="">descriptors</var>.</p></li>
- <li><p>If <var title="">position</var> is past the end of <var
- title="">input</var>, then jump to the step labeled <i>descriptor
- parser</i>.</p></li>
+ <li><p>If <var title="">position</var> is past the end of <var title="">input</var>, then jump to
+ the step labeled <i>descriptor parser</i>.</p></li>
- <li><p>Advance <var title="">position</var> to the next character
- in <var title="">input</var> (skipping past the U+002C COMMA
- character (,) separating this candidate from the next).</p></li>
+ <li><p>Advance <var title="">position</var> to the next character in <var title="">input</var>
+ (skipping past the U+002C COMMA character (,) separating this candidate from the next).</p></li>
<li><p>Return to the step labeled <i>splitting loop</i>.</p></li>
- <li><p><i>Descriptor parser</i>: Let <var title="">candidates</var>
- be an initially empty ordered list of <span title="URL">URLs</span>
- each with an associated pixel density, and optionally an associated
- width, height, or both. The order of entries in the list is the order
- in which entries are added to the list.</p>
+ <li><p><i>Descriptor parser</i>: Let <var title="">candidates</var> be an initially empty ordered
+ list of <span title="URL">URLs</span> each with an associated pixel density, and optionally an
+ associated width, height, or both. The order of entries in the list is the order in which entries
+ are added to the list.</p>
<li>
- <p>For each entry in <var title="">raw candidates</var> with
- <span>URL</span> <var title="">url</var> associated with the
- unparsed descriptors <var title="">unparsed descriptors</var>, in
- the order they were originally added to the list, run these
- substeps:</p>
+ <p>For each entry in <var title="">raw candidates</var> with <span>URL</span> <var
+ title="">url</var> associated with the unparsed descriptors <var title="">unparsed
+ descriptors</var>, in the order they were originally added to the list, run these substeps:</p>
<ol>
- <li><p>Let <var title="">descriptor list</var> be the result of
- <span title="split a string on spaces">splitting <var
- title="">unparsed descriptors</var> on spaces</span>.</p></li>
+ <li><p>Let <var title="">descriptor list</var> be the result of <span title="split a string on
+ spaces">splitting <var title="">unparsed descriptors</var> on spaces</span>.</p></li>
<li><p>Let <var title="">error</var> be <i>no</i>.</p></li>
@@ -25432,8 +25215,8 @@
<li>
- <p>For each token in <var title="">descriptor list</var>, run
- the appropriate set of steps from the following list:</p>
+ <p>For each token in <var title="">descriptor list</var>, run the appropriate set of steps
+ from the following list:</p>
<dl class="switch">
@@ -25443,12 +25226,11 @@
<ol>
- <li><p>If <var title="">width</var> is not <i>absent</i>,
- then let <var title="">error</var> be <i>yes</i>.</p></li>
+ <li><p>If <var title="">width</var> is not <i>absent</i>, then let <var
+ title="">error</var> be <i>yes</i>.</p></li>
- <li><p>Apply the <span>rules for parsing non-negative
- integers</span> to the token. Let <var title="">width</var>
- be the result.</p></li>
+ <li><p>Apply the <span>rules for parsing non-negative integers</span> to the token. Let
+ <var title="">width</var> be the result.</p></li>
</ol>
@@ -25479,12 +25261,11 @@
<ol>
- <li><p>If <var title="">density</var> is not <i>absent</i>,
- then let <var title="">error</var> be <i>yes</i>.</p></li>
+ <li><p>If <var title="">density</var> is not <i>absent</i>, then let <var
+ title="">error</var> be <i>yes</i>.</p></li>
- <li><p>Apply the <span>rules for parsing floating-point
- number values</span> to the token. Let <var
- title="">density</var> be the result.</p></li>
+ <li><p>Apply the <span>rules for parsing floating-point number values</span> to the token.
+ Let <var title="">density</var> be the result.</p></li>
</ol>
@@ -25495,20 +25276,16 @@
</li>
- <li><p>If <var title="">width</var> is still <i>absent</i>, set
- it to Infinity.</p></li>
+ <li><p>If <var title="">width</var> is still <i>absent</i>, set it to Infinity.</p></li>
- <li><p>If <var title="">height</var> is still <i>absent</i>, set
- it to Infinity.</p></li>
+ <li><p>If <var title="">height</var> is still <i>absent</i>, set it to Infinity.</p></li>
- <li><p>If <var title="">density</var> is still <i>absent</i>, set
- it to 1.0.</p></li>
+ <li><p>If <var title="">density</var> is still <i>absent</i>, set it to 1.0.</p></li>
- <li><p>If <var title="">error</var> is still <i>no</i>, then add
- an entry to <var title="">candidates</var> whose <span>URL</span>
- is <var title="">url</var>, associated with a width <var
- title="">width</var>, a height <var title="">height</var>, and a
- pixel density <var title="">density</var>.</p></li>
+ <li><p>If <var title="">error</var> is still <i>no</i>, then add an entry to <var
+ title="">candidates</var> whose <span>URL</span> is <var title="">url</var>, associated with a
+ width <var title="">width</var>, a height <var title="">height</var>, and a pixel density <var
+ title="">density</var>.</p></li>
</ol>
@@ -25516,18 +25293,16 @@
<li>
- <p>If the <code>img</code> element has a <code
- title="attr-img-src">src</code> attribute whose value is not the
- empty string, then run the following substeps:</p>
+ <p>If the <code>img</code> element has a <code title="attr-img-src">src</code> attribute whose
+ value is not the empty string, then run the following substeps:</p>
<ol>
- <li><p>Let <var title="">url</var> be the value of the element's
- <code title="attr-img-src">src</code> attribute.</p></li>
+ <li><p>Let <var title="">url</var> be the value of the element's <code
+ title="attr-img-src">src</code> attribute.</p></li>
- <li><p>Add an entry to <var title="">candidates</var> whose
- <span>URL</span> is <var title="">url</var>, associated with a
- width Infinity, a height Infinity, and a pixel density
+ <li><p>Add an entry to <var title="">candidates</var> whose <span>URL</span> is <var
+ title="">url</var>, associated with a width Infinity, a height Infinity, and a pixel density
1.0.</p></li>
</ol>
@@ -25537,155 +25312,124 @@
<li><p>If <var title="">candidates</var> is empty, return null as the URL and undefined as the
pixel density and abort these steps.</p></li>
- <li><p>If an entry <var title="">b</var> in <var
- title="">candidates</var> has the same associated width, height,
- and pixel density as an earlier entry <var title="">a</var> in <var
- title="">candidates</var>, then remove entry <var title="">b</var>.
- Repeat this step until none of the entries in <var
- title="">candidates</var> have the same associated width, height,
- and pixel density as an earlier entry.</p></li>
+ <li><p>If an entry <var title="">b</var> in <var title="">candidates</var> has the same
+ associated width, height, and pixel density as an earlier entry <var title="">a</var> in <var
+ title="">candidates</var>, then remove entry <var title="">b</var>. Repeat this step until none
+ of the entries in <var title="">candidates</var> have the same associated width, height, and
+ pixel density as an earlier entry.</p></li>
<li>
- <p>Optionally, return the <span>URL</span> of an entry in <var
- title="">candidates</var> chosen by the user agent, and that
- entry's associated pixel density, and then abort these steps. The
- user agent may apply any algorithm or heuristic in its selection
- of an entry for the purposes of this step.</p>
+ <p>Optionally, return the <span>URL</span> of an entry in <var title="">candidates</var> chosen
+ by the user agent, and that entry's associated pixel density, and then abort these steps. The
+ user agent may apply any algorithm or heuristic in its selection of an entry for the purposes of
+ this step.</p>
- <p class="note">This allows a user agent to override the default
- algorithm (as described in subsequent steps) in case the user
- agent has a reason to do so. For example, it would allow the user
- agent in highly bandwidth-constrained conditions to intentionally
- opt to use an image intended for a smaller screen size, on the
- assumption that it'll probably be good enough. Implementors are
- urged to avoid doing this if at all possible, to let authors have
- predictable results. The results of using an image intended for a
- different viewport size can be, at a minimum, aesthetically
- displeasing.</p>
+ <p class="note">This allows a user agent to override the default algorithm (as described in
+ subsequent steps) in case the user agent has a reason to do so. For example, it would allow the
+ user agent in highly bandwidth-constrained conditions to intentionally opt to use an image
+ intended for a smaller screen size, on the assumption that it'll probably be good enough.
+ Implementors are urged to avoid doing this if at all possible, to let authors have predictable
+ results. The results of using an image intended for a different viewport size can be, at a
+ minimum, aesthetically displeasing.</p>
- <p class="note">This clause is not necessary to select images that
- are of lower pixel density than the display can handle, because
- the definition of pixel density below is also left up to the user
- agent. This step is only needed to allow user agents to pick
- images intended for viewports with other dimensions.</p>
+ <p class="note">This clause is not necessary to select images that are of lower pixel density
+ than the display can handle, because the definition of pixel density below is also left up to
+ the user agent. This step is only needed to allow user agents to pick images intended for
+ viewports with other dimensions.</p>
</li>
- <li><p>Let <var title="">max width</var> be the width of the
- viewport, and let <var title="">max height</var> be the height of
- the viewport. <a href="#refsCSS">[CSS]</a></p></li>
+ <li><p>Let <var title="">max width</var> be the width of the viewport, and let <var title="">max
+ height</var> be the height of the viewport. <a href="#refsCSS">[CSS]</a></p></li>
- <li><p>If there are any entries in <var title="">candidates</var>
- that have an associated width that is less than <var
- title="">max width</var>, then remove them, unless that would
- remove all the entries, in which case remove only the entries whose
- associated width is less than the greatest such width.</p></li>
+ <li><p>If there are any entries in <var title="">candidates</var> that have an associated width
+ that is less than <var title="">max width</var>, then remove them, unless that would remove all
+ the entries, in which case remove only the entries whose associated width is less than the
+ greatest such width.</p></li>
- <li><p>If there are any entries in <var title="">candidates</var>
- that have an associated height that is less than <var
- title="">max height</var>, then remove them, unless that would
- remove all the entries, in which case remove only the entries whose
- associated height is less than the greatest such height.</p></li>
+ <li><p>If there are any entries in <var title="">candidates</var> that have an associated height
+ that is less than <var title="">max height</var>, then remove them, unless that would remove all
+ the entries, in which case remove only the entries whose associated height is less than the
+ greatest such height.</p></li>
- <li><p>If there are any entries in <var title="">candidates</var>
- that have an associated pixel density that is less than a
- user-agent-defined value giving the nominal pixel density of the
- display, then remove them, unless that would remove all the
- entries, in which case remove only the entries whose associated
- pixel density is less than the greatest such pixel density.</p></li>
+ <li><p>If there are any entries in <var title="">candidates</var> that have an associated pixel
+ density that is less than a user-agent-defined value giving the nominal pixel density of the
+ display, then remove them, unless that would remove all the entries, in which case remove only
+ the entries whose associated pixel density is less than the greatest such pixel density.</p></li>
- <li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated width that is greater than the smallest
- such width.</p></li>
+ <li><p>Remove all the entries in <var title="">candidates</var> that have an associated width
+ that is greater than the smallest such width.</p></li>
- <li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated height that is greater than the smallest
- such height.</p></li>
+ <li><p>Remove all the entries in <var title="">candidates</var> that have an associated height
+ that is greater than the smallest such height.</p></li>
- <li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated pixel density that is greater than the
- smallest such pixel density.</p></li>
+ <li><p>Remove all the entries in <var title="">candidates</var> that have an associated pixel
+ density that is greater than the smallest such pixel density.</p></li>
- <li><p>Return the <span>URL</span> of the sole remaining entry in
- <var title="">candidates</var>, and that entry's associated pixel
- density.</p></li>
+ <li><p>Return the <span>URL</span> of the sole remaining entry in <var title="">candidates</var>,
+ and that entry's associated pixel density.</p></li>
</ol>
- <p>The user agent may at any time run the following algorithm to
- update an <code>img</code> element's image in order to react to
- changes in the environment. (User agents are <em>not required</em>
- to ever run this algorithm.)</p>
+ <p>The user agent may at any time run the following algorithm to update an <code>img</code>
+ element's image in order to react to changes in the environment. (User agents are <em>not
+ required</em> to ever run this algorithm.)</p>
<ol>
- <li><p>Asynchronously <span>await a stable state</span>. The
- <span>synchronous section</span> consists of all the remaining
- steps of this algorithm until the algorithm says the
- <span>synchronous section</span> has ended. (Steps in <span
- title="synchronous section">synchronous sections</span> are marked
- with ⌛.)</p></li>
+ <li><p>Asynchronously <span>await a stable state</span>. The <span>synchronous section</span>
+ consists of all the remaining steps of this algorithm until the algorithm says the
+ <span>synchronous section</span> has ended. (Steps in <span title="synchronous
+ section">synchronous sections</span> are marked with ⌛.)</p></li>
- <li><p>⌛ If the <code>img</code> element does not have a
- <code title="attr-img-srcset">srcset</code> attribute specified, is
- not in the <span title="img-all">completely available</span> state,
- has image data whose resource type is
- <code>multipart/x-mixed-replace</code>, or if its <span>update the
- image data</span> algorithm is running, then abort this
- algorithm.</p></li> <!-- we don't support replacing push-JPEG
- images because defining what happens with the tasks and events and
- so on in that case would become implausibly complicated. -->
+ <li><p>⌛ If the <code>img</code> element does not have a <code
+ title="attr-img-srcset">srcset</code> attribute specified, is not in the <span
+ title="img-all">completely available</span> state, has image data whose resource type is
+ <code>multipart/x-mixed-replace</code>, or if its <span>update the image data</span> algorithm is
+ running, then abort this algorithm.</p></li> <!-- we don't support replacing push-JPEG images
+ because defining what happens with the tasks and events and so on in that case would become
+ implausibly complicated. -->
- <li><p>⌛ Let <var title="">selected source</var> and <var
- title="">selected pixel density</var> be the URL and pixel density
- that results from <span>processing the image candidates</span>,
- respectively.</p></li>
+ <li><p>⌛ Let <var title="">selected source</var> and <var title="">selected pixel
+ density</var> be the URL and pixel density that results from <span>processing the image
+ candidates</span>, respectively.</p></li>
- <li><p>⌛ If <var title="">selected source</var> is null,
- then abort these steps.</p></li> <!-- not sure this can ever
- actually happen -->
+ <li><p>⌛ If <var title="">selected source</var> is null, then abort these steps.</p></li>
+ <!-- not sure this can ever actually happen -->
- <li><p>⌛ If <var title="">selected source</var> and <var
- title="">selected pixel density</var> are the same as the element's
- <span>last selected source</span> and <span>current pixel
- density</span>, then abort these steps.</p></li> <!-- note that
- this check happens before base URL resolution, so changing the base
- URL doesn't trigger an update if nothing else changed -->
+ <li><p>⌛ If <var title="">selected source</var> and <var title="">selected pixel
+ density</var> are the same as the element's <span>last selected source</span> and <span>current
+ pixel density</span>, then abort these steps.</p></li> <!-- note that this check happens before
+ base URL resolution, so changing the base URL doesn't trigger an update if nothing else changed
+ -->
- <li><p>⌛ <span title="resolve a url">Resolve</span> <var
- title="">selected source</var>, relative to the element.</p></li>
+ <li><p>⌛ <span title="resolve a url">Resolve</span> <var title="">selected source</var>,
+ relative to the element.</p></li>
- <li><p>⌛ Let <var title="">CORS mode</var> be the state of
- the element's <code title="attr-img-crossorigin">crossorigin</code>
- content attribute.</p></li>
+ <li><p>⌛ Let <var title="">CORS mode</var> be the state of the element's <code
+ title="attr-img-crossorigin">crossorigin</code> content attribute.</p></li>
- <li><p>⌛ If the <span>resolve a URL</span> algorithm is not
- successful, abort these steps.</p>
+ <li><p>⌛ If the <span>resolve a URL</span> algorithm is not successful, abort these
+ steps.</p>
- <li><p>End the <span>synchronous section</span>, continuing the
- remaining steps asynchronously.</p></li>
+ <li><p>End the <span>synchronous section</span>, continuing the remaining steps
+ asynchronously.</p></li>
<li>
- <p>Do a <span>potentially CORS-enabled fetch</span><!--FETCH--> of
- the resulting <span>absolute URL</span>, with the <i>mode</i>
- being <var title="">CORS mode</var>, the <i title="">origin</i>
- being the <span>origin</span> of the <code>img</code> element's
- <code>Document</code>, and the <i>default origin behaviour</i> set
- to <i>taint</i>.</p>
+ <p>Do a <span>potentially CORS-enabled fetch</span><!--FETCH--> of the resulting <span>absolute
+ URL</span>, with the <i>mode</i> being <var title="">CORS mode</var>, the <i title="">origin</i>
+ being the <span>origin</span> of the <code>img</code> element's <code>Document</code>, and the
+ <i>default origin behaviour</i> set to <i>taint</i>.</p>
- <p>If this download fails in any way (other than the response code
- not being a 2xx code, as mentioned earlier), or if the image
- format is unsupported (as determined by applying the <span
- title="Content-Type sniffing: image">image sniffing rules</span>,
- again as mentioned earlier), or if the resource type is
- <code>multipart/x-mixed-replace</code>, then abort these
- steps.</p>
+ <p>If this download fails in any way (other than the response code not being a 2xx code, as
+ mentioned earlier), or if the image format is unsupported (as determined by applying the <span
+ title="Content-Type sniffing: image">image sniffing rules</span>, again as mentioned earlier),
+ or if the resource type is <code>multipart/x-mixed-replace</code>, then abort these steps.</p>
- <p>Otherwise, wait for the <span>fetch</span> algorithm to queue
- its last task, and then continue with these steps. The data
- obtained in this way is used in the steps below.</p>
+ <p>Otherwise, wait for the <span>fetch</span> algorithm to queue its last task, and then
+ continue with these steps. The data obtained in this way is used in the steps below.</p>
</li>
@@ -25695,27 +25439,22 @@
<ol>
- <li><p>If the <code>img</code> element's <code
- title="attr-img-src">src</code>, <code
- title="attr-img-srcset">srcset</code>, or <code
- title="attr-img-crossorigin">crossorigin</code> attributes have
- been set, changed, or removed since this algorithm started, then
- abort these steps.</p>
+ <li><p>If the <code>img</code> element's <code title="attr-img-src">src</code>, <code
+ title="attr-img-srcset">srcset</code>, or <code title="attr-img-crossorigin">crossorigin</code>
+ attributes have been set, changed, or removed since this algorithm started, then abort these
+ steps.</p>
- <li><p>Let the <code>img</code> element's <span>last selected
- source</span> be <var title="">selected source</var> and the
- <code>img</code> element's <span>current pixel density</span> be
- <var title="">selected pixel density</var>.</p></li>
+ <li><p>Let the <code>img</code> element's <span>last selected source</span> be <var
+ title="">selected source</var> and the <code>img</code> element's <span>current pixel
+ density</span> be <var title="">selected pixel density</var>.</p></li>
- <li><p>Replace the <code>img</code> element's image data with the
- resource obtained by the earlier step of this algorithm. It can
- be either <span>CORS-same-origin</span> or
- <span>CORS-cross-origin</span>; this affects the
- <span>origin</span> of the image itself (e.g. when used on a
- <code>canvas</code>).</p></li>
+ <li><p>Replace the <code>img</code> element's image data with the resource obtained by the
+ earlier step of this algorithm. It can be either <span>CORS-same-origin</span> or
+ <span>CORS-cross-origin</span>; this affects the <span>origin</span> of the image itself (e.g.
+ when used on a <code>canvas</code>).</p></li>
- <li><p><span>Fire a simple event</span> named <code
- title="">load</code> at the <code>img</code> element.</p></li>
+ <li><p><span>Fire a simple event</span> named <code title="">load</code> at the
+ <code>img</code> element.</p></li>
</ol>
@@ -25725,106 +25464,89 @@
<hr>
- <p>The <span>task source</span> for the <span
- title="concept-task">tasks</span> <span title="queue a
- task">queued</span> by algorithms in this section is the <span>DOM
- manipulation task source</span>.</p>
+ <p>The <span>task source</span> for the <span title="concept-task">tasks</span> <span title="queue
+ a task">queued</span> by algorithms in this section is the <span>DOM manipulation task
+ source</span>.</p>
<hr>
<p>What an <code>img</code> element represents depends on the <code
- title="attr-img-src">src</code> attribute and the <code
- title="attr-img-alt">alt</code> attribute.</p>
+ title="attr-img-src">src</code> attribute and the <code title="attr-img-alt">alt</code>
+ attribute.</p>
<dl class="switch">
- <dt>If the <code title="attr-img-src">src</code> attribute is set
- and the <code title="attr-img-alt">alt</code> attribute is set to
- the empty string</dt>
+ <dt>If the <code title="attr-img-src">src</code> attribute is set and the <code
+ title="attr-img-alt">alt</code> attribute is set to the empty string</dt>
<dd>
- <p>The image is either decorative or supplemental to the rest of
- the content, redundant with some other information in the
- document.</p>
+ <p>The image is either decorative or supplemental to the rest of the content, redundant with
+ some other information in the document.</p>
- <p>If the image is <span title="img-available">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 <span title="img-available">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>Otherwise, the element <span>represents</span> nothing, and may
- be omitted completely from the rendering. User agents may provide
- the user with a notification that an image is present but has been
- omitted from the rendering.</p>
+ <p>Otherwise, the element <span>represents</span> nothing, and may be omitted completely from
+ the rendering. User agents may provide the user with a notification that an image is present but
+ has been omitted from the rendering.</p>
</dd>
- <dt>If the <code title="attr-img-src">src</code> attribute is set
- and the <code title="attr-img-alt">alt</code> attribute is set to a
- value that isn't empty</dt>
+ <dt>If the <code title="attr-img-src">src</code> attribute is set and the <code
+ title="attr-img-alt">alt</code> attribute is set to a value that isn't empty</dt>
<dd>
- <p>The image is a key part of the content; the <code
- title="attr-img-alt">alt</code> attribute gives a textual
- equivalent or replacement for the image.</p>
+ <p>The image is a key part of the content; the <code title="attr-img-alt">alt</code> attribute
+ gives a textual equivalent or replacement for the image.</p>
- <p>If the image is <span title="img-available">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 <span title="img-available">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>Otherwise, the element <span>represents</span> the text given
- by the <code title="attr-img-alt">alt</code> attribute. User
- agents may provide the user with a notification that an image is
- present but has been omitted from the rendering.</p>
+ <p>Otherwise, the element <span>represents</span> the text given by the <code
+ title="attr-img-alt">alt</code> attribute. User agents may provide the user with a notification
+ that an image is present but has been omitted from the rendering.</p>
</dd>
- <dt>If the <code title="attr-img-src">src</code> attribute is set
- and the <code title="attr-img-alt">alt</code> attribute is not</dt>
+ <dt>If the <code title="attr-img-src">src</code> attribute is set and the <code
+ title="attr-img-alt">alt</code> attribute is not</dt>
<dd>
- <p>The image might be a key part of the content, and there is no
- textual equivalent of the image available.</p>
+ <p>The image might be a key part of the content, and there is no textual equivalent of the image
+ available.</p>
<p class="note">In a conforming document, the absence of the <code
- title="attr-img-alt">alt</code> attribute indicates that the image
- is a key part of the content but that a textual replacement for
- the image was not available when the image was generated.</p>
+ title="attr-img-alt">alt</code> attribute indicates that the image 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 <span title="img-available">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 <span title="img-available">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>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>
+ <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' -->
+ <!-- when editing this list, search for the two other occurrences of 'critical-no-alt' -->
- <!-- NOTE: the order of these steps is important; it's intended
- to make the innermost caption override the outer ones -->
+ <!-- NOTE: the order of these steps is important; it's intended to make the innermost caption
+ override the outer ones -->
- <li><p>If the image has a <code title="attr-title">title</code>
- attribute whose value is not the empty string, then the value of
- that attribute is the caption information; abort these
+ <li><p>If the image has a <code title="attr-title">title</code> attribute whose value is not
+ the empty string, then the value of that attribute is the caption information; abort these
steps.</p></li>
- <li><p>If the image is a descendant of a <code>figure</code>
- element that has a child <code>figcaption</code> element, and,
- ignoring the <code>figcaption</code> element and its descendants,
- the <code>figure</code> element has no <code>Text</code> node
- descendants other than <span>inter-element whitespace</span>, and
- no <span>embedded content</span> descendant other than the
- <code>img</code> element, then the contents of the first such
- <code>figcaption</code> element are the caption information;
- abort these steps.</p></li>
+ <li><p>If the image is a descendant of a <code>figure</code> element that has a child
+ <code>figcaption</code> element, and, ignoring the <code>figcaption</code> element and its
+ descendants, the <code>figure</code> element has no <code>Text</code> node descendants other
+ than <span>inter-element whitespace</span>, and no <span>embedded content</span> descendant
+ other than the <code>img</code> element, then the contents of the first such
+ <code>figcaption</code> element are the caption information; abort these steps.</p></li>
<li><p>There is no caption information.</p></li>
@@ -25832,9 +25554,8 @@
</dd>
- <dt>If the <code title="attr-img-src">src</code> attribute is not
- set and either the <code title="attr-img-alt">alt</code> attribute
- is set to the empty string or the <code
+ <dt>If the <code title="attr-img-src">src</code> attribute is not set and either the <code
+ title="attr-img-alt">alt</code> attribute is set to the empty string or the <code
title="attr-img-alt">alt</code> attribute is not set at all</dt>
<dd>
@@ -25854,32 +25575,23 @@
</dl>
- <p>The <code title="attr-img-alt">alt</code> attribute does not
- represent advisory information. User agents must not present the
- contents of the <code title="attr-img-alt">alt</code> attribute in
- the same way as content of the <code title="attr-title">title</code>
- attribute.</p>
+ <p>The <code title="attr-img-alt">alt</code> attribute does not represent advisory information.
+ User agents must not present the contents of the <code title="attr-img-alt">alt</code> attribute
+ in the same way as content of the <code title="attr-title">title</code> attribute.</p>
- <p>User agents may always provide the user with the option to
- display any image, or to prevent any image from being
- displayed.
+ <p>User agents may always provide the user with the option to display any image, or to prevent any
+ image from being displayed. User agents may also apply heuristics to help the user make use of the
+ image when the user is unable to see it, e.g. due to a visual disability or because they are using
+ a text terminal with no graphics capabilities. Such heuristics could include, for instance,
+ optical character recognition (OCR) of text found within the image.</p>
- User agents may also apply heuristics to help the user make use of
- the image when the user is unable to see it, e.g. due to a visual
- disability or because they are using a text terminal with no
- graphics capabilities. Such heuristics could include, for instance,
- optical character recognition (OCR) of text found within the image.
-
- </p>
-
- <p class="warning">While user agents are encouraged to repair cases
- of missing <code title="attr-img-alt">alt</code> attributes, authors
- must not rely on such behavior. <a href="#alt">Requirements for
- providing text to act as an alternative for images</a> are described
+ <p class="warning">While user agents are encouraged to repair cases of missing <code
+ title="attr-img-alt">alt</code> attributes, authors must not rely on such behavior. <a
+ href="#alt">Requirements for providing text to act as an alternative for images</a> are described
in detail below.</p>
- <p>The <em>contents</em> of <code>img</code> elements, if any, are
- ignored for the purposes of rendering.</p>
+ <p>The <em>contents</em> of <code>img</code> elements, if any, are ignored for the purposes of
+ rendering.</p>
</div>
@@ -25908,24 +25620,19 @@
<div class="impl">
<p>The <dfn title="dom-img-alt"><code>alt</code></dfn>, <dfn
- title="dom-img-src"><code>src</code></dfn>,
- and <dfn title="dom-img-srcset"><code>srcset</code></dfn>
- IDL attributes must <span>reflect</span> the respective content
- attributes of the same name.</p>
+ title="dom-img-src"><code>src</code></dfn>, and <dfn
+ title="dom-img-srcset"><code>srcset</code></dfn> IDL attributes must <span>reflect</span> the
+ respective content attributes of the same name.</p>
- <p>The <dfn
- title="dom-img-crossOrigin"><code>crossOrigin</code></dfn> IDL
- attribute must <span>reflect</span> the <code
- title="attr-img-crossorigin">crossorigin</code> content
- attribute, <span>limited to only known values</span>.</p>
+ <p>The <dfn title="dom-img-crossOrigin"><code>crossOrigin</code></dfn> IDL attribute must
+ <span>reflect</span> the <code title="attr-img-crossorigin">crossorigin</code> content attribute,
+ <span>limited to only known values</span>.</p>
- <p>The <dfn title="dom-img-useMap"><code>useMap</code></dfn> IDL
- attribute must <span>reflect</span> the <code
- title="attr-img-usemap">usemap</code> content attribute.</p>
+ <p>The <dfn title="dom-img-useMap"><code>useMap</code></dfn> IDL attribute must
+ <span>reflect</span> the <code title="attr-img-usemap">usemap</code> content attribute.</p>
- <p>The <dfn title="dom-img-isMap"><code>isMap</code></dfn> IDL
- attribute must <span>reflect</span> the <code
- title="attr-img-ismap">ismap</code> content attribute.</p>
+ <p>The <dfn title="dom-img-isMap"><code>isMap</code></dfn> IDL attribute must <span>reflect</span>
+ the <code title="attr-img-ismap">ismap</code> content attribute.</p>
</div>
More information about the Commit-Watchers
mailing list