HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
2766Filling in the rendering section: more <input> types -- date, number, range, color.2009-02-07 00:08
@@ -62632,35 +62632,35 @@ details { binding: <i title="">details</i>; }</pre>
 <!--
 XXX examples with screenshots
 http://mail.gnome.org/archives/usability/2006-June/msg00015.html
 -->
 
 
 
   <h4>The <code>input</code> element as a text entry widget</h4>
 
   <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
-input { binding: <i title="">textfield</i>; }
-input[type=password] { binding: <i title="">textfield-password</i>; }
+input { binding: <i title="">input-textfield</i>; }
+input[type=password] { binding: <i title="">input-password</i>; }
 /* later rules override this for other values of type="" */</pre>
 
-  <p>When the <i title="">textfield</i> binding applies to an
+  <p>When the <i title="">input-textfield</i> binding applies to an
   <code>input</code> element whose <code
   title="attr-input-type">type</code> attribute is in the <span
   title="attr-input-type-text">Text</span>, <span
   title="attr-input-type-search">Search</span>, <span
   title="attr-input-type-url">URL</span>, or <span
   title="attr-input-type-email">E-mail</span> state, the element is
   expected to render as an 'inline-block' box rendered as a text
   field.</p>
 
-  <p>When the <i title="">textfield</i> binding applies, to an
+  <p>When the <i title="">input-password</i> binding applies, to an
   <code>input</code> element whose <code
   title="attr-input-type">type</code> attribute is in the <span
   title="attr-input-type-password">Password</span> state, the element
   is expected to render as an 'inline-block' box rendered as a text
   field whose contents are obscured.</p>
 
   <p>If an <code>input</code> element whose <code
   title="attr-input-type">type</code> attribute is in one of the above
   states has a <code title="attr-input-size">size</code> attribute,
   and parsing that attribute's value using the <span>rules for parsing
@@ -62678,57 +62678,135 @@ input[type=password] { binding: <i title="">textfield-password</i>; }
   is expected to act as if it had a user-agent-level style sheet rule
   setting the 'width' property on the element to the value obtained
   from applying the <span>converting a character width to
   pixels</span> algorithm to the number 20.</p>
 
   <p>The <dfn>converting a character width to pixels</dfn> algorithm
   return <span>(<var title="">size-1</var>)&times;<var
   title="">avg</var>&nbsp;+&nbsp;<var title="">max</var></span>, where
   <var title="">size</var> is the character width to convert, <var
   title="">avg</var> is the average character width of the primary
-  font for the element for which the algorithm is being run, and <var
-  title="">max</var> is the maximum character width of that same
-  font. (The element's 'letter-spacing' property does not affect the
-  result.)</p>
+  font for the element for which the algorithm is being run, in
+  pixels, and <var title="">max</var> is the maximum character width
+  of that same font, also in pixels. (The element's 'letter-spacing'
+  property does not affect the result.)</p>
 
 
 
   <h4>The <code>input</code> element as domain-specific widgets</h4>
 
-  <p class="XXX">When an <code>input</code> element's <code
+  <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+input[type=datetime] { binding: <i title="">input-datetime</i>; }
+input[type=date] { binding: <i title="">input-date</i>; }
+input[type=month] { binding: <i title="">input-month</i>; }
+input[type=week] { binding: <i title="">input-week</i>; }
+input[type=time] { binding: <i title="">input-time</i>; }
+input[type=datetime-local] { binding: <i title="">input-datetime-local</i>; }
+input[type=number] { binding: <i title="">input-number</i>; }</pre>
+
+  <p>When the <i title="">datetime</i> binding applies to an
+  <code>input</code> element whose <code
+  title="attr-input-type">type</code> attribute is in the <span
+  title="attr-input-type-datetime">Date and Time</span> state, the
+  element is expected to render as an 'inline-block' box depicting a
+  Date and Time control.</p>
+
+  <p>When the <i title="">date</i> binding applies to an
+  <code>input</code> element whose <code
+  title="attr-input-type">type</code> attribute is in the <span
+  title="attr-input-type-date">Date</span> state, the element is
+  expected to render as an 'inline-block' box depicting a Date
+  control.</p>
+
+  <p>When the <i title="">month</i> binding applies to an
+  <code>input</code> element whose <code
   title="attr-input-type">type</code> attribute is in the <span
