Skip to content

Commit

Permalink
Fixed up content model. Added WebIDL to conformance section.
Browse files Browse the repository at this point in the history
  • Loading branch information
Marcos Caceres committed Sep 19, 2012
1 parent f0dc0ca commit d6ddb83
Showing 1 changed file with 15 additions and 13 deletions.
28 changes: 15 additions & 13 deletions ResponsiveImages.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->
<html>
Expand Down Expand Up @@ -66,6 +65,8 @@ <h1>Introduction</h1>

<section id="conformance">
<p>This specification describes the conformance criteria for <dfn title="user agent">user agents</dfn> (relevant to implementors) and <dfn title="document">documents</dfn> (relevant to authors and authoring tool implementors).</p>
<p>Implementations that use ECMAScript to expose the APIs defined in this specification MUST implement them in a manner consistent with
the ECMAScript Bindings defined in the Web IDL specification [[!WEBIDL]].</p>
<section id="dependencies">
<h3>Definitions</h3>
<p>The <dfn><a href="http://www.w3.org/TR/html5/the-img-element.html#the-img-element">img element</a></dfn>,
Expand All @@ -81,9 +82,7 @@ <h3>Definitions</h3>
<p>The <dfn><a href="http://dev.w3.org/csswg/css4-images/#image-set-notation">image-set notation</a></dfn>
microsyntax is defined by the<cite> CSS Image Values and Replaced Content Module Level 4 Specification</cite> [[!CSS4-IMAGES]].</p>
<p>The <dfn><a href="http://www.w3.org/TR/html-alt-techniques/#secm1">techniques for providing useful text alternatives for <code>img</code> elements</a></dfn> are defined by the <cite>HTML5: Techniques for providing useful text alternatives</cite> Specification [[!ALT-TECHNIQUES]].</p>
<!--dt>WebIDL</dt>
<dd>Implementations that use ECMAScript to expose the APIs defined in this specification MUST implement them in a manner consistent with
the ECMAScript Bindings defined in the Web IDL specification [[!WEBIDL]].</dd--> </section><!-- / dependencies -->

</section><!-- /conformance -->

<section>
Expand All @@ -93,44 +92,47 @@ <h1>The <code>picture</code> element</h1>
<dd><a href="http://dev.w3.org/html5/spec/single-page.html#flow-content-1">Flow content</a>.</dd>
<dd><a href="http://dev.w3.org/html5/spec/single-page.html#phrasing-content-1">Phrasing content</a>.</dd>
<dd><a href="http://dev.w3.org/html5/spec/single-page.html#embedded-content-2">Embedded content</a>.</dd>
<dd>&nbsp;</dd>

<dd><a href="http://dev.w3.org/html5/spec/single-page.html#palpable-content-0">Palpable content</a>.</dd>
<dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt>
<dd>Where <a href="http://dev.w3.org/html5/spec/single-page.html#embedded-content-2">embedded content</a> is expected.</dd>
<dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
<dd>Zero or more <code>source</code> elements</dd>
<dt>&nbsp;</dt>
<dd>Zero or more <code>img</code> elements.</dd>
<dd>If the element has a <a href="http://dev.w3.org/html5/spec/single-page.html#attr-media-src">src</a> attribute:  <a href="http://dev.w3.org/html5/spec/single-page.html#transparent">transparent</a>, and no <code>source</code> descendants.</dd>
<dd>If the element has no <a href="http://dev.w3.org/html5/spec/single-page.html#attr-media-src">src</a> attribute: Zero or more <code>source</code> elements</dd>

<dd>Zero or one <code>img</code> element as <a>fallback content</a>.</dd>
<dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt>
<dd><a href="http://dev.w3.org/html5/spec/single-page.html#global-attributes">Global attributes</a></dd>
<dd>src</dd>
<dd>width</dd>
<dd>height </dd>
<dd>crossorigin</dd>
<dd>&nbsp;</dd>
<dt><a href="http://dev.w3.org/html5/spec/single-page.html#attr-dim-height"></a></dt>
<dt><a href="http://dev.w3.org/html5/spec/single-page.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt>
<dd>
<pre>
interface <dfn>HTMLPictureElement</dfn> : HTMLElement {
interface <dfn>HTMLPictureElement</dfn> : HTMLImageElement {

};</pre>
</dd>
</dl>

<p>The <code><dfn>picture</dfn></code> element represents an image.</p>
<p>The <code><dfn>picture</dfn></code> element used for displaying an image from a range of sources.</p>
<p>The image given by the src attributes is the embedded content; the value of the alt attribute provides equivalent content for those who cannot process images or who have image loading disabled. </p>
<p>For user agents that don't support picture, an author can provide an img element as fallback content. User agents SHOULD NOT show this content to the user: it is intended for Web browsers which do not support <code>picture</code>, so that a legacy <code>img</code> element can be shown.</p>
<p>Sample picture element markup:</p>

<pre class="example">&lt;picture src=&quot;cat.png&quot;&gt;

&lt;/picture&gt;</pre>

<section>
<p>The src attribute. <a>valid non-empty URL potentially surrounded by spaces</a> The address of the <a>media resource</a>.</p>
<p>type = MIME type The type of the <a>media resource</a> (used for helping the UA determine, before fetching this <a>media resource</a>, if it can play it). A string that identifies a valid MIME <a>media type</a>. </p>
<p>media = <a>valid media query</a> The intended media type of the <a>media resource</a> (used for helping the UA determine, before fetching this <a>media resource</a>, if it is useful to the user).</p>
<p><a href="#srcset-attribute">srcset</a> Media source list A comma-separated list of <a>valid non-empty URL potentially surrounded by spaces</a> referring to alternate <a>media resource</a>s for a single image at different resolutions.</p>
<h3>Differeces from img element</h3>
<p>Unlike picture, the <code>img</code> element is limited to a single image resoure, but cases where an author need to define different image sources depending on the factors such as the design, size resolution, and display density. The most suitable image source may be an image sized appropriately for the display size or pixel density. Or the most suitable image source may be a different version of an image that has been modified by the author to be suitable for a particular use (see: <a>art direction</a> use case)</p>
<h3>Differeces from <code>img</code> element</h3>
<p>Unlike the <code>picture</code> element, the <code>img</code> element is limited to a single image resoure, but cases where an author need to define different image sources depending on the factors such as the design, size resolution, and display density. The most suitable image source may be an image sized appropriately for the display size or pixel density. Or the most suitable image source may be a different version of an image that has been modified by the author to be suitable for a particular use (see: <a>art direction</a> use case)</p>
</section><!-- / picture permitted attributes -->

<section>
Expand Down

0 comments on commit d6ddb83

Please sign in to comment.