Skip to content
Browse files

[] (0) <input type=image>

git-svn-id: http://svn.whatwg.org/webapps@2276 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent aacc1ec commit 4f426dc43484dad4d724c2e09b3eacf645c44963 @Hixie Hixie committed
Showing with 325 additions and 19 deletions.
  1. +143 −9 index
  2. +182 −10 source
View
152 index
@@ -25201,6 +25201,9 @@ function AddCloud(data, x, y) { ... }</pre>
<code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>, and
<code class=no-backref title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
+ <p>The element's <code title=attr-input-value><a href=#attr-input-value>value</a></code>
+ attribute must be omitted.</p>
+
<p>The following DOM attributes and methods do not apply to the element:
<code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
<code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
@@ -25277,16 +25280,147 @@ function AddCloud(data, x, y) { ... }</pre>
<p>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, the rules
in this section apply.</p>
- <p>The element's <code title=attr-input-value><a href=#attr-input-value>value</a></code>
- attribute must be omitted.</p>
+ <p>The <code><a href=#the-input-element>input</a></code> element represents either an image from
+ which a user can select a coordinate and submit the form, or
+ alternatively a button from which the user can submit the form.</p>
- <p class=XXX>...</p>
+ <hr><p>The image is given by the <dfn id=attr-input-src title=attr-input-src><code>src</code></dfn> attribute. The <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute must be present, and
+ must contain a <a href=#valid-url>valid URL</a> referencing a non-interactive,
+ optionally animated, image resource that is neither paged nor
+ scripted.</p>
+
+ <p>When any of the following events occur, the user agent must
+ <a href=#fetch>fetch</a> the resource specifed by the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute's value, unless the user
+ agent cannot support images, or its support for images has been
+ disabled, or the user agent only fetches elements on demand:</p>
+ <!-- Note how this does NOT happen when the base URL changes. -->
+
+ <ul><li>The <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is first set to the
+ <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
+ (possibly when the element is first created), and the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is present.</li>
- <p class=XXX>... <dfn id=attr-input-alt title=attr-input-alt><code>alt</code></dfn></p>
+ <li>The <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is changed back to
+ the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state,
+ and the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is
+ present, and its value has changed since the last time the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute was in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state.</li>
- <p class=XXX>... <dfn id=attr-input-src title=attr-input-src><code>src</code></dfn></p>
+ <li>The <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state, and the
+ <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is set or
+ changed.</li> <!-- XXX define changed -->
+
+ </ul><p>Fetching the image must <a href=#delay-the-load-event>delay the <code title=event-load>load</code> event</a>.</p>
+
+ <p>If the image was successfully obtained, with no network errors,
+ and the image's type is a supported image type, and the image is a
+ valid image of that type, then the image is said to be
+ <i>available</i>. If this is true before the image is completely
+ downloaded, 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 appropriately.</p>
+
+ <p>The user agents should apply the <a href=#content-type-sniffing:-image title="Content-Type
+ sniffing: image">image sniffing rules</a> to determine the type
+ of the image, with the image's <a href=#content-type-0 title=Content-Type>associated
+ Content-Type headers</a> giving the <var title="">official
+ type</var>. If these rules are not applied, then the type of the
+ image must be the type given by the image's <a href=#content-type-0 title=Content-Type>associated Content-Type headers</a>.</p>
+
+ <p>User agents must not support non-image resources with the
+ <code><a href=#the-input-element>input</a></code> element. User agents must not run executable code
+ embedded in the image resource. User agents must only display the
+ first page of a multipage resource. User agents must not allow the
+ resource to act in an interactive fashion, but should honour any
+ animation in the resource.</p>
+
+ <p>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>, must, if the download was successful
+ and the image is <i>available</i>, <a href=#queue-a-task>queue a task</a> to
+ <a href=#fire-a-load-event>fire a <code title=event-load>load</code> event</a> on
+ the <code><a href=#the-input-element>input</a></code> element; and otherwise, if the fetching
+ process fails without a response from the remote server, or
+ completes but the image is not a valid or supported image,
+ <a href=#queue-a-task>queue a task</a> to <a href=#fire-an-error-event>fire an <code title=event-error>error</code> event</a> on the
+ <code><a href=#the-input-element>input</a></code> element.</p>
+
+ <hr><p>The <dfn id=attr-input-alt title=attr-input-alt><code>alt</code></dfn> attribute
+ provides the textual label for the alternative button for users and
+ user agents who cannot use the image. The <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code> attribute must also be present,
+ and must contain a non-empty string.</p>
+
+ <hr><p>If the <code title=attr-input-src><a href=#attr-input-src>src</a></code> attribute is set,
+ and the image is <i>available</i> and the user agent is configured
+ to display that image, then: The element represents a control for
+ selecting a <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a> from
+ the image specified by the <code title=attr-input-src><a href=#attr-input-src>src</a></code>
+ attribute; if the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, the user should allow the
+ user to select this <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>coordinate</a>, at
+ which point the element's <a href=#form-owner>form owner</a>, if any, must be
+ <a href=#concept-form-submit title=concept-form-submit>submitted</a> from the
+ <code><a href=#the-input-element>input</a></code> element.</p>
+
+ <p>Otherwise, the element represents a submit button whose label is
+ given by the value of the <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>
+ attribute; if the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>, the user should allow the
+ user to activate the button, at which point the the <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
+ coordinate</a> must be set to (0,0) and the element's <a href=#form-owner>form
+ owner</a>, if any, must be <a href=#concept-form-submit title=concept-form-submit>submitted</a> from the
+ <code><a href=#the-input-element>input</a></code> element.</p>
+
+ <!-- XXX event timing; activation behavior -->
+
+ <p>The <dfn id=concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
+ coordinate</dfn> must consist of an <var title="">x</var>-component
+ and a <var title="">y</var>-component. The <var title="">x</var>-component must be greater than or equal to zero,
+ and less than or equal to the rendered width, in CSS pixels, of the
+ image. The <var title="">y</var>-component must be greater than or
+ equal to zero, and less than or equal to the rendered height, in CSS
+ pixels, of the image.</p>
+
+ <hr><p>The following common <code><a href=#the-input-element>input</a></code> element content
+ attributes and DOM attributes apply to the element:
+ <code title=attr-fs-action><a href=#attr-fs-action>action</a></code>,
+ <code title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
+ <code title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</a></code>,
+ <code title=attr-fs-method><a href=#attr-fs-method>method</a></code>,
+ <code title=attr-input-src><a href=#attr-input-src>src</a></code>, and
+ <code title=attr-fs-target><a href=#attr-fs-target>target</a></code> content attributes;
+ <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute.</p>
+
+ <p>The <code title=dom-input-value><a href=#dom-input-value>value</a></code> DOM attribute is
+ in mode <a href=#dom-input-value-default title=dom-input-value-default>default</a>.</p>
+
+ <p>The following content attributes must not be specified and do not
+ apply to the element:
+ <code class=no-backref title=attr-input-accept><a href=#attr-input-accept>accept</a></code>,
+ <code class=no-backref title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code>,
+ <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
+ <code class=no-backref title=attr-input-list><a href=#attr-input-list>list</a></code>,
+ <code class=no-backref title=attr-input-max><a href=#attr-input-max>max</a></code>,
+ <code class=no-backref title=attr-input-maxlength><a href=#attr-input-maxlength>maxlength</a></code>,
+ <code class=no-backref title=attr-input-min><a href=#attr-input-min>min</a></code>,
+ <code class=no-backref title=attr-input-pattern><a href=#attr-input-pattern>pattern</a></code>,
+ <code class=no-backref title=attr-input-readonly><a href=#attr-input-readonly>readonly</a></code>,
+ <code class=no-backref title=attr-input-required><a href=#attr-input-required>required</a></code>
+ <code class=no-backref title=attr-input-size><a href=#attr-input-size>size</a></code>, and
+ <code class=no-backref title=attr-input-step><a href=#attr-input-step>step</a></code>.</p>
+
+ <p>The element's <code title=attr-input-value><a href=#attr-input-value>value</a></code>
+ attribute must be omitted.</p>
+
+ <p>The following DOM attributes and methods do not apply to the element:
+ <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>,
+ <code class=no-backref title=dom-input-list><a href=#dom-input-list>list</a></code>,
+ <code class=no-backref title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code>,
+ <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> and
+ <code class=no-backref title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code> DOM attributes;
+ <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code class=no-backref title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</p>
- <p class=XXX>... image: <dfn id=concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected coordinate</dfn></p>
+ <p class=note>Many aspects of this state's behavior are similar to
+ the behavior of the <code><a href=#the-img-element>img</a></code> element. Readers are encouraged
+ to read that section, where many of the same requirements are
+ described in more detail.</p>
@@ -26576,9 +26710,9 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmleleme
<li><p>The <var title="">field</var> element is <var title="">submitter</var>, and before this algorithm was invoked
the user <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>indicated a
- coordinate</a>. Let <var title="">x</var> be the x-component
- of the coordindate selected by the user, and let <var title="">y</var> be the y-component of the coordinate selected
- by the user.</li>
+ coordinate</a>. Let <var title="">x</var> be the <var title="">x</var>-component of the coordindate selected by the
+ user, and let <var title="">y</var> be the <var title="">y</var>-component of the coordinate selected by the
+ user.</li>
<li><p>Append an entry in the <var title="">form data set</var>
with the name <var title="">name<sub title="">x</sub></var> and
View
192 source
@@ -28053,6 +28053,9 @@ function AddCloud(data, x, y) { ... }</pre>
<code class="no-backref" title="attr-input-step">step</code>, and
<code class="no-backref" title="attr-fs-target">target</code>.</p>
+ <p>The element's <code title="attr-input-value">value</code>
+ attribute must be omitted.</p>
+
<p>The following DOM attributes and methods do not apply to the element:
<code class="no-backref" title="dom-input-checked">checked</code>,
<code class="no-backref" title="dom-input-list">list</code>,
@@ -28135,16 +28138,184 @@ function AddCloud(data, x, y) { ... }</pre>
title="attr-input-type-image">Image Button</span> state, the rules
in this section apply.</p>
- <p>The element's <code title="attr-input-value">value</code>
- attribute must be omitted.</p>
+ <p>The <code>input</code> element represents either an image from
+ which a user can select a coordinate and submit the form, or
+ alternatively a button from which the user can submit the form.</p>
- <p class="XXX">...</p>
+ <hr>
+
+ <p>The image is given by the <dfn
+ title="attr-input-src"><code>src</code></dfn> attribute. The <code
+ title="attr-input-src">src</code> attribute must be present, and
+ must contain a <span>valid URL</span> referencing a non-interactive,
+ optionally animated, image resource that is neither paged nor
+ scripted.</p>
+
+ <p>When any of the following events occur, the user agent must
+ <span>fetch</span> the resource specifed by the <code
+ title="attr-input-src">src</code> attribute's value, unless the user
+ agent cannot support images, or its support for images has been
+ disabled, or the user agent only fetches elements on demand:</p>
+ <!-- Note how this does NOT happen when the base URL changes. -->
+
+ <ul>
+
+ <li>The <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is first set to the
+ <span title="attr-input-type-image">Image Button</span> state
+ (possibly when the element is first created), and the <code
+ title="attr-input-src">src</code> attribute is present.</li>
+
+ <li>The <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is changed back to
+ the <span title="attr-input-type-image">Image Button</span> state,
+ and the <code title="attr-input-src">src</code> attribute is
+ present, and its value has changed since the last time the <code
+ title="attr-input-type">type</code> attribute was in the <span
+ title="attr-input-type-image">Image Button</span> state.</li>
+
+ <li>The <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-image">Image Button</span> state, and the
+ <code title="attr-input-src">src</code> attribute is set or
+ changed.</li> <!-- XXX define changed -->
+
+ </ul>
+
+ <p>Fetching the image must <span>delay the <code
+ title="event-load">load</code> event</span>.</p>
+
+ <p>If the image was successfully obtained, with no network errors,
+ and the image's type is a supported image type, and the image is a
+ valid image of that type, then the image is said to be
+ <i>available</i>. If this is true before the image is completely
+ downloaded, each <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 update the presentation of the
+ image appropriately.</p>
+
+ <p>The user agents should apply the <span title="Content-Type
+ sniffing: image">image sniffing rules</span> to determine the type
+ of the image, with the image's <span title="Content-Type">associated
+ Content-Type headers</span> giving the <var title="">official
+ type</var>. If these rules are not applied, then the type of the
+ image must be the type given by the image's <span
+ title="Content-Type">associated Content-Type headers</span>.</p>
+
+ <p>User agents must not support non-image resources with the
+ <code>input</code> element. User agents must not run executable code
+ embedded in the image resource. User agents must only display the
+ first page of a multipage resource. User agents must not allow the
+ resource to act in an interactive fashion, but should honour any
+ animation in the resource.</p>
+
+ <p>The <span title="concept-task">task</span> that is <span
+ title="queue a task">queued</span> by the <span>networking task
+ source</span> once the resource has been <span
+ title="fetch">fetched</span>, must, if the download was successful
+ and the image is <i>available</i>, <span>queue a task</span> to
+ <span>fire a <code title="event-load">load</code> event</span> on
+ the <code>input</code> element; and otherwise, if the fetching
+ process fails without a response from the remote server, or
+ completes but the image is not a valid or supported image,
+ <span>queue a task</span> to <span>fire an <code
+ title="event-error">error</code> event</span> on the
+ <code>input</code> element.</p>
+
+ <hr>
+
+ <p>The <dfn title="attr-input-alt"><code>alt</code></dfn> attribute
+ provides the textual label for the alternative button for users and
+ user agents who cannot use the image. The <code
+ title="attr-input-alt">alt</code> attribute must also be present,
+ and must contain a non-empty string.</p>
+
+ <hr>
+
+ <p>If the <code title="attr-input-src">src</code> attribute is set,
+ and the image is <i>available</i> and the user agent is configured
+ to display that image, then: The element represents a control for
+ selecting a <span
+ title="concept-input-type-image-coordinate">coordinate</span> from
+ the image specified by the <code title="attr-input-src">src</code>
+ attribute; if the element is <i
+ title="concept-input-mutable">mutable</i>, the user should allow the
+ user to select this <span
+ title="concept-input-type-image-coordinate">coordinate</span>, at
+ which point the element's <span>form owner</span>, if any, must be
+ <span title="concept-form-submit">submitted</span> from the
+ <code>input</code> element.</p>
+
+ <p>Otherwise, the element represents a submit button whose label is
+ given by the value of the <code title="attr-input-alt">alt</code>
+ attribute; if the element is <i
+ title="concept-input-mutable">mutable</i>, the user should allow the
+ user to activate the button, at which point the the <span
+ title="concept-input-type-image-coordinate">selected
+ coordinate</span> must be set to (0,0) and the element's <span>form
+ owner</span>, if any, must be <span
+ title="concept-form-submit">submitted</span> from the
+ <code>input</code> element.</p>
+
+ <!-- XXX event timing; activation behavior -->
+
+ <p>The <dfn
+ title="concept-input-type-image-coordinate">selected
+ coordinate</dfn> must consist of an <var title="">x</var>-component
+ and a <var title="">y</var>-component. The <var
+ title="">x</var>-component must be greater than or equal to zero,
+ and less than or equal to the rendered width, in CSS pixels, of the
+ image. The <var title="">y</var>-component must be greater than or
+ equal to zero, and less than or equal to the rendered height, in CSS
+ pixels, of the image.</p>
+
+ <hr>
+
+ <p>The following common <code>input</code> element content
+ attributes and DOM attributes apply to the element:
+ <code title="attr-fs-action">action</code>,
+ <code title="attr-input-alt">alt</code>,
+ <code title="attr-fs-enctype">enctype</code>,
+ <code title="attr-fs-method">method</code>,
+ <code title="attr-input-src">src</code>, and
+ <code title="attr-fs-target">target</code> content attributes;
+ <code title="dom-input-value">value</code> DOM attribute.</p>
+
+ <p>The <code title="dom-input-value">value</code> DOM attribute is
+ in mode <span title="dom-input-value-default">default</span>.</p>
+
+ <p>The following content attributes must not be specified and do not
+ apply to the element:
+ <code class="no-backref" title="attr-input-accept">accept</code>,
+ <code class="no-backref" title="attr-input-autocomplete">autocomplete</code>,
+ <code class="no-backref" title="attr-input-checked">checked</code>,
+ <code class="no-backref" title="attr-input-list">list</code>,
+ <code class="no-backref" title="attr-input-max">max</code>,
+ <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-min">min</code>,
+ <code class="no-backref" title="attr-input-pattern">pattern</code>,
+ <code class="no-backref" title="attr-input-readonly">readonly</code>,
+ <code class="no-backref" title="attr-input-required">required</code>
+ <code class="no-backref" title="attr-input-size">size</code>, and
+ <code class="no-backref" title="attr-input-step">step</code>.</p>
- <p class="XXX">... <dfn title="attr-input-alt"><code>alt</code></dfn></p>
+ <p>The element's <code title="attr-input-value">value</code>
+ attribute must be omitted.</p>
- <p class="XXX">... <dfn title="attr-input-src"><code>src</code></dfn></p>
+ <p>The following DOM attributes and methods do not apply to the element:
+ <code class="no-backref" title="dom-input-checked">checked</code>,
+ <code class="no-backref" title="dom-input-list">list</code>,
+ <code class="no-backref" title="dom-input-selectedOption">selectedOption</code>,
+ <code class="no-backref" title="dom-input-valueAsDate">valueAsDate</code> and
+ <code class="no-backref" title="dom-input-valueAsNumber">valueAsNumber</code> DOM attributes;
+ <code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
+ <code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
- <p class="XXX">... image: <dfn title="concept-input-type-image-coordinate">selected coordinate</dfn></p>
+ <p class="note">Many aspects of this state's behavior are similar to
+ the behavior of the <code>img</code> element. Readers are encouraged
+ to read that section, where many of the same requirements are
+ described in more detail.</p>
@@ -29694,10 +29865,11 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
title="">submitter</var>, and before this algorithm was invoked
the user <span
title="concept-input-type-image-coordinate">indicated a
- coordinate</span>. Let <var title="">x</var> be the x-component
- of the coordindate selected by the user, and let <var
- title="">y</var> be the y-component of the coordinate selected
- by the user.</p></li>
+ coordinate</span>. Let <var title="">x</var> be the <var
+ title="">x</var>-component of the coordindate selected by the
+ user, and let <var title="">y</var> be the <var
+ title="">y</var>-component of the coordinate selected by the
+ user.</p></li>
<li><p>Append an entry in the <var title="">form data set</var>
with the name <var title="">name<sub title="">x</sub></var> and

0 comments on commit 4f426dc

Please sign in to comment.
Something went wrong with that request. Please try again.