- From: Sam Ruby via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 12 Oct 2012 21:44:26 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/srcset
In directory hutz:/tmp/cvs-serv10381
Modified Files:
Overview.html
Log Message:
commit aadb166a5149fcea68d4e3ab72af3d37dd4cfefd
Author: Edward O'Connor <hober0@gmail.com>
Date: Fri Oct 12 14:13:20 2012 -0700
Use FIXUP for the srcset spec as well.
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/srcset/Overview.html,v
retrieving revision 1.6
retrieving revision 1.7
diff -u -d -r1.6 -r1.7
--- Overview.html 12 Oct 2012 19:13:34 -0000 1.6
+++ Overview.html 12 Oct 2012 21:44:24 -0000 1.7
@@ -371,7 +371,7 @@
<p>When authors adapt their sites for high-resolution displays, they
often need to be able to use different assets representing the same
image. We address this need for adaptive, bitmapped content images by
- adding a <code>srcset</code> attribute to the <code>img</code>
+ adding a <code>srcset</code> attribute to the <code><a href="#additions-to-the-img-element">img</a></code>
element.</p>
<h2 class="no-num no-toc" id="status-of-this-document">Status of This document</h2>
@@ -472,7 +472,7 @@
<li><a href="#introduction"><span class="secno">1 </span>Introduction</a></li>
<li><a href="#terminology"><span class="secno">2 </span>Terminology</a></li>
<li><a href="#conformance-requirements"><span class="secno">3 </span>Conformance requirements</a></li>
- <li><a href="#additions-to-the-img-element"><span class="secno">4 </span>Additions to the <code>img</code> element</a></li>
+ <li><a href="#additions-to-the-img-element"><span class="secno">4 </span><!--srcset-->Additions to the <code>img</code> element</a></li>
<li><a href="#image-candidate-strings"><span class="secno">5 </span>Image candidate strings</a></li>
<li><a href="#obtaining-images"><span class="secno">6 </span>Obtaining images</a></li>
<li><a href="#processing-the-image-candidates"><span class="secno">7 </span>Processing the image candidates</a></li>
@@ -489,7 +489,7 @@
and display resolutions, they often need to be able to use different
resources representing the same image. Ideally, User Agents would
avoid fetching the unused resources. This specification defines <code title="attr-img-srcset"><a href="#attr-img-srcset">srcset</a></code>, a new attribute for the
- <code>img</code> element, to address this need in the case of content
+ <code><a href="#additions-to-the-img-element">img</a></code> element, to address this need in the case of content
images. (There are several existing mechanisms to address this need
for CSS images.)</p>
@@ -500,20 +500,25 @@
the resources, thus avoiding multiple resource loads and the
associated performance problems in constrained bandwidth
environments.</p>
- <!-- XXX need to fix this h3/h2 hack once our spec editing toolchain
- supports FIXUP. -->
- <h2 id="terminology"><span class="secno">2 </span>Terminology</h2>
+<!--FIXUP srcset +1-->
+ <h2 id="terminology"><span class="secno">2 </span>Terminology</h2>
+<!--FIXUP srcset -1-->
<p>The conformance requirements, conformance classes, definitions,
dependencies, terminology, and typographical conventions described in
the HTML5 specification apply to this specification. <a href="#refsHTML5">[HTML5]</a></p>
<p>Interfaces are defined in terms of Web IDL. <a href="#refsWEBIDL">[WEBIDL]</a></p>
- <!-- XXX need to fix this h3/h2 hack once our spec editing toolchain
- supports FIXUP. -->
- <h2 id="conformance-requirements"><span class="secno">3 </span>Conformance requirements</h2>
+<!--FIXUP microdata +1-->
+<!--FIXUP 2dcontext +1-->
+<!--FIXUP srcset +1-->
+ <h2 id="conformance-requirements"><span class="secno">3 </span>Conformance requirements</h2>
+<!--FIXUP microdata -1-->
+<!--FIXUP 2dcontext -1-->
+<!--FIXUP srcset -1-->
+
<p>All diagrams, examples, and notes in this specification are
non-normative, as are all sections explicitly marked non-normative.
Everything else in this specification is normative.</p>
@@ -566,9 +571,10 @@
- <!-- XXX need to fix this h4/h2 hack once our spec editing toolchain
- supports FIXUP. -->
- <h2 id="additions-to-the-img-element"><span class="secno">4 </span>Additions to the <code>img</code> element</h2>
+
+<!--FIXUP srcset +2-->
+ <h2 id="additions-to-the-img-element"><span class="secno">4 </span><!--srcset-->Additions to the <dfn><code>img</code></dfn> element</h2>
+<!--FIXUP srcset -2-->
<dl class="element">
@@ -692,18 +698,18 @@
<p class="note">[TBD]</p>
<p>When the user agent is to <dfn id="update-the-image-data">update the image data</dfn> of an
- <code>img</code> element, it must run the following steps:</p>
+ <code><a href="#additions-to-the-img-element">img</a></code> element, it must run the following steps:</p>
<ol>
- <li><p>Return the <code>img</code> element to the <span title="img-none">unavailable</span> state.</p>
+ <li><p>Return the <code><a href="#additions-to-the-img-element">img</a></code> element to the <span title="img-none">unavailable</span> state.</p>
</li><li><p>If an instance of the <span title="fetch">fetching</span>
algorithm is still running for this element, then abort that
algorithm, discarding any pending <span title="concept-task">tasks</span> generated by that
algorithm.</p></li>
- <li><p>Forget the <code>img</code> element's current image data, if
+ <li><p>Forget the <code><a href="#additions-to-the-img-element">img</a></code> element's current image data, if
any.</p></li>
<li><p>If the user agent cannot support images, or its support for
@@ -725,26 +731,26 @@
</li>
- <li><p>Let the <code>img</code> element's <span>last selected
+ <li><p>Let the <code><a href="#additions-to-the-img-element">img</a></code> element's <span>last selected
source</span> be <var title="">selected source</var> and the
- <code>img</code> element's <span>current pixel density</span> be
+ <code><a href="#additions-to-the-img-element">img</a></code> element's <span>current pixel density</span> be
<var title="">selected pixel density</var>.</p></li>
<li><p><span title="resolve a url">Resolve</span> <var title="">selected source</var>, relative to the element. If that is
not successful, abort these steps.</p></li>
<li><p>Let <var title="">key</var> be a tuple consisting of the
- resulting <span>absolute URL</span>, the <code>img</code> element's
+ resulting <span>absolute URL</span>, the <code><a href="#additions-to-the-img-element">img</a></code> element's
<code title="attr-img-crossorigin">crossorigin</code> attribute's
mode, and, if that mode is not <span title="attr-crossorigin-none">No CORS</span>, the
<code>Document</code> object's <span>origin</span>.</p></li>
<li><p>If the <span>list of available images</span>, contains an
- entry for <var title="">key</var>, then set the <code>img</code>
+ entry for <var title="">key</var>, then set the <code><a href="#additions-to-the-img-element">img</a></code>
element to the <span title="img-all">completely available</span>
state, update the presentation of the image appropriately,
<span>queue a task</span> to <span>fire a simple event</span> named
- <code title="event-load">load</code> at the <code>img</code>
+ <code title="event-load">load</code> at the <code><a href="#additions-to-the-img-element">img</a></code>
element, and abort these steps.</p></li>
<li><p>Asynchronously <span>await a stable state</span>, allowing
@@ -758,7 +764,7 @@
<li>
<p>⌛ If another instance of this algorithm for this
- <code>img</code> element was started after this instance (even if
+ <code><a href="#additions-to-the-img-element">img</a></code> element was started after this instance (even if
it aborted and is no longer running), then abort these steps.</p>
<p class="note">Only the last instance takes effect, to avoid
@@ -777,7 +783,7 @@
set the element to the <span title="img-error">broken</span>
state, <span>queue a task</span> to <span>fire a simple
event</span> named <code title="event-error">error</code> at the
- <code>img</code> element, and abort these steps.</p>
+ <code><a href="#additions-to-the-img-element">img</a></code> element, and abort these steps.</p>
</li>
@@ -787,11 +793,11 @@
the <span>absolute URL</span> that resulted from the earlier step,
with the <i>mode</i> being the state of the element's <code title="attr-img-crossorigin">crossorigin</code> content attribute,
the <i title="">origin</i> being the <span>origin</span> of the
- <code>img</code> element's <code>Document</code>, and the
+ <code><a href="#additions-to-the-img-element">img</a></code> element's <code>Document</code>, and the
<i>default origin behaviour</i> set to <i>taint</i>.</p>
<p>The resource obtained in this fashion, if any, is the
- <code>img</code> element's image data. It can be either
+ <code><a href="#additions-to-the-img-element">img</a></code> element's image data. It can be either
<span>CORS-same-origin</span> or <span>CORS-cross-origin</span>;
this affects the <span>origin</span> of the image itself (e.g.
when used on a <code>canvas</code>).</p>
@@ -812,7 +818,7 @@
compatible with existing Web content.</p>
<p>The first <span title="concept-task">task</span> that is <span title="queue a task">queued</span> by the <span>networking task
- source</span> while the image is being <span title="fetch">fetched</span> must set the <code>img</code> element's
+ source</span> while the image is being <span title="fetch">fetched</span> must set the <code><a href="#additions-to-the-img-element">img</a></code> element's
state to <span title="img-inc">partially available</span>.</p>
<p id="img-load">If the resource is in a supported image format,
@@ -828,19 +834,19 @@
<dt>If the download was successful and the user agent was able to determine the image's width and height</dt>
- <dd>Set the <code>img</code> element to the <span title="img-all">completely available</span> state, update the
+ <dd>Set the <code><a href="#additions-to-the-img-element">img</a></code> element to the <span title="img-all">completely available</span> state, update the
presentation of the image appropriately, add the image to the
<span>list of available images</span> using the key <var title="">key</var>, and <span>fire a simple event</span> named
- <code title="event-load">load</code> at the <code>img</code>
+ <code title="event-load">load</code> at the <code><a href="#additions-to-the-img-element">img</a></code>
element.</dd>
<!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/1222 -->
<dt>Otherwise</dt>
- <dd>Set the <code>img</code> element to the <span title="img-error">broken</span> state, and <span>fire a simple
+ <dd>Set the <code><a href="#additions-to-the-img-element">img</a></code> element to the <span title="img-error">broken</span> state, and <span>fire a simple
event</span> named <code title="event-error">error</code> at the
- <code>img</code> element.</dd>
+ <code><a href="#additions-to-the-img-element">img</a></code> element.</dd>
</dl>
@@ -851,19 +857,19 @@
also update the presentation of the image, but as each new body
part comes in, it must replace the previous image. Once one body
part has been completely decoded, the user agent must set the
- <code>img</code> element to the <span title="img-all">completely
+ <code><a href="#additions-to-the-img-element">img</a></code> element to the <span title="img-all">completely
available</span> state and <span>queue a task</span> to <span>fire
a simple event</span> named <code title="event-load">load</code>
- at the <code>img</code> element.</p>
+ at the <code><a href="#additions-to-the-img-element">img</a></code> element.</p>
<p>Otherwise, 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>img</code> element to the <span title="img-error">broken</span> state, abort the <span title="fetch">fetching</span> algorithm, discarding any pending
+ the <code><a href="#additions-to-the-img-element">img</a></code> element to the <span title="img-error">broken</span> state, abort the <span title="fetch">fetching</span> algorithm, discarding any pending
<span title="concept-task">tasks</span> generated by that
algorithm, and then <span>queue a task</span> to <span>fire a
simple event</span> named <code title="event-error">error</code>
- at the <code>img</code> element.</p>
+ at the <code><a href="#additions-to-the-img-element">img</a></code> element.</p>
</li>
@@ -874,14 +880,14 @@
<p>When the user agent is required to <dfn id="processing-the-image-candidates-0" title="processing the
image candidates">process the image candidates</dfn> of an
- <code>img</code> element's <code title="attr-img-srcset"><a href="#attr-img-srcset">srcset</a></code> attribute, the user agent must
+ <code><a href="#additions-to-the-img-element">img</a></code> element's <code title="attr-img-srcset"><a href="#attr-img-srcset">srcset</a></code> attribute, the user agent must
run the following steps, which return a URL and pixel density (null
and undefined respectively if no selection can be made):</p>
<ol>
<li><p>Let <var title="">input</var> be the value of the
- <code>img</code> element's <code title="attr-img-srcset"><a href="#attr-img-srcset">srcset</a></code> attribute.</p></li>
+ <code><a href="#additions-to-the-img-element">img</a></code> element's <code title="attr-img-srcset"><a href="#attr-img-srcset">srcset</a></code> attribute.</p></li>
<li><p>Let <var title="">position</var> be a pointer into <var title="">input</var>, initially pointing at the start of the
string.</p></li>
@@ -1027,7 +1033,7 @@
<li>
- <p>If the <code>img</code> element has a <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute whose value is not the
+ <p>If the <code><a href="#additions-to-the-img-element">img</a></code> element has a <code title="attr-img-src"><a href="#attr-img-src">src</a></code> attribute whose value is not the
empty string, then run the following substeps:</p>
<ol>
@@ -1118,7 +1124,7 @@
</ol>
<p>The user agent may at any time run the following algorithm to
- update an <code>img</code> element's image in order to react to
+ update an <code><a href="#additions-to-the-img-element">img</a></code> element's image in order to react to
changes in the environment. (User agents are <em>not required</em>
to ever run this algorithm.)</p>
@@ -1130,7 +1136,7 @@
<span>synchronous section</span> has ended. (Steps in <span title="synchronous section">synchronous sections</span> are marked
with ⌛.)</p></li>
- <li><p>⌛ If the <code>img</code> element does not have a
+ <li><p>⌛ If the <code><a href="#additions-to-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 <span title="img-all">completely available</span> state,
has image data whose resource type is
@@ -1171,7 +1177,7 @@
<p>Do a <span>potentially CORS-enabled fetch</span><!--FETCH--> of
the resulting <span>absolute URL</span>, with the <i>mode</i>
being <var title="">CORS mode</var>, the <i title="">origin</i>
- being the <span>origin</span> of the <code>img</code> element's
+ being the <span>origin</span> of the <code><a href="#additions-to-the-img-element">img</a></code> element's
<code>Document</code>, and the <i>default origin behaviour</i> set
to <i>taint</i>.</p>
@@ -1194,23 +1200,23 @@
<ol>
- <li><p>If the <code>img</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">crossorigin</code> attributes have
+ <li><p>If the <code><a href="#additions-to-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">crossorigin</code> attributes have
been set, changed, or removed since this algorithm started, then
abort these steps.</p>
- </li><li><p>Let the <code>img</code> element's <span>last selected
+ </li><li><p>Let the <code><a href="#additions-to-the-img-element">img</a></code> element's <span>last selected
source</span> be <var title="">selected source</var> and the
- <code>img</code> element's <span>current pixel density</span> be
+ <code><a href="#additions-to-the-img-element">img</a></code> element's <span>current pixel density</span> be
<var title="">selected pixel density</var>.</p></li>
- <li><p>Replace the <code>img</code> element's image data with the
+ <li><p>Replace the <code><a href="#additions-to-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 <span>CORS-same-origin</span> or
<span>CORS-cross-origin</span>; this affects the
<span>origin</span> of the image itself (e.g. when used on a
<code>canvas</code>).</p></li>
- <li><p><span>Fire a simple event</span> named <code title="">load</code> at the <code>img</code> element.</p></li>
+ <li><p><span>Fire a simple event</span> named <code title="">load</code> at the <code><a href="#additions-to-the-img-element">img</a></code> element.</p></li>
</ol>
@@ -1232,14 +1238,17 @@
attribute of the same name.</p>
</div>
+
+<!--FIXUP srcset +3-->
<h2 id="adaptive-images"><span class="secno">8 </span>Adaptive images</h2>
-
+<!--FIXUP srcset -3-->
+
<p><i>This section is non-normative.</i></p>
<p>CSS and media queries can be used to construct graphical page
layouts that adapt dynamically to the user's environment, in
particular to different viewport dimensions and pixel densities. For
content, however, CSS does not help; instead, we have the
- <code>img</code> element's <code title="attr-img-srcset"><a href="#attr-img-srcset">srcset</a></code> attribute. This section walks
+ <code><a href="#additions-to-the-img-element">img</a></code> element's <code title="attr-img-srcset"><a href="#attr-img-srcset">srcset</a></code> attribute. This section walks
through a sample case showing how to use this attribute.</p>
<p>Consider a situation where on wide screens (wider than 600 CSS
@@ -1337,6 +1346,7 @@
alt="The pear is juicy."></pre>
+<!--FIXUP 2dcontext -4-->
<h2 class="no-num" id="references">References</h2><!--REFS-->
<p>All references are normative unless marked "Non-normative".</p>
Received on Friday, 12 October 2012 21:44:29 UTC