[html5] r7102 - [giow] (0) <img srcset> - first draft Affected topics: DOM APIs, HTML
whatwg at whatwg.org
whatwg at whatwg.org
Tue May 15 00:39:55 PDT 2012
Author: ianh
Date: 2012-05-15 00:39:54 -0700 (Tue, 15 May 2012)
New Revision: 7102
Modified:
complete.html
index
source
Log:
[giow] (0) <img srcset> - first draft
Affected topics: DOM APIs, HTML
Modified: complete.html
===================================================================
--- complete.html 2012-05-08 21:26:59 UTC (rev 7101)
+++ complete.html 2012-05-15 07:39:54 UTC (rev 7102)
@@ -240,7 +240,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 8 May 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 15 May 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -1533,6 +1533,7 @@
specifications and are not currently available anywhere else:</p>
<ul><li>New hyperlink features: the <code title=attr-hyperlink-download><a href=#attr-hyperlink-download>download</a></code> attribute to make download links and the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute for <a href=#hyperlink-auditing>hyperlink auditing</a>.</li> <!--DOWNLOAD--><!--PING-->
+ <li>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 for responsive images.</li>
<li>The <code title=attr-inert><a href=#the-inert-attribute>inert</a></code> global attribute to disable subtrees.</li><!--INERT-->
<li>The <code title=attr-fs-method-dialog-keyword><a href=#attr-fs-method-dialog-keyword>dialog</a></code> keyword on the <code><a href=#the-form-element>form</a></code> element's <code title=attr-fs-method><a href=#attr-fs-method>method</a></code> attribute, for a simpler way to close dialogs.</li><!--FORM-DIALOG-->
<li>The <code title=dom-document-cssElementMap><a href=#dom-document-csselementmap>cssElementMap</a></code> feature for defining <a href=#css-element-reference-identifier title="CSS element reference identifier">CSS element reference identifiers</a>.</li> <!--CSSREF-->
@@ -4639,7 +4640,7 @@
<li><p>Return <var title="">tokens</var>.</li>
- </ol><p class=note>For the special cases of splitting a string <a href=#split-a-string-on-spaces title="split a string on spaces">on spaces</a> and <a href=#split-a-string-on-spaces title="split a string on spaces">on commas</a>, this algorithm
+ </ol><p class=note>For the special cases of splitting a string <a href=#split-a-string-on-spaces title="split a string on spaces">on spaces</a> and <a href=#split-a-string-on-commas title="split a string on commas">on commas</a>, this algorithm
does not apply (those algorithms also perform <a href=#strip-leading-and-trailing-whitespace title="strip
leading and trailing whitespace">whitespace trimming</a>).</p>
@@ -23463,6 +23464,9 @@
<dd><a href=#global-attributes>Global attributes</a></dd>
<dd><code title=attr-img-alt><a href=#attr-img-alt>alt</a></code></dd>
<dd><code title=attr-img-src><a href=#attr-img-src>src</a></code></dd>
+
+ <dd><code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code></dd>
+
<dd><code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code></dd>
<dd><code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code></dd>
<dd><code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code></dd>
@@ -23476,6 +23480,9 @@
interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
attribute DOMString <a href=#dom-img-alt title=dom-img-alt>alt</a>;
attribute DOMString <a href=#dom-img-src title=dom-img-src>src</a>;
+
+ attribute DOMString <a href=#dom-img-srcset title=dom-img-srcset>srcset</a>;
+
attribute DOMString <a href=#dom-img-crossorigin title=dom-img-crossOrigin>crossOrigin</a>;
attribute DOMString <a href=#dom-img-usemap title=dom-img-useMap>useMap</a>;
attribute boolean <a href=#dom-img-ismap title=dom-img-isMap>isMap</a>;
@@ -23505,8 +23512,11 @@
-->
- <p>The image given by the <dfn id=attr-img-src title=attr-img-src><code>src</code></dfn> attribute is the
- embedded content; the value of the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute provides
+ <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<!--
--><!--FORK--><!--
@@ -23521,6 +23531,100 @@
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>
+
+ <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 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 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>
+
+ <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>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>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>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>
+
+ </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>; 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>
+
+
+
<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),
@@ -23575,22 +23679,54 @@
<p>A user agent that obtains images immediately must synchronously
<a href=#update-the-image-data>update the image data</a> of an <code><a href=#the-img-element>img</a></code> element
- whenever that element is either created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, or has its <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute set, changed, or removed,
- or has its <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. -->
+ 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> 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> attribute is changed
- or removed, and whenever the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute is set,
+ 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>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
+ intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</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>
@@ -23619,29 +23755,58 @@
<p>⌛ If another instance of this algorithm for this
<code><a href=#the-img-element>img</a></code> element was started after this instance, then
- abort these steps. Only the last instance takes effect, to avoid
- multiple requests when the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
- attribute is set multiple times in a row, or when the <code title=attr-img-src><a href=#attr-img-src>src</a></code> and <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes are
- both set in succession.</p>
+ 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>
+
</li>
<li>
- <p>⌛ If the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
- attribute is missing or its value is the empty string, then set
- the element to the <a href=#img-error title=img-error>broken</a> state,
- <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
- named <code title=event-error>error</code> at the
+ <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.
+
+
+
+ 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>⌛ 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>
<li>
- <p>⌛ <a href=#resolve-a-url title="resolve a url">Resolve</a> the value
- of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute,
- relative to the element.</p>
+ <p>⌛ <a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element.</p>
<p>If that is not successful, abort these steps.</p>
@@ -23762,10 +23927,322 @@
<p>This specification does not specify which image types are to be
supported.</p>
- <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
+ <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>
+
+ <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><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>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>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>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><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 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
+ <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>
+
+ <li><p>Let <var title="">error</var> be <i>no</i>.</li>
+
+ <li><p>Let <var title="">width</var> be <i>absent</i>.</li>
+
+ <li><p>Let <var title="">height</var> be <i>absent</i>.</li>
+
+ <li><p>Let <var title="">density</var> be <i>absent</i>.</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 <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>
+
+ <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>
+
+
+ <dt>If the token consists of a <a href=#valid-non-negative-integer>valid non-negative integer</a> 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>.</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="">height</var>
+ be the result.</li>
+
+ </ol></dd>
+
+
+ <dt>If the token consists of a <a href=#valid-floating-point-number>valid floating point number</a> 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>.</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="">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="">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>
+
+ <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
+ 1.0.</li>
+
+ </ol></li>
+
+ <li><p>If <var title="">candidates</var> is empty, return null and
+ undefined 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>Optionally, return the <a href=#url>URL</a> 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></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.</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.</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 less than the greatest such
+ width.</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.</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>
+
+ </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>
+
+ <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>⌛ 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>⌛ <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>⌛ 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>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a> of the
+ resulting <a href=#absolute-url>absolute URL</a>, with the <i>mode</i> being
+ <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>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>
+
+ <li>
+
+ <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>
+
+ <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><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>
+
+
<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
@@ -23919,9 +24396,12 @@
<div class=impl>
- <p>The <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn> and <dfn id=dom-img-src title=dom-img-src><code>src</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
@@ -56830,9 +57310,9 @@
<pre class=idl>interface <dfn id=htmldialogelement>HTMLDialogElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
attribute boolean <a href=#dom-dialog-open title=dom-dialog-open>open</a>;
attribute DOMString <a href=#dom-dialog-returnvalue title=dom-dialog-returnValue>returnValue</a>;
- void show(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
- void showModal(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
- void close(optional DOMString returnValue);
+ void <a href=#dom-dialog-show title=dom-dialog-show>show</a>(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
+ void <a href=#dom-dialog-showmodal title=dom-dialog-showModal>showModal</a>(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
+ void <a href=#dom-dialog-close title=dom-dialog-close>close</a>(optional DOMString returnValue);
};</pre>
</dd>
</dl><!--TOPIC:HTML--><p>The <code><a href=#the-dialog-element>dialog</a></code> element represents a part of an
Modified: index
===================================================================
--- index 2012-05-08 21:26:59 UTC (rev 7101)
+++ index 2012-05-15 07:39:54 UTC (rev 7102)
@@ -240,7 +240,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 8 May 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 15 May 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -1533,6 +1533,7 @@
specifications and are not currently available anywhere else:</p>
<ul><li>New hyperlink features: the <code title=attr-hyperlink-download><a href=#attr-hyperlink-download>download</a></code> attribute to make download links and the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute for <a href=#hyperlink-auditing>hyperlink auditing</a>.</li> <!--DOWNLOAD--><!--PING-->
+ <li>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 for responsive images.</li>
<li>The <code title=attr-inert><a href=#the-inert-attribute>inert</a></code> global attribute to disable subtrees.</li><!--INERT-->
<li>The <code title=attr-fs-method-dialog-keyword><a href=#attr-fs-method-dialog-keyword>dialog</a></code> keyword on the <code><a href=#the-form-element>form</a></code> element's <code title=attr-fs-method><a href=#attr-fs-method>method</a></code> attribute, for a simpler way to close dialogs.</li><!--FORM-DIALOG-->
<li>The <code title=dom-document-cssElementMap><a href=#dom-document-csselementmap>cssElementMap</a></code> feature for defining <a href=#css-element-reference-identifier title="CSS element reference identifier">CSS element reference identifiers</a>.</li> <!--CSSREF-->
@@ -4639,7 +4640,7 @@
<li><p>Return <var title="">tokens</var>.</li>
- </ol><p class=note>For the special cases of splitting a string <a href=#split-a-string-on-spaces title="split a string on spaces">on spaces</a> and <a href=#split-a-string-on-spaces title="split a string on spaces">on commas</a>, this algorithm
+ </ol><p class=note>For the special cases of splitting a string <a href=#split-a-string-on-spaces title="split a string on spaces">on spaces</a> and <a href=#split-a-string-on-commas title="split a string on commas">on commas</a>, this algorithm
does not apply (those algorithms also perform <a href=#strip-leading-and-trailing-whitespace title="strip
leading and trailing whitespace">whitespace trimming</a>).</p>
@@ -23463,6 +23464,9 @@
<dd><a href=#global-attributes>Global attributes</a></dd>
<dd><code title=attr-img-alt><a href=#attr-img-alt>alt</a></code></dd>
<dd><code title=attr-img-src><a href=#attr-img-src>src</a></code></dd>
+
+ <dd><code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code></dd>
+
<dd><code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code></dd>
<dd><code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code></dd>
<dd><code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code></dd>
@@ -23476,6 +23480,9 @@
interface <dfn id=htmlimageelement>HTMLImageElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
attribute DOMString <a href=#dom-img-alt title=dom-img-alt>alt</a>;
attribute DOMString <a href=#dom-img-src title=dom-img-src>src</a>;
+
+ attribute DOMString <a href=#dom-img-srcset title=dom-img-srcset>srcset</a>;
+
attribute DOMString <a href=#dom-img-crossorigin title=dom-img-crossOrigin>crossOrigin</a>;
attribute DOMString <a href=#dom-img-usemap title=dom-img-useMap>useMap</a>;
attribute boolean <a href=#dom-img-ismap title=dom-img-isMap>isMap</a>;
@@ -23505,8 +23512,11 @@
-->
- <p>The image given by the <dfn id=attr-img-src title=attr-img-src><code>src</code></dfn> attribute is the
- embedded content; the value of the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute provides
+ <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<!--
--><!--FORK--><!--
@@ -23521,6 +23531,100 @@
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>
+
+ <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 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 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>
+
+ <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>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>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>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>
+
+ </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>; 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>
+
+
+
<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),
@@ -23575,22 +23679,54 @@
<p>A user agent that obtains images immediately must synchronously
<a href=#update-the-image-data>update the image data</a> of an <code><a href=#the-img-element>img</a></code> element
- whenever that element is either created with a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, or has its <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute set, changed, or removed,
- or has its <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. -->
+ 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> 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> attribute is changed
- or removed, and whenever the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute is set,
+ 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>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
+ intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</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>
@@ -23619,29 +23755,58 @@
<p>⌛ If another instance of this algorithm for this
<code><a href=#the-img-element>img</a></code> element was started after this instance, then
- abort these steps. Only the last instance takes effect, to avoid
- multiple requests when the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
- attribute is set multiple times in a row, or when the <code title=attr-img-src><a href=#attr-img-src>src</a></code> and <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attributes are
- both set in succession.</p>
+ 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>
+
</li>
<li>
- <p>⌛ If the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>
- attribute is missing or its value is the empty string, then set
- the element to the <a href=#img-error title=img-error>broken</a> state,
- <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a>
- named <code title=event-error>error</code> at the
+ <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.
+
+
+
+ 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>⌛ 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>
<li>
- <p>⌛ <a href=#resolve-a-url title="resolve a url">Resolve</a> the value
- of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute,
- relative to the element.</p>
+ <p>⌛ <a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative to the element.</p>
<p>If that is not successful, abort these steps.</p>
@@ -23762,10 +23927,322 @@
<p>This specification does not specify which image types are to be
supported.</p>
- <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
+ <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>
+
+ <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><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>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>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>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><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 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
+ <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>
+
+ <li><p>Let <var title="">error</var> be <i>no</i>.</li>
+
+ <li><p>Let <var title="">width</var> be <i>absent</i>.</li>
+
+ <li><p>Let <var title="">height</var> be <i>absent</i>.</li>
+
+ <li><p>Let <var title="">density</var> be <i>absent</i>.</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 <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>
+
+ <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>
+
+
+ <dt>If the token consists of a <a href=#valid-non-negative-integer>valid non-negative integer</a> 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>.</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="">height</var>
+ be the result.</li>
+
+ </ol></dd>
+
+
+ <dt>If the token consists of a <a href=#valid-floating-point-number>valid floating point number</a> 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>.</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="">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="">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>
+
+ <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
+ 1.0.</li>
+
+ </ol></li>
+
+ <li><p>If <var title="">candidates</var> is empty, return null and
+ undefined 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>Optionally, return the <a href=#url>URL</a> 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></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.</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.</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 less than the greatest such
+ width.</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.</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>
+
+ </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>
+
+ <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>⌛ 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>⌛ <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>⌛ 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>Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a> of the
+ resulting <a href=#absolute-url>absolute URL</a>, with the <i>mode</i> being
+ <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>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>
+
+ <li>
+
+ <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>
+
+ <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><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>
+
+
<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
@@ -23919,9 +24396,12 @@
<div class=impl>
- <p>The <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn> and <dfn id=dom-img-src title=dom-img-src><code>src</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
@@ -56830,9 +57310,9 @@
<pre class=idl>interface <dfn id=htmldialogelement>HTMLDialogElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
attribute boolean <a href=#dom-dialog-open title=dom-dialog-open>open</a>;
attribute DOMString <a href=#dom-dialog-returnvalue title=dom-dialog-returnValue>returnValue</a>;
- void show(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
- void showModal(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
- void close(optional DOMString returnValue);
+ void <a href=#dom-dialog-show title=dom-dialog-show>show</a>(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
+ void <a href=#dom-dialog-showmodal title=dom-dialog-showModal>showModal</a>(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
+ void <a href=#dom-dialog-close title=dom-dialog-close>close</a>(optional DOMString returnValue);
};</pre>
</dd>
</dl><!--TOPIC:HTML--><p>The <code><a href=#the-dialog-element>dialog</a></code> element represents a part of an
Modified: source
===================================================================
--- source 2012-05-08 21:26:59 UTC (rev 7101)
+++ source 2012-05-15 07:39:54 UTC (rev 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-->
More information about the Commit-Watchers
mailing list