[html5] r2450 - [] (0) WF2: <input type=color>. Also, some editorial fixes.
whatwg at whatwg.org
whatwg at whatwg.org
Tue Nov 25 19:48:36 PST 2008
Author: ianh
Date: 2008-11-25 19:48:35 -0800 (Tue, 25 Nov 2008)
New Revision: 2450
Modified:
index
source
Log:
[] (0) WF2: <input type=color>. Also, some editorial fixes.
Modified: index
===================================================================
--- index 2008-11-26 01:55:11 UTC (rev 2449)
+++ index 2008-11-26 03:48:35 UTC (rev 2450)
@@ -235,10 +235,11 @@
<li><a href=#global-dates-and-times><span class=secno>2.4.4.5 </span>Global dates and times</a></li>
<li><a href=#weeks><span class=secno>2.4.4.6 </span>Weeks</a></li>
<li><a href=#vaguer-moments-in-time><span class=secno>2.4.4.7 </span>Vaguer moments in time</a></ol></li>
- <li><a href=#space-separated-tokens><span class=secno>2.4.5 </span>Space-separated tokens</a></li>
- <li><a href=#comma-separated-tokens><span class=secno>2.4.6 </span>Comma-separated tokens</a></li>
- <li><a href=#keywords-and-enumerated-attributes><span class=secno>2.4.7 </span>Keywords and enumerated attributes</a></li>
- <li><a href=#syntax-references><span class=secno>2.4.8 </span>References</a></ol></li>
+ <li><a href=#colors><span class=secno>2.4.5 </span>Colors</a></li>
+ <li><a href=#space-separated-tokens><span class=secno>2.4.6 </span>Space-separated tokens</a></li>
+ <li><a href=#comma-separated-tokens><span class=secno>2.4.7 </span>Comma-separated tokens</a></li>
+ <li><a href=#keywords-and-enumerated-attributes><span class=secno>2.4.8 </span>Keywords and enumerated attributes</a></li>
+ <li><a href=#syntax-references><span class=secno>2.4.9 </span>References</a></ol></li>
<li><a href=#urls><span class=secno>2.5 </span>URLs</a>
<ol>
<li><a href=#terminology-0><span class=secno>2.5.1 </span>Terminology</a></li>
@@ -516,13 +517,14 @@
<li><a href=#local-date-and-time-state><span class=secno>4.10.4.1.11 </span>Local Date and Time state</a></li>
<li><a href=#number-state><span class=secno>4.10.4.1.12 </span>Number state</a></li>
<li><a href=#range-state><span class=secno>4.10.4.1.13 </span>Range state</a></li>
- <li><a href=#checkbox-state><span class=secno>4.10.4.1.14 </span>Checkbox state</a></li>
- <li><a href=#radio-button-state><span class=secno>4.10.4.1.15 </span>Radio Button state</a></li>
- <li><a href=#file-upload-state><span class=secno>4.10.4.1.16 </span>File Upload state</a></li>
- <li><a href=#submit-button-state><span class=secno>4.10.4.1.17 </span>Submit Button state</a></li>
- <li><a href=#image-button-state><span class=secno>4.10.4.1.18 </span>Image Button state</a></li>
- <li><a href=#reset-button-state><span class=secno>4.10.4.1.19 </span>Reset Button state</a></li>
- <li><a href=#button-state><span class=secno>4.10.4.1.20 </span>Button state</a></ol></li>
+ <li><a href=#color-state><span class=secno>4.10.4.1.14 </span>Color state</a></li>
+ <li><a href=#checkbox-state><span class=secno>4.10.4.1.15 </span>Checkbox state</a></li>
+ <li><a href=#radio-button-state><span class=secno>4.10.4.1.16 </span>Radio Button state</a></li>
+ <li><a href=#file-upload-state><span class=secno>4.10.4.1.17 </span>File Upload state</a></li>
+ <li><a href=#submit-button-state><span class=secno>4.10.4.1.18 </span>Submit Button state</a></li>
+ <li><a href=#image-button-state><span class=secno>4.10.4.1.19 </span>Image Button state</a></li>
+ <li><a href=#reset-button-state><span class=secno>4.10.4.1.20 </span>Reset Button state</a></li>
+ <li><a href=#button-state><span class=secno>4.10.4.1.21 </span>Button state</a></ol></li>
<li><a href=#common-input-element-attributes><span class=secno>4.10.4.2 </span>Common <code>input</code> element attributes</a>
<ol>
<li><a href=#the-autocomplete-attribute><span class=secno>4.10.4.2.1 </span>The <code title=attr-input-autocomplete>autocomplete</code> attribute</a></li>
@@ -3429,8 +3431,89 @@
</li>
- </ol><h4 id=space-separated-tokens><span class=secno>2.4.5 </span>Space-separated tokens</h4>
+ </ol><h4 id=colors><span class=secno>2.4.5 </span>Colors</h4>
+ <p>A <dfn id=simple-color>simple color</dfn> consists of three 8-bit numbers in the
+ range 0..255, representing the red, green, and blue components of
+ the color respectively, in the sRGB color space. <a href=#refsSRGB>[SRGB]</a></p>
+
+ <p>A string is a <dfn id=valid-simple-color>valid simple color</dfn> if it is exactly
+ seven characters long, and the first character is a U+0023 NUMBER
+ SIGN (#) character, and the remaining six characters are all in the
+ range U+0030 DIGIT ZERO (0) .. U+0039 DIGIT NINE (9), U+0041 LATIN
+ CAPITAL LETTER A .. U+005A LATIN CAPITAL LETTER Z, U+0061 LATIN
+ SMALL LETTER A .. U+007A LATIN SMALL LETTER Z, with the first two
+ digits representing the red component, the middle two digits
+ representing the green component, and the last two digits
+ representing the blue component, in hexadecimal.</p>
+
+ <p>A string is a <dfn id=valid-lowercase-simple-color>valid lowercase simple color</dfn> if it is a
+ <a href=#valid-simple-color>valid simple color</a> and doesn't use any characters in
+ the range U+0041 LATIN CAPITAL LETTER A .. U+005A LATIN CAPITAL
+ LETTER Z.</p>
+
+ <p>The <dfn id=rules-for-parsing-simple-color-values>rules for parsing simple color values</dfn> are as given
+ in the following algorithm. When invoked, the steps must be followed
+ in the order given, aborting at the first step that returns a
+ value. This algorithm will either return a <a href=#simple-color>simple color</a>
+ or an error.</p>
+
+ <ol><li><p>Let <var title="">input</var> be the string being
+ parsed.</li>
+
+ <li><p>If <var title="">input</var> is not exactly seven characters
+ long, then return an error.</li>
+
+ <li><p>If the first character in <var title="">input</var> is not a
+ U+0023 NUMBER SIGN (#) character, then return an error.</li>
+
+ <li><p>If the last six characters of <var title="">input</var> are
+ not all in the range U+0030 DIGIT ZERO (0) .. U+0039 DIGIT NINE
+ (9), U+0041 LATIN CAPITAL LETTER A .. U+005A LATIN CAPITAL LETTER
+ Z, U+0061 LATIN SMALL LETTER A .. U+007A LATIN SMALL LETTER Z, then
+ return an error.</li>
+
+ <li><p>Let <var title="">result</var> be a <a href=#simple-color>simple
+ color</a>.</p>
+
+ <li><p>Interpret the second and third characters as a hexadecimal
+ number and let the result be the red component of <var title="">result</var>.</p>
+
+ <li><p>Interpret the fourth and fifth characters as a hexadecimal
+ number and let the result be the green component of <var title="">result</var>.</p>
+
+ <li><p>Interpret the sixth and seventh characters as a hexadecimal
+ number and let the result be the blue component of <var title="">result</var>.</p>
+
+ <li><p>Return <var title="">result</var>.</p>
+
+ </ol><p>The <dfn id=rules-for-serialising-simple-color-values>rules for serialising simple color values</dfn> given a
+ <a href=#simple-color>simple color</a> are as given in the following
+ algorithm:</p>
+
+ <ol><li><p>Let <var title="">result</var> be a string consisting of a
+ single U+0023 NUMBER SIGN (#) character.</li>
+
+ <li><p>Convert the red, green, and blue components in turn to
+ two-digit hexadecimal numbers using the digits U+0030 DIGIT ZERO
+ (0) .. U+0039 DIGIT NINE (9) and U+0061 LATIN SMALL LETTER A
+ .. U+007A LATIN SMALL LETTER Z, zero-padding if necessary, and
+ append these numbers to <var title="">result</var>, in the order
+ red, green, blue.</p>
+
+ <li><p>Return <var title="">result</var>, which will be a
+ <a href=#valid-lowercase-simple-color>valid lowercase simple color</a>.</li>
+
+ </ol><p class=note>The <a href=#canvas-context-2d title=canvas-context-2d>2D graphics
+ context</a> has a separate color syntax that also handles
+ opacity.</p>
+
+ <p class=note>Some obsolete legacy attributes parse colors in a
+ more complicated manner.</p>
+
+
+ <h4 id=space-separated-tokens><span class=secno>2.4.6 </span>Space-separated tokens</h4>
+
<p>A <dfn id=set-of-space-separated-tokens>set of space-separated tokens</dfn> is a set of zero or
more words separated by one or more <a href=#space-character title="space
character">space characters</a>, where words consist of any
@@ -3544,7 +3627,7 @@
- <h4 id=comma-separated-tokens><span class=secno>2.4.6 </span>Comma-separated tokens</h4>
+ <h4 id=comma-separated-tokens><span class=secno>2.4.7 </span>Comma-separated tokens</h4>
<p class=XXX>We should allow whitespace around commas, and
leading/trailing whitespace.</p>
@@ -3590,7 +3673,7 @@
<li><p>Return <var title="">tokens</var>.</li>
- </ol><h4 id=keywords-and-enumerated-attributes><span class=secno>2.4.7 </span>Keywords and enumerated attributes</h4>
+ </ol><h4 id=keywords-and-enumerated-attributes><span class=secno>2.4.8 </span>Keywords and enumerated attributes</h4>
<p>Some attributes are defined as taking one of a finite set of
keywords. Such attributes are called <dfn id=enumerated-attribute title="enumerated
@@ -3635,7 +3718,7 @@
specification actually defines it.</p>
- <h4 id=syntax-references><span class=secno>2.4.8 </span>References</h4>
+ <h4 id=syntax-references><span class=secno>2.4.9 </span>References</h4>
<p>A <dfn id=valid-hash-name-reference>valid hash-name reference</dfn> to an element of type <var title="">type</var> is a string consisting of a U+0023 NUMBER SIGN
(<code title="">#</code>) character followed by a string which
@@ -23231,6 +23314,10 @@
<td> <a href=#range-state title=attr-input-type-range>Range</a>
<td> A numerical value, with the extra semantic that the exact value is not important
<td> A slider control or similar
+ <tr><td> <dfn id=attr-input-type-color-keyword title=attr-input-type-color-keyword><code>color</code></dfn>
+ <td> <a href=#color-state title=attr-input-type-color>Color</a>
+ <td> An sRGB color with 8-bit red, green, and blue components
+ <td> A color well
<tr><td> <dfn id=attr-input-type-checkbox-keyword title=attr-input-type-checkbox-keyword><code>checkbox</code></dfn>
<td> <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a>
<td> A set of zero or more values from a predefined list
@@ -23284,6 +23371,7 @@
<th> <span><a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a>,</span>
<span><a href=#number-state title=attr-input-type-number>Number</a></span>
<th> <span><a href=#range-state title=attr-input-type-range>Range</a></span>
+ <th> <span><a href=#color-state title=attr-input-type-color>Color</a></span>
<th> <span><a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a>,</span>
<span><a href=#radio-button-state title=attr-input-type-radio>Radio Button</a></span>
<th> <span><a href=#file-upload-state title=attr-input-type-file>File Upload</a></span>
@@ -23307,6 +23395,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=yes> Yes <!-- File Upload -->
@@ -23330,6 +23419,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23353,6 +23443,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23376,6 +23467,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=yes> Yes <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23399,6 +23491,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=yes> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23422,6 +23515,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23445,6 +23539,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=yes> Yes <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23468,6 +23563,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23491,6 +23587,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23514,6 +23611,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23537,6 +23635,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23560,6 +23659,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=yes> Yes <!-- File Upload -->
@@ -23583,6 +23683,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23606,6 +23707,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23629,6 +23731,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23652,6 +23755,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23675,6 +23779,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=yes> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class=yes> Yes <!-- File Upload -->
@@ -23698,6 +23803,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23721,6 +23827,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23744,6 +23851,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23767,6 +23875,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23790,6 +23899,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=yes> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23813,6 +23923,7 @@
<td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Local Date and Time -->
<!-- <td class="yes"> <span title="dom-input-value-value">value</span> Number -->
<td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Range -->
+ <td class=yes> <a href=#dom-input-value-value title=dom-input-value-value>value</a> <!-- Color -->
<td class=yes> <a href=#dom-input-value-default-on title=dom-input-value-default-on>default/on</a> <!-- Checkbox -->
<!-- <td class="yes"> <span title="dom-input-value-default-on">default/on</span> Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23836,6 +23947,7 @@
<td class=no> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class=no> · <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23859,6 +23971,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23882,6 +23995,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=yes> Yes <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23905,6 +24019,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=yes> Yes <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23913,7 +24028,7 @@
<td class=no> · <!-- Reset Button -->
<!-- <td class="no"> · Button -->
- <tr><th> <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>
+ <tr><th> <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>
<td class=no> · <!-- Hidden -->
<td class=no> · <!-- Text -->
<!-- <td class="no"> · Search -->
@@ -23928,6 +24043,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23936,7 +24052,7 @@
<td class=no> · <!-- Reset Button -->
<!-- <td class="no"> · Button -->
- <tr><th> <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>
+ <tr><th> <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>
<td class=no> · <!-- Hidden -->
<td class=no> · <!-- Text -->
<!-- <td class="no"> · Search -->
@@ -23951,6 +24067,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=no> · <!-- Color -->
<td class=no> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23974,6 +24091,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=yes> Yes <!-- Color -->
<td class=yes> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class=no> · <!-- File Upload -->
@@ -23997,6 +24115,7 @@
<td class=yes> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class=yes> Yes <!-- Range -->
+ <td class=yes> Yes <!-- Color -->
<td class=yes> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class=yes> Yes <!-- File Upload -->
@@ -24023,8 +24142,8 @@
<code title=attr-input-step><a href=#attr-input-step>step</a></code>,
<code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
<code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>,
- <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>.</p>
+ <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code>, and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>.</p>
<p>Each <code><a href=#the-input-element>input</a></code> element has a boolean <dfn id=concept-input-value-dirty-flag title=concept-input-value-dirty-flag>dirty value flag</dfn>. When
it is true, the element is said to have a <dfn id=concept-input-value-dirty title=concept-input-value-dirty><i>dirty value</i></dfn>. The
@@ -24185,9 +24304,9 @@
<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-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <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>The <code class=no-backref title=event-input-input><a href=#event-input-input>input</a></code> and <code class=no-backref title=event-input-change><a href=#event-input-change>change</a></code> events do not apply.</p>
@@ -24256,9 +24375,9 @@
element:
<code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</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-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <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>
</div>
@@ -24336,8 +24455,8 @@
<code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</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-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <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>
</div>
@@ -24437,8 +24556,8 @@
<code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</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-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <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>
</div>
@@ -24503,8 +24622,8 @@
<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-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code class=no-backref title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <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>
</div>
@@ -24609,8 +24728,8 @@
<code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
<code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
<code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> DOM attributes;
- <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</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-value title=dom-input-value-value>value</a>.</p>
@@ -24734,8 +24853,8 @@
<code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
<code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
<code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> DOM attributes;
- <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</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-value title=dom-input-value-value>value</a>.</p>
@@ -24859,8 +24978,8 @@
<code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
<code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
<code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> DOM attributes;
- <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</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-value title=dom-input-value-value>value</a>.</p>
@@ -24984,8 +25103,8 @@
<code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
<code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
<code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> DOM attributes;
- <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</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-value title=dom-input-value-value>value</a>.</p>
@@ -25103,8 +25222,8 @@
<code title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>,
<code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
<code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> DOM attributes;
- <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</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-value title=dom-input-value-value>value</a>.</p>
@@ -25214,8 +25333,8 @@
<code title=dom-input-value><a href=#dom-input-value>value</a></code>,
<code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
<code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> DOM attributes;
- <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</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-value title=dom-input-value-value>value</a>.</p>
@@ -25319,8 +25438,8 @@
<code title=dom-input-value><a href=#dom-input-value>value</a></code>,
<code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
<code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> DOM attributes;
- <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</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-value title=dom-input-value-value>value</a>.</p>
@@ -25450,8 +25569,8 @@
<code title=dom-input-value><a href=#dom-input-value>value</a></code>,
<code title=dom-input-valueAsNumber><a href=#dom-input-valueasnumber>valueAsNumber</a></code>, and
<code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> DOM attributes;
- <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code>, and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods.</p>
+ <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods.</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-value title=dom-input-value-value>value</a>.</p>
@@ -25478,14 +25597,96 @@
<code class=no-backref title=attr-fs-target><a href=#attr-fs-target>target</a></code>.</p>
<p>The following DOM attributes do not apply to the element:
- <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code> and
- <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code>.</p>
+ <code class=no-backref title=dom-input-checked><a href=#dom-input-checked>checked</a></code> and
+ <code class=no-backref title=dom-input-valueAsDate><a href=#dom-input-valueasdate>valueAsDate</a></code>.</p>
</div>
- <h6 id=checkbox-state><span class=secno>4.10.4.1.14 </span><dfn title=attr-input-type-checkbox>Checkbox</dfn> state</h6>
+ <h6 id=color-state><span class=secno>4.10.4.1.14 </span><dfn title=attr-input-type-color>Color</dfn> state</h6>
+ <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=#color-state title=attr-input-type-color>Color</a> state, the rules in this
+ section apply.</p>
+
+ <p>The <code><a href=#the-input-element>input</a></code> element represents a color well control,
+ for setting the element's <a href=#concept-fe-value title=concept-fe-value>value</a> to a string representing a
+ <a href=#simple-color>simple color</a>.</p>
+
+ <p class=note>In this state, there is always a color picked, and
+ there is no way to set the value to the empty string.</p>
+
+ <p>If the element is <i title=concept-input-mutable><a href=#concept-input-mutable>mutable</a></i>,
+ the user agent should allow the user to change the color represented
+ by its <a href=#concept-fe-value title=concept-fe-value>value</a>, as obtained from
+ applying the <a href=#rules-for-parsing-simple-color-values>rules for parsing simple color values</a> to
+ it. User agents must not allow the user to set the <a href=#concept-fe-value title=concept-fe-value>value</a> to a string that is not a
+ <a href=#valid-lowercase-simple-color>valid lowercase simple color</a>. If the user agent
+ provides a user interface for selecting a color, then the <a href=#concept-fe-value title=concept-fe-value>value</a> must be set to the result of
+ using the <a href=#rules-for-serialising-simple-color-values>rules for serialising simple color values</a> to
+ the user's selection. User agents must not allow the user to set the
+ <a href=#concept-fe-value title=concept-fe-value>value</a> to the empty string.</p>
+
+ <p>The <code title=attr-input-value><a href=#attr-input-value>value</a></code> attribute, if
+ specified, must have a value that is a <a href=#valid-simple-color>valid simple
+ color</a>.</p>
+
+ <p><strong>The <a href=#value-sanitization-algorithm>value sanitization algorithm</a> is as
+ follows:</strong> If the <a href=#concept-fe-value title=concept-fe-value>value</a>
+ of the element is a <a href=#valid-simple-color>valid simple color</a>, then set it to
+ the <a href=#concept-fe-value title=concept-fe-value>value</a> of the element
+ <a href=#converted-to-lowercase>converted to lowercase</a>; otherwise, set it to the string
+ "<code title="">#000000</code>".</p>
+
+ <div class=bookkeeping>
+
+ <p>The following common <code><a href=#the-input-element>input</a></code> element content
+ attributes, DOM attributes, and methods apply to the element:
+ <code title=attr-input-autocomplete><a href=#attr-input-autocomplete>autocomplete</a></code> and
+ <code title=attr-input-list><a href=#attr-input-list>list</a></code> content attributes;
+ <code title=dom-input-list><a href=#dom-input-list>list</a></code>,
+ <code title=dom-input-value><a href=#dom-input-value>value</a></code>, and
+ <code title=dom-input-selectedOption><a href=#dom-input-selectedoption>selectedOption</a></code> DOM attributes.</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-value title=dom-input-value-value>value</a>.</p>
+
+ <p>The <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code> events apply.</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-fs-action><a href=#attr-fs-action>action</a></code>,
+ <code class=no-backref title=attr-input-alt><a href=#attr-input-alt>alt</a></code>,
+ <code class=no-backref title=attr-input-checked><a href=#attr-input-checked>checked</a></code>,
+ <code class=no-backref title=attr-fs-enctype><a href=#attr-fs-enctype>enctype</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-max><a href=#attr-input-max>max</a></code>,
+ <code class=no-backref title=attr-fs-method><a href=#attr-fs-method>method</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-multiple><a href=#attr-input-multiple>multiple</a></code>,
+ <code class=no-backref title=attr-fs-novalidate><a href=#attr-fs-novalidate>novalidate</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-placeholder><a href=#attr-input-placeholder>placeholder</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>,
+ <code class=no-backref title=attr-input-src><a href=#attr-input-src>src</a></code>,
+ <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 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-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>
+
+ </div>
+
+
+ <h6 id=checkbox-state><span class=secno>4.10.4.1.15 </span><dfn title=attr-input-type-checkbox>Checkbox</dfn> state</h6>
+
<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=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, the rules in
this section apply.</p>
@@ -25560,7 +25761,7 @@
</div>
- <h6 id=radio-button-state><span class=secno>4.10.4.1.15 </span><dfn title=attr-input-type-radio>Radio Button</dfn> state</h6>
+ <h6 id=radio-button-state><span class=secno>4.10.4.1.16 </span><dfn title=attr-input-type-radio>Radio Button</dfn> state</h6>
<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=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, the rules
in this section apply.</p>
@@ -25679,7 +25880,7 @@
- <h6 id=file-upload-state><span class=secno>4.10.4.1.16 </span><dfn title=attr-input-type-file>File Upload</dfn> state</h6>
+ <h6 id=file-upload-state><span class=secno>4.10.4.1.17 </span><dfn title=attr-input-type-file>File Upload</dfn> state</h6>
<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=#file-upload-state title=attr-input-type-file>File Upload</a> state, the rules in this
section apply.</p>
@@ -25785,7 +25986,7 @@
- <h6 id=submit-button-state><span class=secno>4.10.4.1.17 </span><dfn title=attr-input-type-submit>Submit Button</dfn> state</h6>
+ <h6 id=submit-button-state><span class=secno>4.10.4.1.18 </span><dfn title=attr-input-type-submit>Submit Button</dfn> state</h6>
<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=#submit-button-state title=attr-input-type-submit>Submit Button</a> state, the rules
in this section apply.</p>
@@ -25856,7 +26057,7 @@
</div>
- <h6 id=image-button-state><span class=secno>4.10.4.1.18 </span><dfn title=attr-input-type-image>Image Button</dfn> state</h6>
+ <h6 id=image-button-state><span class=secno>4.10.4.1.19 </span><dfn title=attr-input-type-image>Image Button</dfn> state</h6>
<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>
@@ -26024,7 +26225,7 @@
- <h6 id=reset-button-state><span class=secno>4.10.4.1.19 </span><dfn title=attr-input-type-reset>Reset Button</dfn> state</h6>
+ <h6 id=reset-button-state><span class=secno>4.10.4.1.20 </span><dfn title=attr-input-type-reset>Reset Button</dfn> state</h6>
<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=#reset-button-state title=attr-input-type-reset>Reset Button</a> state, the rules
in this section apply.</p>
@@ -26088,7 +26289,7 @@
</div>
- <h6 id=button-state><span class=secno>4.10.4.1.20 </span><dfn title=attr-input-type-button>Button</dfn> state</h6>
+ <h6 id=button-state><span class=secno>4.10.4.1.21 </span><dfn title=attr-input-type-button>Button</dfn> state</h6>
<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=#button-state title=attr-input-type-button>Button</a> state, the rules in
this section apply.</p>
@@ -26638,12 +26839,12 @@
value, and set the <a href=#concept-fe-value title=concept-fe-value>value</a> of
the element to resulting string.</p>
- <hr><p>The <dfn id=dom-input-stepup title=dom-input-stepUp><code>stepUp()</code></dfn> and
- <dfn id=dom-input-stepdown title=dom-input-stepDown><code>stepDown()</code></dfn>
+ <hr><p>The <dfn id=dom-input-stepdown title=dom-input-stepDown><code>stepDown()</code></dfn>
+ and <dfn id=dom-input-stepup title=dom-input-stepUp><code>stepUp()</code></dfn>
methods, when invoked, must run the following algorithm:</p>
- <ol><li><p>If the <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> and
- <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> methods do not
+ <ol><li><p>If the <code title=dom-input-stepDown><a href=#dom-input-stepdown>stepDown()</a></code> and
+ <code title=dom-input-stepUp><a href=#dom-input-stepup>stepUp()</a></code> methods do not
apply, as defined for 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's current state, then
throw an <code>INVALID_ACCESS_ERR</code> exception, and abort these
steps.</li>
@@ -53836,6 +54037,10 @@
XXX * dolphinling suggests having a way to mark certain parts of a
form as being dependent on another (mutually exclusive parts of
a form)
+ XXX * make the spec more consistent about its use of "hexadecimal"
+ and "base-sixteen", the order that 0-9 A-Z a-z is mentioned,
+ and the detail to which the spec explains how to interpret a
+ string as a hexadecimal number.
-->
Modified: source
===================================================================
--- source 2008-11-26 01:55:11 UTC (rev 2449)
+++ source 2008-11-26 03:48:35 UTC (rev 2450)
@@ -2943,7 +2943,99 @@
</ol>
+ <h4>Colors</h4>
+ <p>A <dfn>simple color</dfn> consists of three 8-bit numbers in the
+ range 0..255, representing the red, green, and blue components of
+ the color respectively, in the sRGB color space. <a
+ href="#refsSRGB">[SRGB]</a></p>
+
+ <p>A string is a <dfn>valid simple color</dfn> if it is exactly
+ seven characters long, and the first character is a U+0023 NUMBER
+ SIGN (#) character, and the remaining six characters are all in the
+ range U+0030 DIGIT ZERO (0) .. U+0039 DIGIT NINE (9), U+0041 LATIN
+ CAPITAL LETTER A .. U+005A LATIN CAPITAL LETTER Z, U+0061 LATIN
+ SMALL LETTER A .. U+007A LATIN SMALL LETTER Z, with the first two
+ digits representing the red component, the middle two digits
+ representing the green component, and the last two digits
+ representing the blue component, in hexadecimal.</p>
+
+ <p>A string is a <dfn>valid lowercase simple color</dfn> if it is a
+ <span>valid simple color</span> and doesn't use any characters in
+ the range U+0041 LATIN CAPITAL LETTER A .. U+005A LATIN CAPITAL
+ LETTER Z.</p>
+
+ <p>The <dfn>rules for parsing simple color values</dfn> are as given
+ in the following algorithm. When invoked, the steps must be followed
+ in the order given, aborting at the first step that returns a
+ value. This algorithm will either return a <span>simple color</span>
+ or an error.</p>
+
+ <ol>
+
+ <li><p>Let <var title="">input</var> be the string being
+ parsed.</p></li>
+
+ <li><p>If <var title="">input</var> is not exactly seven characters
+ long, then return an error.</p></li>
+
+ <li><p>If the first character in <var title="">input</var> is not a
+ U+0023 NUMBER SIGN (#) character, then return an error.</p></li>
+
+ <li><p>If the last six characters of <var title="">input</var> are
+ not all in the range U+0030 DIGIT ZERO (0) .. U+0039 DIGIT NINE
+ (9), U+0041 LATIN CAPITAL LETTER A .. U+005A LATIN CAPITAL LETTER
+ Z, U+0061 LATIN SMALL LETTER A .. U+007A LATIN SMALL LETTER Z, then
+ return an error.</p></li>
+
+ <li><p>Let <var title="">result</var> be a <span>simple
+ color</span>.</p>
+
+ <li><p>Interpret the second and third characters as a hexadecimal
+ number and let the result be the red component of <var
+ title="">result</var>.</p>
+
+ <li><p>Interpret the fourth and fifth characters as a hexadecimal
+ number and let the result be the green component of <var
+ title="">result</var>.</p>
+
+ <li><p>Interpret the sixth and seventh characters as a hexadecimal
+ number and let the result be the blue component of <var
+ title="">result</var>.</p>
+
+ <li><p>Return <var title="">result</var>.</p>
+
+ </ol>
+
+ <p>The <dfn>rules for serialising simple color values</dfn> given a
+ <span>simple color</span> are as given in the following
+ algorithm:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">result</var> be a string consisting of a
+ single U+0023 NUMBER SIGN (#) character.</p></li>
+
+ <li><p>Convert the red, green, and blue components in turn to
+ two-digit hexadecimal numbers using the digits U+0030 DIGIT ZERO
+ (0) .. U+0039 DIGIT NINE (9) and U+0061 LATIN SMALL LETTER A
+ .. U+007A LATIN SMALL LETTER Z, zero-padding if necessary, and
+ append these numbers to <var title="">result</var>, in the order
+ red, green, blue.</p>
+
+ <li><p>Return <var title="">result</var>, which will be a
+ <span>valid lowercase simple color</span>.</p></li>
+
+ </ol>
+
+ <p class="note">The <span title="canvas-context-2d">2D graphics
+ context</span> has a separate color syntax that also handles
+ opacity.</p>
+
+ <p class="note">Some obsolete legacy attributes parse colors in a
+ more complicated manner.</p>
+
+
<h4>Space-separated tokens</h4>
<p>A <dfn>set of space-separated tokens</dfn> is a set of zero or
@@ -25890,6 +25982,11 @@
<td> A numerical value, with the extra semantic that the exact value is not important
<td> A slider control or similar
<tr>
+ <td> <dfn title="attr-input-type-color-keyword"><code>color</code></dfn>
+ <td> <span title="attr-input-type-color">Color</span>
+ <td> An sRGB color with 8-bit red, green, and blue components
+ <td> A color well
+ <tr>
<td> <dfn title="attr-input-type-checkbox-keyword"><code>checkbox</code></dfn>
<td> <span title="attr-input-type-checkbox">Checkbox</span>
<td> A set of zero or more values from a predefined list
@@ -25980,6 +26077,7 @@
<th> <span><span title="attr-input-type-datetime-local">Local Date and Time</span>,</span>
<span><span title="attr-input-type-number">Number</span></span>
<th> <span><span title="attr-input-type-range">Range</span></span>
+ <th> <span><span title="attr-input-type-color">Color</span></span>
<th> <span><span title="attr-input-type-checkbox">Checkbox</span>,</span>
<span><span title="attr-input-type-radio">Radio Button</span></span>
<th> <span><span title="attr-input-type-file">File Upload</span></span>
@@ -26005,6 +26103,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="yes"> Yes <!-- File Upload -->
@@ -26029,6 +26128,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26053,6 +26153,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26077,6 +26178,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="yes"> Yes <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26101,6 +26203,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="yes"> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26125,6 +26228,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26149,6 +26253,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="yes"> Yes <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26173,6 +26278,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26197,6 +26303,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26221,6 +26328,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26245,6 +26353,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26269,6 +26378,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="yes"> Yes <!-- File Upload -->
@@ -26293,6 +26403,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26317,6 +26428,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26341,6 +26453,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26365,6 +26478,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26389,6 +26503,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="yes"> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class="yes"> Yes <!-- File Upload -->
@@ -26413,6 +26528,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26437,6 +26553,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26461,6 +26578,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26485,6 +26603,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26509,6 +26628,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="yes"> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26533,6 +26653,7 @@
<td class="yes"> <span title="dom-input-value-value">value</span> <!-- Local Date and Time -->
<!-- <td class="yes"> <span title="dom-input-value-value">value</span> Number -->
<td class="yes"> <span title="dom-input-value-value">value</span> <!-- Range -->
+ <td class="yes"> <span title="dom-input-value-value">value</span> <!-- Color -->
<td class="yes"> <span title="dom-input-value-default-on">default/on</span> <!-- Checkbox -->
<!-- <td class="yes"> <span title="dom-input-value-default-on">default/on</span> Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26557,6 +26678,7 @@
<td class="no"> · <!-- Local Date and Time -->
<!-- <td class="no"> · Number -->
<td class="no"> · <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26581,6 +26703,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26605,6 +26728,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="yes"> Yes <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26629,6 +26753,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="yes"> Yes <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26638,7 +26763,7 @@
<!-- <td class="no"> · Button -->
<tr>
- <th> <code title="dom-input-stepUp">stepUp()</code>
+ <th> <code title="dom-input-stepDown">stepDown()</code>
<td class="no"> · <!-- Hidden -->
<td class="no"> · <!-- Text -->
<!-- <td class="no"> · Search -->
@@ -26653,6 +26778,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26662,7 +26788,7 @@
<!-- <td class="no"> · Button -->
<tr>
- <th> <code title="dom-input-stepDown">stepDown()</code>
+ <th> <code title="dom-input-stepUp">stepUp()</code>
<td class="no"> · <!-- Hidden -->
<td class="no"> · <!-- Text -->
<!-- <td class="no"> · Search -->
@@ -26677,6 +26803,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="no"> · <!-- Color -->
<td class="no"> · <!-- Checkbox -->
<!-- <td class="no"> · Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26701,6 +26828,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="yes"> Yes <!-- Color -->
<td class="yes"> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class="no"> · <!-- File Upload -->
@@ -26725,6 +26853,7 @@
<td class="yes"> Yes <!-- Local Date and Time -->
<!-- <td class="yes"> Yes Number -->
<td class="yes"> Yes <!-- Range -->
+ <td class="yes"> Yes <!-- Color -->
<td class="yes"> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
<td class="yes"> Yes <!-- File Upload -->
@@ -26759,8 +26888,8 @@
<code title="attr-input-step">step</code>,
<code title="dom-input-valueAsDate">valueAsDate</code>,
<code title="dom-input-valueAsNumber">valueAsNumber</code>,
- <code title="dom-input-stepUp">stepUp()</code>, and
- <code title="dom-input-stepDown">stepDown()</code>.</p>
+ <code title="dom-input-stepDown">stepDown()</code>, and
+ <code title="dom-input-stepUp">stepUp()</code>.</p>
<p>Each <code>input</code> element has a boolean <dfn
title="concept-input-value-dirty-flag">dirty value flag</dfn>. When
@@ -26975,9 +27104,9 @@
<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-stepUp">stepUp()</code>, and
- <code class="no-backref" title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <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>The <code class="no-backref"
title="event-input-input">input</code> and <code class="no-backref"
@@ -27054,9 +27183,9 @@
element:
<code class="no-backref" title="dom-input-checked">checked</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-stepUp">stepUp()</code>, and
- <code class="no-backref" title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <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>
</div>
@@ -27141,8 +27270,8 @@
<code class="no-backref" title="dom-input-checked">checked</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-stepUp">stepUp()</code>, and
- <code class="no-backref" title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
+ <code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
</div>
@@ -27254,8 +27383,8 @@
<code class="no-backref" title="dom-input-checked">checked</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-stepUp">stepUp()</code>, and
- <code class="no-backref" title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
+ <code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
</div>
@@ -27326,8 +27455,8 @@
<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-stepUp">stepUp()</code>, and
- <code class="no-backref" title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code class="no-backref" title="dom-input-stepDown">stepDown()</code> and
+ <code class="no-backref" title="dom-input-stepUp">stepUp()</code> methods.</p>
</div>
@@ -27453,8 +27582,8 @@
<code title="dom-input-valueAsDate">valueAsDate</code>,
<code title="dom-input-valueAsNumber">valueAsNumber</code>, and
<code title="dom-input-selectedOption">selectedOption</code> DOM attributes;
- <code title="dom-input-stepUp">stepUp()</code>, and
- <code title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code title="dom-input-stepDown">stepDown()</code> and
+ <code title="dom-input-stepUp">stepUp()</code> methods.</p>
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
@@ -27596,8 +27725,8 @@
<code title="dom-input-valueAsDate">valueAsDate</code>,
<code title="dom-input-valueAsNumber">valueAsNumber</code>, and
<code title="dom-input-selectedOption">selectedOption</code> DOM attributes;
- <code title="dom-input-stepUp">stepUp()</code>, and
- <code title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code title="dom-input-stepDown">stepDown()</code> and
+ <code title="dom-input-stepUp">stepUp()</code> methods.</p>
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
@@ -27741,8 +27870,8 @@
<code title="dom-input-valueAsDate">valueAsDate</code>,
<code title="dom-input-valueAsNumber">valueAsNumber</code>, and
<code title="dom-input-selectedOption">selectedOption</code> DOM attributes;
- <code title="dom-input-stepUp">stepUp()</code>, and
- <code title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code title="dom-input-stepDown">stepDown()</code> and
+ <code title="dom-input-stepUp">stepUp()</code> methods.</p>
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
@@ -27885,8 +28014,8 @@
<code title="dom-input-valueAsDate">valueAsDate</code>,
<code title="dom-input-valueAsNumber">valueAsNumber</code>, and
<code title="dom-input-selectedOption">selectedOption</code> DOM attributes;
- <code title="dom-input-stepUp">stepUp()</code>, and
- <code title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code title="dom-input-stepDown">stepDown()</code> and
+ <code title="dom-input-stepUp">stepUp()</code> methods.</p>
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
@@ -28024,8 +28153,8 @@
<code title="dom-input-valueAsDate">valueAsDate</code>,
<code title="dom-input-valueAsNumber">valueAsNumber</code>, and
<code title="dom-input-selectedOption">selectedOption</code> DOM attributes;
- <code title="dom-input-stepUp">stepUp()</code>, and
- <code title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code title="dom-input-stepDown">stepDown()</code> and
+ <code title="dom-input-stepUp">stepUp()</code> methods.</p>
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
@@ -28150,8 +28279,8 @@
<code title="dom-input-value">value</code>,
<code title="dom-input-valueAsNumber">valueAsNumber</code>, and
<code title="dom-input-selectedOption">selectedOption</code> DOM attributes;
- <code title="dom-input-stepUp">stepUp()</code>, and
- <code title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code title="dom-input-stepDown">stepDown()</code> and
+ <code title="dom-input-stepUp">stepUp()</code> methods.</p>
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
@@ -28265,8 +28394,8 @@
<code title="dom-input-value">value</code>,
<code title="dom-input-valueAsNumber">valueAsNumber</code>, and
<code title="dom-input-selectedOption">selectedOption</code> DOM attributes;
- <code title="dom-input-stepUp">stepUp()</code>, and
- <code title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code title="dom-input-stepDown">stepDown()</code> and
+ <code title="dom-input-stepUp">stepUp()</code> methods.</p>
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
@@ -28418,8 +28547,8 @@
<code title="dom-input-value">value</code>,
<code title="dom-input-valueAsNumber">valueAsNumber</code>, and
<code title="dom-input-selectedOption">selectedOption</code> DOM attributes;
- <code title="dom-input-stepUp">stepUp()</code>, and
- <code title="dom-input-stepDown">stepDown()</code> methods.</p>
+ <code title="dom-input-stepDown">stepDown()</code> and
+ <code title="dom-input-stepUp">stepUp()</code> methods.</p>
<p>The <code title="dom-input-value">value</code> DOM attribute is
in mode <span title="dom-input-value-value">value</span>.</p>
@@ -28447,12 +28576,100 @@
<code class="no-backref" title="attr-fs-target">target</code>.</p>
<p>The following DOM attributes do not apply to the element:
- <code class="no-backref" title="dom-input-valueAsDate">valueAsDate</code> and
- <code class="no-backref" title="dom-input-checked">checked</code>.</p>
+ <code class="no-backref" title="dom-input-checked">checked</code> and
+ <code class="no-backref" title="dom-input-valueAsDate">valueAsDate</code>.</p>
</div>
+ <h6><dfn title="attr-input-type-color">Color</dfn> state</h6>
+
+ <p>When an <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-color">Color</span> state, the rules in this
+ section apply.</p>
+
+ <p>The <code>input</code> element represents a color well control,
+ for setting the element's <span
+ title="concept-fe-value">value</span> to a string representing a
+ <span>simple color</span>.</p>
+
+ <p class="note">In this state, there is always a color picked, and
+ there is no way to set the value to the empty string.</p>
+
+ <p>If the element is <i title="concept-input-mutable">mutable</i>,
+ the user agent should allow the user to change the color represented
+ by its <span title="concept-fe-value">value</span>, as obtained from
+ applying the <span>rules for parsing simple color values</span> to
+ it. User agents must not allow the user to set the <span
+ title="concept-fe-value">value</span> to a string that is not a
+ <span>valid lowercase simple color</span>. If the user agent
+ provides a user interface for selecting a color, then the <span
+ title="concept-fe-value">value</span> must be set to the result of
+ using the <span>rules for serialising simple color values</span> to
+ the user's selection. User agents must not allow the user to set the
+ <span title="concept-fe-value">value</span> to the empty string.</p>
+
+ <p>The <code title="attr-input-value">value</code> attribute, if
+ specified, must have a value that is a <span>valid simple
+ color</span>.</p>
+
+ <p><strong>The <span>value sanitization algorithm</span> is as
+ follows:</strong> If the <span title="concept-fe-value">value</span>
+ of the element is a <span>valid simple color</span>, then set it to
+ the <span title="concept-fe-value">value</span> of the element
+ <span>converted to lowercase</span>; otherwise, set it to the string
+ "<code title="">#000000</code>".</p>
+
+ <div class="bookkeeping">
+
+ <p>The following common <code>input</code> element content
+ attributes, DOM attributes, and methods apply to the element:
+ <code title="attr-input-autocomplete">autocomplete</code> and
+ <code title="attr-input-list">list</code> content attributes;
+ <code title="dom-input-list">list</code>,
+ <code title="dom-input-value">value</code>, and
+ <code title="dom-input-selectedOption">selectedOption</code> DOM attributes.</p>
+
+ <p>The <code title="dom-input-value">value</code> DOM attribute is
+ in mode <span title="dom-input-value-value">value</span>.</p>
+
+ <p>The <code title="event-input-input">input</code> and <code
+ title="event-input-change">change</code> events apply.</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-fs-action">action</code>,
+ <code class="no-backref" title="attr-input-alt">alt</code>,
+ <code class="no-backref" title="attr-input-checked">checked</code>,
+ <code class="no-backref" title="attr-fs-enctype">enctype</code>,
+ <code class="no-backref" title="attr-input-maxlength">maxlength</code>,
+ <code class="no-backref" title="attr-input-max">max</code>,
+ <code class="no-backref" title="attr-fs-method">method</code>,
+ <code class="no-backref" title="attr-input-min">min</code>,
+ <code class="no-backref" title="attr-input-multiple">multiple</code>,
+ <code class="no-backref" title="attr-fs-novalidate">novalidate</code>,
+ <code class="no-backref" title="attr-input-pattern">pattern</code>,
+ <code class="no-backref" title="attr-input-placeholder">placeholder</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>,
+ <code class="no-backref" title="attr-input-src">src</code>,
+ <code class="no-backref" title="attr-input-step">step</code>, and
+ <code class="no-backref" title="attr-fs-target">target</code>.</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-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>
+
+ </div>
+
+
<h6><dfn title="attr-input-type-checkbox">Checkbox</dfn> state</h6>
<p>When an <code>input</code> element's <code
@@ -29841,14 +30058,14 @@
<hr>
- <p>The <dfn title="dom-input-stepUp"><code>stepUp()</code></dfn> and
- <dfn title="dom-input-stepDown"><code>stepDown()</code></dfn>
+ <p>The <dfn title="dom-input-stepDown"><code>stepDown()</code></dfn>
+ and <dfn title="dom-input-stepUp"><code>stepUp()</code></dfn>
methods, when invoked, must run the following algorithm:</p>
<ol>
- <li><p>If the <code title="dom-input-stepUp">stepUp()</code> and
- <code title="dom-input-stepDown">stepDown()</code> methods do not
+ <li><p>If the <code title="dom-input-stepDown">stepDown()</code> and
+ <code title="dom-input-stepUp">stepUp()</code> methods do not
apply, as defined for the <code>input</code> element's <code
title="attr-input-type">type</code> attribute's current state, then
throw an <code>INVALID_ACCESS_ERR</code> exception, and abort these
@@ -58708,6 +58925,10 @@
XXX * dolphinling suggests having a way to mark certain parts of a
form as being dependent on another (mutually exclusive parts of
a form)
+ XXX * make the spec more consistent about its use of "hexadecimal"
+ and "base-sixteen", the order that 0-9 A-Z a-z is mentioned,
+ and the detail to which the spec explains how to interpret a
+ string as a hexadecimal number.
-->
</body>
More information about the Commit-Watchers
mailing list