Short URL: http://html5.org/r/7102
| SVN | Bug | Comment | Time (UTC) |
|---|---|---|---|
| 7102 | 2012-05-15 07:39 |
Index: source
===================================================================
--- source (revision 7101)
+++ source (revision 7102)
@@ -264,6 +264,7 @@
<ul>
<li>New hyperlink features: the <code title="attr-hyperlink-download">download</code> attribute to make download links and the <code title="attr-hyperlink-ping">ping</code> attribute for <span>hyperlink auditing</span>.</li> <!--DOWNLOAD--><!--PING-->
+ <li>The <code>img</code> element's <code title="attr-img-srcset">srcset</code> attribute for responsive images.</li>
<li>The <code title="attr-inert">inert</code> global attribute to disable subtrees.</li><!--INERT-->
<li>The <code title="attr-fs-method-dialog-keyword">dialog</code> keyword on the <code>form</code> element's <code title="attr-fs-method">method</code> attribute, for a simpler way to close dialogs.</li><!--FORM-DIALOG-->
<li>The <code title="dom-document-cssElementMap">cssElementMap</code> feature for defining <span title="CSS element reference identifier">CSS element reference identifiers</span>.</li> <!--CSSREF-->
@@ -3757,7 +3758,7 @@
<p class="note">For the special cases of splitting a string <span
title="split a string on spaces">on spaces</span> and <span
- title="split a string on spaces">on commas</span>, this algorithm
+ title="split a string on commas">on commas</span>, this algorithm
does not apply (those algorithms also perform <span title="strip
leading and trailing whitespace">whitespace trimming</span>).</p>
@@ -25158,6 +25159,9 @@
<dd><span>Global attributes</span></dd>
<dd><code title="attr-img-alt">alt</code></dd>
<dd><code title="attr-img-src">src</code></dd>
+<!--END w3c-html-->
+ <dd><code title="attr-img-srcset">srcset</code></dd>
+<!--START w3c-html-->
<dd><code title="attr-img-crossorigin">crossorigin</code></dd>
<dd><code title="attr-hyperlink-usemap">usemap</code></dd>
<dd><code title="attr-img-ismap">ismap</code></dd>
@@ -25171,6 +25175,9 @@
interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
attribute DOMString <span title="dom-img-alt">alt</span>;
attribute DOMString <span title="dom-img-src">src</span>;
+<!--END w3c-html-->
+ attribute DOMString <span title="dom-img-srcset">srcset</span>;
+<!--START w3c-html-->
attribute DOMString <span title="dom-img-crossOrigin">crossOrigin</span>;
attribute DOMString <span title="dom-img-useMap">useMap</span>;
attribute boolean <span title="dom-img-isMap">isMap</span>;
@@ -25203,8 +25210,11 @@
-->
<p>The image given by the <dfn
- title="attr-img-src"><code>src</code></dfn> attribute is the
- embedded content; the value of the <dfn
+ title="attr-img-src"><code>src</code></dfn>
+<!--END w3c-html-->
+ and <dfn title="attr-img-srcset"><code>srcset</code></dfn>
+<!--START w3c-html-->
+ 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<!--
@@ -25220,6 +25230,105 @@
optionally animated, image resource that is neither paged nor
scripted.</p>
+<!--END w3c-html-->
+
+ <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 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>
+
+ </div>
+
+ <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>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>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>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>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>
+
+ </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>; 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>
+
+ <pre><h1><img alt="The Breakfast Combo"
+ src="banner.jpeg"
+ srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"></h1></pre>
+
+ </div>
+
+<!--START w3c-html-->
+
<p class="note">Images can thus 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),
@@ -25285,27 +25394,57 @@
<p>A user agent that obtains images immediately must synchronously
<span>update the image data</span> of an <code>img</code> element
- whenever that element is either created with a <code
- title="attr-img-src">src</code> attribute, or has its <code
- title="attr-img-src">src</code> attribute set, changed, or removed,
- or has its <code title="attr-img-crossorigin">crossorigin</code>
- attribute set, changed, or removed.</p> <!-- Note how this does NOT
- happen when the base URL changes. -->
+ whenever that element is created with a <code
+ title="attr-img-src">src</code> attribute,
+<!--END w3c-html-->
+ a <code title="attr-img-srcset">srcset</code> attribute, or both.
+<!--START w3c-html-->
+ 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>,
+<!--END w3c-html-->
+ <code title="attr-img-srcset">srcset</code>, or
+<!--START w3c-html-->
+ <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> attribute, and
- only if the <code>img</code> element is in the <span
+ element has a
+ <code title="attr-img-src">src</code>
+<!--END w3c-html-->
+ or <code title="attr-img-src">srcset</code>
+<!--START w3c-html-->
+ 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> attribute is changed
- or removed, and whenever the element's <code
- title="attr-img-crossorigin">crossorigin</code> attribute is set,
+ element's
+ <code title="attr-img-src">src</code>,
+<!--END w3c-html-->
+ <code title="attr-img-srcset">srcset</code>, or
+<!--START w3c-html-->
+ <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>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
+ intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</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>
@@ -25338,31 +25477,63 @@
<p>⌛ If another instance of this algorithm for this
<code>img</code> element was started after this instance, then
- abort these steps. Only the last instance takes effect, to avoid
- multiple requests when the <code title="attr-img-src">src</code>
- attribute is set multiple times in a row, or when the <code
- title="attr-img-src">src</code> and <code
- title="attr-img-crossorigin">crossorigin</code> attributes are
- both set in succession.</p>
+ 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>,
+<!--END w3c-html-->
+ <code title="attr-img-srcset">srcset</code>, and
+<!--START w3c-html-->
+ <code title="attr-img-crossorigin">crossorigin</code> attributes
+ are all set in succession.</p>
+
</li>
<li>
- <p>⌛ If the element's <code title="attr-img-src">src</code>
- attribute is missing or its value is the empty string, then set
- the element to the <span title="img-error">broken</span> state,
- <span>queue a task</span> to <span>fire a simple event</span>
- named <code title="event-error">error</code> at the
+ <p>⌛
+
+<!--END w3c-html-->
+
+ 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.
+
+<!--START w3c-html-->
+
+ 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>⌛ 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>
<li>
- <p>⌛ <span title="resolve a url">Resolve</span> the value
- of the element's <code title="attr-img-src">src</code> attribute,
- relative to the element.</p>
+ <p>⌛ <span title="resolve a url">Resolve</span> <var
+ title="">selected source</var>, relative to the element.</p>
<p>If that is not successful, abort these steps.</p>
@@ -25508,11 +25679,389 @@
<p>This specification does not specify which image types are to be
supported.</p>
+ <hr>
+
+<!--END w3c-html-->
+
+ <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
+ 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="">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><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><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
+ 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>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><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 and/or height. 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>
+
+ <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="">error</var> be <i>no</i>.</p></li>
+
+ <li><p>Let <var title="">width</var> be <i>absent</i>.</p></li>
+
+ <li><p>Let <var title="">height</var> be <i>absent</i>.</p></li>
+
+ <li><p>Let <var title="">density</var> be <i>absent</i>.</p></li>
+
+ <li>
+
+ <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 <span>valid non-negative integer</span> 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>.</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>
+
+ </dd>
+
+
+ <dt>If the token consists of a <span>valid non-negative integer</span> followed by a U+0068 LATIN SMALL LETTER H character</dt>
+
+ <dd>
+
+ <ol>
+
+ <li><p>If <var title="">height</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="">height</var>
+ be the result.</p></li>
+
+ </ol>
+
+ </dd>
+
+
+ <dt>If the token consists of a <span>valid floating point number</span> followed by a U+0078 LATIN SMALL LETTER X character</dt>
+
+ <dd>
+
+ <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>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>
+
+ </dd>
+
+
+ </dl>
+
+ </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="">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>
+
+ </ol>
+
+ </li>
+
+ <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>
+
+ <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>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>
+
+ </li>
+
+ <li><p>If <var title="">candidates</var> is empty, return null and
+ undefined 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>Optionally, return the <span>URL</span> of a random entry in
+ <var title="">candidates</var>, and that entry's associated pixel
+ density, and then abort these steps.</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>
+
+ </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 greater 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 greater than the smallest such width.</p></li>
+
+ <li><p>If there are any entries in <var title="">candidates</var>
+ that have an associated height that is greater 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 greater than the smallest 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>Remove all the entries in <var title="">candidates</var>
+ that have an associated width that is less than the greatest such
+ width.</p></li>
+
+ <li><p>Remove all the entries in <var title="">candidates</var>
+ that have an associated height that is less than the greatest 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>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>
+
+ <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>⌛ 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>⌛ 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>⌛ <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>⌛ 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>Do a <span>potentially CORS-enabled fetch</span> 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>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>
+
+ <li>
+
+ <p><span>Queue a task</span> to run the following substeps:</p>
+
+ <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>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><span>Fire a simple event</span> named <code
+ title="">load</code> at the <code>img</code> element.</p></li>
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ <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>
+<!--START w3c-html-->
+
<hr>
<p>What an <code>img</code> element represents depends on the <code
@@ -25688,10 +26237,13 @@
<div class="impl">
- <p>The <dfn title="dom-img-alt"><code>alt</code></dfn> and <dfn
- title="dom-img-src"><code>src</code></dfn> IDL attributes must
- <span>reflect</span> the respective content attributes of the same
- name.</p>
+ <p>The <dfn title="dom-img-alt"><code>alt</code></dfn>, <dfn
+ title="dom-img-src"><code>src</code></dfn>,
+ <!--END w3c-html-->
+ and <dfn title="dom-img-srcset"><code>srcset</code></dfn>
+ <!--START w3c-html-->
+ 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
@@ -66455,9 +67007,9 @@
<pre class="idl">interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
attribute boolean <span title="dom-dialog-open">open</span>;
attribute DOMString <span title="dom-dialog-returnValue">returnValue</span>;
- void show(optional (<span>MouseEvent</span> or <span>Element</span>) anchor);
- void showModal(optional (<span>MouseEvent</span> or <span>Element</span>) anchor);
- void close(optional DOMString returnValue);
+ void <span title="dom-dialog-show">show</span>(optional (<span>MouseEvent</span> or <span>Element</span>) anchor);
+ void <span title="dom-dialog-showModal">showModal</span>(optional (<span>MouseEvent</span> or <span>Element</span>) anchor);
+ void <span title="dom-dialog-close">close</span>(optional DOMString returnValue);
};</pre>
</dd>
</dl><!--TOPIC:HTML-->