Skip to content
Permalink
Browse files

[giow] (2) Remove the 'stable state' logic from the 'pause' algorithm…

…. Also, remove some examples that may soon become irrelevant.

Affected topics: DOM APIs, HTML, HTML Syntax and Parsing

git-svn-id: http://svn.whatwg.org/webapps@8620 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed May 8, 2014
1 parent 88ded0f commit 110688196b3e05bf0fab083918ac63a4653544a5
Showing with 19 additions and 193 deletions.
  1. +6 −95 complete.html
  2. +6 −95 index
  3. +7 −3 source
<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></li>
<li><a href=#adaptive-images><span class=secno>4.7.1.2 </span>Adaptive images</a></ol></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>
</ul></div>


<h5 id=adaptive-images><span class=secno>4.7.1.2 </span>Adaptive images</h5>

<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><a href=#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 pixels) a 300&times;150 image
named <code title="">a-rectangle.png</code> is to be used, but on smaller screens (600 CSS pixels
and less), a smaller 100&times;100 image called <code title="">a-square.png</code> is to be used.
The markup for this would look like this:</p>

<pre>&lt;figure&gt;
&lt;img src="a-rectangle.png" srcset="a-square.png 600w"
alt="Barney Frank wears a suit and glasses."&gt;
&lt;figcaption&gt;Barney Frank, 2011&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<p class=note>For details on what to put in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute,
see the earlier sections.</p>

<p>The problem with this is that the user agent does not necessarily know what dimensions to use
for the image when the image is loading. To avoid the layout having to be reflowed multiple times
as the page is loading, CSS and CSS media queries can be used to provide the dimensions:</p>

