Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[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 1106881
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 193 deletions.
101 changes: 6 additions & 95 deletions complete.html
Expand Up @@ -591,8 +591,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
<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>
Expand Down Expand Up @@ -22700,95 +22699,6 @@ <h6 id=guidance-for-conformance-checkers><span class=secno>4.7.1.1.14 </span>Gui
</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>
Expand Down Expand Up @@ -72715,9 +72625,7 @@ <h5 id=processing-model-5><span class=secno>7.1.4.2 </span>Processing model</h5>
</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
Expand Down Expand Up @@ -74445,7 +74353,10 @@ <h4 id=simple-dialogs><span class=secno>7.5.1 </span>Simple dialogs</h4>

</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>
Expand Down
101 changes: 6 additions & 95 deletions index
Expand Up @@ -591,8 +591,7 @@
<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>
Expand Down Expand Up @@ -22700,95 +22699,6 @@ href="?audio"&gt;audio&lt;/a&gt; test instead.)&lt;/p&gt;</pre>
</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>
Expand Down Expand Up @@ -72715,9 +72625,7 @@ dictionary <dfn id=erroreventinit>ErrorEventInit</dfn> : <a href=#eventinit>Even
</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
Expand Down Expand Up @@ -74445,7 +74353,10 @@ scheduleWork(); // queues a task to do lots of work</pre>

</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>
Expand Down
10 changes: 7 additions & 3 deletions source
Expand Up @@ -22578,6 +22578,8 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
</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-->
Expand Down Expand Up @@ -22676,7 +22678,7 @@ href="?audio">audio&lt;/a> test instead.)&lt;/p></pre>
<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>
Expand Down Expand Up @@ -80020,8 +80022,6 @@ dictionary <dfn>ErrorEventInit</dfn> : <span>EventInit</span> {

<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>

Expand Down Expand Up @@ -82005,6 +82005,10 @@ scheduleWork(); // queues a task to do lots of work</pre>

</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
Expand Down

0 comments on commit 1106881

Please sign in to comment.