[html5] r8680 - [] (0) integrate upstream <picture> updates
whatwg at whatwg.org
whatwg at whatwg.org
Tue Jun 17 10:41:52 PDT 2014
Author: ianh
Date: 2014-06-17 10:41:49 -0700 (Tue, 17 Jun 2014)
New Revision: 8680
Modified:
complete.html
index
Log:
[] (0) integrate upstream <picture> updates
Modified: complete.html
===================================================================
--- complete.html 2014-06-13 22:00:22 UTC (rev 8679)
+++ complete.html 2014-06-17 17:41:49 UTC (rev 8680)
@@ -290,7 +290,7 @@
</script><body onload=init()>
<header class="head with-buttons" id=head><p><a href=//www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 13 June 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 17 June 2014</h2>
</hgroup><div>
<div>
<a href=//whatwg.org/html><span><strong>Multipage Version</strong> <code>whatwg.org/html</code></span></a>
@@ -574,81 +574,85 @@
<li><a href=#edits-and-tables><span class=secno>4.6.6 </span>Edits and tables</a></ol></li>
<li><a href=#embedded-content><span class=secno>4.7 </span>Embedded content</a>
<ol>
- <li><a href=#the-img-element><span class=secno>4.7.1 </span>The <code>img</code> element</a>
+ <li><a href=#introduction-0><span class=secno>4.7.1 </span>Introduction</a></li>
+ <li><a href=#dependencies-0><span class=secno>4.7.2 </span>Dependencies</a></li>
+ <li><a href=#the-picture-element><span class=secno>4.7.3 </span>The <code>picture</code> element</a></li>
+ <li><a href=#the-source-element-when-used-with-the-picture-element><span class=secno>4.7.4 </span>The <code>source</code> element when used with the <code>picture</code> element</a></li>
+ <li><a href=#the-img-element><span class=secno>4.7.5 </span>The <code>img</code> element</a>
<ol>
- <li><a href=#alt><span class=secno>4.7.1.1 </span>Requirements for providing text to act as an alternative for images</a>
+ <li><a href=#alt><span class=secno>4.7.5.1 </span>Requirements for providing text to act as an alternative for images</a>
<ol>
- <li><a href=#general-guidelines><span class=secno>4.7.1.1.1 </span>General guidelines</a></li>
- <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.7.1.1.2 </span>A link or button containing nothing but the image</a></li>
- <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.7.1.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
- <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.7.1.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
- <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.7.1.1.5 </span>Text that has been rendered to a graphic for typographical effect</a></li>
- <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.7.1.1.6 </span>A graphical representation of some of the surrounding text</a></li>
- <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.7.1.1.7 </span>A purely decorative image that doesn't add any information</a></li>
- <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.7.1.1.8 </span>A group of images that form a single larger picture with no links</a></li>
- <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.7.1.1.9 </span>A group of images that form a single larger picture with links</a></li>
- <li><a href=#a-key-part-of-the-content><span class=secno>4.7.1.1.10 </span>A key part of the content</a></li>
- <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.7.1.1.11 </span>An image not intended for the user</a></li>
- <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.7.1.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
- <li><a href=#guidance-for-markup-generators><span class=secno>4.7.1.1.13 </span>Guidance for markup generators</a></li>
- <li><a href=#guidance-for-conformance-checkers><span class=secno>4.7.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
- <li><a href=#the-iframe-element><span class=secno>4.7.2 </span>The <code>iframe</code> element</a></li>
- <li><a href=#the-embed-element><span class=secno>4.7.3 </span>The <code>embed</code> element</a></li>
- <li><a href=#the-object-element><span class=secno>4.7.4 </span>The <code>object</code> element</a></li>
- <li><a href=#the-param-element><span class=secno>4.7.5 </span>The <code>param</code> element</a></li>
- <li><a href=#the-video-element><span class=secno>4.7.6 </span>The <code>video</code> element</a></li>
- <li><a href=#the-audio-element><span class=secno>4.7.7 </span>The <code>audio</code> element</a></li>
- <li><a href=#the-source-element><span class=secno>4.7.8 </span>The <code>source</code> element</a></li>
- <li><a href=#the-track-element><span class=secno>4.7.9 </span>The <code>track</code> element</a></li>
- <li><a href=#media-elements><span class=secno>4.7.10 </span>Media elements</a>
+ <li><a href=#general-guidelines><span class=secno>4.7.5.1.1 </span>General guidelines</a></li>
+ <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.7.5.1.2 </span>A link or button containing nothing but the image</a></li>
+ <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.7.5.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
+ <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.7.5.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
+ <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.7.5.1.5 </span>Text that has been rendered to a graphic for typographical effect</a></li>
+ <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.7.5.1.6 </span>A graphical representation of some of the surrounding text</a></li>
+ <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.7.5.1.7 </span>A purely decorative image that doesn't add any information</a></li>
+ <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.7.5.1.8 </span>A group of images that form a single larger picture with no links</a></li>
+ <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.7.5.1.9 </span>A group of images that form a single larger picture with links</a></li>
+ <li><a href=#a-key-part-of-the-content><span class=secno>4.7.5.1.10 </span>A key part of the content</a></li>
+ <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.7.5.1.11 </span>An image not intended for the user</a></li>
+ <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.7.5.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
+ <li><a href=#guidance-for-markup-generators><span class=secno>4.7.5.1.13 </span>Guidance for markup generators</a></li>
+ <li><a href=#guidance-for-conformance-checkers><span class=secno>4.7.5.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
+ <li><a href=#the-iframe-element><span class=secno>4.7.6 </span>The <code>iframe</code> element</a></li>
+ <li><a href=#the-embed-element><span class=secno>4.7.7 </span>The <code>embed</code> element</a></li>
+ <li><a href=#the-object-element><span class=secno>4.7.8 </span>The <code>object</code> element</a></li>
+ <li><a href=#the-param-element><span class=secno>4.7.9 </span>The <code>param</code> element</a></li>
+ <li><a href=#the-video-element><span class=secno>4.7.10 </span>The <code>video</code> element</a></li>
+ <li><a href=#the-audio-element><span class=secno>4.7.11 </span>The <code>audio</code> element</a></li>
+ <li><a href=#the-source-element><span class=secno>4.7.12 </span>The <code>source</code> element</a></li>
+ <li><a href=#the-track-element><span class=secno>4.7.13 </span>The <code>track</code> element</a></li>
+ <li><a href=#media-elements><span class=secno>4.7.14 </span>Media elements</a>
<ol>
- <li><a href=#error-codes><span class=secno>4.7.10.1 </span>Error codes</a></li>
- <li><a href=#location-of-the-media-resource><span class=secno>4.7.10.2 </span>Location of the media resource</a></li>
- <li><a href=#mime-types><span class=secno>4.7.10.3 </span>MIME types</a></li>
- <li><a href=#network-states><span class=secno>4.7.10.4 </span>Network states</a></li>
- <li><a href=#loading-the-media-resource><span class=secno>4.7.10.5 </span>Loading the media resource</a></li>
- <li><a href=#offsets-into-the-media-resource><span class=secno>4.7.10.6 </span>Offsets into the media resource</a></li>
- <li><a href=#ready-states><span class=secno>4.7.10.7 </span>Ready states</a></li>
- <li><a href=#playing-the-media-resource><span class=secno>4.7.10.8 </span>Playing the media resource</a></li>
- <li><a href=#seeking><span class=secno>4.7.10.9 </span>Seeking</a></li>
- <li><a href=#media-resources-with-multiple-media-tracks><span class=secno>4.7.10.10 </span>Media resources with multiple media tracks</a>
+ <li><a href=#error-codes><span class=secno>4.7.14.1 </span>Error codes</a></li>
+ <li><a href=#location-of-the-media-resource><span class=secno>4.7.14.2 </span>Location of the media resource</a></li>
+ <li><a href=#mime-types><span class=secno>4.7.14.3 </span>MIME types</a></li>
+ <li><a href=#network-states><span class=secno>4.7.14.4 </span>Network states</a></li>
+ <li><a href=#loading-the-media-resource><span class=secno>4.7.14.5 </span>Loading the media resource</a></li>
+ <li><a href=#offsets-into-the-media-resource><span class=secno>4.7.14.6 </span>Offsets into the media resource</a></li>
+ <li><a href=#ready-states><span class=secno>4.7.14.7 </span>Ready states</a></li>
+ <li><a href=#playing-the-media-resource><span class=secno>4.7.14.8 </span>Playing the media resource</a></li>
+ <li><a href=#seeking><span class=secno>4.7.14.9 </span>Seeking</a></li>
+ <li><a href=#media-resources-with-multiple-media-tracks><span class=secno>4.7.14.10 </span>Media resources with multiple media tracks</a>
<ol>
- <li><a href=#audiotracklist-and-videotracklist-objects><span class=secno>4.7.10.10.1 </span><code>AudioTrackList</code> and <code>VideoTrackList</code> objects</a></li>
- <li><a href=#selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.7.10.10.2 </span>Selecting specific audio and video tracks declaratively</a></ol></li>
- <li><a href=#synchronising-multiple-media-elements><span class=secno>4.7.10.11 </span>Synchronising multiple media elements</a>
+ <li><a href=#audiotracklist-and-videotracklist-objects><span class=secno>4.7.14.10.1 </span><code>AudioTrackList</code> and <code>VideoTrackList</code> objects</a></li>
+ <li><a href=#selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.7.14.10.2 </span>Selecting specific audio and video tracks declaratively</a></ol></li>
+ <li><a href=#synchronising-multiple-media-elements><span class=secno>4.7.14.11 </span>Synchronising multiple media elements</a>
<ol>
- <li><a href=#introduction-0><span class=secno>4.7.10.11.1 </span>Introduction</a></li>
- <li><a href=#media-controllers><span class=secno>4.7.10.11.2 </span>Media controllers</a></li>
- <li><a href=#assigning-a-media-controller-declaratively><span class=secno>4.7.10.11.3 </span>Assigning a media controller declaratively</a></ol></li>
- <li><a href=#timed-text-tracks><span class=secno>4.7.10.12 </span>Timed text tracks</a>
+ <li><a href=#introduction-1><span class=secno>4.7.14.11.1 </span>Introduction</a></li>
+ <li><a href=#media-controllers><span class=secno>4.7.14.11.2 </span>Media controllers</a></li>
+ <li><a href=#assigning-a-media-controller-declaratively><span class=secno>4.7.14.11.3 </span>Assigning a media controller declaratively</a></ol></li>
+ <li><a href=#timed-text-tracks><span class=secno>4.7.14.12 </span>Timed text tracks</a>
<ol>
- <li><a href=#text-track-model><span class=secno>4.7.10.12.1 </span>Text track model</a></li>
- <li><a href=#sourcing-in-band-text-tracks><span class=secno>4.7.10.12.2 </span>Sourcing in-band text tracks</a></li>
- <li><a href=#sourcing-out-of-band-text-tracks><span class=secno>4.7.10.12.3 </span>Sourcing out-of-band text tracks</a></li>
- <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.7.10.12.4 </span>Guidelines for exposing cues in various formats as text track cues</a></li>
- <li><a href=#text-track-api><span class=secno>4.7.10.12.5 </span>Text track API</a></li>
- <li><a href=#text-tracks-describing-chapters><span class=secno>4.7.10.12.6 </span>Text tracks describing chapters</a></li>
- <li><a href=#cue-events><span class=secno>4.7.10.12.7 </span>Event handlers for objects of the text track APIs</a></li>
- <li><a href=#best-practices-for-metadata-text-tracks><span class=secno>4.7.10.12.8 </span>Best practices for metadata text tracks</a></ol></li>
- <li><a href=#user-interface><span class=secno>4.7.10.13 </span>User interface</a></li>
- <li><a href=#time-ranges><span class=secno>4.7.10.14 </span>Time ranges</a></li>
- <li><a href=#the-trackevent-interface><span class=secno>4.7.10.15 </span>The <code>TrackEvent</code> interface</a></li>
- <li><a href=#mediaevents><span class=secno>4.7.10.16 </span>Event summary</a></li>
- <li><a href=#security-and-privacy-considerations><span class=secno>4.7.10.17 </span>Security and privacy considerations</a></li>
- <li><a href=#best-practices-for-authors-using-media-elements><span class=secno>4.7.10.18 </span>Best practices for authors using media elements</a></li>
- <li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.7.10.19 </span>Best practices for implementors of media elements</a></ol></li>
- <li><a href=#the-map-element><span class=secno>4.7.11 </span>The <code>map</code> element</a></li>
- <li><a href=#the-area-element><span class=secno>4.7.12 </span>The <code>area</code> element</a></li>
- <li><a href=#image-maps><span class=secno>4.7.13 </span>Image maps</a>
+ <li><a href=#text-track-model><span class=secno>4.7.14.12.1 </span>Text track model</a></li>
+ <li><a href=#sourcing-in-band-text-tracks><span class=secno>4.7.14.12.2 </span>Sourcing in-band text tracks</a></li>
+ <li><a href=#sourcing-out-of-band-text-tracks><span class=secno>4.7.14.12.3 </span>Sourcing out-of-band text tracks</a></li>
+ <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.7.14.12.4 </span>Guidelines for exposing cues in various formats as text track cues</a></li>
+ <li><a href=#text-track-api><span class=secno>4.7.14.12.5 </span>Text track API</a></li>
+ <li><a href=#text-tracks-describing-chapters><span class=secno>4.7.14.12.6 </span>Text tracks describing chapters</a></li>
+ <li><a href=#cue-events><span class=secno>4.7.14.12.7 </span>Event handlers for objects of the text track APIs</a></li>
+ <li><a href=#best-practices-for-metadata-text-tracks><span class=secno>4.7.14.12.8 </span>Best practices for metadata text tracks</a></ol></li>
+ <li><a href=#user-interface><span class=secno>4.7.14.13 </span>User interface</a></li>
+ <li><a href=#time-ranges><span class=secno>4.7.14.14 </span>Time ranges</a></li>
+ <li><a href=#the-trackevent-interface><span class=secno>4.7.14.15 </span>The <code>TrackEvent</code> interface</a></li>
+ <li><a href=#mediaevents><span class=secno>4.7.14.16 </span>Event summary</a></li>
+ <li><a href=#security-and-privacy-considerations><span class=secno>4.7.14.17 </span>Security and privacy considerations</a></li>
+ <li><a href=#best-practices-for-authors-using-media-elements><span class=secno>4.7.14.18 </span>Best practices for authors using media elements</a></li>
+ <li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.7.14.19 </span>Best practices for implementors of media elements</a></ol></li>
+ <li><a href=#the-map-element><span class=secno>4.7.15 </span>The <code>map</code> element</a></li>
+ <li><a href=#the-area-element><span class=secno>4.7.16 </span>The <code>area</code> element</a></li>
+ <li><a href=#image-maps><span class=secno>4.7.17 </span>Image maps</a>
<ol>
- <li><a href=#authoring><span class=secno>4.7.13.1 </span>Authoring</a></li>
- <li><a href=#processing-model-0><span class=secno>4.7.13.2 </span>Processing model</a></ol></li>
- <li><a href=#mathml><span class=secno>4.7.14 </span>MathML</a></li>
- <li><a href=#svg-0><span class=secno>4.7.15 </span>SVG</a></li>
- <li><a href=#dimension-attributes><span class=secno>4.7.16 </span>Dimension attributes</a></ol></li>
+ <li><a href=#authoring><span class=secno>4.7.17.1 </span>Authoring</a></li>
+ <li><a href=#processing-model-0><span class=secno>4.7.17.2 </span>Processing model</a></ol></li>
+ <li><a href=#mathml><span class=secno>4.7.18 </span>MathML</a></li>
+ <li><a href=#svg-0><span class=secno>4.7.19 </span>SVG</a></li>
+ <li><a href=#dimension-attributes><span class=secno>4.7.20 </span>Dimension attributes</a></ol></li>
<li><a href=#links><span class=secno>4.8 </span>Links</a>
<ol>
- <li><a href=#introduction-1><span class=secno>4.8.1 </span>Introduction</a></li>
+ <li><a href=#introduction-2><span class=secno>4.8.1 </span>Introduction</a></li>
<li><a href=#links-created-by-a-and-area-elements><span class=secno>4.8.2 </span>Links created by <code>a</code> and <code>area</code> elements</a></li>
<li><a href=#following-hyperlinks-0><span class=secno>4.8.3 </span>Following hyperlinks</a></li>
<li><a href=#downloading-resources><span class=secno>4.8.4 </span>Downloading resources</a>
@@ -700,7 +704,7 @@
<li><a href=#table-examples><span class=secno>4.9.14 </span>Examples</a></ol></li>
<li><a href=#forms><span class=secno>4.10 </span>Forms</a>
<ol>
- <li><a href=#introduction-2><span class=secno>4.10.1 </span>Introduction</a>
+ <li><a href=#introduction-3><span class=secno>4.10.1 </span>Introduction</a>
<ol>
<li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
<li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
@@ -797,7 +801,7 @@
<li><a href=#security-forms><span class=secno>4.10.21.4 </span>Security</a></ol></li>
<li><a href=#form-submission><span class=secno>4.10.22 </span>Form submission</a>
<ol>
- <li><a href=#introduction-3><span class=secno>4.10.22.1 </span>Introduction</a></li>
+ <li><a href=#introduction-4><span class=secno>4.10.22.1 </span>Introduction</a></li>
<li><a href=#implicit-submission><span class=secno>4.10.22.2 </span>Implicit submission</a></li>
<li><a href=#form-submission-algorithm><span class=secno>4.10.22.3 </span>Form submission algorithm</a></li>
<li><a href=#constructing-form-data-set><span class=secno>4.10.22.4 </span>Constructing the form data set</a></li>
@@ -893,7 +897,7 @@
<li><a href=#pseudo-classes><span class=secno>4.15.2 </span>Pseudo-classes</a></ol></ol></li>
<li><a href=#microdata><span class=secno>5 </span>Microdata</a>
<ol>
- <li><a href=#introduction-4><span class=secno>5.1 </span>Introduction</a>
+ <li><a href=#introduction-5><span class=secno>5.1 </span>Introduction</a>
<ol>
<li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
<li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
@@ -933,7 +937,7 @@
<li><a href=#activation><span class=secno>6.3 </span>Activation</a></li>
<li><a href=#focus><span class=secno>6.4 </span>Focus</a>
<ol>
- <li><a href=#introduction-5><span class=secno>6.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-6><span class=secno>6.4.1 </span>Introduction</a></li>
<li><a href=#data-model><span class=secno>6.4.2 </span>Data model</a></li>
<li><a href=#the-tabindex-attribute><span class=secno>6.4.3 </span>The <code title=attr-tabindex>tabindex</code> attribute</a></li>
<li><a href=#processing-model-4><span class=secno>6.4.4 </span>Processing model</a></li>
@@ -941,7 +945,7 @@
<li><a href=#focus-management-apis><span class=secno>6.4.6 </span>Focus management APIs</a></ol></li>
<li><a href=#assigning-keyboard-shortcuts><span class=secno>6.5 </span>Assigning keyboard shortcuts</a>
<ol>
- <li><a href=#introduction-6><span class=secno>6.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-7><span class=secno>6.5.1 </span>Introduction</a></li>
<li><a href=#the-accesskey-attribute><span class=secno>6.5.2 </span>The <code>accesskey</code> attribute</a></li>
<li><a href=#processing-model-5><span class=secno>6.5.3 </span>Processing model</a></ol></li>
<li><a href=#editing-0><span class=secno>6.6 </span>Editing</a>
@@ -953,7 +957,7 @@
<li><a href=#spelling-and-grammar-checking><span class=secno>6.6.5 </span>Spelling and grammar checking</a></ol></li>
<li><a href=#dnd><span class=secno>6.7 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-7><span class=secno>6.7.1 </span>Introduction</a></li>
+ <li><a href=#introduction-8><span class=secno>6.7.1 </span>Introduction</a></li>
<li><a href=#the-drag-data-store><span class=secno>6.7.2 </span>The drag data store</a></li>
<li><a href=#the-datatransfer-interface><span class=secno>6.7.3 </span>The <code>DataTransfer</code> interface</a>
<ol>
@@ -1024,7 +1028,7 @@
<li><a href=#aborting-a-document-load><span class=secno>7.6.12 </span>Aborting a document load</a></ol></li>
<li><a href=#offline><span class=secno>7.7 </span>Offline Web applications</a>
<ol>
- <li><a href=#introduction-8><span class=secno>7.7.1 </span>Introduction</a>
+ <li><a href=#introduction-9><span class=secno>7.7.1 </span>Introduction</a>
<ol>
<li><a href=#supporting-offline-caching-for-legacy-applications><span class=secno>7.7.1.1 </span>Supporting offline caching for legacy applications</a></li>
<li><a href=#appcacheevents><span class=secno>7.7.1.2 </span>Event summary</a></ol></li>
@@ -1045,7 +1049,7 @@
<ol>
<li><a href=#scripting><span class=secno>8.1 </span>Scripting</a>
<ol>
- <li><a href=#introduction-9><span class=secno>8.1.1 </span>Introduction</a></li>
+ <li><a href=#introduction-10><span class=secno>8.1.1 </span>Introduction</a></li>
<li><a href=#enabling-and-disabling-scripting><span class=secno>8.1.2 </span>Enabling and disabling scripting</a></li>
<li><a href=#processing-model-6><span class=secno>8.1.3 </span>Processing model</a>
<ol>
@@ -1127,7 +1131,7 @@
<li><a href=#garbage-collection-1><span class=secno>9.3.7 </span>Garbage collection</a></ol></li>
<li><a href=#web-messaging><span class=secno>9.4 </span>Cross-document messaging</a>
<ol>
- <li><a href=#introduction-10><span class=secno>9.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-11><span class=secno>9.4.1 </span>Introduction</a></li>
<li><a href=#security-postmsg><span class=secno>9.4.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>9.4.2.1 </span>Authors</a></li>
@@ -1135,7 +1139,7 @@
<li><a href=#posting-messages><span class=secno>9.4.3 </span>Posting messages</a></ol></li>
<li><a href=#channel-messaging><span class=secno>9.5 </span>Channel messaging</a>
<ol>
- <li><a href=#introduction-11><span class=secno>9.5.1 </span>Introduction</a>
+ <li><a href=#introduction-12><span class=secno>9.5.1 </span>Introduction</a>
<ol>
<li><a href=#examples-3><span class=secno>9.5.1.1 </span>Examples</a></li>
<li><a href=#ports-as-the-basis-of-an-object-capability-model-on-the-web><span class=secno>9.5.1.2 </span>Ports as the basis of an object-capability model on the Web</a></li>
@@ -1147,7 +1151,7 @@
<li><a href=#broadcasting-to-other-browsing-contexts><span class=secno>9.6 </span>Broadcasting to other browsing contexts</a></ol></li>
<li><a href=#workers><span class=secno>10 </span>Web workers</a>
<ol>
- <li><a href=#introduction-12><span class=secno>10.1 </span>Introduction</a>
+ <li><a href=#introduction-13><span class=secno>10.1 </span>Introduction</a>
<ol>
<li><a href=#scope-0><span class=secno>10.1.1 </span>Scope</a></li>
<li><a href=#examples-4><span class=secno>10.1.2 </span>Examples</a>
@@ -1186,7 +1190,7 @@
<li><a href=#worker-locations><span class=secno>10.3.3 </span>Worker locations</a></ol></ol></li>
<li><a href=#webstorage><span class=secno>11 </span>Web storage</a>
<ol>
- <li><a href=#introduction-13><span class=secno>11.1 </span>Introduction</a></li>
+ <li><a href=#introduction-14><span class=secno>11.1 </span>Introduction</a></li>
<li><a href=#storage><span class=secno>11.2 </span>The API</a>
<ol>
<li><a href=#the-storage-interface><span class=secno>11.2.1 </span>The <code>Storage</code> interface</a></li>
@@ -1365,7 +1369,7 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>13.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>14 </span>Rendering</a>
<ol>
- <li><a href=#introduction-14><span class=secno>14.1 </span>Introduction</a></li>
+ <li><a href=#introduction-15><span class=secno>14.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>14.2 </span>The CSS user agent style sheet and presentational hints</a></li>
<li><a href=#non-replaced-elements><span class=secno>14.3 </span>Non-replaced elements</a>
<ol>
@@ -1390,7 +1394,7 @@
<li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></ol></li>
<li><a href=#bindings><span class=secno>14.5 </span>Bindings</a>
<ol>
- <li><a href=#introduction-15><span class=secno>14.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-16><span class=secno>14.5.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>14.5.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>14.5.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.5.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -20815,19 +20819,145 @@
<!-- START OF PICTURE SECTION -->
- <p class=XXX>The <a href=http://picture.responsiveimages.org/>picture element specification</a>
- will be folded in to this specification, replacing some of the requirements in this section.</p>
+ <h4 id=introduction-0><span class=secno>4.7.1 </span>Introduction</h4>
- <!-- <h4>The <dfn><code>picture</code></dfn> * element</h4> -->
+ <p class=XXX>See the <a href=http://picture.responsiveimages.org/#intro>picture element specification</a>'s introduction for now.</p>
- <!-- <h4>The <dfn><code>imgcandidate</code></dfn> * element</h4> --> <!--(or whatever it gets called)-->
- <h4 id=the-img-element><span class=secno>4.7.1 </span>The <dfn><code>img</code></dfn> element</h4>
+ <h4 id=dependencies-0><span class=secno>4.7.2 </span>Dependencies</h4>
+ <dl><dt>Media Queries <a href=#refsMQ>[MQ]</a></dt>
+
+ <dd><dfn id=media-condition><media-condition></dfn></dd>
+
+ <dt>CSS Values and Units <a href=#refsCSSVALUES>[CSSVALUES]</a></dt>
+
+ <dd><dfn id=length><length></dfn></dd>
+
+ <dt>CSS Syntax <a href=#refsCSSSYNTAX>[CSSSYNTAX]</a></dt>
+
+ <dd><dfn id=parse-a-comma-separated-list-of-component-values>Parse a comma-separated list of component values</dfn></dd>
+ <dd><dfn id=component-value>component value</dfn></dd>
+ <dd><dfn id=whitespace-token><whitespace-token></dfn></dd>
+
+ </dl><h4 id=the-picture-element><span class=secno>4.7.3 </span>The <dfn><code>picture</code></dfn> element</h4>
+
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dd><a href=#embedded-content-category>Embedded content</a>.</dd>
+ <dd><a href=#palpable-content>Palpable content</a>.</dd>
+ <dt><a href=#concept-element-contexts title=concept-element-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>Where <a href=#embedded-content-category>embedded content</a> is expected.</dd>
+ <dt><a href=#concept-element-content-model title=concept-element-content-model>Content model</a>:</dt>
+ <dd>Zero or more <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements, followed by one <code><a href=#the-img-element>img</a></code> element, optionally intermixed with <a href=#script-supporting-elements>script-supporting elements</a>.</dd>
+ <dt><a href=#concept-element-tag-omission title=concept-element-tag-omission>Tag omission in text/html</a>:</dt>
+ <dd>Neither tag is omissible.</dd>
+ <dt><a href=#concept-element-attributes title=concept-element-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt><a href=#concept-element-dom title=concept-element-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>
+<pre class=idl>interface <dfn id=htmlpictureelement>HTMLPictureElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
+ </dd>
+ </dl><p>The <code><a href=#the-picture-element>picture</a></code> element is a container
+ which provides multiples sources to its contained <code><a href=#the-img-element>img</a></code> element
+ to allow authors to declaratively control or give hints to the user agent about which image resource to use,
+ based on the screen pixel density, viewport size, image format, and other factors. It <a href=#represents>represents</a> its children.</p>
+
+ <p class=note>The <code><a href=#the-picture-element>picture</a></code> element is somewhat different
+ from the similar-looking <code><a href=#the-video-element>video</a></code> and <code><a href=#the-audio-element>audio</a></code> elements.
+ While all of them contain <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements,
+ the <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element's <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute has no meaning
+ when the element is nested within a <code><a href=#the-picture-element>picture</a></code> element,
+ and the resource selection algorithm is different.
+ As well, the <code><a href=#the-picture-element>picture</a></code> element itself does not display anything;
+ it merely provides a context for its contained <code><a href=#the-img-element>img</a></code> element
+ that enables it to choose from multiple <a href=#url title=URL>URLs</a>.</p>
+
+
+ <h4 id=the-source-element-when-used-with-the-picture-element><span class=secno>4.7.4 </span>The <dfn title=picture-source><code>source</code></dfn> element when used with the <code><a href=#the-picture-element>picture</a></code> element</h4>
+
+ <dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
+ <dd>Same as for the <code><a href=#the-source-element>source</a></code> element.</dd>
+ <dt><a href=#concept-element-contexts title=concept-element-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>As a child of a <code><a href=#the-picture-element>picture</a></code> element, before the <code><a href=#the-img-element>img</a></code> element.</dd>
+ <dt><a href=#concept-element-content-model title=concept-element-content-model>Content model</a>:</dt>
+ <dd>Same as for the <code><a href=#the-source-element>source</a></code> element.</dd>
+ <dt><a href=#concept-element-attributes title=concept-element-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code></dd>
+ <dd><code title=attr-picture-source-sizes><a href=#attr-picture-source-sizes>sizes</a></code></dd>
+ <dd><code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code></dd>
+ <dd><code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code></dd>
+ <dt><a href=#concept-element-dom title=concept-element-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>
+<pre class=idl>partial interface <a href=#htmlsourceelement>HTMLSourceElement</a> {
+ attribute DOMString <a href=#dom-picture-source-srcset title=dom-picture-source-srcset>srcset</a>;
+ attribute DOMString <a href=#dom-picture-source-sizes title=dom-picture-source-sizes>sizes</a>;
+ attribute DOMString <a href=#dom-picture-source-media title=dom-picture-source-media>media</a>;
+};</pre>
+ </dd>
+ </dl><p>The authoring requirements in this section only apply if the <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element has
+ a parent that is a <code><a href=#the-picture-element>picture</a></code> element.</p>
+
+ <p>The <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element allows authors to specify multiple alternative
+ <a href=#source-set title="source set">source sets</a> for <code><a href=#the-img-element>img</a></code> elements.
+ It does not <a href=#represents title=represents>represent</a> anything on its own.</p>
+
+ <p>The <dfn id=attr-picture-source-srcset title=attr-picture-source-srcset><code>srcset</code></dfn> attribute must be present,
+ and 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 (,).
+ If an <a href=#image-candidate-string>image candidate string</a> contains no descriptors
+ and no <a href=#space-character title="space character">space characters</a> after the URL,
+ the following <a href=#image-candidate-string>image candidate string</a>, if there is one,
+ must begin with one or more <a href=#space-character title="space character">space characters</a>.</p>
+
+ <p>The <dfn id=attr-picture-source-sizes title=attr-picture-source-sizes><code>sizes</code></dfn> attribute may also be present.
+ If present, the value must be a <a href=#valid-source-size-list>valid source size list</a>.</p>
+
+ <p>The <dfn id=attr-picture-source-media title=attr-picture-source-media><code>media</code></dfn> attributes may also be present.
+ If present, the value must contain a <a href=#valid-media-query>valid media query</a>.</p>
+
+ <p>The <dfn id=attr-picture-source-type title=attr-picture-source-type><code>type</code></dfn> attribute may also be present.
+ If present, the value must be a <a href=#valid-mime-type>valid MIME type</a>.
+ It gives the type of the images in the <a href=#source-set>source set</a>,
+ to allow the user agent to skip to the next <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element
+ if it does not support the given type.</p>
+
+ <p class=note>If the <code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attribute
+ is <em>not</em> specified, the user agent will not select a different
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element if it finds that it does not support
+ the image format after fetching it.</p>
+
+ <p>When a <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element has a following sibling
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element or <code><a href=#the-img-element>img</a></code> element with a
+ <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, it must have
+ at least one of the following:</p>
+
+ <ul><li><p>A <code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute specified with a value that,
+ after <a href=#strip-leading-and-trailing-whitespace title="strip leading and trailing whitespace">stripping leading and trailing whitespace</a>,
+ is not the empty string and is not an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string <code>all</code>.</li>
+
+ <li><p>A <code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attribute specified.</li>
+
+ </ul><p>The <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute must not be present.</p>
+
+ <div class=impl>
+
+ <p>The IDL attributes <dfn id=dom-picture-source-srcset title=dom-picture-source-srcset><code>srcset</code></dfn>,
+ <dfn id=dom-picture-source-sizes title=dom-picture-source-sizes><code>sizes</code></dfn> and
+ <dfn id=dom-picture-source-media title=dom-picture-source-media><code>media</code></dfn> must reflect the
+ respective content attributes of the same name.</p>
+
+ </div>
+
+
+ <h4 id=the-img-element><span class=secno>4.7.5 </span>The <dfn><code>img</code></dfn> element</h4>
+
+ <dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dd><a href=#embedded-content-category>Embedded content</a>.</dd>
<dd><a href=#form-associated-element>Form-associated element</a>.</dd>
<dd>If the element has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd>
<dd><a href=#palpable-content>Palpable content</a>.</dd>
@@ -20842,6 +20972,7 @@
<dd><code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> — Replacement text for use when images are not available</dd>
<dd><code title=attr-img-src><a href=#attr-img-src>src</a></code> — Address of the resource</dd>
<dd><code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> — Images to use in different situations (e.g. high-resolution displays, small monitors, etc)</dd>
+ <dd><code title=attr-img-sizes><a href=#attr-img-sizes>sizes</a></code></dd>
<dd><code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> — How the element handles crossorigin requests</dd>
<dd><code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> — Name of <a href=#image-map>image map</a> to use</dd>
<dd><code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> — Whether the image is a server-side image map</dd>
@@ -20854,6 +20985,7 @@
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-sizes title=dom-img-sizes>sizes</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>;
@@ -20862,6 +20994,7 @@
readonly attribute unsigned long <a href=#dom-img-naturalwidth title=dom-img-naturalWidth>naturalWidth</a>;
readonly attribute unsigned long <a href=#dom-img-naturalheight title=dom-img-naturalHeight>naturalHeight</a>;
readonly attribute boolean <a href=#dom-img-complete title=dom-img-complete>complete</a>;
+ readonly attribute DOMString <a href=#dom-img-currentsrc title=dom-img-currentSrc>currentSrc</a>;
// <a href="#HTMLImageElement-partial">also has obsolete members</a>
};</pre>
@@ -20882,7 +21015,10 @@
-->
- <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
+ <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,
+ and any previous sibling <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements'
+ <code title=attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code> attributes if the parent is a <code><a href=#the-picture-element>picture</a></code> element,
+ is the embedded content; the value of
the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute provides equivalent content for
those who cannot process images or who have image loading disabled (i.e. it is the
<code><a href=#the-img-element>img</a></code> element's <a href=#fallback-content>fallback content</a>).</p>
@@ -20894,15 +21030,19 @@
<a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a> referencing a non-interactive,
optionally animated, image resource that is neither paged nor scripted.</p>
- <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute may also be present. If present, its
- value must consist of one or more <a href=#image-candidate-string title="image candidate string">image candidate
- strings</a>, each separated from the next by a U+002C COMMA character (,). This attribute
- allows authors to provide alternative images for environments with smaller screens or screens with
- higher pixel densities.</p>
+ <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute may also be present.
+ If present, its value must consist of one or more
+ <a href=#image-candidate-string title="image candidate string">image candidate strings</a>,
+ each separated from the next by a U+002C COMMA character (,).
+ If an <a href=#image-candidate-string>image candidate string</a> contains no descriptors
+ and no <a href=#space-character title="space character">space characters</a> after the URL,
+ the following <a href=#image-candidate-string>image candidate string</a>, if there is one,
+ must begin with one or more <a href=#space-character title="space character">space characters</a>.</p>
- <div class=note>
+ <!-- XXXX
+ <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
+ <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
@@ -20916,54 +21056,74 @@
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>
+ <ol><li><p>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><p>A <a href=#valid-non-empty-url>valid non-empty URL</a> that does not start or end with a U+002C COMMA character (,),
+ 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><p>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>
- <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
+ <p>Zero or one of the following:</p>
- <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>
+ <ul><li><p>A <i title="">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> giving a number greater than zero
+ representing the <i title="">width descriptor</i> value,
+ 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><p>A <i title="">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 title="">pixel density descriptor</i> value,
+ and a U+0078 LATIN SMALL LETTER X character.</li>
- <li>Optionally a <i>pixel density descriptor</i>, consisting of: a <a href=#space-character>space character</a>,
- a <a href=#valid-floating-point-number>valid floating-point number</a> giving a number greater than zero representing the
- <i>pixel density descriptor value</i>, and a U+0078 LATIN SMALL LETTER X character.</li>
+ </ul></li>
- <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
+ <li><p>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- </ol><p>Each <a href=#image-candidate-string>image candidate string</a> must have at least one of the three optional
- descriptors. There must not be two <a href=#image-candidate-string title="image candidate string">image candidate
- strings</a> in a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute whose <i>width
- descriptor value</i>, <i>height descriptor value</i>, and <i>pixel density descriptor value</i>
- are each identical to their counterpart in the other <a href=#image-candidate-string>image candidate string</a>; for the
- purposes of this requirement, omitted <i>width descriptors</i> and <i>height descriptors</i> are
- considered to have the value "Infinity", and omitted <i>pixel density descriptors</i> are
- considered to have the value 1.</p>
+ </ol><p>There must not be an <a href=#image-candidate-string>image candidate string</a> for an element that
+ has the same <i title="">width descriptor</i> value as another
+ <a href=#image-candidate-string>image candidate string</a>'s <i title="">width descriptor</i> value for the same element.</p>
- <div class=example>
+ <p>There must not be an <a href=#image-candidate-string>image candidate string</a> for an element that
+ has the same <i title="">pixel density descriptor</i> value as another
+ <a href=#image-candidate-string>image candidate string</a>'s <i title="">pixel density descriptor</i> value for the same element.
+ For the purpose of this requirement,
+ an <a href=#image-candidate-string>image candidate string</a> with no descriptors is equivalent to
+ an <a href=#image-candidate-string>image candidate string</a> with a <code title="">1x</code> descriptor.</p>
+ <p>If the <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> or <code><a href=#the-img-element>img</a></code> element has a
+ <code title="">sizes</code> attribute present, all <a href=#image-candidate-string title="image candidate string">image candidate strings</a> for that
+ element must have the <i title="">width descriptor</i> specified.</p>
+
+ <p>If an <a href=#image-candidate-string>image candidate string</a> for an <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> or <code><a href=#the-img-element>img</a></code> element
+ has the <i title="">width descriptor</i> specified,
+ all other <a href=#image-candidate-string title="image candidate string">image candidate strings</a> for that element
+ must also have the <i title="">width descriptor</i> specified.</p>
+
+ <p>The specified width in an <a href=#image-candidate-string>image candidate string</a>'s <i title="">width descriptor</i>
+ must match the intrinsic width in the resource given by the <a href=#image-candidate-string>image candidate string</a>'s URL.</p>
+
+ <!--XXXX
+ <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"
+ <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>
+ srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"></h1></pre>
</div>
+ -->
<p class=note>The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs,
JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element),
@@ -20973,6 +21133,19 @@
documents, and so forth. <a href=#refsPNG>[PNG]</a> <a href=#refsGIF>[GIF]</a> <a href=#refsJPEG>[JPEG]</a> <a href=#refsPDF>[PDF]</a> <a href=#refsXML>[XML]</a> <a href=#refsAPNG>[APNG]</a> <!-- <a href="#refsAGIF">[AGIF]</a> --> <a href=#refsSVG>[SVG]</a>
<a href=#refsMNG>[MNG]</a> </p>
+ <p>If the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is present,
+ the <dfn id=attr-img-sizes title=attr-img-sizes><code>sizes</code></dfn> attribute may also be present.
+ If present, its value must be a <a href=#valid-source-size-list>valid source size list</a>.</p>
+
+ <p>A <dfn id=valid-source-size-list>valid source size list</dfn> is a string that matches the following grammar:
+ <a href=#refsCSSVALUES>[CSSVALUES]</a> <a href=#refsMQ>[MQ]</a></p>
+
+<pre><dfn id=source-size-list><source-size-list></dfn> = <a href=#source-size><source-size></a># [ , <a href=#source-size-value><source-size-value></a> ]? | <a href=#source-size-value><source-size-value></a>
+<dfn id=source-size><source-size></dfn> = <a href=#media-condition><media-condition></a> <a href=#source-size-value><source-size-value></a>
+<dfn id=source-size-value><source-size-value></dfn> = <a href=#length><length></a></pre>
+
+ <p>A <a href=#source-size-value><source-size-value></a> must not be negative.</p>
+
<p>The <code><a href=#the-img-element>img</a></code> element must not be used as a layout tool. In particular, <code><a href=#the-img-element>img</a></code>
elements should not be used to display transparent images, as such images rarely convey meaning and
rarely add anything useful to the document.</p>
@@ -20983,13 +21156,23 @@
<div class=impl>
- <hr><p>An <code><a href=#the-img-element>img</a></code> is always in one of the following states:</p>
+ <hr><p>An <code><a href=#the-img-element>img</a></code> element has a <dfn id=current-request>current request</dfn> and a <dfn id=pending-request>pending request</dfn>.
+ The <a href=#current-request>current request</a> is initially set to a new <a href=#image-request>image request</a>.
+ The <a href=#pending-request>pending request</a> is initially set to null.
+ The <a href=#current-request>current request</a> is usually referred to as the <code><a href=#the-img-element>img</a></code> element itself.</p>
+ <p>An <dfn id=image-request>image request</dfn> has a <dfn id=img-req-state title=img-req-state>state</dfn>, <dfn id=img-req-url title=img-req-url>current URL</dfn> and <dfn id=img-req-data title=img-req-data>image data</dfn>.</p>
+
+ <p>An <a href=#image-request>image request</a>'s <a href=#img-req-state title=img-req-state>state</a> is one of the following:</p>
+
<dl><dt><dfn id=img-none title=img-none>Unavailable</dfn></dt>
- <dd>The user agent hasn't obtained any image data.</dd>
+ <dd>The user agent hasn't obtained any image data,
+ or has obtained some or all of the image data but
+ hasn't yet decoded enough of the image to get the image dimensions.</dd>
<dt><dfn id=img-inc title=img-inc>Partially available</dfn></dt>
- <dd>The user agent has obtained some of the image data.</dd>
+ <dd>The user agent has obtained some of the image data and at least the image dimensions are
+ available.</dd>
<dt><dfn id=img-all title=img-all>Completely available</dfn></dt>
<dd>The user agent has obtained all of the image data and at least the image dimensions are
@@ -21000,11 +21183,15 @@
image enough to get the image dimensions (e.g. the image is corrupted, or the format is not
supported, or no data could be obtained).</dd>
- </dl><p>When an <code><a href=#the-img-element>img</a></code> element is either in the <a href=#img-inc title=img-inc>partially
+ </dl><p>An <a href=#image-request>image request</a>'s <a href=#img-req-url title=img-req-url>current URL</a> is initially the empty string.</p>
+
+ <p>An <a href=#image-request>image request</a>'s <a href=#img-req-data title=img-req-data>image data</a> is the decoded image data.</p>
+
+ <p>When an <a href=#image-request>image request</a> is either in the <a href=#img-inc title=img-inc>partially
available</a> state or in the <a href=#img-all title=img-all>completely available</a> state, it is
said to be <dfn id=img-available title=img-available>available</dfn>.</p>
- <p>An <code><a href=#the-img-element>img</a></code> element is initially <a href=#img-none title=img-none>unavailable</a>.</p>
+ <p>An <a href=#image-request>image request</a> is initially <a href=#img-none title=img-none>unavailable</a>.</p>
<p>When an <code><a href=#the-img-element>img</a></code> element is <a href=#img-available title=img-available>available</a>, it
<a href=#provides-a-paint-source>provides a paint source</a> whose width is the image's intrinsic width, whose height is
@@ -21019,23 +21206,53 @@
data</a> of an <code><a href=#the-img-element>img</a></code> element that has the
<a href=#img-parser-created title=img-parser-created>parser-created flag</a> set to true whenever that element is
inserted into another <code><a href=#node>Node</a></code>. 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
- is created and has the <a href=#img-parser-created title=img-parser-created>parser-created flag</a> unset, or 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, and whenever
- that element's <a href=#concept-node-adopt-ext title=concept-node-adopt-ext>adopting steps</a> are run.</p> <!-- Note
+ <a href=#update-the-image-data>update the image data</a> of an <code><a href=#the-img-element>img</a></code> element,
+ with the <i title="">restart animation</i> flag set if so stated, whenever that element
+ is created and has the <a href=#img-parser-created title=img-parser-created>parser-created flag</a> unset,
+ or has experienced <a href=#relevant-mutations>relevant mutations</a>,
+ and whenever that element's <a href=#concept-node-adopt-ext title=concept-node-adopt-ext>adopting steps</a> are run.</p> <!-- Note
how this does NOT happen when the base URL changes (except for when adopted into a new doc) -->
<p>A user agent that obtains images on demand must <a href=#update-the-image-data>update the image data</a> of an
- <code><a href=#the-img-element>img</a></code> element whenever it needs the image data (i.e. on demand), but only if the
- <code><a href=#the-img-element>img</a></code> element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> or <code title=attr-img-src><a href=#attr-img-src>srcset</a></code> attribute, and only if the <code><a href=#the-img-element>img</a></code> element is in the
- <a href=#img-none title=img-none>unavailable</a> state. When an <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute set, changed, or removed, and whenever
- that element's <a href=#concept-node-adopt-ext title=concept-node-adopt-ext>adopting steps</a> are run, if the user
+ <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 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
+ has experienced <a href=#relevant-mutations>relevant mutations</a>,
+ and whenever that element's <a href=#concept-node-adopt-ext title=concept-node-adopt-ext>adopting steps</a> are run, 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>The <dfn id=relevant-mutations>relevant mutations</dfn> for an <code><a href=#the-img-element>img</a></code> element are as follows:</p>
+ <ul><li><p>The 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-sizes><a href=#attr-img-sizes>sizes</a></code> attributes are set, changed, or removed.</li>
+
+ <li><p>The element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set to the same value as the previous value.
+ This must set the <i title="">restart animation</i> flag for the <a href=#update-the-image-data>update the image data</a> algorithm.</li>
+
+ <li><p>The element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute's state is changed.</li>
+
+ <li><p>The element is inserted into or removed from a <code><a href=#the-picture-element>picture</a></code> parent element.</li>
+
+ <li><p>The element's parent is a <code><a href=#the-picture-element>picture</a></code> element and a
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element is inserted as a previous sibling.</li>
+
+ <li><p>The element's parent is a <code><a href=#the-picture-element>picture</a></code> element and a
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element that was a previous sibling is removed.</li>
+
+ <li><p>The element's parent is a <code><a href=#the-picture-element>picture</a></code> element and a
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element that is a previous sibling has its
+ <code title=attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code>,
+ <code title=attr-picture-source-sizes><a href=#attr-picture-source-sizes>sizes</a></code>,
+ <code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code>
+ or <code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attributes set, changed, or removed.</li>
+
+ </ul><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.</p>
+
+ <p>Each <a href=#image-request>image request</a> has 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>
@@ -21045,7 +21262,7 @@
intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</p>
<p>Each <code><a href=#the-img-element>img</a></code> element has a <dfn id=img-parser-created title=img-parser-created>parser-created flag</dfn> that must be set to false
- when the element is created, unless otherwise specified.
+ when the element is created, unless otherwise specified.</p>
<p class=note>The <a href=#html-parser>HTML parser</a> and the <a href=#xml-parser>XML parser</a>
will set the <a href=#img-parser-created title=img-parser-created>parser-created flag</a> to true
@@ -21058,16 +21275,29 @@
<p>Each <code><a href=#document>Document</a></code> object must have a <dfn id=list-of-available-images>list of available images</dfn>. Each image
in this list is identified by a tuple consisting of an <a href=#absolute-url>absolute URL</a>, a <a href=#cors-settings-attribute>CORS
settings attribute</a> mode, and, if the mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No
- CORS</a>, an <a href=#origin>origin</a>. User agents may copy entries from one <code><a href=#document>Document</a></code>
+ CORS</a>, an <a href=#origin>origin</a>.
+ Each image furthermore has an <dfn id=ignore-higher-layer-caching>ignore higher-layer caching</dfn> flag.
+ User agents may copy entries from one <code><a href=#document>Document</a></code>
object's <a href=#list-of-available-images>list of available images</a> to another at any time (e.g. when the
<code><a href=#document>Document</a></code> is created, user agents can add to it all the images that are loaded in
other <code><a href=#document>Document</a></code>s), but must not change the keys of entries copied in this way when
- doing so. User agents may also remove images from such lists at any time (e.g. to save
- memory).</p>
+ doing so, and must unset the <a href=#ignore-higher-layer-caching>ignore higher-layer caching</a> flag for the copied entry.
+ User agents may also remove images from such lists at any time (e.g. to save
+ memory).
+ User agents must remove entries in the <a href=#list-of-available-images>list of available images</a> as appropriate
+ given higher-layer caching semantics for the resource (e.g. the HTTP <code title="">Cache-Control</code>
+ response header) when the <a href=#ignore-higher-layer-caching>ignore higher-layer caching</a> is unset.</p>
- <p>When the user agent is to <dfn id=update-the-image-data>update the image data</dfn> of an <code><a href=#the-img-element>img</a></code> element, it
- must run the following steps:</p>
+ <p class=note>The user agent can also store the image data in a separatly from the <a href=#list-of-available-images>list of available images</a>.</p>
+ <p class=example>For example, if a resource has the HTTP response header <code title="">Cache-Control: must-revalidate</code>,
+ the user agent would remove it from the <a href=#list-of-available-images>list of available images</a> but could keep the image data separately,
+ and use that if the server responds with a <code title="">204 No Content</code> status.</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,
+ optionally with the <i title="">restart animations</i> flag set,
+ it must run the following steps:</p>
+
<ol><li><p>If the element's <code><a href=#document>Document</a></code> is not the <a href=#active-document>active document</a>,
abort these steps.</li>
@@ -21076,21 +21306,16 @@
<li><p>Set the element's <a href=#img-parser-created title=img-parser-created>parser-created flag</a> to false.</li>
- <li><p>Return the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-none title=img-none>unavailable</a>
- state.</p>
-
- <li><p>If an instance of the <a href=#fetch title=fetch>fetching</a> algorithm is still running for
- this element, then abort that algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that algorithm.</li>
-
- <li><p>Forget the <code><a href=#the-img-element>img</a></code> element's current image data, if any.</li>
-
<li><p>If the user agent cannot support images, or its support for images has been disabled, then
- abort these steps.</li>
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ set <a href=#current-request>current request</a> to the <a href=#img-none title=img-none>unavailable</a> state,
+ let <a href=#pending-request>pending request</a> be null,
+ and abort these steps.</li>
<li>
- <p>If the element does not have a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified <!--XXX and
- it does not have a parent or it has a parent but it is not a <code>picture</code> element,-->
+ <p>If the element does not have a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified and
+ it does not have a parent or it has a parent but it is not a <code><a href=#the-picture-element>picture</a></code> element,
and it 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
@@ -21098,26 +21323,40 @@
</li>
- <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var> and the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel
- density</a> be <var title="">selected pixel density</var>.</li>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var>.</li>
<li>
<p>If <var title="">selected source</var> is not null, run these substeps:</p>
<ol><li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative
- to the element. If that is not successful, abort these steps.</li>
+ to the element, and let the result be <var title="">absolute URL</var>. If that is not successful, then
+ abort these inner set of steps.</li>
+ <!-- This does not change currentSrc -->
<li><p>Let <var title="">key</var> be a tuple consisting of the resulting <a href=#absolute-url>absolute
URL</a>, the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
attribute's mode, and, if that mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>,
the <code><a href=#document>Document</a></code> object's <a href=#origin>origin</a>.</li>
- <li><p>If the <a href=#list-of-available-images>list of available images</a> contains an entry for <var title="">key</var>, then set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely
- available</a> state, update the presentation of the image appropriately, <a href=#queue-a-task>queue a
- task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load><a href=#event-load>load</a></code> at the
- <code><a href=#the-img-element>img</a></code> element, and abort these steps.</li>
+ <li><p>If the <a href=#list-of-available-images>list of available images</a> contains an entry for <var title="">key</var>, then
+ set the <a href=#ignore-higher-layer-caching>ignore higher-layer caching</a> flag for that entry,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ let <a href=#pending-request>pending request</a> be null,
+ let <a href=#current-request>current request</a> be a new <a href=#image-request>image request</a> whose <a href=#img-req-data title=img-req-data>image data</a> is that of the entry
+ and whose state is set to the <a href=#img-all title=img-all>completely available</a> state,
+ update the presentation of the image appropriately,
+ let the <a href=#current-request>current request</a>'s <a href=#current-pixel-density>current pixel density</a> be <var title="">selected pixel density</var>,
+ <a href=#queue-a-task>queue a task</a> to <a href=#restart-the-animation>restart the animation</a> if <i title="">restart animation</i> is set,
+ change <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a> to <var title="">absolute URL</var>,
+ and then <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ and abort these steps.</li>
+ <!--
+ load is a simple event here
+ loadstart and loadend do not fire
+ -->
+
</ol></li>
<li><p>If <var>parser-created</var> is false, asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing the <a href=#concept-task title=concept-task>task</a> that invoked this algorithm to continue.
@@ -21140,11 +21379,9 @@
<li>
- <p>⌛ If the element has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified<!--
- XXX or it has a parent that is a <code>picture</code> element-->, 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.
+ <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=#select-an-image-source title="select an image source">selecting an image source</a>,
+ respectively.</p>
</li>
@@ -21152,14 +21389,18 @@
<p>⌛ If <var title="">selected source</var> is null, run these substeps:</p>
- <ol><li><p>⌛ Set the element to the <a href=#img-error title=img-error>broken</a> state.</li>
+ <ol><li><p>⌛ Set the <a href=#current-request>current request</a> to the <a href=#img-error title=img-error>broken</a> state,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ and let <a href=#pending-request>pending request</a> be null.</li>
- <li><p>⌛ If the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute
- or a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute<!-- XXX
- or a parent that is a <code>picture</code> element-->,
- <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><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element
+ <li><p>⌛ <a href=#queue-a-task>Queue a task</a> to change the <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a> to the empty string,
+ and then, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute
+ or a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute
+ or a parent that is a <code><a href=#the-picture-element>picture</a></code> element,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element.</li>
+ <!-- loadstart and loadend do not fire -->
+
<li><p>⌛ Abort this algorithm.</li>
</ol></li>
@@ -21171,21 +21412,53 @@
</li>
+ <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative
+ to the element, and let the result be <var title="">absolute URL</var>. If that is not successful, then
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ set the <a href=#current-request>current request</a> to the <a href=#img-error title=img-error>broken</a> state,
+ let <a href=#pending-request>pending request</a> be null,
+ <a href=#queue-a-task>queue a task</a> to
+ change the <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a> to <var title="">absolute URL</var>,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element
+ and then <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ and abort these steps.</li>
+
<li>
- <p>⌛ Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of the <a href=#absolute-url>absolute
- URL</a> that resulted from the earlier step, with the <i>mode</i> being the current state of
+ <p>⌛ If the <a href=#pending-request>pending request</a> is not null,
+ and <var title="">absolute URL</var> is the same as the <a href=#pending-request>pending request</a>'s <a href=#img-req-url title=img-req-url>current URL</a>,
+ then abort these steps.</p>
+
+ <p>⌛ If <var title="">absolute URL</var> is the same as the <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a>,
+ and <a href=#current-request>current request</a> is in the <a href=#img-inc title=img-inc>partially available</a> state,
+ then <a href=#abort-the-image-request>abort the image request</a> for the <a href=#pending-request>pending request</a>,
+ <a href=#queue-a-task>queue a task</a> to <a href=#restart-the-animation>restart the animation</a> if <i title="">restart animation</i> is set,
+ and abort these steps.</p>
+
+ <p>⌛ If the <a href=#pending-request>pending request</a> is not null,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#pending-request>pending request</a>.</p>
+
+ <p>⌛ Let <var title="">image request</var> be a new <a href=#image-request>image request</a>
+ whose <a href=#img-req-url title=img-req-url>current URL</a> is <var title="">absolute URL</var>.</p>
+
+ <p>⌛ Let the <a href=#pending-request>pending request</a> be <var title="">image request</var>.</p>
+
+ <p>⌛ Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of <var title="">absolute URL</var>,
+ with the <i>mode</i> being the current state of
the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute, the <i title="">origin</i> being the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's
- <code><a href=#document>Document</a></code>, and the <i>default origin behaviour</i> set to <i>taint</i>.</p>
+ <code><a href=#document>Document</a></code>, and the <i>default origin behaviour</i> set to <i>taint</i>.
+ Let this instance of the <a href=#fetch title=fetch>fetching</a> algorithm be associated with <var title="">image request</var>.<!-- XXXX
+ "Interaction with the Preload Scanner" from the picture spec --></p>
- <p>The resource obtained in this fashion, if any, is the <code><a href=#the-img-element>img</a></code> element's image data.
+ <p>The resource obtained in this fashion, if any, is <var title="">image request</var>'s <a href=#img-req-data title=img-req-data>image data</a>.
It can be either <a href=#cors-same-origin>CORS-same-origin</a> or <a href=#cors-cross-origin>CORS-cross-origin</a>; this affects
the <a href=#origin>origin</a> of the image itself (e.g. when used on a <code><a href=#the-canvas-element>canvas</a></code>).</p>
<!-- same text in <input type=image> section and similar text elsewhere -->
<p>Fetching the image must <a href=#delay-the-load-event>delay the load event</a> of the element's document until the
<a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the
- <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> (<a href=#img-load>defined below</a>) has been run.</p>
+ <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> (<a href=#img-load>defined below</a>) has been run.
+ <!--XXX or the fetch was aborted, presumably --></p>
<p class=warning>This, unfortunately, can be used to perform a rudimentary port scan of the
user's local network (especially in conjunction with scripting, though scripting isn't actually
@@ -21195,9 +21468,9 @@
<p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>, each <a href=#concept-task title=concept-task>task</a>
that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task source</a>
- while the image is being <a href=#fetch title=fetch>fetched</a> must <a href=#fire-a-progress-event>fire a progress
- event</a> named <code title=event-progress><a href=#event-progress>progress</a></code> at the <code><a href=#the-img-element>img</a></code>
- element.</p>
+ while the image is being <a href=#fetch title=fetch>fetched</a>,
+ if <var title="">image request</var> is the <a href=#current-request>current request</a>,
+ must <a href=#fire-a-progress-event>fire a progress event</a> named <code title=event-progress><a href=#event-progress>progress</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
</li>
@@ -21213,14 +21486,55 @@
<dd>
<p>The next <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
- task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+ task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must run the following steps:</p>
- <p>Each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+ <ol><li>
+
+ <p>If <var title="">image request</var> is the <a href=#pending-request>pending request</a>
+ and the user agent is able to determine <var title="">image request</var>'s image's width and height,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a> and
+ set the <a href=#current-request>current request</a>'s state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Otherwise, if <var title="">image request</var> is the <a href=#pending-request>pending request</a>
+ and the user agent is able to determine that <var title="">image request</var>'s image
+ is corrupted in some fatal way such that the image dimensions cannot be obtained,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a>
+ and set the <a href=#current-request>current request</a>'s state to <a href=#img-error title=img-error>broken</a>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Otherwise, if <var title="">image request</var> is the <a href=#current-request>current request</a>,
+ it is in the <a href=#img-none title=img-none>unavailable</a> state,
+ and the user agent is able to determine <var title="">image request</var>'s image's width and height,
+ set the <a href=#current-request>current request</a>'s state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Otherwise, if <var title="">image request</var> is the <a href=#current-request>current request</a>,
+ it is in the <a href=#img-none title=img-none>unavailable</a> state,
+ and the user agent is able to determine that <var title="">image request</var>'s image
+ is corrupted in some fatal way such that the image dimensions cannot be obtained,
+ set the <a href=#current-request>current request</a>'s state to <a href=#img-error title=img-error>broken</a>.
+ <!--XXX abort the fetch? fire error event?--></p>
+
+ </li>
+
+ </ol><p>Each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must update the presentation of the image, but as each new body
part comes in, it must replace the previous image. Once one body part has been completely
decoded, the user agent must set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely available</a> state and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
a simple event</a> named <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code>
- element.</p>
+ element. <!--XXX what if the image is broken? --></p>
<p class=note>The <code title=event-progress><a href=#event-progress>progress</a></code> and <code title=event-loadend><a href=#event-loadend>loadend</a></code> events are not fired for
<code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code> image streams.</p>
@@ -21232,98 +21546,122 @@
<dd>
<p>The next <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
- task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+ task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must run the following steps:</p>
- <p id=img-load>That <a href=#concept-task title=concept-task>task</a>, and each subsequent <a href=#concept-task title=concept-task>task</a>, that is <a href=#queue-a-task title="queue a task">queued</a> by the
- <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must update the presentation of the image appropriately (e.g. if
- the image is a progressive JPEG, each packet can improve the resolution of the image).</p>
+ <ol><li>
- <p>Furthermore, the last <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
- task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been
- <a href=#fetch title=fetch>fetched</a> must additionally run the steps for the matching entry in
- the following list:</p>
+ <p>If the user agent is able to determine <var title="">image request</var>'s image's width and height,
+ and <var title="">image request</var> is <a href=#pending-request>pending request</a>,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a>,
+ update the <code><a href=#the-img-element>img</a></code> element's presentation appropriately,
+ and set <var title="">image request</var>'s state to <a href=#img-inc title=img-inc>partially available</a>.</p>
- <dl class=switch><dt>If the download was successful and the user agent was able to determine the image's width
- and height</dt>
+ </li>
- <dd>
+ <li>
- <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely
- available</a> state.</p>
+ <p>Otherwise, if the user agent is able to determine <var title="">image request</var>'s image's width and height,
+ and <var title="">image request</var> is <a href=#current-request>current request</a>,
+ update the <code><a href=#the-img-element>img</a></code> element's presentation appropriately
+ and set <var title="">image request</var>'s state to <a href=#img-inc title=img-inc>partially available</a>.</p>
- <li><p>Add the image to the <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>.</li>
+ </li>
- <li>
+ <li>
- <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
- named <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ <p>Otherwise, if the user agent is able to determine that <var title="">image request</var>'s image
+ is corrupted in some fatal way such that the image dimensions cannot be obtained,
+ and <var title="">image request</var> is <a href=#pending-request>pending request</a>,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a>,
+ set <a href=#current-request>current request</a> to the <a href=#img-error title=img-error>broken</a> state,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ and abort these steps.</p>
- <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
- <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ </li>
- </li>
+ <li>
- <li>
+ <p>Otherwise, if the user agent is able to determine that <var title="">image request</var>'s image
+ is corrupted in some fatal way such that the image dimensions cannot be obtained,
+ and <var title="">image request</var> is <a href=#current-request>current request</a>,
+ <a href=#abort-the-image-request>abort the image request</a> for <var title="">image request</var>,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ and abort these steps.</p>
- <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
- named <code title=event-load><a href=#event-load>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ </li>
- <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
- <code title=event-load><a href=#event-load>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ </ol><p id=img-load>That <a href=#concept-task title=concept-task>task</a>, and each subsequent <a href=#concept-task title=concept-task>task</a>, that is <a href=#queue-a-task title="queue a task">queued</a> by the
+ <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a>,
+ if <var title="">image request</var> is the <a href=#current-request>current request</a>,
+ must update the presentation of the image appropriately (e.g. if
+ the image is a progressive JPEG, each packet can improve the resolution of the image).</p>
- </li>
+ <p>Furthermore, the last <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+ task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been
+ <a href=#fetch title=fetch>fetched</a> must additionally run these steps:</p>
- </ol></dd>
+ <ol><!--
+ the download was successful
+ the user agent was able to determine the image's width and height
+ image request is current request
+ pending request might be null or non-null
+ --><li><p>Set <var title="">image request</var> to the <a href=#img-all title=img-all>completely
+ available</a> state.</p>
- <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
+ <li><p>Add the image to the <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>, with the <a href=#ignore-higher-layer-caching>ignore higher-layer caching</a> flag set.</li>
- <dt>Otherwise</dt>
+ <li><p><a href=#fire-a-progress-event-or-simple-event>Fire a progress event or simple event</a> named <code title=event-load><a href=#event-load>load</a></code>
+ at the <code><a href=#the-img-element>img</a></code> element, depending on the resource in <var title="">image request</var>.</li>
- <dd>
+ <li><p><a href=#fire-a-progress-event-or-simple-event>Fire a progress event or simple event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code>
+ at the <code><a href=#the-img-element>img</a></code> element, depending on the resource in <var title="">image request</var>.</li>
- <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a>
- state.</li>
+ </ol></dd>
- <li>
+ <dt>Otherwise</dt>
- <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
- named <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ <dd>
- <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
- <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ <p>The image data is not in a supported file format; the user agent must set
+ <var title="">image request</var> to the <a href=#img-error title=img-error>broken</a> state,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a>,
+ and then <a href=#queue-a-task>queue a task</a> to first <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element and then <a href=#fire-a-simple-event>fire a simple
+ event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code>
+ element.</p>
- </li>
+ </dd>
- <li>
+ </dl></li>
- <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
- named <code title=event-load><a href=#event-load>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ </ol><p>To <dfn id=abort-the-image-request>abort the image request</dfn> for an <a href=#image-request>image request</a> <var title="">image request</var> means to run the following steps:</p>
- <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
- <code title=event-load><a href=#event-load>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ <ol><li><p>Forget <var title="">image request</var>'s <a href=#img-req-data title=img-req-data>image data</a>, if any.</li>
- </li>
+ <li><p>Abort any instance of the <a href=#fetch title=fetch>fetching</a> algorithm for <var title="">image request</var>,
+ discarding any pending tasks generated by that algorithm.</li>
- </ol></dd>
+ </ol><p>To <dfn id=upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</dfn> for an <code><a href=#the-img-element>img</a></code> element means to run the following steps:</p>
- </dl></dd>
+ <ol><li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#current-request>current request</a> be the <a href=#pending-request>pending request</a>.</li>
- <dt>Otherwise</dt>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#pending-request>pending request</a> be null.</li>
- <dd>
+ </ol><p>To <dfn id=fire-a-progress-event-or-simple-event>fire a progress event or simple event</dfn> named <var title="">type</var> at an element <var title="">e</var>,
+ depending on resource <var data-x="">r</var>, means to
+ <a href=#fire-a-progress-event>fire a progress event</a> named <var title="">type</var> at <var title="">e</var> if <var title="">r</var> is <a href=#cors-same-origin>CORS-same-origin</a>,
+ and otherwise <a href=#fire-a-simple-event>fire a simple event</a> named <var title="">type</var> at <var title="">e</var>.</p>
- <p>Either the image data is corrupted in some fatal way such that the image dimensions cannot
- be obtained, or the image data is not in a supported file format; the user agent must set the
- <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a> state, abort the <a href=#fetch title=fetch>fetching</a> algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that algorithm, and then <a href=#queue-a-task>queue a
- task</a> to first <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element and then <a href=#fire-a-simple-event>fire a simple
- event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code>
- element.</p>
+ <p>To <dfn id=restart-the-animation>restart the animation</dfn> for an <code><a href=#the-img-element>img</a></code> element means that,
+ if the image is an animated image,
+ all animated images with the same <a href=#absolute-url>absolute URL</a> and the same image data in the <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>
+ are expected to restart their animation.</p>
- </dd>
-
- </dl></li>
-
- </ol><p>While a user agent is running the above algorithm for an element <var title="">x</var>, there
+ <p>While a user agent is running the above algorithm for an element <var title="">x</var>, there
must be a strong reference from the element's <code><a href=#document>Document</a></code> to the element <var title="">x</var>, even if that element is not <a href=#in-a-document title="in a Document">in</a> its
<code><a href=#document>Document</a></code>.</p>
@@ -21351,190 +21689,424 @@
<p>This specification does not specify which image types are to be supported.</p>
- <hr><p>When the user agent is required to <dfn id=processing-the-image-candidates title="processing the image candidates">process the
- image candidates</dfn> of an <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, the user agent must run the following steps,
- which return a URL and pixel density (null and undefined respectively if no selection can be
- made):</p>
+ <hr><p>An <code><a href=#the-img-element>img</a></code> element is associated with a <a href=#source-set>source set</a>.</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>
+ <p>A <dfn id=source-set>source set</dfn> is a set of zero or more <a href=#image-source title="image source">image sources</a>,
+ a <a href=#source-size-0>source size</a>, and optionally a media query.<!-- XXX
+ the media query seems unnecessary --></p>
- <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially
- pointing at the start of the string.</li>
+ <p>An <dfn id=image-source>image source</dfn> is a <a href=#url>URL</a>,
+ and optionally either a density descriptor, or a width descriptor.</p>
- <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>
+ <p>A <dfn id=source-size-0>source size</dfn> is a <a href=#source-size-value><source-size-value></a>.
+ When a <a href=#source-size-0>source size</a> has a unit relative to the viewport,
+ it must be interpreted relative to the <code><a href=#the-img-element>img</a></code> element's document's viewport.
+ Other units must be interpreted the same as in Media Queries. <a href=#refsMQ>[MQ]</a></p>
- <li><p><i>Splitting loop</i>: <a href=#skip-whitespace>Skip whitespace</a>.</li>
+ <p>When asked to <dfn id=select-an-image-source>select an image source</dfn> for a given <code><a href=#the-img-element>img</a></code> element <var>el</var>,
+ user agents must do the following:</p>
- <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 -->
+ <ol><li><p><a href=#update-the-source-set>Update the source set</a> for <var>el</var>.</li>
- <li><p>If <var title="">url</var> is empty, then jump to the step labeled <i>descriptor
- parser</i>.</li>
+ <li><p>If <var>el</var>'s <a href=#source-set>source set</a> is empty,
+ return null as the URL and undefined as the pixel density and abort these steps.</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>Otherwise, take <var>el</var>'s <a href=#source-set>source set</a>
+ and let it be <var><a href=#source-set>source set</a></var>.</li>
- <li><p>Add <var title="">url</var> to <var title="">raw candidates</var>, associated with <var title="">descriptors</var>.</li>
+ <li><p>In a user agent-specific manner,
+ choose one <a href=#image-source>image source</a> from <var><a href=#source-set>source set</a></var>.
+ Let this be <var>selected source</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>Return <var>selected source</var> and its associated pixel density.</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>
+ </ol><p>When asked to <dfn id=update-the-source-set>update the source set</dfn> for a given <code><a href=#the-img-element>img</a></code> element <var>el</var>,
+ user agents must do the following:</p>
- <li><p>Return to the step labeled <i>splitting loop</i>.</li>
+ <ol><li><p>Set <var>el</var>'s <a href=#source-set>source set</a> to an empty <a href=#source-set>source set</a>.</li>
- <li><p><i>Descriptor parser</i>: Let <var title="">candidates</var> be an initially empty ordered
- list of <a href=#url title=URL>URLs</a> each with an associated pixel density, and optionally an
- associated width, height, or both. The order of entries in the list is the order in which entries
- are added to the list.</p>
+ <li><p>If <var>el</var> has a parent node and that is a <code><a href=#the-picture-element>picture</a></code> element,
+ let <var>elements</var> be an array containing <var>el</var>'s parent node's child elements, retaining relative order.
+ Otherwise, let <var>elements</var> be array containing only <var>el</var>.</li>
<li>
- <p>For each entry in <var title="">raw candidates</var> with <a href=#url>URL</a> <var title="">url</var> associated with the unparsed descriptors <var title="">unparsed
- descriptors</var>, in the order they were originally added to the list, run these substeps:</p>
+ <p>Iterate through <var>elements</var>,
+ doing the following for each item <var>child</var>:</p>
- <ol><li><p>Let <var title="">descriptor list</var> be the result of <a href=#split-a-string-on-spaces title="split a string on
- spaces">splitting <var title="">unparsed descriptors</var> on spaces</a>.</li>
+ <ol><li>
- <li><p>Let <var title="">error</var> be <i>no</i>.</li>
+ <p>If <var>child</var> is <var>el</var>:</p>
- <li><p>Let <var title="">width</var> be <i>absent</i>.</li>
+ <ol><li><p>If <var>child</var> has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute,
+ <a href=#parse-a-srcset-attribute title="parse a srcset attribute">parse <var>child</var>'s srcset attribute</a>
+ and let the returned <a href=#source-set>source set</a> be <var><a href=#source-set>source set</a></var>.
+ Otherwise, let <var><a href=#source-set>source set</a></var> be an empty <a href=#source-set>source set</a>.</li>
- <li><p>Let <var title="">height</var> be <i>absent</i>.</li>
+ <li><p><a href=#parse-a-sizes-attribute title="parse a sizes attribute">Parse <var>child</var>'s sizes attribute</a> and
+ let <var><a href=#source-set>source set</a></var>'s <a href=#source-size-0>source size</a> be the returned value.</li>
- <li><p>Let <var title="">density</var> be <i>absent</i>.</li>
+ <li><p>If <var>child</var> has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute
+ <!-- XXX whose value is not the empty string? -->
+ and <var><a href=#source-set>source set</a></var> does not contain an
+ <a href=#image-source>image source</a> with a density descriptor value of 1,
+ and no <a href=#image-source>image source</a> with a width descriptor,
+ append <var>child</var>'s <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute value to <var><a href=#source-set>source set</a></var>.</li>
+ <li><p>Let <var>el</var>'s <a href=#source-set>source set</a> be <var><a href=#source-set>source set</a></var>.</li>
+
+ <li><p>Abort this algorithm.</li>
+
+ </ol></li>
+
+ <li><p>If <var>child</var> is not a <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element,
+ continue to the next child.
+ Otherwise, <var>child</var> is a <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element.</li>
+
+ <li><p>If <var>child</var> does not have a <code title=attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code> attribute,
+ continue to the next child.</li>
+
+ <li><p><a href=#parse-a-srcset-attribute title="parse a srcset attribute">Parse <var>child</var>'s srcset attribute</a> and
+ let the returned <a href=#source-set>source set</a> be <var><a href=#source-set>source set</a></var>.</li>
+
+ <li><p>If <var><a href=#source-set>source set</a></var> has zero <a href=#image-source title="image source">image sources</a>,
+ continue to the next child.</li>
+
+ <li><p>If <var>child</var> has a <code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute,
+ and its value is a <a href=#valid-media-query>valid media query</a> which evaluates to true,
+ attach the media query to <var><a href=#source-set>source set</a></var>.
+ If its value is not a <a href=#valid-media-query>valid media query</a>,
+ or is a <a href=#valid-media-query>valid media query</a> that evaluates to false,
+ continue to the next child.</li>
+
+ <li><p><a href=#parse-a-sizes-attribute title="parse a sizes attribute">Parse <var>child</var>'s sizes attribute</a>
+ and let <var><a href=#source-set>source set</a></var>'s <a href=#source-size-0>source size</a> be the returned value.</li>
+
+ <li><p>If <var>child</var> has a <code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attribute,
+ and its value is an unknown or unsupported <a href=#mime-type>MIME type</a>,
+ continue to the next child.</li>
+
+ <li><p><a href=#normalize-the-source-densities>Normalize the source densities</a> of <var><a href=#source-set>source set</a></var>.</li>
+
+ <li><p>Let <var>el</var>'s <a href=#source-set>source set</a> be <var><a href=#source-set>source set</a></var>.</li>
+
+ <li><p>Abort this algorithm.</li>
+
+ </ol></li>
+
+ </ol><p class=note>Each <code><a href=#the-img-element>img</a></code> element independently considers
+ its previous sibling <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements
+ plus the <code><a href=#the-img-element>img</a></code> element itself
+ for selecting an <a href=#image-source>image source</a>, ignoring any other (invalid) elements,
+ including other <code><a href=#the-img-element>img</a></code> elements in the same <code><a href=#the-picture-element>picture</a></code> element,
+ or <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements that are following siblings
+ of the relevant <code><a href=#the-img-element>img</a></code> element.</p>
+
+ <p>When asked to <dfn id=parse-a-srcset-attribute>parse a srcset attribute</dfn> from an element,
+ parse the value of the element's <code>srcset</code> attribute as follows:</p>
+
+ <ol><li><p>Let <var title="">input</var> be the value passed to this algorithm.</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 URLs with associated unparsed descriptor list.
+ The order of entries in the lists is the order in which entries are added to the lists.</li>
+
+ <li><p><i title="">Splitting loop</i>: <a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a>
+ that are <a href=#space-character title="space character">space characters</a> or U+002C COMMA characters.</li>
+
+ <li><p>If <var>position</var> is past the end of <var><a href=#the-input-element>input</a></var>,
+ then jump to the step labeled <i title="">descriptor parser</i>.</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><a href=#url>url</a></var>.</li>
+
+ <li><p>Let <var title="">descriptors</var> be a new empty list.</li>
+
+ <li>
+
+ <p>If <var title="">url</var> ends with a U+002C COMMA character (,),
+ follow these substeps:</p>
+
+ <ol><li><p>Remove all trailing U+002C COMMA characters from <var title="">url</var>.</li>
+
+ <li><p>If <var title="">url</var> is empty,
+ then jump to the step labeled <i title="">splitting loop</i>.</li>
+
+ </ol><p>Otherwise, follow these substeps:</p>
+
+ <ol><li><p>Let <var title="">current token</var> be the empty string.</li>
+
+ <li><p>Let <var title="">state</var> be <i title="">start</i>.</li>
+
<li>
- <p>For each token in <var title="">descriptor list</var>, run the appropriate set of steps
- from the following list:</p>
+ <p>Let <var title="">c</var> be the character at <var title="">position</var>.
+ Do the following depending on the value of <var title="">state</var>.
+ For the purpose of this step, "EOF" is a special character representing
+ that <var title="">position</var> is past the end of <var><a href=#the-input-element>input</a></var>.</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>
+ <dl class=switch><dt><i title="">Start</i></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>
+ <p>Do the following, depending on the value of <var title="">c</var>:</p>
- <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>
+ <dl class=switch><dt><a href=#space-character>Space character</a></dt>
- </ol></dd>
+ <dd><p>If <var title="">current token</var> is not empty,
+ append <var title="">current token</var> to <var title="">descriptors</var>
+ and let <var title="">current token</var> be the empty string.
+ Set <var title="">state</var> to <i title="">after token</i>.</dd>
+ <dt>U+002C COMMA (,)</dt>
- <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><p>Advance <var title="">position</var> to the next character in <var title="">input</var>.
+ If <var title="">current token</var> is not empty,
+ append <var title="">current token</var> to <var title="">descriptors</var>.
+ Jump to the step labeled <i title="">add candidate</i>.</dd>
+ <dt>U+0028 LEFT PARANTHESIS (()</dt>
+
+ <dd><p>Append <var title="">c</var> to <var title="">current token</var>.
+ Set <var title="">state</var> to <i title="">in parens</i>.</dd>
+
+ <dt>EOF</dt>
+
+ <dd><p>If <var title="">current token</var> is not empty,
+ append <var title="">current token</var> to <var title="">descriptors</var>.
+ Jump to the step labeled <i title="">add candidate</i>.</dd>
+
+ <dt>Anything else</dt>
+
+ <dd><p>Append <var title="">c</var> to <var title="">current token</var>.</dd>
+
+ </dl></dd>
+
+ <dt><i title="">In parens</i></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>
+ <p>Do the following, depending on the value of <var title="">c</var>:</p>
- <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>
+ <dl class=switch><dt>U+0029 RIGHT PARENTHESIS ())</dt>
- </ol></dd>
+ <dd><p>Append <var title="">c</var> to <var title="">current token</var>.
+ Set <var title="">state</var> to <i title="">start</i>.</dd>
+ <dt>EOF</dt>
- <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><p>Append <var title="">current token</var> to <var title="">descriptors</var>.
+ Jump to the step labeled <i title="">add candidate</i>.</dd>
+ <dt>Anything else</dt>
+
+ <dd><p>Append <var title="">c</var> to <var title="">current token</var>.</dd>
+
+ </dl></dd>
+
+ <dt><i title="">After token</i></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>
+ <p>Do the following, depending on the value of <var title="">c</var>:</p>
- <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>
+ <dl class=switch><dt><a href=#space-character>Space character</a></dt>
- </ol></dd>
+ <dd><p>Stay in this state.</dd>
+ <dt>EOF</dt>
- </dl></li>
+ <dd><p>Jump to the step labeled <i title="">add candidate</i>.</dd>
- <li><p>If <var title="">width</var> is still <i>absent</i>, set it to Infinity.</li>
+ <dt>Anything else</dt>
- <li><p>If <var title="">height</var> is still <i>absent</i>, set it to Infinity.</li>
+ <dd><p>Set <var title="">state</var> to <i title="">start</i>.
+ Set <var title="">position</var> to the <em>previous</em> character in <var><a href=#the-input-element>input</a></var>.</dd>
- <li><p>If <var title="">density</var> is still <i>absent</i>, set it to 1.0.</li>
+ </dl></dd>
- <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>
+ </dl><p>Advance <var title="">position</var> to the next character in <var title="">input</var>.
+ Repeat this step.</p>
+ </li>
+
</ol></li>
+ <li><p><i title="">Add candidate</i>: Add <var title="">url</var> to <var title="">raw candidates</var>,
+ associated with <var title="">descriptors</var>.</li>
+
+ <li><p>Return to the step labeled <i title="">splitting loop</i>.</li>
+
+ <li><p><i title="">Descriptor parser</i>:
+ Let <var title="">candidates</var> be an initially empty <a href=#source-set>source set</a>.
+ The order of entries in the list is the order in which entries are added to the list.</li>
+
<li>
- <p>If the <code><a href=#the-img-element>img</a></code> element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute whose
- value is not the empty string, then run the following substeps:</p>
+ <p>For each entry in <var title="">raw candidates</var> with URL <var title="">url</var>
+ associated with the unparsed descriptor list <var title="">descriptor list</var>,
+ run these substeps:</p>
- <ol><li><p>Let <var title="">url</var> be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</li>
+ <ol><li><p>Let <var title="">error</var> be <i title="">no</i>.</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>
+ <li><p>Let <var title="">width</var> be <i title="">absent</i>.</li>
+ <li><p>Let <var title="">density</var> be <i title="">absent</i>.</li>
+
+ <li><p>Let <var title="">future-compat-h</var> be <i title="">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> and <var title="">density</var>
+ are not both <i title="">absent</i>,
+ then let <var title="">error</var> be <i title="">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.
+ If the result is zero, let <var title="">error</var> be <i title="">yes</i>.
+ Otherwise, let <var title="">width</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="">width</var>, <var title="">density</var> and <var title="">future-compat-h</var>
+ are not all <i title="">absent</i>,
+ then let <var title="">error</var> be <i title="">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.
+ If the result is less than zero, let <var title="">error</var> be <i title="">yes</i>.
+ Otherwise, let <var title="">density</var> be the result.</p>
+
+ <p class=note>If <var title="">density</var> is zero,
+ the intrinsic dimensions will be infinite.
+ User agents are expected to have limits in how big images can be rendered,
+ which is allowed by the <a href=#hardwareLimitations>hardware limitations</a> clause.</p>
+
+ </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="">future-compat-h</var> and <var title="">density</var>
+ are not both <i title="">absent</i>,
+ then let <var title="">error</var> be <i title="">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.
+ If the result is zero, let <var title="">error</var> be <i title="">yes</i>.
+ Otherwise, let <var title="">future-compat-h</var> be the result.</li>
+
+ </ol></dd>
+
+ </dl></li>
+
+ <li><p>If <var>error</var> is still <i title="">no</i>,
+ then add a new <a href=#image-source>image source</a> to <var title="">candidates</var>
+ whose URL is <var title="">url</var>,
+ associated with a width <var>width</var> if not <i title="">absent</i>
+ and a pixel density <var title="">density</var> if not <i title="">absent</i>.</li>
+
</ol></li>
- <li><p>If <var title="">candidates</var> is empty, return null as the URL and undefined as the
- pixel density and abort these steps.</li>
+ <li><p>Return <var>candidates</var>.</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>
+ </ol><p>When asked to <dfn id=parse-a-sizes-attribute>parse a sizes attribute</dfn> from an element,
+ <a href=#parse-a-comma-separated-list-of-component-values>parse a comma-separated list of component values</a>
+ from the value of the element's <code title="">sizes</code> attribute
+ (or the empty string, if the attribute is absent),
+ and let <var title="">unparsed sizes list</var> be the result. <a href=#refsCSSSYNTAX>[CSSSYNTAX]</a></p>
- <li>
+ <p>For each <var title="">unparsed size</var> in <var title="">unparsed sizes list</var>:</p>
- <p>Optionally, return the <a href=#url>URL</a> of an entry in <var title="">candidates</var> chosen
- by the user agent, and that entry's associated pixel density, and then abort these steps. The
- user agent may apply any algorithm or heuristic in its selection of an entry for the purposes of
- this step.</p>
+ <ol><li><p>Remove all consecutive <a href=#whitespace-token><whitespace-token></a>s
+ from the end of <var title="">unparsed size</var>.
+ If <var title="">unparsed size</var> is now empty,
+ continue to the next iteration of this algorithm.</li>
- <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>
+ <li><p>If the last <a href=#component-value>component value</a> in <var title="">unparsed size</var>
+ is a valid non-negative <a href=#source-size-value><source-size-value></a>,
+ let <var title="">size</var> be its value
+ and remove the <a href=#component-value>component value</a> from <var title="">unparsed size</var>.
+ Otherwise, continue to the next iteration of this algorithm.</li>
- <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><p>Remove all consecutive <a href=#whitespace-token><whitespace-token></a>s
+ from the end of <var title="">unparsed size</var>.
+ If <var title="">unparsed size</var> is now empty,
+ return <var title="">size</var> and exit this algorithm.</li>
- </li>
+ <li><p>Parse the remaining <a href=#component-value title="component value">component values</a> in <var title="">unparsed size</var>
+ as a <a href=#media-condition><media-condition></a>.
+ If it does not parse correctly,
+ or it does parse correctly but the <a href=#media-condition><media-condition></a> evaluates to false,
+ continue to the next iteration of this algorithm. <a href=#refsMQ>[MQ]</a></li>
- <li><p>Let <var title="">max width</var> be the width of the viewport, and let <var title="">max
- height</var> be the height of the viewport. <a href=#refsCSS>[CSS]</a></li>
+ <li><p>Return <var title="">size</var> and exit this algorithm.</li>
- <li><p>If there are any entries in <var title="">candidates</var> that have an associated width
- that is less than <var title="">max width</var>, then remove them, unless that would remove all
- the entries, in which case remove only the entries whose associated width is less than the
- greatest such width.</li>
+ </ol><p>If the above algorithm exhausts <var title="">unparsed sizes list</var> without returning a <var title="">size</var> value,
+ return <code title="">100vw</code>.</p>
- <li><p>If there are any entries in <var title="">candidates</var> that have an associated height
- that is less than <var title="">max height</var>, then remove them, unless that would remove all
- the entries, in which case remove only the entries whose associated height is less than the
- greatest such height.</li>
+ <p class=note>While a <a href=#valid-source-size-list>valid source size list</a> only contains a bare <a href=#source-size-value><source-size-value></a>
+ (without an accompanying <a href=#media-condition><media-condition></a>)
+ as the last entry in the <a href=#source-size-list><source-size-list></a>,
+ the parsing algorithm technically allows such at any point in the list,
+ and will accept it immediately as the size
+ if the preceding entries in the list weren't used.
+ This is to enable future extensions,
+ and protect against simple author errors such as a final trailing comma.</p>
- <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>
+ <p>An <a href=#image-source>image source</a> can have a density descriptor,
+ a width descriptor,
+ or no descriptor at all accompanying its URL.
+ Normalizing a <a href=#source-set>source set</a> gives every <a href=#image-source>image source</a> a density descriptor.</p>
- <li><p>Remove all the entries in <var title="">candidates</var> that have an associated width
- that is greater than the smallest such width.</li>
+ <p>When asked to <dfn id=normalize-the-source-densities>normalize the source densities</dfn> of a <a href=#source-set>source set</a> <var><a href=#source-set>source set</a></var>,
+ the user agent must do the following:</p>
- <li><p>Remove all the entries in <var title="">candidates</var> that have an associated height
- that is greater than the smallest such height.</li>
+ <ol><li><p>Let <var title="">source size</var> be <var><a href=#source-set>source set</a></var>'s <a href=#source-size-0>source size</a>.</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>
- <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>
+ <p>For each <a href=#image-source>image source</a> in <var title="">source set</var>:</p>
+ <ol><li><p>If the <a href=#image-source>image source</a> has a density descriptor,
+ continue to the next <a href=#image-source>image source</a>.</li>
+
+ <li>
+
+ <p>Otherwise, if the <a href=#image-source>image source</a> has a width descriptor,
+ replace the width descriptor with a density descriptor
+ with a value of the width descriptor divided by the <a href=#source-size-0>source size</a>
+ and a unit of <code title="">x</code>.</p>
+
+ <p class=note>If the <a href=#source-size-0>source size</a> is zero,
+ the density would be infinity,
+ which results in the intrinsic dimensions being zero by zero.</p>
+
+ </li>
+
+ <li><p>Otherwise, give the <a href=#image-source>image source</a> a density descriptor of <code title="">1x</code>.</li>
+
+ </ol></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; for example, if the user is not looking at the page any
@@ -21546,15 +22118,15 @@
<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
+ <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 and it either has no parent
+ or it is not a <code><a href=#the-picture-element>picture</a></code> element, 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>
+ density</var> be the URL and pixel density that results from <span>selecting an image source</span>, respectively.</li>
<li><p>⌛ If <var title="">selected source</var> is null, then abort these steps.</li>
<!-- not sure this can ever actually happen -->
@@ -21596,13 +22168,15 @@
<p><a href=#queue-a-task>Queue a task</a> to run the following substeps:</p>
- <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
- attributes have been set, changed, or removed since this algorithm started, then abort these
- steps.</p>
+ <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element has experienced <a href=#relevant-mutations>relevant mutations</a>
+ since this algorithm started, then abort these steps.</p>
<li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var> and the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel
density</a> be <var title="">selected pixel density</var>.</li>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#current-request>current request</a>'s
+ <a href=#img-req-url title=img-req-url>current URL</a> be the resulting <a href=#absolute-url>absolute URL</a> from the earlier step.</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.
@@ -21735,12 +22309,19 @@
on an element that does not have an ancestor <code><a href=#the-a-element>a</a></code> element
with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute.</p>
+ <p class=note>The <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> and
+ <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> attributes
+ can result in confusing behavior when used together with
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements with the
+ <code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute specified
+ in a <code><a href=#the-picture-element>picture</a></code> element.</p>
+
<p>The <code><a href=#the-img-element>img</a></code> element supports <a href=#dimension-attributes>dimension
attributes</a>.</p>
<div class=impl>
- <p>The <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn>, <dfn id=dom-img-src title=dom-img-src><code>src</code></dfn>, and <dfn id=dom-img-srcset title=dom-img-srcset><code>srcset</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ <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>, <dfn id=dom-img-srcset title=dom-img-srcset><code>srcset</code></dfn> and <dfn id=dom-img-sizes title=dom-img-sizes><code>sizes</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
@@ -21791,6 +22372,14 @@
</dd>
+ <dt><var title="">image</var> . <code title=dom-img-currentSrc><a href=#dom-img-currentsrc>currentSrc</a></code></dt>
+
+ <dd>
+
+ <p>Returns the image's <a href=#absolute-url>absolute URL</a>.</p>
+
+ </dd>
+
<dt><var title="">image</var> = new <code title=dom-image><a href=#dom-image>Image</a></code>( [ <var title="">width</var> [, <var title="">height</var> ] ] )</dt>
<dd>
@@ -21819,7 +22408,7 @@
<p>The IDL attribute <dfn id=dom-img-complete title=dom-img-complete><code>complete</code></dfn> must return true if
any of the following conditions is true:</p>
- <ul class=brief><li>Both the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute are omitted.
+ <ul class=brief><!--XXXX check picture parent--><li>Both the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute are omitted.
<li>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is omitted and the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute's value is the empty string. <!-- we only have this
hack for src="", not srcset=""; present but empty or bogus srcset="" still means complete=false
@@ -21837,6 +22426,9 @@
<p class=note>The value of <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> can thus change while
a <a href=#concept-script title=concept-script>script</a> is executing.</p>
+ <p>The <dfn id=dom-img-currentsrc title=dom-img-currentSrc><code>currentSrc</code></dfn> IDL attribute
+ must return the <code><a href=#the-img-element>img</a></code> element's <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a>.</p>
+
<p>A constructor is provided for creating <code><a href=#htmlimageelement>HTMLImageElement</a></code> objects (in addition to
the factory methods from DOM such as <code title="">createElement()</code>): <dfn id=dom-image title=dom-image><code>Image(<var title="">width</var>, <var title="">height</var>)</code></dfn>.
When invoked as a constructor, this must return a new <code><a href=#htmlimageelement>HTMLImageElement</a></code> object (a new
@@ -21951,10 +22543,10 @@
- <h5 id=alt><span class=secno>4.7.1.1 </span>Requirements for providing text to act as an alternative for images</h5>
+ <h5 id=alt><span class=secno>4.7.5.1 </span>Requirements for providing text to act as an alternative for images</h5>
- <h6 id=general-guidelines><span class=secno>4.7.1.1.1 </span>General guidelines</h6>
+ <h6 id=general-guidelines><span class=secno>4.7.5.1.1 </span>General guidelines</h6>
<p>Except where otherwise specified, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be
specified and its value must not be empty; the value must be an appropriate replacement for the
@@ -21982,7 +22574,7 @@
text.</p>
- <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.7.1.1.2 </span>A link or button containing nothing but the image</h6>
+ <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.7.5.1.2 </span>A link or button containing nothing but the image</h6>
<p>When an <a href=#the-a-element>a</a> element that creates a <a href=#hyperlink>hyperlink</a>, or a <code><a href=#the-button-element>button</a></code>
element, has no textual content but contains one or more images, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes must contain text that together convey the purpose of
@@ -22026,7 +22618,7 @@
- <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.7.1.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
+ <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.7.5.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
<p>Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a
diagram, a graph, or a simple map showing directions. In such cases, an image can be given using
@@ -22093,7 +22685,7 @@
</div>
- <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.7.1.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
+ <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.7.5.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
<p>A document can contain information in iconic form. The icon is intended to help users of visual
browsers to recognise features at a glance.</p>
@@ -22206,7 +22798,7 @@
</div>
- <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.7.1.1.5 </span>Text that has been rendered to a graphic for typographical effect</h6>
+ <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.7.5.1.5 </span>Text that has been rendered to a graphic for typographical effect</h6>
<p>Sometimes, an image just consists of text, and the purpose of the image is not to highlight the
actual typographic effects used to render the text, but just to convey the text itself.</p>
@@ -22261,7 +22853,7 @@
- <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.7.1.1.6 </span>A graphical representation of some of the surrounding text</h6>
+ <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.7.5.1.6 </span>A graphical representation of some of the surrounding text</h6>
<p>In many cases, the image is actually just supplementary, and its presence merely reinforces the
surrounding text. In these cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be
@@ -22340,7 +22932,7 @@
- <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.7.1.1.7 </span>A purely decorative image that doesn't add any information</h6>
+ <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.7.5.1.7 </span>A purely decorative image that doesn't add any information</h6>
<p>If an image is decorative but isn't especially page-specific — for example an image that
forms part of a site-wide design scheme — the image should be specified in the site's CSS,
@@ -22373,7 +22965,7 @@
</div>
- <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.7.1.1.8 </span>A group of images that form a single larger picture with no links</h6>
+ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.7.5.1.8 </span>A group of images that form a single larger picture with no links</h6>
<p>When a picture has been sliced into smaller image files that are then displayed together to
form the complete picture again, one of the images must have its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute set as per the relevant rules that would be appropriate
@@ -22404,7 +22996,7 @@
- <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.7.1.1.9 </span>A group of images that form a single larger picture with links</h6>
+ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.7.5.1.9 </span>A group of images that form a single larger picture with links</h6>
<p>Generally, <a href=#image-map title="image map">image maps</a> should be used instead of slicing an image
for links.</p>
@@ -22429,7 +23021,7 @@
- <h6 id=a-key-part-of-the-content><span class=secno>4.7.1.1.10 </span>A key part of the content</h6>
+ <h6 id=a-key-part-of-the-content><span class=secno>4.7.5.1.10 </span>A key part of the content</h6>
<p>In some cases, the image is a critical part of the content. This could be the case, for
instance, on a page that is part of a photo gallery. The image is the whole <em>point</em> of the
@@ -22701,7 +23293,7 @@
</dd>
- </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.7.1.1.11 </span>An image not intended for the user</h6>
+ </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.7.5.1.11 </span>An image not intended for the user</h6>
<p>Generally authors should avoid using <code><a href=#the-img-element>img</a></code> elements for purposes other than showing
images.</p>
@@ -22713,7 +23305,7 @@
<p>In such cases, the <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes should both be set to zero.</p>
- <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.7.1.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
+ <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.7.5.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
<p><i>This section does not apply to documents that are publicly accessible, or whose target
audience is not necessarily personally known to the author, such as documents on a Web site,
@@ -22732,7 +23324,7 @@
<div class=impl>
- <h6 id=guidance-for-markup-generators><span class=secno>4.7.1.1.13 </span>Guidance for markup generators</h6>
+ <h6 id=guidance-for-markup-generators><span class=secno>4.7.5.1.13 </span>Guidance for markup generators</h6>
<p>Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain
alternative text from their users. However, it is recognised that in many cases, this will not be
@@ -22777,7 +23369,7 @@
<div class=impl>
- <h6 id=guidance-for-conformance-checkers><span class=secno>4.7.1.1.14 </span>Guidance for conformance checkers</h6>
+ <h6 id=guidance-for-conformance-checkers><span class=secno>4.7.5.1.14 </span>Guidance for conformance checkers</h6>
<p>A conformance checker must report the lack of an <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
attribute as an error unless one of the conditions listed below applies:</p>
@@ -22812,7 +23404,7 @@
- <h4 id=the-iframe-element><span class=secno>4.7.2 </span>The <dfn><code>iframe</code></dfn> element</h4>
+ <h4 id=the-iframe-element><span class=secno>4.7.6 </span>The <dfn><code>iframe</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -23478,7 +24070,7 @@
- <h4 id=the-embed-element><span class=secno>4.7.3 </span>The <dfn><code>embed</code></dfn> element</h4>
+ <h4 id=the-embed-element><span class=secno>4.7.7 </span>The <dfn><code>embed</code></dfn> element</h4>
<!-- (v2?)
we have all kinds of quirks we should define if they come up during
@@ -23816,7 +24408,7 @@
- <h4 id=the-object-element><span class=secno>4.7.4 </span>The <dfn><code>object</code></dfn> element</h4>
+ <h4 id=the-object-element><span class=secno>4.7.8 </span>The <dfn><code>object</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -24538,7 +25130,7 @@
- <h4 id=the-param-element><span class=secno>4.7.5 </span>The <dfn><code>param</code></dfn> element</h4>
+ <h4 id=the-param-element><span class=secno>4.7.9 </span>The <dfn><code>param</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd>None.</dd>
@@ -24622,7 +25214,7 @@
<!--TOPIC:Video and Audio-->
- <h4 id=the-video-element><span class=secno>4.7.6 </span>The <dfn id=video><code>video</code></dfn> element</h4>
+ <h4 id=the-video-element><span class=secno>4.7.10 </span>The <dfn id=video><code>video</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -24945,7 +25537,7 @@
- <h4 id=the-audio-element><span class=secno>4.7.7 </span>The <dfn id=audio><code>audio</code></dfn> element</h4>
+ <h4 id=the-audio-element><span class=secno>4.7.11 </span>The <dfn id=audio><code>audio</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -25086,7 +25678,7 @@
- <h4 id=the-source-element><span class=secno>4.7.8 </span>The <dfn><code>source</code></dfn> element</h4>
+ <h4 id=the-source-element><span class=secno>4.7.12 </span>The <dfn><code>source</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd>None.</dd>
@@ -25254,7 +25846,7 @@
<!--TOPIC:Video Text Tracks-->
- <h4 id=the-track-element><span class=secno>4.7.9 </span>The <dfn><code>track</code></dfn> element</h4>
+ <h4 id=the-track-element><span class=secno>4.7.13 </span>The <dfn><code>track</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd>None.</dd>
@@ -25464,7 +26056,7 @@
</div>
<!--TOPIC:Video and Audio-->
- <h4 id=media-elements><span class=secno>4.7.10 </span>Media elements</h4>
+ <h4 id=media-elements><span class=secno>4.7.14 </span>Media elements</h4>
<p><dfn id=media-element title="media element">Media elements</dfn> (<code><a href=#the-audio-element>audio</a></code> and <code><a href=#the-video-element>video</a></code>, in
this specification) implement the following interface:</p>
@@ -25604,7 +26196,7 @@
- <h5 id=error-codes><span class=secno>4.7.10.1 </span>Error codes</h5>
+ <h5 id=error-codes><span class=secno>4.7.14.1 </span>Error codes</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>
@@ -25671,7 +26263,7 @@
<dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code>
attribute was not suitable.</dd>
- </dl><h5 id=location-of-the-media-resource><span class=secno>4.7.10.2 </span>Location of the media resource</h5>
+ </dl><h5 id=location-of-the-media-resource><span class=secno>4.7.14.2 </span>Location of the media resource</h5>
<p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content attribute on <a href=#media-element title="media
element">media elements</a> gives the address of the media resource (video, audio) to show. The
@@ -25730,7 +26322,7 @@
- <h5 id=mime-types><span class=secno>4.7.10.3 </span>MIME types</h5>
+ <h5 id=mime-types><span class=secno>4.7.14.3 </span>MIME types</h5>
<p>A <a href=#media-resource>media resource</a> can be described in terms of its <em>type</em>, specifically a
<a href=#mime-type>MIME type</a>, in some cases with a <code title="">codecs</code> parameter. (Whether the
@@ -25818,7 +26410,7 @@
it cannot render.</p>
- <h5 id=network-states><span class=secno>4.7.10.4 </span>Network states</h5>
+ <h5 id=network-states><span class=secno>4.7.14.4 </span>Network states</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>
@@ -25868,7 +26460,7 @@
- <h5 id=loading-the-media-resource><span class=secno>4.7.10.5 </span>Loading the media resource</h5>
+ <h5 id=loading-the-media-resource><span class=secno>4.7.14.5 </span>Loading the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>
@@ -26822,7 +27414,7 @@
- <h5 id=offsets-into-the-media-resource><span class=secno>4.7.10.6 </span>Offsets into the media resource</h5>
+ <h5 id=offsets-into-the-media-resource><span class=secno>4.7.14.6 </span>Offsets into the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>
@@ -27062,7 +27654,7 @@
- <h5 id=ready-states><span class=secno>4.7.10.7 </span>Ready states</h5>
+ <h5 id=ready-states><span class=secno>4.7.14.7 </span>Ready states</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>
@@ -27289,7 +27881,7 @@
- <h5 id=playing-the-media-resource><span class=secno>4.7.10.8 </span>Playing the media resource</h5>
+ <h5 id=playing-the-media-resource><span class=secno>4.7.14.8 </span>Playing the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>
@@ -27856,7 +28448,7 @@
- <h5 id=seeking><span class=secno>4.7.10.9 </span>Seeking</h5>
+ <h5 id=seeking><span class=secno>4.7.14.9 </span>Seeking</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>
@@ -28014,7 +28606,7 @@
</div>
- <h5 id=media-resources-with-multiple-media-tracks><span class=secno>4.7.10.10 </span>Media resources with multiple media tracks</h5>
+ <h5 id=media-resources-with-multiple-media-tracks><span class=secno>4.7.14.10 </span>Media resources with multiple media tracks</h5>
<p>A <a href=#media-resource>media resource</a> can have multiple embedded audio and video tracks. For example,
in addition to the primary video and audio tracks, a <a href=#media-resource>media resource</a> could have
@@ -28093,7 +28685,7 @@
</div>
- <h6 id=audiotracklist-and-videotracklist-objects><span class=secno>4.7.10.10.1 </span><code><a href=#audiotracklist>AudioTrackList</a></code> and <code><a href=#videotracklist>VideoTrackList</a></code> objects</h6>
+ <h6 id=audiotracklist-and-videotracklist-objects><span class=secno>4.7.14.10.1 </span><code><a href=#audiotracklist>AudioTrackList</a></code> and <code><a href=#videotracklist>VideoTrackList</a></code> objects</h6>
<p>The <code><a href=#audiotracklist>AudioTrackList</a></code> and <code><a href=#videotracklist>VideoTrackList</a></code> interfaces are used by
attributes defined in the previous section.</p>
@@ -28419,7 +29011,7 @@
</table><!-- v2 should also fire an event when the list changes (but note that that should be on the media element event task source) --></div>
- <h6 id=selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.7.10.10.2 </span>Selecting specific audio and video tracks declaratively</h6>
+ <h6 id=selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.7.14.10.2 </span>Selecting specific audio and video tracks declaratively</h6>
<p>The <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code> and <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code> attributes allow scripts to select which track
should play, but it is also possible to select specific tracks declaratively, by specifying
@@ -28438,9 +29030,9 @@
</div>
- <h5 id=synchronising-multiple-media-elements><span class=secno>4.7.10.11 </span>Synchronising multiple media elements</h5>
+ <h5 id=synchronising-multiple-media-elements><span class=secno>4.7.14.11 </span>Synchronising multiple media elements</h5>
- <h6 id=introduction-0><span class=secno>4.7.10.11.1 </span>Introduction</h6>
+ <h6 id=introduction-1><span class=secno>4.7.14.11.1 </span>Introduction</h6>
<p>Each <a href=#media-element>media element</a> can have a <code><a href=#mediacontroller>MediaController</a></code>. A
<code><a href=#mediacontroller>MediaController</a></code> is an object that coordinates the playback of multiple <a href=#media-element title="media element">media elements</a>, for instance so that a sign-language interpreter
@@ -28488,7 +29080,7 @@
-->
- <h6 id=media-controllers><span class=secno>4.7.10.11.2 </span>Media controllers</h6>
+ <h6 id=media-controllers><span class=secno>4.7.14.11.2 </span>Media controllers</h6>
<pre class=idl>enum <dfn id=mediacontrollerplaybackstate>MediaControllerPlaybackState</dfn> { "<a href=#dom-mediacontroller-waiting title=dom-MediaController-waiting>waiting</a>", "<a href=#dom-mediacontroller-playing title=dom-MediaController-playing>playing</a>", "<a href=#dom-mediacontroller-ended title=dom-MediaController-ended>ended</a>" };
[<a href=#dom-mediacontroller title=dom-MediaController>Constructor</a>]
@@ -29135,7 +29727,7 @@
</div>
- <h6 id=assigning-a-media-controller-declaratively><span class=secno>4.7.10.11.3 </span>Assigning a media controller declaratively</h6>
+ <h6 id=assigning-a-media-controller-declaratively><span class=secno>4.7.14.11.3 </span>Assigning a media controller declaratively</h6>
<p>The <dfn id=attr-media-mediagroup title=attr-media-mediagroup><code>mediagroup</code></dfn> content attribute on <a href=#media-element title="media element">media elements</a> can be used to link multiple <a href=#media-element title="media
element">media elements</a> together by implicitly creating a <code><a href=#mediacontroller>MediaController</a></code>. The
@@ -29244,9 +29836,9 @@
<!--TOPIC:Video Text Tracks-->
- <h5 id=timed-text-tracks><span class=secno>4.7.10.12 </span>Timed text tracks</h5>
+ <h5 id=timed-text-tracks><span class=secno>4.7.14.12 </span>Timed text tracks</h5>
- <h6 id=text-track-model><span class=secno>4.7.10.12.1 </span>Text track model</h6>
+ <h6 id=text-track-model><span class=secno>4.7.14.12.1 </span>Text track model</h6>
<p>A <a href=#media-element>media element</a> can have a group of associated <dfn id=text-track title="text track">text
tracks</dfn>, known as the <a href=#media-element>media element</a>'s <dfn id=list-of-text-tracks>list of text tracks</dfn>. The <a href=#text-track title="text track">text tracks</a> are sorted as follows:</p>
@@ -29598,7 +30190,7 @@
be the order in which the cues were listed in the file). <a href=#refsWEBVTT>[WEBVTT]</a></p>
- <h6 id=sourcing-in-band-text-tracks><span class=secno>4.7.10.12.2 </span>Sourcing in-band text tracks</h6>
+ <h6 id=sourcing-in-band-text-tracks><span class=secno>4.7.14.12.2 </span>Sourcing in-band text tracks</h6>
<p>A <dfn id=media-resource-specific-text-track>media-resource-specific text track</dfn> is a <a href=#text-track>text track</a> that corresponds
to data found in the <a href=#media-resource>media resource</a>.</p>
@@ -29725,7 +30317,7 @@
<div class=impl>
- <h6 id=sourcing-out-of-band-text-tracks><span class=secno>4.7.10.12.3 </span>Sourcing out-of-band text tracks</h6>
+ <h6 id=sourcing-out-of-band-text-tracks><span class=secno>4.7.14.12.3 </span>Sourcing out-of-band text tracks</h6>
<p>When a <code><a href=#the-track-element>track</a></code> element is created, it must be associated with a new <a href=#text-track>text
track</a> (with its value set as defined below) and its corresponding new
@@ -29994,7 +30586,7 @@
<div class=impl>
- <h6 id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.7.10.12.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as <a href=#text-track-cue title="text track
+ <h6 id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.7.14.12.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as <a href=#text-track-cue title="text track
cue">text track cues</a></h6>
<p>How a specific format's text track cues are to be interpreted for the purposes of processing by
@@ -30022,7 +30614,7 @@
</dl></div>
- <h6 id=text-track-api><span class=secno>4.7.10.12.5 </span>Text track API</h6>
+ <h6 id=text-track-api><span class=secno>4.7.14.12.5 </span>Text track API</h6>
<pre class=idl>interface <dfn id=texttracklist>TextTrackList</dfn> : <a href=#eventtarget>EventTarget</a> {
readonly attribute unsigned long <a href=#dom-texttracklist-length title=dom-TextTrackList-length>length</a>;
@@ -30549,7 +31141,7 @@
</div>
- <h6 id=text-tracks-describing-chapters><span class=secno>4.7.10.12.6 </span>Text tracks describing chapters</h6>
+ <h6 id=text-tracks-describing-chapters><span class=secno>4.7.14.12.6 </span>Text tracks describing chapters</h6>
<p>Chapters are segments of a <a href=#media-resource>media resource</a> with a given title. Chapters can be
nested, in the same way that sections in a document outline can have subsections.</p>
@@ -30673,7 +31265,7 @@
<div class=impl>
- <h6 id=cue-events><span class=secno>4.7.10.12.7 </span>Event handlers for objects of the text track APIs</h6>
+ <h6 id=cue-events><span class=secno>4.7.14.12.7 </span>Event handlers for objects of the text track APIs</h6>
<p>The following are the <a href=#event-handlers>event handlers</a> that (and their corresponding <a href=#event-handler-event-type title="event handler event type">event handler event types</a>) must be supported, as <a href=#event-handler-idl-attributes>event handler IDL
attributes</a>, by all objects implementing the <code><a href=#texttracklist>TextTrackList</a></code> interface:</p>
@@ -30697,7 +31289,7 @@
- <h6 id=best-practices-for-metadata-text-tracks><span class=secno>4.7.10.12.8 </span>Best practices for metadata text tracks</h6>
+ <h6 id=best-practices-for-metadata-text-tracks><span class=secno>4.7.14.12.8 </span>Best practices for metadata text tracks</h6>
<p><i>This section is non-normative.</i></p>
@@ -30768,7 +31360,7 @@
- <h5 id=user-interface><span class=secno>4.7.10.13 </span>User interface</h5>
+ <h5 id=user-interface><span class=secno>4.7.14.13 </span>User interface</h5>
<p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn> attribute is a <a href=#boolean-attribute>boolean
attribute</a>. If present, it indicates that the author has not provided a scripted controller
@@ -30996,7 +31588,7 @@
- <h5 id=time-ranges><span class=secno>4.7.10.14 </span>Time ranges</h5>
+ <h5 id=time-ranges><span class=secno>4.7.14.14 </span>Time ranges</h5>
<p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
represent a list of ranges (periods) of time.</p>
@@ -31074,7 +31666,7 @@
</div>
- <h5 id=the-trackevent-interface><span class=secno>4.7.10.15 </span>The <code><a href=#trackevent>TrackEvent</a></code> interface</h5>
+ <h5 id=the-trackevent-interface><span class=secno>4.7.14.15 </span>The <code><a href=#trackevent>TrackEvent</a></code> interface</h5>
<pre class=idl>[Constructor(DOMString type, optional <a href=#trackeventinit>TrackEventInit</a> eventInitDict)]
interface <dfn id=trackevent>TrackEvent</dfn> : <a href=#event>Event</a> {
@@ -31104,7 +31696,7 @@
- <h5 id=mediaevents><span class=secno>4.7.10.16 </span>Event summary</h5>
+ <h5 id=mediaevents><span class=secno>4.7.14.16 </span>Event summary</h5>
<p><i>This section is non-normative.</i></p>
@@ -31496,7 +32088,7 @@
</table><!--ADD-TOPIC:Security--><div class=impl>
- <h5 id=security-and-privacy-considerations><span class=secno>4.7.10.17 </span>Security and privacy considerations</h5>
+ <h5 id=security-and-privacy-considerations><span class=secno>4.7.14.17 </span>Security and privacy considerations</h5>
<p>The main security and privacy implications of the <code><a href=#the-video-element>video</a></code> and <code><a href=#the-audio-element>audio</a></code>
elements come from the ability to embed media cross-origin. There are two directions that threats
@@ -31535,7 +32127,7 @@
<!--REMOVE-TOPIC:Security-->
- <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.7.10.18 </span>Best practices for authors using media elements</h5>
+ <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.7.14.18 </span>Best practices for authors using media elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -31553,7 +32145,7 @@
<div class=impl>
- <h5 id=best-practices-for-implementors-of-media-elements><span class=secno>4.7.10.19 </span>Best practices for implementors of media elements</h5>
+ <h5 id=best-practices-for-implementors-of-media-elements><span class=secno>4.7.14.19 </span>Best practices for implementors of media elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -31602,7 +32194,7 @@
- <h4 id=the-map-element><span class=secno>4.7.11 </span>The <dfn><code>map</code></dfn> element</h4>
+ <h4 id=the-map-element><span class=secno>4.7.15 </span>The <dfn><code>map</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31704,7 +32296,7 @@
- <h4 id=the-area-element><span class=secno>4.7.12 </span>The <dfn><code>area</code></dfn> element</h4>
+ <h4 id=the-area-element><span class=secno>4.7.16 </span>The <dfn><code>area</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31907,7 +32499,7 @@
- <h4 id=image-maps><span class=secno>4.7.13 </span>Image maps</h4>
+ <h4 id=image-maps><span class=secno>4.7.17 </span>Image maps</h4>
<!-- TESTS
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
@@ -31918,7 +32510,7 @@
<div class=impl>
- <h5 id=authoring><span class=secno>4.7.13.1 </span>Authoring</h5>
+ <h5 id=authoring><span class=secno>4.7.17.1 </span>Authoring</h5>
</div>
@@ -31956,7 +32548,7 @@
<div class=impl>
- <h5 id=processing-model-0><span class=secno>4.7.13.2 </span>Processing model</h5>
+ <h5 id=processing-model-0><span class=secno>4.7.17.2 </span>Processing model</h5>
<p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element representing an image has a
<code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified, user agents must process it
@@ -32138,7 +32730,7 @@
- <h4 id=mathml><span class=secno>4.7.14 </span>MathML</h4>
+ <h4 id=mathml><span class=secno>4.7.18 </span>MathML</h4>
<p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML namespace</a> falls into the
<a href=#embedded-content-category>embedded content</a>, <a href=#phrasing-content>phrasing content</a>, and <a href=#flow-content>flow content</a>
@@ -32212,7 +32804,7 @@
- <h4 id=svg-0><span class=secno>4.7.15 </span>SVG</h4>
+ <h4 id=svg-0><span class=secno>4.7.19 </span>SVG</h4>
<p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG namespace</a> falls into the
<a href=#embedded-content-category>embedded content</a>, <a href=#phrasing-content>phrasing content</a>, and <a href=#flow-content>flow content</a>
@@ -32238,7 +32830,7 @@
- <h4 id=dimension-attributes><span class=secno>4.7.16 </span><dfn>Dimension attributes</dfn></h4>
+ <h4 id=dimension-attributes><span class=secno>4.7.20 </span><dfn>Dimension attributes</dfn></h4>
<p><span class=impl><strong>Author requirements</strong>:</span> The <dfn id=attr-dim-width title=attr-dim-width><code>width</code></dfn> and <dfn id=attr-dim-height title=attr-dim-height><code>height</code></dfn> attributes on <code><a href=#the-img-element>img</a></code>,
<code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-video-element>video</a></code>, and, when their
@@ -32298,7 +32890,7 @@
<h3 id=links><span class=secno>4.8 </span>Links</h3>
- <h4 id=introduction-1><span class=secno>4.8.1 </span>Introduction</h4>
+ <h4 id=introduction-2><span class=secno>4.8.1 </span>Introduction</h4>
<p>Links are a conceptual construct, created by <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, and
<code><a href=#the-link-element>link</a></code> elements, that <a href=#represents title=represents>represent</a> a connection between
@@ -37504,7 +38096,7 @@
<p><img width=414 src=http://images.whatwg.org/sample-table-sortable-3.png alt="The same table, but with the second column header's interactive affordance marked as selected and reversed, with the IP addresses sorted in reverse numeric order (first the row with the address ending in '199', then the row with the address ending in '29', and finally the rows with the address ending in '3'." height=109><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
- <h4 id=introduction-2><span class=secno>4.10.1 </span>Introduction</h4>
+ <h4 id=introduction-3><span class=secno>4.10.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -50178,7 +50770,7 @@
<div class=impl>
- <h5 id=introduction-3><span class=secno>4.10.22.1 </span>Introduction</h5>
+ <h5 id=introduction-4><span class=secno>4.10.22.1 </span>Introduction</h5>
</div>
@@ -61685,7 +62277,7 @@
-->
- <h3 id=introduction-4><span class=secno>5.1 </span>Introduction</h3>
+ <h3 id=introduction-5><span class=secno>5.1 </span>Introduction</h3>
<h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>
@@ -65601,7 +66193,7 @@
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeactivate.asp
-->
- <h4 id=introduction-5><span class=secno>6.4.1 </span>Introduction</h4>
+ <h4 id=introduction-6><span class=secno>6.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -66760,7 +67352,7 @@
<h3 id=assigning-keyboard-shortcuts><span class=secno>6.5 </span>Assigning keyboard shortcuts</h3>
- <h4 id=introduction-6><span class=secno>6.5.1 </span>Introduction</h4>
+ <h4 id=introduction-7><span class=secno>6.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -67386,7 +67978,7 @@
</div>
- <h4 id=introduction-7><span class=secno>6.7.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>6.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -74104,7 +74696,7 @@
-->
- <h4 id=introduction-8><span class=secno>7.7.1 </span>Introduction</h4>
+ <h4 id=introduction-9><span class=secno>7.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -76056,7 +76648,7 @@
<h3 id=scripting><span class=secno>8.1 </span>Scripting</h3>
- <h4 id=introduction-9><span class=secno>8.1.1 </span>Introduction</h4>
+ <h4 id=introduction-10><span class=secno>8.1.1 </span>Introduction</h4>
<p>Various mechanisms can cause author-provided executable code to run in the context of a
document. These mechanisms include, but are probably not limited to:</p>
@@ -82464,7 +83056,7 @@
</div>
- <h4 id=introduction-10><span class=secno>9.4.1 </span>Introduction</h4>
+ <h4 id=introduction-11><span class=secno>9.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -82685,7 +83277,7 @@
<h3 id=channel-messaging><span class=secno>9.5 </span><dfn>Channel messaging</dfn></h3>
- <h4 id=introduction-11><span class=secno>9.5.1 </span>Introduction</h4>
+ <h4 id=introduction-12><span class=secno>9.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -83715,7 +84307,7 @@
- <h3 id=introduction-12><span class=secno>10.1 </span>Introduction</h3>
+ <h3 id=introduction-13><span class=secno>10.1 </span>Introduction</h3>
<h4 id=scope-0><span class=secno>10.1.1 </span>Scope</h4>
@@ -85736,7 +86328,7 @@
- <h3 id=introduction-13><span class=secno>11.1 </span>Introduction</h3>
+ <h3 id=introduction-14><span class=secno>11.1 </span>Introduction</h3>
<p><i>This section is non-normative.</i></p>
@@ -96004,7 +96596,7 @@
section has the same conformance implications as the RFC2119-defined term "must".</i></p>
- <h3 id=introduction-14><span class=secno>14.1 </span>Introduction</h3>
+ <h3 id=introduction-15><span class=secno>14.1 </span>Introduction</h3>
<p>In general, user agents are expected to support CSS, and many of the suggestions in this
section are expressed in CSS terms. User agents that use other presentation mechanisms can derive
@@ -97530,7 +98122,7 @@
<h3 id=bindings><span class=secno>14.5 </span>Bindings</h3> <!-- a binding -->
- <h4 id=introduction-15><span class=secno>14.5.1 </span>Introduction</h4>
+ <h4 id=introduction-16><span class=secno>14.5.1 </span>Introduction</h4>
<p>A number of elements have their rendering defined in terms of the 'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
@@ -103955,6 +104547,7 @@
<li><code><a href=#htmloutputelement>HTMLOutputElement</a></code>
<li><code><a href=#htmlparagraphelement>HTMLParagraphElement</a></code>, <a href=#HTMLParagraphElement-partial>partial</a>
<li><code><a href=#htmlparamelement>HTMLParamElement</a></code>, <a href=#HTMLParamElement-partial>partial</a>
+ <li><code><a href=#htmlpictureelement>HTMLPictureElement</a></code>
<li><code><a href=#htmlpreelement>HTMLPreElement</a></code>, <a href=#HTMLPreElement-partial>partial</a>
<li><code><a href=#htmlprogresselement>HTMLProgressElement</a></code>
<li><code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code>
Modified: index
===================================================================
--- index 2014-06-13 22:00:22 UTC (rev 8679)
+++ index 2014-06-17 17:41:49 UTC (rev 8680)
@@ -290,7 +290,7 @@
</script><body onload=init()>
<header class="head with-buttons" id=head><p><a href=//www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 13 June 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 17 June 2014</h2>
</hgroup><div>
<div>
<a href=//whatwg.org/html><span><strong>Multipage Version</strong> <code>whatwg.org/html</code></span></a>
@@ -574,81 +574,85 @@
<li><a href=#edits-and-tables><span class=secno>4.6.6 </span>Edits and tables</a></ol></li>
<li><a href=#embedded-content><span class=secno>4.7 </span>Embedded content</a>
<ol>
- <li><a href=#the-img-element><span class=secno>4.7.1 </span>The <code>img</code> element</a>
+ <li><a href=#introduction-0><span class=secno>4.7.1 </span>Introduction</a></li>
+ <li><a href=#dependencies-0><span class=secno>4.7.2 </span>Dependencies</a></li>
+ <li><a href=#the-picture-element><span class=secno>4.7.3 </span>The <code>picture</code> element</a></li>
+ <li><a href=#the-source-element-when-used-with-the-picture-element><span class=secno>4.7.4 </span>The <code>source</code> element when used with the <code>picture</code> element</a></li>
+ <li><a href=#the-img-element><span class=secno>4.7.5 </span>The <code>img</code> element</a>
<ol>
- <li><a href=#alt><span class=secno>4.7.1.1 </span>Requirements for providing text to act as an alternative for images</a>
+ <li><a href=#alt><span class=secno>4.7.5.1 </span>Requirements for providing text to act as an alternative for images</a>
<ol>
- <li><a href=#general-guidelines><span class=secno>4.7.1.1.1 </span>General guidelines</a></li>
- <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.7.1.1.2 </span>A link or button containing nothing but the image</a></li>
- <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.7.1.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
- <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.7.1.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
- <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.7.1.1.5 </span>Text that has been rendered to a graphic for typographical effect</a></li>
- <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.7.1.1.6 </span>A graphical representation of some of the surrounding text</a></li>
- <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.7.1.1.7 </span>A purely decorative image that doesn't add any information</a></li>
- <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.7.1.1.8 </span>A group of images that form a single larger picture with no links</a></li>
- <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.7.1.1.9 </span>A group of images that form a single larger picture with links</a></li>
- <li><a href=#a-key-part-of-the-content><span class=secno>4.7.1.1.10 </span>A key part of the content</a></li>
- <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.7.1.1.11 </span>An image not intended for the user</a></li>
- <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.7.1.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
- <li><a href=#guidance-for-markup-generators><span class=secno>4.7.1.1.13 </span>Guidance for markup generators</a></li>
- <li><a href=#guidance-for-conformance-checkers><span class=secno>4.7.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
- <li><a href=#the-iframe-element><span class=secno>4.7.2 </span>The <code>iframe</code> element</a></li>
- <li><a href=#the-embed-element><span class=secno>4.7.3 </span>The <code>embed</code> element</a></li>
- <li><a href=#the-object-element><span class=secno>4.7.4 </span>The <code>object</code> element</a></li>
- <li><a href=#the-param-element><span class=secno>4.7.5 </span>The <code>param</code> element</a></li>
- <li><a href=#the-video-element><span class=secno>4.7.6 </span>The <code>video</code> element</a></li>
- <li><a href=#the-audio-element><span class=secno>4.7.7 </span>The <code>audio</code> element</a></li>
- <li><a href=#the-source-element><span class=secno>4.7.8 </span>The <code>source</code> element</a></li>
- <li><a href=#the-track-element><span class=secno>4.7.9 </span>The <code>track</code> element</a></li>
- <li><a href=#media-elements><span class=secno>4.7.10 </span>Media elements</a>
+ <li><a href=#general-guidelines><span class=secno>4.7.5.1.1 </span>General guidelines</a></li>
+ <li><a href=#a-link-or-button-containing-nothing-but-the-image><span class=secno>4.7.5.1.2 </span>A link or button containing nothing but the image</a></li>
+ <li><a href=#a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.7.5.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</a></li>
+ <li><a href=#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.7.5.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</a></li>
+ <li><a href=#text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.7.5.1.5 </span>Text that has been rendered to a graphic for typographical effect</a></li>
+ <li><a href=#a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.7.5.1.6 </span>A graphical representation of some of the surrounding text</a></li>
+ <li><a href="#a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.7.5.1.7 </span>A purely decorative image that doesn't add any information</a></li>
+ <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.7.5.1.8 </span>A group of images that form a single larger picture with no links</a></li>
+ <li><a href=#a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.7.5.1.9 </span>A group of images that form a single larger picture with links</a></li>
+ <li><a href=#a-key-part-of-the-content><span class=secno>4.7.5.1.10 </span>A key part of the content</a></li>
+ <li><a href=#an-image-not-intended-for-the-user><span class=secno>4.7.5.1.11 </span>An image not intended for the user</a></li>
+ <li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.7.5.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
+ <li><a href=#guidance-for-markup-generators><span class=secno>4.7.5.1.13 </span>Guidance for markup generators</a></li>
+ <li><a href=#guidance-for-conformance-checkers><span class=secno>4.7.5.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
+ <li><a href=#the-iframe-element><span class=secno>4.7.6 </span>The <code>iframe</code> element</a></li>
+ <li><a href=#the-embed-element><span class=secno>4.7.7 </span>The <code>embed</code> element</a></li>
+ <li><a href=#the-object-element><span class=secno>4.7.8 </span>The <code>object</code> element</a></li>
+ <li><a href=#the-param-element><span class=secno>4.7.9 </span>The <code>param</code> element</a></li>
+ <li><a href=#the-video-element><span class=secno>4.7.10 </span>The <code>video</code> element</a></li>
+ <li><a href=#the-audio-element><span class=secno>4.7.11 </span>The <code>audio</code> element</a></li>
+ <li><a href=#the-source-element><span class=secno>4.7.12 </span>The <code>source</code> element</a></li>
+ <li><a href=#the-track-element><span class=secno>4.7.13 </span>The <code>track</code> element</a></li>
+ <li><a href=#media-elements><span class=secno>4.7.14 </span>Media elements</a>
<ol>
- <li><a href=#error-codes><span class=secno>4.7.10.1 </span>Error codes</a></li>
- <li><a href=#location-of-the-media-resource><span class=secno>4.7.10.2 </span>Location of the media resource</a></li>
- <li><a href=#mime-types><span class=secno>4.7.10.3 </span>MIME types</a></li>
- <li><a href=#network-states><span class=secno>4.7.10.4 </span>Network states</a></li>
- <li><a href=#loading-the-media-resource><span class=secno>4.7.10.5 </span>Loading the media resource</a></li>
- <li><a href=#offsets-into-the-media-resource><span class=secno>4.7.10.6 </span>Offsets into the media resource</a></li>
- <li><a href=#ready-states><span class=secno>4.7.10.7 </span>Ready states</a></li>
- <li><a href=#playing-the-media-resource><span class=secno>4.7.10.8 </span>Playing the media resource</a></li>
- <li><a href=#seeking><span class=secno>4.7.10.9 </span>Seeking</a></li>
- <li><a href=#media-resources-with-multiple-media-tracks><span class=secno>4.7.10.10 </span>Media resources with multiple media tracks</a>
+ <li><a href=#error-codes><span class=secno>4.7.14.1 </span>Error codes</a></li>
+ <li><a href=#location-of-the-media-resource><span class=secno>4.7.14.2 </span>Location of the media resource</a></li>
+ <li><a href=#mime-types><span class=secno>4.7.14.3 </span>MIME types</a></li>
+ <li><a href=#network-states><span class=secno>4.7.14.4 </span>Network states</a></li>
+ <li><a href=#loading-the-media-resource><span class=secno>4.7.14.5 </span>Loading the media resource</a></li>
+ <li><a href=#offsets-into-the-media-resource><span class=secno>4.7.14.6 </span>Offsets into the media resource</a></li>
+ <li><a href=#ready-states><span class=secno>4.7.14.7 </span>Ready states</a></li>
+ <li><a href=#playing-the-media-resource><span class=secno>4.7.14.8 </span>Playing the media resource</a></li>
+ <li><a href=#seeking><span class=secno>4.7.14.9 </span>Seeking</a></li>
+ <li><a href=#media-resources-with-multiple-media-tracks><span class=secno>4.7.14.10 </span>Media resources with multiple media tracks</a>
<ol>
- <li><a href=#audiotracklist-and-videotracklist-objects><span class=secno>4.7.10.10.1 </span><code>AudioTrackList</code> and <code>VideoTrackList</code> objects</a></li>
- <li><a href=#selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.7.10.10.2 </span>Selecting specific audio and video tracks declaratively</a></ol></li>
- <li><a href=#synchronising-multiple-media-elements><span class=secno>4.7.10.11 </span>Synchronising multiple media elements</a>
+ <li><a href=#audiotracklist-and-videotracklist-objects><span class=secno>4.7.14.10.1 </span><code>AudioTrackList</code> and <code>VideoTrackList</code> objects</a></li>
+ <li><a href=#selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.7.14.10.2 </span>Selecting specific audio and video tracks declaratively</a></ol></li>
+ <li><a href=#synchronising-multiple-media-elements><span class=secno>4.7.14.11 </span>Synchronising multiple media elements</a>
<ol>
- <li><a href=#introduction-0><span class=secno>4.7.10.11.1 </span>Introduction</a></li>
- <li><a href=#media-controllers><span class=secno>4.7.10.11.2 </span>Media controllers</a></li>
- <li><a href=#assigning-a-media-controller-declaratively><span class=secno>4.7.10.11.3 </span>Assigning a media controller declaratively</a></ol></li>
- <li><a href=#timed-text-tracks><span class=secno>4.7.10.12 </span>Timed text tracks</a>
+ <li><a href=#introduction-1><span class=secno>4.7.14.11.1 </span>Introduction</a></li>
+ <li><a href=#media-controllers><span class=secno>4.7.14.11.2 </span>Media controllers</a></li>
+ <li><a href=#assigning-a-media-controller-declaratively><span class=secno>4.7.14.11.3 </span>Assigning a media controller declaratively</a></ol></li>
+ <li><a href=#timed-text-tracks><span class=secno>4.7.14.12 </span>Timed text tracks</a>
<ol>
- <li><a href=#text-track-model><span class=secno>4.7.10.12.1 </span>Text track model</a></li>
- <li><a href=#sourcing-in-band-text-tracks><span class=secno>4.7.10.12.2 </span>Sourcing in-band text tracks</a></li>
- <li><a href=#sourcing-out-of-band-text-tracks><span class=secno>4.7.10.12.3 </span>Sourcing out-of-band text tracks</a></li>
- <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.7.10.12.4 </span>Guidelines for exposing cues in various formats as text track cues</a></li>
- <li><a href=#text-track-api><span class=secno>4.7.10.12.5 </span>Text track API</a></li>
- <li><a href=#text-tracks-describing-chapters><span class=secno>4.7.10.12.6 </span>Text tracks describing chapters</a></li>
- <li><a href=#cue-events><span class=secno>4.7.10.12.7 </span>Event handlers for objects of the text track APIs</a></li>
- <li><a href=#best-practices-for-metadata-text-tracks><span class=secno>4.7.10.12.8 </span>Best practices for metadata text tracks</a></ol></li>
- <li><a href=#user-interface><span class=secno>4.7.10.13 </span>User interface</a></li>
- <li><a href=#time-ranges><span class=secno>4.7.10.14 </span>Time ranges</a></li>
- <li><a href=#the-trackevent-interface><span class=secno>4.7.10.15 </span>The <code>TrackEvent</code> interface</a></li>
- <li><a href=#mediaevents><span class=secno>4.7.10.16 </span>Event summary</a></li>
- <li><a href=#security-and-privacy-considerations><span class=secno>4.7.10.17 </span>Security and privacy considerations</a></li>
- <li><a href=#best-practices-for-authors-using-media-elements><span class=secno>4.7.10.18 </span>Best practices for authors using media elements</a></li>
- <li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.7.10.19 </span>Best practices for implementors of media elements</a></ol></li>
- <li><a href=#the-map-element><span class=secno>4.7.11 </span>The <code>map</code> element</a></li>
- <li><a href=#the-area-element><span class=secno>4.7.12 </span>The <code>area</code> element</a></li>
- <li><a href=#image-maps><span class=secno>4.7.13 </span>Image maps</a>
+ <li><a href=#text-track-model><span class=secno>4.7.14.12.1 </span>Text track model</a></li>
+ <li><a href=#sourcing-in-band-text-tracks><span class=secno>4.7.14.12.2 </span>Sourcing in-band text tracks</a></li>
+ <li><a href=#sourcing-out-of-band-text-tracks><span class=secno>4.7.14.12.3 </span>Sourcing out-of-band text tracks</a></li>
+ <li><a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.7.14.12.4 </span>Guidelines for exposing cues in various formats as text track cues</a></li>
+ <li><a href=#text-track-api><span class=secno>4.7.14.12.5 </span>Text track API</a></li>
+ <li><a href=#text-tracks-describing-chapters><span class=secno>4.7.14.12.6 </span>Text tracks describing chapters</a></li>
+ <li><a href=#cue-events><span class=secno>4.7.14.12.7 </span>Event handlers for objects of the text track APIs</a></li>
+ <li><a href=#best-practices-for-metadata-text-tracks><span class=secno>4.7.14.12.8 </span>Best practices for metadata text tracks</a></ol></li>
+ <li><a href=#user-interface><span class=secno>4.7.14.13 </span>User interface</a></li>
+ <li><a href=#time-ranges><span class=secno>4.7.14.14 </span>Time ranges</a></li>
+ <li><a href=#the-trackevent-interface><span class=secno>4.7.14.15 </span>The <code>TrackEvent</code> interface</a></li>
+ <li><a href=#mediaevents><span class=secno>4.7.14.16 </span>Event summary</a></li>
+ <li><a href=#security-and-privacy-considerations><span class=secno>4.7.14.17 </span>Security and privacy considerations</a></li>
+ <li><a href=#best-practices-for-authors-using-media-elements><span class=secno>4.7.14.18 </span>Best practices for authors using media elements</a></li>
+ <li><a href=#best-practices-for-implementors-of-media-elements><span class=secno>4.7.14.19 </span>Best practices for implementors of media elements</a></ol></li>
+ <li><a href=#the-map-element><span class=secno>4.7.15 </span>The <code>map</code> element</a></li>
+ <li><a href=#the-area-element><span class=secno>4.7.16 </span>The <code>area</code> element</a></li>
+ <li><a href=#image-maps><span class=secno>4.7.17 </span>Image maps</a>
<ol>
- <li><a href=#authoring><span class=secno>4.7.13.1 </span>Authoring</a></li>
- <li><a href=#processing-model-0><span class=secno>4.7.13.2 </span>Processing model</a></ol></li>
- <li><a href=#mathml><span class=secno>4.7.14 </span>MathML</a></li>
- <li><a href=#svg-0><span class=secno>4.7.15 </span>SVG</a></li>
- <li><a href=#dimension-attributes><span class=secno>4.7.16 </span>Dimension attributes</a></ol></li>
+ <li><a href=#authoring><span class=secno>4.7.17.1 </span>Authoring</a></li>
+ <li><a href=#processing-model-0><span class=secno>4.7.17.2 </span>Processing model</a></ol></li>
+ <li><a href=#mathml><span class=secno>4.7.18 </span>MathML</a></li>
+ <li><a href=#svg-0><span class=secno>4.7.19 </span>SVG</a></li>
+ <li><a href=#dimension-attributes><span class=secno>4.7.20 </span>Dimension attributes</a></ol></li>
<li><a href=#links><span class=secno>4.8 </span>Links</a>
<ol>
- <li><a href=#introduction-1><span class=secno>4.8.1 </span>Introduction</a></li>
+ <li><a href=#introduction-2><span class=secno>4.8.1 </span>Introduction</a></li>
<li><a href=#links-created-by-a-and-area-elements><span class=secno>4.8.2 </span>Links created by <code>a</code> and <code>area</code> elements</a></li>
<li><a href=#following-hyperlinks-0><span class=secno>4.8.3 </span>Following hyperlinks</a></li>
<li><a href=#downloading-resources><span class=secno>4.8.4 </span>Downloading resources</a>
@@ -700,7 +704,7 @@
<li><a href=#table-examples><span class=secno>4.9.14 </span>Examples</a></ol></li>
<li><a href=#forms><span class=secno>4.10 </span>Forms</a>
<ol>
- <li><a href=#introduction-2><span class=secno>4.10.1 </span>Introduction</a>
+ <li><a href=#introduction-3><span class=secno>4.10.1 </span>Introduction</a>
<ol>
<li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
<li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
@@ -797,7 +801,7 @@
<li><a href=#security-forms><span class=secno>4.10.21.4 </span>Security</a></ol></li>
<li><a href=#form-submission><span class=secno>4.10.22 </span>Form submission</a>
<ol>
- <li><a href=#introduction-3><span class=secno>4.10.22.1 </span>Introduction</a></li>
+ <li><a href=#introduction-4><span class=secno>4.10.22.1 </span>Introduction</a></li>
<li><a href=#implicit-submission><span class=secno>4.10.22.2 </span>Implicit submission</a></li>
<li><a href=#form-submission-algorithm><span class=secno>4.10.22.3 </span>Form submission algorithm</a></li>
<li><a href=#constructing-form-data-set><span class=secno>4.10.22.4 </span>Constructing the form data set</a></li>
@@ -893,7 +897,7 @@
<li><a href=#pseudo-classes><span class=secno>4.15.2 </span>Pseudo-classes</a></ol></ol></li>
<li><a href=#microdata><span class=secno>5 </span>Microdata</a>
<ol>
- <li><a href=#introduction-4><span class=secno>5.1 </span>Introduction</a>
+ <li><a href=#introduction-5><span class=secno>5.1 </span>Introduction</a>
<ol>
<li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
<li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
@@ -933,7 +937,7 @@
<li><a href=#activation><span class=secno>6.3 </span>Activation</a></li>
<li><a href=#focus><span class=secno>6.4 </span>Focus</a>
<ol>
- <li><a href=#introduction-5><span class=secno>6.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-6><span class=secno>6.4.1 </span>Introduction</a></li>
<li><a href=#data-model><span class=secno>6.4.2 </span>Data model</a></li>
<li><a href=#the-tabindex-attribute><span class=secno>6.4.3 </span>The <code title=attr-tabindex>tabindex</code> attribute</a></li>
<li><a href=#processing-model-4><span class=secno>6.4.4 </span>Processing model</a></li>
@@ -941,7 +945,7 @@
<li><a href=#focus-management-apis><span class=secno>6.4.6 </span>Focus management APIs</a></ol></li>
<li><a href=#assigning-keyboard-shortcuts><span class=secno>6.5 </span>Assigning keyboard shortcuts</a>
<ol>
- <li><a href=#introduction-6><span class=secno>6.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-7><span class=secno>6.5.1 </span>Introduction</a></li>
<li><a href=#the-accesskey-attribute><span class=secno>6.5.2 </span>The <code>accesskey</code> attribute</a></li>
<li><a href=#processing-model-5><span class=secno>6.5.3 </span>Processing model</a></ol></li>
<li><a href=#editing-0><span class=secno>6.6 </span>Editing</a>
@@ -953,7 +957,7 @@
<li><a href=#spelling-and-grammar-checking><span class=secno>6.6.5 </span>Spelling and grammar checking</a></ol></li>
<li><a href=#dnd><span class=secno>6.7 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-7><span class=secno>6.7.1 </span>Introduction</a></li>
+ <li><a href=#introduction-8><span class=secno>6.7.1 </span>Introduction</a></li>
<li><a href=#the-drag-data-store><span class=secno>6.7.2 </span>The drag data store</a></li>
<li><a href=#the-datatransfer-interface><span class=secno>6.7.3 </span>The <code>DataTransfer</code> interface</a>
<ol>
@@ -1024,7 +1028,7 @@
<li><a href=#aborting-a-document-load><span class=secno>7.6.12 </span>Aborting a document load</a></ol></li>
<li><a href=#offline><span class=secno>7.7 </span>Offline Web applications</a>
<ol>
- <li><a href=#introduction-8><span class=secno>7.7.1 </span>Introduction</a>
+ <li><a href=#introduction-9><span class=secno>7.7.1 </span>Introduction</a>
<ol>
<li><a href=#supporting-offline-caching-for-legacy-applications><span class=secno>7.7.1.1 </span>Supporting offline caching for legacy applications</a></li>
<li><a href=#appcacheevents><span class=secno>7.7.1.2 </span>Event summary</a></ol></li>
@@ -1045,7 +1049,7 @@
<ol>
<li><a href=#scripting><span class=secno>8.1 </span>Scripting</a>
<ol>
- <li><a href=#introduction-9><span class=secno>8.1.1 </span>Introduction</a></li>
+ <li><a href=#introduction-10><span class=secno>8.1.1 </span>Introduction</a></li>
<li><a href=#enabling-and-disabling-scripting><span class=secno>8.1.2 </span>Enabling and disabling scripting</a></li>
<li><a href=#processing-model-6><span class=secno>8.1.3 </span>Processing model</a>
<ol>
@@ -1127,7 +1131,7 @@
<li><a href=#garbage-collection-1><span class=secno>9.3.7 </span>Garbage collection</a></ol></li>
<li><a href=#web-messaging><span class=secno>9.4 </span>Cross-document messaging</a>
<ol>
- <li><a href=#introduction-10><span class=secno>9.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-11><span class=secno>9.4.1 </span>Introduction</a></li>
<li><a href=#security-postmsg><span class=secno>9.4.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>9.4.2.1 </span>Authors</a></li>
@@ -1135,7 +1139,7 @@
<li><a href=#posting-messages><span class=secno>9.4.3 </span>Posting messages</a></ol></li>
<li><a href=#channel-messaging><span class=secno>9.5 </span>Channel messaging</a>
<ol>
- <li><a href=#introduction-11><span class=secno>9.5.1 </span>Introduction</a>
+ <li><a href=#introduction-12><span class=secno>9.5.1 </span>Introduction</a>
<ol>
<li><a href=#examples-3><span class=secno>9.5.1.1 </span>Examples</a></li>
<li><a href=#ports-as-the-basis-of-an-object-capability-model-on-the-web><span class=secno>9.5.1.2 </span>Ports as the basis of an object-capability model on the Web</a></li>
@@ -1147,7 +1151,7 @@
<li><a href=#broadcasting-to-other-browsing-contexts><span class=secno>9.6 </span>Broadcasting to other browsing contexts</a></ol></li>
<li><a href=#workers><span class=secno>10 </span>Web workers</a>
<ol>
- <li><a href=#introduction-12><span class=secno>10.1 </span>Introduction</a>
+ <li><a href=#introduction-13><span class=secno>10.1 </span>Introduction</a>
<ol>
<li><a href=#scope-0><span class=secno>10.1.1 </span>Scope</a></li>
<li><a href=#examples-4><span class=secno>10.1.2 </span>Examples</a>
@@ -1186,7 +1190,7 @@
<li><a href=#worker-locations><span class=secno>10.3.3 </span>Worker locations</a></ol></ol></li>
<li><a href=#webstorage><span class=secno>11 </span>Web storage</a>
<ol>
- <li><a href=#introduction-13><span class=secno>11.1 </span>Introduction</a></li>
+ <li><a href=#introduction-14><span class=secno>11.1 </span>Introduction</a></li>
<li><a href=#storage><span class=secno>11.2 </span>The API</a>
<ol>
<li><a href=#the-storage-interface><span class=secno>11.2.1 </span>The <code>Storage</code> interface</a></li>
@@ -1365,7 +1369,7 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>13.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>14 </span>Rendering</a>
<ol>
- <li><a href=#introduction-14><span class=secno>14.1 </span>Introduction</a></li>
+ <li><a href=#introduction-15><span class=secno>14.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>14.2 </span>The CSS user agent style sheet and presentational hints</a></li>
<li><a href=#non-replaced-elements><span class=secno>14.3 </span>Non-replaced elements</a>
<ol>
@@ -1390,7 +1394,7 @@
<li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></ol></li>
<li><a href=#bindings><span class=secno>14.5 </span>Bindings</a>
<ol>
- <li><a href=#introduction-15><span class=secno>14.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-16><span class=secno>14.5.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>14.5.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>14.5.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.5.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -20815,19 +20819,145 @@
<!-- START OF PICTURE SECTION -->
- <p class=XXX>The <a href=http://picture.responsiveimages.org/>picture element specification</a>
- will be folded in to this specification, replacing some of the requirements in this section.</p>
+ <h4 id=introduction-0><span class=secno>4.7.1 </span>Introduction</h4>
- <!-- <h4>The <dfn><code>picture</code></dfn> * element</h4> -->
+ <p class=XXX>See the <a href=http://picture.responsiveimages.org/#intro>picture element specification</a>'s introduction for now.</p>
- <!-- <h4>The <dfn><code>imgcandidate</code></dfn> * element</h4> --> <!--(or whatever it gets called)-->
- <h4 id=the-img-element><span class=secno>4.7.1 </span>The <dfn><code>img</code></dfn> element</h4>
+ <h4 id=dependencies-0><span class=secno>4.7.2 </span>Dependencies</h4>
+ <dl><dt>Media Queries <a href=#refsMQ>[MQ]</a></dt>
+
+ <dd><dfn id=media-condition><media-condition></dfn></dd>
+
+ <dt>CSS Values and Units <a href=#refsCSSVALUES>[CSSVALUES]</a></dt>
+
+ <dd><dfn id=length><length></dfn></dd>
+
+ <dt>CSS Syntax <a href=#refsCSSSYNTAX>[CSSSYNTAX]</a></dt>
+
+ <dd><dfn id=parse-a-comma-separated-list-of-component-values>Parse a comma-separated list of component values</dfn></dd>
+ <dd><dfn id=component-value>component value</dfn></dd>
+ <dd><dfn id=whitespace-token><whitespace-token></dfn></dd>
+
+ </dl><h4 id=the-picture-element><span class=secno>4.7.3 </span>The <dfn><code>picture</code></dfn> element</h4>
+
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
<dd><a href=#phrasing-content>Phrasing content</a>.</dd>
<dd><a href=#embedded-content-category>Embedded content</a>.</dd>
+ <dd><a href=#palpable-content>Palpable content</a>.</dd>
+ <dt><a href=#concept-element-contexts title=concept-element-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>Where <a href=#embedded-content-category>embedded content</a> is expected.</dd>
+ <dt><a href=#concept-element-content-model title=concept-element-content-model>Content model</a>:</dt>
+ <dd>Zero or more <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements, followed by one <code><a href=#the-img-element>img</a></code> element, optionally intermixed with <a href=#script-supporting-elements>script-supporting elements</a>.</dd>
+ <dt><a href=#concept-element-tag-omission title=concept-element-tag-omission>Tag omission in text/html</a>:</dt>
+ <dd>Neither tag is omissible.</dd>
+ <dt><a href=#concept-element-attributes title=concept-element-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt><a href=#concept-element-dom title=concept-element-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>
+<pre class=idl>interface <dfn id=htmlpictureelement>HTMLPictureElement</dfn> : <a href=#htmlelement>HTMLElement</a> {};</pre>
+ </dd>
+ </dl><p>The <code><a href=#the-picture-element>picture</a></code> element is a container
+ which provides multiples sources to its contained <code><a href=#the-img-element>img</a></code> element
+ to allow authors to declaratively control or give hints to the user agent about which image resource to use,
+ based on the screen pixel density, viewport size, image format, and other factors. It <a href=#represents>represents</a> its children.</p>
+
+ <p class=note>The <code><a href=#the-picture-element>picture</a></code> element is somewhat different
+ from the similar-looking <code><a href=#the-video-element>video</a></code> and <code><a href=#the-audio-element>audio</a></code> elements.
+ While all of them contain <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements,
+ the <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element's <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute has no meaning
+ when the element is nested within a <code><a href=#the-picture-element>picture</a></code> element,
+ and the resource selection algorithm is different.
+ As well, the <code><a href=#the-picture-element>picture</a></code> element itself does not display anything;
+ it merely provides a context for its contained <code><a href=#the-img-element>img</a></code> element
+ that enables it to choose from multiple <a href=#url title=URL>URLs</a>.</p>
+
+
+ <h4 id=the-source-element-when-used-with-the-picture-element><span class=secno>4.7.4 </span>The <dfn title=picture-source><code>source</code></dfn> element when used with the <code><a href=#the-picture-element>picture</a></code> element</h4>
+
+ <dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
+ <dd>Same as for the <code><a href=#the-source-element>source</a></code> element.</dd>
+ <dt><a href=#concept-element-contexts title=concept-element-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>As a child of a <code><a href=#the-picture-element>picture</a></code> element, before the <code><a href=#the-img-element>img</a></code> element.</dd>
+ <dt><a href=#concept-element-content-model title=concept-element-content-model>Content model</a>:</dt>
+ <dd>Same as for the <code><a href=#the-source-element>source</a></code> element.</dd>
+ <dt><a href=#concept-element-attributes title=concept-element-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code></dd>
+ <dd><code title=attr-picture-source-sizes><a href=#attr-picture-source-sizes>sizes</a></code></dd>
+ <dd><code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code></dd>
+ <dd><code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code></dd>
+ <dt><a href=#concept-element-dom title=concept-element-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>
+<pre class=idl>partial interface <a href=#htmlsourceelement>HTMLSourceElement</a> {
+ attribute DOMString <a href=#dom-picture-source-srcset title=dom-picture-source-srcset>srcset</a>;
+ attribute DOMString <a href=#dom-picture-source-sizes title=dom-picture-source-sizes>sizes</a>;
+ attribute DOMString <a href=#dom-picture-source-media title=dom-picture-source-media>media</a>;
+};</pre>
+ </dd>
+ </dl><p>The authoring requirements in this section only apply if the <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element has
+ a parent that is a <code><a href=#the-picture-element>picture</a></code> element.</p>
+
+ <p>The <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element allows authors to specify multiple alternative
+ <a href=#source-set title="source set">source sets</a> for <code><a href=#the-img-element>img</a></code> elements.
+ It does not <a href=#represents title=represents>represent</a> anything on its own.</p>
+
+ <p>The <dfn id=attr-picture-source-srcset title=attr-picture-source-srcset><code>srcset</code></dfn> attribute must be present,
+ and 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 (,).
+ If an <a href=#image-candidate-string>image candidate string</a> contains no descriptors
+ and no <a href=#space-character title="space character">space characters</a> after the URL,
+ the following <a href=#image-candidate-string>image candidate string</a>, if there is one,
+ must begin with one or more <a href=#space-character title="space character">space characters</a>.</p>
+
+ <p>The <dfn id=attr-picture-source-sizes title=attr-picture-source-sizes><code>sizes</code></dfn> attribute may also be present.
+ If present, the value must be a <a href=#valid-source-size-list>valid source size list</a>.</p>
+
+ <p>The <dfn id=attr-picture-source-media title=attr-picture-source-media><code>media</code></dfn> attributes may also be present.
+ If present, the value must contain a <a href=#valid-media-query>valid media query</a>.</p>
+
+ <p>The <dfn id=attr-picture-source-type title=attr-picture-source-type><code>type</code></dfn> attribute may also be present.
+ If present, the value must be a <a href=#valid-mime-type>valid MIME type</a>.
+ It gives the type of the images in the <a href=#source-set>source set</a>,
+ to allow the user agent to skip to the next <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element
+ if it does not support the given type.</p>
+
+ <p class=note>If the <code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attribute
+ is <em>not</em> specified, the user agent will not select a different
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element if it finds that it does not support
+ the image format after fetching it.</p>
+
+ <p>When a <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element has a following sibling
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element or <code><a href=#the-img-element>img</a></code> element with a
+ <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified, it must have
+ at least one of the following:</p>
+
+ <ul><li><p>A <code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute specified with a value that,
+ after <a href=#strip-leading-and-trailing-whitespace title="strip leading and trailing whitespace">stripping leading and trailing whitespace</a>,
+ is not the empty string and is not an <a href=#ascii-case-insensitive>ASCII case-insensitive</a> match for the string <code>all</code>.</li>
+
+ <li><p>A <code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attribute specified.</li>
+
+ </ul><p>The <code title=attr-source-src><a href=#attr-source-src>src</a></code> attribute must not be present.</p>
+
+ <div class=impl>
+
+ <p>The IDL attributes <dfn id=dom-picture-source-srcset title=dom-picture-source-srcset><code>srcset</code></dfn>,
+ <dfn id=dom-picture-source-sizes title=dom-picture-source-sizes><code>sizes</code></dfn> and
+ <dfn id=dom-picture-source-media title=dom-picture-source-media><code>media</code></dfn> must reflect the
+ respective content attributes of the same name.</p>
+
+ </div>
+
+
+ <h4 id=the-img-element><span class=secno>4.7.5 </span>The <dfn><code>img</code></dfn> element</h4>
+
+ <dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dd><a href=#embedded-content-category>Embedded content</a>.</dd>
<dd><a href=#form-associated-element>Form-associated element</a>.</dd>
<dd>If the element has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute: <a href=#interactive-content>Interactive content</a>.</dd>
<dd><a href=#palpable-content>Palpable content</a>.</dd>
@@ -20842,6 +20972,7 @@
<dd><code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> — Replacement text for use when images are not available</dd>
<dd><code title=attr-img-src><a href=#attr-img-src>src</a></code> — Address of the resource</dd>
<dd><code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> — Images to use in different situations (e.g. high-resolution displays, small monitors, etc)</dd>
+ <dd><code title=attr-img-sizes><a href=#attr-img-sizes>sizes</a></code></dd>
<dd><code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> — How the element handles crossorigin requests</dd>
<dd><code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> — Name of <a href=#image-map>image map</a> to use</dd>
<dd><code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> — Whether the image is a server-side image map</dd>
@@ -20854,6 +20985,7 @@
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-sizes title=dom-img-sizes>sizes</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>;
@@ -20862,6 +20994,7 @@
readonly attribute unsigned long <a href=#dom-img-naturalwidth title=dom-img-naturalWidth>naturalWidth</a>;
readonly attribute unsigned long <a href=#dom-img-naturalheight title=dom-img-naturalHeight>naturalHeight</a>;
readonly attribute boolean <a href=#dom-img-complete title=dom-img-complete>complete</a>;
+ readonly attribute DOMString <a href=#dom-img-currentsrc title=dom-img-currentSrc>currentSrc</a>;
// <a href="#HTMLImageElement-partial">also has obsolete members</a>
};</pre>
@@ -20882,7 +21015,10 @@
-->
- <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
+ <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,
+ and any previous sibling <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements'
+ <code title=attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code> attributes if the parent is a <code><a href=#the-picture-element>picture</a></code> element,
+ is the embedded content; the value of
the <dfn id=attr-img-alt title=attr-img-alt><code>alt</code></dfn> attribute provides equivalent content for
those who cannot process images or who have image loading disabled (i.e. it is the
<code><a href=#the-img-element>img</a></code> element's <a href=#fallback-content>fallback content</a>).</p>
@@ -20894,15 +21030,19 @@
<a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a> referencing a non-interactive,
optionally animated, image resource that is neither paged nor scripted.</p>
- <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute may also be present. If present, its
- value must consist of one or more <a href=#image-candidate-string title="image candidate string">image candidate
- strings</a>, each separated from the next by a U+002C COMMA character (,). This attribute
- allows authors to provide alternative images for environments with smaller screens or screens with
- higher pixel densities.</p>
+ <p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute may also be present.
+ If present, its value must consist of one or more
+ <a href=#image-candidate-string title="image candidate string">image candidate strings</a>,
+ each separated from the next by a U+002C COMMA character (,).
+ If an <a href=#image-candidate-string>image candidate string</a> contains no descriptors
+ and no <a href=#space-character title="space character">space characters</a> after the URL,
+ the following <a href=#image-candidate-string>image candidate string</a>, if there is one,
+ must begin with one or more <a href=#space-character title="space character">space characters</a>.</p>
- <div class=note>
+ <!-- XXXX
+ <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
+ <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
@@ -20916,54 +21056,74 @@
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>
+ <ol><li><p>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><p>A <a href=#valid-non-empty-url>valid non-empty URL</a> that does not start or end with a U+002C COMMA character (,),
+ 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><p>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>
- <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
+ <p>Zero or one of the following:</p>
- <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>
+ <ul><li><p>A <i title="">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> giving a number greater than zero
+ representing the <i title="">width descriptor</i> value,
+ 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><p>A <i title="">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 title="">pixel density descriptor</i> value,
+ and a U+0078 LATIN SMALL LETTER X character.</li>
- <li>Optionally a <i>pixel density descriptor</i>, consisting of: a <a href=#space-character>space character</a>,
- a <a href=#valid-floating-point-number>valid floating-point number</a> giving a number greater than zero representing the
- <i>pixel density descriptor value</i>, and a U+0078 LATIN SMALL LETTER X character.</li>
+ </ul></li>
- <li>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
+ <li><p>Zero or more <a href=#space-character title="space character">space characters</a>.</li>
- </ol><p>Each <a href=#image-candidate-string>image candidate string</a> must have at least one of the three optional
- descriptors. There must not be two <a href=#image-candidate-string title="image candidate string">image candidate
- strings</a> in a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute whose <i>width
- descriptor value</i>, <i>height descriptor value</i>, and <i>pixel density descriptor value</i>
- are each identical to their counterpart in the other <a href=#image-candidate-string>image candidate string</a>; for the
- purposes of this requirement, omitted <i>width descriptors</i> and <i>height descriptors</i> are
- considered to have the value "Infinity", and omitted <i>pixel density descriptors</i> are
- considered to have the value 1.</p>
+ </ol><p>There must not be an <a href=#image-candidate-string>image candidate string</a> for an element that
+ has the same <i title="">width descriptor</i> value as another
+ <a href=#image-candidate-string>image candidate string</a>'s <i title="">width descriptor</i> value for the same element.</p>
- <div class=example>
+ <p>There must not be an <a href=#image-candidate-string>image candidate string</a> for an element that
+ has the same <i title="">pixel density descriptor</i> value as another
+ <a href=#image-candidate-string>image candidate string</a>'s <i title="">pixel density descriptor</i> value for the same element.
+ For the purpose of this requirement,
+ an <a href=#image-candidate-string>image candidate string</a> with no descriptors is equivalent to
+ an <a href=#image-candidate-string>image candidate string</a> with a <code title="">1x</code> descriptor.</p>
+ <p>If the <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> or <code><a href=#the-img-element>img</a></code> element has a
+ <code title="">sizes</code> attribute present, all <a href=#image-candidate-string title="image candidate string">image candidate strings</a> for that
+ element must have the <i title="">width descriptor</i> specified.</p>
+
+ <p>If an <a href=#image-candidate-string>image candidate string</a> for an <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> or <code><a href=#the-img-element>img</a></code> element
+ has the <i title="">width descriptor</i> specified,
+ all other <a href=#image-candidate-string title="image candidate string">image candidate strings</a> for that element
+ must also have the <i title="">width descriptor</i> specified.</p>
+
+ <p>The specified width in an <a href=#image-candidate-string>image candidate string</a>'s <i title="">width descriptor</i>
+ must match the intrinsic width in the resource given by the <a href=#image-candidate-string>image candidate string</a>'s URL.</p>
+
+ <!--XXXX
+ <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"
+ <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>
+ srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"></h1></pre>
</div>
+ -->
<p class=note>The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs,
JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element),
@@ -20973,6 +21133,19 @@
documents, and so forth. <a href=#refsPNG>[PNG]</a> <a href=#refsGIF>[GIF]</a> <a href=#refsJPEG>[JPEG]</a> <a href=#refsPDF>[PDF]</a> <a href=#refsXML>[XML]</a> <a href=#refsAPNG>[APNG]</a> <!-- <a href="#refsAGIF">[AGIF]</a> --> <a href=#refsSVG>[SVG]</a>
<a href=#refsMNG>[MNG]</a> </p>
+ <p>If the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is present,
+ the <dfn id=attr-img-sizes title=attr-img-sizes><code>sizes</code></dfn> attribute may also be present.
+ If present, its value must be a <a href=#valid-source-size-list>valid source size list</a>.</p>
+
+ <p>A <dfn id=valid-source-size-list>valid source size list</dfn> is a string that matches the following grammar:
+ <a href=#refsCSSVALUES>[CSSVALUES]</a> <a href=#refsMQ>[MQ]</a></p>
+
+<pre><dfn id=source-size-list><source-size-list></dfn> = <a href=#source-size><source-size></a># [ , <a href=#source-size-value><source-size-value></a> ]? | <a href=#source-size-value><source-size-value></a>
+<dfn id=source-size><source-size></dfn> = <a href=#media-condition><media-condition></a> <a href=#source-size-value><source-size-value></a>
+<dfn id=source-size-value><source-size-value></dfn> = <a href=#length><length></a></pre>
+
+ <p>A <a href=#source-size-value><source-size-value></a> must not be negative.</p>
+
<p>The <code><a href=#the-img-element>img</a></code> element must not be used as a layout tool. In particular, <code><a href=#the-img-element>img</a></code>
elements should not be used to display transparent images, as such images rarely convey meaning and
rarely add anything useful to the document.</p>
@@ -20983,13 +21156,23 @@
<div class=impl>
- <hr><p>An <code><a href=#the-img-element>img</a></code> is always in one of the following states:</p>
+ <hr><p>An <code><a href=#the-img-element>img</a></code> element has a <dfn id=current-request>current request</dfn> and a <dfn id=pending-request>pending request</dfn>.
+ The <a href=#current-request>current request</a> is initially set to a new <a href=#image-request>image request</a>.
+ The <a href=#pending-request>pending request</a> is initially set to null.
+ The <a href=#current-request>current request</a> is usually referred to as the <code><a href=#the-img-element>img</a></code> element itself.</p>
+ <p>An <dfn id=image-request>image request</dfn> has a <dfn id=img-req-state title=img-req-state>state</dfn>, <dfn id=img-req-url title=img-req-url>current URL</dfn> and <dfn id=img-req-data title=img-req-data>image data</dfn>.</p>
+
+ <p>An <a href=#image-request>image request</a>'s <a href=#img-req-state title=img-req-state>state</a> is one of the following:</p>
+
<dl><dt><dfn id=img-none title=img-none>Unavailable</dfn></dt>
- <dd>The user agent hasn't obtained any image data.</dd>
+ <dd>The user agent hasn't obtained any image data,
+ or has obtained some or all of the image data but
+ hasn't yet decoded enough of the image to get the image dimensions.</dd>
<dt><dfn id=img-inc title=img-inc>Partially available</dfn></dt>
- <dd>The user agent has obtained some of the image data.</dd>
+ <dd>The user agent has obtained some of the image data and at least the image dimensions are
+ available.</dd>
<dt><dfn id=img-all title=img-all>Completely available</dfn></dt>
<dd>The user agent has obtained all of the image data and at least the image dimensions are
@@ -21000,11 +21183,15 @@
image enough to get the image dimensions (e.g. the image is corrupted, or the format is not
supported, or no data could be obtained).</dd>
- </dl><p>When an <code><a href=#the-img-element>img</a></code> element is either in the <a href=#img-inc title=img-inc>partially
+ </dl><p>An <a href=#image-request>image request</a>'s <a href=#img-req-url title=img-req-url>current URL</a> is initially the empty string.</p>
+
+ <p>An <a href=#image-request>image request</a>'s <a href=#img-req-data title=img-req-data>image data</a> is the decoded image data.</p>
+
+ <p>When an <a href=#image-request>image request</a> is either in the <a href=#img-inc title=img-inc>partially
available</a> state or in the <a href=#img-all title=img-all>completely available</a> state, it is
said to be <dfn id=img-available title=img-available>available</dfn>.</p>
- <p>An <code><a href=#the-img-element>img</a></code> element is initially <a href=#img-none title=img-none>unavailable</a>.</p>
+ <p>An <a href=#image-request>image request</a> is initially <a href=#img-none title=img-none>unavailable</a>.</p>
<p>When an <code><a href=#the-img-element>img</a></code> element is <a href=#img-available title=img-available>available</a>, it
<a href=#provides-a-paint-source>provides a paint source</a> whose width is the image's intrinsic width, whose height is
@@ -21019,23 +21206,53 @@
data</a> of an <code><a href=#the-img-element>img</a></code> element that has the
<a href=#img-parser-created title=img-parser-created>parser-created flag</a> set to true whenever that element is
inserted into another <code><a href=#node>Node</a></code>. 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
- is created and has the <a href=#img-parser-created title=img-parser-created>parser-created flag</a> unset, or 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, and whenever
- that element's <a href=#concept-node-adopt-ext title=concept-node-adopt-ext>adopting steps</a> are run.</p> <!-- Note
+ <a href=#update-the-image-data>update the image data</a> of an <code><a href=#the-img-element>img</a></code> element,
+ with the <i title="">restart animation</i> flag set if so stated, whenever that element
+ is created and has the <a href=#img-parser-created title=img-parser-created>parser-created flag</a> unset,
+ or has experienced <a href=#relevant-mutations>relevant mutations</a>,
+ and whenever that element's <a href=#concept-node-adopt-ext title=concept-node-adopt-ext>adopting steps</a> are run.</p> <!-- Note
how this does NOT happen when the base URL changes (except for when adopted into a new doc) -->
<p>A user agent that obtains images on demand must <a href=#update-the-image-data>update the image data</a> of an
- <code><a href=#the-img-element>img</a></code> element whenever it needs the image data (i.e. on demand), but only if the
- <code><a href=#the-img-element>img</a></code> element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> or <code title=attr-img-src><a href=#attr-img-src>srcset</a></code> attribute, and only if the <code><a href=#the-img-element>img</a></code> element is in the
- <a href=#img-none title=img-none>unavailable</a> state. When an <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute set, changed, or removed, and whenever
- that element's <a href=#concept-node-adopt-ext title=concept-node-adopt-ext>adopting steps</a> are run, if the user
+ <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 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
+ has experienced <a href=#relevant-mutations>relevant mutations</a>,
+ and whenever that element's <a href=#concept-node-adopt-ext title=concept-node-adopt-ext>adopting steps</a> are run, 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>The <dfn id=relevant-mutations>relevant mutations</dfn> for an <code><a href=#the-img-element>img</a></code> element are as follows:</p>
+ <ul><li><p>The 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-sizes><a href=#attr-img-sizes>sizes</a></code> attributes are set, changed, or removed.</li>
+
+ <li><p>The element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is set to the same value as the previous value.
+ This must set the <i title="">restart animation</i> flag for the <a href=#update-the-image-data>update the image data</a> algorithm.</li>
+
+ <li><p>The element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> attribute's state is changed.</li>
+
+ <li><p>The element is inserted into or removed from a <code><a href=#the-picture-element>picture</a></code> parent element.</li>
+
+ <li><p>The element's parent is a <code><a href=#the-picture-element>picture</a></code> element and a
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element is inserted as a previous sibling.</li>
+
+ <li><p>The element's parent is a <code><a href=#the-picture-element>picture</a></code> element and a
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element that was a previous sibling is removed.</li>
+
+ <li><p>The element's parent is a <code><a href=#the-picture-element>picture</a></code> element and a
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element that is a previous sibling has its
+ <code title=attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code>,
+ <code title=attr-picture-source-sizes><a href=#attr-picture-source-sizes>sizes</a></code>,
+ <code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code>
+ or <code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attributes set, changed, or removed.</li>
+
+ </ul><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.</p>
+
+ <p>Each <a href=#image-request>image request</a> has 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>
@@ -21045,7 +21262,7 @@
intrinsic dimension of 96 CSS pixels by 192 CSS pixels.</p>
<p>Each <code><a href=#the-img-element>img</a></code> element has a <dfn id=img-parser-created title=img-parser-created>parser-created flag</dfn> that must be set to false
- when the element is created, unless otherwise specified.
+ when the element is created, unless otherwise specified.</p>
<p class=note>The <a href=#html-parser>HTML parser</a> and the <a href=#xml-parser>XML parser</a>
will set the <a href=#img-parser-created title=img-parser-created>parser-created flag</a> to true
@@ -21058,16 +21275,29 @@
<p>Each <code><a href=#document>Document</a></code> object must have a <dfn id=list-of-available-images>list of available images</dfn>. Each image
in this list is identified by a tuple consisting of an <a href=#absolute-url>absolute URL</a>, a <a href=#cors-settings-attribute>CORS
settings attribute</a> mode, and, if the mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No
- CORS</a>, an <a href=#origin>origin</a>. User agents may copy entries from one <code><a href=#document>Document</a></code>
+ CORS</a>, an <a href=#origin>origin</a>.
+ Each image furthermore has an <dfn id=ignore-higher-layer-caching>ignore higher-layer caching</dfn> flag.
+ User agents may copy entries from one <code><a href=#document>Document</a></code>
object's <a href=#list-of-available-images>list of available images</a> to another at any time (e.g. when the
<code><a href=#document>Document</a></code> is created, user agents can add to it all the images that are loaded in
other <code><a href=#document>Document</a></code>s), but must not change the keys of entries copied in this way when
- doing so. User agents may also remove images from such lists at any time (e.g. to save
- memory).</p>
+ doing so, and must unset the <a href=#ignore-higher-layer-caching>ignore higher-layer caching</a> flag for the copied entry.
+ User agents may also remove images from such lists at any time (e.g. to save
+ memory).
+ User agents must remove entries in the <a href=#list-of-available-images>list of available images</a> as appropriate
+ given higher-layer caching semantics for the resource (e.g. the HTTP <code title="">Cache-Control</code>
+ response header) when the <a href=#ignore-higher-layer-caching>ignore higher-layer caching</a> is unset.</p>
- <p>When the user agent is to <dfn id=update-the-image-data>update the image data</dfn> of an <code><a href=#the-img-element>img</a></code> element, it
- must run the following steps:</p>
+ <p class=note>The user agent can also store the image data in a separatly from the <a href=#list-of-available-images>list of available images</a>.</p>
+ <p class=example>For example, if a resource has the HTTP response header <code title="">Cache-Control: must-revalidate</code>,
+ the user agent would remove it from the <a href=#list-of-available-images>list of available images</a> but could keep the image data separately,
+ and use that if the server responds with a <code title="">204 No Content</code> status.</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,
+ optionally with the <i title="">restart animations</i> flag set,
+ it must run the following steps:</p>
+
<ol><li><p>If the element's <code><a href=#document>Document</a></code> is not the <a href=#active-document>active document</a>,
abort these steps.</li>
@@ -21076,21 +21306,16 @@
<li><p>Set the element's <a href=#img-parser-created title=img-parser-created>parser-created flag</a> to false.</li>
- <li><p>Return the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-none title=img-none>unavailable</a>
- state.</p>
-
- <li><p>If an instance of the <a href=#fetch title=fetch>fetching</a> algorithm is still running for
- this element, then abort that algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that algorithm.</li>
-
- <li><p>Forget the <code><a href=#the-img-element>img</a></code> element's current image data, if any.</li>
-
<li><p>If the user agent cannot support images, or its support for images has been disabled, then
- abort these steps.</li>
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ set <a href=#current-request>current request</a> to the <a href=#img-none title=img-none>unavailable</a> state,
+ let <a href=#pending-request>pending request</a> be null,
+ and abort these steps.</li>
<li>
- <p>If the element does not have a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified <!--XXX and
- it does not have a parent or it has a parent but it is not a <code>picture</code> element,-->
+ <p>If the element does not have a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified and
+ it does not have a parent or it has a parent but it is not a <code><a href=#the-picture-element>picture</a></code> element,
and it 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
@@ -21098,26 +21323,40 @@
</li>
- <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var> and the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel
- density</a> be <var title="">selected pixel density</var>.</li>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var>.</li>
<li>
<p>If <var title="">selected source</var> is not null, run these substeps:</p>
<ol><li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative
- to the element. If that is not successful, abort these steps.</li>
+ to the element, and let the result be <var title="">absolute URL</var>. If that is not successful, then
+ abort these inner set of steps.</li>
+ <!-- This does not change currentSrc -->
<li><p>Let <var title="">key</var> be a tuple consisting of the resulting <a href=#absolute-url>absolute
URL</a>, the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
attribute's mode, and, if that mode is not <a href=#attr-crossorigin-none title=attr-crossorigin-none>No CORS</a>,
the <code><a href=#document>Document</a></code> object's <a href=#origin>origin</a>.</li>
- <li><p>If the <a href=#list-of-available-images>list of available images</a> contains an entry for <var title="">key</var>, then set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely
- available</a> state, update the presentation of the image appropriately, <a href=#queue-a-task>queue a
- task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load><a href=#event-load>load</a></code> at the
- <code><a href=#the-img-element>img</a></code> element, and abort these steps.</li>
+ <li><p>If the <a href=#list-of-available-images>list of available images</a> contains an entry for <var title="">key</var>, then
+ set the <a href=#ignore-higher-layer-caching>ignore higher-layer caching</a> flag for that entry,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ let <a href=#pending-request>pending request</a> be null,
+ let <a href=#current-request>current request</a> be a new <a href=#image-request>image request</a> whose <a href=#img-req-data title=img-req-data>image data</a> is that of the entry
+ and whose state is set to the <a href=#img-all title=img-all>completely available</a> state,
+ update the presentation of the image appropriately,
+ let the <a href=#current-request>current request</a>'s <a href=#current-pixel-density>current pixel density</a> be <var title="">selected pixel density</var>,
+ <a href=#queue-a-task>queue a task</a> to <a href=#restart-the-animation>restart the animation</a> if <i title="">restart animation</i> is set,
+ change <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a> to <var title="">absolute URL</var>,
+ and then <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ and abort these steps.</li>
+ <!--
+ load is a simple event here
+ loadstart and loadend do not fire
+ -->
+
</ol></li>
<li><p>If <var>parser-created</var> is false, asynchronously <a href=#await-a-stable-state>await a stable state</a>, allowing the <a href=#concept-task title=concept-task>task</a> that invoked this algorithm to continue.
@@ -21140,11 +21379,9 @@
<li>
- <p>⌛ If the element has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute specified<!--
- XXX or it has a parent that is a <code>picture</code> element-->, 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.
+ <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=#select-an-image-source title="select an image source">selecting an image source</a>,
+ respectively.</p>
</li>
@@ -21152,14 +21389,18 @@
<p>⌛ If <var title="">selected source</var> is null, run these substeps:</p>
- <ol><li><p>⌛ Set the element to the <a href=#img-error title=img-error>broken</a> state.</li>
+ <ol><li><p>⌛ Set the <a href=#current-request>current request</a> to the <a href=#img-error title=img-error>broken</a> state,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ and let <a href=#pending-request>pending request</a> be null.</li>
- <li><p>⌛ If the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute
- or a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute<!-- XXX
- or a parent that is a <code>picture</code> element-->,
- <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><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element
+ <li><p>⌛ <a href=#queue-a-task>Queue a task</a> to change the <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a> to the empty string,
+ and then, if the element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute
+ or a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute
+ or a parent that is a <code><a href=#the-picture-element>picture</a></code> element,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element.</li>
+ <!-- loadstart and loadend do not fire -->
+
<li><p>⌛ Abort this algorithm.</li>
</ol></li>
@@ -21171,21 +21412,53 @@
</li>
+ <li><p><a href=#resolve-a-url title="resolve a url">Resolve</a> <var title="">selected source</var>, relative
+ to the element, and let the result be <var title="">absolute URL</var>. If that is not successful, then
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ set the <a href=#current-request>current request</a> to the <a href=#img-error title=img-error>broken</a> state,
+ let <a href=#pending-request>pending request</a> be null,
+ <a href=#queue-a-task>queue a task</a> to
+ change the <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a> to <var title="">absolute URL</var>,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element
+ and then <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ and abort these steps.</li>
+
<li>
- <p>⌛ Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of the <a href=#absolute-url>absolute
- URL</a> that resulted from the earlier step, with the <i>mode</i> being the current state of
+ <p>⌛ If the <a href=#pending-request>pending request</a> is not null,
+ and <var title="">absolute URL</var> is the same as the <a href=#pending-request>pending request</a>'s <a href=#img-req-url title=img-req-url>current URL</a>,
+ then abort these steps.</p>
+
+ <p>⌛ If <var title="">absolute URL</var> is the same as the <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a>,
+ and <a href=#current-request>current request</a> is in the <a href=#img-inc title=img-inc>partially available</a> state,
+ then <a href=#abort-the-image-request>abort the image request</a> for the <a href=#pending-request>pending request</a>,
+ <a href=#queue-a-task>queue a task</a> to <a href=#restart-the-animation>restart the animation</a> if <i title="">restart animation</i> is set,
+ and abort these steps.</p>
+
+ <p>⌛ If the <a href=#pending-request>pending request</a> is not null,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#pending-request>pending request</a>.</p>
+
+ <p>⌛ Let <var title="">image request</var> be a new <a href=#image-request>image request</a>
+ whose <a href=#img-req-url title=img-req-url>current URL</a> is <var title="">absolute URL</var>.</p>
+
+ <p>⌛ Let the <a href=#pending-request>pending request</a> be <var title="">image request</var>.</p>
+
+ <p>⌛ Do a <a href=#potentially-cors-enabled-fetch>potentially CORS-enabled fetch</a><!--FETCH--> of <var title="">absolute URL</var>,
+ with the <i>mode</i> being the current state of
the element's <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code> content attribute, the <i title="">origin</i> being the <a href=#origin>origin</a> of the <code><a href=#the-img-element>img</a></code> element's
- <code><a href=#document>Document</a></code>, and the <i>default origin behaviour</i> set to <i>taint</i>.</p>
+ <code><a href=#document>Document</a></code>, and the <i>default origin behaviour</i> set to <i>taint</i>.
+ Let this instance of the <a href=#fetch title=fetch>fetching</a> algorithm be associated with <var title="">image request</var>.<!-- XXXX
+ "Interaction with the Preload Scanner" from the picture spec --></p>
- <p>The resource obtained in this fashion, if any, is the <code><a href=#the-img-element>img</a></code> element's image data.
+ <p>The resource obtained in this fashion, if any, is <var title="">image request</var>'s <a href=#img-req-data title=img-req-data>image data</a>.
It can be either <a href=#cors-same-origin>CORS-same-origin</a> or <a href=#cors-cross-origin>CORS-cross-origin</a>; this affects
the <a href=#origin>origin</a> of the image itself (e.g. when used on a <code><a href=#the-canvas-element>canvas</a></code>).</p>
<!-- same text in <input type=image> section and similar text elsewhere -->
<p>Fetching the image must <a href=#delay-the-load-event>delay the load event</a> of the element's document until the
<a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a task">queued</a> by the
- <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> (<a href=#img-load>defined below</a>) has been run.</p>
+ <a href=#networking-task-source>networking task source</a> once the resource has been <a href=#fetch title=fetch>fetched</a> (<a href=#img-load>defined below</a>) has been run.
+ <!--XXX or the fetch was aborted, presumably --></p>
<p class=warning>This, unfortunately, can be used to perform a rudimentary port scan of the
user's local network (especially in conjunction with scripting, though scripting isn't actually
@@ -21195,9 +21468,9 @@
<p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>, each <a href=#concept-task title=concept-task>task</a>
that is <a href=#queue-a-task title="queue a task">queued</a> by the <a href=#networking-task-source>networking task source</a>
- while the image is being <a href=#fetch title=fetch>fetched</a> must <a href=#fire-a-progress-event>fire a progress
- event</a> named <code title=event-progress><a href=#event-progress>progress</a></code> at the <code><a href=#the-img-element>img</a></code>
- element.</p>
+ while the image is being <a href=#fetch title=fetch>fetched</a>,
+ if <var title="">image request</var> is the <a href=#current-request>current request</a>,
+ must <a href=#fire-a-progress-event>fire a progress event</a> named <code title=event-progress><a href=#event-progress>progress</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
</li>
@@ -21213,14 +21486,55 @@
<dd>
<p>The next <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
- task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+ task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must run the following steps:</p>
- <p>Each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+ <ol><li>
+
+ <p>If <var title="">image request</var> is the <a href=#pending-request>pending request</a>
+ and the user agent is able to determine <var title="">image request</var>'s image's width and height,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a> and
+ set the <a href=#current-request>current request</a>'s state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Otherwise, if <var title="">image request</var> is the <a href=#pending-request>pending request</a>
+ and the user agent is able to determine that <var title="">image request</var>'s image
+ is corrupted in some fatal way such that the image dimensions cannot be obtained,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a>
+ and set the <a href=#current-request>current request</a>'s state to <a href=#img-error title=img-error>broken</a>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Otherwise, if <var title="">image request</var> is the <a href=#current-request>current request</a>,
+ it is in the <a href=#img-none title=img-none>unavailable</a> state,
+ and the user agent is able to determine <var title="">image request</var>'s image's width and height,
+ set the <a href=#current-request>current request</a>'s state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Otherwise, if <var title="">image request</var> is the <a href=#current-request>current request</a>,
+ it is in the <a href=#img-none title=img-none>unavailable</a> state,
+ and the user agent is able to determine that <var title="">image request</var>'s image
+ is corrupted in some fatal way such that the image dimensions cannot be obtained,
+ set the <a href=#current-request>current request</a>'s state to <a href=#img-error title=img-error>broken</a>.
+ <!--XXX abort the fetch? fire error event?--></p>
+
+ </li>
+
+ </ol><p>Each <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must update the presentation of the image, but as each new body
part comes in, it must replace the previous image. Once one body part has been completely
decoded, the user agent must set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely available</a> state and <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire
a simple event</a> named <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code>
- element.</p>
+ element. <!--XXX what if the image is broken? --></p>
<p class=note>The <code title=event-progress><a href=#event-progress>progress</a></code> and <code title=event-loadend><a href=#event-loadend>loadend</a></code> events are not fired for
<code><a href=#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code> image streams.</p>
@@ -21232,98 +21546,122 @@
<dd>
<p>The next <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
- task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must set the <code><a href=#the-img-element>img</a></code> element's state to <a href=#img-inc title=img-inc>partially available</a>.</p>
+ task">queued</a> by the <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must run the following steps:</p>
- <p id=img-load>That <a href=#concept-task title=concept-task>task</a>, and each subsequent <a href=#concept-task title=concept-task>task</a>, that is <a href=#queue-a-task title="queue a task">queued</a> by the
- <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a> must update the presentation of the image appropriately (e.g. if
- the image is a progressive JPEG, each packet can improve the resolution of the image).</p>
+ <ol><li>
- <p>Furthermore, the last <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
- task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been
- <a href=#fetch title=fetch>fetched</a> must additionally run the steps for the matching entry in
- the following list:</p>
+ <p>If the user agent is able to determine <var title="">image request</var>'s image's width and height,
+ and <var title="">image request</var> is <a href=#pending-request>pending request</a>,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a>,
+ update the <code><a href=#the-img-element>img</a></code> element's presentation appropriately,
+ and set <var title="">image request</var>'s state to <a href=#img-inc title=img-inc>partially available</a>.</p>
- <dl class=switch><dt>If the download was successful and the user agent was able to determine the image's width
- and height</dt>
+ </li>
- <dd>
+ <li>
- <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-all title=img-all>completely
- available</a> state.</p>
+ <p>Otherwise, if the user agent is able to determine <var title="">image request</var>'s image's width and height,
+ and <var title="">image request</var> is <a href=#current-request>current request</a>,
+ update the <code><a href=#the-img-element>img</a></code> element's presentation appropriately
+ and set <var title="">image request</var>'s state to <a href=#img-inc title=img-inc>partially available</a>.</p>
- <li><p>Add the image to the <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>.</li>
+ </li>
- <li>
+ <li>
- <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
- named <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ <p>Otherwise, if the user agent is able to determine that <var title="">image request</var>'s image
+ is corrupted in some fatal way such that the image dimensions cannot be obtained,
+ and <var title="">image request</var> is <a href=#pending-request>pending request</a>,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a>,
+ set <a href=#current-request>current request</a> to the <a href=#img-error title=img-error>broken</a> state,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ and abort these steps.</p>
- <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
- <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ </li>
- </li>
+ <li>
- <li>
+ <p>Otherwise, if the user agent is able to determine that <var title="">image request</var>'s image
+ is corrupted in some fatal way such that the image dimensions cannot be obtained,
+ and <var title="">image request</var> is <a href=#current-request>current request</a>,
+ <a href=#abort-the-image-request>abort the image request</a> for <var title="">image request</var>,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element,
+ and abort these steps.</p>
- <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
- named <code title=event-load><a href=#event-load>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ </li>
- <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
- <code title=event-load><a href=#event-load>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ </ol><p id=img-load>That <a href=#concept-task title=concept-task>task</a>, and each subsequent <a href=#concept-task title=concept-task>task</a>, that is <a href=#queue-a-task title="queue a task">queued</a> by the
+ <a href=#networking-task-source>networking task source</a> while the image is being <a href=#fetch title=fetch>fetched</a>,
+ if <var title="">image request</var> is the <a href=#current-request>current request</a>,
+ must update the presentation of the image appropriately (e.g. if
+ the image is a progressive JPEG, each packet can improve the resolution of the image).</p>
- </li>
+ <p>Furthermore, the last <a href=#concept-task title=concept-task>task</a> that is <a href=#queue-a-task title="queue a
+ task">queued</a> by the <a href=#networking-task-source>networking task source</a> once the resource has been
+ <a href=#fetch title=fetch>fetched</a> must additionally run these steps:</p>
- </ol></dd>
+ <ol><!--
+ the download was successful
+ the user agent was able to determine the image's width and height
+ image request is current request
+ pending request might be null or non-null
+ --><li><p>Set <var title="">image request</var> to the <a href=#img-all title=img-all>completely
+ available</a> state.</p>
- <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
+ <li><p>Add the image to the <a href=#list-of-available-images>list of available images</a> using the key <var title="">key</var>, with the <a href=#ignore-higher-layer-caching>ignore higher-layer caching</a> flag set.</li>
- <dt>Otherwise</dt>
+ <li><p><a href=#fire-a-progress-event-or-simple-event>Fire a progress event or simple event</a> named <code title=event-load><a href=#event-load>load</a></code>
+ at the <code><a href=#the-img-element>img</a></code> element, depending on the resource in <var title="">image request</var>.</li>
- <dd>
+ <li><p><a href=#fire-a-progress-event-or-simple-event>Fire a progress event or simple event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code>
+ at the <code><a href=#the-img-element>img</a></code> element, depending on the resource in <var title="">image request</var>.</li>
- <ol><li><p>Set the <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a>
- state.</li>
+ </ol></dd>
- <li>
+ <dt>Otherwise</dt>
- <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
- named <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ <dd>
- <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
- <code title=event-load><a href=#event-load>load</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ <p>The image data is not in a supported file format; the user agent must set
+ <var title="">image request</var> to the <a href=#img-error title=img-error>broken</a> state,
+ <a href=#abort-the-image-request>abort the image request</a> for the <a href=#current-request>current request</a> and the <a href=#pending-request>pending request</a>,
+ <a href=#upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</a>,
+ and then <a href=#queue-a-task>queue a task</a> to first <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element and then <a href=#fire-a-simple-event>fire a simple
+ event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code>
+ element.</p>
- </li>
+ </dd>
- <li>
+ </dl></li>
- <p>If the resource is <a href=#cors-same-origin>CORS-same-origin</a>: <a href=#fire-a-progress-event>fire a progress event</a>
- named <code title=event-load><a href=#event-load>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ </ol><p>To <dfn id=abort-the-image-request>abort the image request</dfn> for an <a href=#image-request>image request</a> <var title="">image request</var> means to run the following steps:</p>
- <p>If the resource is <a href=#cors-cross-origin>CORS-cross-origin</a>: <a href=#fire-a-simple-event>fire a simple event</a> named
- <code title=event-load><a href=#event-load>loadend</a></code> at the <code><a href=#the-img-element>img</a></code> element.</p>
+ <ol><li><p>Forget <var title="">image request</var>'s <a href=#img-req-data title=img-req-data>image data</a>, if any.</li>
- </li>
+ <li><p>Abort any instance of the <a href=#fetch title=fetch>fetching</a> algorithm for <var title="">image request</var>,
+ discarding any pending tasks generated by that algorithm.</li>
- </ol></dd>
+ </ol><p>To <dfn id=upgrade-the-pending-request-to-the-current-request>upgrade the pending request to the current request</dfn> for an <code><a href=#the-img-element>img</a></code> element means to run the following steps:</p>
- </dl></dd>
+ <ol><li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#current-request>current request</a> be the <a href=#pending-request>pending request</a>.</li>
- <dt>Otherwise</dt>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#pending-request>pending request</a> be null.</li>
- <dd>
+ </ol><p>To <dfn id=fire-a-progress-event-or-simple-event>fire a progress event or simple event</dfn> named <var title="">type</var> at an element <var title="">e</var>,
+ depending on resource <var data-x="">r</var>, means to
+ <a href=#fire-a-progress-event>fire a progress event</a> named <var title="">type</var> at <var title="">e</var> if <var title="">r</var> is <a href=#cors-same-origin>CORS-same-origin</a>,
+ and otherwise <a href=#fire-a-simple-event>fire a simple event</a> named <var title="">type</var> at <var title="">e</var>.</p>
- <p>Either the image data is corrupted in some fatal way such that the image dimensions cannot
- be obtained, or the image data is not in a supported file format; the user agent must set the
- <code><a href=#the-img-element>img</a></code> element to the <a href=#img-error title=img-error>broken</a> state, abort the <a href=#fetch title=fetch>fetching</a> algorithm, discarding any pending <a href=#concept-task title=concept-task>tasks</a> generated by that algorithm, and then <a href=#queue-a-task>queue a
- task</a> to first <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-error><a href=#event-error>error</a></code> at the <code><a href=#the-img-element>img</a></code> element and then <a href=#fire-a-simple-event>fire a simple
- event</a> named <code title=event-loadend><a href=#event-loadend>loadend</a></code> at the <code><a href=#the-img-element>img</a></code>
- element.</p>
+ <p>To <dfn id=restart-the-animation>restart the animation</dfn> for an <code><a href=#the-img-element>img</a></code> element means that,
+ if the image is an animated image,
+ all animated images with the same <a href=#absolute-url>absolute URL</a> and the same image data in the <code><a href=#the-img-element>img</a></code> element's <code><a href=#document>Document</a></code>
+ are expected to restart their animation.</p>
- </dd>
-
- </dl></li>
-
- </ol><p>While a user agent is running the above algorithm for an element <var title="">x</var>, there
+ <p>While a user agent is running the above algorithm for an element <var title="">x</var>, there
must be a strong reference from the element's <code><a href=#document>Document</a></code> to the element <var title="">x</var>, even if that element is not <a href=#in-a-document title="in a Document">in</a> its
<code><a href=#document>Document</a></code>.</p>
@@ -21351,190 +21689,424 @@
<p>This specification does not specify which image types are to be supported.</p>
- <hr><p>When the user agent is required to <dfn id=processing-the-image-candidates title="processing the image candidates">process the
- image candidates</dfn> of an <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, the user agent must run the following steps,
- which return a URL and pixel density (null and undefined respectively if no selection can be
- made):</p>
+ <hr><p>An <code><a href=#the-img-element>img</a></code> element is associated with a <a href=#source-set>source set</a>.</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>
+ <p>A <dfn id=source-set>source set</dfn> is a set of zero or more <a href=#image-source title="image source">image sources</a>,
+ a <a href=#source-size-0>source size</a>, and optionally a media query.<!-- XXX
+ the media query seems unnecessary --></p>
- <li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially
- pointing at the start of the string.</li>
+ <p>An <dfn id=image-source>image source</dfn> is a <a href=#url>URL</a>,
+ and optionally either a density descriptor, or a width descriptor.</p>
- <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>
+ <p>A <dfn id=source-size-0>source size</dfn> is a <a href=#source-size-value><source-size-value></a>.
+ When a <a href=#source-size-0>source size</a> has a unit relative to the viewport,
+ it must be interpreted relative to the <code><a href=#the-img-element>img</a></code> element's document's viewport.
+ Other units must be interpreted the same as in Media Queries. <a href=#refsMQ>[MQ]</a></p>
- <li><p><i>Splitting loop</i>: <a href=#skip-whitespace>Skip whitespace</a>.</li>
+ <p>When asked to <dfn id=select-an-image-source>select an image source</dfn> for a given <code><a href=#the-img-element>img</a></code> element <var>el</var>,
+ user agents must do the following:</p>
- <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 -->
+ <ol><li><p><a href=#update-the-source-set>Update the source set</a> for <var>el</var>.</li>
- <li><p>If <var title="">url</var> is empty, then jump to the step labeled <i>descriptor
- parser</i>.</li>
+ <li><p>If <var>el</var>'s <a href=#source-set>source set</a> is empty,
+ return null as the URL and undefined as the pixel density and abort these steps.</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>Otherwise, take <var>el</var>'s <a href=#source-set>source set</a>
+ and let it be <var><a href=#source-set>source set</a></var>.</li>
- <li><p>Add <var title="">url</var> to <var title="">raw candidates</var>, associated with <var title="">descriptors</var>.</li>
+ <li><p>In a user agent-specific manner,
+ choose one <a href=#image-source>image source</a> from <var><a href=#source-set>source set</a></var>.
+ Let this be <var>selected source</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>Return <var>selected source</var> and its associated pixel density.</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>
+ </ol><p>When asked to <dfn id=update-the-source-set>update the source set</dfn> for a given <code><a href=#the-img-element>img</a></code> element <var>el</var>,
+ user agents must do the following:</p>
- <li><p>Return to the step labeled <i>splitting loop</i>.</li>
+ <ol><li><p>Set <var>el</var>'s <a href=#source-set>source set</a> to an empty <a href=#source-set>source set</a>.</li>
- <li><p><i>Descriptor parser</i>: Let <var title="">candidates</var> be an initially empty ordered
- list of <a href=#url title=URL>URLs</a> each with an associated pixel density, and optionally an
- associated width, height, or both. The order of entries in the list is the order in which entries
- are added to the list.</p>
+ <li><p>If <var>el</var> has a parent node and that is a <code><a href=#the-picture-element>picture</a></code> element,
+ let <var>elements</var> be an array containing <var>el</var>'s parent node's child elements, retaining relative order.
+ Otherwise, let <var>elements</var> be array containing only <var>el</var>.</li>
<li>
- <p>For each entry in <var title="">raw candidates</var> with <a href=#url>URL</a> <var title="">url</var> associated with the unparsed descriptors <var title="">unparsed
- descriptors</var>, in the order they were originally added to the list, run these substeps:</p>
+ <p>Iterate through <var>elements</var>,
+ doing the following for each item <var>child</var>:</p>
- <ol><li><p>Let <var title="">descriptor list</var> be the result of <a href=#split-a-string-on-spaces title="split a string on
- spaces">splitting <var title="">unparsed descriptors</var> on spaces</a>.</li>
+ <ol><li>
- <li><p>Let <var title="">error</var> be <i>no</i>.</li>
+ <p>If <var>child</var> is <var>el</var>:</p>
- <li><p>Let <var title="">width</var> be <i>absent</i>.</li>
+ <ol><li><p>If <var>child</var> has a <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute,
+ <a href=#parse-a-srcset-attribute title="parse a srcset attribute">parse <var>child</var>'s srcset attribute</a>
+ and let the returned <a href=#source-set>source set</a> be <var><a href=#source-set>source set</a></var>.
+ Otherwise, let <var><a href=#source-set>source set</a></var> be an empty <a href=#source-set>source set</a>.</li>
- <li><p>Let <var title="">height</var> be <i>absent</i>.</li>
+ <li><p><a href=#parse-a-sizes-attribute title="parse a sizes attribute">Parse <var>child</var>'s sizes attribute</a> and
+ let <var><a href=#source-set>source set</a></var>'s <a href=#source-size-0>source size</a> be the returned value.</li>
- <li><p>Let <var title="">density</var> be <i>absent</i>.</li>
+ <li><p>If <var>child</var> has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute
+ <!-- XXX whose value is not the empty string? -->
+ and <var><a href=#source-set>source set</a></var> does not contain an
+ <a href=#image-source>image source</a> with a density descriptor value of 1,
+ and no <a href=#image-source>image source</a> with a width descriptor,
+ append <var>child</var>'s <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute value to <var><a href=#source-set>source set</a></var>.</li>
+ <li><p>Let <var>el</var>'s <a href=#source-set>source set</a> be <var><a href=#source-set>source set</a></var>.</li>
+
+ <li><p>Abort this algorithm.</li>
+
+ </ol></li>
+
+ <li><p>If <var>child</var> is not a <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element,
+ continue to the next child.
+ Otherwise, <var>child</var> is a <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> element.</li>
+
+ <li><p>If <var>child</var> does not have a <code title=attr-picture-source-srcset><a href=#attr-picture-source-srcset>srcset</a></code> attribute,
+ continue to the next child.</li>
+
+ <li><p><a href=#parse-a-srcset-attribute title="parse a srcset attribute">Parse <var>child</var>'s srcset attribute</a> and
+ let the returned <a href=#source-set>source set</a> be <var><a href=#source-set>source set</a></var>.</li>
+
+ <li><p>If <var><a href=#source-set>source set</a></var> has zero <a href=#image-source title="image source">image sources</a>,
+ continue to the next child.</li>
+
+ <li><p>If <var>child</var> has a <code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute,
+ and its value is a <a href=#valid-media-query>valid media query</a> which evaluates to true,
+ attach the media query to <var><a href=#source-set>source set</a></var>.
+ If its value is not a <a href=#valid-media-query>valid media query</a>,
+ or is a <a href=#valid-media-query>valid media query</a> that evaluates to false,
+ continue to the next child.</li>
+
+ <li><p><a href=#parse-a-sizes-attribute title="parse a sizes attribute">Parse <var>child</var>'s sizes attribute</a>
+ and let <var><a href=#source-set>source set</a></var>'s <a href=#source-size-0>source size</a> be the returned value.</li>
+
+ <li><p>If <var>child</var> has a <code title=attr-picture-source-type><a href=#attr-picture-source-type>type</a></code> attribute,
+ and its value is an unknown or unsupported <a href=#mime-type>MIME type</a>,
+ continue to the next child.</li>
+
+ <li><p><a href=#normalize-the-source-densities>Normalize the source densities</a> of <var><a href=#source-set>source set</a></var>.</li>
+
+ <li><p>Let <var>el</var>'s <a href=#source-set>source set</a> be <var><a href=#source-set>source set</a></var>.</li>
+
+ <li><p>Abort this algorithm.</li>
+
+ </ol></li>
+
+ </ol><p class=note>Each <code><a href=#the-img-element>img</a></code> element independently considers
+ its previous sibling <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements
+ plus the <code><a href=#the-img-element>img</a></code> element itself
+ for selecting an <a href=#image-source>image source</a>, ignoring any other (invalid) elements,
+ including other <code><a href=#the-img-element>img</a></code> elements in the same <code><a href=#the-picture-element>picture</a></code> element,
+ or <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements that are following siblings
+ of the relevant <code><a href=#the-img-element>img</a></code> element.</p>
+
+ <p>When asked to <dfn id=parse-a-srcset-attribute>parse a srcset attribute</dfn> from an element,
+ parse the value of the element's <code>srcset</code> attribute as follows:</p>
+
+ <ol><li><p>Let <var title="">input</var> be the value passed to this algorithm.</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 URLs with associated unparsed descriptor list.
+ The order of entries in the lists is the order in which entries are added to the lists.</li>
+
+ <li><p><i title="">Splitting loop</i>: <a href=#collect-a-sequence-of-characters>Collect a sequence of characters</a>
+ that are <a href=#space-character title="space character">space characters</a> or U+002C COMMA characters.</li>
+
+ <li><p>If <var>position</var> is past the end of <var><a href=#the-input-element>input</a></var>,
+ then jump to the step labeled <i title="">descriptor parser</i>.</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><a href=#url>url</a></var>.</li>
+
+ <li><p>Let <var title="">descriptors</var> be a new empty list.</li>
+
+ <li>
+
+ <p>If <var title="">url</var> ends with a U+002C COMMA character (,),
+ follow these substeps:</p>
+
+ <ol><li><p>Remove all trailing U+002C COMMA characters from <var title="">url</var>.</li>
+
+ <li><p>If <var title="">url</var> is empty,
+ then jump to the step labeled <i title="">splitting loop</i>.</li>
+
+ </ol><p>Otherwise, follow these substeps:</p>
+
+ <ol><li><p>Let <var title="">current token</var> be the empty string.</li>
+
+ <li><p>Let <var title="">state</var> be <i title="">start</i>.</li>
+
<li>
- <p>For each token in <var title="">descriptor list</var>, run the appropriate set of steps
- from the following list:</p>
+ <p>Let <var title="">c</var> be the character at <var title="">position</var>.
+ Do the following depending on the value of <var title="">state</var>.
+ For the purpose of this step, "EOF" is a special character representing
+ that <var title="">position</var> is past the end of <var><a href=#the-input-element>input</a></var>.</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>
+ <dl class=switch><dt><i title="">Start</i></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>
+ <p>Do the following, depending on the value of <var title="">c</var>:</p>
- <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>
+ <dl class=switch><dt><a href=#space-character>Space character</a></dt>
- </ol></dd>
+ <dd><p>If <var title="">current token</var> is not empty,
+ append <var title="">current token</var> to <var title="">descriptors</var>
+ and let <var title="">current token</var> be the empty string.
+ Set <var title="">state</var> to <i title="">after token</i>.</dd>
+ <dt>U+002C COMMA (,)</dt>
- <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><p>Advance <var title="">position</var> to the next character in <var title="">input</var>.
+ If <var title="">current token</var> is not empty,
+ append <var title="">current token</var> to <var title="">descriptors</var>.
+ Jump to the step labeled <i title="">add candidate</i>.</dd>
+ <dt>U+0028 LEFT PARANTHESIS (()</dt>
+
+ <dd><p>Append <var title="">c</var> to <var title="">current token</var>.
+ Set <var title="">state</var> to <i title="">in parens</i>.</dd>
+
+ <dt>EOF</dt>
+
+ <dd><p>If <var title="">current token</var> is not empty,
+ append <var title="">current token</var> to <var title="">descriptors</var>.
+ Jump to the step labeled <i title="">add candidate</i>.</dd>
+
+ <dt>Anything else</dt>
+
+ <dd><p>Append <var title="">c</var> to <var title="">current token</var>.</dd>
+
+ </dl></dd>
+
+ <dt><i title="">In parens</i></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>
+ <p>Do the following, depending on the value of <var title="">c</var>:</p>
- <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>
+ <dl class=switch><dt>U+0029 RIGHT PARENTHESIS ())</dt>
- </ol></dd>
+ <dd><p>Append <var title="">c</var> to <var title="">current token</var>.
+ Set <var title="">state</var> to <i title="">start</i>.</dd>
+ <dt>EOF</dt>
- <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><p>Append <var title="">current token</var> to <var title="">descriptors</var>.
+ Jump to the step labeled <i title="">add candidate</i>.</dd>
+ <dt>Anything else</dt>
+
+ <dd><p>Append <var title="">c</var> to <var title="">current token</var>.</dd>
+
+ </dl></dd>
+
+ <dt><i title="">After token</i></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>
+ <p>Do the following, depending on the value of <var title="">c</var>:</p>
- <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>
+ <dl class=switch><dt><a href=#space-character>Space character</a></dt>
- </ol></dd>
+ <dd><p>Stay in this state.</dd>
+ <dt>EOF</dt>
- </dl></li>
+ <dd><p>Jump to the step labeled <i title="">add candidate</i>.</dd>
- <li><p>If <var title="">width</var> is still <i>absent</i>, set it to Infinity.</li>
+ <dt>Anything else</dt>
- <li><p>If <var title="">height</var> is still <i>absent</i>, set it to Infinity.</li>
+ <dd><p>Set <var title="">state</var> to <i title="">start</i>.
+ Set <var title="">position</var> to the <em>previous</em> character in <var><a href=#the-input-element>input</a></var>.</dd>
- <li><p>If <var title="">density</var> is still <i>absent</i>, set it to 1.0.</li>
+ </dl></dd>
- <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>
+ </dl><p>Advance <var title="">position</var> to the next character in <var title="">input</var>.
+ Repeat this step.</p>
+ </li>
+
</ol></li>
+ <li><p><i title="">Add candidate</i>: Add <var title="">url</var> to <var title="">raw candidates</var>,
+ associated with <var title="">descriptors</var>.</li>
+
+ <li><p>Return to the step labeled <i title="">splitting loop</i>.</li>
+
+ <li><p><i title="">Descriptor parser</i>:
+ Let <var title="">candidates</var> be an initially empty <a href=#source-set>source set</a>.
+ The order of entries in the list is the order in which entries are added to the list.</li>
+
<li>
- <p>If the <code><a href=#the-img-element>img</a></code> element has a <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute whose
- value is not the empty string, then run the following substeps:</p>
+ <p>For each entry in <var title="">raw candidates</var> with URL <var title="">url</var>
+ associated with the unparsed descriptor list <var title="">descriptor list</var>,
+ run these substeps:</p>
- <ol><li><p>Let <var title="">url</var> be the value of the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</li>
+ <ol><li><p>Let <var title="">error</var> be <i title="">no</i>.</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>
+ <li><p>Let <var title="">width</var> be <i title="">absent</i>.</li>
+ <li><p>Let <var title="">density</var> be <i title="">absent</i>.</li>
+
+ <li><p>Let <var title="">future-compat-h</var> be <i title="">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> and <var title="">density</var>
+ are not both <i title="">absent</i>,
+ then let <var title="">error</var> be <i title="">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.
+ If the result is zero, let <var title="">error</var> be <i title="">yes</i>.
+ Otherwise, let <var title="">width</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="">width</var>, <var title="">density</var> and <var title="">future-compat-h</var>
+ are not all <i title="">absent</i>,
+ then let <var title="">error</var> be <i title="">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.
+ If the result is less than zero, let <var title="">error</var> be <i title="">yes</i>.
+ Otherwise, let <var title="">density</var> be the result.</p>
+
+ <p class=note>If <var title="">density</var> is zero,
+ the intrinsic dimensions will be infinite.
+ User agents are expected to have limits in how big images can be rendered,
+ which is allowed by the <a href=#hardwareLimitations>hardware limitations</a> clause.</p>
+
+ </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="">future-compat-h</var> and <var title="">density</var>
+ are not both <i title="">absent</i>,
+ then let <var title="">error</var> be <i title="">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.
+ If the result is zero, let <var title="">error</var> be <i title="">yes</i>.
+ Otherwise, let <var title="">future-compat-h</var> be the result.</li>
+
+ </ol></dd>
+
+ </dl></li>
+
+ <li><p>If <var>error</var> is still <i title="">no</i>,
+ then add a new <a href=#image-source>image source</a> to <var title="">candidates</var>
+ whose URL is <var title="">url</var>,
+ associated with a width <var>width</var> if not <i title="">absent</i>
+ and a pixel density <var title="">density</var> if not <i title="">absent</i>.</li>
+
</ol></li>
- <li><p>If <var title="">candidates</var> is empty, return null as the URL and undefined as the
- pixel density and abort these steps.</li>
+ <li><p>Return <var>candidates</var>.</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>
+ </ol><p>When asked to <dfn id=parse-a-sizes-attribute>parse a sizes attribute</dfn> from an element,
+ <a href=#parse-a-comma-separated-list-of-component-values>parse a comma-separated list of component values</a>
+ from the value of the element's <code title="">sizes</code> attribute
+ (or the empty string, if the attribute is absent),
+ and let <var title="">unparsed sizes list</var> be the result. <a href=#refsCSSSYNTAX>[CSSSYNTAX]</a></p>
- <li>
+ <p>For each <var title="">unparsed size</var> in <var title="">unparsed sizes list</var>:</p>
- <p>Optionally, return the <a href=#url>URL</a> of an entry in <var title="">candidates</var> chosen
- by the user agent, and that entry's associated pixel density, and then abort these steps. The
- user agent may apply any algorithm or heuristic in its selection of an entry for the purposes of
- this step.</p>
+ <ol><li><p>Remove all consecutive <a href=#whitespace-token><whitespace-token></a>s
+ from the end of <var title="">unparsed size</var>.
+ If <var title="">unparsed size</var> is now empty,
+ continue to the next iteration of this algorithm.</li>
- <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>
+ <li><p>If the last <a href=#component-value>component value</a> in <var title="">unparsed size</var>
+ is a valid non-negative <a href=#source-size-value><source-size-value></a>,
+ let <var title="">size</var> be its value
+ and remove the <a href=#component-value>component value</a> from <var title="">unparsed size</var>.
+ Otherwise, continue to the next iteration of this algorithm.</li>
- <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><p>Remove all consecutive <a href=#whitespace-token><whitespace-token></a>s
+ from the end of <var title="">unparsed size</var>.
+ If <var title="">unparsed size</var> is now empty,
+ return <var title="">size</var> and exit this algorithm.</li>
- </li>
+ <li><p>Parse the remaining <a href=#component-value title="component value">component values</a> in <var title="">unparsed size</var>
+ as a <a href=#media-condition><media-condition></a>.
+ If it does not parse correctly,
+ or it does parse correctly but the <a href=#media-condition><media-condition></a> evaluates to false,
+ continue to the next iteration of this algorithm. <a href=#refsMQ>[MQ]</a></li>
- <li><p>Let <var title="">max width</var> be the width of the viewport, and let <var title="">max
- height</var> be the height of the viewport. <a href=#refsCSS>[CSS]</a></li>
+ <li><p>Return <var title="">size</var> and exit this algorithm.</li>
- <li><p>If there are any entries in <var title="">candidates</var> that have an associated width
- that is less than <var title="">max width</var>, then remove them, unless that would remove all
- the entries, in which case remove only the entries whose associated width is less than the
- greatest such width.</li>
+ </ol><p>If the above algorithm exhausts <var title="">unparsed sizes list</var> without returning a <var title="">size</var> value,
+ return <code title="">100vw</code>.</p>
- <li><p>If there are any entries in <var title="">candidates</var> that have an associated height
- that is less than <var title="">max height</var>, then remove them, unless that would remove all
- the entries, in which case remove only the entries whose associated height is less than the
- greatest such height.</li>
+ <p class=note>While a <a href=#valid-source-size-list>valid source size list</a> only contains a bare <a href=#source-size-value><source-size-value></a>
+ (without an accompanying <a href=#media-condition><media-condition></a>)
+ as the last entry in the <a href=#source-size-list><source-size-list></a>,
+ the parsing algorithm technically allows such at any point in the list,
+ and will accept it immediately as the size
+ if the preceding entries in the list weren't used.
+ This is to enable future extensions,
+ and protect against simple author errors such as a final trailing comma.</p>
- <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>
+ <p>An <a href=#image-source>image source</a> can have a density descriptor,
+ a width descriptor,
+ or no descriptor at all accompanying its URL.
+ Normalizing a <a href=#source-set>source set</a> gives every <a href=#image-source>image source</a> a density descriptor.</p>
- <li><p>Remove all the entries in <var title="">candidates</var> that have an associated width
- that is greater than the smallest such width.</li>
+ <p>When asked to <dfn id=normalize-the-source-densities>normalize the source densities</dfn> of a <a href=#source-set>source set</a> <var><a href=#source-set>source set</a></var>,
+ the user agent must do the following:</p>
- <li><p>Remove all the entries in <var title="">candidates</var> that have an associated height
- that is greater than the smallest such height.</li>
+ <ol><li><p>Let <var title="">source size</var> be <var><a href=#source-set>source set</a></var>'s <a href=#source-size-0>source size</a>.</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>
- <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>
+ <p>For each <a href=#image-source>image source</a> in <var title="">source set</var>:</p>
+ <ol><li><p>If the <a href=#image-source>image source</a> has a density descriptor,
+ continue to the next <a href=#image-source>image source</a>.</li>
+
+ <li>
+
+ <p>Otherwise, if the <a href=#image-source>image source</a> has a width descriptor,
+ replace the width descriptor with a density descriptor
+ with a value of the width descriptor divided by the <a href=#source-size-0>source size</a>
+ and a unit of <code title="">x</code>.</p>
+
+ <p class=note>If the <a href=#source-size-0>source size</a> is zero,
+ the density would be infinity,
+ which results in the intrinsic dimensions being zero by zero.</p>
+
+ </li>
+
+ <li><p>Otherwise, give the <a href=#image-source>image source</a> a density descriptor of <code title="">1x</code>.</li>
+
+ </ol></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; for example, if the user is not looking at the page any
@@ -21546,15 +22118,15 @@
<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
+ <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 and it either has no parent
+ or it is not a <code><a href=#the-picture-element>picture</a></code> element, 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>
+ density</var> be the URL and pixel density that results from <span>selecting an image source</span>, respectively.</li>
<li><p>⌛ If <var title="">selected source</var> is null, then abort these steps.</li>
<!-- not sure this can ever actually happen -->
@@ -21596,13 +22168,15 @@
<p><a href=#queue-a-task>Queue a task</a> to run the following substeps:</p>
- <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-src><a href=#attr-img-src>src</a></code>, <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>, or <code title=attr-img-crossorigin><a href=#attr-img-crossorigin>crossorigin</a></code>
- attributes have been set, changed, or removed since this algorithm started, then abort these
- steps.</p>
+ <ol><li><p>If the <code><a href=#the-img-element>img</a></code> element has experienced <a href=#relevant-mutations>relevant mutations</a>
+ since this algorithm started, then abort these steps.</p>
<li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#last-selected-source>last selected source</a> be <var title="">selected source</var> and the <code><a href=#the-img-element>img</a></code> element's <a href=#current-pixel-density>current pixel
density</a> be <var title="">selected pixel density</var>.</li>
+ <li><p>Let the <code><a href=#the-img-element>img</a></code> element's <a href=#current-request>current request</a>'s
+ <a href=#img-req-url title=img-req-url>current URL</a> be the resulting <a href=#absolute-url>absolute URL</a> from the earlier step.</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.
@@ -21735,12 +22309,19 @@
on an element that does not have an ancestor <code><a href=#the-a-element>a</a></code> element
with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute.</p>
+ <p class=note>The <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> and
+ <code title=attr-img-ismap><a href=#attr-img-ismap>ismap</a></code> attributes
+ can result in confusing behavior when used together with
+ <code title=picture-source><a href=#the-source-element-when-used-with-the-picture-element>source</a></code> elements with the
+ <code title=attr-picture-source-media><a href=#attr-picture-source-media>media</a></code> attribute specified
+ in a <code><a href=#the-picture-element>picture</a></code> element.</p>
+
<p>The <code><a href=#the-img-element>img</a></code> element supports <a href=#dimension-attributes>dimension
attributes</a>.</p>
<div class=impl>
- <p>The <dfn id=dom-img-alt title=dom-img-alt><code>alt</code></dfn>, <dfn id=dom-img-src title=dom-img-src><code>src</code></dfn>, and <dfn id=dom-img-srcset title=dom-img-srcset><code>srcset</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ <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>, <dfn id=dom-img-srcset title=dom-img-srcset><code>srcset</code></dfn> and <dfn id=dom-img-sizes title=dom-img-sizes><code>sizes</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
@@ -21791,6 +22372,14 @@
</dd>
+ <dt><var title="">image</var> . <code title=dom-img-currentSrc><a href=#dom-img-currentsrc>currentSrc</a></code></dt>
+
+ <dd>
+
+ <p>Returns the image's <a href=#absolute-url>absolute URL</a>.</p>
+
+ </dd>
+
<dt><var title="">image</var> = new <code title=dom-image><a href=#dom-image>Image</a></code>( [ <var title="">width</var> [, <var title="">height</var> ] ] )</dt>
<dd>
@@ -21819,7 +22408,7 @@
<p>The IDL attribute <dfn id=dom-img-complete title=dom-img-complete><code>complete</code></dfn> must return true if
any of the following conditions is true:</p>
- <ul class=brief><li>Both the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute are omitted.
+ <ul class=brief><!--XXXX check picture parent--><li>Both the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute and the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute are omitted.
<li>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is omitted and the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute's value is the empty string. <!-- we only have this
hack for src="", not srcset=""; present but empty or bogus srcset="" still means complete=false
@@ -21837,6 +22426,9 @@
<p class=note>The value of <code title=dom-img-complete><a href=#dom-img-complete>complete</a></code> can thus change while
a <a href=#concept-script title=concept-script>script</a> is executing.</p>
+ <p>The <dfn id=dom-img-currentsrc title=dom-img-currentSrc><code>currentSrc</code></dfn> IDL attribute
+ must return the <code><a href=#the-img-element>img</a></code> element's <a href=#current-request>current request</a>'s <a href=#img-req-url title=img-req-url>current URL</a>.</p>
+
<p>A constructor is provided for creating <code><a href=#htmlimageelement>HTMLImageElement</a></code> objects (in addition to
the factory methods from DOM such as <code title="">createElement()</code>): <dfn id=dom-image title=dom-image><code>Image(<var title="">width</var>, <var title="">height</var>)</code></dfn>.
When invoked as a constructor, this must return a new <code><a href=#htmlimageelement>HTMLImageElement</a></code> object (a new
@@ -21951,10 +22543,10 @@
- <h5 id=alt><span class=secno>4.7.1.1 </span>Requirements for providing text to act as an alternative for images</h5>
+ <h5 id=alt><span class=secno>4.7.5.1 </span>Requirements for providing text to act as an alternative for images</h5>
- <h6 id=general-guidelines><span class=secno>4.7.1.1.1 </span>General guidelines</h6>
+ <h6 id=general-guidelines><span class=secno>4.7.5.1.1 </span>General guidelines</h6>
<p>Except where otherwise specified, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be
specified and its value must not be empty; the value must be an appropriate replacement for the
@@ -21982,7 +22574,7 @@
text.</p>
- <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.7.1.1.2 </span>A link or button containing nothing but the image</h6>
+ <h6 id=a-link-or-button-containing-nothing-but-the-image><span class=secno>4.7.5.1.2 </span>A link or button containing nothing but the image</h6>
<p>When an <a href=#the-a-element>a</a> element that creates a <a href=#hyperlink>hyperlink</a>, or a <code><a href=#the-button-element>button</a></code>
element, has no textual content but contains one or more images, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attributes must contain text that together convey the purpose of
@@ -22026,7 +22618,7 @@
- <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.7.1.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
+ <h6 id=a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations><span class=secno>4.7.5.1.3 </span>A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations</h6>
<p>Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a
diagram, a graph, or a simple map showing directions. In such cases, an image can be given using
@@ -22093,7 +22685,7 @@
</div>
- <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.7.1.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
+ <h6 id=a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos><span class=secno>4.7.5.1.4 </span>A short phrase or label with an alternative graphical representation: icons, logos</h6>
<p>A document can contain information in iconic form. The icon is intended to help users of visual
browsers to recognise features at a glance.</p>
@@ -22206,7 +22798,7 @@
</div>
- <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.7.1.1.5 </span>Text that has been rendered to a graphic for typographical effect</h6>
+ <h6 id=text-that-has-been-rendered-to-a-graphic-for-typographical-effect><span class=secno>4.7.5.1.5 </span>Text that has been rendered to a graphic for typographical effect</h6>
<p>Sometimes, an image just consists of text, and the purpose of the image is not to highlight the
actual typographic effects used to render the text, but just to convey the text itself.</p>
@@ -22261,7 +22853,7 @@
- <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.7.1.1.6 </span>A graphical representation of some of the surrounding text</h6>
+ <h6 id=a-graphical-representation-of-some-of-the-surrounding-text><span class=secno>4.7.5.1.6 </span>A graphical representation of some of the surrounding text</h6>
<p>In many cases, the image is actually just supplementary, and its presence merely reinforces the
surrounding text. In these cases, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must be
@@ -22340,7 +22932,7 @@
- <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.7.1.1.7 </span>A purely decorative image that doesn't add any information</h6>
+ <h6 id="a-purely-decorative-image-that-doesn't-add-any-information"><span class=secno>4.7.5.1.7 </span>A purely decorative image that doesn't add any information</h6>
<p>If an image is decorative but isn't especially page-specific — for example an image that
forms part of a site-wide design scheme — the image should be specified in the site's CSS,
@@ -22373,7 +22965,7 @@
</div>
- <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.7.1.1.8 </span>A group of images that form a single larger picture with no links</h6>
+ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-no-links><span class=secno>4.7.5.1.8 </span>A group of images that form a single larger picture with no links</h6>
<p>When a picture has been sliced into smaller image files that are then displayed together to
form the complete picture again, one of the images must have its <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute set as per the relevant rules that would be appropriate
@@ -22404,7 +22996,7 @@
- <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.7.1.1.9 </span>A group of images that form a single larger picture with links</h6>
+ <h6 id=a-group-of-images-that-form-a-single-larger-picture-with-links><span class=secno>4.7.5.1.9 </span>A group of images that form a single larger picture with links</h6>
<p>Generally, <a href=#image-map title="image map">image maps</a> should be used instead of slicing an image
for links.</p>
@@ -22429,7 +23021,7 @@
- <h6 id=a-key-part-of-the-content><span class=secno>4.7.1.1.10 </span>A key part of the content</h6>
+ <h6 id=a-key-part-of-the-content><span class=secno>4.7.5.1.10 </span>A key part of the content</h6>
<p>In some cases, the image is a critical part of the content. This could be the case, for
instance, on a page that is part of a photo gallery. The image is the whole <em>point</em> of the
@@ -22701,7 +23293,7 @@
</dd>
- </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.7.1.1.11 </span>An image not intended for the user</h6>
+ </dl><h6 id=an-image-not-intended-for-the-user><span class=secno>4.7.5.1.11 </span>An image not intended for the user</h6>
<p>Generally authors should avoid using <code><a href=#the-img-element>img</a></code> elements for purposes other than showing
images.</p>
@@ -22713,7 +23305,7 @@
<p>In such cases, the <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes should both be set to zero.</p>
- <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.7.1.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
+ <h6 id=an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.7.5.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</h6>
<p><i>This section does not apply to documents that are publicly accessible, or whose target
audience is not necessarily personally known to the author, such as documents on a Web site,
@@ -22732,7 +23324,7 @@
<div class=impl>
- <h6 id=guidance-for-markup-generators><span class=secno>4.7.1.1.13 </span>Guidance for markup generators</h6>
+ <h6 id=guidance-for-markup-generators><span class=secno>4.7.5.1.13 </span>Guidance for markup generators</h6>
<p>Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain
alternative text from their users. However, it is recognised that in many cases, this will not be
@@ -22777,7 +23369,7 @@
<div class=impl>
- <h6 id=guidance-for-conformance-checkers><span class=secno>4.7.1.1.14 </span>Guidance for conformance checkers</h6>
+ <h6 id=guidance-for-conformance-checkers><span class=secno>4.7.5.1.14 </span>Guidance for conformance checkers</h6>
<p>A conformance checker must report the lack of an <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code>
attribute as an error unless one of the conditions listed below applies:</p>
@@ -22812,7 +23404,7 @@
- <h4 id=the-iframe-element><span class=secno>4.7.2 </span>The <dfn><code>iframe</code></dfn> element</h4>
+ <h4 id=the-iframe-element><span class=secno>4.7.6 </span>The <dfn><code>iframe</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -23478,7 +24070,7 @@
- <h4 id=the-embed-element><span class=secno>4.7.3 </span>The <dfn><code>embed</code></dfn> element</h4>
+ <h4 id=the-embed-element><span class=secno>4.7.7 </span>The <dfn><code>embed</code></dfn> element</h4>
<!-- (v2?)
we have all kinds of quirks we should define if they come up during
@@ -23816,7 +24408,7 @@
- <h4 id=the-object-element><span class=secno>4.7.4 </span>The <dfn><code>object</code></dfn> element</h4>
+ <h4 id=the-object-element><span class=secno>4.7.8 </span>The <dfn><code>object</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -24538,7 +25130,7 @@
- <h4 id=the-param-element><span class=secno>4.7.5 </span>The <dfn><code>param</code></dfn> element</h4>
+ <h4 id=the-param-element><span class=secno>4.7.9 </span>The <dfn><code>param</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd>None.</dd>
@@ -24622,7 +25214,7 @@
<!--TOPIC:Video and Audio-->
- <h4 id=the-video-element><span class=secno>4.7.6 </span>The <dfn id=video><code>video</code></dfn> element</h4>
+ <h4 id=the-video-element><span class=secno>4.7.10 </span>The <dfn id=video><code>video</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -24945,7 +25537,7 @@
- <h4 id=the-audio-element><span class=secno>4.7.7 </span>The <dfn id=audio><code>audio</code></dfn> element</h4>
+ <h4 id=the-audio-element><span class=secno>4.7.11 </span>The <dfn id=audio><code>audio</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -25086,7 +25678,7 @@
- <h4 id=the-source-element><span class=secno>4.7.8 </span>The <dfn><code>source</code></dfn> element</h4>
+ <h4 id=the-source-element><span class=secno>4.7.12 </span>The <dfn><code>source</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd>None.</dd>
@@ -25254,7 +25846,7 @@
<!--TOPIC:Video Text Tracks-->
- <h4 id=the-track-element><span class=secno>4.7.9 </span>The <dfn><code>track</code></dfn> element</h4>
+ <h4 id=the-track-element><span class=secno>4.7.13 </span>The <dfn><code>track</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd>None.</dd>
@@ -25464,7 +26056,7 @@
</div>
<!--TOPIC:Video and Audio-->
- <h4 id=media-elements><span class=secno>4.7.10 </span>Media elements</h4>
+ <h4 id=media-elements><span class=secno>4.7.14 </span>Media elements</h4>
<p><dfn id=media-element title="media element">Media elements</dfn> (<code><a href=#the-audio-element>audio</a></code> and <code><a href=#the-video-element>video</a></code>, in
this specification) implement the following interface:</p>
@@ -25604,7 +26196,7 @@
- <h5 id=error-codes><span class=secno>4.7.10.1 </span>Error codes</h5>
+ <h5 id=error-codes><span class=secno>4.7.14.1 </span>Error codes</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>
@@ -25671,7 +26263,7 @@
<dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code>
attribute was not suitable.</dd>
- </dl><h5 id=location-of-the-media-resource><span class=secno>4.7.10.2 </span>Location of the media resource</h5>
+ </dl><h5 id=location-of-the-media-resource><span class=secno>4.7.14.2 </span>Location of the media resource</h5>
<p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content attribute on <a href=#media-element title="media
element">media elements</a> gives the address of the media resource (video, audio) to show. The
@@ -25730,7 +26322,7 @@
- <h5 id=mime-types><span class=secno>4.7.10.3 </span>MIME types</h5>
+ <h5 id=mime-types><span class=secno>4.7.14.3 </span>MIME types</h5>
<p>A <a href=#media-resource>media resource</a> can be described in terms of its <em>type</em>, specifically a
<a href=#mime-type>MIME type</a>, in some cases with a <code title="">codecs</code> parameter. (Whether the
@@ -25818,7 +26410,7 @@
it cannot render.</p>
- <h5 id=network-states><span class=secno>4.7.10.4 </span>Network states</h5>
+ <h5 id=network-states><span class=secno>4.7.14.4 </span>Network states</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>
@@ -25868,7 +26460,7 @@
- <h5 id=loading-the-media-resource><span class=secno>4.7.10.5 </span>Loading the media resource</h5>
+ <h5 id=loading-the-media-resource><span class=secno>4.7.14.5 </span>Loading the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>
@@ -26822,7 +27414,7 @@
- <h5 id=offsets-into-the-media-resource><span class=secno>4.7.10.6 </span>Offsets into the media resource</h5>
+ <h5 id=offsets-into-the-media-resource><span class=secno>4.7.14.6 </span>Offsets into the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>
@@ -27062,7 +27654,7 @@
- <h5 id=ready-states><span class=secno>4.7.10.7 </span>Ready states</h5>
+ <h5 id=ready-states><span class=secno>4.7.14.7 </span>Ready states</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>
@@ -27289,7 +27881,7 @@
- <h5 id=playing-the-media-resource><span class=secno>4.7.10.8 </span>Playing the media resource</h5>
+ <h5 id=playing-the-media-resource><span class=secno>4.7.14.8 </span>Playing the media resource</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>
@@ -27856,7 +28448,7 @@
- <h5 id=seeking><span class=secno>4.7.10.9 </span>Seeking</h5>
+ <h5 id=seeking><span class=secno>4.7.14.9 </span>Seeking</h5>
<dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>
@@ -28014,7 +28606,7 @@
</div>
- <h5 id=media-resources-with-multiple-media-tracks><span class=secno>4.7.10.10 </span>Media resources with multiple media tracks</h5>
+ <h5 id=media-resources-with-multiple-media-tracks><span class=secno>4.7.14.10 </span>Media resources with multiple media tracks</h5>
<p>A <a href=#media-resource>media resource</a> can have multiple embedded audio and video tracks. For example,
in addition to the primary video and audio tracks, a <a href=#media-resource>media resource</a> could have
@@ -28093,7 +28685,7 @@
</div>
- <h6 id=audiotracklist-and-videotracklist-objects><span class=secno>4.7.10.10.1 </span><code><a href=#audiotracklist>AudioTrackList</a></code> and <code><a href=#videotracklist>VideoTrackList</a></code> objects</h6>
+ <h6 id=audiotracklist-and-videotracklist-objects><span class=secno>4.7.14.10.1 </span><code><a href=#audiotracklist>AudioTrackList</a></code> and <code><a href=#videotracklist>VideoTrackList</a></code> objects</h6>
<p>The <code><a href=#audiotracklist>AudioTrackList</a></code> and <code><a href=#videotracklist>VideoTrackList</a></code> interfaces are used by
attributes defined in the previous section.</p>
@@ -28419,7 +29011,7 @@
</table><!-- v2 should also fire an event when the list changes (but note that that should be on the media element event task source) --></div>
- <h6 id=selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.7.10.10.2 </span>Selecting specific audio and video tracks declaratively</h6>
+ <h6 id=selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.7.14.10.2 </span>Selecting specific audio and video tracks declaratively</h6>
<p>The <code title=dom-media-audioTracks><a href=#dom-media-audiotracks>audioTracks</a></code> and <code title=dom-media-videoTracks><a href=#dom-media-videotracks>videoTracks</a></code> attributes allow scripts to select which track
should play, but it is also possible to select specific tracks declaratively, by specifying
@@ -28438,9 +29030,9 @@
</div>
- <h5 id=synchronising-multiple-media-elements><span class=secno>4.7.10.11 </span>Synchronising multiple media elements</h5>
+ <h5 id=synchronising-multiple-media-elements><span class=secno>4.7.14.11 </span>Synchronising multiple media elements</h5>
- <h6 id=introduction-0><span class=secno>4.7.10.11.1 </span>Introduction</h6>
+ <h6 id=introduction-1><span class=secno>4.7.14.11.1 </span>Introduction</h6>
<p>Each <a href=#media-element>media element</a> can have a <code><a href=#mediacontroller>MediaController</a></code>. A
<code><a href=#mediacontroller>MediaController</a></code> is an object that coordinates the playback of multiple <a href=#media-element title="media element">media elements</a>, for instance so that a sign-language interpreter
@@ -28488,7 +29080,7 @@
-->
- <h6 id=media-controllers><span class=secno>4.7.10.11.2 </span>Media controllers</h6>
+ <h6 id=media-controllers><span class=secno>4.7.14.11.2 </span>Media controllers</h6>
<pre class=idl>enum <dfn id=mediacontrollerplaybackstate>MediaControllerPlaybackState</dfn> { "<a href=#dom-mediacontroller-waiting title=dom-MediaController-waiting>waiting</a>", "<a href=#dom-mediacontroller-playing title=dom-MediaController-playing>playing</a>", "<a href=#dom-mediacontroller-ended title=dom-MediaController-ended>ended</a>" };
[<a href=#dom-mediacontroller title=dom-MediaController>Constructor</a>]
@@ -29135,7 +29727,7 @@
</div>
- <h6 id=assigning-a-media-controller-declaratively><span class=secno>4.7.10.11.3 </span>Assigning a media controller declaratively</h6>
+ <h6 id=assigning-a-media-controller-declaratively><span class=secno>4.7.14.11.3 </span>Assigning a media controller declaratively</h6>
<p>The <dfn id=attr-media-mediagroup title=attr-media-mediagroup><code>mediagroup</code></dfn> content attribute on <a href=#media-element title="media element">media elements</a> can be used to link multiple <a href=#media-element title="media
element">media elements</a> together by implicitly creating a <code><a href=#mediacontroller>MediaController</a></code>. The
@@ -29244,9 +29836,9 @@
<!--TOPIC:Video Text Tracks-->
- <h5 id=timed-text-tracks><span class=secno>4.7.10.12 </span>Timed text tracks</h5>
+ <h5 id=timed-text-tracks><span class=secno>4.7.14.12 </span>Timed text tracks</h5>
- <h6 id=text-track-model><span class=secno>4.7.10.12.1 </span>Text track model</h6>
+ <h6 id=text-track-model><span class=secno>4.7.14.12.1 </span>Text track model</h6>
<p>A <a href=#media-element>media element</a> can have a group of associated <dfn id=text-track title="text track">text
tracks</dfn>, known as the <a href=#media-element>media element</a>'s <dfn id=list-of-text-tracks>list of text tracks</dfn>. The <a href=#text-track title="text track">text tracks</a> are sorted as follows:</p>
@@ -29598,7 +30190,7 @@
be the order in which the cues were listed in the file). <a href=#refsWEBVTT>[WEBVTT]</a></p>
- <h6 id=sourcing-in-band-text-tracks><span class=secno>4.7.10.12.2 </span>Sourcing in-band text tracks</h6>
+ <h6 id=sourcing-in-band-text-tracks><span class=secno>4.7.14.12.2 </span>Sourcing in-band text tracks</h6>
<p>A <dfn id=media-resource-specific-text-track>media-resource-specific text track</dfn> is a <a href=#text-track>text track</a> that corresponds
to data found in the <a href=#media-resource>media resource</a>.</p>
@@ -29725,7 +30317,7 @@
<div class=impl>
- <h6 id=sourcing-out-of-band-text-tracks><span class=secno>4.7.10.12.3 </span>Sourcing out-of-band text tracks</h6>
+ <h6 id=sourcing-out-of-band-text-tracks><span class=secno>4.7.14.12.3 </span>Sourcing out-of-band text tracks</h6>
<p>When a <code><a href=#the-track-element>track</a></code> element is created, it must be associated with a new <a href=#text-track>text
track</a> (with its value set as defined below) and its corresponding new
@@ -29994,7 +30586,7 @@
<div class=impl>
- <h6 id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.7.10.12.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as <a href=#text-track-cue title="text track
+ <h6 id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.7.14.12.4 </span><dfn>Guidelines for exposing cues</dfn> in various formats as <a href=#text-track-cue title="text track
cue">text track cues</a></h6>
<p>How a specific format's text track cues are to be interpreted for the purposes of processing by
@@ -30022,7 +30614,7 @@
</dl></div>
- <h6 id=text-track-api><span class=secno>4.7.10.12.5 </span>Text track API</h6>
+ <h6 id=text-track-api><span class=secno>4.7.14.12.5 </span>Text track API</h6>
<pre class=idl>interface <dfn id=texttracklist>TextTrackList</dfn> : <a href=#eventtarget>EventTarget</a> {
readonly attribute unsigned long <a href=#dom-texttracklist-length title=dom-TextTrackList-length>length</a>;
@@ -30549,7 +31141,7 @@
</div>
- <h6 id=text-tracks-describing-chapters><span class=secno>4.7.10.12.6 </span>Text tracks describing chapters</h6>
+ <h6 id=text-tracks-describing-chapters><span class=secno>4.7.14.12.6 </span>Text tracks describing chapters</h6>
<p>Chapters are segments of a <a href=#media-resource>media resource</a> with a given title. Chapters can be
nested, in the same way that sections in a document outline can have subsections.</p>
@@ -30673,7 +31265,7 @@
<div class=impl>
- <h6 id=cue-events><span class=secno>4.7.10.12.7 </span>Event handlers for objects of the text track APIs</h6>
+ <h6 id=cue-events><span class=secno>4.7.14.12.7 </span>Event handlers for objects of the text track APIs</h6>
<p>The following are the <a href=#event-handlers>event handlers</a> that (and their corresponding <a href=#event-handler-event-type title="event handler event type">event handler event types</a>) must be supported, as <a href=#event-handler-idl-attributes>event handler IDL
attributes</a>, by all objects implementing the <code><a href=#texttracklist>TextTrackList</a></code> interface:</p>
@@ -30697,7 +31289,7 @@
- <h6 id=best-practices-for-metadata-text-tracks><span class=secno>4.7.10.12.8 </span>Best practices for metadata text tracks</h6>
+ <h6 id=best-practices-for-metadata-text-tracks><span class=secno>4.7.14.12.8 </span>Best practices for metadata text tracks</h6>
<p><i>This section is non-normative.</i></p>
@@ -30768,7 +31360,7 @@
- <h5 id=user-interface><span class=secno>4.7.10.13 </span>User interface</h5>
+ <h5 id=user-interface><span class=secno>4.7.14.13 </span>User interface</h5>
<p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn> attribute is a <a href=#boolean-attribute>boolean
attribute</a>. If present, it indicates that the author has not provided a scripted controller
@@ -30996,7 +31588,7 @@
- <h5 id=time-ranges><span class=secno>4.7.10.14 </span>Time ranges</h5>
+ <h5 id=time-ranges><span class=secno>4.7.14.14 </span>Time ranges</h5>
<p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
represent a list of ranges (periods) of time.</p>
@@ -31074,7 +31666,7 @@
</div>
- <h5 id=the-trackevent-interface><span class=secno>4.7.10.15 </span>The <code><a href=#trackevent>TrackEvent</a></code> interface</h5>
+ <h5 id=the-trackevent-interface><span class=secno>4.7.14.15 </span>The <code><a href=#trackevent>TrackEvent</a></code> interface</h5>
<pre class=idl>[Constructor(DOMString type, optional <a href=#trackeventinit>TrackEventInit</a> eventInitDict)]
interface <dfn id=trackevent>TrackEvent</dfn> : <a href=#event>Event</a> {
@@ -31104,7 +31696,7 @@
- <h5 id=mediaevents><span class=secno>4.7.10.16 </span>Event summary</h5>
+ <h5 id=mediaevents><span class=secno>4.7.14.16 </span>Event summary</h5>
<p><i>This section is non-normative.</i></p>
@@ -31496,7 +32088,7 @@
</table><!--ADD-TOPIC:Security--><div class=impl>
- <h5 id=security-and-privacy-considerations><span class=secno>4.7.10.17 </span>Security and privacy considerations</h5>
+ <h5 id=security-and-privacy-considerations><span class=secno>4.7.14.17 </span>Security and privacy considerations</h5>
<p>The main security and privacy implications of the <code><a href=#the-video-element>video</a></code> and <code><a href=#the-audio-element>audio</a></code>
elements come from the ability to embed media cross-origin. There are two directions that threats
@@ -31535,7 +32127,7 @@
<!--REMOVE-TOPIC:Security-->
- <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.7.10.18 </span>Best practices for authors using media elements</h5>
+ <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.7.14.18 </span>Best practices for authors using media elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -31553,7 +32145,7 @@
<div class=impl>
- <h5 id=best-practices-for-implementors-of-media-elements><span class=secno>4.7.10.19 </span>Best practices for implementors of media elements</h5>
+ <h5 id=best-practices-for-implementors-of-media-elements><span class=secno>4.7.14.19 </span>Best practices for implementors of media elements</h5>
<p><i>This section is non-normative.</i></p>
@@ -31602,7 +32194,7 @@
- <h4 id=the-map-element><span class=secno>4.7.11 </span>The <dfn><code>map</code></dfn> element</h4>
+ <h4 id=the-map-element><span class=secno>4.7.15 </span>The <dfn><code>map</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31704,7 +32296,7 @@
- <h4 id=the-area-element><span class=secno>4.7.12 </span>The <dfn><code>area</code></dfn> element</h4>
+ <h4 id=the-area-element><span class=secno>4.7.16 </span>The <dfn><code>area</code></dfn> element</h4>
<dl class=element><dt><a href=#concept-element-categories title=concept-element-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -31907,7 +32499,7 @@
- <h4 id=image-maps><span class=secno>4.7.13 </span>Image maps</h4>
+ <h4 id=image-maps><span class=secno>4.7.17 </span>Image maps</h4>
<!-- TESTS
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
@@ -31918,7 +32510,7 @@
<div class=impl>
- <h5 id=authoring><span class=secno>4.7.13.1 </span>Authoring</h5>
+ <h5 id=authoring><span class=secno>4.7.17.1 </span>Authoring</h5>
</div>
@@ -31956,7 +32548,7 @@
<div class=impl>
- <h5 id=processing-model-0><span class=secno>4.7.13.2 </span>Processing model</h5>
+ <h5 id=processing-model-0><span class=secno>4.7.17.2 </span>Processing model</h5>
<p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element representing an image has a
<code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified, user agents must process it
@@ -32138,7 +32730,7 @@
- <h4 id=mathml><span class=secno>4.7.14 </span>MathML</h4>
+ <h4 id=mathml><span class=secno>4.7.18 </span>MathML</h4>
<p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML namespace</a> falls into the
<a href=#embedded-content-category>embedded content</a>, <a href=#phrasing-content>phrasing content</a>, and <a href=#flow-content>flow content</a>
@@ -32212,7 +32804,7 @@
- <h4 id=svg-0><span class=secno>4.7.15 </span>SVG</h4>
+ <h4 id=svg-0><span class=secno>4.7.19 </span>SVG</h4>
<p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG namespace</a> falls into the
<a href=#embedded-content-category>embedded content</a>, <a href=#phrasing-content>phrasing content</a>, and <a href=#flow-content>flow content</a>
@@ -32238,7 +32830,7 @@
- <h4 id=dimension-attributes><span class=secno>4.7.16 </span><dfn>Dimension attributes</dfn></h4>
+ <h4 id=dimension-attributes><span class=secno>4.7.20 </span><dfn>Dimension attributes</dfn></h4>
<p><span class=impl><strong>Author requirements</strong>:</span> The <dfn id=attr-dim-width title=attr-dim-width><code>width</code></dfn> and <dfn id=attr-dim-height title=attr-dim-height><code>height</code></dfn> attributes on <code><a href=#the-img-element>img</a></code>,
<code><a href=#the-iframe-element>iframe</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-object-element>object</a></code>, <code><a href=#the-video-element>video</a></code>, and, when their
@@ -32298,7 +32890,7 @@
<h3 id=links><span class=secno>4.8 </span>Links</h3>
- <h4 id=introduction-1><span class=secno>4.8.1 </span>Introduction</h4>
+ <h4 id=introduction-2><span class=secno>4.8.1 </span>Introduction</h4>
<p>Links are a conceptual construct, created by <code><a href=#the-a-element>a</a></code>, <code><a href=#the-area-element>area</a></code>, and
<code><a href=#the-link-element>link</a></code> elements, that <a href=#represents title=represents>represent</a> a connection between
@@ -37504,7 +38096,7 @@
<p><img width=414 src=http://images.whatwg.org/sample-table-sortable-3.png alt="The same table, but with the second column header's interactive affordance marked as selected and reversed, with the IP addresses sorted in reverse numeric order (first the row with the address ending in '199', then the row with the address ending in '29', and finally the rows with the address ending in '3'." height=109><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
- <h4 id=introduction-2><span class=secno>4.10.1 </span>Introduction</h4>
+ <h4 id=introduction-3><span class=secno>4.10.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -50178,7 +50770,7 @@
<div class=impl>
- <h5 id=introduction-3><span class=secno>4.10.22.1 </span>Introduction</h5>
+ <h5 id=introduction-4><span class=secno>4.10.22.1 </span>Introduction</h5>
</div>
@@ -61685,7 +62277,7 @@
-->
- <h3 id=introduction-4><span class=secno>5.1 </span>Introduction</h3>
+ <h3 id=introduction-5><span class=secno>5.1 </span>Introduction</h3>
<h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>
@@ -65601,7 +66193,7 @@
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeactivate.asp
-->
- <h4 id=introduction-5><span class=secno>6.4.1 </span>Introduction</h4>
+ <h4 id=introduction-6><span class=secno>6.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -66760,7 +67352,7 @@
<h3 id=assigning-keyboard-shortcuts><span class=secno>6.5 </span>Assigning keyboard shortcuts</h3>
- <h4 id=introduction-6><span class=secno>6.5.1 </span>Introduction</h4>
+ <h4 id=introduction-7><span class=secno>6.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -67386,7 +67978,7 @@
</div>
- <h4 id=introduction-7><span class=secno>6.7.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>6.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -74104,7 +74696,7 @@
-->
- <h4 id=introduction-8><span class=secno>7.7.1 </span>Introduction</h4>
+ <h4 id=introduction-9><span class=secno>7.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -76056,7 +76648,7 @@
<h3 id=scripting><span class=secno>8.1 </span>Scripting</h3>
- <h4 id=introduction-9><span class=secno>8.1.1 </span>Introduction</h4>
+ <h4 id=introduction-10><span class=secno>8.1.1 </span>Introduction</h4>
<p>Various mechanisms can cause author-provided executable code to run in the context of a
document. These mechanisms include, but are probably not limited to:</p>
@@ -82464,7 +83056,7 @@
</div>
- <h4 id=introduction-10><span class=secno>9.4.1 </span>Introduction</h4>
+ <h4 id=introduction-11><span class=secno>9.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -82685,7 +83277,7 @@
<h3 id=channel-messaging><span class=secno>9.5 </span><dfn>Channel messaging</dfn></h3>
- <h4 id=introduction-11><span class=secno>9.5.1 </span>Introduction</h4>
+ <h4 id=introduction-12><span class=secno>9.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -83715,7 +84307,7 @@
- <h3 id=introduction-12><span class=secno>10.1 </span>Introduction</h3>
+ <h3 id=introduction-13><span class=secno>10.1 </span>Introduction</h3>
<h4 id=scope-0><span class=secno>10.1.1 </span>Scope</h4>
@@ -85736,7 +86328,7 @@
- <h3 id=introduction-13><span class=secno>11.1 </span>Introduction</h3>
+ <h3 id=introduction-14><span class=secno>11.1 </span>Introduction</h3>
<p><i>This section is non-normative.</i></p>
@@ -96004,7 +96596,7 @@
section has the same conformance implications as the RFC2119-defined term "must".</i></p>
- <h3 id=introduction-14><span class=secno>14.1 </span>Introduction</h3>
+ <h3 id=introduction-15><span class=secno>14.1 </span>Introduction</h3>
<p>In general, user agents are expected to support CSS, and many of the suggestions in this
section are expressed in CSS terms. User agents that use other presentation mechanisms can derive
@@ -97530,7 +98122,7 @@
<h3 id=bindings><span class=secno>14.5 </span>Bindings</h3> <!-- a binding -->
- <h4 id=introduction-15><span class=secno>14.5.1 </span>Introduction</h4>
+ <h4 id=introduction-16><span class=secno>14.5.1 </span>Introduction</h4>
<p>A number of elements have their rendering defined in terms of the 'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
@@ -103955,6 +104547,7 @@
<li><code><a href=#htmloutputelement>HTMLOutputElement</a></code>
<li><code><a href=#htmlparagraphelement>HTMLParagraphElement</a></code>, <a href=#HTMLParagraphElement-partial>partial</a>
<li><code><a href=#htmlparamelement>HTMLParamElement</a></code>, <a href=#HTMLParamElement-partial>partial</a>
+ <li><code><a href=#htmlpictureelement>HTMLPictureElement</a></code>
<li><code><a href=#htmlpreelement>HTMLPreElement</a></code>, <a href=#HTMLPreElement-partial>partial</a>
<li><code><a href=#htmlprogresselement>HTMLProgressElement</a></code>
<li><code><a href=#htmlpropertiescollection>HTMLPropertiesCollection</a></code>
More information about the Commit-Watchers
mailing list