<pre>&lt;figure&gt;
&lt;style scoped&gt;
#a { width: 300px; height: 150px; }
@media all and (max-width: 600px) { #a { width: 100px; height: 100px; } }
&lt;/style&gt;
&lt;img src="a-rectangle.png" srcset="a-square.png 600w" id="a"
alt="Barney Frank wears a suit and glasses."&gt;
&lt;figcaption&gt;Barney Frank, 2011&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<p>Alternatively, 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 can be used to provide the width for legacy user
agents, using CSS just for the user agents that support <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>:</p>

<pre>&lt;figure&gt;
&lt;style scoped media="all and (max-width: 600px)"&gt;
#a { width: 100px; height: 100px; }
&lt;/style&gt;
&lt;img src="a-rectangle.png" width="300" height="100"
srcset="a-square.png 600w" id=a
alt="Barney Frank wears a suit and glasses."&gt;
&lt;figcaption&gt;Barney Frank, 2011&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<hr><p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is used with the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, which gives the URL of the image to use for legacy user
agents that do not support the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute. This leads
to a question of which image to provide in the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
attribute.</p>

<p>The answer that results in the least duplication is to provide the image suitable for an
infinite width and infinite height viewport with a pixel density of 1 CSS pixel per device
pixel:</p>

<pre>&lt;img src="pear-desktop.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w"
alt="The pear is juicy."&gt;</pre>

<p>However, if legacy mobile user agents are more important, one can list all three images in the
<code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, overriding the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute entirely. To do this, the widest image has to have the
pixel density descriptor instead of the width, since there is no way to specify an infinite width
explicitly:</p>

<pre>&lt;img src="pear-mobile.jpeg"
srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
alt="The pear is juicy."&gt;</pre>

<p>Since at this point the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is actually being
ignored entirely by <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>-supporting user agents, the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute can default to any image, including one that is neither
the smallest nor biggest:</p>

<pre>&lt;img src="pear-tablet.jpeg"
srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
alt="The pear is juicy."&gt;</pre>

<hr><p>The dimensions in the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute are the maximum
(viewport) dimensions that an image is intended for. It is possible to think of the numbers as
minimums, though... if the images are listed in order, then the minimum for an image is the
dimension given for the previous image. This example attempts to demonstrate this by using the
file names to show the minimum values for each image:</p>

<pre>&lt;img src="pear-tablet.jpeg"
srcset="pear-min0.jpeg 720w, pear-min721.jpeg 1280w, pear-min1281.jpeg 1x"
alt="The pear is juicy."&gt;</pre>



<h4 id=the-iframe-element><span class=secno>4.7.2 </span>The <dfn><code>iframe</code></dfn> element</h4>
</ol><hr><p>Some of the algorithms in this specification, for historical reasons, require the user agent to
<dfn id=pause>pause</dfn> while running a <a href=#concept-task title=concept-task>task</a> until a condition <var title="">goal</var> is met. This means running the following steps:</p>

<ol><li><p><a href=#provide-a-stable-state>Provide a stable state</a>.</li>

<li><p>If necessary, update the rendering or user interface of any <code><a href=#document>Document</a></code> or
<ol><li><p>If necessary, update the rendering or user interface of any <code><a href=#document>Document</a></code> or
<a href=#browsing-context>browsing context</a> to reflect the current state.</li>

<li><p>Wait until the condition <var title="">goal</var> is met. While a user agent has a paused

</dd>

</dl><div class=impl>
</dl><p class=note>Logic that depends on <a href=#concept-task title=concept-task>tasks</a> or <a href=#microtask title=microtask>microtasks</a>, such as <a href=#media-element title="media element">media elements</a>
loading their <a href=#media-data>media data</a>, are stalled when these methods are invoked.</p>

<div class=impl>

<p>The <dfn id=dom-alert title=dom-alert><code>alert(<var title="">message</var>)</code></dfn> method, when
invoked, must run the following steps:</p>
101 index
<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></li>
<li><a href=#adaptive-images><span class=secno>4.7.1.2 </span>Adaptive images</a></ol></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>
</ul></div>


<h5 id=adaptive-images><span class=secno>4.7.1.2 </span>Adaptive images</h5>

<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><a href=#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 pixels) a 300&times;150 image
named <code title="">a-rectangle.png</code> is to be used, but on smaller screens (600 CSS pixels
and less), a smaller 100&times;100 image called <code title="">a-square.png</code> is to be used.
The markup for this would look like this:</p>

<pre>&lt;figure&gt;
&lt;img src="a-rectangle.png" srcset="a-square.png 600w"
alt="Barney Frank wears a suit and glasses."&gt;
&lt;figcaption&gt;Barney Frank, 2011&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<p class=note>For details on what to put in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute,
see the earlier sections.</p>

<p>The problem with this is that the user agent does not necessarily know what dimensions to use
for the image when the image is loading. To avoid the layout having to be reflowed multiple times
as the page is loading, CSS and CSS media queries can be used to provide the dimensions:</p>

<pre>&lt;figure&gt;
&lt;style scoped&gt;
#a { width: 300px; height: 150px; }
@media all and (max-width: 600px) { #a { width: 100px; height: 100px; } }
&lt;/style&gt;
&lt;img src="a-rectangle.png" srcset="a-square.png 600w" id="a"
alt="Barney Frank wears a suit and glasses."&gt;
&lt;figcaption&gt;Barney Frank, 2011&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<p>Alternatively, 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 can be used to provide the width for legacy user
agents, using CSS just for the user agents that support <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>:</p>

<pre>&lt;figure&gt;
&lt;style scoped media="all and (max-width: 600px)"&gt;
#a { width: 100px; height: 100px; }
&lt;/style&gt;
&lt;img src="a-rectangle.png" width="300" height="100"
srcset="a-square.png 600w" id=a
alt="Barney Frank wears a suit and glasses."&gt;
&lt;figcaption&gt;Barney Frank, 2011&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<hr><p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is used with the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, which gives the URL of the image to use for legacy user
agents that do not support the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute. This leads
to a question of which image to provide in the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
attribute.</p>

<p>The answer that results in the least duplication is to provide the image suitable for an
infinite width and infinite height viewport with a pixel density of 1 CSS pixel per device
pixel:</p>

<pre>&lt;img src="pear-desktop.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w"
alt="The pear is juicy."&gt;</pre>

<p>However, if legacy mobile user agents are more important, one can list all three images in the
<code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, overriding the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute entirely. To do this, the widest image has to have the
pixel density descriptor instead of the width, since there is no way to specify an infinite width
explicitly:</p>

<pre>&lt;img src="pear-mobile.jpeg"
srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
alt="The pear is juicy."&gt;</pre>

<p>Since at this point the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute is actually being
ignored entirely by <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>-supporting user agents, the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute can default to any image, including one that is neither
the smallest nor biggest:</p>

<pre>&lt;img src="pear-tablet.jpeg"
srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
alt="The pear is juicy."&gt;</pre>

<hr><p>The dimensions in the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute are the maximum
(viewport) dimensions that an image is intended for. It is possible to think of the numbers as
minimums, though... if the images are listed in order, then the minimum for an image is the
dimension given for the previous image. This example attempts to demonstrate this by using the
file names to show the minimum values for each image:</p>

<pre>&lt;img src="pear-tablet.jpeg"
srcset="pear-min0.jpeg 720w, pear-min721.jpeg 1280w, pear-min1281.jpeg 1x"
alt="The pear is juicy."&gt;</pre>



<h4 id=the-iframe-element><span class=secno>4.7.2 </span>The <dfn><code>iframe</code></dfn> element</h4>
</ol><hr><p>Some of the algorithms in this specification, for historical reasons, require the user agent to
<dfn id=pause>pause</dfn> while running a <a href=#concept-task title=concept-task>task</a> until a condition <var title="">goal</var> is met. This means running the following steps:</p>

<ol><li><p><a href=#provide-a-stable-state>Provide a stable state</a>.</li>

<li><p>If necessary, update the rendering or user interface of any <code><a href=#document>Document</a></code> or
<ol><li><p>If necessary, update the rendering or user interface of any <code><a href=#document>Document</a></code> or
<a href=#browsing-context>browsing context</a> to reflect the current state.</li>

<li><p>Wait until the condition <var title="">goal</var> is met. While a user agent has a paused

</dd>

</dl><div class=impl>
</dl><p class=note>Logic that depends on <a href=#concept-task title=concept-task>tasks</a> or <a href=#microtask title=microtask>microtasks</a>, such as <a href=#media-element title="media element">media elements</a>
loading their <a href=#media-data>media data</a>, are stalled when these methods are invoked.</p>

<div class=impl>

<p>The <dfn id=dom-alert title=dom-alert><code>alert(<var title="">message</var>)</code></dfn> method, when
invoked, must run the following steps:</p>
10 source
</div>


<!--END complete-->
<!-- the examples in this section should be rewritten to use <picture> once we have that done -->
<h5>Adaptive images</h5>

<!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
<pre>&lt;img src="pear-tablet.jpeg"
srcset="pear-min0.jpeg 720w, pear-min721.jpeg 1280w, pear-min1281.jpeg 1x"
alt="The pear is juicy."></pre>

<!--START complete-->


<h4>The <dfn><code>iframe</code></dfn> element</h4>

<ol>

<li><p><span>Provide a stable state</span>.</p></li>

<li><p>If necessary, update the rendering or user interface of any <code>Document</code> or
<span>browsing context</span> to reflect the current state.</p></li>


</dl>

<p class="note">Logic that depends on <span data-x="concept-task">tasks</span> or <span
data-x="microtask">microtasks</span>, such as <span data-x="media element">media elements</span>
loading their <span>media data</span>, are stalled when these methods are invoked.</p>

<div class="impl">

<p>The <dfn data-x="dom-alert"><code>alert(<var data-x="">message</var>)</code></dfn> method, when

0 comments on commit 1106881

Please sign in to comment.
You can’t perform that action at this time.