-  title="attr-input-type-datetime">Date and Time</span>, <span
-  title="attr-input-type-date">Date</span>, <span
-  title="attr-input-type-month">Month</span>, <span
-  title="attr-input-type-week">Week</span>, <span
-  title="attr-input-type-time">Time</span>, <span
-  title="attr-input-type-datetime-local">Local Date and Time</span> or
-  <span title="attr-input-type-number">Number</span> state...</p>
-  <!-- datalist presentation -->
+  title="attr-input-type-month">Month</span> state, the element is
+  expected to render as an 'inline-block' box depicting a Month
+  control.</p>
+
+  <p>When the <i title="">week</i> binding applies to an
+  <code>input</code> element whose <code
+  title="attr-input-type">type</code> attribute is in the <span
+  title="attr-input-type-week">Week</span> state, the element is
+  expected to render as an 'inline-block' box depicting a Week
+  control.</p>
+
+  <p>When the <i title="">time</i> binding applies to an
+  <code>input</code> element whose <code
+  title="attr-input-type">type</code> attribute is in the <span
+  title="attr-input-type-time">Time</span> state, the element is
+  expected to render as an 'inline-block' box depicting a Time
+  control.</p>
+
+  <p>When the <i title="">datetime-local</i> binding applies to an
+  <code>input</code> element whose <code
+  title="attr-input-type">type</code> attribute is in the <span
+  title="attr-input-type-datetime-local">Local Date and Time</span>
+  state, the element is expected to render as an 'inline-block' box
+  depicting a Local Date and Time control.</p>
+
+  <p>When the <i title="">number</i> binding applies to an
+  <code>input</code> element whose <code
+  title="attr-input-type">type</code> attribute is in the <span
+  title="attr-input-type-number">Number</span> state, the element is
+  expected to render as an 'inline-block' box depicting a Number
+  control.</p>
+
+  <p>These controls are all expected to be about one line high, and
+  about as wide as necessary to show the widest possible value.</p>
 
 
 
   <h4>The <code>input</code> element as a range control</h4>
 
-  <p class="XXX">When an <code>input</code> element's <code
+  <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+input[type=range] { binding: <i title="">input-range</i>; }</pre>
+
+  <p>When the <i title="">datetime</i> binding applies to an
+  <code>input</code> element whose <code
   title="attr-input-type">type</code> attribute is in the <span
-  title="attr-input-type-range">Range</span> state, ...</p>
-  <!-- datalist presentation -->
+  title="attr-input-type-range">Range</span> state, the element is
+  expected to render as an 'inline-block' box depicting a slider
+  control.</p>
+
+  <p>When the control is wider than it is tall, the control is
+  expected to be a horizontal slider, with the lowest value on the
+  right if the 'direction' property on this element has a computed
+  value of 'rtl', and on the left otherwise. When the control is
+  taller than it is wide, it is expected to be a vertical slider, with
+  the lowest value on the top.</p>
+
+  <p>Predefined suggested values (provided by the <code
+  title="attr-input-list">list</code> attribute) are expected to be
+  shown as tick marks on the slider, which the slider can snap to.</p>
 
 
 
   <h4>The <code>input</code> element as a color well</h4>
 
-  <p class="XXX">When an <code>input</code> element's <code
+  <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+input[type=color] { binding: <i title="">input-color</i>; }</pre>
+
+  <p>When the <i title="">datetime</i> binding applies to an
+  <code>input</code> element whose <code
   title="attr-input-type">type</code> attribute is in the <span
-  title="attr-input-type-color">Color</span> state, ...</p>
-  <!-- datalist presentation -->
+  title="attr-input-type-color">Color</span> state, the element is
+  expected to render as an 'inline-block' box depicting a color well,
+  which, when activated, provides the user with a color picker (e.g. a
+  color wheel or color palette) from which the color can be
+  changed.</p>
+
+  <p>Predefined suggested values (provided by the <code
+  title="attr-input-list">list</code> attribute) are expected to be
+  shown in the color picker interface, not on the color well
+  itself.</p>
 
 
 
   <h4>The <code>input</code> element as a check box widget</h4>
 
   <p class="XXX">When an <code>input</code> element's <code
   title="attr-input-type">type</code> attribute is in the <span
   title="attr-input-type-checkbox">Checkbox</span> state, ...</p>
 
 

|